.cwgrid { --n:11; display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr)); width:min(520px, 100%); aspect-ratio:1; gap:2px; box-sizing:border-box; }
.cw { position:relative; display:grid; place-items:center; padding:0; border:2px solid var(--line); border-radius:4px; background:var(--panel); font:800 clamp(.9rem, 4.2vw, 1.5rem)/1 system-ui; color:var(--accent); text-transform:uppercase; min-width:0; }
.cw.off { visibility:hidden; border:0; background:transparent; }
.cw .n { position:absolute; left:2px; top:1px; font-size:clamp(.45rem, 1.9vw, .65rem); font-weight:700; color:var(--muted); line-height:1; }
.cw.given { color:var(--text); background:color-mix(in srgb, var(--muted) 16%, var(--panel)); }
.cw.same { background:color-mix(in srgb, var(--accent) 22%, var(--panel)); }
.cw.sel { background:color-mix(in srgb, var(--accent) 45%, var(--panel)); outline:2px solid var(--accent); outline-offset:-2px; z-index:1; }
.cw.bad { color:var(--bad); background:color-mix(in srgb, var(--bad) 22%, var(--panel)); }
.cw.won { border-color:#4ade80; }
.codes { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; max-width:560px; }
.codes button { min-width:44px; min-height:44px; padding:2px 4px; display:flex; flex-direction:column; align-items:center; line-height:1.1; font-weight:800; text-transform:uppercase; }
.codes button small { font-size:.62rem; color:var(--muted); font-weight:700; }
.codes button.sel { background:var(--accent); color:var(--accent-ink,#06202e); } .codes button.sel small { color:var(--accent-ink,#06202e); } .codes button.bad { border-color:var(--bad); }
.keys { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; max-width:560px; }
.keys button { min-width:34px; min-height:44px; padding:2px 6px; font-weight:800; text-transform:uppercase; } .keys button.used { opacity:.4; }
.bar button { min-height:44px; }
#levels button.on { background:var(--accent); color:var(--accent-ink,#06202e); }