/* Broer (Hashi) */
.hashi { background: #e3f1fb; }
.hashi .cell { position: relative; background: transparent; border-color: #c9dff0; cursor: pointer; }
.hashi .bridges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hashi .bridges line { stroke: var(--line); stroke-width: 0.07; stroke-linecap: round; }
.hashi .island {
  position: relative; z-index: 2; width: 72%; aspect-ratio: 1; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  font-size: calc(min(100vw, 480px) / var(--n) * 0.36);
}
.hashi .island.done { background: #dcefdc; border-color: var(--good); color: var(--good); }
.hashi .island.bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.hashi .island.sel { box-shadow: 0 0 0 3px var(--accent); }
.hashi:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }