.bridge-play {
  background:
    linear-gradient(135deg, rgba(102,184,197,.18) 0 25%, transparent 25% 50%, rgba(102,184,197,.18) 50% 75%, transparent 75%) 0 0 / 28px 28px,
    #f7fbf8;
}
.bridge-board {
  --grid: 6;
  position:relative;
  width:min(100%, 650px);
  aspect-ratio:1;
  margin:0 auto;
  border:2px solid var(--ink);
  border-radius:8px;
  background:
    radial-gradient(circle at 20% 18%, rgba(119,188,210,.35), transparent 18%),
    radial-gradient(circle at 74% 68%, rgba(119,188,210,.28), transparent 20%),
    linear-gradient(rgba(23,35,31,.08) 1px, transparent 1px) 0 0 / calc(100% / var(--grid)) calc(100% / var(--grid)),
    linear-gradient(90deg, rgba(23,35,31,.08) 1px, transparent 1px) 0 0 / calc(100% / var(--grid)) calc(100% / var(--grid)),
    #f9fcfb;
  box-shadow:0 16px 30px rgba(23,34,31,.12), 5px 5px 0 var(--ink);
  overflow:hidden;
}
.bridge-board[data-challenge="wide"] {
  background:
    radial-gradient(circle at 20% 18%, rgba(119,188,210,.35), transparent 18%),
    radial-gradient(circle at 74% 68%, rgba(254,85,66,.16), transparent 20%),
    linear-gradient(rgba(23,35,31,.09) 1px, transparent 1px) 0 0 / calc(100% / var(--grid)) calc(100% / var(--grid)),
    linear-gradient(90deg, rgba(23,35,31,.09) 1px, transparent 1px) 0 0 / calc(100% / var(--grid)) calc(100% / var(--grid)),
    #f9fcfb;
}
.bridge-board[data-challenge="busy"] {
  background:
    radial-gradient(circle at 18% 22%, rgba(254,85,66,.14), transparent 19%),
    radial-gradient(circle at 77% 70%, rgba(217,70,53,.18), transparent 22%),
    linear-gradient(rgba(23,35,31,.11) 1px, transparent 1px) 0 0 / calc(100% / var(--grid)) calc(100% / var(--grid)),
    linear-gradient(90deg, rgba(23,35,31,.11) 1px, transparent 1px) 0 0 / calc(100% / var(--grid)) calc(100% / var(--grid)),
    #fff9f4;
}
.bridge-board svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible; }
.bridge-line { stroke:var(--coral); stroke-width:4.5; stroke-linecap:round; vector-effect:non-scaling-stroke; filter:drop-shadow(1px 2px 0 rgba(23,35,31,.9)); }
.bridge-line.second { stroke:var(--yellow); }
.island {
  position:absolute;
  z-index:2;
  width:clamp(40px, 8vw, 58px);
  aspect-ratio:1;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--yellow);
  box-shadow:4px 4px 0 var(--ink);
  display:grid;
  place-items:center;
  font:950 clamp(1rem,2.5vw,1.35rem)/1 ui-monospace,monospace;
  transform:translate(-50%,-50%);
  cursor:pointer;
}
.island.selected { background:var(--coral); color:var(--paper); }
.island.satisfied { background:var(--lime); }
.island.over { background:var(--danger-soft); color:var(--danger); }
.island.hint { animation: bridge-hint .68s ease-in-out infinite alternate; }
.island::after { content:""; position:absolute; inset:8px 10px auto; height:7px; border-radius:50%; background:rgba(255,255,255,.38); transform:rotate(-14deg); }
.island:hover { filter:brightness(1.03); }
.bridge-board[data-challenge="wide"] .island { width:clamp(34px, 7vw, 53px); }
.bridge-board[data-challenge="busy"] .island { width:clamp(30px, 5.8vw, 48px); }
@keyframes bridge-hint { to { transform:translate(-50%,-50%) scale(1.12); box-shadow:0 0 0 8px rgba(245,212,109,.35), 4px 4px 0 var(--ink); } }
@media (max-width:600px){ .bridge-board{ border-radius:8px; } .bridge-line{ stroke-width:3.5; } }