/* Game-only palette, sampled from the existing light homepage. */
html[data-theme="light"] body.game-page {
  --blue: #4ca9e8;
  --orange: #ff863e;
  --red: #e11d48;
  --screen-accent: #607830;
  background: #fff4f8 !important;
}
html[data-theme="light"] .game-page #arena .console {
  background: #d7d9cb !important;
  color: #333a2c !important;
  border-color: #ffffff !important;
  box-shadow: 5px 6px 0 #858a77, 10px 12px 0 #535747, 0 20px 35px #18200f18 !important;
}
html[data-theme="light"] .game-page #arena .display {
  background: #d5fa65 !important;
  color: #18200f !important;
  border-color: #5d6651 !important;
  box-shadow: inset 0 2px 0 #e3ff80 !important;
}
html[data-theme="light"] .game-page #arena .question,
html[data-theme="light"] .game-page #arena .answer-slot { color: #18200f !important; text-shadow: none !important; }
html[data-theme="light"] .game-page #arena .question span { color: #607830 !important; }
html[data-theme="light"] .game-page #arena .display-top,
html[data-theme="light"] .game-page #arena .display-bottom { color: #536c2e !important; }
html[data-theme="light"] .game-page #arena #questionCount { background: #e3ff80 !important; color: #333a2c !important; border-color: #a4c348 !important; box-shadow: none !important; }
html[data-theme="light"] .game-page #arena #score,
html[data-theme="light"] .game-page #arena .time-column .stat-value,
html[data-theme="light"] .game-page .mobile-score .stat-value,
html[data-theme="light"] .game-page #score {
  color: #000000 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
html[data-theme="light"] .game-page #arena .time-column .stat-label {
  color: #0f172a !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .game-page #arena #scoreCaption {
  color: #1e293b !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .game-page #arena .time-meter .liquid { background: #4ca9e8 !important; }
html[data-theme="light"] .game-page #arena .heat-meter .liquid { background: #ff863e !important; }
html[data-theme="light"] .game-page #arena .wave { background: #ffffff !important; }
html[data-theme="light"] .game-page #arena .meter-number { color: #333a2c !important; text-shadow: none !important; }
html[data-theme="light"] .game-page #arena .time-glyph { border-color: #1979b7 !important; }
html[data-theme="light"] .game-page #arena .time-glyph:before,
html[data-theme="light"] .game-page #arena .time-glyph:after { background: #1979b7 !important; }
html[data-theme="light"] .game-page #arena .heat-glyph { background: #d8662d !important; }
html[data-theme="light"] .game-page #arena .heat-column .stat-value,
html[data-theme="light"] .game-page #arena .fire-icon { color: #d8662d !important; text-shadow: none !important; }
html[data-theme="light"] .game-page #arena #heatCaption,
html[data-theme="light"] .game-page #arena .arena-top b,
html[data-theme="light"] .game-page #arena .time-bonus { color: #607830 !important; }
html[data-theme="light"] .game-page #arena #multiplier { background: #ffdfc7 !important; border-color: #d9a886 !important; color: #5a2a14 !important; box-shadow: none !important; }
html[data-theme="light"] .game-page #arena .keypad .enter-key { background: #ff863e !important; border-color: #ffad75 !important; color: #39200e !important; text-shadow: none !important; box-shadow: 0 5px 0 #a45121 !important; }
html[data-theme="light"] .game-page #arena .keypad .enter-key:hover { background: #ffad75 !important; }
html[data-theme="light"] .game-page #arena .keypad .enter-key:active,
html[data-theme="light"] .game-page #arena .keypad .enter-key.pressed { box-shadow: 0 1px 0 #a45121 !important; }
html[data-theme="light"] .game-page #arena .reaction-stage[data-kind="perfect"] .reaction-word { color: #607830 !important; text-shadow: 0 3px 0 #d5fa65 !important; }
html[data-theme="light"] .game-page #arena .reaction-stage[data-kind="miss"] .reaction-word,
html[data-theme="light"] .game-page #arena .reaction-stage[data-kind="overdrive"] .reaction-word { color: #e11d48 !important; text-shadow: 0 3px 0 #f7d6e0 !important; }
html[data-theme="light"] .game-page #arena .reaction-detail { color: #626958 !important; text-shadow: none !important; }
html[data-theme="light"] .game-page #arena.miss .display { background: #ffdce5 !important; border-color: #e11d48 !important; }
html[data-theme="light"] .game-page #arena.overdrive .console { border-color: #ffad75 !important; }
html[data-theme="light"] .game-page #arena .milestone-alert { background: #fff4f8 !important; border-color: #f3c4d3 !important; color: #18200f !important; box-shadow: 0 5px 0 #f7d6e0 !important; }
html[data-theme="light"] .game-page #arena .run-widgets span { border-color: #d5fa65 !important; }
html[data-theme="light"] .game-page #arena .run-widgets span:last-child { border-color: #ffad75 !important; }

/* Independent rim layer preserves the existing dark calculator styling. */
.calculator-ambient-glow { display: none; }
html[data-theme="dark"] .game-page .calculator-ambient-glow {
  display: block; position: absolute; inset: -2px; border-radius: inherit;
  pointer-events: none; border: 1px solid #fff8cf55;
  box-shadow: 0 0 18px #fff8cf35, 0 0 42px #fff8cf18;
  animation: warmRimBreath 3.8s ease-in-out infinite;
}
@keyframes warmRimBreath { 0%,100% { opacity: .35; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { html[data-theme="dark"] .game-page .calculator-ambient-glow { animation: none; opacity: .5; } }
body.reduced-motion .calculator-ambient-glow { animation: none !important; opacity: .5; }

/* ── LIGHT MODE SCREEN: MATCHING HERO CALCULATOR (NEON LIME CRT #D5FA65) ── */
html[data-theme="light"] .game-page #arena .display {
  background: #d5fa65 !important;
  border: 4.5px solid #5d6651 !important;
  border-radius: 12px !important;
  box-shadow: inset 3px 5px 0 #a4c348, inset -2px -3px 0 #b7d656, 0 6px 0 rgba(133, 138, 119, 0.3) !important;
}
html[data-theme="light"] .game-page #arena .question,
html[data-theme="light"] .game-page #arena .answer-slot,
html[data-theme="light"] .game-page #arena #answerText {
  color: #18200f !important;
  -webkit-text-stroke: 0 !important;
  paint-order: normal !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
html[data-theme="light"] .game-page #arena .question span {
  color: #c2410c !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  font-weight: 900 !important;
}
html[data-theme="light"] .game-page #arena .input-caret {
  background: #18200f !important;
  box-shadow: 0 0 6px rgba(24, 32, 15, 0.45) !important;
}
html[data-theme="light"] .game-page #arena .display-top,
html[data-theme="light"] .game-page #arena .display-bottom {
  color: #435b22 !important;
}
html[data-theme="light"] .game-page #arena #questionCount {
  background: #46572e !important;
  color: #d5fa65 !important;
  border: 1.5px solid #364421 !important;
  box-shadow: 0 2px 5px rgba(54, 68, 33, 0.3) !important;
}
html[data-theme="light"] .game-page #arena.miss .display {
  background: #ffdce5 !important;
  border-color: #e11d48 !important;
}

/* ── DARK MODE SCREEN: LIGHT BLUE #38bdf8, WHITE DIGITS, YELLOW OPERATOR, ZERO SHADOWS ── */
html[data-theme="dark"] .game-page #arena .display {
  background: #38bdf8 !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .game-page #arena .question,
html[data-theme="dark"] .game-page #arena .answer-slot,
html[data-theme="dark"] .game-page #arena #answerText {
  color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .game-page #arena .question span {
  color: #facc15 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}
html[data-theme="dark"] .game-page #arena .display-top,
html[data-theme="dark"] .game-page #arena .display-bottom {
  color: #ffffff !important;
}
html[data-theme="dark"] .game-page #arena #questionCount {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .game-page #arena .input-caret {
  background: #ffffff !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .game-page #arena.miss .display {
  background: #7dd3fc !important;
  border-color: #bae6fd !important;
  box-shadow: inset 0 0 0 2px #e0f2fe80, 0 0 20px #38bdf840 !important;
}
html[data-theme="dark"] .game-page #arena.miss .cracks path {
  stroke: #e0f2fe !important;
  filter: drop-shadow(0 1px 1px #0369a1);
}
html[data-theme="dark"] .game-page #arena .time-meter .liquid { background: #38b5f5 !important; }
html[data-theme="dark"] .game-page #arena .heat-meter .liquid { background: #ff863e !important; }
html[data-theme="dark"] .game-page #arena .heat-meter .wave { background: #141c2e !important; }
html[data-theme="dark"] .game-page #arena .heat-glyph { background: #ff863e !important; }
html[data-theme="dark"] .game-page #arena .heat-column .stat-value,
html[data-theme="dark"] .game-page #arena .fire-icon,
html[data-theme="dark"] .game-page #arena #heatCaption { color: #ff9b5e !important; }
html[data-theme] .game-page #arena .heat-column.meter-hit .heat-meter .liquid { box-shadow: 0 0 22px #ff863e !important; }

/* Reference blue palette for the light-mode gameplay calculator only. */
html[data-theme="light"] .game-page #arena .console {
  background: #d9f1ff !important;
  color: #07162d !important;
  border-color: #ffffff !important;
  box-shadow: 5px 6px 0 #8fb7d4, 10px 12px 0 #335f86, 0 20px 35px #193a6418 !important;
}

html[data-theme="light"] .game-page #arena .display {
  background: #c8edff !important;
  border: 5px solid #1580c9 !important;
  color: #07162d !important;
  box-shadow: inset 3px 5px 0 #9bdfff, 0 6px 0 #7cbddd !important;
}

html[data-theme="light"] .game-page #arena .display-top,
html[data-theme="light"] .game-page #arena .display-bottom,
html[data-theme="light"] .game-page #arena .fuse-label,
html[data-theme="light"] .game-page #arena .feedback-row,
html[data-theme="light"] .game-page #arena .console-bottom {
  color: #173a5a !important;
}

html[data-theme="light"] .game-page #arena .question,
html[data-theme="light"] .game-page #arena .answer-slot,
html[data-theme="light"] .game-page #arena #answerText {
  color: #07162d !important;
  text-shadow: none !important;
}

html[data-theme="light"] .game-page #arena .question span {
  color: #0b8fe8 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .game-page #arena .answer-slot {
  border-color: #1580c9 !important;
  background: #dff5ff !important;
}

html[data-theme="light"] .game-page #arena .input-caret {
  background: #0b8fe8 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .game-page #arena #questionCount,
html[data-theme="light"] .game-page #arena #multiplier {
  background: #e7f7ff !important;
  border-color: #69bcec !important;
  color: #0c4a78 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .game-page #arena .question-fuse,
html[data-theme="light"] .game-page #arena .feedback-row,
html[data-theme="light"] .game-page #arena .keypad {
  background: #cbe8fa !important;
  border-color: #9ecce8 !important;
}

html[data-theme="light"] .game-page #arena .fuse-track {
  background: #a9d8f5 !important;
}

html[data-theme="light"] .game-page #arena .fuse-track i {
  background: #1c99ed !important;
}

html[data-theme="light"] .game-page #arena .keypad button {
  background: #ffffff !important;
  border-color: #f8fbff !important;
  color: #07162d !important;
  box-shadow: 0 5px 0 #9bb6ca, 0 6px 1px #315a7a33 !important;
}

html[data-theme="light"] .game-page #arena .keypad .utility,
html[data-theme="light"] .game-page #arena .keypad .sign-key,
html[data-theme="light"] .game-page #arena .keypad .clear-key,
html[data-theme="light"] .game-page #arena .keypad button[data-key="Backspace"] {
  background: #17365f !important;
  border-color: #244c7f !important;
  color: #ffffff !important;
  box-shadow: 0 5px 0 #071e3a, 0 6px 1px #071e3a44 !important;
}

html[data-theme="light"] .game-page #arena .keypad button[data-key="1"] {
  background: #6ecaff !important;
  border-color: #b7ebff !important;
  color: #08213f !important;
  box-shadow: 0 5px 0 #2182c4, 0 6px 1px #2182c444 !important;
}

html[data-theme="light"] .game-page #arena .keypad .enter-key {
  background: #0b98ff !important;
  border-color: #7fd4ff !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: 0 5px 0 #006cc7, 0 6px 1px #006cc744 !important;
}

html[data-theme="light"] .game-page #arena .keypad button:hover {
  filter: brightness(1.04) !important;
}

html[data-theme="light"] .game-page #arena .keypad button:active,
html[data-theme="light"] .game-page #arena .keypad button.pressed {
  transform: translateY(5px) !important;
  box-shadow: 0 0 0 transparent !important;
}

html[data-theme="light"] .game-page #arena .console-bottom i {
  background: #0b8fe8 !important;
}

html[data-theme="light"] .game-page #arena.miss .display {
  background: #dff5ff !important;
  border-color: #7dc6f4 !important;
  box-shadow: inset 3px 5px 0 #bcecff, 0 0 20px #38bdf840 !important;
}

/* Cleaner playfield: remove label clutter and give the calculator room. */
.game-page .section-heading,
.game-page .arena-top {
  display: none !important;
}

.game-page .arcade {
  margin-top: 0 !important;
  padding-top: clamp(18px, 3vh, 34px) !important;
}

.game-page .reaction-stage {
  height: clamp(50px, 7vh, 70px) !important;
  margin-bottom: clamp(4px, 1vh, 10px) !important;
}

.game-page .console {
  padding: clamp(18px, 2.3vw, 26px) !important;
}

.game-page .display {
  margin-bottom: clamp(14px, 2vh, 20px) !important;
}

.game-page .question-fuse {
  margin: clamp(12px, 1.8vh, 18px) 4px clamp(10px, 1.5vh, 16px) !important;
  padding: 10px !important;
}

.game-page .feedback-row {
  margin: 0 0 clamp(12px, 1.8vh, 18px) !important;
}

.game-page .keypad {
  gap: clamp(9px, 1.3vw, 13px) !important;
  padding: clamp(10px, 1.4vw, 14px) !important;
}

.game-page .keypad button {
  min-height: clamp(44px, 5.8vh, 54px) !important;
}

.game-page .console-bottom {
  margin-top: clamp(14px, 2vh, 20px) !important;
}







/* Final result card redesign */
#resultDialog.result-grave {
  width: min(520px, calc(100% - 28px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  border-radius: 30px 30px 16px 16px !important;
  border: 2px solid #081423 !important;
  background: #f4fbff !important;
  color: #07162d !important;
  box-shadow: 0 10px 0 #08213f, 0 28px 70px #07162d40 !important;
}

html[data-theme="dark"] #resultDialog.result-grave {
  background: #06090f !important;
  color: #f8fbff !important;
  border-color: #244c7f !important;
  box-shadow: 0 10px 0 #02040a, 0 28px 76px #000000d0 !important;
}

#resultDialog.result-grave::backdrop {
  background: rgba(7, 22, 45, .72) !important;
  backdrop-filter: blur(7px) !important;
}

html[data-theme="dark"] #resultDialog.result-grave::backdrop {
  background: rgba(0, 0, 0, .82) !important;
}

#resultDialog .dialog-top {
  padding: 22px 24px 12px !important;
  border-bottom: 1px solid #b7dff6 !important;
}

html[data-theme="dark"] #resultDialog .dialog-top {
  border-bottom-color: #1f3559 !important;
}

#resultDialog .dialog-top .eyebrow {
  color: #e11d48 !important;
  letter-spacing: 2.4px !important;
  font-size: 10px !important;
}

html[data-theme="dark"] #resultDialog .dialog-top .eyebrow {
  color: #38bdf8 !important;
}

#resultDialog #closeResult {
  border: 2px solid #07162d !important;
  background: #ffffff !important;
  color: #07162d !important;
  box-shadow: 0 3px 0 #9bb6ca !important;
}

html[data-theme="dark"] #resultDialog #closeResult {
  border-color: #3a5f95 !important;
  background: #101b2d !important;
  color: #f8fbff !important;
  box-shadow: 0 3px 0 #02040a !important;
}

#resultDialog .grave-mark {
  width: min(330px, calc(100% - 64px)) !important;
  min-height: 190px !important;
  margin: 26px auto 22px !important;
  padding: 42px 22px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  background: #dff5ff !important;
  border: 4px solid #07162d !important;
  border-radius: 150px 150px 18px 18px !important;
  box-shadow: 10px 10px 0 #8fc4e8, inset 0 0 0 8px #f4fbff !important;
  color: #07162d !important;
}

html[data-theme="dark"] #resultDialog .grave-mark {
  background: #101b2d !important;
  border-color: #8fd8ff !important;
  box-shadow: 10px 10px 0 #02040a, inset 0 0 0 8px #06090f !important;
  color: #f8fbff !important;
}

#resultDialog .grave-mark::after {
  content: "" !important;
  position: absolute !important;
  left: -24px !important;
  right: -24px !important;
  bottom: -18px !important;
  height: 22px !important;
  background: #0b98ff !important;
  border: 4px solid #07162d !important;
  border-radius: 12px !important;
}

html[data-theme="dark"] #resultDialog .grave-mark::after {
  background: #e11d48 !important;
  border-color: #8fd8ff !important;
}

#resultDialog .grave-mark i {
  display: block !important;
  position: static !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 auto 14px !important;
  border: 4px solid currentColor !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 5px 0 #9bb6ca !important;
  rotate: 45deg !important;
}

#resultDialog .grave-mark i::after {
  content: "" !important;
  display: none !important;
}

html[data-theme="dark"] #resultDialog .grave-mark i {
  background: #06090f !important;
  box-shadow: 0 5px 0 #02040a !important;
}

#resultDialog .grave-mark span {
  display: block !important;
  position: static !important;
  margin: 0 0 8px !important;
  color: #244c7f !important;
  font: 800 10px ui-monospace, "Cascadia Code", monospace !important;
  letter-spacing: 2.2px !important;
}

html[data-theme="dark"] #resultDialog .grave-mark span {
  color: #8fd8ff !important;
}

#resultDialog #resultScore {
  display: block !important;
  color: #07162d !important;
  font: 900 clamp(48px, 11vw, 74px)/.86 "Space Grotesk", system-ui, sans-serif !important;
  letter-spacing: -3px !important;
}

html[data-theme="dark"] #resultDialog #resultScore {
  color: #ffffff !important;
  text-shadow: 0 0 16px #38bdf8aa !important;
}

#resultDialog #resultTitle {
  margin: 28px 30px 6px !important;
  color: #07162d !important;
  text-align: center !important;
  font-size: clamp(25px, 4vw, 34px) !important;
  line-height: 1.05 !important;
}

html[data-theme="dark"] #resultDialog #resultTitle {
  color: #f8fbff !important;
}

#resultDialog .result-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin: 22px 24px !important;
}

#resultDialog .result-stats > div {
  padding: 14px 8px 12px !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 2px solid #07162d !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 0 #9bb6ca !important;
}

html[data-theme="dark"] #resultDialog .result-stats > div {
  background: #101b2d !important;
  border-color: #244c7f !important;
  box-shadow: 0 5px 0 #02040a !important;
}

#resultDialog .result-stats strong {
  color: #e11d48 !important;
  font: 900 24px/1 "Space Grotesk", system-ui, sans-serif !important;
}

html[data-theme="dark"] #resultDialog .result-stats strong {
  color: #38bdf8 !important;
}

#resultDialog .result-stats span {
  color: #244c7f !important;
  font: 800 9px ui-monospace, "Cascadia Code", monospace !important;
  letter-spacing: 1.4px !important;
}

html[data-theme="dark"] #resultDialog .result-stats span {
  color: #8fd8ff !important;
}

#resultDialog .run-code {
  margin: 0 24px 22px !important;
  padding: 14px 16px !important;
  border: 2px dashed #0b98ff !important;
  border-radius: 16px !important;
  background: #eaf8ff !important;
  color: #07162d !important;
}

html[data-theme="dark"] #resultDialog .run-code {
  background: #101b2d !important;
  border-color: #e11d48 !important;
  color: #f8fbff !important;
}

#resultDialog .run-code span {
  color: #244c7f !important;
  font-size: 9px !important;
  letter-spacing: 1.8px !important;
}

html[data-theme="dark"] #resultDialog .run-code span {
  color: #8fd8ff !important;
}

#resultDialog .run-code strong {
  color: #07162d !important;
  font-size: 12px !important;
  letter-spacing: 1.2px !important;
}

html[data-theme="dark"] #resultDialog .run-code strong {
  color: #ffffff !important;
}

#resultDialog .result-actions {
  display: grid !important;
  grid-template-columns: 1fr 1.25fr !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 24px 26px !important;
}

#resultDialog .result-actions > * {
  min-height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  font: 900 12px ui-monospace, "Cascadia Code", monospace !important;
  letter-spacing: 1.1px !important;
  text-decoration: none !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}

#resultDialog .result-home {
  background: #ffffff !important;
  color: #07162d !important;
  border: 3px solid #07162d !important;
  box-shadow: 0 5px 0 #9bb6ca !important;
}

#resultDialog #replayButton {
  width: auto !important;
  background: #e11d48 !important;
  color: #ffffff !important;
  border: 3px solid #07162d !important;
  box-shadow: 0 5px 0 #7f102b !important;
}

html[data-theme="dark"] #resultDialog .result-home {
  background: #101b2d !important;
  color: #f8fbff !important;
  border-color: #244c7f !important;
  box-shadow: 0 5px 0 #02040a !important;
}

html[data-theme="dark"] #resultDialog #replayButton {
  background: #38bdf8 !important;
  color: #06111f !important;
  border-color: #8fd8ff !important;
  box-shadow: 0 5px 0 #075985 !important;
}

#resultDialog .result-actions > *:active {
  transform: translateY(5px) !important;
  box-shadow: none !important;
}

#resultDialog.result-grave[open] {
  animation: resultCardDrop .42s cubic-bezier(.16,.9,.25,1) both !important;
}

#resultDialog.result-grave[open] .grave-mark {
  animation: resultGraveSet .58s .08s cubic-bezier(.16,.9,.25,1) both !important;
}

@keyframes resultCardDrop {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes resultGraveSet {
  0% { transform: translateY(-12px) scale(.92); opacity: 0; }
  58% { transform: translateY(5px) scale(1.03); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 560px) {
  #resultDialog .result-stats {
    grid-template-columns: 1fr !important;
  }

  #resultDialog .result-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Hide grey miss detail under TIME SLIP / MISFIRE. */
.game-page .reaction-stage[data-kind="miss"] .reaction-detail {
  display: none !important;
}

/* Hide small grey reaction detail under all big feedback words. */
.game-page .reaction-detail {
  display: none !important;
}

/* Realtime mode: no pause / resume control. */
.game-page #pauseButton {
  display: none !important;
}

/* Calculator death card structure */
#resultDialog.result-grave {
  width: min(360px, calc(100% - 32px)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 0 130px 130px !important;
  background: #f8fbff !important;
  box-shadow: 0 18px 0 #d7ebfb, 0 30px 70px #07162d44 !important;
  overflow: visible !important;
  text-align: center !important;
}

html[data-theme="dark"] #resultDialog.result-grave {
  background: #eaf7ff !important;
  box-shadow: 0 18px 0 #244c7f, 0 30px 80px #000d !important;
}

#resultDialog.result-grave::backdrop {
  background: rgba(7, 22, 45, .68) !important;
  backdrop-filter: blur(4px) !important;
}

html[data-theme="dark"] #resultDialog.result-grave::backdrop {
  background: rgba(0, 0, 0, .78) !important;
}

#resultDialog .death-card {
  position: relative !important;
  margin: 18px 18px 72px !important;
  min-height: 500px !important;
  padding: 42px 34px 34px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 22px !important;
  background: #07162d !important;
  color: #ffffff !important;
  border: 4px solid #ffffff !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 3px #07162d !important;
}

html[data-theme="dark"] #resultDialog .death-card {
  background: #05070b !important;
  border-color: #8fd8ff !important;
  box-shadow: 0 0 0 3px #244c7f !important;
}

#resultDialog #closeResult {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 2 !important;
  width: 34px !important;
  height: 34px !important;
  border: 2px solid #07162d !important;
  background: #ffffff !important;
  color: #07162d !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 0 #9bb6ca !important;
}

#resultDialog .death-rank {
  width: 86px !important;
  height: 86px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 4px !important;
  color: #8fd8ff !important;
  border: 3px solid #8fd8ff !important;
  border-radius: 18px !important;
}

#resultDialog .death-rank span {
  color: inherit !important;
  font: 500 58px/1 "Space Grotesk", system-ui, sans-serif !important;
  letter-spacing: -2px !important;
}

#resultDialog #resultTitle {
  margin: 0 !important;
  color: #ffffff !important;
  font: 800 22px/1 "Space Grotesk", system-ui, sans-serif !important;
  letter-spacing: .2px !important;
}

#resultDialog .death-score {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 2px 0 8px !important;
}

#resultDialog .death-score span,
#resultDialog .result-stats span,
#resultDialog .run-code span,
#resultDialog .death-hint,
#resultDialog #resultEyebrow {
  color: #8fd8ff !important;
  font: 800 10px/1.4 ui-monospace, "Cascadia Code", monospace !important;
  letter-spacing: 1.8px !important;
}

#resultDialog #resultScore {
  color: #ffffff !important;
  font: 900 62px/.9 "Space Grotesk", system-ui, sans-serif !important;
  letter-spacing: -3px !important;
  text-shadow: none !important;
}

#resultDialog .result-stats {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  margin: 0 !important;
  text-align: left !important;
}

#resultDialog .result-stats > div {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 0 4px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #244c7f !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#resultDialog .result-stats strong {
  color: #ffffff !important;
  font: 800 30px/1 "Space Grotesk", system-ui, sans-serif !important;
}

#resultDialog .run-code {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: auto 0 0 !important;
  padding: 12px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 2px solid #244c7f !important;
  border-radius: 0 !important;
}

#resultDialog .run-code strong {
  color: #ffffff !important;
  font: 800 13px/1 ui-monospace, "Cascadia Code", monospace !important;
  letter-spacing: 1.4px !important;
}

#resultDialog #replayButton {
  width: 100% !important;
  min-height: 58px !important;
  margin-top: 8px !important;
  background: #e11d48 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
  border-radius: 0 !important;
  box-shadow: 0 7px 0 #7f102b !important;
  font: 900 14px ui-monospace, "Cascadia Code", monospace !important;
  letter-spacing: 1.3px !important;
}

html[data-theme="dark"] #resultDialog #replayButton {
  background: #38bdf8 !important;
  color: #06111f !important;
  border-color: #eaf7ff !important;
  box-shadow: 0 7px 0 #075985 !important;
}

#resultDialog #replayButton:active {
  transform: translateY(7px) !important;
  box-shadow: none !important;
}

#resultDialog .death-hint {
  margin: 0 !important;
  opacity: .78 !important;
  max-width: 230px !important;
}

#resultDialog #resultEyebrow {
  position: absolute !important;
  left: 16px !important;
  bottom: 14px !important;
  color: #e11d48 !important;
  font-size: 8px !important;
}

html[data-theme="dark"] #resultDialog #resultEyebrow {
  color: #38bdf8 !important;
}

#resultDialog.result-grave[open] {
  animation: deathCardIn .42s cubic-bezier(.16,.9,.25,1) both !important;
}

@keyframes deathCardIn {
  from { opacity: 0; transform: translateY(42px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 460px) {
  #resultDialog .death-card {
    min-height: 470px !important;
    padding-inline: 26px !important;
  }
}

/* Pink rectangular death card revision. */
#resultDialog.result-grave {
  width: min(390px, calc(100% - 32px)) !important;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffd6e2 !important;
  box-shadow: 10px 10px 0 #e11d48, 0 30px 76px #07162d44 !important;
}

html[data-theme="dark"] #resultDialog.result-grave {
  background: #ffd6e2 !important;
  box-shadow: 10px 10px 0 #e11d48, 0 30px 80px #000d !important;
}

#resultDialog .death-card {
  margin: 0 !important;
  min-height: auto !important;
  padding: 42px 34px 30px !important;
  background: #07162d !important;
  border: 4px solid #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 20px !important;
}

html[data-theme="dark"] #resultDialog .death-card {
  background: #05070b !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

#resultDialog .run-code,
#resultDialog #runCode {
  display: none !important;
}

#resultDialog .death-rank {
  width: 78px !important;
  height: 78px !important;
}

#resultDialog .death-rank span {
  font-size: 52px !important;
}

#resultDialog #resultScore {
  font-size: 58px !important;
}

#resultDialog .result-stats {
  gap: 14px !important;
}

#resultDialog #replayButton {
  margin-top: 10px !important;
  background: #d5fa65 !important;
  color: #07162d !important;
  border-color: #ffffff !important;
  box-shadow: 0 7px 0 #8aa834 !important;
}

html[data-theme="dark"] #resultDialog #replayButton {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 7px 0 #7f102b !important;
}

#resultDialog #resultEyebrow {
  display: none !important;
}

/* Softer pink death card, remove black inner panel. */
#resultDialog .death-card {
  background: #fff4f8 !important;
  color: #07162d !important;
  border-color: #07162d !important;
}

html[data-theme="dark"] #resultDialog .death-card {
  background: #fff4f8 !important;
  color: #07162d !important;
  border-color: #07162d !important;
}

#resultDialog .death-rank {
  color: #e11d48 !important;
  border-color: #e11d48 !important;
  background: #ffffff !important;
}

#resultDialog #resultTitle,
#resultDialog #resultScore,
#resultDialog .result-stats strong {
  color: #07162d !important;
}

#resultDialog .death-score span,
#resultDialog .result-stats span,
#resultDialog .death-hint {
  color: #e11d48 !important;
}

#resultDialog .result-stats > div {
  border-bottom-color: #f3b5c5 !important;
}

#resultDialog #replayButton,
html[data-theme="dark"] #resultDialog #replayButton {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #07162d !important;
  box-shadow: 0 7px 0 #7f102b !important;
}

/* Pixel-heart game over death card. */
#resultDialog.result-grave {
  width: min(540px, calc(100% - 32px)) !important;
  padding: 18px !important;
  background: #ffd6e2 !important;
  box-shadow: 10px 10px 0 #e11d48, 0 30px 76px #07162d44 !important;
}

#resultDialog .death-card {
  padding: clamp(28px, 5vw, 46px) clamp(24px, 5vw, 54px) 32px !important;
  gap: 18px !important;
  background: #fff4f8 !important;
  color: #07162d !important;
  border: 4px solid #07162d !important;
  min-height: auto !important;
}

#resultDialog .life-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(10px, 2.4vw, 18px) !important;
  margin-bottom: 2px !important;
}

#resultDialog .life-row span {
  width: clamp(28px, 7vw, 48px) !important;
  height: clamp(28px, 7vw, 48px) !important;
  display: block !important;
  background: #e11d48 !important;
  transform: rotate(-45deg) !important;
  position: relative !important;
  box-shadow: 5px 5px 0 #7f102b !important;
}

#resultDialog .life-row span::before,
#resultDialog .life-row span::after {
  content: "" !important;
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  background: inherit !important;
  border-radius: 50% !important;
}

#resultDialog .life-row span::before { top: -50% !important; left: 0 !important; }
#resultDialog .life-row span::after { left: 50% !important; top: 0 !important; }

#resultDialog .life-row .broken {
  opacity: .65 !important;
  clip-path: polygon(0 0, 48% 0, 38% 28%, 56% 45%, 42% 68%, 50% 100%, 0 100%) !important;
}

#resultDialog #resultTitle {
  margin: 6px 0 0 !important;
  color: #16c6dd !important;
  font: 900 clamp(42px, 9vw, 76px)/.9 "Space Grotesk", system-ui, sans-serif !important;
  letter-spacing: -2px !important;
  text-transform: uppercase !important;
  text-shadow: 4px 4px 0 #07162d !important;
}

#resultDialog .death-rank {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #e11d48 !important;
}

#resultDialog .death-rank::before {
  content: "RANK " !important;
  color: #07162d !important;
  font: 900 12px ui-monospace, "Cascadia Code", monospace !important;
  letter-spacing: 2px !important;
}

#resultDialog .death-rank span {
  font: 900 34px/1 "Space Grotesk", system-ui, sans-serif !important;
  color: #e11d48 !important;
}

#resultDialog .death-score {
  margin: 0 !important;
  gap: 4px !important;
}

#resultDialog .death-score span,
#resultDialog .result-stats span,
#resultDialog .death-hint {
  color: #07162d !important;
}

#resultDialog #resultScore {
  color: #07162d !important;
  font-size: clamp(50px, 10vw, 72px) !important;
  letter-spacing: -3px !important;
}

#resultDialog .result-stats {
  max-width: 330px !important;
  gap: 12px !important;
}

#resultDialog .result-stats > div {
  border-bottom: 3px solid #f3b5c5 !important;
  padding-bottom: 10px !important;
}

#resultDialog .result-stats strong {
  color: #e11d48 !important;
}

#resultDialog #replayButton,
html[data-theme="dark"] #resultDialog #replayButton {
  width: min(280px, 100%) !important;
  margin-top: 4px !important;
  background: #e11d48 !important;
  color: #ffffff !important;
  border: 3px solid #07162d !important;
  box-shadow: 0 7px 0 #7f102b !important;
}

#resultDialog .death-hint {
  opacity: .75 !important;
}

html[data-theme="dark"] #resultDialog.result-grave,
html[data-theme="dark"] #resultDialog .death-card {
  background: #fff4f8 !important;
  color: #07162d !important;
  border-color: #07162d !important;
}

@media (max-width: 460px) {
  #resultDialog .life-row {
    gap: 8px !important;
  }

  #resultDialog #resultTitle {
    text-shadow: 3px 3px 0 #07162d !important;
  }
}

/* Minimal 9:16 death card. */
#resultDialog.result-grave {
  width: min(360px, calc(100% - 32px)) !important;
  aspect-ratio: 9 / 16 !important;
  max-height: min(760px, calc(100dvh - 40px)) !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: #ffd6e2 !important;
  box-shadow: 0 12px 0 #e11d48, 0 28px 70px #07162d38 !important;
  overflow: hidden !important;
}

html[data-theme="dark"] #resultDialog.result-grave {
  background: #ffd6e2 !important;
  box-shadow: 0 12px 0 #e11d48, 0 28px 78px #000c !important;
}

#resultDialog.result-grave::backdrop {
  background: rgba(7, 22, 45, .62) !important;
  backdrop-filter: blur(5px) !important;
}

#resultDialog .death-card {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: clamp(26px, 5vh, 40px) 26px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  background: #fff4f8 !important;
  color: #07162d !important;
  border: 3px solid #07162d !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #resultDialog .death-card {
  background: #fff4f8 !important;
  color: #07162d !important;
  border-color: #07162d !important;
}

#resultDialog #closeResult {
  top: 20px !important;
  right: 20px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  border: 2px solid #07162d !important;
  background: #ffffff !important;
  color: #07162d !important;
  box-shadow: 0 4px 0 #eaa9ba !important;
}

#resultDialog .life-row {
  display: flex !important;
  gap: 12px !important;
  margin: 0 !important;
}

#resultDialog .life-row span {
  width: 22px !important;
  height: 22px !important;
  background: #e11d48 !important;
  transform: rotate(-45deg) !important;
  position: relative !important;
  box-shadow: 3px 3px 0 #7f102b !important;
}

#resultDialog .life-row span::before,
#resultDialog .life-row span::after {
  content: "" !important;
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  background: inherit !important;
  border-radius: 50% !important;
}

#resultDialog .life-row span::before { top: -50% !important; left: 0 !important; }
#resultDialog .life-row span::after { left: 50% !important; top: 0 !important; }

#resultDialog .result-kicker {
  margin: 16px 0 0 !important;
  color: #e11d48 !important;
  font: 900 10px/1 ui-monospace, "Cascadia Code", monospace !important;
  letter-spacing: 2.2px !important;
}

#resultDialog #resultTitle {
  margin: 0 !important;
  color: #07162d !important;
  font: 900 clamp(38px, 10vw, 56px)/.9 "Space Grotesk", system-ui, sans-serif !important;
  letter-spacing: -2px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

#resultDialog .death-score {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

#resultDialog .death-score span,
#resultDialog .result-stats span,
#resultDialog .death-hint {
  color: #7f102b !important;
  font: 900 10px/1 ui-monospace, "Cascadia Code", monospace !important;
  letter-spacing: 1.8px !important;
}

#resultDialog #resultScore {
  color: #07162d !important;
  font: 900 clamp(56px, 15vw, 76px)/.85 "Space Grotesk", system-ui, sans-serif !important;
  letter-spacing: -3px !important;
  text-shadow: none !important;
}

#resultDialog .result-stats {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
}

#resultDialog .result-stats > div {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #f3b5c5 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#resultDialog .result-stats strong {
  color: #e11d48 !important;
  font: 900 26px/1 "Space Grotesk", system-ui, sans-serif !important;
}

#resultDialog #replayButton,
html[data-theme="dark"] #resultDialog #replayButton {
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  background: #e11d48 !important;
  color: #ffffff !important;
  border: 3px solid #07162d !important;
  border-radius: 16px !important;
  box-shadow: 0 7px 0 #7f102b !important;
  font: 900 13px ui-monospace, "Cascadia Code", monospace !important;
  letter-spacing: 1.4px !important;
}

#resultDialog #replayButton:active {
  transform: translateY(7px) !important;
  box-shadow: none !important;
}

#resultDialog .death-hint {
  margin: 10px 0 0 !important;
  opacity: .7 !important;
}

#resultDialog .run-code,
#resultDialog #runCode {
  display: none !important;
}

@media (max-height: 680px) {
  #resultDialog.result-grave {
    width: min(330px, calc(100% - 24px)) !important;
  }

  #resultDialog .death-card {
    padding-block: 22px !important;
  }

  #resultDialog .life-row span {
    width: 18px !important;
    height: 18px !important;
  }
}

/* Minimal softer death title revision. */
#resultDialog .life-row {
  display: none !important;
}

#resultDialog #resultTitle {
  max-width: 210px !important;
  margin: 0 auto !important;
  color: #07162d !important;
  font-family: "Trebuchet MS", "Segoe UI Rounded", "Arial Rounded MT Bold", system-ui, sans-serif !important;
  font-size: clamp(34px, 9vw, 48px) !important;
  font-weight: 900 !important;
  line-height: .92 !important;
  letter-spacing: -1.5px !important;
  text-transform: none !important;
}

/* Result stat icons and fixed replay color. */
#resultDialog .result-stats span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#resultDialog .result-stats span i {
  width: 22px !important;
  height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 2px solid #07162d !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #e11d48 !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow: 0 3px 0 #f3b5c5 !important;
}

#resultDialog #replayButton,
html[data-theme="dark"] #resultDialog #replayButton {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #07162d !important;
  box-shadow: 0 7px 0 #7f102b !important;
}

/* Keep long questions inside the calculator screen. */
.game-page .display {
  overflow: hidden !important;
}

.game-page .question {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-size: clamp(30px, 2.35vw, 44px) !important;
  line-height: 1 !important;
  letter-spacing: -2.4px !important;
  margin: 12px auto 8px !important;
  padding: 0 4px !important;
}

@media (max-width: 759px) {
  .game-page .question {
    font-size: clamp(25px, 8vw, 34px) !important;
    letter-spacing: -1.8px !important;
    padding-inline: 2px !important;
  }
}

/* Bigger timeometer and heatometer numbers. */
.game-page .liquid-meter .meter-number span {
  font-size: clamp(34px, 3vw, 46px) !important;
  line-height: .9 !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px !important;
}

.game-page .liquid-meter .meter-number small {
  font-size: 9px !important;
  letter-spacing: .8px !important;
}

@media (max-width: 759px) {
  .game-page .liquid-meter .meter-number span {
    font-size: clamp(22px, 7vw, 32px) !important;
  }

  .game-page .liquid-meter .meter-number small {
    font-size: 7px !important;
  }
}

/* Final dark game palette: flat black/white with controlled accents. */
html[data-theme="dark"] .game-page {
  background: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .game-page .arena,
html[data-theme="dark"] .game-page .game-layout {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .game-page .console {
  background: #f5f5f5 !important;
  border-color: #ffffff !important;
  box-shadow: 8px 9px 0 #202020, 14px 16px 0 #000000 !important;
}

html[data-theme="dark"] .game-page .display {
  background: #f8fbff !important;
  border-color: #38bdf8 !important;
  box-shadow: inset 0 4px 0 #d7ebfb !important;
}

html[data-theme="dark"] .game-page .display-top,
html[data-theme="dark"] .game-page .display-bottom,
html[data-theme="dark"] .game-page .fuse-label,
html[data-theme="dark"] .game-page .feedback-row,
html[data-theme="dark"] .game-page .console-bottom {
  color: #111111 !important;
}

html[data-theme="dark"] .game-page .question,
html[data-theme="dark"] .game-page .answer-slot,
html[data-theme="dark"] .game-page #answerText {
  color: #000000 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .game-page .question span {
  color: #f59e0b !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .game-page .question-fuse,
html[data-theme="dark"] .game-page .feedback-row,
html[data-theme="dark"] .game-page .keypad {
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
}

html[data-theme="dark"] .game-page .fuse-track {
  background: #cbd5e1 !important;
}

html[data-theme="dark"] .game-page .fuse-track i,
html[data-theme="dark"] .game-page #timeLiquid {
  background: #38bdf8 !important;
}

html[data-theme="dark"] .game-page #heatLiquid {
  background: #f59e0b !important;
}

html[data-theme="dark"] .game-page .keypad button {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: 0 5px 0 #9ca3af !important;
}

html[data-theme="dark"] .game-page .keypad .utility,
html[data-theme="dark"] .game-page .keypad .clear-key,
html[data-theme="dark"] .game-page .keypad .sign-key,
html[data-theme="dark"] .game-page .keypad button[data-key="Backspace"] {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
  box-shadow: 0 5px 0 #000000 !important;
}

html[data-theme="dark"] .game-page .keypad .enter-key {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #e11d48 !important;
  box-shadow: 0 5px 0 #7f102b !important;
}

html[data-theme="dark"] .game-page .stat-label,
html[data-theme="dark"] .game-page .meter-footer,
html[data-theme="dark"] .game-page .run-widgets span,
html[data-theme="dark"] .game-page .arena-bottom {
  color: #ffffff !important;
}

html[data-theme="dark"] .game-page .stat-value,
html[data-theme="dark"] .game-page #score,
html[data-theme="dark"] .game-page #streak {
  color: #ffffff !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .game-page #timeValue {
  color: #38bdf8 !important;
}

html[data-theme="dark"] .game-page #heatValue,
html[data-theme="dark"] .game-page .fire-icon {
  color: #f59e0b !important;
}

html[data-theme="dark"] .game-page .liquid-meter {
  background: #101010 !important;
  border-color: #ffffff !important;
  box-shadow: inset 3px 3px 0 #000000, 3px 4px 0 #2a2a2a !important;
}

html[data-theme="dark"] .game-page .reaction-word {
  color: #ffffff !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .game-page .reaction-stage[data-kind="miss"] .reaction-word,
html[data-theme="dark"] .game-page .miss .feedback-row {
  color: #e11d48 !important;
}

html[data-theme="dark"] .game-page .reaction-stage[data-kind="overdrive"] .reaction-word,
html[data-theme="dark"] .game-page .overdrive .feedback-row {
  color: #f59e0b !important;
}

html[data-theme="dark"] .game-page .success .display {
  background: #ffffff !important;
  border-color: #38bdf8 !important;
}

html[data-theme="dark"] .game-page .miss .display {
  background: #fff1f2 !important;
  border-color: #e11d48 !important;
}

/* Strict pitch-black and white game dark mode. */
html[data-theme="dark"] .game-page,
html[data-theme="dark"] .game-page .arena,
html[data-theme="dark"] .game-page .game-layout {
  background: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .game-page .console,
html[data-theme="dark"] .game-page .question-fuse,
html[data-theme="dark"] .game-page .feedback-row,
html[data-theme="dark"] .game-page .keypad {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .game-page .display {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .game-page .display-top,
html[data-theme="dark"] .game-page .display-bottom,
html[data-theme="dark"] .game-page .fuse-label,
html[data-theme="dark"] .game-page .feedback-row,
html[data-theme="dark"] .game-page .console-bottom,
html[data-theme="dark"] .game-page .question,
html[data-theme="dark"] .game-page .question span,
html[data-theme="dark"] .game-page .answer-slot,
html[data-theme="dark"] .game-page #answerText {
  color: #000000 !important;
}

html[data-theme="dark"] .game-page .keypad button,
html[data-theme="dark"] .game-page .keypad .utility,
html[data-theme="dark"] .game-page .keypad .clear-key,
html[data-theme="dark"] .game-page .keypad .sign-key,
html[data-theme="dark"] .game-page .keypad button[data-key="Backspace"],
html[data-theme="dark"] .game-page .keypad .enter-key {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .game-page .liquid-meter {
  background: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .game-page #timeLiquid,
html[data-theme="dark"] .game-page #heatLiquid,
html[data-theme="dark"] .game-page .fuse-track i {
  background: #ffffff !important;
}

html[data-theme="dark"] .game-page .fuse-track {
  background: #000000 !important;
}

html[data-theme="dark"] .game-page .stat-label,
html[data-theme="dark"] .game-page .meter-footer,
html[data-theme="dark"] .game-page .stat-caption,
html[data-theme="dark"] .game-page .run-widgets span,
html[data-theme="dark"] .game-page .arena-bottom,
html[data-theme="dark"] .game-page .reaction-word,
html[data-theme="dark"] .game-page .stat-value,
html[data-theme="dark"] .game-page #score,
html[data-theme="dark"] .game-page #streak,
html[data-theme="dark"] .game-page #timeValue,
html[data-theme="dark"] .game-page #heatValue,
html[data-theme="dark"] .game-page .fire-icon {
  color: #ffffff !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #resultDialog.result-grave,
html[data-theme="dark"] #resultDialog .death-card {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #resultDialog #resultTitle,
html[data-theme="dark"] #resultDialog #resultScore,
html[data-theme="dark"] #resultDialog .result-stats strong,
html[data-theme="dark"] #resultDialog .result-stats span,
html[data-theme="dark"] #resultDialog .death-score span,
html[data-theme="dark"] #resultDialog .death-hint {
  color: #ffffff !important;
}

html[data-theme="dark"] #resultDialog #replayButton,
html[data-theme="dark"] #resultDialog .result-stats span i,
html[data-theme="dark"] #resultDialog #closeResult {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

/* Absolute two-color dark game: black and white only. */
html[data-theme="dark"] .game-page,
html[data-theme="dark"] .game-page *:not(svg):not(path) {
  background-image: none !important;
  text-shadow: none !important;
  filter: none !important;
}

html[data-theme="dark"] .game-page {
  background: #000000 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .game-page .topbar,
html[data-theme="dark"] .game-page .arena,
html[data-theme="dark"] .game-page .game-layout,
html[data-theme="dark"] .game-page .liquid-meter,
html[data-theme="dark"] .game-page .meter-ticks,
html[data-theme="dark"] .game-page .fuse-track,
html[data-theme="dark"] .game-page .run-widgets span,
html[data-theme="dark"] .game-page .arena-bottom,
html[data-theme="dark"] #resultDialog.result-grave,
html[data-theme="dark"] #resultDialog .death-card {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .game-page .console,
html[data-theme="dark"] .game-page .display,
html[data-theme="dark"] .game-page .question-fuse,
html[data-theme="dark"] .game-page .feedback-row,
html[data-theme="dark"] .game-page .keypad,
html[data-theme="dark"] .game-page .keypad button,
html[data-theme="dark"] .game-page .keypad .utility,
html[data-theme="dark"] .game-page .keypad .clear-key,
html[data-theme="dark"] .game-page .keypad .sign-key,
html[data-theme="dark"] .game-page .keypad .enter-key,
html[data-theme="dark"] .game-page .keypad button[data-key="Backspace"],
html[data-theme="dark"] #resultDialog #replayButton,
html[data-theme="dark"] #resultDialog #closeResult,
html[data-theme="dark"] #resultDialog .result-stats span i {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .game-page .display *,
html[data-theme="dark"] .game-page .question-fuse *,
html[data-theme="dark"] .game-page .feedback-row *,
html[data-theme="dark"] .game-page .console-bottom,
html[data-theme="dark"] .game-page .console-bottom *,
html[data-theme="dark"] .game-page .question,
html[data-theme="dark"] .game-page .question span,
html[data-theme="dark"] .game-page .answer-slot,
html[data-theme="dark"] .game-page #answerText {
  color: #000000 !important;
}

html[data-theme="dark"] .game-page .stat-label,
html[data-theme="dark"] .game-page .meter-footer,
html[data-theme="dark"] .game-page .stat-caption,
html[data-theme="dark"] .game-page .stat-value,
html[data-theme="dark"] .game-page #score,
html[data-theme="dark"] .game-page #streak,
html[data-theme="dark"] .game-page #timeValue,
html[data-theme="dark"] .game-page #heatValue,
html[data-theme="dark"] .game-page .fire-icon,
html[data-theme="dark"] .game-page .reaction-word,
html[data-theme="dark"] #resultDialog #resultTitle,
html[data-theme="dark"] #resultDialog #resultScore,
html[data-theme="dark"] #resultDialog .result-stats strong,
html[data-theme="dark"] #resultDialog .result-stats span,
html[data-theme="dark"] #resultDialog .death-score span,
html[data-theme="dark"] #resultDialog .death-hint {
  color: #ffffff !important;
}

html[data-theme="dark"] .game-page #timeLiquid,
html[data-theme="dark"] .game-page #heatLiquid,
html[data-theme="dark"] .game-page .fuse-track i,
html[data-theme="dark"] .game-page .wave,
html[data-theme="dark"] .game-page .bubble {
  background: #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .game-page .cracks path {
  stroke: #000000 !important;
}

/* ═══════════════════════════════════════════════════════════════
   3-COLUMN VERTICAL METER MOBILE UI (SPEC-PERFECT PORTRAIT COMPOSITION)
   Left: Vertical Time Meter & Score | Center: Calculator | Right: Vertical Heat Meter & Streak
   Target Viewports: 360×640, 390×844, 412×915
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 759px) {

  /* Allow vertical scrolling on short mobile viewports so controls are never clipped */
  html, body.game-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .game-page main {
    width: 100% !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .game-page .arcade {
    width: 100% !important;
    max-width: 480px !important;
    padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .game-page .arena {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* ── 1. Compact Single-Row Header Bar (48–52px) ── */
  .game-page .topbar.arcade-nav {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: 100% !important;
    position: relative !important;
    z-index: 20 !important;
  }

  .game-page .topbar .brand {
    font-size: 15px !important;
  }

  .game-page .topbar .nav-links {
    display: none !important; /* Collapse secondary nav into mobile menu */
  }

  .game-page .topbar .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .game-page .topbar .icon-button,
  .game-page .topbar .nav-play {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  /* Hide desktop non-essentials on mobile */
  .game-page .section-heading,
  .game-page .arena-top,
  .game-page .arena-bottom,
  .game-page .run-widgets,
  .game-page .character-foot,
  .game-page .reaction-stage,
  .mobile-game-header,
  .mobile-meters {
    display: none !important;
  }

  /* ── 2. Centered Title (TIME SLIP) ── */
  .mobile-title-block {
    text-align: center !important;
    margin: 2px auto 6px !important;
    width: 100% !important;
  }

  .mobile-title-block h1 {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(24px, 6.5vw, 28px) !important;
    letter-spacing: -0.5px !important;
    color: #e11d48 !important;
    text-shadow: 0 2px 0 #f7d6e0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* ── 3. Mobile Grid (Top Stats | Horizontal Capsule Meters | TIME SLIP Title | Console) ── */
  .game-page .game-layout {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "time heat"
      "title title"
      "console console" !important;
    gap: 8px 12px !important;
    align-items: start !important;
    box-sizing: border-box !important;
  }

  /* ── 4. LEFT Column (Score & Horizontal Time Meter) ── */
  .game-page .game-layout > .time-column {
    grid-area: time !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .game-page .time-column .stat-label {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    color: #536c2e !important;
    white-space: nowrap !important;
    margin: 0 0 2px !important;
    text-transform: uppercase !important;
  }

  .game-page .time-column .stat-value,
  .game-page #score {
    font-family: 'Fredoka', 'Outfit', 'Space Grotesk', sans-serif !important;
    font-weight: 900 !important;
    font-size: clamp(28px, 7.5vw, 36px) !important;
    letter-spacing: -0.5px !important;
    color: #18200f !important;
    line-height: 1 !important;
    margin: 0 0 6px !important;
  }

  .game-page #scoreCaption,
  .game-page .time-column .stat-caption {
    display: none !important;
  }

  /* Horizontal Capsule Time Meter */
  .game-page .time-meter {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 999px !important;
    border: 2.5px solid #5d6651 !important;
    background: #e2e8d0 !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 10px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }

  .game-page #timeLiquid {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: var(--fill, 0%) !important;
    transition: width 0.15s linear !important;
    background: linear-gradient(90deg, #38bdf8, #0284c7) !important;
    border-radius: 999px 0 0 999px !important;
  }

  .game-page .time-meter .meter-number {
    position: relative !important;
    inset: auto !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    color: #18200f !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-weight: 800 !important;
  }

  .game-page .time-meter .meter-number span {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  .game-page .time-meter .meter-number small {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 8px !important;
    font-weight: 700 !important;
  }

  .game-page .time-column .meter-footer {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    white-space: nowrap !important;
    margin-top: 4px !important;
    text-align: center !important;
    width: 100% !important;
    color: #536c2e !important;
  }

  /* ── 5. RIGHT Column (Combo & Horizontal Heat Meter) ── */
  .game-page .game-layout > .heat-column {
    grid-area: heat !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-align: right !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .game-page .heat-column .stat-label {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    color: #536c2e !important;
    white-space: nowrap !important;
    margin: 0 0 2px !important;
    text-transform: uppercase !important;
  }

  .game-page .heat-column .stat-value,
  .game-page #streak {
    font-family: 'Fredoka', 'Outfit', 'Space Grotesk', sans-serif !important;
    font-weight: 900 !important;
    font-size: clamp(28px, 7.5vw, 36px) !important;
    letter-spacing: -0.5px !important;
    color: #d8662d !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
  }

  .game-page .heat-column .fire-icon {
    font-size: 18px !important;
    color: #ff863e !important;
  }

  .game-page #heatCaption {
    display: block !important;
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #536c2e !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
  }

  .game-page .heat-column .stat-caption {
    display: none !important;
  }

  /* Horizontal Capsule Heat Meter */
  .game-page .heat-meter {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 999px !important;
    border: 2.5px solid #5d6651 !important;
    background: #e2e8d0 !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 10px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }

  .game-page #heatLiquid {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: var(--fill, 0%) !important;
    transition: width 0.15s linear !important;
    background: linear-gradient(90deg, #fb923c, #ea580c) !important;
    border-radius: 999px 0 0 999px !important;
  }

  .game-page .heat-meter .meter-number {
    position: relative !important;
    inset: auto !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    color: #18200f !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-weight: 800 !important;
  }

  .game-page .heat-meter .meter-number span {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  .game-page .heat-meter .meter-number small {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 8px !important;
    font-weight: 700 !important;
  }

  .game-page .heat-column .meter-footer {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    white-space: nowrap !important;
    margin-top: 4px !important;
    text-align: center !important;
    width: 100% !important;
    color: #536c2e !important;
  }

  /* ── 5c. Mobile Title Block (TIME SLIP) ── */
  .game-page .mobile-title-block {
    grid-area: title !important;
    text-align: center !important;
    margin: 6px 0 4px !important;
  }

  .game-page .mobile-title-block h1 {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-weight: 900 !important;
    font-size: clamp(28px, 8.5vw, 36px) !important;
    color: #9f1239 !important;
    letter-spacing: 1.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 4px rgba(159, 18, 57, 0.15) !important;
  }

  /* Hide meter clutter elements */
  .game-page .meter-ticks,
  .game-page .meter-glyph,
  .game-page .hurry-label,
  .game-page .time-bonus {
    display: none !important;
  }

  /* ── 6. CENTER Column (Calculator Console Card) ── */
  .game-page .console {
    grid-area: console !important;
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    padding: clamp(8px, 2.5vw, 12px) !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    transform: none !important;
    margin: 0 auto !important;
    background: #d7d9cb !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 6px 0 #858a77, 0 14px 28px rgba(0, 0, 0, 0.15) !important;
  }

  .game-page .character-top {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 7.5px !important;
    margin: 0 2px 4px !important;
  }

  /* ── 6a. Compact CRT Display Screen (~115–135px) ── */
  .game-page .display {
    height: auto !important;
    min-height: 115px !important;
    max-height: 135px !important;
    padding: 6px 8px !important;
    border: 3.5px solid #5d6651 !important;
    border-radius: 10px !important;
    background: #d5fa65 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: inset 2px 3px 0 #a4c348 !important;
  }

  .game-page .display-top {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 7.5px !important;
    font-weight: 700 !important;
    color: #536c2e !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .game-page .question {
    font-family: 'Fredoka', 'Outfit', 'Space Grotesk', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.5px !important;
    color: #18200f !important;
    text-align: center !important;
    margin: 2px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
  }

  .game-page .question span {
    color: #c2410c !important;
    font-weight: 900 !important;
    margin: 0 3px !important;
  }

  .game-page .answer-slot,
  .game-page #answerText {
    font-family: 'Fredoka', 'Outfit', 'Space Grotesk', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    color: #18200f !important;
    height: 24px !important;
    min-height: 24px !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .game-page .display-bottom {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 6px !important;
    color: #536c2e !important;
  }

  .game-page .cracks {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  /* ── 6b & 6c. Fuse & Feedback Row ── */
  .game-page .question-fuse {
    margin: 6px 0 4px !important;
    padding: 0 !important;
  }

  .game-page .fuse-label {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 7px !important;
    margin-bottom: 1px !important;
  }

  .game-page .feedback-row {
    height: 20px !important;
    min-height: 20px !important;
    margin-bottom: 6px !important;
    padding: 0 2px !important;
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 7.5px !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* ── 6d. Complete 4-Column Keypad (44px Touch Targets, Spanning Enter) ── */
  .game-page .keypad {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(44px, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 2px !important;
  }

  .game-page .keypad button {
    height: 44px !important;
    min-height: 44px !important;
    font-family: 'Fredoka', 'Outfit', 'Space Grotesk', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(16px, 4.5vw, 22px) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: transform 0.075s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.075s !important;
  }

  .game-page .keypad button:active,
  .game-page .keypad button.pressed {
    transform: translateY(3px) !important;
  }

  .game-page .keypad .utility {
    font-size: clamp(14px, 4vw, 18px) !important;
  }

  .game-page .keypad .enter-key {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    grid-column: 4 !important;
    grid-row: 3 / 5 !important;
    height: auto !important;
    min-height: 93px !important;
    flex-direction: column !important;
    gap: 1px !important;
    background: #ff863e !important;
    border-color: #ffad75 !important;
    color: #39200e !important;
  }

  .game-page .keypad .enter-key small {
    font-size: 6px !important;
  }

  .game-page .console-bottom {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 6px !important;
    margin-top: 4px !important;
  }

  /* ── 7. Personal Best Line ── */
  .game-page #bestLabel {
    display: block !important;
    text-align: center !important;
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    margin: 8px auto 12px !important;
    color: #536c2e !important;
  }
}



/* Reference mobile UI layout: real DOM grid matching score/combo, meters, title, calculator. */
@media (max-width: 759px) {
  .game-page .section-heading,
  .game-page .arena-top,
  .game-page .reaction-stage,
  .game-page .run-widgets,
  .game-page .arena-bottom {
    display: none !important;
  }

  .game-page main,
  .game-page #arcade,
  .game-page #arena {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .game-page #arena {
    min-height: auto !important;
    display: block !important;
  }

  .game-page #arena .game-layout {
    width: min(92vw, 332px) !important;
    max-width: 332px !important;
    margin: 0 auto !important;
    padding: 0.72rem 0 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      'time heat'
      'title title'
      'console console' !important;
    column-gap: 1.05rem !important;
    row-gap: 0.72rem !important;
    align-items: start !important;
    justify-items: stretch !important;
  }

  .game-page #arena .time-column,
  .game-page #arena .heat-column {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    text-align: left !important;
  }

  .game-page #arena .time-column { grid-area: time !important; }
  .game-page #arena .heat-column { grid-area: heat !important; }
  .game-page #arena .mobile-title-block { grid-area: title !important; }
  .game-page #arena .console { grid-area: console !important; }

  .game-page #arena .time-column > .stat-label,
  .game-page #arena .heat-column > .stat-label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 0.18rem !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    color: transparent !important;
    text-align: left !important;
  }

  .game-page #arena .time-column > .stat-label::before,
  .game-page #arena .heat-column > .stat-label::before {
    font-family: var(--font-code, ui-monospace, 'Cascadia Code', monospace) !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.28em !important;
    color: #5e6873 !important;
    text-transform: uppercase !important;
  }

  .game-page #arena .time-column > .stat-label::before { content: 'SCORE' !important; }
  .game-page #arena .heat-column > .stat-label::before { content: 'CURRENT COMBO' !important; }

  .game-page #arena #score,
  .game-page #arena .heat-column > .stat-value {
    display: flex !important;
    align-items: baseline !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 0.38rem !important;
    padding: 0 !important;
    font-family: var(--font-display, 'Space Grotesk', 'Outfit', system-ui, sans-serif) !important;
    font-size: clamp(2.9rem, 13.2vw, 4.05rem) !important;
    line-height: 0.9 !important;
    font-weight: 900 !important;
    letter-spacing: -0.065em !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: none !important;
    transform: none !important;
  }

  .game-page #arena #score {
    color: #050713 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .game-page #arena .heat-column > .stat-value {
    color: #c8754f !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .game-page #arena .heat-column .fire-icon {
    display: inline-block !important;
    margin-left: 0.28rem !important;
    color: #c8754f !important;
    font-size: 0.52em !important;
    line-height: 1 !important;
    transform: translateY(-0.06em) !important;
  }

  .game-page #arena #scoreCaption,
  .game-page #arena #heatCaption {
    display: none !important;
  }

  .game-page #arena .liquid-meter,
  .game-page #arena .time-meter,
  .game-page #arena .heat-meter {
    position: relative !important;
    width: 100% !important;
    height: 1.62rem !important;
    min-height: 1.62rem !important;
    max-height: 1.62rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0.28rem solid #101827 !important;
    border-radius: 999px !important;
    background: #fffefe !important;
    box-shadow: 0 0.18rem 0 #101827 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .game-page #arena .liquid-meter .liquid,
  .game-page #arena #timeLiquid,
  .game-page #arena #heatLiquid {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    min-width: 0.56rem !important;
    max-width: 100% !important;
    border-radius: 999px 0 0 999px !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .game-page #arena #timeLiquid { background: #a8dff6 !important; }
  .game-page #arena #heatLiquid { background: #ff9638 !important; }

  .game-page #arena .meter-number {
    position: relative !important;
    inset: auto !important;
    z-index: 3 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
    font-family: var(--font-display, 'Space Grotesk', 'Outfit', system-ui, sans-serif) !important;
    color: #101827 !important;
  }

  .game-page #arena .meter-number span {
    font-family: var(--font-display, 'Space Grotesk', 'Outfit', system-ui, sans-serif) !important;
    font-size: 1.42rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    color: #101827 !important;
  }

  .game-page #arena .meter-number small {
    display: inline !important;
    margin-left: 0.24rem !important;
    font-family: var(--font-code, ui-monospace, 'Cascadia Code', monospace) !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.22em !important;
    color: #5e6873 !important;
  }

  .game-page #arena .heat-meter .meter-number small {
    display: none !important;
  }

  .game-page #arena .heat-meter .meter-number::after {
    content: '%' !important;
    margin-left: 0.16rem !important;
    font-family: var(--font-display, 'Space Grotesk', 'Outfit', system-ui, sans-serif) !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    color: #101827 !important;
  }

  .game-page #arena .meter-footer {
    display: block !important;
    width: 100% !important;
    margin: 0.54rem 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-family: var(--font-code, ui-monospace, 'Cascadia Code', monospace) !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    letter-spacing: 0.24em !important;
    font-weight: 900 !important;
    color: #5e6873 !important;
  }

  .game-page #arena .meter-glyph,
  .game-page #arena .meter-ticks,
  .game-page #arena .wave,
  .game-page #arena .wave.second,
  .game-page #arena .bubble,
  .game-page #arena .hurry-label,
  .game-page #arena .time-bonus {
    display: none !important;
  }

  .game-page #arena .mobile-title-block {
    width: 100% !important;
    margin: 0.28rem auto 0.02rem !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .game-page #arena .mobile-title-block h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-display, 'Space Grotesk', 'Outfit', system-ui, sans-serif) !important;
    font-size: clamp(2.65rem, 13vw, 4rem) !important;
    line-height: 0.92 !important;
    font-weight: 900 !important;
    letter-spacing: -0.06em !important;
    color: #c72c54 !important;
    text-align: center !important;
    text-shadow: 0 0.12rem 0 #8f1737 !important;
  }

  .game-page #arena .console {
    width: min(86vw, 314px) !important;
    max-width: 314px !important;
    margin: 0 auto !important;
    padding: 0.78rem !important;
    box-sizing: border-box !important;
    transform: none !important;
    border-radius: 1.35rem !important;
    background: var(--calc-shell, #cfe3f7) !important;
    border: 0.22rem solid #f8fdff !important;
    box-shadow: 0 0.55rem 0 var(--calc-edge, #315f85), 0 1rem 1.8rem #0f1b3330 !important;
  }

  .game-page #arena .display {
    min-height: 9.9rem !important;
    padding: 0.72rem !important;
    border-radius: 1rem !important;
    border-width: 0.22rem !important;
  }

  .game-page #arena .question {
    font-family: var(--font-display, 'Space Grotesk', 'Outfit', system-ui, sans-serif) !important;
    font-size: clamp(2.35rem, 11vw, 3.2rem) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.065em !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    margin: 0.35rem auto !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .game-page #arena .question-fuse,
  .game-page #arena .feedback-row {
    font-family: var(--font-code, ui-monospace, 'Cascadia Code', monospace) !important;
  }

  .game-page #arena .keypad {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.46rem !important;
    width: 100% !important;
    margin-top: 0.66rem !important;
  }

  .game-page #arena .keypad button {
    min-height: 3.1rem !important;
    height: auto !important;
    width: 100% !important;
    border-radius: 0.68rem !important;
    font-family: var(--font-display, 'Space Grotesk', 'Outfit', system-ui, sans-serif) !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform .075s cubic-bezier(.2,.8,.2,1), box-shadow .075s, filter .14s !important;
  }

  .game-page #arena .keypad .enter-key {
    grid-column: 4 !important;
    grid-row: 3 / 5 !important;
    min-height: 6.66rem !important;
  }

  .game-page #arena .keypad button:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.08) !important;
  }

  .game-page #arena .keypad button:active,
  .game-page #arena .keypad button.pressed {
    transform: translateY(0.34rem) scale(.985) !important;
  }
}

/* Mobile reference polish: force calculator question and answer layer above screen decoration. */
@media (max-width: 759px) {
  .game-page #arena .display {
    position: relative !important;
  }

  .game-page #arena .mini-face {
    display: none !important;
  }

  .game-page #arena .question,
  .game-page #arena .answer-slot,
  .game-page #arena .display-top,
  .game-page #arena .display-bottom {
    position: relative !important;
    z-index: 4 !important;
  }

  .game-page #arena .question,
  .game-page #arena .question span {
    color: #0f1b33 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
  }

  .game-page #arena .question span {
    color: #1784cf !important;
  }

  .game-page #arena .answer-slot {
    color: #7fa9c8 !important;
    background: rgba(255,255,255,.34) !important;
  }
}

/* Mobile spacing correction: balanced top stats, same-level meters, centered score. */
@media (max-width: 759px) {
  .game-page #arena .game-layout {
    width: min(92vw, 332px) !important;
    max-width: 332px !important;
    margin: 0 auto !important;
    padding-top: 0.55rem !important;
    display: grid !important;
    grid-template-columns: 0.7fr 1.35fr 0.7fr !important;
    grid-template-areas:
      'best score combo'
      'time time heat'
      'title title title'
      'console console console' !important;
    column-gap: 0.72rem !important;
    row-gap: 0.5rem !important;
    align-items: end !important;
    justify-items: stretch !important;
  }

  .game-page #arena .time-column {
    display: contents !important;
  }

  .game-page #arena .time-column > .stat-label {
    grid-area: score !important;
    align-self: start !important;
    justify-self: center !important;
    position: static !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .game-page #arena .time-column > .stat-label::before {
    content: 'SCORE' !important;
    display: block !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.24em !important;
    color: #101827 !important;
    text-align: center !important;
  }

  .game-page #arena #score {
    grid-area: score !important;
    align-self: end !important;
    justify-self: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 0.78rem !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: clamp(3.25rem, 16vw, 4.38rem) !important;
    line-height: 0.84 !important;
    letter-spacing: -0.055em !important;
    color: #050713 !important;
  }

  .game-page #arena #score::before {
    content: 'BEST\A' attr(aria-label);
    white-space: pre;
    position: absolute;
    left: 0;
    top: 0.18rem;
    width: 4.4rem;
    transform: translateX(-5.05rem);
    font-family: var(--font-code, ui-monospace, 'Cascadia Code', monospace);
    font-size: 0.52rem;
    line-height: 1.45;
    letter-spacing: 0.18em;
    color: #8b6672;
    text-align: left;
    opacity: 0.85;
  }

  .game-page #arena #scoreCaption,
  .game-page #arena .time-column .hurry-label,
  .game-page #arena .time-column .time-bonus {
    display: none !important;
  }

  .game-page #arena .time-column .time-meter {
    grid-area: time !important;
    align-self: start !important;
    justify-self: stretch !important;
    position: relative !important;
    width: 100% !important;
    height: 1.58rem !important;
    min-height: 1.58rem !important;
    max-height: 1.58rem !important;
    margin: 0 !important;
  }

  .game-page #arena .time-column .meter-footer {
    grid-area: time !important;
    align-self: end !important;
    justify-self: center !important;
    margin-top: 2.05rem !important;
  }

  .game-page #arena .heat-column {
    grid-area: combo !important;
    display: contents !important;
  }

  .game-page #arena .heat-column > .stat-label {
    grid-area: combo !important;
    align-self: start !important;
    justify-self: end !important;
    position: static !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: right !important;
  }

  .game-page #arena .heat-column > .stat-label::before {
    content: 'COMBO' !important;
    display: block !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.18em !important;
    color: #5e6873 !important;
    text-align: right !important;
  }

  .game-page #arena .heat-column > .stat-value {
    grid-area: combo !important;
    align-self: end !important;
    justify-self: end !important;
    width: auto !important;
    margin: 0 !important;
    padding-top: 0.76rem !important;
    font-size: clamp(2.4rem, 12vw, 3.28rem) !important;
    line-height: 0.86 !important;
    letter-spacing: -0.05em !important;
    justify-content: flex-end !important;
  }

  .game-page #arena #heatCaption {
    display: none !important;
  }

  .game-page #arena .heat-column .heat-meter {
    grid-area: heat !important;
    align-self: start !important;
    justify-self: stretch !important;
    position: relative !important;
    width: 100% !important;
    height: 1.58rem !important;
    min-height: 1.58rem !important;
    max-height: 1.58rem !important;
    margin: 0 !important;
  }

  .game-page #arena .heat-column .meter-footer {
    grid-area: heat !important;
    align-self: end !important;
    justify-self: center !important;
    margin-top: 2.05rem !important;
  }

  .game-page #arena .mobile-title-block {
    margin-top: 2.36rem !important;
    margin-bottom: 0 !important;
  }

  .game-page #arena .mobile-title-block h1 {
    font-size: clamp(2.42rem, 12vw, 3.45rem) !important;
  }

  .game-page #arena .console {
    margin-top: 0.05rem !important;
    width: min(86vw, 314px) !important;
  }
}

/* Mobile spacing polish: clean left-side balance badge, no noisy aria text. */
@media (max-width: 759px) {
  .game-page #arena #score {
    position: relative !important;
  }

  .game-page #arena #score::before {
    content: 'BEST\A RUN' !important;
    white-space: pre !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.24rem !important;
    width: 4.2rem !important;
    transform: translateX(-5.05rem) !important;
    font-family: var(--font-code, ui-monospace, 'Cascadia Code', monospace) !important;
    font-size: 0.52rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.22em !important;
    font-weight: 900 !important;
    color: #9a6b7a !important;
    text-align: left !important;
    opacity: 0.9 !important;
  }

  .game-page #arena .time-column .time-meter,
  .game-page #arena .heat-column .heat-meter {
    align-self: start !important;
  }

  .game-page #arena .time-column .meter-footer,
  .game-page #arena .heat-column .meter-footer {
    font-size: 0.56rem !important;
    letter-spacing: 0.18em !important;
  }
}

/* Mobile top stats cleanup: remove extra labels and make time/heat meters equal 50/50. */
@media (max-width: 759px) {
  .game-page #arena .game-layout {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      'score combo'
      'time heat'
      'title title'
      'console console' !important;
    column-gap: 0.72rem !important;
    row-gap: 0.5rem !important;
  }

  .game-page #arena .time-column > .stat-label::before,
  .game-page #arena .heat-column > .stat-label::before,
  .game-page #arena #score::before,
  .game-page #arena .time-column .meter-footer,
  .game-page #arena .heat-column .meter-footer {
    content: '' !important;
    display: none !important;
  }

  .game-page #arena .time-column > .stat-label,
  .game-page #arena .heat-column > .stat-label {
    display: none !important;
  }

  .game-page #arena #score {
    grid-area: score !important;
    justify-self: stretch !important;
    align-self: end !important;
    width: 100% !important;
    padding-top: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    font-size: clamp(3.05rem, 15vw, 4.08rem) !important;
  }

  .game-page #arena .heat-column > .stat-value {
    grid-area: combo !important;
    justify-self: stretch !important;
    align-self: end !important;
    width: 100% !important;
    padding-top: 0 !important;
    text-align: right !important;
    justify-content: flex-end !important;
    font-size: clamp(2.45rem, 12vw, 3.2rem) !important;
  }

  .game-page #arena .time-column .time-meter,
  .game-page #arena .heat-column .heat-meter {
    width: 100% !important;
    height: 1.58rem !important;
    min-height: 1.58rem !important;
    max-height: 1.58rem !important;
    align-self: start !important;
    justify-self: stretch !important;
    margin: 0 !important;
  }

  .game-page #arena .time-column .time-meter {
    grid-area: time !important;
  }

  .game-page #arena .heat-column .heat-meter {
    grid-area: heat !important;
  }

  .game-page #arena .mobile-title-block {
    margin-top: 1.85rem !important;
  }
}

/* Final mobile top balance: centered score, small left counter, TIME SLIP optically centered. */
@media (max-width: 759px) {
  .game-page #arena .game-layout {
    position: relative !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      'score score'
      'time heat'
      'title title'
      'console console' !important;
    row-gap: 0.5rem !important;
  }

  .game-page #arena #score {
    grid-area: score !important;
    justify-self: center !important;
    align-self: end !important;
    width: auto !important;
    min-width: 11.2rem !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: clamp(3.15rem, 15.5vw, 4.22rem) !important;
    line-height: 0.86 !important;
  }

  .game-page #arena #score::before {
    content: '⚡ 00' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: auto !important;
    transform: translate(-5.45rem, -46%) !important;
    font-family: var(--font-display, 'Space Grotesk', 'Outfit', system-ui, sans-serif) !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
    letter-spacing: -0.05em !important;
    font-weight: 900 !important;
    color: #c8754f !important;
    opacity: 0.9 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .game-page #arena .heat-column > .stat-value {
    grid-area: score !important;
    justify-self: end !important;
    align-self: end !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 0.1rem !important;
    font-size: clamp(2.25rem, 11vw, 3rem) !important;
    line-height: 0.86 !important;
  }

  .game-page #arena .time-column .time-meter,
  .game-page #arena .heat-column .heat-meter {
    margin-top: 0.12rem !important;
  }

  .game-page #arena .mobile-title-block {
    margin-top: 1.38rem !important;
    margin-bottom: 0.26rem !important;
  }
}

/* Final left balance visibility: keep small counter inside the mobile canvas. */
@media (max-width: 759px) {
  .game-page #arena #score::before {
    content: '⚡ 00' !important;
    transform: translate(-3.9rem, -46%) !important;
  }
}

/* Reliable mobile left balance: use existing score label slot instead of clipped pseudo. */
@media (max-width: 759px) {
  .game-page #arena #score::before {
    content: '' !important;
    display: none !important;
  }

  .game-page #arena .time-column > .stat-label {
    grid-area: score !important;
    display: block !important;
    position: relative !important;
    align-self: end !important;
    justify-self: start !important;
    width: auto !important;
    margin: 0 0 0.38rem 0 !important;
    padding: 0 !important;
    transform: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
    z-index: 6 !important;
  }

  .game-page #arena .time-column > .stat-label::before {
    content: '⚡ 00' !important;
    display: block !important;
    font-family: var(--font-display, 'Space Grotesk', 'Outfit', system-ui, sans-serif) !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
    letter-spacing: -0.05em !important;
    font-weight: 900 !important;
    color: #c8754f !important;
    opacity: 0.9 !important;
    white-space: nowrap !important;
  }
}

/* Mobile correct-answer counter: total hits, not streak. */
@media (max-width: 759px) {
  .game-page #arena .time-column > .stat-label::before {
    content: '✓ ' attr(data-correct) !important;
    color: #2f8f6b !important;
  }
}

/* Scorecard ad + continue/retry actions. */
#resultDialog .scorecard-ad {
  width: 100%;
  min-height: 76px;
  margin: 14px 0 12px;
  border: 2px dashed rgba(225, 29, 72, .32);
  border-radius: 16px;
  background: rgba(253, 231, 238, .72);
  display: grid;
  place-items: center;
  color: #9a6b7a;
  font-family: var(--font-code, ui-monospace, 'Cascadia Code', monospace);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
}

#resultDialog .scorecard-ad ins {
  width: 100%;
  min-height: 52px;
}

#resultDialog .result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

#resultDialog .result-actions button {
  min-height: 48px;
  border-radius: 12px;
  font-family: var(--font-code, ui-monospace, 'Cascadia Code', monospace);
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
}

#resultDialog #continueButton {
  background: #e11d48 !important;
  color: #fff !important;
  border: 3px solid #0f1b33 !important;
  box-shadow: 0 5px 0 #7f1230 !important;
}

#resultDialog #continueButton span {
  font-size: 10px;
  opacity: .86;
}

#resultDialog #replayButton.secondary {
  background: #fff !important;
  color: #0f1b33 !important;
  border: 3px solid #0f1b33 !important;
  box-shadow: 0 5px 0 #d7aab8 !important;
}

#resultDialog .result-actions button:active {
  transform: translateY(4px);
  box-shadow: none !important;
}

html[data-theme="dark"] #resultDialog .scorecard-ad {
  background: #111;
  color: #fff;
  border-color: #fff;
}

/* Keep scorecard continue/retry visible on mobile after ad box. */
@media (max-width: 759px) {
  #resultDialog.result-grave {
    max-height: calc(100dvh - 22px) !important;
    overflow: auto !important;
  }

  #resultDialog .death-card {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  #resultDialog #resultTitle {
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
    margin-bottom: 6px !important;
  }

  #resultDialog #resultScore {
    font-size: clamp(3.2rem, 16vw, 4.3rem) !important;
  }

  #resultDialog .result-stats {
    gap: 8px !important;
    margin: 10px 0 !important;
  }

  #resultDialog .result-stats > div {
    min-height: 40px !important;
    padding: 6px 0 !important;
  }

  #resultDialog .scorecard-ad {
    min-height: 70px !important;
    height: 78px !important;
    max-height: 78px !important;
    margin: 10px 0 10px !important;
    overflow: hidden !important;
  }

  #resultDialog .scorecard-ad ins {
    min-height: 52px !important;
    max-height: 60px !important;
    overflow: hidden !important;
  }

  #resultDialog .result-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  #resultDialog .result-actions button {
    min-height: 44px !important;
    font-size: 11px !important;
  }
}

/* Placed AdSense scorecard ad unit. */
#resultDialog .scorecard-ad,
#resultDialog .death-card .scorecard-ad {
  min-height: 54px !important;
  height: 54px !important;
  max-height: 54px !important;
  overflow: hidden !important;
}

#resultDialog .scorecard-ad .adsbygoogle,
#resultDialog .scorecard-ad ins.adsbygoogle {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
}

@media (max-width: 759px) {
  #resultDialog .scorecard-ad,
  #resultDialog .death-card .scorecard-ad {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    margin: 8px 0 !important;
  }
}

/* Scorecard button restyle: white base, red border. Keep ad area renderable. */
#resultDialog #continueButton,
#resultDialog #continueButton.primary,
#resultDialog #replayButton,
#resultDialog #replayButton.secondary {
  background: #fff !important;
  color: #e11d48 !important;
  border: 3px solid #e11d48 !important;
  box-shadow: 0 5px 0 #e11d48 !important;
}

#resultDialog #continueButton span {
  color: #e11d48 !important;
}

#resultDialog #continueButton[disabled] {
  opacity: .72 !important;
  cursor: wait !important;
}

#resultDialog .scorecard-ad .adsbygoogle,
#resultDialog .scorecard-ad ins.adsbygoogle {
  display: block !important;
  min-height: 48px !important;
  height: 48px !important;
  max-height: 48px !important;
  width: 100% !important;
}

@media (max-width: 759px) {
  #resultDialog .scorecard-ad,
  #resultDialog .death-card .scorecard-ad {
    min-height: 86px !important;
    height: 86px !important;
    max-height: 86px !important;
  }

  #resultDialog .scorecard-ad .adsbygoogle,
  #resultDialog .scorecard-ad ins.adsbygoogle {
    min-height: 64px !important;
    height: 64px !important;
    max-height: 64px !important;
  }
}

/* Final scorecard action button layout: equal, clean, and stable. */
#resultDialog .result-actions,
#resultDialog .death-card .result-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
}

#resultDialog .result-actions button,
#resultDialog .death-card .result-actions button,
#resultDialog #continueButton,
#resultDialog #replayButton {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #e11d48 !important;
  border: 3px solid #e11d48 !important;
  box-shadow: 0 5px 0 #e11d48 !important;
  font-family: var(--font-code, ui-monospace, 'Cascadia Code', monospace) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

#resultDialog #continueButton span {
  color: #e11d48 !important;
  font-size: 10px !important;
  opacity: .9 !important;
  line-height: 1 !important;
}

#resultDialog .result-actions button:active,
#resultDialog #continueButton:active,
#resultDialog #replayButton:active {
  transform: translateY(4px) !important;
  box-shadow: 0 1px 0 #e11d48 !important;
}

@media (max-width: 759px) {
  #resultDialog .result-actions,
  #resultDialog .death-card .result-actions {
    gap: 10px !important;
    margin-top: 10px !important;
  }

  #resultDialog .result-actions button,
  #resultDialog .death-card .result-actions button,
  #resultDialog #continueButton,
  #resultDialog #replayButton {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 8px !important;
    border-width: 2px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 0 #e11d48 !important;
    font-size: 10px !important;
    letter-spacing: .06em !important;
  }

  #resultDialog #continueButton span {
    font-size: 9px !important;
  }
}

/* Keep placed scorecard ad compact so Continue/Retry do not fall out of view. */
#resultDialog .scorecard-ad,
#resultDialog .death-card .scorecard-ad {
  min-height: 84px !important;
  height: 84px !important;
  max-height: 84px !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

#resultDialog .scorecard-ad ins.adsbygoogle,
#resultDialog .scorecard-ad .adsbygoogle,
#resultDialog .scorecard-ad iframe {
  display: block !important;
  width: 100% !important;
  min-height: 72px !important;
  height: 72px !important;
  max-height: 72px !important;
  overflow: hidden !important;
}

@media (max-width: 759px) {
  #resultDialog.result-grave {
    width: min(94vw, 360px) !important;
    max-height: calc(100dvh - 18px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  #resultDialog .death-card {
    min-height: auto !important;
    padding: 18px 18px 20px !important;
  }

  #resultDialog .scorecard-ad,
  #resultDialog .death-card .scorecard-ad {
    min-height: 78px !important;
    height: 78px !important;
    max-height: 78px !important;
    margin: 8px 0 10px !important;
  }

  #resultDialog .scorecard-ad ins.adsbygoogle,
  #resultDialog .scorecard-ad .adsbygoogle,
  #resultDialog .scorecard-ad iframe {
    min-height: 64px !important;
    height: 64px !important;
    max-height: 64px !important;
  }
}

/* Prevent the ad wrapper from flex-stretching and hiding result buttons. */
#resultDialog .death-card > .scorecard-ad,
#resultDialog .scorecard-ad {
  align-self: stretch !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: 84px !important;
  min-height: 84px !important;
  height: 84px !important;
  max-height: 84px !important;
}

#resultDialog .death-card > .result-actions,
#resultDialog .result-actions {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: 52px !important;
}

@media (max-width: 759px) {
  #resultDialog .death-card > .scorecard-ad,
  #resultDialog .scorecard-ad {
    flex-basis: 78px !important;
    min-height: 78px !important;
    height: 78px !important;
    max-height: 78px !important;
  }

  #resultDialog .death-card > .result-actions,
  #resultDialog .result-actions {
    flex-basis: 48px !important;
  }
}

/* Force both scorecard actions to the same white/red button skin. */
#resultDialog .result-actions #continueButton.primary,
#resultDialog .result-actions #continueButton,
#resultDialog .result-actions #replayButton.secondary,
#resultDialog .result-actions #replayButton,
#resultDialog .death-card .result-actions #continueButton,
#resultDialog .death-card .result-actions #replayButton {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #e11d48 !important;
  border-color: #e11d48 !important;
  box-shadow: 0 5px 0 #e11d48 !important;
}

/* Continue is disabled while ads are under review; keep Retry centered and full width. */
#resultDialog #continueButton[hidden] {
  display: none !important;
}

#resultDialog .result-actions:has(#continueButton[hidden]) {
  grid-template-columns: 1fr !important;
}

#resultDialog .result-actions:has(#continueButton[hidden]) #replayButton {
  width: min(100%, 220px) !important;
  justify-self: center !important;
}

/* Remove bottom helper strips from the game screen. */
.game-page .run-widgets,
.game-page .arena-bottom {
  display: none !important;
}

/* Match the scorecard helper text with the rank/combo/accuracy accent. */
#resultDialog .death-hint {
  color: #e11d48 !important;
  opacity: 1 !important;
}

/* Countdown overlay: only show 3, 2, 1. */
#gameOverlay.countdown-only .eyebrow,
#gameOverlay.countdown-only #overlayDescription,
#gameOverlay.countdown-only #startButton {
  display: none !important;
}

#gameOverlay.countdown-only #overlayTitle {
  margin: 0 !important;
  font-size: clamp(4rem, 18vw, 8rem) !important;
  line-height: 1 !important;
}

/* Final scorecard: HOME + RETRY pair when Continue is disabled. */
#resultDialog .result-actions #homeButton.secondary,
#resultDialog .result-actions #homeButton,
#resultDialog .death-card .result-actions #homeButton {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #e11d48 !important;
  border-color: #e11d48 !important;
  box-shadow: 0 5px 0 #e11d48 !important;
}

#resultDialog .result-actions:has(#continueButton[hidden]) {
  grid-template-columns: 1fr 1fr !important;
}

#resultDialog .result-actions:has(#continueButton[hidden]) #homeButton,
#resultDialog .result-actions:has(#continueButton[hidden]) #replayButton {
  width: 100% !important;
  justify-self: stretch !important;
}

/* Mobile TIME SLIP title now mirrors the live desktop reaction word. */
@media (max-width: 759px) {
  .game-page #arena .mobile-title-block[data-kind="perfect"] h1,
  .game-page #arena .mobile-title-block[data-kind="ready"] h1 {
    color: #607830 !important;
    text-shadow: 0 0.12rem 0 #d5fa65 !important;
  }

  .game-page #arena .mobile-title-block[data-kind="miss"] h1,
  .game-page #arena .mobile-title-block[data-kind="overdrive"] h1 {
    color: #e11d48 !important;
    text-shadow: 0 0.12rem 0 #f7d6e0 !important;
  }

  .game-page #arena .mobile-title-block.mobile-title-pop h1 {
    animation: mobileTitlePop 0.28s ease both;
  }
}

@keyframes mobileTitlePop {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-0.08rem) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

@media (max-width: 759px) {
  .game-page #arena .mobile-title-block h1 {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    font-size: clamp(2rem, 10.5vw, 3.1rem) !important;
  }
}