:root{--peg-accent:#2563eb;}
:root[data-theme=dark]{--peg-accent:#93c5fd;}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--peg-accent:#93c5fd;}}
#board{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:4px;width:100%;aspect-ratio:1;}
.peg-tile{min-width:44px;min-height:44px;width:100%;height:100%;border-radius:50%;font-size:2rem;line-height:1;padding:0;border:2px solid var(--line);touch-action:manipulation;}
.peg-tile.peg{background:var(--text);color:var(--surface);}
.peg-tile.empty{background:var(--surface);color:var(--muted);}
.peg-tile.chosen{outline:3px solid var(--peg-accent);outline-offset:-4px;}
.peg-tile.destination{border:3px dashed var(--peg-accent);color:var(--peg-accent);}
.peg-tile.focused{box-shadow:inset 0 0 0 2px var(--peg-accent);}
.peg-tile:disabled{opacity:1;}
.no-hole{pointer-events:none;}
.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;}

#board {position:relative;isolation:isolate;}
#board .peg-tile.peg {background:var(--surface);}