:root{color-scheme:dark;--bg: #0c0d12;--bg-soft: #14161d;--bg-card: #191c25;--text: #f2f4f9;--muted: #949cb0;--line: #262a36;--glow: #15181f;--accent: #6aaa64;--correct: #6aaa64;--present: #c9b458;--absent: #3a3f4b;--key: #565f7a;--bad: #ff6b6b;--radius: 18px;--shadow: 0 16px 40px rgba(0, 0, 0, .5)}:root[data-theme=classic]{--bg: #12141c;--bg-soft: #1b1e2b;--bg-card: #21273a;--text: #eef1f7;--muted: #9aa3b8;--line: #2e3550;--glow: #1d2233;--shadow: 0 10px 30px rgba(0, 0, 0, .4);--accent: #6aaa64;--absent: #3a3f52;--key: #5b6488}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}html,body{margin:0;min-height:100%;background:radial-gradient(1100px 700px at 50% -20%,var(--glow),var(--bg));color:var(--text);font-family:Segoe UI,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}body{min-height:100dvh}button,a{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}#app{max-width:520px;margin:0 auto;padding:16px 14px 24px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));padding-bottom:max(24px,env(safe-area-inset-bottom));padding-top:max(16px,env(safe-area-inset-top));display:flex;flex-direction:column;min-height:100dvh}button{font-family:inherit}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.back{color:var(--muted);text-decoration:none;font-size:.95rem;padding:8px 12px;border-radius:10px;border:1px solid var(--line);transition:background .15s}@media(hover:hover){.back:hover{background:var(--bg-soft)}}.topbar-btns{display:flex;gap:8px}.icon-btn{background:var(--bg-soft);border:1px solid var(--line);color:var(--text);width:42px;height:42px;border-radius:10px;font-size:1.05rem;cursor:pointer;transition:transform .08s,filter .12s,border-color .12s}@media(hover:hover){.icon-btn:hover{border-color:var(--accent)}}.icon-btn:active{transform:scale(.9)}.title{font-size:1.4rem;font-weight:900;margin:0}.board{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;flex:1;padding:14px 0}.row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;perspective:900px}.tile{width:60px;height:60px;display:grid;place-items:center;font-size:2rem;font-weight:800;text-transform:uppercase;color:var(--text);border:2px solid var(--line);background:transparent;border-radius:6px;transition:border-color .1s}.tile.filled{border-color:var(--key)}.tile.pop{animation:pop .12s ease}.tile.reveal{animation:flip .5s ease forwards;transform-origin:center;will-change:transform}.tile.correct{background:var(--correct);border-color:var(--correct);color:#fff}.tile.present{background:var(--present);border-color:var(--present);color:#fff}.tile.absent{background:var(--absent);border-color:var(--absent);color:#fff}.tile.bounce{animation:bounce .5s ease}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}@keyframes bounce{0%,to{transform:translateY(0)}40%{transform:translateY(-22px)}70%{transform:translateY(-6px)}}.row.shake{animation:shake .5s ease}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-8px)}40%,60%{transform:translate(8px)}}.keyboard{display:flex;flex-direction:column;gap:7px;margin-top:4px}.krow{display:flex;gap:5px;justify-content:center}.key{flex:1;min-width:0;height:54px;max-width:44px;border:none;border-radius:7px;background:var(--key);color:#fff;font-size:1rem;font-weight:700;text-transform:uppercase;cursor:pointer;transition:transform .06s,filter .12s,background .15s}.key.wide{max-width:68px;font-size:.78rem}@media(hover:hover){.key:hover{filter:brightness(1.12)}}.key:active{transform:scale(.92)}.key.correct{background:var(--correct)}.key.present{background:var(--present)}.key.absent{background:var(--absent)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0c12d1;display:grid;place-items:center;padding:20px;overflow:auto;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}.overlay.show{opacity:1;pointer-events:auto}.modal{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-align:center;max-width:380px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow);transform:translateY(10px) scale(.98);transition:transform .2s}.overlay.show .modal{transform:translateY(0) scale(1)}.modal h2{margin:0 0 6px;font-size:1.8rem}.modal .sub{color:var(--muted);margin:0 0 4px}.modal .sub b{color:var(--text);letter-spacing:2px}.modal .newbest{color:var(--accent);font-weight:800;margin:8px 0 0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 6px}.stats-grid div{display:flex;flex-direction:column}.stats-grid b{font-size:1.7rem;font-weight:800}.stats-grid span{font-size:.62rem;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}.dist-title{margin-top:16px;text-transform:uppercase;letter-spacing:1px;font-size:.68rem;font-weight:700}.dist{display:flex;flex-direction:column;gap:5px;margin-top:6px}.dist-row{display:flex;align-items:center;gap:8px}.dist-k{width:12px;font-weight:700;color:var(--muted)}.dist-bar{flex:1;display:flex}.dist-bar span{background:var(--accent);color:#0f1420;font-weight:800;font-size:.8rem;padding:3px 8px;border-radius:5px;text-align:right;min-width:26px;transition:width .3s ease}.row-btns{display:flex;gap:10px;margin-top:20px}.btn{flex:1;border:none;background:var(--accent);color:#fff;font-weight:800;font-size:1rem;padding:13px 20px;border-radius:12px;cursor:pointer;transition:transform .1s,filter .12s}@media(hover:hover){.btn:hover{filter:brightness(1.08)}}.btn:active{transform:scale(.97)}.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}.toast{position:fixed;left:50%;top:84px;transform:translate(-50%) translateY(-14px);background:var(--text);color:var(--bg);padding:12px 22px;border-radius:10px;font-weight:700;box-shadow:var(--shadow);opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;z-index:70}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:380px){.tile{width:52px;height:52px;font-size:1.7rem}.key{height:50px}}