.text { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; max-width:720px; }
.word { display:inline-flex; gap:3px; }
.cc { width:34px; padding:3px 0 5px; display:flex; flex-direction:column; align-items:center; gap:2px; border:2px solid var(--line); border-radius:8px; background:var(--panel); font-family:ui-monospace, Menlo, monospace; text-transform:uppercase; }
.cc .k { font-size:.72rem; color:var(--muted); font-weight:700; }
.cc .g { min-height:1.5rem; font-size:1.25rem; font-weight:800; line-height:1.5rem; }
.cc.same { border-color:var(--accent); }
.cc.sel { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 24%, var(--panel)); }
.cc.given .g { color:var(--muted); }
.cc.wrong { border-color:var(--bad); background:color-mix(in srgb, var(--bad) 20%, var(--panel)); }
.cc.won { border-color:#4ade80; }
.punct { align-self:flex-end; font:800 1.25rem ui-monospace, Menlo, monospace; padding-bottom:5px; }
.keys { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; max-width:560px; }
.keys button { min-width:36px; min-height:44px; padding:4px 8px; font-weight:800; text-transform:uppercase; }
.keys button.used { opacity:.45; }
.bar button { min-height:44px; }
#levels button.on { background:var(--accent); color:var(--accent-ink,#06202e); }
@media (max-width:420px) { .cc { width:28px; } .word { gap:2px; } }