/* Hídépítő (Hashi). SVG units: one grid cell = 100. Dark water, graphite islands, white bridges. */
.h-board {
  position: relative;
  width: 100%;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--game) 9%, transparent), transparent 65%),
    #121214;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  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: rgba(255, 255, 255, .16); }

/* Bridges */
.h-bridge line {
  stroke: rgba(255, 255, 255, .9); stroke-width: 8; stroke-linecap: round;
  display: none;
  transition: stroke .3s var(--ease-out);
}
.h-bridge[data-v="1"] .l1,
.h-bridge[data-v="2"] .l2 { display: inline; }
.h-bridge.fresh line { stroke-dasharray: 1; animation: h-draw .26s var(--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(--accent); }

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

/* Islands */
.h-island { transform-box: fill-box; transform-origin: center; }
.h-disc {
  fill: #2c2c2e; stroke: rgba(255, 255, 255, .16); stroke-width: 2.5;
  transition: fill .22s var(--ease-out), stroke .22s;
}
.h-num {
  fill: #fff;
  font-family: var(--font); font-weight: 600; font-size: 40px; letter-spacing: -0.02em;
  pointer-events: none;
  transition: fill .18s;
}
.h-ring { fill: none; stroke: transparent; stroke-width: 6; transition: stroke .15s; }
.h-island.active .h-ring { stroke: color-mix(in srgb, var(--game) 70%, white); }
.h-island.active .h-disc { fill: #3a3a3c; }
.h-island.done .h-disc { fill: var(--game); stroke: color-mix(in srgb, var(--game) 60%, white); }
.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; }

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

/* Server hints: the bridge(s) a hint points at, and the islands that explain why. */
.h-hintline {
  stroke: var(--game); stroke-width: 30; stroke-linecap: round; opacity: .38;
  animation: h-hint-pulse 1.2s ease-in-out infinite;
}
.h-hintline.warn { stroke: var(--danger); }
@keyframes h-hint-pulse { 50% { opacity: .16; } }
.h-island.hint .h-ring { stroke: var(--warn); stroke-dasharray: none; animation: h-ring-pulse 1.2s ease-in-out infinite; }
@keyframes h-ring-pulse { 50% { stroke: color-mix(in srgb, var(--warn) 35%, transparent); } }