:root{--bg-dark: #0d0d1a;--bg-card: #1a1a2e;--bg-card-alt: #16213e;--bg-panel: #0f1923;--red: #ff2d2d;--yellow: #ffd700;--blue: #00bfff;--green: #39ff14;--purple: #bf5fff;--orange: #ff8c00;--text-primary: #ffffff;--text-secondary: #b0b8cc;--text-dim: #6b7280;--border-default: #ffffff;--border-thick: 4px;--border-thin: 2px;--font-comic: "Bangers", cursive;--font-body: "Nunito", sans-serif;--sector-math: #ff2d2d;--sector-russian: #00bfff;--sector-reading: #bf5fff;--sector-world: #39ff14;--glow-red: 0 0 12px #ff2d2d88;--glow-yellow: 0 0 16px #ffd70099;--glow-blue: 0 0 12px #00bfff88;--glow-green: 0 0 12px #39ff1488;--gap-s: 8px;--gap-m: 16px;--gap-l: 24px;--gap-xl: 40px;--radius-s: 6px;--radius-m: 12px;--radius-l: 20px;--tap-min: 48px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background-color:var(--bg-dark);color:var(--text-primary);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-y:auto}body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(circle,#ffffff0d 1px,transparent 1px);background-size:20px 20px;pointer-events:none;z-index:0}#root{position:relative;z-index:1;max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}button{cursor:pointer;border:none;background:none;font-family:var(--font-body)}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.comic-card{background:var(--bg-card);border:var(--border-thick) solid var(--border-default);border-radius:var(--radius-m);padding:var(--gap-m);position:relative;box-shadow:4px 4px #000c}.comic-card--tilted{transform:rotate(-1deg)}.comic-card--red{border-color:var(--red);box-shadow:4px 4px 0 var(--red)}.comic-card--blue{border-color:var(--blue);box-shadow:4px 4px 0 var(--blue)}.comic-card--yellow{border-color:var(--yellow);box-shadow:4px 4px 0 var(--yellow)}.comic-card--green{border-color:var(--green);box-shadow:4px 4px 0 var(--green)}.comic-card--purple{border-color:var(--purple);box-shadow:4px 4px 0 var(--purple)}.comic-panel{background:var(--bg-panel);border:var(--border-thick) solid var(--border-default);border-radius:var(--radius-m);overflow:hidden;box-shadow:4px 4px #000c}.comic-panel__caption{background:var(--yellow);color:#000;font-family:var(--font-comic);font-size:1rem;letter-spacing:.04em;padding:4px 12px;text-transform:uppercase}.comic-panel__caption--red{background:var(--red);color:#fff}.comic-panel__caption--blue{background:var(--blue);color:#000}.comic-panel__caption--green{background:var(--green);color:#000}.comic-panel__caption--purple{background:var(--purple);color:#fff}.comic-panel__body{padding:var(--gap-m)}.comic-heading{font-family:var(--font-comic);font-size:2.4rem;letter-spacing:.06em;line-height:1.1;color:var(--yellow);text-shadow:3px 3px 0 #000,-1px -1px 0 #000}.comic-heading--white{color:var(--text-primary);text-shadow:3px 3px 0 #000}.comic-heading--red{color:var(--red);text-shadow:3px 3px 0 #000}.comic-heading--blue{color:var(--blue);text-shadow:3px 3px 0 #000}.comic-heading--green{color:var(--green);text-shadow:3px 3px 0 #000}.comic-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--tap-min);padding:10px 16px;border:var(--border-thick) solid var(--border-default);border-radius:var(--radius-m);background:var(--yellow);color:#000;font-family:var(--font-comic);font-size:1.4rem;letter-spacing:.06em;box-shadow:4px 4px #000;transition:transform .08s,box-shadow .08s;text-transform:uppercase}.comic-btn:active{transform:translate(3px,3px);box-shadow:1px 1px #000}.comic-btn--red{background:var(--red);color:#fff;box-shadow:4px 4px #000}.comic-btn--blue{background:var(--blue);color:#000;box-shadow:4px 4px #000}.comic-btn--green{background:var(--green);color:#000;box-shadow:4px 4px #000}.comic-btn--dark{background:var(--bg-card);color:var(--text-primary);border-color:#fff;box-shadow:4px 4px #000}.comic-btn--outline{background:transparent;color:var(--text-primary);border-color:var(--text-secondary);box-shadow:none;font-size:1rem;font-family:var(--font-body);font-weight:700}.answer-btn{display:flex;align-items:center;width:100%;min-height:var(--tap-min);padding:12px 16px;border:3px solid #ffffff44;border-radius:var(--radius-m);background:var(--bg-card-alt);color:var(--text-primary);font-family:var(--font-body);font-size:1.1rem;font-weight:700;text-align:left;gap:var(--gap-s);transition:border-color .15s,background .15s}.answer-btn:active{border-color:var(--yellow);background:#ffd70022}.answer-btn--correct{border-color:var(--green);background:#39ff1422;color:var(--green)}.answer-btn--wrong{border-color:var(--red);background:#ff2d2d22;color:var(--red)}.comic-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:2px solid currentColor;border-radius:999px;font-family:var(--font-comic);font-size:.95rem;letter-spacing:.04em}.comic-progress{width:100%;height:14px;background:var(--bg-card-alt);border:2px solid #fff;border-radius:999px;overflow:hidden}.comic-progress__fill{height:100%;background:linear-gradient(90deg,var(--yellow),var(--orange));border-radius:999px;transition:width .4s ease}.speech-bubble{position:relative;background:#fff;color:#000;border:3px solid #000;border-radius:var(--radius-m);padding:10px 14px;font-family:var(--font-body);font-size:.95rem;font-weight:700;line-height:1.4;max-width:100%}.speech-bubble:before{content:"";position:absolute;bottom:-16px;left:20px;border:8px solid transparent;border-top-color:#000}.speech-bubble:after{content:"";position:absolute;bottom:-11px;left:22px;border:6px solid transparent;border-top-color:#fff}.speech-bubble--dark{background:var(--bg-card);color:var(--text-primary);border-color:var(--blue)}.speech-bubble--dark:before{border-top-color:var(--blue)}.speech-bubble--dark:after{border-top-color:var(--bg-card)}.flash-overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;pointer-events:none;animation:flash-fade .7s ease forwards}.flash-overlay--correct{background:#ffd70033}.flash-overlay--wrong{background:#00bfff22}.flash-text{font-family:var(--font-comic);font-size:5rem;letter-spacing:.08em;text-shadow:4px 4px 0 #000,-2px -2px 0 #000;animation:flash-pop .7s ease forwards;line-height:1}.flash-text--correct{color:var(--yellow)}.flash-text--wrong{color:var(--blue)}.flash-spikes{position:absolute;inset:0;background-image:conic-gradient(from 0deg at 50% 50%,transparent 0deg,#ffd70022 10deg,transparent 20deg,transparent 40deg,#ffd70022 50deg,transparent 60deg,transparent 80deg,#ffd70022 90deg,transparent 100deg,transparent 120deg,#ffd70022 130deg,transparent 140deg,transparent 160deg,#ffd70022 170deg,transparent 180deg,transparent 200deg,#ffd70022 210deg,transparent 220deg,transparent 240deg,#ffd70022 250deg,transparent 260deg,transparent 280deg,#ffd70022 290deg,transparent 300deg,transparent 320deg,#ffd70022 330deg,transparent 340deg,transparent 360deg);animation:spikes-spin .7s ease forwards}.flash-spikes--wrong{background-image:conic-gradient(from 0deg at 50% 50%,transparent 0deg,#00bfff22 10deg,transparent 20deg,transparent 40deg,#00bfff22 50deg,transparent 60deg,transparent 80deg,#00bfff22 90deg,transparent 100deg,transparent 120deg,#00bfff22 130deg,transparent 140deg,transparent 160deg,#00bfff22 170deg,transparent 180deg,transparent 200deg,#00bfff22 210deg,transparent 220deg,transparent 240deg,#00bfff22 250deg,transparent 260deg,transparent 280deg,#00bfff22 290deg,transparent 300deg,transparent 320deg,#00bfff22 330deg,transparent 340deg,transparent 360deg)}@keyframes flash-fade{0%{opacity:1}60%{opacity:1}to{opacity:0}}@keyframes flash-pop{0%{transform:scale(.4) rotate(-8deg);opacity:0}30%{transform:scale(1.2) rotate(4deg);opacity:1}60%{transform:scale(1) rotate(0);opacity:1}to{transform:scale(1.1) rotate(-2deg);opacity:0}}@keyframes spikes-spin{0%{transform:scale(.5) rotate(0);opacity:0}30%{transform:scale(1.5) rotate(15deg);opacity:1}to{transform:scale(2) rotate(30deg);opacity:0}}.token-counter{display:inline-flex;align-items:center;gap:6px;background:var(--bg-card);border:2px solid var(--yellow);border-radius:999px;padding:4px 12px;font-family:var(--font-comic);font-size:1.2rem;color:var(--yellow);box-shadow:var(--glow-yellow)}.sector-card{border:3px solid;border-radius:var(--radius-m);padding:var(--gap-m);background:var(--bg-card);display:flex;flex-direction:column;gap:8px}.sector-card--math{border-color:var(--sector-math);box-shadow:0 0 10px #ff2d2d44}.sector-card--russian{border-color:var(--sector-russian);box-shadow:0 0 10px #00bfff44}.sector-card--reading{border-color:var(--sector-reading);box-shadow:0 0 10px #bf5fff44}.sector-card--world{border-color:var(--sector-world);box-shadow:0 0 10px #39ff1444}.sector-card__title{font-family:var(--font-comic);font-size:1.3rem;letter-spacing:.05em}.pin-dot{width:18px;height:18px;border-radius:50%;border:3px solid var(--text-secondary);background:transparent;transition:background .15s,border-color .15s}.pin-dot--filled{background:var(--yellow);border-color:var(--yellow);box-shadow:var(--glow-yellow)}.pin-dot--error{border-color:var(--red);background:var(--red)}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.shake{animation:shake .45s ease}.text-comic{font-family:var(--font-comic);letter-spacing:.05em}.text-dim{color:var(--text-secondary)}.text-yellow{color:var(--yellow)}.text-red{color:var(--red)}.text-blue{color:var(--blue)}.text-green{color:var(--green)}.gap-s{gap:var(--gap-s)}.gap-m{gap:var(--gap-m)}.gap-l{gap:var(--gap-l)}.p-m{padding:var(--gap-m)}.p-l{padding:var(--gap-l)}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.w-full{width:100%}