/* Blast Yard only, on top of kit/midnight.css and kit/arcade.css. The Neon Circuit look: every colour of the game, on the canvas
   too, is in this block. js/art.js reads the pieces' colours from here. */
:root {
  --bg-0: #020b0e; --bg-1: #04151a; --bg-2: #071f26;
  --ink: #e4fbff; --ink-soft: #93dbe4;
  --edge: rgba(44, 232, 240, 0.8); --edge-bright: #35e9f2;
  --glow: rgba(30, 220, 235, 0.3); --glow-strong: rgba(30, 230, 240, 0.45); --sheen: rgba(170, 250, 255, 0.12);
  --glass: linear-gradient(180deg, rgba(7, 42, 50, 0.85), rgba(3, 22, 28, 0.92));
  --sheet: linear-gradient(180deg, rgba(8, 44, 54, 0.98), rgba(3, 20, 26, 0.98));
  --veil: rgba(1, 9, 12, 0.72);
  --scroll: rgba(44, 232, 240, 0.5);
  --f1: #4f7f88; --f2: #3f6c75; --f3: #355d66; --f4: #2e525a; --f5: #27464e; --f6: #203a41;
  --amber: #ff2fb5; --amber-rgb: 255, 47, 181; --go-ink: #ffd6f2; --focus: #7ff8ff; --warn: #ff4d6d;
  --hover: 1.3; --press: 0.85;

  /* parts of the screen */
  --plate-in: linear-gradient(180deg, #06262e, #03171c);
  --plate-held: linear-gradient(180deg, #0d4a56, #07303a);
  --rule: rgba(53, 233, 242, 0.75);
  --trace-page: rgba(53, 233, 242, 0.34);
  --crystal-glow: rgba(255, 196, 60, 0.75);
  --heart: #ff2fa8; --heart-glow: rgba(255, 47, 168, 0.7); --heart-off: rgba(147, 219, 228, 0.28);
  --bomb-ring: #ff3ec0; --bomb-ring-glow: rgba(255, 62, 192, 0.6); --bomb-in-a: #3c0a31; --bomb-in-b: #170312; --bomb-held: #5e0f4d;

  /* the yard */
  --floor-a: #0d343d; --floor-b: #081f26; --floor-glass: rgba(120, 240, 250, 0.05);
  --grid-line: rgba(70, 225, 238, 0.42); --trace: rgba(70, 235, 245, 0.42); --frame: #35e9f2;
  --frame-hurry: #ff4d6d;
  --pillar-a: #2d3238; --pillar-b: #111418; --pillar-line: rgba(190, 215, 225, 0.2); --pillar-edge: #38f3fa; --rivet-a: #a7b0b6; --rivet-b: #1a1d21;
  --crate-a: #c41a8f; --crate-b: #8e1069; --crate-c: #b5177f; --crate-line: #ff58cd; --crate-rim: #ff2fb5; --crate-pin: #ffb4e8;
  --shard-a: #ff58cd; --shard-b: #a51379;
  /* the worker */
  --line: #14181b; --shadow: rgba(0, 0, 0, 0.45);
  --hat-a: #ffe75c; --hat-b: #f9b500; --hat-c: #b87700; --hat-shine: #fff7bf;
  --vest-a: #dbf24f; --vest-b: #a9cb2c; --strip: #eef3f4; --strip-edge: #ff8f1f;
  --shirt-a: #6c7780; --shirt-b: #434c54; --trouser: #2c3238; --boot-a: #7a4f2a; --boot-b: #4a2d15; --glove: #1f2226; --skin: #eab78d;
  /* Player 2 in the 2 players mode: the same worker, hat and vest in the yard's own cyan; the plates name each player in their colour */
  --p2-hat-a: #b8fbff; --p2-hat-b: #35e9f2; --p2-hat-c: #0f8c99; --p2-hat-shine: #f0feff; --p2-vest-a: #7ff8ff; --p2-vest-b: #22b9c9;
  --p1-ink: #ffe75c; --p2-ink: #7ff8ff; --pip-off: rgba(147, 219, 228, 0.28);
  /* drones */
  --drone-a: #e1e5e8; --drone-b: #848b91; --drone-c: #2d3034; --drone-seam: rgba(15, 18, 20, 0.7);
  --hazard-a: #f7c919; --hazard-b: #17181a; --eye-socket: #15171a; --eye: #ff1d3c; --eye-glow: rgba(255, 30, 60, 0.75); --eye-core: #fff0f2;
  --seeker-band: #2fdcec; --hunter-a: #6f7378; --hunter-b: #33363a; --hunter-c: #111316; --hunter-band: #ff6a1f;
  /* bombs */
  --bomb-a: #4b4f5b; --bomb-b: #16171d; --bomb-c: #050508; --bomb-shine: rgba(255, 255, 255, 0.75); --fuse: #cfa66e; --spark: #ffc83d; --spark-core: #fffbe6; --bomb-hot: #ff2a2a;
  /* flame */
  --flame-edge: #ff4d05; --flame-mid: #ffa012; --flame-hot: #ffe46b; --flame-core: #fffdf0; --flame-glow: rgba(255, 130, 20, 0.55);
  /* power-ups and words on the canvas */
  --power: #ffd21f; --power-in: rgba(70, 48, 0, 0.72); --power-glow: rgba(255, 205, 30, 0.8);
  --pop: #fff3b0; --hurt: rgba(255, 40, 70, 0.32);

  /* sizes: the board stays whole, then the pad grows on tall phones */
  --gut: calc(16 * var(--u));
  --board-w: calc(1024 * var(--u) - 2 * var(--gut));
  --board-h: calc(var(--board-w) * 13.2 / 11.2);
  --pad: clamp(max(calc(90 * var(--u)), 44px), calc((100vh - 118px - var(--board-h) - 26px) / 3), max(calc(90 * var(--u)), 62px));
  --bomb-size: max(calc(212 * var(--u)), calc(var(--pad) * 1.72));
}
@supports (height: 1dvh) {
  :root { --pad: clamp(max(calc(90 * var(--u)), 44px), calc((100dvh - 118px - var(--board-h) - 26px) / 3), max(calc(90 * var(--u)), 62px)); }
}

body { font-family: "Avenir Next", "Bahnschrift", "Segoe UI", Roboto, system-ui, sans-serif; letter-spacing: 0.05em; }
body.playing { touch-action: none; }

.screen { padding: max(calc(10 * var(--u)), env(safe-area-inset-top)) var(--gut) 0; gap: calc(14 * var(--u)); }

/* The bar is a lit line that steps up, not a box */
.bar { position: relative; height: max(calc(84 * var(--u)), 44px); padding: 0; justify-content: flex-start; gap: calc(14 * var(--u)); border: 0; border-radius: 0; background: none; box-shadow: none; }
.bar-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bar-line path { fill: none; stroke: var(--edge-bright); stroke-width: max(1.5px, calc(3 * var(--u))); vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px var(--glow-strong)); }
.bar .icon { position: relative; color: var(--edge-bright); }
.bar .icon svg { width: max(calc(52 * var(--u)), 24px); height: max(calc(52 * var(--u)), 24px); filter: drop-shadow(0 0 3px var(--glow-strong)); }
.bar-rule { flex: none; width: max(1px, calc(3 * var(--u))); height: 52%; background: var(--rule); }
.bar h1 { position: relative; font-size: max(calc(50 * var(--u)), 19px); letter-spacing: 0.06em; white-space: nowrap; }
#levels { margin-left: auto; }

/* Cut corners with a lit edge: the outline is one clip-path, the panel inside it another */
.plate, .dpad .hold, .hub { --c: calc(20 * var(--u)); --cut: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); position: relative; border: 0; border-radius: 0; background: none; box-shadow: none; isolation: isolate; }
.plate::before, .dpad .hold::before, .hub::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--edge-bright); clip-path: var(--cut); }
.plate::after, .dpad .hold::after, .hub::after { content: ""; position: absolute; inset: max(1.5px, calc(3 * var(--u))); z-index: -1; background: var(--plate-in); clip-path: var(--cut); }
.plate, .dpad { filter: drop-shadow(0 0 calc(5 * var(--u)) var(--glow)); }

.stats { grid-template-columns: 1fr 1.25fr 1fr; gap: calc(30 * var(--u)); }
.stats .plate { height: max(calc(58 * var(--u)), 28px); font-size: max(calc(34 * var(--u)), 13px); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hearts { gap: calc(10 * var(--u)); }
.hearts svg { display: block; width: max(calc(40 * var(--u)), 15px); height: auto; fill: var(--heart); filter: drop-shadow(0 0 calc(4 * var(--u)) var(--heart-glow)); transition: fill 0.2s ease; }
.hearts svg.off { fill: var(--heart-off); filter: none; }

/* flex: the board takes what it can use, up to its whole width; what is left over goes to the pad */
.stage { flex: 100 1 0; width: 100%; max-height: var(--board-h); }
.banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: max-content; max-width: 94%; padding: calc(18 * var(--u)) calc(44 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); text-align: center; pointer-events: none; border: max(1px, calc(3 * var(--u))) solid var(--edge-bright); background: var(--sheet); box-shadow: 0 0 calc(26 * var(--u)) var(--glow-strong); clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.banner[hidden] { display: none; }
.banner b { font-size: max(calc(58 * var(--u)), 20px); font-weight: 400; }
.banner span { font-size: max(calc(32 * var(--u)), 13px); color: var(--ink-soft); }
.banner span:empty { display: none; }

/* The pad and the Bomb button sit on a little more circuit board */
.controls { position: relative; flex: 1 0 auto; padding: calc(8 * var(--u)) calc(40 * var(--u)) max(calc(16 * var(--u)), env(safe-area-inset-bottom)); }
.traces { position: absolute; inset: 0 calc(-1 * var(--gut)); width: calc(100% + 2 * var(--gut)); height: 100%; pointer-events: none; }
.traces path { fill: none; stroke: var(--trace-page); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.traces circle { fill: var(--edge-bright); opacity: 0.8; }

.dpad { position: relative; grid-template: repeat(3, var(--pad)) / repeat(3, var(--pad)); gap: 0; }
.dpad .hold { color: var(--ink); cursor: pointer; }
.dpad .hold svg { width: 58%; height: 58%; fill: currentColor; stroke: none; filter: drop-shadow(0 0 2px var(--glow-strong)); }
.dpad .hold.held { filter: none; color: var(--focus); }
.dpad .hold.held::after { background: var(--plate-held); }
.dpad .up { --cut: polygon(24% 0, 76% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); }
.dpad .down { --cut: polygon(0 0, 100% 0, 100% 78%, 76% 100%, 24% 100%, 0 78%); }
.dpad .left { --cut: polygon(22% 0, 100% 0, 100% 100%, 22% 100%, 0 76%, 0 24%); }
.dpad .right { --cut: polygon(0 0, 78% 0, 100% 24%, 100% 76%, 78% 100%, 0 100%); }
.hub { grid-area: 2 / 2; --cut: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

.hold.round.bomb { position: relative; width: var(--bomb-size); height: var(--bomb-size); color: var(--ink); font-size: calc(var(--bomb-size) * 0.24); letter-spacing: 0.03em; border: max(2px, calc(5 * var(--u))) solid var(--bomb-ring); background: radial-gradient(circle at 50% 42%, var(--bomb-in-a), var(--bomb-in-b)); box-shadow: 0 0 calc(26 * var(--u)) var(--bomb-ring-glow), inset 0 0 calc(20 * var(--u)) var(--bomb-ring-glow), inset 0 0 0 max(4px, calc(13 * var(--u))) var(--bomb-in-b), inset 0 0 0 max(5px, calc(15 * var(--u))) var(--bomb-ring); }
.hold.round.bomb.held { filter: none; border-color: var(--bomb-ring); background: radial-gradient(circle at 50% 42%, var(--bomb-held), var(--bomb-in-a)); }

/* Level list and cards */
.list-screen .count { --c: calc(14 * var(--u)); height: max(calc(58 * var(--u)), 30px); }
.lv { border-radius: calc(12 * var(--u)); }
.marks svg.lit, .big-crystals svg.lit { filter: drop-shadow(0 0 calc(5 * var(--u)) var(--crystal-glow)); }
.sheet { border-radius: calc(18 * var(--u)); }
.sheet .btn { white-space: nowrap; }
.big-crystals[hidden] { display: none; }

/* Wide screens: the kit's two columns, with the board narrowed to the yard's own shape */
@media (min-aspect-ratio: 5/4) {
  :root { --board-w: calc(var(--board) * 11.2 / 13.2); --pad: max(calc(100 * var(--u)), 44px); --bomb-size: max(calc(236 * var(--u)), 88px); }
  .screen { grid-template-columns: var(--board-w) var(--panel); }
  .stage { width: var(--board-w); height: var(--board); max-height: none; flex: none; }
  .controls { padding: calc(10 * var(--u)) 0 0; }
  .stats { gap: calc(18 * var(--u)); }
  .traces { display: none; }
  .bar { margin-bottom: calc(6 * var(--u)); }
  .screen.list-screen { gap: calc(18 * var(--u)); }
}
/* A phone held sideways: one thumb each side of the board, the plates over the Bomb button */
@media (min-aspect-ratio: 5/4) and (max-height: 540px) {
  :root {
    --pad: clamp(40px, min(calc((100vh - 24px) / 3.4), 6.6vw), 56px);
    --board: calc(100vh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    --panel: calc(100vw - var(--board-w) - 3 * var(--pad) - 40px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    --u: calc(var(--panel) / 900);
    --bomb-size: clamp(76px, calc(100vh * 0.36), 124px);
  }
  @supports (height: 1dvh) {
    :root { --board: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  }
  .screen:not(.list-screen) {
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    grid-template-columns: calc(3 * var(--pad)) var(--board-w) var(--panel);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "dpad board ." "dpad board bar" "dpad board stats" "dpad board bomb" "dpad board .";
    column-gap: 12px;
    row-gap: 8px;
  }
  .controls { display: contents; }
  .dpad { grid-area: dpad; align-self: center; }
  .hold.round.bomb { grid-area: bomb; justify-self: center; font-size: calc(var(--bomb-size) * 0.26); }
  .bar { margin: 0; }
  .bar h1 { font-size: clamp(15px, calc(var(--panel) * 0.075), 22px); }
  .stats { grid-template-columns: 1fr 1.35fr 1fr; gap: 6px; }
  .stats .plate { --c: 8px; font-size: clamp(12px, calc(var(--panel) * 0.042), 15px); letter-spacing: 0.01em; }
  .hearts svg { width: clamp(11px, calc(var(--panel) * 0.04), 16px); }
  .banner { padding: 8px 18px; }
}

/* The 2 players mode. On the level list, the Players choice as Carrom and Pool show it: the picked one lit, with a tick. */
.list-screen [hidden] { display: none !important; }
.option { flex: none; width: 100%; flex-direction: column; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)); }
.option h2 { margin: 0; font-size: max(calc(36 * var(--u)), 14px); font-weight: 400; }
.choices { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(20 * var(--u)); }
.pick.on { color: var(--go-ink); border-color: var(--amber); background: linear-gradient(180deg, var(--bomb-held), var(--bomb-in-a)); box-shadow: 0 0 calc(18 * var(--u)) rgba(var(--amber-rgb), 0.5), inset 0 1px 0 var(--sheen); }
.pick.on::before { content: "\2713"; margin-right: 0.35em; }
.battle p { margin: 0; text-align: center; font-size: max(calc(32 * var(--u)), 13px); line-height: 1.35; }
.battle .keys { color: var(--ink-soft); }
.battle .btn.go { width: 100%; }
.sheet h2 { text-wrap: balance; } /* a long round or match title breaks evenly, never one word alone */

/* In a battle: a plate for each player in their colour, wins as pips, and the round between them */
.stats .vs, .controls.duo { display: none; }
.vs-on .stats > :not(.vs) { display: none; }
.vs-on .stats .vs { display: flex; gap: calc(10 * var(--u)); }
.vs .who { font-weight: 600; }
.vs.p1 { color: var(--p1-ink); }
.vs.p2 { color: var(--p2-ink); }
.vs.out { opacity: 0.5; }
.pip { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--pip-off); }
.pip.on { background: currentColor; box-shadow: 0 0 calc(6 * var(--u)) currentColor; }
.vs-on > .controls:not(.duo) { display: none; }
.turn { flex: 1 0 auto; display: grid; place-items: center; margin: 0; padding: calc(24 * var(--u)) 16px max(calc(28 * var(--u)), env(safe-area-inset-bottom)); text-align: center; color: var(--ink-soft); font-size: max(calc(34 * var(--u)), 14px); }

/* Held sideways: Player 1's d-pad and Bomb at the left edge, Player 2's at the right edge, the yard between them */
@media (min-aspect-ratio: 5/4) {
  .screen.vs-on:not(.list-screen) {
    --vs-min: clamp(170px, 24vw, 300px);
    --vs-board-w: min(calc((100vh - 16px) * 11.2 / 13.2), calc(100vw - 2 * var(--vs-min) - 40px));
    --vs-side: calc((100vw - var(--vs-board-w) - 40px) / 2);
    --pad: clamp(40px, min(calc((var(--vs-side) - 16px) / 4.4), 9vh), 64px);
    --bomb-size: clamp(64px, min(calc(var(--vs-side) - 3 * var(--pad) - 20px), 22vh), 130px);
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    grid-template-columns: var(--vs-side) var(--vs-board-w) var(--vs-side);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "bar board round" "p1 board p2" ". board ." "c1 board c2";
    column-gap: 12px;
    row-gap: 10px;
    align-items: center;
  }
  .vs-on .bar { grid-area: bar; align-self: start; margin: max(8px, env(safe-area-inset-top)) 0 0; }
  .vs-on .stats { display: contents; }
  .vs-on .stats .vs { width: 100%; height: max(calc(58 * var(--u)), 32px); }
  .vs-on .stats .vs.p1 { grid-area: p1; }
  .vs-on .stats .vs.p2 { grid-area: p2; }
  .vs-on .stats .vs.round { grid-area: round; align-self: start; margin-top: max(14px, env(safe-area-inset-top)); }
  .vs-on .stage { grid-area: board; width: var(--vs-board-w); height: min(calc(var(--vs-board-w) * 13.2 / 11.2), 100vh); max-height: none; }
  .vs-on .controls.duo { display: contents; }
  .controls.duo .group { grid-area: c1; align-self: end; margin-bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: center; gap: 8px; }
  .controls.duo .group.p2 { grid-area: c2; }
  .controls.duo .dpad { touch-action: none; }
  .controls.duo .hold.round.bomb { font-size: calc(var(--bomb-size) * 0.24); }
  .vs-on .turn { display: none; }
}