:root{--bg:#fff8ec;--surface:#fff;--ink:#2b2140;--ink-soft:#6b6280;--primary:#ff6b3d;--primary-shadow:#d14a1f;--accent:#5b4bdb;--good:#1fa463;--good-soft:#e3f7ec;--bad:#e5484d;--bad-soft:#fdecec;--line:#ece4d6;--radius:18px;--shadow:0 6px 0 var(--line);--tab-bar-height:68px;--tab-bar-gap:16px;--tab-bar-padding:6px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;font-family:Nunito,ui-rounded,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body:before{content:"";z-index:-1;pointer-events:none;background:linear-gradient(var(--bg), transparent 96px), linear-gradient(to top, var(--bg), transparent 96px), radial-gradient(circle at 10% 0%, #ffe3c2 0, transparent 40%), radial-gradient(circle at 100% 100%, #e4defe 0, transparent 45%), var(--bg);position:fixed;inset:0}button{font:inherit;color:inherit}img{max-width:100%;display:block}.app{min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));justify-content:center;display:flex}.screen{flex-direction:column;gap:16px;width:100%;max-width:480px;animation:.35s ease-out enter;display:flex}.spacer{flex:1}.screen-action{margin-top:auto;margin-bottom:8px}.title{text-align:center;margin:0;font-family:Fredoka,Nunito,ui-rounded,system-ui,sans-serif;font-size:clamp(2.5rem,12vw,3.5rem);font-weight:700;line-height:1}.title-accent{color:var(--primary)}.subtitle{text-align:center;color:var(--ink-soft);margin:0;font-size:1.05rem;line-height:1.5}.btn{appearance:none;border:2px solid var(--line);background:var(--surface);border-radius:var(--radius);cursor:pointer;min-height:56px;box-shadow:var(--shadow);touch-action:manipulation;-webkit-user-select:none;user-select:none;padding:14px 18px;font-size:1.05rem;font-weight:800;transition:transform 80ms,box-shadow 80ms,background .2s,border-color .2s}.btn:active:not(:disabled){box-shadow:0 2px 0 var(--line);transform:translateY(4px)}.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 6px 0 var(--primary-shadow)}.btn-primary:active:not(:disabled){box-shadow:0 2px 0 var(--primary-shadow)}.btn-big{letter-spacing:.02em;min-height:58px;font-size:1.15rem}.btn-ghost{box-shadow:none;color:var(--ink-soft);background:0 0;border-color:#0000}.icon-btn{appearance:none;width:44px;height:44px;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;border-radius:50%;flex-shrink:0;font-size:1.25rem}.app-with-tabs{padding-bottom:calc(var(--tab-bar-height) + 2 * var(--tab-bar-gap) + env(safe-area-inset-bottom))}.tab-bar{left:50%;bottom:calc(var(--tab-bar-gap) + env(safe-area-inset-bottom));z-index:10;width:min(360px, calc(100% - 2 * var(--tab-bar-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)));padding:var(--tab-bar-padding);-webkit-backdrop-filter:blur(20px)saturate(180%);backdrop-filter:blur(20px)saturate(180%);touch-action:none;-webkit-user-select:none;user-select:none;background:#ffffff8c;border:1px solid #ffffffb3;border-radius:999px;display:flex;position:fixed;transform:translate(-50%);box-shadow:inset 0 1px #fffc,0 10px 30px #2b214024,0 2px 6px #2b214014}.tab{appearance:none;height:calc(var(--tab-bar-height) - 2 * var(--tab-bar-padding));color:var(--ink-soft);cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:999px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:.75rem;font-weight:800;transition:color .2s;display:flex;position:relative}.tab-indicator{top:var(--tab-bar-padding);bottom:var(--tab-bar-padding);left:var(--tab-bar-padding);width:calc((100% - 2 * var(--tab-bar-padding)) / var(--tab-count));transform:translateX(calc(var(--active-tab) * 100%));background:#ffffffbf;border-radius:999px;transition:transform .35s cubic-bezier(.34,1.4,.64,1),scale .2s ease-out;position:absolute;box-shadow:0 2px 8px #2b214014}.tab-bar.is-dragging .tab-indicator{background:#ffffffe6;transition:none;scale:1.06}@media (prefers-reduced-motion:reduce){.tab-indicator{transition:none}}.tab svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}.tab .tab-fill{stroke:none;fill:#0000}.tab.is-active{color:var(--primary)}.tab.is-active svg{transform:translateY(-1px)scale(1.08)}.tab.is-active .tab-fill{fill:currentColor;opacity:.2}.tab:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.start,.play{text-align:center}.settings-btn{align-self:flex-end;place-items:center;display:grid}.start-hero{height:180px;margin:0 0 8px;position:relative}.hero-flag{border:4px solid #fff;border-radius:10px;width:140px;animation:4s ease-in-out infinite float;position:absolute;top:50%;left:50%;box-shadow:0 8px 20px #2b214026}.hero-flag-0{transform:translate(-110%,-60%)rotate(-12deg)}.hero-flag-1{z-index:1;animation-delay:-1.3s;transform:translate(-50%,-40%)rotate(3deg)}.hero-flag-2{animation-delay:-2.6s;transform:translate(10%,-65%)rotate(12deg)}.modes{grid-template-columns:1fr;gap:12px;display:grid}.step-back{align-self:flex-start;align-items:center;gap:2px;min-height:44px;margin:-8px 0;padding:8px 4px;font-size:.95rem;display:inline-flex}.step-back-chevron{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.section{flex-direction:column;gap:12px;margin:0;display:flex}.section+.section{margin-top:16px}.section-heading{margin:0;font-size:1rem;font-weight:800}.levels{grid-template-columns:1fr 1fr;gap:12px;display:grid}.level-count{opacity:.75;font-size:.8rem;font-weight:600}.choice-group{border:0;min-width:0;padding:0}.choice-group legend{margin:0 auto 12px;padding:0}.option-card{border:2px solid var(--line);border-radius:var(--radius);background:var(--surface);min-height:72px;box-shadow:var(--shadow);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:14px 18px;font-size:1.05rem;font-weight:800;transition:transform 80ms,box-shadow 80ms,background .2s,border-color .2s;display:flex;position:relative}.option-card-wide{grid-column:1/-1}.option-card:active{box-shadow:0 2px 0 var(--line);transform:translateY(4px)}.option-card input{opacity:0;pointer-events:none;position:absolute}.option-radio{border:2px solid var(--line);background:var(--surface);border-radius:50%;width:18px;height:18px;transition:border-color .2s,box-shadow .2s;position:absolute;top:10px;right:10px}.option-card:has(input:checked){border-color:var(--primary);color:var(--primary-shadow);box-shadow:0 6px 0 var(--primary);background:#fff1ea}.option-card:has(input:checked):active{box-shadow:0 2px 0 var(--primary)}.option-card:has(input:checked) .option-radio{border-color:var(--primary);box-shadow:inset 0 0 0 3px var(--surface), inset 0 0 0 9px var(--primary)}.option-card:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}.choice-group legend h1{font:inherit;margin:0}.segmented{border:2px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:999px;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;display:grid}.segment{min-height:44px;color:var(--ink-soft);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;border-radius:999px;place-items:center;font-size:1.05rem;font-weight:800;transition:background .2s,color .2s,transform 80ms;display:grid;position:relative}.segment:active{transform:scale(.95)}.segment input{opacity:0;pointer-events:none;position:absolute}.segment:has(input:checked){background:var(--primary);color:#fff}.segment:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}.toggle{text-align:left;color:var(--ink);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:12px;font-size:1rem;font-weight:700;display:flex}.toggle span{flex:1}.toggle input{appearance:none;cursor:pointer;background:#5b4bdb33;border-radius:999px;flex-shrink:0;width:52px;height:32px;margin:0;transition:background .2s;position:relative;box-shadow:inset 0 2px 3px #2b21401f}.toggle input:after{content:"";background:#fff;border-radius:999px;width:26px;height:26px;transition:left .3s cubic-bezier(.34,1.5,.64,1),width .15s;position:absolute;top:3px;left:3px;box-shadow:0 2px 4px #2b214033}.toggle input:checked{background:var(--accent)}.toggle input:checked:after{left:calc(100% - 29px)}.toggle input:active:after{width:32px}.toggle input:checked:active:after{left:calc(100% - 35px)}.toggle input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.page-title{margin:0;font-family:Fredoka,Nunito,ui-rounded,system-ui,sans-serif;font-size:2rem;font-weight:700}.topbar{align-items:center;gap:8px;display:flex}.progress{background:var(--line);border-radius:999px;flex:1;height:14px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--primary), #ffb03d);border-radius:inherit;height:100%;transition:width .4s}.counter{color:var(--ink-soft);text-align:right;min-width:2.5em;font-weight:800}.prompt{text-align:center;margin:0;font-family:Fredoka,Nunito,sans-serif;font-size:1.35rem;font-weight:600}.flag-card{background:var(--surface);border:2px solid var(--line);border-radius:calc(var(--radius) + 6px);box-shadow:var(--shadow);justify-content:center;padding:16px;display:flex}.flag-img{object-fit:contain;filter:drop-shadow(0 0 1px #2b214059);border-radius:6px;width:100%;max-height:34vh}.options{grid-template-columns:1fr;gap:12px;display:grid}.option{text-align:left;line-height:1.25}.options-flags{grid-template-columns:1fr 1fr}.option-flag{justify-content:center;align-items:center;padding:24px;display:flex}.option-flag img{aspect-ratio:3/2;object-fit:contain;filter:drop-shadow(0 0 1px #2b214059);width:100%}.country-name{text-align:center;overflow-wrap:anywhere;justify-content:center;align-items:center;min-height:5.5rem;margin:0;font-family:Fredoka,Nunito,sans-serif;font-size:2rem;font-weight:600;line-height:1.15;display:flex}.option.is-correct{background:var(--good-soft);border-color:var(--good);color:var(--good);box-shadow:0 6px 0 var(--good)}.option.is-wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);box-shadow:0 6px 0 var(--bad)}.option.is-dimmed{opacity:.45}.option:disabled{cursor:default}.name-answer{position:relative}.name-input{border:2px solid var(--line);border-radius:var(--radius);background:var(--surface);width:100%;min-height:56px;box-shadow:var(--shadow);font:inherit;color:var(--ink);padding:14px 18px;font-size:1.05rem;font-weight:800}.name-input::placeholder{color:var(--ink-soft);font-weight:600}.name-input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.name-input.is-correct{background:var(--good-soft);border-color:var(--good);color:var(--good);box-shadow:0 6px 0 var(--good)}.name-input.is-wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);box-shadow:0 6px 0 var(--bad)}.name-input:disabled{opacity:1;-webkit-text-fill-color:currentColor}.suggestions{z-index:2;border:2px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:6px;position:absolute;bottom:calc(100% + 8px);left:0;right:0;box-shadow:0 8px 24px #2b214026}.suggestions ul{margin:0;padding:0;list-style:none}.suggestion{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:12px;padding:12px 14px;font-weight:700}.suggestion.is-active{background:var(--accent);color:#fff}.suggestions-empty{color:var(--ink-soft);margin:0;padding:12px 14px}.feedback{margin:0 -16px calc(-1 * max(16px, env(safe-area-inset-bottom)));padding:20px 16px max(20px, env(safe-area-inset-bottom));border-radius:24px 24px 0 0;flex-direction:column;gap:12px;animation:.3s ease-out sheet;display:flex;position:sticky;bottom:0;box-shadow:0 -8px 24px #2b21401f}.feedback-good{background:var(--good-soft)}.feedback-bad{background:var(--bad-soft)}.feedback-title{margin:0;font-family:Fredoka,Nunito,sans-serif;font-size:1.35rem;font-weight:700}.feedback-good .feedback-title{color:var(--good)}.feedback-bad .feedback-title{color:var(--bad)}.feedback-fact{margin:0;line-height:1.5}.result{text-align:center}.result-emoji{margin-top:32px;font-size:5rem;animation:.5s ease-out pop}.stars{justify-content:center;gap:8px;font-size:2.5rem;display:flex}.star{color:var(--line)}.star-on{color:#ffc53d;text-shadow:0 3px #e0a21a}.pop{animation:.4s ease-out pop}.shake{animation:.4s ease-in-out shake}.update-toast{top:max(12px, env(safe-area-inset-top));z-index:10;background:var(--surface);border:2px solid var(--line);border-radius:var(--radius);align-items:center;gap:12px;width:min(100% - 32px,480px);margin:0 auto;padding:12px 6px 16px 18px;animation:.3s ease-out enter;display:flex;position:fixed;left:0;right:0;box-shadow:0 8px 24px #2b21401f}.update-text{text-wrap:balance;flex:1;font-weight:800;line-height:1.25}.update-btn{min-height:44px;box-shadow:0 4px 0 var(--primary-shadow);border-radius:999px;padding:8px 18px;font-size:1rem}.update-toast .icon-btn{margin-left:-8px}@keyframes enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes sheet{0%{transform:translateY(100%)}to{transform:none}}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}@keyframes float{50%{margin-top:-8px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (width>=560px){.app{padding-top:48px}.app:not(.app-with-tabs){padding-bottom:48px}.options{grid-template-columns:1fr 1fr}.feedback{border-radius:var(--radius);margin:0;padding:20px;position:static}.hero-flag{width:170px}.start-hero{height:220px}}.settings-status{text-align:center;margin:0;font-weight:600}.settings-list{padding:0;list-style:none;overflow:hidden}.settings-list li+li{border-top:2px solid var(--line)}.settings-row{appearance:none;width:100%;min-height:56px;font:inherit;color:var(--ink);text-align:left;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:0 0;border:0;align-items:center;gap:8px;padding:14px 18px;font-size:1.05rem;font-weight:800;transition:background .15s;display:flex}.settings-row:active{background:#5b4bdb0f}.settings-row:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.settings-row-value{color:var(--ink-soft);margin-left:auto;font-weight:600}.settings-row-chevron{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-soft);flex-shrink:0;margin-left:auto}.settings-row-value+.settings-row-chevron{margin-left:0}.stats-card{border:2px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);margin:0}.stat-tiles{grid-template-columns:1fr 1fr;gap:12px;margin:0;display:grid}.stat-tile{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:14px 10px;display:flex}.stat-tile dd{margin:0}.stat-label{color:var(--ink-soft);font-size:.85rem;font-weight:700}.stat-value{color:var(--primary);font-family:Fredoka,Nunito,ui-rounded,system-ui,sans-serif;font-size:2rem;font-weight:700;line-height:1.1}.stat-detail{color:var(--ink-soft);font-size:.8rem;font-weight:600}.accuracy-list,.practice-list{padding:6px 16px;list-style:none}.accuracy-row{grid-template-columns:5.5em 1fr 3em;align-items:center;gap:12px;min-height:40px;font-weight:700;display:grid}.accuracy-label{text-overflow:ellipsis;overflow:hidden}.accuracy-bar{background:var(--line);border-radius:999px;height:12px;overflow:hidden}.accuracy-fill{border-radius:inherit;background:linear-gradient(90deg, var(--primary), #ffb03d);height:100%;display:block}.accuracy-value{text-align:right;font-variant-numeric:tabular-nums}.practice-row{align-items:center;gap:12px;padding:10px 0;display:flex}.practice-row+.practice-row{border-top:2px solid var(--line)}.practice-flag{filter:drop-shadow(0 0 1px #2b214059);border-radius:4px;flex-shrink:0;width:52px}.practice-text{flex-direction:column;min-width:0;display:flex}.practice-name{font-weight:800}.practice-detail{color:var(--ink-soft);font-size:.85rem;font-weight:600}
