/* buzzer-lobby.css */
/* ============================================================
   CLASSROOM SHOWDOWN (v2.73.0) — the waiting room: Choose Your Monster,
   Pick Your Team, the captain ballot, and Waiting on Teacher.
   Shared tokens and components are in buzzer.css.
   ============================================================ */

/* ------------------------------------------------ choose your monster */
#monsterView{display:flex;flex-direction:column}
#monsterView .sd-art-tr{top:11%}
/* The sign stands in the margin to the LEFT of the grid (v2.74.2 — it
   used to stand in front of the grid's corner and hid the monster on that
   tile). The body's left padding below is the sign's width plus a gap, so
   the grid starts where the sign ends. */
.sd-sign-monster{z-index:4;left:.4%;bottom:1%;width:clamp(90px,9.5vw,150px)}
.sd-monster-head{
  position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;
  padding:clamp(10px,1.6vh,18px) 16px 0;
}
.sd-monster-head .sd-title-img img{width:min(70vw,560px)}
.sd-monster-head .sd-sub{margin-top:2px}

.sd-room-pill{
  position:absolute;right:2.5%;top:2.2%;z-index:4;
  display:flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;
  background:#fff;border:2px solid #9DEEFF;border-radius:20px;
  box-shadow:0 0 0 4px rgba(157,238,255,.35),0 6px 16px rgba(23,92,210,.2);
}
.sd-room-pill img{height:30px}
.sd-room-pill span{display:flex;flex-direction:column;line-height:1.1}
.sd-room-pill b{font-family:var(--display);font-weight:700;color:var(--ink);font-size:clamp(15px,1.8vw,20px)}
.sd-room-pill small{color:var(--royal);font-weight:700;font-size:12px}

.sd-monster-body{
  position:relative;z-index:3;flex:1;min-height:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:clamp(12px,2vw,26px);
  padding:clamp(10px,1.8vh,20px) clamp(12px,4vw,60px) clamp(16px,3vh,32px)
          calc(.4vw + clamp(90px,9.5vw,150px) + clamp(8px,1.2vw,18px));   /* room for the sign */
  align-items:stretch;
}
.sd-grid-panel{padding:clamp(10px,1.4vw,18px);overflow:auto;min-height:0}
.sd-avatar-grid{
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(5px,.8vw,9px);
}
.sd-tile{
  position:relative;aspect-ratio:1;border:0;padding:6%;cursor:pointer;
  background-color:#EAF6FF;background-size:100% 100%;background-repeat:no-repeat;
  border-radius:18%;box-shadow:0 3px 8px rgba(23,92,210,.14);
  transition:transform .12s ease,box-shadow .12s ease;
}
/* v2.75.6 — a monster somebody else in the room already wears (0122) */
.sd-tile-taken{opacity:.35;filter:grayscale(1);cursor:not-allowed;pointer-events:none}
.sd-tile-taken .sd-tile-img{filter:grayscale(1)}
.sd-tile-img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;
  filter:drop-shadow(0 3px 3px rgba(20,25,90,.22))}
.sd-tile:hover{transform:scale(1.05);box-shadow:0 0 0 3px #fff,0 8px 16px rgba(23,92,210,.25)}
.sd-tile:active{transform:scale(.96)}
.sd-tile.sel{
  transform:scale(1.06);
  box-shadow:0 0 0 4px var(--cyan),0 0 0 7px #fff,0 8px 18px rgba(80,232,255,.55);
}
.sd-tile:focus-visible{outline:4px solid var(--navy);outline-offset:2px}

.sd-selected-panel{
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(14px,1.8vw,22px) clamp(12px,1.6vw,20px) clamp(14px,1.8vw,22px);
  align-self:start;
}
.sd-selected-h{
  font-family:var(--display);font-weight:700;color:var(--royal);text-align:center;
  font-size:clamp(18px,1.9vw,24px);margin-bottom:12px;
}
.sd-stage{
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(14px,2vw,26px) 12px 14px;
  background:linear-gradient(180deg,#EAF6FF,#D5EDFF);border-radius:26px;
  border:2px solid #C5E7FF;box-shadow:inset 0 2px 0 #fff,inset 0 -6px 14px rgba(46,168,247,.18);
}
.sd-stage-img{
  width:min(60%,230px);aspect-ratio:1;object-fit:contain;display:none;
  filter:drop-shadow(0 12px 16px rgba(20,25,90,.3));
  animation:sd-pop .35s cubic-bezier(.2,1.4,.4,1);
}
.sd-stage-img.show{display:block}
@keyframes sd-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.sd-stage-empty{
  width:min(60%,230px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  text-align:center;color:#5F6B8A;font-weight:800;font-size:15px;padding:12px;
  border:3px dashed #9DEEFF;border-radius:24px;
}
.sd-fx-stage{position:absolute;top:22%;width:clamp(26px,3vw,40px);pointer-events:none}
.sd-fx-stage-l{left:6%}.sd-fx-stage-r{right:6%}
.sd-name-field{
  display:flex;align-items:center;gap:8px;width:100%;margin-top:12px;
  padding:8px 8px 8px 18px;background:#fff;border:3px solid #7FD0FF;border-radius:999px;
  box-shadow:inset 0 2px 0 #fff,0 4px 10px rgba(46,168,247,.2);
}
.sd-name-text{
  flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--display);font-weight:700;color:var(--ink);font-size:clamp(18px,2vw,24px);
}
.sd-name-edit{
  flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:#EAF6FF;display:flex;align-items:center;justify-content:center;
}
.sd-name-edit img{height:22px}
.sd-name-edit:hover{background:#D5EDFF}
.sd-name-edit:active img{transform:rotate(-20deg)}
.sd-name-edit:disabled{opacity:.4;cursor:default}
.sd-stage-no{
  margin-top:8px;text-align:center;color:var(--ink);font-weight:800;
  font-size:clamp(12.5px,1.4vw,15px);line-height:1.3;
}
.sd-stage-no[hidden]{display:none}
.sd-stage-tag{
  margin-top:10px;text-align:center;color:var(--royal);font-weight:800;
  font-size:clamp(13px,1.5vw,17px);line-height:1.3;min-height:2.6em;
}
/* v2.74.2 — the bursts stay INSIDE the panel: the button gives up the
   room they need instead of taking the panel's full width and pushing
   them out past its edge. */
.sd-selected-panel .sd-btn-wrap{margin-top:14px;gap:6px}
.sd-selected-panel .sd-btn-orange{flex:1 1 auto;min-width:0;width:auto;font-size:clamp(14px,1.3vw,18px);padding:0 5% 5.5%;white-space:nowrap}
.sd-selected-panel .sd-btn-orange img{height:.8em}
.sd-selected-panel .sd-fx-btn{width:clamp(20px,1.6vw,26px)}

@media (max-width:900px){
  /* The screen scrolls; the selected-avatar panel becomes a compact bar
     stuck to the bottom, so a tap far down the grid is still answered on
     screen. */
  .sd-monster-body{display:flex;flex-direction:column;flex:none;padding-left:12px;padding-right:12px}
  .sd-grid-panel{overflow:visible}
  .sd-avatar-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sd-selected-panel{
    position:sticky;bottom:8px;z-index:5;margin-top:12px;align-self:auto;
    display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;padding:10px 12px;
  }
  .sd-selected-h{display:none}
  .sd-stage{display:contents}
  .sd-stage-img,.sd-stage-empty{width:84px;height:84px;grid-row:span 2;animation:none}
  .sd-stage-empty{font-size:11px;padding:6px;border-radius:18px}
  .sd-fx-stage,.sd-stage-tag{display:none}
  .sd-name-field{margin-top:0;grid-column:2}
  .sd-selected-panel .sd-btn-wrap{grid-column:2;margin-top:0}
  .sd-selected-panel .sd-btn-orange{width:min(100%,280px)}
  .sd-selected-panel .sd-fx-btn{display:none}
  .sd-selected-panel .sd-err{grid-column:1/-1}
  .sd-room-pill{position:static;margin:56px auto 0;width:max-content}
}
@media (max-width:520px){
  .sd-avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sd-monster-head .sd-fx-title{display:none}
  .sd-monster-head .sd-title-img img{width:90vw}
}

/* ---------------------------------------------------------- pick team */
.sd-me{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:6px 16px 6px 6px;
  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);
}
.sd-me:empty{display:none}
.sd-me-av{width:40px;height:40px;object-fit:contain}
.sd-me-name{font-family:var(--display);font-weight:700;color:var(--ink);font-size:18px}
.sd-team-panel{max-width:640px;margin-top:18px;padding:clamp(14px,2.6vw,26px)}
.sd-team-picks{display:grid;gap:12px}
.sd-team-card{
  display:flex;align-items:center;gap:14px;width:100%;padding:10px 16px 10px 10px;
  background:#fff;border:3px solid #DCEFFF;border-radius:22px;cursor:pointer;text-align:left;
  box-shadow:0 4px 12px rgba(23,92,210,.12);transition:transform .12s ease,box-shadow .12s ease;
}
.sd-team-card:hover:not(:disabled){transform:translateY(-2px);border-color:var(--tc);box-shadow:0 10px 22px rgba(23,92,210,.2)}
.sd-team-card:active:not(:disabled){transform:none}
.sd-team-card.full{opacity:.55;cursor:not-allowed}
.sd-team-card-av{
  flex:0 0 auto;width:64px;height:64px;border-radius:18px;
  background:color-mix(in srgb,var(--tc) 18%,#fff);border:3px solid var(--tc);
  display:flex;align-items:center;justify-content:center;
}
.sd-team-card-av img{width:56px;height:56px;object-fit:contain}
.sd-team-card-dot{width:22px;height:22px;border-radius:50%;background:var(--tc)}
.sd-team-card-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.sd-team-card-name{font-family:var(--display);font-weight:700;color:var(--ink);font-size:clamp(18px,2.4vw,24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-team-card-sub{color:#5F6B8A;font-weight:700;font-size:14px}
.sd-team-card-go{height:26px;opacity:.85}
.sd-team-card.full .sd-team-card-go{display:none}

/* ------------------------------------------------------ captain ballot */
.sd-vote-round{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:12px;padding:10px 16px;border-radius:16px;
  background:linear-gradient(135deg,#FFD66B,#FF9F6B);
  color:#4A2600;font-size:15px;font-weight:800;line-height:1.35;
  box-shadow:0 6px 18px rgba(255,150,80,.32);
}
/* v2.75.25 — "You are on TEAM 2", in the team's colour, above the question */
.sd-vote-team{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:8px 18px;border-radius:999px;
  background:#fff;border:3px solid var(--tc,#7E858F);color:var(--tc,#171B55);
  font-family:var(--display);font-size:clamp(16px,2.6vw,22px);font-weight:700;letter-spacing:.04em;
  box-shadow:0 6px 16px rgba(20,27,45,.16);
}
.sd-vote-team::before{content:'';width:12px;height:12px;border-radius:50%;background:var(--tc,#7E858F)}
.sd-vote-team.hidden{display:none}
.sd-vote-panel{max-width:600px;margin-top:18px;padding:clamp(14px,2.6vw,26px)}
.sd-vote-list{display:grid;gap:10px}
.sd-cand{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:10px 14px 10px 10px;border:3px solid #DCEFFF;border-radius:20px;
  background:#fff;color:var(--ink);font-family:var(--sans);font-size:18px;font-weight:800;
  text-align:left;cursor:pointer;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,opacity .12s ease;
  box-shadow:0 3px 10px rgba(23,92,210,.1);
}
.sd-cand:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(23,92,210,.2)}
.sd-cand-av{
  width:56px;height:56px;flex:0 0 auto;border-radius:16px;background:#EAF6FF;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.sd-cand-av img{width:50px;height:50px;object-fit:contain}
.sd-cand-init{font-family:var(--display);font-weight:700;color:var(--royal)}
.sd-cand-mid{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sd-cand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-cand-you{font-size:11.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.sd-cand-you:empty{display:none}
.sd-cand-votes{
  flex:0 0 auto;min-width:38px;height:38px;border-radius:12px;padding:0 8px;
  display:flex;align-items:center;justify-content:center;
  background:#EAF6FF;color:var(--ink);font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;
}
.sd-cand.chosen{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,#fff)}
.sd-cand.chosen .sd-cand-votes{background:var(--accent);color:#fff}
.sd-cand:disabled{cursor:default;opacity:.55;box-shadow:none;transform:none}
.sd-cand.chosen:disabled{opacity:1}
.sd-cand.noself{opacity:.42}
.sd-vote-prog{margin-top:14px}
.sd-vote-bar{height:10px;border-radius:99px;background:#DCEFFF;overflow:hidden}
.sd-vote-bar span{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#FFC52E,#FF7A19);transition:width .35s cubic-bezier(.2,.8,.2,1);
}
.sd-vote-count{margin-top:8px;font-size:14px;font-weight:800;color:#5F6B8A;font-variant-numeric:tabular-nums;text-align:center}

.sd-vote-result{
  position:fixed;inset:0;z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:32px;text-align:center;
  background:url(showdown/bg/monster.webp) center/cover no-repeat;
  animation:vr-in .3s ease-out;
}
.sd-vote-result::before{content:'';position:absolute;inset:0;background:rgba(23,24,78,.35)}
.sd-vote-result > *{position:relative}
@keyframes vr-in{from{opacity:0}to{opacity:1}}
.sd-crown{color:var(--yellow);width:76px;height:76px;animation:vr-pop .5s cubic-bezier(.2,1.5,.4,1);filter:drop-shadow(0 4px 8px rgba(20,25,90,.4))}
.sd-crown svg{width:100%;height:100%;display:block}
@keyframes vr-pop{from{transform:scale(.3) rotate(-18deg);opacity:0}to{transform:none;opacity:1}}
.sd-vote-winner-img{width:min(46vw,220px);height:auto;filter:drop-shadow(0 12px 18px rgba(20,25,90,.4));animation:sd-pop .45s cubic-bezier(.2,1.4,.4,1)}
.sd-vote-winner{max-width:16ch;font-size:clamp(28px,7vw,52px)}
.sd-vote-why{font-family:var(--display);font-weight:600;font-size:clamp(16px,2.4vw,24px);color:#fff;max-width:28ch;text-shadow:0 2px 0 rgba(23,27,85,.55)}

/* The coin, for a dead heat. Spun in CSS; the RESULT came from the
   database (0099) — a coin flipped on a phone is a coin the phone can win. */
.coin{
  width:92px;height:92px;border-radius:50%;
  background:linear-gradient(145deg,#FFE08A,#E8A020);
  box-shadow:inset 0 -6px 14px rgba(120,70,0,.35),0 10px 26px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  animation:coin-spin .55s linear infinite;
}
.coin-face{font-size:36px;font-weight:800;color:#8A5A00}
@keyframes coin-spin{
  0%{transform:rotateY(0) translateY(0)}
  50%{transform:rotateY(540deg) translateY(-18px)}
  100%{transform:rotateY(1080deg) translateY(0)}
}

/* ---------------------------------------------------- waiting on teacher */
.sd-wait-center{justify-content:center;padding-top:60px}
/* The wrap hugs the title (no 900px cap, no stretch to the row), so the rays
   sit at the lettering's edges whatever the window width. */
.sd-wait-center .sd-title-wrap{width:auto;max-width:100%;gap:clamp(6px,1vw,14px)}
.sd-wait-title img{width:min(84vw,900px)}
.sd-wait-dots{display:flex;gap:10px;margin-top:22px}
.sd-wait-dots span{
  width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 2px 0 rgba(23,27,85,.4);
  animation:sd-bounce 1.2s ease-in-out infinite;
}
.sd-wait-dots span:nth-child(2){animation-delay:.15s}
.sd-wait-dots span:nth-child(3){animation-delay:.3s}
@keyframes sd-bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}}
.sd-wait-pill{
  --tc:var(--royal);
  display:flex;align-items:center;gap:12px;margin-top:22px;padding:8px 20px 8px 8px;
  background:#fff;border:3px solid var(--tc);border-radius:999px;
  box-shadow:0 0 0 4px rgba(255,255,255,.4),0 8px 20px rgba(23,92,210,.25);
  font-weight:800;color:var(--ink);font-size:clamp(15px,2vw,19px);
}
.sd-wait-pill:empty{display:none}
.sd-wait-av{width:48px;height:48px;object-fit:contain}
.sd-wait-txt b{font-family:var(--display);font-weight:700;font-size:1.15em;color:var(--tc)}

/* v2.75.5 — YOUR TEAM, big (renderWait) */
.sd-wait-team{
  --tc:var(--royal);
  width:min(560px,100%);margin-top:18px;padding:16px 16px 14px;text-align:center;
  background:#fff;border:4px solid var(--tc);border-radius:26px;
  box-shadow:0 0 0 5px rgba(255,255,255,.45),0 12px 28px rgba(23,92,210,.25);
}
.sd-wait-team[hidden]{display:none}
.sd-wait-team-kick{font-size:12.5px;font-weight:900;letter-spacing:.14em;color:#5F6B8A}
.sd-wait-team-name{font-family:var(--display);font-size:clamp(30px,8vw,44px);font-weight:700;line-height:1.05;color:var(--tc);margin:2px 0 8px;overflow-wrap:anywhere}
.sd-wait-team-hint{font-size:13.5px;font-weight:700;color:#5F6B8A;margin-bottom:10px}
.sd-wait-setup{margin:0 0 10px;padding:8px 12px;border-radius:12px;background:#FFF6E0;border:2px solid #F3C845;font-size:14px;font-weight:800;color:#8A5A00;line-height:1.35}
.sd-wait-setup[hidden]{display:none}
.sd-wait-mates{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sd-mate{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 4px;border-radius:999px;
  background:#F7FBFF;border:2px solid #DCEFFF;font-size:14.5px;font-weight:800;color:var(--ink);
}
.sd-mate-av{width:30px;height:30px;object-fit:contain}
.sd-mate-me{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,#fff)}
.sd-mate-cap{border-color:#F3C845}
/* v2.75.7 — class-list number badge on a teammate chip */
.sd-mate-no{
  font-size:12px;font-weight:900;letter-spacing:.02em;color:#fff;background:var(--tc,#2F63D8);
  border-radius:999px;padding:1px 7px;line-height:1.4;
}
.sd-mate-crown{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#B7791F;margin-left:2px}

@media (prefers-reduced-motion:reduce){
  .coin,.sd-crown,.sd-wait-dots span,.sd-stage-img,.sd-vote-winner-img{animation:none}
  .sd-cand,.sd-tile,.sd-team-card,.sd-vote-bar span{transition:none}
}