:root{--bg:#0f0f13;--surface:#1c1c22;--text:#e7e7ea;--text-dim:#8b8b93;--correct:#22c55e;--present:#eab308;--absent:#3f3f46;--key:#55555e;--border:#3a3a42;--accent:#22c55e}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body,html{height:100%;overscroll-behavior:none}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;justify-content:center}.app,body{display:flex}.app{width:100%;max-width:500px;height:100dvh;flex-direction:column;padding:0 8px}.header{justify-content:space-between;padding:10px 4px;border-bottom:1px solid var(--border)}.header,.logo{display:flex;align-items:center}.logo{gap:5px;font-size:24px;font-weight:800;letter-spacing:2px;line-height:1}.logo .dot{color:var(--accent)}.logo-tile{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--correct);color:#08210f;border-radius:6px;font-size:18px;font-weight:800;line-height:1;transform-origin:center;transition:transform .25s ease}.logo-tile.dev{font-size:16px;padding-top:2px}.logo-tile.flip{transform:rotateX(90deg)}@media (prefers-reduced-motion:reduce){.logo-tile{transition:none}}.tagline{font-size:11px;color:var(--text-dim)}.header-btns{display:flex;gap:8px}.icon-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 10px;font-size:15px;cursor:pointer}.clue-bar{flex-shrink:0;text-align:center;padding:0 12px 14px;font-size:14px;color:var(--text);line-height:1.4}.clue-label{display:inline-block;background:var(--surface);border:1px solid var(--present);color:var(--present);border-radius:999px;padding:1px 10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-right:6px;vertical-align:1px}.board-wrap{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding-top:12px}.board{grid-template-rows:repeat(6,1fr);grid-gap:6px;height:min(100%,420px);aspect-ratio:5/6;padding:8px 0}.board,.row{display:grid;gap:6px}.row{grid-template-columns:repeat(5,1fr);grid-gap:6px}.row.shake{animation:shake .4s}.tile{display:flex;align-items:center;justify-content:center;font-size:clamp(18px,6vw,30px);font-weight:800;text-transform:uppercase;border:2px solid var(--border);border-radius:6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:transform .08s}.tile.tbd{border-color:var(--text-dim);animation:pop .1s}.tile.correct{background:var(--correct);border-color:var(--correct);color:#08210f}.tile.present{background:var(--present);border-color:var(--present);color:#241c02}.tile.absent{background:var(--absent);border-color:var(--absent);color:var(--text-dim)}.tile.reveal{animation:flip .45s ease forwards}@keyframes pop{50%{transform:scale(1.1)}}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}.keyboard{padding:6px 0 max(10px,env(safe-area-inset-bottom))}.kb-row{gap:5px;margin-bottom:6px}.hint-bar,.kb-row{display:flex;justify-content:center}.hint-bar{padding:4px 0 8px}.hint-btn{border:1px solid var(--present);color:var(--present);border-radius:999px;font-size:13px;font-weight:700;cursor:pointer}.hint-btn,.hint-text{background:var(--surface);padding:8px 18px}.hint-text{font-size:14px;border:1px solid var(--border);border-radius:999px}.hint-text,.key{color:var(--text)}.key{flex:1 1;max-width:42px;height:52px;border:none;border-radius:6px;background:var(--key);font-size:15px;font-weight:700;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.key.wide{max-width:64px;flex:1.6 1;font-size:12px}.key.correct{background:var(--correct);color:#08210f}.key.present{background:var(--present);color:#241c02}.key.absent{background:#26262c;color:var(--text-dim)}.toast{position:fixed;top:12%;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:8px;font-weight:700;font-size:14px;z-index:50;animation:fadein .15s}@keyframes fadein{0%{opacity:0}to{opacity:1}}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:40;padding:16px}.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;width:100%;max-width:380px;text-align:center}.modal h2{margin-bottom:4px;font-size:20px}.modal .answer-reveal{margin:10px 0 2px;font-size:26px;font-weight:800;letter-spacing:4px;color:var(--accent)}.modal .hint{color:var(--text-dim);font-size:14px;margin-bottom:14px}.stats-grid{display:flex;justify-content:space-around;margin:16px 0}.stat{display:flex;flex-direction:column}.stat b{font-size:26px}.stat span{font-size:11px;color:var(--text-dim)}.dist{text-align:left;margin-bottom:16px}.dist-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:12px}.dist-bar{background:var(--absent);border-radius:3px;padding:2px 6px;min-width:20px;text-align:right;font-weight:700}.dist-bar.hit,.share-btn{background:var(--correct);color:#08210f}.share-btn{width:100%;padding:14px;border:none;border-radius:10px;font-size:16px;font-weight:800;cursor:pointer}.countdown{margin-top:12px;font-size:13px;color:var(--text-dim)}.install-btn{width:100%;margin-top:8px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:14px;font-weight:700;cursor:pointer}.close-x{position:relative;float:right;background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer}.help{text-align:left}.help p{font-size:14px;color:var(--text);margin-bottom:12px;line-height:1.45}.help p.dim{color:var(--text-dim);font-size:13px}.help p.dim b.hl{color:var(--text)}.help .ex-row{display:flex;gap:4px;margin:6px 0 4px}.help .ex-tile{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;border-radius:5px;border:2px solid var(--border)}.help .ex-tile.correct{background:var(--correct);border-color:var(--correct);color:#08210f}.help .ex-tile.present{background:var(--present);border-color:var(--present);color:#241c02}.help .ex-tile.absent{background:var(--absent);border-color:var(--absent);color:var(--text-dim)}.help .ex-caption{font-size:12px;color:var(--text-dim);margin-bottom:12px}.help hr{border:none;border-top:1px solid var(--border);margin:14px 0}