/* ---- lobby ----------------------------------------------------------------
   The staging room, the character screen and the map picker
   (docs/art/glow-front-end-2026-10-02 screens 07, 08, 14, 15, 16).

   Same law as front.css, whose tokens it reads and never redefines: moss and
   brass, an 11px type floor, 44px targets, one gold call to action per stage,
   interior structure by background step rather than border. Your side is cold
   blue and theirs warm vermilion, the same "yours / theirs" pair every other
   mark in Glow uses (stones.js #4ea3d6 / #d6704e), and the selected row is
   ivory, as in the concept. Behaviour is front-lobby.js; every class here
   carries the `hold-` prefix like the rest of the door.
   -------------------------------------------------------------------------- */

#hold {
  --lobby-mine: #4ea3d6;
  --lobby-theirs: #d6704e;
  --lobby-ivory: #efe6cf;
  --lobby-ivory-ink: #17130c;
  /* Near-solid: the judges' baseline found the painted backdrop bleeding
     through every panel, so the room reads as UI on a backdrop, not over it. */
  --lobby-ink-panel: rgba(7, 11, 19, .93);
  --lobby-cyan: #5fd3df;
}

.hold-panel.hold-room {
  width: min(1320px, 100%);
  gap: 14px;
}

/* ---- the head: the map's name, big, and the room's one-line facts ------- */
.hold-room-head { display: grid; gap: 2px; }
.hold-room-head h2 {
  margin: 0;
  font: 400 clamp(26px, 3.6vw, 44px)/1.05 var(--hold-display);
  letter-spacing: .06em;
  color: var(--ui-lamp-core);
}
.hold-room-head p {
  margin: 0;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--ui-muted);
}
.hold-room-head p:empty { display: none; }

/* ---- the room: roster and chat | the diorama | the map column ------------ */
.hold-room-grid {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr) minmax(220px, 280px);
  gap: 16px;
  align-items: stretch;
}
.hold-room-left, .hold-room-right { display: grid; gap: 12px; align-content: start; }

.hold-room .hold-crews { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hold-room .hold-crew {
  display: grid;
  gap: 3px;
  padding: 0;
  background: transparent;
}
.hold-room .hold-crew h3 {
  margin: 0;
  padding: 6px 10px;
  font: 400 13px/1.3 var(--hold-body);
  letter-spacing: .18em;
  background: var(--lobby-ink-panel);
  border-left: 3px solid var(--lobby-mine);
  color: #9ccbe8;
}
.hold-room .hold-crew.is-theirs h3 { border-left-color: var(--lobby-theirs); color: #e8a08f; }
.hold-room .hold-crew h3 span { color: var(--ui-muted); letter-spacing: .08em; margin-left: 8px; }

.hold-room .hold-seatline {
  display: grid;
  grid-template-columns: 28px auto auto auto 1fr 22px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 2px 10px;
  background: var(--lobby-ink-panel);
  color: var(--ui-ink);
  font-size: 13px;
}
.hold-room .hold-seatline.is-self { background: var(--lobby-ivory); color: var(--lobby-ivory-ink); }
.hold-room .hold-seatline.is-self .hold-seatclass,
.hold-room .hold-seatline.is-self .hold-seaticon { color: var(--lobby-ivory-ink); }
.hold-room .hold-seatline.is-open { grid-template-columns: 28px 1fr; color: var(--ui-cold-dim); }
.hold-room .hold-seatline b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hold-seaticon { width: 22px; height: 24px; fill: currentColor; color: #9ccbe8; }
.hold-crew.is-theirs .hold-seaticon { color: #e8a08f; }
.hold-hosttag { display: inline-flex; color: var(--ui-brass); }
.hold-crown { width: 16px; height: 12px; }
.hold-bottag {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ui-cold-ink);
}
.hold-seattail { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
.hold-seattail .hold-chip { min-height: 32px; padding: 2px 8px; font-size: 11px; }
.hold-room .hold-seatclass { text-decoration: none; font-size: 11px; letter-spacing: .12em; color: var(--ui-muted); text-transform: uppercase; }
.hold-seattail em { font-style: normal; font-size: 11px; color: var(--ui-cold-ink); }
.hold-seatready { display: inline-flex; justify-content: center; color: var(--lobby-cyan); }
.hold-seatline.is-self .hold-seatready { color: #1f6f7a; }
.hold-rtick { width: 16px; height: 16px; }
.hold-room .hold-step { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; text-align: center; font-size: 12px; color: var(--ui-muted); }

/* ---- the chat ----------------------------------------------------------- */
.hold-chat {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: var(--lobby-ink-panel);
  box-shadow: inset 0 0 0 1px var(--ui-hairline-soft);
}
.hold-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hold-chat-head h3 { margin: 0; font: 400 13px/1 var(--hold-body); letter-spacing: .18em; color: var(--ui-ink); }
.hold-chat-tabs { display: flex; }
.hold-chat-tabs button {
  min-height: 44px;
  min-width: 64px;
  padding: 0 12px;
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ui-muted);
  font: 400 12px/1 var(--hold-body);
  letter-spacing: .16em;
  cursor: pointer;
}
.hold-chat-tabs button.is-on { color: var(--ui-lamp-core); border-bottom-color: var(--ui-brass); }
.hold-chat-log {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 112px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.hold-chat-log li { color: var(--ui-ink); }
.hold-chat-log li b { font-weight: 600; color: #9ccbe8; margin-right: 4px; }
.hold-chat-log li.is-theirs b { color: #e8a08f; }
.hold-chat-log li.is-self b { color: var(--ui-lamp-core); }
.hold-chat-log li.is-team::before { content: "TEAM "; font-size: 11px; letter-spacing: .1em; color: var(--lobby-cyan); }
.hold-chat-log li.is-empty { color: var(--ui-cold-dim); font-size: 12px; }
.hold-chat-form { display: grid; grid-template-columns: 1fr 44px; gap: 6px; }
.hold-chat-form input {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: rgba(255, 255, 255, .055);
  color: var(--ui-ink);
  font: 400 13px/1 var(--hold-body);
}
.hold-chat-form input::placeholder { color: var(--ui-cold-dim); }
.hold-chat-form .hold-chip svg { width: 16px; height: 16px; }

/* ---- the diorama: every seated body, idling on one floor ----------------- */
.hold-room-stage {
  position: relative;
  min-height: 300px;
  background:
    radial-gradient(60% 70% at 50% 92%, rgba(240, 176, 84, .10) 0 40%, transparent 70%),
    linear-gradient(180deg, rgba(16, 23, 34, 0) 0 40%, rgba(16, 23, 34, .55) 100%);
}
#hold-diorama {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* ---- the map column ------------------------------------------------------ */
.hold-mapnow {
  margin: 0;
  background: var(--lobby-ink-panel);
  box-shadow: inset 0 0 0 1px var(--ui-hairline-soft);
}
.hold-mapnow img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; }
.hold-mapnow figcaption { display: grid; justify-items: center; gap: 2px; padding: 8px; }
.hold-mapnow b { font: 400 16px/1 var(--hold-display); letter-spacing: .2em; color: var(--ui-lamp-core); }
.hold-mapnow span { font-size: 11px; letter-spacing: .16em; color: var(--ui-muted); }

/* Ivory, not gold: one gold per stage, and that is Ready or Start. */
.hold-ivory {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  appearance: none;
  border: 0;
  background: var(--lobby-ivory);
  color: var(--lobby-ivory-ink);
  cursor: pointer;
}
.hold-ivory b { font: 400 15px/1 var(--hold-display); letter-spacing: .16em; }
.hold-ivory:hover { background: #fff6e2; }
.hold-room kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border: 1px solid currentColor;
  font: 400 11px/1 var(--hold-body);
  opacity: .8;
}

/* DELETED: this lane's own `.hold-rule`, a centred small-caps label flanked by
   two full-width hairlines. It was written for the lobby's "MORE MAPS COMING"
   and "MORE MAPS ARE ON THE WAY" lines, both of which were removed in the
   lobby's second pass (4db129f9e), so the block matched nothing it owned.
   `.hold-rule` survives in front-menus.css for the one element that still
   carries it (index.html, the private-games hint under JOIN GAME) — and this
   sheet loads AFTER that one at equal specificity, so this block was winning
   every shared property on an element belonging to the other lane: three
   hairlines instead of one, .18em letter-spacing on a 12px hint, and
   `margin: 0` eating its `margin-top: 6px`. A class defined by two lanes is
   decided by link order rather than by ownership; front-lobby.test.mjs now
   fails if either lane redeclares the other's. */
.hold-mapart {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #0b111a;
}
.hold-mapimg {
  position: absolute;
  inset: 0;
  background: #0b111a center / cover no-repeat;
  filter: saturate(.55) brightness(.62);
}
.hold-mapart .hold-maplock { position: relative; }
/* The unrevealed slot is a silhouette in mist, on purpose: an authored skyline
   of arches that could be anywhere, never a picture of a map that does not
   exist yet. */
.is-mist {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%23030509' d='M0 90V52h10V38l6-6 6 6v14h8V44q8-12 16 0v8h6V30l8-10 8 10v22h8V46q8-12 16 0v6h8V36l6-6 6 6v16h8V40l7-8 7 8v12h10v38z'/%3E%3Cpath fill='%23030509' d='M0 90V70h160v20z'/%3E%3Ccircle cx='62' cy='40' r='1.4' fill='%23c6a85b' opacity='.7'/%3E%3Ccircle cx='118' cy='46' r='1.2' fill='%23c6a85b' opacity='.55'/%3E%3C/svg%3E") center bottom / cover no-repeat,
    radial-gradient(60% 45% at 50% 62%, rgba(139, 152, 168, .26), transparent 72%),
    linear-gradient(180deg, #1a2331, #0a0f17 70%) !important;
  filter: none !important;
}

/* ---- the footer: back, the two switches, the status, the one gold ------- */
.hold-room-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-hairline-soft);
}
.hold-room-foot .hold-ghost { display: inline-flex; align-items: center; gap: 8px; }
.hold-room-foot .hold-ghost i { font-style: normal; font-size: 12px; letter-spacing: .12em; }
.hold-room-foot .hold-ghost:disabled { opacity: .4; cursor: default; }
.hold-room-status {
  flex: 1;
  margin: 0;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--ui-brass);
}
.hold-room-foot .hold-cta { min-width: 220px; margin-left: auto; }
.hold-room-foot .hold-cta[hidden] { display: none; }

/* ---- the character screen ------------------------------------------------ */
.hold-chars { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hold-charcard {
  display: grid;
  grid-template-rows: clamp(240px, 39vh, 360px) auto auto auto;
  gap: 0;
  min-height: 44px;
  padding: 0;
  appearance: none;
  border: 0;
  background: var(--lobby-ink-panel);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .22);
  color: var(--ui-ink);
  cursor: pointer;
  text-align: center;
}
.hold-charcard.is-on { box-shadow: inset 0 0 0 2px var(--ui-gold-a), 0 0 0 1px var(--ui-gold-edge); }
.hold-charcard:hover:not(.is-on) { box-shadow: inset 0 0 0 1px var(--ui-brass); }
/* The stage each body stands on: an authored niche of the map, not a blurred
   rectangle. Cold and dim for the body you did not pick; warm, lit and on a
   plinth for the one you did. */
.hold-charstage {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--ui-hairline-soft);
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(86, 168, 216, .10), transparent 70%),
    linear-gradient(180deg, #0b111a, #070b13);
}
.hold-charstage::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  background: url("./art/map-cistern.jpg") 50% 40% / cover no-repeat;
  filter: blur(6px) saturate(.45) brightness(.32) contrast(.85);
}
.hold-charstage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 46%;
  height: 16px;
  translate: -50% 0;
  z-index: -1;
  border-radius: 50%;
  background: rgba(139, 152, 168, .14);
}
.hold-charcard.is-on .hold-charstage {
  background:
    radial-gradient(46% 85% at 50% 100%, rgba(240, 176, 84, .42), transparent 72%),
    radial-gradient(30% 120% at 50% 0%, rgba(255, 243, 222, .10), transparent 70%),
    linear-gradient(180deg, #0b111a, #070b13);
}
.hold-charcard.is-on .hold-charstage::before { filter: blur(6px) saturate(.6) brightness(.42) contrast(.85); }
.hold-charcard.is-on .hold-charstage::after {
  background: radial-gradient(closest-side, rgba(255, 243, 222, .55), rgba(240, 176, 84, .32) 60%, transparent);
  box-shadow: 0 0 22px 4px rgba(240, 176, 84, .25);
}
.hold-charbody { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.hold-charcard:not(.is-on) .hold-charbody { filter: saturate(.55) brightness(.8); }
.hold-charplate {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name tag" "line tag";
  align-items: center;
  gap: 2px 12px;
  padding: 12px 16px 10px;
  text-align: left;
}
.hold-charplate b { grid-area: name; font: 400 26px/1 var(--hold-display); letter-spacing: .12em; color: var(--ui-lamp-core); }
.hold-charplate i { grid-area: line; font-style: normal; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ui-muted); }
.hold-charcard:not(.is-on) .hold-charplate b { color: var(--ui-ink); }
.hold-charpicked, .hold-charpick {
  grid-area: tag;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
}
.hold-charpicked { background: linear-gradient(180deg, var(--ui-gold-a), var(--ui-gold-b)); color: var(--ui-gold-ink); }
.hold-charpick { box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .45); color: var(--ui-brass); }
.hold-charpicked .hold-rtick { width: 14px; height: 14px; }
.hold-charstats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 22px;
  margin: 0 16px;
  padding: 12px 0;
  border-top: 1px solid var(--ui-hairline-soft);
}
.hold-stat { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 10px; text-align: left; }
.hold-stat em { font-style: normal; font-size: 12px; letter-spacing: .12em; color: var(--ui-muted); }
.hold-stat b { font: 400 17px/1 var(--hold-display); color: var(--ui-lamp-core); text-align: right; }
.hold-statbar { display: block; height: 8px; background: rgba(255, 255, 255, .07); }
.hold-statbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ui-brass), var(--ui-lamp)); }
.hold-stat.is-best .hold-statbar i { background: linear-gradient(90deg, var(--ui-lamp), var(--ui-lamp-core)); }
.hold-charcard:not(.is-on) .hold-statbar i { opacity: .6; }

/* ---- the map picker ----------------------------------------------------- */
.hold-maps-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; }
.hold-maps-info {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px 20px;
  background: var(--lobby-ink-panel);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .3);
}
.hold-maps-info h3 { margin: 0; font: 400 clamp(26px, 3vw, 40px)/1 var(--hold-display); letter-spacing: .06em; color: var(--ui-lamp-core); }
.hold-maps-info p { margin: 0; font-size: 15px; color: var(--ui-ink); }
.hold-mapline span { color: var(--ui-muted); }
.hold-mapbadge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 6px 10px;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .16em;
  background: rgba(95, 211, 223, .12);
  color: var(--lobby-cyan) !important;
}
.hold-mapbadge.is-locked { background: rgba(255, 255, 255, .06); color: var(--ui-ink) !important; }
.hold-mapbadge .hold-rtick, .hold-mapbadge .hold-maplock { width: 14px; height: 14px; }
.hold-mapfacts { display: grid; gap: 6px; margin: 0; }
.hold-mapfacts div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; }
.hold-mapfacts dt, .hold-maplayoutbox figcaption { font-size: 12px; letter-spacing: .16em; color: var(--ui-muted); }
.hold-mapfacts dd { margin: 0; font-size: 15px; color: var(--ui-ink); text-wrap: balance; }
.hold-mapfacts div:first-child dd { font: 400 17px/1 var(--hold-display); color: var(--ui-lamp-core); }
.hold-maplayoutbox { display: grid; gap: 6px; margin: 0; }
.hold-maplayoutbox figcaption { display: flex; justify-content: space-between; align-items: center; }
.hold-maplayoutbox figcaption span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; }
.hold-maplayoutbox figcaption i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; }
.hold-maplayoutbox figcaption i.is-mine { background: var(--lobby-mine); }
.hold-maplayoutbox figcaption i.is-theirs { background: var(--lobby-theirs); }
.hold-maplayout { display: block; width: 100%; height: auto; aspect-ratio: 144 / 58; background: #070b13; box-shadow: inset 0 0 0 1px var(--ui-hairline-soft); }
.hold-maplayout .w { fill: #3a4a60; }
.hold-maplayout .v { fill: #1d4c63; }
.hold-maplayout .fa, .hold-maplayout .sa { fill: var(--lobby-mine); }
.hold-maplayout .fb, .hold-maplayout .sb { fill: var(--lobby-theirs); }
.hold-maplayout .sa, .hold-maplayout .sb { opacity: .7; }
.hold-mapnotes { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--ui-ink); }
.hold-mapnotes li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; vertical-align: 2px; background: var(--ui-brass); }
.hold-maps-preview {
  position: relative;
  min-height: clamp(220px, 44vh, 470px);
  background: #0b111a center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .35);
}
.hold-maps-preview.is-locked { filter: saturate(.55) brightness(.6); }
.hold-maps-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 380px); gap: 16px; }
.hold-mapcard {
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: center;
  min-height: 44px;
  padding: 0;
  appearance: none;
  border: 0;
  background: var(--lobby-ink-panel);
  box-shadow: inset 0 0 0 1px var(--ui-hairline-soft);
  color: var(--ui-ink);
  text-align: left;
  cursor: pointer;
}
.hold-mapcard .hold-mapart { aspect-ratio: 16 / 9; }
.hold-mapcard.is-chosen .hold-mapimg { filter: none; }
.hold-mapcard.is-chosen { box-shadow: inset 0 0 0 2px var(--ui-gold-a); }
.hold-mapplate { display: grid; gap: 4px; padding: 8px 14px; }
.hold-mapplate b { display: inline-flex; align-items: center; gap: 8px; font: 400 16px/1 var(--hold-display); letter-spacing: .16em; }
.hold-mapcard.is-chosen .hold-mapplate b { color: var(--ui-lamp-core); }
.hold-mapcard.is-chosen .hold-mapplate .hold-rtick { color: var(--ui-gold-a); }
.hold-mapplate i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 12px; letter-spacing: .16em; color: var(--ui-brass); }
.hold-mapplate i:empty { display: none; }
.hold-mapplate .hold-rtick, .hold-mapplate .hold-maplock { width: 13px; height: 13px; }
.hold-mapcard.is-preview { outline: 2px solid var(--lobby-cyan); outline-offset: 0; }
.hold-mappreview {
  position: absolute;
  top: 0;
  left: 66px;
  translate: -50% 0;
  z-index: 1;
  padding: 2px 10px;
  font-size: 11px;
  letter-spacing: .2em;
  background: var(--ui-stone-0);
  color: var(--lobby-cyan);
}
/* A locked confirm is not a dim gold: it is a dark, muted plate that cannot be
   mistaken for a button you can press (screen 15). */
.hold-go.is-locked:disabled {
  opacity: 1;
  background: rgba(26, 36, 50, .86);
  color: var(--ui-cold-dim);
  box-shadow: inset 0 0 0 1px rgba(139, 152, 168, .25);
}

/* ---- narrow screens: one column, the diorama shorter, nothing scrolls sideways */
@media (max-width: 980px) {
  .hold-room-grid { grid-template-columns: 1fr; }
  .hold-room-stage { min-height: 220px; order: -1; }
  .hold-maps-top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hold-room-foot { flex-wrap: wrap; }
  .hold-room-status { order: -1; flex-basis: 100%; }
  .hold-room-foot .hold-cta { min-width: 0; flex: 1 1 100%; }
  .hold-chars { grid-template-columns: 1fr; }
  .hold-charcard { grid-template-rows: 170px auto auto auto; }
  .hold-charstats { grid-template-columns: 1fr; margin: 0 10px; }
  .hold-stat { grid-template-columns: 84px 1fr 40px; }
  .hold-maps-list { grid-template-columns: 1fr; }
}
/* ---- end lobby ---- */

/* ---- lobby: fitting the room on one screen ------------------------------ */
/* The room stages carry their own small wordmark in the head, as the concept
   does, so the shared lockup steps aside and the room starts at the top. */
#hold:is([data-stage="lobby"], [data-stage="character"], [data-stage="maps"]) { justify-content: flex-start; }
#hold:is([data-stage="lobby"], [data-stage="character"], [data-stage="maps"]) .hold-lockup { display: none; }
.hold-room-mark { font-size: 12px !important; letter-spacing: .24em !important; color: var(--ui-ink) !important; }
.hold-room-mark b { font-weight: 400; color: var(--lobby-cyan); }
.hold-crewhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--lobby-ink-panel);
}
.hold-room .hold-crewhead h3 { flex: 1; background: transparent; }
.hold-room .hold-crewstep { grid-template-columns: 44px auto 44px; gap: 6px; padding-right: 4px; }
.hold-room .hold-seatline.is-self b { color: var(--lobby-ivory-ink); }
.hold-room .hold-seatline { min-height: 44px; }
.hold-chat-log { height: 84px; }
.hold-mapart .hold-maplock { width: 26px; height: 26px; color: var(--lobby-ivory); }
/* The room behind the bodies is the map they are about to play, blurred, dim
   and low in contrast so it recedes (the renderer's rule: recession is bought
   with contrast and chroma, not darkness alone). The painting has small bunnies
   in it; the blur keeps them from competing with the real cast in front. */
.hold-room-mid { display: grid; grid-template-rows: minmax(260px, 1fr) auto; gap: 12px; min-width: 0; }
.hold-room-stage { overflow: hidden; isolation: isolate; background: #0b111a; }
.hold-room-stage::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  background: url("./art/map-cistern.jpg") 50% 45% / cover no-repeat;
  filter: blur(5px) saturate(.6) brightness(.5) contrast(.8);
}
.hold-room-foot .hold-ghost { flex: 0 0 auto; }
.hold-room-mid { grid-template-rows: minmax(240px, 1fr) auto; }

/* The class kit on the character screen: ability glyphs under the stats, and
   the weapon chips below the card (outside its button). See front.css for the
   chip itself, which the battle picker shares. */
.hold-charcol { display: grid; grid-template-rows: 1fr auto; gap: 8px; min-width: 0; }
.hold-charkit { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.hold-charkit i { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 11px; letter-spacing: .12em; color: var(--ui-lamp-core); }
.hold-charkit i .gl { width: 22px; height: 22px; color: var(--ui-lamp); }
.hold-charkit b { font-weight: 400; }
.hold-chararms { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
#hold-chars .hold-pick-arm { padding: 3px 9px; letter-spacing: .1em; }
#hold-chars .hold-pick-arm .gl { width: 18px; height: 18px; }

/* ---- lobby: the judged pass (2026-10-03) ----------------------------------
   research/glow-judging-2026-10-02/baseline/judge/screens/lobby.json: a raw
   invite address, an empty blurred stage, a sans Start, and backdrop art
   bleeding through. The answers, in the order the room is read. */

/* The stage is framed: a brass hairline and a vignette ABOVE the canvas, so the
   blurred room behind the crew reads as a lit set, not a placeholder box. */
.hold-room-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .35), inset 0 0 70px 24px rgba(4, 6, 11, .7);
}
#hold-diorama { z-index: 0; }

/* Start is a word in the display face like every other gold, even though
   front-door.js writes it as the button's text rather than into a <b>. */
.hold-room-foot #hold-start {
  font: 400 18px/1.15 var(--hold-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* The invite box: title, the code when there is one, one copy button. */
.hold-invitebox {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: var(--lobby-ink-panel);
  box-shadow: inset 0 0 0 1px var(--ui-hairline-soft);
}
.hold-invitebox[hidden] { display: none; }
.hold-invitebox h3 { margin: 0; font: 600 13px/1 var(--hold-body); letter-spacing: .18em; color: var(--ui-ink); }
.hold-room .hold-roomcode { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; }
.hold-room .hold-roomcode[hidden] { display: none; }
.hold-room .hold-roomcode span { font-size: 12px; letter-spacing: .16em; color: var(--ui-muted); }
.hold-room .hold-roomcode b { font: 400 22px/1 var(--hold-display); letter-spacing: .18em; color: var(--ui-lamp-core); }
.hold-copylink {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  appearance: none;
  border: 0;
  background: rgba(198, 168, 91, .1);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .55);
  color: var(--ui-brass-hi);
  cursor: pointer;
}
.hold-copylink:hover { background: rgba(198, 168, 91, .2); }
.hold-copylink svg { width: 16px; height: 16px; }
.hold-copylink b { font: 600 13px/1 var(--hold-body); letter-spacing: .16em; }
/* fox-live-links: POST ON X (GLOW_ROOM_SHARE), a link drawn as the copy button. */
a.hold-copylink { text-decoration: none; }
.hold-copylink[hidden] { display: none; }
.hold-invitehint { margin: 0; font-size: 12px; color: var(--ui-muted); text-align: center; }

/* The roster: headers and bot counts at a size that reads at arm's length. */
.hold-room .hold-crew h3 { font: 600 14px/1.3 var(--hold-body); }
.hold-room .hold-step span { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-ink); }
.hold-room .hold-seatline { font-size: 14px; }
.hold-room .hold-seatline.is-open span { font-size: 13px; letter-spacing: .06em; }
.hold-room-head p { font-size: 13px; }
.hold-chat-head h3 { font-weight: 600; }
.hold-chat-log li.is-empty { font-size: 13px; }

/* ---- lobby: the second judged pass (2026-10-03) ---------------------------
   research/glow-judging-2026-10-02/frontdoor/judge/screens: the painting
   competing behind the interior screens, a live-looking Start that could not
   start, glossary and weapon chips floating outside their cards. */

/* The painted plate steps back on the three room screens: blurred, darkened,
   desaturated. It stays the place, it stops being a second picture. */
#hold:is([data-stage="lobby"], [data-stage="character"], [data-stage="maps"]) .hold-plate {
  filter: blur(7px) brightness(.34) saturate(.55);
  transform: scale(1.04);
}
/* kilnrow-polish: a room's own plate still on its way (front-door.js
   setPlate). The title painting it replaces is another map, so the plate is
   blank until its own picture has loaded, then comes up. */
#hold .hold-plate.is-plate-wait { visibility: hidden; }
#hold .hold-plate:not(.is-plate-wait)[src*="map-kilnrow"] { animation: hold-plate-in .4s ease-out; }
@keyframes hold-plate-in { from { opacity: 0; } }
/* kilnrow-preview: Kilnrow's key art is a fire-lit dusk painting, far more
   saturated than the Cistern's moonlit one, and at the shared dim its orange
   glow fought the roster and chat (real-client judge, 2026-10-15). Room
   screens (front-identity.css: brightness .62, saturate .85 for every plate)
   and results dim it further; the Choose Map preview itself stays full. */
#hold:is([data-stage="lobby"], [data-stage="character"], [data-stage="maps"]) .hold-plate[src*="map-kilnrow-key"] {
  filter: brightness(.46) saturate(.6);
}
#hold[data-stage="results"] .hold-plate[src*="map-kilnrow-key"] { filter: blur(6px) brightness(.3) saturate(.45); }

/* Footer verbs: one casing, one size, readable. */
.hold-room-foot .hold-ghost i { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ui-ink); }
.hold-room-foot kbd { min-width: 28px; height: 24px; font-size: 12px; color: var(--ui-ink); opacity: 1; }

/* Start, disabled: a dark plate, not a dim gold, until both sides have a body. */
.hold-room-foot #hold-start:disabled {
  opacity: 1;
  background: rgba(26, 36, 50, .92);
  color: var(--ui-cold-dim);
  box-shadow: inset 0 0 0 1px rgba(139, 152, 168, .3);
  cursor: default;
}
/* The host's one tap to a startable room: brass, secondary, beside Start. */
.hold-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 20px;
  appearance: none;
  border: 0;
  background: rgba(198, 168, 91, .14);
  box-shadow: inset 0 0 0 2px var(--ui-brass);
  color: var(--ui-brass-hi);
  cursor: pointer;
}
.hold-fill[hidden] { display: none; }
.hold-fill:hover { background: rgba(198, 168, 91, .26); }
.hold-fill b { font: 400 16px/1 var(--hold-display); letter-spacing: .1em; }
.hold-room-status { color: var(--ui-ink); }

/* Your own row: a lamp-lit bar, not a cream slab louder than everything else. */
.hold-room .hold-seatline.is-self {
  background: linear-gradient(90deg, rgba(240, 176, 84, .2), rgba(7, 11, 19, .93) 70%);
  box-shadow: inset 3px 0 0 var(--ui-lamp);
  color: var(--ui-lamp-core);
}
.hold-room .hold-seatline.is-self b,
.hold-room .hold-seatline.is-self .hold-seatclass,
.hold-room .hold-seatline.is-self .hold-seaticon { color: var(--ui-lamp-core); }
.hold-room .hold-seatline.is-self .hold-seatready { color: var(--lobby-cyan); }
.hold-room .hold-seatclass { font-size: 12px; }
/* An open seat: a faint body that could stand there, not a radio button. */
.hold-room .hold-seatline.is-open .hold-seaticon.is-ghost { opacity: .4; }
.hold-chat-log li.is-empty { padding-top: 10px; text-align: center; color: var(--ui-muted); }
.hold-room .hold-seatline.is-open span { font-size: 12px; letter-spacing: .16em; color: var(--ui-cold-ink); }
.hold-room .hold-seatline.is-open { background: rgba(7, 11, 19, .8); }

/* Character select: the column is the card. The weapon chips sit inside its
   frame, the selected weapon is gold only on the selected bunny. */
.hold-charcol {
  gap: 0;
  padding-bottom: 12px;
  background: var(--lobby-ink-panel);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .22);
}
.hold-charcol.is-on { box-shadow: inset 0 0 0 2px var(--ui-gold-a), 0 0 0 1px var(--ui-gold-edge); }
.hold-charcard, .hold-charcard.is-on, .hold-charcard:hover:not(.is-on) { background: transparent; box-shadow: none; }
.hold-charcol:hover:not(.is-on) { box-shadow: inset 0 0 0 1px var(--ui-brass); }
.hold-charkit { padding: 2px 16px 10px; }
#hold-chars .hold-pick-arm { min-height: 36px; padding: 4px 12px; font-size: 12px; }
#hold-chars .hold-charcol:not(.is-on) .hold-pick-arm.is-on {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .45);
  color: var(--ui-ink);
}
/* Guarded, so the narrow block above still wins on a phone: a 150px label
   column on a 343px card leaves the bar almost no room. */
@media (min-width: 641px) {
  .hold-stat { grid-template-columns: 150px 1fr 44px; }
}
.hold-stat em { display: grid; gap: 1px; }
.hold-stat em small { font-size: 11px; letter-spacing: .02em; text-transform: none; color: var(--ui-cold-ink); }
.hold-charplate b { font-size: 28px; }

/* Map picker: tiles on the same grid as the preview and its card. */
.hold-mapcard { grid-template-columns: 148px 1fr; }
/* ---- end lobby: the judged pass ---- */

/* ---- lobby: the third judged pass (2026-10-03) ----------------------------
   research/glow-judging-2026-10-02/frontdoor2/judge/screens: an empty band
   under every room screen, a Change Map louder than the next step, a disabled
   Start that read as broken, two cards lit and barred differently. */

/* The three room screens fill the window: the content grows, the footer sits on
   the bottom edge. Desktop only; a phone scrolls as before. */
@media (min-width: 981px) and (min-height: 700px) {
  #hold:is([data-stage="lobby"], [data-stage="character"], [data-stage="maps"]) > .hold-panel.hold-room:not([hidden]) {
    flex: 1 1 auto;
  }
  .hold-room .hold-room-grid, .hold-room .hold-chars, .hold-room .hold-maps-top { flex: 1 1 auto; min-height: 0; }
  /* Lobby: every column runs to the footer. */
  .hold-room-left { display: flex; flex-direction: column; }
  .hold-room .hold-room-left .hold-crews { flex: 1 1 auto; }
  .hold-room .hold-crews { grid-template-rows: 1fr 1fr; }
  .hold-room .hold-crews { align-items: stretch; }
  .hold-room .hold-crew { display: flex; flex-direction: column; align-self: stretch; height: 100%; }
  .hold-room .hold-crew .hold-seatline { flex: 1 1 44px; }
  .hold-room-mid { grid-template-rows: minmax(260px, 1.15fr) minmax(170px, 1fr); }
  .hold-chat { grid-template-rows: auto 1fr auto; }
  .hold-chat-log { height: auto; min-height: 60px; }
  .hold-room-right { display: flex; flex-direction: column; }
  .hold-mapnow { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .hold-mapnow img { flex: 1 1 auto; min-height: 140px; height: 0; aspect-ratio: auto; }
  /* Character select: the cards and their stages take the height. */
  .hold-charcol { grid-template-rows: 1fr auto; }
  .hold-charcard { grid-template-rows: minmax(240px, 1fr) auto auto auto; height: 100%; }
  /* Map picker: the preview takes the height. */
  .hold-maps-preview { min-height: 0; }
  /* The info card's spare height goes to the layout, not to empty space. */
  .hold-maps-info { grid-template-rows: auto auto auto auto minmax(150px, 1fr) auto; }
  .hold-maplayoutbox { grid-template-rows: auto minmax(0, 1fr); }
  .hold-maplayout { height: 100%; aspect-ratio: auto; }
}

/* ---- the lobby's calls to action, in order of weight ---- */
/* Fill with bots is gold while it is the next step (Start cannot start yet). */
.hold-fill.is-primary {
  background: linear-gradient(180deg, var(--ui-gold-a), var(--ui-gold-b));
  box-shadow: inset 0 0 0 1px var(--ui-gold-edge);
  color: var(--ui-gold-ink);
}
.hold-fill.is-primary:hover { background: linear-gradient(180deg, #f7dd92, #d4a24f); }
.hold-fill { min-width: 220px; }
/* Start, locked: an outlined plate with a lock, not a dark slab. */
.hold-room-foot #hold-start:disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(7, 11, 19, .7);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .45);
  color: rgba(242, 230, 189, .62);
}
.hold-room-foot #hold-start:disabled::before {
  content: "";
  width: 14px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M4 8V5.5a4 4 0 0 1 8 0V8' fill='none' stroke='%23c6a85b' stroke-width='2'/%3E%3Crect x='2' y='8' width='12' height='9' fill='%23c6a85b'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Change Map steps back to an outline: it is a setting, not the next step. */
.hold-room .hold-ivory {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(239, 230, 207, .55);
  color: var(--lobby-ivory);
}
.hold-room .hold-ivory:hover { background: rgba(239, 230, 207, .08); }
.hold-room .hold-ivory kbd { color: var(--lobby-ivory); }

/* Bot steppers: glyphs you can read. */
.hold-room .hold-crewstep .hold-chip {
  font: 600 20px/1 var(--hold-body);
  color: var(--ui-ink);
  background: rgba(255, 255, 255, .07);
}
.hold-room .hold-crewstep span { min-width: 72px; }

/* Open seats: a quiet outline, and for the host a one-tap + BOT. */
.hold-room .hold-seatline.is-open {
  grid-template-columns: 28px 1fr auto;
  background: rgba(7, 11, 19, .62);
  box-shadow: inset 0 0 0 1px rgba(139, 152, 168, .14);
}
.hold-room .hold-seatline.is-open:nth-child(odd) { background: rgba(7, 11, 19, .78); }
.hold-room .hold-addbot {
  min-height: 30px;
  padding: 2px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ui-brass-hi);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .4);
}
.hold-room .hold-addbot:hover { background: rgba(198, 168, 91, .14); }

/* ---- character select: two equally finished cards ---- */
/* Selection is the border, the badge and a slight dim, nothing else: the same
   stage light, the same bars, the same scale on both. */
.hold-charcol { box-shadow: inset 0 0 0 1px rgba(139, 152, 168, .26); }
.hold-charcol:hover:not(.is-on) { box-shadow: inset 0 0 0 1px rgba(139, 152, 168, .55); }
.hold-charcard .hold-charstage,
.hold-charcard.is-on .hold-charstage {
  background:
    radial-gradient(46% 85% at 50% 100%, rgba(240, 176, 84, .34), transparent 72%),
    radial-gradient(30% 120% at 50% 0%, rgba(255, 243, 222, .08), transparent 70%),
    linear-gradient(180deg, #0b111a, #070b13);
}
.hold-charcard .hold-charstage::before,
.hold-charcard.is-on .hold-charstage::before { filter: blur(6px) saturate(.55) brightness(.38) contrast(.85); }
.hold-charcard .hold-charstage::after,
.hold-charcard.is-on .hold-charstage::after {
  background: radial-gradient(closest-side, rgba(255, 243, 222, .45), rgba(240, 176, 84, .26) 60%, transparent);
  box-shadow: 0 0 18px 3px rgba(240, 176, 84, .18);
}
.hold-charcard:not(.is-on) .hold-charbody { filter: brightness(.86) saturate(.85); }
.hold-statbar i,
.hold-stat.is-best .hold-statbar i,
.hold-charcard:not(.is-on) .hold-statbar i {
  opacity: 1;
  background: linear-gradient(90deg, var(--ui-brass), var(--ui-lamp));
}
.hold-stat em small { font-size: 12px; color: var(--ui-muted); }
.hold-charkit i { font-size: 12px; }
.hold-charkit small { font-size: 12px; letter-spacing: .04em; text-transform: none; color: var(--ui-muted); }
.hold-charkit small::before { content: "\00B7"; margin: 0 5px 0 1px; }
#hold-chars .hold-pick-arm { min-height: 40px; padding: 4px 14px; font-size: 13px; }
#hold-chars .hold-pick-arm .gl { width: 22px; height: 22px; }

/* ---- map picker: one grid of thirds ---- */
/* Preview two thirds, card one third, tiles three equal thirds below: every
   edge lines up and every tile is the same width.
   BOTH ARE GUARDED BY THE SAME BREAKPOINTS THE NARROW BLOCK ABOVE USES. Stated
   unconditionally, these two lines sit later in the file at equal specificity
   and quietly won at every width, which killed the phone layout: on a 375px
   screen the big preview became a 138px sliver beside a 189px column that wrapped
   every value onto four lines. */
@media (min-width: 981px) {
  .hold-maps-top { grid-template-columns: 2fr 1fr; }
}
@media (min-width: 641px) {
  .hold-maps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hold-mapfacts div:first-child dd { font: 400 15px/1.3 var(--hold-body); color: var(--ui-ink); }
.hold-maplayoutbox figcaption span { font-size: 12px; color: var(--ui-ink); }
.hold-maplayoutbox figcaption i { width: 10px; height: 10px; }
/* ---- end lobby: the third judged pass ---- */

/* ---- lobby: the fourth judged pass (2026-10-03) ----------------------------
   research/glow-judging-2026-10-02/round1/judge/screens: lobby, character
   select, map picker. Brighter rows and real heads, one bot control per side,
   bodies that fill their stages, and a picker that does not showcase locks. */

/* -- lobby: the roster reads at arm's length ---------------------------------- */
.hold-room .hold-crew h3 { font-size: 15px; color: var(--ui-ink); }
.hold-room .hold-seatline { font-size: 15px; color: var(--ui-ink); }
.hold-room .hold-seatline b { color: var(--ui-ink); font-weight: 600; }
.hold-room .hold-seatclass { font-size: 13px; color: var(--ui-ink); opacity: .82; }
.hold-room .hold-seatline:not(.is-open):not(.is-self) { background: rgba(16, 23, 34, .94); box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .16); }
.hold-room .hold-crew.is-mine .hold-seatline:not(.is-open) { border-left: 3px solid var(--lobby-mine); }
.hold-room .hold-crew.is-theirs .hold-seatline:not(.is-open) { border-left: 3px solid var(--lobby-theirs); }
.hold-room .hold-seatline.is-open { grid-template-columns: 40px 1fr; }
.hold-room .hold-seatline.is-open span { font-size: 13px; color: var(--ui-muted); }
/* The head: the same painted face the roster shows (scripts/arena-face-icons.mjs),
   dyed to the side it is seen from. Not `pixelated`: it is a painting, not a
   sprite, and 92px into 40px is not an integer ratio -- see the long note in
   rounds.css, which is where that choice is argued. The ring is 3px for the
   measured reason recorded there too. */
.hold-seathead {
  display: block; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background-color: #0b111a; background-repeat: no-repeat; background-size: cover;
  image-rendering: auto;
  box-shadow: inset 0 0 0 2px rgba(198, 168, 91, .35);
}
.hold-crew.is-mine .hold-seathead:not(.is-empty) { box-shadow: 0 0 0 3px var(--lobby-mine); }
.hold-crew.is-theirs .hold-seathead:not(.is-empty) { box-shadow: 0 0 0 3px var(--lobby-theirs); }
.hold-seathead.is-empty { background: transparent; box-shadow: inset 0 0 0 1px rgba(139, 152, 168, .45); }

/* -- lobby: the stage gets the room, the empty chat gives it back -------------- */
@media (min-width: 981px) and (min-height: 700px) {
  .hold-room-mid { grid-template-rows: minmax(300px, 1.7fr) minmax(150px, 1fr); }
}
.hold-room-stage::before { filter: blur(4px) saturate(.75) brightness(.62) contrast(.9); }

/* -- lobby: the map column is the map: a landscape picture and its plan ------- */
@media (min-width: 981px) and (min-height: 700px) {
  .hold-mapnow img { flex: none; height: auto; aspect-ratio: 16 / 10; min-height: 0; object-fit: cover; }
}
.hold-maplayoutmini { padding: 10px 12px 12px; border-top: 1px solid var(--ui-hairline-soft); }
.hold-maplayoutmini:empty { display: none; }
.hold-maplayoutmini svg { display: block; width: 100%; height: auto; }

/* -- character select: bodies fill their stages, every bar has a track -------- */
.hold-statbar { height: 10px; background: rgba(139, 152, 168, .22); box-shadow: inset 0 0 0 1px rgba(139, 152, 168, .3); }
.hold-stat { row-gap: 2px; padding: 3px 0; }
.hold-stat em small { font-size: 12px; line-height: 1.25; }
.hold-charpick { min-height: 36px; padding: 0 18px; box-shadow: inset 0 0 0 2px var(--ui-brass); color: var(--ui-brass-hi); font-weight: 700; }
.hold-charcol:hover .hold-charpick { background: rgba(198, 168, 91, .16); }
.hold-charkit i { font-size: 13px; color: var(--ui-ink); }
.hold-charkit small { font-size: 13px; color: var(--ui-ink); opacity: .78; }
/* An unchosen weapon is a button you can press, not a disabled one. */
#hold-chars .hold-pick-arm:not(.is-on) { color: var(--ui-ink); background: rgba(16, 23, 34, .9); box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .5); opacity: 1; }
#hold-chars .hold-pick-arm:not(.is-on):hover { background: rgba(198, 168, 91, .14); }

/* -- map picker: one playable map is the map and a Confirm, not a picker ------ */
.hold-room.is-single-map .hold-maps-list[hidden] { display: none; }
.hold-maps-preview { background-position: 50% 58%; }
/* The plan is drawn at its own aspect, never letterboxed in a stretched box. */
.hold-maplayoutmini .hold-maplayout,
.hold-maplayoutbox .hold-maplayout { height: auto; aspect-ratio: 144 / 58; }
@media (min-width: 981px) and (min-height: 700px) {
  .hold-maps-info { grid-template-rows: auto auto auto auto auto 1fr; }
  .hold-maplayoutbox { grid-template-rows: auto auto; align-content: start; }
}
/* The head is wider than the old 28px silhouette: the column grows with it. */
.hold-room .hold-seatline:not(.is-open) { grid-template-columns: 40px auto auto auto 1fr 22px; }
/* A square picture of the map: the old column stretched it into a portrait
   sliver of a landscape level. */
@media (min-width: 981px) and (min-height: 700px) {
  .hold-mapnow img { aspect-ratio: 1 / 1; }
}
/* The notes stack at the top of their row, not spread down the card. */
.hold-mapnotes { align-content: start; gap: 10px; }
/* The preview is cropped past the plate's corner foliage. */
.hold-maps-preview { background-size: auto 118%; background-position: 50% 80%; }
/* ---- end lobby: the fourth judged pass ---- */
/* One map open: the note that says so sits at the foot of its card. */
.hold-maponly { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--ui-hairline-soft); font-size: 14px; color: var(--ui-ink); }

/* ---- Choose Map: the whole painting, sharp (Dan, 2026-10-05) ----------------
   "This cistern could be rendered better." The preview was the 760 px card art
   blown up to 118% of a near-square box: a 3.5x smear of the middle third of a
   panorama. It is now the 1600 px plate (LOBBY_MAPS `plate`), shown whole at
   the painting's own 2056:765 across the stage in a thin brass frame, with the
   map's card laid out under it in three columns (docs/art/glow-front-end-
   2026-10-02/images/14-map-selection.png). Phones keep the stacked column. */
.hold-room .hold-maps-preview {
  aspect-ratio: 2056 / 765;
  min-height: 0;
  background-color: #0b111a;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .55), 0 10px 30px rgba(4, 6, 11, .55);
}
.hold-room .hold-maps-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .55), inset 0 0 0 5px rgba(7, 11, 19, .55), inset 0 0 0 6px rgba(198, 168, 91, .22);
}
@media (min-width: 981px) {
  .hold-room .hold-maps-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; }
  /* Never taller than the window allows: past that the frame crops the sides
     a little rather than push the footer off the screen. */
  .hold-room .hold-maps-preview { max-height: calc(100vh - 470px); min-height: 240px; width: 100%; }
  .hold-room .hold-maps-info {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 400px) minmax(220px, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 28px;
    align-content: start;
  }
  .hold-room .hold-maps-info > * { grid-column: 1; }
  .hold-room .hold-maps-info > .hold-mapfacts { align-content: start; }
  .hold-room .hold-maps-info > .hold-maplayoutbox { grid-column: 2; grid-row: 1 / -1; align-self: start; }
  .hold-room .hold-maps-info > .hold-mapnotes { grid-column: 3; grid-row: 1 / 4; }
  .hold-room .hold-maps-info > .hold-maponly { grid-column: 3; grid-row: 4; margin: 0; align-self: end; }
  .hold-room .hold-maplayoutbox .hold-maplayout { height: auto; aspect-ratio: 144 / 58; }
}

/* ---- the Glow campaign prize: Kulnet perched beside its owner's name (2026-10-06) ----
   One promoted PixelLab idle loop (east facing) as a horizontal strip, stepped frame by frame.
   80px art drawn at 30px: pixelated, never smoothed. No shadow (Dan's standing rule). */
.hold-room .hold-kulnet {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: -8px 0 -6px 6px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: calc(30px * var(--kn-frames, 8)) 30px;
  image-rendering: pixelated;
  animation: hold-kulnet-idle 1.2s steps(var(--kn-frames, 8)) infinite;
}
@keyframes hold-kulnet-idle {
  from { background-position: 0 0; }
  to { background-position: calc(-30px * var(--kn-frames, 8)) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hold-room .hold-kulnet, .rd-results .hold-kulnet { animation: none; }
}
/* r3-mascot (KULNET_CAMEOS): the TAME Kulnet. An earned fox wears its serial on a
   small jade tag at its owner's side at rest (lobby roster, results line); the wild
   mascot never wears one (viewer/arena/kulnet-tame.js). Same perch on the results. */
.rd-results .hold-kulnet {
  display: inline-block; width: 30px; height: 30px; margin: -8px 0 -6px 6px; vertical-align: middle;
  background-repeat: no-repeat; background-size: calc(30px * var(--kn-frames, 8)) 30px; image-rendering: pixelated;
  animation: hold-kulnet-idle 1.2s steps(var(--kn-frames, 8)) infinite;
}
.hold-kulnet.is-tame { position: relative; margin-right: 30px; }
.hold-kulnet > .kn-tag {
  position: absolute; left: calc(100% - 4px); bottom: 8px; pointer-events: none;
  padding: 1px 3px; border-radius: 3px; background: #7fe8d8; color: #062b2b;
  font: 800 11px/1 ui-monospace, Menlo, monospace; letter-spacing: 0; text-transform: none; white-space: nowrap;
}

/* bugs-11 (round 3): a benched player's room is a live match's roster. The
   room's own controls (side, body, map) belong to the next lobby; JUMP IN is
   the one thing to press. */
[data-panel="lobby"].is-benched :is(#hold-side, #hold-change-char, #hold-change-map) { display: none; }
/* glowhour-1013: a locked Quick Play room has no Switch Team (front-lobby.js). */
#hold #hold-side[hidden] { display: none; }

/* bugs-14 (round 3): Switch Team in a room with nobody else redraws the same
   screen (your side is always the left and blue), so your column and the
   footer line flash once to say it happened. */
.hold-crew.is-switched { animation: hold-switched 1.2s ease-out 1; }
#hold-room-status.is-switched { color: var(--lobby-mine); }
@keyframes hold-switched {
  0%, 30% { box-shadow: 0 0 0 2px var(--lobby-mine), 0 0 18px var(--lobby-mine); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hold-crew.is-switched { animation: none; outline: 2px solid var(--lobby-mine); }
}