/* Table Tennis only, on top of kit/midnight.css and kit/arcade.css. The Neon Lines look: thin glowing cyan and lime on near-black.
   Every colour of the game, on the canvas too, is in this block. js/neon.js and js/above.js read theirs from here. */
:root {
  --n-bg: #03070a; --n-floor: rgba(25, 240, 255, 0.09);
  --n-cyan: #1bf1ff; --n-cyan-glow: rgba(27, 241, 255, 0.55); --n-cyan-soft: rgba(27, 241, 255, 0.16);
  --n-lime: #d7ff2e; --n-lime-glow: rgba(215, 255, 46, 0.5); --n-lime-soft: rgba(215, 255, 46, 0.16);
  --n-white: #ffffff; --n-white-glow: rgba(255, 255, 255, 0.55); --n-white-soft: rgba(255, 255, 255, 0.35);
  --n-table-far: #05141a; --n-table-near: #071c22; --n-table-side: #040d11;
  --n-dark: rgba(3, 12, 16, 0.92); --n-shadow: rgba(0, 0, 0, 0.8); --n-shadow-edge: rgba(0, 0, 0, 0);
  --n-mesh: rgba(255, 255, 255, 0.72);

  --bg-0: #03070a; --bg-1: #03070a; --bg-2: #040c10; --bg-sheen: none;
  --ink: #ffffff; --ink-soft: #a9e8ee;
  --edge: #1bf1ff; --edge-bright: #1bf1ff;
  --glow: rgba(27, 241, 255, 0.28); --glow-strong: rgba(27, 241, 255, 0.34); --sheen: rgba(0, 0, 0, 0);
  --glass: #03090c;
  --sheet: linear-gradient(180deg, #04131a, #03090c);
  --veil: rgba(1, 4, 6, 0.74);
  --amber: #d7ff2e; --amber-rgb: 215, 255, 46; --go-ink: #efffa8; --focus: #d7ff2e; --warn: #d7ff2e;
  --hover: 1.3; --press: 0.85;
}

body { background: var(--n-bg); letter-spacing: 0.01em; -webkit-touch-callout: none; }
body.playing { touch-action: none; overscroll-behavior: none; }

/* A full-width strip with one line above and below, as in the sample */
.bar { height: max(calc(92 * var(--u)), 44px); border: 0; border-top: max(1px, calc(3 * var(--u))) solid var(--n-cyan); border-bottom: max(1px, calc(3 * var(--u))) solid var(--n-cyan); border-radius: 0; background: none; box-shadow: 0 0 calc(10 * var(--u)) var(--n-cyan-soft); padding: 0 calc(30 * var(--u)); }
.bar h1 { font-size: max(calc(54 * var(--u)), 20px); font-weight: 400; }
.bar .icon { color: var(--n-cyan); }
.bar .icon svg { width: max(calc(58 * var(--u)), 26px); height: max(calc(58 * var(--u)), 26px); stroke-width: 1.8; }

.screen.play { padding: env(safe-area-inset-top) 0 0; gap: 0; }

/* Plates: two slanted outlines */
.scores { flex: none; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: calc(70 * var(--u)); padding: calc(40 * var(--u)) calc(66 * var(--u)) calc(10 * var(--u)); grid-area: stats; }
.score { position: relative; height: max(calc(100 * var(--u)), 40px); transform: skewX(-12deg); border: max(1.5px, calc(4 * var(--u))) solid currentColor; border-radius: calc(16 * var(--u)); display: grid; place-items: center; font-size: max(calc(52 * var(--u)), 17px); box-shadow: 0 0 calc(10 * var(--u)) var(--glow), inset 0 0 calc(8 * var(--u)) var(--n-cyan-soft); }
.score .in { transform: skewX(12deg); display: flex; align-items: baseline; gap: 0.7em; color: var(--ink); white-space: nowrap; }
.score b { font-weight: 700; font-size: 1.25em; line-height: 1; }
.score.you { color: var(--n-cyan); }
.score.you b { color: var(--n-cyan); }
.score.bot { color: var(--n-lime); box-shadow: 0 0 calc(10 * var(--u)) var(--n-lime-soft), inset 0 0 calc(8 * var(--u)) var(--n-lime-soft); }
.score.bot b { color: var(--n-lime); }
.serving { display: none; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--n-white); box-shadow: 0 0 0.5em var(--n-white-glow); align-self: center; margin-left: -0.3em; }
.score.on .serving { display: block; }

.stage { background: var(--n-bg); }

.hint { flex: none; width: calc(100% - calc(20 * var(--u))); height: max(calc(100 * var(--u)), 40px); margin: 0 calc(10 * var(--u)) max(calc(10 * var(--u)), env(safe-area-inset-bottom)); display: grid; place-items: center; border: max(1px, calc(3 * var(--u))) solid var(--n-lime); border-radius: calc(20 * var(--u)); font-size: max(calc(58 * var(--u)), 18px); box-shadow: 0 0 calc(8 * var(--u)) var(--n-lime-soft); text-align: center; grid-area: tray; line-height: 1.1; }

/* 2 Players: the table takes the whole screen under the bar */
.two .scores, .two .hint { display: none; }

/* Start screen */
.menu { padding: env(safe-area-inset-top) 0 0; gap: calc(26 * var(--u)); }
.menu .hero { flex: 1 1 0; min-height: 0; width: calc(100% - 2 * calc(32 * var(--u))); overflow: visible; margin-top: calc(10 * var(--u)); }
.h-table { fill: var(--n-table-near); stroke: var(--n-cyan); stroke-width: 5; stroke-linejoin: round; filter: drop-shadow(0 0 7px var(--n-cyan-glow)); }
.h-apron, .h-lime { fill: none; stroke: var(--n-lime); stroke-width: 4; filter: drop-shadow(0 0 5px var(--n-lime-glow)); }
.h-center { stroke: var(--n-white); stroke-width: 3; }
.h-mesh path { stroke: var(--n-mesh); stroke-width: 1.2; }
.h-net { stroke: var(--n-white); stroke-width: 4; }
.h-trail { fill: none; stroke: var(--n-white); stroke-width: 3; stroke-linecap: round; }
.h-ball { fill: var(--n-white); }
.h-ball-glow { fill: var(--n-white-glow); }
.option { flex: none; width: calc(100% - 2 * calc(32 * var(--u))); display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.option h2 { margin: 0; font-size: max(calc(40 * var(--u)), 15px); font-weight: 400; color: var(--ink-soft); text-align: center; }
.choices { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(26 * var(--u)); }
.pick { height: max(calc(140 * var(--u)), 56px); transform: skewX(-10deg); font-size: max(calc(48 * var(--u)), 17px); }
.pick span { display: block; transform: skewX(10deg); }
.pick small { display: block; font-size: 0.6em; color: var(--ink-soft); }
/* The chosen option is unmistakable: a filled cyan face with dark text. The others stay plain outlines. */
.pick.on { background: var(--n-cyan); border-color: var(--n-cyan); color: var(--n-bg); font-weight: 600; box-shadow: 0 0 calc(16 * var(--u)) var(--n-cyan-glow); }
.pick.on small { color: var(--n-table-near); }
.pick.on:hover { filter: none; }
.option.off { opacity: 0.35; }
.start { flex: none; width: calc(100% - 2 * calc(32 * var(--u))); height: max(calc(130 * var(--u)), 54px); transform: skewX(-10deg); border: max(1.5px, calc(4 * var(--u))) solid var(--n-lime); color: var(--n-lime); font-size: max(calc(58 * var(--u)), 21px); box-shadow: 0 0 calc(14 * var(--u)) var(--n-lime-soft), inset 0 0 calc(10 * var(--u)) var(--n-lime-soft); }
.start span { display: block; transform: skewX(10deg); }
.note { flex: none; margin: 0 0 max(calc(24 * var(--u)), env(safe-area-inset-bottom)); min-height: 1.2em; font-size: max(calc(32 * var(--u)), 13px); color: var(--ink-soft); text-align: center; }

/* Result card */
.sheet { box-shadow: 0 0 calc(30 * var(--u)) var(--n-cyan-soft); }
.sheet h2 { font-weight: 400; }
.sheet.lime-win h2 { color: var(--n-lime); }
.sheet.cyan-win h2 { color: var(--n-cyan); }
.final { font-size: calc(120 * var(--u)) !important; font-weight: 700; margin: calc(20 * var(--u)) 0 calc(14 * var(--u)) !important; line-height: 1; }
.btn { background: none; }
.btn.go { color: var(--n-lime); }

/* Wide screens: the table on the left, plates and hint beside it */
@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); }
  .screen.play { padding: 0; grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: "board ." "board bar" "board stats" "board tray" "board ."; row-gap: calc(40 * var(--u)); }
  .scores { padding: 0 calc(30 * var(--u)); gap: calc(40 * var(--u)); }
  .hint { width: 100%; margin: 0; }
  .screen.menu { display: flex; width: var(--panel); padding: calc(20 * var(--u)) 0; overflow-y: auto; row-gap: calc(22 * var(--u)); justify-content: center; }
  .menu .hero { width: 100%; }
  .menu .option, .menu .start { width: calc(100% - 2 * calc(26 * var(--u))); }
  .screen.play.two { display: flex; flex-direction: column; row-gap: 0; }
  .two .bar { width: 100%; height: max(calc(60 * var(--u)), 40px); }
  .two .stage { flex: 1 1 0; width: 100%; height: auto; }
}
@media (min-aspect-ratio: 5/4) and (max-height: 560px) {
  .menu .hero { display: none; }
}