*{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}
body {color-scheme: dark;}
#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: transparent;z-index:10}
#overlay.hidden{display:none}
.modal{display:flex;flex-direction:column;align-items:center;background:#0b0b10;opacity: 0.60; border:1px solid #333;border-radius:12px;padding:16px 18px;max-width:min(90vw,520px)}
.modal h1{margin:0 0 12px 0;font-size:30px; color: #FFFFFF; font-weight: bold}
.modal h2{margin:0 0 12px 0;font-size:16px; color: #00FFFF;}
.controls{text-align:center; ;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:relative;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: rgba(160,160,160,0.25);border:none;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; display:flex; flex-direction:column; justify-content:flex-start; }
.res-label{ white-space:nowrap;  font-size:12px; letter-spacing:1px; color:#a0b4c0; text-transform:uppercase; }
.res-points{ color:#39ff14; }
.res-value{ margin-top:2px;  font-size:28px; font-weight:700; color:#00FFFF; 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; }

/* Lock down HUD counters: no jiggle */
#pCount-bomb,
#pCount-gravity,
#pCount-slow,
#bombs {
  display: inline-block;
  min-width: 4ch;                 /* reserve room for 0..999 (bump to 5ch if needed) */
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1; /* consistent digit widths */
  -webkit-font-smoothing: antialiased;
  will-change: contents;          /* cheap hint for text-only updates */
}

/* Render the leading "x" as a fixed-width slot so width never changes */
#pCount-bomb::before,
#pCount-gravity::before,
#pCount-slow::before,
#bombs::before {
  
  display: inline-block;
  width: 1ch;                     /* constant width for the "x" */
  margin-right: 0.25ch;
  text-align: left;
  opacity: 0.9;                   /* tweak to taste */
}

/* If your HUD bar moves other elements, be sure it's out of flow */
#hudBar {
  position: absolute;             /* or fixed; whichever you use */
  top: 8px; left: 8px; right: 8px;
  display: grid;
  grid-auto-flow: column;
  gap: 12px;
  align-items: center;
  pointer-events: none;
  transform: translateZ(0);       /* own compositor layer */
}


/* 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 1.40s ease-in-out infinite; transform-origin: center; }


/* Stronger glow for shard impacts */
.score-hit{
  text-shadow: 0 0 6px rgba(255,255,255,0.9), 0 0 16px rgba(255,220,80,0.9);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.9)) drop-shadow(0 0 16px rgba(255,220,80,0.85));
}

#startModal img, .start-art img, #boxart, .boxart, .start-image {
  height: 100vh;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
#startModal .content, .start-modal .content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* 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{ display:flex; flex-direction:column; justify-content:flex-start;  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 {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 1;
  transition: opacity 800ms ease;
  pointer-events: none; /* don't intercept clicks */
 overflow:hidden; }

.start-screen.fade-out {
  opacity: 0;
}

body.start-screen #overlay {
  background: rgba(0,0,0,0.55); /* see the start image behind 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;
  display: grid;
  place-items: center;
  z-index: 10000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 1;
  transition: opacity 800ms ease;
  pointer-events: none; /* don't intercept clicks */
}
.start-screen.fade-out {
  opacity: 0;
}

.start-img{ height: 70vh; width: auto; max-width: 70vw; object-fit: contain; display:block; }

.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 1.75s 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.18); 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.09); 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; background: rgba(0,0,0,0.20); 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{ }
.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: #00FFFF; 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:#00FFFF; 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;  }
.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: #00FFFF; 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; }

/* 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;  }
.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: #00FFFF; color:#fff; border-radius: 8px; }
.leaderboard .lb-row.rank-3 { background: #00FFFF; 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.18); 
  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: #00FFFF;
  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:relative; 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{ justify-content:center;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:14px;background: rgba(160,160,160,0.25);border:none;border-radius:10px;overflow:hidden}
.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.18); }


/* === Health bar glow === */
#healthFill{ background: rgba(12, 215, 120, 0.5); border-radius: 999px; transition: width 160ms linear, background 200ms ease; opacity:0.5; box-shadow: 0 0 14px rgba(0,255,135,0.55), inset 0 0 8px rgba(255,255,255,0.12); }
#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 2.80s 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));
}


.hud-powerups{position:static;display:flex;flex-wrap:nowrap;gap: 8px;z-index:20;background:rgba(0,0,0,0.35);backdrop-filter:blur(6px);border:1px solid #333;border-radius:12px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));user-select:none;pointer-events:none;transform-origin:right top;will-change:transform,left,top; background: transparent !important;  background:transparent !important; overflow:visible;  background:none !important; }




.hud-powerups .p-icon{ margin-right:  2px; display:inline-block;position:relative;width:48px;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.95;
  opacity:1 !important;
}

.hud-powerups .p-bomb{background-image:url('../graphics/PowerupD.png');}
.hud-powerups .p-gravity{background-image:url('../graphics/PowerupE.png');}
.hud-powerups .p-slow{background-image:url('../graphics/PowerupB.png');}
.hud-powerups .p-count{ margin-left:  2px; display:inline-block; position:relative;   
  font-weight:800; font-size:18px; letter-spacing:1px; text-shadow:0 1px 2px rgba(0,0,0,.5); color:#fff; }

.hud-powerups .p-slot::after{display:none;}
/* Hide legacy bombs badge if present (we use inventory HUD now) */
.bombs{display:none;}


/* === Inventory HUD (below health bar) === */
.hud-powerups{position:static;display:flex;flex-wrap:nowrap;gap: 8px;z-index:20;background:rgba(0,0,0,0.35);backdrop-filter:blur(6px);border:1px solid #333;border-radius:12px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));user-select:none;pointer-events:none;transform-origin:right top;will-change:transform,left,top;}

.hud-powerups .p-icon{ margin-right:  2px; display:inline-block;position:relative;width:48px;
  background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.95;}
.hud-powerups .p-bomb{background-image:url('../graphics/PowerupD.png');}
.hud-powerups .p-gravity{background-image:url('../graphics/PowerupE.png');}
.hud-powerups .p-slow{background-image:url('../graphics/PowerupB.png');}
.hud-powerups .p-count{ margin-left:  2px; display:inline-block; position:relative;   
  font-weight:800; font-size:18px; letter-spacing:1px; text-shadow:0 1px 2px rgba(0,0,0,.5); color:#fff; }

.hud-powerups .p-slot::after{display:none;}

.hud-powerups .p-slot.selected{outline:2px solid #28c76f;box-shadow:0 0 12px rgba(40,199,111,0.65), inset 0 0 10px rgba(40,199,111,0.25);}

/* Stronger semi-transparency for power-up HUD slots */
.hud-powerups .p-slot{
  position:relative; width: 124px; height: 46px; border-radius:12px;
   /* more transparent */
  
  outline:1.5px solid rgba(40,199,111,0.55);
  background: transparent !important; display:flex; align-items:center; justify-content:center; gap: 4px; padding:6px 12px; 
  display:flex !important;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:8px;

  background:none !important;
  height:32px !important;
}





/* === Power-Up HUD Overrides (force no-fill, visible icons, compact height) === */
.hud-powerups{ background:transparent !important; backdrop-filter:none !important; box-shadow:none !important; }
.hud-powerups .p-slot{
  background:transparent !important; backdrop-filter:none !important; box-shadow:none !important;
  display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important;
  gap: 4px !important; padding:6px 12px !important;
  height:46px !important; width:auto !important;
  border:none !important; outline:1.5px solid rgba(40,199,111,0.55) !important; border-radius:12px !important;
}
.hud-powerups .p-slot.selected{ outline:2px solid #28c76f !important; box-shadow:0 0 18px rgba(40,199,111,0.65), inset 0 0 10px rgba(40,199,111,0.25) !important; }
.hud-powerups .p-icon{
  position:relative !important; left:auto !important; top:auto !important;
  width:42px !important; height: 42px !important; margin-right:  4px !important;
  background-size:contain !important; background-position:center !important; background-repeat:no-repeat !important;
  opacity:1 !important;
}
.hud-powerups .p-count{
  position:relative !important; left:auto !important; top:auto !important; transform:none !important;
  display:inline-block !important; margin-left:  4px !important;
  font-size:16px !important; font-weight:800 !important; line-height:1 !important; color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.5) !important;
}


/* Score change bump animation */
@keyframes scoreBump { 
  0% { transform: scale(1); }
  25% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.score-bump { animation: scoreBump 180ms ease-in-out; }


/* Selected slot: strong bright outline */
.hud-powerups .p-slot.selected{
  outline:2px solid #28c76f !important;
  box-shadow:0 0 18px rgba(40,199,111,0.65), inset 0 0 10px rgba(40,199,111,0.25) !important;
}

/* Non-selected slots: faint outline */
.hud-powerups .p-slot:not(.selected){
  outline:1.5px solid rgba(40,199,111,0.25) !important;
  box-shadow:none !important;
}

/* Ensure powerup HUD reappears after results */
#powerupHUD{ visibility: visible; opacity: 1; z-index: 20; }
body.results-open #powerupHUD{ visibility: hidden; opacity: 0; }


/* === Streak Center Banner === */
#streakBanner {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 0.2rem 1.2rem;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 240, 80, 0.35)) drop-shadow(0 0 8px rgba(255, 230, 0, 0.6));
  text-shadow: 0 0 18px rgba(255, 240, 120, 0.85), 0 0 60px rgba(255, 200, 0, 0.45);
  z-index: 1000;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
   pointer-events: none;  width: 80vw; max-width: 80vw; margin: 0 auto; overflow: visible; padding-block: 6px; }




#streakBanner .inner {
  margin: 0 8px;

  
  padding: 0.25rem 1rem;
  border-radius: 18px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255, 248, 80, 0.18), rgba(255, 230, 0, 0.03) 70%, rgba(255,255,255,0) 75%);
 white-space: nowrap; display: inline-block; max-width: 100%; overflow: visible; line-height: 1.08;  font-size: 56px; }

#streakBanner.show {
  animation: streak-pop 1400ms cubic-bezier(.19,.79,.26,1) forwards;
}
@keyframes streak-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.86); filter: drop-shadow(0 0 2px rgba(255, 240, 80, 0.0)); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  24%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.0); }
}
/* Responsive sizing */
@media (min-width: 1100px){
  #streakBanner {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 0.2rem 1.2rem;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 240, 80, 0.35)) drop-shadow(0 0 8px rgba(255, 230, 0, 0.6));
  text-shadow: 0 0 18px rgba(255, 240, 120, 0.85), 0 0 60px rgba(255, 200, 0, 0.45);
  z-index: 1000;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  overflow: visible; pointer-events: none; }
}
@media (min-width: 740px) and (max-width: 1099px){
  #streakBanner {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 0.2rem 1.2rem;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 240, 80, 0.35)) drop-shadow(0 0 8px rgba(255, 230, 0, 0.6));
  text-shadow: 0 0 18px rgba(255, 240, 120, 0.85), 0 0 60px rgba(255, 200, 0, 0.45);
  z-index: 1000;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  overflow: visible; pointer-events: none; }
}
@media (max-width: 739px){
  #streakBanner {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 0.2rem 1.2rem;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 240, 80, 0.35)) drop-shadow(0 0 8px rgba(255, 230, 0, 0.6));
  text-shadow: 0 0 18px rgba(255, 240, 120, 0.85), 0 0 60px rgba(255, 200, 0, 0.45);
  z-index: 1000;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  overflow: visible; pointer-events: none; }
}


/* === Streak Center Banner (Teal 75% screen) === */
#streakBanner {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 0.2rem 1.2rem;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 240, 80, 0.35)) drop-shadow(0 0 8px rgba(255, 230, 0, 0.6));
  text-shadow: 0 0 18px rgba(255, 240, 120, 0.85), 0 0 60px rgba(255, 200, 0, 0.45);
  z-index: 1000;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  overflow: visible; pointer-events: none; }
#streakBanner .inner {
  margin: 0 8px;

  display:inline-block;
  padding: 0.25rem 1rem;
  border-radius: 18px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255, 248, 80, 0.18), rgba(255, 230, 0, 0.03) 70%, rgba(255,255,255,0) 75%);
}
#streakBanner.show {
  animation: streak-pop-teal 1000ms cubic-bezier(.19,.79,.26,1) forwards;
}
@keyframes streak-pop-teal {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.84); }
  12%  { opacity: 0.75; transform: translate(-50%, -50%) scale(1.08); }
  24%  { opacity: 0.75; transform: translate(-50%, -50%) scale(1.00); }
  70%  { opacity: 0.75; }
  100% { opacity: 0.0; transform: translate(-50%, -50%) scale(1.00); }
}


/* --- Results modern grid + animation --- */
.metrics-grid{
  display:grid;
  grid-template-columns:  1.6fr 1fr 1fr;
  gap: 20px 28px;
  align-items:start;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:14px;
  margin-bottom:14px;
}
.metric .label{ margin-bottom:2px; 
  font-size:.86rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#a7b0b6;
}
.metric .value{ color:#4deeea; font-size:36px; font-weight:800; line-height:1.06; font-variant-numeric: tabular-nums; }
.metric .value.big{ color:#74ee15; } }
.metric.glow .value{ text-shadow: 0 0 12px rgba(255,212,77,.55), 0 0 30px rgba(255,212,77,.35); }
.metric.glow .label{ color:#ffeaa3; }

.bonus-chip{
  position:relative;
  top:6px;
  display:inline-block;
  padding:4px 10px;
  border-radius:10px;
  background:#ffd44d;
  color:#1a1400;
  font-weight:800;
  font-size:13px;
  letter-spacing:.06em;
  opacity:0;
  transform: translateY(6px) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}
.bonus-chip.show{ opacity:1; transform: translateY(0) scale(1); }

  display:flex;
  align-items:center;
  gap:12px;
  background: rgba(255,255,255,.25);
  padding:12px 14px;
  border-radius:12px;
  margin: 10px 0 18px;
}
.initials-input{
  width: 96px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing:.2em;
  text-align:center;
  padding:10px 12px;
  border-radius:12px;
  border:none;
  outline:none;
}

/* Normalize results value sizes */
.metric .value.big{ /* normalized */ } }


/* Auto-fit values within their metric cells */
.metric .value {
  white-space: nowrap;
  overflow: hidden;
}
.metric .value.fit-shrink { /* JS will manage computed font size down to min */
  will-change: font-size;
}

.metrics-grid{ align-items:start; }
.results.slow-anim *{ animation-duration: 1.5s !important; transition-duration: 1.2s !important; }
#res-points{ color:#39ff14; }


/* --- Announce variants --- */
#streakBanner.announce-default .inner {
  background: radial-gradient(60% 80% at 50% 50%, rgba(255,255,255,0.18), rgba(255,255,255,0.06) 70%, rgba(255,255,255,0) 75%);
  color: #fff;
}
#streakBanner.announce-level .inner {
  background: radial-gradient(60% 80% at 50% 50%, rgba(0,204,255,0.22), rgba(0,120,220,0.06) 70%, rgba(0,120,220,0) 75%);
  color: #bff0ff;
  filter: drop-shadow(0 0 24px rgba(0,180,255,0.35));
}
#streakBanner.announce-streak .inner {
  background: radial-gradient(60% 80% at 50% 50%, rgba(80,255,150,0.22), rgba(40,180,120,0.06) 70%, rgba(0,150,90,0) 75%);
  color: #d7ffe8;
  filter: drop-shadow(0 0 24px rgba(60,255,160,0.32));
}
#streakBanner.announce-power .inner {
  background: radial-gradient(60% 80% at 50% 50%, rgba(255,170,60,0.22), rgba(255,120,0,0.06) 70%, rgba(255,120,0,0) 75%);
  color: #fff0e0;
  filter: drop-shadow(0 0 24px rgba(255,150,60,0.34));
}

/* Stronger pop (fade+scale) */
@keyframes announce-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  32%  { opacity: 1; transform: translate(-50%, -50%) scale(1.00); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.98); }
}
#streakBanner.show {
  animation: announce-pop 1200ms cubic-bezier(.2,.8,.25,1) forwards;
}


/* --- Announce root color overrides by type --- */
#streakBanner.announce-level {
  filter: drop-shadow(0 0 30px rgba(0,255,255,0.35)) drop-shadow(0 0 8px rgba(0,255,255,0.6));
  text-shadow: 0 0 18px rgba(0,255,255,0.85), 0 0 60px rgba(0,255,255,0.45);
}
#streakBanner.announce-streak {
  filter: drop-shadow(0 0 30px rgba(57,255,20,0.35)) drop-shadow(0 0 8px rgba(57,255,20,0.6));
  text-shadow: 0 0 18px rgba(57,255,20,0.9), 0 0 60px rgba(57,255,20,0.5);
}
#streakBanner.announce-power {
  filter: drop-shadow(0 0 30px rgba(255,255,51,0.35)) drop-shadow(0 0 8px rgba(255,255,51,0.6));
  text-shadow: 0 0 18px rgba(255,255,51,0.9), 0 0 60px rgba(255,255,51,0.5);
}

/* Inner backgrounds aligned to neon hues */
#streakBanner.announce-level .inner {
  background: radial-gradient(60% 80% at 50% 50%, rgba(0,255,255,0.22), rgba(0,180,220,0.06) 70%, rgba(0,180,220,0) 75%);
  color: #e6ffff;
}
#streakBanner.announce-streak .inner {
  background: radial-gradient(60% 80% at 50% 50%, rgba(57,255,20,0.22), rgba(40,180,80,0.06) 70%, rgba(40,180,80,0) 75%);
  color: #eaffea;
}
#streakBanner.announce-power .inner {
  background: radial-gradient(60% 80% at 50% 50%, rgba(255,255,51,0.22), rgba(255,240,90,0.08) 70%, rgba(255,240,90,0) 75%);
  color: #fffddb;
}

/* === Announce sizing & glow refinements (v2) === */
#streakBanner {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 0.2rem 1.2rem;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 240, 80, 0.35)) drop-shadow(0 0 8px rgba(255, 230, 0, 0.6));
  text-shadow: 0 0 18px rgba(255, 240, 120, 0.85), 0 0 60px rgba(255, 200, 0, 0.45);
  z-index: 1000;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  overflow: visible; pointer-events: none; }

#streakBanner .inner {
  margin: 0 8px;

  display:inline-block;
  padding: 0.25rem 1rem;
  border-radius: 18px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255, 248, 80, 0.18), rgba(255, 230, 0, 0.03) 70%, rgba(255,255,255,0) 75%);
}

/* Minimal glow so it doesn't hit container edges */
#streakBanner {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 0.2rem 1.2rem;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 240, 80, 0.35)) drop-shadow(0 0 8px rgba(255, 230, 0, 0.6));
  text-shadow: 0 0 18px rgba(255, 240, 120, 0.85), 0 0 60px rgba(255, 200, 0, 0.45);
  z-index: 1000;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  overflow: visible; pointer-events: none; }

/* Per-type neon variants with restrained glow */
#streakBanner.announce-level {
  filter: drop-shadow(0 0 4px rgba(0,255,255,0.3));
  text-shadow: 0 0 6px rgba(0,255,255,0.5);
  color: #bfffff;
}
#streakBanner.announce-streak {
  filter: drop-shadow(0 0 4px rgba(57,255,20,0.3));
  text-shadow: 0 0 6px rgba(57,255,20,0.55);
  color: #dfffdf;
}
#streakBanner.announce-power {
  filter: drop-shadow(0 0 4px rgba(255,255,51,0.3));
  text-shadow: 0 0 6px rgba(255,255,51,0.55);
  color: #ffffe0;
}

/* Faster pop for power switching remains */
#streakBanner.announce-power.show {
  animation-duration: 480ms;
}

/* === Announce: Floating Text Only (no banner bg) === */
#streakBanner {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 0.2rem 1.2rem;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 240, 80, 0.35)) drop-shadow(0 0 8px rgba(255, 230, 0, 0.6));
  text-shadow: 0 0 18px rgba(255, 240, 120, 0.85), 0 0 60px rgba(255, 200, 0, 0.45);
  z-index: 1000;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  overflow: visible; pointer-events: none; }

#streakBanner .inner {
  margin: 0 8px;

  display:inline-block;
  padding: 0.25rem 1rem;
  border-radius: 18px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255, 248, 80, 0.18), rgba(255, 230, 0, 0.03) 70%, rgba(255,255,255,0) 75%);
}

/* Ensure all variant .inner backgrounds are transparent */
#streakBanner.announce-level .inner,
#streakBanner.announce-streak .inner,
#streakBanner.announce-power .inner,
#streakBanner.announce-default .inner {
  background: transparent !important;
}

/* Keep the reduced glow from previous pass (small radii) */
#streakBanner {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 0.2rem 1.2rem;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 240, 80, 0.35)) drop-shadow(0 0 8px rgba(255, 230, 0, 0.6));
  text-shadow: 0 0 18px rgba(255, 240, 120, 0.85), 0 0 60px rgba(255, 200, 0, 0.45);
  z-index: 1000;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  overflow: visible; pointer-events: none; }
#streakBanner.announce-level { 
  filter: drop-shadow(0 0 4px rgba(0,255,255,0.28)); 
  text-shadow: 0 0 6px rgba(0,255,255,0.45);
  color: #bfffff;
}
#streakBanner.announce-streak { 
  filter: drop-shadow(0 0 4px rgba(57,255,20,0.28)); 
  text-shadow: 0 0 6px rgba(57,255,20,0.5);
  color: #dfffdf;
}
#streakBanner.announce-power { 
  filter: drop-shadow(0 0 4px rgba(255,255,51,0.28)); 
  text-shadow: 0 0 6px rgba(255,255,51,0.5);
  color: #ffffe0;
}



/* === Announce: fit to 80% viewport width === */
#streakBanner {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 0.2rem 1.2rem;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 240, 80, 0.35)) drop-shadow(0 0 8px rgba(255, 230, 0, 0.6));
  text-shadow: 0 0 18px rgba(255, 240, 120, 0.85), 0 0 60px rgba(255, 200, 0, 0.45);
  z-index: 1000;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  overflow: visible; pointer-events: none; }
#streakBanner .inner {
  margin: 0 8px;

  display:inline-block;
  padding: 0.25rem 1rem;
  border-radius: 18px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255, 248, 80, 0.18), rgba(255, 230, 0, 0.03) 70%, rgba(255,255,255,0) 75%);
}

/* Slightly stronger glow overall */
#streakBanner {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 0.2rem 1.2rem;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 240, 80, 0.35)) drop-shadow(0 0 8px rgba(255, 230, 0, 0.6));
  text-shadow: 0 0 18px rgba(255, 240, 120, 0.85), 0 0 60px rgba(255, 200, 0, 0.45);
  z-index: 1000;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  overflow: visible; pointer-events: none; }
#streakBanner.announce-level {
  filter: drop-shadow(0 0 10px rgba(0,255,255,0.35));
  text-shadow: 0 0 12px rgba(0,255,255,0.7), 0 0 24px rgba(0,255,255,0.4);
}
#streakBanner.announce-streak {
  filter: drop-shadow(0 0 10px rgba(57,255,20,0.35));
  text-shadow: 0 0 12px rgba(57,255,20,0.72), 0 0 24px rgba(57,255,20,0.4);
}
#streakBanner.announce-power {
  filter: drop-shadow(0 0 10px rgba(255,255,51,0.35));
  text-shadow: 0 0 12px rgba(255,255,51,0.72), 0 0 24px rgba(255,255,51,0.4);
}


/* === Announce: centered 80% width, start huge === */
#streakBanner {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0.96);
  padding: 0.2rem 1.2rem;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 240, 80, 0.35)) drop-shadow(0 0 8px rgba(255, 230, 0, 0.6));
  text-shadow: 0 0 18px rgba(255, 240, 120, 0.85), 0 0 60px rgba(255, 200, 0, 0.45);
  z-index: 1000;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  overflow: visible; pointer-events: none; }

#streakBanner .inner {
  margin: 0 8px;

  display:inline-block;
  padding: 0.25rem 1rem;
  border-radius: 18px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255, 248, 80, 0.18), rgba(255, 230, 0, 0.03) 70%, rgba(255,255,255,0) 75%);
}


/* Screenshot icon button */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:8px;
  background:rgba(0,0,0,0.35);
  cursor:pointer;
  padding:0;
  transition: transform 0.08s ease, background 0.2s ease, border-color 0.2s ease;
}
.icon-btn:hover{ background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); }
.icon-btn:active{ transform: scale(0.96); }
.icon-btn svg{ pointer-events:none; }



/* --- Unified Results Page Styling (Added by ChatGPT) --- */
#initials, 
#saveButton, 
#tryAgainButton, 
#screenshotButton {
  display: inline-block;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  margin: 0 5px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  vertical-align: middle;
  min-width: 80px;
}

/* Input field */
#initials {
  background: #fff;
  color: #000;
  text-transform: uppercase;
  text-align: center;
}

/* Save button */
#saveButton {
  background: #f4a261;
  color: #000;
}
#saveButton:hover {
  background: #e98e2c;
}

/* Try Again button */
#tryAgainButton {
  background: #4defff;
  color: #000;
}
#tryAgainButton:hover {
  background: #34d0d0;
}

/* Screenshot button */
#screenshotButton {
  background: #666; /* lighter grey */
  color: #fff;
}
#screenshotButton:hover {
  background: #555;
}


/* === ChatGPT Patch: Unified Results Controls === */
:root {
  --td-control-h: 54px;
  --td-radius: 14px;
  --td-pad-x: 22px;
  --td-font: 600 18px/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --td-bg: #1e2329;
  --td-border: #2e3440;
  --td-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  --td-save: #f4a53a;
  --td-try:  #6ff6ff;
  --td-shot: #00e5ff;        /* neon blue */
  --td-shot-hover: #00b8d9;
}

.td-control {
  height: var(--td-control-h);
  border-radius: var(--td-radius);
  border: 1px solid var(--td-border);
  box-shadow: var(--td-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--td-font);
  color: #0e1116;
  background: #ffffff;
  transition: transform .06s ease, box-shadow .06s ease, background .12s ease, border-color .12s ease;
}
.td-input {
  min-width: 280px;
  padding: 0 var(--td-pad-x);
  color: #666;
  background: #fff;
  outline: none;
}
.td-input::placeholder { color: #9aa4b2; }
.td-input:focus { border-color:#4eaaff; box-shadow:0 0 0 3px rgba(78,170,255,.25); }

.td-btn { padding: 0 var(--td-pad-x); cursor:pointer; user-select:none; border:1px solid var(--td-border); }
.td-btn:active { transform: translateY(1px); }

.td-btn--save { background: var(--td-save); color:#1f1400; }
.td-btn--save:hover { filter:brightness(1.05); }
.td-btn--try  { background: var(--td-try);  color:#05383d; }
.td-btn--try:hover  { filter:brightness(1.05); }
.td-btn--shot { background: var(--td-shot); color:#001f26; }
.td-btn--shot:hover { background: var(--td-shot-hover); }

.td-btn--icon { width:54px; padding:0; font-size:0; }
.td-btn--icon svg, .td-btn--icon img { width:22px; height:22px; opacity:.95; }

/* Hide HUDs while on start screen/menu */
body.menu-open #hudTop, body.menu-open #powerupHUD { display:none !important; }


/* Halo fix for start screen */

.start-screen img.start-img {
  display: block;
  width: 100%;
  height: auto;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}
.start-screen .loading-wrap {
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}


/* Hide the little status badge when marked hidden */
.submit-msg.hidden{ display:none !important; }


/* HARD HIDE HUDS WHILE IN MENU TO PREVENT FLASH */
body.menu-open #hudTop,
body.menu-open #powerupHUD,
body.menu-open .hud-top,
body.menu-open .hud-bottom {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* === ChatGPT Patch 2025-09-28 ===
   Requirement: 
   1) Results page modal (.modal.results.results-grid.slow-anim) opacity -> 0.9
   2) Start page modal should be less wide like the provided reference;
      Do NOT change results modal layout.
   Notes:
   - We scope the start screen width change to the #overlay container,
     which is only present on the start page.
   - We use higher specificity and !important only where necessary.
*/
.modal.results.results-grid.slow-anim {
  opacity: 0.9 !important;
}

/* Start screen modal width: narrower like the reference image */
  max-width: 420px !important;
  width: min(92vw, 420px) !important;
}

/* Keep buttons flowing nicely inside the narrower modal */
  flex-wrap: wrap;
  justify-content: center;
}
/* === End ChatGPT Patch === */

/* === ChatGPT Patch 2025-09-28 (Scoped Modal Widths) === */

/* Results page modal: keep wide and less transparent */
.modal.results.results-grid.slow-anim {
  opacity: 0.9 !important;
  max-width: 640px !important;
  width: min(96vw, 640px) !important;
}

/* Start screen modal: narrow */
#overlay .modal:not(.results) {
  max-width: 420px !important;
  width: min(92vw, 420px) !important;
}

/* === End Patch === */

/* === ChatGPT Patch 2025-09-29 (Slim Results Initials Bar) === */

/* Reduce initials row height */
.modal.results .initials-bar {
  height: 32px !important; /* roughly half previous size */
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Scale input + buttons to match */
.modal.results .initials-bar input,
.modal.results .initials-bar button {
  height: 100% !important;
  padding: 4px 10px !important;
  font-size: 14px !important;
  line-height: 1.2;
  border-radius: 6px;
}

/* Make the screenshot button match the new scale */
.modal.results .initials-bar .screenshot-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* === End Patch === */

/* === ChatGPT Patch 2025-09-29 (Results Layout + Initials Bar +1/3) === */

/* 1) Results initials bar: 1/3 taller than previous 32px -> ~43px */
.modal.results .initials-bar {
  height: 44px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal.results .initials-bar input,
.modal.results .initials-bar button {
  height: 100% !important;
  padding: 6px 12px !important;
  font-size: 15px !important;
  line-height: 1.2;
  border-radius: 8px;
}

.modal.results .initials-bar .screenshot-btn {
  width: 44px !important;
  height: 44px !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2) Metrics grid layout: three columns, two rows; left/center/right alignment */
.modal.results .metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(16px, 6vw, 96px);
  row-gap: clamp(10px, 3vw, 28px);
  align-items: start;
}

/* Ensure metric blocks stack label over value nicely */
.modal.results .metrics-grid .metric {
  display: flex;
  flex-direction: column;
}

/* Left column (TOTAL POINTS, WPM/RANK) */
.modal.results .metrics-grid .metric:nth-child(1),
.modal.results .metrics-grid .metric:nth-child(4) {
  align-items: flex-start;
  text-align: left;
}

/* Center column (LEVEL, ACCURACY) */
.modal.results .metrics-grid .metric:nth-child(2),
.modal.results .metrics-grid .metric:nth-child(5) {
  align-items: center;
  text-align: center;
}

/* Right column (WORDS, STREAK) */
.modal.results .metrics-grid .metric:nth-child(3),
.modal.results .metrics-grid .metric:nth-child(6) {
  align-items: flex-end;
  text-align: right;
}

/* Widen the numbers slightly on wider screens while staying responsive */
@media (min-width: 900px) {
  .modal.results .metrics-grid .value.big { font-size: clamp(42px, 6vw, 72px); }
  .modal.results .metrics-grid .value { font-size: clamp(22px, 3.5vw, 40px); }
}
/* === End Patch === */

/* Darker backdrop when results are open */
body.results-open #overlay{ background: rgba(0,0,0,0.6) !important; }

#hudTop .top-row #healthBar{ max-width: 52vw; }

/* Leaderboard clarity: no blur, no dimming */
.lb-header{}
/* Header row text neon green */
.lb-header .c, .lb-head .c, .lb-header{ 
  color: #39ff14 !important;
}

/* Opaque leaderboard header with drop shadow and no transparency */
#leaderboard .lb-header, #leaderboard .lb-head{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0b0f16 !important; /* same panel color */
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 6px 12px rgba(0,0,0,0.45);
}
#leaderboard .lb-header .c, #leaderboard .lb-head .c{
  color: #39ff14 !important; /* neon green headers */
  font-weight: 900;
  letter-spacing: 0.06em;
}
#leaderboard .lb-body{ overflow:auto; position:relative; }

/* HUD label/value colors per UI.png */
.hud-top .label{ color:#39ff14; opacity:1; font-weight:700; }
.hud-top .num{ color:#ffffff; font-weight:800; }

/* Power-up HUD cards tuned smaller, tighter */
.hud-powerups{ gap: 10px; }
.hud-powerups .p-slot{
  min-width: 60px;
  height: 48px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  outline: 1.5px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:flex-start;
}
.hud-powerups .p-slot.selected{
  outline:2px solid rgba(0,255,120,0.90) !important;
  box-shadow: 0 0 0 3px rgba(0,255,120,0.25);
}
.hud-powerups .p-icon{ width:28px; height:28px; margin-right:6px; }
.hud-powerups .p-count{ font-size:18px; font-weight:800; color:#fff; margin-left:0; }

/* === Unified HUD layout (health rail, big score box, powerups, then label line) === */
.hud-unified{ --hud-card-h: 72px; --hud-outline: 2px solid #39FF14; position:fixed; top:16px; left:50%; transform:translateX(-50%); width:min(92vw, 1100px); z-index:20; pointer-events:none; }

.hud-unified .unified-health{ padding:0 24px 8px 24px; }
.hud-unified #healthBar{ width:100%; max-width:none; }

.hud-unified .score-power{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:18px; padding:0 24px; }
.hud-unified .score-box{ pointer-events:auto; }
.hud-unified .score-box .hud-metric{ display:block; }

@media (min-width:1200px){  }

/* Power-up HUD placed inline to the right */
.hud-unified #powerupHUD{ position:static; display:flex; gap:16px; padding:8px 0; pointer-events:auto; }
.hud-unified .hud-powerups .p-slot{ min-width: 140px; height: var(--hud-card-h); border-radius:16px; padding: 0 18px; background:rgba(255,255,255,0.04); outline:1.5px solid rgba(255,255,255,0.08); display:flex; align-items:center; gap:10px;  box-sizing:border-box; padding: 0 14px;}
.hud-unified .hud-powerups .p-slot.selected{ outline: var(--hud-outline); box-shadow:0 0 0 3px rgba(0,255,120,0.25); }
.hud-unified .hud-powerups .p-icon{ width:36px; height:36px; margin-right:6px; }
.hud-unified .hud-powerups .p-count{ font-size:24px; font-weight:900; }

/* Label line under score/power row */
.hud-unified .label-line{ display:flex; align-items:center; gap: 9px; padding:6px 24px 0 24px;  margin-bottom: 10px; }
.hud-unified .label-line .label{ color:#39ff14; font-weight:800; letter-spacing:0.02em; margin-right:6px; }
.hud-unified .label-line .num{ font-weight:800; font-size:1em; line-height:1; }
.hud-unified .label-line .label-wrap{ display:flex; align-items:baseline; gap:8px; }
.hud-unified .line-spacer{ flex:1; }

.hud-top .top-row, .hud-top .stats-row{ display:none !important; }

/* Fixed-height yellow score frame aligned to power-up height */
.hud-unified .score-frame{ height: var(--hud-card-h);
  min-width: 160px;
  border-radius:16px;
  display:flex; align-items:center; padding: 0 18px; pointer-events:auto;
 box-sizing:border-box;}
.hud-unified .score-num #score{
  font-size:54px; line-height:1; font-weight:900; color:#fff; opacity:0.8;
  transform-origin:left center;
}
@media (min-width:1200px){
  .hud-unified .score-num #score{ font-size:60px; }
}

/* Only the number pulses; frame remains constant size */
.score-num .pulse{
  animation: scorePulse 400ms ease;
}
@keyframes scorePulse{
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Label line: single string left-aligned with spacing */
.hud-unified .label-line{
  justify-content:flex-start;
  text-align:left;
  gap: 9px;
 margin-bottom: 10px; }

/* Score frame inner-glow pulse */
@keyframes scoreFrameGlow{
  0% { box-shadow: inset 0 0 0 0 rgba(57,255,20,0.0); }
  40% { box-shadow: inset 0 0 18px 6px rgba(57,255,20,0.55); }
  100% { box-shadow: inset 0 0 0 0 rgba(57,255,20,0.0); }
}
  40% { box-shadow: inset 0 0 18px 6px rgba(57,255,20,0.55), 0 0 0 3px rgba(57,255,20,0.30); }
  100% { box-shadow: inset 0 0 0 0 rgba(57,255,20,0.0), 0 0 0 3px rgba(57,255,20,0.25); }
}
.hud-unified .score-frame.pulse{
  animation: scoreFrameGlow 380ms ease-out }

img[alt*='start'], img#startImg, #startscreenImg{ height:100vh; width:auto; max-width:100vw; object-fit:contain; }

.hud-unified .unified-health #healthBar{ outline: var(--hud-outline); border-radius: 14px; }

.hud-unified .score-num #score.score-glow{ text-shadow: 0 0 24px rgba(57,255,20,0.95), 0 0 48px rgba(57,255,20,0.8); }

.lb-row .c{ font-size: clamp(12px, 1.4vw, 16px); white-space: nowrap; overflow:hidden; }

#streakBanner, #streakBanner .inner {
  margin: 0 8px;

  display:inline-block;
  padding: 0.25rem 1rem;
  border-radius: 18px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255, 248, 80, 0.18), rgba(255, 230, 0, 0.03) 70%, rgba(255,255,255,0) 75%);
}

.announce-banner{ max-width: 60vw; overflow: visible; padding-block: 6px; }

.announce{ max-width: 60vw; overflow: visible; padding-block: 6px; }

.powerup-announce{ max-width: 60vw; overflow: visible; padding-block: 6px; }

#streakBanner .inner, .announce-banner .inner { font-size: clamp(18px, 3vw, 42px); }