/* showdown-board.css */
/* ============================================================
   CLASSROOM SHOWDOWN — TEACHER CONTROL (v2.74.0, showdown-board.js +
   showdown-lobby.js). The board, drawn on a 1672 × 941 stage — the
   reference canvas — and zoomed to the window by showdown-host.js. Every
   measurement is a plain pixel off the design; nothing here is responsive
   because the whole stage scales as one picture.

   The scenery is the screen's background (showdown-host.css); this file is
   the band, the panels and everything in them.
   ============================================================ */

.sb-deco{pointer-events:none;user-select:none}
.sb-bar{
  left:251px;top:48px;width:1385px;height:136px;z-index:1;   /* v2.75.27 — with the smaller, higher top band; v2.75.28 — y 48 */
  background:linear-gradient(180deg,#2F63D8,#1E48B6);border-radius:60px;
  box-shadow:0 14px 34px rgba(20,44,110,.3),inset 0 3px 0 rgba(255,255,255,.25);
}
.sb-logo{left:30px;top:18px;width:346px;z-index:3;filter:drop-shadow(0 8px 14px rgba(20,27,45,.3))}
.sb-art-l{left:15px;top:272px;width:125px;z-index:1;opacity:.9}
.sb-art-r{left:1493px;top:27px;width:161px;z-index:1;opacity:.9}
/* Mascots and signs sit in the margins BESIDE the panels (which start at
   x 166 and end at x 1525), never under them. */
.sb-mascot-l{left:-2px;top:540px;width:162px;z-index:2}
.sb-sign-l{left:4px;top:700px;width:150px;z-index:2}
.sb-mascot-r{left:1526px;top:760px;width:146px;z-index:2}
/* The "You got this" flag stands ON the rock podium at the far right of
   the BACKGROUND, so it is a child of the screen, not the stage, and is
   placed in the background's own scale. The scenery is a cover background
   (scale --s = max(W/1672, H/941), top-centred) while the stage is zoomed
   to fit the window; they only coincide on a 16:9 window, so a flag inside
   the stage drifted off its rock on any other shape. In the picture the
   rock's top runs from y 764 at x 1600 up to y 727 at x 1650; the flag's
   pole is a third of the way across its artwork (x 116–165 of 420) with
   its foot at 96% of the height, so 108 wide at left 1564 / top 678 puts
   the pole's foot on the rock. It sits before the stage in the DOM, so the
   panels paint over it if a narrow window ever brings them that far. */
.sb-rockflag{
  --s:max(100vw / 1672, 100vh / 941);
  position:absolute;pointer-events:none;user-select:none;
  width:calc(108 * var(--s));
  left:calc((100vw - 1672 * var(--s)) / 2 + 1564 * var(--s));
  top:calc(678 * var(--s));
}

/* A white Showdown panel. */
.sb-panel{
  position:relative;background:linear-gradient(180deg,#FFFFFF,#F1F8FF);
  border:4px solid var(--line);border-radius:38px;
  box-shadow:0 16px 40px rgba(20,85,170,.18),inset 0 1px 0 rgba(255,255,255,.85);
}

/* ------------------------------------------------------------ top band */
/* v2.75.27 — smaller and higher (Chris: "too big and too close down on the three panels"): 104 tall at y 88, so 62px of air above the columns at 254 */
.sb-top{left:385px;top:64px;   /* v2.75.28 — higher still; the columns grow into the room */z-index:4;display:flex;align-items:center;gap:12px}
.sb-joinp{display:flex;align-items:center;gap:16px;width:500px;height:104px;padding:0 22px}
.sb-globe{width:60px;height:60px;flex:0 0 auto}
.sb-joint{min-width:0;line-height:1.15}
.sb-join-lab{font-size:15px;font-weight:800;color:var(--grey)}
.sb-join-url{font-family:var(--display);font-size:24px;font-weight:700;color:var(--ink);white-space:nowrap}
.sb-join-sub{font-size:15px;font-weight:800;color:var(--royal);white-space:nowrap}
.sb-codep{width:370px;height:104px;padding:6px 14px 0;display:flex;flex-direction:column;align-items:center}
.sb-code-lab{font-size:14px;font-weight:900;letter-spacing:.1em;color:var(--ink)}
/* The digits on the yellow badge, a ray either side, the copy button after
   — a flex row, so however wide the code is nothing can overlap. */
.sb-code-row{display:flex;align-items:center;justify-content:center;gap:0;width:100%;margin-top:0}
.sb-code-ray{width:28px;flex:0 0 auto;position:relative;z-index:1}
.sb-code-ray:first-child{margin-right:-9px}
.sb-code-ray + .sb-code{margin-left:0}
.sb-code + .sb-code-ray{margin-left:-9px;margin-right:4px}
.sb-code{
  flex:0 0 auto;padding:4px 22px 6px;text-align:center;border-radius:18px;
  background:url(showdown/btn/code-badge.webp) center / 100% 100% no-repeat;
  font-family:var(--display);font-size:42px;font-weight:700;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.1;
}
.sb-copy{flex:0 0 auto;width:44px;height:44px;padding:5px;border:0;background:transparent;cursor:pointer;border-radius:14px}
.sb-copy img{width:100%;height:100%;object-fit:contain}
.sb-copy:hover{background:rgba(47,99,216,.12)}
/* v2.75.0 — the saved game's name, under the code; empty when there is none. */
.sb-gamename{
  margin-top:-3px;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;font-weight:800;color:var(--royal);line-height:1.2;
}
.sb-gamename:empty{display:none}
.sb-live{
  display:flex;align-items:center;gap:12px;height:58px;padding:0 24px 0 16px;min-width:210px;
  background:linear-gradient(180deg,#2A2D7A,#17184E);border:3px solid rgba(157,238,255,.5);border-radius:999px;
  color:#fff;font-family:var(--display);font-size:24px;font-weight:600;white-space:nowrap;
  box-shadow:0 12px 26px rgba(20,27,45,.3);
}
/* The live dot PULSES (opacity only). A scale transform on a zoomed stage
   re-rasterises the image on every frame and reads as a wiggle. */
.sb-live-dot{width:26px;height:26px;filter:grayscale(1) brightness(.7);transition:filter .3s}
.sb-live-dot.sb-live-on{filter:none;animation:sb-pulse 1.8s ease-in-out infinite}
@keyframes sb-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ------------------------------------------------------------ columns */
.sb-cols{
  left:166px;top:224px;width:1359px;height:670px;z-index:5;   /* v2.75.28 — 30px taller, same bottom edge (894) */
  display:grid;grid-template-columns:372px 520px 459px;grid-auto-rows:100%;gap:4px;   /* v2.75.4 — the question wider than the teams (was 430/448/473) */
}
.sb-col{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;overflow:hidden;padding:18px}
.sb-col-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sb-col-ico{width:42px;height:42px;object-fit:contain}
.sb-col-title{font-family:var(--display);font-size:33px;font-weight:700;color:var(--ink);white-space:nowrap}
.sb-count{margin-left:auto;margin-right:28px;padding:3px 12px;border-radius:999px;background:#EAF6FF;border:2px solid var(--line);color:var(--royal);font-size:15px;font-weight:800;white-space:nowrap}   /* v2.75.28 — smaller, further from the panel's edge */
.sb-count:empty{display:none}
.sb-empty{color:#8A94B8;font-size:21px;font-weight:700;line-height:1.4;text-align:center;white-space:pre-line}
.sb-empty-q{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.sb-empty-ico{width:90px;opacity:.35}

/* Soft secondary buttons (Kill question, Power question, End game). */
.sb-soft{
  display:flex;align-items:center;justify-content:center;gap:14px;width:100%;height:78px;flex:0 0 auto;
  border:3px solid #F4B8B0;border-radius:32px;background:linear-gradient(180deg,#FFF6F5,#FFE9E6);
  color:var(--danger);font-family:var(--display);font-size:28px;font-weight:600;cursor:pointer;
  box-shadow:0 6px 14px rgba(20,85,170,.1);transition:transform .12s,filter .12s;
}
.sb-soft img{width:36px;height:36px;object-fit:contain}
.sb-soft:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.02)}
.sb-soft:active:not(:disabled){transform:scale(.97)}
.sb-soft:disabled{opacity:.45;cursor:default}
.sb-end{margin-top:12px;border-color:#9DD6FF;background:linear-gradient(180deg,#F6FBFF,#E4F3FF);color:var(--royal)}
.sb-power{width:314px;height:66px;margin:12px auto 0;font-size:25px}
.sb-kill{margin-top:12px}

/* ------------------------------------------------------------ the queue */
.sb-qlist{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:2px}
.sb-qrow{
  display:flex;align-items:center;gap:7px;padding:8px;min-height:84px;flex:0 0 auto;
  border:3px solid var(--line-soft);border-radius:27px;background:#fff;
}
.sb-pop{animation:sb-in .28s ease-out}
.sb-qrow .sh-av-md{width:50px;height:50px}
@keyframes sb-in{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
.sb-first{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan),0 0 24px rgba(80,232,255,.5)}
.sb-who{flex:1;min-width:0;line-height:1.15}
.sb-qname{display:flex;align-items:center;gap:7px;font-family:var(--display);font-size:19px;font-weight:700;color:var(--ink);white-space:nowrap;min-width:0}
.sb-qname span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sb-qdot{width:15px;height:15px;border-radius:50%;background:var(--tc,#7E858F);flex:0 0 auto}
.sb-qsub{font-size:18px;font-weight:700;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-qsub:empty{display:none}
.sb-time{display:block;margin-top:2px;font-family:var(--display);font-size:17px;font-weight:600;color:#3D4670;font-variant-numeric:tabular-nums}   /* v2.75.6: under the name */
.sb-time:empty{display:none}
.sb-flag{display:inline-block;margin-top:3px;padding:2px 8px;border-radius:999px;font-size:13px;font-weight:900;letter-spacing:.06em;line-height:1.3}
.sb-flag:empty{display:none}
.sb-stolen{background:#FBECEB;color:#A32A1E}
.sb-hs{background:#EEF2FB;color:#2B4A8F}
.sb-second{background:#EAF7EF;color:#1E7A4A}   /* v2.75.20 — Second Chance cashed in: still in line */
.sb-second-low{background:#FBECEB;color:#A32A1E;animation:sb-blink .6s steps(2) infinite}   /* v2.75.21 — last 5 s */
@keyframes sb-blink{to{opacity:.55}}
/* v2.75.21 — the big clock in the middle column while a Second Chance runs */
.sb-round.sb-round-clock{color:#1E7A4A}
.sb-round.sb-round-clock.sb-round-low{color:#A32A1E}
.sb-clock-n{font-size:1.5em;font-variant-numeric:tabular-nums}
.sb-ok,.sb-no{width:42px;height:42px;flex:0 0 auto;padding:0;border:0;background:transparent;cursor:pointer;transition:transform .1s,filter .1s}
.sb-ok img,.sb-no img{width:100%;height:100%;object-fit:contain}
.sb-ok:hover,.sb-no:hover{transform:translateY(-1px);filter:brightness(1.06)}
.sb-ok:active,.sb-no:active{transform:scale(.94)}
.sb-qnote{font-size:17px;font-weight:700;color:#8A94B8;line-height:1.35;padding:3px 6px}

/* The award stepper, inline — never a browser dialog mid-lesson. */
.sb-award{display:flex;flex-direction:column;gap:10px;padding:15px;border:3px solid var(--cyan);border-radius:27px;background:#fff}
/* v2.75.6 — the award panel's rows: the head (monster, label, ×), the two
   modes, a stepper line, the victim chips; the Too soon panel reuses them */
.sb-award-head,.sb-award-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sb-award-head{flex-wrap:nowrap}
.sb-award-head .sb-award-lab{flex:1 1 auto;min-width:0;font-size:19px;line-height:1.2}
.sb-award-modes{display:flex;gap:6px;flex-wrap:wrap}
.sb-award-mode{padding:6px 14px;border:2px solid var(--line);border-radius:999px;background:#F1F8FF;color:var(--royal);font-family:var(--sans);font-size:15px;font-weight:800;cursor:pointer}
.sb-award-mode-on{background:var(--royal);border-color:var(--royal);color:#fff}
.sb-award-hint{font-size:14px;font-weight:700;color:var(--grey);line-height:1.35}
.sb-victims{display:flex;flex-wrap:wrap;gap:6px}
.sb-victim{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border:2px solid var(--line-soft);border-radius:999px;background:#fff;color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:800;cursor:pointer}
.sb-victim-dot{width:14px;height:14px;border-radius:50%;background:var(--tc,#7E858F)}
.sb-victim-on{border-color:var(--tc,#7E858F);background:color-mix(in srgb,var(--tc,#7E858F) 14%,#fff)}
.sb-give.sb-give-take{background:linear-gradient(180deg,#F26B4E,#D3422A);box-shadow:0 6px 0 #9E2E1C}
.sb-give.sb-give-take:active{box-shadow:0 3px 0 #9E2E1C}
.sb-give:disabled{opacity:.5;cursor:default;transform:none}
.sb-early{width:42px;height:42px;flex:0 0 auto;padding:0;border:0;background:transparent;cursor:pointer;transition:transform .1s,filter .1s}
.sb-early img{width:100%;height:100%;object-fit:contain}
.sb-early:hover{transform:translateY(-1px);filter:brightness(1.06)}
.sb-early-row{border-color:#F3B7B0}
.sb-give.sb-give-early{background:linear-gradient(180deg,#F26B4E,#D3422A);box-shadow:0 6px 0 #9E2E1C}
.sb-give.sb-give-early:active{box-shadow:0 3px 0 #9E2E1C}
.sb-award-lab{font-size:21px;font-weight:800;color:var(--grey)}
.sb-pts{min-width:44px;text-align:center;font-family:var(--display);font-size:33px;font-weight:700;font-variant-numeric:tabular-nums}
.sb-pts-in{width:84px;height:46px;padding:0 4px;border:3px solid var(--line);border-radius:15px;background:#fff;color:var(--ink);outline:none}   /* v2.75.25 — typed points (showdown-queue.js stepperRow) */
.sb-pts-in:focus{border-color:var(--royal,#2F63D8);box-shadow:0 0 0 4px rgba(47,99,216,.18)}
.sb-step{width:44px;height:46px;border:3px solid var(--line);border-radius:15px;background:#F1F8FF;color:var(--ink);font-size:27px;font-weight:800;cursor:pointer}
.sb-step:hover{background:#E1F1FF}
.sb-give{padding:12px 24px;border:0;border-radius:999px;background:linear-gradient(180deg,#3CCB8B,#1E9E62);color:#fff;font-family:var(--display);font-size:24px;font-weight:700;cursor:pointer;box-shadow:0 6px 0 #157248}
.sb-give:active{transform:translateY(3px);box-shadow:0 3px 0 #157248}
.sb-cancel{width:48px;height:48px;margin-left:auto;border:3px solid var(--line-soft);border-radius:50%;background:#fff;color:var(--grey);font-size:26px;line-height:1;cursor:pointer}

/* ------------------------------------------------------------ the question */
.sb-mid{align-items:center;text-align:center}
.sb-cat{align-self:flex-start;display:flex;align-items:center;gap:12px;font-size:18px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--royal)}
.sb-cat img{width:39px;height:39px}
.sb-qwrap{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;flex:1 1 auto;min-height:118px;padding:9px 0}   /* v2.75.19 — the words keep a floor; the picture gives way, never the other way round */
/* ONE burst each side of the question. fx/question.webp is a 700×229
   sheet with a burst at each end (x 1–97 and 558–654); each side is a
   window onto its own end at 0.3 scale (210×69). */
.sb-qfx{position:relative;width:30px;height:69px;overflow:hidden;flex:0 0 auto;pointer-events:none}
.sb-qfx img{position:absolute;top:0;left:0;width:210px;height:69px;max-width:none}
.sb-qfx-r img{left:-167px}
.sb-qwrap-empty .sb-qfx{visibility:hidden}
.sb-q{flex:1;min-width:0;font-family:var(--display);font-size:45px;font-weight:700;line-height:1.08;color:var(--ink);overflow-wrap:anywhere;max-height:100%;overflow:hidden}   /* v2.75.15 — fit-text.js shrinks it to fit; no scrolling */
.sb-qimg{flex:0 1 auto;min-height:56px;max-width:100%;max-height:194px;width:auto;border-radius:18px;object-fit:contain;border:3px solid var(--line-soft);margin-top:6px;cursor:zoom-in}   /* v2.75.19 — shrinks (tap to enlarge) so the question stays readable */
.sb-round{font-family:var(--display);font-size:25px;font-weight:600;color:#4A5380;margin-top:6px;line-height:1.25}
.sb-powerround{color:var(--danger)}
.sb-relwrap{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:12px;flex:0 0 auto}
/* ONE burst each side. fx/release.webp is a 700×250 sheet holding a burst
   at each end (x 1–86 and 504–588) of a transparent middle. Each side is a
   clipping window onto its own end of the sheet at 0.32 scale (224×80);
   placed whole on each side, every side showed both bursts. */
.sb-relfx{position:relative;width:28px;height:80px;overflow:hidden;flex:0 0 auto;pointer-events:none}
.sb-relfx img{position:absolute;top:0;left:0;width:224px;height:80px;max-width:none}
.sb-relfx-r img{left:-161px}
.sb-release{width:350px;height:104px;font-size:32px}
.sb-ans{width:100%;margin-top:6px}
.sb-ansbtn{padding:6px 18px;border:2px dashed #9DD6FF;border-radius:999px;background:#fff;color:var(--grey);font-size:18px;font-weight:800;cursor:pointer}
.sb-ansbtn:hover{border-color:var(--royal);color:var(--royal)}
.sb-anstext{margin-top:6px;font-size:22px;font-weight:800;color:var(--ink)}

/* The lobby wall (before the first question). */
.sb-lobby{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:9px}
.sb-joinbig{display:flex;align-items:baseline;gap:12px}
.sb-joinnum{font-family:var(--display);font-size:80px;font-weight:700;line-height:1;color:var(--royal);font-variant-numeric:tabular-nums}
.sb-joinlab{font-family:var(--display);font-size:30px;font-weight:600;color:var(--grey)}
.sb-wall{flex:1;min-height:0;overflow-y:auto;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:9px;padding:3px}
.sb-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 15px 4px 6px;border-radius:999px;background:#EAF6FF;border:2px solid var(--line);color:var(--ink);font-size:19px;font-weight:800;max-width:100%}
.sb-chip-av{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}
.sb-chip-av:empty{width:6px}
.sb-chip-av img{width:36px;height:36px;object-fit:contain}
.sb-chip-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The lobby's team column. EVERY TEAM ON SCREEN AT ONCE (v2.74.2): the
   wrap takes a tier from the team count (showdown-lobby.js) — lg ≤4,
   md ≤6, sm ≤9, xs 10 — and the rows shrink with it. The wrap fills the
   list and the rows share its height; the list's scroll is a safety net
   for a very big class only. Inside a row the text block WRAPS: name,
   players line and the Settle now button on the first line(s), the
   nickname key on a full line beneath. */
.sb-lteams{flex:1 0 auto;min-height:0;display:flex;flex-direction:column;gap:8px}
/* md stays one across (the players line joins the name's line); sm and
   xs go TWO ACROSS (5 rows) — a row per team cannot hold ten teams and
   their nickname keys in 540px, two columns can. */
.sb-lteams-md{gap:5px}
.sb-lteams-sm,.sb-lteams-xs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);align-content:stretch;gap:4px}
.sb-lteams-xs{gap:4px}
.sb-lrow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;padding:7px 11px;border:3px solid var(--line-soft);border-radius:22px;background:#fff;flex:1 0 auto;min-height:0}
.sb-lrow .sh-av-md{width:52px;height:52px;flex:0 0 auto}
.sb-ltxt{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:2px}
.sb-lname{flex:0 1 auto;min-width:0;font-family:var(--display);font-size:22px;font-weight:700;line-height:1.15;color:var(--tc,var(--ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-lsub{flex:1 1 auto;min-width:0;font-size:16px;font-weight:700;color:var(--grey);line-height:1.25}
.sb-lsub{flex-basis:100%;order:2}
.sb-assign{order:1}
.sb-lkey,.sb-caplist{order:3}
/* md: the players line sits on the name's line (wrapping under it only
   when it must), Settle now at the right end. */
.sb-lteams-md .sb-lsub{flex:1 1 auto;order:0}
/* In the two-across tiers the name shares its line with Settle now (a
   long name clips with an ellipsis; the button never wraps) and the
   players line wraps freely beneath. */
.sb-lteams-sm .sb-lname,.sb-lteams-xs .sb-lname{flex:1 1 0}
.sb-lkey,.sb-caplist{flex-basis:100%;display:flex;flex-wrap:wrap;gap:3px;margin-top:-4px}
.sb-keychip,.sb-capchip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px 1px 2px;border-radius:999px;background:#F1F8FF;border:2px solid var(--line-soft);font-size:12.5px;font-weight:800;color:var(--ink);white-space:nowrap;max-width:100%}
.sb-keychip .sh-av-xs,.sb-capchip .sh-av-xs{width:22px;height:22px;flex:0 0 auto}
/* v2.75.5 — the captain's chip: gold rim and a crown */
.sb-keycap{border-color:#F3C845;background:#FFF8DF}
.sb-keycrown{width:14px;height:14px;flex:0 0 auto}
.sb-keynick,.sb-keyreal{overflow:hidden;text-overflow:ellipsis}
.sb-capchip{cursor:pointer;border-color:#9DD6FF}
.sb-capchip:hover{background:#E1F1FF;border-color:var(--royal)}
.sb-keyis{color:#8A94B8}
.sb-keyreal{color:var(--royal)}
.sb-assign{flex:0 0 auto;margin-left:auto;padding:5px 12px;border:2px solid #9DD6FF;border-radius:999px;background:#fff;color:var(--royal);font-size:15px;font-weight:800;cursor:pointer;white-space:nowrap}
.sb-assign:hover{background:#EAF6FF}
/* md ≤6 */
.sb-lteams-md .sb-lrow{gap:8px;padding:4px 9px;border-radius:18px;min-width:0}
.sb-lteams-md .sb-lrow .sh-av-md{width:42px;height:42px}
.sb-lteams-md .sb-lname{font-size:19px}
.sb-lteams-md .sb-lsub{font-size:14px}
.sb-lteams-md .sb-keychip,.sb-lteams-md .sb-capchip{font-size:12px;padding:0 7px 0 2px;gap:3px}
.sb-lteams-md .sb-keychip .sh-av-xs,.sb-lteams-md .sb-capchip .sh-av-xs{width:18px;height:18px}
.sb-lteams-md .sb-lkey,.sb-lteams-md .sb-caplist{gap:3px;margin-top:-3px}
.sb-lteams-md .sb-assign{padding:3px 10px;font-size:13px}
/* sm ≤9 */
.sb-lteams-sm .sb-lrow{gap:6px;padding:3px 7px;border-width:2px;border-radius:15px;min-width:0}
.sb-lteams-sm .sb-lrow .sh-av-md{width:30px;height:30px}
.sb-lteams-sm .sb-lname{font-size:15px}
.sb-lteams-sm .sb-lsub{font-size:12px}
.sb-lteams-sm .sb-keychip,.sb-lteams-sm .sb-capchip{font-size:11px;line-height:1.1;padding:0 6px 0 2px;gap:3px;border-width:1.5px}
.sb-lteams-sm .sb-keychip .sh-av-xs,.sb-lteams-sm .sb-capchip .sh-av-xs{width:14px;height:14px}
.sb-lteams-sm .sb-lkey,.sb-lteams-sm .sb-caplist{gap:1px;margin-top:-3px}
.sb-lteams-sm .sb-assign{padding:1px 8px;font-size:12px}
/* xs 10 */
.sb-lteams-xs .sb-lrow{gap:5px;padding:3px 6px;border-width:2px;border-radius:13px;min-width:0}
.sb-lteams-xs .sb-lrow .sh-av-md{width:28px;height:28px}
.sb-lteams-xs .sb-lname{font-size:14.5px}
.sb-lteams-xs .sb-lsub{font-size:11.5px}
.sb-lteams-xs .sb-keychip,.sb-lteams-xs .sb-capchip{font-size:10.5px;line-height:1.1;padding:0 5px 0 2px;gap:2px;border-width:1.5px}
.sb-lteams-xs .sb-keychip .sh-av-xs,.sb-lteams-xs .sb-capchip .sh-av-xs{width:14px;height:14px}
.sb-lteams-xs .sb-lkey,.sb-lteams-xs .sb-caplist{gap:1px;margin-top:-2px}
.sb-lteams-xs .sb-assign{padding:0 7px;font-size:11.5px}

/* ------------------------------------------------------------ the scores */
/* Cards keep their natural height and the list scrolls; a card never clips
   its own buttons. */
/* EVERY TEAM ON SCREEN AT ONCE. The grid takes a tier from the board by
   team count (showdown-board.js): lg ≤4 (2×2), md ≤6 (3×2), sm ≤9 (3×3),
   xs 10 (4×3). Rows share the panel's height and the cards shrink with the
   tier, so nothing scrolls; overflow-y stays as a safety net only. */
.sb-slist{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px;align-content:stretch;padding:2px}
.sb-slist-md{grid-template-columns:repeat(3,minmax(0,1fr))}
.sb-slist-sm{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sb-slist-xs{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.sb-score{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:7px 8px;min-width:0;min-height:0;overflow:hidden;
  border:3px solid var(--tc,#7E858F);border-radius:24px;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--tc,#7E858F) 12%,#fff));
}
.sb-score .sh-av-lg{width:58px;height:58px}
.sb-slist-md .sb-score{padding:7px 5px}
.sb-slist-md .sh-av-lg{width:50px;height:50px}
.sb-slist-md .sb-snum{font-size:38px}
.sb-slist-md .sb-sname{font-size:16px}
.sb-slist-sm .sb-score{padding:5px 4px;gap:0;border-width:2px;border-radius:16px}
.sb-slist-sm .sh-av-lg{width:40px;height:40px}
.sb-slist-sm .sb-snum{font-size:28px}
.sb-slist-sm .sb-sname{font-size:13px;margin-top:1px}
.sb-slist-sm .sb-srow{margin-top:3px;gap:4px}
.sb-slist-sm .sb-pm{height:26px;font-size:20px;border-width:2px;border-radius:9px;box-shadow:0 2px 0 color-mix(in srgb,var(--tc,#7E858F) 55%,#000)}
.sb-slist-sm .sb-colbtn{width:24px;height:26px;border-width:2px;border-radius:8px}
.sb-slist-sm .sb-timer{margin-top:3px;padding:2px 8px;font-size:11px;border-width:2px}
.sb-slist-xs .sb-score{padding:4px 3px;gap:0;border-width:2px;border-radius:14px}
.sb-slist-xs .sh-av-lg{width:34px;height:34px}
.sb-slist-xs .sb-snum{font-size:24px}
.sb-slist-xs .sb-sname{font-size:11px;margin-top:0}
.sb-slist-xs .sb-srow{margin-top:2px;gap:3px}
.sb-slist-xs .sb-pm{height:24px;font-size:18px;border-width:2px;border-radius:8px;box-shadow:0 2px 0 color-mix(in srgb,var(--tc,#7E858F) 55%,#000)}
.sb-slist-xs .sb-colbtn{width:22px;height:24px;border-width:2px;border-radius:7px}
.sb-slist-xs .sb-timer{margin-top:2px;padding:1px 7px;font-size:10px;border-width:2px}
.sb-sname{flex:0 0 auto;max-width:100%;padding:0;border:0;background:transparent;font-family:var(--display);font-size:20px;font-weight:700;color:var(--tc,#7E858F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;margin-top:3px}
.sb-sname-live{cursor:pointer}
.sb-sname-live:hover{text-decoration:line-through}
.sb-snum{flex:0 0 auto;font-family:var(--display);font-size:42px;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.sb-bounce{animation:sb-bounce .22s ease-out}
@keyframes sb-bounce{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
.sb-srow{display:flex;gap:6px;margin-top:5px;width:100%;justify-content:center;flex:0 0 auto}
.sb-pm{
  flex:1;max-width:72px;min-width:0;height:32px;border:3px solid var(--tc,#7E858F);border-radius:11px;
  background:color-mix(in srgb,var(--tc,#7E858F) 14%,#fff);color:var(--tc,#7E858F);
  font-size:30px;font-weight:900;line-height:1;cursor:pointer;padding:0;box-shadow:0 4px 0 color-mix(in srgb,var(--tc,#7E858F) 55%,#000);
}
.sb-pm:hover{background:color-mix(in srgb,var(--tc,#7E858F) 24%,#fff)}
.sb-pm:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--tc,#7E858F) 55%,#000)}
.sb-colbtn{width:30px;height:32px;flex:0 0 auto;border:3px solid #fff;border-radius:14px;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.sb-swatches{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:9px}
.sb-swatch{width:30px;height:30px;border:3px solid #fff;border-radius:9px;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.sb-swatch:hover{transform:scale(1.1)}
.sb-swatch-on{outline:3px solid var(--ink);outline-offset:1px}
.sb-timer{flex:0 0 auto;margin-top:4px;padding:2px 11px;white-space:nowrap;border:2px solid var(--tc,#7E858F);border-radius:999px;background:#fff;color:var(--tc,#7E858F);font-size:14px;font-weight:800;line-height:1.3;cursor:pointer}
.sb-timer:hover{background:color-mix(in srgb,var(--tc,#7E858F) 12%,#fff)}
/* v2.75.2 — the powers a team holds, as pills in the team's colour. */
.sb-powpills{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:7px;max-width:100%;max-height:50px;overflow:hidden;flex:0 0 auto}
.sb-powpill{
  padding:2px 8px;border-radius:999px;border:2px solid var(--tc,#7E858F);background:#fff;color:var(--tc,#7E858F);
  font-size:12px;font-weight:900;letter-spacing:.02em;white-space:nowrap;line-height:1.3;
}
/* A card carrying pills or a countdown makes room: smaller monster and
   number, so nothing is cut off at the card's edge. */
.sb-score:has(.sb-powpills) .sh-av-lg,.sb-score:has(.sb-pickbar) .sh-av-lg{width:44px;height:44px}
.sb-score:has(.sb-powpills) .sb-snum,.sb-score:has(.sb-pickbar) .sb-snum{font-size:36px;line-height:1}
.sb-score:has(.sb-powpills) .sb-pickbar,.sb-score:has(.sb-pickbar) .sb-pickbar{margin-top:6px;padding:4px 12px}
.sb-score:has(.sb-pickbar) .sb-picknum{font-size:20px}
.sb-slist-sm .sb-powpills,.sb-slist-xs .sb-powpills{margin-top:4px;gap:3px;max-height:40px}
.sb-slist-sm .sb-powpill,.sb-slist-xs .sb-powpill{font-size:10px;padding:1px 6px;border-width:1.5px}
.sb-pickbar{margin-top:9px;display:flex;align-items:baseline;gap:9px;padding:6px 15px;border-radius:999px;background:var(--tc,#7E858F);color:#fff}
.sb-picklab{font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.sb-picknum{font-family:var(--display);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ inline confirm */
/* Release anyway — in the column, in place of the buttons it asks about. */
.sb-confirm{width:100%;padding:15px 18px;margin-top:12px;border:3px solid #F4B8B0;border-radius:27px;background:#FFF4F3;text-align:left}
.sb-confirm-h{font-family:var(--display);font-size:25px;font-weight:700;color:var(--danger)}
.sb-confirm-p{font-size:19px;font-weight:700;color:var(--grey);line-height:1.35;margin-top:4px}
.sb-confirm-row{display:flex;gap:9px;margin-top:12px}
.sb-confirm-keep,.sb-confirm-go{flex:1;padding:12px 9px;border-radius:999px;font-family:var(--display);font-size:21px;font-weight:600;cursor:pointer}
.sb-confirm-keep{border:3px solid #F4B8B0;background:#fff;color:var(--danger)}
.sb-confirm-go{border:0;background:linear-gradient(180deg,#FF6A3D,#E6301B);color:#fff;box-shadow:0 6px 0 #8f1f00}
.sb-confirm-go:active{transform:translateY(3px);box-shadow:0 3px 0 #8f1f00}

@media (prefers-reduced-motion:reduce){
  .sb-live-dot.sb-live-on,.sb-bounce,.sb-pop{animation:none}
}