/* Layout for index / host / play. Colours, fonts and component looks come from /theme/theme.css tokens.
   The host stage is a 16:9 container: all sizes use container units (cqw / cqh) so it scales from
   1280x720 up to 4K without changing proportions. Nothing important sits within 3% of the edges. */
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
#app { min-height: 100vh; }
.stack > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: center; }

/* ---------- Landing and host sign-in: seamless, no floating boxes ---------- */
.landing, .host-screen, .play-screen { display: flex; align-items: center; justify-content: center; padding: var(--space-5); }
.landing__inner, .host-center, .play-center { width: 100%; max-width: 36rem; text-align: center; }
.landing__title { margin: 0; font-size: clamp(2rem, 1rem + 3.4vw, 3.4rem); }
.hero-art { display: flex; justify-content: center; margin-bottom: var(--space-2); }
.hero-art .blossom { width: clamp(6.5rem, 22vh, 13rem); height: auto; animation: bob 6s ease-in-out infinite; }
.form-open { display: flex; flex-direction: column; gap: var(--space-3); text-align: left; }
.form-open .btn { width: 100%; }
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-ink-soft); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--fs-small); }
.divider::before, .divider::after { content: ""; flex: 1; height: 2px; background: var(--color-border); }
.landing .muted a, .host-center .muted a { font-weight: 800; }
.code-input { text-align: center; text-transform: uppercase; letter-spacing: 0.3em; font-family: var(--font-display); font-weight: 800; font-size: 2rem; }

/* Pack chooser (deliberately framed cards on the wash) */
.host-screen { align-items: center; justify-content: flex-start; }
.host-screen--center { justify-content: center; }
.host-center { max-width: 60rem; margin: 0 auto; }
.host-center--narrow { max-width: 28rem; }
.gentle-opt { text-align: left; padding: var(--space-3) 0; }
.gentle-opt .cluster { justify-content: flex-start; }
.gentle-opt input { width: 1.75rem; height: 1.75rem; accent-color: var(--color-primary); }
.gentle-opt__title { font-weight: 800; font-size: 1.15rem; }
.gentle-opt__help { margin-top: var(--space-1); font-size: var(--fs-small); }
.pack-list { text-align: left; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-3); }
.pack-list > * + * { margin-top: 0; }
.pack-card { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; border-color: var(--color-border-strong); transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.pack-card:hover { transform: translateY(-2px); }
.pack-card.is-selected { border-color: var(--color-ink); outline: 4px solid var(--color-accent); outline-offset: 2px; }
.pack-card strong { font-family: var(--font-display); font-size: 1.35rem; }
.pack-tag { align-self: flex-start; padding: 0 var(--space-3); border-radius: 999px; background: var(--color-ink); color: var(--color-surface); font-size: 0.85rem; font-weight: 800; }
.pack-form { text-align: left; max-width: 28rem; margin: var(--space-5) auto 0; display: flex; flex-direction: column; gap: var(--space-3); }

/* ---------- Host stage (16:9, screen-share friendly) ---------- */
.stage-screen { padding: 0; align-items: center; justify-content: center; }
.stage {
  position: relative;
  container-type: size;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1.4cqh;
  padding: 3.6cqh 5cqw;
  font-size: 1.7cqw;
  line-height: 1.3;
  isolation: isolate;
}
/* hairline gilt border + two small ornaments; the parchment stays visible (negative space first) */
.stage::before { content: ""; position: absolute; inset: 1.4cqw; z-index: 3; pointer-events: none; border: 1px solid var(--gilt); border-radius: 0.8cqw; }
.stage::after { content: ""; position: absolute; inset: 1.4cqw; z-index: 3; pointer-events: none;
  background: var(--gilt); -webkit-mask: var(--orn-tl) left top / 5cqw no-repeat, var(--orn-br) right bottom / 5cqw no-repeat; mask: var(--orn-tl) left top / 5cqw no-repeat, var(--orn-br) right bottom / 5cqw no-repeat; }
.stage .decor-layer { border-radius: 0.8cqw; }
.stage .flourish { --fl: clamp(6rem, 11vw, 14rem); opacity: 0.92; }
.stage .flourish--br { display: none; }
.stage--lobby .flourish--br, .stage--over .flourish--br { display: block; --fl: clamp(7rem, 14vw, 17rem); right: 2%; bottom: 13cqh; }
.stage .flourish--bl, .stage .flourish--tr, .stage .drift { display: none; }
.stage--over .flourish--bl { display: block; --fl: clamp(5rem, 9vw, 11rem); bottom: 28%; }


.band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 0.7cqh 1.2cqw 1cqh;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gilt-soft);
  border-radius: 0;
  box-shadow: none;
  min-height: 8cqh;
}
.band--top { padding-left: 5.2cqw; }
.band--bottom { border-bottom: 0; border-top: 1px solid var(--gilt-soft); padding: 1cqh 1.2cqw 0.6cqh; }
.band__brand { display: flex; align-items: center; gap: 1.2cqw; min-width: 0; }
.band__brand .blossom { width: 5.2cqh; height: 5.2cqh; flex: none; }
.band__title { font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 700; font-size: 2.3cqw; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band__sub { font-size: 1.25cqw; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-soft); }
.pill { display: inline-flex; align-items: center; gap: 0.8cqw; padding: 0.5cqh 1.4cqw; background: var(--color-primary); color: var(--color-on-primary); border-radius: 999px; font-weight: 800; font-size: 1.8cqw; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pill--soft { background: var(--color-accent); color: var(--color-on-accent); }
.band--bottom { min-height: 7cqh; font-size: 1.6cqw; font-weight: 800; }
.join-hint { display: flex; align-items: baseline; gap: 1cqw; flex-wrap: nowrap; white-space: nowrap; min-width: 0; overflow: hidden; }
.join-hint__host { font-family: var(--font-display); font-weight: 700; font-size: 1.9cqw; }
.join-hint__code { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.14em; font-size: 1.9cqw; padding: 0 0.8cqw; border: 0.2cqw dashed var(--color-accent); border-radius: 0.6cqw; }
.band__note { flex: 1; text-align: center; font-weight: 700; font-size: 1.35cqw; color: var(--color-ink-soft); padding: 0 1cqw; min-width: 0; }
.spell-hint--soft { font-size: 1.5cqw; font-weight: 600; }
.band__controls { display: flex; gap: 1cqw; align-items: center; flex: none; }
.band__controls .btn { min-height: 5cqh; padding: 0 1.8cqw; font-size: 1.5cqw; border-radius: 1cqw; }
.band__controls .btn--lg { min-height: 5.6cqh; font-size: 1.8cqw; padding: 0 2.6cqw; }

.stage__main { min-height: 0; display: grid; gap: 2cqw; }
.stage__main--lb { grid-template-columns: minmax(0, 1fr) 24cqw; }
.stage__col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 1.6cqh; }

/* Lobby */
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr) 29cqw; gap: 2.4cqw; min-height: 0; }
.lobby-side { align-items: stretch; gap: 1.4cqh; }
.howto { padding: 1.2cqh 0 0 1.6cqw; border-left: 0.2cqw solid var(--gilt); }
.howto__title { font-size: 1.9cqw; margin-bottom: 0.8cqh; }
.howto__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7cqh; }
.howto__list li { display: grid; grid-template-columns: 7.2cqw minmax(0, 1fr); gap: 0.8cqw; font-size: 1.25cqw; line-height: 1.25; }
.howto__list strong { font-weight: 900; color: var(--color-primary); }

.lobby-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1cqh; }
.lobby-hero__label { font-size: 1.8cqw; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-soft); }
.stage .room-code { font-size: 9.5cqw; border: 0.9cqw dotted var(--gilt); outline: 0.25cqw solid var(--gilt); outline-offset: -1.7cqw; border-radius: 0.5cqw; background: var(--card-stock); box-shadow: none; letter-spacing: 0.12em; padding: 0.2em 0.3em 0.2em 0.42em; }
.lobby-hero { position: relative; }
.lobby-hero .postmark { position: absolute; right: -4cqw; top: 3cqh; font-size: 1.5cqw; }
.stage .qr-frame { border: 0.3cqw solid var(--gilt); }
.qr-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.8cqh; }
.stage .qr-frame { padding: 1.1cqw; border-radius: 0.6cqw; }
.stage .qr-frame img, .stage .qr-frame svg { width: 22cqh; height: 22cqh; }
.qr-card__label { font-size: 1.4cqw; font-weight: 800; color: var(--color-ink-soft); }
.lobby-quote { font-size: 1.7cqw; max-width: 56cqw; margin: 0 auto; padding: 0.8cqh 2cqw; }
.lobby-quote::before { display: none; }
.players-head { display: flex; align-items: baseline; justify-content: space-between; font-weight: 800; font-size: 1.6cqw; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.1em; }
.players-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15cqw, 1fr)); gap: 1cqh 1cqw; align-content: start; overflow: hidden; min-height: 0; }
.stage .player-chip { position: relative; font-size: 1.5cqw; min-height: 5cqh; padding: 0.4cqh 1.4cqw 0.4cqh 0.8cqw; width: 100%; box-shadow: 0 0.3cqh 0 var(--color-border); }
.stage .player-chip::before { display: none; }
.chip-badge { font-size: 2.3cqw; line-height: 1; flex: none; min-width: 2.6cqw; text-align: center; font-weight: 800; }
.chip-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip-kick { position: absolute; right: 0.4cqw; top: 50%; transform: translateY(-50%); padding: 0 0.7cqw; min-height: 0 !important; font-size: 1.4cqw; border-radius: 0.6cqw; opacity: 0; transition: opacity var(--dur-fast); }
.player-chip:hover .chip-kick, .player-chip:focus-within .chip-kick { opacity: 1; }
.players-empty { text-align: center; font-size: 2cqw; color: var(--color-ink-soft); padding: 2cqh 0; }

/* Question and reveal */
.q-meta { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.q-type { display: inline-flex; align-items: center; gap: 1cqw; font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 800; font-size: 3cqw; line-height: 1; color: var(--color-ink); }
.q-type::before { content: ""; width: 3cqw; height: 3cqw; background: var(--color-accent-2); -webkit-mask: var(--glyph-1) center / contain no-repeat; mask: var(--glyph-1) center / contain no-repeat; }
.answered { font-weight: 800; font-size: 1.7cqw; color: var(--color-ink-soft); }
.q-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2cqw; align-items: center; }
.stage .big-question { font-size: 3.3cqw; line-height: 1.18; text-align: left; margin: 0; }
.stage .big-question--center { text-align: center; font-size: 4.6cqw; }
.stage .timer { --timer-size: 19cqh; width: var(--timer-size); height: var(--timer-size); }
.q-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.6cqh; }
.stage .choice-grid { display: grid; gap: 1.2cqw; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1; min-height: 0; align-content: stretch; grid-auto-rows: 1fr; max-height: 40cqh; }
.stage .choice-grid--n3, .stage .choice-grid--n5, .stage .choice-grid--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage .tf-grid { flex: 1; min-height: 0; max-height: 40cqh; gap: 1.6cqw; }
.stage .choice { min-height: 0; padding: 1cqh 1.6cqw; gap: 1.4cqw; border-width: 0.3cqw; border-radius: 1.2cqw; font-size: 2.2cqw; line-height: 1.15; cursor: default; box-shadow: 0 0.5cqh 0 rgba(74, 46, 26, 0.45); }
.stage .choice:hover, .stage .choice:active { transform: none; box-shadow: 0 0.5cqh 0 rgba(74, 46, 26, 0.45); }
.stage .choice__glyph { width: 3.4cqw; height: 3.4cqw; }
.stage .tf-grid .choice { font-size: 4cqw; flex-direction: row; justify-content: center; }
.stage .tf-grid .choice__glyph { width: 4.4cqw; height: 4.4cqw; }
.stage .choice.is-correct { outline-width: 0.5cqw; outline-offset: 0.3cqw; }
.stage .choice.is-correct::after { top: -1.2cqw; right: -0.8cqw; width: 3.2cqw; height: 3.2cqw; font-size: 2cqw; }
.stage .choice.is-wrong::after, .stage .choice.is-selected::after { display: none; }
.stage .choice.is-wrong { outline-width: 0.25cqw; }
.stage .order-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2cqw; }
.stage .order-item { font-size: 2.1cqw; min-height: 8cqh; border-width: 0.25cqw; padding: 0.8cqh 1.4cqw; }
.stage .order-item::before { width: 4cqh; height: 4cqh; font-size: 2cqw; }
.stage .order-item[data-pos=""]::before, .stage .order-item:not([data-pos])::before { content: "\2022"; }
.stage .order-item.is-correct::after { display: none; }
.spell-clue { text-align: center; }
.spell-hint { text-align: center; font-size: 2cqw; color: var(--color-ink-soft); font-weight: 800; }
.spell-letters { display: flex; justify-content: center; gap: 1cqw; margin-top: 1.5cqh; }
.spell-answer { font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 800; font-size: 7cqw; text-align: center; line-height: 1.1; }

.reveal-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.8cqw; align-items: center; padding: 1.4cqh 2cqw; background: color-mix(in srgb, var(--color-surface) 60%, transparent); border: 0.2cqw solid var(--gilt); outline: 0.1cqw solid var(--gilt-soft); outline-offset: 0.35cqw; border-radius: 1cqw; animation: rise var(--dur-slow) var(--ease) both; }
.reveal-banner .blossom { width: 8cqh; height: 8cqh; }
.reveal-banner__label { font-size: 1.3cqw; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-soft); }
.reveal-banner__answer { font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 800; font-size: 2.6cqw; line-height: 1.12; color: var(--color-ink); overflow-wrap: anywhere; }
.explanation { font-size: 1.65cqw; line-height: 1.3; margin-top: 0.4cqh; color: var(--color-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.reveal-source { font-size: 1.3cqw; font-weight: 800; letter-spacing: 0.06em; color: var(--color-ink-soft); }
.stat-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6cqh; }

/* Leaderboard sidebar */
.lb { display: flex; flex-direction: column; gap: 1.2cqh; min-height: 0; padding: 0.6cqh 0 0.6cqh 1.8cqw; background: none; border: 0; border-left: 0.2cqw solid var(--gilt); border-radius: 0; box-shadow: none; }
.lb__head { align-self: flex-end; display: flex; align-items: center; gap: 0.8cqw; padding: 0.7cqh 1.4cqw; border: 0.45cqw dotted var(--gilt); outline: 0.15cqw solid var(--gilt); outline-offset: -0.9cqw; background: var(--card-stock); font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 800; font-size: 2.3cqw; line-height: 1; }
.lb__head .blossom { width: 3.4cqw; height: 3.4cqw; }
.lb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9cqh; flex: 1; min-height: 0; }
.lb__row { display: grid; grid-template-columns: 3.2cqw 2.4cqw minmax(0, 1fr) auto; align-items: center; gap: 0.7cqw; min-height: 7.6cqh; padding: 0.6cqh 0.8cqw; background: transparent; border: 0; border-bottom: 0.15cqw solid var(--gilt-soft); border-radius: 0; font-weight: 800; font-size: 1.6cqw; }
.lb__row--1 { background: color-mix(in srgb, var(--color-accent) 55%, transparent); color: var(--color-ink); border-bottom-color: var(--gilt); border-radius: 0.8cqw; }
.lb__rank { display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-display); font-weight: 900; font-size: 1.7cqw; }
.lb__row--1 .lb__rank { background: var(--color-ink); color: var(--color-surface); }
.lb__badge { font-size: 1.9cqw; text-align: center; line-height: 1; }
.lb__name { min-width: 0; line-height: 1.1; font-size: 1.45cqw; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lb__score { font-variant-numeric: tabular-nums; font-size: 1.7cqw; }
.lb__empty { color: var(--color-ink-soft); font-size: 1.5cqw; font-weight: 700; text-align: center; padding: 3cqh 0.5cqw; }
.lb__foot { text-align: center; padding-top: 0.6cqh; font-size: 1.4cqw; font-weight: 800; color: var(--color-ink-soft); letter-spacing: 0.08em; text-transform: uppercase; }

/* Over / podium */
.over { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.4cqh; min-height: 0; }
.over__title { font-size: 3.8cqw; text-align: center; }
.stage .podium { min-height: 0; flex: 1; width: 100%; max-height: 46cqh; align-items: flex-end; gap: 2cqw; }
.podium__col { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; max-width: 24cqw; min-width: 0; }
.podium__col .blossom { margin-bottom: -1.4cqh; position: relative; z-index: 1; animation: bob 6s ease-in-out infinite; }
.podium__col--1 { order: 2; } .podium__col--2 { order: 1; } .podium__col--3 { order: 3; }
.podium__col--1 .blossom { width: 14cqh; height: 14cqh; }
.podium__col--2 .blossom, .podium__col--3 .blossom { width: 10cqh; height: 10cqh; }
.stage .podium__step { width: 100%; max-width: none; flex: none; order: 0; font-size: 1.9cqw; padding: 1cqh 0.8cqw 0.6cqh; justify-content: center; border-width: 0.3cqw; gap: 0.2cqh; }
.stage .podium__step--1 { height: 26cqh; } .stage .podium__step--2 { height: 20cqh; } .stage .podium__step--3 { height: 15cqh; }
.stage .podium__step::before { font-size: 2.8cqw; }
.podium__step .podium__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.over .quote { font-size: 1.8cqw; padding: 1cqh 3cqw; max-width: 70cqw; }
.over .quote::before { display: none; }
.stage .toast { position: absolute; bottom: 12cqh; font-size: 1.7cqw; }

/* Player (kept for the play page; the app agent's play.css refines it) */
.play-screen { align-items: flex-start; padding-bottom: 5rem; }
.choice-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.tf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tf-grid .choice { min-height: 10rem; }
.choice { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 4rem; text-align: left; cursor: pointer; font: inherit; }
.order-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.order-item { width: 100%; min-height: 3.5rem; text-align: left; cursor: pointer; font: inherit; }
.player-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: var(--space-3) var(--space-5); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-soft); z-index: 10; }
.player-bar[hidden] { display: none; }
.prompt { font-size: 1.25rem; }
.result-line { font-size: 1.5rem; }
.toast { padding: var(--space-3); }

@media (max-width: 800px) {
  .pack-list { grid-template-columns: 1fr; }
}
.stage .podium { border-bottom: 0.3cqw solid var(--gilt); }

/* host question/reveal: keep the question and its choices together, centred in the message side */
.stage__main--lb .stage__col { justify-content: center; }
.stage .q-body { flex: 0 1 auto; justify-content: flex-start; }
.stage .choice-grid, .stage .tf-grid { flex: none; height: 34cqh; max-height: none; }
.stage .reveal-banner { margin-top: 0.4cqh; }


/* ================= Brief refinements: printed correspondence, negative space ================= */
/* lobby: big room code between two delicate rules; no frame */
.stage .room-code { border: 0; outline: 0; background: none; box-shadow: none; padding: 0; font-size: 14cqw; letter-spacing: 0.16em; font-variation-settings: var(--display-title-variation); }
.stage .lobby-hero .ornament-rule { width: 32cqw; margin: 0.4cqh auto; height: auto; }
.stage .qr-frame { padding: 0.9cqw; border: 1px solid var(--gilt); border-radius: 0.3cqw; box-shadow: 0 0 0 0.45cqw #fff, 0 0 0 calc(0.45cqw + 1px) var(--gilt-soft); margin: 0.6cqw; }
.howto { padding: 1.4cqh 0 0; border: 0; border-top: 1px solid var(--gilt-soft); }
.howto__list li { grid-template-columns: 7cqw minmax(0, 1fr); }
/* player names as understated printed tags */
.stage .player-chip { background: none; border: 0; border-bottom: 1px solid var(--gilt-soft); border-radius: 0; box-shadow: none; font-weight: 700; padding-left: 0.4cqw; animation: fade-in 1.2s ease both; }
.stage .player-chip--disconnected { opacity: 0.55; border-bottom-style: dashed; }
/* answer tiles: ivory with a coloured glyph band */
.stage .choice { --gap: 1.2cqw; --gw: 3.4cqw; padding: 1cqh 1.6cqw 1cqh var(--gap); border-width: 1.5px; border-radius: 0.9cqw; box-shadow: 0 0.3cqh 0 rgba(74, 46, 26, 0.22); font-weight: 700; }
.stage .choice__glyph { width: var(--gw); height: var(--gw); }
.stage .tf-grid .choice { --gw: 4.4cqw; }
/* reveal: unveil, hairline plate instead of a card */
.reveal-banner { background: none; border: 0; border-top: 1px solid var(--gilt); border-bottom: 1px solid var(--gilt); border-radius: 0; outline: 0; animation: none; }
/* top 5 as elegant printed results (numbered card) */
.lb { padding: 0.4cqh 0 0.4cqh 1.6cqw; border-left: 1px solid var(--gilt-soft); gap: 0.8cqh; }
.lb__head { align-self: stretch; justify-content: center; border: 0; outline: 0; background: none; padding: 0 0 0.6cqh; font-size: 2.1cqw; font-variant-caps: all-small-caps; letter-spacing: 0.16em; font-weight: 600; border-bottom: 1px solid var(--gilt-soft); }
.lb__head .blossom { width: 2.6cqw; height: 2.6cqw; }
.lb__row { grid-template-columns: 2.4cqw 2.2cqw minmax(0, 1fr) auto; gap: 0.8cqw; border-bottom: 1px solid var(--gilt-soft); }
.lb__rank { width: auto; height: auto; background: none; color: var(--color-ink); font-size: 2.1cqw; border-radius: 0; font-variation-settings: var(--display-title-variation); }
.lb__row--1 { background: none; border-bottom-color: var(--gilt); }
.lb__row--1 .lb__rank { color: var(--color-ink); }
.lb__row--1 .lb__name { font-weight: 900; }
.lb__row--1 .lb__rank { background: none; color: var(--color-ink); }
/* podium as a printed award programme */
.stage .podium__step { border: 1px solid var(--gilt); border-bottom: 0; border-radius: 0.8cqw 0.8cqw 0 0; background: var(--color-surface); box-shadow: inset 0 0 0 0.35cqw var(--color-surface), inset 0 0 0 calc(0.35cqw + 1px) var(--gilt-soft); }
.stage .podium__step--1 { background: color-mix(in srgb, var(--color-accent) 40%, var(--color-surface)); color: var(--color-ink); }
.stage .podium { border-bottom: 1px solid var(--gilt); }
.over .ornament-flourish { width: 14cqw; margin: 0 auto; height: auto; }
.stage .big-question { font-weight: 600; }

/* ===== Badge tokens (emoji and numerals share one optical box) ===== */
.badge-tag { display: inline-grid; place-items: center; width: var(--bt, 3.2cqw); height: var(--bt, 3.2cqw); flex: none; line-height: 1; text-align: center; }
.badge-tag[hidden] { display: none; }
.badge-tag--emoji { font-size: calc(var(--bt, 3.2cqw) * 0.8); }
.badge-tag--num { border: 1px solid var(--gilt); border-radius: 50%; background: var(--color-surface); color: var(--color-ink); font: 800 calc(var(--bt, 3.2cqw) * 0.5)/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.chip-badge { --bt: 3.2cqw; min-width: 0; }
.lb__badge { --bt: 2.6cqw; }
.lb__row { grid-template-columns: 2.4cqw 2.6cqw minmax(0, 1fr) auto; }
/* podium steps: place numeral tucked into the corner so badge, name and score fit on a projector */
.stage .podium__step { position: relative; justify-content: center; gap: 0.1cqh; padding: 0.8cqh 0.6cqw; }
.stage .podium__step::before { position: absolute; top: 0.5cqh; left: 0.9cqw; font-size: 2.2cqw; }
.podium__badge { --bt: 4cqw; margin-bottom: 0; }
.stage .podium__step--1 .podium__badge { --bt: 4.8cqw; }
.stage .podium__step--1 { height: 26cqh; } .stage .podium__step--2 { height: 21cqh; } .stage .podium__step--3 { height: 18cqh; }
.podium__col--1 .blossom { width: 12cqh; height: 12cqh; }
.podium__col--2 .blossom, .podium__col--3 .blossom { width: 9cqh; height: 9cqh; }
.stage .podium { max-height: 50cqh; }

/* ===== Lobby closing notice and closed screen (Revision 6) ===== */
.closing-notice { text-align: center; margin: 0.4cqh auto; padding: 0.5cqh 1.6cqw; width: fit-content; max-width: 100%; font-size: 1.45cqw; color: var(--color-ink-soft); border: 1px solid var(--gilt); border-radius: 0.8cqw; background: var(--color-surface); }
.closing-notice__time { font: 800 1.1em/1 var(--font-display); color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; }
.closed-card { text-align: center; align-items: center; }
.closed-card h1 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.2; }
.closed-card .ornament-flourish { width: min(60%, 12rem); }
@media (prefers-reduced-motion: no-preference) { .closed-card { animation: closed-in 600ms ease-out both; } }
@keyframes closed-in { from { opacity: 0; } to { opacity: 1; } }
.closing-notice--warn { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface)); color: var(--color-ink); }
.closing-notice--warn .closing-notice__lead::before { content: "\2022  "; }

/* ===== Confirm dialog and notices (Revision 8) ===== */
.dialog-veil { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; background: color-mix(in srgb, var(--color-ink) 38%, transparent); }
.dialog { width: min(28rem, 100%); padding: 1.6rem 1.8rem; text-align: center; background: var(--card-stock, var(--color-surface)); color: var(--color-ink); border: 1px solid var(--gilt); border-radius: 0.9rem; box-shadow: 0 0 0 5px var(--card-stock, var(--color-surface)), 0 0 0 6px var(--gilt-soft), var(--shadow-soft); }
.dialog__title { font: 700 1.6rem/1.2 var(--font-display); margin: 0 0 0.5rem; }
.dialog__body { margin: 0 0 1.3rem; color: var(--color-ink-soft); font-size: 1.1rem; }
.dialog__actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.toast--note { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--gilt); }
.toast--note { pointer-events: none; bottom: auto; top: var(--space-5); }
@media (prefers-reduced-motion: no-preference) { .toast--note { animation: toast-in var(--dur-med) var(--ease) both, toast-away 600ms ease 7s forwards; } }
@keyframes toast-away { to { opacity: 0; } }