@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root{color-scheme:dark;--ink:#f5f7ff;--muted:#9aa5bd;--panel:#131d33;--line:rgba(255,255,255,.12);--blue:#57d7ff;--pink:#ff7099;--gold:#ffd166;--green:#55e6a5;--shadow:0 24px 80px rgba(0,0,0,.38)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -10%,#233f68 0,#11182b 43%,#0b1020 100%);color:var(--ink);font-family:Inter,system-ui,sans-serif}.app-shell{width:min(1220px,100%);margin:auto;padding:22px 24px 28px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}.brand{font-weight:800;color:var(--ink);text-decoration:none;letter-spacing:-.04em;font-size:18px}.brand span{margin-left:7px;font-size:9px;letter-spacing:.16em;color:var(--blue);vertical-align:2px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.2em;color:#9eb3d3}.icon-button,.text-button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#dfe8fa;border-radius:9px;padding:8px 12px;font:700 11px Inter,sans-serif;cursor:pointer}.icon-button:hover,.text-button:hover{background:rgba(255,255,255,.1)}.game-shell{overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#11192b;box-shadow:var(--shadow)}.hud{display:grid;grid-template-columns:1fr 135px 1fr;align-items:center;gap:20px;padding:14px 22px;background:linear-gradient(180deg,#151f35,#11192b);border-bottom:1px solid var(--line)}.fighter-hud{min-width:0}.hud-title{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.11em;color:#dfe7f8}.hud-title b{margin-left:auto;font-size:11px;letter-spacing:0}.fighter-hud--two .hud-title{justify-content:flex-end}.fighter-hud--two .hud-title b{margin:0 auto 0 0}.player-dot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 14px currentColor}.dot-one{background:var(--blue);color:var(--blue)}.dot-two{background:var(--pink);color:var(--pink)}.meter{height:9px;border-radius:99px;overflow:hidden;background:#27334a;margin:6px 0 8px}.meter span{display:block;height:100%;width:100%;border-radius:inherit;transition:width .18s ease}.health-meter span{background:linear-gradient(90deg,#51e2a6,#a8f277)}.fighter-hud--two .health-meter span{margin-left:auto;background:linear-gradient(90deg,#ff9b83,#ff5f91)}.energy-title{color:#a9b5c9}.energy-meter{height:7px;background:#252e43;margin-bottom:0}.energy-meter span{background:linear-gradient(90deg,#ffd166,#ff9b4d)}.fighter-hud--two .energy-meter span{margin-left:auto;background:linear-gradient(90deg,#ff9b4d,#ffd166)}.round-badge{text-align:center;padding:8px 5px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);border-radius:11px}.round-badge span,.round-badge small{display:block;font-size:8px;font-weight:800;letter-spacing:.16em;color:#9aa9c4}.round-badge b{display:block;margin:3px 0;font-size:14px}.round-badge small{color:var(--gold)}.stage-wrap{position:relative;min-height:300px;background:#182340;aspect-ratio:16/9;overflow:hidden}canvas{display:block;width:100%;height:100%;background:#182340}.screen{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:linear-gradient(90deg,rgba(8,14,27,.38),rgba(8,14,27,.14),rgba(8,14,27,.38));}.screen[hidden],.hud[hidden],.controls-bar[hidden]{display:none}.welcome-card,.end-card,.question-card{width:min(490px,95%);border:1px solid rgba(255,255,255,.15);border-radius:18px;background:rgba(14,22,40,.94);box-shadow:0 20px 80px rgba(0,0,0,.38);backdrop-filter:blur(12px)}.welcome-card,.end-card{text-align:center;padding:24px 32px}.game-mark{font-size:31px;filter:drop-shadow(0 0 20px rgba(87,215,255,.5))}.welcome-card .eyebrow,.end-card .eyebrow{margin:8px 0;color:var(--blue)}h1,h2{font-family:'Barlow Condensed',Impact,sans-serif;letter-spacing:.015em;margin:5px 0 8px}h1{font-size:clamp(44px,7vw,72px);line-height:.95;font-weight:900}h1 span{color:var(--gold)}.lead{margin:10px 0 19px;color:#d4dcef;font-size:14px}.topic-label{display:block;text-align:left;width:min(320px,100%);margin:0 auto 6px;color:#aebad0;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}select{display:block;width:min(320px,100%);margin:0 auto 12px;border:1px solid #3a4a66;background:#1c2942;color:#fff;border-radius:10px;padding:12px 14px;font:600 14px Inter,sans-serif}.primary-button{display:flex;align-items:center;justify-content:center;gap:18px;width:min(320px,100%);margin:0 auto;border:0;border-radius:10px;padding:14px 18px;background:linear-gradient(100deg,#49caff,#67e4bd);color:#071421;font:900 12px Inter,sans-serif;letter-spacing:.07em;cursor:pointer;box-shadow:0 9px 30px rgba(57,193,218,.22);transition:transform .15s,filter .15s}.primary-button:hover{transform:translateY(-2px);filter:brightness(1.07)}.primary-button span{font-size:18px}.fine-print{font-size:10px;color:#8998b4;margin:14px 0 0}.question-card{padding:24px 28px}.question-kicker{display:flex;justify-content:space-between;align-items:center;color:#9aa9c4;font-size:9px;font-weight:800;letter-spacing:.12em}.question-chip{padding:6px 9px;border-radius:99px;background:rgba(87,215,255,.13);color:var(--blue)}.question-card h2{margin:17px 0 4px;font-size:16px;letter-spacing:.08em;color:var(--gold)}.question-prompt{margin:8px 0 17px;font-size:clamp(18px,2.8vw,24px);line-height:1.22;font-weight:700}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.answer-button{min-height:47px;text-align:left;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:#1b2942;color:#ecf2ff;padding:10px 13px;font:600 12px/1.35 Inter,sans-serif;cursor:pointer;transition:.12s}.answer-button:hover:not(:disabled){border-color:var(--blue);background:#223653;transform:translateY(-1px)}.answer-button:disabled{cursor:default;opacity:.8}.answer-button.correct{border-color:var(--green);background:rgba(44,168,122,.3)}.answer-button.incorrect{border-color:#ff7283;background:rgba(196,64,86,.27)}.question-feedback{min-height:17px;margin:10px 0 0;color:#aef2d1;font-size:11px;font-weight:700}.end-card h2{font-size:clamp(36px,6vw,54px);color:var(--gold);margin:5px 0}.end-card p:not(.eyebrow){font-size:13px;color:#bac6d9;margin:6px 0 20px}.end-card .text-button{display:block;margin:10px auto 0;border:0;background:transparent;color:#aebad0}.controls-bar{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:12px;padding:13px 18px;border-top:1px solid var(--line);background:#10182a}.control-set{display:grid;gap:5px;color:#b5c1d5;font-size:9px}.control-set strong{color:var(--blue);font-size:8px;letter-spacing:.12em}.control-set--right{text-align:right}.control-set--right strong{color:var(--pink)}kbd{display:inline-block;min-width:20px;margin:0 2px;padding:3px 5px;border:1px solid #46536a;border-bottom-width:2px;border-radius:4px;background:#26334a;color:#fff;text-align:center;font:700 9px Inter,sans-serif}.control-center{display:grid;place-items:center;text-align:center;color:#8290a9;font-size:9px;line-height:1.5}.toast{position:absolute;left:50%;bottom:18px;transform:translate(-50%,10px);border:1px solid rgba(255,255,255,.16);border-radius:99px;background:rgba(11,18,32,.9);padding:9px 14px;color:#f0f4ff;font-size:11px;font-weight:700;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%,0)}.prototype-note{margin:11px 2px 0;text-align:center;color:#77839a;font-size:10px}
@media(max-width:760px){.app-shell{padding:12px}.topbar{margin-bottom:10px}.topbar>.eyebrow{display:none}.hud{grid-template-columns:1fr 85px 1fr;gap:8px;padding:10px}.hud-title{font-size:8px;gap:5px}.hud-title b{font-size:9px}.round-badge{padding:7px 2px}.round-badge b{font-size:12px}.round-badge span,.round-badge small{font-size:7px}.stage-wrap{aspect-ratio:4/3;min-height:340px}.controls-bar{grid-template-columns:1fr 1fr;padding:10px}.control-center{display:none}.control-set{font-size:8px}.control-set--right{grid-column:2}.question-card{padding:18px}.welcome-card,.end-card{padding:20px}.screen{padding:10px}}
@media(max-width:430px){.app-shell{padding:8px}.stage-wrap{min-height:380px}.game-shell{border-radius:12px}.brand{font-size:15px}.hud{grid-template-columns:1fr 64px 1fr;gap:5px;padding:8px}.hud-title{font-size:7px}.hud-title b{font-size:8px}.meter{height:7px}.energy-meter{height:6px}.answer-grid{grid-template-columns:1fr}.answer-button{min-height:42px}.question-card h2{font-size:14px}.question-prompt{font-size:18px}.controls-bar{padding:8px}.control-set{font-size:7px}kbd{min-width:17px;padding:2px 4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.controls-bar--cpu{grid-template-columns:1fr 1.5fr}

/* Touch controls keep the same gameplay actions available on tablets and phones. */
.touch-controls{display:none}
.touch-controls[hidden]{display:none!important}
.touch-group{display:flex;align-items:center;gap:8px}
.touch-button{min-width:56px;min-height:52px;padding:10px;border:1px solid rgba(255,255,255,.2);border-radius:13px;background:#25334d;color:#f5f7ff;font:800 10px Inter,sans-serif;letter-spacing:.04em;box-shadow:0 4px 0 rgba(0,0,0,.24);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch-button:active,.touch-button.is-pressed{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.24);filter:brightness(1.18)}
.touch-direction{min-width:54px;font-size:19px;color:var(--blue)}
.touch-jump{color:#b7f6df}
.touch-punch{color:var(--blue)}
.touch-kick{color:var(--pink)}
.touch-dash{color:var(--gold)}
@media (pointer:coarse),(max-width:900px){
  .controls-bar{grid-template-columns:1fr;padding:10px 12px}
  .keyboard-controls,.control-center{display:none}
  .touch-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
  .touch-group{gap:7px}
  .touch-button{min-width:50px;min-height:50px;padding:8px;font-size:9px}
  .touch-direction{min-width:48px;font-size:17px}
  .touch-jump{min-width:54px}
  .touch-punch,.touch-kick,.touch-dash{min-width:54px}
}
.screen--question{overflow-y:auto}
@media(max-width:430px){
  .screen--question{align-items:start;padding:8px}
  .question-card{margin:auto 0;padding:16px}
}

/* The shared topic filters can make the welcome card taller on a tablet. */
.screen--welcome{overflow-y:auto}
@media(max-width:430px){
  .screen--welcome{align-items:start;padding:8px}
  .welcome-card{margin:auto 0}
}