:root{--slant-grid:#64748b}:root[data-theme=dark]{--slant-grid:#94a3b8}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--slant-grid:#94a3b8}}
#board{position:relative;display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));aspect-ratio:1;width:calc(100% - 28px);margin:14px;background:var(--surface);}
#slant-lines,#point-clues{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
#slant-lines{z-index:1;}
.grid-line{stroke:var(--slant-grid);stroke-width:1;}
.diagonal-line{stroke:var(--text);stroke-width:4;stroke-linecap:round;}
.slant-tile{position:relative;z-index:2;min-width:44px;min-height:44px;width:100%;height:100%;padding:0;background:transparent;border:0;border-radius:0;touch-action:manipulation;}
.slant-tile.selected{box-shadow:inset 0 0 0 3px #3b82f6;}
.slant-tile:disabled{opacity:1;}
#point-clues{z-index:3;}
.point-clue{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:14px;font-weight:700;border-radius:50%;background:var(--surface);border:1px solid var(--slant-grid);color:var(--text);}
.point-clue.error{border:2px dashed var(--error);}
.play-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;}
.play-actions button{min-height:44px;}
#save-notice:empty{display:none;}