/* Light Lab 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(--cell-edge); stroke-width: 1.5; }
.wall-a { stop-color: var(--wall-a); }
.wall-b { stop-color: var(--wall-b); }
.wall { fill: url(#wallFill); stroke: var(--wall-edge); stroke-width: 1.5; }
.rock-shadow { fill: var(--bg-0); opacity: 0.55; }
.rock-f1 { fill: color-mix(in srgb, var(--wall-a) 62%, var(--bolt)); }
.rock-f2 { fill: var(--wall-a); }
.rock-f3 { fill: color-mix(in srgb, var(--wall-a) 45%, var(--wall-b)); }
.rock-f4 { fill: var(--wall-b); }
.rock-f1, .rock-f2, .rock-f3, .rock-f4 { stroke: color-mix(in srgb, var(--wall-b) 70%, var(--bg-0)); stroke-width: 1; stroke-linejoin: round; }
.rock-edge { fill: none; stroke: var(--wall-edge); stroke-width: 2; stroke-linejoin: round; }
.rock-rim { fill: none; stroke: color-mix(in srgb, var(--bolt) 70%, transparent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

.mirror { stroke: var(--mirror); stroke-width: 8; stroke-linecap: round; }
.mirror.halo { stroke: var(--mirror-halo); stroke-width: 14; opacity: 0.45; filter: url(#soft); }
.mirror.bolted { stroke: var(--fixed); stroke-width: 8; }
.bolt { fill: var(--bolt); stroke: var(--bolt-edge); stroke-width: 1.5; }

.beam { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.beam.halo { stroke: var(--light-halo); stroke-width: 18; opacity: 0.55; filter: url(#soft); }
.beam.body { stroke: var(--light-body); stroke-width: 8; }
.beam.core { stroke: var(--light-core); stroke-width: 2.6; }

.lamp-halo { fill: var(--lamp-halo); opacity: 0.5; filter: url(#soft); }
.lamp-ring { fill: var(--lamp-fill); stroke: var(--lamp-edge); stroke-width: 4; }
.lamp-core { fill: var(--lamp-core); }

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

.hint-spot { fill: var(--amber); opacity: 0.28; }
.hint-mirror { stroke: var(--mirror); stroke-width: 7; stroke-linecap: round; opacity: 0.65; }
.hint-stray { fill: none; stroke: var(--warn); stroke-width: 5; }

.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(96 * var(--u));
  gap: calc(40 * 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 svg { flex: none; width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
.tray svg[hidden] { display: none; }
.tray line { stroke: var(--mirror); stroke-width: 5; stroke-linecap: round; }
.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) {
  .board.won svg { animation: none; }
}
@media (min-aspect-ratio: 5/4) {
  .board { margin: 0; }
}