:root{--bg: #1b1140;--bg2: #2a1b5e;--ink: #241a4f;--paper: #fff7ea;--paper2: #ffeed2;--pink: #ff4d8d;--cyan: #27d9e5;--yellow: #ffc933;--lime: #8ed927;--orange: #ff8a3d;--purple: #b388ff;--red: #ff3860;--shadow: 0 6px 0 var(--ink);--radius: 18px;font-size:16px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:"Baloo 2",system-ui,sans-serif;color:var(--ink);background-color:var(--bg);background-image:radial-gradient(ellipse 80% 60% at 15% -10%,rgba(255,77,141,.28),transparent 60%),radial-gradient(ellipse 70% 55% at 90% 0%,rgba(39,217,229,.22),transparent 60%),radial-gradient(ellipse 90% 50% at 50% 110%,rgba(179,136,255,.25),transparent 65%),radial-gradient(circle 1.5px,rgba(255,255,255,.22) 1.5px,transparent 0),radial-gradient(circle 1px,rgba(255,255,255,.14) 1px,transparent 0),linear-gradient(180deg,var(--bg),var(--bg2));background-size:100% 100%,100% 100%,100% 100%,90px 90px,47px 47px,100% 100%;background-attachment:fixed;min-height:100dvh;overflow-x:hidden}#root,.app{min-height:100dvh}.screen{max-width:780px;margin:0 auto;padding:24px 16px 48px;display:flex;flex-direction:column;align-items:center;min-height:100dvh;position:relative}button{font-family:inherit;cursor:pointer}.mute-btn{position:fixed;top:14px;right:14px;z-index:50;width:52px;height:52px;font-size:1.5rem;background:var(--paper);border:4px solid var(--ink);border-radius:50%;box-shadow:var(--shadow);transition:transform .12s}.mute-btn:hover{transform:scale(1.08) rotate(-6deg)}.mute-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}.start-screen{justify-content:center;gap:18px;text-align:center}.title{font-family:Lilita One,"Baloo 2",sans-serif;font-size:clamp(2.6rem,9.5vw,5.2rem);line-height:1;margin:0;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.title-letter{display:inline-block;animation:letter-wave 2.2s ease-in-out infinite;animation-delay:calc(var(--i) * .07s);text-shadow:4px 4px 0 var(--ink);-webkit-text-stroke:2px var(--ink)}.title-space{display:inline-block;width:.4em}.title-letter:nth-child(6n+1){color:var(--pink)}.title-letter:nth-child(6n+2){color:var(--yellow)}.title-letter:nth-child(6n+3){color:var(--cyan)}.title-letter:nth-child(6n+4){color:var(--lime)}.title-letter:nth-child(6n+5){color:var(--orange)}.title-letter:nth-child(6n+6){color:var(--purple)}@keyframes letter-wave{0%,to{transform:translateY(0) rotate(0)}30%{transform:translateY(-10px) rotate(-3deg)}60%{transform:translateY(2px) rotate(2deg)}}.tagline{color:var(--paper);font-size:1.15rem;font-weight:700;margin:0;opacity:.85;letter-spacing:.06em}.floaters{position:absolute;inset:0;pointer-events:none;overflow:hidden}.floater{position:absolute;animation:bob 4s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s);opacity:.85;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.35))}.floater .flag{width:58px;border-radius:6px;border:3px solid var(--ink);transform:rotate(calc(var(--i) * 11deg - 30deg))}.floater:nth-child(1){top:8%;left:6%}.floater:nth-child(2){top:14%;right:8%}.floater:nth-child(3){top:38%;left:3%}.floater:nth-child(4){top:42%;right:4%}.floater:nth-child(5){bottom:22%;left:8%}.floater:nth-child(6){bottom:18%;right:9%}.floater:nth-child(7){bottom:5%;left:22%}.floater:nth-child(8){bottom:7%;right:24%}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}.highscore-badge{background:var(--yellow);border:4px solid var(--ink);border-radius:999px;padding:6px 22px;font-weight:800;font-size:1.05rem;box-shadow:var(--shadow);animation:pop-in .4s cubic-bezier(.34,1.56,.64,1)}.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:560px;margin-top:8px}.mode-card{background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .15s,box-shadow .15s,background .15s}.mode-card:hover{transform:translateY(-3px) rotate(-1deg)}.mode-card.selected{background:var(--cyan);transform:translateY(-3px) scale(1.03);box-shadow:0 9px 0 var(--ink),0 0 28px #27d9e58c}.mode-emoji{font-size:2.2rem}.mode-name{font-family:Lilita One,sans-serif;font-size:1.5rem;letter-spacing:.05em}.mode-desc{font-size:.92rem;font-weight:600;line-height:1.25}.topic-picker{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;max-width:560px}.topic-chip{display:flex;align-items:center;gap:7px;background:var(--paper);border:4px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 var(--ink);padding:7px 16px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1rem;color:var(--ink);transition:transform .13s,box-shadow .13s,background .15s}.topic-chip:hover{transform:translateY(-2px) rotate(-1deg)}.topic-chip.selected{background:var(--purple);color:#fff;transform:translateY(-2px) scale(1.04);box-shadow:0 6px 0 var(--ink),0 0 22px #b388ff99}.topic-emoji{font-size:1.2rem}.topic-desc{color:var(--paper);font-weight:700;opacity:.8;margin:0;min-height:1.2em;text-align:center}.big-btn{font-family:Lilita One,sans-serif;font-size:1.6rem;letter-spacing:.05em;color:var(--ink);background:var(--yellow);border:4px solid var(--ink);border-radius:999px;padding:14px 46px;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}.big-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 9px 0 var(--ink)}.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}.play-btn{background:linear-gradient(180deg,var(--pink),#ff337b);color:#fff;text-shadow:2px 2px 0 var(--ink);animation:pulse-glow 1.8s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:0 6px 0 var(--ink),0 0 #ff4d8d00}50%{box-shadow:0 6px 0 var(--ink),0 0 34px #ff4d8da6}}.footnote{color:var(--paper);opacity:.65;font-weight:600;margin:0}.game-screen{gap:14px}.hud{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px}.hud>div{background:var(--paper);border:4px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);padding:6px 16px;font-weight:800;font-size:1.15rem;position:relative}.score-num{display:inline-block;animation:pop-in .3s cubic-bezier(.34,1.56,.64,1)}.score-pop{position:absolute;left:50%;top:-8px;color:var(--lime);font-family:Lilita One,sans-serif;font-size:1.5rem;text-shadow:2px 2px 0 var(--ink);pointer-events:none;animation:float-up 1.1s ease-out forwards;white-space:nowrap;z-index:10}@keyframes float-up{0%{transform:translate(-50%) scale(.5);opacity:0}15%{transform:translate(-50%,-14px) scale(1.25);opacity:1}to{transform:translate(-50%,-58px) scale(1);opacity:0}}.hud-level{display:flex;align-items:center;gap:8px}.hud-level-text{font-family:Lilita One,sans-serif;letter-spacing:.04em}.pips{display:inline-flex;gap:4px}.pip{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:transparent}.pip.on{background:var(--orange)}.hud-streak{transition:transform .2s}.streak-num{display:inline-block;animation:pop-in .3s cubic-bezier(.34,1.56,.64,1)}.hud-streak.hot{background:var(--yellow)!important;transform:scale(1.06)}.hud-streak.fire{background:var(--orange)!important;transform:scale(1.14) rotate(-2deg);box-shadow:0 6px 0 var(--ink),0 0 22px #ff8a3dcc!important;animation:flame-wiggle .5s ease-in-out infinite}.hud-streak.inferno{background:var(--pink)!important;color:#fff;transform:scale(1.22) rotate(2deg);box-shadow:0 6px 0 var(--ink),0 0 36px #ff4d8df2!important;animation:flame-wiggle .3s ease-in-out infinite}@keyframes flame-wiggle{0%,to{rotate:-2deg}50%{rotate:2deg}}.quit-btn{position:fixed;top:14px;right:78px;z-index:50;width:52px;height:52px;font-size:1.5rem;line-height:1;color:var(--ink);background:var(--paper);border:4px solid var(--ink);border-radius:50%;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s,background .15s}.quit-btn:hover{background:var(--pink);color:#fff;transform:scale(1.08) rotate(-6deg)}.quit-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}.progress{width:100%;height:26px;background:#ffffff1f;border:4px solid var(--ink);border-radius:999px;position:relative;overflow:hidden}.progress-fill{height:100%;background:repeating-linear-gradient(-45deg,var(--cyan),var(--cyan) 12px,#54e6f0 12px,#54e6f0 24px);border-radius:999px;transition:width .45s cubic-bezier(.34,1.3,.64,1)}.progress-text{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:var(--paper);text-shadow:1px 1px 0 var(--ink)}.prompt-card{background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 28px 16px;text-align:center;width:100%;max-width:480px;animation:card-enter .35s cubic-bezier(.34,1.56,.64,1);position:relative}@keyframes card-enter{0%{transform:scale(.7) rotate(-2deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.prompt-label{position:absolute;top:-16px;left:50%;transform:translate(-50%) rotate(-2deg);background:var(--purple);color:#fff;border:3px solid var(--ink);border-radius:999px;padding:2px 18px;font-family:Lilita One,sans-serif;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase}.prompt-value{font-family:Lilita One,sans-serif;font-size:clamp(1.7rem,5.5vw,2.6rem);margin:12px 0 4px}.instruction{margin:6px 0 0;font-weight:700;opacity:.65;font-size:1rem}.flag{display:block;border:3px solid var(--ink);border-radius:8px;width:72px;box-shadow:2px 3px #00000040}.flag-large{width:min(240px,60vw);margin:14px auto 6px;border-width:4px;border-radius:12px}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}.option{background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:1.1rem;transition:transform .13s,box-shadow .13s,background .2s;animation:card-enter .3s cubic-bezier(.34,1.56,.64,1) backwards}.options-grid .option:nth-child(2){animation-delay:.05s}.options-grid .option:nth-child(3){animation-delay:.1s}.options-grid .option:nth-child(4){animation-delay:.15s}.option:hover:not(:disabled){transform:translateY(-3px) rotate(-.5deg);box-shadow:0 9px 0 var(--ink);background:var(--paper2)}.option:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}.opt-land{font-weight:800;font-size:1.15rem;line-height:1.15}.opt-cap{font-weight:600;opacity:.75;line-height:1.15}.option.chosen{background:var(--cyan);transform:scale(1.02);box-shadow:0 6px 0 var(--ink),0 0 18px #27d9e599}.option.correct{background:var(--lime);animation:correct-pulse .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 0 var(--ink),0 0 26px #8ed927cc}@keyframes correct-pulse{0%{transform:scale(1)}40%{transform:scale(1.09) rotate(1deg)}to{transform:scale(1.02)}}.option.wrong{background:var(--red);color:#fff;animation:wrong-shake .45s}.option.wrong .opt-cap{opacity:.9}@keyframes wrong-shake{0%,to{transform:translate(0)}20%{transform:translate(-8px) rotate(-1.5deg)}40%{transform:translate(8px) rotate(1.5deg)}60%{transform:translate(-6px)}80%{transform:translate(5px)}}.option.dim{opacity:.45}.option:disabled{cursor:default}.shake{animation:screen-shake .45s}@keyframes screen-shake{0%,to{transform:translate(0)}15%{transform:translate(-10px,3px)}30%{transform:translate(9px,-3px)}45%{transform:translate(-7px,2px)}60%{transform:translate(6px,-2px)}75%{transform:translate(-4px,1px)}90%{transform:translate(3px)}}.hard-groups{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}.hard-group{display:flex;flex-direction:column;gap:10px}.hard-group .option{flex-direction:row;justify-content:center;padding:10px 12px}.group-label{font-family:Lilita One,sans-serif;color:var(--paper);text-shadow:2px 2px 0 var(--ink);letter-spacing:.1em;font-size:1.1rem;margin:0;text-align:center;text-transform:uppercase}.game-footer{min-height:92px;display:flex;flex-direction:column;align-items:center;gap:10px}.facit{color:var(--paper);font-size:1.1rem;font-weight:600;margin:0;background:#0000004d;padding:8px 20px;border-radius:999px;animation:pop-in .3s ease-out}.facit strong{color:var(--yellow)}.next-btn{background:var(--cyan);font-size:1.3rem;padding:10px 38px}.cheer{font-family:Lilita One,sans-serif;font-size:2rem;color:var(--yellow);text-shadow:3px 3px 0 var(--ink);margin:0;animation:cheer-jump .6s cubic-bezier(.34,1.56,.64,1)}@keyframes cheer-jump{0%{transform:scale(.3) rotate(-8deg);opacity:0}60%{transform:scale(1.2) rotate(3deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes pop-in{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.level-banner{position:fixed;inset:0;z-index:40;display:grid;place-content:center;gap:4px;text-align:center;background:#1b1140d1;animation:banner-fade 1.5s ease forwards;pointer-events:none}.level-banner-num{font-family:Lilita One,sans-serif;font-size:clamp(3rem,11vw,5.5rem);color:var(--yellow);text-shadow:5px 5px 0 var(--ink);animation:banner-zoom 1.5s cubic-bezier(.34,1.56,.64,1)}.level-banner-name{font-family:Lilita One,sans-serif;font-size:clamp(1.2rem,4vw,1.8rem);color:var(--cyan);text-shadow:3px 3px 0 var(--ink);letter-spacing:.2em}@keyframes banner-zoom{0%{transform:scale(.2) rotate(-6deg)}35%{transform:scale(1.15) rotate(1deg)}50%{transform:scale(1)}}@keyframes banner-fade{0%,70%{opacity:1}to{opacity:0}}.quit-overlay{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;background:#1b1140d1;animation:pop-in .18s ease-out}.quit-dialog{background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px;text-align:center;max-width:380px;width:100%;animation:card-enter .32s cubic-bezier(.34,1.56,.64,1)}.quit-title{font-family:Lilita One,sans-serif;font-size:1.7rem;margin:0 0 6px}.quit-text{font-weight:600;opacity:.7;margin:0 0 18px}.quit-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.quit-actions .big-btn{font-size:1.2rem;padding:10px 28px}.quit-confirm-btn{background:var(--pink);color:#fff;text-shadow:2px 2px 0 var(--ink)}.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}.confetti-piece{position:absolute;top:18%;width:12px;height:12px;animation:confetti-fall ease-out forwards}@keyframes confetti-fall{0%{transform:translate(0) rotate(0) scale(1);opacity:1}to{transform:translate(var(--dx),70vh) rotate(var(--rot)) scale(.7);opacity:0}}.result-screen{justify-content:center;gap:14px;text-align:center}.result-emoji{font-size:4rem;animation:cheer-jump .7s cubic-bezier(.34,1.56,.64,1)}.result-title{font-family:Lilita One,sans-serif;font-size:clamp(2rem,8vw,3.6rem);color:var(--yellow);text-shadow:4px 4px 0 var(--ink);margin:0;animation:banner-zoom .8s cubic-bezier(.34,1.56,.64,1)}.record-badge{background:var(--pink);color:#fff;border:4px solid var(--ink);border-radius:999px;padding:6px 24px;font-family:Lilita One,sans-serif;font-size:1.2rem;letter-spacing:.06em;box-shadow:var(--shadow);animation:flame-wiggle .4s ease-in-out infinite,pop-in .4s ease-out}.result-score{font-family:Lilita One,sans-serif;font-size:clamp(1.8rem,6vw,2.6rem);color:var(--paper);text-shadow:3px 3px 0 var(--ink)}.stats{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.stat{background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 24px;display:flex;flex-direction:column;gap:2px;min-width:120px;animation:card-enter .4s cubic-bezier(.34,1.56,.64,1) backwards}.stats .stat:nth-child(2){animation-delay:.08s}.stats .stat:nth-child(3){animation-delay:.16s}.stat-value{font-family:Lilita One,sans-serif;font-size:1.5rem}.stat-label{font-weight:700;font-size:.85rem;opacity:.6;text-transform:uppercase;letter-spacing:.06em}.result-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px}.menu-btn{background:var(--paper)}@media(max-width:560px){.hud>div{padding:4px 10px;font-size:1rem}.options-grid,.hard-groups{grid-template-columns:1fr}.floater .flag{width:40px}.mode-picker{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}