/* THE DARTBOARD, ON ITS OWN, BECAUSE TWO PAGES DRAW IT (Cory, 2026-09-20: "why can't we just show the
   games on the remote player screens, exactly as we see it on the main screen?"). It lived in app.css, which
   the satellite screen deliberately does not load — that page boots no app, only the views it needs — so a
   phone could draw the game and not the board it was thrown at. Split out rather than copied: a board
   described twice is two boards, and the second one is always the one that falls behind.

   Loaded by index.html and live.html. */
/* ---------- DARTBOARD ---------- */
.boardwrap{position:relative; display:grid; place-items:center; min-height:0; min-width:0}
.boardwrap::before{content:""; position:absolute; width:96%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(47,123,255,.28), transparent 68%); filter:blur(8px)}
svg.board{position:absolute; inset:0; width:100%; height:100%; touch-action:none; user-select:none; overflow:visible}
.b-rim{fill:url(#rimG)}
.b-numring{fill:#070b1e; stroke:rgba(140,175,255,.35); stroke-width:1.5}
.b-num{fill:#dfe8ff; font-family:var(--num); font-size:21px; text-anchor:middle; dominant-baseline:central; pointer-events:none}
.seg{stroke:#060a1c; stroke-width:1.4; transition:opacity .25s}
.seg.c-a{fill:#141c3a} .seg.c-b{fill:#e8edf8}
.seg.si.c-b,.seg.so.c-b{fill:url(#ivoryG)}
.seg.si.c-a,.seg.so.c-a{fill:url(#inkG)}
.seg.t.c-a,.seg.d.c-a{fill:url(#redG)}
.seg.t.c-b,.seg.d.c-b{fill:url(#blueG)}
.seg.bull{fill:url(#blueG)} .seg.dbull{fill:url(#redG)}
.wire{fill:none; stroke:rgba(200,215,255,.55); stroke-width:1.2; pointer-events:none}
.wire.thin{stroke-width:.7; stroke:rgba(200,215,255,.35)}
svg.board.has-target .seg:not(.target){opacity:.32}
/* A whole ring as the shot (js/board.js setRingTargets ringshot; Cory, 28 Oct 2026): the rest of the board nearly
   dark, the band in flat bright paint instead of its gradients, a gold line pulsing along each edge of it. */
svg.board.ringshot .seg:not(.target){opacity:.12}
svg.board.ringshot .seg.target.d.c-a, svg.board.ringshot .seg.target.t.c-a{fill:#ff3d52}
svg.board.ringshot .seg.target.d.c-b, svg.board.ringshot .seg.target.t.c-b{fill:#46a3ff}
svg.board.ringshot .seg.target.dbull{fill:#ff3d52}
svg.board.ringshot .tgt-outline.band{stroke-width:5}
/* A LIT SLICE IS ONE SURFACE (Cory, 2026-09-19: "think of that entire area as identical outside of the
   numbers"). The board alternates ivory and ink around the ring, so a highlighted run of slices came up
   striped and read as several different things. Lit singles are all ivory; the doubles and triples keep
   their own colours, because those are the rings you are aiming at. */
svg.board .seg.target.si, svg.board .seg.target.so{fill:url(#ivoryG)}
/* SOFT BOARD (Sniper): EVERY LIVE SLICE IS LIGHT (Cory, 2026-09-17: "make the board segments all light,
   and put the x2 and x3 on the doubles and triples — when it's light, then we can tell what to shoot and
   what has gone dark"). A regulation board is half black, so a number you had already taken looked like
   any other dark slice and there was nothing to read. Here the twenty are pale, one shade apart so they
   still read as twenty separate slices, the double and triple bands a step deeper so the rings are
   visible — and the only dark thing anywhere on the board is a number you have used up. */
svg.board.soft .seg.si.c-a, svg.board.soft .seg.so.c-a{fill:#ced8f0}
svg.board.soft .seg.si.c-b, svg.board.soft .seg.so.c-b{fill:#eaf0fc}
svg.board.soft .seg.t.c-a, svg.board.soft .seg.d.c-a{fill:#93a6d6} svg.board.soft .seg.t.c-b, svg.board.soft .seg.d.c-b{fill:#aabce8}
svg.board.soft .seg.bull{fill:#8497cc} svg.board.soft .seg.dbull{fill:#6779b4}
/* Taken: a solid dark fill, not a faded one — faded shows the room behind it and reads as "dimmed", which
   is a state you might still be able to score on. Dark reads as gone. */
svg.board.soft.has-target .seg:not(.target){opacity:1; fill:#0e1430}
/* ARCHERY: THE BOARD BECOMES A TARGET (Cory, 2026-09-21: "the archery board needs to look almost exactly
   like this"). In Archery the ring is the whole of the scoring — the slice a dart lands in means nothing —
   so the twenty numbers and the wires between them come off, every ring takes one colour, and the value of
   each ring is written up the middle and down it. The geometry underneath is untouched: it is the same
   board, taking the same taps, wearing the face of the game being played on it. */
/* The slices are still there and still take the taps; the timber underneath is what you see. A fill of
   none would stop the board hearing a tap at all, so they go fully transparent instead. */
svg.board.wood .seg{fill:rgba(0,0,0,0)}
svg.board.wood .woodface{display:block}
svg.board.wood .wire.thin{display:none}
svg.board.wood .wire{stroke:rgba(58,32,12,.55); stroke-width:2.4}
svg.board.wood .b-num{display:none}
svg.board.wood .b-numring{fill:#6b4220; stroke:rgba(40,20,6,.6)}
svg.board.wood .b-rim{fill:#3a2412}
/* ---------- the timber and the paint on it ---------- */
.woodface{display:none}
.bw-board{fill:url(#bwWoodG)}
.bw-planks path{stroke:rgba(52,28,10,.22); stroke-width:2.5; fill:none}
/* Three passes to a ring: the ghost the brush left either side of itself, the ring, and the streak where
   the paint went on twice. Round caps and a little transparency, so where they cross they mix. */
.bw-ring{fill:none; stroke-linecap:round; stroke-linejoin:round}
.bw-ring{stroke-width:9; opacity:.9}
.bw-ring.ghost{stroke-width:20; opacity:.2; filter:blur(3px)}
/* where the brush went round twice: a broken, lighter pass just off the line */
.bw-ring.wet{stroke-width:4; opacity:.45; stroke-dasharray:70 150; stroke-dashoffset:30}
.bw-c{stroke:#4fd3e6} .bw-g{stroke:#5fd45f} .bw-o{stroke:#f0a62e} .bw-r{stroke:#e8413f}
.bw-core{fill:#150d04; stroke:#e8413f; stroke-width:4}
/* One ring is one surface: the slices are still there to be tapped, but nothing draws the line between
   them, or the target reads as a spider's web instead of six rings. */
svg.board.wood .seg{stroke:none}
/* And nothing is greyed out, because in Archery every ring scores. The colours are the instruction. */
svg.board.wood.has-target .seg:not(.target){opacity:1}
svg.board.wood .ringvals{display:block}
/* BIG BULL: ONE TARGET INSIDE THE TRIPLE (Cory, 2026-09-21: "the center ring outside the double bull needs
   to be pushed out to the triple ring... so the single bull is big and the double is normal. Make it look
   more mechanical, similar to the icon"). The inner singles and the bull become one machined plate, the
   wires that divided them go, and only the double bull is left in the dead centre. Outside the triple the
   board stays a board — the spokes there are drawn separately (js/board.js .spokes-out). */
/* Yellow in the middle, red on the triple, and black between everything: the reference is a printed
   board, so the plate is a halftone rather than a flat fill and the segment lines are drawn, not implied. */
svg.board.mech .seg.si, svg.board.mech .seg.bull{fill:url(#mechDots); stroke:#141008; stroke-width:1.5}
svg.board.mech .seg.si.c-a, svg.board.mech .seg.bull.c-a{fill:url(#mechDotsA)}
svg.board.mech .seg.dbull{fill:url(#mechDotsR); stroke:#1a1a08; stroke-width:2.5}
svg.board.mech .seg.t{fill:#e02222; stroke:#141008; stroke-width:1.5} svg.board.mech .seg.t.c-a{fill:#b81a1a}
svg.board.mech .seg.so{fill:#28304a} svg.board.mech .seg.so.c-a{fill:#1d2438}
svg.board.mech .seg.d{fill:#3b4770} svg.board.mech .seg.d.c-a{fill:#2b3358}
svg.board.mech .w-bull, svg.board.mech .wire.thin{display:none}
svg.board.mech .spokes-out .wire.thin{display:inline}
svg.board.mech .w-tIn{stroke:#141008; stroke-width:5; opacity:1}
svg.board.mech .b-numring{fill:#0a0f22}
svg.board.mech .rivets{display:block}
svg.board.mech.has-target .seg:not(.target){opacity:.5}
.spokes-out{display:none}
svg.board.mech .spokes-out{display:block}
.rivets{display:none; pointer-events:none}
.rivets circle{fill:#9fb0cc; stroke:#0d1428; stroke-width:1.5}
.ringvals{display:none; pointer-events:none}
/* Written on the wood, with the light behind them: a soft dark shadow rather than a hard outline, which
   is what his board has and what makes a cream number sit ON timber instead of in front of it. */
.ringvals .rv{font-family:var(--num); text-anchor:middle; dominant-baseline:central;
  paint-order:stroke; stroke:rgba(30,15,4,.55); stroke-width:1.6; fill:#fff;
  filter:drop-shadow(0 2px 2px rgba(20,10,2,.75))}
/* Gold in the dark middle, cream everywhere else, all of it cut out of the same dark edge. */
.ringvals .v100{fill:#ffc53d; font-style:italic}
.ringvals .v50, .ringvals .v30, .ringvals .v15, .ringvals .v10, .ringvals .v5{fill:#fff4e2}
/* EVERY PULSE ON THE BOARD IS A FADE (2026-10-19, after Count Up lagged the phone). The board is one drawing,
   and anything else that changes inside it - a stroke's opacity, a fill colour, a line getting thicker -
   repaints the whole board on every frame for as long as a target is lit, which is most of most games.
   A fade (opacity) is the one change a drawing takes without being redrawn, so the outline fades, the
   bull's light is a copy over it that fades in, and a ring that swelled is a wide ring fading in behind a
   thin one. */
.tgt-outline{fill:none; stroke:#ffd84a; stroke-width:4; stroke-linejoin:round; filter:url(#glow); animation:tgtPulse 1.1s ease-in-out infinite alternate; pointer-events:none}
@keyframes tgtPulse{from{opacity:.35} to{opacity:1}}
/* A LIVE BULL LIGHTS UP (Cory, 2026-09-21: "we aren't highlighting the bull enough when it's time to shoot
   it. I need pulsing color"). An outline round something that small is a thin gold hair at across-the-room
   distance, so the circles themselves burn. An animation beats any fill the board has set, soft or not,
   which is what makes this work on every board style without a rule for each one.

   It burns only when the Bull is the SHOT — the last number in Sniper, a Bull round in Bermuda — and not
   when it happens to be inside a wide target like Archery's circle, where a bull pulsing for eight rounds
   is a fault light. js/board.js decides that and sets .bullshot. */
svg.board.bullshot .seg.bull.target{fill:#2f7bff !important}
svg.board.bullshot .seg.dbull.target{fill:#ff2d55 !important}
.bull-lit, .dbull-lit{opacity:0; pointer-events:none}
.bull-lit{fill:#ffd84a} .dbull-lit{fill:#fff6c2}
svg.board.bullshot .seg.bull.target ~ .bull-lit, svg.board.bullshot .seg.dbull.target ~ .dbull-lit{animation:bullLit 1s ease-in-out infinite alternate}
@keyframes bullLit{from{opacity:0} to{opacity:1}}
.fx-flash{fill:#fff; pointer-events:none; animation:flash .55s ease-out forwards}
@keyframes flash{0%{opacity:.95} 100%{opacity:0}}
.fx-ripple{fill:none; stroke:#fff; stroke-width:3; pointer-events:none; transform-box:fill-box; transform-origin:center; animation:ripple .6s ease-out forwards}
@keyframes ripple{from{transform:scale(.2); opacity:1} to{transform:scale(3.2); opacity:0}}
.mark{pointer-events:none}
.mark circle:first-child{fill:rgba(255,255,255,.25)}
.mark circle:last-child{fill:#fff; filter:url(#glow)}
.mark text{fill:#fff; font-family:var(--num); font-size:13px; text-anchor:middle; paint-order:stroke; stroke:#050818; stroke-width:4}
/* THE DARTS THAT END SOMETHING (js/board.js setOuts). Gold finishes it, green starts you, red puts
   somebody back to nothing, and cyan is a dart on the way to the gold one. A chance is drawn on the board
   and takes nothing away; a route greys the rest of the board out behind it (Cory, 2026-09-20: "it needs
   to stand out high contrast (grey the rest?) and it should pulse glow").

   The grey is opacity and nothing else. Eighty animated filters, one per segment, is the sort of thing
   that made the phone stutter while scrolling — only the two or three lit rings carry a filter. */
/* Everything that is not the shot goes grey — including things the game had marked as targets. In Two Line
   every box on the grid is a target, so leaving those alone left the board exactly as busy as it was
   (Cory, 2026-09-21: "here I should be shooting the 2 to get a line. Nothing else"). */
svg.board.has-outs .seg:not(.lit){opacity:.15}
svg.board.has-outs .hl{opacity:.25}
svg.board.has-outs .b-num{opacity:.4}
.out-ring{fill:none; stroke-width:4; stroke-linejoin:round; pointer-events:none; animation:outPulse 1s ease-in-out infinite alternate}
.out-ring.swell{stroke-width:7; filter:none; animation-name:outSwell}
.out-ring.win{stroke:#ffd84a; filter:drop-shadow(0 0 10px rgba(255,216,74,.95))}
.out-ring.in{stroke:#2ee6a0; filter:drop-shadow(0 0 10px rgba(46,230,160,.9))}
.out-ring.kill{stroke:#ff2d55; filter:drop-shadow(0 0 10px rgba(255,45,85,.95))}
.out-ring.route{stroke:#39d5ff; filter:drop-shadow(0 0 10px rgba(57,213,255,.9))}
@keyframes outPulse{from{opacity:.5} to{opacity:1}}
@keyframes outSwell{from{opacity:0} to{opacity:1}}
.out-tag{font-family:var(--ui); font-weight:800; font-size:14px; letter-spacing:.08em; text-anchor:middle;
  dominant-baseline:central; pointer-events:none; paint-order:stroke; stroke:#050818; stroke-width:5}
.out-tag.win{fill:#fff4c2} .out-tag.in{fill:#c6ffe8} .out-tag.kill{fill:#ffc4d0} .out-tag.route{fill:#dcf6ff}