:root{--bg:#09070c;--bg2:#21070a;--card:rgba(255,255,255,.075);--card2:rgba(255,255,255,.12);--text:#fff;--muted:rgba(255,255,255,.72);--line:rgba(255,255,255,.15);--red:#f20b0b;--red2:#ff4040;--green:#49df7a;--gold:#ffd166;--shadow:0 22px 70px rgba(0,0,0,.45)}
body.light{--bg:#f7f7fb;--bg2:#fff;--card:rgba(255,255,255,.78);--card2:rgba(255,255,255,.95);--text:#15151b;--muted:rgba(20,20,28,.68);--line:rgba(20,20,28,.13);--shadow:0 16px 42px rgba(20,20,30,.14)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;overflow-x:hidden}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 8% 0%,rgba(242,11,11,.45),transparent 30%),radial-gradient(circle at 92% 0%,rgba(255,64,64,.18),transparent 35%),linear-gradient(145deg,var(--bg),var(--bg2) 58%,var(--bg));transition:.25s}.app{width:min(1180px,100%);margin:0 auto;padding:12px;min-height:100dvh}.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin-bottom:12px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,rgba(242,11,11,.24),var(--card));box-shadow:var(--shadow);backdrop-filter:blur(16px)}.brand{height:38px;width:auto;max-width:52vw;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(242,11,11,.35))}.back,.themeBtn{border:1px solid var(--line);background:var(--card2);color:var(--text);border-radius:999px;min-height:42px;padding:0 14px;font-weight:1000;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.themeBtn{width:48px;font-size:18px}.screen{display:none}.screen.active{display:block}.heroCard,.panel,.shopBoard,.feedback,.resultCard,.tips{border:1px solid var(--line);background:linear-gradient(135deg,rgba(255,255,255,.10),var(--card));box-shadow:var(--shadow);border-radius:28px}.heroCard{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:26px}.heroIcon{width:120px;filter:drop-shadow(0 16px 25px rgba(242,11,11,.32))}.eyebrow{display:inline-flex;margin:0 0 8px;padding:7px 11px;border-radius:999px;background:var(--red);color:#fff;font-weight:1000;font-size:12px;text-transform:uppercase;letter-spacing:.11em}h1{margin:0;font-size:clamp(38px,7vw,82px);line-height:.9;letter-spacing:-.06em}.subtitle{margin:12px 0 0;color:var(--muted);font-weight:700;line-height:1.5}.panel{margin-top:12px;padding:20px}.panel h2{margin:0 0 14px;font-size:clamp(24px,4vw,36px)}.classGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.classGrid button,.answers button,.actions button,.miniActions button{border:1px solid var(--line);background:var(--card2);color:var(--text);border-radius:18px;font-weight:1000;min-height:52px;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}.classGrid button:hover,.answers button:hover,.actions button:hover,.miniActions button:hover{transform:translateY(-2px);border-color:rgba(255,64,64,.7)}.tips{margin-top:12px;padding:14px;color:var(--muted);font-weight:750}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}.hud>div{padding:12px;border:1px solid var(--line);border-radius:20px;background:var(--card)}.hud span{display:block;color:var(--muted);font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em}.hud b{font-size:28px}.shopBoard{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:stretch;padding:14px;margin-bottom:10px}.shopkeeper{font-weight:1000;color:var(--gold);margin-bottom:8px}.speech{font-size:clamp(24px,5vw,48px);font-weight:1000;line-height:1.08;letter-spacing:-.04em}.metaLine{margin-top:8px;color:var(--muted);font-weight:800}.moneyMeter{display:grid;place-items:center;align-content:center;min-width:130px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(135deg,var(--red),#8b0404);color:#fff}.moneyMeter span{font-size:24px;font-weight:1000}.moneyMeter strong{font-size:48px;line-height:.9}.interactiveWrap{border:1px solid var(--line);border-radius:24px;background:var(--card);padding:12px;margin-bottom:10px}.interactiveWrap.hidden{display:none}.totalBox{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.totalBox>div{padding:10px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.18)}.totalBox span{display:block;color:var(--muted);font-size:11px;font-weight:1000;text-transform:uppercase}.totalBox b{font-size:24px}.noteGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.note{position:relative;min-height:58px;border:2px solid rgba(255,255,255,.2);border-radius:14px;background:linear-gradient(135deg,#fef3c7,#f59e0b);color:#1a1105;font-weight:1000;font-size:20px;box-shadow:0 10px 20px rgba(0,0,0,.18);cursor:pointer;touch-action:manipulation}.note:nth-child(2n){background:linear-gradient(135deg,#dbeafe,#38bdf8)}.note:nth-child(3n){background:linear-gradient(135deg,#dcfce7,#22c55e)}.note:nth-child(4n){background:linear-gradient(135deg,#fee2e2,#ef4444);color:#fff}.note small{display:block;font-size:10px;opacity:.75}.note.pulse{outline:4px solid var(--green)}.miniActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.miniActions button{min-height:42px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.answers button{padding:12px 14px;text-align:left;font-size:18px}.answers button.selected{background:linear-gradient(135deg,var(--red),#8f0505);color:#fff;border-color:rgba(255,255,255,.3)}.answers button.correct{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff}.answers button.wrong{background:linear-gradient(135deg,#7f1d1d,#ef4444);color:#fff}.feedback{padding:12px 14px;color:var(--muted);font-weight:850;margin-bottom:10px;min-height:48px}.feedback.good{color:#b5ffd0;border-color:rgba(73,223,122,.6)}.feedback.bad{color:#ffd0d0;border-color:rgba(255,64,64,.6)}.actions{display:grid;grid-template-columns:1fr 1.2fr 1.4fr;gap:10px;position:sticky;bottom:8px}.actions button{min-height:56px;font-size:16px}.actions #checkBtn,.actions #nextBtn{background:linear-gradient(135deg,#ff3b3b,#c90000);color:#fff}.actions button:disabled{opacity:.45;cursor:not-allowed}.resultCard{text-align:center;padding:36px;margin-top:35px}.resultLogo{width:130px}.resultCard h2{font-size:54px;margin:10px 0}.resultCard p{font-size:20px;color:var(--muted);font-weight:800}.resultCard button,.homeLink{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;min-height:52px;padding:0 22px;margin:6px;background:linear-gradient(135deg,var(--red),#8f0505);color:#fff;font-weight:1000;text-decoration:none}.homeLink{background:var(--card2);color:var(--text)}
@media(max-width:760px){.app{padding:8px}.topbar{border-radius:18px;padding:8px}.brand{height:30px}.back,.themeBtn{min-height:38px;padding:0 11px}.heroCard{grid-template-columns:1fr;text-align:center;padding:18px}.heroIcon{width:82px;margin:auto}.classGrid{grid-template-columns:repeat(4,1fr)}.hud{grid-template-columns:repeat(4,1fr);gap:6px}.hud>div{padding:8px}.hud b{font-size:22px}.hud span{font-size:10px}.shopBoard{grid-template-columns:1fr;padding:10px}.moneyMeter{min-height:82px}.moneyMeter strong{font-size:38px}.speech{font-size:30px}.noteGrid{grid-template-columns:repeat(3,1fr)}.note{min-height:52px;font-size:18px}.totalBox{gap:6px}.totalBox>div{padding:8px}.totalBox b{font-size:19px}.answers{grid-template-columns:1fr}.answers button{font-size:16px;min-height:48px}.actions{grid-template-columns:.75fr 1fr 1.25fr;gap:7px}.actions button{min-height:50px;font-size:14px}.panel{padding:14px}.tips{font-size:13px}}
@media(max-width:390px){.classGrid{grid-template-columns:repeat(3,1fr)}.speech{font-size:26px}.noteGrid{grid-template-columns:repeat(2,1fr)}.totalBox{grid-template-columns:1fr}.actions{position:static;grid-template-columns:1fr}.heroIcon{display:none}}
.selectedNotes{margin:0 0 10px;padding:10px 12px;border:1px dashed var(--line);border-radius:15px;color:var(--muted);font-weight:900;background:rgba(0,0,0,.12)}
.answers.hidden{display:none}.note span{display:block;font-size:22px;line-height:1}.note small{margin-top:3px}