/* One Line (layout, controls and result card come from flow.css) */
.sizes .seg.small button { padding: 6px 10px; }
.ol-board { width: 100%; border-radius: 16px; border: 1px solid #2C3846; background: #0F161E; padding: 6px; }
.ol-board svg { display: block; width: 100%; max-height: 62vh; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.ol-board .ln { stroke: #3A4756; stroke-width: 12; stroke-linecap: round; transition: stroke .15s; }
.ol-board .ln.dbl { stroke-width: 7; }
.ol-board .ln.on { stroke: var(--green); }
.ol-board .ln.on.win { stroke: var(--cyan); animation: olwin 1.2s ease-out; }
@keyframes olwin { from { stroke: var(--green); } }
.ol-board .arrow { fill: none; stroke: #DCE3EA; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ol-board .arrow.on { stroke: #0F161E; }
.ol-board .dot { fill: #DCE3EA; transition: fill .15s; }
.ol-board .dot.seen { fill: var(--green); }
.ol-board .dot.head { fill: var(--green); stroke: #0F161E; stroke-width: 4; }
.ol-board .dot.end { fill: var(--pink); }
.ol-board .halo { fill: rgba(74,222,128,.18); animation: halo 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 50% { transform: scale(1.25); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ol-board .halo, .ol-board .ln.on.win { animation: none; } }
#levels { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
#levels .seg { width: 100%; min-width: 0; }
#levels .seg button { padding: 6px 4px; }
@media (max-width: 420px) { #levels { grid-template-columns: minmax(0, 1fr); } #levels .btn { justify-self: start; } }