/* showdown-host.css */
/* ============================================================
   CLASSROOM SHOWDOWN — TEACHER PAGE (v2.74.0). The shell shared by every
   screen: tokens, the full-window screens and their scenery backgrounds,
   the zoomed stages, sign-in, the corner controls, the modals, the toast,
   and the pieces every screen reuses (the orange button, the avatar box).

   Screens: showdown-setup.css (Start a New Showdown), showdown-board.css
   (Teacher Control), showdown-room.css (Room Settings + End Game),
   showdown-standings.css (Final Standings).

   A stage is laid out at its reference canvas size and ZOOMED to the window
   (showdown-host.js fit()), so every measurement in those files is a plain
   pixel off the design.
   ============================================================ */

:root{
  --ink:#171B55; --royal:#2F63D8; --navy:#20205F; --cyan:#50E8FF; --sky:#2EA8F7;
  --grey:#5F6B8A; --line:#BFE9FF; --line-soft:#DCEFFF; --danger:#C92037;
  --display:'Fredoka','Arial Rounded MT Bold','Trebuchet MS',sans-serif;
  --sans:'Nunito','Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);color:var(--ink);background:#2EA8F7;line-height:1.35;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
.hidden{display:none !important}
img{-webkit-user-drag:none}
button{font-family:inherit}

/* ------------------------------------------------------------ screens */
/* ONE background per screen, on the screen itself (cover). The stage inside
   is transparent, so there is never a second picture inside the first. */
.sh-screen{
  position:fixed;inset:0;overflow:auto;
  display:flex;align-items:center;justify-content:center;
  background-color:#2EA8F7;background-size:cover;background-position:center top;background-repeat:no-repeat;
}
.sh-bg-teacher{background-image:url(showdown/bg/teacher.webp)}
/* v2.75.1 — settings.webp is a PORTRAIT scene (sky above, mountains, lake
   and forest below); covering a wide screen from the top showed sky alone.
   Anchored lower so the mountains and the lake sit behind the card, with
   sky still over the top (Chris: "Show the whole settings picture"). */
.sh-bg-settings{background-image:url(showdown/bg/settings.webp);background-position:center 70%}
.sh-bg-solid{background-image:none}
#boardView{background-image:url(showdown/bg/teacher.webp)}
/* v2.75.22 — the waiting room (showdown-wait.js): the settings scene, whole, as the setup screen shows it */
#waitView{background-image:url(showdown/bg/settings.webp);background-position:center 70%}
#standingsView{background-image:url(showdown/bg/standings.webp)}
#setupView{align-items:flex-start;padding:12px 0}

.sh-stage{position:relative;flex:0 0 auto;overflow:visible}
.sh-stage > *{position:absolute}
.sh-stage img{pointer-events:none}
.sh-stage button img{pointer-events:none}
.sh-stage img.iz-zoomable{pointer-events:auto}   /* v2.75.23 — the question picture takes the tap (image-zoom.js) */

.sh-loading{
  padding:14px 26px;border-radius:999px;background:rgba(23,27,85,.75);color:#fff;
  font-family:var(--display);font-size:22px;font-weight:600;
}

/* ------------------------------------------------------------ scenery (gate) */
.sh-logo{position:absolute;left:2%;top:2%;width:clamp(180px,20vw,340px);z-index:3;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(20,27,45,.3))}
.sh-deco{position:absolute;pointer-events:none;user-select:none;z-index:2}
.sh-art-tr{right:1.5%;top:2%;width:clamp(90px,10vw,170px);opacity:.9}
.sh-mascot-l{left:-.5%;bottom:20%;width:clamp(120px,13vw,230px)}
.sh-sign-l{left:.3%;bottom:2%;width:clamp(110px,11vw,190px)}
.sh-mascot-r{right:0;bottom:0;width:clamp(120px,13vw,220px)}
.sh-sign-r{right:.5%;bottom:24%;width:clamp(80px,8vw,130px)}

/* ------------------------------------------------------------ sign in */
.sh-gate-card{
  position:relative;z-index:4;width:min(92vw,560px);padding:36px 34px 30px;text-align:center;
  background:linear-gradient(180deg,#fff,#F1F8FF);border:3px solid var(--line);border-radius:28px;
  box-shadow:0 16px 44px rgba(20,27,45,.3);
}
.sh-gate-h{font-family:var(--display);font-size:38px;font-weight:700;color:var(--ink);line-height:1.05}
.sh-gate-p{margin:12px 0 22px;font-size:16px;font-weight:700;color:var(--grey);line-height:1.45}
.sh-gate-go{width:330px;height:92px;font-size:26px;margin:0 auto}
.sh-gate-msg{margin-top:14px;min-height:20px;font-size:14px;font-weight:800;color:var(--danger)}

/* ------------------------------------------------------------ the orange button */
/* The shell is the Asset Pack's; the icon and the label are live. */
.sh-orange{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  border:0;cursor:pointer;color:#fff;font-family:var(--display);font-weight:700;white-space:nowrap;
  background:url(showdown/btn/orange.webp) center / 100% 100% no-repeat;
  text-shadow:0 2px 0 #9a1d00,0 4px 10px rgba(0,0,0,.28);padding:0 8% 5.5%;
  filter:drop-shadow(0 8px 14px rgba(34,70,145,.25));transition:transform .12s,filter .12s;
}
.sh-orange img{height:.85em;width:auto}
.sh-orange:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05) drop-shadow(0 10px 16px rgba(34,70,145,.28))}
.sh-orange:active:not(:disabled){transform:translateY(3px) scale(.99)}
.sh-orange:disabled{filter:saturate(.3);cursor:default}
.sh-orange:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:999px}

/* ------------------------------------------------------------ the avatar box */
/* A monster, or the team's colour dot until one is picked. */
.sh-av{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.sh-av img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(20,27,45,.28))}
.sh-av-dot{width:55%;height:55%;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.sh-av-xs{width:30px;height:30px}
.sh-av-md{width:64px;height:64px}
.sh-av-lg{width:88px;height:88px}

/* ------------------------------------------------------------ corner controls */
/* Bottom centre, under the question panel — the top-right corner is the
   board's "Learn · Play · Together" word-art. */
.sh-corner{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:40;display:flex;gap:8px}
.sh-corner-btn{
  display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border:2px solid rgba(255,255,255,.55);border-radius:999px;
  background:rgba(23,27,85,.72);color:#fff;font-family:var(--display);font-size:15px;font-weight:600;cursor:pointer;
  backdrop-filter:blur(6px);transition:background .15s,transform .12s;
}
.sh-corner-btn:hover{background:rgba(47,99,216,.85);transform:translateY(-1px)}
.sh-corner-btn img{width:22px;height:22px;object-fit:contain}
.sh-corner-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
:fullscreen .sh-corner{opacity:.35;transition:opacity .2s}
:fullscreen .sh-corner:hover{opacity:1}

/* ------------------------------------------------------------ modals */
.sh-modal{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;overflow:auto;
  background:rgba(12,16,60,.55);backdrop-filter:blur(3px);padding:16px;
}
.sh-endcard{width:min(94vw,900px)}

/* ------------------------------------------------------------ toast */
.sh-toast{
  position:fixed;left:50%;bottom:64px;transform:translateX(-50%) translateY(20px);z-index:90;
  padding:10px 22px;background:rgba(35,32,105,.92);color:#fff;border-radius:999px;
  font-family:var(--display);font-size:18px;font-weight:600;opacity:0;transition:opacity .2s,transform .2s;
  pointer-events:none;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;
}
.sh-toast-on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){
  .sh-orange,.sh-corner-btn,.sh-toast{transition:none}
}