/* Rocket Bridges. Scoped to .bg; the shell (header, sheets, tools) is games/logic-kit/kit.css. */
.bg { --bg-water: #0a1a33; --bg-water2: #0d2140; --bg-dot: rgba(120,170,230,0.16); --bg-isl: #1d3157; --bg-isl-line: #4d6a98; --bg-num: #eaf2ff; --bg-bridge: #cfe2ff; --bg-full: #2fbf86; --bg-full-glow: rgba(94,230,168,0.55); --bg-over: #ff6b81; --bg-sel: #ffd166; --bg-guide: rgba(255,209,102,0.55); --bg-hl: #ffd166; }
.bg.lk-light { --bg-water: #d8ecfb; --bg-water2: #c9e3f7; --bg-dot: rgba(30,80,140,0.18); --bg-isl: #ffffff; --bg-isl-line: #6f89b3; --bg-num: #13213f; --bg-bridge: #39557f; --bg-full: #1d9a6a; --bg-full-glow: rgba(29,154,106,0.45); --bg-over: #d6334f; --bg-sel: #d08f00; --bg-guide: rgba(208,143,0,0.6); --bg-hl: #e0a100; }
.bg-board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 10px; background: radial-gradient(120% 90% at 50% 0%, var(--bg-water2), var(--bg-water)); touch-action: none; cursor: pointer; outline: none; }
.bg-board:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
.bg-dots circle { fill: var(--bg-dot); }
.bg-edge line { stroke: var(--bg-bridge); stroke-linecap: round; }
.bg-edge.wrong line { stroke: var(--bg-over); }
.bg-edge.new line { animation: bg-draw .28s ease-out; }
.bg-edge.hl line { stroke: var(--bg-hl); }
.bg-hit { stroke: transparent; stroke-linecap: round; }
.bg-guide { stroke: var(--bg-guide); stroke-dasharray: 0.12 0.14; stroke-linecap: round; fill: none; }
.bg-guide.blocked { stroke: color-mix(in srgb, var(--bg-over) 60%, transparent); }
.bg-preview { stroke: var(--bg-sel); stroke-linecap: round; opacity: 0.85; }
.bg-preview.blocked { stroke: var(--bg-over); }
.bg-i circle.body { fill: var(--bg-isl); stroke: var(--bg-isl-line); transition: fill .2s, stroke .2s; }
.bg-i text { fill: var(--bg-num); font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; font-family: inherit; }
.bg-i.full circle.body { fill: var(--bg-full); stroke: color-mix(in srgb, var(--bg-full) 60%, #fff); }
.bg-i.full circle.glow { fill: var(--bg-full-glow); }
.bg-i circle.glow { fill: transparent; }
.lk-light .bg-i.full text { fill: #ffffff; }
.bg-i.full text { fill: #ffffff; }
.bg-i.over circle.body { fill: color-mix(in srgb, var(--bg-over) 35%, var(--bg-isl)); stroke: var(--bg-over); }
.bg-i.over text { fill: var(--bg-over); }
.lk-light .bg-i.over text { fill: #a3102a; }
.bg-i.sel circle.ring { stroke: var(--bg-sel); fill: none; }
.bg-i circle.ring { stroke: transparent; fill: none; }
.bg-i.hl circle.ring { stroke: var(--bg-hl); stroke-dasharray: 0.16 0.1; }
.lk-won .bg-i circle.body { fill: var(--bg-full); }
.bg-status.cut { color: var(--warm); font-weight: 650; }
.bg-line { margin: 0; min-height: 20px; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.45; }
.bg-line b { color: var(--strong); font-weight: 700; }
.bg-line .warn { color: var(--warm); font-weight: 650; }
.lk-land .bg-panel { justify-content: flex-start; }
@keyframes bg-draw { from { stroke-dasharray: 0 1; } to { stroke-dasharray: 1 0; } }
.bg-prog { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line2); }
.bg-prog-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); font-weight: 650; }
.bg-prog-row b { color: var(--strong); font-variant-numeric: tabular-nums; }
.bg-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bg-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #2fbf86, #5ee6a8); transition: width .3s ease; }
.lk-port .bg-prog { display: none; }