#board {--count:28px;--thermo-cell-edge:#64748b;--tube-path:#475569;grid-template-columns:var(--count) repeat(5,minmax(44px,1fr));grid-template-rows:var(--count) repeat(5,minmax(44px,1fr));aspect-ratio:1;width:min(100%,430px,max(280px,calc(100svh - 250px)));grid-auto-rows:auto;}
:root[data-theme=dark] #board {--thermo-cell-edge:#94a3b8;--tube-path:#cbd5e1;}
@media(prefers-color-scheme:dark) {:root:not([data-theme=light]) #board {--thermo-cell-edge:#94a3b8;--tube-path:#cbd5e1;}}
.thermo-cell {--mercury:#b43445;position:relative;width:100%;height:100%;min-width:44px;min-height:44px;padding:0;border:1px solid var(--thermo-cell-edge);border-radius:0;background:var(--surface);touch-action:manipulation;}
.thermo-cell.filled {background:color-mix(in srgb,var(--mercury) 12%,var(--surface));}
.thermo-cell.selected {box-shadow:inset 0 0 0 3px #2563eb;z-index:1;}
.thermo-cell.conflict {outline:3px solid var(--error);outline-offset:-5px;}
.tube-segment,.tube-bulb,.tube-tip {position:absolute;display:block;background:var(--tube-path);pointer-events:none;}
.tube-segment {border:1px solid var(--surface);border-radius:5px;}
.tube-segment.left {left:0;top:40%;width:50%;height:20%;}
.tube-segment.right {right:0;top:40%;width:50%;height:20%;}
.tube-segment.up {top:0;left:40%;height:50%;width:20%;}
.tube-segment.down {bottom:0;left:40%;height:50%;width:20%;}
.tube-bulb {width:48%;height:48%;top:26%;left:26%;border-radius:50%;border:2px solid var(--surface);outline:1px solid var(--thermo-cell-edge);}
.tube-tip {width:20%;height:20%;top:40%;left:40%;border-radius:50%;border:1px solid var(--surface);outline:1px solid var(--thermo-cell-edge);}
.filled .tube-segment,.filled .tube-bulb,.filled .tube-tip {background:var(--mercury);}
.cell-mark {position:absolute;right:4px;top:1px;font-size:1rem;font-weight:800;color:var(--text);pointer-events:none;}
.count-clue {display:flex;align-items:center;justify-content:center;font-weight:750;font-size:1rem;}
.count-clue.matched {color:#15803d;}
.count-clue.conflict {color:var(--error);text-decoration:underline wavy;}
.mark-controls {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:430px;margin:0 auto 8px;}
.mark-controls button {padding:8px 2px;}
.play-actions {grid-template-columns:repeat(3,minmax(0,1fr));}
.play-actions button {min-height:44px;}
:root[data-theme=dark] .thermo-cell {--mercury:#fb7185;}
:root[data-theme=dark] .count-clue.matched {color:#86efac;}
@media(prefers-color-scheme:dark) {:root:not([data-theme=light]) .thermo-cell {--mercury:#fb7185;}:root:not([data-theme=light]) .count-clue.matched {color:#86efac;}}