:root{
  --bg:#090910;--bg2:#15121a;--card:rgba(255,255,255,.075);--card2:rgba(255,255,255,.115);--text:#fff;--muted:rgba(255,255,255,.72);--red:#f20b0b;--red2:#ff4545;--dark-red:#6f0306;--line:rgba(255,255,255,.14);--good:#40e080;--bad:#ff6868;--warn:#ffd166;--shadow:0 24px 70px rgba(0,0,0,.45);--radius:24px;--input-bg:rgba(0,0,0,.32);--checker:#fff
}
body.light{
  --bg:#f7f7fb;--bg2:#ffffff;--card:rgba(255,255,255,.78);--card2:rgba(255,255,255,.94);--text:#17131a;--muted:rgba(23,19,26,.68);--line:rgba(30,20,28,.14);--shadow:0 18px 55px rgba(35,35,55,.14);--input-bg:rgba(255,255,255,.86);--checker:#111
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#090910;color:var(--text);overflow-x:hidden}
body{background:radial-gradient(circle at 13% 8%,rgba(242,11,11,.48),transparent 33%),radial-gradient(circle at 86% 17%,rgba(255,69,69,.18),transparent 36%),linear-gradient(135deg,var(--bg),var(--bg2) 55%,var(--bg));transition:background .25s ease,color .25s ease}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;background-image:linear-gradient(45deg,var(--checker) 25%,transparent 25%),linear-gradient(-45deg,var(--checker) 25%,transparent 25%);background-size:72px 72px;mask-image:radial-gradient(circle at center,#000,transparent 78%)}
button,a,input{font:inherit}a{color:inherit;text-decoration:none}.app-shell{min-height:100svh;width:min(1280px,100%);margin:auto;padding:clamp(8px,1.8vw,22px);display:flex;flex-direction:column;gap:clamp(8px,1.4vw,16px)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(242,11,11,.25),var(--card));backdrop-filter:blur(14px);border-radius:20px;box-shadow:var(--shadow)}
.brand{width:min(220px,46vw);height:auto;display:block;filter:drop-shadow(0 10px 24px rgba(242,11,11,.33))}.header-actions{display:flex;align-items:center;gap:8px}.back-btn,.sound-btn,.theme-btn{border:1px solid var(--line);background:var(--card2);color:var(--text);border-radius:999px;padding:9px 12px;font-weight:950;box-shadow:0 10px 26px rgba(0,0,0,.16);cursor:pointer;white-space:nowrap}.sound-btn,.theme-btn{min-width:44px;padding:9px 10px}.screen{display:none;animation:show .22s ease}.screen.active{display:block}@keyframes show{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-card{display:grid;grid-template-columns:minmax(100px,170px) 1fr;gap:clamp(14px,2.5vw,28px);align-items:center;padding:clamp(16px,3vw,34px);border:1px solid rgba(255,70,70,.28);border-radius:var(--radius);background:linear-gradient(135deg,rgba(242,11,11,.24),var(--card));box-shadow:var(--shadow);overflow:hidden;position:relative}.hero-card::after,.arena-card::after{content:"+ − × ÷";position:absolute;right:3%;bottom:-20px;font-size:clamp(48px,10vw,150px);font-weight:1000;letter-spacing:-.1em;color:rgba(255,255,255,.055);pointer-events:none}.mark{width:100%;max-width:160px;filter:drop-shadow(0 20px 36px rgba(242,11,11,.35))}.eyebrow{display:inline-flex;width:max-content;padding:7px 11px;border-radius:999px;background:linear-gradient(135deg,var(--red),#8c0505);color:#fff;font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em}.hero-copy h1,.result-card h1{font-size:clamp(38px,7vw,86px);line-height:.9;margin:12px 0 10px;letter-spacing:-.07em}.subtitle{font-size:clamp(15px,2vw,21px);color:var(--muted);line-height:1.45;font-weight:650;margin:0}.panel,.arena-card,.stats-card,.result-card{border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);backdrop-filter:blur(16px);border-radius:var(--radius)}.class-panel{margin-top:14px;padding:clamp(16px,2.5vw,28px)}.class-panel h2,.section-title{margin:0 0 16px;font-size:clamp(24px,4vw,38px);letter-spacing:-.04em}.class-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.class-card{min-height:74px;border:1px solid var(--line);background:linear-gradient(135deg,var(--card2),rgba(255,255,255,.04));border-radius:20px;color:var(--text);font-weight:1000;font-size:17px;cursor:pointer;transition:.2s transform,.2s border-color,.2s background;display:grid;place-items:center;text-align:center;padding:9px}.class-card small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.class-card:hover,.class-card.selected{transform:translateY(-3px);border-color:rgba(255,70,70,.9);background:linear-gradient(135deg,var(--red),#7b0505);color:#fff}.class-card.selected small,.class-card:hover small{color:rgba(255,255,255,.82)}.primary,.ghost{border:0;border-radius:999px;min-height:48px;padding:12px 17px;font-weight:1000;cursor:pointer}.primary{background:linear-gradient(135deg,var(--red2),var(--red),#8f0404);color:#fff;box-shadow:0 14px 28px rgba(242,11,11,.24)}.primary:disabled,.ghost:disabled{opacity:.45;cursor:not-allowed}.start-btn{margin-top:16px;width:100%;font-size:18px}
.battle-layout{display:grid;grid-template-columns:230px 1fr;gap:14px}.stats-card{padding:14px;display:flex;flex-direction:column;gap:12px;align-self:stretch}.mini-logo{width:74px;align-self:center;filter:drop-shadow(0 10px 22px rgba(242,11,11,.34))}.label{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:900}.stats-card strong{font-size:28px;letter-spacing:-.05em}.life-row{display:flex;gap:6px;flex-wrap:wrap}.heart{font-size:22px;filter:drop-shadow(0 8px 12px rgba(242,11,11,.3))}.heart.empty{opacity:.25;filter:none}.arena-card{position:relative;overflow:hidden;padding:clamp(12px,2vw,22px);display:grid;gap:12px;min-height:calc(100svh - 112px)}.enemy-zone{display:flex;align-items:center;justify-content:space-between;gap:10px}.enemy{display:flex;align-items:center;gap:12px}.enemy-face{width:54px;height:54px;border-radius:17px;background:linear-gradient(135deg,#fff,#ffd6d6);display:grid;place-items:center;font-size:28px;box-shadow:0 14px 30px rgba(0,0,0,.2)}.enemy.hit{animation:hit .35s ease}.enemy.wrong{animation:wrong .35s ease}@keyframes hit{50%{transform:translateX(10px) rotate(5deg);filter:drop-shadow(0 0 20px var(--good))}}@keyframes wrong{30%{transform:translateX(-8px)}60%{transform:translateX(8px)}}.enemy-hp{width:min(300px,38vw);height:13px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden;border:1px solid var(--line)}.enemy-hp span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--red),var(--warn),var(--good));transition:width .35s ease}.timer-box{min-width:80px;display:grid;place-items:center;padding:8px 12px;border-radius:20px;border:1px solid var(--line);background:rgba(0,0,0,.18)}.timer-box span{font-size:30px;font-weight:1000}.timer-box small{color:var(--muted);font-weight:900}.question-card{position:relative;z-index:1;min-height:154px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(0,0,0,.22),rgba(255,255,255,.07));border-radius:24px;padding:clamp(16px,2.4vw,28px);display:grid;place-items:center;text-align:center}.difficulty-pill{position:absolute;top:12px;left:12px;padding:7px 11px;border-radius:999px;background:rgba(242,11,11,.86);color:#fff;font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.1em}.question-card h2{font-size:clamp(40px,7vw,82px);letter-spacing:-.06em;line-height:1;margin:20px 0 7px}.question-card p{margin:0;color:var(--muted);font-weight:750}.answer-form{display:grid;grid-template-columns:1fr auto;gap:10px;position:relative;z-index:1}.answer-form input{width:100%;min-height:52px;border-radius:18px;border:1px solid var(--line);background:var(--input-bg);color:var(--text);font-size:24px;font-weight:1000;text-align:center;outline:none;padding:8px 14px}.answer-form input::placeholder{color:var(--muted)}.answer-form input:focus{border-color:var(--red2);box-shadow:0 0 0 4px rgba(242,11,11,.16)}.keypad{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.keypad button{min-height:42px;border-radius:15px;border:1px solid var(--line);background:var(--card2);color:var(--text);font-weight:1000;font-size:18px;cursor:pointer}.feedback{min-height:28px;font-size:16px;font-weight:950;text-align:center;color:var(--muted)}.feedback.good{color:var(--good)}.feedback.bad{color:var(--bad)}.actions-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.actions-row.center{justify-content:center}.ghost{border:1px solid var(--line);background:var(--card2);color:var(--text)}.link-btn{display:inline-grid;place-items:center}.result-card{margin:auto;max-width:820px;text-align:center;padding:clamp(22px,5vw,44px)}.result-card .mark{width:130px}.result-card p{color:var(--muted);font-weight:700}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.result-grid div{border:1px solid var(--line);border-radius:22px;background:var(--card);padding:16px}.result-grid span{display:block;color:var(--muted);font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.1em}.result-grid strong{font-size:34px}.shake{animation:shake .25s ease}@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
@media (max-width:980px){.class-grid{grid-template-columns:repeat(4,1fr)}.battle-layout{grid-template-columns:1fr}.stats-card{display:grid;grid-template-columns:repeat(4,1fr);align-items:center}.mini-logo{display:none}.life-row{grid-column:1/-1}.arena-card{min-height:auto}.keypad{grid-template-columns:repeat(6,1fr)}}
@media (max-width:640px){.app-shell{padding:8px;gap:8px}.topbar{padding:8px 9px;border-radius:18px}.brand{width:min(160px,38vw)}.back-btn,.sound-btn,.theme-btn{padding:8px 9px;font-size:12px}.sound-btn,.theme-btn{min-width:38px}.hero-card{grid-template-columns:1fr;text-align:center;padding:15px}.mark{margin:auto;max-width:118px}.hero-copy .eyebrow{margin:auto}.class-grid{grid-template-columns:repeat(2,1fr);gap:8px}.class-card{min-height:62px}.stats-card{grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;border-radius:20px}.stats-card strong{font-size:22px}.label{font-size:10px}.life-row{gap:5px}.heart{font-size:20px}.arena-card{border-radius:20px;padding:10px;gap:10px}.enemy-face{width:44px;height:44px;font-size:24px;border-radius:14px}.enemy-hp{width:40vw;height:12px}.timer-box{min-width:66px;padding:7px}.timer-box span{font-size:24px}.question-card{min-height:130px;padding:14px}.difficulty-pill{top:10px;left:10px;padding:6px 10px}.question-card h2{font-size:clamp(36px,13vw,62px);margin:18px 0 6px}.question-card p{font-size:14px}.answer-form{grid-template-columns:1fr}.answer-form input{font-size:22px;min-height:50px}.primary,.ghost{min-height:46px}.keypad{grid-template-columns:repeat(3,1fr);gap:8px}.keypad button{min-height:42px}.feedback{min-height:24px;font-size:14px}.actions-row>*{flex:1 1 120px}.result-grid{grid-template-columns:1fr}.hero-copy h1,.result-card h1{font-size:42px}}
@media (max-width:430px){.brand{width:min(140px,36vw)}.back-btn{max-width:84px;overflow:hidden;text-overflow:ellipsis}.stats-card{grid-template-columns:repeat(2,1fr)}.stats-card strong{font-size:26px}.enemy-zone{align-items:center}.question-card{min-height:122px}.keypad button{min-height:38px}.actions-row{gap:7px}.actions-row>*{flex:1 1 100px;padding-left:10px;padding-right:10px}.arena-card{gap:8px}}
@media (orientation:landscape) and (max-height:560px){.app-shell{gap:8px}.topbar{padding:7px 9px}.brand{width:150px}.hero-card{grid-template-columns:110px 1fr}.mark{max-width:110px}.class-grid{grid-template-columns:repeat(6,1fr)}.class-card{min-height:54px}.battle-layout{grid-template-columns:180px 1fr}.stats-card{display:flex;gap:8px}.arena-card{min-height:auto;gap:8px}.enemy-face{width:40px;height:40px;font-size:22px}.timer-box span{font-size:22px}.question-card{min-height:96px}.question-card h2{font-size:44px}.keypad{grid-template-columns:repeat(6,1fr)}.keypad button{min-height:32px}.answer-form input{min-height:42px}.primary,.ghost{min-height:40px}.feedback{min-height:20px}}