:root{color-scheme:dark;font-family:ui-monospace,SFMono-Regular,Menlo,Courier,monospace;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.app{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:1.5rem 1rem 2rem;font-family:ui-monospace,SFMono-Regular,Menlo,Courier,monospace}.title{font-size:2.5rem;font-weight:800;letter-spacing:.15em;margin:0;color:#fafafa;text-align:center}.subtitle{font-size:.85rem;color:#666;margin:.25rem 0 .75rem;text-align:center}.legend{display:flex;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap;justify-content:center}.legend-item{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:#888}.legend-swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0}.grid{display:flex;flex-direction:column;gap:6px;margin-bottom:1.5rem}.row{display:flex;gap:6px}.cell{width:52px;height:52px;border:2px solid #333;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;text-transform:uppercase;color:#fafafa;transition:background .2s,border-color .2s;-webkit-user-select:none;user-select:none}.cell.filled{border-color:#555}.cell.correct{background:#4ade80;border-color:#4ade80;color:#0a0a0a}.cell.present{background:#f39c12;border-color:#f39c12;color:#0a0a0a}.cell.absent{background:#2a2a2a;border-color:#2a2a2a}.cell.pop{animation:pop .1s ease-in-out}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}.cell.flip{animation:flip .4s ease-in-out}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.keyboard{display:flex;flex-direction:column;gap:6px;width:100%;max-width:500px;padding:0 .25rem}.kb-row{display:flex;gap:5px;justify-content:center}.key{display:flex;align-items:center;justify-content:center;height:52px;min-width:30px;flex:1;max-width:42px;border:1px solid #444;border-radius:6px;background:#1a1a1a;color:#fafafa;font-family:inherit;font-size:.85rem;font-weight:600;text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s;-webkit-tap-highlight-color:transparent}.key:active{background:#333}.key.wide{max-width:65px;font-size:.7rem;letter-spacing:.05em}.key.correct{background:#4ade80;border-color:#4ade80;color:#0a0a0a}.key.present{background:#f39c12;border-color:#f39c12;color:#0a0a0a}.key.absent{background:#2a2a2a;border-color:#2a2a2a;color:#666}.message{font-size:1.25rem;font-weight:700;margin:1rem 0;text-align:center}.message.won{color:#4ade80;font-size:2rem}.message.lost{color:#ef4444}.share-btn{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;padding:.6rem 1.2rem;background:#1a1a1a;border:1px solid #444;border-radius:8px;color:#fafafa;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s}.share-btn:hover{background:#2a2a2a}.copied{font-size:.75rem;color:#4ade80;margin-top:.35rem}.footer{margin-top:auto;padding-top:1.5rem;font-size:.7rem;color:#444;text-align:center}.footer a{color:#666;text-decoration:none}.footer a:hover{color:#999}@media(max-width:400px){.cell{width:44px;height:44px;font-size:1.25rem}.key{height:46px;font-size:.75rem}.title{font-size:2rem}}