:root {--one:#fecaca;--two:#bfdbfe;--three:#fde68a;--ink:#172033;--cursor:#7c3aed;}
:root[data-theme=dark] {--one:#7f1d1d;--two:#1e3a8a;--three:#713f12;--ink:#fff;--cursor:#c4b5fd;}
@media(prefers-color-scheme:dark) {:root:not([data-theme=light]) {--one:#7f1d1d;--two:#1e3a8a;--three:#713f12;--ink:#fff;--cursor:#c4b5fd;}}
#board {grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--bg);}
.cell {font-size:1.75rem;font-weight:700;min-width:44px;min-height:44px;color:var(--ink);}
.color-1 {background:var(--one);} .color-2 {background:var(--two);} .color-3 {background:var(--three);} .color-0 {background:transparent;border:1px dashed var(--line);color:var(--muted);}
.cell.group-selected {outline:3px solid var(--text);outline-offset:-4px;} .cell.cursor {box-shadow:inset 0 0 0 2px var(--cursor);} .cell:disabled {opacity:1;}
.remove-actions {max-width:430px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;gap:12px;} .remove-actions button {min-height:48px;} #preview {font-size:.85rem;}
.play-actions {grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:360px) {main {width:calc(100% - 16px);} .cell {font-size:1.5rem;}}