:root{--bg:#121213;--tile:#3a3a3c;--text:#fff;--green:#538d4e;--yellow:#b59f3b;--gray:#3a3a3c;--border:#565758}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);place-items:center;min-height:100vh;margin:0;padding:20px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:grid}.app{text-align:center;width:min(520px,100%)}h1{letter-spacing:.04em;margin:0 0 16px;font-size:1.6rem}.board{gap:8px;margin-bottom:16px;display:grid}.row{grid-template-columns:repeat(7,1fr);gap:8px;display:grid}.tile{aspect-ratio:1;border:2px solid var(--border);-webkit-user-select:none;user-select:none;background:#121213;border-radius:4px;place-items:center;font-size:1.5rem;font-weight:700;display:grid}.tile.filled{border-color:#878a8c}.tile.green{background:var(--green);border-color:var(--green)}.tile.yellow{background:var(--yellow);border-color:var(--yellow)}.tile.gray{background:var(--gray);border-color:var(--gray)}.controls{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:10px;display:flex}input{text-align:center;letter-spacing:.08em;border:1px solid #666;border-radius:6px;outline:none;width:220px;padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem}button{cursor:pointer;border:none;border-radius:6px;padding:10px 14px;font-weight:700}button:disabled{opacity:.65;cursor:not-allowed}button.primary{color:#fff;background:#2563eb}button.secondary{color:#fff;background:#444}.message{min-height:24px;margin-top:6px;font-weight:600}.share{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px;display:none}.legend{opacity:.85;margin-top:14px;font-size:.92rem}.dot{border-radius:2px;width:12px;height:12px;margin:0 5px -1px 12px;display:inline-block}.dot:first-child{margin-left:0}.dot.green{background:var(--green)}.dot.yellow{background:var(--yellow)}.dot.gray{background:var(--gray)}.modal{background:#000000b3;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal[hidden]{display:none}.modal-card{text-align:center;background:#1f2023;border:1px solid #3e3f42;border-radius:12px;width:min(420px,100%);padding:20px}.modal-card h2{margin:0 0 10px}.modal-result{margin:0 0 10px;font-weight:600}.modal-share-status{opacity:.9;min-height:20px;margin:8px 0 0;font-size:.9rem}.modal-actions{margin-top:12px}