/* Frostball only: the Neon Frost look. Every colour of the game lives in this block, the canvas reads its own (--fb-*) too.
   The page, list and cards come from kit/midnight.css, the live layout from kit/arcade.css. */
:root {
  --bg-0: #02060c; --bg-1: #030a14; --bg-2: #06121f; --bg-sheen: none;
  --ink: #f3fbff; --ink-soft: #a6e6f5;
  --edge: rgba(90, 235, 255, 0.82); --edge-bright: #6ff2ff;
  --glow: rgba(60, 220, 255, 0.24); --glow-strong: rgba(70, 230, 255, 0.6); --sheen: rgba(170, 240, 255, 0.16);
  --glass: linear-gradient(180deg, rgba(8, 34, 50, 0.92), rgba(4, 16, 28, 0.96));
  --sheet: linear-gradient(180deg, rgba(8, 30, 46, 0.98), rgba(3, 12, 22, 0.99));
  --veil: rgba(1, 5, 12, 0.7);
  --scroll: rgba(95, 240, 255, 0.5);
  --f1: #4b6480; --f2: #3b526c; --f3: #31455c; --f4: #2b3d52; --f5: #243446; --f6: #1e2b3a;
  --amber: #6ff2ff; --amber-rgb: 90, 235, 255; --go-ink: #ffffff; --focus: #ff5cc0; --warn: #ff3d8b;
  --hover: 1.3; --press: 0.85;
  --lit1: #e6fdff; --lit2: #a8f4ff; --lit3: #5fe6ff; --lit4: #7cecff; --lit5: #36cdf2; --lit6: #1aa6d6;
  --heart: #ff2d8a; --heart-off: rgba(255, 45, 138, 0.2); --now-in: rgba(255, 45, 138, 0.16);
  --round: radial-gradient(circle, rgba(10, 44, 62, 0.65), rgba(4, 15, 27, 0.95) 72%);
  --round-held: radial-gradient(circle, rgba(60, 200, 235, 0.75), rgba(10, 70, 96, 0.95) 72%);
  /* a chamfered neon plate, as a nine-slice image */
  --cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M15 1.5H45L58.5 15V45L45 58.5H15L1.5 45V15Z' fill='%23040f1b' stroke='%236ff2ff' stroke-width='2.4'/%3E%3C/svg%3E");
  --cut-go: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M15 1.5H45L58.5 15V45L45 58.5H15L1.5 45V15Z' fill='%230b5c78' stroke='%23a8f8ff' stroke-width='3'/%3E%3C/svg%3E");

  /* the canvas */
  --fb-night: #030912; --fb-night2: #071524; --fb-grid: rgba(90, 200, 255, 0.055);
  --fb-peak: #17406a; --fb-peak2: #0f2b4a; --fb-peak3: #0a1c31; --fb-peaksnow: #2e6a9e; --fb-peakglow: #6bb4e0;
  --fb-wall: #123e62; --fb-wall2: #0a2640; --fb-wall3: #061627; --fb-walledge: #63e6ff; --fb-wallice: #2f8fc4; --fb-wallice2: #8ae6ff;
  --fb-ice: #62eaff; --fb-icecore: #d6fbff; --fb-icefill: #0e4560; --fb-icefill2: #06222f; --fb-iceline: rgba(120, 235, 255, 0.34);
  --fb-icicle: rgba(120, 235, 255, 0.92); --fb-icicle2: rgba(40, 150, 200, 0.28);
  --fb-snow: #f7fbff; --fb-snow2: #c6dcf4; --fb-snow3: #8eb3dc;
  --fb-rock: #1a4c78; --fb-rock2: #0f3050; --fb-rock3: #07182a;
  --fb-cyan: #bff6ff; --fb-cyan2: #5cd9f7; --fb-cyan3: #1f93c9;
  --fb-violet: #e6c2ff; --fb-violet2: #b35cf0; --fb-violet3: #6d28b4;
  --fb-imp: #05060c; --fb-imp2: #14161f; --fb-rim: rgba(110, 225, 255, 0.72);
  --fb-hot: #ff1f93; --fb-hot2: #ffd0ea; --fb-horn: #ff2ba3; --fb-horndark: #2a0620;
  --fb-ember: #ff8a1f; --fb-ember2: #ffe2a8; --fb-blaze: #fff06a; --fb-blaze2: #ffffff;
  --fb-parka: #ff8d14; --fb-parka2: #d96804; --fb-parka3: #ffb04d;
  /* Player 2 in the 2 players mode: the same climber in the violet of the game's own palette */
  --fb-p2parka: #a24ff0; --fb-p2parka2: #7128c2; --fb-p2parka3: #d29cff;
  --p1-ink: #ffb04d; --p2-ink: #d29cff;
  --fb-fur: #fffaf0; --fb-fur2: #d9dce6;
  --fb-skin: #eba872; --fb-skin2: #c97f4c;
  --fb-goggle: #3fdcff; --fb-goggle2: #0d7fb8; --fb-goggle3: #e8fdff; --fb-strap: #1b1f29; --fb-strap2: #39404f;
  --fb-pants: #2b3c5c; --fb-pants2: #1b2740; --fb-stripe: #8fd8f2;
  --fb-boot: #7d5636; --fb-boot2: #4c3220;
  --fb-pack: #3c4456; --fb-pack2: #262c3a; --fb-pack3: #586278;
  --fb-glove: #161a22; --fb-glove2: #333a48;
  --fb-gem: #5fe9ff; --fb-far: #c77dff; --fb-fast: #ffd23f; --fb-big: #ffffff;
  --fb-flash: rgba(255, 40, 140, 0.32); --fb-pop: #ffffff; --fb-popedge: #04101c;
}
@supports (height: 1dvh) { html, body { height: 100dvh; } }
:root { --thumb: min(calc((100vw - 56px) / 4), 13vh); }
html, body { overscroll-behavior: none; }
body.playing { touch-action: none; }
body { -webkit-touch-callout: none; }

/* lit crystals are ice here, not amber */
.crystal.lit .f1 { fill: var(--lit1); }
.crystal.lit .f2 { fill: var(--lit2); }
.crystal.lit .f3 { fill: var(--lit3); }
.crystal.lit .f4 { fill: var(--lit4); }
.crystal.lit .f5 { fill: var(--lit5); }
.crystal.lit .f6 { fill: var(--lit6); }

/* Menus and cards */
.btn { border: 1px solid transparent; border-image: var(--cut) 20 fill / max(calc(14 * var(--u)), 8px) stretch; background: none; box-shadow: none; font-weight: 600; }
.btn.go { border-color: transparent; border-image-source: var(--cut-go); box-shadow: none; filter: drop-shadow(0 0 max(calc(8 * var(--u)), 3px) var(--glow-strong)); }
.sheet { border: 1px solid transparent; border-image: var(--cut) 20 fill / max(calc(30 * var(--u)), 14px) stretch; background: none; box-shadow: none; filter: drop-shadow(0 0 max(calc(16 * var(--u)), 7px) var(--glow-strong)); }
.sheet h2 { font-weight: 800; font-style: italic; letter-spacing: 0.01em; }
.sheet p { color: var(--ink-soft); }
.big-crystals:empty { display: none; }
.sheet h2 + .big-crystals:empty + p { margin-top: calc(30 * var(--u)); }
.pair.three .btn.go { grid-column: 1 / -1; }
.icon { width: max(calc(60 * var(--u)), 44px); height: max(calc(60 * var(--u)), 44px); }
.icon svg { width: max(calc(52 * var(--u)), 28px); height: max(calc(52 * var(--u)), 28px); }
.bar h1 { font-weight: 800; font-style: italic; }
.list-screen .bar { height: max(calc(84 * var(--u)), 48px); }
.lv-grid { grid-template-columns: repeat(auto-fill, minmax(max(calc(212 * var(--u)), 62px), 1fr)); }
.lv { font-weight: 600; }
.lv.now { border-color: var(--focus); box-shadow: 0 0 calc(18 * var(--u)) var(--fb-hot), inset 0 0 calc(14 * var(--u)) var(--now-in); }

/* The bar: separate slanted plates, as on the sample */
.screen.play { width: 100%; padding: max(calc(10 * var(--u)), env(safe-area-inset-top)) 0 0; gap: max(calc(10 * var(--u)), 5px); }
.play .bar {
  height: max(calc(74 * var(--u)), 44px);
  padding: 0 max(calc(16 * var(--u)), 8px);
  gap: max(calc(14 * var(--u)), 7px);
  background: none;
  border: 0;
  box-shadow: none;
}
.chip {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 max(calc(14 * var(--u)), 5px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(calc(9 * var(--u)), 3px);
  color: var(--ink);
  font: inherit;
  font-size: max(calc(34 * var(--u)), 12px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  background: none;
  border: 0;
}
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid transparent;
  border-image: var(--cut) 20 fill / max(calc(13 * var(--u)), 6px) stretch;
  transform: skewX(-14deg);
  filter: drop-shadow(0 0 max(calc(5 * var(--u)), 2px) var(--glow-strong));
}
.chip.back { flex: none; width: max(calc(92 * var(--u)), 44px); }
.chip.back::before { transform: none; }
.chip.back svg { width: 72%; height: 72%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chip.title { flex: none; margin: 0; font-size: max(calc(38 * var(--u)), 13px); font-weight: 800; font-style: italic; letter-spacing: 0.01em; }
.chip.floor { flex: none; cursor: pointer; }
.chip.floor svg { flex: none; width: max(calc(14 * var(--u)), 7px); height: max(calc(22 * var(--u)), 11px); fill: none; stroke: var(--ink-soft); stroke-width: 2.6; stroke-linecap: round; }
.chip.floor:hover::before { filter: brightness(var(--hover)) drop-shadow(0 0 3px var(--glow-strong)); }
.chip.hearts { flex: none; gap: max(calc(3 * var(--u)), 1px); }
.chip.hearts svg { display: block; width: max(calc(34 * var(--u)), 14px); height: max(calc(34 * var(--u)), 14px); fill: var(--heart); filter: drop-shadow(0 0 max(calc(4 * var(--u)), 2px) var(--heart)); }
.chip.hearts svg.off { fill: var(--heart-off); filter: none; }
.chip.hit { animation: hit 0.5s ease-out; }
@keyframes hit { 0%, 60% { transform: scale(1.14); } 100% { transform: scale(1); } }

.play .stage { background: var(--bg-0); }
.banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  text-align: center;
  font-size: max(calc(72 * var(--u)), 26px);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-shadow: 0 0 calc(18 * var(--u)) var(--edge-bright), 0 2px 0 var(--bg-0);
  opacity: 0;
  pointer-events: none;
}
.banner.small { font-size: max(calc(46 * var(--u)), 18px); color: var(--fb-hot2); text-shadow: 0 0 calc(18 * var(--u)) var(--fb-hot), 0 2px 0 var(--bg-0); }
.banner.show { animation: banner 1.5s ease-out; }
@keyframes banner {
  0% { opacity: 0; transform: translateY(8%) scale(0.92); }
  14%, 72% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-14%); }
}

.keys { display: none; }
@media (max-width: 350px) {
  #scorePlate .word, .chip.floor svg { display: none; }
  .play .bar { gap: 4px; }
}

/* Controls: chamfered arrows on the left thumb, round buttons on the right */
.play .controls {
  padding: max(calc(14 * var(--u)), 8px) max(calc(18 * var(--u)), 8px) max(calc(20 * var(--u)), 10px, env(safe-area-inset-bottom));
  gap: max(calc(20 * var(--u)), 8px);
}
.play .controls .group { gap: max(calc(18 * var(--u)), 6px); }
.hold { color: var(--ink); -webkit-user-select: none; user-select: none; }
.hold.pad {
  width: var(--thumb);
  height: calc(var(--thumb) * 0.9);
  border: 1px solid transparent;
  border-image: var(--cut) 20 fill / max(calc(24 * var(--u)), 13px) stretch;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 0 max(calc(7 * var(--u)), 3px) var(--glow-strong));
}
.hold.pad svg { width: 60%; height: 60%; stroke: var(--ink); stroke-width: 3.6; }
.hold.pad.held { border-image-source: var(--cut-go); filter: brightness(1.15) drop-shadow(0 0 max(calc(12 * var(--u)), 6px) var(--edge-bright)); }
.hold.round {
  width: var(--thumb);
  height: var(--thumb);
  border: max(calc(4 * var(--u)), 2px) solid var(--edge-bright);
  background: var(--round);
  box-shadow: 0 0 max(calc(14 * var(--u)), 7px) var(--glow-strong), inset 0 0 max(calc(16 * var(--u)), 7px) var(--glow);
  font-size: max(calc(44 * var(--u)), 16px);
  font-weight: 700;
}
.hold.round.held { background: var(--round-held); filter: none; box-shadow: 0 0 max(calc(24 * var(--u)), 12px) var(--edge-bright), inset 0 0 max(calc(16 * var(--u)), 7px) var(--glow-strong); }

/* Wide screens and phones held sideways: the room in the middle, the thumbs at the two sides. */
@media (min-aspect-ratio: 5/4) {
  :root {
    --board: 100vh;
    --stage-w: min(calc(var(--board) * 0.94), 54vw);
    --side: calc((100vw - var(--stage-w)) / 2 - 30px - max(env(safe-area-inset-left), env(safe-area-inset-right)));
    --u: calc(var(--side) / 620);
    --thumb: max(56px, min(calc(var(--side) / 2 - 6px), 25vh, 170px));
  }
  @supports (height: 1dvh) {
    :root { --board: 100dvh; --thumb: max(56px, min(calc(var(--side) / 2 - 6px), 25dvh, 170px)); }
  }
  .screen.play {
    width: 100%;
    height: 100%;
    padding: 0;
    grid-template-columns: var(--side) var(--stage-w) var(--side);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "top1 board top3" "top2 board top4" ". board ." "left board right";
    justify-content: center;
    align-items: start;
    column-gap: 12px;
    row-gap: max(calc(18 * var(--u)), 8px);
  }
  .play .bar { display: contents; }
  .play .stage { width: var(--stage-w); height: var(--board); grid-row: 1 / -1; }
  .play .controls { display: contents; }
  .chip { flex: none; width: auto; height: max(calc(92 * var(--u)), 44px); font-size: max(calc(42 * var(--u)), 13px); }
  .chip.title { font-size: max(calc(44 * var(--u)), 12px); padding: 0 2px; }
  .chip.hearts svg { width: max(calc(44 * var(--u)), 16px); height: max(calc(44 * var(--u)), 16px); }
  .chip.floor svg { width: max(calc(18 * var(--u)), 8px); height: max(calc(30 * var(--u)), 13px); }
  .chip.back { grid-area: top1; justify-self: start; margin-top: max(10px, env(safe-area-inset-top)); width: max(calc(100 * var(--u)), 44px); }
  .chip.title { grid-area: top1; justify-self: end; margin-top: max(10px, env(safe-area-inset-top)); width: calc(100% - max(calc(100 * var(--u)), 44px) - 16px); }
  #scorePlate { grid-area: top2; width: 100%; }
  #floorPlate { grid-area: top3; margin-top: max(10px, env(safe-area-inset-top)); width: 100%; }
  #hearts { grid-area: top4; width: 100%; }
  .play .controls .group { align-self: end; margin-bottom: max(14px, env(safe-area-inset-bottom)); justify-content: center; gap: 8px; }
  .play .controls .group.left { grid-area: left; }
  .play .controls .group.right { grid-area: right; }
  .hold.pad { width: var(--thumb); height: var(--thumb); }
  .hold.round { width: var(--thumb); height: var(--thumb); }
  .keys { grid-area: 3 / 1; align-self: center; justify-self: center; margin: 0; color: var(--ink-soft); font-size: max(calc(30 * var(--u)), 12px); line-height: 1.7; text-align: center; opacity: 0.8; }
  @media (hover: hover) and (pointer: fine) and (min-height: 560px) { .keys { display: block; } }
  .screen.list-screen { width: min(100%, 1100px); padding: max(8px, calc(24 * var(--u))) 24px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chip.hit { animation: none; }
}

/* The 2 players mode. On the start card, the Players choice as Carrom and Pool show it: the picked one lit, with a tick. */
.players { margin: 0 0 max(calc(36 * var(--u)), 14px); }
.players:empty { display: none; }
.players h3 { margin: 0 0 max(calc(14 * var(--u)), 6px); font-size: max(calc(34 * var(--u)), 13px); font-weight: 600; color: var(--ink-soft); }
.choices { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: max(calc(20 * var(--u)), 8px); }
.pick.on { color: var(--go-ink); font-weight: 700; border-image-source: var(--cut-go); filter: drop-shadow(0 0 max(calc(8 * var(--u)), 3px) var(--glow-strong)); }
.pick.on::before { content: "\2713"; margin-right: 0.35em; }

/* In play: a hearts plate each, named in the player's colour. A phone held upright only asks to be turned. */
.duo-row { flex: none; width: 100%; height: max(calc(64 * var(--u)), 40px); display: flex; gap: max(calc(14 * var(--u)), 7px); padding: 0 max(calc(16 * var(--u)), 8px); }
.duo-row .chip.hearts { flex: 1 1 0; }
.chip .who { margin-right: 0.35em; font-size: 0.9em; font-weight: 700; }
.chip.p1 .who { color: var(--p1-ink); }
.chip.p2 .who { color: var(--p2-ink); }
.chip.hearts.out { opacity: 0.45; }
.two #hearts, .two .keys, .two > .controls:not(.duo) { display: none; }
.controls.duo, .duo-keys { display: none; }
.turn { flex: none; margin: 0; padding: max(calc(24 * var(--u)), 12px) 16px max(calc(28 * var(--u)), 14px, env(safe-area-inset-bottom)); text-align: center; color: var(--ink-soft); font-size: max(calc(36 * var(--u)), 14px); }

@media (min-aspect-ratio: 5/4) {
  /* Held sideways: Player 1's d-pad and Throw at the left edge, Player 2's at the right edge, the room a little narrower */
  .screen.play.two {
    --stage-w: min(calc(var(--board) * 0.94), 48vw);
    --side: calc((100vw - var(--stage-w)) / 2 - 30px - max(env(safe-area-inset-left), env(safe-area-inset-right)));
    --u: calc(var(--side) / 620);
    --throw: clamp(56px, calc(var(--side) * 0.3), 100px);
    --cell: clamp(38px, min(calc((var(--side) - var(--throw) - 24px) / 3), 13vh), 72px);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "top1 board top3" "top2 board top4" "h1 board h2" "k1 board k2" "left board right";
  }
  .two .duo-row { display: contents; }
  .two #hearts1 { grid-area: h1; width: 100%; }
  .two #hearts2 { grid-area: h2; width: 100%; }
  .turn { display: none; }
  .play .controls.duo { display: contents; }
  .play .controls.duo .group { grid-area: left; flex-wrap: wrap-reverse; align-items: center; }
  .play .controls.duo .group.p2 { grid-area: right; }
  .duo-pad { display: grid; grid-template: repeat(2, var(--cell)) / repeat(3, var(--cell)); gap: 4px; }
  .duo-pad .jump { grid-area: 1 / 2; }
  .duo-pad .left { grid-area: 2 / 1; }
  .duo-pad .right { grid-area: 2 / 3; }
  .duo-pad .hold.pad { width: var(--cell); height: var(--cell); }
  .controls.duo .hold.round { width: var(--throw); height: var(--throw); font-size: max(calc(var(--throw) * 0.24), 13px); }
  .duo-keys { grid-area: k1; align-self: center; justify-self: center; margin: 0; color: var(--ink-soft); font-size: max(calc(30 * var(--u)), 12px); line-height: 1.7; text-align: center; opacity: 0.8; }
  .duo-keys.p2 { grid-area: k2; }
  @media (hover: hover) and (pointer: fine) and (min-height: 560px) { .duo-keys { display: block; } }
}