/* Hashi on the pencil-puzzle look (games/static/games/puzzles/kit/puzzles.css
   and kit.css, loaded before this): its accent, a deep graphite teal beside
   Star Battle's indigo and Fillomino's terracotta, and how its islands and
   bridges are drawn. The page, bars, dock, sheets and result are the kit's.
   (Hashi was a harbor chart on a dark chart table until the owner retired
   it on 2026-10-13: docs/design-system.md, "Inside a game: Hashi".)
   Cell units: one cell is 1 wide. */
:root {
  --accent: #0c6670;         /* the one filled button: 6.7:1 with white */
  --accent-ink: #ffffff;
  --good-ink: #24603f;       /* a finished island's numeral: 6:1 on its wash */
  --good-wash: color-mix(in srgb, var(--good) 16%, var(--paper-2));
  --bad-wash: color-mix(in srgb, var(--bad) 11%, var(--paper-2));
}

/* ── the emblem: islands joined, one lit in the accent ──────────────────── */
.mark { display: block; overflow: visible; }
.mark-isle { fill: var(--paper-2); stroke: var(--ink); stroke-width: .16; }
.mark-isle.lit { fill: var(--accent); }
.mark-bridge { fill: none; stroke: var(--ink); stroke-width: .13; }

/* ── the board ──────────────────────────────────────────────────────────── */
/* The frame stands off the grid, so it can be a little lighter than a region's. */
.hashi .frame, .hashi.thumb .frame { stroke-width: .08; }
.hashi .isle { cursor: pointer; touch-action: none; }
.hashi .isle .land { fill: var(--paper-2); stroke: var(--ink); stroke-width: .07; transition: fill var(--m-press, 120ms) ease, stroke var(--m-press, 120ms) ease; }
.hashi .isle .num { font: 800 .6px/1 var(--ui); font-variant-numeric: proportional-nums lining-nums; fill: var(--ink); pointer-events: none; }
.hashi .isle .halo { fill: none; stroke: transparent; stroke-width: .07; }
.hashi .isle .ring { fill: none; stroke: none; }
/* Finished: the island steps back, washed green in a green ring with a fine
   ring inside it. Too many: a dashed red ring on a pink wash. Each has a
   shape as well as a color. */
.hashi .isle.done .land { fill: var(--good-wash); stroke: var(--good); }
.hashi .isle.done .ring { stroke: var(--good); stroke-width: .025; }
.hashi .isle.done .num { fill: var(--good-ink); }
.hashi .isle.over .land { fill: var(--bad-wash); stroke: var(--bad); stroke-width: .08; stroke-dasharray: .13 .07; }
.hashi .isle.over .num { fill: var(--bad); }
/* Chosen: the cursor's signal-blue ring and tint. */
.hashi .isle.sel .halo, .hashi .isle.aim .halo { stroke: var(--pick); }
.hashi .isle.sel .land { fill: color-mix(in srgb, var(--pick) 14%, var(--paper-2)); }
.hashi .isle.aim .halo { stroke-dasharray: .14 .08; }
@media (hover: hover) { .hashi .isle:not(.sel):not(.aim):hover .halo { stroke: color-mix(in srgb, var(--pick) 45%, transparent); } }
.hashi .bridge { stroke: var(--ink); stroke-width: .07; }
/* The bridge in the way: red for a pulse's time (a beat, with motion), then
   it fades back to ink: a fade this short stays under reduced motion. */
.hashi .bridges .flash .bridge { stroke: var(--bad); stroke-width: .11; }
.hashi .bridges .bridge { transition: stroke var(--m-sheet-out, 150ms) ease-out, stroke-width var(--m-sheet-out, 150ms) ease-out; }
.hashi .preview .next { stroke: var(--pick); stroke-width: .07; stroke-dasharray: .16 .1; }
.hashi .preview .blocked-x { stroke: var(--bad); stroke-width: .06; stroke-linecap: round; fill: none; }
.hashi .preview .clear, .hashi .preview .blocked { stroke: var(--bad); stroke-width: .06; stroke-dasharray: .1 .1; }
.hashi .guides .guide { stroke: var(--pick); stroke-width: .04; stroke-dasharray: .02 .12; stroke-linecap: round; }
.solved .hashi .isle { cursor: default; }
/* An island scrolled into view keeps a little paper round it. */
.hashi .isle .halo { scroll-margin: 40px; }
.hashi .isle .land { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .hashi .bridges .flash .bridge { animation: flash .45s ease 2; }
  /* Solved: the islands settle one after another outward through the network. */
  .hashi .isle.settle .land { animation: settle .34s ease-out var(--settle, 0ms) both; }
}
@keyframes flash { 50% { stroke-width: .17; } }
@keyframes settle { 40% { transform: scale(1.22); stroke-width: .1; } }

/* ── a small puzzle: a daily's card, How to play ────────────────────────── */
.mini { display: block; overflow: visible; }
.hashi.thumb .sheet { fill: var(--paper-2); stroke: none; }
.hashi.thumb.solved .land { fill: var(--good-wash); stroke: var(--good); }

/* Waiting says what's happening only after a moment, and holds its place meanwhile. */
.late { visibility: hidden; }