/* Flow Pipes only. The page, panels and buttons come from kit/midnight.css. */
.board {
  flex: none;
  width: var(--board);
  height: var(--board);
  margin-top: auto;
  display: grid;
  place-items: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  grid-area: board;
}
.board:focus, body.nav .board:focus { outline: none; }
.board svg { display: block; width: 100%; height: 100%; }

.cell { fill: var(--cell); stroke: var(--edge); stroke-width: 2; }
.tile.hinted .cell { stroke: var(--amber); stroke-width: 3; }
.turn { transform-origin: 50px 50px; transition: transform 0.14s ease-out; }
.ch { fill: none; stroke-linecap: butt; }
.ch-edge { stroke: var(--edge); stroke-width: 26; }
.ch-in { stroke: var(--bg-1); stroke-width: 22; }
.ch-halo, .ch-body, .ch-core { display: none; }
.wet .ch-halo { display: inline; stroke: var(--light-halo); stroke-width: 22; opacity: 0.5; filter: url(#soft); }
.wet .ch-body { display: inline; stroke: var(--light-body); stroke-width: 10; }
.wet .ch-core { display: inline; stroke: var(--light-core); stroke-width: 3; }

.lamp-halo { fill: var(--lamp-halo); opacity: 0.5; filter: url(#soft); }
.lamp-ring { fill: var(--lamp-fill); stroke: var(--lamp-edge); stroke-width: 5; }
.lamp-core { fill: var(--lamp-core); }
.lamp.off .lamp-halo, .lamp.off .lamp-core { display: none; }
.lamp.off .lamp-ring { stroke: var(--fixed); }
.lamp.can { cursor: pointer; }

.crystal .halo { fill: none; }
.crystal.lit .halo { fill: var(--amber); opacity: 0.55; filter: url(#soft); }

.hit { fill: transparent; cursor: pointer; }
.hit.none { cursor: default; }
.cursor { display: none; fill: none; stroke: var(--focus); stroke-width: 5; }
body.nav .board:focus .cursor { display: block; }

.tray {
  flex: none;
  width: 100%;
  min-height: calc(84 * var(--u));
  padding: calc(8 * var(--u)) calc(24 * var(--u));
  font-size: max(calc(38 * var(--u)), 14px);
  line-height: 1.2;
  text-align: center;
  grid-area: tray;
}
.tray.say { color: var(--go-ink); }

.board.won svg { animation: won 1.1s ease-out; }
@keyframes won {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .turn { transition: none; }
  .board.won svg { animation: none; }
}
@media (min-aspect-ratio: 5/4) {
  .board { margin: 0; }
}