/* Hídépítő (Hashi). SVG units: one grid cell = 100. */
.h-board {
  --h-ink: var(--text);
  --h-water: color-mix(in srgb, var(--game) 7%, var(--surface));
  position: relative;
  width: 100%;
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 15% 0%, color-mix(in srgb, var(--game) 10%, transparent), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--game) 8%, transparent), transparent 60%),
    var(--h-water);
  border: 1px solid color-mix(in srgb, var(--game) 22%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 60%, transparent);
  overflow: hidden;
  touch-action: none;
  cursor: default;
}
.h-board.h-pointer { cursor: pointer; }
.h-board.locked { cursor: default; }
.h-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Water grid dots help to see alignment. */
.h-dots circle { fill: color-mix(in srgb, var(--game) 30%, var(--line)); opacity: .55; }

/* Bridges */
.h-bridge line {
  stroke: var(--h-ink); stroke-width: 9; stroke-linecap: round;
  display: none;
  transition: stroke .2s;
}
.h-bridge[data-v="1"] .l1,
.h-bridge[data-v="2"] .l2 { display: inline; }
.h-bridge.fresh line { stroke-dasharray: 1; animation: h-draw .22s ease-out both; }
@keyframes h-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.h-bridge.blocked line { stroke: var(--danger); animation: h-blink .7s ease-in-out; }
@keyframes h-blink { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: .25; } }
.h-board.solved .h-bridge line { stroke: var(--game); }

/* Drag / hover preview of the bridge about to change. */
.h-preview {
  stroke: var(--game); stroke-width: 26; stroke-linecap: round;
  opacity: 0; pointer-events: none;
  transition: opacity .12s;
}
.h-preview.on { opacity: .2; }
.h-preview.on.strong { opacity: .38; }
.h-preview.blocked { stroke: var(--danger); }

/* Islands */
.h-disc {
  fill: var(--surface); stroke: var(--h-ink); stroke-width: 6;
  transform-box: fill-box; transform-origin: center;
  transition: fill .18s, stroke .18s;
}
.h-num {
  fill: var(--h-ink);
  font-family: var(--display); font-weight: 700; font-size: 42px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: fill .18s;
}
.h-ring { fill: none; stroke: transparent; stroke-width: 7; transition: stroke .15s; }
.h-island.active .h-ring { stroke: color-mix(in srgb, var(--game) 55%, transparent); }
.h-island.done .h-disc { fill: var(--game); stroke: var(--game); animation: h-pop .25s ease-out; }
.h-island.done .h-num { fill: #fff; }
.h-island.over .h-disc { fill: var(--danger); stroke: var(--danger); }
.h-island.over .h-num { fill: #fff; }
.h-island.closed .h-ring { stroke: var(--warn); stroke-dasharray: 10 8; }
@keyframes h-pop { 50% { transform: scale(1.14); } }

.h-msg {
  min-height: 1.5em; margin: 10px 0 0; text-align: center;
  color: var(--danger); font-size: .92rem; font-weight: 600;
}
.h-msg:empty::before { content: "\00a0"; }

@media (prefers-reduced-motion: reduce) {
  .h-bridge.fresh line, .h-island.done .h-disc, .h-bridge.blocked line { animation: none; }
}