:root{
  --bg:#07152d;--panel:#0e2348;--panel2:#102b58;--line:#294d7e;
  --blue:#3ba8ff;--cyan:#71e6ff;--orange:#ff9b3d;--green:#48df9d;
  --red:#ff657b;--yellow:#ffd25f;--text:#f8fbff;--muted:#a9bad4;
  --shadow:0 22px 65px rgba(0,0,0,.32)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -20%,#153c73 0,#081831 38%,#040b18 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}body{min-height:100dvh}.app-shell{width:min(100%,880px);min-height:100dvh;margin:auto;padding:env(safe-area-inset-top) 14px env(safe-area-inset-bottom);display:flex;flex-direction:column}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:4px;font-size:18px}.brand strong{color:var(--orange)}.brand-dot{width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 0 18px var(--cyan)}.round-pill{font-size:12px;font-weight:1000;letter-spacing:1.1px;color:#d8e8fc;border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:rgba(8,24,49,.72)}.screen{flex:1;display:flex;align-items:center;justify-content:center;padding:6px 0 20px}.card{width:100%;background:linear-gradient(180deg,rgba(18,45,88,.97),rgba(8,25,52,.98));border:1px solid rgba(93,151,217,.28);border-radius:28px;padding:clamp(20px,4vw,38px);box-shadow:var(--shadow);position:relative;overflow:hidden}.card:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-120px;top:-130px;background:radial-gradient(circle,rgba(59,168,255,.16),transparent 70%);pointer-events:none}.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);font-weight:1000}.hero h1{font-size:clamp(54px,11vw,104px);line-height:.82;margin:14px 0 18px;letter-spacing:-4px}.hero h1 span{color:var(--orange)}.hero p,.lead{font-size:clamp(17px,2.6vw,22px);line-height:1.5;color:var(--muted);max-width:720px}.arena-preview{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:26px 0}.fighter{border:1px solid var(--line);background:#0a1d3d;border-radius:20px;padding:18px;text-align:center}.fighter .avatar{width:58px;height:58px;border-radius:18px;margin:0 auto 10px;display:grid;place-items:center;font-size:30px;background:#0f315e;border:1px solid #3e6b9e}.fighter.ai .avatar{background:#301d10;border-color:#8d572f}.fighter b{font-size:18px}.vs{font-size:22px;font-weight:1000;color:var(--orange)}.hero-badges{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}.pill{padding:9px 12px;border-radius:999px;background:#091b38;border:1px solid var(--line);color:#d8e6f8;font-size:12px;font-weight:900}.btn{appearance:none;border:0;border-radius:16px;padding:15px 20px;font-size:16px;font-weight:1000;cursor:pointer;transition:.15s transform,.15s opacity;color:#051428;background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 10px 28px rgba(59,168,255,.18)}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn.orange{background:linear-gradient(135deg,#ffc66e,var(--orange));color:#301600}.btn.secondary{background:#10274e;color:white;border:1px solid var(--line);box-shadow:none}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:20px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:13px;font-weight:900;color:#dce8f8}.field input,.field select{width:100%;padding:14px 15px;border-radius:14px;background:#071a37;color:white;border:1px solid var(--line);font-size:16px;outline:none}.field input:focus,.field select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(113,230,255,.08)}.tiny{font-size:11px;color:#8196b5;line-height:1.45}

/* game arena */
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-bottom:18px}.score-box{background:#091c3b;border:1px solid var(--line);border-radius:18px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}.score-box.ai{border-color:#5e442e}.score-box small{display:block;color:#8fa7c6;font-size:10px;font-weight:900;letter-spacing:1px}.score-box b{font-size:30px;line-height:1}.score-box.ai b{color:var(--orange)}.score-vs{font-size:13px;font-weight:1000;color:#94a8c4}.battlebar{height:13px;border-radius:999px;background:#391c13;overflow:hidden;position:relative;margin-bottom:20px;border:1px solid #314a6e}.battlebar .human{height:100%;width:50%;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:.35s width}.battlebar:after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:rgba(255,255,255,.45)}.round-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.category{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--cyan);font-weight:1000}.question-title{font-size:clamp(28px,5vw,46px);line-height:1.06;margin:7px 0 9px;letter-spacing:-1px}.question-sub{font-size:14px;color:var(--muted);line-height:1.45}.clock{min-width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:1000;background:#071a36;border:5px solid var(--blue);box-shadow:inset 0 0 0 3px #0d274e}.clock.danger{border-color:var(--orange);color:#ffd2a7}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.option{border:1px solid var(--line);background:#0a1d3d;color:#f0f6ff;border-radius:18px;padding:17px;min-height:88px;font-size:18px;font-weight:900;text-align:center;cursor:pointer;transition:.14s transform,.14s border-color,.14s background;display:grid;place-items:center}.option:hover{transform:translateY(-2px);border-color:#4e80b7}.option.selected{border-color:var(--cyan);box-shadow:inset 0 0 0 2px rgba(113,230,255,.18)}.option.correct{border-color:var(--green);background:rgba(72,223,157,.12)}.option.wrong{border-color:var(--red);background:rgba(255,101,123,.12)}.option.ai-pick:after{content:"AI";position:absolute}.option{position:relative}.option .tag{position:absolute;top:7px;right:8px;font-size:9px;padding:4px 6px;border-radius:999px;background:#5a361d;color:#ffd7b3}.feedback-line{min-height:46px;margin-top:15px;font-size:14px;font-weight:900;color:#c6d7ec;display:flex;align-items:center;justify-content:space-between;gap:10px}.feedback-line .win{color:#aaf3d0}.feedback-line .lose{color:#ffc0ca}.feedback-line .speed{color:#ffd2a6}.streak{font-size:12px;font-weight:1000;color:var(--yellow)}.round-progress{display:flex;gap:5px;margin-top:18px}.round-progress i{height:5px;flex:1;border-radius:999px;background:#17355d}.round-progress i.done{background:var(--blue)}.round-progress i.current{background:var(--orange)}

/* mini visuals */
.sequence{display:flex;align-items:center;justify-content:center;gap:13px;margin:22px 0 4px;font-size:clamp(34px,7vw,62px);min-height:80px}.seq-item{min-width:54px;text-align:center}.data-bars{display:flex;align-items:flex-end;justify-content:center;gap:20px;height:150px;margin:18px auto 4px;max-width:520px}.bar-col{width:64px;text-align:center}.bar{width:100%;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--cyan),var(--blue));min-height:18px}.bar-col b{font-size:12px;color:#d7e6f8}.bar-col span{display:block;font-size:11px;color:#8196b5;margin-top:5px}.memory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(310px,78vw);margin:22px auto}.memory-cell{aspect-ratio:1;border-radius:16px;background:#102a55;border:1px solid #345b8b;display:grid;place-items:center;font-size:28px;font-weight:1000}.memory-cell.hot{background:linear-gradient(135deg,#ffc56b,var(--orange));color:#331700;box-shadow:0 0 24px rgba(255,155,61,.35)}.tap-zone{height:260px;border:2px dashed #315a8d;border-radius:24px;margin-top:22px;display:grid;place-items:center;text-align:center;padding:20px;background:#081a37;user-select:none}.tap-zone.waiting{cursor:not-allowed}.tap-zone.go{background:radial-gradient(circle,#2ecc84 0,#123c34 70%);border-color:#55eda6;cursor:pointer}.tap-zone .tap-word{font-size:clamp(38px,10vw,82px);font-weight:1000;letter-spacing:-2px}.tap-zone .tap-note{font-size:13px;color:#9fb4ce}.count-cloud{font-size:clamp(28px,7vw,52px);letter-spacing:9px;line-height:1.65;text-align:center;margin:17px 0 4px;padding:15px;background:#081a37;border-radius:20px;border:1px solid var(--line)}

/* result */
.result-hero{text-align:center}.result-hero .big{font-size:clamp(48px,10vw,88px);line-height:.88;font-weight:1000;letter-spacing:-3px;margin:10px 0}.result-hero .big.win{color:var(--cyan)}.result-hero .big.lose{color:var(--orange)}.final-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:24px auto;max-width:560px}.final-score .side{padding:18px;border-radius:20px;background:#091b38;border:1px solid var(--line)}.final-score .side b{display:block;font-size:42px}.final-score .side.ai b{color:var(--orange)}.final-score .vs{font-size:16px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.stat{background:#091b38;border:1px solid var(--line);padding:14px;border-radius:16px;text-align:center}.stat b{display:block;font-size:24px}.stat span{font-size:11px;color:var(--muted)}.leaderboard{margin-top:18px;text-align:left}.leader{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #1f3a62}.leader b{color:var(--orange)}.modal{position:fixed;inset:0;background:rgba(1,7,17,.82);display:grid;place-items:center;padding:20px;z-index:30}.modal-box{width:min(520px,100%);background:#0d2145;border:1px solid #365f92;border-radius:24px;padding:25px;box-shadow:var(--shadow)}.modal-box h2{margin:0 0 10px}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}.confetti i{position:absolute;width:8px;height:14px;top:-20px;animation:fall 2.7s linear forwards;background:var(--orange)}@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}.pulse{animation:pulse .45s ease}@keyframes pulse{50%{transform:scale(1.035)}}.shake{animation:shake .3s}@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}.footer-note{text-align:center;padding:8px 0 14px;color:#627c9f;font-size:11px}
@media(max-width:680px){.app-shell{padding-left:10px;padding-right:10px}.topbar{height:58px}.card{padding:18px;border-radius:22px}.arena-preview{grid-template-columns:1fr auto 1fr}.fighter{padding:12px}.fighter .avatar{width:50px;height:50px;font-size:26px}.hero h1{font-size:58px}.option-grid,.form-grid{grid-template-columns:1fr}.option{min-height:68px;font-size:17px}.score-box b{font-size:25px}.question-title{font-size:31px}.clock{min-width:54px;height:54px;font-size:17px}.stat-grid{grid-template-columns:1fr 1fr}.stat:last-child{grid-column:1/-1}.cta-row{display:grid}.btn{width:100%}.data-bars{gap:12px}.bar-col{width:50px}.scoreboard{gap:7px}.score-box{padding:10px}.score-vs{font-size:10px}}
@media(max-height:650px) and (orientation:landscape){.topbar{height:44px}.screen{align-items:flex-start}.card{padding:15px}.question-title{font-size:28px}.option{min-height:56px;padding:11px}.tap-zone{height:160px}.footer-note{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}