/* ==================================================================
   Host screen, read from across the room.
   ================================================================== */

#drops {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.stage {
  min-height: 100vh;
  padding: 2.6vh 4vw 5.2vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.9rem, 2.4vh, 2.2rem);
}

.hostbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1.6rem;
  background: rgba(255, 252, 245, 0.92);
  border-top: 1px solid var(--hair);
  font-size: 0.85rem;
  color: var(--cream-dim);
  letter-spacing: 0.04em;
}
.hostbar-code { font-family: var(--face-loud); color: var(--honey-ink); letter-spacing: 0.3em; }

/* ---------------- wordmark ---------------- */
.wordmark {
  font-family: var(--face-logo);
  font-size: clamp(4rem, 12.5vw, 10.5rem);
  line-height: 1.18;   /* Aref Ruqaa hangs below the baseline */
  margin: 0;
  color: var(--honey-ink);
  /* Honey on yellow measures 4.4:1, and only 2.2:1 where a letter crosses
     one of the comb outlines, so the fill alone dissolves into the
     background. The dark edge is what holds the shape; the colour is
     unchanged. */
  text-shadow:
     2px  2px 0 var(--cream), -2px  2px 0 var(--cream),
     2px -2px 0 var(--cream), -2px -2px 0 var(--cream),
     0 7px 0 var(--cream);
}
.wordmark .drip {
  display: inline-block;
  animation: sway 5s ease-in-out infinite;
}
@keyframes sway {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-8px); }
}
.tagline {
  font-family: var(--face-body);
  font-weight: 900;
  font-size: clamp(1.3rem, 2.5vw, 2.3rem);
  color: #241608;
  margin: 0.2rem 0 0;
  letter-spacing: 0.01em;
  line-height: 1.35;
  max-width: 26ch;
}

/* ---------------- lobby ---------------- */
.lobby {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.join-card {
  background: linear-gradient(160deg, #FFFFFF, #FFF7E7);
  border: var(--edge);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  text-align: center;
  box-shadow: 0 18px 44px var(--shadow);
}
/* This is the instruction the room acts on, so it should not be set as fine
   print. Scoped to the card, so the eyebrow elsewhere stays small. */
.join-card .eyebrow {
  font-size: 1.95rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.2rem;
}
.join-card img {
  width: min(300px, 34vw);
  aspect-ratio: 1;
  border-radius: var(--r-md);
  display: block;
  margin: 0 auto 1rem;
  background: var(--cream);
}
.join-url {
  direction: ltr;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.95rem;
  color: var(--cream-dim);
  word-break: break-all;
}
.room-code {
  font-family: var(--face-loud);
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: 0.35em;
  color: var(--honey-ink);
  margin: 0.2rem 0 0.4rem;
  padding-right: 0.35em; /* balance the letter-spacing tail */
}


.lobby-note {
  font-family: var(--face-body);
  font-weight: 900;
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  color: #241608;
  margin: 0.6rem 0 0;
  line-height: 1.5;
}

/* ---------------- round card ---------------- */
.round-slate { text-align: center; }
.round-name {
  font-family: var(--face-loud);
  font-size: clamp(3rem, 9vw, 8rem);
  margin: 0;
  color: var(--cream);
}
.round-mult {
  font-family: var(--face-body);
  font-weight: 900;
  color: var(--honey-ink);
  font-size: clamp(1rem, 2vw, 1.6rem);
  letter-spacing: 0.2em;
}

/* ---------------- prompt ---------------- */
.prompt {
  font-family: var(--face-loud);
  font-size: clamp(1.8rem, 4.4vw, 4rem);
  line-height: 1.35;
  text-align: center;
  margin: 0 auto;
  max-width: 22ch;
  color: var(--cream);
  text-wrap: balance;
}
/* the blank is drawn, not typed: one unbroken rule on the baseline */
.prompt em {
  display: inline-block;
  width: 4.6ch;
  height: 0.78em;
  border-bottom: 0.09em solid var(--honey-ink);
  margin: 0 0.14em;
  vertical-align: baseline;
}

/* ---------------- answers ---------------- */
.duel {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
}
.answer {
  position: relative;
  box-shadow: 7px 7px 0 var(--cream);
  background-color: #FFFCF4;
  background-image: linear-gradient(170deg, #FFFFFF, #FFF7E7);
  border: 3px solid var(--cream);
  border-radius: 24px;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  animation: deal 420ms cubic-bezier(.2, 1.2, .4, 1) both;
}
.answer:nth-child(2) { animation-delay: 110ms; }
.answer:nth-child(3) { animation-delay: 220ms; }
.answer:nth-child(4) { animation-delay: 330ms; }
@keyframes deal {
  from { transform: translateY(28px) rotate(-1.5deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.answer.win {
  border-color: var(--honey-ink);
  box-shadow: 0 0 0 3px rgba(208, 138, 6, 0.35), 0 16px 36px rgba(208, 138, 6, 0.22);
}
.answer.blank .answer-text { color: #A8926C; font-style: italic; }

.answer-text em {
  display: inline-block;
  width: 3.4ch;
  height: 0.74em;
  border-bottom: 0.09em solid var(--honey-ink);
  margin: 0 0.12em;
  vertical-align: baseline;
}
.answer-text {
  font-family: var(--face-loud);
  font-size: clamp(1.3rem, 2.6vw, 2.4rem);
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
}
.answer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px dashed var(--hair);
  padding-top: 0.7rem;
}
.author {
  font-weight: 900;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  color: var(--cream);
}
.gain {
  font-family: var(--face-loud);
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  color: var(--honey-ink);
}




/* ---------------- timer ---------------- */
.timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.timer svg { transform: rotate(-90deg); }
.timer-track { stroke: rgba(46, 29, 16, 0.12); }
.timer-fill  { stroke: var(--honey); stroke-linecap: round; transition: stroke 400ms; }
.timer.low .timer-fill { stroke: var(--rose); }
.timer-num {
  font-family: var(--face-loud);
  font-size: 2.4rem;
  min-width: 2.4ch;
  text-align: center;
}
.timer.low .timer-num { color: var(--rose); animation: pulse 700ms ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
/* frozen: the room is paused, or this screen lost its connection. Dimmed so
   a stopped clock does not read as a hung one. */
.timer.stalled { opacity: 0.4; }
.timer.stalled .timer-num { animation: none; }

.tally {
  text-align: center;
  color: var(--cream-dim);
  /* the room watches this to know whether it is waiting on someone */
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  /* Fixed, not the default 1em: as a paragraph its margins scale with the
     font size, and at this size that alone pushed the ten answer screen
     35px past the bottom. */
  margin: 0.35rem 0 0;
}
/* Ten answers need the height back. Sibling selector because the tally sits
   after the answer grid, not inside it. */
.duel.dense ~ .tally { font-size: 1.25rem; margin-top: 0.2rem; }

/* ---------------- scoreboard ---------------- */
/* The round-end heading. It carries the whole screen, so it is set as a
   heading rather than as an eyebrow. Same rule serves every round, the
   text underneath it is the only thing that changes. */
.board-title {
  font-family: var(--face-loud);
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: #241608;
  margin: 0 0 1.1rem;
  text-shadow: 0 4px 0 rgba(255, 255, 255, 0.8);
}

.board {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
.rank {
  box-shadow: 4px 4px 0 var(--cream);
  border: 2px solid var(--cream);
  display: grid;
  grid-template-columns: 2.6rem auto 1fr auto;
  align-items: center;
  gap: 1rem;
  background: var(--ink-2);
  border-radius: var(--r-md);
  padding: 0.7rem 1.2rem;
  animation: slidein 400ms ease both;
}
.rank:nth-child(1) { animation-delay: 40ms; }
.rank:nth-child(2) { animation-delay: 90ms; }
.rank:nth-child(3) { animation-delay: 140ms; }
.rank:nth-child(4) { animation-delay: 190ms; }
.rank:nth-child(5) { animation-delay: 240ms; }
@keyframes slidein {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.rank-pos { font-family: var(--face-loud); font-size: 1.8rem; color: var(--cream-dim); }
.rank-name { font-size: clamp(1.1rem, 2vw, 1.8rem); font-weight: 700; }
.rank-mid { min-width: 0; }
.rank-bar {
  height: 9px;
  border-radius: 99px;
  background: rgba(46, 29, 16, 0.10);
  margin-top: 0.3rem;
  overflow: hidden;
}
.rank-bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  transform-origin: right center;   /* RTL: bars grow from the right */
  animation: grow 900ms cubic-bezier(.2, .9, .3, 1) both 120ms;
}
@keyframes grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.rank-score { font-family: var(--face-loud); font-size: clamp(1.3rem, 2.4vw, 2.2rem); color: var(--honey-ink); }
.rank-delta { font-size: 0.95rem; color: var(--pistachio); font-weight: 700; }

/* ---------------- winner ---------------- */
.crown {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
/* The title over the winner, read from the back of the room. Scoped to the
   crown so the eyebrow on the join card keeps its own size. */
.crown .eyebrow {
  font-size: 2rem;
  letter-spacing: 0.1em;
  /* Fixed, not the default 1em. At this size the scaling paragraph margins
     alone pushed a ten player winner screen 47px past the bottom; the
     crown's flex gap already spaces it. */
  margin: 0;
}
.winner-name {
  font-family: var(--face-logo);
  font-size: clamp(3.5rem, 11vw, 9rem);
  color: var(--honey-ink);
  margin: 0;
  line-height: 1;
  text-shadow: 0 6px 0 var(--honey-deep);
  animation: rise 700ms cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes rise {
  from { transform: translateY(40px) scale(0.85); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.winner-line { font-family: var(--face-loud); font-size: clamp(1.2rem, 3vw, 2.4rem); color: var(--cream); }

.center { text-align: center; }
.actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .lobby { grid-template-columns: 1fr; }
}

/* shorter laptop screens: tighten everything so nothing scrolls */
@media (max-height: 800px) {
  .stage { gap: 0.9rem; padding-bottom: 3.6rem; }
  .answer { min-height: 150px; }
  .timer svg { width: 84px; height: 84px; }
  .timer-num { font-size: 1.9rem; }
  .winner-name { font-size: clamp(2.6rem, 7.5vw, 5.6rem); }
  .crown .rank { padding: 0.42rem 1rem; }
  .crown .rank-pos { font-size: 1.4rem; }
  .round-name { font-size: clamp(2.4rem, 7vw, 5rem); }
  .join-card img { width: min(240px, 28vw); }
}

/* the last round puts every player on screen at once */
.duel.many .answer { min-height: 130px; padding: 1rem 1.2rem; gap: 0.55rem; }
.duel.many .answer-text { font-size: clamp(1rem, 1.55vw, 1.5rem); }
.duel.many .author { font-size: 1.05rem; }
.duel.many .gain { font-size: 1.2rem; }

/* a full room of 8,10: pack tighter so nothing scrolls off the TV */
.duel.dense { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 0.7rem; }
.duel.dense .answer { min-height: 92px; padding: 0.7rem 0.95rem; gap: 0.35rem; }
.duel.dense .answer-text { font-size: clamp(0.88rem, 1.2vw, 1.1rem); line-height: 1.35; }
.duel.dense .answer-foot { padding-top: 0.4rem; }
.duel.dense .author { font-size: 0.9rem; }
.duel.dense .gain { font-size: 1rem; }
.duel.dense 
/* winner screen with a full room behind them */
.crown .board.dense { gap: 0.32rem; }
.crown .board.dense .rank { padding: 0.28rem 0.85rem; }
.crown .board.dense .rank-name { font-size: 0.95rem; }
.crown .board.dense .rank-score { font-size: 1.1rem; }
.crown .board.dense .rank-pos { font-size: 1.1rem; }
.crown:has(.board.dense) .winner-name { font-size: clamp(2.4rem, 7vw, 5.4rem); }
.crown:has(.board.dense) .winner-line { font-size: clamp(1rem, 2vw, 1.5rem); }

@media (max-height: 800px) {
  .crown { gap: 0.15rem; }
  .crown .board.dense .rank { padding: 0.22rem 0.8rem; }
  .crown .board.dense .rank-bar { height: 6px; margin-top: 0.16rem; }
}

@media (max-height: 800px) {
  .duel.many .answer { min-height: 104px; padding: 0.8rem 1rem; }
  .duel.many .answer-text { font-size: clamp(0.95rem, 1.35vw, 1.25rem); }
  .prompt { font-size: clamp(1.5rem, 3.6vw, 3rem); }
}

/* ---------------- players ---------------- */
/* The avatar is deliberately plain: a coloured token standing in for
   artwork. Drop an `image` into characters.json and it swaps in. */
.avatar {
  --c: #8A7455;
  width: 138px;
  height: 138px;
  border-radius: 42px;
  background: var(--c);
  display: grid;
  place-content: center;
  color: #fff;
  font-family: var(--face-loud);
  font-size: 1.6rem;
  line-height: 1;
  overflow: hidden;
  flex: none;
  box-shadow: 0 4px 12px var(--shadow), inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar svg { width: 100%; height: 100%; display: block; }
.avatar.sm { width: 67px; height: 67px; border-radius: 22px; font-size: 1.6rem; }
.avatar.lg { width: 253px; height: 253px; border-radius: 74px; font-size: 5.4rem; }
.avatar.ghost {
  background: none;
  box-shadow: inset 0 0 0 2px var(--hair);
  color: var(--cream-dim);
}

.roster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 0.9rem;
  margin: 1rem 0 1.2rem;
}
/* five to a row in the lobby, so ten players read as two clean rows.
   Elsewhere it wraps freely, since an extra row costs height the
   writing screen does not have. */
.lobby .roster {
  display: grid;
  grid-template-columns: repeat(5, auto);
  /* start, not center: RTL puts that at the right, so the row of players
     lines up with the tagline above it instead of floating in the middle. */
  justify-content: start;
}
.who {
  width: 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  animation: pop 420ms cubic-bezier(.2, 1.4, .4, 1) both;
}
.who-name {
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who-note { font-size: 0.75rem; color: var(--cream-dim); font-weight: 700; }
/* "finished" is the thing the room is scanning for while everyone writes,
   so it reads at a glance rather than as fine print. */
.who.done .who-note {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--pistachio);
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  line-height: 1.1;
}
.who-note .tick { font-size: 1.6em; font-weight: 400; line-height: 1; }
.who.off { opacity: 0.42; }
.who.empty .who-name { color: var(--cream-dim); }
@keyframes pop {
  from { transform: translateY(-18px) scale(0.75); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.roster.dense { gap: 0.6rem 0.5rem; }
.roster.dense .who { width: 110px; }
.roster.dense .avatar { width: 88px; height: 88px; border-radius: 28px; font-size: 1.8rem; }
.roster.dense .who-name { font-size: 0.82rem; }
.roster.dense .who-note { font-size: 0.68rem; }
/* Still the loudest thing in the cell at a full room, just scaled to fit.
   Needs the extra class to outrank .roster.dense .who-note above. */
.roster.dense .who.done .who-note { font-size: 0.95rem; }

/* ---- the writing screen owns the full width ----
   In the lobby the roster shares its row with the join card, but while
   everyone writes there is nothing else on screen, so the faces get to be
   faces. Sized so a full room of ten reaches close to both edges. The extra
   class is what outranks the .roster.dense rules, here and in the
   max-height blocks further down. */
.roster.wide .avatar { width: 112px; height: 112px; border-radius: 36px; font-size: 2.5rem; }
.roster.wide .who { width: 120px; }
.roster.wide .who-name { font-size: 1rem; }

.roster.wide.dense .avatar { width: 98px; height: 98px; border-radius: 31px; font-size: 2.2rem; }
.roster.wide.dense .who { width: 106px; }
.roster.wide.dense .who-name { font-size: 0.92rem; }
.roster.wide.dense .who.done .who-note { font-size: 1.05rem; }

.author { display: inline-flex; align-items: center; gap: 0.5rem; }
.rank .avatar.sm { align-self: center; }
.board.dense .avatar.sm { width: 28px; height: 28px; border-radius: 9px; font-size: 0.78rem; }

/* the winner's token is the focal point; give the list room around it */
.crown .avatar.lg { margin-bottom: 0.2rem; }
@media (max-height: 900px) {
  .crown .avatar.lg { width: 128px; height: 128px; border-radius: 40px; font-size: 2.9rem; }
}
@media (max-height: 780px) {
  .crown .avatar.lg { width: 92px; height: 92px; border-radius: 29px; font-size: 2.1rem; }
}

@media (max-height: 940px) {
  .crown { gap: 0.1rem; }
  .crown .board .rank { padding: 0.34rem 1rem; }
  .crown .winner-line { margin: 0.1rem 0; }
}

/* test players sit a little quieter than real ones */
.who.bot .avatar { opacity: 0.72; }
.who.bot .who-note { color: var(--rose); }
.lobby-note.dim { font-weight: 700; font-size: 0.85rem; opacity: 0.7; margin-top: 0.2rem; }
.lobby-note kbd {
  font-family: var(--face-body); font-weight: 900; font-size: 0.8rem;
  background: #fff; border: 1px solid var(--hair); border-bottom-width: 2px;
  border-radius: 6px; padding: 1px 6px; color: var(--cream);
}

/* who wrote it, pinned to the top-left of the card */
.answer.revealed { padding-top: 3.5rem; }
.answer-by {
  position: absolute;
  top: 0.9rem;
  left: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.answer-by b {
  font-weight: 900;
  font-size: clamp(0.95rem, 1.5vw, 1.3rem);
  line-height: 1;
}
.duel.many .answer.revealed { padding-top: 2.9rem; }
.duel.dense .answer.revealed { padding-top: 2.5rem; }
.duel.dense .answer-by { top: 0.6rem; left: 0.7rem; gap: 0.4rem; }
.duel.dense .answer-by b { font-size: 0.85rem; }
.duel.dense .answer-by .avatar.sm { width: 24px; height: 24px; border-radius: 8px; font-size: 0.68rem; }

/* ================= playful pass ================= */
/* Cards sit slightly askew, like they were slapped down on a table. */
.duel .answer:nth-child(odd)  { rotate: -1.1deg; }
.duel .answer:nth-child(even) { rotate: 1.1deg; }
.duel.dense .answer:nth-child(odd)  { rotate: -0.5deg; }
.duel.dense .answer:nth-child(even) { rotate: 0.5deg; }

/* the prompt is a speech bubble, not a heading */
.prompt {
  background: #fff;
  border: 3px solid var(--cream);
  border-radius: 26px;
  box-shadow: 6px 6px 0 var(--cream);
  padding: clamp(0.8rem, 1.8vw, 1.4rem) clamp(1.2rem, 2.6vw, 2.2rem);
  max-width: 24ch;
  position: relative;
  rotate: -0.6deg;
}
.prompt::after {
  content: '';
  position: absolute;
  bottom: -19px;
  right: 12%;
  width: 26px; height: 20px;
  background: #fff;
  border-right: 3px solid var(--cream);
  border-bottom: 3px solid var(--cream);
  border-bottom-right-radius: 6px;
  transform: skewX(-18deg);
}

/* badges land with a bounce */
.tag {
  position: absolute;
  top: -20px;
  inset-inline-start: 20px;
  font-family: var(--face-loud);
  font-size: clamp(1.1rem, 1.9vw, 1.7rem);
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
  border: 3px solid var(--cream);
  rotate: -4deg;
  z-index: 2;
  animation: slam 460ms cubic-bezier(.2, 1.7, .4, 1) both 220ms;
}
.tag.lash { background: var(--honey-lit); color: var(--cream); }
@keyframes slam {
  0%   { transform: scale(2.6) rotate(8deg); opacity: 0; }
  60%  { transform: scale(0.92) rotate(-6deg); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* vote share reads big and loud next to the points */
.share {
  font-family: var(--face-loud);
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  color: var(--cream-dim);
}

/* chunkier player tokens */
.avatar { border: 3px solid var(--cream); box-shadow: 3px 3px 0 var(--cream); }
.avatar.lg { border-width: 4px; box-shadow: 6px 6px 0 var(--cream); }
.who .avatar { rotate: -3deg; }
.who:nth-child(even) .avatar { rotate: 3deg; }
.who:hover .avatar { animation: jiggle 420ms ease-in-out; }
@keyframes jiggle {
  0%, 100% { rotate: -3deg; }
  30%      { rotate: 6deg; }
  65%      { rotate: -6deg; }
}

/* the wordmark gets some swing */
.wordmark { rotate: -2deg; }
.winner-name { rotate: -1.5deg; }
.crown .avatar.lg { animation: bobbing 2.4s ease-in-out infinite; }
@keyframes bobbing {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-10px) rotate(3deg); }
}

/* buttons look pressable */
.btn { border: 3px solid var(--cream); }

/* the sticker treatment costs vertical space, so claw it back on short screens */
@media (max-height: 950px) {
  .prompt { padding: 0.7rem 1.3rem; }
  .duel.many .answer { min-height: 96px; }
  .duel.many .answer.revealed { padding-top: 2.6rem; }
  .duel.many .answer-text { font-size: clamp(0.95rem, 1.4vw, 1.3rem); }
}
@media (max-height: 800px) {
  .prompt { padding: 0.55rem 1.1rem; border-radius: 20px; }
  .prompt::after { bottom: -15px; height: 16px; width: 22px; }
  .roster { margin: 0.8rem 0 0.9rem; }
  .roster .avatar { width: 83px; height: 83px; border-radius: 27px; font-size: 1.85rem; }
  .who { width: 80px; }
  .who-name { font-size: 0.85rem; }
  .duel.many .answer { min-height: 84px; }
  .tag { font-size: 0.95rem; top: -16px; }
  /* ten players plus a big heading is the tightest the board ever gets */
  .board-title { font-size: clamp(1.5rem, 3.2vw, 2.4rem); margin-bottom: 0.7rem; }
}

/* a full room of 10 on one scoreboard */
.board.dense .rank { padding: 0.2rem 0.75rem; box-shadow: 3px 3px 0 var(--cream); gap: 0.55rem; }
.board.dense .rank-bar { height: 6px; margin-top: 0.16rem; }
.board.dense .rank-name { font-size: 0.98rem; }
.board.dense .rank-score { font-size: 1.1rem; }
.board.dense .rank-pos { font-size: 1rem; }
.board.dense .avatar.sm {
  width: 33px; height: 33px; border-width: 2px;
  border-radius: 8px; font-size: 0.7rem; box-shadow: 2px 2px 0 var(--cream);
}
.roster.dense .avatar { border-width: 2px; box-shadow: 2px 2px 0 var(--cream); }
.duel.dense .answer { box-shadow: 4px 4px 0 var(--cream); border-width: 2px; }
.duel.dense .answer.win { box-shadow: 4px 4px 0 var(--honey); }

@media (max-height: 950px) {
  .crown .board.dense .rank { padding: 0.16rem 0.7rem; }
  .crown .avatar.lg { width: 108px; height: 108px; border-radius: 34px; font-size: 2.5rem; }
}
@media (max-height: 800px) {
  .roster.dense { gap: 0.45rem 0.4rem; }
  .roster.dense .who { width: 66px; }
  .roster.dense .avatar { width: 58px; height: 58px; border-radius: 19px; font-size: 1.25rem; }
  .roster.dense .who-name { font-size: 0.72rem; }
  .roster.dense .who-note { font-size: 0.62rem; }
  .roster.dense .who.done .who-note { font-size: 0.82rem; }
  .duel.dense .answer { min-height: 74px; padding: 0.55rem 0.75rem; }
  .duel.dense .answer.revealed { padding-top: 2.1rem; }
  .duel.dense .answer-text { font-size: 0.85rem; }
  .crown .avatar.lg { width: 80px; height: 80px; border-radius: 26px; font-size: 1.9rem; }
  .crown .board.dense .rank { padding: 0.12rem 0.65rem; }
}

/* worst case: ten players on a 720p screen */
@media (max-height: 800px) {
  .wordmark { font-size: clamp(3rem, 9vw, 6.2rem); }
  .join-card { padding: 1rem; }
  .join-card img { width: min(178px, 22vw); }
  .room-code { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
  .join-url { font-size: 0.8rem; }
  /* Five or six answers: the cards are already reduced, so the prompt comes
     down too or two lines of it push the vote count into the bottom bar. */
  .prompt.mid { font-size: clamp(1.3rem, 2.9vw, 2.3rem); }
  .prompt.small { font-size: clamp(1rem, 1.9vw, 1.5rem); }
  .winner-name { font-size: clamp(2rem, 6vw, 4rem); }
  .winner-line { font-size: clamp(0.9rem, 1.6vw, 1.2rem); }
  .crown .board.dense .avatar.sm { width: 27px; height: 27px; border-radius: 9px; font-size: 0.78rem; }
  .crown .board.dense .rank-name { font-size: 0.88rem; }
  .crown .board.dense .rank-score { font-size: 0.95rem; }
}

@media (max-height: 800px) {
  /* the last round with a full room is the tightest screen in the game */
  .duel.dense { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem; }
  .duel.dense .answer { min-height: 66px; }
  .duel.dense .answer.revealed { padding-top: 1.9rem; }
  .duel.dense .answer-by { top: 0.4rem; left: 0.5rem; }
  .duel.dense .answer-by .avatar.sm { width: 26px; height: 26px; border-width: 2px; }
  .duel.dense .answer-by b { font-size: 0.75rem; }
  .crown { gap: 0; }
  .crown .avatar.lg { width: 70px; height: 70px; border-radius: 22px; font-size: 1.6rem; }
  .crown .board.dense .rank { padding: 0.08rem 0.6rem; }
}

@media (max-height: 800px) {
  .crown .board.dense { gap: 0.18rem; }
  .crown .board.dense .rank { padding: 0.02rem 0.6rem; box-shadow: 2px 2px 0 var(--cream); }
  .crown .winner-name { font-size: clamp(1.8rem, 5vw, 3.2rem); }
}

/* who voted for this answer, shown as the voters themselves */
.votes {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 34px;
}
.vote-face {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  /* The name sets overflow:hidden, which drops its min-content width to
     zero and lets flex crush the whole face. Hold the size and wrap. */
  flex: none;
  animation: fill 380ms cubic-bezier(.2, 1.5, .4, 1) both;
}
/* Capped width so a long name cannot stretch the row and push a card over
   the fold. The face is the primary cue, the name confirms it. */
.vote-name {
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.1;
  max-width: 7ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cream);
}
@keyframes fill {
  from { transform: scale(0.3) translateY(-14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.duel.many .vote-name { font-size: 0.72rem; max-width: 6ch; }
.duel.dense .vote-name { font-size: 0.6rem; max-width: 5ch; }
.duel.many .votes { min-height: 28px; gap: 5px; }
.duel.many .votes .avatar.sm { width: 45px; height: 45px; border-radius: 14px; font-size: 1.15rem; }
.duel.dense .votes { min-height: 24px; gap: 4px; }
.duel.dense .votes .avatar.sm {
  width: 28px; height: 28px; border-width: 2px;
  border-radius: 7px; font-size: 0.62rem; box-shadow: 2px 2px 0 var(--cream);
}
@media (max-height: 800px) {
  .duel.dense .votes { min-height: 20px; }
  .duel.dense .votes .avatar.sm { width: 23px; height: 23px; border-radius: 8px; font-size: 0.72rem; }
}


/* ---- the round multiplier, parked in the corner ---- */
.multi {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 6;
  display: flex;
  align-items: baseline;
  gap: 0.12rem;
  padding: 0.25rem 0.95rem 0.5rem;
  background: linear-gradient(180deg, var(--honey-lit), var(--honey));
  border: 4px solid var(--cream);
  border-radius: 24px;
  box-shadow: 7px 7px 0 var(--cream);
  font-family: var(--face-loud);
  color: var(--cream);
  animation: multi-idle 2.8s ease-in-out infinite;
  pointer-events: none;
}
.multi[hidden] { display: none; }
.multi-x { font-size: clamp(1.1rem, 1.8vw, 1.7rem); }
.multi-n { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 0.85; }
.multi-cap {
  font-family: var(--face-body);
  font-weight: 900;
  font-size: clamp(0.6rem, 0.9vw, 0.8rem);
  letter-spacing: 0.08em;
  align-self: flex-end;
  padding-bottom: 0.15rem;
  margin-inline-start: 0.3rem;
}

/* lands like a stamp, then breathes */
.multi.land {
  animation: multi-land 780ms cubic-bezier(.2, 1.8, .35, 1) both,
             multi-idle 2.8s ease-in-out 780ms infinite;
}
@keyframes multi-land {
  0%   { transform: rotate(18deg) scale(3.6); opacity: 0; }
  45%  { transform: rotate(-15deg) scale(0.8); opacity: 1; }
  70%  { transform: rotate(4deg) scale(1.14); }
  100% { transform: rotate(-7deg) scale(1); opacity: 1; }
}
@keyframes multi-idle {
  0%, 100% { transform: rotate(-7deg) scale(1); }
  50%      { transform: rotate(-2deg) scale(1.05); }
}

@media (max-height: 800px) {
  .multi { top: 12px; left: 12px; padding: 0.15rem 0.7rem 0.35rem; border-width: 3px; }
  .multi-n { font-size: 2rem; }
  .multi-cap { font-size: 0.58rem; }
}

/* ---- the round opens on a screen of its own ---- */
.intro {
  display: grid;
  place-items: center;
  gap: 0.9rem;
  min-height: 100%;
  text-align: center;
}
.intro-name {
  font-family: var(--face-loud);
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  color: #241608;
  margin: 0;
  animation: intro-name 620ms cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes intro-name {
  from { transform: translateY(-30px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.intro-badge {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 0.5rem 2.6rem 1rem;
  background: linear-gradient(180deg, var(--honey-lit), var(--honey));
  border: 8px solid var(--cream);
  border-radius: 46px;
  box-shadow: 16px 16px 0 var(--cream);
  font-family: var(--face-loud);
  color: var(--cream);
  animation: intro-plop 900ms cubic-bezier(.2, 1.9, .3, 1) both 180ms,
             intro-idle 2.4s ease-in-out 1080ms infinite;
  transform-origin: center;
}
.intro-x { font-size: clamp(2.4rem, 6vw, 5rem); }
.intro-n { font-size: clamp(6rem, 20vw, 16rem); line-height: 0.8; }
.intro-cap {
  font-family: var(--face-loud);
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  letter-spacing: 0.04em;
  color: #241608;
  margin: 2.1rem 0 0;   /* clears the badge's drop shadow */
  animation: intro-name 620ms cubic-bezier(.2, 1.5, .4, 1) both 260ms;
}

@keyframes intro-plop {
  0%   { transform: scale(0.1) rotate(22deg); opacity: 0; }
  55%  { transform: scale(1.16) rotate(-7deg); opacity: 1; }
  78%  { transform: scale(0.95) rotate(3deg); }
  100% { transform: scale(1) rotate(-3deg); opacity: 1; }
}
@keyframes intro-idle {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%      { transform: scale(1.045) rotate(1deg); }
}

/* then it shrinks off toward the corner, where the small one takes over */
.intro-badge.fly {
  animation: intro-fly 1000ms cubic-bezier(.55, 0, .35, 1) both;
}
@keyframes intro-fly {
  0%   { transform: scale(1) rotate(-3deg); opacity: 1; }
  70%  { opacity: 1; }
  100% {
    /* translate is physical, so left is negative even in RTL */
    transform: translate(calc(-50vw + 94px), calc(-50vh + 104px)) scale(0.16) rotate(-7deg);
    opacity: 0;
  }
}

@media (max-height: 800px) {
  .intro { gap: 0.5rem; }
  .intro-badge { padding: 0.25rem 1.6rem 0.6rem; border-width: 6px; box-shadow: 11px 11px 0 var(--cream); }
  .intro-n { font-size: clamp(4rem, 13vw, 9rem); }
  .intro-name, .intro-cap { font-size: clamp(1.7rem, 4vw, 2.8rem); }
  .intro-cap { margin-top: 1.5rem; }
}

/* the start button carries the whole lobby, so it gets to be loud */
.btn-go {
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  padding: 0.9rem 3.2rem;
  border-width: 5px;
  border-radius: 999px;
  box-shadow: 0 8px 0 var(--cream), 9px 12px 0 rgba(46, 29, 16, .18);
}
.btn-go:hover  { transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 12px 0 var(--cream), 11px 16px 0 rgba(46,29,16,.18); }
.btn-go:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--cream); }
@media (max-height: 800px) {
  .btn-go { font-size: 1.25rem; padding: 0.8rem 2.6rem; border-width: 4px; }
  .tagline { font-size: clamp(1.15rem, 2.1vw, 1.85rem); }
}

/* ---- which question of the round, opposite corner to the multiplier ---- */
.leg {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  pointer-events: none;
  font-family: var(--face-loud);
  /* White on the yellow measures 1.4:1 on its own, which reads as washed
     out rather than loud, so the hard dark edge is what does the popping.
     Same sticker idea as the wordmark, just inverted. */
  color: #FFFFFF;
  text-shadow:
     2px  2px 0 var(--cream), -2px  2px 0 var(--cream),
     2px -2px 0 var(--cream), -2px -2px 0 var(--cream),
     0 4px 0 rgba(46, 29, 16, 0.35);
}
.leg[hidden] { display: none; }
.leg-word {
  font-size: clamp(0.85rem, 1.5vw, 1.4rem);
  opacity: 0.92;
  letter-spacing: 0.06em;
}
.leg-n {
  font-size: clamp(1.8rem, 4.4vw, 4rem);   /* matches the question */
  line-height: 1.05;
}
.leg-slash { opacity: 0.7; padding: 0 0.06em; }

.leg.flip .leg-n { animation: leg-flip 620ms cubic-bezier(.2, 1.6, .35, 1) both; }
@keyframes leg-flip {
  0%   { transform: translateY(-38px) scale(1.5) rotate(6deg); opacity: 0; }
  55%  { transform: translateY(4px) scale(0.94) rotate(-3deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@media (max-height: 800px) {
  .leg { top: 12px; right: 14px; }
  .leg-n { font-size: clamp(1.5rem, 3.6vw, 3rem); }   /* same as .prompt here */
  .leg-word { font-size: 0.8rem; }
}

/* ---- reveal card: the author reads loudest, the voters follow ---- */
/* Author, top-left. Biggest of the two. */
.answer-by .avatar.sm {
  width: 104px;
  height: 104px;
  border-radius: 32px;
  font-size: 2.4rem;
}
.answer-by b { font-size: clamp(1.15rem, 1.9vw, 1.7rem); }
.answer.revealed { padding-top: 7.4rem; }
.answer { min-height: 268px; }

/* Voters, mid-card. Bigger, but they sit in a row so they grow less. */
.votes .avatar.sm {
  width: 84px;
  height: 84px;
  border-radius: 26px;
  font-size: 2rem;
}
.votes { min-height: 84px; gap: 9px; }

/* Five or six answers on screen: same idea, scaled back. */
.duel.many .answer-by .avatar.sm { width: 64px; height: 64px; border-radius: 20px; font-size: 1.5rem; }
.duel.many .answer.revealed { padding-top: 4.9rem; }
.duel.many .answer { min-height: 168px; }
.duel.many .votes .avatar.sm { width: 52px; height: 52px; border-radius: 17px; font-size: 1.25rem; }
.duel.many .votes { min-height: 52px; gap: 7px; }

/* A full room: the smallest bump the space allows. */
.duel.dense .answer-by .avatar.sm { width: 38px; height: 38px; border-radius: 13px; font-size: 0.95rem; }
.duel.dense .answer.revealed { padding-top: 3.1rem; }
.duel.dense .answer-by b { font-size: 0.95rem; }
.duel.dense .votes .avatar.sm { width: 34px; height: 34px; border-radius: 12px; font-size: 0.85rem; }
.duel.dense .votes { min-height: 34px; gap: 5px; }

@media (max-height: 800px) {
  .answer-by .avatar.sm { width: 76px; height: 76px; border-radius: 24px; font-size: 1.8rem; }
  .answer.revealed { padding-top: 5.6rem; }
  .answer { min-height: 208px; }
  .votes .avatar.sm { width: 62px; height: 62px; border-radius: 20px; font-size: 1.5rem; }
  .votes { min-height: 62px; }

  .duel.many .answer-by .avatar.sm { width: 48px; height: 48px; border-radius: 16px; font-size: 1.15rem; }
  .duel.many .answer.revealed { padding-top: 3.9rem; }
  .duel.many .votes .avatar.sm { width: 40px; height: 40px; border-radius: 14px; font-size: 1rem; }
  .duel.many .votes { min-height: 40px; }

  .duel.dense .answer-by .avatar.sm { width: 30px; height: 30px; border-radius: 10px; font-size: 0.78rem; }
  .duel.dense .answer.revealed { padding-top: 2.5rem; }
  .duel.dense .votes .avatar.sm { width: 26px; height: 26px; border-radius: 9px; font-size: 0.66rem; }
  .duel.dense .votes { min-height: 26px; }
}

/* the winner icon is the largest thing in the game, so it needs a ceiling */
.crown .avatar.lg { width: 204px; height: 204px; border-radius: 62px; font-size: 4.4rem; }
.crown .winner-line { margin: 0.4rem 0; }

/* short screens need the ceiling lowered again, and this has to come
   after the base rule above or it loses the cascade */
@media (max-height: 950px) {
  .crown .avatar.lg { width: 150px; height: 150px; border-radius: 46px; font-size: 3.2rem; }
}
@media (max-height: 900px) {
  .crown .avatar.lg { width: 128px; height: 128px; border-radius: 40px; font-size: 2.9rem; }
}
@media (max-height: 800px) {
  .crown .avatar.lg { width: 96px; height: 96px; border-radius: 30px; font-size: 2.2rem; }
  .crown .winner-line { margin: 0.2rem 0; }
}

/* a full room on the winner screen is the tightest case of all */
@media (max-height: 950px) {
  .crown:has(.board.dense) .avatar.lg { width: 104px; height: 104px; border-radius: 33px; font-size: 2.4rem; }
  .crown:has(.board.dense) .winner-line { margin: 0.15rem 0; }
}

@media (max-height: 800px) {
  .crown:has(.board.dense) .avatar.lg { width: 68px; height: 68px; border-radius: 22px; font-size: 1.6rem; }
}

@media (max-height: 760px) {
  .crown .avatar.lg { width: 84px; height: 84px; border-radius: 27px; font-size: 1.9rem; }
  .crown .winner-line { margin: 0.1rem 0; }
}

/* the room is full */
/* Top left in the lobby: the count, then the way back to the front page.
   Same corner and same 20px inset the multiplier badge uses, which is safe
   because the two are never on screen together. */
.corner {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.corner[hidden] { display: none; }

/* The pill, the badge and the round icon button all live in base.css, shared
   with the front page. Only the corner's placement belongs here. */
/* The padding is the room the + badge overhangs into. Putting it here rather
   than on the pill keeps the pill and the arrow on one centre line. */
.corner { align-items: center; padding-top: 0.7rem; }

/* A link wearing a button's clothes, in the settings panel. */
a.panel-btn { text-decoration: none; display: block; }
/* The buttons carry a drop shadow below them, so a note that follows the stack
   needs clearance or it lands underneath one. */
.panel-stack + .panel-note { margin-top: 0.9rem; }

/* Why a start was refused. Reads as a warning without being an error state,
   since the fix is usually a purchase rather than a fault. */
.lobby-notice {
  font-family: var(--face-loud);
  font-size: clamp(1rem, 1.9vw, 1.6rem);
  color: #3A1F00;
  background: var(--honey-lit);
  border: 3px solid var(--cream);
  box-shadow: 4px 4px 0 var(--cream);
  border-radius: var(--r-md, 14px);
  padding: 0.35rem 1.1rem 0.45rem;
  /* pinned: a paragraph's 1em margins scale with this font size */
  margin: 0.4rem 0 0.2rem;
  display: inline-block;
}

.roster-full {
  font-family: var(--face-loud);
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  color: #241608;
  background: var(--honey-lit);
  border: 3px solid var(--cream);
  box-shadow: 4px 4px 0 var(--cream);
  border-radius: 999px;
  padding: 0.1rem 1.1rem 0.2rem;
  margin: 0 0 0.3rem;
  display: inline-block;
  rotate: -1.5deg;
}

/* ==================================================================
   Settings, bottom left. Deliberately quiet furniture: the room is
   looking at the middle of the screen, not down here.
   ================================================================== */
/* Fixed to the corner rather than sitting inside .hostbar, because that bar
   is scaffolding and will be removed; this button has to outlive it. The
   bottom offset clears the bar while it is still there. */
.gear {
  position: fixed;
  bottom: 2.6rem;
  left: 1.1rem;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  /* Labelled, not a bare gear: a host looking for a way to stop the game
     should be able to read one rather than discover it by accident. */
  background: rgba(255, 252, 245, 0.9);
  border: 2px solid var(--cream);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--cream);
  padding: 0.3rem 0.85rem 0.3rem 0.7rem;
  line-height: 1;
  /* near-black, not honey: honey on the yellow comb measures 4.4:1, under the
     4.5 needed at this size */
  color: #241608;
  opacity: 0.8;
  transition: opacity 140ms ease, transform 140ms ease;
}
.gear:hover { opacity: 1; transform: translateY(-2px); }
.gear-icon { font-size: 1.35rem; transition: transform 200ms ease; }
.gear:hover .gear-icon { transform: rotate(60deg); }
.gear-word { font-family: var(--face-body); font-weight: 900; font-size: 1.05rem; }

.panel-wrap {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(46, 29, 16, 0.55);
}
.panel-wrap[hidden] { display: none; }

.panel {
  width: min(520px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: #FFFCF4;
  border: 3px solid var(--cream);
  border-radius: var(--r-lg);
  box-shadow: 10px 10px 0 var(--cream);
  padding: 1.2rem 1.3rem 1.4rem;
  text-align: right;
}
/* Title centred, with equal-width sides so the back and close buttons cannot
   pull it off centre. */
.panel-head { display: flex; align-items: center; gap: 0.5rem; }
.panel-side { flex: 0 0 2.2rem; display: flex; }
.panel-side:last-child { justify-content: flex-end; }
.panel-title {
  flex: 1;
  text-align: center;
  font-family: var(--face-loud);
  font-size: 1.8rem;
  color: var(--cream);
}
.panel-back {
  background: none; border: 0; font-size: 2rem; line-height: 1;
  color: var(--cream-dim); padding: 0 0.3rem;
}
.panel-back:hover { color: var(--honey-ink); }
.panel-stack { display: flex; flex-direction: column; gap: 0.6rem; }
.panel-count {
  display: inline-block; min-width: 1.6em; margin-inline-start: 0.4em;
  background: rgba(46,29,16,0.18); border-radius: 999px;
  font-size: 0.85em; padding: 0 0.35em;
}
.panel-note.quiet { font-weight: 700; color: var(--cream-dim); font-size: 0.95rem; }
.panel-label.dev { color: var(--rose); opacity: 0.8; }
.panel-x {
  background: none; border: 0; font-size: 1.3rem;
  color: var(--cream-dim); padding: 0.2rem 0.4rem;
}
.panel-x:hover { color: var(--rose); }
.panel-note { margin: 0.1rem 0 1rem; font-size: 1rem; font-weight: 700; color: var(--honey-ink); }
.panel-label {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--cream-dim);
}
.panel-row { display: flex; gap: 0.6rem; }
.panel-row + .panel-row { margin-top: 0.6rem; }
.panel-btn {
  flex: 1;
  background: linear-gradient(180deg, var(--honey-lit), var(--honey));
  color: #3A1F00;
  border-radius: 999px;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  box-shadow: 0 4px 0 var(--cream);
}
.panel-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--cream); }
.panel-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--cream); }
.panel-btn:disabled { background: #EADCC0; color: #8A7455; box-shadow: none; cursor: not-allowed; }
.panel-btn.small { font-size: 0.9rem; padding: 0.55rem 0.7rem; }
.panel-btn.warn { background: linear-gradient(180deg, #E4657C, var(--rose)); color: #FFF3F4; }

.panel-players { display: flex; flex-direction: column; gap: 0.45rem; }
.panel-player {
  display: flex; align-items: center; gap: 0.7rem;
  background: #FFFFFF;
  border: 2px solid var(--hair);
  border-radius: var(--r-md);
  padding: 0.4rem 0.6rem;
}
.panel-player.off { opacity: 0.5; }
.panel-player .avatar.sm { width: 38px; height: 38px; border-radius: 13px; font-size: 0.95rem; }
.panel-player-name { flex: 1; font-weight: 900; font-size: 1rem; }
.panel-kick {
  background: none;
  border: 2px solid var(--hair);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  color: var(--cream-dim);
}
.panel-kick:hover { border-color: var(--rose); color: var(--rose); }
.panel-kick.armed { background: var(--rose); border-color: var(--rose); color: #fff; }
.panel-empty { margin: 0; font-size: 0.95rem; color: var(--cream-dim); }

/* sound slider: continuous, no steps, an icon at each end.
   Forced ltr so muted sits on the left and loud on the right regardless of
   the page direction, and so the range's own minimum lands under the muted
   icon rather than opposite it. */
.slider-box {
  direction: ltr;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.2rem 0.2rem;
}
.slider-end { font-size: 1.5rem; line-height: 1; flex: none; }
.slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--honey-lit), var(--honey));
  border: 2px solid var(--cream);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: #FFFCF4;
  border: 3px solid var(--cream);
  box-shadow: 2px 2px 0 var(--cream);
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: #FFFCF4;
  border: 3px solid var(--cream);
  cursor: pointer;
}