/* Corral Loop: a meadow board, wooden fence pieces between the dots. */
.cl-board { width: min(100%, 460px); margin: 6px auto 0; padding: 6px; border-radius: 22px; background: linear-gradient(160deg, #EAF7DD, #CDEBB5); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
:root[data-theme="dark"] .cl-board { background: linear-gradient(160deg, #1D3324, #142419); }
.cl-svg { display: block; width: 100%; height: auto; touch-action: none; cursor: pointer; user-select: none; }
.cl-dot { fill: #3C4A35; }
:root[data-theme="dark"] .cl-dot { fill: #CFE3C0; }
.cl-clue { font: 800 0.6px var(--display); font-size: .6px; fill: #24324A; transition: fill .2s; }
:root[data-theme="dark"] .cl-clue { fill: #E8F2FF; }
.cl-clue.met { fill: #8AA08C; }
.cl-clue.over { fill: #D43C3C; }
.cl-line { stroke: transparent; stroke-width: .13; stroke-linecap: round; }
.cl-edge.on .cl-line { stroke: #9A6A2F; }
:root[data-theme="dark"] .cl-edge.on .cl-line { stroke: #E6B877; }
.cl-x { font-size: .26px; fill: #C4383C; opacity: 0; font-weight: 800; }
.cl-edge.off .cl-x { opacity: .8; }
.cl-edge.hint .cl-line { animation: cl-hint 1s ease-in-out 3; }
.cl-svg.solved .cl-edge.on .cl-line { stroke: #1B8A5E; }
@keyframes cl-hint { 50% { stroke: #2FA8E0; stroke-width: .2; } }
@media (prefers-reduced-motion: reduce) { .cl-edge.hint .cl-line { animation: none; stroke: #2FA8E0; } }