/* Count Trail */
.ct-board { width: min(100%, 460px); margin: 6px auto 0; padding: 10px; border-radius: 22px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
#ct-grid { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.ct-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.ct-lines line { stroke: #4E9E2F; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ct-cell { position: relative; z-index: 1; aspect-ratio: 1; margin: 2px; padding: 0; border-radius: 50%; border: 1px solid var(--glass-edge); background: var(--tile-top); box-shadow: var(--lift); color: var(--text); font: 800 clamp(13px, 4vw, 20px) var(--display); cursor: pointer; }
.ct-cell:empty { background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: none; border: 2px dashed color-mix(in srgb, var(--text) 16%, transparent); }
.ct-cell.given { color: #fff; background: linear-gradient(170deg, #6FC24A, #2F7A16); border-color: transparent; }
.ct-cell.end { outline: 3px solid #F5C542; outline-offset: -3px; }
.ct-cell.cand { background: color-mix(in srgb, #4E9E2F 22%, transparent); border: 2px dashed #4E9E2F; }
.ct-cell.sel { background: linear-gradient(170deg, #FFE38F, #F5C542); color: #14213A; }
.ct-cell.bad { color: #E5484D; }
.ct-cell.solved { background: linear-gradient(170deg, #9FE8C8, #1B8A5E); color: #fff; border-color: transparent; }
.ct-cell.solved:empty { background: transparent; }