/*
 * re:Solve — VS Select product system
 * Direction seed: bee855c6 (transplanted from .impeccable/mocks/vs-select.css)
 * Ink-plum ground, bone type, mode identity carried by Tournament cyan,
 * Arcade amber and Showdown coral, Chakra Petch display against Saira body.
 */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,500;0,600;0,700;1,600;1,700&family=Saira:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  /* mode identity hues — the record; never change with theme */
  --tournament: #22e0ff;
  --arcade: #ffb020;
  --showdown: #ff2e6a;

  /* Ink-plum planes: chrome recedes, the working surface sits a step up,
     a panel is raised again. */
  --ink: #0f0a19;
  --panel: #17102a;
  --panel-2: #201636;
  --panel-3: #2b1f45;
  --line: #332748;
  --line-strong: #4a3a66;
  --text: #f2ede1;
  --text-secondary: #b9b0c8;
  --text-muted: #968dad;
  --action: #22e0ff;
  --action-strong: #6febff;
  --success: #3ddc84;
  --danger: #ff4d5e;
  --warning: #ffb020;
  --focus: #f2ede1;
  --on-flood: #0f0a19;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.34);

  --void: var(--ink);
  --surface: var(--panel);
  --surface-raised: var(--panel-2);
  --surface-hover: var(--panel-3);
  --border: var(--line);
  --border-subtle: #251b3d;
  --cyan: var(--tournament);
  --cyan-dim: #1aa8bf;
  --gold: var(--arcade);
  --green: var(--success);
  --red: var(--danger);
  --orange: var(--warning);
  --purple: #b89cff;

  --font-body: 'Saira', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Chakra Petch', 'Arial Narrow', sans-serif;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --radius-sm: 3px;
  --radius-md: 7px;
  --radius-lg: 12px;
  --sidebar-width: 248px;
}

.light {
  color-scheme: light;
  /* Light strikes dark-on-light: deepened mode hues hold contrast where the
     vivid dark-mode hues would wash out against a pale ground. */
  --tournament: #0b6d84;
  --arcade: #9e4e05;
  --showdown: #b0104a;

  --ink: #e9e4f3;
  --panel: #ffffff;
  --panel-2: #f0ecf8;
  --panel-3: #e8e0f4;
  --line: #d7cfe2;
  --line-strong: #9486ad;
  --text: #1a1226;
  --text-secondary: #4a3f5c;
  --text-muted: #655a7a;
  --action: #0b6d84;
  --action-strong: #06515f;
  --success: #0c6b3c;
  --danger: #c2102a;
  --warning: #9e4e05;
  --focus: #1a1226;
  --on-flood: #f2ede1;
  --shadow: 0 16px 40px rgba(26, 18, 38, 0.13);
  --border-subtle: #ded4ea;
  --cyan-dim: #0b6d84;
  --purple: #6848a8;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background-color: var(--ink);
  color: var(--text);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--action-strong); text-underline-offset: 0.2em; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--action); color: var(--on-flood); }
* { scrollbar-color: var(--line-strong) var(--panel); scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--panel); }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid var(--panel); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h1 { font-size: 2rem; }
h2 { margin-bottom: 0.75rem; font-size: 1.5rem; }
h3 { margin-bottom: 0.65rem; font-size: 1.1rem; letter-spacing: -0.005em; }
code, pre, .tabular { font-variant-numeric: tabular-nums; }

/* Application shell */
.nav-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1000;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  color: var(--text);
  overflow-x: hidden;
  transition: width 180ms ease-out;
}
.nav-sidebar-header {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.nav-sidebar-header h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font: 700 1.45rem/1 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
}
.nav-sidebar-header h2 b { color: var(--text-muted); font-weight: 500; }
.brand-lockup { display: flex; min-width: 0; flex: 1; align-items: center; gap: 0.7rem; text-decoration: none; }
/* The badge's own ring text is illegible at rail height, so it sits beside a
   real text title rather than carrying the name alone. */
.brand-mark { width: 30px; height: 30px; flex: none; object-fit: contain; }
.nav-section-label {
  padding: 1.4rem 1.25rem 0.4rem;
  overflow: hidden;
  color: var(--text-muted);
  font: 600 0.72rem/1 var(--font-display);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-links { margin: 0; padding: 0; list-style: none; }
.nav-links a {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.25rem;
  overflow: hidden;
  color: var(--text-secondary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms ease-out, color 180ms ease-out;
}
.nav-links a::before {
  width: 10px;
  height: 2px;
  flex: none;
  background: var(--line-strong);
  content: '';
}
.nav-links a:hover { background: var(--panel-2); color: var(--text); }
.nav-links a.active { background: var(--panel-3); color: var(--text); }
.nav-links a.active::before { width: 24px; background: var(--action); }
.nav-link-txt { overflow: hidden; }
/* Per-link glyph. Shown in both rail states: it sits beside the label while
   the rail is expanded, and centers itself when the rail is collapsed so each
   item stays recognizable instead of showing an empty box. The dash marker
   (a::before) is only used as the collapsed-rail fallback is unnecessary now —
   the icon carries the link in both states. */
.nav-icon { display: block; flex: none; }
.nav-links a.active .nav-icon { color: var(--action); }
/* With the icon always visible, the leading dash marker would be redundant in
   the expanded rail, so hide it. The active state now reads from the panel
   background + accent-colored icon rather than the growing dash. */
.nav-links a::before { display: none; }
.nav-close {
  display: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.5rem;
}
.nav-overlay { display: none; }

/* Rail collapse (desktop only): narrows the persistent sidebar to an
   icon-only strip. Labels stay in the DOM (so screen reader users keep full
   text and sighted mouse users get it via the tooltip title) and are only
   visually clipped when collapsed. */
.nav-collapse {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 42px;
  margin-top: auto;
  padding: 0 1.25rem;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  font: 600 0.72rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 180ms ease-out, color 180ms ease-out;
}
.nav-collapse:hover { background: var(--panel-2); color: var(--text); }
.nav-collapse svg { flex: none; }
.nav-burger {
  display: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
body.admin-page > header,
body.simulator-page > header {
  position: sticky;
  top: 0;
  z-index: 800;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  margin-left: var(--sidebar-width);
  padding: 0 2rem;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  border-bottom: 1px solid var(--line);
}
body.admin-page > header h1,
body.simulator-page > header h1 {
  margin: 0;
  font-size: 1.25rem;
}
#auth-controls { display: flex; align-items: center; gap: 0.75rem; }
#user-info, #auth-status { color: var(--text-muted); font-size: 0.8rem; }
main {
  width: min(1280px, calc(100% - var(--sidebar-width)));
  margin-left: var(--sidebar-width);
  padding: 2.25rem clamp(1rem, 3vw, 3.25rem) 5rem;
}
.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
}
.page-heading h2 { margin-bottom: 0.3rem; font-size: clamp(2.1rem, 4vw, 3.5rem); }
.page-heading p { max-width: 62ch; margin: 0; color: var(--text-secondary); }

/* Lifecycle telemetry */
.telemetry-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 2rem;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  list-style: none;
}
.telemetry-rail li {
  position: relative;
  min-width: 0;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border-right: 1px solid var(--line);
  color: var(--text-muted);
  font: 600 0.82rem/1.2 var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.telemetry-rail li:last-child { border-right: 0; }
.telemetry-rail li::before {
  position: absolute;
  left: 0.9rem;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-strong);
  content: '';
}
.telemetry-rail li.active { background: var(--panel-2); color: var(--text); }
.telemetry-rail li.active::before { border-color: var(--mode-color, var(--action)); background: var(--mode-color, var(--action)); box-shadow: inset 0 0 0 4px var(--panel-2); }
body[data-mode='tournament'] { --mode-color: var(--tournament); }
body[data-mode='arcade'] { --mode-color: var(--arcade); }
body[data-mode='showdown'] { --mode-color: var(--showdown); }

/* Panels and sections */
section { margin-bottom: 2rem; }
.command-panel,
.sim-panel,
.sd-host section,
.stage-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}
.command-panel { padding: clamp(1rem, 2.5vw, 2rem); }
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.section-heading h2 { margin: 0; }
.section-heading p { margin: 0; color: var(--text-muted); }

/* Buttons */
.btn,
.sd-actions button,
.join-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.58rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font: 600 0.78rem/1 var(--font-display);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out;
}
.btn:hover, .sd-actions button:hover, .join-link:hover { border-color: var(--text-secondary); background: var(--panel-3); }
.btn:active, .sd-actions button:active, .join-link:active { transform: translateY(1px); }
.btn-primary, .sd-actions button[type='submit'], .join-link {
  border-color: var(--action);
  background: var(--action);
  color: var(--on-flood);
}
.btn-primary:hover, .sd-actions button[type='submit']:hover, .join-link:hover { border-color: var(--action-strong); background: var(--action-strong); }
.btn-danger { border-color: color-mix(in srgb, var(--danger) 62%, var(--line)); color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
.btn-success { border-color: var(--success); color: var(--success); }
.btn-warning { border-color: var(--warning); color: var(--warning); }
.btn-sm { min-height: 36px; padding: 0.45rem 0.75rem; font-size: 0.82rem; }
.btn-xs { min-height: 30px; padding: 0.35rem 0.6rem; font-size: 0.75rem; }
button:disabled, .btn:disabled { cursor: not-allowed; opacity: 0.48; }
.icon-button { width: 42px; padding: 0; }

/* Forms */
.form-group { min-width: 0; margin-bottom: 1.4rem; }
.form-group > label:first-child,
.sd-field label,
fieldset legend {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--text-secondary);
  font: 600 0.77rem/1.2 var(--font-display);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea,
.sd-field input,
.sd-field textarea,
.sim input,
.sim select {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--text);
  caret-color: var(--action);
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: 2px solid color-mix(in srgb, var(--focus) 28%, transparent); outline-offset: 1px; }
.form-row, .form-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.help-text { display: block; margin-top: 0.35rem; color: var(--text-muted); font-size: 0.78rem; line-height: 1.35; }
.duration-row { display: flex; align-items: center; gap: 0.7rem; }
.duration-row input { max-width: 130px; }
.duration-row .unit { color: var(--text-muted); }

.toggle-group {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  border: 1px solid var(--line-strong);
  background: var(--ink);
}
.toggle-group input[type='radio'],
.policy-card input[type='radio'],
.episode-card input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.toggle-group label {
  position: relative;
  padding: 0.75rem 0.9rem;
  border-right: 1px solid var(--line);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: background 160ms ease-out, color 160ms ease-out;
}
.toggle-group label:last-of-type { border-right: 0; }
.toggle-group input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: -3px; }
.toggle-group input:checked + label { background: var(--mode-color, var(--action)); color: var(--on-flood); font-weight: 700; }

/* Mode select — large diagonal-cut tiles (VS Select direction). Backed by
   real radio inputs (visually hidden) so existing form-submission logic in
   dashboard.js needs no changes. */
.mode-select { display: flex; position: relative; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.mode-select input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.pick {
  position: relative;
  flex: 1;
  min-width: 0;
  display: block;
  padding: 22px 28px 20px;
  background: var(--panel-2);
  color: var(--text-secondary);
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  transition: background 160ms ease-out, color 160ms ease-out;
}
.pick:not(:last-of-type) { margin-right: -22px; }
.pick:nth-of-type(1) { z-index: 3; }
.pick:nth-of-type(2) { z-index: 2; }
.pick:nth-of-type(3) { z-index: 1; }
.pick:last-of-type { clip-path: none; }
.pick:hover { background: var(--panel-3); color: var(--text); }
.mode-select input:focus-visible + .pick { outline: 3px solid var(--focus); outline-offset: -3px; }
.mode-select input:checked + .pick { background: var(--mode-color, var(--action)); color: var(--on-flood); }
.mode-select input:checked + .pick .pick-h { color: var(--on-flood); }
.mode-select input:checked + .pick .pick-chip { background: var(--on-flood); }
.mode-select input:checked + .pick .pick-state { background: var(--on-flood); color: var(--mode-color, var(--action)); }
/* Description stays legible on the selected flood: dim the flood-contrast
   color instead of leaving it the dark muted token (which vanished on the
   teal background, especially in light theme). */
.mode-select input:checked + .pick .pick-p { color: color-mix(in srgb, var(--on-flood) 82%, transparent); }
.pick-top { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; min-height: 20px; }
.pick-chip {
  width: 11px;
  height: 11px;
  flex: none;
  background: var(--mode-color, var(--action));
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
}
.pick-state {
  padding: 3px 6px;
  background: var(--panel-3);
  color: var(--text-muted);
  font: 600 0.62rem/1.1 var(--font-display);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.pick-state--off { display: inline; }
.pick-state--on { display: none; }
.mode-select input:checked + .pick .pick-state--off { display: none; }
.mode-select input:checked + .pick .pick-state--on { display: inline; }
.pick-h {
  display: block;
  margin: 0;
  font: 700 clamp(1.5rem, 3.2vw, 2.3rem)/0.95 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 160ms ease-out;
}
.pick-p {
  display: block;
  margin: 8px 0 0;
  max-width: 34ch;
  font: 400 0.85rem/1.4 var(--font-body);
  color: var(--text-muted);
}
/* Each tile carries its OWN mode color regardless of which is selected —
   locally overrides the ambient body[data-mode] --mode-color for its subtree. */
.pick[data-m='tournament'] { --mode-color: var(--tournament); }
.pick[data-m='arcade'] { --mode-color: var(--arcade); }
.pick[data-m='showdown'] { --mode-color: var(--showdown); }

/* Stat readout strip — the selected mode's rules at a glance. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border: 1px solid var(--line); background: var(--ink); }
.stat { padding: 0.9rem 1rem; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat dt { margin: 0 0 0.3rem; color: var(--text-muted); font: 600 0.62rem/1.1 var(--font-display); letter-spacing: 0.15em; text-transform: uppercase; }
.stat dd { margin: 0; color: var(--text); font: 600 0.95rem/1.2 var(--font-display); letter-spacing: -0.005em; }
.stat dd em { color: var(--mode-color, var(--action)); font-style: normal; }

.policy-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.policy-card { position: relative; min-height: 112px; padding: 1rem; border-right: 1px solid var(--line); cursor: pointer; }
.policy-card:last-child { border-right: 0; }
.policy-card:hover { background: var(--panel-2); }
.policy-card:has(input:checked) { background: color-mix(in srgb, var(--mode-color, var(--action)) 10%, var(--panel)); box-shadow: inset 0 -3px 0 var(--mode-color, var(--action)); }
.policy-card input:focus-visible ~ .policy-card-inner { outline: 3px solid var(--focus); outline-offset: 4px; }
.policy-card-title { color: var(--text); font-weight: 700; }
.policy-card-desc { margin-top: 0.25rem; color: var(--text-muted); font-size: 0.78rem; line-height: 1.35; }
/* Badge sits in the empty bottom-right of the card so it never overlaps the
   title/description text (which flows from the top). */
.policy-card:has(.policy-card-default) { padding-bottom: 2.2rem; }
.policy-card-default { position: absolute; right: 1rem; bottom: 0.85rem; color: var(--mode-color, var(--action)); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

.scenario-grid, .episode-grid { display: grid; gap: 0.6rem; max-height: 380px; overflow: auto; padding: 1px 0.35rem 1px 1px; }
.scenario-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.episode-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); max-height: 430px; }
.scenario-card, .episode-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 170ms ease-out, border-color 170ms ease-out;
}
.scenario-card { width: 100%; min-height: 118px; padding: 0.9rem; }
.episode-card { display: flex; min-height: 116px; align-items: flex-start; gap: 0.8rem; padding: 0.9rem; }
.scenario-card:hover, .episode-card:hover { border-color: var(--line-strong); background: var(--panel-2); }
.scenario-card.selected, .episode-card:has(input:checked) { border-color: var(--mode-color, var(--action)); background: color-mix(in srgb, var(--mode-color, var(--action)) 8%, var(--panel)); box-shadow: inset 0 -3px 0 var(--mode-color, var(--action)); }
.scenario-card-header { display: flex; align-items: center; gap: 0.55rem; }
.scenario-card-icon { display: none; }
.scenario-card-title, .episode-card-title { color: var(--text); font-weight: 700; }
.scenario-card-desc, .episode-card-desc { margin-top: 0.3rem; color: var(--text-muted); font-size: 0.78rem; line-height: 1.35; }
.scenario-card-count { margin-top: 0.65rem; color: var(--mode-color, var(--action)); font: 600 0.72rem/1 var(--font-display); text-transform: uppercase; }
.episode-card-number { flex: 0 0 auto; padding: 0.25rem 0.45rem; border: 1px solid var(--mode-color, var(--action)); color: var(--mode-color, var(--action)); font: 700 0.72rem/1 var(--font-display); }
.episode-card-content { min-width: 0; }
.episode-card-details, .episode-card-topics { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.55rem; color: var(--text-secondary); font-size: 0.72rem; }
.episode-card-tag { padding: 0.12rem 0.4rem; border: 1px solid var(--line); color: var(--text-muted); }
.episode-card-level { color: var(--mode-color, var(--action)); }
.episode-loading { padding: 1rem; color: var(--text-muted); }

/* Game control rows */
/* --- Game List: grouped by mode, stacked collapsible blocks -------------- */
.mode-group { margin-bottom: 2rem; }
.mode-group[data-mode='tournament'] { --group-mode: var(--tournament); }
.mode-group[data-mode='arcade']     { --group-mode: var(--arcade); }
.mode-group[data-mode='showdown']   { --group-mode: var(--showdown); }
.mode-group-head {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.6rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
/* Mode signal: short color bar beside the mode name (never color alone). */
.mode-group-head .mode-bar { width: 3px; height: 1.05rem; flex: none; background: var(--group-mode, var(--line-strong)); }
.mode-group-head h3 { margin: 0; color: var(--text); font: 700 1.15rem/1 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
.mode-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.35rem; padding: 0 0.4rem; border: 1px solid var(--line-strong); color: var(--text-secondary); font: 600 0.72rem/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.mode-group-live { margin-left: auto; color: var(--group-mode, var(--text-muted)); font: 600 0.7rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }

.game-block { position: relative; margin-bottom: 0.5rem; border: 1px solid var(--line); background: var(--panel); }
.game-block[data-mode='tournament'] { --block-mode: var(--tournament); }
.game-block[data-mode='arcade']     { --block-mode: var(--arcade); }
.game-block[data-mode='open_day']   { --block-mode: var(--arcade); }
.game-block[data-mode='showdown']   { --block-mode: var(--showdown); }
/* A live, expanded game is its group's focal point: raised surface + mode edge. */
.game-block.is-live { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--block-mode, var(--action)); }

/* Row 1 — header row (flex, NOT a button, so the primary action button can
   sit inside it without nesting a button in a button). */
.game-head { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; padding: 0.9rem 1rem; }
.game-toggle {
  display: grid; grid-template-columns: 1.1rem 1fr; align-items: start; gap: 0.75rem;
  flex: 1; min-width: 0;
  margin: -0.9rem 0 -0.9rem -1rem; padding: 0.9rem 0 0.9rem 1rem;
  border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit;
}
.game-toggle:hover { background: var(--panel-3); }
.game-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.game-chevron { margin-top: 0.15rem; color: var(--text-muted); transition: transform 140ms ease-out; }
.game-block.is-open .game-chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .game-chevron { transition: none; } }

.game-title { min-width: 0; }
.game-title .name { display: block; margin: 0; color: var(--text); font: 700 1.35rem/1.05 var(--font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.game-title .summary { display: block; margin-top: 0.3rem; color: var(--text-muted); font: 400 0.82rem/1.3 var(--font-body); }
.game-title .summary .sep { padding: 0 0.5rem; color: var(--line-strong); }
.game-title .summary .num { font-variant-numeric: tabular-nums; }

.game-head-right { display: flex; align-items: center; gap: 0.8rem; flex: none; white-space: nowrap; }
.game-primary { display: flex; gap: 0.4rem; }

/* Collapsible body — details + full actions. */
.game-body { display: grid; grid-template-rows: 1fr; border-top: 1px solid var(--line); transition: grid-template-rows 160ms ease-out; }
.game-block:not(.is-open) .game-body { grid-template-rows: 0fr; border-top-color: transparent; }
@media (prefers-reduced-motion: reduce) { .game-body { transition: none; } }
.game-body-inner { overflow: hidden; }

.game-details { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 0; padding: 0.85rem 1rem; }
.game-details .cell { display: flex; flex-direction: column; gap: 0.15rem; }
.game-details dt { margin: 0; color: var(--text-muted); font: 600 0.64rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.game-details dd { margin: 0; color: var(--text-secondary); font: 500 0.9rem/1.1 var(--font-body); font-variant-numeric: tabular-nums; }

.game-actions-row { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.25rem 1rem 0.95rem; }

/* Not-started warning sits at the top of the expanded body. */
.game-body-inner .not-started-warning { margin: 0.85rem 1rem 0; padding: 0.6rem 0.75rem; border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--line)); background: color-mix(in srgb, var(--warning) 8%, var(--panel)); color: var(--text-secondary); font-size: 0.82rem; }

.status-badge { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-secondary); font: 600 0.7rem/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
/* Status dot before the label. Needs an explicit display so the sized box
   doesn't collapse as an inline pseudo-element; flex:none keeps it from being
   squeezed inside the inline-flex badge. Inherits status color via currentColor. */
.status-badge::before { display: block; flex: none; width: 7px; height: 7px; border: 1px solid currentColor; content: ''; }
.status-created { color: var(--action-strong); }
.status-in_progress { color: var(--success); }
.status-ended { color: var(--warning); }
.status-archived { color: var(--text-muted); }
.not-started-warning { padding: 0.65rem 0.75rem; border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--line)); background: color-mix(in srgb, var(--warning) 8%, var(--panel)); color: var(--text-secondary); font-size: 0.82rem; }
.toggle-label { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-muted); font: 500 0.8rem/1 var(--font-body); }

@media (max-width: 640px) {
  .game-head { flex-wrap: wrap; }
  .game-head-right { width: 100%; justify-content: flex-start; margin-top: 0.5rem; }
}

.players-table, .sim-lb-table { width: 100%; border-collapse: collapse; background: var(--panel); }
#players-list, #leaderboard-table { overflow-x: auto; }
.players-table th, .players-table td, .sim-lb-table th, .sim-lb-table td { padding: 0.75rem; border-bottom: 1px solid var(--line); text-align: left; }
.players-table th, .sim-lb-table th { color: var(--text-muted); font: 600 0.72rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.player-actions { display: flex; gap: 0.4rem; }
.player-hidden { opacity: 0.55; }

/* Simulator */
.sim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sim-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sim-panel { padding: 1.25rem; }
/* Wider harness container for multi-player pages — the 960px .sim cap reads
   cramped once three player panels sit side by side. */
.sim--wide { width: min(1280px, calc(100% - 2.5rem)); }

/* Showdown multi-player simulator: one panel per simulated player. */
.sd-player-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.sd-player-head h3 { margin: 0; overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.sd-player-head .pick-chip { background: var(--showdown); }
.sd-player-state {
  flex: none;
  padding: 3px 7px;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  font: 600 0.66rem/1.1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sd-player-state[data-state='finished'] { border-color: var(--showdown); color: var(--showdown); }
.sd-player-state[data-state='voted'] { border-color: var(--action); color: var(--action-strong); }
.sim-panel h3 { padding-bottom: 0.65rem; border-bottom: 1px solid var(--line); }
.sim-actions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.sim-log, .sim pre {
  max-height: 280px;
  overflow: auto;
  padding: 0.85rem;
  border: 1px solid var(--line);
  background: #090c11;
  color: #cfdae8;
  font: 500 0.75rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.log-entry { padding: 0.25rem 0; border-bottom: 1px solid #1f2835; }
.log-ok { color: #76dfae; }
.log-err { color: #ff8797; }
.log-info { color: #9bb8ff; }
.player-chip { display: inline-flex; gap: 0.4rem; margin: 0.15rem; padding: 0.25rem 0.5rem; border: 1px solid var(--line); background: var(--panel-2); font-size: 0.75rem; }
.player-chip .pid { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.test-mode-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1rem; border: 1px solid var(--line); }
.test-mode-strip a { min-height: 82px; padding: 0.9rem; border-right: 1px solid var(--line); color: var(--text-secondary); text-decoration: none; }
.test-mode-strip a:last-child { border-right: 0; }
.test-mode-strip a:hover, .test-mode-strip a.active { background: var(--panel-2); color: var(--text); }
.test-mode-strip strong { display: block; color: var(--text); font-family: var(--font-display); font-size: 1.05rem; }
.test-mode-strip span { display: block; margin-top: 0.2rem; font-size: 0.76rem; }
.test-only-note { padding: 0.75rem; border: 1px solid var(--warning); color: var(--text-secondary); font-size: 0.82rem; }
.sim { width: min(960px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 4rem; }
.sim fieldset { margin: 0; padding: 1.15rem; border: 1px solid var(--line); background: var(--panel); }
.sim fieldset + fieldset { margin-top: 1rem; }
.sim button { margin-top: 0.7rem; }
.sim-response { margin-top: 1.5rem; }

/* Broadcast leaderboards */
.broadcast-page { --mode-color: var(--tournament); overflow-x: hidden; background-color: #080b10; color: #f5f7fa; }
.broadcast-page.mode-arcade { --mode-color: var(--arcade); }
.broadcast-page.mode-showdown { --mode-color: var(--showdown); }
.broadcast-shell { min-height: 100vh; padding: clamp(1rem, 3vw, 2.8rem); background-image: linear-gradient(90deg, transparent 0 72%, rgba(255,255,255,0.025) 72% 72.15%, transparent 72.15%); }
.broadcast-brand { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.8rem; border-bottom: 1px solid #313a48; color: #aab5c4; font: 600 0.8rem/1 var(--font-display); letter-spacing: 0.09em; text-transform: uppercase; }
.broadcast-brand strong { color: #f5f7fa; font-size: 1rem; }
.mode-flag { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--mode-color); }
.mode-flag::before { width: 26px; height: 4px; background: currentColor; content: ''; }
.lb-container { width: min(1500px, 100%); margin: 0 auto; }
.lb-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; padding: clamp(1.7rem, 5vw, 4rem) 0 1.4rem; border-bottom: 4px solid var(--mode-color); }
.lb-header h1 { margin: 0; color: #f5f7fa; font-size: clamp(2.8rem, 7vw, 6rem); }
.lb-header-copy p { max-width: 50ch; margin: 0.65rem 0 0; color: #aeb9c7; font-size: clamp(0.9rem, 1.5vw, 1.2rem); }
.lb-clock { display: flex; align-items: center; gap: 1rem; }
.countdown { color: #f5f7fa; font: 700 clamp(3rem, 8vw, 7rem)/0.85 var(--font-display); font-variant-numeric: tabular-nums; }
.sound-toggle { min-width: 88px; min-height: 42px; border: 1px solid #566273; background: #121821; color: #dce3ec; cursor: pointer; }
.lb-column-head { display: grid; grid-template-columns: 88px minmax(220px, 1fr) 190px 130px; gap: 1rem; padding: 0.85rem 1rem; color: #8f9aaa; font: 600 0.72rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.lb-column-head span:nth-child(n+3) { text-align: right; }
.lb-row { display: grid; grid-template-columns: 88px minmax(220px, 1fr) 190px 130px; align-items: center; gap: 1rem; min-height: 78px; margin-bottom: 4px; padding: 0.8rem 1rem; border: 1px solid #26303e; background: #111720; }
.lb-row:nth-child(even) { background: #151c26; }
.lb-rank { color: #8f9aaa; font: 700 1.55rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.lb-name { overflow: hidden; color: #f5f7fa; font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { color: #f5f7fa; font: 700 clamp(1.1rem, 2.5vw, 1.8rem)/1 var(--font-display); text-align: right; }
.lb-penalty { color: #ff8797; font: 600 1rem/1 var(--font-display); text-align: right; }
.lb-podium { border-color: color-mix(in srgb, var(--mode-color) 72%, #26303e); background: color-mix(in srgb, var(--mode-color) 10%, #111720); }
.lb-podium .lb-rank { color: var(--mode-color); }
.lb-finisher .lb-score { color: #7fe0b2; }
.lb-timed-out { opacity: 0.58; }
.lb-attempt, .lb-late, .lb-post-deadline { margin-left: 0.45rem; color: #aeb9c7; font-size: 0.72rem; }
.lb-ineligible, .lb-post-deadline { color: #ff8797; }
.lb-empty { padding: 5rem 1rem; border: 1px dashed #3b4655; color: #9ba7b6; text-align: center; }

/* Showdown broadcast */
.sd-display { min-height: 100vh; }
.sd-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; padding: clamp(1.7rem, 5vw, 4rem) 0 1.4rem; border-bottom: 4px solid var(--showdown); }
.sd-header h1 { margin: 0; color: #f5f7fa; font-size: clamp(3rem, 8vw, 6rem); }
.sd-header-meta { display: flex; align-items: baseline; gap: 1.5rem; color: #b1bdcb; font: 600 1rem/1 var(--font-display); text-transform: uppercase; }
.sd-countdown { color: #f5f7fa; font: 700 clamp(3rem, 8vw, 7rem)/0.85 var(--font-display); }
.sd-tension { color: var(--arcade); animation: timing-pulse 1s ease-in-out infinite; }
.sd-voting-panel { padding: 1rem 0; border-bottom: 1px solid #303a48; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sd-chip { padding: 0.45rem 0.8rem; border: 1px solid #566273; background: #121821; color: #d9e0e8; font-weight: 600; }
.sd-callout { min-height: 3.4rem; padding: 0.65rem 0; color: var(--arcade); font: 700 clamp(1.5rem, 3vw, 2.7rem)/1 var(--font-display); opacity: 0; transition: opacity 200ms ease-out; }
.sd-callout-active { opacity: 1; }
.sd-board { display: flex; flex-direction: column; gap: 4px; }
.sd-row { display: grid; grid-template-columns: 72px minmax(160px, 1fr) minmax(240px, 5fr) 86px 100px; align-items: center; gap: 1rem; min-height: 82px; padding: 0.8rem 1rem; border: 1px solid #293342; background: #111720; }
.sd-leader { border-color: var(--showdown); background: color-mix(in srgb, var(--showdown) 10%, #111720); }
.sd-rank { color: #9ba7b6; font: 700 1.5rem/1 var(--font-display); }
.sd-name { overflow: hidden; color: #f5f7fa; font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sd-crown { margin-left: 0.5rem; color: var(--showdown); font-size: 0.72rem; text-transform: uppercase; }
.sd-progress { height: 12px; overflow: hidden; border: 1px solid #424d5d; background: #080b10; }
.sd-progress-fill { height: 100%; background: var(--showdown); }
.sd-pct, .sd-time { color: #e4e9ef; font: 700 1rem/1 var(--font-display); text-align: right; font-variant-numeric: tabular-nums; }
.sd-empty { padding: 4rem 1rem; border: 1px dashed #3b4655; color: #9ba7b6; text-align: center; }
.sd-winner { margin-top: 1rem; padding: 1rem; border: 1px solid var(--showdown); background: color-mix(in srgb, var(--showdown) 13%, #111720); color: #fff; font: 700 clamp(1.6rem, 4vw, 3.6rem)/1 var(--font-display); }
.sd-photo-finish { display: inline-block; margin-top: 1rem; padding: 0.5rem 0.75rem; background: var(--arcade); color: #14100a; font-weight: 700; }

/* Standalone host and public stages */
.sd-host { width: min(860px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 4rem; }
.sd-host > header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.sd-host section { margin-top: 1rem; padding: 1.25rem; }
.sd-field { margin-bottom: 1rem; }
.sd-field-error, .sd-form-error, .error { color: var(--danger); font-weight: 600; }
.sd-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.sd-live-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.55rem 1rem; }
.sd-live-meta dt { color: var(--text-muted); }
.sd-live-meta dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.sd-dialog-backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 1rem; background: rgba(4, 7, 11, 0.78); }
.sd-dialog { width: min(430px, 100%); padding: 1.4rem; border: 1px solid var(--line-strong); background: var(--panel); box-shadow: var(--shadow); }
.stage-page { display: grid; min-height: 100vh; place-items: center; padding: 1rem; }
.stage-panel { width: min(720px, 100%); padding: clamp(1.5rem, 5vw, 3rem); text-align: center; }
.stage-brand { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 2rem; color: var(--text-muted); font: 600 0.75rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.stage-brand::before { width: 28px; height: 4px; background: var(--mode-color, var(--action)); content: ''; }
.join-container, .lobby-container, .qr-container { text-align: center; }
.join-container h1, .lobby-container h1, .qr-container h1 { margin-bottom: 0.6rem; font-size: clamp(2.3rem, 7vw, 4.5rem); }
.join-container p, .lobby-container p, .qr-container p { color: var(--text-secondary); }
#qr-code { margin: 1.5rem auto; }
#qr-code canvas { width: min(52vw, 380px) !important; height: auto !important; padding: 12px; background: #fff; }
.session-info { font: 600 1.1rem/1.2 var(--font-display); }
.waiting { color: var(--action-strong); }
.game-over { color: var(--warning); }

.env-badge { display: inline-flex; margin-left: 0.6rem; padding: 0.2rem 0.4rem; border: 1px solid var(--warning); color: var(--warning); font: 600 0.62rem/1 var(--font-display); letter-spacing: 0.07em; text-transform: uppercase; vertical-align: middle; }
.muted { color: var(--text-muted); }
.small { font-size: 0.8rem; }

@keyframes timing-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

body.admin-page > header .nav-burger,
body.simulator-page > header .nav-burger { display: none; }

/* Scoped to (min-width:821px): above this the rail is persistent and in flow
   (the header/main margin and body-equivalent gutter track --sidebar-width),
   so collapsing it can shrink that gutter. Below it the rail is the
   off-canvas drawer, which always opens fully expanded. */
@media (min-width: 821px) {
  html[data-nav-collapsed='true'] .nav-sidebar { width: 68px; }
  html[data-nav-collapsed='true'] body.admin-page > header,
  html[data-nav-collapsed='true'] body.simulator-page > header,
  html[data-nav-collapsed='true'] main { margin-left: 68px; }
  /* Keeps main's existing 1280px readability cap; only the gutter shrinks. */
  html[data-nav-collapsed='true'] main { width: min(1280px, calc(100% - 68px)); }
  html[data-nav-collapsed='true'] .nav-sidebar-header { justify-content: center; padding: 0; }
  html[data-nav-collapsed='true'] .brand-lockup { flex: none; justify-content: center; }
  html[data-nav-collapsed='true'] .nav-sidebar-header h2,
  html[data-nav-collapsed='true'] .nav-section-label,
  html[data-nav-collapsed='true'] .nav-link-txt { width: 0; opacity: 0; }
  html[data-nav-collapsed='true'] .nav-links a { justify-content: center; padding: 0; }
  html[data-nav-collapsed='true'] .nav-links a::before { display: none; }
  html[data-nav-collapsed='true'] .nav-icon { display: block; }
  html[data-nav-collapsed='true'] .nav-links a.active { box-shadow: inset 3px 0 0 var(--action); }
  html[data-nav-collapsed='true'] .nav-collapse { justify-content: center; padding: 0; }
}

@media (max-width: 820px) {
  .nav-sidebar { transform: translateX(-100%); transition: transform 220ms ease-out; }
  .nav-sidebar.open { transform: translateX(0); }
  .nav-close,
  body.admin-page > header .nav-burger,
  body.simulator-page > header .nav-burger { display: inline-flex; align-items: center; justify-content: center; }
  .nav-overlay { position: fixed; inset: 0; z-index: 900; display: block; background: rgba(4, 7, 11, 0.72); opacity: 0; pointer-events: none; transition: opacity 180ms ease-out; }
  .nav-overlay.open { opacity: 1; pointer-events: auto; }
  body.admin-page > header, body.simulator-page > header { margin-left: 0; padding: 0 1rem; }
  main { width: 100%; margin-left: 0; }
  .test-mode-strip { grid-template-columns: 1fr; }
  .test-mode-strip a { border-right: 0; border-bottom: 1px solid var(--line); }
  .test-mode-strip a:last-child { border-bottom: 0; }
  .form-row, .form-compact, .sim-grid { grid-template-columns: 1fr; }
  .policy-cards { grid-template-columns: 1fr; }
  .policy-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .policy-card:last-child { border-bottom: 0; }
  .sd-row { grid-template-columns: 52px minmax(110px, 1fr) minmax(150px, 3fr) 60px; }
  .sd-time { display: none; }
}
@media (max-width: 640px) {
  body.admin-page > header, body.simulator-page > header { min-height: 64px; }
  body.admin-page > header h1, body.simulator-page > header h1, #user-info, #auth-status, #theme-toggle { display: none; }
  .sd-host > header { align-items: flex-start; flex-wrap: wrap; }
  main { padding: 1.25rem 0.75rem 3rem; }
  .page-heading { align-items: start; flex-direction: column; }
  .telemetry-rail { grid-template-columns: 1fr 1fr; }
  .telemetry-rail li:nth-child(2) { border-right: 0; }
  .telemetry-rail li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .scenario-grid, .episode-grid { grid-template-columns: 1fr; }
  .lb-header, .sd-header { grid-template-columns: 1fr; align-items: start; }
  .lb-clock { justify-content: space-between; }
  .lb-column-head { grid-template-columns: 50px 1fr 90px; }
  .lb-column-head span:last-child { display: none; }
  .lb-row { grid-template-columns: 50px 1fr 90px; min-height: 64px; padding: 0.65rem 0.55rem; }
  .lb-penalty { display: none; }
  .sd-header-meta { flex-wrap: wrap; }
  .sd-row { grid-template-columns: 42px 1fr 54px; }
  .sd-progress, .sd-time { display: none; }
  .sim-actions-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ===========================================================================
   Showdown simulator (frontend/showdown-simulator.html) — dev testing tool.
   Renders inside the shared admin shell (#app); these styles cover only the
   simulator-specific picker, device panels, and leaderboard. "Control Room
   Grid": live standings on top, one device panel per seat side-by-side.
   =========================================================================== */
.sim-picker {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md);
  padding: var(--space-md); margin-bottom: 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.sim-picker-field { margin-bottom: 0; min-width: 280px; flex: 1 1 320px; }
.sim-session-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-left: auto; }
.sim-chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
  font: 600 0.72rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary);
}
.sim-chip-state { color: var(--showdown); border-color: color-mix(in srgb, var(--showdown) 45%, var(--line)); }

.sim-error { color: var(--danger); margin: 0 0 1rem; font-weight: 600; }
.sim-empty-hint { padding: 2rem 1rem; color: var(--text-muted); text-align: center; }

.sim-stage { display: flex; flex-direction: column; gap: var(--space-lg); }
.sim-panels { display: flex; gap: var(--space-md); overflow-x: auto; padding-bottom: 6px; align-items: start; }
.sim-panels > .sim-dev { flex: 1 1 0; min-width: 300px; }

/* Device panel */
.sim-dev { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel);
  overflow: hidden; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28); }
.sim-dev-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md);
  border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-2), transparent); }
.sim-seat-no { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--showdown) 18%, var(--panel-3)); color: var(--showdown);
  font: 700 1rem/1 var(--font-display); border: 1px solid color-mix(in srgb, var(--showdown) 45%, var(--line)); }
.sim-who { min-width: 0; }
.sim-who b { display: block; font-family: var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-who span { font-size: 0.78rem; color: var(--text-muted); }
.sim-step-badge { margin-left: auto; font: 600 0.66rem/1 var(--font-display); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; }
.sim-dev-body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); }

.sim-step { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: var(--space-md); }
.sim-step[data-done] { border-style: solid; border-color: color-mix(in srgb, var(--success) 40%, var(--line)); }
.sim-step[data-active] { border-style: solid; border-color: color-mix(in srgb, var(--showdown) 55%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--showdown) 30%, transparent); }
.sim-step-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font: 600 0.72rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.sim-step-title .n { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-size: 0.7rem; background: var(--panel-3); color: var(--text-secondary); }
.sim-step[data-done] .sim-step-title .n { background: var(--success); color: var(--on-flood); }
.sim-step[data-active] .sim-step-title .n { background: var(--showdown); color: #12060c; }
.sim-step-title .check { margin-left: auto; color: var(--success); font-size: 0.85rem; }

.sim-inline { display: flex; gap: var(--space-sm); }
.sim-inline input { flex: 1; }
.sim-pin-in { letter-spacing: 0.32em; font-family: var(--font-display); text-transform: uppercase; }

.sim-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-cat { border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 13px; background: var(--ink);
  color: var(--text); font: 600 0.8rem/1 var(--font-body); cursor: pointer; }
.sim-cat[aria-pressed='true'] { background: var(--showdown); border-color: var(--showdown); color: #12060c; }
.sim-cat:disabled { opacity: 0.5; cursor: not-allowed; }

.sim-prog { display: flex; align-items: center; gap: var(--space-sm); }
.sim-stepper { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.sim-stepper button { width: 38px; height: 38px; border: 0; background: var(--panel-2); color: var(--text); font-size: 1.1rem; cursor: pointer; }
.sim-stepper button:hover { background: var(--panel-3); }
.sim-stepper .val { min-width: 52px; text-align: center; font-family: var(--font-display); font-weight: 700; }
.sim-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.sim-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--showdown), var(--action-strong)); }
.btn-mode { border-color: var(--showdown); background: var(--showdown); color: #12060c; }
.btn-mode:hover { border-color: var(--showdown); background: color-mix(in srgb, var(--showdown) 85%, white); }
.sim-dev-error { color: var(--danger); font-size: 0.82rem; font-weight: 600; margin: 0; }

/* Puzzle-number completion (matches GET /puzzles → puzzle_numbers) */
.sim-assigned-label { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 8px; }
.sim-assigned-label b { color: var(--text); }
.sim-puzzles { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-pz { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 10px; min-width: 44px;
  background: var(--ink); color: var(--text); font: 600 0.82rem/1 var(--font-display); cursor: pointer; }
.sim-pz.done { background: color-mix(in srgb, var(--success) 22%, var(--ink));
  border-color: color-mix(in srgb, var(--success) 55%, var(--line)); color: var(--success); }
.sim-pz.done::after { content: " ✓"; font-size: 0.7em; }
.sim-server-echo { margin-top: 8px; font-size: 0.74rem; color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Docked leaderboard */
.sim-board { border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--panel); overflow: hidden; }
.sim-board h2 { display: flex; align-items: center; gap: 8px; padding: var(--space-md);
  margin: 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
.sim-mode-tag { font: 600 0.7rem/1 var(--font-display); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--showdown); }
.sim-board-foot { margin-left: auto; font-size: 0.75rem; }
.sim-board-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1px; background: var(--line); }
.sim-board-rows .sd-empty { padding: var(--space-md); color: var(--text-muted); background: var(--panel); grid-column: 1 / -1; }
.sim-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center;
  padding: 12px var(--space-md); background: var(--panel); }
.sim-row.lead { background: color-mix(in srgb, var(--showdown) 12%, var(--panel)); }
.sim-rank { font-family: var(--font-display); font-weight: 700; color: var(--text-muted); }
.sim-row.lead .sim-rank { color: var(--showdown); }
.sim-rname { font-weight: 600; min-width: 0; }
.sim-rname small { display: block; color: var(--text-muted); font-weight: 400; font-size: 0.72rem; }
.sim-rline { height: 6px; border-radius: 999px; background: var(--panel-3); margin-top: 6px; overflow: hidden; }
.sim-rline i { display: block; height: 100%; background: var(--showdown); }
.sim-rtime { font-family: var(--font-display); color: var(--text-secondary); text-align: right; }
.sim-rtime b { color: var(--text); }

@media (max-width: 720px) {
  .sim-panels { flex-direction: column; }
  .sim-panels > .sim-dev { min-width: 0; }
}

/* ---------------------------------------------------------------------------
 * Pre-paint auth gate. When a host page loads without a valid session, an
 * inline <head> script sets html.auth-pending BEFORE first paint, so the
 * dashboard chrome never flashes before the redirect to Cognito login. The
 * neutral overlay explains the bounce; auth.js does the actual redirect once
 * config.js has loaded. On successful auth, shell.js clears auth-pending.
 * --------------------------------------------------------------------------- */
.auth-overlay { display: none; }
html.auth-pending body > *:not(.auth-overlay) { visibility: hidden; }
html.auth-pending .auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--panel, #12121a);
  color: var(--text, #f4f7fb);
  visibility: visible;
}
.auth-overlay .auth-spinner {
  width: 26px; height: 26px;
  border: 2px solid var(--line, #303b4b);
  border-top-color: var(--action, #22e0ff);
  border-radius: 50%;
  animation: auth-spin 0.8s linear infinite;
}
.auth-overlay p { margin: 0; color: var(--text-muted, #8b98a8); font: 500 0.9rem/1.4 var(--font-body, system-ui, sans-serif); }
.auth-overlay strong { color: var(--text, #f4f7fb); font-weight: 600; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .auth-overlay .auth-spinner { animation: none; }
}

/* ---------------------------------------------------------------------------
   Showdown GM screen (showdown-gm.html / pages/showdown-gm.js)
   Regions: Live session + Seats/PINs (two columns) and a full-width Sessions
   list. Reuses the shipped admin tokens; Showdown coral accent comes from
   body[data-mode='showdown'] --showdown.
   --------------------------------------------------------------------------- */
.gm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  gap: var(--space-lg);
  align-items: start;
}
@media (max-width: 900px) { .gm-grid { grid-template-columns: 1fr; } }

.gm-panel { border: 1px solid var(--line); background: var(--panel); padding: var(--space-lg); }
.gm-panel.is-live { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--showdown); }
.gm-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-md); margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm); border-bottom: 1px solid var(--line);
}
.gm-panel-head h3 { margin: 0; font: 700 1.15rem/1 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
.gm-updated { color: var(--text-muted); font: 600 0.7rem/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

.gm-live-meta { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0 0 var(--space-md); }
.gm-live-meta div { min-width: 0; }
.gm-live-meta dt { color: var(--text-muted); font: 600 0.7rem/1 var(--font-display); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.3rem; }
.gm-live-meta dd { margin: 0; color: var(--text); font: 700 1.5rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.gm-live-meta dd.state { font-size: 1.15rem; text-transform: capitalize; }

.gm-standings { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-md); }
.gm-standing { display: grid; grid-template-columns: 2.4rem 1fr auto auto; align-items: center; gap: var(--space-md); padding: 0.55rem 0.7rem; background: var(--panel); border: 1px solid var(--line); }
.gm-standing:nth-child(even) { background: var(--panel-2); }
.gm-standing.leader { box-shadow: inset 3px 0 0 var(--showdown); }
.gm-standing .rank { font: 700 1rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.gm-standing.leader .rank { color: var(--showdown); }
.gm-standing .who { min-width: 0; }
.gm-standing .who .nm { color: var(--text); }
.gm-standing .prog { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.gm-standing .leader-tag { color: var(--showdown); font: 600 0.68rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.gm-standing-empty { padding: 0.7rem; color: var(--text-muted); }

.gm-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.gm-seats { display: flex; flex-direction: column; gap: var(--space-sm); }
.gm-seat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-md); padding: 0.7rem 0.8rem; border: 1px solid var(--line); background: var(--panel); }
.gm-seat .seat-no { font: 700 0.72rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.gm-seat .seat-mid { min-width: 0; }
.gm-seat .pin { font: 700 0.98rem/1 var(--font-display); letter-spacing: 0.14em; color: var(--text); font-variant-numeric: tabular-nums; }
.gm-seat .occ { display: block; margin-top: 0.25rem; font: 600 0.7rem/1 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; }
.gm-seat .occ.taken { color: var(--text-secondary); }
.gm-seat .occ.empty { color: var(--text-muted); }
.gm-seat .occ::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 0.4rem; border: 1px solid currentColor; }
.gm-seat .occ.taken::before { background: currentColor; }
/* Claim-once status pill + reclaim-attempt warning (seat-join hardening) */
.gm-seat .seat-claim { display: inline-block; margin-top: 0.25rem; margin-left: 0.4rem; font: 700 0.62rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.18rem 0.4rem; border: 1px solid currentColor; }
.gm-seat .seat-claim.claimed { color: var(--text-secondary); }
.gm-seat .seat-claim.open { color: var(--text-muted); }
.gm-seat .seat-reclaim { display: block; margin-top: 0.3rem; font: 700 0.66rem/1.2 var(--font-display); letter-spacing: 0.02em; color: var(--danger, #c0392b); }
.gm-copy { background: none; border: none; padding: 0 0 0 0.4rem; color: var(--text-muted); cursor: pointer; font: 600 0.66rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.gm-copy:hover { color: var(--text-secondary); }
.gm-seats-foot { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }

/* Player join link + QR */
.gm-join { display: flex; gap: var(--space-lg); align-items: flex-start; flex-wrap: wrap; }
.gm-join-qr { flex: 0 0 auto; width: 140px; height: 140px; background: #fff; border: 1px solid var(--line); padding: 6px; display: flex; align-items: center; justify-content: center; }
.gm-join-qr svg { display: block; }
.gm-join-body { flex: 1 1 260px; min-width: 240px; }
.gm-join-label { display: block; font: 700 0.72rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; }
.gm-join-row { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.gm-join-url { flex: 1 1 200px; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 500 0.9rem/1.2 var(--font-mono, monospace); }

.gm-sessions { display: flex; flex-direction: column; gap: 2px; }
.gm-session { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-md); padding: 0.6rem 0.8rem; border: 1px solid var(--line); background: var(--panel); }
.gm-session:nth-child(even) { background: var(--panel-2); }
.gm-session.live { box-shadow: inset 3px 0 0 var(--showdown); }
.gm-session .rnd { font: 700 0.95rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
.gm-session .who { min-width: 0; }
.gm-session .who .nm { color: var(--text); text-transform: capitalize; }
.gm-session .when { color: var(--text-muted); font: 600 0.7rem/1.2 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; font-variant-numeric: tabular-nums; text-align: right; }

.gm-note { margin-top: var(--space-md); margin-bottom: 0; color: var(--text-muted); font-size: 0.82rem; }