/* Stance buttons, resting bottom bar, captions, stat ticks, short phones, relayout, Turnstile box, Up-next strip. */
/* ---- stance: the one decision, centred on the rift. FOR button left of the seam, AGAINST right of it; plain label, no plate. ---- */
.stance{position:absolute;left:calc(50% + var(--shift));top:var(--score-cy,55%);transform:translate(-50%,-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;transition:left 1.2s cubic-bezier(.2,.8,.2,1)}
.stance .slabel{font-size:var(--t0);font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px #000,0 2px 14px rgba(0,0,0,.9);opacity:.95}
.stance .sbtns{display:flex;align-items:center;gap:calc(4.6vw + 64px)}
/* Designer 2026-09-17: a chamfered HUD plate, not a rounded chip (the thrown quotes are the chips). Rim + fill are drawn by two clipped
   pseudo-elements; the glow / shade is a drop-shadow filter (--shade) so it follows the cut corners (a box-shadow would draw the rectangle).
   --tone carries the dimming of the unchosen button; --rim / --fill carry the side colours. */
.stance .sbtn{pointer-events:auto;position:relative;isolation:isolate;font:inherit;font-weight:800;font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;min-width:200px;padding:calc(1.7*var(--u)) calc(3*var(--u));border-radius:0;border:2px solid transparent;color:#fff;background:transparent;--rim:#fff;--fill:rgba(6,8,14,.92);--tone:brightness(1);--shade:drop-shadow(0 8px 12px rgba(0,0,0,.45));filter:var(--tone) var(--shade);cursor:pointer;transition:transform .15s,filter .2s,opacity .3s}
.stance .sbtn::before,.stance .sbtn::after{content:"";position:absolute;z-index:-1;pointer-events:none;transition:background .2s}
.stance .sbtn::before{inset:-2px;background:var(--rim);clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px)}
.stance .sbtn::after{inset:0;background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 45%),var(--fill);backdrop-filter:blur(8px);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.stance .sbtn.a{--rim:var(--a2)} .stance .sbtn.b{--rim:var(--b2)}
.stance .sbtn:not(:disabled):hover{transform:translateY(-2px)}
.stance .sbtn.a:hover{--fill:color-mix(in srgb,var(--a1) 45%,rgba(6,8,14,.8));--shade:drop-shadow(0 0 13px color-mix(in srgb,var(--a2) 55%,transparent))}
.stance .sbtn.b:hover{--fill:color-mix(in srgb,var(--b1) 45%,rgba(6,8,14,.8));--shade:drop-shadow(0 0 13px color-mix(in srgb,var(--b2) 55%,transparent))}
.stance .sbtn .chk{display:none;margin-right:10px}
.stance .sbtn.on .chk{display:inline}
.stance .sbtn.a.on{--fill:color-mix(in srgb,var(--a1) 78%,#000);--shade:drop-shadow(0 0 15px color-mix(in srgb,var(--a2) 60%,transparent))}
.stance .sbtn.b.on{--fill:color-mix(in srgb,var(--b1) 78%,#000);--shade:drop-shadow(0 0 15px color-mix(in srgb,var(--b2) 60%,transparent))}
/* ---- the spent states (designer 2026-09-18) ----
   Never dim a stance button with opacity: both buttons are disabled the moment the stance locks, so opacity makes the
   whole chamfered plate translucent and the momentum bars smear through it. That was the bug. Dim with literal colours
   instead — --fill for the plate, --rim for the edge, color for the ink — and leave --tone at the identity, because it is
   a filter over the entire button and a fill that must survive two colour operations is one nobody can predict.

   Closed but still pressable (the 60 s switch window): the plate keeps its glass. A solid dead plate on a control that
   still works for another minute is a lie. Only the ink and the rim go quiet. */
.stance .sbtns.picked .sbtn:not(.on):not(:disabled){--tone:brightness(1);--fill:rgba(6,8,14,.92);color:rgba(255,255,255,.66)}
.stance .sbtns.picked .sbtn.a:not(.on):not(:disabled){--rim:color-mix(in srgb,var(--a2) 55%,#0a0c14)}
.stance .sbtns.picked .sbtn.b:not(.on):not(:disabled){--rim:color-mix(in srgb,var(--b2) 55%,#0a0c14)}
.stance .sbtns.picked .sbtn:not(.on):not(:disabled):hover{color:#fff}
.stance .sbtns.picked .sbtn.a:not(.on):not(:disabled):hover{--rim:var(--a2)}
.stance .sbtns.picked .sbtn.b:not(.on):not(:disabled):hover{--rim:var(--b2)}
/* Closed for good: same chamfer, because the silhouette is how you know this slab is the pair's other half — but no
   coloured rim, because a coloured rim is this page's one signal that a thing can be pressed. The plate is opaque and
   stops sampling its backdrop. Ink at .55 is a floor, not a preference: 4.56:1 over #363a44, and the label is 16px bold,
   which WCAG counts as body text. The visitor still has to be able to read the side they did not take. */
.stance .sbtn:not(.on):disabled{cursor:default;--tone:brightness(1);--fill:#363a44;--rim:rgba(255,255,255,.14);color:rgba(255,255,255,.55);--shade:drop-shadow(0 4px 8px rgba(0,0,0,.38))}
.stance .sbtn:not(.on):disabled::after{-webkit-backdrop-filter:none;backdrop-filter:none}
.stance .sbtn:disabled{cursor:default}
/* the unchosen pair breathes a little so it reads as "pick one" */
.stance .sbtns:not(.picked) .sbtn{animation:invite 2.6s ease-in-out infinite}
.stance .sbtns:not(.picked) .sbtn.b{animation-delay:1.3s}
.stance .sbtn:hover{animation:none}   /* the breathe loop must not fight the hover lift; hovered stays lifted until the pointer leaves */
@keyframes invite{50%{filter:var(--tone) drop-shadow(0 0 11px rgba(255,255,255,.28)) drop-shadow(0 8px 12px rgba(0,0,0,.45))}}
@media (prefers-reduced-motion: reduce){ .stance .sbtn{animation:none!important} }
@media (max-width:1199px){ .stance .sbtn{min-width:150px} .stance .sbtns{gap:calc(4.6vw + 48px)} }
@media (max-width:699px), (max-width:1023px) and (orientation:portrait){
  /* phone: FOR button just above the rift, AGAINST just below it, rift visible between them */
  .stance{left:50%;top:var(--sy);transform:translate(-50%,-50%);width:auto}
  .stance .sbtns{flex-direction:column;gap:calc(4.6vw + 64px)} .stance .sbtn{min-width:72vw;font-size:var(--t2);padding:11px 20px}   /* owner 2026-09-18: clear air between each button and the seam. Sized when the old bolt's body + halo was ~57px tall on a phone (~78px on a tablet); the seam is far thinner now, so each button gained air. Constant left alone: it is the owner's rule to change, not ours. */
  .stance .sopt:first-child{flex-direction:column-reverse}   /* top button: caption above it, never on the rift */
  .stance .sbtn .chk{margin-right:5px}
}
@media (min-width:700px) and (max-width:1023px) and (orientation:portrait){ .stance .sbtn{min-width:46vw;width:46vw} }   /* tablets: plates, not form bars */

/* ---- the bottom bar rests once a side is taken: smaller and quieter until hovered / focused / tapped ---- */
@media (hover:hover){
  .actions{transition:opacity .45s cubic-bezier(.2,.8,.2,1)}
  .actions.quiet{opacity:.55}
  .actions.quiet:hover,.actions.quiet:focus-within{opacity:1}
}
@media (hover:none){ .actions.quiet{opacity:.85} }


/* stance caption: switch window / locked in, under the chosen button (never across the rift) */
.stance .sopt{display:flex;flex-direction:column;align-items:center;gap:6px}
.stance .sopt .lock{display:block;min-height:12px;line-height:12px;font-size:var(--t-1);letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.8;text-shadow:0 1px 3px #000,0 1px 10px rgba(0,0,0,.9);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Locked, the side they took: still coloured and crisp, because it is their answer and they come back to re-read it.
   What goes is the emission — a badge should not glow. Lever if it reads too withdrawn: restore a third of the live
   bloom, --shade:drop-shadow(0 0 9px color-mix(in srgb,var(--a2) 34%,transparent)), before touching the fill. */
.stance .sbtns.locked .sbtn.on{cursor:default;--tone:brightness(1);--shade:drop-shadow(0 6px 10px rgba(0,0,0,.5));animation:none}
.stance .sbtns.locked .sbtn.a.on{--fill:color-mix(in srgb,var(--a1) 62%,#05070d);--rim:color-mix(in srgb,var(--a2) 74%,#0a0c14)}
.stance .sbtns.locked .sbtn.b.on{--fill:color-mix(in srgb,var(--b1) 62%,#05070d);--rim:color-mix(in srgb,var(--b2) 74%,#0a0c14)}

/* stat change tick */
.stat .v .tick{display:inline-block;margin-left:6px;font-size:var(--t-1);vertical-align:middle;animation:tickFade 1.4s ease-out forwards}
.stat .v .tick.up{color:var(--pos)} .stat .v .tick.down{color:var(--neg)}
@keyframes tickFade{0%{opacity:0;transform:translateY(4px)}15%{opacity:1;transform:none}100%{opacity:0}}
.stance .sbtns.locked .sbtn.on:hover{transform:none}

/* ---- short phones (landscape-ish or old 16:9 screens): compact mode so the middle band still has room ---- */
@media (max-width:699px) and (max-height:740px){
  /* the unit (--u) already shrinks the type; compact mode only drops the quiet extras */
  .topic{padding:6px 10px 8px;margin-top:4px}
  .name small{display:none}
  canvas.spark{display:none}
  .side{gap:4px}
  .stance .sbtns{gap:calc(4.6vw + 56px)} .stance .sbtn{padding:10px 16px}   /* a shorter seam band and shorter buttons keep the trailing half's stats above the dock */
  .actions{padding:4px 8px} .actions .vgroup{gap:4px} .actions .vgroup.crowd{display:none}
  .actions .lastverdict{display:none}
  .artbg .gallery{display:none}
}

/* layout-mode change (phone <-> desktop): no transitions for that frame */
.stage.relayout .artbg .img,.stage.relayout .bolt,.stage.relayout .bolt svg,.stage.relayout .bolt .riftshift,.stage.relayout .arena,.stage.relayout .stance,.stage.relayout .artbg .push{transition:none!important}
@media (max-width:699px), (max-width:1023px) and (orientation:portrait){ .bolt{transition:top 1.2s cubic-bezier(.2,.8,.2,1)} .stance{transition:top 1.2s cubic-bezier(.2,.8,.2,1)} }
/* while the verdict / reveal plate is up, the stance choice steps aside */
.stage[data-mode="verdict"] .stance,.stage[data-mode="reveal"] .stance{opacity:0;pointer-events:none;transition:opacity .4s}

/* Turnstile bot check: invisible unless Cloudflare needs an interaction, then it sits above the bottom bar */
.ts{position:fixed;left:50%;bottom:calc(var(--dock-h,0px) + 14px);transform:translateX(-50%);z-index:60}
.ts:empty{display:none}

/* evening "Up next" strip + NEW tag on fresh ticker headlines */
.lastverdict[data-winner="next"]{border-left-color:#fff;color:#fff}
.lastverdict i{opacity:.6;font-style:normal;letter-spacing:.08em}
#ticker em.new{font-style:normal;font-weight:800;color:#fff;background:rgba(255,255,255,.14);border-radius:3px;padding:0 5px;line-height:14px;letter-spacing:.14em}

/* a stat that just changed pops: larger and gold, easing back to its normal size and colour. transform only, so nothing around it moves */
.stat .v{transform-origin:left center}
.side.b .stat .v{transform-origin:right center}
.stat .v.pop{animation:statpop 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes statpop{0%{transform:scale(1.45);color:#ffd166;text-shadow:0 0 14px rgba(255,209,102,.7),0 1px 4px rgba(0,0,0,.8)}55%{color:#ffd166}100%{transform:scale(1);color:inherit}}
@media (prefers-reduced-motion:reduce){.stat .v.pop{animation:none}}

/* click burst around a stance / prediction button: an expanding ring + 16 short sparks in the side's colour (vote/burst.js) */
.burst{position:fixed;pointer-events:none;z-index:70}
.burst b{position:absolute;inset:-2px;border-radius:0;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);border:2px solid var(--c);box-shadow:inset 0 0 14px color-mix(in srgb,var(--c) 50%,transparent);filter:drop-shadow(0 0 12px var(--c));animation:ringout .55s cubic-bezier(.2,.7,.2,1) forwards}
.burst i{position:absolute;left:50%;top:50%;width:3px;height:var(--l);margin:calc(-1 * var(--l) / 2) 0 0 -1.5px;border-radius:2px;background:#fff;box-shadow:0 0 8px var(--c),0 0 16px var(--c);transform:rotate(var(--a)) translateY(-14px);animation:sparkfly var(--t) cubic-bezier(.1,.8,.3,1) forwards}
@keyframes ringout{0%{transform:scale(1);opacity:.95}100%{transform:scale(1.35);opacity:0}}
@keyframes sparkfly{0%{transform:rotate(var(--a)) translateY(-14px) scaleY(1);opacity:1}100%{transform:rotate(var(--a)) translateY(calc(-14px - var(--d))) scaleY(.25);opacity:0}}
.sbtn.hit,.vbtn.hit{animation:btnhit .45s ease-out}
@keyframes btnhit{0%{transform:scale(.96);filter:brightness(1.8) var(--shade,drop-shadow(0 0 0 transparent))}60%{transform:scale(1.04)}100%{transform:scale(1);filter:brightness(1) var(--shade,drop-shadow(0 0 0 transparent))}}