:root{--bg: #121213;--tile-border: #3a3a3c;--tile-border-filled: #565758;--key-bg: #818384;--text: #ffffff;--muted: #a1a1a6;--correct: #538d4e;--present: #b59f3b;--absent: #3a3a3c;--accent: #538d4e;--card: #1c1c1e;--danger: #d64545}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}.app{max-width:500px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;align-items:center;padding:0 8px 12px}.center{justify-content:center;align-items:center}.topbar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 6px;border-bottom:1px solid var(--tile-border)}.brand{display:flex;flex-direction:column;line-height:1}.brand-title{font-weight:800;letter-spacing:3px;font-size:26px}.brand-sub{font-size:11px;color:var(--muted);letter-spacing:1px}.topbar-right{display:flex;align-items:center;gap:10px}.date-pill{font-size:12px;color:var(--muted);border:1px solid var(--tile-border);padding:4px 8px;border-radius:999px}.link-btn{background:none;border:none;color:var(--text);font-size:13px;cursor:pointer;text-decoration:underline}.demo-banner{width:100%;background:var(--present);color:#1c1c1e;font-size:12px;font-weight:600;text-align:center;padding:7px 10px;border-radius:0 0 8px 8px;line-height:1.4}.player-line{font-size:13px;color:var(--muted);margin-top:8px}.player-line strong{color:var(--text)}.timer{display:flex;flex-direction:column;align-items:center;margin:10px 0 4px}.timer-clock{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px}.timer-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.timer.running .timer-clock{color:var(--text)}.timer.danger .timer-clock{color:var(--danger);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.55}}.board{display:grid;grid-template-rows:repeat(6,1fr);gap:5px;padding:12px 0;flex-grow:1;max-height:60vh;aspect-ratio:5 / 6;width:min(330px,86vw)}.board-row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.tile{display:flex;align-items:center;justify-content:center;border:2px solid var(--tile-border);font-size:30px;font-weight:700;text-transform:uppercase;-webkit-user-select:none;user-select:none;color:var(--text);transition:transform .1s ease}.tile.filled{border-color:var(--tile-border-filled);animation:pop .1s ease}@keyframes pop{0%{transform:scale(.9)}to{transform:scale(1)}}.tile.correct{background:var(--correct);border-color:var(--correct)}.tile.present{background:var(--present);border-color:var(--present)}.tile.absent{background:var(--absent);border-color:var(--absent)}.board-row.shake{animation:shake .5s}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.keyboard{width:100%;max-width:500px;margin-top:auto}.kb-row{display:flex;justify-content:center;gap:6px;margin-bottom:6px;touch-action:manipulation}.kb-key{flex:1;height:56px;border:none;border-radius:4px;background:var(--key-bg);color:var(--text);font-weight:700;font-size:14px;text-transform:uppercase;cursor:pointer;max-width:44px}.kb-key.kb-wide{flex:1.5;max-width:66px;font-size:12px}.kb-key.correct{background:var(--correct)}.kb-key.present{background:var(--present)}.kb-key.absent{background:var(--absent)}.kb-key:disabled{opacity:.6}.btn{border:none;border-radius:6px;padding:12px 18px;font-size:15px;font-weight:700;cursor:pointer;background:var(--key-bg);color:var(--text)}.btn.primary{background:var(--accent)}.results-btn{margin-top:auto;margin-bottom:16px;width:min(330px,86vw)}.toast{position:fixed;top:70px;left:50%;transform:translate(-50%);background:var(--text);color:#000;padding:10px 16px;border-radius:6px;font-weight:700;font-size:14px;z-index:50;animation:fade .2s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.card{background:var(--card);border-radius:12px;padding:24px;width:100%;max-width:440px;position:relative;max-height:90vh;overflow-y:auto}.card h2{margin:0 0 8px}.card h2.win{color:var(--correct)}.card h2.lose{color:var(--danger)}.muted{color:var(--muted)}.center{text-align:center}.close-x{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--muted);font-size:26px;cursor:pointer;line-height:1}.name-card .name-input{width:100%;padding:12px;font-size:16px;border-radius:6px;border:2px solid var(--tile-border-filled);background:var(--bg);color:var(--text);margin:14px 0}.name-card .name-input:focus{outline:none;border-color:var(--accent)}.name-card .btn{width:100%}.answer-row{display:flex;align-items:center;justify-content:space-between;margin:14px 0;padding:12px;background:var(--bg);border-radius:8px}.answer{font-size:22px;font-weight:800;letter-spacing:3px}.your-stats{display:flex;gap:12px;margin-bottom:18px}.stat{flex:1;background:var(--bg);border-radius:8px;padding:14px;text-align:center}.stat-num{display:block;font-size:26px;font-weight:800}.stat-label{font-size:12px;color:var(--muted)}.share-row{display:flex;gap:8px;margin:4px 0 6px}.share-row .btn{flex:1}.btn.share-secondary{background:var(--key-bg)}.share-msg{text-align:center;font-size:13px;color:var(--correct);margin-bottom:6px}.sb-title{margin:16px 0 10px}.scoreboard{width:100%}.sb-tabs{display:flex;gap:8px;margin-bottom:12px}.sb-tabs button{flex:1;background:var(--bg);border:1px solid var(--tile-border);color:var(--muted);padding:8px;border-radius:6px;cursor:pointer;font-weight:700}.sb-tabs button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.sb-list,.sb-table{display:flex;flex-direction:column;gap:4px}.sb-row{display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:8px;padding:9px 10px;background:var(--bg);border-radius:6px;font-size:14px}.sb-row.me{outline:2px solid var(--accent)}.sb-row.dnf{opacity:.65}.sb-rank{color:var(--muted);font-weight:700;text-align:center}.sb-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sb-guesses{font-size:12px;color:var(--muted)}.sb-time{font-weight:700;font-variant-numeric:tabular-nums}.sb-table .sb-row{grid-template-columns:28px 1fr 56px 44px 52px}.sb-col{text-align:center;font-variant-numeric:tabular-nums;font-size:13px}.sb-head{background:transparent;color:var(--muted);font-size:12px;padding-bottom:2px}.sb-head .sb-name{font-weight:700}.setup-card code{background:var(--bg);padding:2px 6px;border-radius:4px}.setup-card p{line-height:1.6;color:var(--muted)}.spinner{width:38px;height:38px;border:4px solid var(--tile-border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 360px){.tile{font-size:24px}.kb-key{height:48px}}