/* ---- menus ----------------------------------------------------------------
   The menus lane's half of the front door: the title plate behind every stage,
   and the layout of Battle Mode, Public Games, Create Game and Private Games
   (docs/art/glow-front-end-2026-10-02 screens 01-06).

   Same law as front.css, asserted on this file by front-menus.test.mjs: tokens
   only (every colour is a --ui-* token or the rgba of one), an 11px type floor,
   44px targets, one butter-gold call to action per stage, and one bordered
   container per screen region. The concept's ivory selected rows are the
   cream SELECTION, never the gold; gold stays the one thing to do.
   --------------------------------------------------------------------------- */

/* ---- menus: the plate ------------------------------------------------------
   The painted Cistern replaces the drawn vault, the corner lamp and the water
   strip: the plate has its own lamps and its own water, and a second drawn
   lamp in the corner of a painting reads as a sticker. */
.hold-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The two bodies stand right of centre; a narrow screen keeps them. */
  object-position: 68% 50%;
  pointer-events: none;
  user-select: none;
}
#hold .hold-lamp, #hold .hold-water, #hold .hold-vault { display: none; }

/* ---- menus: 01 the title ---------------------------------------------------
   Not a scrim: the attract screen is the picture. A soft ink pool behind the
   wordmark and a floor band behind the prompt, so type reads on a painting,
   and nothing else. */
#hold[data-stage="press"] { justify-content: flex-start; }
#hold[data-stage="press"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(48% 34% at 50% 26%, rgba(4, 6, 11, .62), rgba(4, 6, 11, 0) 100%),
    linear-gradient(rgba(4, 6, 11, 0) 72%, rgba(4, 6, 11, .66) 100%);
}
#hold[data-stage="press"] .hold-mark { margin-top: clamp(28px, 9vh, 110px); }
#hold[data-stage="press"] [data-panel="press"] { margin-top: auto; padding-bottom: clamp(6px, 3vh, 34px); }

/* ---- menus: the column -----------------------------------------------------
   Every stage this lane owns is a left column over the painting, the way the
   concept lays it out: the lockup at the top, then the stage. The room is
   dimmed only under the column, so the Cistern stays a place. */
#hold:is([data-stage="menu"], [data-stage="battle"], [data-stage="games"],
         [data-stage="create"], [data-stage="private"]) {
  align-items: flex-start;
  justify-content: flex-start;
  padding: clamp(18px, 5vh, 64px) clamp(16px, 6vw, 108px);
}
#hold:is([data-stage="menu"], [data-stage="battle"], [data-stage="private"])::before {
  background: linear-gradient(90deg,
    rgba(4, 6, 11, .9) 0, rgba(4, 6, 11, .82) clamp(320px, 38vw, 640px),
    rgba(4, 6, 11, .3) clamp(520px, 62vw, 1000px), rgba(4, 6, 11, .12) 100%);
}
/* The two wide stages are lists and forms across the whole screen. */
#hold:is([data-stage="games"], [data-stage="create"])::before {
  background: linear-gradient(90deg, rgba(4, 6, 11, .86), rgba(4, 6, 11, .62) 70%, rgba(4, 6, 11, .42));
}

.hold-menus { width: min(520px, 100%); }
.hold-menus.hold-wide { width: min(1180px, 100%); }
[data-panel="battle"].hold-menus { width: min(1000px, 100%); }

.hold-title {
  margin: 0 0 6px;
  padding-bottom: 10px;
  color: var(--ui-ink);
  font: 400 clamp(28px, 4vw, 52px)/1 var(--hold-display);
  letter-spacing: .06em;
  background: linear-gradient(90deg, var(--ui-brass), rgba(198, 168, 91, 0)) bottom left / 100% 1px no-repeat;
}
.hold-titlebar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hold-subtitle { margin: 0; color: var(--ui-ink); font: 400 20px/1.1 var(--hold-display); letter-spacing: .06em; }

/* ---- menus: 03 battle mode ------------------------------------------------- */
.hold-battle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: start;
  gap: 18px clamp(16px, 3vw, 40px);
}
.hold-battle-rows { display: flex; flex-direction: column; gap: 8px; }

/* ---- menus: tabs and segmented choices -------------------------------------
   The chosen one wears the concept's ivory, which is selection; it is not gold
   and it is not a call to action. */
.hold-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.hold-tab, .hold-segbtn {
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 2px;
  background: rgba(16, 23, 34, .78);
  color: var(--ui-muted);
  font: 400 12px/1.2 var(--hold-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.hold-tab:hover, .hold-segbtn:hover { color: var(--ui-ink); background: rgba(26, 36, 50, .9); }
.hold-tab[aria-pressed="true"], .hold-segbtn[aria-pressed="true"] {
  background: var(--ui-ink);
  color: var(--ui-gold-ink);
  cursor: default;
}
.hold-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.hold-segbtn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.hold-segbtn.is-shut, .hold-segbtn.is-shut:hover {
  background: rgba(11, 17, 26, .72);
  color: var(--ui-cold-dim);
  cursor: default;
}
.hold-segbtn em { font-style: normal; font-size: 11px; letter-spacing: .02em; text-transform: none; }
.hold-lock-sm { width: 13px; height: 13px; flex: none; color: var(--ui-brass); vertical-align: -2px; margin-right: 6px; }
.hold-lock-sm[hidden] { display: none; }

/* ---- menus: 04 the public list --------------------------------------------- */
.hold-online {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
  color: var(--ui-muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hold-online::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ui-mate); }
/* menus-ux-13: one line, always; a phone drops the latency (below). */
.hold-online { white-space: nowrap; }
.hold-online:empty::before { display: none; }
.hold-online.is-off::before { background: var(--ui-danger); }

.hold-games-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  align-items: start;
  gap: 14px;
  margin-top: 6px;
}
.hold-games-table { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hold-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.hold-check {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  color: var(--ui-muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.hold-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ui-brass); }

.hold-game {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  border: 0;
  border-radius: 2px;
  background: rgba(16, 23, 34, .74);
  color: var(--ui-ink);
  font: 400 14px/1.25 var(--hold-body);
  text-align: left;
  cursor: pointer;
}
.hold-game > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hold-game b { font: 400 16px/1.2 var(--hold-display); letter-spacing: .03em; }
.hold-game:hover { background: rgba(26, 36, 50, .9); }
.hold-game.is-on { background: var(--ui-ink); color: var(--ui-gold-ink); }
.hold-game:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-brass-hi); }
.hold-game.is-on:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-gold-edge); }
.hold-game-head, .hold-game-head:hover {
  min-height: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  background: transparent;
  color: var(--ui-muted);
  cursor: default;
}
.hold-game-head b, .hold-game-head span {
  font: 400 11px/1.2 var(--hold-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hold-num { font-family: "Display Digits", var(--hold-body); }
.hold-status.is-forming { color: var(--ui-lamp); }
.hold-status.is-playing { color: var(--ui-cold-ink); }
.hold-game.is-on .hold-status { color: inherit; }
.hold-games-list { display: flex; flex-direction: column; gap: 4px; }
.hold-games-empty, .hold-games-line { margin: 6px 2px; color: var(--ui-muted); font-size: 12px; }
.hold-games-line:empty, .hold-games-line[hidden] { display: none; }

/* The detail card: the one bordered container in its region. */
.hold-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px 16px;
  border: 1px solid var(--ui-hairline-soft);
  border-radius: 2px;
  background: rgba(7, 11, 19, .84);
}
.hold-card[hidden] { display: none; }
.hold-card-art {
  aspect-ratio: 16 / 9;
  margin-bottom: 8px;
  background: url("./art/title-clean.webp") 22% 58% / 200% auto no-repeat;
}
.hold-card h3 {
  margin: 2px 6px 6px;
  padding-bottom: 8px;
  color: var(--ui-ink);
  font: 400 24px/1.1 var(--hold-display);
  letter-spacing: .05em;
  overflow-wrap: anywhere;
  background: linear-gradient(90deg, var(--ui-brass), rgba(198, 168, 91, 0)) bottom left / 100% 1px no-repeat;
}
.hold-card p { margin: 0 6px; color: var(--ui-muted); font-size: 13px; letter-spacing: .04em; }
.hold-card p:first-of-type { color: var(--ui-ink); text-transform: uppercase; letter-spacing: .1em; }

/* ---- menus: the foot of a wide stage --------------------------------------- */
.hold-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: clamp(10px, 3vh, 26px);
  padding-top: 12px;
  background: linear-gradient(90deg, rgba(198, 168, 91, .5), rgba(198, 168, 91, .12)) top left / 100% 1px no-repeat;
}
.hold-foot .hold-solo { margin-right: auto; }
.hold-foot .hold-cta { min-width: min(260px, 100%); }

/* The secondary action: a quiet outline, never gold. */
.hold-plain {
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid rgba(198, 168, 91, .45);
  border-radius: 2px;
  background: rgba(4, 6, 11, .5);
  color: var(--ui-ink);
  font: 400 13px/1.2 var(--hold-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.hold-plain:hover { background: rgba(26, 36, 50, .9); }

/* ---- menus: 05 and 06 the forms -------------------------------------------- */
.hold-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hold-box {
  margin-top: 8px;
  padding: clamp(14px, 3vw, 26px);
  border: 1px solid var(--ui-hairline-soft);
  border-radius: 2px;
  background: rgba(7, 11, 19, .82);
}
[data-panel="create"] .hold-form {
  padding: clamp(12px, 2.4vw, 24px);
  border: 1px solid var(--ui-hairline-soft);
  border-radius: 2px;
  background: rgba(7, 11, 19, .82);
}
.hold-field { display: flex; flex-direction: column; gap: 6px; }
.hold-field[hidden] { display: none; }
.hold-field > span, .hold-field > label {
  color: var(--ui-muted);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#hold .hold-form input:not([type="checkbox"]) {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid rgba(198, 168, 91, .32);
  border-radius: 2px;
  background: rgba(4, 6, 11, .72);
  color: var(--ui-ink);
  font: 400 16px/1.2 var(--hold-body);
  letter-spacing: .04em;
}
#hold .hold-form input::placeholder { color: var(--ui-dim); }
#hold-code { text-transform: uppercase; }
#hold-code::placeholder { text-transform: none; }
.hold-pw { position: relative; }
#hold .hold-pw input { padding-right: 52px; }
.hold-eye {
  position: absolute;
  top: 1px; right: 1px; bottom: 1px;
  width: 46px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ui-muted);
  cursor: pointer;
}
.hold-eye svg { width: 20px; height: 20px; }
.hold-eye[aria-pressed="true"] { color: var(--ui-lamp); }
.hold-hint { margin: 0; color: var(--ui-muted); font-size: 12px; font-style: normal; }
/* menus-ux-03: a refusal kept beside the fields it is about, until they change
   (front-menus.js formWhy). The toast at the top goes on the next press. */
.hold-formwhy {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: var(--ui-ink);
  font-size: 13px;
  line-height: 1.35;
}
.hold-formwhy::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-danger); translate: 0 -1px; }
.hold-formwhy[hidden] { display: none; }
.hold-rule {
  margin-top: 6px;
  padding-top: 14px;
  background: linear-gradient(90deg, rgba(198, 168, 91, .4), rgba(198, 168, 91, .08)) top left / 100% 1px no-repeat;
}
[data-panel="create"] .hold-step { display: flex; align-items: center; gap: 12px; align-self: flex-start; }
[data-panel="create"] .hold-step span { flex: 0 0 auto; color: var(--ui-ink); }
[data-panel="create"] .hold-step .hold-num { min-width: 2ch; text-align: center; font-size: 18px; }
#hold-private-create { align-self: flex-start; }

/* The lockup is the page's masthead on these stages, so it reads at a size. */
#hold:is([data-stage="menu"], [data-stage="battle"], [data-stage="games"],
         [data-stage="create"], [data-stage="private"]) .hold-lockup .hold-word { font-size: 30px; }

/* ---- menus: the room code in a private host's lobby ----------------------- */
.hold-roomcode { margin: 0; color: var(--ui-muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.hold-roomcode b { margin-left: 8px; color: var(--ui-lamp-core); font: 400 18px/1 var(--hold-display); letter-spacing: .12em; }
.hold-roomcode[hidden] { display: none; }

/* ---- menus: phones ---------------------------------------------------------- */
@media (max-width: 760px) {
  .hold-battle-grid, .hold-games-grid { grid-template-columns: minmax(0, 1fr); }
  .hold-game { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1fr); }
  /* Arena and host are on the card; the row keeps name, seats and state. */
  .hold-game > :nth-child(2), .hold-game > :nth-child(5) { display: none; }
  .hold-card-art { display: none; }
  .hold-foot { flex-wrap: wrap; }
  .hold-foot .hold-cta { flex: 1 1 100%; order: -1; }
  /* menus-ux-13: "ONLINE", not "ONLINE · 36 / MS" wrapped under the speaker,
     and on its own line under the title, clear of the speaker's corner. */
  .hold-online-ms { display: none; }
  #hold[data-stage="games"] .hold-titlebar { flex-direction: column; align-items: flex-start; gap: 4px; padding-right: 60px; }
  #hold[data-stage="games"] .hold-online { margin: 0 0 8px; }
  /* menus-ux-12: JOIN GAME across the top, the two other actions side by side,
     Back across the bottom (the phone's order on every other stage). */
  #hold[data-stage="games"] .hold-foot .hold-plain { flex: 1 1 0; min-width: 0; padding: 12px 10px; }
  #hold[data-stage="games"] .hold-foot .hold-solo { order: 1; flex: 1 1 100%; }
  #hold:is([data-stage="menu"], [data-stage="battle"], [data-stage="private"])::before {
    background: rgba(4, 6, 11, .74);
  }
}

/* ---- menus: the judged pass (2026-10-03) ------------------------------------
   Every rule below answers a defect three independent judges named on the
   baseline round (research/glow-judging-2026-10-02/baseline/judge/screens:
   title, main-menu, battle-mode). The body face is now the condensed UI sans
   (front.css --hold-body), so every quiet line is resized for it here. */

/* -- the title: one call to action, in the display face, on a scrim --------- */
#hold[data-stage="press"] [data-panel="press"] { padding-bottom: clamp(18px, 6vh, 64px); }
#hold #hold-press {
  min-height: 56px;
  padding: 15px 40px 14px;
  border-radius: 2px;
  background: rgba(4, 6, 11, .72);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .55), 0 0 28px rgba(240, 176, 84, .18);
  color: var(--ui-lamp-core);
  font: 400 clamp(20px, 1.9vw, 28px)/1 var(--hold-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 var(--ui-stone-0), 0 0 14px rgba(240, 176, 84, .45);
}
#hold #hold-press::before, #hold #hold-press::after {
  width: clamp(36px, 5vw, 80px);
  height: 2px;
  margin: 0 14px;
  background: linear-gradient(90deg, rgba(198, 168, 91, 0), var(--ui-brass));
}
/* The pulse is hold-press-breath (the judged pass, round three, below): opacity
   only, so the compositor runs it. */

/* -- the masthead: the real two line mark on the menu and Battle Mode -------- */
#hold[data-stage="menu"] .hold-mark {
  --hold-mark-size: clamp(64px, 7.4vw, 124px);
  align-self: flex-start;
  align-items: center;
  margin: 0 0 clamp(14px, 3vh, 30px);
  padding: 14px 26px 18px;
  border-radius: 2px;
  background: radial-gradient(closest-side, rgba(4, 6, 11, .72), rgba(4, 6, 11, 0));
}

#hold[data-stage="menu"] .hold-mark-franchise { color: var(--ui-ink); opacity: .86; }
#hold[data-stage="menu"] { justify-content: center; }
[data-panel="menu"].hold-menus { width: min(600px, 100%); }

/* -- main menu rows: readable subtitles, no green ring on the gold ----------- */
#hold .hold-menus .hold-row { min-height: 66px; padding: 12px 18px; }
#hold .hold-menus .hold-row b { font-size: 22px; }
#hold .hold-menus .hold-row span { font-size: 14px; line-height: 1.3; color: var(--ui-ink); opacity: .8; }
#hold .hold-menus .hold-go span { color: var(--ui-gold-ink); opacity: .85; }
/* Keyboard focus on the gold is the cream selection stroke, the same colour
   selection carries everywhere else, not the pale green global ring. */
#hold .hold-menus .hold-go:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
  box-shadow: inset 0 0 0 1px var(--ui-gold-edge);
}
#hold .hold-menus .hold-row:not(.hold-go):focus-visible { outline-color: var(--ui-focus); }

/* -- the secondary row: three equal tiles in the rows' own type ------------- */
.hold-aside-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.hold-aside-row > .hold-dev { position: relative; margin: 0; color: var(--ui-muted); font-size: 13px; }
#hold .hold-aside-row .hold-ghost {
  height: 100%;
  min-height: 60px;
  padding: 10px 14px;
  gap: 11px;
  background: rgba(16, 23, 34, .74);
  color: var(--ui-ink);
  list-style: none;
}
#hold .hold-aside-row summary.hold-ghost::-webkit-details-marker { display: none; }
#hold .hold-aside-row .hold-ghost:hover { background: rgba(26, 36, 50, .86); }
#hold .hold-aside-row .hold-ghost svg { width: 22px; color: var(--ui-brass); }
#hold .hold-aside-row .hold-ghost i { font: 400 15px/1.15 var(--hold-display); letter-spacing: .03em; white-space: nowrap; }
#hold .hold-aside-row .hold-ghost em { margin-top: 3px; font-size: 12px; line-height: 1.2; color: var(--ui-muted); }
#hold .hold-aside-row .hold-dev[open] > summary { box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .55); }
/* The yards open as a framed drawer under the whole row, not inside a tile. */
.hold-dev-body {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  width: min(520px, calc(100vw - 32px));
  padding: 6px 16px 14px;
  border: 1px solid var(--ui-hairline-soft);
  border-radius: 2px;
  background: rgba(7, 11, 19, .95);
  font-size: 13px;
}

/* -- Battle Mode: the class pick is one titled, framed step ----------------- */
[data-panel="battle"].hold-menus { width: min(1180px, 100%); }
#hold[data-stage="battle"] .hold-title { font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 14px; }
.hold-battle-grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
.hold-battle-rows .hold-aside { margin-top: 4px; }
/* menus-ux-35: Back is the door's one Back, the Esc keycap beside the word,
   at its own width rather than a full-width card. */
.hold-battle-rows .hold-ghost.hold-solo {
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: 48px;
  background: rgba(16, 23, 34, .6);
  color: var(--ui-ink);
}
/* Back reads like every other Back on the door, not in the retired pixel face
   (polish judge aes-04, 2026-10-08). */
.hold-battle-rows .hold-ghost.hold-solo i, #hold #rd-board-back i { font: 400 13px/1 var(--hold-body); letter-spacing: .14em; text-transform: uppercase; }

#hold #hold-pick {
  gap: 12px;
  padding: 16px 18px 18px;
  border: 1px solid rgba(198, 168, 91, .42);
  border-radius: 2px;
  background: rgba(7, 11, 19, .9);
}
#hold #hold-pick .hold-pick-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding-bottom: 10px;
  background: linear-gradient(90deg, var(--ui-brass), rgba(198, 168, 91, 0)) bottom left / 100% 1px no-repeat;
}
#hold #hold-pick .hold-pick-head b { color: var(--ui-ink); font: 400 24px/1.1 var(--hold-display); letter-spacing: .05em; }
#hold #hold-pick .hold-pick-head em { color: var(--ui-muted); font-size: 14px; }
#hold #hold-pick .hold-pick-head em::before { content: none; }
#hold #hold-pick .hold-pick-row { gap: 12px; }
#hold #hold-pick .hold-pickcol { gap: 8px; }
#hold #hold-pick .hold-pickcard {
  gap: 6px;
  padding: 12px 14px 14px;
  background: rgba(16, 23, 34, .8);
  color: var(--ui-cold-ink);
}
#hold #hold-pick .hold-pickcard:not(.is-on) { opacity: .78; }
#hold #hold-pick .hold-pickcard:not(.is-on) .hold-pick-bar u { background: rgba(139, 152, 168, .16); }
#hold #hold-pick .hold-pickcard:not(.is-on) .hold-pick-bar u.on { background: var(--ui-cold-ink); }
#hold #hold-pick .hold-pickcard:not(.is-on):hover { opacity: 1; }
#hold #hold-pick .hold-pickcard.is-on {
  background: linear-gradient(rgba(38, 30, 18, .9), rgba(21, 17, 11, .9));
  box-shadow: inset 0 0 0 2px var(--ui-brass-hi);
}
/* The stage the body stands on: a lit floor under the chosen one. */
#hold #hold-pick .hold-pick-body {
  position: relative;
  width: 100%;
  height: 232px;
  background: radial-gradient(46% 16% at 50% 94%, rgba(139, 152, 168, .2), rgba(139, 152, 168, 0));
}
#hold #hold-pick .hold-pickcard.is-on .hold-pick-body {
  background:
    radial-gradient(46% 18% at 50% 94%, rgba(240, 176, 84, .42), rgba(240, 176, 84, 0)),
    radial-gradient(40% 70% at 50% 70%, rgba(240, 176, 84, .12), rgba(240, 176, 84, 0));
}
/* glow-menu-cast (2026-10-07): the canvas is THE picture. It reaches 44px above
   the body box so nothing near the top of a frame clips, and it is sized by front-door.js in whole
   device pixels (pick-stage.mjs stageSize) rather than stretched to 100%, so
   nearest-neighbour has nothing to resample. The painted portrait under it is
   hidden until the cast has actually FAILED to load (`is-fallback`): it used to
   show first and swap to the sprite, which is the static flash Dan saw. */
.hold-pick-cast { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% + 44px); image-rendering: pixelated; pointer-events: none; }
#hold #hold-pick .hold-pick-art { visibility: hidden; }
#hold #hold-pick .hold-pick-body.is-fallback .hold-pick-art { visibility: visible; }
/* What a body says while you decide: one bubble, ink on ivory, a tail toward
   the head. `bottom` is set per body by front-door.js from the drawn height. */
#hold #hold-pick .hold-pick-say {
  position: absolute;
  left: 50%;
  z-index: 2;
  max-width: calc(100% - 12px);
  padding: 7px 11px 8px;
  border-radius: 3px;
  background: var(--ui-ink);
  color: var(--ui-gold-ink);
  font: 500 14px/1.25 var(--hold-body);
  letter-spacing: .01em;
  text-align: center;
  white-space: normal;
  box-shadow: 0 2px 0 rgba(4, 6, 11, .6), 0 0 0 1px rgba(198, 168, 91, .5);
  transform: translate(-50%, 0) scale(1);
  transform-origin: 50% 100%;
  opacity: 1;
  transition: opacity 180ms ease-out, transform 220ms cubic-bezier(.2, 1.4, .4, 1);
}
#hold #hold-pick .hold-pick-say::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--ui-ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#hold #hold-pick .hold-pick-say.is-in { opacity: 0; transform: translate(-50%, 6px) scale(.86); transition: none; }
#hold #hold-pick .hold-pick-say.is-out { opacity: 0; transform: translate(-50%, -4px) scale(.96); }
@media (prefers-reduced-motion: reduce) {
  #hold #hold-pick .hold-pick-say, #hold #hold-pick .hold-pick-say.is-in, #hold #hold-pick .hold-pick-say.is-out { transition: none; transform: translate(-50%, 0); }
}
#hold #hold-pick .hold-pickcard b { font-size: 24px; }
#hold #hold-pick .hold-pick-tag { font-size: 13px; letter-spacing: .1em; color: var(--ui-brass); }
#hold #hold-pick .hold-pickcard:not(.is-on) .hold-pick-tag { color: var(--ui-muted); }
/* Labelled rows: name, then a five pip track. Same order on both cards. */
#hold #hold-pick .hold-pick-bars {
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 6px 0 2px;
}
#hold #hold-pick .hold-pick-bar {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 10px;
}
#hold #hold-pick .hold-pick-bar em {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ui-muted);
}
#hold #hold-pick .hold-pick-bar span { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
#hold #hold-pick .hold-pick-bar u { width: auto; height: 7px; border-radius: 1px; }
#hold #hold-pick .hold-pickcard.is-on .hold-pick-bar em { color: var(--ui-ink); }
#hold #hold-pick .hold-pick-line { margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--ui-ink); opacity: .86; }
#hold #hold-pick .hold-pick-kit { margin-top: 6px; gap: 4px 8px; }
#hold #hold-pick .hold-pick-kit i { width: 24px; height: 24px; }
#hold #hold-pick .hold-pick-kit em { font-size: 13px; color: var(--ui-muted); }
#hold #hold-pick .hold-pick-arms { gap: 6px; }
#hold #hold-pick .hold-pick-arm { min-height: 36px; padding: 4px 10px; font-size: 12px; }
#hold #hold-pick .hold-pick-note { font-size: 13px; }

/* ---- menus: the judged pass, round two (2026-10-03) -------------------------
   research/glow-judging-2026-10-02/frontdoor/judge/screens. */

/* Title: one plate style for the tagline and the prompt; a brighter franchise. */
#hold[data-stage="press"] .hold-mark-franchise { color: var(--ui-ink); text-shadow: 0 2px 0 var(--ui-stone-0), 0 0 18px rgba(4, 6, 11, .9); }
#hold[data-stage="press"]::before {
  background:
    radial-gradient(40% 30% at 50% 24%, rgba(4, 6, 11, .8), rgba(4, 6, 11, 0) 100%),
    linear-gradient(rgba(4, 6, 11, 0) 70%, rgba(4, 6, 11, .72) 100%);
}

/* Main menu: stronger panels, aligned edges, a real toggle. */
#hold .hold-menus .hold-row:not(.hold-go) {
  background: rgba(16, 23, 34, .9);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .22);
}
#hold .hold-menus .hold-row:not(.hold-go):hover { background: rgba(26, 36, 50, .95); }
#hold[data-stage="menu"] .hold-row { min-height: 74px; }
#hold .hold-aside-row { width: 100%; }
#hold .hold-aside-row > .hold-dev, #hold .hold-aside-row > .hold-ghost { min-width: 0; }
#hold .hold-aside-row .hold-ghost {
  min-height: 66px;
  background: rgba(16, 23, 34, .9);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .22);
}
#hold .hold-aside-row .hold-ghost:hover { background: rgba(26, 36, 50, .95); }
#hold .hold-aside-row .hold-ghost > span { flex: 1 1 auto; min-width: 0; }
.hold-switch {
  flex: none;
  position: relative;
  width: 30px;
  height: 16px;
  border-radius: 8px;
  background: rgba(240, 176, 84, .85);
  box-shadow: inset 0 0 0 1px var(--ui-gold-edge);
}
.hold-switch u {
  position: absolute;
  top: 2px;
  left: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ui-lamp-core);
  transition: left 140ms linear;
}
#hold-sound[aria-pressed="false"] .hold-switch { background: rgba(139, 152, 168, .3); box-shadow: inset 0 0 0 1px rgba(139, 152, 168, .5); }
#hold-sound[aria-pressed="false"] .hold-switch u { left: 2px; background: var(--ui-cold-ink); }

/* Battle Mode: the live loadout is the chosen card's, and only that. */
#hold #hold-pick .hold-pick-arms.is-idle .hold-pick-arm { opacity: .62; box-shadow: inset 0 0 0 1px rgba(139, 152, 168, .3); }
#hold #hold-pick .hold-pickcard:not(.is-on) { opacity: .9; }
#hold #hold-pick .hold-pickcard:not(.is-on) .hold-pick-bar u.on { background: var(--ui-ink); opacity: .72; }
#hold #hold-pick .hold-pickcard:not(.is-on) .hold-pick-bar em { color: var(--ui-ink); opacity: .8; }
#hold #hold-pick .hold-pickcard:not(.is-on) .hold-pick-line { opacity: .82; }
#hold #hold-pick .hold-pick-head em { font-size: 15px; color: var(--ui-ink); opacity: .8; }
/* Ability glyphs with their names; the sentence below stays for the reader. */
#hold #hold-pick .hold-pick-kit { gap: 6px 10px; }
#hold #hold-pick .hold-pick-kit i {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 5px;
  border-radius: 2px;
  background: rgba(198, 168, 91, .12);
}
#hold #hold-pick .hold-pick-kit i .gl { width: 20px; height: 20px; }
#hold #hold-pick .hold-pick-kit i b { font: 400 12px/1 var(--hold-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-ink); }
#hold #hold-pick .hold-pick-kit em { display: none; }
#hold .hold-battle-rows .hold-row span { font-size: 15px; }
#hold #hold-quick span { font-weight: 600; }
.hold-battle-grid { align-items: stretch; }
.hold-battle-rows { justify-content: flex-start; }
.hold-battle-rules {
  margin-top: 4px;
  padding: 14px 18px 16px;
  border-radius: 2px;
  background: rgba(7, 11, 19, .82);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .22);
}
.hold-battle-rules h3 { margin: 0 0 8px; color: var(--ui-brass); font: 400 15px/1.1 var(--hold-display); letter-spacing: .08em; text-transform: uppercase; }
.hold-battle-rules ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hold-battle-rules li { position: relative; padding-left: 18px; color: var(--ui-ink); font-size: 15px; line-height: 1.3; }
.hold-battle-rules li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 7px; height: 7px; rotate: 45deg; background: var(--ui-lamp); }
.hold-battle-rules:empty { display: none; }

/* ---- menus: the judged pass, round three (2026-10-03) -----------------------
   research/glow-judging-2026-10-02/frontdoor2/judge/screens. */

/* Title: the prompt and the tagline are lettering, not boxes. Brass chevron
   flourishes either side, a soft lamp glow, and a gentle pulse. */
#hold #hold-press {
  padding: 14px 18px;
  background: none;
  box-shadow: none;
  font-size: clamp(24px, 2.2vw, 32px);
  text-shadow: 0 2px 0 var(--ui-stone-0), 0 0 10px rgba(4, 6, 11, .95), 0 0 22px rgba(240, 176, 84, .55);
  animation: hold-press-breath 2600ms ease-in-out infinite;
}
#hold #hold-press::before, #hold #hold-press::after {
  width: 64px;
  height: 14px;
  margin: 0 6px;
  translate: 0 -50%;
  background: linear-gradient(90deg, rgba(198, 168, 91, 0), var(--ui-brass) 45%, var(--ui-gold-a));
  clip-path: polygon(0 43%, 72% 43%, 72% 10%, 100% 50%, 72% 90%, 72% 57%, 0 57%);
}
#hold #hold-press::before { rotate: none; }
#hold #hold-press::after { rotate: 180deg; }
@keyframes hold-press-breath {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}

/* Main menu: one flat warm fill on the masthead hero so the W is never split
   across two bands, and the tiles speak in the rows' own capitals. */
#hold[data-stage="menu"] .hold-row { min-height: 80px; }
#hold[data-stage="menu"] .hold-menus .hold-row span,
#hold .hold-menus .hold-row span { font-size: 16px; opacity: .92; }
#hold .hold-menus .hold-go span { opacity: .95; }
#hold .hold-aside-row .hold-ghost { min-height: 76px; }
#hold .hold-aside-row .hold-ghost i { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
#hold .hold-aside-row .hold-ghost em { font-size: 14px; color: var(--ui-ink); opacity: .8; }
[data-panel="menu"].hold-menus { gap: 10px; }

/* Battle Mode: both cards at full contrast; the chosen one is a brass frame,
   a SELECTED badge and a lit floor. The column is the card, so the weapon
   chips sit inside its frame. */
#hold #hold-pick .hold-pickcol {
  position: relative;
  padding: 0 0 12px;
  border-radius: 2px;
  background: rgba(16, 23, 34, .86);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .25);
}
#hold #hold-pick .hold-pickcol.is-on {
  background: linear-gradient(rgba(38, 30, 18, .92), rgba(21, 17, 11, .92));
  box-shadow: inset 0 0 0 2px var(--ui-brass-hi), 0 0 24px rgba(240, 176, 84, .16);
}
#hold #hold-pick .hold-pickcard,
#hold #hold-pick .hold-pickcard.is-on,
#hold #hold-pick .hold-pickcard:not(.is-on) {
  opacity: 1;
  padding: 12px 10px 4px;
  background: transparent;
  box-shadow: none;
  color: var(--ui-ink);
}
#hold #hold-pick .hold-pickcard:hover { background: rgba(255, 255, 255, .03); }
.hold-pick-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  padding: 4px 9px;
  border-radius: 2px;
  background: var(--ui-ink);
  color: var(--ui-gold-ink);
  font: 400 12px/1 var(--hold-body);
  font-weight: 700;
  letter-spacing: .12em;
}
/* One bar style on both cards. */
#hold #hold-pick .hold-pickcard .hold-pick-bar u,
#hold #hold-pick .hold-pickcard:not(.is-on) .hold-pick-bar u { background: rgba(240, 176, 84, .2); opacity: 1; }
#hold #hold-pick .hold-pickcard .hold-pick-bar u.on,
#hold #hold-pick .hold-pickcard:not(.is-on) .hold-pick-bar u.on { background: var(--ui-lamp); opacity: 1; }
#hold #hold-pick .hold-pickcard .hold-pick-bar em,
#hold #hold-pick .hold-pickcard:not(.is-on) .hold-pick-bar em { color: var(--ui-ink); opacity: .9; }
#hold #hold-pick .hold-pickcard:not(.is-on) .hold-pick-line { opacity: .86; }
#hold #hold-pick .hold-pickcard:not(.is-on) .hold-pick-tag { color: var(--ui-brass); }
#hold #hold-pick .hold-pickcard:not(.is-on) b { color: var(--ui-ink); }
#hold #hold-pick .hold-pick-arms.is-idle .hold-pick-arm { opacity: .8; }
#hold #hold-pick .hold-pick-head em { font-size: 17px; }
/* The left column runs the full height of the bunny panel. */
.hold-battle-rows { height: 100%; }
.hold-battle-rules { flex: 1 1 auto; }
.hold-battle-rules li { font-size: 17px; }
.hold-battle-rules { display: flex; flex-direction: column; }
.hold-battle-rules { justify-content: center; padding: 22px 24px; }
.hold-battle-rules h3 { margin-bottom: 14px; }
.hold-battle-rules ul { gap: 16px; }
/* 256, not 244 (glow-menu-cast): the Doe stands 220px tall at the shared scale
   and the bubble over her ears needs the rest. */
#hold #hold-pick .hold-pick-body { height: 256px; }

@media (max-width: 760px) {
  .hold-aside-row, .hold-battle-grid { grid-template-columns: minmax(0, 1fr); }
  #hold #hold-press::before, #hold #hold-press::after { width: 34px; }
  #hold[data-stage="menu"] .hold-mark { align-self: center; --hold-mark-size: clamp(48px, 15vw, 72px); }
  #hold[data-stage="menu"] { justify-content: flex-start; }
  #hold #hold-pick .hold-pick-body { height: 140px; }
  #hold #hold-pick .hold-pick-say { font-size: 12px; padding: 5px 8px 6px; }
  #hold #hold-pick .hold-pick-bar { grid-template-columns: 52px 1fr; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  #hold #hold-press { animation: none; opacity: 1; }
}

/* ---- menus: the judged pass, round four (2026-10-03) ------------------------
   research/glow-judging-2026-10-02/round1/judge/screens: title, main-menu,
   battle-mode. The mark is a pixel logo now (viewer/arena/glow-logo.js). */

/* -- the marks, one size per place (the painterly pass, 2026-10-05) ------- */
#hold[data-stage="press"] .hold-mark { margin-top: clamp(24px, 7vh, 90px); }
#hold[data-stage="menu"] .hold-mark { padding: 10px 24px 14px; }

/* -- the main menu: two primary rows, one row of tiles, sound in the corner -- */
#hold .hold-soundcorner {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 3vh, 28px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  background: rgba(7, 11, 19, .82);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .45);
}
#hold .hold-soundcorner svg { width: 20px; height: 20px; }
#hold .hold-soundcorner span { display: block; }
#hold .hold-soundcorner span i { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ui-ink); }
#hold .hold-soundcorner span em { display: none; }
#hold[data-stage="menu"] .hold-row { min-height: 84px; }

/* -- Battle Mode: labels and chips that read, chips that look pressable ----- */
#hold[data-stage="battle"] .hold-plate { filter: blur(6px) brightness(.42) saturate(.6); transform: scale(1.04); }
#hold #hold-pick .hold-pick-head b { text-transform: uppercase; }
#hold #hold-pick .hold-pick-bar em { font-size: 13px; letter-spacing: .08em; color: var(--ui-ink); opacity: 1; }
#hold #hold-pick .hold-pickcard:not(.is-on) .hold-pick-bar em { opacity: 1; }
#hold #hold-pick .hold-pick-bar u { height: 9px; }
#hold #hold-pick .hold-pick-kit i { padding: 5px 10px 5px 6px; background: rgba(198, 168, 91, .18); box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .3); }
#hold #hold-pick .hold-pick-kit i b { font-size: 13px; }
#hold #hold-pick .hold-pick-kit i .gl { width: 22px; height: 22px; }
#hold #hold-pick .hold-pick-arm { min-height: 40px; padding: 4px 14px; font-size: 13px; }
#hold #hold-pick .hold-pick-arms.is-idle .hold-pick-arm,
#hold #hold-pick .hold-pick-arm:not(.is-on) {
  opacity: 1;
  color: var(--ui-ink);
  background: rgba(16, 23, 34, .92);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .55);
}
#hold #hold-pick .hold-pick-arm:not(.is-on):hover { background: rgba(198, 168, 91, .16); }
#hold #hold-pick .hold-pick-line { font-size: 15px; }
/* The facts box sits under the rows at its own height, and Back sits on the
   floor of the column; the rows take the room the empty box used to. */
.hold-battle-rows { display: flex; flex-direction: column; gap: 10px; }
#hold .hold-battle-rows > .hold-row { min-height: 104px; }
.hold-battle-rules { flex: 0 0 auto; justify-content: flex-start; padding: 18px 22px; }
.hold-battle-rules ul { gap: 12px; }
.hold-battle-rows > .hold-aside { margin-top: auto; }
/* The plate is the painting again (the painterly pass, 2026-10-05): smooth. */
.hold-plate { image-rendering: auto; }
.hold-card-art { background-image: url("./art/title-clean.webp"); }

/* -- glow-identity: sign in, your characters, a new one ----------------------
   Plain and functional on purpose; the front-door art pass dresses these. */
#hold .hold-me {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ui-lamp-core);
  font: 400 16px/1.2 var(--hold-display);
}
#hold .hold-me b { font-weight: 400; overflow-wrap: anywhere; }
#hold .hold-roster { display: flex; flex-direction: column; gap: 8px; }
#hold .hold-roster .hold-row svg { width: 32px; height: 36px; }
#hold .hold-roster-note { color: var(--ui-muted); font-size: 13px; }

/* -- gameplay-ease-02: Glow plays with a keyboard and mouse -------------------
   A touch-only device that has never pressed a key (phone-gate.js). The card is
   a lit brass plate in the door's own type, the picture first; Tutorial and
   Battle go cold, the colour the door gives locked things. */
#hold .hold-phone {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 4px 14px;
  padding: 14px 18px;
  border-radius: 2px;
  background:
    radial-gradient(70% 120% at 0% 50%, rgba(240, 176, 84, .14), rgba(240, 176, 84, 0) 70%),
    rgba(9, 17, 13, .94);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .55);
  color: var(--ui-ink);
}
#hold .hold-phone[hidden] { display: none; }
#hold .hold-phone-art { grid-row: 1 / 3; width: 64px; height: auto; color: var(--ui-brass); }
#hold .hold-phone b { font: 700 20px/1.2 var(--hold-serif); letter-spacing: .04em; color: var(--ui-lamp-core); }
#hold .hold-phone span { font-size: 15px; line-height: 1.3; color: var(--ui-ink); opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  #hold .hold-phone.is-told { animation: hold-phone-told 520ms ease-out; }
}
@keyframes hold-phone-told {
  0% { box-shadow: inset 0 0 0 2px var(--ui-lamp), 0 0 22px rgba(240, 176, 84, .55); }
  100% { box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .55), 0 0 0 rgba(240, 176, 84, 0); }
}
/* menus-ux-24: a gated phone has no keyboard, so no Esc keycaps on its Back
   buttons and no Enter / Esc legend. A pressed key lifts the gate and brings
   them back (phone-gate.js). */
#hold[data-phone] button kbd,
#hold[data-phone] .hold-keys { display: none; }
/* menus-ux-29: Tutorial stays open on a gated phone, read-only: the step
   cards show, LEARN TO PLAY goes cold with its reason under it. */
#hold[data-phone] #hold-learn,
#hold[data-phone] #hold-battle {
  background: rgba(16, 23, 34, .72);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(139, 152, 168, .28);
  color: var(--ui-cold-ink);
  cursor: default;
}
#hold[data-phone] #hold-battle span { color: var(--ui-cold-dim); opacity: 1; }
#hold[data-phone] #hold-battle svg { color: var(--ui-cold-dim); }
#hold .hold-learn-why { margin: 0; font-size: 15px; line-height: 1.35; color: var(--ui-ink); opacity: .85; }
#hold .hold-learn-why[hidden],
#hold[data-phone] .hold-learn-more { display: none; }

/* ---- menus-ux-07 (2026-10-08): the gold stays on the first screen ------------
   Measured at 1366x768: Battle Mode ran to 837 px (the cards cut at the stat
   bars, BACK below the fold) and Change Character to 824 px (CONTINUE and BACK
   below). On a phone Change Character ran to 1,572 px with CONTINUE two screens
   down. Prefixed with #hold so the later room stylesheets cannot outrank them. */
@media (min-width: 761px) and (max-height: 800px) {
  #hold[data-stage="battle"] .hold-title { font-size: 40px; margin-bottom: 8px; }
  #hold .hold-battle-rows > .hold-row { min-height: 82px; }
  #hold .hold-battle-rules { padding: 12px 20px; }
  #hold .hold-battle-rules ul { gap: 6px; }
  #hold #hold-pick { gap: 8px; padding: 12px 16px 14px; }
  #hold #hold-pick .hold-pick-body { height: 176px; }
}
@media (min-width: 981px) and (max-height: 800px) {
  /* A definite stage height: the canvas sizes itself to its box, so a 1fr row
     grew to fit the canvas it had last drawn (327 px) instead of the screen. */
  #hold .hold-charcard { grid-template-rows: clamp(140px, calc(100vh - 520px), 360px) auto auto auto; height: auto; }
}
@media (max-width: 640px) {
  #hold[data-stage="character"] .hold-charcard { grid-template-rows: 128px auto auto auto; }
  #hold[data-stage="character"] .hold-stat em small { display: none; }
  #hold[data-stage="character"] .hold-stat { padding: 1px 0; }
  /* CONTINUE and BACK ride along the bottom while the cards scroll. */
  #hold[data-stage="character"] .hold-room-foot {
    position: sticky; bottom: calc(-1 * clamp(16px, 3vh, 34px)); z-index: 3;
    margin: 0 -16px; padding: 18px 16px calc(10px + clamp(16px, 3vh, 34px) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(rgba(4, 6, 11, 0), rgb(4, 6, 11) 18px);
  }
}

/* menus-ux-15: one open map, so BACK TO LOBBY is the map screen's gold
   (front-lobby.js drawMaps), the size and place of the gold it stands in for. */
#hold .hold-room-foot #hold-maps-back.hold-go { flex: 0 0 auto; min-width: 220px; min-height: 52px; margin-left: auto; justify-content: center; color: var(--ui-gold-ink); }
/* menus-ux-18: `.hold-go`'s gold is a one-class rule and `.hold-ghost`'s fill
   comes later, so the gold never painted: ink on dark, keycap invisible. The
   gold, its edge and its ink are restated at this button's own weight. */
#hold .hold-room-foot #hold-maps-back.hold-go { order: 3; margin-left: auto; background: linear-gradient(var(--ui-gold-a), var(--ui-gold-b)); border: 1px solid var(--ui-gold-edge); }
#hold .hold-room-foot #hold-maps-back.hold-go:is(:hover, :focus-visible) { filter: brightness(1.08); }
#hold .hold-room-foot #hold-maps-back.hold-go:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-gold-ink); }
#hold .hold-room-foot #hold-maps-back.hold-go i { font: 700 18px/1 var(--hold-serif); letter-spacing: .14em; color: var(--ui-gold-ink); }
#hold .hold-room-foot #hold-maps-back.hold-go kbd { color: var(--ui-gold-ink); border-color: rgba(34, 23, 14, .5); }
@media (max-width: 640px) {
  #hold .hold-room-foot #hold-maps-back.hold-go { flex: 1 1 100%; min-width: 0; }
  /* The map screen runs 878 px on a 390x844 phone: the gold rides the bottom. */
  #hold[data-stage="maps"] .hold-room-foot {
    position: sticky; bottom: calc(-1 * clamp(16px, 3vh, 34px)); z-index: 3;
    margin: 0 -16px; padding: 18px 16px calc(10px + clamp(16px, 3vh, 34px) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(rgba(4, 6, 11, 0), rgb(4, 6, 11) 18px);
  }
}

/* menus-ux-38: a gated phone reads the Tutorial (888 px on a 390x844 phone);
   its one way out rides the bottom, as the map screen's gold does. */
#hold[data-phone][data-stage="tutorial"] .hold-tutorialp > .hold-aside {
  position: sticky; bottom: calc(-1 * clamp(16px, 3vh, 34px)); z-index: 3;
  margin: 0 -16px; padding: 18px 16px calc(10px + clamp(16px, 3vh, 34px) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(rgba(4, 6, 11, 0), rgb(4, 6, 11) 18px);
}

/* menus-ux-16: the phone card, arrived by a friend's invite. The room code in
   large type and the one gold on the card: COPY INVITE LINK, then COPIED. */
#hold .hold-phone-invite { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 12px;
  background: linear-gradient(90deg, rgba(198, 168, 91, .5), rgba(198, 168, 91, .12)) top left / 100% 1px no-repeat; }
#hold .hold-phone-invite[hidden] { display: none; }
#hold .hold-phone-invite p { margin: 0; font-size: 15px; line-height: 1.35; color: var(--ui-ink); }
/* menus-ux-37: the lobby's code face (front-identity.css .hold-roomcode b), not the pixel one. */
#hold .hold-phone-code { color: var(--ui-lamp-core); font: 700 28px/1 var(--hold-serif); letter-spacing: .12em; }
#hold .hold-phone-code[hidden] { display: none; }
/* Gold by its own rule, not .hold-go: it only shows while the gate has drawn
   Battle cold, so it is still the one gold on the menu (front.test.mjs). */
#hold #hold-phone-copy { grid-column: 1 / -1; width: 100%; min-height: 52px; margin-top: 6px; justify-content: center;
  background: linear-gradient(var(--ui-gold-a), var(--ui-gold-b)); border: 1px solid var(--ui-gold-edge); color: var(--ui-gold-ink); }
#hold #hold-phone-copy:is(:hover, :focus-visible) { filter: brightness(1.08); }
#hold #hold-phone-copy b { font: 700 17px/1 var(--hold-serif); letter-spacing: .12em; }
#hold #hold-phone-copy[data-copied="1"] b::before { content: "\2713\00a0\00a0"; }

/* menus-ux-17: Create Game keeps its gold and Back on the first screen. Private
   plus the Bot skill row ran to 795 px at 1366x768 (824 px after a refusal),
   so on a short screen the two bot rows share a line, the gaps close up, and
   the foot rides along the bottom while the form scrolls (as
   [data-stage="character"] .hold-room-foot does on a phone). */
@media (min-width: 761px) and (max-height: 820px) {
  #hold[data-stage="create"] .hold-title { margin-bottom: 8px; }
  #hold[data-stage="create"] .hold-form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 22px; padding: 12px 18px; }
  #hold[data-stage="create"] .hold-form > * { grid-column: 1 / -1; }
  #hold[data-stage="create"] .hold-form > .hold-field-bots { grid-column: 1; }
  #hold[data-stage="create"] .hold-form > .hold-field-level { grid-column: 2; }
}
@media (max-height: 820px), (max-width: 760px) {
  #hold[data-stage="create"] .hold-foot {
    position: sticky; bottom: calc(-1 * clamp(16px, 3vh, 34px)); z-index: 3;
    margin-top: 6px;
    padding-bottom: calc(10px + clamp(16px, 3vh, 34px) + env(safe-area-inset-bottom, 0px));
    background:
      linear-gradient(90deg, rgba(198, 168, 91, .5), rgba(198, 168, 91, .12)) top left / 100% 1px no-repeat,
      linear-gradient(rgba(4, 6, 11, .92), rgb(4, 6, 11) 18px);
  }
}

/* ---- menus-ux-26 (2026-10-08): Public Games reads as rooms, not a table -----
   Each room is a 64 px card: its name in the serif over the arena and host,
   its seats as pips (people, then bots, then open), its state as a tag.
   Refresh is a glyph beside ONLINE; the latency shows only as a warning. The
   empty state is a body-size line in the list's place; its two actions are
   the foot's own buttons, a hand's width below, not drawn twice. */
#hold .hold-titleside { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
#hold .hold-titleside .hold-online { margin: 0; }
#hold .hold-online.is-slow .hold-online-ms { color: var(--ui-lamp); }
#hold .hold-refresh {
  display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 2px; background: rgba(16, 23, 34, .74);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .45); color: var(--ui-ink); cursor: pointer;
}
#hold .hold-refresh:hover { background: rgba(26, 36, 50, .9); box-shadow: inset 0 0 0 1px var(--ui-brass); }
#hold .hold-refresh svg { width: 18px; height: 18px; }
#hold .hold-game { grid-template-columns: minmax(0, 1fr) auto 92px 112px; gap: 18px; min-height: 64px; padding: 10px 18px; }
#hold .hold-game-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#hold .hold-game-name b { overflow: hidden; text-overflow: ellipsis; font: 700 19px/1.15 var(--hold-serif); letter-spacing: .03em; }
#hold .hold-game-name em { overflow: hidden; text-overflow: ellipsis; font-style: normal; font-size: 14px; letter-spacing: .04em; color: var(--ui-muted); }
#hold .hold-game.is-on .hold-game-name em { color: rgba(34, 23, 14, .75); }
#hold .hold-pips { display: flex; gap: 5px; }
#hold .hold-pips i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(198, 168, 91, .7); }
#hold .hold-pips .is-human { background: var(--ui-lamp-core); box-shadow: none; }
#hold .hold-pips .is-bot { background: rgba(198, 168, 91, .55); box-shadow: none; }
#hold .hold-game.is-on .hold-pips i { box-shadow: inset 0 0 0 1.5px rgba(34, 23, 14, .55); }
#hold .hold-game.is-on .hold-pips .is-human { background: var(--ui-gold-ink); box-shadow: none; }
#hold .hold-game.is-on .hold-pips .is-bot { background: rgba(34, 23, 14, .35); box-shadow: none; }
#hold .hold-game .hold-num { text-align: right; font-size: 17px; }
#hold .hold-game .hold-status {
  justify-self: end; padding: 6px 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px currentColor;
  font: 400 11px/1 var(--hold-caps); letter-spacing: .14em; text-transform: uppercase;
}
#hold .hold-games-empty { margin: 0; padding: 20px 18px; background: rgba(16, 23, 34, .74); color: var(--ui-ink); font-size: 16px; }
@media (max-width: 760px) {
  #hold .hold-game { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 10px 14px; }
  #hold .hold-game > .hold-pips { display: none; }
  #hold .hold-game-name b { font-size: 17px; }
}

/* fox-door (GLOW_DOOR_FAST): a press taken before the game has loaded answers
   at once. index.html sets data-early; the prompt lights fully and quickens
   until the door takes the press (front-door.js leavePress clears it). */
#hold[data-early] #hold-press {
  opacity: 1;
  text-shadow: 0 2px 0 var(--ui-stone-0), 0 0 10px rgba(4, 6, 11, .95), 0 0 30px rgba(255, 196, 102, .9);
}
@keyframes hold-press-taken { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: no-preference) {
  #hold[data-early] #hold-press { animation: hold-press-taken 640ms ease-in-out infinite; }
}

/* -- fox-phone (GLOW_PHONE_BRIDGE): the gated card, alive and with a way back --
   The live shot leads the card (the room's live card, or a featured Moment
   playing muted), the gold sends the link to a laptop, and two quiet rows
   below are the calendar file and the fox board. Off, none of this shows. */
#hold .hold-phone-live:not([hidden]) ~ .hold-phone-art { grid-row: 2 / 4; }
#hold .hold-phone-live { grid-row: 1; grid-column: 1 / -1; position: relative; aspect-ratio: 1200 / 630; margin: -2px -4px 8px;
  overflow: hidden; background: var(--ui-stone-0); box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .45); }
#hold .hold-phone-live[hidden] { display: none; }
/* Under the title, before the door has loaded (bootPhoneLive). */
#hold .hold-press-live { width: min(354px, calc(100vw - 36px)); margin-top: 22px; }
#hold .hold-press-live[hidden] { display: none; }
/* r2-door (GLOW_DOOR_ROOM): the room under the prompt, small and quiet. */
#hold .hold-press-room { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font: 500 clamp(13px, 1.1vw, 16px)/1 var(--hold-body);
  letter-spacing: .16em; color: var(--ui-ink); text-shadow: 0 1px 0 var(--ui-stone-0), 0 0 10px rgba(4, 6, 11, .95); }
#hold .hold-press-room[hidden] { display: none; }
#hold .hold-press-room-face { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(198, 168, 91, .6); }
#hold .hold-press-live > .hold-phone-live { margin: 0; }
#hold .hold-phone-live > img, #hold .hold-phone-live > canvas, #hold .hold-phone-live > video { display: block; width: 100%; height: 100%; object-fit: cover; }
#hold .hold-phone-live > [hidden] { display: none; }
#hold .hold-phone-pip { display: inline-block; width: 10px; height: 10px; margin-left: auto; border-radius: 50%;
  background: var(--ui-lamp); box-shadow: 0 0 0 3px rgba(9, 17, 13, .6); }
/* The live room card (phone-gate.js roomCardEl): the map's art under a dusk
   wash, where and what along the top, then each side's names, Cobalt left. */
#hold .hold-phone-room { position: relative; height: 100%; display: grid; grid-template-rows: auto auto 1fr; padding: 10px 12px; }
#hold .hold-phone-room > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
#hold .hold-phone-room::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(5, 7, 10, .55), rgba(5, 7, 10, .82)); }
#hold .hold-phone-room > :not(img, video) { position: relative; z-index: 1; }
#hold .hold-phone-room header { display: flex; align-items: center; gap: 10px; }
#hold .hold-phone-room header b { font: 700 18px/1 var(--hold-serif); letter-spacing: .08em; color: var(--ui-lamp-core); }
#hold .hold-phone-room header span { font-size: 12px; letter-spacing: .14em; opacity: .85; }
#hold .hold-phone-state { margin: 4px 0 0; font-size: 12px; letter-spacing: .14em; opacity: .9; }
#hold .hold-phone-state strong { margin-left: 10px; font: 700 15px/1 var(--hold-serif); letter-spacing: .1em; color: var(--ui-ink); }
#hold .hold-phone-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: end; }
#hold .hold-phone-sides ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; min-width: 0; }
#hold .hold-phone-sides ul[data-side="1"] { text-align: right; }
#hold .hold-phone-sides li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 700 15px/1.25 var(--hold-serif); color: var(--ui-mate); }
#hold .hold-phone-sides ul[data-side="1"] li { color: var(--ui-danger); }
#hold .hold-phone-sides li:is(.is-bots, .is-open) { font-weight: 400; font-size: 11px; line-height: 1.4; font-family: inherit; letter-spacing: .14em; color: var(--ui-ink); opacity: .75; }
@media (prefers-reduced-motion: no-preference) {
  #hold .hold-phone-pip { animation: hold-phone-pip 1.4s ease-in-out infinite; }
}
@keyframes hold-phone-pip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}
#hold .hold-phone-back { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 10px; }
#hold .hold-phone-back[hidden] { display: none; }
#hold .hold-phone-way { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 0 12px; min-height: 52px;
  padding: 8px 12px; border: 0; border-radius: 2px; background: rgba(9, 17, 13, .6); box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .35);
  color: var(--ui-ink); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
#hold .hold-phone-way:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px var(--ui-brass); }
#hold .hold-phone-way > svg, #hold .hold-phone-way > .hold-kulnet { grid-row: 1 / 3; width: 30px; height: 30px; color: var(--ui-brass); }
#hold .hold-phone-way b { font: 700 15px/1.2 var(--hold-serif); letter-spacing: .08em; color: var(--ui-lamp-core); }
#hold .hold-phone-way span { font-size: 13px; line-height: 1.25; opacity: .8; }
/* Kulnet's idle loop (front-lobby.css KULNET_PERCH), 80px art at 30px, pixelated. */
#hold .hold-phone-way > .hold-kulnet { --kn-frames: 8; display: block; background: url('./art/kulnet/idle-east.png') no-repeat 0 0 / 240px 30px; image-rendering: pixelated; }
@media (prefers-reduced-motion: no-preference) {
  /* The lobby perch's own steps (front-lobby.css), the one stepped strip the
     door's repaint rule allows (door-ambient.test.mjs). */
  #hold .hold-phone-way > .hold-kulnet { animation: hold-kulnet-idle 1.2s steps(8) infinite; }
}

/* r2-phone (GLOW_PHONE_MOTION): over the room's own map moving, the wash keeps
   to the top and bottom bands where the words are, so the play shows through. */
#hold .hold-phone-room:has(> video)::after {
  background: linear-gradient(180deg, rgba(5, 7, 10, .62), rgba(5, 7, 10, 0) 38%, rgba(5, 7, 10, 0) 58%, rgba(5, 7, 10, .8)); }

/* r3-phone-live (GLOW_PHONE_LIVE): the room's real match in the art's place
   (phone-live.js), the map's still under it until frames move. The wash keeps
   to the top and bottom bands like the loop's. Kulnet perches on the frame's
   top edge, half outside it, never on the field. */
#hold .hold-phone-room > .hold-phone-watch { position: absolute; inset: 0; z-index: 0; }
#hold .hold-phone-watch > :is(img, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#hold .hold-phone-watch > canvas { opacity: 0; transition: opacity .25s; }
#hold .hold-phone-watch[data-on] > canvas { opacity: 1; }
#hold .hold-phone-room:has(> .hold-phone-watch[data-on])::after {
  background: linear-gradient(180deg, rgba(5, 7, 10, .62), rgba(5, 7, 10, 0) 30%, rgba(5, 7, 10, 0) 64%, rgba(5, 7, 10, .8)); }
#hold .hold-phone-live:has(.hold-phone-perch) { overflow: visible; }
#hold .hold-phone-room:has(.hold-phone-perch) { overflow: hidden; }
#hold .hold-phone-perch { display: none; }
#hold .hold-phone-live:has(.hold-phone-perch) { --perch: 30px; }
#hold .hold-phone-live:has(.hold-phone-perch)::before { content: ""; position: absolute; z-index: 3; right: 10px; top: calc(var(--perch) * -1 + 3px);
  width: var(--perch); height: var(--perch); background: url('./art/kulnet/idle-east.png') no-repeat 0 0 / calc(var(--perch) * 8) var(--perch);
  image-rendering: pixelated; transform: scaleX(-1); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  #hold .hold-phone-live:has(.hold-phone-perch)::before { animation: hold-kulnet-idle 1.2s steps(8) infinite; }
}

/* r2-phone (GLOW_PHONE_BRIDGE): the kit's order and its one gold. ADD TO
   CALENDAR is the gold (it brings the phone back at Glow Hour), SEND TO MY
   COMPUTER the quiet row under it, SEE THE BOARD last. The back group's rows
   join the card's own grid so the send can sit between them. */
#hold[data-phone-bridge] .hold-phone-back { display: contents; }
#hold[data-phone-bridge] #hold-phone-cal { order: 1; grid-column: 1 / -1; margin-top: 10px;
  background: linear-gradient(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[data-phone-bridge] #hold-phone-cal :is(b, span, svg) { color: var(--ui-gold-ink); opacity: 1; }
#hold[data-phone-bridge] #hold-phone-cal svg circle { fill: var(--ui-gold-ink); }
#hold[data-phone-bridge] #hold-phone-cal:is(:hover, :focus-visible) { filter: brightness(1.08); }
#hold[data-phone-bridge] #hold-phone-copy { order: 2; margin-top: 8px; background: rgba(9, 17, 13, .6); border: 0;
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .35); color: var(--ui-lamp-core); }
#hold[data-phone-bridge] #hold-phone-copy b { font-size: 15px; letter-spacing: .08em; }
#hold[data-phone-bridge] #hold-phone-fox { order: 3; grid-column: 1 / -1; margin-top: 8px; }
#hold .hold-phone-way span[hidden] { display: none; }
/* Under a linked board (front-door.js hangPhoneCard): the board is the
   promise, so the card below it is only the keyboard line and the way back. */
#hold[data-phone-under="board"] .hold-phone { margin-top: 18px; }
#hold[data-phone-under="board"] :is(#hold-phone-live, #hold-phone-fox) { display: none; }
#hold[data-phone-bridge] #hold-phone-why { display: none; }
#hold #hold-phone-sell[hidden] { display: none; }
#hold[data-phone-under="board"] .hold-phone { text-transform: none; }