:root{color-scheme:light dark;font-family:Helvetica Neue,Arial,sans-serif;--bg: #ffffff;--fg: #1a1a1b;--fg-muted: #787c7e;--border: #d3d6da;--border-filled: #878a8c;--correct: #6aaa64;--present: #c9b458;--absent: #787c7e;--key-bg-top: #e9ecf0;--key-bg-bottom: #ccd0d5;--key-shadow: #a9adb3;--key-fg: #1a1a1b;--accent-top: #7c6ff2;--accent-bottom: #5b4bd6;--accent-shadow: #4338a3}@media (prefers-color-scheme: dark){:root{--bg: #121213;--fg: #ffffff;--fg-muted: #9aa0a6;--border: #3a3a3c;--border-filled: #565758;--correct: #538d4e;--present: #b59f3b;--absent: #3a3a3c;--key-bg-top: #85888b;--key-bg-bottom: #616468;--key-shadow: #45474a;--key-fg: #ffffff;--accent-top: #8b7dfb;--accent-bottom: #6a58e0;--accent-shadow: #4a3fa8}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--fg);overscroll-behavior-y:contain}.app{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:16px;gap:20px;max-width:500px;margin:0 auto}.header{position:relative;text-align:center;border-bottom:1px solid var(--border);width:100%;padding-bottom:12px}.icon-bar{position:absolute;top:0;right:0;display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--fg) 8%,transparent);border-radius:999px;padding:6px 10px}.icon-divider{width:1px;height:16px;background:var(--border)}.icon-btn{background:none;border:none;color:var(--fg);cursor:pointer;display:flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:1rem;font-weight:700;border-radius:50%;padding:0}.icon-btn:hover{background:color-mix(in srgb,var(--fg) 12%,transparent)}.header h1{margin:0;font-size:2.4rem;letter-spacing:.06em}.subtitle{margin:4px 0 0;color:var(--fg-muted);font-size:.9rem}.toast{position:fixed;top:16px;left:50%;transform:translate(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:6px;font-weight:700;z-index:10;max-width:calc(100vw - 32px);text-align:center}.result-banner{text-align:center;background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid var(--border);border-radius:8px;padding:12px 20px;width:100%}.board{display:flex;flex-direction:column;gap:6px;width:100%;align-items:center}.row{display:flex;gap:6px;width:100%;justify-content:center}.row.shake{animation:shake .5s}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-8px)}40%,60%{transform:translate(8px)}}.tile{width:clamp(34px,calc((100vw - 64px) / var(--cols, 5) - 6px),58px);aspect-ratio:1;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:clamp(1.1rem,6vw,1.8rem);font-weight:700;text-transform:uppercase;border-radius:4px;perspective:400px}.tile.filled{border-color:var(--border-filled);animation:pop-in .1s}@keyframes pop-in{0%{transform:scale(.85)}40%{transform:scale(1.05)}}.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.reveal{animation:flip .5s ease both}@keyframes flip{0%{transform:rotateX(0);background:transparent;border-color:var(--border-filled);color:inherit}50%{transform:rotateX(90deg)}50.01%{background:var(--reveal-bg);border-color:var(--reveal-bg);color:#fff}to{transform:rotateX(0);background:var(--reveal-bg);border-color:var(--reveal-bg);color:#fff}}.tile.win{animation:bounce 1s both;animation-delay:.2s}@keyframes bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-24px)}50%{transform:translateY(4px)}60%{transform:translateY(-12px)}80%{transform:translateY(2px)}to{transform:translateY(0)}}.keyboard{display:flex;flex-direction:column;gap:8px;width:100%;max-width:480px}.keyboard-row{display:flex;justify-content:center;gap:6px}.key{flex:1;min-width:0;max-width:44px;height:50px;padding:0;border:none;border-radius:8px;background:linear-gradient(180deg,var(--key-bg-top),var(--key-bg-bottom));color:var(--key-fg);font-weight:700;text-transform:uppercase;cursor:pointer;font-size:clamp(.75rem,3.4vw,.95rem);box-shadow:0 2px 0 var(--key-shadow),0 1px 3px #00000040;transition:transform 80ms ease,box-shadow 80ms ease,filter .1s ease}.key:hover{filter:brightness(1.12)}.key:active{transform:translateY(2px);box-shadow:0 0 0 var(--key-shadow),0 1px 2px #0003}.key.wide{flex:1.7;max-width:68px;font-size:clamp(.55rem,2.6vw,.7rem);letter-spacing:-.02em}.key.enter{background:linear-gradient(180deg,var(--accent-top),var(--accent-bottom));color:#fff;box-shadow:0 2px 0 var(--accent-shadow),0 1px 3px #0000004d}.key.backspace{background:linear-gradient(180deg,var(--key-bg-top),var(--key-bg-bottom))}.key.correct{background:var(--correct);color:#fff;box-shadow:0 2px color-mix(in srgb,var(--correct) 60%,black),0 1px 3px #00000040}.key.present{background:var(--present);color:#fff;box-shadow:0 2px color-mix(in srgb,var(--present) 60%,black),0 1px 3px #00000040}.key.absent{background:var(--absent);color:#ffffffa0;box-shadow:0 2px color-mix(in srgb,var(--absent) 60%,black),0 1px 3px #00000040}.new-game-btn{background:linear-gradient(180deg,var(--accent-top),var(--accent-bottom));color:#fff;border:none;padding:10px 18px;border-radius:6px;font-weight:700;cursor:pointer;margin-top:8px;box-shadow:0 2px 0 var(--accent-shadow),0 1px 3px #00000040}.new-game-btn.subtle{background:transparent;box-shadow:none;border:1px solid var(--border);color:var(--fg-muted);font-weight:400;font-size:.85rem}.mode-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal{position:relative;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:24px 20px;max-width:420px;width:100%;max-height:85vh;overflow-y:auto;text-align:center}.modal-title{margin:0 0 12px;font-size:1.4rem}.modal-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--fg-muted);font-size:1.5rem;line-height:1;cursor:pointer;padding:4px}.modal p{text-align:left;line-height:1.4}.modal p.text-center{text-align:center}.example-row{display:flex;align-items:center;gap:12px;margin:14px 0}.example-tiles{display:flex;gap:4px;flex-shrink:0}.tile.example-tile{width:34px;aspect-ratio:1;font-size:1.1rem}.example-note{margin:0;text-align:left;font-size:.85rem}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}.stat-tile{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:1.6rem;font-weight:700}.stat-label{font-size:.65rem;color:var(--fg-muted);text-align:center}.distribution-title{font-size:1rem;margin:0 0 8px}.distribution{display:flex;flex-direction:column;gap:4px}.distribution-row{display:flex;align-items:center;gap:8px}.distribution-label{width:14px;font-size:.8rem;color:var(--fg-muted)}.distribution-bar-track{flex:1;background:color-mix(in srgb,var(--fg) 6%,transparent);border-radius:4px}.distribution-bar{background:var(--correct);color:#fff;font-size:.8rem;font-weight:700;min-width:20px;text-align:right;padding:2px 6px;border-radius:4px;box-sizing:border-box}.stats-note{margin-top:16px;font-size:.75rem;color:var(--fg-muted)}@media (max-width: 480px){.app{padding:10px;gap:14px}.header h1{font-size:1.9rem}.subtitle{font-size:.8rem}.board,.row{gap:4px}.keyboard{gap:6px}.keyboard-row{gap:4px}.key{height:44px;border-radius:6px}}