/* Trilha: a grid of cells with thin lines between them, the path as a thick orange line through the centres of its
   cells (cells on the path tinted softly), and the numbers in plum circles above the line. No text under 1rem. */
.board.trilha { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); grid-template-rows: repeat(var(--n, 6), 1fr); gap: 1px; background: #d9d0e2; border: 3px solid var(--ink); border-radius: 1rem; overflow: hidden; touch-action: none; cursor: pointer; }
.board.trilha:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.trilha .cell { display: grid; place-items: center; background: var(--card); }
.trilha .cell.on { background: #fbe4da; }
.trilha .line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.trilha polyline { fill: none; stroke: var(--orange); stroke-width: .46; stroke-linecap: round; stroke-linejoin: round; }
.trilha .dot { position: relative; z-index: 2; display: grid; place-items: center; width: 66%; aspect-ratio: 1; border-radius: 50%; background: var(--brand); color: #fff; font: 900 clamp(1.25rem, 5.5vw, 1.75rem)/1 var(--title); }
.finished .trilha { pointer-events: none; cursor: default; }