/* ==========================================================================
   games.css — the GAMES panel (js/games/play.js) and the staff game pages
   (staff/bingo.html, staff/trivia.html)
   --------------------------------------------------------------------------
   The hub, the join forms and the hall of fame sit on the menu's paper, in
   the house type. In play it's different on purpose (GAMES-DESIGN.md §7):
   the stage goes dark (a phone in a dark bar), and the answers are big,
   thumb-sized, readable at arm's length. Everything is on the 4px grid.

   1. Shared: cards, type, forms, buttons, avatars
   2. The hub and the hall of fame
   3. Trivia in play
   4. Bingo card
   5. Duel
   6. Staff pages (.gs)
   ========================================================================== */

/* ==========================================================================
   1. SHARED
   ========================================================================== */
.gm {
  --gm-ink: var(--paper-ink, #3A2415);
  --gm-dim: var(--paper-dim, #5C4630);
  --gm-burn: var(--burn, #2A1608);
  --gm-edge: var(--edge, #1A1410);
  --gm-rule: var(--paper-rule, #A89070);
  --gm-stage: #1E140D;
  --gm-board: #2B1D13;
  --gm-right: #7FA35A;
  --gm-wrong: #B8352A;
  max-width: 1040px;
  margin: 0 auto;
  color: var(--gm-ink);
  font-family: var(--font-menu, 'Bitter', Georgia, serif);
}
.gm-loading { margin: 24px 0; color: var(--gm-dim); font: italic 17px/1.5 var(--font-menu); }
.gm-h {
  margin: 0 0 8px;
  color: var(--gm-burn);
  font: 700 26px/1.2 var(--font-menu);
  letter-spacing: .01em;
}
.gm-h3 {
  margin: 0 0 8px;
  color: var(--gm-dim);
  font: 700 13.5px/1.3 var(--font-menu);
  letter-spacing: .14em;
  text-transform: uppercase;
  /* style.css gives every h1-h4 the display face's 4px rust shadow; on this
     little label it reads as a second, blurred copy. (As .cust h2 does.) */
  text-shadow: none;
  will-change: auto;
}
.gm-lede { max-width: 60ch; margin: 0 0 16px; font: 17px/1.55 var(--font-menu); }
.gm-note { margin: 8px 0; color: var(--gm-dim); font: 15px/1.5 var(--font-menu); }
.gm-note--bad { color: #8C1C13; font-weight: 700; }
.gm-note--ok { color: #4F6B2E; font-weight: 700; }
.gm-small { margin: 24px 0 0; color: var(--gm-dim); font: 13px/1.5 var(--font-menu); }
.gm-or { margin: 12px 0 4px; color: var(--gm-dim); font: italic 15px/1.4 var(--font-menu); }
.gm-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; }
.gm-links a { color: var(--gm-burn); font: 700 16px/1.5 var(--font-menu); }

.gm-card {
  padding: 20px;
  border: 4px solid var(--gm-edge);
  background: linear-gradient(var(--paper-hi, #E2CFA8), #CDB78E);
  box-shadow: inset 0 0 0 2px var(--paper-sh, #BFA87A);
}
.gm-card--quiet { max-width: 640px; }
.gm-join { max-width: 640px; }

.gm-form { display: grid; gap: 8px; margin: 12px 0 0; }
.gm-form--row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.gm-form--row .gm-label { flex-basis: 100%; }
.gm-form--row .gm-hint { flex-basis: 100%; margin: 0; }
.gm-label { color: var(--gm-dim); font: 700 13.5px/1.3 var(--font-menu); letter-spacing: .12em; text-transform: uppercase; }
.gm-input {
  min-height: 48px;
  padding: 8px 12px;
  border: 4px solid var(--gm-edge);
  background: #F4E8D0;
  color: var(--gm-burn);
  font: 700 20px/1.2 var(--font-menu);
}
.gm-form--row .gm-input { flex: 1 1 10em; min-width: 0; }
.gm-hint { min-height: 1.4em; margin: 0; color: #8C1C13; font: 700 14.5px/1.4 var(--font-menu); }

.gm-btn {
  min-height: 48px;
  padding: 10px 20px;
  border: 4px solid var(--gm-edge);
  background: linear-gradient(#5C4029, #42301F);
  color: var(--bone, #F4E8D0);
  font: 700 16px/1.2 var(--font-menu);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.gm-btn:hover:not(:disabled) { background: linear-gradient(#6E4E33, #4E3825); }
.gm-btn:disabled { opacity: .55; cursor: default; }
.gm-btn--big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  background: linear-gradient(#B08A3C, #8A6B28);
  box-shadow: inset 0 4px 0 var(--gold-light, #F2C14E);
  color: #1A1008;
  font-size: 20px;
}
.gm-btn--big:hover:not(:disabled) { background: linear-gradient(#C29A48, #9A7830); }
.gm :focus-visible { outline: 4px solid var(--gm-burn); outline-offset: 2px; }

.gm-cast { margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.gm-cast__row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; overscroll-behavior-x: contain; }
.gm-pick { position: relative; flex: none; cursor: pointer; }
.gm-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gm-pick .gm-av { border: 4px solid transparent; background-color: rgba(255, 255, 255, .3); }
.gm-pick input:checked + .gm-av { border-color: var(--gm-burn); background-color: rgba(232, 163, 23, .35); }
.gm-pick input:focus-visible + .gm-av { outline: 4px solid var(--gm-burn); outline-offset: 2px; }

.gm-recover { margin: 16px 0 0; font: 15px/1.5 var(--font-menu); }
.gm-recover summary { color: var(--gm-burn); font-weight: 700; cursor: pointer; min-height: 32px; }

/* Avatars: a bust at a whole-number scale (--s). A stand-in is a crop of
   its 32 x 46 idle sprite (rows 2-30); a recipe is a canvas (js/avatar). */
.gm-av {
  --s: 2;
  display: inline-block;
  flex: none;
  width: calc(32px * var(--s));
  height: calc(28px * var(--s));
  overflow: hidden;
  vertical-align: middle;
  image-rendering: pixelated;
}
.gm-av--cast {
  background-image: var(--img);
  background-repeat: no-repeat;
  background-size: calc(32px * var(--s)) calc(1px * var(--sheet-h, 46) * var(--s));
  background-position: 0 calc(-1px * var(--bust-y, 2) * var(--s));
}
.gm-av--recipe { height: calc(40px * var(--s)); }
.gm-av canvas { display: block; image-rendering: pixelated; }

/* The guest line (0014): one plain sentence and a button, wherever a
   guest joins or wins. On the paper (join forms, the duel) it's a panel
   of its own; on the dark stage (in play) it goes dark with a gold button. */
.gm-guest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 12px 0 16px;
  padding: 12px 16px;
  border: 3px solid var(--gm-edge);
  background: #EFE2C4;
  box-shadow: inset 0 0 0 2px var(--paper-sh, #BFA87A);
  text-align: left;
}
.gm-guest__text { flex: 1 1 24ch; margin: 0; color: var(--gm-ink); font: 16px/1.5 var(--font-menu); }
/* It may shrink and wrap: at 390 wide the words won't fit on one line. */
.gm-guest__btn { flex: 0 1 auto; max-width: 100%; min-height: 44px; padding: 8px 16px; font-size: 14.5px; letter-spacing: .06em; white-space: normal; }
.gm-play .gm-guest { border-color: #5C4630; background: #2E2014; box-shadow: none; }
.gm-play .gm-guest__text { color: #E4D2AC; }
.gm-play .gm-guest__btn { background: linear-gradient(#B08A3C, #8A6B28); box-shadow: inset 0 4px 0 var(--gold-light, #F2C14E); color: #1A1008; }
.gm-play .gm-guest__btn:hover { background: linear-gradient(#C29A48, #9A7830); }
/* "Someone signed in as Bob, so you're Bob 2 now." */
.gm-foot__moved { flex-basis: 100%; color: var(--gold-light, #F2C14E); font-weight: 700; }
.gm-duel__as { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 17px/1.4 var(--font-menu); }

/* ==========================================================================
   2. THE HUB AND THE HALL OF FAME
   ========================================================================== */
.gm-hub__lede { margin-bottom: 20px; }
.gm-hub { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@container (min-width: 720px) { .gm-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gm-tile {
  display: grid;
  gap: 8px;
  height: 100%;
  min-height: 120px;
  padding: 20px;
  border: 4px solid var(--gm-edge);
  background:
    repeating-linear-gradient(90deg, #4A3323 0 28px, #3D2A1C 28px 32px, #44301F 32px 60px, #2E2014 60px 64px);
  box-shadow: inset 0 4px 0 #6B4A2F;
  color: var(--bone, #F4E8D0);
  text-decoration: none;
}
.gm-tile:hover { box-shadow: inset 0 4px 0 var(--gold-light, #F2C14E), 0 0 0 4px var(--gold, #E8A317); }
.gm-tile:focus-visible { outline: 4px solid var(--gold, #E8A317); outline-offset: 2px; }
.gm-tile__name {
  color: var(--gold-light, #F2C14E);
  font: 700 30px/1 var(--font-menu);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #1A1008;
}
.gm-tile__what { font: 16px/1.45 var(--font-menu); }
.gm-tile__live { align-self: end; color: #E4D2AC; font: 15px/1.4 var(--font-menu); }
.gm-tile__live b { color: var(--gold-light, #F2C14E); }
.gm-hub__code { max-width: 520px; margin-top: 24px; }

.gm-fame { margin: 32px 0 0; }
.gm-fame__cols { display: grid; gap: 16px 32px; }
.gm-fame__who { margin: -4px 0 12px; }
@container (min-width: 720px) { .gm-fame__cols { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.gm-fame__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: fame; }
.gm-fame__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-bottom: 2px solid var(--gm-rule);
  font: 16px/1.3 var(--font-menu);
  counter-increment: fame;
}
.gm-fame__list li::before { content: counter(fame); min-width: 1.4em; color: var(--gm-dim); font-weight: 700; }
.gm-fame__name { flex: 1; min-width: 0; overflow: hidden; color: var(--gm-burn); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.gm-fame__n { color: var(--gm-dim); white-space: nowrap; }

/* ==========================================================================
   3. TRIVIA IN PLAY
   The stage is dark and everything on it is big: read at arm's length, in
   a dark bar, with a drink in the other hand.
   ========================================================================== */
.gm-play {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 4px solid var(--gm-edge);
  background: radial-gradient(120% 80% at 50% 0%, #3A2718, var(--gm-stage) 70%);
  color: var(--bone, #F4E8D0);
}
.gm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 10px 16px;
  border-bottom: 4px solid var(--gm-edge);
  background: linear-gradient(#543924, #3D2A1C);
  font: 16px/1.3 var(--font-menu);
}
.gm-head__what { flex: 1 1 auto; color: var(--gold-light, #F2C14E); font-weight: 700; letter-spacing: .04em; }
.gm-head__q { color: #E4D2AC; font-weight: 700; }
.gm-head__me { color: #E4D2AC; }
.gm-head__me b { color: var(--bone, #F4E8D0); font-size: 18px; }
.gm-stage { flex: 1; padding: 16px; }
.gm-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 16px;
  border-top: 4px solid var(--gm-edge);
  background: #2A1C12;
  color: #D8C29C;
  font: 14.5px/1.4 var(--font-menu);
}
.gm-foot__who { display: inline-flex; align-items: center; gap: 8px; }
.gm-foot b { color: var(--bone, #F4E8D0); }

/* The countdown: a bar that empties, and the seconds. Only a drawing: the
   server decides what was in time. */
.gm-clock { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.gm-clock__track { flex: 1; height: 12px; border: 3px solid var(--gm-edge); background: #120C07; overflow: hidden; }
.gm-clock__fill { display: block; height: 100%; background: linear-gradient(var(--gold-light, #F2C14E), var(--gold, #E8A317)); transform-origin: left center; }
.gm-clock__num { min-width: 2ch; color: var(--gold-light, #F2C14E); font: 700 28px/1 var(--font-menu); text-align: right; font-variant-numeric: tabular-nums; }

.gm-q__cat { margin: 0 0 4px; color: #C9AE82; font: 700 13.5px/1.3 var(--font-menu); letter-spacing: .14em; text-transform: uppercase; }
.gm-q {
  margin: 0 0 16px;
  color: var(--bone, #F4E8D0);
  font: 700 23px/1.35 var(--font-menu);
  outline: none;
}
@container (min-width: 700px) { .gm-q { font-size: 28px; } }

.gm-answers { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@container (min-width: 700px) { .gm-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gm-ans {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  padding: 12px 16px 12px 12px;
  border: 4px solid var(--gm-edge);
  background: linear-gradient(#5C4029, #3D2A1C);
  box-shadow: inset 0 4px 0 #7A5A3C;
  color: var(--bone, #F4E8D0);
  font: 700 21px/1.25 var(--font-menu);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.gm-ans:hover:not(:disabled) { background: linear-gradient(#6E4E33, #4E3825); }
.gm-ans:active:not(:disabled) { transform: translateY(2px); }
.gm-ans:focus-visible { outline: 4px solid var(--gold, #E8A317); outline-offset: 2px; }
.gm-ans__l {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 3px solid var(--gm-edge);
  background: var(--gold, #E8A317);
  color: #1A1008;
  font-size: 22px;
}
.gm-ans__t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gm-ans__count { flex: none; min-width: 2ch; color: #E4D2AC; font-size: 18px; text-align: right; }
.gm-answers.is-closed .gm-ans { cursor: default; }
.gm-answers.is-closed .gm-ans:not(.is-mine):not(.is-right) { opacity: .5; }
.gm-ans:disabled { color: var(--bone, #F4E8D0); }
.gm-ans.is-mine { background: linear-gradient(#B08A3C, #8A6B28); box-shadow: inset 0 4px 0 var(--gold-light, #F2C14E); color: #1A1008; opacity: 1; }
.gm-ans.is-mine .gm-ans__l { background: #1A1008; color: var(--gold-light, #F2C14E); }
.gm-ans.is-right { background: linear-gradient(#8DB266, #5E7E3E); box-shadow: inset 0 4px 0 #B4D48C; color: #10160A; opacity: 1; }
.gm-ans.is-right .gm-ans__count { color: #10160A; }
.gm-ans.is-wrong { background: linear-gradient(#9C3328, #6E1F16); box-shadow: inset 0 4px 0 #C2574A; color: #F4E8D0; opacity: 1; }

.gm-status { margin: 16px 0 0; color: #E4D2AC; font: 17px/1.45 var(--font-menu); }
.gm-fast { margin: 8px 0 0; color: var(--gold-light, #F2C14E); font: 17px/1.4 var(--font-menu); }
.gm-result { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 700 24px/1.3 var(--font-menu); }
.gm-result--right { color: #B4D48C; }
.gm-result--wrong { color: #E88A7E; }
.gm-result--none { color: #C9AE82; font-weight: 400; font-size: 19px; }
.gm-result b { color: var(--gold-light, #F2C14E); }

/* The phone's reaction, under a second (TRIVIA-SHOW.md): a glass slams
   down for a right answer; a wrong one tips over. */
.gm-glass { position: relative; display: inline-block; flex: none; width: 24px; height: 30px; }
.gm-glass i {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 30%, var(--gold, #E8A317) 30% 88%, #F4E8D0 88%);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
  box-shadow: inset 0 0 0 3px #F4E8D0;
}
.gm-glass--slam { animation: gm-slam .45s cubic-bezier(.3, 1.5, .5, 1) both; }
/* A wrong one falls away from the words, onto its side, 28px to the left of
   where it stood: the left margin is the floor it lands on (without it the
   glass lands over the card's edge), and the negative right margin gives
   most of that back, so the words sit just clear of it standing up. */
.gm-glass--tip { margin: 0 -8px 0 28px; transform-origin: 10% 100%; animation: gm-tip .7s ease-in both; }
@keyframes gm-slam {
  0% { transform: translateY(-28px) scale(1.1); }
  55% { transform: translateY(3px) scaleY(.86); }
  100% { transform: none; }
}
@keyframes gm-tip {
  0% { transform: translateX(24px); }
  55% { transform: translateX(0); }
  100% { transform: rotate(-84deg); }
}

.gm-stand { margin: 8px 0 0; }
.gm-stand .gm-h3 { color: #C9AE82; }
.gm-stand__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gm-stand__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 12px;
  border: 3px solid var(--gm-edge);
  background: #2E2014;
  font: 18px/1.3 var(--font-menu);
}
.gm-stand__row.is-me { background: #4A3A1A; border-color: var(--gold, #E8A317); }
.gm-stand__rank { min-width: 1.6em; color: var(--gold-light, #F2C14E); font-weight: 700; }
.gm-stand__name { flex: 1; min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.gm-stand__score { color: var(--gold-light, #F2C14E); font-weight: 700; white-space: nowrap; }
.gm-stand__score small { color: #C9AE82; font-weight: 400; font-size: 14.5px; }

.gm-winner { padding: 8px 0 16px; text-align: center; }
.gm-winner__kick { margin: 0; color: #D8BC92; font: italic 17px/1.4 var(--font-menu); }
.gm-winner__h {
  margin: 8px 0;
  color: var(--gold-light, #F2C14E);
  font: 700 44px/1 var(--font-menu);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 4px 0 #1A1008;
}
.gm-winner__names { margin: 8px 0; color: var(--bone, #F4E8D0); font: 700 34px/1.2 var(--font-menu); overflow-wrap: anywhere; }
.gm-winner__names.is-tie { font-size: 26px; }
.gm-winner__score { margin: 0; color: #E4D2AC; font: 700 20px/1.3 var(--font-menu); letter-spacing: .12em; }
.gm-winner__score b { color: var(--gold-light, #F2C14E); font-size: 30px; letter-spacing: 0; }
.gm-placed { margin: 12px 0; color: #E4D2AC; font: 19px/1.4 var(--font-menu); text-align: center; }
.gm-placed b { color: var(--gold-light, #F2C14E); }
.gm-tonight { margin: 8px 0 16px; color: #C9AE82; font: 16px/1.4 var(--font-menu); text-align: center; }

.gm-break { padding: 16px 0; text-align: center; }
.gm-break__lbl { margin: 0; color: #C9AE82; font: 700 14.5px/1.3 var(--font-menu); letter-spacing: .14em; text-transform: uppercase; }
.gm-break__clock {
  margin: 8px 0;
  color: var(--gold-light, #F2C14E);
  font: 700 64px/1 var(--font-menu);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 0 #1A1008;
  outline: none;
}
.gm-break__big { margin: 12px 0; color: var(--bone, #F4E8D0); font: 700 26px/1.3 var(--font-menu); }
.gm-play .gm-note { color: #C9AE82; }
.gm-play .gm-note--bad { color: #E88A7E; }

/* ==========================================================================
   4. BINGO CARD
   ========================================================================== */
.gm--bingo { max-width: 560px; }
.gm-calls {
  margin: 0 0 16px;
  padding: 16px;
  border: 4px solid var(--gm-edge);
  background: var(--gm-stage);
  color: var(--bone, #F4E8D0);
  text-align: center;
}
.gm-calls__game { margin: 0; color: #E4D2AC; font: 16px/1.4 var(--font-menu); }
.gm-calls__game b { color: var(--gold-light, #F2C14E); }
.gm-calls__hint { display: block; color: #C9AE82; font-size: 14.5px; }
.gm-calls__last { margin: 8px 0 4px; }
.gm-calls__big { color: var(--gold-light, #F2C14E); font: 700 64px/1 var(--font-menu); text-shadow: 0 4px 0 #1A1008; }
.gm-calls__wait { color: #C9AE82; font: italic 19px/1.4 var(--font-menu); }
.gm-calls__prev { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0; }
.gm-calls__prev span { padding: 2px 8px; border: 2px solid #5C4630; color: #E4D2AC; font: 700 17px/1.3 var(--font-menu); }
.gm-calls__count { margin: 4px 0 0; color: #C9AE82; font: 15px/1.4 var(--font-menu); }
.gm-calls__count b { color: var(--gold-light, #F2C14E); }

.gm-card-wrap.is-waiting { opacity: .6; }
.gm-bcard {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 8px;
  border: 4px solid var(--gm-edge);
  background: #F4E8D0;
}
.gm-bcard__l {
  display: grid;
  place-items: center;
  height: 40px;
  background: #8C1C13;
  color: #F4E8D0;
  font: 700 24px/1 var(--font-menu);
}
.gm-cell {
  position: relative;
  aspect-ratio: 1;
  min-height: 52px;
  border: 3px solid var(--gm-rule);
  background: #FFF7E6;
  color: var(--gm-burn);
  font: 700 24px/1 var(--font-menu);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.gm-cell.is-called::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: var(--gold, #E8A317);
}
.gm-cell.is-daubed { background: radial-gradient(circle, #C2382A 0 58%, #FFF7E6 60%); color: #FFF7E6; }
.gm-cell--free {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 3px solid var(--gm-rule);
  background: radial-gradient(circle, #C2382A 0 58%, #FFF7E6 60%);
  color: #FFF7E6;
  font: 700 13.5px/1 var(--font-menu);
  letter-spacing: .08em;
}
.gm-cell:focus-visible { outline: 4px solid var(--gm-burn); outline-offset: -2px; }
.gm-bcard__id { margin: 4px 0 0; color: var(--gm-dim); font: 14.5px/1.4 var(--font-menu); text-align: right; }
.gm-claim { margin: 16px 0 0; }
.gm-btn--bingo {
  width: 100%;
  min-height: 80px;
  background: linear-gradient(#C2382A, #8C1C13);
  box-shadow: inset 0 4px 0 #E0685A;
  color: var(--gold-light, #F2C14E);
  font-size: 34px;
  letter-spacing: .16em;
  text-shadow: 0 3px 0 #3A0A06;
}
.gm-btn--bingo:hover:not(:disabled) { background: linear-gradient(#D0473A, #9C2418); }
.gm--bingo .gm-status { color: var(--gm-burn); font-weight: 700; }
.gm-status--win { color: #4F6B2E !important; font-size: 21px; }
.gm--bingo .gm-foot { margin-top: 16px; border: 4px solid var(--gm-edge); }
.gm-bwin {
  margin: 0 0 16px;
  padding: 16px;
  border: 4px solid var(--gm-edge);
  background: #4A3A1A;
  color: var(--bone, #F4E8D0);
  text-align: center;
}
.gm-bwin__h { margin: 0; color: var(--gold-light, #F2C14E); font: 700 40px/1 var(--font-menu); letter-spacing: .14em; }
.gm-bwin__names { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin: 8px 0; font: 700 22px/1.3 var(--font-menu); }
.gm-bwin__you { margin: 0; color: var(--gold-light, #F2C14E); font: 700 20px/1.3 var(--font-menu); }
.gm-bwin .gm-note { color: #E4D2AC; }

/* ==========================================================================
   5. DUEL
   ========================================================================== */
.gm--duel { max-width: 640px; }
.gm-duel {
  padding: 16px;
  border: 4px solid var(--gm-edge);
  background: var(--gm-stage);
  color: var(--bone, #F4E8D0);
  text-align: center;
}
.gm-duel__ring { display: flex; align-items: center; gap: 8px; }
.gm-duel__side { display: grid; justify-items: center; gap: 4px; font: 700 16px/1.2 var(--font-menu); }
.gm-duel__rope { position: relative; flex: 1; height: 8px; background: repeating-linear-gradient(90deg, #C9A26A 0 8px, #8A6B3C 8px 12px); }
.gm-duel__knot {
  --x: 0;
  position: absolute;
  top: 50%;
  left: calc(50% + var(--x) * 45%);
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background: #C2382A;
  border: 3px solid #1A1008;
  transition: left .12s linear;
}
.gm-duel__knot.is-done { transition: left .6s cubic-bezier(.5, 0, .3, 1); }
.gm-duel__count { margin: 16px 0 8px; color: var(--gold-light, #F2C14E); font: 700 56px/1 var(--font-menu); text-shadow: 0 4px 0 #1A1008; }
.gm-btn--pull {
  width: 100%;
  min-height: 140px;
  background: linear-gradient(#B08A3C, #8A6B28);
  box-shadow: inset 0 4px 0 var(--gold-light, #F2C14E);
  color: #1A1008;
  font-size: 40px;
  letter-spacing: .16em;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.gm-btn--pull:active:not(:disabled) { transform: translateY(3px); }
.gm-duel__taps { margin: 8px 0 0; color: #C9AE82; font: 17px/1.4 var(--font-menu); }
.gm-prize {
  margin: 8px 0 16px;
  color: var(--gm-burn);
  font: 700 56px/1 var(--font-menu);
  letter-spacing: .2em;
}
.gm-duel-result.is-won .gm-h { color: #4F6B2E; }

/* A phone in play: all four answers on the screen at once. */
@container (max-width: 520px) {
  .gm-head { padding: 8px 12px; font-size: 15px; }
  .gm-stage { padding: 10px 12px; }
  .gm-clock { margin-bottom: 8px; }
  .gm-play--question .gm-q__cat { display: none; }       /* it's in the header already */
  .gm-q { margin-bottom: 10px; font-size: 20px; }
  .gm-answers { gap: 8px; }
  .gm-ans { min-height: 60px; padding: 8px 12px 8px 8px; gap: 10px; font-size: 19px; }
  .gm-ans__l { width: 38px; height: 38px; font-size: 20px; }
  .gm-status { margin-top: 10px; font-size: 16px; }
  .gm-foot { padding: 8px 12px; font-size: 13.5px; }
}
@media (max-width: 760px) {
  .gm-stage { padding: 12px; }
  .gm-card { padding: 16px; }
  .gm-tile__name { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-glass--slam, .gm-glass--tip { animation: none; }
  .gm-glass--tip { transform: rotate(-84deg); }
  .gm-duel__knot, .gm-duel__knot.is-done { transition: none; }
  .gm-clock__fill { transition: none !important; }
}

/* ==========================================================================
   6. STAFF PAGES (staff/bingo.html, staff/trivia.html)
   Their own pages, made for a phone or tablet held in one hand behind the
   bar: wood around, paper cards, everything big enough to hit in a hurry.
   ========================================================================== */
.gs {
  --gs-edge: #1A1410;
  --gs-ink: #3A2415;
  --gs-dim: #5C4630;
  --gs-burn: #2A1608;
  --gs-rule: #A89070;
  margin: 0;
  min-height: 100vh;
  background: repeating-linear-gradient(90deg, #4A3323 0 28px, #3D2A1C 28px 32px, #44301F 32px 60px, #2E2014 60px 64px);
  color: var(--gs-ink);
  font: 16px/1.5 'Bitter', Georgia, serif;
}
.gs * { box-sizing: border-box; }
.gs-top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 16px;
  border-bottom: 4px solid var(--gs-edge);
  background: linear-gradient(#543924, #3D2A1C);
  color: #F4E8D0;
}
.gs-top h1 { margin: 0 auto 0 0; color: #F2C14E; font: 700 22px/1.2 'Bitter', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.gs-top a, .gs-top span { color: #E4D2AC; font-size: 15px; }
.gs-main { display: grid; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 16px; }
.gs-card {
  padding: 16px;
  border: 4px solid var(--gs-edge);
  background: linear-gradient(#E2CFA8, #D2BC92);
  box-shadow: inset 0 0 0 2px #BFA87A;
}
.gs-card > h2 { margin: 0 0 12px; color: var(--gs-burn); font: 700 20px/1.25 'Bitter', Georgia, serif; letter-spacing: .06em; text-transform: uppercase; }
.gs-card h3 { margin: 12px 0 6px; color: var(--gs-dim); font: 700 13.5px/1.3 'Bitter', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
.gs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gs-grow { flex: 1 1 auto; }
.gs-btn {
  min-height: 48px;
  padding: 8px 16px;
  border: 4px solid var(--gs-edge);
  background: linear-gradient(#5C4029, #42301F);
  color: #F4E8D0;
  font: 700 15px/1.2 'Bitter', Georgia, serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.gs-btn:hover:not(:disabled) { background: linear-gradient(#6E4E33, #4E3825); }
.gs-btn:disabled { opacity: .5; cursor: default; }
.gs-btn--gold { background: linear-gradient(#B08A3C, #8A6B28); box-shadow: inset 0 4px 0 #F2C14E; color: #1A1008; }
.gs-btn--gold:hover:not(:disabled) { background: linear-gradient(#C29A48, #9A7830); }
.gs-btn--red { background: linear-gradient(#C2382A, #8C1C13); color: #F4E8D0; }
.gs-btn--red:hover:not(:disabled) { background: linear-gradient(#D0473A, #9C2418); }
.gs-btn--big { min-height: 64px; padding: 12px 24px; font-size: 19px; }
.gs-btn--small { min-height: 36px; padding: 4px 10px; border-width: 3px; font-size: 13px; }
.gs-input, .gs-select, .gs-textarea {
  min-height: 44px;
  padding: 6px 10px;
  border: 3px solid var(--gs-edge);
  background: #F4E8D0;
  color: var(--gs-burn);
  font: 700 16px/1.3 'Bitter', Georgia, serif;
}
.gs-textarea { width: 100%; min-height: 72px; font-weight: 400; }
.gs-label { display: grid; gap: 4px; color: var(--gs-dim); font: 700 13px/1.3 'Bitter', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.gs-label > .gs-input, .gs-label > .gs-select { letter-spacing: 0; text-transform: none; }
.gs-note { margin: 6px 0; color: var(--gs-dim); font-size: 15px; }
.gs-bad { color: #8C1C13; font-weight: 700; }
.gs-ok { color: #4F6B2E; font-weight: 700; }
.gs-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gs-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 2px solid var(--gs-rule); }
.gs-pill { padding: 2px 8px; border: 2px solid var(--gs-edge); background: #F4E8D0; font: 700 12.5px/1.4 'Bitter', Georgia, serif; letter-spacing: .08em; text-transform: uppercase; }
.gs-pill--gold { background: #E8A317; }
.gs-pill--red { background: #C2382A; color: #F4E8D0; }
.gs-pill--green { background: #8DB266; }
.gs :focus-visible { outline: 4px solid #2A1608; outline-offset: 2px; }
.gs-toast {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 20;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  border: 4px solid var(--gs-edge);
  background: #2A1C12;
  color: #F4E8D0;
  font: 700 16px/1.4 'Bitter', Georgia, serif;
  transform: translateX(-50%);
}
.gs-toast[hidden] { display: none; }
.gs-dialog { max-width: min(92vw, 520px); padding: 20px; border: 4px solid var(--gs-edge); background: #E2CFA8; color: var(--gs-ink); }
.gs-dialog::backdrop { background: rgba(20, 12, 6, .7); }
.gs-dialog p { margin: 0 0 16px; font: 700 18px/1.4 'Bitter', Georgia, serif; }

/* The bingo caller: the 75 numbers. Columns B I N G O on a phone (a thumb
   scrolls down them); rows on a wide screen, like the board on the TV. */
.gs-now { display: grid; gap: 8px; text-align: center; }
.gs-now__big { margin: 0; color: #8C1C13; font: 700 72px/1 'Bitter', Georgia, serif; }
.gs-now__prev { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.gs-now__prev span { padding: 2px 8px; border: 2px solid var(--gs-rule); font: 700 16px/1.3 'Bitter', Georgia, serif; }
.gs-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: auto repeat(15, auto); gap: 4px; }
.gs-board__l { display: grid; place-items: center; min-height: 40px; background: #8C1C13; color: #F4E8D0; font: 700 22px/1 'Bitter', Georgia, serif; }
.gs-num {
  min-height: 48px;
  border: 3px solid var(--gs-edge);
  background: #FFF7E6;
  color: var(--gs-burn);
  font: 700 22px/1 'Bitter', Georgia, serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.gs-num:active:not(:disabled) { transform: translateY(2px); }
.gs-num.is-called { background: #3D2A1C; color: #8A7A62; border-color: #3D2A1C; }
.gs-num.is-last { background: #E8A317; color: #1A1008; border-color: var(--gs-edge); }
@media (min-width: 900px) {
  .gs-board { grid-template-columns: 48px repeat(15, minmax(0, 1fr)); grid-auto-flow: row; grid-template-rows: none; }
  .gs-board__l { min-height: 52px; }
}
.gs-mini { display: inline-grid; grid-template-columns: repeat(5, 40px); gap: 2px; padding: 4px; border: 3px solid var(--gs-edge); background: #F4E8D0; }
.gs-mini span { display: grid; place-items: center; height: 36px; border: 2px solid var(--gs-rule); font: 700 16px/1 'Bitter', Georgia, serif; }
.gs-mini .is-hit { background: #E8A317; }
.gs-mini .is-free { background: #C2382A; color: #F4E8D0; font-size: 10px; }
.gs-mini .is-head { border: 0; background: #8C1C13; color: #F4E8D0; }

/* The trivia console. */
.gs-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.gs-switch__btn { min-width: 180px; min-height: 72px; font-size: 22px; }
.gs-switch__state { font: 700 22px/1.2 'Bitter', Georgia, serif; }
.gs-switch__state.is-on { color: #4F6B2E; }
.gs-switch__state.is-off { color: #8C1C13; }
.gs-nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 16px;
  border: 4px solid var(--gs-edge);
  background: #E8A317;
  color: #1A1008;
  font: 700 18px/1.35 'Bitter', Georgia, serif;
}
.gs-q { display: grid; gap: 4px; }
.gs-q__text { font-weight: 700; }
.gs-q__meta { color: var(--gs-dim); font-size: 14px; }
.gs-cols { display: grid; gap: 16px; }
@media (min-width: 980px) { .gs-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gs-fold { border-bottom: 2px solid var(--gs-rule); }
.gs-fold > summary { display: list-item; cursor: pointer; min-height: 40px; }
.gs-fold > summary h3 { display: inline; }
.gm-status--late { margin: 0 0 12px; padding: 8px 12px; border: 3px solid var(--gold, #E8A317); color: var(--gold-light, #F2C14E); font-weight: 700; }
/* Nothing on a staff page may push it wider than the screen: a long
   category name in a select, a row of buttons. */
.gs-main > *, .gs-cols > *, .gs-card { min-width: 0; }
.gs-label { min-width: 0; max-width: 100%; }
.gs-select, .gs-input { max-width: 100%; }
.gs-card { overflow-wrap: anywhere; }
.gs-label { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   7. ON A PHONE (css/mobile.css's breakpoint: the panel is the whole screen)
   Trivia is the screen that matters most on a phone: one hand, standing
   up, in a dark bar, a drink in the other hand. So in play the stage IS
   the screen: dark from edge to edge under the top bar (no paper margin
   round it), four full-width answers 72px tall that a thumb can't miss,
   a countdown you can read at arm's length, and "your answer's in" as a
   gold banner. The join form and the hub stay on the paper.
   ========================================================================== */
@media (max-width: 1023px), (max-width: 1151px) and (max-height: 679px), (max-height: 500px) {
  .panel__page:has(> .gm--trivia > .gm-play) {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #1E140D;
  }
  .panel__page > .gm--trivia:has(> .gm-play) {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 100%;
    max-width: none;
  }
  .gm--trivia > .gm-play { flex: 1 0 auto; border-width: 0; }

  .gm-head { padding: 10px 16px; font-size: 16px; }
  .gm-head__q { color: var(--bone, #F4E8D0); font-size: 18px; }
  .gm-stage { padding: 12px 16px 16px; }
  .gm-clock { gap: 12px; margin-bottom: 10px; }
  .gm-clock__track { height: 16px; }
  .gm-clock__num { min-width: 2ch; font-size: 36px; }
  .gm-q { margin-bottom: 12px; font-size: 21px; line-height: 1.3; }
  .gm-answers { gap: 10px; }
  .gm-ans { min-height: 72px; padding: 10px 14px 10px 10px; gap: 12px; font-size: 20px; }
  .gm-ans__l { width: 44px; height: 44px; font-size: 22px; }
  .gm-status { margin-top: 12px; font-size: 17px; }
  /* Locked in: a banner, not a line of small print. */
  .gm-status--in {
    padding: 12px 14px;
    border: 4px solid var(--gold, #E8A317);
    background: #4A3A1A;
    color: var(--gold-light, #F2C14E);
    font-weight: 700;
    font-size: 19px;
  }
  .gm-result { font-size: 24px; }

  /* The guest line's button is the width of the phone: easy to hit. */
  .gm-guest__btn { flex: 1 1 100%; min-height: 48px; font-size: 15px; }
  .gm-recover summary { padding: 10px 0; }
  .gm-pick .gm-av { border-width: 4px; }
}
/* A short phone (an SE's 667px, less the browser's bars): all four answers
   still on screen with the question, at 64px each. (Only in the phone
   layout: a short desktop window's trivia is the room's, unchanged.) */
@media (max-height: 740px) {
  @media (max-width: 1023px), (max-width: 1151px) and (max-height: 679px), (max-height: 500px) {
    .gm-clock { margin-bottom: 6px; }
    .gm-clock__num { font-size: 30px; }
    .gm-q { margin-bottom: 8px; font-size: 19px; }
    .gm-answers { gap: 8px; }
    .gm-ans { min-height: 64px; font-size: 19px; }
    .gm-ans__l { width: 40px; height: 40px; }
  }
}