.layout{max-width:1000px;margin:0 auto;padding:8px 20px 0;display:grid;grid-template-columns:1fr 300px;gap:160px;align-items:start}
.how{color:var(--muted);font-size:14px;margin:0 0 10px}
.legend{display:block;margin-top:4px}
.board{display:grid;gap:6px;width:min(320px,100%);margin:0 auto}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.t{display:inline-grid;place-items:center;aspect-ratio:1;border:2px solid #cfc8c0;background:#fff;font-weight:700;font-size:1.5rem;text-transform:uppercase;border-radius:6px;position:relative}
.legend .t{width:24px;font-size:13px;border-width:1px;vertical-align:middle;margin:0 2px}
.t.ok{background:var(--plum);border-color:var(--plum);color:#fff}
.t.near{background:var(--oat);border-color:var(--mauve);color:var(--ink);border-style:dashed}
.t.no{background:#e2ded9;border-color:#e2ded9;color:#5E5157}
.t.ok::after{content:"";position:absolute;bottom:4px;width:40%;height:3px;background:#fff;border-radius:2px}
.kb{display:grid;gap:6px;margin:16px auto 0;width:min(480px,100%)}
.kr{display:flex;gap:4px;justify-content:center}
.k{flex:1;min-width:0;min-height:48px;border:0;border-radius:6px;background:#e9e4de;color:var(--ink);font-weight:600;font-size:15px;cursor:pointer;text-transform:uppercase}
.k.wide{flex:1.6;font-size:12px}
.k.ok{background:var(--plum);color:#fff}.k.near{background:var(--oat);outline:2px dashed var(--mauve);outline-offset:-2px}.k.no{background:#cfc8c0;color:#6b6560}
.live{min-height:1.5em;text-align:center;font-weight:600;color:var(--plum)}
.done{text-align:center;background:#fff;border:1px solid var(--oat);border-radius:12px;padding:12px;margin-top:16px}
.btn.solid{background:var(--mauve);border-color:var(--mauve);color:#fff}
.note{font-size:12px;color:var(--muted)}
.slot{border:1px solid var(--oat);border-radius:12px;padding:12px;background:#fff;min-height:330px}
.howto{font-size:13px;color:var(--muted);text-align:center;margin:14px 0 4px}
.clear{text-align:center;margin:0}
.btn.small{padding:6px 12px;font-size:12px}
.slot-label{margin:0 0 6px;font-size:12px;color:var(--muted)}
/* Compliance H7: >=150px non-interactive clearance between keyboard/game and slot at every width; slot height reserved */
@media (max-width:820px){.layout{grid-template-columns:1fr;gap:0}.slot{max-width:340px;margin:160px auto 0;width:100%}}
@media (prefers-reduced-motion:no-preference){.t.flip{animation:f .25s ease}@keyframes f{from{transform:scaleY(.2)}to{transform:none}}}
h1{font-size:clamp(1.7rem,5vw,2.2rem)}
.btn.solid{background:var(--mauve);border-color:var(--mauve);color:#fff;width:auto}
.btn.small{width:auto;padding:6px 14px;font-size:.8rem}
.done .btn{width:auto}
.slot-h{font-size:1.3rem;margin:.2em 0}
.slot p{font-size:.92rem}
.soon-pill{display:inline-block;background:var(--oat);color:var(--plum);font-weight:600;border-radius:999px;padding:4px 14px}
.t{font-family:var(--sans)}

.clear{text-align:center;margin:28px 0 0}
a.quiet{font-size:.75rem;color:#5E5157;text-decoration:underline;font-weight:400}
.t.pop{animation:pop .18s ease-out}
@keyframes pop{50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.t.pop{animation:none}}