/* S-HALL-L1B — THE DRESS. The game's chrome on L1's bones; reskin-in-place, no flow touched (T42).
   Authority: LOBBY_DESIGN v1.1 amendment 2026-08-27 (the Hall wears THE GAME's dress, never the site's
   treasury/store idioms) + the ruled mockup canvas "The Hall", 13 screens, verdict of 2026-09-09
   (screens 1-13 APPROVED as drawn; drift D1-D12 dressed in the mockups' language).

   TOKENS are the game's DS §1 canonical block, pulled read-only from game/index.html — not re-invented here.
   GROUND is assets/hall/backdrop_tall.webp (phone) / backdrop_wide.webp (wide) — the round-two statue walls.
   THE DRESS TOUCHES NO MARKUP: hall.js is byte-identical; every data-* hook, the three ids the suites query
   (#hall-root, #hall-sheet-host, #hall-friend-code) and the three classes they count (.hall-rail-chip,
   .hall-strand-line, .hall-sheet-err) are styled, never hidden. Ruled copy is never text-transformed. */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400&display=swap");

:root {
  /* — the game's DS §1 canonical — */
  --ink:#070402;                     /* page ground */
  --plaque-hi:#2b1c0a;               /* plaque face, top */
  --plaque-lo:#160d05;               /* plaque face, bottom */
  --gold-hi:#e8c874;                 /* emphasis text, fills */
  --gold-bright:#f4df9a;             /* hover */
  --gold-dim-25:rgba(232,200,116,.25);
  --parchment:#d8c9a3;               /* body text */
  --ember:#ff8c33;                   /* fire accent — never used for money in this room */
  --gold:#E8C874; --gold-2:#C9A84C; --gold-quiet:#8a7434;
  --paper:#e8ddc0; --paper-dim:#cbbd96; --paper-faint:#8f8470;
  --line:#3a2e14; --hi:#F0D080;
  --crimson:#e0483c; --crimson-dim:#7a231d;

  /* — the canvas's chrome grammar — */
  --frost:rgba(0,0,0,.42);
  --frost-line:var(--gold-quiet);
  --r:12px;                          /* panel radius */
  --cz:Cinzel,Georgia,'Times New Roman',serif;
  --cp:'Crimson Pro',Georgia,'Times New Roman',serif;
  --plate-clip:polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);

  /* — the three tier inks the mockups set — */
  --t-free:#cbbd96; --t-bronze:#c98a4b; --t-silver:#d3d6da; --t-gold:#E8C874; --t-diamond:#bfe9ff;
}

*, *::before, *::after { box-sizing: border-box; }

/* THE UA RESET. The browser paints <button> with its own grey face and Arial; every control in this room
   draws its own surface, so the default must be cleared once here or it leaks through anything that only
   sets a colour (the sheet's close, the tier rows, the faction sigils). */
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; border-radius: 0; padding: 0; text-align: inherit; }

/* ══ THE GROUND ══ the canvas's plate, then its four-stop scrim, then the room on top. */
html { background: var(--ink); }
body {
  margin: 0; min-height: 100%; background: var(--ink);
  color: var(--paper); font-family: var(--cp); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* THE WALLS RIDE A FIXED LAYER, not the body's own background. On body, `cover` scales to the DOCUMENT height —
   so a long floor would blow the image up and crop the two statues clean out of frame, losing exactly what the
   art is for. A fixed layer covers the VIEWPORT at any page length, identically in every browser (and without
   background-attachment: fixed, which iOS does not honour). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--ink) url("../assets/hall/backdrop_tall.webp") center top / cover no-repeat;
}
/* THE DARK-CENTRE LAW, set to the art rather than to a guess. Measured column luminance over the top 45%:
   backdrop_tall's corridor runs 25%-80% of its width (517px of 941); backdrop_wide's runs 20%-85% (1086px of
   1672); both centre at ~52.5%. Content must sit on that corridor. Cropping the statues out would take the
   art's soul with them, so the answer is CONTAINMENT + SCRIM: the statues keep the top band, where they are
   meant to be seen, and the scrim deepens fast so every panel below the title lands on near-black.
   A second, radial layer pins the darkness to the corridor's centre instead of only to the vertical. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;   /* same level as the walls, painted after them */
  background:
    radial-gradient(135% 78% at 52.5% 2%, rgba(7,4,2,0) 0%, rgba(7,4,2,.22) 46%, rgba(7,4,2,.72) 78%, var(--ink) 100%),
    linear-gradient(180deg, rgba(7,4,2,0) 0%, rgba(7,4,2,.18) 22%, rgba(7,4,2,.66) 44%, rgba(7,4,2,.93) 66%, var(--ink) 84%);
}
body > * { position: relative; z-index: 1; }

/* ══ NAV ══ dressed, every link kept (verdict A2). The mockup's back-arrow entry is DEFERRED to the
   MULTIPLAYER-button task in the game repo, where "the game is the front door" lands as one thought. */
.hall-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--frost); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gold-dim-25);
}
/* S-HALL-DRESS-2 (U1) — the brand is the GAME'S MARK (assets/brand/logo.webp, the same file index.html,
   store.html and dashboard.html already wear), not a word set in Cinzel. The <span> stays in the DOM as the
   no-CSS fallback and the <img>'s alt carries the full title, so the brand reads even if the file 404s. */
.hall-nav-brand {
  display: inline-flex; align-items: center; text-decoration: none; color: var(--gold);
  font-family: var(--cz); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}
.hall-nav-brand img { height: 34px; width: auto; display: block; }
.hall-nav-brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hall-nav-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hall-nav-links a, .hall-nav-here {
  font-family: var(--cz); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-dim); text-decoration: none;
}
.hall-nav-links a:hover { color: var(--gold-bright); }
.hall-nav-here { color: var(--gold); border-bottom: 1px solid var(--gold-2); padding-bottom: 2px; }

/* ══ WRAP + TITLE ══ the mockup's rule-flanked h1. */
.hall-wrap { max-width: 430px; margin: 0 auto; padding: 18px 16px 96px; display: flex; flex-direction: column; gap: 14px; }
.hall-title {
  font-family: var(--cz); font-weight: 400; font-size: 17px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); text-align: center; margin: 4px 0 0; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.hall-title::before, .hall-title::after {
  content: ""; height: 1px; width: 46px; flex: 0 0 auto;
  background: linear-gradient(90deg, transparent, var(--gold-quiet));
}
.hall-title::after { background: linear-gradient(90deg, var(--gold-quiet), transparent); }
.hall-root { display: flex; flex-direction: column; gap: 14px; }

/* ══ THE FROST PANEL ══ one object, reused by every card the mockups draw as a panel. */
.hall-header, .hall-plaque, .hall-lostcard, .hall-gate, .hall-settle, .hall-match,
.hall-ceremony, .hall-limit-block, .hall-empty, .hall-dealing, .hall-strand-banner {
  background: var(--frost); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--frost-line); border-radius: var(--r);
}

/* ══ HEADER STRIP ══ liquid, its coin, and the limit line. */
.hall-header { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.hall-liquid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--cp); }
.hall-liquid-label {
  font-family: var(--cz); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim);
}
.hall-liquid b {
  font-family: var(--cz); font-size: 16px; letter-spacing: .04em; color: var(--gold); font-weight: 400;
  font-variant-numeric: tabular-nums;
  padding-left: 22px;
  background: url("../assets/hall/coin.png") left center / 16px 16px no-repeat;
}
.hall-signedin { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--paper-dim); }
.hall-signedin-addr { font-family: var(--cz); font-size: 11px; letter-spacing: .08em; color: var(--gold); }
.hall-limit { font-size: 12.5px; color: var(--paper-dim); font-style: italic; }
.hall-limit-invite, .hall-limit-set { font-size: 12.5px; font-style: italic; }
.hall-account-note { font-size: 13px; color: var(--paper); }

/* ══ THE COVENANT ══ the room's one standing promise. */
/* the covenant is the ONE line with no panel behind it — on the statue walls it can land on a lit banner,
   so it carries its own shadow rather than trusting the scrim to be dark everywhere it goes. */
.hall-covenant {
  font-family: var(--cz); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--paper-dim); text-align: center; margin: 0; padding: 2px 0;
  text-shadow: 0 1px 3px rgba(7,4,2,.95), 0 0 12px rgba(7,4,2,.85);
}
.hall-title { text-shadow: 0 1px 4px rgba(7,4,2,.9); }

/* ══ THE RAIL ══ the mockup's door grammar: medallion over label over price, count beneath.
   L-N1 keeps the horizontal chip scroll. Never hidden — the suite counts .hall-rail-chip. */
.hall-rail {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hall-rail::-webkit-scrollbar { display: none; }
.hall-rail-chip {
  flex: 0 0 auto; width: 92px; padding: 10px 4px 9px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; cursor: pointer; text-align: center;
  background: var(--frost); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--frost-line); border-radius: var(--r); color: var(--paper-dim);
  transition: border-color .18s, box-shadow .18s;
}
.hall-chip-label { font-family: var(--cz); font-size: 10px; letter-spacing: .16em; color: var(--gold); }
.hall-chip-usd { font-family: var(--cp); font-size: 10.5px; letter-spacing: .06em; color: var(--paper-dim); }
.hall-chip-count {
  font-family: var(--cz); font-size: 14px; color: var(--hi); font-variant-numeric: tabular-nums;
}
.hall-chip-count.blank { color: var(--gold-quiet); }
.hall-rail-chip.on {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(232,200,116,.35) inset, 0 0 18px rgba(232,200,116,.15);
}
.hall-rail-chip:focus-visible, .hall-act:focus-visible, .hall-door:focus-visible,
.hall-nav-links a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.hall-glyph { width: 26px; height: 26px; display: block; }
/* S-HALL-DRESS-3 (M1) — the tier medallion is a raster on its own dark ground, so it wears a rounded-square
   cell exactly as the faction sigils do. It is bigger than the old sprite mark because the art earns it. */
.hall-medallion {
  width: 38px; height: 38px; border-radius: 9px; object-fit: cover;
  border: 1px solid var(--gold-dim-25); background: var(--plaque-lo);
}
.hall-rail-chip .hall-medallion { width: 42px; height: 42px; }
.hall-rail-chip.on .hall-medallion { border-color: var(--gold); box-shadow: 0 0 12px rgba(232,200,116,.22); }
.hall-tier-rows .hall-medallion, .hall-plaque-head .hall-medallion, .hall-seat-opp .hall-medallion {
  width: 30px; height: 30px; border-radius: 7px;
}
/* S-HALL-DRESS-3 (R5) — the six tier inks tinted the SPRITE through currentColor, which a raster ignores.
   Rather than leave six dead rules, each door keeps its ink ON ITS LABEL: the rail still reads bronze,
   silver, gold, diamond at a glance, now in the word instead of the mark. */
.tier-free .hall-chip-label, .tier-free .hall-tier-label { color: var(--t-free); }
.tier-bronze .hall-chip-label, .tier-bronze .hall-tier-label { color: var(--t-bronze); }
.tier-silver .hall-chip-label, .tier-silver .hall-tier-label { color: var(--t-silver); }
.tier-gold .hall-chip-label, .tier-gold .hall-tier-label { color: var(--t-gold); }
.tier-diamond .hall-chip-label, .tier-diamond .hall-tier-label { color: var(--t-diamond); }
.tier-friend .hall-chip-label, .tier-friend .hall-tier-label { color: var(--gold); }
.hall-chip-all .hall-chip-label { color: var(--t-free); }

/* ══ THE PLATE ══ the canvas's hexagonal act, with its two gold lozenges. Every standing act wears it. */
.hall-door, .hall-act, .hall-act-seat, .hall-act-cancel-open, .hall-act-close-free {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 13px 28px; margin: 0 4px; border: 1px solid var(--gold-quiet);
  background: linear-gradient(180deg, var(--plaque-hi), var(--plaque-lo));
  clip-path: var(--plate-clip);
  font-family: var(--cz); font-size: 13px; font-weight: 600; letter-spacing: .22em; line-height: 1.2;
  text-transform: uppercase; text-align: center; color: var(--gold); text-decoration: none;
  cursor: pointer; transition: color .18s, border-color .18s;
}
.hall-door:hover, .hall-act:hover, .hall-act-seat:hover, .hall-act-cancel-open:hover, .hall-act-close-free:hover { color: var(--gold-bright); border-color: var(--gold); }
.hall-door[disabled], .hall-act[disabled], .hall-act-seat[disabled], .hall-act-inert {
  color: var(--paper-faint); border-color: var(--line);
  background: linear-gradient(180deg, #1a120a, #0d0804); cursor: default;
}
.hall-doors { display: flex; gap: 10px; }
.hall-doors > * { flex: 1; }
/* measured at 390: each door gets 166px, so the plate's default 13px/.22em wrapped to two lines */
.hall-doors .hall-door { padding: 13px 12px; font-size: 9.5px; letter-spacing: .10em; white-space: nowrap; }
.hall-door-open { background: linear-gradient(180deg, #4a3410, #1c1206); border-color: var(--gold); color: var(--hi); }
.hall-plaque-acts > *, .hall-strand-acts > *, .hall-lostcard-act .hall-act, .hall-controls-act .hall-act {
  padding: 10px 18px; font-size: 10.5px; letter-spacing: .14em; min-height: 40px;
}
/* TAKE THIS SEAT is the one act the whole room exists for — it is lit, like the open door. */
.hall-act-seat {
  background: linear-gradient(180deg, #4a3410, #1c1206); border-color: var(--gold); color: var(--hi);
}

/* the lozenges — drawn on a wrapper so the clipped plate keeps its points */
.hall-doors, .hall-plaque-acts, .hall-strand-acts, .hall-lostcard-act { position: relative; }

/* ══ THE FLOOR ══ plaques as frost panels; your own table lit gold. */
.hall-floor { display: flex; flex-direction: column; gap: 10px; }
.hall-plaque { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.hall-plaque-you {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(232,200,116,.3) inset, 0 0 22px rgba(232,200,116,.14);
}
.hall-plaque-head, .hall-seat-opp, .hall-plaque-opener {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hall-plaque-head { justify-content: space-between; }
.hall-plaque-stake {
  font-family: var(--cz); font-size: 15px; letter-spacing: .06em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
/* D11 — the plaque address, in screen 2's opener grammar */
.hall-plaque-addr { font-family: var(--cp); font-size: 13px; letter-spacing: .04em; color: var(--paper); }
/* the inline mark: a small rounded square for the same reason the picker cell is one. The EMPTY face keeps
   its own mark-shaped cell (dashed, no art) — a table with no faction is never given someone else's sigil. */
.hall-sigil, .hall-sigil-empty {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--gold-quiet); flex: 0 0 auto;
}
.hall-sigil { object-fit: cover; display: block; }
.hall-sigil-empty { border-style: dashed; background: rgba(0,0,0,.25); }
.hall-you-tag {
  font-family: var(--cz); font-size: 9px; letter-spacing: .2em; color: var(--hi);
  border: 1px solid var(--gold-2); border-radius: 999px; padding: 3px 8px;
}
.hall-plaque-wait { font-style: italic; font-size: 13px; color: var(--paper-dim); }
.hall-plaque-acts, .hall-strand-acts, .hall-lostcard-act { display: flex; gap: 10px; flex-wrap: wrap; }
.hall-plaque-acts > *, .hall-strand-acts > * { flex: 1 1 auto; }
.hall-tier-note, .hall-fee-line, .hall-pot-line, .hall-seat-rule {
  font-size: 13px; color: var(--paper-dim); margin: 0;
}

/* ══ SCREEN 3 — THE EMPTY ROOM ══ a resting board, one honest line, two ways out.
   D6: the practice line takes the canvas's quiet italic note. */
.hall-empty { padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
/* S-HALL-DRESS-3 (M3) — the arena, served from THIS repo. It is the room's centrepiece at rest, so it is
   given real size and is no longer dimmed to .55: the round-two plate is already lit for this. */
.hall-empty-board {
  width: 100%; max-width: 280px; border: 1px solid var(--gold-dim-25); border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 26px rgba(0,0,0,.55);
}
.hall-empty-board img, .hall-empty-board picture { display: block; width: 100%; height: auto; }
.hall-empty-board img { opacity: .92; }
.hall-empty-line { text-align: center; font-style: italic; font-size: 15px; color: var(--paper-dim); line-height: 1.45; }
.hall-empty-doors { display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: 100%; }
.hall-empty-practice {
  font-family: var(--cp); font-style: italic; font-size: 12.5px; letter-spacing: 0; text-transform: none;
  font-weight: 400; color: var(--paper-faint); background: none; border-color: var(--line); clip-path: none;
  border-radius: 10px; min-height: 38px; padding: 9px 14px;
}
.hall-empty-tier { font-family: var(--cz); font-size: 10px; letter-spacing: .2em; color: var(--paper-dim); text-align: center; }

/* ══ STATE LINES ══ the room's voice: italic parchment, never shouted. Ruled copy is never transformed. */
.state-line { font-family: var(--cp); font-size: 14px; color: var(--paper-dim); line-height: 1.5; }
.state-line.warn, .warn { color: var(--crimson); }

/* ══ THE THREE FACES ══ busy, empty and inert must never read as one another (P5).
   BUSY: gold, breathing, a pulse-dot.  EMPTY: parchment, still, a full room-card.
   DEAD/INERT: crimson-edged, a card that ASKS FOR A HAND — never a quiet empty room. */
.hall-busy {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 14px; text-align: center; color: var(--gold); font-style: italic; font-size: 14.5px;
  border: 1px dashed var(--gold-dim-25); border-radius: var(--r); background: rgba(0,0,0,.28);
}
.hall-busy::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  animation: hall-pulse 1.4s ease-in-out infinite;
}
@keyframes hall-pulse { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
/* D2/D3/D4 — sign-in, reconnect and the lost table share ONE card, in screen 10's gate grammar. */
.hall-floor-lost { align-items: stretch; }
.hall-lostcard {
  padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center;
  border-color: var(--crimson-dim); background: rgba(40,10,6,.34);
  color: var(--paper); font-size: 14.5px;
}
.hall-lostcard::before {
  content: ""; width: 34px; height: 1px; background: var(--crimson-dim);
}

/* ══ THE GATE (screen 10) ══ the logo band over the Torana's one paragraph. D12: the door is a primary plate. */
.hall-gate {
  padding: 0 0 18px; display: flex; flex-direction: column; gap: 14px; align-items: center; overflow: hidden;
}
.hall-gate::before {
  content: ""; display: block; width: 100%; height: 96px;
  background: url("../assets/hall/logo_band.jpg") center center / cover no-repeat;
  border-bottom: 1px solid var(--gold-dim-25); opacity: .85;
}
.hall-gate-line { margin: 0 16px; text-align: center; font-size: 14.5px; line-height: 1.5; color: var(--paper); }
.hall-gate-door { background: linear-gradient(180deg, #4a3410, #1c1206); border-color: var(--gold); color: var(--hi); }
.hall-connect { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 18px 16px; }

/* ══ D1 — THE STRANDED STAKE ══ screen 8's strip grammar (big / line / quiet), lit like a plaque of yours.
   The ruled line is never transformed and never hidden — p7dom reads its text through all three forms. */
.hall-strand-banner {
  margin-top: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  border-color: var(--gold); background: rgba(74,52,16,.30);
}
.hall-strand-line { font-family: var(--cp); font-size: 14.5px; line-height: 1.5; color: var(--paper); }
.hall-strand-check { font-style: italic; font-size: 12.5px; color: var(--paper-faint); }
.hall-strand-reopen, .hall-strand-finish {
  background: linear-gradient(180deg, #4a3410, #1c1206); border-color: var(--gold); color: var(--hi);
}
.hall-strand-cancel { color: var(--paper-dim); }

/* ══ SHEETS (screens 4, 5, 6, 9) ══ the ceremony panel: a scrim, then one frost sheet. */
.hall-sheet-overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(7,4,2,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.hall-sheet {
  width: 100%; max-width: 430px; max-height: 92vh; overflow-y: auto;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, #120b04, var(--ink));
  border: 1px solid var(--frost-line); border-radius: var(--r) var(--r) 0 0;
}
.hall-sheet-title {
  font-family: var(--cz); font-size: 15px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); text-align: center; margin: 0;
}
.hall-sheet-sub {
  font-family: var(--cz); font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--paper-dim); text-align: center; margin: 0;
}
.hall-sheet-act { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hall-sheet-act > * { flex: 1 1 auto; }
.hall-sheet-close {
  font-family: var(--cz); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-dim); background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 18px; cursor: pointer;
}
.hall-sheet-close:hover { color: var(--gold-bright); border-color: var(--gold-2); }
.hall-sheet-foot { display: flex; justify-content: center; padding-top: 4px; }
.hall-sheet-err { color: var(--crimson); font-size: 13.5px; text-align: center; margin: 0; }
.hall-sheet-switch { font-size: 13px; color: var(--paper-dim); text-align: center; }
/* S-HALL-DRESS-2 (U2) — THE PICKER. Four equal cells on one grid, even gutters, the name clear of the mark.
   The cells are ROUNDED SQUARES, not circles: only the Deva sigil is a true roundel — the other three are
   shield and mask shapes that fill their square, and a 50% radius cropped three of the four.
   The button shell is untouched by the dress: .hall-faction-sigil is what hall.js binds its handler to, and
   data-faction is what six suites click. Only what sits inside the button changed. */
/* .hall-sheet-faction is the WRAPPER (the "Your faction" label above the picker); .hall-faction is the picker
   itself. L1b styled them as one and the label sat beside the marks; making both a 4-column grid starved the
   picker to an 82px column split four ways. The wrapper stacks; only the picker is the grid. */
.hall-sheet-faction { display: flex; flex-direction: column; gap: 8px; }
.hall-faction {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start;
}
.hall-faction-sigil {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
  padding: 7px 4px 8px; border: 1px solid transparent; border-radius: 12px;
  background: none; cursor: pointer; transition: background .18s, border-color .18s;
}
.hall-faction-sigil .hall-sigil {
  width: 100%; max-width: 64px; aspect-ratio: 1 / 1; height: auto; display: block;
  object-fit: cover; border-radius: 10px; border: 1px solid var(--gold-dim-25);
  transition: border-color .18s, box-shadow .18s;
}
.hall-faction-sigil > span {
  font-family: var(--cz); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-dim); text-align: center; line-height: 1.2;
}
/* selection reads two ways at once: the ground lifts and the mark's edge lights */
.hall-faction-sigil.on { background: rgba(232,200,116,.08); border-color: var(--gold-dim-25); }
.hall-faction-sigil.on .hall-sigil {
  border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 16px rgba(232,200,116,.28);
}
.hall-faction-sigil.on > span { color: var(--hi); }
.hall-faction-sigil:hover .hall-sigil { border-color: var(--gold-2); }

/* tier rows (screen 4) */
.hall-tier-rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.hall-tier-rows > * {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  background: rgba(0,0,0,.30); border-bottom: 1px solid var(--line); cursor: pointer;
}
.hall-tier-rows > *:hover { background: rgba(232,200,116,.05); }
.hall-tier-rows > *:last-child { border-bottom: 0; }
.hall-tier-rows > *.on { background: rgba(232,200,116,.07); }
.hall-tier-rows > *[disabled], .hall-tier-rows > *.dim { opacity: .45; cursor: default; }
.hall-tier-label { font-family: var(--cz); font-size: 11px; letter-spacing: .16em; color: var(--gold); flex: 1; }
.hall-tier-stake { font-size: 13px; color: var(--paper); font-variant-numeric: tabular-nums; }
.hall-tier-usd { font-size: 11px; color: var(--paper-dim); margin-left: 6px; }

/* the ruled money copy (screens 4, 5, 6) — the room's plain voice, set to read */
.hall-commit-text {
  font-size: 14.5px; line-height: 1.5; color: var(--paper); margin: 0;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.3);
}
.hall-free-refusal, .hall-friend-note, .hall-friend-lock-line, .hall-resume-note {
  font-size: 13.5px; color: var(--paper-dim); margin: 0;
}

/* D5 — THE FRIEND CODE (screen 6): the code set wide in Cinzel; the input in the canvas's field. */
.hall-code-chip {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--gold-quiet); border-radius: 10px; background: rgba(0,0,0,.6);
}
.hall-code-label { font-family: var(--cz); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim); }
.hall-code-value { font-family: var(--cz); font-size: 20px; letter-spacing: .36em; color: var(--hi); }
.hall-code-copy, .hall-limit-copy, .hall-share {
  font-family: var(--cz); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-dim); background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; cursor: pointer;
}
.hall-code-copy:hover, .hall-limit-copy:hover, .hall-share:hover { color: var(--gold-bright); border-color: var(--gold-2); }
.hall-friend-code, .hall-limit-input, .hall-friend-opponent, .hall-friend-stake {
  width: 100%; padding: 12px 14px; font-family: var(--cp); font-size: 15px; color: var(--paper);
  border: 1px solid var(--gold-quiet); border-radius: 10px; background: rgba(0,0,0,.6);
}
.hall-friend-code::placeholder, .hall-limit-input::placeholder,
.hall-friend-opponent::placeholder, .hall-friend-stake::placeholder { color: #6f6250; }

/* D7 — THE CEREMONY (screens 4/5): the two numbered beats, the lit one gold. */
.hall-ceremony { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.hall-ceremony-step {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  font-family: var(--cz); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim);
}
.hall-ceremony-step.on, .hall-ceremony-step .on { color: var(--hi); }
.hall-ceremony-wait { font-style: italic; font-size: 13px; color: var(--paper-dim); text-align: center; }
.hall-ceremony-error { color: var(--crimson); font-size: 13.5px; text-align: center; }

/* D9 — THE LIMIT (screen 9): the field, then two plates side by side. */
.hall-limit-block { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.hall-limit-set { display: flex; gap: 10px; flex-wrap: wrap; }
.hall-limit-set > * { flex: 1 1 auto; }
.hall-limit-invite { font-size: 13px; color: var(--paper-dim); }

/* ══ SCREEN 7 — MATCH FOUND ══ one beat: the opponent named, the stakes locked, the deal. */
.hall-dealing { padding: 22px 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.hall-dealing-opp { display: flex; align-items: center; gap: 10px; }
.hall-dealing-line { font-style: italic; font-size: 15px; color: var(--paper-dim); }

/* ══ SCREEN 12 — THE HALL'S OWN STRIPS ══ dressed in the canvas's grammar. The battle behind them is
   game/ and wire.html territory: untouched, frozen (verdict A3). */
.hall-match { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.hall-mhead, .hall-mhead-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hall-mpill {
  font-family: var(--cz); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--hi);
  border: 1px solid var(--gold-2); border-radius: 999px; padding: 3px 8px;
}
.hall-mstatus { font-family: var(--cz); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.hall-mclock { font-family: var(--cz); font-size: 22px; letter-spacing: .1em; color: var(--hi); font-variant-numeric: tabular-nums; }
.hall-mclock .state-line { font-family: var(--cz); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim); }
.hall-mclock.warn, .hall-mclock.warn b { color: var(--ember); }
.hall-mphase { font-family: var(--cz); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--paper-dim); }
.hall-board { display: flex; flex-direction: column; gap: 8px; }
.hall-board-side, .hall-board-me {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(0,0,0,.3);
}
.hall-board-me { border-color: var(--gold-dim-25); }
.hall-mini {
  font-size: 12.5px; color: var(--paper-dim); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}
.hall-mini b { font-family: var(--cz); color: var(--gold); font-weight: 400; }
.hall-controls { display: flex; flex-direction: column; gap: 8px; }
/* a hand card and an astra target are CHIPS, not plates */
.hall-mull, .hall-tgt {
  font-family: var(--cp); font-size: 12.5px; color: var(--paper); padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.34); cursor: pointer;
}
.hall-mull:hover, .hall-tgt:hover { border-color: var(--gold-2); color: var(--gold-bright); }
.hall-mull.on { border-color: var(--crimson-dim); color: var(--crimson); }
/* the quiet inline words: they sit INSIDE a sentence and must read as part of it */
.hall-open-one, .hall-cancelplay, .hall-retry, .hall-sheet-switch, .hall-limit-invite, .hall-limit-set {
  font-family: inherit; font-size: inherit; color: var(--gold); background: none; border: 0;
  border-bottom: 1px solid var(--gold-dim-25); padding: 0 1px; cursor: pointer;
}
.hall-open-one:hover, .hall-cancelplay:hover, .hall-retry:hover,
.hall-sheet-switch:hover, .hall-limit-invite:hover, .hall-limit-set:hover { color: var(--gold-bright); }
.hall-controls-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hall-hand { display: flex; gap: 6px; flex-wrap: wrap; }
.hall-mresult { font-family: var(--cz); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--hi); }
.hall-mreject, .hall-mleave, .hall-concede, .hall-pass, .hall-cancelplay { color: var(--paper-dim); }
/* D10 — the mulligan confirm, in the strip's own grammar */
.hall-mullconfirm { background: linear-gradient(180deg, #4a3410, #1c1206); border-color: var(--gold); color: var(--hi); }

/* ══ SCREEN 8 — THE SETTLEMENT STRIP ══ big / line / quiet, and D8's cast as the primary plate. */
.hall-settle, .hall-lobby-settle { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
/* The strip's first line IS the ruled money sentence — hall.js emits no separate title element, so it is
   lifted by WEIGHT and INK only. It is never transformed: an uppercased ruled sentence is not the ruled
   sentence, and copyproof + p7dom read these words through doc, code and DOM alike. */
.hall-settle-line { font-size: 14.5px; color: var(--paper); margin: 0; }
.hall-settle-line:first-child { font-size: 15.5px; color: var(--hi); }
.hall-settle-act { display: flex; gap: 10px; flex-wrap: wrap; }
.hall-settle-act > * { flex: 1 1 auto; }
.hall-settle-cast { background: linear-gradient(180deg, #4a3410, #1c1206); border-color: var(--gold); color: var(--hi); }
.hall-settle-abort { color: var(--paper-dim); }
.hall-settle-err { color: var(--crimson); font-size: 13.5px; margin: 0; }
.hall-retry { color: var(--paper-dim); }

/* ══ THE MID RANGE (tablet) ══ still the tall backdrop, whose corridor is 55% of the width and centres at
   52.5%. Below 600px the column is full-bleed and the scrim carries it; from 600 up there is slack to sit
   the column ON the corridor instead of on the viewport, so it does. 54vw is the corridor's 55% less a hair. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .hall-wrap { width: min(430px, 54vw); margin-left: calc(52.5% - min(215px, 27vw)); margin-right: auto; }
}

/* ══ WIDE (screen 13) ══ the same composition, one step calmer: the wide plate, a two-column floor. */
@media (min-width: 900px) {
  body::before { background-image: url("../assets/hall/backdrop_wide.webp"); }
  body::after {
    background:
      radial-gradient(88% 108% at 52.5% 0%, rgba(7,4,2,0) 0%, rgba(7,4,2,.20) 48%, rgba(7,4,2,.74) 84%, var(--ink) 100%),
      linear-gradient(180deg, rgba(7,4,2,0) 0%, rgba(7,4,2,.26) 20%, rgba(7,4,2,.72) 46%, rgba(7,4,2,.96) 76%, var(--ink) 100%);
  }
  /* The corridor at wide is 20%-85% of the width = 832px at 1280 — and it centres at 52.5%, not 50%, because
     the art's two statues are not symmetric. So the column is centred ON THE CORRIDOR rather than on the
     viewport: an 820px column whose left margin is calc(52.5% - 410px). Measured, not guessed. */
  .hall-wrap { width: 820px; max-width: 100%; margin-left: calc(52.5% - 410px); margin-right: auto; padding: 26px 32px 96px; }
  .hall-title { font-size: 21px; }
  .hall-nav-brand img { height: 44px; }
  .hall-faction-sigil .hall-sigil { max-width: 84px; }
  .hall-faction-sigil > span { font-size: 10px; }
  .hall-rail { overflow-x: visible; flex-wrap: wrap; justify-content: center; }
  .hall-floor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .hall-floor-lost { display: flex; }
  .hall-doors { justify-content: flex-end; }
  .hall-doors > * { flex: 0 1 240px; }
  .hall-sheet-overlay { align-items: center; }
  .hall-sheet { border-radius: var(--r); max-height: 86vh; }
  .hall-empty { grid-column: 1 / -1; }
  .hall-empty-board { max-width: 420px; }
}

/* S-HALL-WIRE-1 — THE BATTLE FRAME. A FREE match plays in the game's own screen: a same-origin iframe in its own
   host beside #hall-root (the match screen rewrites #hall-root on every update; the frame must survive that).
   While the matched moment plays, the frame loads unseen beneath it (visibility, not display, so the game
   measures a real viewport).
   S-HALL-FRAME-SIZE-1 — THE FRAME GETS THE GAME'S OWN LAYOUT. The game picks its layout from the FRAME's width:
   its battle screen goes DESKTOP at >=1024 (T71: #app widens to min(1000px, 90vw)); below, it is the PORTRAIT
   520 column. So the frame is sized to the layout, not to the Hall's column (820px wide at >=900, 756 of it
   content; 383 of content at 768):
     <600       full-bleed (the game gets the whole phone).
     600-899    min(520px, 100vw - 32px) — the portrait layout's full column, broken out of the Hall's narrow one.
     900-1023   520 inside the column (the column already holds it).
     >=1024     clamp(1024px, 100vw - 64px, 1120px) — the DESKTOP layout; wider adds nothing (#app caps at 1000).
   Both break-outs are centred on the corridor (52.5%, the column's own centre) and clamped to the viewport.
   HEIGHT: the game fits itself to any height (measured: no clip down to 520, PASS ROUND in view), so the frame
   takes EVERYTHING below the Hall's chrome, whatever that chrome measures (the nav wraps to two lines on a
   phone — a fixed offset put PASS ROUND under the fold at 390): while a frame is mounted the page is a
   100dvh flex column (nav, then the column), the column's 96px foot drops to 12, and the host and the frame
   grow into the rest. The old calc(100dvh - 150px) ran 5px past the floor at 1280x900 — PASS ROUND clipped,
   the Hall scrolled. No Hall scroll during play also means no classic scrollbar stealing width from a 1024
   frame at exactly 1024. The 520 minimum stands (below it the Hall scrolls rather than squeeze the board). */
.hall-frame-host { width: 100%; max-width: 520px; margin: 0 auto; }
.hall-frame-host[hidden] { display: none; }
.hall-frame-host.dealing { visibility: hidden; overflow: hidden; }
/* the gold edge is an OUTLINE, not a border: a border takes 2px from the frame's own viewport, and at exactly
   1024 that left the game 1022 wide — one step under its desktop breakpoint (and the portrait column 518 of 520). */
.hall-frame { display: block; width: 100%; min-height: 520px; border: 0;
  outline: 1px solid var(--gold-dim-25); outline-offset: -1px; border-radius: 12px; background: var(--ink); }
body:has(.hall-frame-host:not([hidden])) { min-height: 100dvh; display: flex; flex-direction: column; }
body:has(.hall-frame-host:not([hidden])) > .hall-nav { flex: none; }
body:has(.hall-frame-host:not([hidden])) > .hall-wrap { flex: 1 0 auto; padding-bottom: 12px; }
.hall-wrap > .hall-frame-host:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; }
.hall-wrap > .hall-frame-host:not([hidden]) > .hall-frame { flex: 1 0 auto; }
@media (max-width: 599.98px) {
  /* in the flex page a centred (margin:auto) column would shrink to its content; hold it at its phone width */
  body:has(.hall-frame-host:not([hidden])) > .hall-wrap { width: 100%; }
  .hall-frame-host { width: calc(100% + 32px); max-width: none; margin: 0 -16px; }
  .hall-frame { border-radius: 0; outline: 0; border-top: 1px solid var(--gold-dim-25); border-bottom: 1px solid var(--gold-dim-25); }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  /* the column's content box starts at 52.5vw - min(215px, 27vw) + 16px (the .hall-wrap rule above) */
  .hall-frame-host { --fw: min(520px, calc(100vw - 32px)); width: var(--fw); max-width: none; margin-right: 0;
    margin-left: calc(clamp(16px, calc(52.5vw - var(--fw) / 2), calc(100vw - var(--fw) - 16px)) - 52.5vw + min(215px, 27vw) - 16px); }
}
@media (min-width: 900px) and (max-width: 1023.98px) {
  /* MP-FIX-2 — THE BAND THAT HAD NO RULE OF ITS OWN. Between 900 and 1023 the frame fell through to the base
     `max-width: 520px`, so the geometry was an accident of another rule rather than a decision: the comment above
     said "520 inside the column" and nothing said it. It is stated now, pinning exactly what was measured before
     this change (520 wide; x=212.5 at 900x800, x=265 at 1000x800 — the 820 column is already corridor-centred, so
     `margin: auto` inside it lands on the same pixels). Nothing moves; a future edit to the base rule can no longer
     move this band silently. */
  .hall-frame-host { --fw: min(520px, calc(100vw - 32px)); width: var(--fw); max-width: none;
    margin-left: auto; margin-right: auto; }
}
@media (min-width: 1024px) {
  /* the column's content box starts at 52.5vw - 410px + 32px (the .hall-wrap rule above) */
  .hall-frame-host { --fw: clamp(1024px, calc(100vw - 64px), 1120px); width: var(--fw); max-width: none; margin-right: 0;
    margin-left: calc(clamp(0px, calc(52.5vw - var(--fw) / 2), calc(100vw - var(--fw))) - 52.5vw + 378px); }
}
/* ══ MP-FIX-2 — THE HALL STEPS BACK WHILE A MATCH IS LIVE (owner ruling 2026-09-23, fault 1, road (i)) ══
   Measured before the change: at 1440x900 the Hall kept 200.5px of its own chrome above the frame (nav 65 + title
   band + the column's padding), so the board played in 1120x699.5 and its half stood 179.4 tall against 279.6 solo
   — every viewport in the 16-matrix lost between 19% and 47% of the board's height to furniture. While a match is
   live the nav, the title band, the column's padding and the statue-corridor margins are not the player's
   furniture; the board is. `html.hall-match-live` — set and cleared by hall.js's syncFrameHost, the ONE place that
   decides whether the frame is on screen — collapses them and gives the frame the window's width AND height, minus
   nothing but the safe area.
   THE LOBBY IS UNTOUCHED BY CONSTRUCTION: every declaration below is behind the class, so with the class absent not
   one of them applies (hallframe's mutant proves it — leak a rule out of the prefix and the suite goes red).
   THE STRIP STAYS: #hall-root carries statusStrip's lines (reconnecting, the vanish line, the thinking clock) in a
   slot that is usually empty; while live it becomes an overlay at the top of the frame with no pointer events, so an
   empty slot draws nothing and a live line is urgent enough to sit over the board. It returns to the flow the moment
   the match has an outcome — the settle and "back to the Hall" controls live there and must never be behind the
   board, so hall.js clears the flag on the outcome, on leave, on unmount and on the fallback.
   The 520 minimum is dropped while live (the frame is the window; the game fits itself to any height — the same
   measurement the base rule cites), and the page cannot scroll behind a fixed board. */
html.hall-match-live, html.hall-match-live body { overflow: hidden; }
html.hall-match-live .hall-nav, html.hall-match-live .hall-title { display: none; }
html.hall-match-live body:has(.hall-frame-host:not([hidden])) { display: block; min-height: 100dvh; }
html.hall-match-live body:has(.hall-frame-host:not([hidden])) > .hall-wrap {
  width: 100%; max-width: none; margin: 0; padding: 0; gap: 0; display: block; flex: none; }
html.hall-match-live #hall-root {
  position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 3; pointer-events: none; margin: 0; }
html.hall-match-live .hall-wrap > .hall-frame-host:not([hidden]) {
  position: fixed; inset: 0; display: block; width: auto; max-width: none; margin: 0; flex: none; box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
html.hall-match-live .hall-wrap > .hall-frame-host:not([hidden]) > .hall-frame {
  width: 100%; height: 100%; min-height: 0; flex: none; border: 0; outline: 0; border-radius: 0; }

.hall-free-result .hall-settle-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
/* S-HALL-STRIPS-1 (R4) — THE STRIP SLOT above the frame: statusStrip's lines (reconnecting, the vanish line, the
   thinking clock) in a FIXED one-line slot, so a line coming or going never changes the frame's height and the game
   never re-lays out mid-turn (the frame fills everything below it — FRAME-SIZE-1). It grows only for the rare two-line
   case (our own reconnect while the clock runs). The clock line keeps its space while hidden (visibility, not
   display): §8b shows the countdown from 30s remaining (.show) and turns it amber at the warn (.warn on the line,
   where the existing .hall-mclock.warn rule reaches it). */
.hall-frame-strip { min-height: 34px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center; }
.hall-mclock { visibility: hidden; }          /* S-HALL-STAKED-1 (K5): §8b's "shown from 30s" — BOTH roads, not the frame's alone */
.hall-mclock.show { visibility: visible; }
/* S-HALL-STAKED-1 (K4) — the dressed settlement strip above the real board: the text battle's own strip, re-homed.
   The frame host sits beneath it, so the strip keeps the battle's width and the settle act stays reachable. */
.hall-frame-settle { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 0; text-align: center; }
.hall-frame-settle .hall-settle { padding: 8px 0 0; }
.hall-frame-settle .hall-settle-act, .hall-frame-settle .hall-controls-act { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .hall-busy::before { animation: none; opacity: .8; }
  * { transition: none !important; }
}