/* Carrom only. Panels and buttons come from kit/midnight.css, the live-game layout from kit/arcade.css.
   Classic Teak (design/mini-games/puzzles/next/carrom/sample-1-teak.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: #0e0502; --bg-1: #241006; --bg-2: #4a2410;
  --ink: #f6e6c6; --ink-soft: #d6bc90;
  --edge: rgba(214, 172, 104, 0.72); --edge-bright: rgba(236, 196, 128, 0.92);
  --glow: rgba(255, 170, 70, 0.1); --glow-strong: rgba(255, 170, 70, 0.28); --sheen: rgba(255, 228, 176, 0.12);
  --glass: linear-gradient(180deg, rgba(46, 24, 12, 0.92), rgba(22, 10, 5, 0.94));
  --sheet: linear-gradient(180deg, rgba(62, 32, 15, 0.98), rgba(26, 12, 5, 0.99));
  --veil: rgba(8, 3, 1, 0.62);
  --amber: #e8b45a; --amber-rgb: 232, 180, 90; --go-ink: #ffe9c2; --focus: #ffd98a; --warn: #ff9a78;
  --pick-a: #f6d792; --pick-b: #cf9a4a; --pick-edge: #ffe6b0; --pick-ink: #2a1406; --pick-sheen: rgba(255, 250, 232, 0.75);
  --say: #ffd98a;
  --bar-bg: linear-gradient(90deg, rgba(14, 5, 2, 0.9), rgba(140, 66, 18, 0.72) 60%, rgba(14, 5, 2, 0.9));
  --track: rgba(6, 2, 0, 0.7); --fill-a: #b98a4e; --fill-b: #e7c68f;
  --thumb-a: #fff4dc; --thumb-b: #e2c697; --thumb-ring: #b3242a; --thumb-edge: #8a6a3a;
  --off-man-light: #e9cf9f; --off-man-dark: #4a2413; --man-edge: rgba(0, 0, 0, 0.45);

  /* board, on the canvas */
  --teak-wash: rgba(203, 118, 36, 0.42); --teak-fallback-a: #d9963f; --teak-fallback-b: #b56f22;
  --lamp-core: rgba(255, 214, 150, 0.12); --lamp-mid: rgba(255, 196, 110, 0.03); --lamp-rim: rgba(52, 20, 2, 0.42);
  --lip: rgba(26, 8, 0, 0.62); --lip-none: rgba(26, 8, 0, 0);
  --rail-fallback-a: #6b1f12; --rail-fallback-b: #3a0d07;
  --rail-light: rgba(255, 180, 130, 0.24); --rail-lamp: rgba(255, 196, 140, 0.42); --rail-lamp-low: rgba(255, 196, 140, 0.14); --rail-none: rgba(255, 170, 120, 0); --rail-dark: rgba(10, 2, 0, 0.62); --rail-dark-none: rgba(10, 2, 0, 0);
  --rail-line: rgba(8, 2, 0, 0.8); --rail-shine: rgba(255, 200, 150, 0.32);
  --shadow: rgba(0, 0, 0, 0.72);
  --print: #2a1206; --print-soft: rgba(42, 18, 6, 0.75);
  --print-red: #a8281c; --print-red-dark: #6e140c;
  --petal-red: #8c2318; --petal-red-b: #6a160e; --petal-dark: #4a2413; --petal-dark-b: #2e1408;
  --hole-a: #060301; --hole-b: #1c0f07; --pocket-rim: #1a0a03; --pocket-shine: rgba(255, 214, 150, 0.6);
  --net: rgba(236, 214, 170, 0.78); --net-shade: rgba(4, 2, 0, 0.82); --net-none: rgba(4, 2, 0, 0);

  /* men */
  --disc-shadow: rgba(16, 5, 0, 0.62);
  --light-a: #fbe8bf; --light-b: #e3bf85; --light-c: #b98f55; --light-line: rgba(128, 88, 40, 0.62);
  --dark-a: #7b4a2c; --dark-b: #4a2615; --dark-c: #23100a; --dark-line: rgba(10, 3, 0, 0.72);
  --queen-a: #f4524f; --queen-b: #c8181e; --queen-c: #7d0a0e; --queen-line: rgba(70, 0, 0, 0.62);
  --striker-a: #fff6e2; --striker-b: #efdcb4; --striker-c: #c7a772; --striker-ring: #b3242a;
  --disc-sheen: rgba(255, 255, 255, 0.5); --disc-sheen-dark: rgba(255, 226, 190, 0.2); --disc-sheen-none: rgba(255, 255, 255, 0);

  /* aim */
  --aim: rgba(255, 244, 214, 0.95); --aim-soft: rgba(255, 244, 214, 0.5); --aim-ghost: rgba(255, 244, 214, 0.75);
  --hint: rgba(255, 226, 150, 0.85);
  --power-low: #ffd467; --power-mid: #ff9a2e; --power-high: #ff4a2e; --power-track: rgba(20, 8, 2, 0.5); --band: rgba(255, 196, 90, 0.5);
}

body { font-family: Palatino, "Palatino Linotype", "Book Antiqua", "Noto Serif", Georgia, serif; overscroll-behavior: none; }
.screen.table { touch-action: none; padding-left: 0; padding-right: 0; }
.screen.menu { touch-action: manipulation; gap: calc(24 * var(--u)); }

/* The strip along the top, as on the sample */
.bar {
  height: max(calc(84 * var(--u)), 44px);
  justify-content: flex-start;
  gap: calc(22 * var(--u));
  background: var(--bar-bg);
  border-width: 0 0 max(1px, calc(2 * var(--u)));
  border-radius: 0;
  box-shadow: none;
}
.rule { flex: none; width: max(1px, calc(2 * var(--u))); height: 60%; background: var(--edge); }
.bar h1 { font-size: max(calc(50 * var(--u)), 20px); }
.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(34 * var(--u)), 14px);
  background: none;
  border: 0;
  cursor: pointer;
}
.screen.table .bar { width: 100%; }

/* Plates */
.table .stats { width: calc(100% - calc(96 * var(--u))); gap: calc(40 * var(--u)); }
.seat {
  height: max(calc(78 * var(--u)), 36px) !important;
  gap: calc(16 * var(--u));
  font-size: max(calc(44 * var(--u)), 16px) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.seat b { font-weight: 400; min-width: 1.2em; text-align: center; }
.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); }
.man { flex: none; width: max(calc(30 * var(--u)), 12px); height: max(calc(30 * var(--u)), 12px); border-radius: 50%; border: 1px solid var(--man-edge); }
.man.light { background: var(--off-man-light); }
.man.dark { background: var(--off-man-dark); }

/* The board: as wide as the screen, like the sample, with spare height above the plates and below the prompt */
.stage { flex: 0 1 calc(1024 * var(--u)); }
.table .stats { margin-top: auto; }
.tray {
  flex: none;
  width: calc(100% - calc(64 * var(--u)));
  height: max(calc(84 * var(--u)), 48px);
  padding: 0 calc(20 * var(--u));
  font-size: max(calc(38 * var(--u)), 14px);
  line-height: 1.15;
  text-align: center;
  grid-area: tray;
  margin-bottom: auto;
}
.tray.say { color: var(--say); }

/* The striker slider */
.table .controls { padding: 0 calc(32 * var(--u)) max(calc(24 * var(--u)), env(safe-area-inset-bottom)); }
.strikebar { flex: 1; min-width: 0; height: max(calc(104 * var(--u)), 56px); gap: calc(30 * var(--u)); padding: 0 calc(30 * var(--u)); font-size: max(calc(36 * var(--u)), 14px); }
.slider { --at: 50%; --thumb: max(calc(66 * var(--u)), 32px); position: relative; flex: 1; min-width: 0; height: 100%; touch-action: none; cursor: pointer; }
.slider::before {
  content: "";
  position: absolute;
  left: calc(var(--thumb) / 2);
  right: calc(var(--thumb) / 2);
  top: 50%;
  height: max(calc(22 * var(--u)), 8px);
  transform: translateY(-50%);
  background: var(--track);
  border: 1px solid var(--edge);
  border-radius: 999px;
}
.fill {
  position: absolute;
  left: calc(var(--thumb) / 2);
  width: calc((100% - var(--thumb)) * var(--t, 0.5));
  top: 50%;
  height: max(calc(22 * var(--u)), 8px);
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--fill-a), var(--fill-b));
  border-radius: 999px;
}
.thumb {
  position: absolute;
  left: calc((100% - var(--thumb)) * var(--t, 0.5));
  top: 50%;
  width: var(--thumb);
  height: var(--thumb);
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid var(--thumb-edge);
  background:
    radial-gradient(circle, transparent 42%, var(--thumb-ring) 43%, var(--thumb-ring) 57%, transparent 58%),
    radial-gradient(circle at 35% 30%, var(--thumb-a), var(--thumb-b));
  box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) var(--disc-shadow);
}
.slider.off { opacity: 0.45; cursor: default; }
body.nav .slider:focus { outline-offset: 0; }

/* 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; }

@media (min-aspect-ratio: 5/4) {
  :root { --panel: min(calc(100vw - var(--board) - 56px - env(safe-area-inset-left) - env(safe-area-inset-right)), 520px); }
  .stage { flex: none; }
  .screen.table { padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  .table .stats, .tray { width: 100%; margin: 0; }
  .tray { height: max(calc(100 * var(--u)), 48px); }
  .table .controls { padding: 0; }
  .bar { border-width: max(1px, calc(2 * var(--u))); border-radius: calc(16 * var(--u)); }
  .screen.menu { row-gap: calc(22 * var(--u)); 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; }
}
@media (prefers-reduced-motion: reduce) {
  .seat { transition: none; }
}