/* Arena runoff count: fighting-game health bars on the theme's yellow/red split. */
.runoff-arena,.runoff-strip{--rb-yellow:var(--team-yellow,#ffcf3a);--rb-red:var(--team-red,#f0474b);--rb-gold:#f6c560;--rb-frame:#0b0e17;color:var(--text,#fff4dc);font-family:'Nunito Sans',Arial,sans-serif}
.runoff-arena{margin:14px 0 0;position:relative;z-index:2}
.runoff-strip{width:min(var(--public-width,1360px),calc(100% - 32px));margin:10px auto 0;position:relative;z-index:3}
.rb-board{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 18px;padding:18px 22px 14px;border:2px solid #5b4a23;border-radius:14px;
  background:linear-gradient(180deg,#1b2233f2,#10131ef2),repeating-linear-gradient(90deg,#ffffff06 0 2px,transparent 2px 6px);box-shadow:inset 0 0 0 2px #00000080,0 10px 30px #0006;overflow:hidden}
.rb-board::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--rb-yellow) 0 50%,var(--rb-red) 50%)}
.rb-side{display:grid;gap:7px;min-width:0}
.rb-right{text-align:right}
.rb-name{display:flex;align-items:baseline;gap:8px;min-width:0}
.rb-right .rb-name{flex-direction:row-reverse}
.rb-name b{font-weight:900;font-size:clamp(15px,1.5vw,21px);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:2px 2px 0 #000}
.rb-yellow .rb-name b{color:var(--rb-yellow)}.rb-red .rb-name b{color:var(--rb-red)}
.rb-name small{color:var(--muted,#bcc4d6);font-weight:800;font-size:12px;white-space:nowrap}
/* Bars are anchored on the outer edge, so a drop opens a gap next to the VS badge. */
.rb-meter{position:relative;height:26px;border:3px solid var(--rb-frame);outline:2px solid var(--rb-gold);border-radius:3px;background:#2a0d12;overflow:visible;image-rendering:pixelated}
.rb-fill,.rb-ghost{position:absolute;top:0;bottom:0;width:var(--w)}
.rb-left :is(.rb-fill,.rb-ghost){left:0}.rb-right :is(.rb-fill,.rb-ghost){right:0}
.rb-ghost{background:#fff3c4;opacity:.85}
.rb-fill{background:repeating-linear-gradient(90deg,#0000 0 10px,#0003 10px 12px),linear-gradient(180deg,#fff7 0 18%,#0000 18% 70%,#0003 70%),var(--rb-color)}
.rb-yellow{--rb-color:var(--rb-yellow)}.rb-red{--rb-color:var(--rb-red)}
.rb-crown{position:absolute;top:-21px;font-size:20px;color:var(--rb-gold);text-shadow:0 2px 0 #000;opacity:0;transform:scale(.4);transition:.4s}
.rb-left .rb-crown{left:6px}.rb-right .rb-crown{right:6px}
.is-final .rb-side:has(.rb-fill[style*="--w:100%"]) .rb-crown{opacity:1;transform:none}
.rb-numbers{display:flex;align-items:baseline;gap:10px}
.rb-right .rb-numbers{flex-direction:row-reverse}
.rb-numbers strong{font-weight:900;font-size:clamp(20px,2.2vw,30px);text-shadow:2px 2px 0 #000;font-variant-numeric:tabular-nums}
.rb-numbers span{color:var(--muted,#bcc4d6);font-size:13px;font-variant-numeric:tabular-nums}
.rb-center{position:relative;display:grid;justify-items:center;text-align:center;gap:2px;min-width:86px}
.rb-center img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 3px 0 #000)}
.rb-vs{font-weight:900;font-size:26px;letter-spacing:.04em;color:var(--rb-gold);text-shadow:3px 3px 0 #000,-1px -1px 0 #000;font-style:italic}
.rb-center small{color:var(--muted,#bcc4d6);font-weight:800;font-size:11px;line-height:1.2;font-variant-numeric:tabular-nums}
.rb-spark{position:absolute;left:50%;top:34%;width:12px;height:12px;margin:-6px;border-radius:50%;opacity:0;pointer-events:none}
.rb-status{grid-column:1/-1;margin:0;text-align:center;color:var(--muted,#bcc4d6);font-size:12.5px;font-weight:700}
.rb-status.is-stale{color:#ffb86b}
.rb-status.is-demo{color:#111;background:var(--rb-gold);border-radius:999px;justify-self:center;padding:3px 12px;font-weight:900;letter-spacing:.03em}
.rb-round{position:absolute;left:50%;top:50%;padding:8px 22px;border:3px solid #000;outline:2px solid var(--rb-gold);background:#1b2233;color:var(--rb-gold);font-weight:900;font-size:clamp(16px,2.4vw,28px);letter-spacing:.06em;
  text-shadow:2px 2px 0 #000;white-space:nowrap;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;z-index:4}
.rb-idle{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;padding:16px 20px;border:2px solid #5b4a23;border-radius:14px;background:#141a28f0}
.rb-idle p{flex-basis:100%;margin:0;text-align:center;color:var(--muted,#bcc4d6);font-weight:800}
.rb-team{display:grid;place-items:center;min-width:64px;height:38px;padding:0 12px;border:3px solid #000;outline:2px solid var(--rb-gold);font-weight:900;font-size:22px;color:#111;text-shadow:none}
.rb-team.rb-yellow{background:var(--rb-yellow)}.rb-team.rb-red{background:var(--rb-red);color:#fff}
/* Compact strip for the other pages. */
.is-compact.rb-board{padding:10px 16px 8px;gap:6px 12px;border-radius:12px}
.is-compact .rb-meter{height:16px;border-width:2px}
.is-compact .rb-center img,.is-compact .rb-center small{display:none}
.is-compact .rb-vs{font-size:18px}
.is-compact .rb-numbers strong{font-size:17px}
.is-compact .rb-numbers span,.is-compact .rb-crown{display:none}
.runoff-strip .rb-idle{padding:8px 14px}.runoff-strip .rb-idle p{font-size:13px}.runoff-strip .rb-team{height:28px;min-width:48px;font-size:16px}
/* Hits, gains and the clash in the middle. Same effects for both sides. */
.is-hit .rb-fill,.is-gain .rb-fill{animation:rb-fill .5s cubic-bezier(.2,.8,.2,1) both}
.is-hit .rb-ghost{animation:rb-ghost 1.1s .5s cubic-bezier(.4,0,.2,1) both}
.is-hit .rb-meter{animation:rb-hit .42s steps(2,end)}
.is-clashing .rb-spark{animation:rb-spark .55s ease-out}
.is-clashing .rb-center img{animation:rb-swords .5s cubic-bezier(.3,1.6,.5,1)}
.rb-round.is-on{animation:rb-round 2.6s cubic-bezier(.2,.9,.2,1) both}
@keyframes rb-fill{from{width:var(--from)}}
@keyframes rb-ghost{from{width:var(--from)}}
@keyframes rb-hit{0%,100%{transform:none;filter:none}25%{transform:translateX(-4px);filter:brightness(2.2)}75%{transform:translateX(4px)}}
@keyframes rb-spark{0%{opacity:1;box-shadow:0 0 0 0 #fff,0 0 0 0 var(--rb-yellow),0 0 0 0 var(--rb-red)}100%{opacity:0;box-shadow:-38px -20px 0 2px #fff0,40px -16px 0 1px #ffcf3a00,0 26px 0 3px #f0474b00,0 0 40px 14px #fff0}}
@keyframes rb-swords{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-8deg)}100%{transform:none}}
@keyframes rb-round{0%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}14%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
@media (max-width:760px){
  .rb-board{grid-template-columns:1fr auto 1fr;padding:14px 12px 10px;gap:8px}
  .rb-name{flex-direction:column;align-items:flex-start;gap:0}.rb-right .rb-name{align-items:flex-end;flex-direction:column}
  .rb-name b{font-size:13px;white-space:normal;line-height:1.1}
  .rb-numbers{flex-direction:column;gap:0}.rb-right .rb-numbers{align-items:flex-end;flex-direction:column}
  .rb-numbers strong{font-size:18px}.rb-numbers span{font-size:11px}
  .rb-center{min-width:50px}.rb-center img{width:34px;height:34px}.rb-vs{font-size:18px}
  .is-compact .rb-name small{display:none}.runoff-strip{width:calc(100% - 24px)}
  .rb-round{font-size:13px;padding:5px 12px;top:30%;outline-width:1px}
}
@media (prefers-reduced-motion:reduce){.runoff-arena *,.runoff-strip *{animation:none!important;transition:none!important}}
/* Arena teams: pick a colour; the board sums game points, never people. */
.runoff-teams{--rb-yellow:var(--team-yellow,#ffcf3a);--rb-red:var(--team-red,#f0474b);--rb-gold:#f6c560;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:10px 28px;margin:12px 0 0;padding:18px 22px;
  border:2px solid #5b4a23;border-radius:14px;background:linear-gradient(110deg,#171d2cf2,#10131ef2);color:var(--text,#fff4dc);position:relative;z-index:2}
.rb-teams-copy h2{margin:4px 0 6px;font-size:clamp(20px,2vw,26px);font-weight:900;line-height:1.1}
.rb-teams-copy p{margin:0;color:var(--muted,#bcc4d6);font-size:14px;line-height:1.45}
.rb-picks{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.rb-pick{display:grid;gap:2px;justify-items:center;min-height:74px;padding:10px 12px;border:3px solid #000;outline:2px solid var(--rb-gold);border-radius:4px;cursor:pointer;font:inherit;color:#111;
  box-shadow:inset 0 -6px 0 #0003,0 4px 0 #000;transition:transform .12s ease,filter .12s ease}
.rb-pick.rb-yellow{background:var(--rb-yellow)}.rb-pick.rb-red{background:var(--rb-red);color:#fff}
.rb-pick b{font-weight:900;font-size:16px;text-transform:uppercase;letter-spacing:.02em}
.rb-pick span{font-weight:900;font-size:22px;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 #fff6}
.rb-pick.rb-red span{text-shadow:0 1px 0 #0006}
.rb-pick:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}
.rb-pick:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 -2px 0 #0003,0 1px 0 #000}
.rb-pick:focus-visible{outline:3px solid #fff;outline-offset:3px}
.rb-pick[aria-pressed="true"]{outline:3px solid #fff;box-shadow:inset 0 -6px 0 #0003,0 4px 0 #000,0 0 0 6px #ffffff2e}
.rb-pick[aria-pressed="true"] b::before{content:'✔ '}
.rb-pick:disabled{cursor:default}
.rb-pick:disabled:not([aria-pressed="true"]){filter:saturate(.75) brightness(.85)}
.runoff-teams .rb-vs{font-size:22px}
.rb-teams-note{grid-column:2;margin:0;text-align:center;color:var(--muted,#bcc4d6);font-size:12.5px;font-weight:700;min-height:1em}
.rb-login{grid-column:2;justify-self:center;display:inline-flex;align-items:center;min-height:42px;padding:8px 18px;border:3px solid #000;outline:2px solid var(--rb-gold);border-radius:4px;background:var(--rb-yellow);color:#111;font-weight:900;text-decoration:none;box-shadow:inset 0 -4px 0 #0003,0 3px 0 #000}
.rb-login:hover{filter:brightness(1.08)}.rb-login:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:760px){.runoff-teams{grid-template-columns:1fr;padding:16px 14px}.rb-teams-note,.rb-login{grid-column:1}.rb-pick{min-height:64px}.rb-pick b{font-size:13px}.rb-pick span{font-size:18px}}
/* Sound toggle for the sword cues, in the top corner of every bar. */
.rb-mute{position:absolute;bottom:8px;right:10px;z-index:5;display:grid;place-items:center;width:32px;height:32px;padding:0;border:2px solid #5b4a23;border-radius:8px;background:#0b0e17cc;color:#fff;font-size:15px;line-height:1;cursor:pointer;transition:transform .12s ease,border-color .12s ease}
.rb-mute:hover{border-color:var(--rb-gold);transform:translateY(-1px)}.rb-mute:focus-visible{outline:3px solid #fff;outline-offset:2px}
.rb-mute[aria-pressed="true"]{opacity:.75}
.is-compact .rb-mute{bottom:auto;top:50%;right:8px;width:26px;height:26px;font-size:12px;transform:translateY(-50%)}
.is-compact .rb-mute:hover{transform:translateY(calc(-50% - 1px))}
.is-compact.rb-board{padding-right:42px}
@media (max-width:760px){.rb-mute{bottom:6px;right:6px;width:28px;height:28px;font-size:13px}}
/* Election-night notice above the bars. */
.rb-notice{margin:0 0 8px;padding:10px 14px;border:2px solid #f6c560;border-radius:10px;background:#2a2312f2;color:#fff4dc;font-size:14px;line-height:1.45;font-weight:700}
.rb-notice b{color:#f6c560;font-weight:900}
.rb-notice a{color:#ffd978;font-weight:900;white-space:nowrap}
.runoff-strip .rb-notice{font-size:12.5px;padding:7px 12px;margin-bottom:6px}
/* Confirmation before a final team pick. */
.rb-confirm{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;padding:10px 12px;border:2px solid var(--rb-gold,#f6c560);border-radius:10px;background:#2a2312f2}
.rb-confirm p{flex-basis:100%;margin:0;text-align:center;font-size:14px;font-weight:700;color:#fff4dc}
.rb-confirm b{color:var(--rb-gold,#f6c560)}
.rb-confirm button{min-height:38px;padding:6px 16px;border:3px solid #000;border-radius:4px;font:inherit;font-weight:900;cursor:pointer;box-shadow:0 3px 0 #000}
.rb-confirm-yes{background:var(--rb-gold,#f6c560);color:#111}.rb-confirm-no{background:#2b3348;color:#fff}
.rb-confirm button:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:760px){.rb-confirm{grid-column:1}}
.rb-live{grid-column:1/-1;margin:-4px 0 0;text-align:center;color:#8fd3ff;font-size:12px;font-weight:800}
.is-compact .rb-live{font-size:11px;margin:0}