body{padding-top:0!important}
.topbar.arcade-nav{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;height:80px!important;margin:0!important;padding:12px clamp(16px,3vw,56px)!important;z-index:90;display:flex!important;align-items:center;gap:24px;box-shadow:none!important;border-bottom:1px solid var(--line)}
.arcade-nav .brand{flex:none;font-size:16px!important}.arcade-nav .brand-icon{width:42px;height:42px;border-radius:50%!important}
.arcade-nav .nav-links{display:flex;align-items:center;gap:8px;margin-left:auto}.arcade-nav .nav-right{display:flex!important;align-items:center;gap:10px}
.arcade-nav .nav-links button{font:600 14px var(--font-display);color:var(--ink);background:transparent;border:0;border-radius:20px!important;padding:12px 14px;cursor:pointer}.arcade-nav .nav-links button:hover{background:var(--panel)}
.arcade-nav .icon-button{height:42px;white-space:nowrap;border-radius:22px!important;box-shadow:none!important}.arcade-nav .theme-label{display:inline!important}.arcade-nav .theme-button{min-width:64px!important}
.arcade-nav .nav-play{border:1px solid #a4edff;border-radius:24px!important;padding:12px 24px;background:#61dbf5;color:#173b4c;font:800 14px var(--font-display);box-shadow:0 3px 0 #237f98;cursor:pointer;transition:transform .15s,box-shadow .15s}.arcade-nav .nav-play:active{transform:translateY(3px);box-shadow:none}
html[data-theme="light"] .arcade-nav .nav-play{background:#ff805e;color:#4b241c;border-color:#ffbfa8;box-shadow:0 3px 0 #b95037}html[data-theme="dark"] .topbar.arcade-nav{background:#080b16!important}
html{scroll-padding-top:24px}.home.home-stage{height:calc(100svh - 80px)}
@media(max-width:759px){body{padding-top:0!important}.topbar.arcade-nav{height:122px!important;padding:10px 12px!important;display:grid!important;grid-template-columns:1fr auto;gap:10px 6px}.arcade-nav .brand{font-size:13px!important;gap:7px}.arcade-nav .brand-icon{width:30px;height:30px}.arcade-nav .nav-right{gap:5px}.arcade-nav .icon-button{padding:8px!important;font-size:10px!important;height:36px}.arcade-nav .theme-button{min-width:36px!important}.arcade-nav .theme-label{display:none!important}.arcade-nav .nav-play{padding:9px 12px;font-size:12px}.arcade-nav .nav-links{grid-column:1/-1;grid-row:2;justify-content:center;margin:0;gap:24px}.arcade-nav .nav-links button{padding:6px 12px;font-size:13px}.game-page .mobile-game-header{position:relative!important;top:auto!important;display:flex!important;justify-content:space-between;padding:10px 16px;z-index:2}.home.home-stage{height:auto;min-height:calc(100svh - 122px)}html{scroll-padding-top:24px}}
@media(max-width:360px){.arcade-nav .brand{font-size:11px!important}.arcade-nav .brand-icon{width:25px;height:25px}.arcade-nav .nav-play{padding:9px}}

/* Mobile keeps primary controls in one row; secondary links use disclosure. */
.mobile-menu-toggle{display:none}
@media(max-width:759px){
 .topbar.arcade-nav{height:70px!important;display:flex!important;gap:8px!important;padding:12px!important;justify-content:space-between}
 .arcade-nav .brand{min-width:0!important;gap:6px;font-size:11px!important}.arcade-nav .brand-icon{width:28px;height:28px;flex:none}
 .arcade-nav .nav-right{gap:6px!important;flex:none}
 .arcade-nav #soundButton,.arcade-nav #themeButton{width:36px!important;min-width:36px!important;height:36px!important;padding:8px!important;display:grid!important;place-items:center}
 .arcade-nav #soundButton{font-size:0!important;position:relative}
 .arcade-nav #soundButton:before{content:"";display:block;width:20px;height:20px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4 5 9H2v6h3l6 5V4Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m16 9 6 6m0-6-6 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
 .arcade-nav #soundButton[aria-pressed="true"]:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4 5 9H2v6h3l6 5V4Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M15 8q4 4 0 8m3-11q7 7 0 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
 .arcade-nav .theme-svg-icon{width:19px;height:19px}.arcade-nav .nav-play{height:36px;padding:8px 12px;font-size:11px}
 .arcade-nav .mobile-menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:36px;height:36px;border:1px solid var(--line);border-radius:10px!important;background:var(--panel);color:var(--ink);cursor:pointer}
 .mobile-menu-toggle span{display:block;width:16px;height:2px;background:currentColor;transition:transform .18s,opacity .18s}
 .menu-open .mobile-menu-toggle span:first-child{transform:translateY(6px) rotate(45deg)}.menu-open .mobile-menu-toggle span:nth-child(2){opacity:0}.menu-open .mobile-menu-toggle span:last-child{transform:translateY(-6px) rotate(-45deg)}
 .arcade-nav .nav-links{display:none!important;position:absolute;top:calc(100% + 6px);right:12px;min-width:190px;padding:8px;gap:4px;margin:0;background:var(--panel);border:1px solid var(--line);border-radius:14px!important;box-shadow:0 12px 24px #0003;z-index:100}
 .arcade-nav.menu-open .nav-links{display:flex!important;flex-direction:column;align-items:stretch;animation:navReveal .18s ease-out}
 .arcade-nav .nav-links button{text-align:left;padding:12px 14px;min-height:44px}
 .home.home-stage{min-height:calc(100svh - 70px)}
}
@media(max-width:360px){.arcade-nav .brand>span:last-child{display:none}.arcade-nav .brand-icon{width:30px;height:30px}.arcade-nav .nav-right{gap:8px!important}}
@keyframes navReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.arcade-nav.menu-open .nav-links{animation:none}.mobile-menu-toggle span{transition:none}}

/* ── How-to-Play popup ─────────────────────────────── */
#navInfoDialog.how-guide {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  padding: 30px 32px 26px;
  border: 1px solid #dedbd1;
  border-radius: 14px;
  background: #fbfaf6;
  color: #20211f;
  box-shadow: 0 14px 34px #1718151c;
}

/* Entrance animation */
#navInfoDialog.how-guide[open] {
  animation: howEnter .28s ease-out both;
}
#navInfoDialog.how-guide[open]::backdrop {
  animation: howBackdrop .28s ease-out both;
  background: #1415128a;
  backdrop-filter: none;
}
@keyframes howEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes howBackdrop {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #navInfoDialog.how-guide[open],
  #navInfoDialog.how-guide[open]::backdrop { animation: none; }
}

/* Close X */
#navInfoDialog.how-guide #howCloseX {
  width: 32px;
  height: 32px;
  font-size: 15px !important;
  line-height: 1;
  padding: 0;
  border: 1px solid #dedbd1;
  border-radius: 7px !important;
  background: transparent;
  box-shadow: none !important;
  color: #64655f;
}
#navInfoDialog.how-guide #navInfoLabel {
  color: #d85f81 !important;
  font: 700 10px/1 var(--font-code) !important;
  letter-spacing: 2px;
}

/* Title & subtitle */
#navInfoDialog.how-guide h2 {
  font-size: clamp(24px, 3vw, 30px) !important;
  font-weight: 700;
  margin: 18px 0 6px;
  letter-spacing: -.8px;
  line-height: 1.18;
  color: #20211f !important;
}
#navInfoDialog .how-subtitle {
  font-size: 14px !important;
  line-height: 1.55;
  margin: 0 0 28px;
  color: #6c6d67 !important;
}

/* Four-step visual game loop */
#navInfoDialog .how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
#navInfoDialog.how-guide .how-steps li {
  display: flex;
  min-height: 210px;
  padding: 18px;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #dedbd1;
  border-radius: 10px;
  background: #f4f1e9;
}

/* Step icon */
#navInfoDialog .how-step-icon {
  display: block;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  flex-shrink: 0;
  margin-top: 1px;
  color: #d85f81 !important;
}
#navInfoDialog .how-step-icon svg {
  width: 19px;
  height: 19px;
}

/* Step number — small mono, above heading */
#navInfoDialog .how-step-number {
  display: block;
  font: 11px/1 var(--font-code) !important;
  color: #8a8a82 !important;
  margin: 0 0 8px;
  letter-spacing: .25px;
}

/* Step heading */
#navInfoDialog .how-steps h3 {
  display: block;
  font-size: 18px !important;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  color: #20211f !important;
}

/* Step description — comfortable reading */
#navInfoDialog .how-steps p {
  font-size: 13px !important;
  line-height: 1.45;
  margin: 6px 0 0;
  color: #6c6d67 !important;
}

.how-step-demo{height:82px;display:grid;place-items:center;position:relative;overflow:hidden;color:#20211f}
.demo-calculator{width:53px;height:66px;padding:7px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#252724;border:1px solid #111;border-radius:7px;box-shadow:3px 4px 0 #c8c4b9;animation:demoLaunch 2.4s ease-in-out infinite}
.demo-calculator>i:not(.demo-screen){height:7px;background:#c9f45b;border-radius:2px}.demo-calculator .demo-screen{grid-column:1/-1;height:24px;background:#f7f3e9;border-radius:3px;display:flex;align-items:center;justify-content:center;gap:7px}.demo-screen b{width:3px;height:5px;background:#252724;border-radius:2px}.demo-launch-line{position:absolute;bottom:3px;width:76px;height:2px;background:#d85f81}
.demo-equation{display:grid;grid-template-columns:1fr auto;align-items:center;width:154px;border:1px solid #b9b6ad;background:#fffdf7;padding:12px}.demo-equation b{grid-column:1/-1;font:700 20px var(--font-code);margin-bottom:8px;animation:demoQuestion 2.4s ease-out infinite}.demo-equation i{font:700 16px var(--font-code);color:#d85f81;border-bottom:2px solid #d85f81;padding:0 14px 3px 2px;animation:demoAnswer 2.4s steps(1) infinite}.demo-equation em{font:700 9px var(--font-code);font-style:normal;background:#c9f45b;padding:6px;box-shadow:0 3px 0 #7e982f;animation:demoEnter 2.4s ease-in-out infinite}
.demo-meters{display:flex;gap:14px}.demo-meters>i{width:62px;height:76px;padding:8px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid #b9b6ad;background:#fffdf7;position:relative;font-style:normal}.demo-meters b{position:absolute;top:7px;font:700 8px var(--font-code)}.demo-meters em{display:block;height:10px;background:#c9f45b;animation:demoMeter 2.4s ease-in-out infinite}.demo-meters>i:last-child em{background:#d85f81;animation-delay:.35s}.demo-meters strong{font:700 11px var(--font-code);margin-top:5px}
.demo-score{text-align:center}.demo-score small,.demo-score em{display:block;font:700 8px var(--font-code);letter-spacing:1px}.demo-score b{display:flex;margin:7px 0;gap:3px;font:700 25px var(--font-code);height:30px;overflow:hidden}.demo-score b i{font-style:normal;animation:demoDigit 2.4s cubic-bezier(.2,.8,.2,1) infinite}.demo-score b i:nth-child(2){animation-delay:.08s}.demo-score b i:nth-child(3){animation-delay:.16s}.demo-score em{color:#d85f81;font-style:normal;animation:demoBest 2.4s ease-out infinite}
@keyframes demoLaunch{0%,18%{transform:translateY(8px) scale(.96)}35%,75%{transform:translateY(-3px) scale(1)}100%{transform:translateY(8px) scale(.96)}}
@keyframes demoQuestion{0%,10%{opacity:0;transform:translateY(-6px)}22%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(3px)}}
@keyframes demoAnswer{0%,30%{color:transparent}31%,86%{color:#d85f81}100%{color:transparent}}
@keyframes demoEnter{0%,48%,70%,100%{transform:translateY(0);box-shadow:0 3px 0 #7e982f}55%,63%{transform:translateY(3px);box-shadow:0 0 0 #7e982f;background:#d85f81;color:#fff}}
@keyframes demoMeter{0%,15%{width:12%}65%,100%{width:100%}}
@keyframes demoDigit{0%,25%{transform:translateY(0)}38%{transform:translateY(-30px)}39%{transform:translateY(30px)}58%,100%{transform:translateY(0)}}
@keyframes demoBest{0%,55%{opacity:0;transform:translateY(3px)}70%,100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.demo-calculator,.demo-equation b,.demo-equation i,.demo-equation em,.demo-meters em,.demo-score b i,.demo-score em{animation:none!important}}

/* Footer rule note */
#navInfoDialog .how-footer {
  font: 11px/1.6 var(--font-code) !important;
  padding-top: 15px;
  margin: 24px 0 18px;
  border-top: 1px solid #dedbd1;
  color: #777871 !important;
}

/* Got it! button */
#navInfoDialog.how-guide .primary {
  width: 100%;
  justify-content: center;
  min-height: 48px;
  border: 1px solid #b2dc43;
  border-radius: 8px !important;
  background: #c9f45b;
  color: #202a10 !important;
  box-shadow: 0 3px 0 #7e982f;
  margin-top: 0;
  font-size: 13px !important;
  letter-spacing: .5px;
}
#navInfoDialog.how-guide .primary:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #7e982f; }
#navInfoDialog.how-guide .primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #7e982f; }

/* The guide intentionally uses only neutral, lime and restrained pink. */
html[data-theme="dark"] #navInfoDialog.how-guide {
  background: #171816;
  color: #f2f1e9;
  border-color: #363832;
  box-shadow: 0 16px 36px #0006;
}
html[data-theme="dark"] #navInfoDialog.how-guide h2,
html[data-theme="dark"] #navInfoDialog.how-guide .how-steps h3 { color: #f2f1e9 !important; }
html[data-theme="dark"] #navInfoDialog.how-guide .how-steps li{background:#20211f;border-color:#363832}
html[data-theme="dark"] #navInfoDialog.how-guide .how-step-demo{color:#f2f1e9}
html[data-theme="dark"] #navInfoDialog.how-guide .demo-equation,
html[data-theme="dark"] #navInfoDialog.how-guide .demo-meters>i{background:#171816;border-color:#4a4c45}
html[data-theme="dark"] #navInfoDialog.how-guide .how-subtitle,
html[data-theme="dark"] #navInfoDialog.how-guide .how-steps p,
html[data-theme="dark"] #navInfoDialog.how-guide .how-footer { color: #a7a89f !important; }
html[data-theme="dark"] #navInfoDialog.how-guide .how-step-number { color: #777970 !important; }
html[data-theme="dark"] #navInfoDialog.how-guide .how-footer,
html[data-theme="dark"] #navInfoDialog.how-guide #howCloseX { border-color: #363832; }
html[data-theme="dark"] #navInfoDialog.how-guide #howCloseX { color: #b8b9b1; }

/* ── Compact screens ──────────────────────────────── */
@media (max-height: 660px) {
  #navInfoDialog.how-guide { padding: 22px 20px 18px; }
  #navInfoDialog .how-steps { gap: 16px; }
  #navInfoDialog.how-guide h2 { font-size: 20px !important; margin: 10px 0 2px; }
  #navInfoDialog .how-subtitle { margin-bottom: 16px; }
  #navInfoDialog .how-footer { margin: 16px 0 14px; padding-top: 12px; }
}

/* ── Narrow mobile ────────────────────────────────── */
@media (max-width: 400px) {
  #navInfoDialog.how-guide { padding: 20px 16px 16px; }
  #navInfoDialog.how-guide .how-steps { grid-template-columns: 1fr; }
  #navInfoDialog.how-guide .how-steps li { min-height: 170px; }
  #navInfoDialog .how-step-icon { width: 18px; height: 18px; }
  #navInfoDialog .how-step-icon svg { width: 17px; height: 17px; }
}

/* ── Leaderboard popup ───────────────────────────── */
#navInfoDialog.best-dialog {
  width: min(420px, calc(100vw - 28px));
  text-align: center;
  padding: 20px 22px 22px;
  border-radius: 20px;
  overflow-y: auto;
  max-height: calc(100svh - 32px);
}
#navInfoDialog.best-dialog[open] {
  animation: howEnter .28s ease-out both;
}
#navInfoDialog.best-dialog[open]::backdrop {
  animation: howBackdrop .28s ease-out both;
}
#navInfoDialog.best-dialog .how-subtitle,
#navInfoDialog.best-dialog .how-footer,
#navInfoDialog.best-dialog h2,
#navInfoDialog.best-dialog .dialog-top .eyebrow { display: none; }
#navInfoDialog.best-dialog .dialog-top {
  justify-content: flex-end;
}

/* Close X */
#navInfoDialog.best-dialog #howCloseX {
  position: relative;
  z-index: 2;
}

/* Step list reset for leaderboard rows */
#navInfoDialog.best-dialog .how-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* ── Title badge ─────────────────────────────────── */
.lb-badge-wrap {
  display: flex;
  justify-content: center;
  margin: -8px 0 16px;
}
.lb-badge {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 30px !important;
  font: 700 15px var(--font-display) !important;
  letter-spacing: .5px;
  text-transform: uppercase;
}
html[data-theme="dark"] .lb-badge {
  background: var(--green);
  color: #0a1a06;
}
html[data-theme="light"] .lb-badge {
  background: var(--green);
  color: #1c2a0b;
}

/* ── Row layout ──────────────────────────────────── */
.lb-row {
  display: grid;
  grid-template-columns: 28px 26px 1fr auto 26px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 8px;
  border-radius: 12px !important;
  text-align: left;
}

/* Row backgrounds */
html[data-theme="dark"] .lb-row {
  background: #1a1c19;
  border: 1px solid #2a2d27;
}
html[data-theme="dark"] .lb-row.lb-first {
  background: #1f2518;
  border-color: #3a4228;
}
html[data-theme="light"] .lb-row {
  background: #faf5f0;
  border: 1px solid #ede4db;
}
html[data-theme="light"] .lb-row.lb-first {
  background: #fdf8ee;
  border-color: #e8dcc4;
}

/* Rank number */
.lb-rank {
  font: 700 14px var(--font-display) !important;
  color: var(--muted) !important;
}
.lb-first .lb-rank { color: var(--ink) !important; }

/* Crown icon */
.lb-crown {
  width: 22px;
  height: 22px;
}
.crown-gold { fill: #f59e0b; }
.crown-silver { fill: #94a3b8; }
.crown-bronze { fill: #b45309; }

/* Name */
.lb-name {
  font-size: 14px !important;
  font-weight: 700;
  color: var(--ink) !important;
}

/* Score */
.lb-score {
  font: 700 18px var(--font-display) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
  color: var(--ink) !important;
  text-align: right;
}

/* Star icon */
.lb-star {
  width: 20px;
  height: 20px;
  fill: #f59e0b;
  justify-self: center;
}
.lb-first .lb-star { fill: #f59e0b; }

/* Empty state row */
.lb-row.lb-empty {
  opacity: .6;
}
.lb-row.lb-empty .lb-score {
  color: var(--muted) !important;
}

/* ── Exit button ─────────────────────────────────── */
#navInfoDialog.best-dialog .primary {
  width: 100%;
  justify-content: center;
  border-radius: 12px !important;
  margin-top: 0;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 420px) {
  #navInfoDialog.best-dialog { padding: 16px 14px 18px; }
  .lb-row { grid-template-columns: 24px 22px 1fr auto 22px; gap: 8px; padding: 10px 10px; }
  .lb-crown { width: 18px; height: 18px; }
  .lb-star { width: 17px; height: 17px; }
  .lb-score { font-size: 15px !important; }
  .lb-badge { padding: 8px 22px; font-size: 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #navInfoDialog.best-dialog[open],
  #navInfoDialog.best-dialog[open]::backdrop { animation: none; }
}

/* Final theme-safe overrides for primary score and homepage CTA. */
html[data-theme] .home-stage .hero-actions .play-button,
html[data-theme] .home-stage .hero-actions .play-button:hover,
html[data-theme] .home-stage .hero-actions .play-button:active,
html[data-theme] .home-stage .hero-actions .play-button.launch-armed{box-shadow:none!important}
html[data-theme="light"] .game-page .time-column>.stat-value{color:#24211d!important;text-shadow:none!important}
html[data-theme="dark"] .game-page .time-column>.stat-value{color:#f8fafc!important;text-shadow:none!important}

/* Open gameplay canvas: no enclosing arena card. */
html[data-theme] .game-page .arena,
html[data-theme] .game-page .arena.heat-max{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}

/* The answer stays open in dark mode; light mode gets one crisp boundary. */
html[data-theme="dark"] .game-page .answer-slot{background:transparent!important;border:0!important;border-radius:0!important}
html[data-theme="light"] .game-page .answer-slot{background:transparent!important;border:0!important;border-radius:0!important}

/* ── Enhanced gameplay animations ────────────────── */

/* Question entrance: smooth slide-up with scale + blur */
.game-page .question-in{animation:qIn .32s cubic-bezier(.22,.9,.36,1)!important}
@keyframes qIn{
  0%{transform:translateY(18px) scale(.88);opacity:0;filter:blur(4px)}
  60%{transform:translateY(-3px) scale(1.03);opacity:1;filter:blur(0)}
  100%{transform:translateY(0) scale(1);opacity:1;filter:blur(0)}
}

/* Answer slot pop on correct */
.game-page .answer-slot{transition:transform .15s cubic-bezier(.22,.9,.36,1)}
.game-page .arena.success .answer-slot{animation:answerPop .35s cubic-bezier(.22,.9,.36,1)!important}
@keyframes answerPop{
  0%{transform:scale(1)}
  30%{transform:scale(1.18)}
  60%{transform:scale(.95)}
  100%{transform:scale(1)}
}

/* Miss shake — more dramatic */
.game-page .arena.miss{animation:missShake .4s cubic-bezier(.36,.07,.19,.97)!important}
@keyframes missShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-8px) rotate(-.5deg)}
  30%{transform:translateX(7px) rotate(.5deg)}
  45%{transform:translateX(-6px)}
  60%{transform:translateX(5px)}
  75%{transform:translateX(-3px)}
  90%{transform:translateX(2px)}
}

/* Score counter bounce on hit */
.game-page #score.score-energy{animation:scoreBounce .4s cubic-bezier(.22,.9,.36,1)!important}
@keyframes scoreBounce{
  0%{transform:scale(1);opacity:.7}
  35%{transform:scale(1.25);opacity:1;text-shadow:0 0 20px currentColor}
  65%{transform:scale(.93)}
  100%{transform:scale(1);text-shadow:none}
}

/* Feedback text swoops in */
.game-page .feedback-pop{animation:feedSwoop .3s cubic-bezier(.22,.9,.36,1)!important}
@keyframes feedSwoop{
  0%{transform:translateY(10px) scale(.85);opacity:0}
  60%{transform:translateY(-2px) scale(1.04);opacity:1}
  100%{transform:translateY(0) scale(1)}
}

/* Score pop on update */
.game-page .score-pop{animation:sPop .32s cubic-bezier(.22,.9,.36,1)!important}
@keyframes sPop{
  0%{transform:translateY(12px) scale(.8);opacity:.2}
  50%{transform:translateY(-4px) scale(1.08);opacity:1}
  100%{transform:translateY(0) scale(1)}
}

/* Time gained/lost — juicier */
.game-page #timeValue.time-gained{animation:timeUp .5s cubic-bezier(.22,.9,.36,1)!important}
.game-page #timeValue.time-lost{animation:timeDown .35s cubic-bezier(.36,.07,.19,.97)!important}
@keyframes timeUp{
  0%{transform:scale(.7);opacity:.3;color:var(--green)}
  50%{transform:scale(1.35);opacity:1}
  100%{transform:scale(1);color:inherit}
}
@keyframes timeDown{
  0%{transform:scale(1.2);color:var(--red)}
  50%{transform:scale(.7);opacity:.5}
  100%{transform:scale(1);opacity:1;color:inherit}
}

@media(prefers-reduced-motion:reduce){
  .game-page .question-in,
  .game-page .arena.success .answer-slot,
  .game-page .arena.miss,
  .game-page #score.score-energy,
  .game-page .feedback-pop,
  .game-page .score-pop,
  .game-page #timeValue.time-gained,
  .game-page #timeValue.time-lost{animation:none!important}
}

/* Number streams originate at the extreme page edges. */
.game-page .arcade:before,.game-page .arcade:after{display:none!important}
.game-page .section-heading,.game-page .arena{position:relative;z-index:1}
@keyframes edgeNumberFlow{from{transform:translateY(-9vh)}to{transform:translateY(14vh)}}
.edge-number-streams{position:fixed;inset:80px 0 0;z-index:0;pointer-events:none;overflow:hidden}
.edge-numbers{position:absolute;top:5%;bottom:5%;display:flex;flex-direction:column;justify-content:space-around;align-items:center;width:clamp(48px,6vw,86px);color:#2cbaff;opacity:.5;font:700 clamp(27px,3.5vw,54px)/1 var(--font-display);animation:edgeNumbersFloat 8s ease-in-out infinite alternate}
.edge-numbers-left{left:0}.edge-numbers-right{right:0;color:#ec4899;animation-delay:-4s}
.edge-numbers span{animation:edgeNumberSpin 7s ease-in-out infinite alternate}.edge-numbers span:nth-child(2n){animation-delay:-2.5s}
html[data-theme="light"] .edge-numbers{color:#67852d;opacity:.32}html[data-theme="light"] .edge-numbers-right{color:#d8662d}
@keyframes edgeNumbersFloat{from{transform:translateY(-4vh)}to{transform:translateY(5vh)}}
@keyframes edgeNumberSpin{from{transform:rotate(-9deg) scale(.88)}to{transform:rotate(9deg) scale(1.08)}}

/* Every whole-second change communicates direction. */
.game-page #timeValue{display:inline-block;transform-origin:center}
.game-page #timeValue.time-gained{animation:timeGain .55s cubic-bezier(.16,.9,.2,1)}
.game-page #timeValue.time-lost{animation:timeLoss .34s cubic-bezier(.4,0,.2,1)}
@keyframes timeGain{0%{transform:scale(.72);opacity:.4}55%{transform:scale(1.42)}100%{transform:scale(1);opacity:1}}
@keyframes timeLoss{0%{transform:scale(1.2)}65%{transform:scale(.72);opacity:.55}100%{transform:scale(1);opacity:1}}
html[data-theme="dark"] .light-cloud-container {
  display: none !important;
}

html[data-theme="light"] .light-cloud-container {
  display: block !important;
  opacity: 1 !important;
  z-index: 0 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

html[data-theme="light"] .home.home-stage {
  background: transparent !important;
}

html[data-theme="light"] .light-cloud {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  background: #ffffff !important;
  border-radius: 50px !important;
  opacity: 0.82 !important;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.95), 0 4px 14px rgba(247, 214, 224, 0.45) !important;
  filter: drop-shadow(0 4px 10px rgba(245, 185, 205, 0.35)) !important;
  pointer-events: none !important;
  will-change: transform !important;
}

html[data-theme="light"] .light-cloud::before,
html[data-theme="light"] .light-cloud::after {
  content: "" !important;
  position: absolute !important;
  background: #ffffff !important;
  border-radius: 50% !important;
}

html[data-theme="light"] .cloud-1 {
  top: 8% !important;
  width: 135px !important;
  height: 40px !important;
  animation: cloudDriftExtreme 44s linear infinite -14s !important;
}
html[data-theme="light"] .cloud-1::before {
  width: 52px !important;
  height: 52px !important;
  top: -24px !important;
  left: 20px !important;
}
html[data-theme="light"] .cloud-1::after {
  width: 38px !important;
  height: 38px !important;
  top: -15px !important;
  left: 60px !important;
}

html[data-theme="light"] .cloud-2 {
  top: 22% !important;
  width: 195px !important;
  height: 52px !important;
  opacity: 0.72 !important;
  animation: cloudDriftExtreme 58s linear infinite -36s !important;
}
html[data-theme="light"] .cloud-2::before {
  width: 74px !important;
  height: 74px !important;
  top: -34px !important;
  left: 30px !important;
}
html[data-theme="light"] .cloud-2::after {
  width: 54px !important;
  height: 54px !important;
  top: -22px !important;
  left: 92px !important;
}

html[data-theme="light"] .cloud-3 {
  top: 38% !important;
  width: 110px !important;
  height: 35px !important;
  opacity: 0.85 !important;
  animation: cloudDriftExtreme 36s linear infinite -8s !important;
}
html[data-theme="light"] .cloud-3::before {
  width: 44px !important;
  height: 44px !important;
  top: -20px !important;
  left: 16px !important;
}
html[data-theme="light"] .cloud-3::after {
  width: 32px !important;
  height: 32px !important;
  top: -13px !important;
  left: 48px !important;
}

html[data-theme="light"] .cloud-4 {
  top: 54% !important;
  width: 220px !important;
  height: 56px !important;
  opacity: 0.65 !important;
  animation: cloudDriftExtreme 68s linear infinite -52s !important;
}
html[data-theme="light"] .cloud-4::before {
  width: 82px !important;
  height: 82px !important;
  top: -38px !important;
  left: 36px !important;
}
html[data-theme="light"] .cloud-4::after {
  width: 60px !important;
  height: 60px !important;
  top: -25px !important;
  left: 105px !important;
}

html[data-theme="light"] .cloud-5 {
  top: 70% !important;
  width: 165px !important;
  height: 46px !important;
  opacity: 0.78 !important;
  animation: cloudDriftExtreme 48s linear infinite -24s !important;
}
html[data-theme="light"] .cloud-5::before {
  width: 62px !important;
  height: 62px !important;
  top: -28px !important;
  left: 26px !important;
}
html[data-theme="light"] .cloud-5::after {
  width: 46px !important;
  height: 46px !important;
  top: -18px !important;
  left: 78px !important;
}

html[data-theme="light"] .cloud-6 {
  top: 85% !important;
  width: 140px !important;
  height: 42px !important;
  opacity: 0.70 !important;
  animation: cloudDriftExtreme 52s linear infinite -40s !important;
}
html[data-theme="light"] .cloud-6::before {
  width: 54px !important;
  height: 54px !important;
  top: -25px !important;
  left: 22px !important;
}
html[data-theme="light"] .cloud-6::after {
  width: 40px !important;
  height: 40px !important;
  top: -16px !important;
  left: 66px !important;
}

@keyframes cloudDriftExtreme {
  0% {
    transform: translate3d(-280px, 0, 0);
  }
  100% {
    transform: translate3d(calc(100vw + 280px), 0, 0);
  }
}
@media(prefers-reduced-motion:reduce){.game-page .arcade:before,.game-page .arcade:after,.edge-numbers,.edge-numbers span,.game-page #timeValue{animation:none!important}}



/* Launch CTA uses a crisp outline without a depth shadow. */
html[data-theme="dark"] .home-stage .hero-actions .play-button{border:2px solid #79ffd2!important}
html[data-theme="light"] .home-stage .hero-actions .play-button{border:2px solid #6f872d!important}

/* Time receives the same full-meter hit language as heat. */
.game-page .time-column.meter-hit .time-meter{animation:heatSurge .5s cubic-bezier(.2,.9,.25,1)!important}
.game-page .time-column.meter-hit .time-meter .liquid{filter:brightness(1.35);box-shadow:0 0 22px #2cbaff}

/* High-contrast reaction feedback. */
html[data-theme] .game-page .reaction-stage[data-kind="perfect"]{color:#a8ef32!important}
html[data-theme] .game-page .reaction-stage[data-kind="perfect"] .reaction-word{color:#a8ef32!important;text-shadow:0 3px 0 #3f6d10,0 6px 0 #172b06!important}
html[data-theme] .game-page .reaction-stage[data-kind="miss"]{color:#ff3158!important}
html[data-theme] .game-page .reaction-stage[data-kind="miss"] .reaction-word{color:#ff3158!important;text-shadow:3px 3px 0 #72152a,-2px 0 0 #ffd0d9!important}
html[data-theme="light"] .game-page .reaction-stage[data-kind="perfect"] .reaction-word{color:#4f7c0d!important;text-shadow:0 3px 0 #c7ec83!important}
html[data-theme="light"] .game-page .reaction-stage[data-kind="miss"] .reaction-word{color:#c91f43!important;text-shadow:2px 3px 0 #ffc0cd!important}
@media(prefers-reduced-motion:reduce){.game-page .time-column.meter-hit .time-meter{animation:none!important}}

/* ── EXACT HORIZONTAL CENTERING: CALCULATOR & REACTION STAGE ── */
.game-page .arcade {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.game-page .arena {
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.game-page .reaction-stage {
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
}

.game-page .reaction-word {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.game-page .reaction-detail {
  text-align: center !important;
  width: 100% !important;
  margin: 6px auto 0 !important;
}

.game-page .game-layout {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr minmax(320px, 350px) 1fr !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  gap: clamp(20px, 3.5vw, 48px) !important;
}

.game-page .console {
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 350px !important;
  transform: none !important;
  box-shadow: 0 10px 0 var(--calc-edge, #252b20), 0 24px 50px rgba(0,0,0,0.35) !important;
  justify-self: center !important;
}

.game-page .character-foot.foot-left {
  left: 36px !important;
}
.game-page .character-foot.foot-right {
  right: 36px !important;
}

@media (max-width: 759px) {
  .game-page .game-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 12px 30px !important;
  }
  .game-page .console {
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }
  .game-page .reaction-stage {
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto 6px !important;
  }
  .mobile-meters {
    width: 100% !important;
    max-width: 360px !important;
    margin: 8px auto 12px !important;
  }
}

/* ── 3-TERM & HARD QUESTION DISPLAY OPTIMIZATION (BIG & PROMINENT) ── */
.game-page .display {
  min-height: 184px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.game-page .question {
  font-size: clamp(34px, 4.8vw, 48px) !important;
  white-space: nowrap !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 4px 0 2px !important;
  letter-spacing: -0.5px !important;
  line-height: 1.15 !important;
}

.game-page .question span {
  margin: 0 5px !important;
  display: inline-block !important;
  font-weight: 900 !important;
}

/* ── PSYCHOLOGY-BACKED QUESTION & ANSWER STYLING (CURVY ARCADE FONT) ── */
.game-page .question,
.game-page .answer-slot,
.game-page #answerText {
  font-family: 'Fredoka', 'Outfit', 'Comfortaa', -apple-system, sans-serif !important;
  font-weight: 800 !important;
}

/* ── DARK MODE PALETTE: FLAT SOLID LIGHT BLUE SCREEN (MATCHING HOME SCREEN #38bdf8), ALL WHITE INSIDE, NO BORDERS, NO SHADOWS ── */
html[data-theme="dark"] .game-page .display {
  background: #38bdf8 !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .game-page .display-top,
html[data-theme="dark"] .game-page .display-bottom {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .game-page #questionCount {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Dark Mode Questions: All Numbers in pure flat solid WHITE, zero stroke/border, zero shadow */
html[data-theme="dark"] .game-page .question {
  color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  -webkit-text-stroke-width: 0 !important;
  paint-order: normal !important;
  text-shadow: none !important;
}

/* Dark Mode Operators: YELLOW, zero stroke/border, zero shadow */
html[data-theme="dark"] .game-page .question span {
  color: #facc15 !important;
  -webkit-text-stroke: 0 !important;
  -webkit-text-stroke-width: 0 !important;
  paint-order: normal !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

/* Dark Mode Answer: All Numbers in pure flat solid WHITE, zero stroke/border, zero shadow */
html[data-theme="dark"] .game-page .answer-slot,
html[data-theme="dark"] .game-page #answerText {
  color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  -webkit-text-stroke-width: 0 !important;
  paint-order: normal !important;
  text-shadow: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: clamp(34px, 4.8vw, 46px) !important;
  min-height: 48px !important;
  line-height: 1.1 !important;
  letter-spacing: 2.5px !important;
}

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

html[data-theme="dark"] .game-page .mini-face i,
html[data-theme="dark"] .game-page .mini-face b {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* ── LIGHT MODE PLAY SET: MATCHING HOME SCREEN HERO CALCULATOR (NEON LIME CRT #D5FA65) ── */
html[data-theme="light"] .game-page .console {
  background: #d7d9cb !important;
  border: 3px solid #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 5px 6px 0 #858a77, 10px 12px 0 #535747, 15px 20px 0 #c8cec0, 0 25px 45px rgba(24, 32, 15, 0.12) !important;
}

html[data-theme="light"] .game-page .character-top {
  color: #515748 !important;
}
html[data-theme="light"] .game-page .character-top span:last-child {
  color: #607830 !important;
}
html[data-theme="light"] .game-page .console-bottom {
  color: #606a4f !important;
}

html[data-theme="light"] .game-page .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 .display-top,
html[data-theme="light"] .game-page .display-bottom {
  color: #435b22 !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .game-page #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;
}

/* Light Mode Question Numbers: Crisp Deep Forest Ink (#18200f) */
html[data-theme="light"] .game-page .question {
  color: #18200f !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* Light Mode Question Operators: Vibrant Burnt Coral (#c2410c) */
html[data-theme="light"] .game-page .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;
}

/* Light Mode Answer Numbers: Crisp Deep Forest Ink (#18200f) */
html[data-theme="light"] .game-page .answer-slot,
html[data-theme="light"] .game-page #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;
  font-size: clamp(34px, 4.8vw, 46px) !important;
  min-height: 48px !important;
  line-height: 1.1 !important;
  letter-spacing: 2.5px !important;
}

html[data-theme="light"] .game-page .input-caret {
  background: #18200f !important;
  box-shadow: 0 0 6px rgba(24, 32, 15, 0.45) !important;
}

html[data-theme="light"] .game-page .mini-face i {
  background: #18200f !important;
}
html[data-theme="light"] .game-page .mini-face b {
  border-color: #18200f !important;
}

/* Light Mode Keypad: White keys with Lime Hover & Dark Utility Keys */
html[data-theme="light"] .game-page .keypad button[data-key="1"],
html[data-theme="light"] .game-page .keypad button[data-key="2"],
html[data-theme="light"] .game-page .keypad button[data-key="3"],
html[data-theme="light"] .game-page .keypad button[data-key="4"],
html[data-theme="light"] .game-page .keypad button[data-key="5"],
html[data-theme="light"] .game-page .keypad button[data-key="6"],
html[data-theme="light"] .game-page .keypad button[data-key="7"],
html[data-theme="light"] .game-page .keypad button[data-key="8"],
html[data-theme="light"] .game-page .keypad button[data-key="9"],
html[data-theme="light"] .game-page .keypad button[data-key="0"],
html[data-theme="light"] .game-page .keypad button[data-key="00"] {
  background: #ffffff !important;
  color: #18200f !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 5px 0 #949985, 0 7px 15px rgba(102, 109, 88, 0.25), inset 0 1px 0 #fff !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .08s ease !important;
}

html[data-theme="light"] .game-page .keypad button[data-key="1"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="2"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="3"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="4"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="5"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="6"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="7"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="8"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="9"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="0"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="00"]:hover {
  background: #d5fa65 !important;
  color: #18200f !important;
  border-color: #b9dd52 !important;
  box-shadow: 0 5px 0 #81973a, 0 8px 16px rgba(156, 189, 72, 0.45) !important;
}

html[data-theme="light"] .game-page .keypad .clear-key,
html[data-theme="light"] .game-page .keypad button[data-key="Backspace"],
html[data-theme="light"] .game-page .keypad .utility,
html[data-theme="light"] .game-page .keypad .sign-key {
  background: #3b4133 !important;
  color: #e6eadd !important;
  border: 1.5px solid #4c5540 !important;
  box-shadow: 0 5px 0 #24291d, 0 7px 15px rgba(0, 0, 0, 0.15) !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .08s ease !important;
}

html[data-theme="light"] .game-page .keypad .clear-key:hover,
html[data-theme="light"] .game-page .keypad button[data-key="Backspace"]:hover,
html[data-theme="light"] .game-page .keypad .utility:hover,
html[data-theme="light"] .game-page .keypad .sign-key:hover {
  background: #4a5441 !important;
  color: #ffffff !important;
  border-color: #5d6750 !important;
}

html[data-theme="light"] .game-page .fuse-label { color: #596047 !important; font-weight: 700 !important; }
html[data-theme="light"] .game-page .fuse-track { background: #aeb59e !important; }
html[data-theme="light"] .game-page .fuse-track i { background: #526a31 !important; }
html[data-theme="light"] .game-page .feedback-row { color: #32451a !important; font-weight: 800 !important; }
html[data-theme="light"] .game-page #multiplier {
  background: #c9cebb !important;
  border: 1.5px solid #8f9d77 !important;
  color: #2d3a1d !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.game-page .answer-slot,
html[data-theme="dark"] .game-page .answer-slot,
html[data-theme="light"] .game-page .answer-slot {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ── KEYPAD ENTER / SUBMIT BUTTON: BOLD HIGH-ENERGY RED ── */
.game-page .keypad .enter-key,
html[data-theme="dark"] .game-page .keypad .enter-key {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 1.5px solid #f87171 !important;
  box-shadow: 0 5px 0 #991b1b, 0 8px 18px rgba(239, 68, 68, 0.45) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.game-page .keypad .enter-key:hover,
html[data-theme="dark"] .game-page .keypad .enter-key:hover {
  background: #f87171 !important;
  border-color: #fca5a5 !important;
}

.game-page .keypad .enter-key:active,
.game-page .keypad .enter-key.pressed,
html[data-theme="dark"] .game-page .keypad .enter-key:active,
html[data-theme="dark"] .game-page .keypad .enter-key.pressed {
  transform: translateY(4px) !important;
  box-shadow: 0 1px 0 #991b1b, inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 0 22px rgba(239, 68, 68, 0.7) !important;
  background: #dc2626 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .game-page .keypad .enter-key {
  background: #ff863e !important;
  color: #39200e !important;
  border: 1.5px solid #ffa366 !important;
  box-shadow: 0 5px 0 #a45121, 0 8px 18px rgba(255, 134, 62, 0.35) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .game-page .keypad .enter-key:hover {
  background: #ff9857 !important;
  border-color: #ffb582 !important;
  box-shadow: 0 6px 0 #a45121, 0 10px 22px rgba(255, 134, 62, 0.45) !important;
}

html[data-theme="light"] .game-page .keypad .enter-key:active,
html[data-theme="light"] .game-page .keypad .enter-key.pressed {
  transform: translateY(4px) !important;
  box-shadow: 0 1px 0 #a45121 !important;
  background: #e06c27 !important;
  color: #ffffff !important;
}

/* Question Number Badge & Display Header Layout */
.game-page .display-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 2px !important;
}

.game-page #questionCount {
  font-family: 'Fredoka', 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── LIGHT MODE OVERDRIVE & MAX HEAT (RUBY / CRIMSON WITH PITCH-BLACK SHADOW) ── */
html[data-theme="light"] .game-page .reaction-stage[data-kind=overdrive] {
  color: #e11d48 !important;
}

html[data-theme="light"] .game-page .reaction-stage[data-kind=overdrive] .reaction-word {
  color: #ff0055 !important;
  font-size: clamp(36px, 5.2vw, 66px) !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  text-shadow: 0 3px 0 #000000, 0 6px 0 #000000 !important;
  filter: none !important;
}

html[data-theme="light"] .game-page .reaction-stage[data-kind=overdrive] .reaction-detail {
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-shadow: none !important;
}

html[data-theme="light"] .game-page .overdrive .console {
  border: 3px solid #ff0055 !important;
  box-shadow: 5px 6px 0 #000000, 10px 12px 0 #000000 !important;
}

html[data-theme="light"] .game-page .overdrive .display {
  border-color: #ff0055 !important;
  box-shadow: inset 0 0 0 2px rgba(255, 0, 85, 0.4), 0 0 24px rgba(255, 0, 85, 0.3) !important;
}

html[data-theme="light"] .game-page .overdrive .feedback-row {
  color: #e11d48 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .game-page .heat-column .stat-value {
  color: #e11d48 !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 0 #000000 !important;
}

html[data-theme="light"] .game-page .fire-icon {
  color: #ff0055 !important;
  filter: none !important;
}

html[data-theme="light"] .game-page #heatCaption {
  color: #881337 !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .game-page .heat-meter .liquid {
  background: linear-gradient(180deg, #ff0055 0%, #e11d48 60%, #9f1239 100%) !important;
}

html[data-theme="light"] .game-page #multiplier {
  background: #ffe4e6 !important;
  border: 2px solid #000000 !important;
  color: #9f1239 !important;
  font-weight: 900 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

html[data-theme="light"] .game-page .milestone-alert {
  background: #ffffff !important;
  border: 2.5px solid #000000 !important;
  color: #000000 !important;
  box-shadow: 5px 5px 0 #000000 !important;
}

html[data-theme="light"] .game-page #milestoneValue {
  color: #e11d48 !important;
  font-weight: 900 !important;
}

/* ── LIGHT MODE: DARKER CRISP SCORE DISPLAY ── */
html[data-theme="light"] .game-page #score,
html[data-theme="light"] .game-page #arena #score,
html[data-theme="light"] .game-page .time-column .stat-value,
html[data-theme="light"] .game-page .mobile-score .stat-value,
html[data-theme="light"] .game-page .mobile-score > span,
html[data-theme="light"] #resultScore {
  color: #000000 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .game-page .time-column .stat-label {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .game-page #scoreCaption {
  color: #1e293b !important;
  font-weight: 700 !important;
}






/* Final leaderboard color pass: navbar trigger and opened leaderboard use #e11d48. */
.arcade-nav #navBest,
.arcade-nav.menu-open #navBest {
  background: #e11d48 !important;
  color: #ffffff !important;
  border: 2px solid #07162d !important;
  box-shadow: 0 3px 0 #7f102b !important;
}

.arcade-nav #navBest:hover,
.arcade-nav.menu-open #navBest:hover,
.arcade-nav #navBest:focus-visible,
.arcade-nav.menu-open #navBest:focus-visible {
  background: #be123c !important;
  color: #ffffff !important;
  border-color: #07162d !important;
}

.arcade-nav #navBest:active,
.arcade-nav.menu-open #navBest:active {
  transform: translateY(3px) !important;
  box-shadow: none !important;
}

#navInfoDialog.best-dialog .lb-badge {
  background: #e11d48 !important;
  color: #ffffff !important;
  border: 2px solid #07162d !important;
  box-shadow: 0 4px 0 #7f102b !important;
}

#navInfoDialog.best-dialog .lb-first {
  border-color: #e11d48 !important;
}

#navInfoDialog.best-dialog .lb-first .lb-rank,
#navInfoDialog.best-dialog .lb-first .lb-score,
#navInfoDialog.best-dialog .lb-first .lb-name {
  color: #e11d48 !important;
}

#navInfoDialog.best-dialog .primary,
#navInfoDialog.best-dialog #howGotIt {
  background: #e11d48 !important;
  color: #ffffff !important;
  border: 2px solid #07162d !important;
  box-shadow: 0 5px 0 #7f102b !important;
}

#navInfoDialog.best-dialog .primary:hover,
#navInfoDialog.best-dialog #howGotIt:hover {
  background: #be123c !important;
  color: #ffffff !important;
}

#navInfoDialog.best-dialog .primary:active,
#navInfoDialog.best-dialog #howGotIt:active {
  transform: translateY(5px) !important;
  box-shadow: none !important;
}

/* Navbar leaderboard should match the plain How to Play nav item. */
.arcade-nav #navBest,
.arcade-nav.menu-open #navBest {
  background: transparent !important;
  color: var(--ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 20px !important;
  padding: 12px 14px !important;
}

.arcade-nav #navBest:hover,
.arcade-nav.menu-open #navBest:hover,
.arcade-nav #navBest:focus-visible,
.arcade-nav.menu-open #navBest:focus-visible {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.arcade-nav #navBest:active,
.arcade-nav.menu-open #navBest:active {
  transform: none !important;
  box-shadow: none !important;
}

/* Keep navbar Leaderboard identical to How to Play in every final navbar state. */
html .arcade-nav .nav-links #navBest,
html .arcade-nav.menu-open .nav-links #navBest,
body .arcade-nav .nav-links #navBest {
  appearance: none !important;
  background: transparent !important;
  color: var(--ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  outline-offset: 4px !important;
  transform: none !important;
}

html .arcade-nav .nav-links #navBest:hover,
html .arcade-nav.menu-open .nav-links #navBest:hover,
html .arcade-nav .nav-links #navBest:focus-visible,
html .arcade-nav.menu-open .nav-links #navBest:focus-visible {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Squad button replaces the removed dark/light toggle. */
.arcade-nav .squad-button {
  border: 1px solid #f3c4d3 !important;
  background: #ffffff !important;
  color: #07162d !important;
  box-shadow: 0 2px 0 #f7d6e0 !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
}

.arcade-nav .squad-button:hover {
  border-color: #e11d48 !important;
  color: #e11d48 !important;
  background: #fff5f8 !important;
}

/* Squad modal keeps the same clean product style. */
#navInfoDialog.squad-dialog .squad-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 18px;
  display: grid;
  gap: 12px;
}

#navInfoDialog.squad-dialog .squad-list li {
  border: 1px solid #f3c4d3;
  background: #fff8fb;
  border-radius: 16px !important;
  padding: 16px 18px;
  text-align: left;
}

#navInfoDialog.squad-dialog .squad-list h3 {
  margin: 4px 0 6px;
  font-size: 18px !important;
}

#navInfoDialog.squad-dialog .squad-list p {
  margin: 0;
  color: var(--muted);
  font-size: 14px !important;
}

/* Full Squad frontend: login, PFP upload, default avatars and friends shell. */
#navInfoDialog.squad-dialog {
  width: min(620px, calc(100vw - 28px));
}

#navInfoDialog.squad-dialog .squad-panel {
  list-style: none;
  padding: 0;
  margin: 22px 0 18px;
  display: grid;
  gap: 14px;
}

#navInfoDialog.squad-dialog .squad-card {
  border: 1px solid #f3c4d3;
  background: #fff8fb;
  border-radius: 18px !important;
  padding: 18px;
  text-align: left;
}

.squad-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.squad-auth-tabs button,
.squad-actions button,
.squad-friend-search button {
  border: 2px solid #07162d;
  border-radius: 14px !important;
  background: #ffffff;
  color: #07162d;
  font: 800 13px var(--font-display);
  padding: 11px 14px;
  box-shadow: 0 3px 0 #c7cfdb;
}

.squad-auth-tabs button.active,
.squad-actions button:first-child,
.squad-friend-search button {
  background: #e11d48;
  color: #ffffff;
  box-shadow: 0 4px 0 #7f102b;
}

.squad-profile-row {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.squad-avatar-preview {
  width: 104px;
  height: 104px;
  border: 3px solid #07162d;
  border-radius: 24px !important;
  background: #d9f1ff;
  display: grid;
  place-items: center;
  font: 900 42px var(--font-display);
  color: #e11d48;
  overflow: hidden;
  box-shadow: 6px 6px 0 #8fd8ff;
}

.squad-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.squad-avatar-tools strong,
.squad-card-head span {
  display: block;
  font: 900 14px var(--font-display);
  color: #07162d;
  margin-bottom: 8px;
}

.squad-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #07162d;
  border-radius: 999px !important;
  background: #ffffff;
  color: #07162d;
  font: 800 12px var(--font-display);
  padding: 9px 13px;
  cursor: pointer;
  box-shadow: 0 3px 0 #c7cfdb;
}

.squad-upload input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.squad-avatar-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.squad-avatar-picks button {
  width: 34px;
  height: 34px;
  border: 2px solid #c7cfdb;
  border-radius: 11px !important;
  background: #ffffff;
  color: #07162d;
  font: 900 16px var(--font-display);
}

.squad-avatar-picks button.active {
  border-color: #e11d48;
  background: #ffe4ec;
  color: #e11d48;
}

#navInfoDialog.squad-dialog label {
  display: grid;
  gap: 7px;
  color: #07162d;
  font: 800 12px var(--font-display);
  margin-top: 11px;
}

#navInfoDialog.squad-dialog input {
  width: 100%;
  border: 2px solid #c7cfdb;
  border-radius: 14px !important;
  background: #ffffff;
  color: #07162d;
  font: 700 15px var(--font-display);
  padding: 13px 14px;
  outline: none;
}

#navInfoDialog.squad-dialog input:focus {
  border-color: #e11d48;
}

.squad-actions,
.squad-friend-search {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.squad-note {
  margin: 13px 0 0;
  color: #667085;
  font-size: 13px !important;
}

.squad-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.squad-card-head strong {
  color: #e11d48;
  font: 900 11px var(--font-display);
  letter-spacing: .8px;
  text-transform: uppercase;
}

.squad-friend-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: #667085;
  font-size: 13px;
}

@media (max-width: 560px) {
  .squad-profile-row,
  .squad-actions,
  .squad-friend-search {
    grid-template-columns: 1fr;
  }

  .squad-avatar-preview {
    width: 92px;
    height: 92px;
  }
}

/* Squad online/offline session chip. */
.squad-session-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 2px solid #c7cfdb;
  border-radius: 14px !important;
  background: #ffffff;
  color: #07162d;
  padding: 11px 13px;
  margin-bottom: 15px;
}

.squad-session-card span {
  color: #667085;
  font: 900 11px var(--font-display);
  letter-spacing: .8px;
}

.squad-session-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.squad-session-card.online {
  border-color: #e11d48;
  background: #fff5f8;
}

.squad-session-card.online span {
  color: #e11d48;
}

/* Wider Squad form, rectangle product layout. */
#navInfoDialog.squad-dialog {
  width: min(820px, calc(100vw - 28px)) !important;
  border-radius: 22px !important;
}

#navInfoDialog.squad-dialog form {
  padding: clamp(18px, 3vw, 30px) !important;
}

#navInfoDialog.squad-dialog .squad-panel {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr) !important;
  align-items: stretch;
  gap: 18px !important;
}

#navInfoDialog.squad-dialog .squad-card {
  border-radius: 18px !important;
  padding: clamp(18px, 2.4vw, 26px) !important;
}

#navInfoDialog.squad-dialog .squad-card:first-child {
  min-height: 520px;
}

.squad-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#navInfoDialog.squad-dialog .squad-friends-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 720px) {
  #navInfoDialog.squad-dialog .squad-panel,
  .squad-field-grid {
    grid-template-columns: 1fr !important;
  }

  #navInfoDialog.squad-dialog .squad-card:first-child {
    min-height: auto;
  }
}

.nav-profile-chip {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: var(--accent, #e11d48);
  color: #fff;
  border: 2px solid currentColor;
  margin-right: 6px;
  font-weight: 900;
}

.nav-profile-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.squad-public-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 2px solid currentColor;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.52);
}

body.dark .squad-public-profile {
  background: #111;
}

.squad-public-profile h3 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.squad-public-profile p {
  margin: 0;
  opacity: .7;
}

.squad-avatar-preview.big {
  width: 76px;
  height: 76px;
  font-size: 2rem;
  flex: 0 0 auto;
}

.squad-people-list {
  display: grid;
  gap: 10px;
  max-height: min(420px, 55vh);
  overflow: auto;
  padding-right: 4px;
}

.squad-person {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 2px solid currentColor;
  border-radius: 16px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.squad-person:hover {
  transform: translateY(-1px);
  background: rgba(225, 29, 72, .08);
}

.squad-person strong,
.squad-person small {
  display: block;
}

.squad-person small {
  opacity: .65;
  font-size: .75rem;
  margin-top: 3px;
}

.squad-person em {
  font-style: normal;
  font-weight: 900;
  color: #e11d48;
}

.mini-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: #e11d48;
  color: #fff;
  font-weight: 900;
}

.mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.squad-empty {
  padding: 18px;
  border: 2px dashed currentColor;
  border-radius: 16px;
  opacity: .68;
  line-height: 1.45;
}


#navInfoDialog.squad-dialog .squad-shell {
  list-style: none;
  display: block !important;
  padding: 0 !important;
  margin: 22px 0 18px !important;
  overflow: visible;
}

#navInfoDialog.squad-dialog .squad-shell > .squad-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr) !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

#navInfoDialog.squad-dialog form {
  padding: 0 !important;
}

#navInfoDialog.squad-dialog .squad-profile-card {
  min-width: 0;
}

#navInfoDialog.squad-dialog .squad-friends-card {
  min-width: 0;
}

@media (max-width: 720px) {
  #navInfoDialog.squad-dialog .squad-shell > .squad-panel {
    grid-template-columns: 1fr !important;
  }
}

.arcade-nav .profile-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-inline: 10px 14px;
}

.arcade-nav .profile-button[hidden] {
  display: none !important;
}

.squad-login-only {
  max-width: 520px;
  margin: 0 auto;
}

.squad-login-only .squad-card {
  min-height: auto !important;
}

.profile-simple-wrap {
  display: grid;
  gap: 14px;
  max-width: 680px;
  margin: 0 auto;
}

.profile-simple-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 34px;
  min-height: 210px;
  padding: 28px;
  border: 2px solid #4f120d;
  border-radius: 0 !important;
  background: #5b130d;
  color: #fff8f4;
}

.profile-simple-avatar {
  width: 140px;
  height: 140px;
  border-radius: 32px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #f052b6;
  color: #fff;
  font: 900 48px var(--font-display);
}

.profile-simple-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-simple-info {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.profile-simple-info h3,
.profile-simple-info p {
  margin: 0;
}

.profile-simple-info h3 {
  font: 900 22px var(--font-display);
}

.profile-simple-info p {
  display: grid;
  gap: 2px;
  font: 800 18px var(--font-body);
}

.profile-simple-info p span {
  font-size: 12px;
  opacity: .74;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-extra-card {
  border: 2px solid #f3c4d3;
  border-radius: 18px !important;
  background: #fff8fb;
  padding: 18px;
}

.profile-friends {
  margin-top: 12px;
}

.profile-friends summary {
  cursor: pointer;
  font: 900 13px var(--font-display);
  color: #e11d48;
  margin-bottom: 10px;
}

@media (max-width: 640px) {
  .profile-simple-card {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
  }
}

.profile-simple-card,
.profile-simple-card * {
  color: #fff8f4 !important;
}

.profile-simple-info p span {
  color: rgba(255, 248, 244, .72) !important;
}

#navInfoDialog.squad-dialog .profile-simple-info h3 {
  color: #fff8f4 !important;
  opacity: 1 !important;
}

#navInfoDialog.squad-dialog .profile-simple-card {
  border: 3px solid #07162d !important;
  border-radius: 24px !important;
  background: #fff8fb !important;
  color: #07162d !important;
  box-shadow: 8px 8px 0 #e11d48;
}

#navInfoDialog.squad-dialog .profile-simple-card,
#navInfoDialog.squad-dialog .profile-simple-card * {
  color: #07162d !important;
}

#navInfoDialog.squad-dialog .profile-simple-avatar {
  background: #e11d48 !important;
  border: 3px solid #07162d;
  box-shadow: 5px 5px 0 #f8b4c4;
}

#navInfoDialog.squad-dialog .profile-simple-info h3 {
  color: #e11d48 !important;
  font-size: 26px;
}

#navInfoDialog.squad-dialog .profile-simple-info p strong {
  color: #07162d !important;
  font-size: 22px;
}

#navInfoDialog.squad-dialog .profile-simple-info p span {
  color: #e11d48 !important;
  opacity: 1 !important;
}

.profile-toolbar {
  display: flex;
  justify-content: flex-end;
}

.profile-friend-toggle {
  border: 3px solid #07162d;
  border-radius: 999px !important;
  background: #e11d48;
  color: #fff;
  box-shadow: 4px 4px 0 #07162d;
  font: 900 13px var(--font-display);
  padding: 10px 18px;
  cursor: pointer;
}

.profile-friend-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #07162d;
}

.profile-flip {
  display: grid;
  perspective: 1200px;
}

.profile-face {
  grid-area: 1 / 1;
  min-height: 265px;
  backface-visibility: hidden;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .24s ease;
}

.profile-back {
  transform: rotateY(180deg);
  opacity: 0;
  align-items: stretch !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.profile-flip.is-flipped .profile-front {
  transform: rotateY(-180deg);
  opacity: 0;
}

.profile-flip.is-flipped .profile-back {
  transform: rotateY(0deg);
  opacity: 1;
}

.friend-search-head h3,
.friend-search-head p {
  margin: 0;
}

.friend-search-head h3 {
  color: #e11d48 !important;
  font: 900 26px var(--font-display);
}

.friend-search-head p {
  color: #07162d !important;
  opacity: .7;
}

.friend-search-box {
  display: grid;
  gap: 7px;
  color: #07162d !important;
  font: 900 12px var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.friend-search-box input {
  border: 2px solid #07162d;
  border-radius: 14px !important;
  background: #fff;
  color: #07162d !important;
  font: 800 16px var(--font-body);
  padding: 13px 14px;
  outline: none;
}

.friend-search-box input:focus {
  box-shadow: 0 0 0 4px rgba(225, 29, 72, .18);
}

.friend-search-results {
  max-height: 170px;
  overflow: auto;
}

.friend-search-results .squad-person {
  background: #fff;
}

/* Bigger animal/face profile icons. */
.nav-profile-chip span {
  font-size: 20px !important;
  line-height: 1 !important;
}

.squad-avatar-preview span {
  font-size: clamp(42px, 7vw, 64px) !important;
  line-height: 1 !important;
}

.squad-avatar-picks button {
  font-size: 25px !important;
  line-height: 1 !important;
  min-width: 46px !important;
  min-height: 46px !important;
  display: inline-grid !important;
  place-items: center !important;
}

@media (max-width: 759px) {
  .nav-profile-chip span { font-size: 18px !important; }
  .squad-avatar-preview span { font-size: 50px !important; }
  .squad-avatar-picks button {
    font-size: 24px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* STREAKS logo mark. */
.brand-icon.brand-logo,
html[data-theme="light"] .brand-icon.brand-logo,
html[data-theme="dark"] .brand-icon.brand-logo {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.brand-icon.brand-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Cleaner mobile header spacing. Desktop is unchanged. */
@media (max-width: 759px) {
  .topbar.arcade-nav {
    height: 64px !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    align-items: center !important;
    border-bottom-color: rgba(225, 29, 72, 0.14) !important;
  }

  .arcade-nav .brand {
    gap: 7px !important;
    font-size: 12px !important;
    letter-spacing: -0.02em !important;
    min-width: max-content !important;
  }

  .arcade-nav .brand-icon.brand-logo {
    width: 34px !important;
    height: 34px !important;
  }

  .arcade-nav .nav-right {
    margin-left: auto !important;
    gap: 7px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
  }

  .arcade-nav #soundButton,
  .arcade-nav .mobile-menu-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
  }

  .arcade-nav #squadButton,
  .arcade-nav .profile-button {
    height: 38px !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
  }

  .arcade-nav .profile-button {
    max-width: 98px !important;
    overflow: hidden !important;
  }

  .arcade-nav .profile-button > span:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .arcade-nav .nav-profile-chip {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }

  .arcade-nav .nav-profile-chip span {
    font-size: 15px !important;
  }

  .arcade-nav .nav-play {
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    min-width: 62px !important;
    display: inline-grid !important;
    place-items: center !important;
  }

  .arcade-nav .nav-links {
    top: calc(100% + 8px) !important;
    right: 14px !important;
  }

  .home.home-stage {
    min-height: calc(100svh - 64px) !important;
  }
}

@media (max-width: 430px) {
  .topbar.arcade-nav {
    padding-inline: 10px !important;
    gap: 6px !important;
  }

  .arcade-nav .brand > span:last-child {
    display: none !important;
  }

  .arcade-nav .brand-icon.brand-logo {
    width: 36px !important;
    height: 36px !important;
  }

  .arcade-nav .nav-right {
    gap: 5px !important;
  }

  .arcade-nav #squadButton {
    padding-inline: 10px !important;
  }

  .arcade-nav .profile-button {
    width: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .arcade-nav .profile-button > span:last-child {
    display: none !important;
  }

  .arcade-nav .nav-play {
    min-width: 56px !important;
    padding-inline: 10px !important;
  }
}

@media (max-width: 370px) {
  .arcade-nav .nav-play {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  .arcade-nav .nav-play::before {
    content: '▶';
    font-size: 14px !important;
    line-height: 1;
  }

  .arcade-nav #squadButton {
    font-size: 0 !important;
    width: 38px !important;
    padding: 0 !important;
  }

  .arcade-nav #squadButton::before {
    content: '👤';
    font-size: 15px !important;
  }
}