/* KaBoomz — shared brand styles (DESIGN.md: fun, colourful, Kahoot-like;
   coral live stage, multicolour tiles, big type, mobile-first). */

/* ====================================================================
   APPROVED TYPOGRAPHY (self-hosted, no external runtime requests).
   Lilita One = personality / celebration / display moments.
   Nunito Sans = ordinary interface communication (variable weight).
   Licence files sit beside the WOFF2 assets in src/assets/fonts/.
   ==================================================================== */
@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/lilita-one-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../assets/fonts/nunito-sans-latin.woff2') format('woff2');
}

:root {
  /* ================================================================
     SLICE 4/5 - semantic visual vocabulary.
     Four groups; the category decides whether a theme may touch it.
     The machine-readable allowlist is src/css/themeable-tokens.json
     (themes are ENFORCED against it - see the slice 5 allowlist test).

     THEMEABLE           a theme may change freely. The values below are
                         the RAW themeable base; the DEFAULT house identity
                         (coral/cream/ink) is applied by the scoped HOUSE
                         IDENTITY block at the end of this file, and an
                         owner-selected event theme may still apply during
                         gameplay (the game shell's own lock).
     THEMEABLE-OPTIONAL  bomb/fire illustration colours: themes MAY
                         override, but the defaults serve as fallback -
                         a theme that leaves them alone inherits the
                         classic bomb (same fallback pattern as audio).
     FIXED SEMANTIC      meaning is tied to the value (third-party brand
                         marks such as the Google G). Never themed.
     GAMEPLAY IDENTITY   how the game communicates: answer letters A-F
                         and the podium medals. An emcee says "tap the
                         yellow one" out loud - a theme must never
                         recolour these.
     ================================================================ */

  /* ---------- THEMEABLE: stage background ---------- */

  --color-background: #7c3aed;
  --color-background-mid: #4c1d95;
  --color-background-deep: #2e1065;
  --gradient-stage:
    radial-gradient(circle at 15% 15%, rgba(236, 72, 153, 0.35) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(124, 58, 237, 0.45) 0%, transparent 50%),
    linear-gradient(160deg, var(--color-background) 0%, var(--color-background-mid) 45%, var(--color-background-deep) 100%);
  --gradient-stage-base: linear-gradient(160deg, var(--color-background) 0%, var(--color-background-mid) 45%, var(--color-background-deep) 100%);
  --gradient-surface: linear-gradient(180deg, rgba(46, 16, 101, 0) 0%, rgba(46, 16, 101, 0.9) 30%);

  /* ---------- THEMEABLE: text ----------
     THE ONE PROPERTY a theme changes for text: --text-rgb. Every grade
     below derives from it (alpha applied here, base colour applied at
     the usage sites would break light themes — muted text must dim
     whatever colour the theme picks). The grades are preserved exactly
     as found; consolidating them is a separate owner decision. */

  --text-rgb: 255 255 255;
  --color-text: rgb(var(--text-rgb));
  --color-text-strong: rgb(var(--text-rgb) / 0.9);
  --color-text-soft: rgb(var(--text-rgb) / 0.85);
  --color-text-muted: rgb(var(--text-rgb) / 0.8);
  --color-text-quiet: rgb(var(--text-rgb) / 0.75);
  --color-text-hint: rgb(var(--text-rgb) / 0.72);
  --color-text-faded: rgb(var(--text-rgb) / 0.7);
  --color-text-faint: rgb(var(--text-rgb) / 0.65);
  --color-text-placeholder: rgb(var(--text-rgb) / 0.6);
  --color-text-dim: rgb(var(--text-rgb) / 0.55);

  /* ---------- THEMEABLE: surfaces and borders ----------
     --surface-rgb is the ONE property a theme changes for cards/panels:
     every translucent surface, border and hover derives from it. */

  --surface-rgb: 255 255 255;
  --color-surface-faint: rgb(var(--surface-rgb) / 0.06);
  --color-surface: rgb(var(--surface-rgb) / 0.08);
  --color-surface-control: rgb(var(--surface-rgb) / 0.1);
  --color-surface-input: rgb(var(--surface-rgb) / 0.12);
  --color-surface-raised: rgb(var(--surface-rgb) / 0.14);
  --color-surface-track: rgb(var(--surface-rgb) / 0.15);
  --color-surface-raised-2: rgb(var(--surface-rgb) / 0.16);
  --color-surface-focus: rgb(var(--surface-rgb) / 0.18);
  --color-surface-hover: rgb(var(--surface-rgb) / 0.24);
  --color-surface-ctrl-hover: rgb(var(--surface-rgb) / 0.3);
  --color-surface-solid: rgb(var(--surface-rgb));
  --color-border-soft: rgb(var(--surface-rgb) / 0.15);
  --color-border: rgb(var(--surface-rgb) / 0.18);
  --color-border-subtle: rgb(var(--surface-rgb) / 0.2);
  --color-border-row: rgb(var(--surface-rgb) / 0.22);
  --color-border-muted: rgb(var(--surface-rgb) / 0.25);
  --color-border-input: rgb(var(--surface-rgb) / 0.3);
  --color-border-strong: rgb(var(--surface-rgb) / 0.35);

  /* ---------- THEMEABLE: accent family ---------- */

  --color-primary: #facc15;
  --color-on-primary: #1f1235;
  --color-accent: #facc15;
  --color-accent-shadow: #db2777;
  --color-accent-2: #22d3ee;
  --color-secondary: #fb923c;
  --color-focus: #facc15;
  --color-surface-inverse: #1f1235;

  --success-rgb: 74 222 128;
  --success-deep-rgb: 22 163 74;
  --color-success: rgb(var(--success-rgb));
  --color-success-soft: rgb(var(--success-rgb) / 0.16);
  --selection-rgb: 250 204 21;
  --color-selection-soft: rgb(var(--selection-rgb) / 0.25);

  /* the five brand colours: reflex tap tiles and lobby feed chips */

  --palette-1: #facc15;
  --palette-2: #ec4899;
  --palette-3: #22d3ee;
  --palette-4: #fb923c;
  --palette-5: #4ade80;

  /* ---------- THEMEABLE: scrims (overlay dims) ---------- */

  --scrim-rgb: 31 18 53;          /* ink-based scrims */
  --stage-scrim-rgb: 46 16 101;   /* stage purple-based scrims */
  --color-scrim-stage: rgb(var(--stage-scrim-rgb) / 0.55);
  --color-scrim-stage-deep: rgb(var(--stage-scrim-rgb) / 0.94);
  --color-scrim-ink: rgb(var(--scrim-rgb) / 0.55);
  --color-scrim-ink-soft: rgb(var(--scrim-rgb) / 0.6);
  --color-scrim-modal: rgb(var(--scrim-rgb) / 0.7);
  --color-scrim-card: rgb(var(--scrim-rgb) / 0.78);
  --color-kick: rgb(var(--scrim-rgb) / 0.18);
  --color-kick-hover: rgb(var(--scrim-rgb) / 0.32);

  /* ---------- THEMEABLE: button gradients ---------- */

  --gradient-cta: linear-gradient(180deg, #ec4899, #db2777);
  --gradient-primary: linear-gradient(180deg, #22d3ee, #0891b2);
  --gradient-success: linear-gradient(180deg, rgb(var(--success-rgb)), rgb(var(--success-deep-rgb)));

  /* ---------- THEMEABLE: type, radii, borders, shadows ---------- */

  --font-body: 'Nunito Sans', sans-serif;
  --font-display: 'Lilita One', sans-serif;
  --radius-card: 1.25rem;
  --radius-button: 1rem;
  --radius-pill: 999px;
  --radius-panel: 1.5rem;
  --radius-tile: 0.9rem;
  --radius-row: 0.8rem;
  --radius-tile-small: 0.7rem;
  --radius-chip: 0.75rem;
  --radius-input: 0.6rem;
  --radius-letter: 0.5rem;
  --border-width-card: 2px;
  --border-width-input: 3px;
  --shadow-button: 0 4px 0 rgb(var(--scrim-rgb) / 0.45);
  --shadow-button-pressed: 0 1px 0 rgb(var(--scrim-rgb) / 0.45);
  --shadow-chip: 0 5px 0 rgb(var(--scrim-rgb) / 0.45);
  --shadow-raised: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-text-glow: 0 3px 14px rgb(var(--scrim-rgb) / 0.5);
  --shadow-brand: 3px 3px 0 var(--color-accent-shadow), 6px 6px 0 rgb(var(--scrim-rgb) / 0.35);
  --shadow-brand-small: 2px 2px 0 var(--color-accent-shadow);
  --shadow-brand-single: 3px 3px 0 var(--color-accent-shadow);
  --shadow-pop: 4px 4px 0 var(--color-accent-shadow);
  --shadow-pop-ink: 4px 4px 0 #1f1235;

  /* ---------- THEMEABLE-OPTIONAL: the bomb and its fire ----------
     The bomb appears identically in every game (brand consistency) but
     a theme may replace its look; defaults are the fallback. */

  --bomb-body: #312e81;
  --bomb-edge: #1e1b4b;
  --bomb-cap: #475569;
  --bomb-fuse: #d6b077;
  --bomb-highlight: rgb(255 255 255 / 0.22);
  --bomb-fuse-base: rgb(255 255 255 / 0.18);
  --fire-red: #ef4444;
  --fire-orange: #fb923c;
  --fire-yellow: #facc15;
  --fire-shadow: #db2777;

  /* ---------- THEMEABLE: danger family (Slice 5) ----------
     The danger BASE is themeable; all seven roles follow it. The four
     lighter grades each carry their OWN base triplet: they are lighter
     than the base, not more transparent, so an alpha ladder cannot
     express them (lower alpha blends toward the stage), and a
     relative-colour derivation would need Chrome 119+ while leaving
     the literal on older devices - a theme would move three grades and
     leave four behind. Explicit per-grade bases work everywhere and
     match the allowlist principle: a theme declares what it wants.
     A theme must set ALL FIVE danger bases together, or it reproduces
     the partial-application defect this family exists to remove. */

  --danger-rgb:            239 68 68;
  --danger-text-rgb:       248 113 113;
  --danger-soft-rgb:       254 202 202;
  --danger-text-soft-rgb:  252 165 165;
  --danger-text-pale-rgb:  253 164 175;

  --color-danger:            rgb(var(--danger-rgb));
  --color-danger-text:       rgb(var(--danger-text-rgb));
  --color-danger-soft:       rgb(var(--danger-soft-rgb));
  --color-danger-text-soft:  rgb(var(--danger-text-soft-rgb));
  --color-danger-text-pale:  rgb(var(--danger-text-pale-rgb));
  --color-danger-wash:       rgb(var(--danger-rgb) / 0.18);
  --color-danger-border:     rgb(var(--danger-rgb) / 0.55);

  /* ---------- GAMEPLAY IDENTITY: medals ---------- */

  --medal-gold: #facc15;
  --medal-silver: #cbd5e1;
  --medal-bronze: #d97706;

  /* ---------- FIXED SEMANTIC: the Google G ----------
     Google's brand guidelines require these EXACT colours — they are
     not a style choice. Do not "improve" them. */

  --g-logo-blue: #4285F4;
  --g-logo-red: #EA4335;
  --g-logo-yellow: #FBBC05;
  --g-logo-green: #34A853;

  /* ---------- GAMEPLAY IDENTITY: quiz answer letters ----------
     The letter is the identity, the colour is part of how the game is
     called out loud ("tap the yellow one"). A theme must never change
     these. */

  /* owner override 2026-09-12b: A lime, B cyan, C yellow, D cream,
     E purple, F pink. All six carry Dark Ink text. */
  --answer-a: #7ED957;
  --answer-b: #21C4F3;
  --answer-c: #FFD43B;
  --answer-d: #FFF7ED;
  --answer-e: #A78BFA;
  --answer-f: #F472B6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--gradient-stage);
  background-attachment: fixed;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* APPROVED DISPLAY TYPEFACE (Lilita One): personality / celebration /
   short display moments only. Buttons, inputs, instructions, metadata and
   paragraphs stay on --font-body. */
h1,
h2,
.cd-number,
.qs-title,
.rs-title,
.qh-lb-title,
.rh-lb-title,
.qh-podium-title,
.rh-podium-title,
.summary-title,
.ins-title,
.yi-title,
.pj-title,
.photo-title,
.photo-empty-title,
.photo-ended-title,
.leave-title,
.kb-gametitle,
.kb-state-title,
.kb-cap-title,
.db-title,
.db-ready-title,
.play-empty-title {
  font-family: var(--font-display);
}

/* inline illustration SVG text (instruction art) uses the display family */
.kb-art-text { font-family: var(--font-display); }

.hidden { display: none !important; }

/* ---------- brand ----------
   The brand is ALWAYS the genuine logo asset (owner correction
   2026-09-22b): never a styled-text wordmark. `.brand-logo` is the host
   header size; `.brand-logo-card` is the authentication-card size. */

.brand-logo {
  display: block;
  width: auto;
  height: clamp(30px, 4.4vw, 44px);
}

.brand-logo-card {
  display: block;
  width: auto;
  height: clamp(36px, 9vw, 50px);
}

.brand-tag {
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-text-quiet);
  margin-top: 0.25rem;
}

/* ---------- layout ---------- */

.player #app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.view {
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

/* ---------- join form ---------- */

.join-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.field {
  font-size: 1.15rem;
  padding: 1rem 1.1rem;
  border: var(--border-width-input) solid var(--color-border-strong);
  border-radius: var(--radius-button);
  background: var(--color-surface-input);
  color: var(--color-text);
  width: 100%;
  outline: none;
  min-height: 3.5rem;
}

.field::placeholder { color: var(--color-text-placeholder); }
.field:focus { border-color: var(--color-focus); background: var(--color-surface-focus); }

.pin-field {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.6em;
  text-indent: 0.6em;
}

.join-row { display: flex; gap: 0.75rem; }
.join-row .btn { flex: 1; }

.form-error {
  margin: 0;
  color: var(--color-danger-soft);
  font-weight: 600;
  min-height: 1.4em;
}

/* ---------- buttons ---------- */

.btn {
  font-size: 1.05rem;
  font-weight: 800;
  border: none;
  border-radius: var(--radius-button);
  padding: 0.95rem 1.4rem;
  min-height: 3.5rem;
  cursor: pointer;
  color: var(--color-on-primary);
  background: var(--color-primary);
  box-shadow: var(--shadow-button);
  transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.12s ease;
}

.btn:active {
  transform: translateY(3px);
  box-shadow: var(--shadow-button-pressed);
}

.btn:disabled { filter: grayscale(0.8); opacity: 0.55; cursor: default; }

.btn.join-btn { background: var(--gradient-cta); color: var(--color-text); flex: 2; }
.btn.surprise { background: var(--color-secondary); }
.btn.ghost { background: var(--color-surface-raised); color: var(--color-text); box-shadow: none; }
.btn.danger { background: var(--color-danger); color: var(--color-text); }
.btn.primary { background: var(--gradient-primary); color: var(--color-text); }
.btn.start-activity { width: 100%; background: var(--gradient-success); color: var(--color-text); }

/* ---------- status screens ---------- */

.status-text { font-size: 1.2rem; margin: 0.5rem 0; }

.activity-info {
  font-size: 1.6rem;
  font-weight: 800;
  width: 100%;
  text-align: center;
  animation: pulse 1.6s ease-in-out infinite;
}

/* Activity modules render inside this mount; it must take the full
   column width even though the surrounding view centers its children. */
#activity-mount { width: 100%; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* ---------- loading / reconnect / toast ---------- */

.loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-stage-base);
  z-index: 50;
}

.reconnect-banner {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface-inverse);
  color: var(--color-accent);
  font-weight: 700;
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-pill);
  z-index: 60;
}

/* Host-absence warning. Never shown together with .reconnect-banner:
   player.js guarantees the player's own "Reconnecting…" wins. */
.host-banner {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  background: var(--color-surface-inverse);
  border: var(--border-width-card) solid var(--color-focus);
  color: var(--color-accent);
  font-weight: 700;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-button);
  z-index: 60;
  text-align: center;
}

.host-banner-title { font-size: 1rem; }

.host-banner-sub {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  font-weight: 500;
}

/* Deliberately non-prominent Leave Game escape hatch. Batch 7 correction:
   always a comfortable >=44x44 target, clear of the device safe area. Its
   z-index is raised above the gameplay shell in game-shell.css. */
.leave-btn {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  color: var(--color-text-dim);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  min-height: 44px;
  min-width: 44px;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  z-index: 40;
  -webkit-tap-highlight-color: transparent;
}

/* Batch 7 correction: the Leave confirmation is a modal OVERLAY above the
   still-mounted live game (dimmed + inert behind it). Approved palette
   only - cream card, dark ink text, coral confirm, white support. */
#view-leave.leave-modal {
  position: fixed;
  inset: 0;
  z-index: 950; /* above the gameplay shell (900), below the countdown (9999) */
  width: auto;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 1rem) 1rem calc(env(safe-area-inset-bottom) + 1rem);
  background: rgba(32, 36, 44, 0.66); /* ink scrim dims the live game */
}

.leave-card {
  width: min(22rem, 100%);
  background: #FFF7ED;
  color: #20242C;
  border: 4px solid #FFFFFF;
  border-radius: 1.25rem;
  padding: 1.5rem 1.3rem 1.3rem;
  text-align: center;
  box-shadow: 0 12px 34px rgba(32, 36, 44, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.leave-title { margin: 0; font-size: 1.45rem; font-weight: 900; color: #20242C; }
.leave-sub { margin: 0 0 0.6rem; font-size: 0.98rem; color: #6B5B4A; }
.leave-card .join-row { justify-content: center; }
.leave-card .btn { min-height: 44px; }
.leave-card .btn.ghost { background: #FFFFFF; color: #20242C; border: 3px solid #20242C; }
.leave-card .btn.ghost:hover { filter: brightness(0.97); }
.leave-card .btn.danger { background: #FF6B4A; color: #FFFFFF; border: 3px solid #FFFFFF; }
.leave-card .btn.danger:hover { filter: brightness(1.05); }
.leave-card .btn:focus-visible { outline: 3px solid #FFD43B; outline-offset: 3px; }

.status-sub {
  font-size: 1rem;
  color: var(--color-text-soft);
  margin: 0;
}

.toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(90vw, 30rem);
  background: var(--color-surface-inverse);
  color: var(--color-text);
  font-weight: 600;
  padding: 0.8rem 1.3rem;
  border-radius: var(--radius-pill);
  z-index: 70;
  text-align: center;
  box-shadow: var(--shadow-raised);
}

/* ---------- host page ---------- */

.host-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  border-bottom: var(--border-width-card) solid var(--color-border-soft);
}

.host-tools { display: flex; gap: 0.6rem; }
.host-tools .btn { font-size: 0.9rem; padding: 0.55rem 1rem; min-height: 2.6rem; }

/* ---------- live-experience controls (owner correction 2026-09-23) ----------
   Music/Mute and Fullscreen belong to the LIVE experience only, and the
   live surfaces render their own approved pair (lobby-sound /
   lobby-fullscreen, instruction-sound / instruction-fullscreen, the game
   shell's gs-* utilities). The product top bar therefore renders
   neither - no music, effects or fullscreen control can appear on a
   dashboard/product screen. The separate Effects control is not
   approved: this rule keeps it hidden if one is ever re-introduced
   (its audio channel remains internal). */
#btn-mute-effects { display: none !important; }

.host-auth-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  background: var(--color-danger-wash);
  border: var(--border-width-card) solid var(--color-danger-border);
  border-radius: var(--radius-card);
  padding: 1.4rem;
  text-align: center;
  font-weight: 700;
}

.host-signin {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

.host-signin-box {
  width: 100%;
  max-width: 24rem;
  background: var(--color-surface);
  border: var(--border-width-card) solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.host-signin-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Self-serve auth panels (slice 1). All panels live inside #host-signin
   and reuse the box/field/button/form-error classes above — no new UI
   system. Only one panel is visible at a time (host-auth.js). */

.host-auth-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.host-auth-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-accent);
  text-align: center;
}

.host-auth-copy {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-soft);
  text-align: center;
  line-height: 1.45;
}

.host-auth-copy strong {
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* Quieter second line under a sign-in error: guidance, not alarm. */
.host-auth-hint {
  margin: -0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-hint);
  line-height: 1.45;
}

.host-auth-hint .host-auth-link { font-size: 0.85rem; }

.host-auth-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  color: var(--color-text-dim);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.host-auth-divider::before,
.host-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-muted);
}

.host-provider-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.host-provider-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--color-surface-solid);
  color: var(--color-on-primary);
  box-shadow: none;
}

.host-provider-btn svg { flex: none; }

/* Google G fills (the tokens live in :root under FIXED SEMANTIC —
   brand-guideline colours, applied here so no JS carries hex). */
.g-logo-blue { fill: var(--g-logo-blue); }
.g-logo-red { fill: var(--g-logo-red); }
.g-logo-yellow { fill: var(--g-logo-yellow); }
.g-logo-green { fill: var(--g-logo-green); }

.host-provider-btn:disabled {
  filter: grayscale(0.9);
  opacity: 0.45;
  cursor: not-allowed;
}

.host-auth-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.host-auth-link {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.25rem;
}

.host-field-hint {
  margin: -0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--color-text-faint);
  width: 100%;
}

.host-auth-connecting {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  animation: pulse 1.6s ease-in-out infinite;
}

/* Owner correction 2026-09-22b: the animation guide applies throughout
   the player experience - joining, loading and waiting. Under reduced
   motion continuous decorative motion STOPS (never merely slows); every
   element stays visible in its static state and the status text/brand
   carries the meaning, never the movement. host-auth-connecting is
   host-facing but lives in this player-loaded stylesheet, so it closes
   with the same switch. */
@media (prefers-reduced-motion: reduce) {
  .activity-info,
  .host-auth-connecting {
    animation: none;
  }
}

.host-main {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* A running activity owns the whole projector viewport (core adds
   game-running to <body> while an activity is on screen): the page locks
   to exactly one screen — no scrolling mid-game. Setup, sign-in and the
   holding lobby may scroll normally. */
body.host.game-running {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.host.game-running .host-top { flex: none; }

body.host.game-running .host-main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  width: 100%;       /* the classic 56rem game column, exactly as before */
  max-width: 56rem;
}

body.host.game-running #host-main-ui {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.host.game-running #activity-mount {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Full-page holding lobby (Kahoot-style): shown after the host presses
   Start on the setup screen, until the game actually begins. */

.lobby-stage {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: calc(100dvh - 8rem);
  min-height: 0;
}

.lobby-start {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

.lobby-start-btns {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.lobby-start-btns .btn { flex: 1; max-width: 20rem; }

.lobby-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  text-align: center;
  max-width: 30rem;
}

/* Kahoot-style join lobby: instructions on top, PIN as huge plain digits
   (no box, like Kahoot), QR code with a scan hint, player count, then the
   names as they join. Everything fits on one screen — no scrolling. */

.lobby-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.lobby-instructions {
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  font-weight: 800;
  text-align: center;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

.lobby-instructions .join-domain { color: var(--color-accent); }

.pin {
  display: inline-block;
  font-size: clamp(2.6rem, 8.5vh, 5.5rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--color-text);
  text-shadow: var(--shadow-text-glow);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.lobby-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.lobby-join {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.qr-caption {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.qr-box {
  background: var(--color-surface-solid);
  border-radius: var(--radius-button);
  padding: 0.45rem;
  line-height: 0;
}

.qr-box svg { display: block; }

.lobby-stats { text-align: center; }

.count-label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--color-text-faded);
}

.count {
  font-size: clamp(3.5rem, 10vw, 5.5rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--color-success);
  font-variant-numeric: tabular-nums;
}

.join-url {
  font-size: 0.85rem;
  color: var(--color-text-quiet);
  max-width: 16rem;
  overflow-wrap: anywhere;
}

/* Short projectors (720p-class): reclaim vertical space for the join
   feed so more name rows are visible. The PIN stays huge, the QR and
   Start button keep their place, and the page still fits without a
   scrollbar (verified 1024x768 and 1280x720). Placed AFTER the rules it
   overrides so it actually wins. */
@media (max-height: 800px) {
  .pin { font-size: clamp(2.4rem, 7vh, 5.5rem); }
  .lobby-card { gap: 0.4rem; }
  .lobby-stage { gap: 0.45rem; }
}

/* names: live join feed — newest at the TOP, older names pushed down, the
   oldest visible one exits at the bottom. Display-only window over the
   server's participant list (most recent 50, oldest first): the feed shows
   the newest `capacity` rows, newest first. Rows are absolutely positioned
   (top = row * pitch) and move with plain CSS transitions, so a join is
   one continuous stream: the newest chip slides into the top slot, every
   kept chip glides one row down, and the oldest row slides out below the
   visible area while fading. The first render after a load/reset is a
   static snapshot (no join animation for names that were already there). */

.lobby-card { flex: none; }

.names-box {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.names {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.feed-name {
  position: absolute;
  left: 0;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.35rem;
  margin-bottom: 0.5rem; /* row pitch = 2.85rem (JS measures it) */
  padding: 0 0.55rem 0 0.9rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-on-primary);
  box-sizing: border-box;
  transition: top 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
}

/* Participant colour comes from a stable hash of the participant id
   (feed-c0..feed-c4, added in JS) — the same player keeps the same colour
   when rows move, when others join, and across kicks/rejoins. Never
   nth-child: DOM order is not visual order in the feed. */
.feed-name.feed-c0 { background: var(--palette-1); }
.feed-name.feed-c1 { background: var(--palette-2); }
.feed-name.feed-c2 { background: var(--palette-3); }
.feed-name.feed-c3 { background: var(--palette-4); }
.feed-name.feed-c4 { background: var(--palette-5); }

/* Static snapshot (initial render / reload / capacity growth): no motion. */
.feed-name.feed-static { transition: none; }

/* Entry: a genuinely new joiner slides down into the top slot. */
.feed-name.feed-entrant { animation: feed-in 0.35s ease; }

/* Exit: the oldest visible row slides out below the visible area and
   fades (top + opacity transitions); it stays on top of the others while
   it leaves, and its removal never reflows the remaining list. */
.feed-name.feed-exit {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

@keyframes feed-in {
  from { transform: translateY(-1.4rem); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.name-chip-label { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kick-btn {
  border: none;
  background: var(--color-kick);
  color: var(--color-on-primary);
  width: 1.7rem;
  height: 1.7rem;
  min-width: 1.7rem;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.kick-btn:hover { background: var(--color-kick-hover); }

/* activity panel (placeholder until Phase 2) */

.activity-panel {
  background: var(--color-surface);
  border: var(--border-width-card) solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 1.15rem;
}

.activity-type { font-weight: 900; color: var(--color-accent); }

.activity-controls { display: flex; gap: 0.75rem; margin-top: 0.4rem; }
.activity-controls .btn { flex: 1; }

/* ---------- dashboard (Slice 2) ----------
   The signed-in shell: nav + workspace. The workspace shows a list view
   OR (when an activity's setup screen is open) the Save/Save & Launch
   chrome above the shared #activity-mount. Additive only — the player
   site never renders this. */

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.db-nav {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.db-tab {
  background: var(--color-surface-control);
  border: var(--border-width-card) solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
}

.db-tab.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.db-tab.disabled {
  opacity: 0.45;
  filter: grayscale(0.9);
  cursor: not-allowed;
}

.db-workspace {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.db-view {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.db-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-accent);
}

.db-section { display: flex; flex-direction: column; gap: 0.5rem; }

.db-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.db-section-title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--color-text); }

.db-card {
  background: var(--color-surface);
  border: var(--border-width-card) solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1rem 1.2rem;
}

.db-rejoin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-color: var(--color-focus);
  flex-wrap: wrap;
}

.db-rejoin-title { font-weight: 800; font-size: 1.05rem; }

.db-rejoin-sub { font-size: 0.85rem; color: var(--color-text-quiet); margin-top: 0.2rem; }

.db-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--color-surface);
  border: var(--border-width-card) solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 0.75rem 1rem;
  flex-wrap: wrap;
}

.db-row-main { min-width: 0; }

.db-row-title {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.db-row-sub { font-size: 0.85rem; color: var(--color-text-faded); }

.db-row-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.db-row-actions .btn { font-size: 0.85rem; padding: 0.5rem 0.9rem; min-height: 2.4rem; }

.db-empty {
  color: var(--color-text-faded);
  font-size: 0.95rem;
  padding: 0.5rem 0;
}

.db-chips { display: flex; gap: 0.45rem; flex-wrap: wrap; }

.db-chip {
  background: var(--color-surface-control);
  border: var(--border-width-card) solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.4rem 1rem;
  cursor: pointer;
}

.db-chip.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.db-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.75rem;
}

.db-tile {
  background: var(--color-surface);
  border: var(--border-width-card) solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.2rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.db-tile:hover { border-color: var(--color-focus); background: var(--color-surface-raised); }

.db-tile-label { font-weight: 800; font-size: 1.05rem; }

.db-tile-cats { font-size: 0.8rem; color: var(--color-text-faint); }

.db-setup-chrome {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--color-surface);
  border: var(--border-width-card) solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 0.9rem 1.1rem;
}

.db-title { font-size: 1.05rem; }

/* Owner change: Save/Exit ride at the BOTTOM of the editor page — the
   host finishes the questions and saves right there, sticky so a long
   quiz never makes them scroll back up. */
.db-setup-actions {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 0;
  background: var(--gradient-surface);
}

.db-setup-actions .btn { flex: 1; max-width: 14rem; }

@media (max-width: 480px) {
  .db-setup-actions .btn { max-width: none; }
}

/* ---------- small screens ---------- */

/* Slice 5: the saved-game theme selector in the editor chrome. */
.db-skin-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-soft);
}
.db-skin-select {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-input);
  border: var(--border-width-card) solid var(--color-border-input);
  background: var(--color-surface-control);
  color: var(--color-text);
  min-height: 2.6rem;
}
.db-skin-select option { color: var(--color-on-primary); }

@media (max-width: 480px) {
  .host-tools .btn { padding: 0.5rem 0.75rem; }
  .lobby-row { gap: 1rem; }
  .qr-box { padding: 0.45rem; }
}

/* ---------- shared ranked leaderboard + podium (Slice 4) ----------
   ONE implementation for every activity's host screen (activities/
   shared/leaderboard.js + these rules). Reflex and Quiz both render
   rows with the .rh-lb-* classes; Quiz additionally uses the .qh-lb-*
   scoreboard shell. The staged reveal choreography classes are shared
   too. Token-driven only — no hex values outside :root. */

/* leaderboard — fits the remaining viewport height */

.rh-lb {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rh-lb-title {
  flex: none;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--color-accent);
  text-align: center;
}

.rh-lb-rows {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rh-lb-row {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--color-surface-input);
  border: var(--border-width-card) solid var(--color-border-row);
  border-radius: var(--radius-row);
  padding: 0.3rem 0.9rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.rh-lb-row .lb-rank {
  font-weight: 900;
  color: var(--color-accent);
  min-width: 2.2ch;
  text-align: center;
}

.rh-lb-row .lb-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
  font-weight: 800;
}

/* prominent total, secondary per-round/per-question value */
.rh-lb-row .lb-time {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  color: var(--color-text);
  font-size: 1.15rem;
}

.rh-lb-row .lb-round {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text-quiet);
  min-width: 4.4ch;
  text-align: right;
}

/* movement indicators: green up, red down, grey unchanged/NEW.
   NOTE: the down-arrow red is #ef4444 for BOTH activities. Reflex's own
   stylesheet carried a brighter #f87171 but the identical selector in
   quiz.css loaded after it, so the danger red won everywhere at runtime
   (recorded in SLICE4_AUDIT §5.1 — the source-level divergence was
   dead code; the rendered value is preserved here). */
.rh-lb-row .lb-arrow {
  min-width: 3ch;
  text-align: right;
  font-weight: 900;
  color: var(--color-text-dim);
}
.rh-lb-row .lb-arrow.up { color: var(--color-success); }
.rh-lb-row .lb-arrow.down { color: var(--color-danger); }
.rh-lb-row .lb-arrow.new { font-size: 0.8rem; letter-spacing: 0.08em; }
/* ---- staged suspense reveal ---- */

/* stage 2: new round values pop in while players sit in their old spots */
.rh-lb-row .lb-round {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.rh-lb-rows.lb-times .lb-round { opacity: 1; transform: none; }

/* stage 4: movement indicators pop in */
.rh-lb-row .lb-arrow {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.rh-lb-rows.lb-arrows .lb-arrow { opacity: 1; transform: none; }

/* stage 5: physical FLIP shuffle */
.rh-lb-row.lb-shuffle {
  transition: transform 1.4s cubic-bezier(0.22, 0.8, 0.35, 1), opacity 1.1s ease;
}

/* new entrants rise in; departing players slide down and fade */
.rh-lb-row.lb-entrant { opacity: 0; transform: translateY(26px) scale(0.96); }
.rh-lb-row.lb-entrant.lb-shuffle { opacity: 1; transform: translateY(0) scale(1); }
/* departing rows stay VISIBLE at INVERT, then the PLAY phase fades them
   while they physically slide down — never born invisible */
.rh-lb-row.lb-exit { opacity: 1; }
.rh-lb-row.lb-exit.lb-shuffle { opacity: 0; }

/* settle: collapse departing rows out of the layout before removal so the
   remaining rows grow smoothly instead of jolting */
.rh-lb-row.lb-collapse {
  flex: 0 0 auto;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  transition: max-height 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
}

/* zero-standings reveal (everyone kicked): a quiet empty state, no fake data */
.rh-lb-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-quiet);
  text-align: center;
}

/* round 1 cascade */
.rh-lb-row.lb-cascade { animation: rb-cascade 0.5s ease both; }
@keyframes rb-cascade {
  from { transform: translateY(-14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* quiz's scoreboard shell (its own title card + rows container) */
.qh-lb {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.qh-lb-title {
  flex: none;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--color-accent);
  text-align: center;
  background: var(--color-surface);
  border: var(--border-width-card) solid var(--color-border);
  border-radius: var(--radius-tile);
  padding: 0.55rem 1rem;
}

.qh-instruction {
  flex: none;
  text-align: center;
  color: var(--color-text-soft);
  font-weight: 600;
}

.qh-lb-rows {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.qh-lb-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-quiet);
  text-align: center;
}

/* podium (C8) */

.rh-podium-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--color-accent);
}

.podium-stage {
  width: 100%;
  max-width: 40rem;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.8rem;
}

.podium-slot {
  flex: 1;
  max-width: 14rem;
  border-radius: var(--radius-tile) var(--radius-tile) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 1rem 0.5rem 0;
  font-weight: 900;
  color: var(--color-on-primary);
  animation: rb-podium 0.7s ease both;
}

.podium-slot .ps-name { font-size: 1.15rem; overflow-wrap: anywhere; }
.podium-slot .ps-time { font-size: 1rem; font-variant-numeric: tabular-nums; }
.podium-slot .ps-place { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.2em; }

.podium-slot.first { height: min(13.5rem, 30vh); background: var(--medal-gold); animation-delay: 0.15s; }
.podium-slot.second { height: min(10.5rem, 24vh); background: var(--medal-silver); animation-delay: 0s; }
.podium-slot.third { height: min(8rem, 19vh); background: var(--medal-bronze); color: var(--color-text); animation-delay: 0.3s; }

@keyframes rb-podium {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Owner correction 2026-09-22: the shared podium and leaderboard
   entrances are part of the complete Quiz and Reflex flows and must
   honour reduced motion (the final positions appear immediately). */
@media (prefers-reduced-motion: reduce) {
  .podium-slot,
  .rh-lb-row.lb-cascade { animation: none; }
}

/* ---------- hover states (W5) ----------
   Every action button gets a visible shift on hover, so it is always
   obvious what is being pointed at. :active keeps its press-down feel. */

.btn:not(:disabled):hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* While pressed, the press-down beat wins over the hover lift. */
.btn:not(:disabled):active { transform: translateY(3px); }

.btn.ghost:not(:disabled):hover { background: var(--color-surface-hover); }

.db-tab:not(:disabled):hover { border-color: var(--color-focus); }
.db-chip:hover { border-color: var(--color-focus); }
.host-auth-link:hover { color: var(--color-text); }

/* ---------- podium menu + session summary (W8, both activities) ---------- */

.podium-menu-btn.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: none;
}

.summary-box {
  width: 100%;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  overflow-y: auto;
  max-height: 100%;
}

.summary-title {
  flex: none;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--color-accent);
  text-align: center;
}

.summary-row {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--color-surface-input);
  border: var(--border-width-card) solid var(--color-border-row);
  border-radius: var(--radius-row);
  padding: 0.5rem 0.9rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.summary-row .lb-rank {
  font-weight: 900;
  color: var(--color-accent);
  min-width: 2.2ch;
  text-align: center;
}

.summary-row .lb-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
  font-weight: 800;
}

.summary-row .lb-time {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  color: var(--color-text);
  font-size: 1.05rem;
}

/* ---------- W4: Saved Games cards (actions reveal on hover) ---------- */

.db-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.75rem;
}

.db-game-card {
  position: relative;
  min-height: 8rem;
  background: var(--color-surface);
  border: var(--border-width-card) solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  overflow: hidden;
}

.db-card-main { min-width: 0; }

.db-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 1.1rem;
  background: var(--color-scrim-card);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.db-card-overlay .btn { width: 100%; }

.db-game-card:hover .db-card-overlay,
.db-game-card:focus-within .db-card-overlay { opacity: 1; }

.db-card-minor {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 0.15rem;
}

.db-card-minor .host-auth-link { font-size: 0.8rem; }

/* Touch devices have no hover: the actions stay visible. */
@media (hover: none) {
  .db-card-overlay { position: static; opacity: 1; background: none; padding: 0.75rem 0 0; }
  .db-game-card { justify-content: flex-start; }
}

/* ---------- W1: "Your quiz is ready" modal ---------- */

.db-ready-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-scrim-modal);
  z-index: 80;
  padding: 1.25rem;
}

.db-ready-box {
  width: 100%;
  max-width: 22rem;
  background: var(--color-surface-control);
  border: var(--border-width-card) solid var(--color-border-muted);
  border-radius: var(--radius-panel);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.db-ready-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-accent);
  text-align: center;
}

.db-ready-hostlive {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.db-ready-sub {
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.9;
}

.db-ready-row {
  display: flex;
  gap: 0.6rem;
}

.db-ready-row .btn { flex: 1; }

/* ---------- toggle switches (the quiz editor's player-screen settings
   and any future switch UI share these) ---------- */

.vis-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-strong);
}

.vis-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.vis-switch {
  flex: none;
  width: 2.4rem;
  height: 1.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-border-muted);
  border: var(--border-width-card) solid var(--color-border-strong);
  position: relative;
  transition: background 0.15s ease;
}

.vis-switch::after {
  content: '';
  position: absolute;
  top: 0.12rem;
  left: 0.14rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-solid);
  transition: transform 0.15s ease;
}

.vis-toggle input:checked + .vis-switch {
  background: var(--color-success);
  border-color: var(--color-success);
}

.vis-toggle input:checked + .vis-switch::after {
  transform: translateX(1rem);
}

.vis-toggle input:focus-visible + .vis-switch { outline: var(--border-width-card) solid var(--color-focus); }

/* ---------- /play empty state (W1) ---------- */

.play-empty {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
  padding: 2rem 1.25rem;
}

.play-empty-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--color-accent);
}

.play-empty-sub {
  font-size: 1rem;
  color: var(--color-text-soft);
  max-width: 26rem;
}

/* =====================================================================
   GAME-PRODUCT IDENTITY for the host/editor workspace (owner correction
   2026-09-22e). The game-management interface is a LIGHT WORKSPACE:
   predominantly white/cream surfaces, dark-ink text, coral action
   accents, restrained borders and shadows - never a full-screen coral
   stage. Coral full-screen environments belong to the live show, the
   projector and the player (the game shell's own lock). Scoped away
   from the approved live surfaces (shell, lobby, instructions).
   Shape: 10px button radius (Button Style Option B); content width
   1320px (Page Width Option B).
   ===================================================================== */
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) {
  /* white workspace */
  --color-background: #FFFFFF;
  --color-background-mid: #FFF7ED;
  --color-background-deep: #F4EDE4;
  --gradient-stage: #FFFFFF;
  --gradient-stage-base: #FFFFFF;
  --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 247, 237, 0.9) 30%);
  /* ink text: the derived tokens must be redeclared here (they resolve
     at :root, so changing only the rgb base would leave them white) */
  --text-rgb: 32 36 44;
  --color-text: rgb(32 36 44);
  --color-text-strong: rgb(32 36 44 / 0.92);
  --color-text-soft: rgb(32 36 44 / 0.78);
  --color-text-muted: rgb(32 36 44 / 0.68);
  --color-text-quiet: rgb(32 36 44 / 0.62);
  --color-text-hint: rgb(32 36 44 / 0.58);
  --color-text-faded: rgb(32 36 44 / 0.55);
  --color-text-faint: rgb(32 36 44 / 0.5);
  --color-text-placeholder: rgb(32 36 44 / 0.4);
  --color-text-dim: rgb(32 36 44 / 0.45);
  /* cream/white cards and controls */
  --surface-rgb: 255 255 255;
  --color-surface-faint: #FBF7F2;
  --color-surface: #FFFFFF;
  --color-surface-control: #FFFFFF;
  --color-surface-input: #FFFFFF;
  --color-surface-raised: #FFF7ED;
  --color-surface-track: rgba(32, 36, 44, 0.1);
  --color-surface-raised-2: #F6EFE6;
  --color-surface-focus: #FFFFFF;
  --color-surface-hover: #FFF4EA;
  --color-surface-ctrl-hover: #FFEBDD;
  --color-surface-solid: #FFFFFF;
  --color-border-soft: #F0E9E0;
  --color-border: #E9E2DA;
  --color-border-subtle: #E4DCD2;
  --color-border-row: #EAE3DA;
  --color-border-muted: #DED6CB;
  --color-border-input: #D9D0C5;
  --color-border-strong: #C9BFB2;
  /* action hierarchy: coral primary, coral-outline secondary, cyan info */
  --color-primary: #FF6B4A;
  --color-on-primary: #FFFFFF;
  --color-accent: #FF6B4A;
  --color-accent-shadow: #E85A3A;
  --color-accent-2: #21C4F3;
  --color-secondary: #FF922B;
  --color-focus: #21C4F3;
  --color-surface-inverse: #20242C;
  --gradient-primary: linear-gradient(180deg, #FF6B4A, #F0552F);
  --gradient-cta: linear-gradient(180deg, #FF6B4A, #F0552F);
  /* Button Style Option B */
  --radius-button: 10px;
  --radius-input: 10px;
  --radius-card: 12px;
  --radius-panel: 14px;
  --shadow-button: 0 1px 0 rgba(32, 36, 44, 0.16);
  --shadow-button-pressed: 0 1px 0 rgba(32, 36, 44, 0.1) inset;
  --shadow-chip: 0 1px 2px rgba(32, 36, 44, 0.08);
  --shadow-raised: 0 4px 14px rgba(32, 36, 44, 0.08);
  --shadow-text-glow: none;
  /* danger/success keep contrast on light surfaces */
  --danger-rgb: 220 62 32;
  --danger-text-rgb: 194 58 23;
  --danger-soft-rgb: 255 196 176;
  --danger-text-soft-rgb: 142 43 16;
  --danger-text-pale-rgb: 142 43 16;
  --color-danger: rgb(220 62 32);
  --color-danger-text: rgb(194 58 23);
  --color-danger-soft: rgb(255 196 176);
  --color-danger-text-soft: rgb(142 43 16);
  --color-danger-text-pale: rgb(142 43 16);
  --color-danger-wash: rgb(194 58 23 / 0.1);
  --color-danger-border: rgb(194 58 23 / 0.4);
  --color-success: #15803D;
  --color-success-soft: rgba(21, 128, 61, 0.12);
  --color-selection-soft: rgb(33 196 243 / 0.14);
  /* ink scrims, soft shadows */
  --scrim-rgb: 32 36 44;
  --stage-scrim-rgb: 32 36 44;
  --color-scrim-stage: rgb(32 36 44 / 0.55);
  --color-scrim-stage-deep: rgb(32 36 44 / 0.94);
  --color-scrim-ink: rgb(32 36 44 / 0.55);
  --color-scrim-ink-soft: rgb(32 36 44 / 0.6);
  --color-scrim-modal: rgb(32 36 44 / 0.45);
  --color-scrim-card: rgb(32 36 44 / 0.6);
  --color-kick: rgb(32 36 44 / 0.06);
  --color-kick-hover: rgb(32 36 44 / 0.12);
  background: #FFFFFF;
}

/* ---------- game-product shell: topbar + sidebar + workspace ---------- */

html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-top {
  background: #FFFFFF;
  border-bottom: 1px solid #E9E2DA;
  padding: 0.85rem 1.4rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .brand-logo {
  height: clamp(30px, 4.2vw, 40px);
}
/* topbar tools read as quiet secondary controls */
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-tools .btn.ghost {
  background: #FFFFFF;
  color: #20242C;
  border: 1.5px solid #E9E2DA;
  box-shadow: none;
  border-radius: 10px;
  font-weight: 700;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-tools .btn.ghost:hover {
  border-color: #C9BFB2;
  filter: none;
}

/* the signed-in shell: fixed white sidebar, light workspace */
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #dashboard {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: calc(100vh - 62px);
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-nav {
  flex: 0 0 232px;
  align-self: stretch;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  align-items: stretch;
  background: #FFFFFF;
  border-right: 1px solid #E9E2DA;
  padding: 1.1rem 0.8rem;
  box-sizing: border-box;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tab {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: #20242C;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.65rem 0.9rem;
  border-radius: 10px;
  cursor: pointer;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tab:hover {
  background: #FFF4EA;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tab.active {
  background: #FFEBDD;
  color: #C9482C;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-workspace {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 1320px; /* Page Width Option B */
  margin: 0 auto;
  padding: 1.6rem clamp(1rem, 2.6vw, 2.2rem) 3rem;
  box-sizing: border-box;
}

/* cards, sections and the page title follow the light workspace language */
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-title {
  color: #20242C;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin: 0 0 0.35rem;
  text-align: left;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card,
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-game-card,
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tile {
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(32, 36, 44, 0.04);
  color: #20242C;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-section-head .host-auth-link {
  color: #FF6B4A;
  font-weight: 700;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-chip {
  background: #FFFFFF;
  border: 1.5px solid #E9E2DA;
  color: #20242C;
  border-radius: 999px;
  font-weight: 700;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-chip.active {
  background: #FF6B4A;
  border-color: #FF6B4A;
  color: #FFFFFF;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-empty {
  background: #FFFFFF;
  border: 1px dashed #E9E2DA;
  border-radius: 12px;
  color: rgb(32 36 44 / 0.68);
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-overlay {
  background: rgb(32 36 44 / 0.6);
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-row {
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-photo-tile {
  background: #FFF7ED;
  border: 1px solid #F0E0CF;
  border-radius: 12px;
}

/* ---------- authentication gate on the light workspace ---------- */

html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-signin-box,
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-auth-error {
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(32, 36, 44, 0.08);
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-auth-title {
  color: #20242C;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-auth-link {
  color: #FF6B4A;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-auth-link:hover {
  color: #C9482C;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-provider-btn {
  background: #FFFFFF;
  border: 1.5px solid #E9E2DA;
  border-radius: 10px;
  color: #20242C;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .btn.ghost {
  background: #FFFFFF;
  color: #FF6B4A;
  border: 1.5px solid #FF6B4A;
  box-shadow: none;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .play-empty-title {
  color: #20242C;
  text-shadow: none;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .mod-card {
  background: #FFFFFF;
  border-color: #E9E2DA;
  color: #20242C;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .mod-photo {
  background: rgba(32, 36, 44, 0.08);
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .photo-q-item {
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
  padding: 0.7rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .photo-q-thumb {
  background: rgba(32, 36, 44, 0.06);
}

/* ---------- dashboard home / saved games / activity selection ----------
   (owner correction 2026-09-22e, selected references: Dashboard Home
   Option A, Saved Games Option A, Activity Selection Option B.) */

html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 14px;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.6vw, 1.8rem);
  margin-bottom: 1.4rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-title {
  margin: 0 0 0.2rem;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  color: #20242C;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-sub {
  margin: 0;
  color: rgb(32 36 44 / 0.68);
  font-size: 0.98rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-create {
  white-space: nowrap;
  flex: none;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-page-sub,
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-section-sub {
  margin: 0.15rem 0 0.9rem;
  color: rgb(32 36 44 / 0.62);
  font-size: 0.92rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-section {
  margin-bottom: 1.8rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-section-title {
  margin: 0;
  font-size: 1.12rem;
  color: #20242C;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* saved-game cards: activity accent banner + always-visible actions */
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-game-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-banner {
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-main {
  padding: 0.85rem 0.95rem 0.3rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem 0.9rem;
  flex-wrap: wrap;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-actions .btn {
  padding: 0.45rem 0.8rem;
  min-height: 2.35rem;
  font-size: 0.9rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-actions .db-launch {
  color: #FF6B4A;
  border-color: #FF6B4A;
  font-weight: 800;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-actions .db-edit {
  color: #20242C;
  border: 1.5px solid #E9E2DA;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-actions .host-auth-link {
  font-size: 0.82rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .accent-cyan { background: #21C4F3; }
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .accent-orange { background: #FF922B; }
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .accent-coral { background: #FF6B4A; }
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .accent-yellow { background: #FFD43B; color: #20242C; }

/* discover strip tiles */
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.8rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
  padding: 1rem 1.05rem;
  cursor: pointer;
  text-align: left;
  color: #20242C;
  background: #FFFFFF;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-tile:hover {
  border-color: #FF6B4A;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-label {
  font-weight: 800;
  font-size: 1rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-sub {
  font-size: 0.84rem;
  color: rgb(32 36 44 / 0.6);
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-tile.accent-cyan { background: #E8F8FE; }
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-tile.accent-orange { background: #FFF1E3; }
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-tile.accent-coral { background: #FFE9E3; }
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-tile.accent-yellow { background: #FFF8DC; }

/* recent-game rows */
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-row-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 1rem;
  flex: none;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-row-ico.accent-yellow { color: #20242C; }
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-row .db-row-main { flex: 1; min-width: 0; }

/* activity selection hero band */
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-band {
  background: #FFF3EC;
  border: 1px solid #F6E0D4;
  border-radius: 14px;
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  margin-bottom: 1.3rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-title {
  margin: 0 0 0.25rem;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: #20242C;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-sub {
  margin: 0;
  color: rgb(32 36 44 / 0.68);
  font-size: 0.98rem;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-choose-title { margin-top: 0.2rem; }

/* responsive: the sidebar becomes a horizontal rail under 860px */
@media (max-width: 860px) {
  html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #dashboard {
    flex-direction: column;
  }
  html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-nav {
    flex: none;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid #E9E2DA;
    padding: 0.6rem 0.7rem;
    position: sticky;
    top: 0;
    z-index: 6;
  }
  html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tab {
    width: auto;
    padding: 0.5rem 0.8rem;
  }
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-hero {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =====================================================================
   GAME-PRODUCT SHELL - full-width sidebar workspace (owner correction
   2026-09-23). The dashboard/editor shell escapes the old 56rem game
   column: the product workspace owns the viewport, the sidebar is a
   genuine left rail, and the content column is capped at the selected
   1320px balanced width (Page Width Option B). Coral stays an accent;
   the full-coral stage belongs to the live show, projector and player
   surfaces. Scoped to body.db-shell, which the dashboard adds while it
   is the visible screen and removes the moment a room/lobby takes over.
   ===================================================================== */

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-main {
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #host-main-ui {
  display: grid;
  grid-template-columns: 236px minmax(0, 1320px);
  justify-content: start;
  align-items: stretch;
  min-height: calc(100vh - 61px);
}

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #dashboard { display: contents; }

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-nav {
  grid-column: 1;
  grid-row: 1 / span 4;
  min-height: 100%;
  background: #FFFFFF;
  border-right: 1px solid #E9E2DA;
  padding: 1.4rem 0.9rem;
  gap: 3px;
  box-sizing: border-box;
}

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-nav .db-nav-group {
  margin: 1rem 0.9rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(32 36 44 / 0.45);
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-nav .db-nav-group:first-child { margin-top: 0; }

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tab {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: #20242C;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.62rem 0.85rem;
  border-radius: 10px;
  cursor: pointer;
  min-height: 44px;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tab svg { width: 19px; height: 19px; flex: none; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tab:hover { background: #FFF4EA; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tab.active { background: #FFEBDD; color: #C9482C; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tab:focus-visible { outline: 3px solid #21C4F3; outline-offset: 2px; }

/* visible keyboard focus across the whole product workspace (buttons,
   fields, selects, links) - never the thin browser default */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) :is(button, input, select, textarea, a[href], [tabindex]):focus-visible {
  outline: 3px solid #21C4F3;
  outline-offset: 2px;
}

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-workspace {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0;
  padding: 1.9rem clamp(1.1rem, 2.6vw, 2.4rem) 1rem;
}

/* the editor + Save bar share the SAME content column as the views, so
   the single-page editor lines up under the page heading (Creator
   Option A: one focused setup page, no permanent live preview) */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #activity-mount {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding: 0 clamp(1.1rem, 2.6vw, 2.4rem) 0.5rem;
}

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-setup-actions {
  grid-column: 2;
  grid-row: 4;
  width: 100%;
  max-width: 1320px;
  margin: 0;
  padding: 1rem clamp(1.1rem, 2.6vw, 2.4rem) 3rem;
  /* owner correction 2026-09-23: the Save/Exit bar is a NORMAL end-of-page
     block, never sticky - a floating bar covered the rounds and the
     Start game area. In normal flow nothing can overlap. */
  position: static;
  bottom: auto;
  z-index: auto;
  background: #FFFFFF;
  border-top: 1px solid #E9E2DA;
  box-sizing: border-box;
}
/* Appearance sits BETWEEN Game Setup and Save/Exit (Creator Option A
   order) and shares the mount's exact content boundaries: the grid item
   carries the same horizontal padding as #activity-mount, and the inner
   box is the white card, so its left/right edges align with Game Basics
   and Game Setup at every viewport. */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-appearance-card {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  padding: 1.1rem clamp(1.1rem, 2.6vw, 2.4rem) 0.6rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-appearance-box {
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-setup-actions .btn { max-width: 16rem; }

/* the top bar's product action: the ONE primary action of the shell */
html body.host .host-top-right {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-top { padding: 0.8rem 1.4rem; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .brand-logo { height: clamp(30px, 4.2vw, 40px); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #btn-create-game {
  background: #FF6B4A;
  color: #FFFFFF;
  border: none;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.62rem 1.15rem;
  min-height: 44px;
  border-radius: 10px;
  box-shadow: 0 2px 0 #E85A3A;
  white-space: nowrap;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #btn-create-game:hover { filter: brightness(1.06); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #btn-create-game:active { transform: translateY(2px); box-shadow: 0 1px 0 #E85A3A; }
body.lobby-live #btn-create-game,
body.game-shell-live #btn-create-game,
body.instruction-live #btn-create-game { display: none !important; }

/* ---------- notifications (toast): readable on the light workspace ----------
   The product shell is a light workspace; the shared toast's dark pill
   must never inherit the workspace's ink text (the defect this rule
   closes). Cream on ink, verified by the product-shell suite. */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .toast {
  background: #20242C;
  color: #FFF7ED;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(32, 36, 44, 0.28);
}

/* ---------- Dashboard Home (Dashboard Home Option A) ---------- */

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  background: #FFF7ED;
  border: 1px solid #F3E7D8;
  border-radius: 14px;
  padding: clamp(1.2rem, 2.6vw, 1.9rem) clamp(1.3rem, 2.8vw, 2rem);
  margin-bottom: 1.6rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-welcome { min-width: 0; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-title {
  margin: 0 0 0.25rem;
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  color: #20242C;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-sub { margin: 0; color: rgb(32 36 44 / 0.68); font-size: 1rem; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-create-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; flex: none; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-create {
  white-space: nowrap;
  flex: none;
  background: #FF6B4A;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 1.02rem;
  padding: 0.8rem 1.5rem;
  min-height: 48px;
  box-shadow: 0 3px 0 #E85A3A;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-create:hover { filter: brightness(1.06); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-create:active { transform: translateY(2px); box-shadow: 0 1px 0 #E85A3A; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-create-note { font-size: 0.82rem; color: rgb(32 36 44 / 0.6); }

/* quick-launch / saved-game cards: activity artwork, title, meta, actions */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
  align-items: stretch;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(32, 36, 44, 0.04);
  cursor: default;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-game-card:hover { border-color: #D9D0C5; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-banner {
  height: 132px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  overflow: hidden;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-activity {
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
  background: rgba(255, 255, 255, 0.92);
  color: #20242C;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-main { padding: 0.85rem 0.95rem 0.2rem; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: #20242C;
  overflow-wrap: anywhere;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-meta { margin-top: 0.3rem; font-size: 0.85rem; color: rgb(32 36 44 / 0.62); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.95rem 0.95rem;
  flex-wrap: wrap;
  margin-top: auto;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-actions .btn {
  padding: 0.5rem 0.9rem;
  min-height: 40px;
  font-size: 0.88rem;
  border-radius: 10px;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-actions .db-launch {
  color: #FF6B4A;
  border: 1.5px solid #FF6B4A;
  font-weight: 800;
  background: #FFFFFF;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-actions .db-launch:hover { background: #FFF4EA; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-actions .db-edit {
  color: #20242C;
  border: 1.5px solid #E9E2DA;
  background: #FFFFFF;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-more-wrap { position: relative; margin-left: auto; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-more {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid #E9E2DA;
  background: #FFFFFF;
  color: #20242C;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-more:hover { border-color: #C9BFB2; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  min-width: 10.5rem;
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(32, 36, 44, 0.14);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-more-menu button {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #20242C;
  cursor: pointer;
  min-height: 40px;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-more-menu button:hover { background: #FFF4EA; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-more-menu button.db-del { color: #C23A17; }

/* activity artwork (provisional in-palette art, no external assets):
   approved accent fill + simple white shapes, never the activity label
   alone. Declared PROVISIONAL in the code until approved artwork lands.
   The art is designed at full-tile size and scaled down inside compact
   slots (row icons, quick tiles, hero accents) so it can never spill. */
.db-art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transform-origin: center;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tile-art .db-art,
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-banner .db-art { transform: scale(0.92); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-art .db-art { transform: scale(0.72); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-art .db-art { transform: scale(0.44); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row-art .db-art,
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-quick-art .db-art { transform: scale(0.38); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row-art,
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-quick-art,
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-art span { overflow: hidden; }
.db-art i { display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.db-art-reflex i {
  width: 34px; height: 34px;
  background: #FFFFFF;
  color: #20242C;
  border-radius: 9px;
  font-weight: 900;
  font-size: 1.05rem;
  box-shadow: 0 2px 0 rgba(32, 36, 44, 0.15);
}
.db-art-reflex i:nth-child(1) { transform: rotate(-8deg); }
.db-art-reflex i:nth-child(2) { transform: rotate(5deg) translateY(-4px); }
.db-art-reflex i:nth-child(3) { transform: rotate(-3deg); }
.db-art-quiz { display: grid; grid-template-columns: repeat(2, 40px); gap: 7px; }
.db-art-quiz i {
  height: 40px;
  background: #FFFFFF;
  color: #20242C;
  border-radius: 9px;
  font-weight: 900;
  font-size: 1.2rem;
  box-shadow: 0 2px 0 rgba(32, 36, 44, 0.15);
}
.db-art-photo { flex-direction: column; gap: 5px; }
.db-art-photo .db-art-frame {
  width: 58px; height: 46px;
  background: #FFFFFF;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 rgba(32, 36, 44, 0.15);
}
.db-art-photo svg { width: 26px; height: 26px; }
.db-art-photo .db-art-heart { position: relative; top: -14px; margin-bottom: -14px; }
.db-art-photo .db-art-heart svg { width: 18px; height: 18px; }

/* the Discover strip on Home */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.9rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border: none;
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: #20242C;
  background: #FFFFFF;
  overflow: hidden;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-tile:focus-visible { outline: 3px solid #21C4F3; outline-offset: 2px; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-art {
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-tile:hover .db-strip-art { filter: brightness(1.05); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-tile.accent-cyan .db-strip-art { background: #21C4F3; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-tile.accent-orange .db-strip-art { background: #FF922B; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-tile.accent-coral .db-strip-art { background: #FF6B4A; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-tile.accent-yellow .db-strip-art { background: #FFD43B; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-label {
  font-weight: 800;
  font-size: 0.98rem;
  padding: 0.7rem 0.85rem 0.8rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip-sub { display: block; padding: 0 0.85rem 0.8rem; font-size: 0.82rem; color: rgb(32 36 44 / 0.6); }

/* recent rows (real library data: activity, title, edited time, actions) */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.95rem;
  margin-bottom: 0.55rem;
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-row-ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 900;
  flex: none;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-row-ico.accent-yellow { color: #20242C; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-row .db-row-main { flex: 1; min-width: 0; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-row-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-row-actions .btn { font-size: 0.85rem; padding: 0.45rem 0.85rem; min-height: 40px; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-row-actions .db-launch { color: #FF6B4A; border: 1.5px solid #FF6B4A; background: #FFFFFF; font-weight: 800; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-row-actions .db-edit { color: #20242C; border: 1.5px solid #E9E2DA; background: #FFFFFF; }

/* empty states are honest and quiet, never dashed developer boxes */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-empty {
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
  color: rgb(32 36 44 / 0.62);
  padding: 1.1rem 1.2rem;
  font-size: 0.95rem;
}
.db-shell-error { color: #C23A17; }

/* ---------- Activity Selection (Activity Selection Option B) ---------- */

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  background: #FFF3EC;
  border: 1px solid #F6E0D4;
  border-radius: 14px;
  padding: clamp(1.3rem, 2.8vw, 2rem);
  margin-bottom: 1.6rem;
  overflow: hidden;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-title { margin: 0 0 0.3rem; font-size: clamp(1.5rem, 2.4vw, 2rem); color: #20242C; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-sub { margin: 0; color: rgb(32 36 44 / 0.68); font-size: 1rem; max-width: 34rem; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-art { display: flex; gap: 0.6rem; flex: none; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-art span {
  width: 62px; height: 62px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-6deg);
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-art span:nth-child(2) { transform: rotate(4deg) translateY(-6px); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-art span:nth-child(3) { transform: rotate(-2deg); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-art .art-cyan { background: #21C4F3; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-art .art-orange { background: #FF922B; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-art .art-coral { background: #FF6B4A; }

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-section-title { margin: 0; font-size: 1.15rem; color: #20242C; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-page-sub, html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-section-sub { margin: 0.2rem 0 0.9rem; color: rgb(32 36 44 / 0.62); font-size: 0.93rem; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-section { margin-bottom: 1.9rem; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-section-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-section-head .host-auth-link { color: #FF6B4A; font-weight: 700; background: none; border: none; cursor: pointer; font-size: 0.92rem; min-height: 40px; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-section-head .host-auth-link:hover { color: #C9482C; }

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tile:hover { border-color: #C9BFB2; box-shadow: 0 6px 18px rgba(32, 36, 44, 0.08); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tile:focus-visible { outline: 3px solid #21C4F3; outline-offset: 2px; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tile-art { height: 128px; display: flex; align-items: center; justify-content: center; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tile-body { padding: 0.9rem 1rem 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tile-label { font-weight: 800; font-size: 1.08rem; color: #20242C; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tile-desc { font-size: 0.9rem; color: rgb(32 36 44 / 0.68); line-height: 1.4; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tile-meta { display: flex; gap: 0.9rem; font-size: 0.82rem; color: rgb(32 36 44 / 0.55); padding: 0.35rem 1rem 0.2rem; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tile-foot { padding: 0.5rem 1rem 1rem; margin-top: auto; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-select {
  background: #FFFFFF;
  color: #FF6B4A;
  border: 1.5px solid #FF6B4A;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0.5rem 1.1rem;
  min-height: 40px;
  cursor: pointer;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-select:hover { background: #FFF4EA; }

/* category browse rows */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-rows { display: flex; flex-direction: column; gap: 0.6rem; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.95rem;
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
  cursor: pointer;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row:hover { border-color: #C9BFB2; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row:focus-visible { outline: 3px solid #21C4F3; outline-offset: 2px; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row-art {
  width: 46px; height: 46px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row-main { flex: 1; min-width: 0; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row-title { font-weight: 800; color: #20242C; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row-desc { font-size: 0.85rem; color: rgb(32 36 44 / 0.62); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row-meta { display: flex; gap: 0.9rem; font-size: 0.8rem; color: rgb(32 36 44 / 0.55); flex: none; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row .db-select { flex: none; }

/* the "not sure" band uses a REAL path into Discover - no inert links */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-help-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #FFF7ED;
  border: 1px solid #F3E7D8;
  border-radius: 12px;
  padding: 1rem 1.2rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-help-band .db-help-title { font-weight: 800; color: #20242C; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-help-band .db-help-sub { font-size: 0.88rem; color: rgb(32 36 44 / 0.62); }

/* ---------- Saved Games (Saved Games Option A) ---------- */

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-search {
  flex: 1 1 240px;
  min-width: 200px;
  min-height: 44px;
  border: 1.5px solid #E9E2DA;
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  font: inherit;
  color: #20242C;
  background: #FFFFFF;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-search:focus-visible { outline: 3px solid #21C4F3; outline-offset: 1px; border-color: #21C4F3; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-filter, html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-sort {
  min-height: 44px;
  border: 1.5px solid #E9E2DA;
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-weight: 700;
  color: #20242C;
  background: #FFFFFF;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-chip {
  background: #FFFFFF;
  border: 1.5px solid #E9E2DA;
  color: #20242C;
  border-radius: 999px;
  font-weight: 700;
  padding: 0.5rem 1rem;
  min-height: 40px;
  cursor: pointer;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-chip.active { background: #FF6B4A; border-color: #FF6B4A; color: #FFFFFF; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-chips { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 1.1rem; }

/* ---------- Discover Activities (Discovery Storefront Option B) ---------- */

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-pop-badge {
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #FFD43B;
  color: #20242C;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 rgba(32, 36, 44, 0.15);
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-quick-tile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  text-align: left;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-quick-tile:hover { border-color: #C9BFB2; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-quick-tile:focus-visible { outline: 3px solid #21C4F3; outline-offset: 2px; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-quick-art {
  width: 54px; height: 54px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
/* owner correction 2026-09-23: title and metadata are separate lines -
   they were inline spans and read as "Reflex Tap1 - 5 min" */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-quick-tile > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-quick-title { display: block; font-weight: 800; color: #20242C; line-height: 1.25; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-quick-meta { display: block; font-size: 0.82rem; color: rgb(32 36 44 / 0.6); line-height: 1.3; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.7rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-soon-tile {
  background: #FFF7ED;
  border: 1px dashed #E4D6C4;
  border-radius: 12px;
  padding: 0.85rem 1rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-soon-name { font-weight: 800; color: #20242C; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-soon-note { font-size: 0.8rem; color: rgb(32 36 44 / 0.6); margin-top: 0.2rem; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-soon-flag {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C9482C;
  background: #FFE9E3;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
}

/* ---------- Reports (Event History Option A) ---------- */

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-report-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1rem;
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
  margin-bottom: 0.55rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-report-row .db-report-main { flex: 1; min-width: 0; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-report-row .db-row-title { font-weight: 800; color: #20242C; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-report-row .db-row-sub { font-size: 0.85rem; color: rgb(32 36 44 / 0.6); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-report-state {
  flex: none;
  font-size: 0.78rem;
  font-weight: 800;
  color: #C9482C;
  background: #FFE9E3;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
}

/* ---------- Creator / Game Setup (Creator Option A, single page) ---------- */

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-setup-chrome {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1.2rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-back-link {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0.2rem 0;
  color: #FF6B4A;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 40px;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-back-link:hover { color: #C9482C; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-setup-heading { margin: 0.1rem 0 0.2rem; font-size: clamp(1.5rem, 2.4vw, 2rem); color: #20242C; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-setup-sub { margin: 0 0 0.6rem; color: rgb(32 36 44 / 0.62); font-size: 0.95rem; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-basics-card {
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-basics-title { margin: 0; font-size: 1.02rem; color: #20242C; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-basics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.9rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-field > span { font-size: 0.85rem; font-weight: 700; color: rgb(32 36 44 / 0.72); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-field .field {
  min-height: 44px;
  border: 1.5px solid #E9E2DA;
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font: inherit;
  color: #20242C;
  background: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-field .field:focus-visible { outline: 3px solid #21C4F3; outline-offset: 1px; border-color: #21C4F3; }
/* the theme select's own option colours must stay ink-on-white on the
   light workspace (the live-shell option rule paints them on-primary) */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) select.field,
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) select.field option { color: #20242C; background: #FFFFFF; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-plan-note { font-size: 0.8rem; color: rgb(32 36 44 / 0.6); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-setup-actions .btn { border-radius: 10px; min-height: 46px; font-weight: 800; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-save { background: #FF6B4A; color: #FFFFFF; border: none; box-shadow: 0 2px 0 #E85A3A; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-save:disabled { opacity: 0.55; box-shadow: none; }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-exit { background: #FFFFFF; color: #20242C; border: 1.5px solid #E9E2DA; }

/* responsive: sidebar becomes a horizontal rail under 900px; the
   content column takes the full width and the cards reflow */
@media (max-width: 900px) {
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #host-main-ui {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-nav {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    border-right: none;
    border-bottom: 1px solid #E9E2DA;
    padding: 0.5rem 0.6rem;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #FFFFFF;
  }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-nav .db-nav-group { display: none; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-tab { width: auto; padding: 0.5rem 0.7rem; font-size: 0.9rem; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-workspace { grid-column: 1; grid-row: 2; padding: 1.2rem 1rem 0.6rem; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #activity-mount { grid-column: 1; grid-row: 3; padding: 0 1rem; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-appearance-card { grid-column: 1; grid-row: 4; padding: 1.1rem 1rem 0.6rem; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-setup-actions { grid-column: 1; grid-row: 5; padding: 0.6rem 1rem 2.4rem; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-hero { flex-direction: column; align-items: flex-start; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-create-wrap { align-items: flex-start; width: 100%; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-home-create { width: 100%; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-hero-band { flex-direction: column; align-items: flex-start; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row { flex-wrap: wrap; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row-meta { flex-wrap: wrap; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-page-head { flex-direction: column; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-help-band { flex-direction: column; align-items: flex-start; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-tools #btn-mute-music,
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-tools #btn-mute-effects { display: none; }
}

@media (max-width: 480px) {
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-card-grid,
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-grid,
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-quick-grid { grid-template-columns: minmax(0, 1fr); }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-toolbar .db-search { flex-basis: 100%; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* phone category rows: the title/description span the row, then the
   metadata and Select wrap underneath - never a squeezed text column */
@media (max-width: 640px) {
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row { flex-wrap: wrap; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row-main { flex: 1 1 calc(100% - 62px); min-width: 150px; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row-meta { order: 3; flex-basis: 100%; margin-left: 62px; }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-act-row .db-select { order: 4; margin-left: 62px; }
}

/* ---------- creator/setup components in the light workspace (M4, owner
   correction 2026-09-23): house typography, 10px radius, coral secondary
   and primary actions - no display-font setup headings, no orange add
   button, no full-width green Start. ---------- */
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .qs-title,
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .rs-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  color: #20242C;
  letter-spacing: 0;
  text-transform: none;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .qs-hint,
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .rs-hint {
  color: rgb(32 36 44 / 0.68);
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .btn.surprise {
  background: #FFFFFF;
  color: #FF6B4A;
  border: 1.5px solid #FF6B4A;
  box-shadow: none;
  border-radius: 10px;
  font-weight: 800;
}
html body.host:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .qs-row {
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
}

/* creator chrome corrections (owner correction 2026-09-23): page title in the product typeface, the empty basics notes collapse, and the inline Start stops stretching (reference: primary action right, auto width) */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-setup-heading {
  font-family: var(--font-body);
  font-weight: 800;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-basics-card .db-plan-note:empty,
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-basics-card .form-error:empty {
  display: none;
}


/* Creator Option A structure (owner correction 2026-09-23): a single-page
   two-column body - the editing column beside the activity how-it-works
   card, from the activity OWN established instructions. Stacks below
   1100px; nothing here is invented copy. */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 1rem;
  align-items: start;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-main {
  min-width: 0;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how {
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: #20242C;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how-steps {
  margin: 0;
  padding: 0 0 0 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: rgb(32 36 44 / 0.78);
  font-size: 0.92rem;
  line-height: 1.4;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how-steps li::marker {
  color: #FF6B4A;
  font-weight: 800;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-appearance-box {
  background: #FFFFFF;
  border: 1px solid #E9E2DA;
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
}
@media (max-width: 1100px) {
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-body {
    grid-template-columns: minmax(0, 1fr);
  }
}