/* ---- glow-front-door --------------------------------------------------------
   The painterly pass over the whole front door (docs/art/glow-identity-2026-10-05,
   screens 01 to 06). Dan, 2026-10-05: "The title menu right now is a little
   too pixelated for me... make it look a little bit more polished versus
   pixelated. Make this look really nice." And: menus show pictures, not
   paragraphs.

   Same law as the three sheets before it (front-lobby.test.mjs reads this one
   too): every colour a token, nothing under 11px, 44px targets, one gold call
   to action per stage, interior structure by background step. Every rule here
   is scoped under #hold, and every NEW bare class is this lane's own, so link
   order never decides a shared property.

   Vocabulary from the packet README: panels are ink-dark sharp rectangles with
   brass hairlines; the active row is warm ivory with near-black text; turquoise
   appears only where Blink light appears; the plate stays a painting.
   --------------------------------------------------------------------------- */

#hold {
  /* The packet's own hexes (README "Palette"). */
  --ui-jade: #65c8cd;          /* Blink turquoise: Blink light, and only that  */
  --ui-jade-ink: #0a2b2d;
  --ui-ivory-sel: #e6d8b8;     /* the limestone edge: the active ivory bar      */
  --ui-ivory-ink: #17120b;
  --ui-well: #0f1813;          /* the main game's menu well and panel           */
  --ui-panel: #1c2921;
  --ui-hairline: #a97842;      /* worn bronze                                    */
  --ui-cobalt: #326cb4;
  --ui-vermilion: #c94338;
  --id-ink: rgba(7, 11, 19, .9);
  --id-ink-soft: rgba(7, 11, 19, .74);
  --id-frame: rgba(169, 120, 66, .55);
}

/* ---- the plate, as a painting -------------------------------------------------
   The attract shot keeps the whole picture; a soft ink pool behind the mark and
   a floor band behind the prompt, nothing else. Interior stages keep the plate
   a PLACE: dimmed, never blurred to mush. */
/* --plate-x is the painting's horizontal anchor as a fraction, so the ambient
   layer over it (door-ambient.css) lands on the same pixels. */
#hold { --plate-x: .5; }
#hold .hold-plate { object-position: calc(var(--plate-x) * 100%) 50%; }
/* The two bodies stand at 61-90 % of the painting's width. Centred, any screen
   narrower than 7:5 crops Doe, and a phone shows only the waterfalls between
   them and the lamp (glow-polish aes-13, 2026-10-08), so a narrow screen keeps
   the pair: whole on a tablet, both bodies on a 390 px phone. */
@media (max-aspect-ratio: 7 / 5) {
  #hold { --plate-x: .83; }
}
#hold[data-stage="press"]::before {
  background:
    radial-gradient(42% 32% at 50% 24%, rgba(4, 6, 11, .66), rgba(4, 6, 11, 0) 100%),
    linear-gradient(rgba(4, 6, 11, 0) 64%, rgba(4, 6, 11, .78) 100%);
}
#hold:is([data-stage="signin"], [data-stage="roster"], [data-stage="newchar"], [data-stage="tutorial"], [data-stage="settings"])::before {
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(4, 6, 11, .3), rgba(4, 6, 11, .5) 100%),
    linear-gradient(rgba(4, 6, 11, .3), rgba(4, 6, 11, .08) 30%, rgba(4, 6, 11, .45) 100%);
}
#hold:is([data-stage="signin"], [data-stage="roster"], [data-stage="newchar"], [data-stage="tutorial"], [data-stage="settings"]) .hold-plate {
  filter: brightness(.9) saturate(.95);
}
#hold:is([data-stage="newchar"]) .hold-plate { filter: brightness(.82) saturate(.92); }
#hold:is([data-stage="newchar"])::before {
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(8, 14, 36, .55), rgba(4, 6, 11, 0) 100%),
    linear-gradient(rgba(4, 6, 11, .3), rgba(4, 6, 11, .25) 40%, rgba(4, 6, 11, .7) 100%);
}
#hold[data-stage="battle"] .hold-plate { filter: brightness(.42) saturate(.7); transform: none; }
#hold:is([data-stage="lobby"], [data-stage="character"], [data-stage="maps"]) .hold-plate {
  filter: brightness(.62) saturate(.85);
  transform: none;
}
#hold[data-stage="results"] .hold-plate { filter: brightness(.5) saturate(.8); transform: none; }
#hold:is([data-stage="lobby"], [data-stage="character"], [data-stage="maps"], [data-stage="results"])::before {
  background: linear-gradient(rgba(4, 6, 11, .42), rgba(4, 6, 11, .3) 40%, rgba(4, 6, 11, .62) 100%);
}

/* ---- the press beat: "ENTER TO BEGIN" on the floor band (13) ------------------- */
#hold #hold-press {
  font: 400 clamp(20px, 2vw, 30px)/1 var(--hold-serif);
  letter-spacing: .3em;
  color: var(--ui-ink);
  text-shadow: 0 2px 0 rgba(4, 6, 11, .9), 0 0 18px rgba(4, 6, 11, .9), 0 0 22px rgba(101, 200, 205, .25);
}
#hold #hold-press::before, #hold #hold-press::after {
  width: clamp(40px, 7vw, 120px);
  height: 1px;
  translate: 0 -50%;
  clip-path: none;
  background: linear-gradient(90deg, rgba(169, 120, 66, 0), var(--ui-brass));
}
#hold #hold-press::after { rotate: 180deg; }
#hold[data-stage="press"] [data-panel="press"] { padding-bottom: clamp(22px, 6vh, 60px); }

/* ---- the compact lockup on the interior stages ---------------------------------- */
#hold:is([data-stage="menu"], [data-stage="battle"], [data-stage="games"], [data-stage="create"], [data-stage="private"]) .hold-lockup { display: none; }
#hold:is([data-stage="signin"], [data-stage="roster"], [data-stage="newchar"], [data-stage="tutorial"], [data-stage="settings"], [data-stage="board"]) .hold-lockup.is-flat:not([hidden]) {
  display: flex;
}

/* ---- glow-front-polish: the sound speaker, top right of every menu screen ----------
   The lockup's mirror: same inset from the top and the side, a 44px target,
   ink with a hairline like the Back chip, so it is findable and never the
   thing the screen is for. The picture is the state: waves when on, a cross
   when off (the same glyph as Settings' Sound row). Not on the attract shot,
   whose first press is the one that turns sound on at all, nor on the dissolve
   into a match, nor over a finished match's results and reel (Settings and
   the lobby both have it). */
#hold .hold-mute {
  position: absolute;
  top: clamp(14px, 2.6vh, 28px);
  right: clamp(16px, 2.8vw, 40px);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  appearance: none;
  border: 0;
  border-radius: 2px;
  background: rgba(4, 6, 11, .5);
  box-shadow: inset 0 0 0 1px var(--id-frame);
  color: var(--ui-ink);
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
#hold .hold-mute svg { width: 24px; height: 24px; }
#hold .hold-mute:hover { background: rgba(26, 36, 50, .9); box-shadow: inset 0 0 0 1px var(--ui-brass); }
#hold .hold-mute .hold-slash { display: none; }
#hold .hold-mute[aria-pressed="false"] { color: var(--ui-muted); }
#hold .hold-mute[aria-pressed="false"] .hold-slash { display: inline; }
#hold .hold-mute[aria-pressed="false"] .hold-waves { display: none; }
#hold:is([data-stage="press"], [data-stage="leaving"], [data-stage="results"], [data-stage="watching"]) .hold-mute { display: none; }
/* The main menu's identity chip lives in the same corner: it steps left to
   sit beside the speaker, the two the same height, and the speaker drops to
   the chip's line. */
@media (min-width: 761px) {
  #hold[data-stage="menu"] .hold-mute { top: clamp(12px, 2.4vh, 26px); height: 56px; }
  #hold[data-stage="menu"] .hold-me { right: calc(clamp(16px, 2.8vw, 40px) + 48px + 8px); }
}
/* The lobby is where the music plays longest, so it keeps the speaker; on a
   laptop the room runs to the screen's edge and its STARTING IN ring sits in
   that corner, so the ring steps left and the speaker takes the room's own
   top-right corner. */
@media (min-width: 761px) and (max-width: 1540px) {
  #hold[data-stage="lobby"] .hold-mute { top: clamp(16px, 3vh, 34px); right: 16px; }
  #hold[data-stage="lobby"] .hold-ring { margin-right: 56px; }
}

/* ---- the identity stages: one centred column -------------------------------------- */
#hold:is([data-stage="signin"], [data-stage="roster"], [data-stage="newchar"]) {
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 11vh, 110px) clamp(16px, 4vw, 48px) clamp(18px, 4vh, 40px);
}
#hold .hold-idp { align-items: center; gap: 14px; }
#hold .hold-idtitle {
  align-self: center;
  margin: 0 0 4px;
  padding-bottom: 10px;
  font: 700 clamp(26px, 3.4vw, 46px)/1 var(--hold-serif);
  letter-spacing: .14em;
  padding-left: .14em;
  text-align: center;
  color: var(--ui-ink);
  text-shadow: 0 2px 0 rgba(4, 6, 11, .8), 0 0 18px rgba(4, 6, 11, .8);
  background: linear-gradient(90deg, rgba(169, 120, 66, 0), var(--ui-brass) 30%, var(--ui-gold-a) 50%, var(--ui-brass) 70%, rgba(169, 120, 66, 0)) bottom center / 60% 1px no-repeat;
}
#hold .hold-idline {
  margin: 0;
  color: var(--ui-ink);
  font: 400 14px/1.4 var(--hold-body);
  letter-spacing: .12em;
  text-align: center;
  opacity: .9;
}
/* glow-front-polish (a playtester on YOUR BUNNIES, 2026-10-06): "The layout
   looks a little odd with the play as the player kind of around the side.
   Looks like that should probably be underneath", and "The escape back is also
   a little odd here." The foot was a space-between row as wide as the panel
   (1180 px on the roster), so the gold sat far right over the painting and
   Back far left, each a long way from the cards. Now the gold is centred under
   the column and Back is a quiet chip right beside it: three columns whose two
   sides are equal, so the middle one IS the column's centre line. */
#hold .hold-idfoot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 14px;
  width: 100%;
  margin-top: clamp(6px, 2vh, 18px);
}
#hold .hold-idfoot > .hold-kbd { grid-column: 1; justify-self: end; }
#hold .hold-idfoot > .hold-cta { grid-column: 2; min-width: min(300px, 100%); }
#hold .hold-kbd { gap: 10px; color: var(--ui-ink); }
#hold .hold-kbd kbd, #hold .hold-keys kbd {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid rgba(242, 230, 189, .6);
  border-radius: 2px;
  font: 400 11px/1 var(--hold-body);
  letter-spacing: .04em;
  color: var(--ui-ink);
}
#hold .hold-kbd i { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
#hold .hold-ghost.hold-kbd { background: rgba(4, 6, 11, .5); }
#hold .hold-ghost.hold-kbd:hover { background: rgba(26, 36, 50, .9); }

/* ---- 01 sign in ------------------------------------------------------------------ */
#hold .hold-signinp { width: min(760px, 100%); }
#hold .hold-idcard {
  position: relative;
  display: grid;
  gap: 16px;
  width: 100%;
  padding: clamp(26px, 4vw, 44px) clamp(20px, 5vw, 64px) clamp(22px, 3vw, 32px);
  background: var(--id-ink);
  box-shadow: inset 0 0 0 1px var(--id-frame), 0 24px 60px rgba(0, 0, 0, .45);
}
/* The diamond on the top edge, from the concept. */
#hold .hold-idcard::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  translate: -50% 0;
  rotate: 45deg;
  background: var(--id-ink);
  box-shadow: inset 0 0 0 1px var(--ui-gold-a);
}
#hold .hold-moss {
  gap: 18px;
  min-height: 72px;
  padding: 14px 28px;
}
#hold .hold-moss b { font: 700 clamp(20px, 2.2vw, 30px)/1.1 var(--hold-serif); letter-spacing: .14em; }
#hold .hold-passkey { flex: none; width: 34px; height: 34px; color: var(--ui-gold-ink); }
#hold .hold-quiet {
  flex: none;
  align-self: center;
  min-height: 44px;
  padding: 8px 10px;
  background: none;
  color: var(--ui-ink);
}
#hold .hold-quiet i {
  font: 400 clamp(17px, 1.5vw, 22px)/1.2 var(--hold-serif);
  letter-spacing: .02em;
  background: linear-gradient(90deg, var(--ui-brass), var(--ui-gold-a), var(--ui-brass)) bottom left / 100% 1px no-repeat;
  padding-bottom: 4px;
}
#hold .hold-quiet:hover { background: none; color: var(--ui-lamp-core); }
/* Back is the sign-in's only foot control: on the centre line, under the two doors. */
#hold .hold-signinp .hold-idfoot > .hold-kbd { grid-column: 2; justify-self: center; }

/* ---- glow-guest-door: the first choice's other half --------------------------------
   PLAY AS A GUEST: secondary to the gold, but a real button with a face, so
   the choice reads as two doors. The GUEST tag is on it, so the word a guest
   will see beside their name everywhere is the word on the door they took. */
#hold .hold-guestgo {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(520px, 100%);
  min-height: 64px;
  padding: 8px 18px 8px 8px;
  border: 0;
  border-radius: 2px;
  background: rgba(7, 11, 19, .62);
  box-shadow: inset 0 0 0 1px var(--id-frame);
  color: var(--ui-ink);
  text-align: left;
  cursor: pointer;
}
#hold .hold-guestgo:hover, #hold .hold-guestgo:focus-visible { box-shadow: inset 0 0 0 1px var(--ui-brass); background: rgba(26, 36, 50, .9); }
#hold .hold-guestgo-face { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #0b111a; box-shadow: 0 0 0 1px var(--ui-cold-ink); }
#hold .hold-guestgo-words { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }
#hold .hold-guestgo-words b { font: 700 clamp(16px, 1.5vw, 20px)/1.1 var(--hold-serif); letter-spacing: .14em; }
#hold .hold-guestgo-words i { font: 400 13px/1.2 var(--hold-body); font-style: normal; letter-spacing: .08em; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hold .hold-guestgo .glow-guesttag { flex: none; }
#hold .hold-moss:disabled { filter: grayscale(1) brightness(.6); cursor: not-allowed; }
#hold .hold-idline.is-off { color: var(--ui-cold-ink); opacity: 1; }
#hold .hold-choice-note { max-width: 520px; text-align: center; }

/* The guest's one step to MOSS (lobby foot, results aside). Quiet: a line, not a button. */
#hold .hold-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: var(--ui-muted);
  font: 400 13px/1.2 var(--hold-body);
  letter-spacing: .06em;
  cursor: pointer;
}
#hold .hold-upgrade[hidden] { display: none; }
#hold .hold-upgrade svg { flex: none; width: 18px; height: 18px; color: var(--ui-gold-a); }
#hold .hold-upgrade i { font-style: normal; text-align: left; text-wrap: balance; text-decoration: underline; text-decoration-color: var(--ui-brass); text-decoration-thickness: 1px; text-underline-offset: 4px; }
#hold .hold-upgrade:hover, #hold .hold-upgrade:focus-visible { color: var(--ui-lamp-core); }

/* The lobby seat line: the tag sits right after the name. */
#hold[data-stage="lobby"] .hold-seatline b .glow-guesttag { margin-left: 8px; letter-spacing: .16em; font: 400 11px/1.1 var(--hold-body); vertical-align: 2px; }

/* ---- 03 the roster: a column of nameplates ------------------------------------------
   glow-roster-simple (Dan, 2026-10-07): "ideally, you're just picking the
   character names... it's not Doe or Lop locked in necessarily. I don't want
   to give that idea to people." The tall portrait cards (the body the player
   picked, or both bodies dimmed side by side) and the Doe/Lop pick under them
   are gone. A character is a row: a bronze seal stamped with its initial, the
   name, its world, and its Blink rank, in one centred column. Six names and
   NEW CHARACTER fit a 1366x768 window with the gold in view; past that (a
   wallet holds eight) the column scrolls and the title and the gold never do. */
#hold .hold-rosterp { width: min(620px, 100%); gap: 8px; }
#hold[data-stage="roster"] .hold-rosterp { max-height: 100%; min-height: 0; }
#hold[data-stage="roster"] .hold-rosterp > :not(.hold-roster) { flex: 0 0 auto; }
#hold .hold-roster {
  display: grid;
  gap: 6px;
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Room for the selection stroke inside the scroller. */
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-gold-edge) transparent;
}
#hold .hold-roster:empty { display: none; }
#hold .hold-rname {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 6px 16px 6px 8px;
  appearance: none;
  border: 0;
  border-radius: 2px;
  background: var(--id-ink);
  box-shadow: inset 0 0 0 1px var(--id-frame);
  color: var(--ui-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease;
}
#hold .hold-rname:hover { background: rgba(26, 36, 50, .9); box-shadow: inset 0 0 0 1px var(--ui-brass); }
/* The highlighted row is the packet's active bar: warm ivory limestone with
   near-black ink (as the main menu's rows), ringed in gold, so the eye lands
   on the name the gold says. The Codex nameplate concept drew it this way too
   (worldhopper-art-archive/glow-roster-simple-2026-10-07/concepts). */
#hold .hold-rname[aria-pressed="true"] {
  background: linear-gradient(180deg, #f0e4c6, var(--ui-ivory-sel) 60%, #d6c59f);
  box-shadow: inset 0 0 0 1px rgba(23, 18, 11, .35), 0 0 0 2px var(--ui-gold-a), 0 0 22px rgba(241, 210, 125, .22);
  color: var(--ui-ivory-ink);
}
#hold .hold-rname[aria-pressed="true"] .hold-rname-words i { opacity: .72; }
#hold .hold-rname[aria-pressed="true"] .hold-rname-blink {
  color: var(--ui-ink);
  background: var(--ui-ivory-ink);
  box-shadow: inset 0 0 0 1px rgba(242, 230, 189, .25), inset -3px 0 0 var(--ui-jade);
}
/* The selection stroke IS the focus ring here, as on the old card. */
#hold .hold-rname:focus-visible { outline: none; }
#hold .hold-rname:not([aria-pressed="true"]):focus-visible { box-shadow: inset 0 0 0 2px var(--ui-focus); }
#hold .hold-rname-words { display: grid; gap: 3px; min-width: 0; }
#hold .hold-rname-words b {
  font: 700 clamp(18px, 1.6vw, 22px)/1.1 var(--hold-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#hold .hold-rname-words i {
  font: 400 12px/1.2 var(--hold-caps);
  font-style: normal;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .85;
}
#hold .hold-rname-words i:empty { display: none; }
/* The one progression number, with a sliver of Blink light on its edge: the
   turquoise appears only where Blink does. */
#hold .hold-rname-blink {
  padding: 5px 12px 5px 10px;
  text-decoration: none;
  font: 400 11px/1 var(--hold-caps);
  letter-spacing: .2em;
  white-space: nowrap;
  color: var(--ui-ink);
  background: rgba(4, 6, 11, .6);
  box-shadow: inset 0 0 0 1px var(--id-frame), inset -3px 0 0 var(--ui-jade);
}
#hold .hold-rname-blink[hidden] { display: none; }
/* NEW CHARACTER: the last row, quieter, its seal an empty frame with a plus. */
#hold .hold-rname-new { background: rgba(7, 11, 19, .62); box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .4); }
#hold .hold-rname-new .hold-rname-words b { font-size: clamp(14px, 1.2vw, 16px); letter-spacing: .22em; }
#hold .hold-rname-new .hold-rname-words i { font: 400 12px/1.3 var(--hold-body); letter-spacing: .08em; text-transform: none; opacity: .7; }
#hold .hold-roster-note { text-align: center; color: var(--ui-ink); }
#hold .hold-rosterp .hold-idfoot .hold-cta b { font: 700 clamp(18px, 1.8vw, 26px)/1.1 var(--hold-serif); letter-spacing: .14em; }

/* ---- the seal: a bronze diamond stamped with the name's first letter ------------------
   The one identity mark a character carries on the door. Drawn, not painted,
   so it is neutral by construction (no Doe, no Lop, no world) and reads at
   44px; the diamond is the lockup's own rule mark and the card rule's dot. */
#hold .hold-rseal {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
}
#hold .hold-rseal::before {
  content: "";
  position: absolute;
  inset: 7px;
  rotate: 45deg;
  background: linear-gradient(135deg, #cfa868, #a97842 48%, #5b3d21);
  box-shadow: inset 0 0 0 1px rgba(242, 230, 189, .38), 0 2px 6px rgba(0, 0, 0, .55);
  transition: background 160ms ease, box-shadow 160ms ease;
}
#hold .hold-rseal::after {
  content: "";
  position: absolute;
  inset: 11px;
  rotate: 45deg;
  box-shadow: inset 0 0 0 1px rgba(23, 18, 11, .5);
  pointer-events: none;
}
#hold .hold-rseal b {
  position: relative;
  z-index: 1;
  font: 700 18px/1 var(--hold-serif);
  letter-spacing: 0;
  color: var(--ui-ivory-ink);
  text-shadow: 0 1px 0 rgba(242, 230, 189, .28);
}
#hold .hold-rname[aria-pressed="true"] .hold-rseal::before {
  background: linear-gradient(135deg, #f1d27d, #c99443 55%, #8a6230);
  box-shadow: inset 0 0 0 1px rgba(255, 247, 230, .6), 0 0 12px rgba(241, 210, 125, .45);
}
#hold .hold-rseal-plus::before { background: none; box-shadow: inset 0 0 0 1px var(--id-frame); }
#hold .hold-rseal-plus::after { display: none; }
#hold .hold-rseal-plus b { font: 400 26px/1 var(--hold-serif); color: var(--ui-ink); text-shadow: none; }
#hold .hold-rname-new:hover .hold-rseal-plus::before { box-shadow: inset 0 0 0 1px var(--ui-brass); }

/* ---- 02 new character: the seal it will be stamped on, and the name --------------------
   CHOOSE YOUR SHAPE and its two cutouts are gone (glow-roster-simple): the
   body is chosen in Battle Mode. The seal takes the first letter as it is
   typed; empty, it waits with a star. */
#hold .hold-makep { width: min(640px, 100%); gap: 10px; }
#hold .hold-rseal-big { width: 96px; height: 96px; margin: 4px 0 0; }
#hold .hold-rseal-big::before { inset: 14px; box-shadow: inset 0 0 0 1px rgba(242, 230, 189, .38), 0 6px 16px rgba(0, 0, 0, .6); }
#hold .hold-rseal-big::after { inset: 20px; }
#hold .hold-rseal-big b { font-size: 38px; }
#hold .hold-rseal-big b:empty::before { content: "\2726"; font-size: 24px; opacity: .5; }
#hold .hold-namefield {
  align-items: center;
  width: min(640px, 100%);
  margin-top: 6px;
}
#hold .hold-namefield > span {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--ui-gold-a);
  font: 400 12px/1 var(--hold-caps);
  letter-spacing: .32em;
  text-align: center;
}
#hold .hold-namefield > span::before, #hold .hold-namefield > span::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(169, 120, 66, 0), var(--ui-brass));
}
#hold .hold-namefield > span::after { background: linear-gradient(90deg, var(--ui-brass), rgba(169, 120, 66, 0)); }
#hold .hold-namefield input {
  width: 100%;
  min-height: 56px;
  padding: 10px 18px;
  border: 1px solid var(--id-frame);
  border-radius: 2px;
  background: var(--id-ink);
  color: var(--ui-ink);
  font: 700 clamp(22px, 2.2vw, 30px)/1.1 var(--hold-serif);
  letter-spacing: .18em;
  /* Letter-spacing trails the last glyph, so a centred value sat .18em left
     of its label and the line under it (Dan, 2026-10-07, "Dantime"). The
     same indent on the leading side puts it on the centre line. */
  text-indent: .18em;
  text-align: center;
  text-transform: uppercase;
}
#hold .hold-namefield input::placeholder { color: var(--ui-cold-dim); font-weight: 400; letter-spacing: .06em; text-transform: none; }
#hold .hold-namefield input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 0; }
#hold .hold-namefield em {
  font: 400 13px/1.3 var(--hold-body);
  font-style: normal;
  letter-spacing: .12em;
  color: var(--ui-ink);
  opacity: .8;
}
#hold .hold-makep .hold-idfoot .hold-cta b { font: 700 clamp(20px, 2vw, 28px)/1.1 var(--hold-serif); letter-spacing: .18em; }

/* The letters written in the stars (front-door.js starWrite): each letter of
   the name rises from the field into the sky and sparkles out. The field is
   the whole stage; the letters are positioned by inline style. */
#hold .hold-starfield { position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
#hold .hold-starfield:empty { display: none; }
#hold .hold-starfield b {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  font: 700 clamp(26px, 3vw, 44px)/1 var(--hold-serif);
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 26px var(--ui-jade), 0 0 44px rgba(241, 210, 125, .8);
  animation: hold-starletter 2200ms cubic-bezier(.25, .6, .3, 1) var(--delay, 0ms) both;
}
@keyframes hold-starletter {
  0% { opacity: 0; translate: -50% 20%; scale: 1.2; }
  12% { opacity: 1; translate: -50% -50%; scale: 1.2; }
  70% { opacity: 1; }
  100% { opacity: 0; translate: -50% calc(-50% - var(--rise)); scale: .55; }
}
#hold .hold-makep.is-writing .hold-namefield input { color: transparent; text-shadow: none; }

/* ---- the dice (glow-guest-door: the guest chip's New name, front-door.js rerollGuest) ---- */
#hold .hold-dice {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  min-height: 56px;
  padding: 0;
  border: 1px solid var(--id-frame);
  border-radius: 2px;
  background: var(--id-ink);
  color: var(--ui-gold-a);
  cursor: pointer;
}
#hold .hold-dice svg { width: 30px; height: 30px; transition: rotate 260ms cubic-bezier(.16, .84, .3, 1); }
#hold .hold-dice:hover { color: var(--ui-lamp-core); }
#hold .hold-dice:hover svg { rotate: 90deg; }
#hold .hold-dice:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 0; }

/* ---- 04 the main menu ---------------------------------------------------------------- */
#hold[data-stage="menu"] .hold-mark { background: none; padding: 0 0 6px; margin-bottom: clamp(10px, 2vh, 22px); }
#hold[data-stage="menu"] .hold-mark .hold-mark-franchise { color: var(--ui-ink); }
#hold[data-stage="menu"] .hold-row { position: relative; min-height: 78px; padding: 12px 20px 12px 26px; }
#hold[data-stage="menu"] .hold-row:not(.hold-go) {
  background: var(--id-ink-soft);
  box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .3);
}
#hold[data-stage="menu"] .hold-row:not(.hold-go):hover { background: rgba(26, 36, 50, .92); box-shadow: inset 0 0 0 1px var(--ui-brass); }
#hold[data-stage="menu"] .hold-row b {
  font: 700 clamp(22px, 2vw, 30px)/1.05 var(--hold-serif);
  letter-spacing: .1em;
}
#hold[data-stage="menu"] .hold-row span { font-size: 14px; letter-spacing: .04em; }
#hold[data-stage="menu"] .hold-row svg { width: 26px; color: var(--ui-brass); }
#hold[data-stage="menu"] .hold-row.hold-go svg { color: var(--ui-gold-ink); }
/* The diamond on the rail, left of each row (the concept's connecting rail). */
#hold[data-stage="menu"] .hold-row::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 7px;
  height: 7px;
  translate: 0 -50%;
  rotate: 45deg;
  background: var(--ui-brass);
  box-shadow: 0 0 0 2px rgba(7, 11, 19, .9);
}
#hold[data-stage="menu"] .hold-row.hold-go::before { background: var(--ui-gold-a); }
#hold[data-stage="menu"] .hold-menus { width: min(560px, 100%); gap: 10px; padding-left: 6px; border-left: 1px solid rgba(169, 120, 66, .35); }
#hold .hold-keys {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font: 400 12px/1 var(--hold-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ui-ink);
  opacity: .8;
}
#hold .hold-keys span { margin-right: 16px; }
/* menus-ux-35: the keycap reads "Esc" here as it does on every button. */
#hold .hold-keys kbd { text-transform: none; }

/* The identity chip, top right: portrait, name, Blink badge. */
#hold .hold-me {
  position: fixed;
  top: clamp(12px, 2.4vh, 26px);
  right: clamp(12px, 2vw, 28px);
  z-index: 4;
  display: block;
  font: inherit;
}
#hold .hold-mechip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 8px 6px 6px;
  appearance: none;
  border: 0;
  border-radius: 2px;
  background: var(--id-ink);
  box-shadow: inset 0 0 0 1px var(--id-frame);
  color: var(--ui-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#hold .hold-mechip:hover { box-shadow: inset 0 0 0 1px var(--ui-brass); }
#hold .hold-me-face {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: #0b111a;
  box-shadow: 0 0 0 2px var(--ui-brass);
}
#hold .hold-me-words { display: grid; gap: 2px; min-width: 0; }
#hold .hold-me-words b {
  font: 700 17px/1.1 var(--hold-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
#hold .hold-me-words i { font: 400 11px/1 var(--hold-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ui-muted); }
#hold .hold-me-blink {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 56px;
  margin-left: 4px;
  padding: 5px 8px;
  text-decoration: none;
  font: 400 11px/1 var(--hold-caps);
  letter-spacing: .14em;
  text-align: center;
  color: var(--ui-jade);
  background: linear-gradient(180deg, rgba(101, 200, 205, .14), rgba(7, 11, 19, 0));
  box-shadow: inset 0 0 0 1px rgba(101, 200, 205, .55);
}
#hold .hold-me-blink[hidden] { display: none; }
#hold .hold-me-blink b { display: block; font: 700 18px/1 var(--hold-serif); color: var(--ui-ink); }

/* ---- tutorial: the basics, as a picture ---------------------------------------------- */
#hold:is([data-stage="tutorial"], [data-stage="settings"]) {
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 11vh, 110px) clamp(16px, 4vw, 48px) clamp(18px, 4vh, 40px);
}
#hold .hold-tutorialp { width: min(1080px, 100%); gap: 14px; }
#hold .hold-tutorialp .hold-title, #hold .hold-settingsp .hold-title {
  align-self: center;
  padding: 0 .14em 10px 0;
  font: 700 clamp(26px, 3.4vw, 46px)/1 var(--hold-serif);
  letter-spacing: .14em;
  text-align: center;
  text-shadow: 0 2px 0 rgba(4, 6, 11, .8);
  background: linear-gradient(90deg, rgba(169, 120, 66, 0), var(--ui-brass) 30%, var(--ui-gold-a) 50%, var(--ui-brass) 70%, rgba(169, 120, 66, 0)) bottom center / 60% 1px no-repeat;
}
#hold .hold-settingsp { align-items: stretch; }
#hold .hold-settingsp .hold-title { align-self: stretch; }
/* Learn to Play: one panel, the eight steps of the course as painted cards in
   a row (course.js stripHtml), one gold button. The step you are on glows; the
   ones you have done carry a moss tick. */
#hold .hold-learn {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(1120px, 100%);
  align-self: center;
  padding: 22px 0;
  background: var(--id-ink);
  box-shadow: inset 0 0 0 1px var(--ui-brass);
}
#hold .hold-learn-steps {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)); /* one per course.js STEPS */
  gap: 10px;
  width: calc(100% - 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
#hold .hold-learn-steps .lc {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding: 0 0 10px;
  background: rgba(16, 23, 34, .92);
  box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .35);
}
#hold .hold-learn-steps .lc-art {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #0f1813;
}
#hold .hold-learn-steps .lc-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
#hold .hold-learn-steps .lc-n {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: rgba(7, 11, 19, .88);
  box-shadow: inset 0 0 0 1px var(--ui-brass);
  font: 700 13px/1 var(--hold-caps);
  color: var(--ui-ink);
}
#hold .hold-learn-steps .lc-name {
  font: 700 15px/1.1 var(--hold-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ui-ink);
  text-align: center;
}
#hold .hold-learn-steps .lc-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 4px;
}
#hold .hold-learn-steps .co-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 28px;
  height: 26px;
  padding: 0 7px;
  box-sizing: border-box;
  background: linear-gradient(#253246, #182230);
  border: 1px solid rgba(198, 168, 91, .7);
  border-bottom-width: 3px;
  border-radius: 5px;
  font: 700 13px/1 var(--hold-caps);
  color: var(--ui-ink);
  white-space: nowrap;
}
#hold .hold-learn-steps .co-cap-mouse svg { width: 12px; height: 17px; color: var(--ui-gold-a); }
#hold .hold-learn-steps .co-cap-mouse i { font-style: normal; font-size: 11px; }
#hold .hold-learn-steps .co-or { font: 400 11px/1 var(--hold-caps); color: var(--ui-muted); }
#hold .hold-learn-steps .lc-tick {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  display: none;
  width: 24px;
  height: 24px;
  padding: 3px;
  box-sizing: border-box;
  background: rgba(7, 11, 19, .88);
  color: #7fb069;
}
#hold .hold-learn-steps .lc-tick svg { display: block; width: 100%; height: 100%; }
#hold .hold-learn-steps .lc.is-done .lc-tick { display: block; }
#hold .hold-learn-steps .lc.is-done { box-shadow: inset 0 0 0 1px rgba(127, 176, 105, .7); }
#hold .hold-learn-steps .lc.is-done .lc-art img { filter: saturate(.75) brightness(.8); }
/* The glow breathes between a tight and a wide halo. Each halo is a still
   box-shadow on its own pseudo-element and only their opacity animates, so the
   compositor runs it (an animated box-shadow restyles and repaints the card on
   the main thread every frame: glow-r4-power-css). */
#hold .hold-learn-steps .lc.is-now { box-shadow: inset 0 0 0 2px var(--ui-gold-a); }
#hold .hold-learn-steps .lc.is-now::before, #hold .hold-learn-steps .lc.is-now::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: lc-glow 2.2s ease-in-out infinite;
}
#hold .hold-learn-steps .lc.is-now::before { box-shadow: 0 0 14px rgba(241, 210, 125, .25); animation-name: lc-glow-tight; }
#hold .hold-learn-steps .lc.is-now::after { box-shadow: 0 0 28px rgba(241, 210, 125, .5); }
#hold .hold-learn-steps .lc.is-now .lc-n { background: var(--ui-gold-a); color: #22170e; box-shadow: none; }
@keyframes lc-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes lc-glow-tight { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #hold .hold-learn-steps .lc.is-now { box-shadow: inset 0 0 0 2px var(--ui-gold-a), 0 0 22px rgba(241, 210, 125, .35); }
  #hold .hold-learn-steps .lc.is-now::before, #hold .hold-learn-steps .lc.is-now::after { content: none; }
}
#hold .hold-learn-go { min-width: min(340px, calc(100% - 36px)); min-height: 60px; text-decoration: none; }
#hold .hold-learn-go b { font: 700 clamp(20px, 2vw, 28px)/1.1 var(--hold-serif); letter-spacing: .18em; }
#hold .hold-learn-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font: 400 12px/1 var(--hold-caps);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ui-muted);
  text-decoration: none;
}
#hold .hold-learn-more:hover, #hold .hold-learn-more:focus-visible { color: var(--ui-ink); }

/* ---- settings ------------------------------------------------------------------------- */
#hold .hold-settingsp { width: min(560px, 100%); gap: 10px; }
#hold .hold-setting {
  min-height: 66px;
  padding: 10px 18px;
  background: var(--id-ink);
  box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .3);
  color: var(--ui-ink);
  gap: 14px;
}
#hold .hold-setting:hover { background: rgba(26, 36, 50, .95); box-shadow: inset 0 0 0 1px var(--ui-brass); }
/* menus-ux-10: the Keys row is hidden on a device with no keys (client.js). */
#hold .hold-setting[hidden] { display: none; }
#hold .hold-setting svg { width: 24px; color: var(--ui-brass); }
#hold .hold-setting > span { flex: 1 1 auto; }
#hold .hold-setting i { font: 700 17px/1.1 var(--hold-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-ink); }
#hold .hold-setting em { font-size: 12px; color: var(--ui-muted); }

/* ---- 05 the lobby --------------------------------------------------------------------- */
#hold[data-stage="lobby"] .hold-room-head { grid-template-columns: 1fr auto; grid-template-areas: "mark ring" "title ring" "line ring"; align-items: start; }
#hold[data-stage="lobby"] .hold-panel.hold-room { gap: 10px; }
#hold[data-stage="lobby"] .hold-room-mark { grid-area: mark; }
#hold[data-stage="lobby"] #hold-room-title { grid-area: title; font: 700 clamp(26px, 3.2vw, 42px)/1.05 var(--hold-serif); letter-spacing: .14em; color: var(--ui-ink); }
#hold[data-stage="lobby"] #hold-room-line { grid-area: line; }
#hold .hold-room-mark { font: 400 12px/1 var(--hold-caps) !important; letter-spacing: .3em !important; color: var(--ui-ink) !important; }
#hold .hold-room-mark b { font: 700 16px/1 var(--hold-serif); letter-spacing: .14em; color: var(--ui-jade); }
#hold .hold-ring {
  grid-area: ring;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px 8px 18px;
  background: var(--id-ink);
  box-shadow: inset 0 0 0 1px var(--id-frame);
  font: 400 13px/1 var(--hold-caps);
  letter-spacing: .24em;
  color: var(--ui-ink);
}
#hold .hold-ring[hidden] { display: none; }
#hold .hold-ring-dial { position: relative; display: grid; place-items: center; width: 56px; height: 56px; }
#hold .hold-ring-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
#hold .hold-ring-track { fill: none; stroke: rgba(169, 120, 66, .3); stroke-width: 2; }
#hold .hold-ring-arc {
  fill: none;
  stroke: var(--ui-gold-a);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 132;
  stroke-dashoffset: calc(132 * (1 - var(--left, 1)));
  transition: stroke-dashoffset 900ms linear;
}
#hold .hold-ring-dial b { font: 700 24px/1 var(--hold-serif); color: var(--ui-ink); font-variant-numeric: tabular-nums; }

/* The room: two team columns, then the chat. The map card sits in the bottom-left
   corner with CHANGE MAP directly under it and the invite box beside it, so the
   roster takes the height above (Dan, 2026-10-06: "the map could be a little
   lower, in the bottom left-hand corner, and the Change Map could be below that"). */
#hold[data-stage="lobby"] .hold-room-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 300px);
  grid-template-areas: "crews crews chat" "map map chat";
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
}
#hold[data-stage="lobby"] .hold-room-left { grid-area: crews; display: block; }
#hold[data-stage="lobby"] .hold-room-mid { grid-area: chat; display: grid; grid-template-rows: minmax(0, 1fr); }
#hold[data-stage="lobby"] .hold-room-right {
  grid-area: map;
  display: grid;
  --lobby-map-w: 280px;
  grid-template-columns: var(--lobby-map-w) minmax(0, 320px);
  grid-template-areas: "card invite" "change invite";
  justify-content: start;
  align-content: end;
  align-self: end;
  gap: 10px 16px;
}
#hold[data-stage="lobby"] .hold-room-right .hold-mapnow { grid-area: card; display: grid; width: 100%; }
#hold[data-stage="lobby"] .hold-room-right #hold-change-map { grid-area: change; justify-self: stretch; }
#hold[data-stage="lobby"] .hold-room-right .hold-invitebox { grid-area: invite; align-self: end; }
#hold[data-stage="lobby"] .hold-room-stage { display: none; }
#hold[data-stage="lobby"] .hold-crews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 16px; align-items: start; }
#hold[data-stage="lobby"] .hold-crew { display: grid; gap: 6px; height: auto; }
#hold[data-stage="lobby"] .hold-crewhead { padding: 0; background: none; }
#hold[data-stage="lobby"] .hold-crew h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  border-left: 0;
  background: var(--id-ink);
  box-shadow: inset 0 0 0 1px var(--id-frame), inset 0 3px 0 var(--ui-cobalt);
  font: 700 clamp(18px, 1.7vw, 24px)/1 var(--hold-serif);
  letter-spacing: .22em;
  color: #9ccbe8;
}
#hold[data-stage="lobby"] .hold-crew.is-theirs h3 { box-shadow: inset 0 0 0 1px var(--id-frame), inset 0 3px 0 var(--ui-vermilion); color: #e8a08f; }
#hold[data-stage="lobby"] .hold-crew h3::before {
  content: "";
  width: 14px;
  height: 14px;
  rotate: 45deg;
  background: var(--ui-cobalt);
  box-shadow: inset 0 0 0 2px var(--id-ink), inset 0 0 0 3px var(--ui-cobalt);
}
#hold[data-stage="lobby"] .hold-crew.is-theirs h3::before { background: var(--ui-vermilion); box-shadow: inset 0 0 0 2px var(--id-ink), inset 0 0 0 3px var(--ui-vermilion); }
#hold[data-stage="lobby"] .hold-crew h3 span { margin-left: auto; font: 400 14px/1 var(--hold-caps); letter-spacing: .14em; color: var(--ui-ink); white-space: nowrap; }
#hold[data-stage="lobby"] .hold-crewstep { grid-template-columns: 36px auto 36px; gap: 4px; padding: 0; }
#hold[data-stage="lobby"] .hold-room .hold-crewstep .hold-chip { min-height: 36px; font-size: 16px; }
#hold[data-stage="lobby"] .hold-seatline:not(.is-open) {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-areas: "head name ready" "head class ready";
  gap: 0 12px;
  min-height: 58px;
  min-width: 0;
  padding: 5px 12px 5px 5px;
  border-left: 0 !important;
  background: var(--id-ink) !important;
  box-shadow: inset 0 0 0 1px var(--id-frame) !important;
}
#hold[data-stage="lobby"] .hold-seatline.is-self:not(.is-open) {
  background: linear-gradient(90deg, rgba(230, 216, 184, .14), var(--id-ink) 70%) !important;
  box-shadow: inset 0 0 0 1px var(--ui-ivory-sel) !important;
}
#hold[data-stage="lobby"] .hold-seatline .hold-seathead { grid-area: head; width: 48px; height: 48px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--id-frame) !important; }
#hold[data-stage="lobby"] .hold-seatline b { grid-area: name; align-self: end; font: 700 16px/1.1 var(--hold-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-ink); }
#hold[data-stage="lobby"] .hold-seatline .hold-hosttag { grid-area: name; justify-self: end; align-self: end; margin-right: 4px; }
#hold[data-stage="lobby"] .hold-seatline .hold-crown { width: 18px; height: 14px; }
#hold[data-stage="lobby"] .hold-seatline .hold-seattail { grid-area: class; justify-content: flex-start; align-self: start; gap: 6px; min-width: 0; }
#hold[data-stage="lobby"] .hold-seatline .hold-seattail .hold-chip { min-height: 32px; padding: 2px 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); background: rgba(255, 255, 255, .06); }
#hold[data-stage="lobby"] .hold-seatline .hold-seattail .hold-chip:first-child { color: var(--ui-ink); }
#hold[data-stage="lobby"] .hold-crewhead { flex-wrap: wrap; }
#hold[data-stage="lobby"] .hold-seatline .hold-seatclass { font: 400 11px/1 var(--hold-caps); letter-spacing: .24em; color: var(--ui-ink); opacity: .75; }
#hold[data-stage="lobby"] .hold-seatline .hold-bottag {
  grid-area: class;
  justify-self: end;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font: 400 11px/1 var(--hold-caps);
  letter-spacing: .16em;
  color: var(--ui-ivory-ink);
  background: var(--ui-ivory-sel);
}
#hold[data-stage="lobby"] .hold-seatline .hold-bottag::before {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(50% 0, 62% 14%, 80% 10%, 84% 28%, 100% 36%, 92% 50%, 100% 64%, 84% 72%, 80% 90%, 62% 86%, 50% 100%, 38% 86%, 20% 90%, 16% 72%, 0 64%, 8% 50%, 0 36%, 16% 28%, 20% 10%, 38% 14%);
}
#hold[data-stage="lobby"] .hold-seatline .hold-seatready {
  grid-area: ready;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 12px/1 var(--hold-caps);
  letter-spacing: .14em;
  color: var(--ui-jade);
}
#hold[data-stage="lobby"] .hold-seatline .hold-seatready .hold-sr { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; text-transform: uppercase; }
#hold[data-stage="lobby"] .hold-seatline .hold-seatready:not(.is-on) { color: var(--ui-vermilion); }
#hold[data-stage="lobby"] .hold-seatline .hold-seatready:not(.is-on)::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; }
#hold[data-stage="lobby"] .hold-seatline .hold-seatready.is-on .hold-rtick { width: 18px; height: 18px; }
#hold[data-stage="lobby"] .hold-seatline .hold-seatready em { font-style: normal; }
#hold[data-stage="lobby"] .hold-seatline .hold-seattail em { display: none; }
#hold[data-stage="lobby"] .hold-seatline.is-open {
  min-height: 64px;
  grid-template-columns: 48px 1fr !important;
  background: rgba(7, 11, 19, .5) !important;
  box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .22) !important;
}
#hold[data-stage="lobby"] .hold-seatline.is-open .hold-seathead { width: 48px; height: 48px; border-radius: 2px; }
/* An open seat is one line: the empty frame, then OPEN SEAT beside it. The
   frame kept the filled seat's `grid-area: head`, a name this grid does not
   define, so the browser made two more columns for it: the label wrapped in
   the first and the frame dropped to a second row at the right, and every
   empty seat stood 82px tall on a phone (polish judge aes-06, 2026-10-08). */
#hold[data-stage="lobby"] .hold-seatline.is-open .hold-seathead { grid-area: auto; }
#hold[data-stage="lobby"] .hold-seatline.is-open span { white-space: nowrap; }
@media (max-width: 640px) {
  #hold[data-stage="lobby"] .hold-seatline.is-open { min-height: 44px; grid-template-columns: 32px 1fr !important; }
  #hold[data-stage="lobby"] .hold-seatline.is-open .hold-seathead { width: 32px; height: 32px; }
}
#hold[data-stage="lobby"] .hold-seatline.is-open span { font: 400 11px/1 var(--hold-caps); letter-spacing: .24em; }
#hold[data-stage="lobby"] .hold-chat { gap: 10px; padding: 14px; background: var(--id-ink); box-shadow: inset 0 0 0 1px var(--id-frame); min-height: 230px; grid-template-rows: auto 1fr auto; }
#hold[data-stage="lobby"] .hold-chat-head h3 { font: 400 12px/1 var(--hold-caps); letter-spacing: .24em; }
#hold[data-stage="lobby"] .hold-chat-head { padding-bottom: 8px; background: linear-gradient(90deg, var(--ui-brass), rgba(169, 120, 66, 0)) bottom left / 100% 1px no-repeat; }
#hold[data-stage="lobby"] .hold-chat-log { height: auto; min-height: 110px; font-size: 14px; }
#hold[data-stage="lobby"] .hold-chat-log li b { font: 700 13px/1.4 var(--hold-serif); letter-spacing: .08em; text-transform: uppercase; }
#hold[data-stage="lobby"] .hold-chat-form input { background: rgba(4, 6, 11, .6); box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .3); font-size: 14px; }
#hold[data-stage="lobby"] .hold-chat-form .hold-chip { color: var(--ui-ink); background: rgba(4, 6, 11, .6); box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .3); }
#hold[data-stage="lobby"] .hold-mapnow { width: min(280px, 100%); background: var(--id-ink); box-shadow: inset 0 0 0 1px var(--ui-brass); }
#hold[data-stage="lobby"] .hold-mapnow img { aspect-ratio: 16 / 8; height: auto; min-height: 0; flex: none; }
#hold[data-stage="lobby"] .hold-mapnow b { font: 700 18px/1 var(--hold-serif); letter-spacing: .24em; color: var(--ui-ink); }
#hold[data-stage="lobby"] .hold-maplayoutmini { display: none; }
#hold[data-stage="lobby"] .hold-room-right .hold-ivory { min-width: 180px; min-height: 48px; }
#hold[data-stage="lobby"] .hold-room-right .hold-ivory b { font: 400 13px/1 var(--hold-caps); letter-spacing: .2em; }
#hold[data-stage="lobby"] .hold-room-right .hold-invitebox { width: min(320px, 100%); }
#hold[data-stage="lobby"] .hold-room-foot { border-top: 0; background: linear-gradient(90deg, rgba(169, 120, 66, 0), var(--ui-brass) 20%, var(--ui-brass) 80%, rgba(169, 120, 66, 0)) top center / 100% 1px no-repeat; }
#hold[data-stage="lobby"] .hold-room-foot .hold-ghost i { font: 400 12px/1 var(--hold-caps); letter-spacing: .2em; }
#hold[data-stage="lobby"] .hold-room-foot .hold-cta b, #hold[data-stage="lobby"] .hold-room-foot #hold-start { font: 700 clamp(20px, 1.9vw, 28px)/1.1 var(--hold-serif); letter-spacing: .18em; text-transform: uppercase; }
#hold[data-stage="lobby"] .hold-room-foot .hold-cta { min-width: 260px; min-height: 60px; }
#hold[data-stage="lobby"] .hold-room-status { font: 400 13px/1.3 var(--hold-body); letter-spacing: .1em; }
/* Change Map is the host's alone (README): a guest sees the card, not the button. */
#hold[data-stage="lobby"] .hold-room.is-guest #hold-change-map { display: none; }

/* ---- 06 results: standings two thirds, Blink training one third ------------------- */
/* The stage starts at its top. #hold centres its one panel, and a panel taller
   than the window centred in a flex column overflows ABOVE the top edge, where
   no scroll can reach: VICTORY and the emblem were cut off on a 720px laptop. */
#hold[data-stage="results"] { justify-content: flex-start; padding-top: clamp(14px, 3vh, 30px); }
#hold .hold-panel.hold-results { width: min(1320px, 100%); }
#hold .hold-panel.hold-results:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  grid-template-areas: "head head" "tallies blink" "again again";
  column-gap: 20px;
  row-gap: 12px;
  justify-items: stretch;
  align-items: start;
}
#hold .hold-panel.hold-results > #hold-outcome, #hold .hold-panel.hold-results > #hold-score { grid-area: head; }
#hold .hold-panel.hold-results > .hold-tallies { grid-area: tallies; }
#hold .hold-panel.hold-results > .hold-blink { grid-area: blink; }
#hold .hold-panel.hold-results > .rd-foot { grid-area: again; }
#hold .hold-results .rd-foot > #rd-again { min-width: 260px; }
#hold .hold-panel.hold-results:has(.hold-blink[hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tallies" "again"; }
#hold .hold-results .rd-results .rd-panels { flex-direction: column; }
/* Results roster (animation judge, round 2; bugs-10, round 3): stacked, the
   two tables ran past a 900px window and the opponents' rows sat under the
   sticky LEAVE / READY bar, which read as one opponent after a 4v4. Side by
   side on any window 900px wide, YOURS left as everywhere else. Round 2 keyed
   this on the Blink card being hidden, but a guest gets the card too (the
   MOSS teaser), so it never applied to the case it was for. */
@media (min-width: 900px) {
  #hold .hold-results .rd-results .rd-panels { flex-direction: row; align-items: flex-start; }
}
/* A short window gives the rows back their spare height (46px faces, 7px
   padding), so 1366x768 clears the bar too. */
@media (min-width: 900px) and (max-height: 960px) {
  #hold .hold-results .rd-panel .rd-icon.is-cast { width: 36px; height: 36px; }
  #hold .hold-results .rd-panel td { padding-top: 4px; padding-bottom: 4px; }
}
/* Without a reel, the Blink card sits in the bar's row, left of LEAVE /
   READY, rather than under the tables where the bar covered it. Only where
   the row has room for it beside the two buttons. */
@media (min-width: 1200px) {
  #hold .hold-panel.hold-results:not(.has-reel):not(.has-story):not([hidden]) { grid-template-areas: "head" "tallies" "again"; }
  #hold .hold-panel.hold-results:not(.has-reel):not(.has-story):not([hidden]) > .hold-blink {
    grid-area: again;
    justify-self: start;
    align-self: center;
    width: min(380px, calc((100% - 540px) / 2));
    position: relative;
    z-index: 4;
  }
}
#hold .hold-results .rd-victor canvas { width: 192px; height: 196px; }
#hold .hold-results .rd-outcome h2 { font: 700 clamp(40px, 4.6vw, 64px)/1 var(--hold-serif); letter-spacing: .14em; }
#hold .hold-results .rd-panel header b { font: 700 20px/1 var(--hold-serif); letter-spacing: .18em; }
#hold .hold-blink {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 18px 20px;
  background: var(--id-ink);
  box-shadow: inset 0 0 0 1px var(--ui-brass);
  color: var(--ui-ink);
}
#hold .hold-blink[hidden] { display: none; }
#hold .hold-blink h3 {
  margin: 0;
  padding-bottom: 10px;
  font: 400 clamp(14px, 1.3vw, 18px)/1 var(--hold-caps);
  letter-spacing: .3em;
  color: var(--ui-ink);
  background: linear-gradient(90deg, rgba(169, 120, 66, 0), var(--ui-gold-a) 50%, rgba(169, 120, 66, 0)) bottom center / 100% 1px no-repeat;
}
/* The emblem: tile C in a frame that follows the tier (the ladder sheet, 11).
   Novice is a thin brass line; Master is double gold with a star. */
#hold .hold-blink-emblem {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1;
  padding: 6px;
  background: var(--ui-well);
  box-shadow: inset 0 0 0 1px var(--ui-hairline);
}
#hold .hold-blink-emblem img { display: block; width: 100%; height: 100%; object-fit: cover; }
#hold .hold-blink-emblem[data-tier="apprentice"] { box-shadow: inset 0 0 0 2px var(--ui-hairline); }
#hold .hold-blink-emblem[data-tier="adept"] { box-shadow: inset 0 0 0 1px var(--ui-gold-a), inset 0 0 0 4px var(--ui-well), inset 0 0 0 5px var(--ui-hairline); }
#hold .hold-blink-emblem[data-tier="expert"] { box-shadow: inset 0 0 0 2px var(--ui-gold-a), inset 0 0 0 5px var(--ui-well), inset 0 0 0 6px var(--ui-gold-b), 0 0 24px rgba(241, 210, 125, .25); }
#hold .hold-blink-emblem[data-tier="master"] { box-shadow: inset 0 0 0 3px var(--ui-gold-a), inset 0 0 0 6px var(--ui-well), inset 0 0 0 7px var(--ui-gold-a), 0 0 34px rgba(241, 210, 125, .45); }
#hold .hold-blink-emblem[data-tier="master"]::after {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 28px;
  height: 28px;
  translate: -50% 0;
  background: var(--ui-gold-a);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 8px rgba(241, 210, 125, .9));
}
#hold .hold-xp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 6px;
}
#hold .hold-xp b {
  min-width: 2ch;
  font: 700 clamp(28px, 2.8vw, 40px)/1 var(--hold-serif);
  color: var(--ui-ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: color 240ms ease, text-shadow 240ms ease;
}
#hold .hold-xp [data-xp-right] { color: var(--ui-gold-a); text-shadow: 0 0 14px rgba(241, 210, 125, .5); }
#hold .hold-xp-track {
  position: relative;
  display: block;
  height: 22px;
  background: rgba(4, 6, 11, .8);
  box-shadow: inset 0 0 0 1px var(--ui-hairline);
  overflow: visible;
}
#hold .hold-xp-track > i {
  display: block;
  height: 100%;
  width: calc(var(--fill, 0) * 100%);
  background: linear-gradient(90deg, var(--ui-gold-b), var(--ui-gold-a) 60%, #fff3c4);
  box-shadow: 0 0 14px rgba(241, 210, 125, .5);
}
/* Gold particles, from the bar and only the bar (README). Eight motes that
   rise from the fill's leading edge while the bar is moving. */
#hold .hold-xp-motes { position: absolute; left: calc(var(--fill, 0) * 100%); bottom: 50%; width: 0; height: 0; pointer-events: none; }
#hold .hold-xp-motes i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ui-gold-a);
  box-shadow: 0 0 6px var(--ui-gold-a);
  opacity: 0;
}
#hold .hold-xp:not(.is-done) .hold-xp-motes i { animation: hold-mote 1100ms ease-out infinite; }
#hold .hold-xp.is-done .hold-xp-motes { display: none; }
#hold .hold-xp-motes i:nth-child(1) { --dx: -22px; animation-delay: 0ms; }
#hold .hold-xp-motes i:nth-child(2) { --dx: 14px; animation-delay: 140ms; }
#hold .hold-xp-motes i:nth-child(3) { --dx: -8px; animation-delay: 280ms; }
#hold .hold-xp-motes i:nth-child(4) { --dx: 26px; animation-delay: 420ms; }
#hold .hold-xp-motes i:nth-child(5) { --dx: -30px; animation-delay: 560ms; }
#hold .hold-xp-motes i:nth-child(6) { --dx: 4px; animation-delay: 700ms; }
#hold .hold-xp-motes i:nth-child(7) { --dx: -16px; animation-delay: 840ms; }
#hold .hold-xp-motes i:nth-child(8) { --dx: 20px; animation-delay: 980ms; }
@keyframes hold-mote {
  0% { opacity: 0; translate: var(--dx) 0; scale: .6; }
  20% { opacity: 1; }
  100% { opacity: 0; translate: var(--dx) -44px; scale: 1; }
}
/* The level-up beat: the right number flares, the whole bar flashes white. */
#hold .hold-xp.is-levelup .hold-xp-track > i { background: #fff7e6; box-shadow: 0 0 28px rgba(255, 247, 230, .9); }
#hold .hold-xp.is-levelup b { color: #fff; text-shadow: 0 0 18px #fff, 0 0 34px var(--ui-gold-a); }
#hold .hold-xp-gain {
  margin: 0;
  font: 700 clamp(20px, 2vw, 28px)/1 var(--hold-serif);
  letter-spacing: .14em;
  color: var(--ui-gold-a);
  text-shadow: 0 0 16px rgba(241, 210, 125, .45);
}
#hold .hold-xp-gain:empty { display: none; }
#hold .hold-xp-unlock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 18px;
  font: 400 12px/1 var(--hold-caps);
  letter-spacing: .18em;
  color: var(--ui-jade);
  background: rgba(10, 43, 45, .5);
  box-shadow: inset 0 0 0 1px var(--ui-jade);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}
#hold .hold-xp-unlock[hidden] { display: none; }
#hold .hold-xp-unlock::before {
  content: "";
  width: 12px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(20% 45%, 20% 25%, 35% 10%, 65% 10%, 80% 25%, 80% 35%, 65% 35%, 65% 28%, 58% 22%, 42% 22%, 35% 28%, 35% 45%, 90% 45%, 90% 100%, 10% 100%, 10% 45%);
}
#hold .hold-results #hold-again { font: 400 13px/1 var(--hold-caps); letter-spacing: .2em; }

/* ---- the deeper menus wear the serif too --------------------------------------------- */
#hold .hold-title { font-family: var(--hold-serif); font-weight: 700; letter-spacing: .12em; }
#hold .hold-menus .hold-row b, #hold .hold-cta b, #hold .hold-card h3, #hold .hold-subtitle,
#hold .hold-room-head h2, #hold .hold-pickcard b, #hold .hold-charplate b, #hold .hold-maps-info h3,
#hold .hold-boardstage h2, #hold .rd-boardstage h2 { font-family: var(--hold-serif); font-weight: 700; }
#hold .hold-pick-head b, #hold #hold-pick .hold-pick-head b, #hold .hold-battle-rules h3, #hold .hold-fill b, #hold .hold-roomcode b, #hold .hold-mapplate b, #hold .hold-mapnow b, #hold .hold-ivory b, #hold .hold-game b { font-family: var(--hold-serif); font-weight: 700; }
#hold .hold-pick-badge, #hold .hold-tab, #hold .hold-segbtn { font-family: var(--hold-body); }

/* ---- lobby-moments: the WATCHING chip, the rail and the moments panel ------------------ */
#hold[data-stage="lobby"] .hold-seatline .hold-seatready.is-watch { color: var(--ui-gold-a, #f1d27d); }
#hold[data-stage="lobby"] .hold-seatline .hold-seatready.is-watch .hold-reye { width: 20px; height: 20px; }
#hold[data-stage="lobby"] .hold-chat-log li.is-note { color: #7fc7e6; font-style: italic; }
#hold[data-stage="lobby"] .hold-chat-log li.is-note i { font-style: italic; }
#hold[data-stage="lobby"] .hold-room-mid:has(.hold-lm-rail:not([hidden])) { grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
#hold .hold-lm-rail { display: grid; gap: 8px; padding: 12px; background: var(--id-ink); box-shadow: inset 0 0 0 1px var(--id-frame); }
#hold .hold-lm-rail[hidden] { display: none; }
#hold .hold-lm-rail h3 { margin: 0; font: 400 12px/1 var(--hold-caps); letter-spacing: .24em; color: var(--ui-ink); }
#hold .hold-lm-posters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#hold .hold-lm-poster {
  position: relative; display: block; padding: 0; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
  border: 0; background: #05070c; box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .45);
}
#hold .hold-lm-poster img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.72); }
#hold .hold-lm-poster b {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px;
  font: 700 11px/1.1 var(--hold-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-ink); text-align: left;
  background: linear-gradient(0deg, rgba(4, 6, 11, .92), rgba(4, 6, 11, 0));
}
#hold .hold-lm-poster em { position: absolute; top: 4px; left: 4px; padding: 2px 5px; font: 600 11px/1 var(--hold-body); letter-spacing: .16em; font-style: normal; color: var(--ui-ivory-ink, #1b140b); background: var(--ui-gold-a, #f1d27d); }
#hold .hold-lm-play { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; translate: -50% -70%; color: var(--ui-ink); opacity: .85; }
#hold .hold-lm-poster:hover img, #hold .hold-lm-poster:focus-visible img { filter: brightness(.95); }
#hold .hold-lm-poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
#hold .hold-lm-poster.is-on::after { box-shadow: inset 0 0 0 2px var(--ui-gold-a, #f1d27d); }
#hold .hold-lm-poster.is-on b { color: var(--ui-gold-a, #f1d27d); }
#hold .hold-lm-poster.is-on img { filter: brightness(1); }
#hold .hold-lm-poster:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
#hold .hold-lm-toggle.is-on { color: var(--ui-gold-a, #f1d27d); box-shadow: inset 0 -2px 0 var(--ui-gold-a, #f1d27d); }
#hold .hold-lm-toggle svg, #hold .rd-lobby-watch svg { width: 18px; height: 18px; }
/* menus-ux-39: the rail's two verbs, under its posters (the footer keeps Back,
   Character and Team). */
#hold .hold-lm-acts { display: flex; gap: 8px; }
#hold .hold-lm-acts:not(:has(> button:not([hidden]))) { display: none; }
#hold .hold-lm-acts .hold-ghost { flex: 1 1 0; min-width: 0; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; }
#hold .hold-lm-acts .hold-ghost[hidden] { display: none; }
#hold .hold-lm-acts .hold-ghost i { font: 400 12px/1 var(--hold-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
@media (pointer: coarse) { #hold .hold-lm-acts .hold-ghost { min-height: 44px; } }
/* A Quick Play host's Start now sits beside READY (the gold) as a small
   outline: one gold per stage. */
#hold[data-stage="lobby"] .hold-room-foot #hold-start.is-quiet {
  min-width: 0; min-height: 48px; padding: 0 14px; white-space: nowrap;
  background: transparent; color: var(--ui-ink); box-shadow: inset 0 0 0 1px var(--ui-brass);
  font: 400 13px/1 var(--hold-caps); letter-spacing: .16em;
}
#hold[data-stage="lobby"] .hold-room-foot #hold-start.is-quiet + #hold-ready:not([hidden]) { margin-left: 0; }
#hold[data-stage="lobby"] .hold-seatline .hold-seatready.is-watch::before { display: none; }
#hold[data-stage="lobby"] .hold-room-foot #hold-start.is-quiet { flex: 0 0 auto; }
#hold[data-stage="lobby"] .hold-room-foot #hold-start.is-quiet:not([hidden]) ~ #hold-ready { min-width: 200px; }
/* The rail is the last match's moments; the tile is the whole shelf. With the
   rail up the tile would say it twice (the panel's MORE MOMENTS reaches the
   shelf), and it was the row that pushed the footer off a laptop screen. */
#hold[data-stage="lobby"] .hold-room-grid:has(.hold-lm-rail:not([hidden])) .hold-moments-tile { display: none; }
@media (min-width: 761px) and (max-width: 1440px) {
  #hold[data-stage="lobby"] .hold-room-foot kbd { display: none; }
  #hold[data-stage="lobby"] .hold-room-foot { gap: 6px; }
}

/* The results theatre after a press: the moment is going to the lobby. */
#hold .rd-theatre-frame[data-carried]::after {
  content: attr(data-carried); position: absolute; top: 14px; left: 50%; translate: -50% 0; z-index: 3; pointer-events: none;
  padding: 6px 12px; font: 400 12px/1 var(--hold-caps); letter-spacing: .2em; white-space: nowrap;
  color: var(--ui-ivory-ink, #1b140b); background: var(--ui-gold-a, #f1d27d);
}
#hold .hold-lm-slot .rd-theatre-frame[data-carried]::after { display: none; }
#hold .hold-lm { display: none; }
#hold[data-stage="lobby"] .hold-lm:not([hidden]) {
  /* Over the roster AND the map row, never taller than both: the room keeps
     its footer on screen while the panel is open. */
  grid-area: 1 / 1 / 3 / 3; z-index: 2; display: grid; overflow: hidden; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-width: 0; min-height: 0;
  padding: 12px 14px 14px; background: rgba(5, 8, 14, .96); box-shadow: inset 0 0 0 1px var(--ui-brass), 0 12px 40px rgba(0, 0, 0, .5);
}
#hold[data-stage="lobby"] .hold-room.is-watching :is(.hold-room-left, .hold-room-right) { visibility: hidden; }
#hold .hold-lm-head { display: flex; align-items: center; gap: 10px; }
#hold .hold-lm-head h3 { margin: 0 auto 0 0; font: 700 clamp(16px, 1.5vw, 22px)/1 var(--hold-serif); letter-spacing: .2em; color: var(--ui-ink); }
#hold .hold-lm-eye { width: 22px; height: 22px; color: var(--ui-gold-a, #f1d27d); }
#hold .hold-lm-head .hold-lm-more { flex: 0 0 auto; min-height: 38px; font: 400 12px/1 var(--hold-caps); letter-spacing: .2em; }
#hold .hold-lm-head .hold-lm-close { min-width: 38px; min-height: 38px; display: grid; place-items: center; }
#hold .hold-lm-head .hold-lm-close svg { width: 16px; height: 16px; }
#hold .hold-lm-slot { min-height: 0; min-width: 0; display: grid; align-content: start; }
#hold .hold-lm-slot .rd-theatre { gap: 8px; }
#hold .hold-lm-slot .rd-theatre .rd-theatre-frame { max-width: min(100%, calc((100vh - 420px) * 16 / 9 + 14px)); }
#hold .hold-lm-slot .rd-theatre-strip, #hold .hold-lm-slot .rd-full { display: none; }
#hold .hold-lm-slot .rd-theatre-row { justify-content: center; }
#hold .hold-lm-wait { margin: 0; font: 400 12px/1 var(--hold-caps); letter-spacing: .2em; color: var(--ui-muted); text-align: center; }
#hold .hold-lm-wait[hidden] { display: none; }

/* ---- short laptops: the room fits on one screen ---------------------------------------- */
@media (min-width: 761px) and (max-height: 800px) {
  #hold[data-stage="lobby"] .hold-room-right { --lobby-map-w: 220px; }
  #hold[data-stage="lobby"] .hold-mapnow figcaption { padding: 5px; }
  #hold[data-stage="lobby"] .hold-seatline:not(.is-open) { min-height: 52px; }
  #hold[data-stage="lobby"] .hold-chat { min-height: 200px; }
  #hold[data-stage="lobby"] .hold-room-foot .hold-cta { min-height: 52px; }
  #hold[data-stage="lobby"] #hold-room-title { font-size: 28px; }
}

/* ---- phones ----------------------------------------------------------------------------- */
@media (max-width: 760px) {
  #hold .hold-lockup.is-flat { --hold-mark-size: 34px; }
  #hold:is([data-stage="signin"], [data-stage="roster"], [data-stage="newchar"], [data-stage="tutorial"], [data-stage="settings"]) {
    justify-content: flex-start;
    padding-top: 92px;
  }
  #hold .hold-idfoot { grid-template-columns: minmax(0, 1fr); }
  #hold .hold-idfoot > .hold-cta { grid-column: 1; justify-self: stretch; order: -1; min-width: 0; }
  #hold .hold-idfoot > .hold-kbd, #hold .hold-signinp .hold-idfoot > .hold-kbd { grid-column: 1; justify-self: center; }
  #hold .hold-rname { gap: 12px; padding: 6px 12px 6px 8px; }
  #hold .hold-rname-words b { font-size: 18px; }
  #hold .hold-rseal-big { width: 80px; height: 80px; }
  #hold .hold-rseal-big::before { inset: 11px; }
  #hold .hold-rseal-big::after { inset: 16px; }
  #hold .hold-rseal-big b { font-size: 32px; }
  #hold .hold-me { position: static; order: -1; margin-bottom: 4px; }
  #hold .hold-mechip { width: 100%; }
  #hold .hold-me-words b { max-width: none; }
  #hold[data-stage="menu"] .hold-menus { width: 100%; padding-left: 0; border-left: 0; }
  #hold[data-stage="menu"] .hold-row::before { display: none; }
  #hold[data-stage="menu"] .hold-row { min-height: 66px; padding-left: 16px; }
  #hold .hold-keys { display: none; }
  #hold .hold-learn { padding: 14px 0; gap: 14px; }
  #hold .hold-learn-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: calc(100% - 20px); }
  #hold .hold-learn-steps .lc { gap: 5px; padding-bottom: 7px; }
  #hold .hold-learn-steps .lc-name { font-size: 11px; letter-spacing: .06em; }
  #hold .hold-learn-steps .lc-n, #hold .hold-learn-steps .lc-tick { width: 18px; height: 18px; font-size: 11px; top: 4px; }
  #hold .hold-learn-steps .lc-n { left: 4px; }
  #hold .hold-learn-steps .lc-tick { right: 4px; padding: 2px; }
  #hold .hold-learn-steps .co-cap { height: 22px; min-width: 22px; padding: 0 5px; font-size: 11px; }
  #hold .hold-learn-steps .co-cap-mouse i { display: none; }
  #hold .hold-learn-steps .co-or { display: none; }
  #hold .hold-learn-steps .lc-keys { min-height: 22px; gap: 3px; }
  #hold[data-stage="lobby"] .hold-room-grid { grid-template-columns: 1fr; grid-template-areas: "crews" "map" "chat"; grid-template-rows: auto; }
  #hold[data-stage="lobby"] .hold-room-right { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "change" "invite"; justify-items: center; }
  #hold[data-stage="lobby"] .hold-room-right .hold-mapnow,
  #hold[data-stage="lobby"] .hold-room-right #hold-change-map { width: min(280px, 100%); justify-self: center; }
  #hold[data-stage="lobby"] .hold-room-right .hold-invitebox { justify-self: stretch; width: auto; }
  #hold[data-stage="lobby"] .hold-crews { grid-template-columns: 1fr; }
  #hold[data-stage="lobby"] .hold-room-head { grid-template-columns: 1fr; grid-template-areas: "mark" "title" "line" "ring"; }
  #hold[data-stage="lobby"] .hold-ring { justify-self: start; }
  #hold[data-stage="lobby"] .hold-chat { min-height: 220px; }
  #hold[data-stage="lobby"] .hold-crew h3 { font-size: 16px; letter-spacing: .14em; gap: 8px; }
  #hold[data-stage="lobby"] .hold-seatline .hold-seatready em,
  #hold[data-stage="lobby"] .hold-seatline .hold-seatready .hold-sr { display: none; }
  #hold[data-stage="lobby"] .hold-seatline .hold-bottag { justify-self: start; }
  #hold[data-stage="lobby"] .hold-seatline .hold-seattail .hold-chip:not(:first-child) { display: none; }
  #hold[data-stage="lobby"] .hold-room-foot .hold-cta { min-width: 0; }
  #hold .hold-panel.hold-results:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "blink" "tallies" "again"; }
  /* lobby-moments: a bottom sheet over the lobby; the roster stays visible
     above it so the WATCHING chip and the chat line still read. */
  #hold[data-stage="lobby"] .hold-lm:not([hidden]) {
    grid-area: auto; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 78vh; overflow-y: auto;
    padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 10px 10px 0 0;
    box-shadow: inset 0 1px 0 var(--ui-brass), 0 -12px 40px rgba(0, 0, 0, .6);
  }
  #hold[data-stage="lobby"] .hold-room.is-watching :is(.hold-room-left, .hold-room-right) { visibility: visible; }
  #hold .hold-lm-head .hold-lm-more { padding: 0 10px; letter-spacing: .12em; }
  #hold .hold-lm-head h3 { font-size: 15px; letter-spacing: .12em; }
  #hold .rd-theatre-frame[data-carried]::after { top: auto; bottom: -10px; padding: 5px 10px; font-size: 11px; }
  #hold .hold-lm-slot .rd-theatre .rd-theatre-frame { max-width: 100%; }
  #hold .hold-lm-slot .rd-theatre-row .rd-share { min-width: 0; flex: 1 1 auto; }
  #hold .hold-lm-posters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #hold .hold-blink-emblem { width: min(100%, 220px); }
}

@media (prefers-reduced-motion: reduce) {
  #hold .hold-glint-at, #hold .hold-starfield b, #hold .hold-xp-motes i { animation: none; }
  #hold .hold-starfield b { opacity: 0; }
  #hold .hold-rname, #hold .hold-rseal::before, #hold .hold-ring-arc { transition: none; }
}

/* fb-glow-front: a hosted room's Start becomes STOP while its countdown runs.
   Never gold: it is the brake, not the thing the stage is for. Same size as the
   Start it replaces, so nothing in the footer moves. */
#hold[data-stage="lobby"] .hold-room-foot #hold-start.is-stop {
  background: var(--ui-stone-2);
  color: var(--ui-ink);
  box-shadow: inset 0 0 0 2px var(--ui-danger);
  text-shadow: none;
}
#hold[data-stage="lobby"] .hold-room-foot #hold-start.is-stop:hover { background: var(--ui-stone-3); }

/* fb-glow-front (Dan, 2026-10-06): "make sure Start is up above the fold."
   START / READY are the room's primary actions, so on a desktop window the room
   is held to the viewport: the roster gives up height before the footer moves.
   And YOUR MOMENTS is secondary: a compact strip in the invite column, beside
   the map card, never a third row under CHANGE MAP that pushes the bar off. */
/* glow-lobby-controls (2026-10-15, "It's been overlapping since yesterday"): the
   roster used to be the part that gave up height (a 0-minimum row), so once the
   map row grew (POST ON X in the invite box, 3b9bee37c; the moments strip and
   its share bar) the map, moments and invite were drawn over the team lists.
   Now the roster never shrinks below its seats; the map row compacts below, and
   a window too short for both scrolls with the footer pinned (lobby-fit.test.mjs). */
@media (min-width: 981px) and (min-height: 600px) {
  #hold[data-stage="lobby"] > .hold-panel.hold-room:not([hidden]) { min-height: 0; max-height: none; }
  #hold[data-stage="lobby"] .hold-room-grid { min-height: min-content; grid-template-rows: minmax(min-content, 1fr) auto; }
  #hold[data-stage="lobby"] .hold-room-left { min-height: min-content; display: flex; flex-direction: column; }
  #hold[data-stage="lobby"] .hold-room-left .hold-crews { flex: 1 0 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  #hold[data-stage="lobby"] .hold-room .hold-crew { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  #hold[data-stage="lobby"] .hold-room .hold-crew .hold-seatline { flex: 1 1 0; }
  #hold[data-stage="lobby"] .hold-seatline.is-open { min-height: 48px; }
  #hold[data-stage="lobby"] .hold-seatline.is-open .hold-seathead { width: 40px; height: 40px; }
  #hold[data-stage="lobby"] .hold-seatline:not(.is-open) { min-height: 54px; }
  #hold[data-stage="lobby"] .hold-room-foot { flex: 0 0 auto; }
}
/* GUARDED (menus-ux-01, judged 2026-10-08). Stated unconditionally, this
   two-column map came after the phone block above at the same specificity and
   won on a phone too: a one-track grid with a two-column map put INVITE
   FRIENDS on top of the map card, and a tap on CHANGE MAP landed on the
   invite box. The phone's own map is in the phone lobby block at the end. */
@media (min-width: 761px) {
  #hold[data-stage="lobby"] .hold-room-right {
    grid-template-areas: "card tile" "card invite" "change invite";
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
}
/* glow-lobby-controls: a wide window puts YOUR MOMENTS in its own column beside
   the invite, so the map row is as tall as the invite box and no taller. */
@media (min-width: 1200px) {
  #hold[data-stage="lobby"] .hold-room-right {
    grid-template-columns: var(--lobby-map-w) minmax(0, 320px) minmax(0, 300px);
    grid-template-areas: "card invite tile" "change invite tile";
    grid-template-rows: minmax(0, 1fr) auto;
  }
  #hold[data-stage="lobby"] .hold-room-right .hold-moments-tile { align-self: end; }
}
/* A short window: the invite box drops its hint line and tightens. */
@media (min-width: 981px) and (max-height: 820px) {
  #hold[data-stage="lobby"] .hold-invitehint { display: none; }
  #hold[data-stage="lobby"] .hold-room-right .hold-invitebox { padding: 10px 12px; gap: 8px; }
  #hold[data-stage="lobby"] .hold-invitebox .hold-copylink { min-height: 40px; }
}
/* Too short for the roster and the map row together (1024x600 with moments; a host's
   SWITCH TO <MAP> and chip rows at 1280x720): the room scrolls and the footer, with START,
   stays on the bottom edge. */
@media (min-width: 981px) and (max-height: 860px) {
  #hold[data-stage="lobby"] .hold-room-foot { position: sticky; bottom: 0; z-index: 2; background-color: var(--id-ink); }
}
#hold[data-stage="lobby"] .hold-room-right .hold-moments-tile {
  grid-area: tile;
  align-self: start;
  display: grid;
  width: min(320px, 100%);
}
#hold[data-stage="lobby"] .hold-room-right .hold-moments-tile[hidden] { display: none; }
/* glow-share-incentive: the poster row is the strip; the share bar docks under it. */
#hold[data-stage="lobby"] .hold-room-right .hold-moments-open {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 4px 12px 4px 4px;
}
#hold[data-stage="lobby"] .hold-room-right .hold-moments-open img { width: 72px; flex: 0 0 72px; }
#hold[data-stage="lobby"] .hold-room-right .hold-moments-tile-cap {
  position: static;
  flex: 1 1 auto;
  padding: 0;
  background: none;
}

/* ---- glow-guest-door: the guest chip, the tag and the dice beside it -------------------
   After the chip's own rules (and the phone rules), so the row holds. */
#hold .hold-me { display: flex; align-items: stretch; gap: 6px; }
#hold .hold-mechip { flex: 1 1 auto; min-width: 0; }
#hold .hold-mechip .glow-guesttag { margin-left: 0; }
#hold .hold-me-roll { flex: none; width: 48px; min-height: 48px; align-self: stretch; }
#hold .hold-me-roll svg { width: 24px; height: 24px; }
#hold .hold-me-roll[hidden] { display: none; }

/* ---- polish-lobby-flows (judged 2026-10-08, menus-ux 02, 03, 08, 11, 13) ------------------
   Concept: worldhopper-art-archive/glow-polish-2026-10-08/concepts/polish-lobby-flows/
   phone-lobby-sticky-bar.png, built here with the door's own tokens. */

/* The moments toggle was a dead MOMENTS button in every fresh lobby: its
   `hidden` lost to `.hold-room-foot .hold-ghost { display: inline-flex }`. */
#hold .hold-lm-toggle[hidden] { display: none; }

/* 11: the host of a hosted room wears HOST in the ready slot, never NOT READY. */
#hold[data-stage="lobby"] .hold-seatline .hold-seatready.is-live { color: var(--ui-muted); }
#hold[data-stage="lobby"] .hold-seatline .hold-seatready.is-live::before { display: none; }
#hold[data-stage="lobby"] .hold-seatline .hold-seatready.is-host { color: var(--ui-brass); }
#hold[data-stage="lobby"] .hold-seatline .hold-seatready.is-host::before { display: none; }
#hold[data-stage="lobby"] .hold-seatline .hold-seatready.is-host .hold-crown { width: 18px; height: 14px; }

/* The phone's labels and glyphs on the footer verbs, and the countdown inside
   READY, exist only on a phone (below). A wide screen keeps its key badges. */
#hold .hold-room-foot .hold-footglyph,
#hold .hold-room-foot .hold-ghost em,
#hold .hold-ready-n,
#hold #hold-start-n { display: none; }

/* 03: the room asked for, until the authority's first frame. */
#hold .hold-room.is-connecting :is(#hold-change-map, #hold-change-char, #hold-side, #hold-invite-row,
  #hold-moments-tile, #hold-start, #hold-ready, #hold-fill, #hold-lm-toggle, #hold-lobby-watch,
  #hold-room-status, #hold-lm-rail),
#hold .hold-room.is-connecting .hold-chat { display: none; }
#hold .hold-connecting {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 180px;
  padding: 24px;
  background: var(--id-ink);
  box-shadow: inset 0 0 0 1px var(--id-frame);
  font: 400 14px/1.3 var(--hold-caps);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ui-ink);
}
#hold .hold-connecting b { font-weight: 400; }
#hold .hold-spin {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(169, 120, 66, .3);
  border-top-color: var(--ui-gold-a);
  animation: hold-spin 900ms linear infinite;
}
@keyframes hold-spin { to { rotate: 360deg; } }

/* 08: stepping into a match already under way. The door drops its painting to
   a dim scrim over the live match, says the one line, holds it while it is
   read, then fades (front-door.js DROP_IN_MS). It takes no pointer, as every
   leaving stage (front.css), and the match's own keys are live under it. */
#hold .hold-dropin { display: none; }
#hold[data-stage="leaving"][data-dropin] {
  background: rgba(4, 6, 11, .5);
  animation: hold-dropin 2600ms linear forwards;
}
#hold[data-dropin] > :not(.hold-leaving):not(#hold-say) { visibility: hidden; }
#hold[data-dropin] .hold-leaving > p { display: none; }
#hold[data-dropin] .hold-dropin {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 18px 28px 20px;
  background: var(--id-ink);
  box-shadow: inset 0 0 0 1px var(--id-frame), inset 0 3px 0 var(--ui-cobalt), 0 18px 50px rgba(4, 6, 11, .6);
  text-align: center;
}
#hold .hold-dropin b { font: 700 20px/1.2 var(--hold-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ui-ink); }
#hold .hold-dropin span { font: 400 15px/1.35 var(--hold-body); letter-spacing: .04em; color: var(--ui-ink); opacity: .86; }
@keyframes hold-dropin { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #hold .hold-spin { animation-duration: 3s; }
  #hold[data-stage="leaving"][data-dropin] { animation: none; }
}

/* ---- 01, 02, 13: the lobby on a phone ----------------------------------------------------
   One screen: a compact head that clears the speaker, both rosters as one-line
   rows, the map as a strip, the invite as one button; the chat scrolls under a
   bar pinned to the bottom edge with the verbs as glyphs, the status, and the
   one gold (with the countdown inside it, since the head's ring is off). */
@media (max-width: 760px) {
  /* 13: the title never runs under the speaker in the corner. */
  #hold[data-stage="lobby"] .hold-room-head { padding-right: 60px; grid-template-areas: "mark" "title" "line"; }
  #hold[data-stage="lobby"] #hold-room-title { font-size: 24px; letter-spacing: .1em; overflow-wrap: anywhere; }
  #hold[data-stage="lobby"] .hold-ring { display: none; }

  /* Both sides on the first screen: one line a seat. */
  #hold[data-stage="lobby"] .hold-crews { gap: 12px; }
  #hold[data-stage="lobby"] .hold-crew { gap: 4px; }
  #hold[data-stage="lobby"] .hold-crewhead { flex-wrap: nowrap; gap: 6px; }
  #hold[data-stage="lobby"] .hold-crew h3 { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 15px; letter-spacing: .1em; }
  #hold[data-stage="lobby"] .hold-crew h3 span { font-size: 13px; letter-spacing: .08em; }
  #hold[data-stage="lobby"] .hold-crewstep { flex: none; grid-template-columns: 44px auto 44px; }
  #hold[data-stage="lobby"] .hold-room .hold-crewstep .hold-chip { min-height: 44px; }
  #hold[data-stage="lobby"] .hold-room .hold-crewstep span { min-width: 52px; font-size: 12px; }
  #hold[data-stage="lobby"] .hold-seatline:not(.is-open) {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 3px 10px 3px 4px;
  }
  #hold[data-stage="lobby"] .hold-seatline:not(.is-open) .hold-seathead { width: 36px; height: 36px; }
  #hold[data-stage="lobby"] .hold-seatline b { flex: 1 1 auto; min-width: 0; align-self: center; font-size: 14px; letter-spacing: .08em; }
  #hold[data-stage="lobby"] .hold-seatline .hold-seattail { order: 1; flex: none; align-self: center; }
  #hold[data-stage="lobby"] .hold-seatline .hold-bottag { order: 2; align-self: center; }
  #hold[data-stage="lobby"] .hold-seatline .hold-hosttag { order: 3; align-self: center; margin: 0; }
  #hold[data-stage="lobby"] .hold-seatline .hold-seatready { order: 4; flex: none; min-width: 22px; justify-content: flex-end; }
  #hold[data-stage="lobby"] .hold-seatline.is-open {
    min-height: 34px;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
    padding: 0 10px;
  }
  #hold[data-stage="lobby"] .hold-seatline.is-open .hold-seathead { display: none; }

  /* 01: the map as a strip, CHANGE MAP beside it; the invite on its own row,
     so nothing lies on top of anything. */
  #hold[data-stage="lobby"] .hold-room-right {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "card change" "tile tile" "invite invite";
    grid-template-rows: auto;
    justify-items: stretch;
    align-items: stretch;
    gap: 8px;
  }
  #hold[data-stage="lobby"] .hold-room-right .hold-mapnow { display: flex; align-items: center; width: auto; justify-self: stretch; }
  #hold[data-stage="lobby"] .hold-mapnow img { flex: none; width: 88px; height: auto; aspect-ratio: 16 / 9; }
  #hold[data-stage="lobby"] .hold-mapnow figcaption { display: grid; justify-items: start; gap: 4px; min-width: 0; padding: 0 12px; }
  #hold[data-stage="lobby"] .hold-mapnow b { font-size: 15px; letter-spacing: .16em; }
  #hold[data-stage="lobby"] .hold-room-right #hold-change-map { width: auto; min-width: 0; min-height: 48px; padding: 0 14px; justify-self: stretch; }
  #hold[data-stage="lobby"] .hold-room-right .hold-ivory b { font-size: 12px; letter-spacing: .14em; white-space: nowrap; }
  #hold[data-stage="lobby"] .hold-room-right #hold-change-map kbd { display: none; }
  #hold[data-stage="lobby"] .hold-room-right .hold-invitebox { position: static; width: auto; padding: 8px; gap: 8px; }
  #hold[data-stage="lobby"] .hold-invitebox h3,
  #hold[data-stage="lobby"] .hold-invitehint { display: none; }

  /* 02: the bar. Pinned to the bottom of the scrolling door, full bleed: the
     door gives up its bottom padding so the bar meets the screen's edge, and a
     short room (the connecting state) still puts it there. */
  #hold[data-stage="lobby"] { padding-bottom: 0; }
  #hold[data-stage="lobby"] > .hold-panel.hold-room:not([hidden]) { flex: 1 0 auto; }
  #hold[data-stage="lobby"] .hold-room-foot {
    position: sticky;
    bottom: 0;
    z-index: 6;
    flex-wrap: wrap;
    gap: 8px 6px;
    margin: auto -16px 0;
    padding: 6px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--ui-stone-1);
    box-shadow: inset 0 1px 0 var(--ui-brass), 0 -12px 28px rgba(4, 6, 11, .7);
  }
  /* Row one: the verbs, glyph over one word. Rows two and three: the status,
     then the actions (a flex line break between them, this ::after). */
  #hold[data-stage="lobby"] .hold-room-foot::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
  #hold[data-stage="lobby"] .hold-room-foot .hold-ghost {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 48px;
    padding: 4px 2px;
    background: transparent;
  }
  #hold[data-stage="lobby"] .hold-room-foot .hold-ghost[hidden] { display: none; }
  #hold[data-stage="lobby"] .hold-room-foot .hold-footglyph,
  #hold[data-stage="lobby"] .hold-room-foot .hold-ghost svg { display: block; width: 20px; height: 20px; }
  #hold[data-stage="lobby"] .hold-room-foot kbd { display: none; }
  #hold[data-stage="lobby"] .hold-room-foot .hold-ghost :is(i, em) {
    display: block;
    font: 400 11px/1.1 var(--hold-caps);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ui-ink);
    text-align: center;
  }
  #hold[data-stage="lobby"] .hold-room-foot :is(#hold-change-char, #hold-side) i { display: none; }
  #hold[data-stage="lobby"] .hold-room-status {
    order: 2;
    flex: 1 1 100%;
    font: 400 11px/1.3 var(--hold-caps);
    letter-spacing: .14em;
    text-align: center;
  }
  #hold[data-stage="lobby"] .hold-room-status:empty { display: none; }
  #hold[data-stage="lobby"] .hold-room-foot :is(.hold-fill, .hold-cta) { order: 3; flex: 1 1 0; min-width: 0; margin: 0; }
  #hold[data-stage="lobby"] .hold-room-foot .hold-cta { min-height: 52px; }
  #hold[data-stage="lobby"] .hold-room-foot .hold-cta b,
  #hold[data-stage="lobby"] .hold-room-foot #hold-start { font-size: 20px; letter-spacing: .14em; }
  #hold[data-stage="lobby"] .hold-room-foot .hold-fill { min-height: 52px; padding: 0 10px; }
  #hold[data-stage="lobby"] .hold-room-foot .hold-fill b { font-size: 14px; }
  #hold[data-stage="lobby"] .hold-room-foot #hold-start.is-quiet { flex: 0 0 auto; min-height: 52px; }
  #hold[data-stage="lobby"] .hold-room-foot #hold-start.is-quiet:not([hidden]) ~ #hold-ready { min-width: 0; }
  #hold[data-stage="lobby"] #hold-ready-n:not([hidden]) { display: inline; margin-left: .4em; font: 700 20px/1.1 var(--hold-serif); letter-spacing: .1em; }
  /* The host's own Stop / Start now already carries the number. */
  #hold[data-stage="lobby"] #hold-start:not([hidden]) ~ #hold-ready #hold-ready-n { display: none; }
  /* menus-ux-19: alone in Quick Play, START NOW is the gold and carries it. */
  #hold[data-stage="lobby"] #hold-start-n { display: inline; }
}

/* audio-09: the four volume sliders under the Sound switch (mixer.js). The
   track and thumb are pause.css's, shared with the pause card. */
/* The slider tracks start on one line (audio judge r4): each row is a subgrid
   of the mix's columns, so the label column is as wide as the widest label
   rather than each row's own (the first output column is wider: the gap
   between the halves). Without subgrid, a 6.6em floor does the same. */
#hold .hold-mix { display: grid; grid-template-columns: 18px max-content minmax(0, 1fr) 48px 18px max-content minmax(0, 1fr) 38px; gap: 6px 8px; padding: 10px 18px 12px; background: var(--id-ink); box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .3); }
#hold .hold-level { grid-column: span 4; display: grid; grid-template-columns: 18px minmax(max-content, 6.6em) 1fr 38px; grid-template-columns: subgrid; align-items: center; gap: 8px; min-height: 36px; font: 700 13px/1 var(--hold-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-ink); }
#hold .hold-level svg { width: 18px; height: 18px; color: var(--ui-brass); }
#hold .hold-level output { font-size: 12px; color: var(--ui-muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 460px) { #hold .hold-mix { grid-template-columns: 18px max-content minmax(0, 1fr) 38px; } }

/* aes-12 residual (round-4 aesthetics judge): the Blink meter's "0" and "1"
   rung numbers meant nothing to a guest. The bar, the XP gain and the unlock
   line carry it; the numbers stay in the markup for front-xp.js. */
#hold .hold-results .hold-xp > [data-xp-left], #hold .hold-results .hold-xp > [data-xp-right] { display: none; }

/* ---- glow-lobby-controls (2026-10-15, all behind default-off flags) ------------------------
   GLOW_ROOM_CONTROL / GLOW_ADMINS: the host's moves on every other seat (move, make host,
   remove), small square chips at the head of the seat's tail; the requests under the map
   card's name and the host's one-press accept; the picker's counts, your own in cyan. */
#hold[data-stage="lobby"] .hold-seatline .hold-seattail .hold-chip.hold-act { display: inline-grid; place-items: center; width: 30px; min-width: 30px; padding: 0; }
#hold[data-stage="lobby"] .hold-seatline .hold-seattail .hold-chip.hold-act svg { width: 14px; height: 14px; }
#hold[data-stage="lobby"] .hold-seatline .hold-seattail .hold-chip.hold-kick:hover { color: var(--ui-danger); }
#hold[data-stage="lobby"] .hold-seatline .hold-seattail .hold-chip.hold-host:hover { color: var(--ui-gold-a); }
#hold .hold-mapnow .hold-mapvotes { font-style: normal; font-size: 11px; letter-spacing: .14em; color: var(--ui-brass-hi); text-align: center; }
#hold .hold-mapnow .hold-mapvotes[hidden] { display: none; }
#hold .hold-mapnow .hold-mapaccept { margin: 0 8px 8px; min-height: 36px; }
#hold .hold-mapnow .hold-mapaccept b { font-size: 12px; letter-spacing: .14em; }
#hold .hold-mapnow .hold-mapaccept[hidden] { display: none; }
#hold .hold-mapplate .hold-mapvote { font-style: normal; font-size: 11px; letter-spacing: .16em; color: var(--ui-brass-hi); }
#hold .hold-mapplate .hold-mapvote.is-mine { color: var(--lobby-cyan, #5fd3df); }

/* ---- glow-lobby-controls: Choose Map above the fold (Dan, 2026-10-16, playtest i1, ~1600x800:
   "I can't actually see or confirm the map because it's below the fold here ... We should make
   sure it gets above the fold so people can easily confirm the map."). The preview was a fixed
   2056:765 frame up to 100vh - 470px tall, so the info card, the cards and CONFIRM MAP fell
   44-50 px under the window at 1280x720 to 1600x800. Now the preview takes what the window has
   left (never under 110 px, never past its own aspect), the layout plan is shorter on short
   windows, and the footer with CONFIRM / SUGGEST stays on the bottom edge if the room still has
   to scroll (1024x600, phone landscape). Pinned by scripts/arena-lobby-fit.spec.mjs. */
@media (min-width: 981px) {
  #hold[data-stage="maps"] > .hold-panel.hold-room:not([hidden]) { flex: 1 1 auto; min-height: 0; max-height: none; }
  #hold[data-stage="maps"] .hold-room .hold-maps-top { flex: 1 1 auto; min-height: min-content; grid-template-rows: minmax(110px, 1fr) auto; }
  #hold[data-stage="maps"] .hold-room .hold-maps-preview { aspect-ratio: auto; height: auto; min-height: 110px; max-height: min(calc(100vh - 470px), calc((100vw - 64px) * 765 / 2056)); }
  #hold[data-stage="maps"] .hold-room-foot { position: sticky; bottom: 0; z-index: 2; }
}
@media (min-width: 981px) and (max-height: 860px) {
  #hold[data-stage="maps"] .hold-room .hold-maplayoutbox .hold-maplayout { max-height: 120px; }
}
@media (max-width: 980px) and (max-height: 500px) {
  #hold[data-stage="lobby"] .hold-room-foot { position: sticky; bottom: 0; z-index: 2; background-color: rgba(7, 11, 19, .97); }
  #hold[data-stage="maps"] .hold-room .hold-maps-preview { aspect-ratio: auto; height: 30vh; max-height: 30vh; }
  #hold[data-stage="maps"] .hold-room-foot { position: sticky; bottom: 0; z-index: 2; background-color: rgba(7, 11, 19, .97); }
}
/* glow-lobby-controls: a row carrying the host's chips grows to them (move, make host and
   remove beside a bot's body, skill and role wrap at 1024 px), so it never runs into the next.
   Only those rows: every other seat keeps the 54 px floor that holds START above the fold. */
@media (min-width: 981px) and (min-height: 600px) {
  #hold[data-stage="lobby"] .hold-room .hold-crew .hold-seatline:not(.is-open):has(.hold-act) { min-height: auto; flex-basis: auto; }
}

/* ---- glow-lobby-controls, last pass: the leave confirmation, + BOT rows, a skill chip that
   reads as a control (GLOW_ROOM_CONTROL only: the markup appears only in a controlled room). */
#hold .hold-leave-ask { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(4, 6, 11, .66); }
#hold .hold-leave-ask[hidden] { display: none; }
#hold .hold-leave-card { display: grid; gap: 14px; width: min(460px, calc(100vw - 32px)); padding: 22px 24px; background: var(--id-ink); box-shadow: inset 0 0 0 1px var(--id-frame), 0 18px 40px rgba(0, 0, 0, .5); }
#hold .hold-leave-card h3 { margin: 0; font: 700 22px/1.1 var(--hold-serif); letter-spacing: .06em; color: var(--ui-ink); }
#hold .hold-leave-card p { margin: 0; font-size: 15px; color: var(--ui-ink); }
#hold .hold-leave-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
#hold .hold-leave-row .hold-cta { min-width: 160px; min-height: 46px; }
#hold .hold-leave-heirs { display: flex; flex-wrap: wrap; gap: 8px; }
#hold .hold-leave-heirs .is-on { box-shadow: inset 0 0 0 1px var(--ui-gold-a); color: var(--ui-gold-a); }
#hold[data-stage="lobby"] .hold-seatline.hold-addbot { width: 100%; appearance: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: var(--ui-brass-hi); background: rgba(198, 168, 91, .08); box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .45); }
#hold[data-stage="lobby"] .hold-seatline.hold-addbot:is(:hover, :focus-visible) { background: rgba(198, 168, 91, .18); }
#hold[data-stage="lobby"] .hold-seatline.hold-addbot span { letter-spacing: .16em; }
#hold[data-stage="lobby"] .hold-seatline .hold-seattail .hold-chip.hold-skill { color: var(--ui-ink); box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .55); border-radius: 999px; padding-right: 18px; position: relative; }
#hold[data-stage="lobby"] .hold-seatline .hold-seattail .hold-chip.hold-skill::after { content: ""; position: absolute; right: 7px; top: 50%; border: 4px solid transparent; border-left-color: currentColor; transform: translateY(-50%); }

/* ---- glow-lobby-controls, last pass: REAL windows (ROUND0.md 1b). A 1912x922 screen at 125% is
   a ~1530x650 browser window; there the map card, CHANGE MAP and the invite box were a 230 px row,
   and the chat input, CHANGE MAP and the sign-in link ended up under the pinned footer. At 860 px
   tall and under (where the footer is pinned) the map row is one strip (picture, name, CHANGE MAP; the invite as one line of
   buttons with YOUR MOMENTS under it), the seats are 44 px, and the room fits above the footer. */
@media (min-width: 981px) and (max-height: 860px) {
  #hold[data-stage="lobby"] .hold-room-right {
    grid-template-columns: minmax(170px, 250px) auto minmax(0, 1fr);
    grid-template-areas: "card change invite" "card change tile";
    grid-template-rows: auto auto;
    align-items: stretch;
    align-content: end;
    gap: 6px 10px;
  }
  #hold[data-stage="lobby"] .hold-room-right .hold-mapnow { display: flex; align-items: center; width: auto; min-height: 0; }
  #hold[data-stage="lobby"] .hold-mapnow img { flex: none; width: 88px; height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  #hold[data-stage="lobby"] .hold-mapnow figcaption { display: grid; justify-items: start; gap: 2px; min-width: 0; padding: 4px 10px; }
  #hold[data-stage="lobby"] .hold-mapnow .hold-maplayoutmini { display: none; }
  #hold[data-stage="lobby"] .hold-mapnow .hold-mapaccept { margin: 0 0 0 auto; min-height: 32px; padding: 0 10px; }
  #hold[data-stage="lobby"] .hold-room-right #hold-change-map { min-height: 0; padding: 0 14px; align-self: stretch; }
  #hold[data-stage="lobby"] .hold-room-right .hold-invitebox { display: flex; flex-wrap: wrap; align-items: center; width: auto; padding: 6px; gap: 6px; align-self: stretch; }
  #hold[data-stage="lobby"] .hold-invitebox h3,
  #hold[data-stage="lobby"] .hold-invitebox .hold-invitehint,
  #hold[data-stage="lobby"] .hold-invitebox .hold-upgrade { display: none; }
  #hold[data-stage="lobby"] .hold-invitebox .hold-copylink { flex: 1 1 140px; min-height: 36px; }
  #hold[data-stage="lobby"] .hold-room-right .hold-moments-tile { width: auto; align-self: stretch; }
  #hold[data-stage="lobby"] .hold-room .hold-crew .hold-seatline:not(.is-open) { min-height: 44px; }
  #hold[data-stage="lobby"] .hold-seatline.is-open { min-height: 40px; }
  #hold[data-stage="lobby"] .hold-seatline:not(.is-open) .hold-seathead { width: 36px; height: 36px; }
  #hold[data-stage="lobby"] .hold-crews { gap: 10px; }
  #hold[data-stage="lobby"] .hold-crew { gap: 4px; }
}
#hold .hold-leave-card .hold-ghost { justify-content: center; min-height: 44px; padding: 0 16px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
#hold .hold-leave-row .hold-cta { font-size: 15px; letter-spacing: .14em; }
/* Narrow desktop windows (under 1280 px): a row carrying the host's chips keeps move, remove and
   the skill chip; body, role and the BOT tag step aside (the remove already says it is a bot), so
   the row stays one line instead of wrapping under its own BOT tag. */
@media (min-width: 981px) and (max-width: 1279px) {
  #hold[data-stage="lobby"] .hold-seatline:has(.hold-act) .hold-chip:is([data-chip="frame"], [data-chip="role"]),
  #hold[data-stage="lobby"] .hold-seatline:has(.hold-act) .hold-bottag { display: none; }
}