/* Pool only. Panels and buttons come from kit/midnight.css, the live-game layout from kit/arcade.css.
   Classic Hall (design/mini-games/puzzles/next/pool/sample-1-green.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: #0a0705; --bg-1: #1a0f08; --bg-2: #2e180e;
  --ink: #f2e6cc; --ink-soft: #cdbb94;
  --edge: rgba(190, 160, 104, 0.72); --edge-bright: rgba(220, 188, 124, 0.92);
  --glow: rgba(255, 216, 130, 0.07); --glow-strong: rgba(255, 216, 130, 0.22); --sheen: rgba(255, 236, 190, 0.08);
  --glass: linear-gradient(180deg, rgba(22, 19, 14, 0.94), rgba(12, 10, 7, 0.96));
  --sheet: linear-gradient(180deg, rgba(36, 28, 18, 0.98), rgba(12, 9, 6, 0.99));
  --veil: rgba(4, 3, 2, 0.62);
  --amber: #e2bb6c; --amber-rgb: 226, 187, 108; --go-ink: #ffe9c2; --focus: #ffe08a; --warn: #ff9a78;
  --pick-a: #efd492; --pick-b: #bf9248; --pick-edge: #ffe8b4; --pick-ink: #1c1206; --pick-sheen: rgba(255, 250, 232, 0.75);
  --say: #ffe08a;
  --rug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 4 68 36 36 68 4 36Z' fill='none' stroke='rgb(140,48,36)' stroke-opacity='.3'/%3E%3Cpath d='M36 18 54 36 36 54 18 36Z' fill='rgb(110,30,26)' fill-opacity='.2' stroke='rgb(180,120,60)' stroke-opacity='.16'/%3E%3Ccircle cx='36' cy='36' r='4' fill='rgb(190,140,70)' fill-opacity='.2'/%3E%3Ccircle cx='0' cy='0' r='6' fill='rgb(110,30,26)' fill-opacity='.24'/%3E%3Ccircle cx='72' cy='0' r='6' fill='rgb(110,30,26)' fill-opacity='.24'/%3E%3Ccircle cx='0' cy='72' r='6' fill='rgb(110,30,26)' fill-opacity='.24'/%3E%3Ccircle cx='72' cy='72' r='6' fill='rgb(110,30,26)' fill-opacity='.24'/%3E%3C/svg%3E");
  --rug-fade: rgba(10, 7, 5, 0.25); --rug-dark: rgba(10, 7, 5, 0.9);
  --tube-bg: rgba(8, 7, 5, 0.86); --tube-edge: #c8a25a; --level-a: #1f7a18; --level-b: #4fb52f; --level-c: #8fe05a;
  --shade-a: #0d3a26; --shade-b: #0a5a3c; --lamp-metal: #6a5230; --trim-a: #caa75a; --trim-b: #fff3c4;
  --lamp-glow: rgba(255, 228, 160, 0.3); --lamp-none: rgba(255, 228, 160, 0);

  /* table, on the canvas */
  --felt: #094f20; --felt-speck-a: rgba(120, 210, 130, 0.05); --felt-speck-b: rgba(0, 18, 6, 0.12);
  --felt-lamp: rgba(150, 255, 170, 0.015); --felt-lamp-none: rgba(150, 255, 170, 0);
  --felt-rim: rgba(0, 16, 6, 0.62); --felt-rim-none: rgba(0, 18, 6, 0);
  --felt-print: rgba(180, 240, 190, 0.2);
  --cushion: #0a4a1d; --cushion-top: #0f6a2d; --cushion-nose: rgba(0, 20, 6, 0.65);
  --rail-a: #6b1c10; --rail-b: #3e0d07;
  --rail-light: rgba(255, 180, 140, 0.22); --rail-none: rgba(255, 180, 140, 0); --rail-dark: rgba(8, 2, 0, 0.6); --rail-dark-none: rgba(8, 2, 0, 0);
  --rail-line: rgba(8, 2, 0, 0.85); --rail-shine: rgba(255, 190, 150, 0.28);
  --sight: #f0ddaa; --sight-edge: rgba(70, 40, 10, 0.8);
  --brass-a: #d9b56c; --brass-b: #93692c; --brass-c: #5a3c14; --brass-line: rgba(50, 30, 8, 0.8); --brass-shine: rgba(255, 246, 210, 0.75);
  --rivet: #f6e2a8; --rivet-dark: #6a481a;
  --hole-a: #000000; --hole-b: #0a0a08; --hole-rim: #1c1208;
  --shadow: rgba(0, 0, 0, 0.74);

  /* balls: 1 to 7, and the same again as stripes */
  --ball-1: #f4b70f; --ball-2: #1646b8; --ball-3: #d3161f; --ball-4: #4f1a8a; --ball-5: #ee6a12; --ball-6: #0e7d3a; --ball-7: #7d1020;
  --ball-8: #0d0d10; --ball-white: #f7f3e6; --ball-num: #181612; --ball-spot: #fbf8ee;
  --ball-sheen: rgba(255, 255, 255, 0.85); --ball-sheen-none: rgba(255, 255, 255, 0);
  --ball-dim: rgba(0, 0, 0, 0.5); --ball-dim-none: rgba(0, 0, 0, 0); --ball-glow: rgba(255, 255, 255, 0.14);
  --ball-shadow: rgba(0, 12, 4, 0.6);

  /* cue and aim */
  --tip: #4f89c9; --ferrule: #f4f0e2; --maple-a: #f0cf94; --maple-b: #c58f4c; --wrap: #2a1a10; --wrap-ring: #d6b35c; --butt-a: #7a2f12; --butt-b: #3a1408; --cue-edge: rgba(30, 14, 4, 0.6); --cue-shadow: rgba(0, 12, 4, 0.34);
  --aim: rgba(255, 255, 255, 0.92); --aim-soft: rgba(255, 255, 255, 0.5); --ghost: rgba(255, 255, 255, 0.85); --bad: rgba(255, 150, 120, 0.9);
  --head: rgba(240, 246, 220, 0.3); --head-fill: rgba(240, 246, 220, 0.05); --hand: rgba(255, 234, 170, 0.85);
}

body { font-family: Palatino, "Palatino Linotype", "Book Antiqua", "Noto Serif", Georgia, serif; overscroll-behavior: none; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--rug-dark), var(--rug-fade) 30%, var(--rug-fade) 70%, var(--rug-dark)), var(--rug);
}
.screen.table { touch-action: none; padding: env(safe-area-inset-top) 0 0; gap: calc(14 * var(--u)); }
.screen.menu { touch-action: manipulation; gap: calc(24 * var(--u)); }

.bar {
  position: relative;
  height: max(calc(64 * var(--u)), 44px);
  justify-content: flex-start;
  gap: calc(22 * var(--u));
  background: none;
  border-width: 0 0 max(1px, calc(1.5 * var(--u)));
  border-radius: 0;
  box-shadow: none;
}
.rule { flex: none; width: max(1px, calc(2 * var(--u))); height: 56%; background: var(--edge); }
.bar h1 { font-size: max(calc(40 * var(--u)), 19px); }
.bar .icon svg { width: max(calc(52 * var(--u)), 24px); height: max(calc(52 * var(--u)), 24px); }
.lamp { position: absolute; left: 26%; top: 0; width: 46%; height: 100%; pointer-events: none; filter: drop-shadow(0 calc(8 * var(--u)) calc(16 * var(--u)) var(--lamp-glow)); }
.shade-a { stop-color: var(--shade-a); }
.shade-b { stop-color: var(--shade-b); }
.trim-a { stop-color: var(--trim-a); }
.trim-b { stop-color: var(--trim-b); }
.lamp-rod { fill: none; stroke: var(--lamp-metal); stroke-width: 3; }
.lamp-top { fill: var(--lamp-metal); }
.menu-link {
  margin-left: auto;
  height: max(calc(60 * var(--u)), 40px);
  padding: 0 calc(16 * var(--u));
  color: var(--ink-soft);
  font: inherit;
  font-size: max(calc(30 * var(--u)), 14px);
  background: none;
  border: 0;
  cursor: pointer;
}

/* Plates: the name and the balls still to pot */
.table .stats { width: calc(100% - calc(64 * var(--u))); gap: calc(24 * var(--u)); }
.seat {
  height: max(calc(62 * var(--u)), 50px) !important;
  flex-direction: column;
  gap: 2px;
  padding: 0 calc(10 * var(--u));
  font-size: max(calc(30 * var(--u)), 13px) !important;
  line-height: 1.1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.seat.on { border-color: var(--amber); box-shadow: 0 0 calc(18 * var(--u)) rgba(var(--amber-rgb), 0.5), inset 0 1px 0 var(--sheen); }
.who { white-space: nowrap; }
.row { flex: none; width: 100%; max-width: calc(7.4 * max(calc(38 * var(--u)), 15px)); height: max(calc(38 * var(--u)), 15px); }
.seat.open .row { display: none; }

@media (min-width: 480px) and (max-aspect-ratio: 5/4) {
  .seat { flex-direction: row; gap: calc(22 * var(--u)); }
  .row { flex: 0 0 calc(7 * max(calc(38 * var(--u)), 15px)); width: calc(7 * max(calc(38 * var(--u)), 15px)); }
  .seat.open .row { display: none; }
}

/* The table, with the power bar on its right */
.stage { flex: 1 1 0; display: flex; align-items: stretch; padding: 0 calc(8 * var(--u)); gap: calc(4 * var(--u)); overflow: visible; }
.felt { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; touch-action: none; }
.power { --p: 0; flex: none; width: max(calc(72 * var(--u)), 44px); display: flex; align-items: center; justify-content: center; touch-action: none; cursor: pointer; }
.tube { position: relative; display: block; width: max(calc(38 * var(--u)), 14px); height: 60%; padding: max(2px, calc(5 * var(--u))); background: var(--tube-bg); border: max(1px, calc(3 * var(--u))) solid var(--tube-edge); border-radius: 999px; box-shadow: 0 0 calc(10 * var(--u)) var(--glow-strong); }
.level { position: absolute; left: max(2px, calc(5 * var(--u))); right: max(2px, calc(5 * var(--u))); bottom: max(2px, calc(5 * var(--u))); height: calc((100% - 2 * max(2px, calc(5 * var(--u)))) * var(--p)); background: linear-gradient(0deg, var(--level-a), var(--level-b) 60%, var(--level-c)); border-radius: 999px; }
.power.off { opacity: 0.45; cursor: default; }

.tray {
  flex: none;
  width: calc(100% - calc(48 * var(--u)));
  height: max(calc(76 * var(--u)), 46px);
  margin-bottom: max(calc(14 * var(--u)), env(safe-area-inset-bottom));
  padding: 0 calc(16 * var(--u));
  font-size: max(calc(38 * var(--u)), 14px);
  line-height: 1.15;
  text-align: center;
  grid-area: tray;
  clip-path: polygon(calc(10 * var(--u)) 0, calc(100% - calc(10 * var(--u))) 0, 100% calc(10 * var(--u)), 100% calc(100% - calc(10 * var(--u))), calc(100% - calc(10 * var(--u))) 100%, calc(10 * var(--u)) 100%, 0 calc(100% - calc(10 * var(--u))), 0 calc(10 * var(--u)));
  border-radius: 0;
}
.tray.say { color: var(--say); }

/* 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: 400; }
.option.off { opacity: 0.45; }
.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); }
.sheet p { line-height: 1.3; margin-bottom: calc(24 * var(--u)); }

/* Wide screens: the table gets all the room it can, its power bar beside it, the panel on the right */
@media (min-aspect-ratio: 5/4) {
  :root {
    --panel: min(30vw, 430px);
    --board: calc(100vw - var(--panel) - 36px - env(safe-area-inset-left) - env(safe-area-inset-right));
    --u: calc(var(--panel) / 900);
  }
  @supports (height: 1dvh) {
    :root { --board: calc(100vw - var(--panel) - 36px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  }
  .screen.table { padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); gap: 0; column-gap: 12px; row-gap: calc(28 * var(--u)); }
  .stage { flex: none; width: var(--board); height: calc(100dvh - 12px); padding: 0; }
  .bar { border-width: max(1px, calc(2 * var(--u))); border-radius: calc(16 * var(--u)); background: var(--glass); }
  .lamp { display: none; }
  .table .stats { width: 100%; grid-template-columns: 1fr; gap: calc(16 * var(--u)); }
  .tray { width: 100%; margin: 0; height: auto; min-height: max(calc(110 * var(--u)), 48px); padding: calc(8 * var(--u)) calc(20 * var(--u)); clip-path: none; border-radius: calc(16 * var(--u)); }
  .seat { height: auto !important; min-height: 50px; padding: calc(8 * var(--u)) calc(14 * var(--u)); }
  .screen.menu { row-gap: calc(22 * var(--u)); padding: 0; column-gap: 12px; }
  .menu .hero { width: var(--board); height: calc(100dvh - 12px); flex: none; }
  .menu .option:nth-of-type(1) { grid-area: stats; }
  .menu #levelBox { grid-area: tray; }
  .go-row { grid-area: actions; margin: 0; }
  .menu .bar { grid-area: bar; }
}
@media (prefers-reduced-motion: reduce) {
  .seat { transition: none; }
}