/* buzzer.css */
/* ============================================================
   Student buzzer page — CLASSROOM SHOWDOWN (v2.73.0).

   Shared look for every screen (tokens, the frosted panel, the orange
   button, the digit boxes, the 3D headings, the decorative layers), plus
   the Join Room, class-list number and Game Ended screens and the sheets.
   The lobby screens are in buzzer-lobby.css; the game in buzzer-play.css.

   Distinctive artwork comes from the Asset Pack (showdown/). Plain rounded
   panels, pills and fields are CSS — a stretched bitmap of a rectangle is
   worse than the rectangle.
   ============================================================ */

:root{
  --navy:#20205F; --indigo:#17184E; --ink:#171B55;
  --cyan:#50E8FF; --cyan-soft:#9DEEFF; --royal:#2F63D8; --sky:#2EA8F7;
  --lav:#AAB7FF; --yellow:#FFC52E; --orange:#FF7A19; --red:#F0441F;
  --accent:#2F63D8;              /* recoloured to the team's colour on join */
  --display:'Fredoka','Arial Rounded MT Bold','Trebuchet MS',sans-serif;
  --sans:'Nunito','Segoe UI',Arial,sans-serif;
  --card-shadow:0 12px 28px rgba(30,44,110,.18);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--sans);color:var(--ink);background:#2EA8F7;
  line-height:1.4;-webkit-font-smoothing:antialiased;overflow:hidden;
}
.hidden{display:none !important}
img{-webkit-user-drag:none}

/* ------------------------------------------------------------ screens */
.sd-screen{
  position:fixed;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.sd-bg-join{background-image:url(showdown/bg/join.webp)}
.sd-bg-monster{background-image:url(showdown/bg/monster.webp)}
.sd-bg-ended{background-image:url(showdown/bg/ended.webp)}

.sd-center{
  position:relative;z-index:3;min-height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(64px,11vh,120px) 16px calc(28px + env(safe-area-inset-bottom));
}

/* -------------------------------------------------- decorative layers */
/* Everything here is scenery. It never takes a tap. */
.sd-logo{position:absolute;left:2.4%;top:2%;width:clamp(120px,19vw,300px);z-index:2;pointer-events:none}
.sd-fx,.sd-art,.sd-sign,.sd-mascot,.sd-confetti{position:absolute;pointer-events:none;user-select:none}
.sd-fx-logo{left:1.2%;top:.8%;width:clamp(150px,22vw,340px);z-index:1}
.sd-art{z-index:1;opacity:.95}
.sd-art-tr{right:2%;top:5%;width:clamp(90px,11vw,165px)}
.sd-art-br{right:4%;bottom:5%;width:clamp(120px,15vw,230px)}
.sd-art-bottom{left:50%;bottom:.5%;width:clamp(200px,28vw,400px);transform:translateX(-50%)}
.sd-sign{z-index:2}
.sd-sign-bl{left:0;bottom:6%;width:clamp(110px,16vw,240px)}
.sd-sign-tl{left:0;top:26%;width:clamp(110px,16vw,240px)}
.sd-mascot{z-index:2;width:clamp(110px,22vw,330px)}
.sd-mascot-l{left:0;bottom:24%}
.sd-mascot-r{right:0;bottom:20%}
.sd-mascot-big{width:clamp(140px,28vw,420px)}
.sd-mascot-big.sd-mascot-l{bottom:3%}
.sd-mascot-big.sd-mascot-r{bottom:5%}
.sd-mascot-br{right:0;bottom:0;width:clamp(120px,18vw,270px)}
.sd-fx-mascot-l{left:1%;bottom:calc(24% + 17vw);width:clamp(60px,7vw,110px);z-index:1}
.sd-fx-mascot-r{right:6%;bottom:calc(20% + 21vw);width:clamp(70px,8vw,120px);z-index:1}
.sd-bg-ended .sd-fx-mascot-l{bottom:calc(3% + 22vw)}
.sd-bg-ended .sd-fx-mascot-r{bottom:calc(5% + 26vw)}
.sd-fx-mascot-br{right:15%;bottom:14vw;width:clamp(60px,7vw,100px);z-index:1}
.sd-confetti{inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.9}

@media (max-width:700px){
  .sd-art,.sd-sign,.sd-fx-mascot-l,.sd-fx-mascot-r,.sd-fx-mascot-br,.sd-confetti{display:none}
  .sd-mascot{width:96px;opacity:.9}
  .sd-mascot-l{bottom:6px}.sd-mascot-r{bottom:6px}
  .sd-logo{width:120px}.sd-fx-logo{width:140px}
}

/* ----------------------------------------------------------- headings */
/* Titles that ship as artwork sit in a wrap with yellow rays either side. */
.sd-title-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;gap:2vw;
  width:100%;max-width:900px;
}
.sd-title-img{margin:0;line-height:0;flex:0 1 auto;min-width:0}
/* max-width:100% so the artwork shrinks WITH its box when the rays need the
   room, instead of running out under the right-hand ray (the waiting screen
   at 1900px wide: the box was 684px, the picture 900px). */
.sd-title-img img{width:min(78vw,620px);max-width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(20,25,90,.25))}
.sd-fx-title{width:clamp(34px,5vw,70px);flex:0 0 auto}
.sd-fx-title-l{transform:translateY(-8px)}
.sd-fx-title-r{transform:translateY(-8px)}

/* Headings with no artwork: the same white-on-navy 3D lettering in CSS. */
.sd-h3d{
  font-family:var(--display);font-weight:700;color:#fff;text-align:center;
  font-size:clamp(30px,6vw,58px);line-height:1.05;letter-spacing:.01em;
  -webkit-text-stroke:1.5px #1b1f6e;paint-order:stroke fill;
  text-shadow:
    -2px -2px 0 #1b1f6e, 2px -2px 0 #1b1f6e, -2px 2px 0 #1b1f6e, 2px 2px 0 #1b1f6e,
    0 5px 0 #1b1f6e, 0 7px 0 #14174f, 0 12px 18px rgba(20,25,90,.45);
}
.sd-sub{
  margin-top:8px;font-family:var(--display);font-weight:600;color:#fff;
  font-size:clamp(16px,2.4vw,26px);text-align:center;line-height:1.25;
  text-shadow:0 2px 0 rgba(23,27,85,.55),0 6px 14px rgba(23,27,85,.35);
}

/* ------------------------------------------------------------- panels */
.sd-panel{
  position:relative;width:100%;
  background:linear-gradient(180deg,#FFFFFF 0%,#F2FAFF 55%,#E5F4FF 100%);
  border:3px solid #9DEEFF;border-radius:32px;
  box-shadow:0 0 0 5px rgba(157,238,255,.35),0 16px 40px rgba(23,92,210,.28),
             inset 0 2px 0 #fff;
}
.sd-panel-h{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(22px,3.4vw,36px);
}
.sd-fx-small{width:clamp(22px,3vw,36px)}

/* ------------------------------------------------------ digit boxes */
.sd-digits{
  display:flex;justify-content:center;gap:clamp(6px,1.4vw,12px);
  margin:18px 0 6px;
}
.sd-digit{
  flex:0 1 84px;aspect-ratio:1/1.2;min-width:34px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#FFFFFF,#EEF7FF);
  border:3px solid #7FD0FF;border-radius:18px;
  box-shadow:inset 0 3px 0 #fff,0 4px 10px rgba(46,168,247,.25);
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(22px,5vw,46px);transition:box-shadow .12s,transform .12s;
}
.sd-digit.filled{background:linear-gradient(180deg,#FFFFFF,#E3F4FF)}
.sd-digit.focus{
  border-color:var(--cyan);transform:translateY(-2px);
  box-shadow:inset 0 3px 0 #fff,0 0 0 4px rgba(80,232,255,.45),0 6px 14px rgba(46,168,247,.3);
}
.sd-digits-3 .sd-digit{flex-basis:96px}
/* The one real input, kept off-screen but focusable. */
.sd-digit-input{
  position:absolute;width:1px;height:1px;opacity:.01;left:50%;top:0;
  border:0;font-size:16px;              /* 16px: iOS does not zoom the page */
}

/* ------------------------------------------------------ orange button */
.sd-btn-wrap{position:relative;display:flex;align-items:center;justify-content:center;gap:2vw;width:100%;margin-top:18px}
.sd-btn-orange{
  position:relative;display:flex;align-items:center;justify-content:center;gap:.35em;
  width:min(100%,520px);aspect-ratio:900/272;border:0;cursor:pointer;
  background:url(showdown/btn/orange.webp) center/100% 100% no-repeat;
  color:#fff;font-family:var(--display);font-weight:700;
  font-size:clamp(22px,4.6vw,40px);letter-spacing:.01em;text-decoration:none;
  text-shadow:0 2px 0 #9a1d00,0 4px 10px rgba(0,0,0,.28);
  padding:0 8% 5.5%;                     /* the art's dark base is the bottom fifth */
  transition:transform .12s ease,filter .12s ease;
  filter:drop-shadow(0 10px 18px rgba(34,70,145,.25));
}
.sd-btn-orange img{height:.85em;width:auto}
.sd-btn-orange:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05) drop-shadow(0 12px 20px rgba(34,70,145,.28))}
.sd-btn-orange:active:not(:disabled){transform:translateY(4px) scale(.99)}
/* v2.74.2 — disabled reads as "not yet", not as a brown button: the art
   goes grey and light instead of desaturated-orange. */
.sd-btn-orange:disabled{filter:grayscale(.85) brightness(1.15);cursor:not-allowed;opacity:.6}
.sd-btn-orange:focus-visible{outline:4px solid var(--cyan);outline-offset:3px;border-radius:999px}
.sd-fx-btn{width:clamp(30px,4.5vw,64px);flex:0 0 auto}

/* Secondary white button. */
.sd-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  margin-top:14px;padding:13px 26px;min-height:52px;cursor:pointer;
  background:linear-gradient(180deg,#FFFFFF,#EAF6FF);border:3px solid #7FD0FF;border-radius:999px;
  color:var(--royal);font-family:var(--display);font-weight:600;font-size:clamp(17px,2.4vw,22px);
  box-shadow:0 6px 16px rgba(46,168,247,.25),inset 0 2px 0 #fff;
}
.sd-btn-ghost img{height:1.1em}
.sd-btn-ghost:active{transform:translateY(2px)}

/* --------------------------------------------------------- utilities */
.sd-err{color:#C2321B;font-weight:700;font-size:15px;margin-top:10px;min-height:20px;text-align:center}
.sd-err:empty{min-height:0;margin:0}
.fineprint{color:#5F6B8A;font-size:12.5px;margin-top:14px;line-height:1.5;text-align:center}
.sd-foot{
  margin-top:12px;text-align:center;color:var(--royal);font-weight:800;font-size:clamp(14px,1.9vw,18px);line-height:1.5;
}
.sd-foot img{height:1em;vertical-align:-2px}

/* -------------------------------------------------------- join screen */
/* v2.74.2 — the whole screen fits a laptop window (780px tall) with the
   address pill in view: shorter top padding, a slightly smaller title,
   tighter digit boxes, button and text spacing. Scoped to this screen so
   the other screens keep their spacing. */
.sd-bg-join .sd-center{padding-top:clamp(32px,6vh,90px);padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.sd-bg-join .sd-title-img img{width:min(78vw,60vh,560px)}
.sd-bg-join .sd-sub{margin-top:6px}
.sd-join-panel{max-width:740px;margin-top:clamp(12px,2vh,26px);padding:clamp(14px,2.4vh,26px) clamp(16px,4vw,44px) clamp(12px,2vh,22px)}
.sd-join-panel .sd-digits{margin:12px 0 4px}
.sd-join-panel .sd-digit{flex-basis:clamp(52px,9vh,76px)}
.sd-join-panel .sd-btn-wrap{margin-top:10px}
.sd-join-panel .sd-btn-orange{width:min(100%,55vh,480px)}
.sd-join-panel .sd-foot{margin-top:8px}
.sd-join-panel .fineprint{margin-top:10px}
.sd-bg-join .sd-url-pill{margin-top:12px}
/* The red monster stands to the RIGHT of the wooden sign, feet on the
   sign's ground line, instead of on top of it. The sign is 16vw wide
   (capped at 240px) and the monster starts just inside its right edge;
   its size is whatever room there is between the sign and the 740px
   panel (full size from about 1800px wide, smaller on a laptop, never
   under 110px) so it is never hidden behind the panel. On a phone the
   sign is hidden and the monster goes back to the corner. */
.sd-bg-join .sd-mascot-l{
  left:min(14.5vw,218px);bottom:7%;
  width:clamp(110px,calc((100vw - 740px) / 2 - min(14.5vw,218px) + 30px),330px);
}
@media (max-width:700px){ .sd-bg-join .sd-mascot-l{left:0;bottom:6px;width:96px} }
.sd-url-pill{
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 22px;
  background:#fff;border:2px solid #9DEEFF;border-radius:999px;
  box-shadow:0 0 0 4px rgba(157,238,255,.35),0 6px 16px rgba(23,92,210,.2);
  color:var(--royal);font-weight:800;font-size:clamp(14px,1.9vw,18px);
}
.sd-url-pill img{height:1.2em}

/* ------------------------------------------------------- ended screen */
.sd-ended-panel{
  max-width:860px;margin-top:clamp(40px,9vh,110px);
  padding:clamp(70px,10vw,120px) clamp(16px,5vw,60px) clamp(22px,3vw,36px);
  text-align:center;
  background:
    repeating-conic-gradient(from 0deg at 50% 22%, rgba(255,255,255,.55) 0 5deg, rgba(197,233,255,.3) 5deg 10deg),
    linear-gradient(180deg,#FFFFFF,#EAF6FF);
}
.sd-medallion{
  position:absolute;left:50%;top:0;transform:translate(-50%,-48%);
  display:flex;align-items:center;gap:1vw;
}
.sd-medallion > img{width:clamp(110px,16vw,210px);filter:drop-shadow(0 10px 18px rgba(20,25,90,.3))}
.sd-ended-panel .sd-title-wrap{margin-top:8px}
.sd-ended-msg{
  margin-top:12px;font-family:var(--display);font-weight:600;color:var(--royal);
  font-size:clamp(20px,3.4vw,36px);line-height:1.2;
}
.sd-info-pill{
  display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:12px 24px;
  background:linear-gradient(180deg,#F1FAFF,#DFF2FF);border:2px solid #9DEEFF;border-radius:999px;
  color:var(--ink);font-weight:700;font-size:clamp(15px,2vw,20px);
}
.sd-info-pill img{height:1.3em}

/* ---------------------------------------------------------- sheets */
/* Bottom sheets: team detail, naming, colours, the Trade picker, settings. */
.sheet{
  position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;
  background:rgba(23,24,78,.55);backdrop-filter:blur(3px);
}
.sheet-card{
  width:100%;max-height:78vh;overflow-y:auto;background:#fff;
  border:3px solid #9DEEFF;border-bottom:0;border-radius:28px 28px 0 0;
  padding:22px 18px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 34px rgba(23,24,78,.28);
}
.sheet-h{font-family:var(--display);font-size:24px;font-weight:700;color:var(--ink);margin-bottom:4px}
.sub{color:#5F6B8A;margin-top:6px;font-size:15px;font-weight:600}
.sheet-list{list-style:none;margin:14px 0;display:grid;gap:8px}
.sheet-list li{
  display:flex;gap:10px;padding:11px 12px;border:2px solid #E3F1FF;
  border-radius:14px;background:#F7FBFF;font-size:14.5px;font-weight:600;
}
.sheet-q{flex:1;min-width:0;line-height:1.35}
.sheet-pts{
  margin-left:auto;flex:0 0 auto;align-self:flex-start;
  font-weight:900;font-variant-numeric:tabular-nums;color:var(--accent);
}
.sheet-pow{
  padding:2px 9px;border:2px solid var(--accent);border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
}
/* v2.74.2 — a power's card: the description line, then Use (captain). */
.sheet-desc{font-size:16px;line-height:1.4}
.sheet-use{display:block;padding:0;border:0;background:none}
.sheet-use .primary{width:100%}
.sheet-row{display:flex;gap:10px;margin-top:14px}
.sheet-row .primary{flex:1}
.err{color:#C2321B;font-size:14px;font-weight:700;margin-top:12px;min-height:20px}
.err:empty{min-height:0}
.code{
  display:block;width:100%;margin:16px 0 4px;padding:14px;
  border:3px solid #7FD0FF;border-radius:16px;background:#F7FBFF;
  color:var(--ink);font-family:var(--sans);font-size:20px;font-weight:700;
}
.code:focus{outline:3px solid var(--cyan);outline-offset:2px}
.primary{
  padding:14px 18px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#FF9A2E,#F0441F);color:#fff;
  font-family:var(--display);font-size:18px;font-weight:700;
  box-shadow:0 6px 0 #8f1f00,0 10px 18px rgba(0,0,0,.18);
}
.primary:active{transform:translateY(3px);box-shadow:0 3px 0 #8f1f00}
.ghost{
  padding:13px 16px;border:2px solid #7FD0FF;border-radius:999px;cursor:pointer;
  background:#fff;color:var(--royal);font-family:var(--display);font-size:16px;font-weight:600;
}
.picks{display:grid;gap:10px;margin-top:16px}
.pick{
  display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;
  border:2px solid #E3F1FF;border-radius:16px;background:#F7FBFF;
  color:var(--ink);font-family:var(--sans);font-size:17px;font-weight:700;
  text-align:left;cursor:pointer;
}
.pick:active{border-color:var(--accent)}
.pick .dot{width:16px;height:16px;border-radius:50%;flex:0 0 auto}
.pick .count{margin-left:auto;color:#5F6B8A;font-size:14px;font-weight:600}
.pick-clock{float:right;font-variant-numeric:tabular-nums;font-weight:800;color:var(--accent)}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0 4px}
.swatch{
  aspect-ratio:1;border:3px solid #fff;border-radius:14px;cursor:pointer;
  box-shadow:0 2px 8px rgba(20,20,40,.18);transition:transform .12s ease;
}
.swatch:hover:not(:disabled){transform:scale(1.08)}
.swatch:active:not(:disabled){transform:scale(.96)}
.swatch:disabled{opacity:.45;cursor:default;transform:none}
.sd-settings-me{display:flex;align-items:center;gap:14px;margin-top:12px}
.sd-settings-me img{width:64px;height:64px;object-fit:contain}
.sd-settings-name{font-family:var(--display);font-weight:700;font-size:22px}
.sd-settings-sub{color:#5F6B8A;font-weight:700;font-size:14px}

@media (prefers-reduced-motion:reduce){
  .sd-btn-orange,.sd-digit,.swatch{transition:none}
}

/* v2.75.6 — the How to play button, on every screen (showdown-howto.js) */
.sd-howto-fab{
  position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;border-radius:999px;
  border:2px solid rgba(157,238,255,.7);background:rgba(23,24,78,.82);color:#fff;
  font-family:var(--sans);font-size:13px;font-weight:800;cursor:pointer;backdrop-filter:blur(3px);
  box-shadow:0 6px 16px rgba(23,24,78,.35);
}
.sd-howto-q{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--yellow);color:var(--ink);font-family:var(--display);font-weight:700;font-size:16px}
.sd-howto-fab:hover{background:rgba(23,24,78,.95)}
/* v2.75.16 — on a phone the pill sat on the status line under the buzzer:
   just the ? badge there, and lifted clear of the status and the note. */
@media (max-width:700px){
  .sd-howto-fab{padding:5px;bottom:calc(84px + env(safe-area-inset-bottom));left:10px}
  .sd-howto-fab span:not(.sd-howto-q){display:none}
  .sd-howto-q{width:28px;height:28px;font-size:18px}
}