/* Air Hockey only. Panels and buttons come from kit/midnight.css, the live-game layout from kit/arcade.css.
   Neon Arcade (design/mini-games/puzzles/next/air/sample-1-neon.png). Every colour of the game, on the page and on the canvas,
   is in this block: js/art.js reads the canvas ones from here. */
:root {
  /* page */
  --bg-0: #000000; --bg-1: #020305; --bg-2: #07090f;
  --ink: #f2f6ff; --ink-soft: #aab4c8;
  --edge: rgba(120, 150, 210, 0.5); --edge-bright: rgba(90, 190, 255, 0.85);
  --glow: rgba(40, 150, 255, 0.14); --glow-strong: rgba(255, 40, 150, 0.34); --sheen: rgba(200, 225, 255, 0.1);
  --glass: linear-gradient(180deg, rgba(16, 20, 30, 0.88), rgba(5, 6, 10, 0.92));
  --sheet: linear-gradient(180deg, rgba(14, 16, 26, 0.98), rgba(3, 3, 7, 0.99));
  --veil: rgba(0, 0, 0, 0.66);
  --bar-line: rgba(200, 212, 232, 0.14);
  --amber: #ff2d95; --amber-rgb: 255, 45, 149; --go-ink: #ffd6ec; --focus: #5ad1ff; --warn: #ff7a7a;
  --pick-a: #ff74bb; --pick-b: #e8188a; --pick-edge: #ffd0e8; --pick-ink: #16020c; --pick-sheen: rgba(255, 235, 245, 0.7);

  /* table, on the canvas */
  --blue: #1ea7ff; --blue-hot: #d8f8ff; --blue-glow: rgba(20, 140, 255, 0.85); --blue-haze: rgba(10, 110, 255, 0.2); --blue-soft: rgba(20, 130, 255, 0.075); --blue-none: rgba(20, 130, 255, 0);
  --pink: #ff1f8f; --pink-hot: #ffe6f4; --pink-glow: rgba(255, 20, 140, 0.85); --pink-haze: rgba(255, 10, 120, 0.2); --pink-soft: rgba(255, 20, 130, 0.09); --pink-none: rgba(255, 20, 130, 0);
  --deck-top: #0b1119; --deck-bottom: #0c090f;
  --frame-a: rgba(150, 160, 178, 0.28); --frame-b: #08090c; --frame-c: rgba(120, 128, 142, 0.7); --frame-shine: rgba(238, 244, 255, 0.92); --frame-none: rgba(120, 128, 142, 0);
  --hole: rgba(0, 0, 0, 0.95); --hole-lip: rgba(190, 205, 235, 0.42);
  --line: rgba(195, 205, 225, 0.62); --line-fade: rgba(195, 205, 225, 0.2);
  --slot-a: #000000; --slot-b: #05060b;
  --digit: rgba(200, 212, 232, 0.32); --name: rgba(200, 212, 232, 0.4);

  /* mallets and puck */
  --metal-a: #5a6372; --metal-b: #20252e; --metal-c: #0a0c11; --metal-shine: rgba(235, 244, 255, 0.75); --metal-none: rgba(235, 244, 255, 0);
  --blue-metal-a: #63758f; --blue-metal-b: #1a2a3f; --pink-metal-a: #8f6b86; --pink-metal-b: #3a1a33;
  --mallet-shadow: rgba(0, 0, 0, 0.6);
  --puck: #ffffff; --puck-core: #f4fbff;
  --flash-blue: rgba(40, 170, 255, 0.5); --flash-pink: rgba(255, 40, 150, 0.5);
  --serve: rgba(255, 255, 255, 0.7);
}

body { font-family: "Helvetica Neue", "Avenir Next", "Segoe UI", Roboto, system-ui, sans-serif; font-weight: 300; overscroll-behavior: none; }
.screen.rink { width: 100%; max-width: none; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); gap: 0; touch-action: none; }
.screen.menu { touch-action: manipulation; gap: calc(24 * var(--u)); }

/* Slim bar: back arrow and the name */
.bar.slim {
  height: calc(max(calc(56 * var(--u)), 44px) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: none;
  border-width: 0 0 max(1px, calc(1 * var(--u)));
  border-color: var(--bar-line);
  border-radius: 0;
  box-shadow: none;
}
.bar h1 { font-weight: 200; font-size: max(calc(44 * var(--u)), 19px); }
.bar .icon svg { stroke-width: 1.4; }
.menu .bar { border-radius: 0; background: none; box-shadow: none; border-width: 0 0 1px; }
.stage { flex: 1 1 0; width: 100%; }
.stage canvas { touch-action: none; }
@media (hover: hover) { .stage { cursor: none; } }

/* Start screen */
.hero { position: relative; flex: 1 1 0; min-height: 0; width: 100%; grid-area: board; }
.hero canvas { position: absolute; inset: 0; display: block; }
.option { flex: none; width: 100%; flex-direction: column; gap: calc(16 * var(--u)); padding: calc(16 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); }
.option h2 { margin: 0; font-size: max(calc(40 * var(--u)), 15px); font-weight: 300; }
.option.off { opacity: 0.45; }
.btn { font-weight: 300; }
.choices { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(20 * var(--u)); }
.pick.on {
  color: var(--pick-ink);
  font-weight: 600;
  border-color: var(--pick-edge);
  background: linear-gradient(180deg, var(--pick-a), var(--pick-b));
  box-shadow: 0 0 calc(18 * var(--u)) rgba(var(--amber-rgb), 0.5), inset 0 1px 0 var(--pick-sheen);
}
.pick.on::before { content: "\2713"; margin-right: 0.35em; }
.pick:disabled.on { opacity: 0.55; }
.go-row { flex: none; width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(20 * var(--u)); margin-bottom: max(calc(24 * var(--u)), env(safe-area-inset-bottom)); }
.play { height: max(calc(112 * var(--u)), 52px); font-size: max(calc(58 * var(--u)), 22px); }

/* Result: with two players the far player gets their own lines, the right way up for them */
.sheet h2, .sheet p { font-weight: 300; }
.far { transform: rotate(180deg); padding-bottom: calc(26 * var(--u)); margin-bottom: calc(26 * var(--u)); }
.far h2 { font-size: calc(60 * var(--u)); }
.far p { margin: calc(12 * var(--u)) 0 0; font-size: calc(36 * var(--u)); }
.sheet p { margin-top: calc(16 * var(--u)); }

/* Wide screens: the bar stands up along the left edge and the table lies across all the rest */
@media (min-aspect-ratio: 5/4) {
  .screen.rink { display: flex; flex-direction: row; align-items: stretch; }
  .bar.slim {
    flex: none;
    width: 50px;
    height: 100%;
    padding: max(6px, env(safe-area-inset-top)) 0 6px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-width: 0 1px 0 0;
  }
  .bar.slim h1 { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 18px; white-space: nowrap; }
  .stage { flex: 1 1 0; height: 100%; width: auto; min-width: 0; }
  .screen.menu { row-gap: calc(22 * var(--u)); column-gap: 24px; padding: 0; }
  .menu .bar { grid-area: bar; }
  .menu .hero { width: var(--board); height: var(--board); flex: none; }
  .menu .option:nth-of-type(1) { grid-area: stats; }
  .menu #levelBox { grid-area: tray; }
  .go-row { grid-area: actions; margin: 0; }
}