/* Island Links: a sea with a faint dot grid, islands as round buttons, bridges drawn in SVG. */
.il-board { position: relative; width: min(100%, 470px); aspect-ratio: 1; margin: 6px auto 0; border-radius: 22px; border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); background:
  radial-gradient(circle, rgba(30, 143, 166, .25) 1.5px, transparent 2px) 0 0 / calc(100% / var(--w)) calc(100% / var(--w)),
  linear-gradient(160deg, #E4F7FA, #BFE9F0); overflow: hidden; touch-action: none; }
:root[data-theme="dark"] .il-board { background: radial-gradient(circle, rgba(120, 220, 240, .18) 1.5px, transparent 2px) 0 0 / calc(100% / var(--w)) calc(100% / var(--w)), linear-gradient(160deg, #0E2A38, #0A1C28); }
.il-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.il-svg line { stroke: #8A5A2B; stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
:root[data-theme="dark"] .il-svg line { stroke: #E3B47A; }
.il-island { position: absolute; left: calc(var(--c) * 100% / var(--w) + 100% / var(--w) * .09); top: calc(var(--r) * 100% / var(--w) + 100% / var(--w) * .09); width: calc(100% / var(--w) * .82); height: calc(100% / var(--w) * .82); border-radius: 50%; border: 2px solid #1E8FA6; background: radial-gradient(circle at 35% 30%, #FFFFFF, #F4E9C8); color: #14324A; font: 800 clamp(14px, 4vw, 22px) var(--display); cursor: pointer; box-shadow: 0 4px 10px rgba(20, 60, 80, .25); padding: 0; transition: transform .12s; z-index: 1; }
.il-island.sel { transform: scale(1.12); background: linear-gradient(170deg, #FFE38F, #F5C542); border-color: #B98600; }
.il-island.ok { background: radial-gradient(circle at 35% 30%, #D8FBE9, #7FD8AE); border-color: #1B8A5E; }
.il-island.over { background: radial-gradient(circle at 35% 30%, #FFE1E1, #FF9C9C); border-color: #C4383C; }
.il-island.solved { background: radial-gradient(circle at 35% 30%, #9FE8C8, #1B8A5E); color: #fff; border-color: transparent; }