/* THE OMNISCIENT CAMERA
 *
 * The stage is what both agents hear. The rail is what only you hear.
 *
 * Everything here is built from design/src/tokens.css — same six accents, same
 * three families, nothing new. Two rules govern the whole file:
 *
 *   1. It has to read muted, at thumbnail size. Which ball is up and what colour
 *      it is are the only things that must survive being 200px wide with the
 *      sound off. Everything else is detail for people who are actually watching.
 *   2. Nothing moves that is not reporting something real. The recoils, the
 *      hesitation bars, the flips: all of it comes off the wire.
 */

/* ============================ shell ============================ */
.cam{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 340px;
  height:calc(100vh - 53px);min-height:660px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.cam.norail{grid-template-columns:1fr}
.cam.norail .rail{display:none}

.stage{position:relative;display:flex;flex-direction:column;overflow:hidden;background:
  radial-gradient(ellipse at 50% -10%,rgba(124,92,255,.17),transparent 62%),
  radial-gradient(ellipse at 50% 110%,rgba(255,43,214,.08),transparent 60%),
  var(--bg-0)}
.stage::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(rgba(124,92,255,.05) 1px,transparent 1px) 0 0/44px 44px,
             linear-gradient(90deg,rgba(124,92,255,.05) 1px,transparent 1px) 0 0/44px 44px}

/* The stage goes quiet for the commit sequence: the chrome recedes, the balls
   do not. The last thing that was said stays readable — it is the thing the
   balls are about to contradict. */
.stage>*{transition:opacity .5s,filter .5s}
.stage.hush .hud,.stage.hush .rounds{opacity:.22;filter:saturate(.2)}
.stage.hush .caption{opacity:.5}
.stage.hush .plate,.stage.hush .tells,.stage.hush .bank{opacity:.55}
.stage.hush .pot{opacity:.75}

/* ============================ hud ============================ */
.hud{position:relative;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 20px;
  border-bottom:1px solid var(--line);background:rgba(5,7,13,.62);flex-wrap:wrap}
.hud .badge{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.02em}
.hud .badge b{color:var(--yellow)}
.hud .sp{margin-left:auto}
.state{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;padding:4px 9px;border:1px solid var(--line-strong);color:var(--ink-2)}
.state.live{border-color:var(--red);color:var(--red);background:rgba(255,51,85,.12)}
.state.live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:blip 1.3s ease-in-out infinite}
.state.replay{border-color:var(--purple);color:var(--purple);background:rgba(124,92,255,.12)}
.state.scripted{border-color:var(--yellow);color:var(--yellow);background:rgba(255,230,0,.08)}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.2}}
.phase{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink-2)}

.tog{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;padding:6px 11px;border:1px solid var(--line-strong);
  background:var(--bg-2);color:var(--ink-1);cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
.tog:hover{border-color:var(--purple);background:var(--purple);color:#fff}
.tog[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--bg-0);font-weight:700}
.tog[disabled]{opacity:.35;cursor:default}

/* round pips — the escalation, always on screen */
.rounds{position:relative;z-index:5;display:flex;align-items:center;gap:7px;padding:9px 20px;border-bottom:1px solid var(--line)}
.rounds .k{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-3);margin-right:4px}
.pip{height:4px;flex:1;background:var(--bg-3);position:relative;overflow:hidden}
.pip i{position:absolute;inset:0;width:0;background:var(--purple);box-shadow:0 0 8px var(--purple);transition:width .5s ease}
.pip.on i{width:100%}
.pip.final{flex:1.6;background:var(--bg-3)}
.pip.final i{background:var(--yellow);box-shadow:0 0 10px var(--yellow)}

/* ============================ arena ============================ */
.arena{position:relative;z-index:4;flex:1;min-height:0;display:grid;grid-template-columns:1fr minmax(180px,232px) 1fr;
  align-items:stretch;gap:14px;padding:24px 24px 4px;overflow:hidden}

.side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;height:100%}

/* ---- name plate ---- */
.plate{text-align:center}
.plate .nm{font-family:var(--display);font-size:clamp(16px,2.1vw,22px);font-weight:700;color:var(--c);letter-spacing:-.02em;line-height:1.1}
.plate .by{font-family:var(--mono);font-size:9px;letter-spacing:.11em;color:var(--ink-3);margin-top:3px}
.plate .rep{font-family:var(--mono);font-size:9px;letter-spacing:.11em;color:var(--ink-2);margin-top:6px}
.plate .rep b{color:var(--red);font-weight:500}

/* ============================ the shell ============================ */
/* A constructed character, not an emoji. Abstract and machine-like on purpose:
   the audience should read a state, not a face. */
.shell{width:clamp(96px,13vw,138px);height:clamp(96px,13vw,138px);position:relative}
.shell svg{width:100%;height:100%;overflow:visible;display:block}
.shell .body{fill:var(--bg-2);stroke:var(--c);stroke-width:2;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 40%,transparent))}
.shell .plateFill{fill:var(--bg-1);stroke:var(--c);stroke-width:1;opacity:.75}
.shell .fin{stroke:var(--c);stroke-width:2;fill:none;opacity:.8}
.shell .optic{fill:var(--c);filter:drop-shadow(0 0 8px var(--c))}
.shell .grille rect{fill:var(--c);opacity:.28}
.shell .ring{fill:none;stroke:var(--c);stroke-width:1;opacity:.22;stroke-dasharray:5 9}
.shell .scan{fill:var(--c);opacity:0}

/* idle: a slow breath */
.side .shell{animation:breathe 5.2s ease-in-out infinite;transform-origin:50% 80%}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* deliberating: optic narrows to a slit, a scan line sweeps, the ring turns */
.side.thinking .shell .optic{transform:scaleY(.34);transform-origin:center;transition:transform .3s}
.side.thinking .shell .scan{opacity:.5;animation:sweep 1.15s linear infinite}
.side.thinking .shell .ring{animation:spin 5s linear infinite;opacity:.5}
@keyframes sweep{0%{transform:translateY(-30px)}100%{transform:translateY(30px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.shell .ring,.shell .scan{transform-origin:center}

/* speaking: optic wide, grille alive */
.side.speaking .shell .optic{transform:scaleY(1.12);transform-origin:center}
.side.speaking .shell .grille rect{animation:vu .42s ease-in-out infinite alternate;opacity:.85}
.side.speaking .shell .grille rect:nth-child(2){animation-delay:.09s}
.side.speaking .shell .grille rect:nth-child(3){animation-delay:.18s}
.side.speaking .shell .grille rect:nth-child(4){animation-delay:.05s}
.side.speaking .shell .grille rect:nth-child(5){animation-delay:.14s}
@keyframes vu{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.shell .grille rect{transform-origin:center;transform-box:fill-box}

/* reacting: it recoils. This fires when its provisional actually moved, which
   means the recoil is a real report and not decoration. */
.side.recoil .shell{animation:recoil .62s cubic-bezier(.2,.9,.3,1.3)}
@keyframes recoil{
  0%{transform:translate(0,0) rotate(0)}
  18%{transform:translate(0,7px) scale(.94) rotate(-2.5deg)}
  46%{transform:translate(0,-5px) scale(1.03) rotate(1.5deg)}
  100%{transform:translate(0,0) rotate(0)}
}
.side.recoil .shell .optic{animation:pinhole .62s ease-out}
@keyframes pinhole{0%{transform:scaleY(1)}22%{transform:scaleY(.12)}100%{transform:scaleY(1)}}

/* seized: no response from the model. Say so, do not hide it. */
.side.fault .shell .optic{fill:var(--ink-3);filter:none;animation:flicker .9s steps(2) infinite}
.side.fault .shell .body{stroke:var(--ink-3);filter:none}
@keyframes flicker{0%,100%{opacity:.25}50%{opacity:.8}}

/* ============================ the balls ============================ */
/* Two objects, present and closed from the first frame. This is the interface. */
.balls{display:flex;gap:clamp(12px,2.2vw,22px);align-items:flex-end;justify-content:center;position:relative;padding:32px 0 4px}

.ball{position:relative;width:clamp(66px,8.6vw,90px);cursor:default;perspective:600px}
/* the shadow it casts on the table — this is what sells "picked up" */
.ball::before{content:'';position:absolute;left:12%;right:12%;bottom:22px;height:9px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.75),transparent 70%);
  transform:scale(1);opacity:.55;transition:transform .42s,opacity .42s}
.orb{position:relative;width:100%;aspect-ratio:1;transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.3,1.4,.5,1),filter .42s}
.hemi{position:absolute;left:0;width:100%;height:50%;overflow:hidden;
  border:2px solid var(--line-strong);backface-visibility:hidden;
  background:
    radial-gradient(ellipse 62% 52% at 32% 26%,rgba(255,255,255,.16),transparent 62%),
    radial-gradient(circle at 68% 78%,rgba(0,0,0,.55),transparent 58%),
    linear-gradient(155deg,var(--bg-3),var(--bg-1) 74%);
  transition:transform 1.5s cubic-bezier(.22,.9,.2,1),border-color .35s,background .35s,box-shadow .35s}
.hemi.t{top:0;border-bottom:0;border-radius:999px 999px 0 0;transform-origin:50% 100%}
.hemi.b{bottom:0;border-top:0;border-radius:0 0 999px 999px;transform-origin:50% 0;
  background:
    radial-gradient(ellipse 62% 60% at 30% 92%,rgba(255,255,255,.07),transparent 62%),
    radial-gradient(circle at 66% 30%,rgba(0,0,0,.5),transparent 60%),
    linear-gradient(155deg,var(--bg-2),var(--bg-0) 76%)}
/* the equator seam: this is what makes it read as an object that opens */
.seam{position:absolute;left:-2px;right:-2px;top:calc(50% - 1.5px);height:3px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent);
  box-shadow:0 1px 0 rgba(0,0,0,.7);transition:opacity .4s,background .35s}
.inner{position:absolute;inset:9%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--k) 22%,var(--bg-0)),var(--bg-0) 72%);
  opacity:0;transform:scale(.7);transition:opacity .8s .55s,transform .8s .55s}
.inner span{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:clamp(12px,1.72vw,18px);line-height:1}

.ball .tag{margin-top:9px;text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.15em;color:var(--ink-3);transition:color .3s}

/* HELD — the provisional. The single most important read on the page. */
.ball.held .orb{transform:translateY(-16px) scale(1.09)}
.ball.held::before{transform:scale(.72);opacity:.85}
.ball.held .hemi{border-color:var(--k);
  background:
    radial-gradient(ellipse 62% 52% at 32% 26%,rgba(255,255,255,.28),transparent 62%),
    radial-gradient(circle at 70% 80%,rgba(0,0,0,.45),transparent 58%),
    linear-gradient(155deg,color-mix(in srgb,var(--k) 34%,var(--bg-2)),var(--bg-1) 80%);
  box-shadow:0 0 26px color-mix(in srgb,var(--k) 50%,transparent)}
.ball.held .hemi.b{background:
    radial-gradient(ellipse 62% 60% at 30% 92%,rgba(255,255,255,.1),transparent 62%),
    radial-gradient(circle at 66% 26%,rgba(0,0,0,.45),transparent 60%),
    linear-gradient(155deg,color-mix(in srgb,var(--k) 22%,var(--bg-2)),var(--bg-0) 82%)}
.ball.held .seam{background:linear-gradient(90deg,transparent,var(--k) 10%,var(--k) 90%,transparent);box-shadow:0 0 12px var(--k)}
.ball.held .tag{color:var(--k)}
.ball[data-k="SPLIT"]{--k:var(--green)}
.ball[data-k="STEAL"]{--k:var(--red)}

/* the ball it just put down settles */
.ball.dropped .orb{animation:settle .5s ease-out}
@keyframes settle{0%{transform:translateY(-16px) scale(1.09)}55%{transform:translateY(3px) scale(.97)}100%{transform:none}}

/* LOCKED — the commit. A ring closes on it and it stops moving. */
.ball.locked .orb{transform:translateY(-16px) scale(1.09)}
.ball.locked::after{content:'';position:absolute;left:-9px;right:-9px;top:-9px;bottom:-9px;
  border:2px solid var(--k);border-radius:50%;opacity:0;animation:clamp .9s cubic-bezier(.2,.9,.3,1) forwards;
  box-shadow:0 0 18px color-mix(in srgb,var(--k) 60%,transparent)}
@keyframes clamp{0%{opacity:0;transform:scale(1.5) rotate(-24deg)}70%{opacity:1;transform:scale(.97) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* OPEN — the reveal. Slow, and both at once. */
.ball.open .hemi.t{transform:translateY(-62%) rotateX(78deg)}
.ball.open .hemi.b{transform:translateY(62%) rotateX(-78deg)}
.ball.open .seam{opacity:0}
.ball.open .inner{opacity:1;transform:scale(1)}
.ball.open .inner span{color:var(--k);text-shadow:0 0 8px var(--k),0 0 30px color-mix(in srgb,var(--k) 75%,transparent)}
.ball.open{filter:drop-shadow(0 0 26px color-mix(in srgb,var(--k) 45%,transparent))}
.ball.open::before{opacity:0}
.ball.open .tag{color:var(--k)}
.ball.spent{opacity:.28;filter:saturate(.25)}

/* The gripper — a machine hand, not a human one. It travels across when the
   agent changes its mind, and clamps shut when it commits. Its left edge is set
   from the held ball's own position, so it is always physically on the object. */
.grip{position:absolute;bottom:16px;left:0;width:80px;height:18px;pointer-events:none;
  transition:left .5s cubic-bezier(.3,1.2,.4,1),opacity .3s;opacity:0}
.grip.on{opacity:1}
.grip i{position:absolute;top:0;width:13px;height:16px;border:2px solid var(--ink-2);
  transition:transform .3s,border-color .3s,box-shadow .3s}
.grip i:first-child{left:2px;border-right:0;transform:translateX(-8px)}
.grip i:last-child{right:2px;border-left:0;transform:translateX(8px)}
.grip.closed i{border-color:var(--k);box-shadow:0 0 10px color-mix(in srgb,var(--k) 60%,transparent)}
.grip.closed i:first-child,.grip.closed i:last-child{transform:translateX(0)}
.grip.hunting i:first-child{animation:huntL .62s ease-in-out infinite alternate}
.grip.hunting i:last-child{animation:huntR .62s ease-in-out infinite alternate}
@keyframes huntL{from{transform:translateX(-8px)}to{transform:translateX(-2px)}}
@keyframes huntR{from{transform:translateX(8px)}to{transform:translateX(2px)}}

/* the switch call-out: the money shot gets words on screen, for the sound-off */
.switchflag{position:absolute;left:50%;top:1px;transform:translateX(-50%) translateY(6px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;white-space:nowrap;
  padding:4px 9px;border:1px solid var(--red);color:var(--red);background:rgba(255,51,85,.14);
  opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.switchflag.on{opacity:1;transform:translateX(-50%) translateY(0)}
.switchflag.to-SPLIT{border-color:var(--green);color:var(--green);background:rgba(62,255,139,.12)}

/* ============================ the tells ============================ */
/* Body language, instrumented. Every number here came off the wire. */
.tells{width:100%;max-width:284px;border:1px solid var(--line);background:rgba(10,14,26,.55);padding:10px 12px}
.tells .row{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:7px}
.tells .row:last-child{margin-bottom:0}
.tells .row .k{width:90px;flex:none;font-size:8.5px}
.tells .row .bar{flex:1;height:5px;background:var(--bg-3);position:relative;overflow:hidden}
.tells .row .bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--c);transition:width .5s ease;box-shadow:0 0 6px var(--c)}
.tells .row .bar.slow i{background:var(--yellow);box-shadow:0 0 6px var(--yellow)}
.tells .row .v{width:52px;text-align:right;color:var(--ink-1);font-variant-numeric:tabular-nums;flex:none}
.tells .row .v.hot{color:var(--red)}

/* the mind, plotted. SPLIT on top, STEAL below, one step per lock. */
.mind{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line)}
.mind .lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8px;letter-spacing:.13em;color:var(--ink-3);margin-bottom:4px}
.mind svg{width:100%;height:30px;display:block;overflow:visible}
.mind .track{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.mind .path{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;transition:stroke .3s}
.mind .dot{r:2.6}
.mind .dot.SPLIT{fill:var(--green)}
.mind .dot.STEAL{fill:var(--red)}

.bank{width:100%;max-width:284px;display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;padding:0 2px}
.bank .k{font-size:9px;letter-spacing:.14em;color:var(--ink-3)}
.bank .v{font-variant-numeric:tabular-nums;color:var(--ink-0);transition:color .4s}
.bank .v.up{color:var(--green)}
.bank .v.dn{color:var(--red)}
.bank .d{font-size:10px;margin-left:6px;opacity:0;transition:opacity .5s}
.bank .d.on{opacity:1}

/* ============================ the pot ============================ */
.pot{position:relative;text-align:center;border:1px solid var(--yellow);background:rgba(255,230,0,.05);padding:20px 16px;align-self:center;margin-top:0}
.pot .k{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--ink-3);margin-bottom:8px}
.pot .v{font-family:var(--display);font-size:clamp(28px,4.2vw,46px);font-weight:700;color:var(--yellow);line-height:1;letter-spacing:-.03em;
  text-shadow:0 0 26px rgba(255,230,0,.4);font-variant-numeric:tabular-nums}
.pot .u{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink-2);margin-top:7px}
.pot .stk{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--ink-3);margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.pot .cd{margin-top:11px;height:4px;background:var(--bg-3);overflow:hidden}
.pot .cd i{display:block;height:100%;width:0;background:var(--red);box-shadow:0 0 8px var(--red)}
.pot.counting .cd i{transition:width linear}

/* ============================ the caption ============================ */
/* Large type, because this has to work with the sound off. */
.caption{position:relative;z-index:4;min-height:186px;flex:none;padding:4px 24px 22px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.bub{max-width:78%;padding:14px 18px;border:1px solid var(--c);position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.bub.r{margin-left:auto}
.bub .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--c);margin-bottom:6px;display:flex;gap:10px;align-items:baseline}
.bub .who em{font-style:normal;color:var(--ink-3);font-size:9px}
.bub .tx{font-family:var(--display);font-size:clamp(16px,2.2vw,25px);font-weight:600;line-height:1.28;letter-spacing:-.015em;color:var(--ink-0)}
.bub .tx .cur{display:inline-block;width:.5em;height:1em;background:var(--c);vertical-align:-.12em;animation:caret .7s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
/* The line that moved a ball. A provisional flip is a reaction to what the
   opponent just said, so say which sentence did it — otherwise the audience
   sees a ball move and has to guess why. */
.bub.blamed{animation:blame 1.5s ease-out}
/* While it is being blamed it stops being background — it is the whole point. */
.bub.old.blamed{opacity:.8;animation:blame 1.5s ease-out,unfade 1.5s ease-out}
@keyframes unfade{0%{opacity:.26}16%{opacity:.9}84%{opacity:.9}100%{opacity:.26}}
.bub.blamed::after{content:attr(data-blame);position:absolute;right:12px;top:-10px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;padding:2px 7px;
  background:var(--bg-0);border:1px solid var(--k);color:var(--k);white-space:nowrap;z-index:3;
  animation:blametag 1.5s ease-out}
@keyframes blame{
  0%{box-shadow:none}
  14%{box-shadow:0 0 0 2px var(--k),0 0 22px color-mix(in srgb,var(--k) 55%,transparent)}
  100%{box-shadow:none}
}
@keyframes blametag{0%{opacity:0;transform:translateY(-5px)}18%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0}}

.bub.old{opacity:.26;transform:scale(.95);transform-origin:left bottom}
.bub.old .tx{font-size:clamp(13px,1.5vw,17px)}
.bub.old.r{transform-origin:right bottom}
.bub.in{animation:pop .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

/* ============================ the reveal ============================ */
/* The reveal belongs to the balls. The headline sits under them rather than
   over them, and the wash is light enough that two open balls still read. */
.outcome{position:absolute;left:0;right:0;bottom:0;top:46%;z-index:9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 20px;
  background:linear-gradient(180deg,transparent,rgba(5,7,13,.86) 18%,rgba(5,7,13,.97));
  opacity:0;pointer-events:none;transition:opacity .6s}
.outcome.on{opacity:1;pointer-events:auto}
.outcome .big{font-family:var(--display);font-size:clamp(30px,6.4vw,72px);font-weight:700;letter-spacing:-.04em;line-height:1;text-align:center}
.outcome .big.BETRAYAL{color:var(--red);text-shadow:0 0 44px rgba(255,51,85,.55)}
.outcome .big.SPLIT{color:var(--green);text-shadow:0 0 44px rgba(62,255,139,.45)}
.outcome .big.MUTUAL_DESTRUCTION{color:var(--ink-2)}
.outcome .sub{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-2);text-align:center;max-width:560px;line-height:1.8}
.outcome .pay{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink-1)}
.outcome .pay b{color:var(--yellow)}
.outcome .acts{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;justify-content:center}

/* ============================ the rail ============================ */
.rail{border-left:1px solid var(--line);background:var(--bg-1);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.railscroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin}
.railscroll::-webkit-scrollbar{width:7px}.railscroll::-webkit-scrollbar-track{background:var(--bg-0)}.railscroll::-webkit-scrollbar-thumb{background:var(--bg-3)}
.rail .h{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;color:var(--pink)}
.rail .h .dot{width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 7px var(--pink)}
.rail .h .n{margin-left:auto;color:var(--ink-3);letter-spacing:.1em}
.feed{flex:0 0 auto;padding:11px 13px;display:flex;flex-direction:column;gap:10px}
.feed::-webkit-scrollbar{width:7px}.feed::-webkit-scrollbar-track{background:var(--bg-0)}.feed::-webkit-scrollbar-thumb{background:var(--bg-3)}
.msg{font-family:var(--mono);font-size:11.5px;line-height:1.6;animation:slide .3s ease}
@keyframes slide{from{opacity:0;transform:translateX(9px)}to{opacity:1;transform:none}}
.msg .n{color:var(--c);font-weight:700;letter-spacing:.04em}
.msg .t{color:var(--ink-3);font-size:9px;margin-left:6px}
.msg .b{color:var(--ink-1);display:block;margin-top:3px}
.msg.lock .b{color:var(--ink-2);border-left:2px solid var(--k);padding-left:8px}
.msg.decide .b{color:var(--ink-0);border-left:2px solid var(--pink);padding-left:8px}
.msg.decide .n::after{content:' · AT THE MOMENT OF CHOOSING';color:var(--pink);font-weight:400;font-size:8.5px;letter-spacing:.1em}
.msg.sys{color:var(--ink-3);font-size:9.5px;letter-spacing:.1em;border-top:1px dashed var(--line);padding-top:9px}

.coachcard{padding:11px 13px;border-top:1px solid var(--line);background:rgba(5,7,13,.5)}
.coachcard h4{font-family:var(--mono);font-size:9px;letter-spacing:.15em;color:var(--ink-3);font-weight:400;margin-bottom:7px}
.coachcard .who{font-family:var(--mono);font-size:9.5px;color:var(--c);letter-spacing:.06em;margin-bottom:4px}
.coachcard ol{list-style:none;counter-reset:c;margin-bottom:9px}
.coachcard li{counter-increment:c;font-family:var(--mono);font-size:10px;line-height:1.55;color:var(--ink-2);padding-left:15px;position:relative;margin-bottom:2px}
.coachcard li::before{content:counter(c);position:absolute;left:0;color:var(--c);opacity:.7}
.railfoot{padding:10px 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--ink-3);line-height:1.8}

/* ============================ responsive ============================ */
/* The two agents stay side by side at every width. Four balls and who is
   holding what is the whole read; stacking them would throw it away. */
@media(max-width:980px){
  .cam{grid-template-columns:1fr;height:auto;min-height:0}
  .hud .badge{font-size:12px}
  .tog{padding:5px 8px;font-size:8.5px}
  .outcome{top:34%}
  .rail{border-left:none;border-top:1px solid var(--line);overflow:visible}
  .railscroll{overflow:visible}
  .feed{max-height:300px;overflow-y:auto}
  .arena{grid-template-columns:1fr 1fr;gap:10px;padding:14px 12px 2px;overflow:visible}
  .side{height:auto;gap:8px}
  .pot{grid-column:1/-1;order:-1;align-self:stretch;display:flex;align-items:baseline;justify-content:center;
    gap:12px;flex-wrap:wrap;padding:10px 14px}
  .pot .k{margin:0}
  .pot .v{font-size:clamp(24px,7vw,34px)}
  .pot .u{margin:0}
  .pot .stk{margin:0;padding:0;border:0}
  .pot .cd{flex:1 0 100%;margin-top:8px}
  .caption{min-height:120px;padding:4px 12px 16px}
  .bub{max-width:100%}
  .bub.old{display:none}
  .shell{width:clamp(62px,17vw,110px);height:clamp(62px,17vw,110px)}
  .plate .by{display:none}
  .tells .row .k{width:70px;font-size:7.5px}
  .tells .row .v{width:44px}
  .tells{padding:8px 9px}
  .hud{padding:10px 12px;gap:8px}
  .rounds{padding:7px 12px}
}
@media(max-width:640px){
  .nav .tag{display:none}
  .ball{width:clamp(52px,15vw,72px)}
  .balls{gap:8px;padding:26px 0 2px}
  .grip{bottom:14px}
  .plate .nm{font-size:clamp(13px,3.6vw,17px)}
  .plate .rep{font-size:8px}
  .tells .row .k{width:0;overflow:hidden;white-space:nowrap}
  .tells .row::before{content:attr(data-short);font-family:var(--mono);font-size:8px;letter-spacing:.08em;width:30px;flex:none;color:var(--ink-3)}
  .bank{font-size:10.5px}
  .bank .k{font-size:8px}
  /* the balls must stay visible: the headline sits under them, not over them */
  .outcome{top:auto;bottom:0;height:auto;padding:34px 14px 18px;gap:9px}
  .outcome .sub{font-size:9.5px}
  .outcome .pay{font-size:11px}
  .plate .rep .full{display:none}
}

/* ============================ reduced motion ============================ */
@media (prefers-reduced-motion:reduce){
  .side .shell,.side.recoil .shell,.side.recoil .shell .optic,
  .side.thinking .shell .scan,.side.thinking .shell .ring,
  .side.speaking .shell .grille rect,.ball.dropped .orb,.ball.locked::after,
  .grip.hunting i,.bub.blamed,.bub.old.blamed,.bub.blamed::after,.state.live::before,.bub.in,.msg,.bub .tx .cur{animation:none!important}
  .ball.locked::after{opacity:1}
  .bub.old.blamed{opacity:.8}
  .orb,.hemi,.grip,.inner{transition-duration:.001ms!important}
  .side.thinking .shell .optic{transform:scaleY(.5)}
  .side.thinking .shell .ring{opacity:.5}
}