/* Boggle Solver */
.bg-layout { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 24px; align-items: start; }
.tool-in .bg-layout label { margin-top: 0; }
@media (max-width: 700px) { .bg-layout { grid-template-columns: 1fr; } }
.bg-board { --n: 4; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 340px; padding: 8px; background: var(--bg-muted); border-radius: var(--radius-md); }
.bg-cell { position: relative; aspect-ratio: 1; }
.bg-cell input[type="text"] { width: 100%; height: 100%; padding: 0; text-align: center; font: 800 clamp(18px, 6vw, 28px) var(--font-sans); text-transform: none; border: 2px solid var(--line-strong); border-radius: 8px; background: var(--bg-card); color: var(--ink); }
.bg-board[style*="--n: 5"] .bg-cell input[type="text"] { font-size: clamp(16px, 5vw, 23px); }
.bg-cell.on input[type="text"] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
.bg-cell.first input[type="text"] { background: var(--accent); color: #fff; }
.bg-ord { position: absolute; top: 2px; left: 5px; font: 700 10px var(--font-sans); color: var(--accent); pointer-events: none; }
.bg-cell.first .bg-ord { color: #fff; }
.bg-path { position: absolute; left: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 10px); pointer-events: none; overflow: visible; }
.bg-path polyline { fill: none; stroke: var(--accent); stroke-width: .07; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.bg-sel { font: 700 15px var(--font-sans); color: var(--accent); min-height: 1.4em; margin: 8px 0 0; }
.bg-list { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-w { font: 600 14px var(--font-sans); padding: 4px 9px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg-card); color: var(--ink); cursor: pointer; text-transform: uppercase; }
.bg-w:hover, .bg-w:focus-visible { border-color: var(--accent); }
.bg-w.rare { color: var(--muted); font-weight: 500; }
.bg-w.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#bg-words h4 { margin: 14px 0 6px; }
#bg-words h4 small { font-weight: 500; color: var(--muted); }