.kboard { --n:6; display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr)); grid-template-rows:repeat(var(--n), minmax(0, 1fr)); width:min(480px, 100%); aspect-ratio:1; border:2px solid var(--text); background:var(--text); gap:1px; box-sizing:border-box; }
.kc { position:relative; display:grid; place-items:center; padding:0; border:0; border-radius:0; background:var(--panel); font:700 clamp(1rem, 5vw, 1.6rem)/1 system-ui, sans-serif; color:var(--accent); min-width:0; }
.kc.black { background:#1b2433; color:#e2e8f0; cursor:default; }
html[data-portal-theme="light"] .kc.black { background:#334155; }
.kc.black::before { content:''; position:absolute; inset:0; background:linear-gradient(to top right, transparent calc(50% - .5px), rgba(255,255,255,.55) 50%, transparent calc(50% + .5px)); }
.kc.black.none::before { display:none; }
.kc .r { position:absolute; right:12%; top:6%; font-size:clamp(.55rem, 2.4vw, .8rem); font-weight:700; } .kc .d { position:absolute; left:12%; bottom:6%; font-size:clamp(.55rem, 2.4vw, .8rem); font-weight:700; }
.kc.given { color:var(--text); font-weight:800; background:color-mix(in srgb, var(--muted) 16%, var(--panel)); }
.kc.run { background:color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.kc.sel { background:color-mix(in srgb, var(--accent) 40%, var(--panel)); outline:2px solid var(--accent); outline-offset:-2px; z-index:1; }
.kc.bad { color:var(--bad); background:color-mix(in srgb, var(--bad) 22%, var(--panel)); }
.pad { display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); gap:4px; width:min(480px, 100%); }
.pad button { min-height:48px; padding:0; font:700 1.25rem system-ui; }
.bar button { min-height:44px; }
#levels button.on { background:var(--accent); color:var(--accent-ink,#06202e); }
.kboard.won { border-color:#4ade80; }