:root{--bg: #f4fafa;--ink: #12313a;--muted: #4b6a73;--brand: #0f3d4a;--accent: #1b8a9a;--card: #fff;--ok: #1d7a46;--soft: #e1f0f2;--hint: #8a5a00;--line: #c5dde0}*{box-sizing:border-box}body{margin:0;font:18px/1.5 system-ui,sans-serif;background:var(--bg);color:var(--ink)}main{max-width:640px;margin:0 auto;padding:16px 16px 48px}h1{font-size:1.6rem;margin:.4em 0;color:var(--brand)}h2{font-size:1.25rem;color:var(--brand)}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:12px 0}button,.btn{font:inherit;min-height:52px;padding:10px 18px;border-radius:12px;border:2px solid var(--brand);background:var(--card);color:var(--brand);cursor:pointer}button.primary{background:var(--brand);color:#fff}button.big{width:100%;margin:6px 0;min-height:60px;font-size:1.1rem}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid #ffb703;outline-offset:2px}input,select{font:inherit;width:100%;min-height:52px;padding:8px 12px;border-radius:10px;border:2px solid var(--line);background:#fff}label{display:block;margin:10px 0 4px;font-weight:600}.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}.muted{color:var(--muted);font-size:.95rem}.err{color:#8a1c1c;background:#fdeeee;border-radius:10px;padding:8px 12px}.note{background:var(--soft);border-radius:10px;padding:10px 14px}.word{font-size:2rem;text-align:center;font-weight:700;margin:16px 0}.feedback{border-radius:12px;padding:12px 16px;margin:12px 0;background:var(--soft)}.feedback.good{background:#e3f4e9;color:var(--ok)}.feedback.info{background:#fff4dd;color:var(--hint)}.flag{background:#fff4dd}table{width:100%;border-collapse:collapse}td{padding:4px;vertical-align:top}.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.tile{min-height:72px;font-size:1.1rem}.tile.found{background:#e3f4e9;border-color:var(--ok)}.tile.sel{background:var(--soft)}.progress{height:10px;background:var(--soft);border-radius:6px;overflow:hidden;margin:8px 0 16px}.progress>div{height:100%;background:var(--accent)}.world{display:flex;gap:12px;flex-wrap:wrap}.deco{width:120px;text-align:center;padding:10px;border-radius:12px;background:var(--soft)}.deco.locked{opacity:.45}@media (prefers-reduced-motion: no-preference){.card{transition:box-shadow .2s}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
