/* showdown-setup.css */
/* ============================================================
   CLASSROOM SHOWDOWN — "Start a New Showdown" (v2.75.1, showdown-setup.js).
   Drawn on a 1672 × 1000 LANDSCAPE stage (the board's canvas) and zoomed to
   the window by showdown-host.js. v2.75.1 — the card went wide so the whole
   thing fits a laptop or a projector without scrolling: which game + counts
   on one row, the four pastel panels in a row of four, real names + class
   period on the last. Was a 1122 × 1402 portrait card.

   The setup scenery is the screen's background (showdown-host.css); this
   file is the shared logo, word-art, mascots and signs on the stage, and
   the white setup shell with its pastel panels.
   ============================================================ */

.ss-deco{pointer-events:none;user-select:none;z-index:1}
/* v2.75.1 — the logo stops short of the card's red mascot (Chris: "the
   classroom showdown sign in the top left is covering the red monster"):
   a touch smaller, and the mascot sits a little further into the head. */
.ss-logo{left:14px;top:12px;width:196px;z-index:3;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(20,27,45,.3))}
.ss-art-r{left:1540px;top:10px;width:126px;opacity:.9}
.ss-art-l{left:10px;top:330px;width:106px;opacity:.9}
.ss-mascot-l{left:-6px;top:560px;width:190px;z-index:3}
.ss-sign-l{left:10px;top:760px;width:160px;z-index:3}
.ss-mascot-r{left:1500px;top:800px;width:160px;z-index:3}
.ss-sign-r{left:1552px;top:670px;width:112px;z-index:3}

/* ------------------------------------------------------------ the shell */
.ss-card{
  left:136px;top:40px;width:1400px;z-index:2;padding:0 33px 20px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F6FAFF 100%);border:3px solid var(--line);border-radius:30px;
  box-shadow:0 20px 50px rgba(20,27,45,.35);
}
.ss-card *{font-family:inherit}

/* The head: mascot, rays, title, subtitle, close. */
.ss-head{position:relative;display:flex;align-items:center;min-height:104px;padding:10px 0 0}
.ss-mascot{width:150px;height:110px;object-fit:contain;flex:0 0 auto;margin:-6px 0 -10px 48px}
.ss-titles{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:14px;margin-right:50px}
.ss-ray{width:38px;flex:0 0 auto}
.ss-tbox{text-align:center;min-width:0}
.ss-title{font-family:var(--display);font-size:44px;font-weight:700;line-height:1.05;color:var(--ink);white-space:nowrap}
.ss-subtitle{font-size:20px;font-weight:800;color:var(--royal);margin-top:6px}
.ss-x{
  position:absolute;right:-2px;top:26px;width:50px;height:50px;padding:14px;border:0;border-radius:50%;
  background:#EAF6FF;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.ss-x img{width:100%;height:100%;object-fit:contain}
.ss-x:hover{background:#D5EDFF}

/* ------------------------------------------------------------ row one: which game + counts */
.ss-row1{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;margin-top:8px;align-items:stretch}
.ss-counts{padding:12px 16px 10px;border:2px solid #C9E6FF;border-radius:22px;background:linear-gradient(180deg,#F1F8FF,#E7F3FF)}
.ss-counts-pair{display:grid;grid-template-columns:1fr;gap:10px}
.ss-num{display:flex;align-items:center;gap:8px;min-width:0}
.ss-num-ico{width:50px;height:50px;flex:0 0 auto;object-fit:contain}
.ss-num-txt{flex:1;min-width:0;line-height:1.15}
.ss-num-lab{font-family:var(--display);font-size:21px;font-weight:700;color:var(--ink);white-space:nowrap}
.ss-num-sub{font-size:14px;font-weight:700;color:var(--grey);margin-top:2px;line-height:1.2}
.ss-num-ctl{display:flex;align-items:center;gap:2px;flex:0 0 auto;background:#fff;border:2px solid #C9E6FF;border-radius:18px;padding:3px}
.ss-step{width:42px;height:42px;border:0;border-radius:12px;background:#F1F8FF;cursor:pointer;padding:12px}
.ss-step img{width:100%;height:100%;object-fit:contain}
.ss-step:hover{background:#DDEFFF}
.ss-num-val{min-width:40px;text-align:center;font-family:var(--display);font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.ss-counts-hint{margin-top:10px;text-align:center;font-size:15.5px;font-weight:700;color:var(--grey)}

/* ------------------------------------------------------------ pastel panels */
.ss-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px;align-items:stretch}
.ss-block{padding:12px;border-radius:22px;border:2px solid}
.ss-tone-lavender{background:linear-gradient(180deg,#F3EFFF,#E9E2FF);border-color:#D6CBFF}
.ss-tone-cream{background:linear-gradient(180deg,#FFF9E8,#FFF1CC);border-color:#FFE29A}
.ss-tone-mint{background:linear-gradient(180deg,#ECFBF3,#DBF5E6);border-color:#B5E9CB}
.ss-tone-blush{background:linear-gradient(180deg,#FFF0F3,#FFE2E8);border-color:#FFC1CF}
.ss-tone-blue{background:linear-gradient(180deg,#F1F8FF,#E6F3FF);border-color:#C9E6FF}
.ss-tone-plain{background:transparent;border-color:transparent;padding:0}
.ss-h{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ss-h-ico{width:46px;height:46px;object-fit:contain}
.ss-lab{font-family:var(--display);font-size:22px;font-weight:700;color:var(--ink);line-height:1.1}

/* The whole row is the target, not the radio. */
.ss-opt{
  position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px;margin-top:8px;
  border:2px solid #E3EDF7;border-radius:16px;background:#fff;cursor:pointer;
}
.ss-opt:hover{border-color:#9DD6FF}
.ss-opt input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ss-radio{width:26px;height:26px;flex:0 0 auto;border:2px solid #9AA6C8;border-radius:50%;background:#fff}
.ss-opt:has(input:checked){border-color:#E5322D;background:#FFF3F3}
.ss-opt:has(input:checked) .ss-radio{border-color:#E5322D;box-shadow:inset 0 0 0 5px #fff;background:#E5322D}
.ss-opt:focus-within{outline:3px solid var(--cyan);outline-offset:1px}
.ss-opt-off{opacity:.55;cursor:default}
.ss-txt{flex:1;min-width:0}
.ss-name{font-size:19px;font-weight:800;color:var(--ink)}
.ss-sub{font-size:15px;font-weight:700;color:var(--grey);line-height:1.2;margin-top:1px}
.ss-opt-ico{width:44px;height:44px;flex:0 0 auto;object-fit:contain;opacity:.9}

/* ------------------------------------------------------------ identity + period */
.ss-ident{
  display:grid;grid-template-columns:1.4fr 1fr;gap:0 16px;margin-top:12px;padding:12px;
  border:2px solid #C9E6FF;border-radius:22px;background:linear-gradient(180deg,#F1F8FF,#E7F3FF);
}
/* Dimmed until real names are on — except the CSV upload, which is how a
   teacher without the extension gets to turn them on in the first place. */
.ss-period{padding-left:18px;border-left:2px solid #C9E6FF}
.ss-period > *{opacity:.55;transition:opacity .15s}
.ss-period > .ss-upload,.ss-period.ss-period-on > *{opacity:1}
.ss-period .ss-h{margin-top:2px}
.ss-period .ss-h-ico{width:34px;height:34px}
.ss-period .ss-lab{font-size:20px}
.ss-period-sel{position:relative}
.ss-select{
  width:100%;height:46px;padding:0 40px 0 14px;border:2px solid #9DD6FF;border-radius:12px;background:#fff;
  font-family:var(--sans);font-size:19px;font-weight:800;color:var(--ink);appearance:none;-webkit-appearance:none;cursor:pointer;
}
.ss-chev{position:absolute;right:14px;top:16px;width:16px;pointer-events:none}
.ss-period-note{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:10px;border-radius:14px;background:#fff;border:2px solid #E3EDF7;font-size:13.5px;font-weight:700;color:var(--grey);line-height:1.3}
.ss-period-note img{width:26px;height:26px;flex:0 0 auto}
/* v2.74.2 — the CSV upload (no extension on this computer). */
.ss-upload{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.ss-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ss-upbtn{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:2px solid #9DD6FF;border-radius:999px;
  background:#fff;color:var(--royal);font-family:var(--sans);font-size:15px;font-weight:800;cursor:pointer;
}
.ss-upbtn:hover{background:#EAF6FF;border-color:var(--royal)}
.ss-upbtn img{width:22px;height:22px}
.ss-cards{border-color:#C9B8FF;color:#5B2FC7}   /* v2.75.3 — the number cards PDF */
.ss-cards:hover{background:#F3EEFF;border-color:#5B2FC7}
.ss-upstatus{flex-basis:100%;font-size:13.5px;font-weight:700;color:var(--grey);line-height:1.3}
.ss-upclear{padding:5px 12px;border:2px solid #F3B7B0;border-radius:999px;background:#fff;color:#C2321B;font-size:13px;font-weight:800;cursor:pointer}
.ss-upclear:hover{background:#FFF1EF}

/* ------------------------------------------------------------ Open a Room */
.ss-foot{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:8px}
.ss-err{color:var(--danger);font-size:16px;font-weight:800;text-align:center}
.ss-err:empty{display:none}
.ss-gowrap{display:flex;align-items:center;justify-content:center;gap:10px}
.ss-goray{width:46px}
.ss-go{
  display:flex;align-items:center;justify-content:center;gap:14px;width:420px;height:104px;border:0;cursor:pointer;
  background:url(showdown/btn/orange.webp) center / 100% 100% no-repeat;
  color:#fff;font-family:var(--display);font-size:38px;font-weight:700;text-shadow:0 2px 0 #9a1d00,0 4px 10px rgba(0,0,0,.28);
  padding:0 8% 5.5%;filter:drop-shadow(0 10px 18px rgba(34,70,145,.28));transition:transform .12s,filter .12s;white-space:nowrap;
}
.ss-go img{height:34px}
.ss-go:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05)}
.ss-go:active:not(:disabled){transform:translateY(3px)}
.ss-go:disabled{filter:saturate(.3);cursor:default}

/* Room still open elsewhere. */
.ss-confirm{width:100%;padding:14px 18px;border:2px solid #F4B8B0;border-radius:18px;background:#FFF4F3}
.ss-confirm-h{font-family:var(--display);font-size:24px;font-weight:700;color:var(--danger)}
.ss-confirm-p{font-size:16px;font-weight:700;color:var(--grey);line-height:1.35;margin-top:4px}
.ss-confirm-row{display:flex;gap:12px;margin-top:12px}
.ss-confirm-back,.ss-confirm-end{flex:1;padding:12px 10px;border-radius:999px;font-family:var(--display);font-size:20px;font-weight:600;cursor:pointer}
.ss-confirm-back{border:0;background:linear-gradient(180deg,#3F8BFF,#2F63D8);color:#fff;box-shadow:0 5px 0 #1b3f95}
.ss-confirm-end{border:2px solid #F4B8B0;background:#fff;color:var(--danger)}

/* ------------------------------------------------------------ which game (v2.75.0) */
/* showdown-games.js: the saved-game picker under the head, and the locks it
   puts on the Teams stepper, "who sorts" and "real names" when the game
   carries pre-arranged groups. */
.ss-games{margin:0}
.ss-games-sel{margin-top:2px}
.ss-games-note{margin-top:8px}
.ss-games-link{display:inline-block;margin-top:8px;font-size:14.5px;font-weight:800;color:var(--royal);text-decoration:underline}
/* v2.75.5 — In order / Shuffled */
.ss-order{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.ss-order[hidden]{display:none}
.ss-order-lab{font-size:13.5px;font-weight:800;color:var(--grey);margin-right:2px}
.ss-order-btn{padding:6px 14px;border:2px solid #9DD6FF;border-radius:999px;background:#fff;color:var(--royal);font-family:var(--sans);font-size:14px;font-weight:800;cursor:pointer}
.ss-order-btn:hover{background:#EAF6FF}
.ss-order-on{background:var(--royal);border-color:var(--royal);color:#fff}
/* v2.75.13 — a selected pill stays readable under the pointer (the hover
   rule above used to wash it out to pale blue with white text) */
.ss-order-btn.ss-order-on:hover{background:#244FB3;border-color:#244FB3;color:#fff}
.ss-limit{margin-top:8px}
.ss-limit .ss-order-btn{padding:5px 11px;font-size:13px}
.ss-penalty{margin-top:6px;align-items:center}   /* v2.75.11 — the early-buzz late start row */
.ss-headstart,.ss-second{margin-top:4px}   /* v2.75.19/21 — the Head Start length and Second Chance answer rows, same box */
/* v2.75.13 — Time to settle: m:ss, each field with its own ▲ ▼ */
.ss-time{display:inline-flex;align-items:center;gap:4px;background:#fff;border:2px solid #C9E6FF;border-radius:14px;padding:2px 8px 2px 2px}
.ss-time-f{display:flex;align-items:center;gap:1px}
.ss-time-in{width:38px;border:0;background:transparent;text-align:center;font-family:var(--display);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);outline:none}
.ss-time-in:focus{background:#F1F8FF;border-radius:8px}
.ss-time-arrows{display:flex;flex-direction:column;gap:1px}
.ss-time-arrow{width:26px;height:18px;border:0;border-radius:6px;background:#E3F1FF;color:var(--royal);font-size:11px;line-height:1;cursor:pointer;padding:0}
.ss-time-arrow:hover{background:#DDEFFF}
.ss-time-colon{font-family:var(--display);font-size:22px;font-weight:700;color:var(--ink);margin:0 1px}
.ss-time-off .ss-time-in,.ss-time-off .ss-time-colon{color:#A9B4C9}
.ss-time .ss-pen-unit{margin-left:4px}
/* v2.75.12 — a typed number with − / + arrows, not a list */
.ss-pen-ctl{padding:2px}
.ss-pen-ctl .ss-step{width:32px;height:32px;padding:9px;border-radius:9px}
.ss-pen-in{width:64px;border:0;background:transparent;text-align:center;font-family:var(--display);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);outline:none}
.ss-pen-in:focus{background:#F1F8FF;border-radius:8px}
.ss-pen-unit{font-size:13px;font-weight:800;color:var(--grey)}
.ss-games-link:hover{color:var(--ink)}
.ss-num-locked .ss-step{opacity:.35;cursor:default}
.ss-num-locked .ss-step:hover{background:#F1F8FF}
.ss-block-locked .ss-opt{opacity:.55;cursor:default}
.ss-block-locked .ss-opt:hover{border-color:#E3EDF7}
.ss-lock-note{
  display:block;margin:0 0 6px;padding:8px 10px;border-radius:12px;background:#fff;border:2px solid #E3EDF7;
  font-size:13.5px;font-weight:800;color:var(--royal);line-height:1.3;
}

/* ============================================================
   v2.75.35 — THE COUNTS CARD, REDESIGNED (Chris's mock-up): Teams and
   Students per team each on their own white tile with the stepper in a
   white pill; the room hint under them; the clock rows in a "Round
   timing" panel — the clock tile and title on a pale band, the rows on
   white below it, one per line with a hairline between, the label on the
   left and the control and its unit on the right.
   ============================================================ */
.ss-counts{padding:14px;border-radius:26px;box-shadow:0 8px 22px rgba(20,85,170,.08)}
.ss-counts-pair{gap:10px}
.ss-counts .ss-num{
  gap:14px;padding:8px 10px 8px 10px;border:2px solid #DCEFFF;border-radius:20px;
  background:linear-gradient(180deg,#FFFFFF,#F7FBFF);box-shadow:0 2px 0 rgba(201,230,255,.6);
}
.ss-counts .ss-num-ico{width:52px;height:52px}
.ss-counts .ss-num-lab{font-size:22px}
.ss-counts .ss-num-sub{font-size:15px;font-weight:700;margin-top:1px}
.ss-counts .ss-num-ctl{gap:8px;padding:4px;border-radius:20px;box-shadow:0 2px 6px rgba(20,85,170,.08)}
.ss-counts .ss-num-val{min-width:44px}
.ss-counts-hint{margin:10px 0 12px;font-size:15px}

.ss-timing{
  border:2px solid #C9E6FF;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#EAF5FF,#E3F1FF);box-shadow:0 2px 0 rgba(201,230,255,.6);
}
.ss-timing-h{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 12px}
.ss-timing-ico{width:50px;height:50px;object-fit:contain;flex:0 0 auto}
.ss-timing-title{font-family:var(--display);font-size:22px;font-weight:700;color:var(--ink)}
.ss-timing-body{margin:0 3px 3px;padding:0 14px;border-radius:18px;background:linear-gradient(180deg,#FFFFFF,#F9FCFF)}
.ss-timing-body .ss-order{flex-wrap:nowrap;align-items:center;gap:10px;margin:0;padding:8px 0;border-top:2px solid #E6F0FA}
.ss-timing-body .ss-order:first-child{border-top:0}
.ss-timing-body .ss-order-lab{flex:1;min-width:0;margin:0;font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap}
.ss-timing-body .ss-order-btn{min-width:74px;padding:6px 14px;font-family:var(--display);font-size:15px;font-weight:600;text-align:center}
.ss-timing-body .ss-order-on{box-shadow:0 3px 8px rgba(47,99,216,.3)}
.ss-timing-body .ss-pen-ctl{gap:6px;padding:3px;border-radius:16px}
.ss-timing-body .ss-pen-ctl .ss-step{width:30px;height:30px;padding:9px;border-radius:10px}
.ss-timing-body .ss-pen-in{width:52px;font-size:21px}
.ss-timing-body .ss-time{border-radius:16px;padding:2px 6px}
.ss-timing-body .ss-pen-unit{flex:0 0 auto;min-width:62px;font-size:14px;font-weight:700;color:var(--grey)}
/* Compact enough that the whole card still fits a laptop screen without
   scrolling (v2.75.1's promise): the counts column is the wider one now
   (the game picker has room to spare), and the rows are tight. */
.ss-row1{grid-template-columns:1fr 1.15fr}
.ss-counts{padding:10px 12px}
.ss-counts .ss-num{padding:5px 8px}
.ss-counts .ss-num-ico{width:44px;height:44px}
.ss-counts .ss-num-lab{font-size:20px}
.ss-counts .ss-num-sub{font-size:14px}
.ss-counts .ss-step{width:38px;height:38px;padding:11px}
.ss-counts .ss-num-val{font-size:30px}
.ss-counts-hint{margin:6px 0 8px;font-size:14.5px}
.ss-timing-h{padding:5px 12px 5px 10px}
.ss-timing-ico{width:42px;height:42px}
.ss-timing-title{font-size:21px}
.ss-timing-body .ss-order{padding:5px 0}
.ss-counts .ss-num{padding:3px 8px}
.ss-counts .ss-num-ico{width:40px;height:40px}
.ss-counts .ss-num-ctl{padding:3px}
.ss-counts .ss-step{width:34px;height:34px;padding:10px}
.ss-counts .ss-num-val{font-size:28px;min-width:40px}
.ss-counts-pair{gap:8px}
.ss-timing-h{padding:3px 12px 3px 8px}
.ss-timing-ico{width:38px;height:38px}
.ss-timing-body .ss-order{padding:3px 0}
.ss-timing-body .ss-pen-ctl .ss-step{width:28px;height:28px;padding:8px}
.ss-timing-body .ss-pen-in{font-size:19px}
.ss-timing-body .ss-order-btn{padding:4px 12px}
.ss-timing-body .ss-time-arrow{height:15px}
.ss-timing-body .ss-time-in{font-size:19px}