:root{--bg: #12141c;--panel: #1c2030;--panel-2: #262b40;--text: #eef0f8;--muted: #9aa1bd;--accent: #6c8cff;--before: #f5a524;--after: #45c4a0;--danger: #ff6b6b;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{display:flex;flex-direction:column;height:100dvh;max-width:640px;margin:0 auto;padding:0 12px env(safe-area-inset-bottom)}.header{position:relative;text-align:center;padding:12px 0 4px}.header h1{margin:0;font-size:1.6rem;letter-spacing:.08em;text-transform:uppercase}.hint-button{position:absolute;top:10px;right:0;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--panel-2);color:var(--before);cursor:pointer;touch-action:manipulation}.hint-button:hover:not(:disabled){background:#323852}.hint-button:disabled{color:var(--muted);opacity:.4;cursor:default}.modal-actions{display:flex;justify-content:center;gap:12px;margin-top:16px}.modal-actions .play-again{margin-top:0}.secondary-button{padding:12px 24px;border:0;border-radius:10px;background:var(--panel-2);color:var(--text);font:inherit;font-weight:700;cursor:pointer}.secondary-button:hover{background:#323852}.subtitle{margin:4px 0;color:var(--muted);font-size:.85rem}.guess-count{margin:0;color:var(--muted);font-size:.85rem}.main{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding-top:8px}.current-guess{min-height:3rem;display:flex;align-items:center;justify-content:center;background:var(--panel);border:2px solid var(--accent);border-radius:10px;font-size:1.6rem;font-weight:700;letter-spacing:.15em;overflow-wrap:anywhere}.message{min-height:1.2rem;margin:0;text-align:center;color:var(--danger);font-size:.9rem}.guess-list{flex:1;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.guess-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 12px;background:var(--panel);border-left:4px solid var(--muted);border-radius:8px}.guess-row.guess-before{border-left-color:var(--before)}.guess-row.guess-after{border-left-color:var(--after)}.guess-row.latest{animation:flash 1.2s ease-out}.guess-word{font-weight:700;letter-spacing:.08em;overflow-wrap:anywhere}.badge{font-size:.75rem;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--panel-2);white-space:nowrap}.guess-before .badge{color:var(--before)}.guess-after .badge{color:var(--after)}.away{color:var(--muted);font-size:.8rem;white-space:nowrap}.guess-row.placeholder{grid-template-columns:1fr auto;background:transparent;border:2px dashed var(--accent);border-radius:8px;color:var(--accent)}.guess-row.placeholder .away{color:var(--accent)}.guess-list.revealing .guess-row.placeholder{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;animation:reveal-hold 3s linear forwards}@keyframes reveal-hold{0%{background:transparent}to{background:color-mix(in srgb,var(--accent) 30%,transparent)}}.keyboard{padding:8px 0 12px;display:flex;flex-direction:column;gap:6px;-webkit-user-select:none;user-select:none}.key-row{display:flex;justify-content:center;gap:5px}.key{flex:1 1 0;max-width:48px;height:52px;padding:0;border:0;border-radius:6px;background:var(--panel-2);color:var(--text);font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation}.key:hover{background:#323852}.key:active{background:var(--accent)}.key-letter{transition:opacity .2s ease}.key-letter.key-faded{opacity:.25}.key-wide{flex:1.9 1 0;max-width:96px;font-size:.75rem}.key-submit{background:var(--accent);color:#0b1024}.key-submit:hover{background:#849fff}.modal{border:0;border-radius:16px;padding:28px 32px;background:var(--panel);color:var(--text);text-align:center;max-width:min(90vw,380px);box-shadow:0 20px 60px #0009}.modal::backdrop{background:#000000a6}.modal h2{margin:0 0 8px}.modal-word{margin:8px 0;font-size:2rem;font-weight:800;letter-spacing:.1em;color:var(--after);overflow-wrap:anywhere}.play-again{margin-top:16px;padding:12px 24px;border:0;border-radius:10px;background:var(--accent);color:#0b1024;font:inherit;font-weight:700;cursor:pointer}.play-again:hover{background:#849fff}.stats{margin-top:20px;padding-top:14px;border-top:1px solid var(--panel-2)}.stats h3{margin:0 0 8px;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.stats-list{list-style:none;margin:0;padding:0;max-height:30vh;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.stats-row{display:flex;justify-content:space-between;gap:24px;padding:6px 10px;border-radius:6px;background:var(--panel-2);font-size:.9rem}.stats-row.current{outline:2px solid var(--after)}.stats-count{color:var(--muted)}@keyframes flash{0%{background:var(--panel-2)}to{background:var(--panel)}}@media(max-width:420px){.key{height:46px}.guess-row{gap:6px;padding:8px 10px}}