*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000;color:#fff;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
#game{display:block;width:100vw;height:100vh;touch-action:none;background:#000}
#hud{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 8px);transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:12px;padding:8px 12px;background:rgba(0,0,0,0.35);backdrop-filter:blur(6px);border:1px solid #333;border-radius:12px;pointer-events:auto;font-weight:600;font-variant-numeric:tabular-nums}
#hud .left, #hud .right { display:flex; gap:12px; align-items:center; }
#hud button{background:#111;border:1px solid #444;color:#fff;padding:6px 10px;border-radius:8px}
#overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,0.6);z-index:10}
#overlay.hidden{display:none}
.modal{background:#0b0b10;border:1px solid #333;border-radius:12px;padding:16px 18px;max-width:min(90vw,520px)}
.modal h1{margin:0 0 12px 0;font-size:22px}
.controls{background:#111;border:1px solid #333;border-radius:8px;padding:10px 12px;white-space:pre-wrap;margin:8px 0 12px 0}


/* Fullscreen box art overlay */
.boxart-wrap{position:fixed;inset:0;display:grid;place-items:center;background:#000;z-index:10000}
.boxart-wrap img{max-height:100vh;height:100vh;width:auto;object-fit:contain;}

/* New HUD layout */
.hud-top{position:fixed;top:16px;left:50%;transform:translateX(-50%);display:flex;gap:20px;align-items:flex-start;z-index:20;pointer-events:none}
.hud-top .hud-metric{display:flex;flex-direction:column;align-items:center;min-width:80px}
.hud-top .num{font-size:20px;font-weight:700;line-height:1}
.hud-top .label{font-size:12px;opacity:0.85;margin-top:4px}

.hud-bottom{position:fixed;left:50%;bottom: 64px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:min(92vw,560px);z-index:20}
.hud-bottom #sfxBtn{margin-left:auto;background:#111;border:1px solid #444;color:#fff;padding:6px 10px;border-radius:8px}
.health-bar{flex:1;height:14px;background:#1a1a1a;border:1px solid #333;border-radius:10px;overflow:hidden}
.health-fill{height:100%;width:100%;background:#28c76f;transition:width 160ms linear, background-color 120ms linear}
.bombs{min-width:64px;text-align:left;font-weight:600}


/* Results screen styling */
.results-grid{ max-width:min(90vw,640px); background:#0b0f16; border:1px solid #1c2633; border-radius:14px; padding:22px 24px; }
.res-row{ display:flex; gap:28px; justify-content:space-between; border-bottom:1px solid #123; padding:10px 0; }
.res-row:last-child{ border-bottom:none; }
.res-block{ flex:1; }
.res-label{ white-space:nowrap;  font-size:12px; letter-spacing:1px; color:#a0b4c0; text-transform:uppercase; }
.res-value{ font-size:36px; font-weight:700; color:#36e0cf; margin-top:6px; font-variant-numeric: tabular-nums; }
.btn-primary{ background:transparent; border:0; color:#ff9a2f; font-weight:600; font-size:20px; cursor:pointer; }
.btn-primary:hover{ text-decoration:underline; }


/* Box art overlay full-screen */
.boxart-wrap{position:fixed; inset:0; background:#000; display:grid; place-items:center; z-index:10000; transition:opacity .6s ease;}
.boxart-wrap img{max-height:100vh; width:auto; height:auto; display:block;}


/* Subtle pulse when on streak */
@keyframes streakPulse {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.06); }
  100% { transform: translateX(-50%) scale(1); }
}
#hudTop .metric .num.pulse { animation: streakPulse 0.8s ease-in-out infinite; transform-origin: center; }




/* Hidden input to summon system keyboard on mobile */
.typesink{
  position: fixed;
  left: -9999px;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  color-scheme: dark;
  background: #0a0a0a;
  color: #fff;
  border: 0;
}






/* metric relative for badge */
.hud-top .metric{ position: relative; }



.modal button#restartBtn{
  display:block;
}

/* Box art fit */
#boxart, .boxart-wrap{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: #000;
  z-index: 10000;
}
#boxart img, .boxart-wrap img{
  max-height:100vh; max-width:100vw; width:auto; height:auto; object-fit:contain;
}

.modal.results { width: 520px; }


/* === Start Screen Background & Modal Offset === */
body.start-screen {
  background-image: url('graphics/startscreen.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.start-screen #overlay {
  background: rgba(0,0,0,0.55); /* see the start image behind modal */
}

body.start-screen #overlay .modal {
  margin-top: 25vh; /* move modal a quarter down from middle */
}



/* --- WPM Grade Pop Animation --- */
@keyframes gradePop {
  0%   { transform: scale(1); opacity: 1; }
  20%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
#hudTop #wpm.grade-pop,
#wpm.grade-pop {
  animation: gradePop 300ms ease-out;
  will-change: transform;
}


/* Results modal adjustments */
.modal.results {
  margin: 0 auto; /* equal left/right */
}

/* Styled Try Again button */
#restartBtn.btn-primary {
  background-color: #ff9800;
  border: none;
  color: #fff;
  font-size: 1.2em;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
#restartBtn.btn-primary:hover {
  background-color: #e68900;
}
#restartBtn.btn-primary:active {
  background-color: #cc7a00;
  transform: scale(0.96);
}


/* === Results modal refinements === */
.modal.results {
  margin-left: auto;
  margin-right: auto;        /* center horizontally */
  padding: 24px 32px;        /* even left/right padding */
}
.results-grid {
  padding-left: 0;
  padding-right: 0;
}
.modal.results .res-row {
  gap: 48px;
}
/* Button styling & states for Try Again */
.btn-primary {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 12px;
  background: #ff9f1a;
  color: #0b1220;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 80ms ease, filter 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.btn-primary:hover {
  filter: brightness(1.08);
}
.btn-primary:active {
  transform: translateY(1px) scale(0.99);
  filter: brightness(0.96);
}


/* === Start Screen Overlay === */
.start-screen{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: grid;
  place-items: center;
  z-index: 99999;
  opacity: 1;
  transition: opacity 600ms ease;
}
.start-screen.fade-out{ opacity: 0; pointer-events: none; }

.start-img{
  width: min(920px, 92vw);
  height: auto;
  display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  border-radius: 12px;
}

.loading-wrap{
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  font: 600 18px/1.2 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: #e8f7ff;
  text-shadow: 0 0 12px rgba(80,200,255,0.75);
  letter-spacing: 0.04em;
  display: flex; align-items: baseline;
}

.loading-text{ margin-right: 4px; }

.loading-anim::after{
  content: '...';
  animation: loadingDots 1s steps(3, end) infinite;
  display: inline-block;
  width: 1.5em;
  text-align: left;
  overflow: hidden;
}
@keyframes loadingDots{
  0% { clip-path: inset(0 1.5em 0 0); }
  33%{ clip-path: inset(0 1em 0 0); }
  66%{ clip-path: inset(0 0.5em 0 0); }
  100%{ clip-path: inset(0 0 0 0); }
}


/* === Leaderboard & Score Submit === */
.submit-row{ margin-top: 16px; display: flex; justify-content: center; }
.initials-wrap{ display:flex; align-items:center; gap:10px; flex-wrap: wrap; }
.initials-label{ opacity:0.9; font-size:14px; }
.initials-input{
  width:80px; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); color:#e9fbff; text-transform:uppercase; font-weight:700; letter-spacing:0.08em; text-align:center;
}
.btn-primary.small{ padding:8px 12px; border-radius:10px; font-size:14px; }
.submit-msg{ font-size:14px; opacity:0.9; min-height:20px; }

.leaderboard{ margin-top: 18px; background: rgba(255,255,255,0.03); border-radius: 14px; padding: 10px; }
.lb-title{ font-weight:900; letter-spacing:0.06em; margin-bottom: 8px; opacity: 0.9; }
.lb-body{ display:flex; flex-direction:column; gap:6px; max-height: 360px; overflow:auto; }
.lb-row{ display:grid; grid-template-columns: 40px 90px 90px 80px 90px 70px 100px 80px 160px; gap:10px; align-items:center; padding:6px 8px; border-bottom:1px solid rgba(255,255,255,0.07); }
.lb-head{ font-weight:700; opacity:0.8; background: rgba(255,255,255,0.04); border-radius: 8px; }
.lb-empty,.lb-error,.lb-loading{ padding:14px; opacity:0.85; }


/* Hide submit row by default; shown only if pre-check says score qualifies for Top 10 */
.submit-row{ display:none; }
.submit-row.show{ display:flex; }


/* Leaderboard header row */
.lb-header .c { font-weight: 700; text-transform: uppercase; opacity: 0.9; }


/* === Results & Leaderboard layout tweaks === */
.results, .results-container, .overlay .results { 
  max-width: 980px; 
  width: 92%; 
  margin: 0 auto; 
}
.leaderboard { font-size: 0.9rem; } /* slightly smaller text */
.lb-title { text-align: center; color: #4deeea; letter-spacing: 0.06em; font-weight: 800; }
.lb-row { display: flex; align-items: center; }
.lb-row .c { flex: 1 1 0; padding: 6px 8px; }
.lb-row .c.rank { flex: 0 0 64px; text-align: right; }
.lb-header .c { font-weight: 700; text-transform: uppercase; opacity: 0.95; }

/* Buttons side-by-side */
.submit-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.initials-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.initials-input { max-width: 90px; text-transform: uppercase; }

/* Teal button for Try Again */
.btn-teal{ background:transparent; border:0; color:#4deeea; font-weight:600; font-size:20px; cursor:pointer; }
.btn-teal:hover{ text-decoration:underline; }
.btn-primary.small, .btn-teal.small { padding: 8px 12px; font-size: 0.95em; }

/* Make the leaderboard grid fit better on small screens */
@media (max-width: 640px){
  .lb-row .c.rank { flex-basis: 48px; }
  .leaderboard { font-size: 0.85rem; }
}



/* === AUTO-INJECTED: results/leaderboard fit & button styles === */

/* === Fit results + leaderboard columns without horizontal scroll === */
.overlay .results, .results-grid { max-width: 980px; width: 96%; }
.modal.results { max-width: 980px; width: 96%; }


.lb-body { overflow-x: hidden; }


/* Responsive leaderboard columns */
.lb-row { display: flex; align-items: center; gap: 6px; }
.lb-row .c { padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .c.rank { flex: 0 0 48px; text-align: right; }
.lb-row .c.init { flex: 1 1 24%; min-width: 90px; }
.lb-row .c.score { flex: 0 0 90px; text-align: right; }
.lb-row .c.wpm { flex: 0 0 70px; text-align: right; }
.lb-row .c.combo { flex: 0 0 90px; text-align: right; }
.lb-row .c.wave { flex: 0 0 64px; text-align: right; }

/* Smaller font to fit columns comfortably */
.leaderboard { font-size: 0.9rem; }
@media (max-width: 640px){
  .leaderboard { font-size: 0.85rem; }
  .lb-row .c.init { flex-basis: 30%; }
}


/* Teal button same sizing as Save */
.btn-teal.small { padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.btn-teal { background: #14b8a6; border: 0; color: #002a2a; font-weight: 600; cursor: pointer; }
.btn-teal:hover { filter: brightness(0.95); }


/* Buttons inline */
.submit-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }



/* === AUTO-INJECTED (0823): Fit modal width + top3 row colors === */

/* Make the results modal wide enough to fit all columns without horizontal scrolling */
.modal.results, .results-grid { width: 96vw; max-width: 1100px; }
#overlay .modal.results .leaderboard .lb-body { overflow-x: hidden; }

/* Ensure leaderboard rows flex & truncate nicely */
.leaderboard .lb-row { display: flex; align-items: center; gap: 6px; }
.leaderboard .lb-row .c { padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaderboard .lb-row .c.rank { flex: 0 0 56px; text-align: right; }
.leaderboard .lb-row .c.init { flex: 1 1 28%; min-width: 90px; }
.leaderboard .lb-row .c.score { flex: 0 0 110px; text-align: right; }
.leaderboard .lb-row .c.wpm { flex: 0 0 80px; text-align: right; }
.leaderboard .lb-row .c.combo { flex: 0 0 110px; text-align: right; }
.leaderboard .lb-row .c.wave { flex: 0 0 80px; text-align: right; }

@media (max-width: 700px){
  .modal.results, .results-grid { width: 96vw; max-width: 980px; }
  .leaderboard { font-size: 0.9rem; }
  .leaderboard .lb-row .c.init { flex-basis: 34%; }
  .leaderboard .lb-row .c.score { flex-basis: 92px; }
  .leaderboard .lb-row .c.combo { flex-basis: 92px; }
}

/* Rank highlight backgrounds */
.leaderboard .lb-row.rank-1 { background: #008083; color:#fff; border-radius: 8px; }
.leaderboard .lb-row.rank-2 { background: #269A90; color:#fff; border-radius: 8px; }
.leaderboard .lb-row.rank-3 { background: #4DB39C; color:#fff; border-radius: 8px; }

/* Keep header styled and not affected by rank rules */
.leaderboard .lb-header { background: rgba(255,255,255,0.08) !important; color: inherit; }



/* highlight effect when scrolling to saved row */
.lb-row.highlight { outline: 2px solid rgba(255,255,255,0.7); box-shadow: 0 0 0 9999px rgba(0,0,0,0.0) inset; }


/* Sticky header for leaderboard */
.lb-body { position: relative; overflow-y: auto; max-height: 480px; }
.lb-header { position: sticky; top: 0; z-index: 2; background: rgba(0,0,0,0.85); }



/* === Sticky leaderboard header within results modal === */
.lb-body { position: relative; }
.lb-body .lb-header.lb-row { 
  position: sticky; 
  top: 0; 
  z-index: 2; 
  background: rgba(255,255,255,0.06); 
  border-bottom: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(2px);
}



/* === OVERRIDES: 2025-08-24 Max width + accuracy column === */
.modal,
.results,
.results-container,
.leaderboard {
  max-width: 650px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure leaderboard rows fit 7 columns (#, PLAYER, SCORE, WPM, COMBO, LEVEL, ACC) */
.leaderboard .lb-row {
  display: grid;
  grid-template-columns: 40px 1.2fr 1fr 0.9fr 0.9fr 0.9fr 0.9fr;
  gap: 8px;
  align-items: center;
}

/* Header sticks inside the scroll body */
.leaderboard .lb-header.lb-row { position: sticky; top: 0; z-index: 2; }

/* Slightly tighten fonts to fit within 650px */
.leaderboard { font-size: 0.9rem; }
@media (max-width: 420px) {
  .leaderboard { font-size: 0.85rem; }
  .leaderboard .lb-row { grid-template-columns: 32px 1fr 0.9fr 0.8fr 0.8fr 0.8fr 0.8fr; }
}


/* === OVERRIDE: 2025-08-24 limit modal width === */
.modal.results,
.results-grid {
  max-width: 700px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/* === OVERRIDE: Style Start button like Try Again (teal) === */
#startBtn {
  background: #14b8a6;
  border: 0;
  color: #002a2a;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
#startBtn:hover { filter: brightness(0.95); }
#startBtn:active { transform: scale(0.97); }


/* Override submit-row style */
.submit-row {
  background: grey !important;
  margin: 5px !important;
  padding: 8px;
  border-radius: 6px;
}


/* === AUTO: Center all leaderboard text (titles + rows) === */
.leaderboard, .leaderboard th, .leaderboard td, .lb-row .c, .lb-header .c {
  text-align: center !important;
  justify-content: center !important; /* for flex cells */
}

/* === AUTO: Initials input is white background === */
.initials-input {
  background: #ffffff !important;
  color: #000 !important;
}

/* === AUTO: Greyed, inactive Save button when disabled === */
#submitScoreBtn[disabled],
.btn-primary.disabled {
  background: #777 !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* (Optional quality-of-life) ensure submit row spacing looks clean */
.submit-row {
  background: grey;
  margin: 5px;
  padding: 8px;
  border-radius: 6px;
}


/* === 2025-08-25 UI Spec: Top HUD unified === */
.hud-top{position:fixed; top:12px; left:50%; transform:translateX(-50%); width:min(96vw, 1100px); display:flex; flex-direction:column; gap:10px; z-index:20; pointer-events:none;}
.hud-top .hud-row{display:flex; align-items:center; gap:12px; width:100%;}
.hud-top .top-row .shieldIcon{font-size:18px; line-height:1; margin-left:8px;}
.hud-top .health-bar{flex:1; height:18px; background:#14181f; border:1px solid #273344; border-radius:999px; overflow:hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);}
.hud-top .health-fill{height:100%; width:100%; background:#28c76f; transition:width 160ms linear, background-color 120ms linear; border-radius:999px;}
.hud-top .bombs{min-width:64px; text-align:left; font-weight:700; pointer-events:auto;}
.hud-top .music-btn{pointer-events:auto; margin-left:auto; background:rgba(25,28,35,0.9); border:1px solid #2d394a; color:#cfe7ff; padding:10px 12px; border-radius:14px; font-size:20px; line-height:1; box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset;}
.hud-top .stats-row{justify-content:flex-start; gap:48px; padding-left:6px;}
.hud-top .hud-metric{display:flex; flex-direction:column; align-items:flex-start;}
.hud-top .hud-metric .label{font-size:13px; opacity:0.9; margin-top:2px;}
.hud-top .hud-metric .num{ font-size:22px; font-weight:800; line-height:1; letter-spacing:1px; text-align:left; }
/* Keep UI clickable */
.hud-top button, .hud-top .bombs{pointer-events:auto;}


/* Right-align numbers and allow score to expand pushing right side content */
.hud-top .stats-row{ display:flex; gap:48px; }
.hud-top .hud-metric .num{ font-size:22px; font-weight:800; line-height:1; letter-spacing:1px; text-align:left; } /* grow as needed */


.hud-top .bombs .bombIcon{ display:inline-block; vertical-align:middle; margin-right:6px; }


/* Neon impact pulse on score */
@keyframes scorePulse { 0%{ text-shadow:0 0 0px rgba(116,238,21,0); } 30%{ text-shadow:0 0 14px #74ee15, 0 0 24px rgba(255,231,0,0.6);} 100%{ text-shadow:0 0 0px rgba(116,238,21,0);} }
#score.score-hit{ animation: scorePulse 220ms ease-out; }


/* Ensure HUD & music button are above all layers */
#hudTop{ z-index: 99999 !important; position: fixed; }
#hudTop .music-btn{ z-index: 100000 !important; position: relative; pointer-events: auto; }
canvas#game{ position: relative; z-index: 1; }

#hudTop.hud-hidden{ display:none !important; }


/* === Floating Music Toggle Button (always on top) === */
#musicBtn{
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000000 !important;
  pointer-events: auto;
  background: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
  font-size: 20px;
  border-radius: 10px;
  padding: 6px 10px;
}
#musicBtn:hover{ background: rgba(255,255,255,0.2); }


/* === Health bar glow === */
#healthFill{ background: rgba(12, 215, 120, 0.75); border-radius: 999px; transition: width 160ms linear, background 200ms ease; 
  box-shadow: 0 0 14px rgba(0,255,135,0.65), inset 0 0 8px rgba(255,255,255,0.15);
  transition: width 160ms linear, box-shadow 200ms ease;
}
#healthFill.glow-strong{
  box-shadow: 0 0 22px rgba(0,255,160,0.9), 0 0 44px rgba(0,255,160,0.4), inset 0 0 10px rgba(255,255,255,0.2);
}
@keyframes pulseHealth {
  0%   { box-shadow: 0 0 10px rgba(0,255,135,0.5); }
  50%  { box-shadow: 0 0 20px rgba(0,255,160,0.9); }
  100% { box-shadow: 0 0 10px rgba(0,255,135,0.5); }
}
#healthFill.pulse { animation: pulseHealth 1.6s ease-in-out infinite; }

/* === Health track outer glow v2 === */
#health, #healthBar, .health-track{
  position: relative;
  filter: drop-shadow(0 0 12px rgba(0,255,160,0.65)) drop-shadow(0 0 26px rgba(0,255,160,0.35));
}