:root{--bg:#f4f5f8;--fg:#15171c;--muted:#6b7280;--card:#fff;--accent:#2563eb;--accent-fg:#fff;--accent-soft:#2563eb1f;--ok:#16a34a;--bad:#dc2626;--shadow:0 1px 2px #0000000f, 0 8px 24px #00000014}@media (prefers-color-scheme:dark){:root{--bg:#0f1115;--fg:#eceef2;--muted:#9aa1ac;--card:#1b1e25;--accent:#3b82f6;--accent-soft:#3b82f633;--ok:#22c55e;--bad:#f87171;--shadow:0 1px 2px #0006, 0 8px 24px #0006}}*{box-sizing:border-box}html,body{height:100%}body{background:var(--bg);color:var(--fg);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-tap-highlight-color:transparent;flex-direction:column;margin:0;font:17px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex}button,input,select{font:inherit;color:inherit}.bar{justify-content:space-between;align-items:center;min-height:56px;padding:12px 16px;display:flex}.score{font-variant-numeric:tabular-nums;color:var(--ok);font-size:22px;font-weight:700}.settings{background:var(--card);color:var(--fg);box-shadow:var(--shadow);border:none;border-radius:18px;margin:64px 16px auto auto;padding:8px}.settings::backdrop{background:#0003}.setting{align-items:center;gap:10px;padding:4px 8px;display:flex}.setting-icon svg{width:22px;height:22px;display:block}.setting select{background:var(--bg);cursor:pointer;border:none;border-radius:10px;padding:8px 10px}.stage{flex:1;place-items:center;padding:16px;display:grid}.icon-button{background:var(--card);width:52px;height:52px;box-shadow:var(--shadow);cursor:pointer;border:none;border-radius:50%;flex:none;place-items:center;transition:transform .15s;display:grid}.icon-button:hover{transform:scale(1.06)}.icon-button:active{transform:scale(.96)}.icon-button:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}.icon-button svg{width:22px;height:22px}.icon-button.primary{background:var(--accent);color:var(--accent-fg)}.icon-button.large{width:112px;height:112px}.icon-button.large svg,.icon-button.small{width:44px;height:44px}.round{flex-direction:column;align-items:center;gap:24px;width:min(100%,440px);animation:.25s appear;display:flex}.visual{flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;display:flex}.pie svg{filter:drop-shadow(0 6px 16px #00000026);width:min(78vw,44vh,340px);height:auto;display:block}.flag{width:min(60vw,30vh,220px);height:auto;box-shadow:var(--shadow);border-radius:6px;animation:.35s appear;display:block}.round.done{gap:18px}.round.done .visual{flex-wrap:nowrap;gap:14px}.round.done .pie svg{width:min(40vw,28vh,240px)}.round.done .flag{width:min(46vw,28vh,260px)}.field{gap:10px;width:100%;display:flex;position:relative}.field input{background:var(--card);min-width:0;height:52px;box-shadow:var(--shadow);border:2px solid #0000;border-radius:999px;outline:none;flex:1;padding:0 20px;font-size:18px}.field input:focus{border-color:var(--accent)}.suggestions{z-index:1;background:var(--card);box-shadow:var(--shadow);border-radius:18px;margin:0;padding:6px;list-style:none;position:absolute;top:calc(100% + 8px);left:0;right:62px}.suggestions:empty{display:none}.suggestions li{cursor:pointer;border-radius:12px;padding:10px 14px}.suggestions li.active{background:var(--accent-soft)}.result{text-align:center;flex-direction:column;align-items:center;gap:4px;display:flex}.result .answer{align-items:center;gap:10px;font-size:24px;font-weight:650;display:flex}.result .mark{color:#fff;border-radius:50%;place-items:center;width:32px;height:32px;font-size:18px;display:grid}.result.ok .mark{background:var(--ok)}.result.bad .mark{background:var(--bad)}.misses{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:4px 14px;display:flex}.start{flex-direction:column;align-items:center;gap:28px;display:flex}.modes{background:var(--card);box-shadow:var(--shadow);border-radius:999px;gap:4px;padding:4px;display:flex}.mode{width:72px;height:44px;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:999px;place-items:center;display:grid}.mode[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}.mode:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}.icon svg{width:24px;height:24px;display:block}.best{color:var(--muted);font-variant-numeric:tabular-nums;align-items:center;gap:6px;font-weight:650;display:flex}.best .icon svg{width:20px;height:20px}.best.new{color:#d4a017;animation:.6s pop}.gameover{flex-direction:column;align-items:center;gap:4px;display:flex}.gameover .final{font-variant-numeric:tabular-nums;font-size:56px;font-weight:800;line-height:1}@keyframes pop{40%{transform:scale(1.35)}}.hint{flex-wrap:wrap;justify-content:center;gap:8px 18px;animation:.25s appear;display:flex}.hint .word{gap:4px;display:flex}.hint .slot{text-align:center;border-bottom:3px solid;width:.95em;height:1.4em;font-size:22px;font-weight:700;line-height:1.4}.hint .mark-char{font-size:22px;font-weight:700;line-height:1.4}.shake{animation:.35s shake}@keyframes shake{20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}@keyframes appear{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}:root{--ad-height:50px}body{padding-bottom:calc(env(safe-area-inset-bottom) + var(--ad-height))}.ad-banner{height:calc(var(--ad-height) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--card);place-items:center;display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -1px #00000014}.ad-placeholder{border:1px dashed var(--muted);opacity:.4;border-radius:6px;width:320px;max-width:100%;height:50px}
