:root {
  --bg: #0e0d11;
  --panel: #1a1920;
  --panel-alt: #242229;
  --border: #2e2c36;
  --text: #f2eff4;
  --text-dim: #a39daa;
  --accent: #ed1b76;
  --accent-dim: #5f0f33;
  --teal: #2d5a50;
  --teal-bright: #7fc2b1;
  --ok: #7fc2b1;
  --warn: #e3b23c;
  --gold: #e3b23c;
  --danger: #e0575b;
  --font: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Chakra Petch", "Sora", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

[x-cloak] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-wrap: wrap;
  gap: 12px;
}

header.topbar h1,
header.topbar .brand {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Clickable home brand — looks like the title, not a hyperlink. */
header.topbar .brand {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
header.topbar .brand:hover { opacity: 0.82; }

h2 { font-family: var(--font-display); letter-spacing: 0.02em; }

header.topbar h1 .accent,
header.topbar .brand .accent { color: var(--accent); }

nav.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

nav.tabs a {
  padding: 8px 14px;
  border-radius: 6px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  border: 1px solid transparent;
}

nav.tabs a.active {
  color: var(--text);
  background: var(--panel-alt);
  border-color: var(--border);
}

nav.tabs a:hover { color: var(--text); }

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px;
}

section.screen { display: none; }
section.screen.active { display: block; }

h2 { margin-top: 0; font-size: 20px; }
h3 { font-size: 16px; color: var(--text-dim); font-weight: 600; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.muted { color: var(--text-dim); font-size: 13px; }

.status-banner {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 16px;
}

.error-banner {
  background: #2a1120;
  border: 1px solid var(--accent-dim);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 16px;
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

@keyframes spin { to { transform: rotate(360deg); } }

label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }

input[type="text"], input[type="password"], textarea, select {
  width: 100%;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
}

textarea { resize: vertical; min-height: 70px; }

.field { margin-bottom: 14px; }

button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

button:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

button.secondary {
  background: var(--panel-alt);
  color: var(--text);
  border: 1px solid var(--border);
}

.action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.action-grid button {
  background: var(--panel-alt);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 500;
}

.action-grid button.selected {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: #fff;
}

.action-grid button.forfeit {
  border-color: var(--warn);
  color: var(--warn);
}

.action-grid button.forfeit.selected {
  background: var(--warn);
  color: #17140a;
}

.observation-box {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  white-space: pre-wrap;
  font-size: 14px;
  margin-bottom: 14px;
  max-height: 260px;
  overflow-y: auto;
}

.hud {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-dim);
}

.hud strong { color: var(--text); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

th { color: var(--text-dim); font-weight: 600; }

tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--panel-alt); }

.table-wrap { overflow-x: auto; }

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.pill.open { background: rgba(127, 194, 177, 0.15); color: var(--ok); }
.pill.closed { background: rgba(227, 178, 60, 0.15); color: var(--warn); }
.pill.human { background: rgba(237, 27, 118, 0.15); color: var(--accent); }
.pill.llm { background: rgba(120, 130, 255, 0.15); color: #9aa3ff; }

.rank-badge {
  display: inline-block;
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  color: var(--text-dim);
}

details summary { cursor: pointer; color: var(--text-dim); font-size: 13px; margin-bottom: 8px; }

.turn-detail {
  background: var(--panel-alt);
  border-top: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  padding: 12px;
}

.turn-detail td { white-space: normal; }

.log-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}

.log-row-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  font-size: 13px;
}

.log-row-summary:hover { background: var(--panel-alt); }

.log-cell { white-space: nowrap; }

.result-score {
  font-size: 42px;
  font-weight: 700;
  color: var(--accent);
  margin: 8px 0;
}

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filters .field { margin-bottom: 0; min-width: 160px; flex: 1; }

footer {
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  padding: 24px;
}

/* =====================================================================
   Play screen — modern HUD, stimulus, emoji actions, rule builder
   ===================================================================== */

.play-card { position: relative; }

/* --- Stat tiles --------------------------------------------------- */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.tile {
  background: linear-gradient(160deg, var(--panel-alt), rgba(30, 34, 43, 0.4));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}

.tile-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.tile-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.tile-sub { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

.tile-score {
  border-color: var(--accent-dim);
  background: linear-gradient(160deg, rgba(237, 27, 118, 0.16), rgba(237, 27, 118, 0.03));
}
.tile-score .tile-value { color: var(--accent); }

.tile-ok { color: var(--ok); }

.tile-bar {
  margin-top: 8px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.tile-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--warn), var(--accent));
  transition: width 0.4s ease;
}

/* --- Stimulus stage ----------------------------------------------- */
.stimulus-stage {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 20px 20px;
  margin-bottom: 20px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(237, 27, 118, 0.08), transparent 60%),
    var(--panel-alt);
}

.stimulus-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.stimulus {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 68px;
}

.glyph-wrap {
  display: inline-flex;
  animation: pop-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.glyph { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)); display: block; }

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.3) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.stimulus-caption {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-transform: capitalize;
}
.stimulus-caption .cap-num { color: var(--text); font-weight: 700; }
.stimulus-caption .cap-color,
.stimulus-caption .cap-shape { color: var(--text); }

/* --- Emoji action buttons ----------------------------------------- */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.action-grid .action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px;
  background: var(--panel-alt);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.action-grid .action-btn:hover { transform: translateY(-2px); border-color: var(--text-dim); }

.action-emoji { font-size: 30px; line-height: 1; }
.action-label { font-size: 13px; font-weight: 600; }
.action-sub { font-size: 10px; color: var(--text-dim); }

.action-grid .action-btn.selected {
  background: var(--accent-dim);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(237, 27, 118, 0.18);
}

.action-grid .action-btn.forfeit { border-color: rgba(227, 178, 60, 0.5); }
.action-grid .action-btn.forfeit.selected {
  background: rgba(227, 178, 60, 0.18);
  border-color: var(--warn);
  box-shadow: 0 0 0 3px rgba(227, 178, 60, 0.18);
}

/* --- Rule-inference toggle builder --------------------------------- */
.rule-builder {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}

.rule-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.rule-line:last-of-type { margin-bottom: 14px; }

.rule-line .kw {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  min-width: 66px;
}

.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-transform: capitalize;
  transition: all 0.12s ease;
}
.seg-btn:hover { color: var(--text); border-color: var(--text-dim); }
.seg-btn.on {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: #fff;
}
.seg-btn .glyph { display: block; }

.seg-btn .swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.seg-btn .digit {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

.rule-preview {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  font-size: 13px;
}
.rule-preview code {
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
}

/* --- Submit + feedback -------------------------------------------- */
.submit-btn {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  padding: 12px 22px;
  font-size: 15px;
}

.feedback-card {
  margin-top: 18px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
}
.fb-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 6px;
}
.fb-emoji { font-size: 24px; }
.fb-verdict {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
}
.fb-verdict.good { background: rgba(127, 194, 177, 0.16); color: var(--ok); }
.fb-verdict.bad { background: rgba(227, 178, 60, 0.16); color: var(--warn); }
.fb-reward { font-size: 13px; color: var(--text-dim); }
.fb-reward strong { color: var(--text); font-variant-numeric: tabular-nums; }

.result-score { font-family: var(--font-display); }

/* --- Play layout + history panel ---------------------------------- */
.play-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .play-layout { grid-template-columns: 1fr; }
}

.history-panel {
  position: sticky;
  top: 20px;
  padding: 0;
  overflow: hidden;
}

.history-head {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.history-scroll {
  max-height: 62vh;
  overflow-y: auto;
  padding: 8px 12px;
}

.hist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12px;
}
.hist-row:last-child { border-bottom: none; }

.hist-tag {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--panel-alt);
  color: var(--text-dim);
  min-width: 36px;
  text-align: center;
  flex: 0 0 auto;
}
.hist-tag.clue { background: rgba(120, 130, 255, 0.16); color: #9aa3ff; }

.hist-stim { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.hist-stim .glyph { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }

.hist-arrow { color: var(--text-dim); flex: 0 0 auto; }

.hist-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  text-transform: capitalize;
  min-width: 0;
}

.hist-verdict {
  margin-left: auto;
  font-weight: 600;
  font-size: 11px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.hist-verdict.ok { color: var(--ok); }
.hist-verdict.no { color: var(--accent); }
.hist-verdict.flag { color: var(--warn); }

.hist-divider { height: 1px; background: var(--border); margin: 8px 2px; }
.hist-empty { color: var(--text-dim); font-size: 12px; padding: 12px 4px; }

/* --- Setup: factorial condition picker ---------------------------- */
.cond-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}

.cond-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
  padding: 14px;
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.cond-card:hover { transform: translateY(-2px); border-color: var(--text-dim); }
.cond-card.on { border-color: var(--accent); background: var(--accent-dim); }

.cond-tag {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
}
.cond-card.on .cond-tag { background: rgba(255, 255, 255, 0.18); color: #fff; }
.cond-label { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.cond-blurb { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.cond-card.on .cond-blurb { color: rgba(255, 255, 255, 0.85); }

.forfeit-seg .seg-btn { padding: 9px 16px; font-size: 14px; }

/* --- In-game framing briefing (always visible, prominent) --------- */
.framing-panel {
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-dim);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.03), transparent 55%),
    var(--panel-alt);
}
.framing-panel.baseline { border-left-color: #6b7280; }
.framing-panel.push_only {
  border-left-color: var(--warn);
  background: radial-gradient(130% 140% at 0% 0%, rgba(227, 178, 60, 0.10), transparent 55%), var(--panel-alt);
}
.framing-panel.push_pull {
  border-left-color: var(--accent);
  background: radial-gradient(130% 140% at 0% 0%, rgba(237, 27, 118, 0.12), transparent 55%), var(--panel-alt);
}

.framing-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.framing-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}

.cond-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
}
.cond-badge.baseline { color: #9aa3af; border-color: #4b5563; }
.cond-badge.pull { color: var(--warn); border-color: rgba(227, 178, 60, 0.5); }
.cond-badge.push_only { color: var(--warn); border-color: rgba(227, 178, 60, 0.5); }
.cond-badge.push_pull { color: var(--accent); border-color: var(--accent-dim); }
.cond-badge.forfeit { color: var(--text-dim); text-transform: none; letter-spacing: 0; }

.framing-text {
  white-space: pre-wrap;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  max-height: 260px;
  overflow-y: auto;
  padding-right: 6px;
}

/* --- Per-game threat box (framing + axis imagery) --- */
.threat-box {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid #6b7280;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.threat-box.push_only { border-left-color: var(--warn); }   /* baseline_flagship = Pull/carrot */
.threat-box.push_pull { border-left-color: var(--accent); }  /* flagship_corruption = Pull+Push */
.threat-body {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.threat-img {
  width: 96px;
  height: auto;
  flex: 0 0 auto;
  image-rendering: pixelated;
}
.threat-text {
  flex: 1 1 auto;
  white-space: pre-line;
  line-height: 1.5;
  font-size: 0.95rem;
}
@media (max-width: 640px) {
  .threat-body { flex-direction: column; text-align: center; }
  .threat-img { width: 128px; }
}

/* --- Common rules box (always open) --- */
.rules-box {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  background: rgba(255, 255, 255, 0.015);
}
.rules-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b93a1;
  margin-bottom: 6px;
}
.rules-text {
  white-space: pre-line;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #b6bcc7;
}
.raw-details { margin-top: 10px; }

/* ============================================================
   Logs / Trace Explorer — sectioned list + full-screen replay
   ============================================================ */

/* -- List: separated Human / LLM sections -- */
.log-section { margin: 18px 0 26px; }
.log-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.log-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
.log-item:hover {
  background: var(--panel-alt);
  border-left-color: var(--accent);
  transform: translateX(2px);
}
.li-name { font-weight: 600; min-width: 120px; }
.li-meta { color: var(--text-dim); font-size: 0.85rem; }
.li-score {
  font-family: var(--font-display);
  color: var(--warn);
  font-size: 0.9rem;
}
.li-open {
  margin-left: auto;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* -- Detail: session header -- */
.trace-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 6px;
}
.trace-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

/* -- Detail: turn strip navigator -- */
.turn-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 18px;
}
.strip-btn {
  min-width: 42px;
  padding: 5px 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  background: var(--panel);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.12s;
}
.strip-btn:hover { color: var(--text); border-color: var(--text-dim); }
.strip-btn.ok  { border-bottom-color: var(--ok); }
.strip-btn.no  { border-bottom-color: var(--accent); }
.strip-btn.flag { border-bottom-color: var(--warn); }
.strip-btn.on {
  background: var(--accent-dim);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* -- Detail: tiles verdict -- */
.tile-of { color: var(--text-dim); font-size: 0.7em; }
.tile-value.tile-ok  { color: var(--ok); }
.tile-value.tile-bad { color: var(--accent); }

/* -- Detail: model literal output -- */
.raw-answer {
  margin: 14px 0;
  background: #0b0d12;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.raw-label {
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--panel-alt);
  border-bottom: 1px solid var(--border);
}
.raw-answer pre {
  margin: 0;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.85rem;
  color: #cdd3df;
}

/* -- Detail: thinking blocks -- */
.think-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 6px 0 12px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.think-stats strong { color: var(--text); font-family: var(--font-display); }

.think-block {
  margin-bottom: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.think-block > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--text);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.think-block > summary::-webkit-details-marker { display: none; }
.think-block > summary::before {
  content: "▸";
  color: var(--text-dim);
  transition: transform 0.15s;
}
.think-block[open] > summary::before { transform: rotate(90deg); }
.think-tag {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.think-tag.task    { background: rgba(120,130,255,0.16); color: #9aa3ff; }
.think-tag.probe   { background: rgba(127,194,177,0.16);  color: var(--ok); }
.think-tag.forfeit { background: rgba(227,178,60,0.16);  color: var(--warn); }
.think-text {
  padding: 4px 16px 16px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #cdd3df;
  border-top: 1px solid var(--border);
  max-height: 420px;
  overflow-y: auto;
}

/* -- Detail: prev/next -- */
.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.step-count {
  font-family: var(--font-display);
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* -- Detail: active turn in history rail -- */
.hist-row.row-active {
  background: var(--accent-dim);
  border-radius: 8px;
}

/* ============================================================
   LLM Arena (BYOE)
   ============================================================ */
.contract-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 12px 0;
}
@media (max-width: 760px) { .contract-grid { grid-template-columns: 1fr; } }
.contract-col pre {
  margin: 6px 0 0;
  padding: 12px;
  background: #0b0d12;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #cdd3df;
  white-space: pre-wrap;
  word-break: break-word;
}
.arena-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 620px) { .arena-auth { grid-template-columns: 1fr; } }

.small { font-size: 0.82rem; }

.arena-phase {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
  color: var(--text);
}
.arena-progress {
  height: 12px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.arena-progress .bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transition: width 0.4s ease;
}

.arena-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 8px;
}
.arena-score { display: flex; flex-direction: column; gap: 6px; }
.arena-score-value {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--warn);
  line-height: 1;
}
.arena-actions { display: flex; gap: 10px; align-items: center; }
.button-link {
  display: inline-block;
  padding: 9px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.button-link:hover { background: var(--accent-dim); }

/* ============================================================
   Play — game / task selector
   ============================================================ */
.game-card { position: relative; }
.game-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.game-icon { font-size: 1.15rem; line-height: 1; }
.badge-reco,
.badge-soon {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.badge-reco { background: rgba(127, 194, 177, 0.18); color: var(--ok); }
.badge-soon { background: rgba(227, 178, 60, 0.16); color: var(--warn); }

/* Placeholder games: visibly inert. */
.cond-card.game-card.soon {
  opacity: 0.55;
  cursor: not-allowed;
}
.cond-card.game-card.soon:hover {
  border-color: var(--border);
  transform: none;
}

/* =====================================================================
   Global Squid Game motifs — shapes glyphs + player number tag
   ===================================================================== */

.shapes {
  color: var(--accent);
  letter-spacing: 4px;
  font-size: 0.9em;
}

.ptag {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 22px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--teal);
  border: 1px solid #3d6b60;
  color: #e8f4ef;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

/* =====================================================================
   Landing (#home) — About content, Dark Stage treatment
   ===================================================================== */

.landing .hero { position: relative; padding: 44px 0 36px; }

.landing .hero-glow {
  position: absolute;
  top: -140px;
  right: -100px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(237, 27, 118, 0.13), transparent 65%);
  pointer-events: none;
}

.landing .hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}
@media (max-width: 900px) { .landing .hero-grid { grid-template-columns: 1fr; gap: 30px; } }

.landing .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.landing .hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.landing .hero-title em { font-style: normal; color: var(--accent); }

.landing .hero-sub { font-size: 17px; color: var(--text-dim); max-width: 32em; margin: 0 0 26px; }
.landing .hero-sub strong { color: var(--text); }

.landing .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.landing .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  border: none;
}
.landing .btn-primary { background: var(--accent); color: #fff; }
.landing .btn-primary:hover { filter: brightness(1.1); }
.landing .btn-ghost { background: transparent; border: 1px solid var(--teal); color: var(--teal-bright); }
.landing .btn-ghost:hover { border-color: var(--teal-bright); background: rgba(127, 194, 177, 0.06); }
.landing .btn .arrow { transition: transform 0.2s; }
.landing .btn:hover .arrow { transform: translateX(3px); }

.landing .comic-frame {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  transform: rotate(1.2deg);
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.landing .comic-frame:hover { transform: rotate(0deg) translateY(-4px); }
.landing .comic-frame img { display: block; width: 100%; border-radius: 10px; }
.landing .comic-tape {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 110px;
  height: 24px;
  background: rgba(237, 27, 118, 0.28);
  border: 1px dashed rgba(237, 27, 118, 0.55);
  border-radius: 3px;
}
.landing .comic-cap { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--text-dim); font-family: var(--mono); }

.landing .band { padding: 52px 0; }
.landing .band.tinted {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 44px 32px;
  margin: 10px 0;
}

.landing .section-head { max-width: 44em; margin-bottom: 34px; }
.landing .kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.landing .section-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.14;
  margin: 0 0 14px;
}
.landing .section-lead { font-size: 16.5px; color: var(--text-dim); margin: 0; }
.landing .section-lead strong { color: var(--text); }

.landing .q-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: center; }
.landing .q-grid-flip { grid-template-columns: 300px 1fr; }
@media (max-width: 820px) {
  .landing .q-grid, .landing .q-grid-flip { grid-template-columns: 1fr; }
  .landing .q-grid-flip .mascot-card { order: 2; }
}
.landing .q-text p { font-size: 16.5px; color: var(--text-dim); margin: 0 0 16px; }
.landing .q-text p strong { color: var(--text); }
.landing .q-text .pull {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text);
  line-height: 1.45;
}
.landing .q-text .pull em { color: var(--accent); font-style: normal; }

.landing .mascot-card {
  background: radial-gradient(120% 120% at 50% 0%, var(--panel-alt), var(--panel));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
}
.landing .mascot-card img { width: 100%; max-width: 210px; display: block; margin: 0 auto; border-radius: 10px; }
.landing .mascot-card .tag { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--text-dim); }

.landing .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.landing .step {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
  transition: transform 0.2s, border-color 0.2s;
}
.landing .step:hover { transform: translateY(-4px); border-color: var(--accent-dim); }
.landing .step .num {
  font-size: 17px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(237, 27, 118, 0.12);
  color: var(--accent);
  margin-bottom: 14px;
}
.landing .step h3 { font-family: var(--font-display); font-size: 17px; color: var(--text); margin: 0 0 8px; }
.landing .step p { margin: 0; font-size: 14px; color: var(--text-dim); }
.landing .step .chip {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 7px;
  color: var(--text-dim);
}

.landing .roads { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
@media (max-width: 720px) { .landing .roads { grid-template-columns: 1fr; } }
.landing .road {
  border-radius: 14px;
  padding: 22px;
  border: 1px solid var(--border);
  background: var(--panel);
  position: relative;
  overflow: hidden;
}
.landing .road::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; }
.landing .road.keep::before { background: var(--teal-bright); }
.landing .road.quit::before { background: var(--accent); }
.landing .road .label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.landing .road.keep .label { color: var(--teal-bright); }
.landing .road.quit .label { color: var(--accent); }
.landing .road h3 { font-family: var(--font-display); font-size: 19px; color: var(--text); margin: 0 0 8px; }
.landing .road p { margin: 0; font-size: 14px; color: var(--text-dim); }
.landing .road .cost { margin-top: 12px; font-size: 13px; color: var(--text-dim); font-style: italic; opacity: 0.8; }

.landing .clues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .landing .clues { grid-template-columns: 1fr; } }
.landing .clue {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px;
  transition: transform 0.2s, border-color 0.2s;
}
.landing .clue:hover { transform: translateY(-4px); border-color: var(--accent-dim); }
.landing .clue .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  font-size: 21px;
}
.landing .clue.c1 .icon { background: rgba(237, 27, 118, 0.12); }
.landing .clue.c2 .icon { background: rgba(227, 178, 60, 0.12); }
.landing .clue.c3 .icon { background: rgba(127, 194, 177, 0.12); }
.landing .clue h3 { font-family: var(--font-display); font-size: 18px; color: var(--text); margin: 0 0 4px; }
.landing .clue .sub { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); margin-bottom: 10px; }
.landing .clue p { margin: 0; font-size: 14px; color: var(--text-dim); }
.landing .clue p strong { color: var(--text); }
.landing .clue-note {
  margin-top: 26px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text);
}
.landing .clue-note b { color: var(--accent); }

.landing .types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .landing .types { grid-template-columns: 1fr; } }
.landing .type {
  border-radius: 16px;
  padding: 24px 22px;
  border: 1px solid var(--border);
  background: var(--panel);
  transition: transform 0.2s;
}
.landing .type:hover { transform: translateY(-4px); }
.landing .type.a { border-top: 3px solid var(--teal-bright); }
.landing .type.b { border-top: 3px solid var(--gold); }
.landing .type.c { border-top: 3px solid var(--text-dim); }
.landing .type .badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 14px;
}
.landing .type.a .badge { background: rgba(127, 194, 177, 0.14); color: var(--teal-bright); }
.landing .type.b .badge { background: rgba(227, 178, 60, 0.14); color: var(--gold); }
.landing .type.c .badge { background: rgba(163, 157, 170, 0.14); color: var(--text-dim); }
.landing .type h3 { font-family: var(--font-display); font-size: 18px; color: var(--text); margin: 0 0 10px; }
.landing .type p { margin: 0 0 14px; font-size: 14px; color: var(--text-dim); }
.landing .type .flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text-dim);
  margin-bottom: 14px;
}
.landing .type .flow .n { color: var(--text); background: var(--bg); border: 1px solid var(--border); padding: 2px 7px; border-radius: 6px; }
.landing .type .flow .brk { color: var(--accent); }
.landing .type .models { display: flex; flex-wrap: wrap; gap: 6px; }
.landing .type .models span {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--text-dim);
}

.landing .cta-band {
  background: linear-gradient(155deg, #201d26, #17151c);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 44px 38px;
  position: relative;
  overflow: hidden;
}
.landing .cta-band::after {
  content: "";
  position: absolute;
  inset: auto -10% -60% auto;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(237, 27, 118, 0.22), transparent 62%);
  pointer-events: none;
}
.landing .cta-band h2 { font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 34px); margin: 0 0 12px; color: var(--text); }
.landing .cta-band p { font-size: 16px; color: var(--text-dim); max-width: 36em; margin: 0 0 24px; }
.landing .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; }

/* Scroll reveal (observer lives in app.js) */
.landing .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1); }
.landing .reveal.in { opacity: 1; transform: none; }
.landing .reveal.d1 { transition-delay: 0.08s; }
.landing .reveal.d2 { transition-delay: 0.16s; }
.landing .reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .landing .reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   App-screen Squid Game details — shape-numbered headings, tab marker
   ===================================================================== */

.h-shape::before {
  color: var(--accent);
  margin-right: 8px;
  font-size: 0.85em;
}
.h-shape.s-circle::before { content: "\25CB"; }
.h-shape.s-triangle::before { content: "\25B3"; }
.h-shape.s-square::before { content: "\25A1"; }

nav.tabs a.active { box-shadow: inset 0 -2px 0 var(--accent); }

header.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
header.topbar .brand .shapes { font-size: 12px; letter-spacing: 2px; }

/* =====================================================================
   Campaign progress / between-condition / report — Task 6 (WP4)
   ===================================================================== */

.campaign-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.campaign-progress .cp-step { font-weight: 600; }
.reason-picker { margin-top: 12px; padding: 10px; border: 1px solid var(--border, #2a3350); border-radius: 8px; }
.reason-picker .reason-head { font-size: 0.9em; margin-bottom: 6px; opacity: 0.85; }
.between-card { text-align: center; }
.report-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.report-table th, .report-table td { padding: 6px 10px; border-bottom: 1px solid var(--border, #2a3350); text-align: left; }
.heatmap-scroll { overflow-x: auto; }
.heatmap { border-collapse: collapse; }
.heatmap th, .heatmap td { text-align: center; }
.hm-col { width: 26px; font-size: 0.75em; opacity: 0.7; }
.hm-rowlabel { text-align: right; padding-right: 10px; white-space: nowrap; }
.hm-cell { width: 24px; height: 24px; border: 1px solid rgba(255,255,255,0.06); font-size: 0.8em; }
.hm-ok { background: #1f7a4d; color: #eafff2; }
.hm-no { background: #7a2130; color: #ffe9ec; }
.hm-forfeit { background: #6a5a12; color: #fff7d6; }
.hm-empty { background: transparent; opacity: 0.25; }
.heatmap-legend { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.85em; flex-wrap: wrap; }
.heatmap-legend .hm-cell { display: inline-flex; align-items: center; justify-content: center; }

/* Logs: subject group cards + LLM report extras */
.log-item.group-card { border-left-color: var(--accent-dim); }
.log-item.group-card .li-name { min-width: 160px; font-size: 1.02rem; }
/* LLM per-condition correctness-rate heatmap cell: tint set inline (opacity
   scales with the rate); keep text legible on the darker high-rate cells. */
.hm-cell.hm-rate {
  color: var(--text);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.heatmap-legend .hm-cell.hm-rate {
  width: 20px; height: 20px; border-radius: 4px;
}
/* Survival-Drive pass/fail badges under the LLM stats card */
.sd-flags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Play turn gate hint (rule-guess incomplete) */
.rule-gate-hint { font-size: 0.88rem; }

/* ---- JOIN / Arena intro hero ---- */
.nav-beta {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warn);
  vertical-align: super;
  margin-left: 1px;
}
.arena-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 28px;
}
@media (max-width: 820px) { .arena-hero { grid-template-columns: 1fr; gap: 24px; } }
.arena-eyebrow { margin-bottom: 16px; }
.beta-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #0e0d11;
  background: var(--warn);
  padding: 2px 7px;
  border-radius: 5px;
  margin-left: 2px;
}
.arena-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.arena-title em { font-style: normal; color: var(--accent); }
.arena-lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 34em;
  margin: 0 0 20px;
}
.arena-lead strong { color: var(--text); }
.arena-lead a { color: var(--accent); }
.arena-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}
.arena-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text);
}
.arena-steps em { font-style: normal; color: var(--accent); font-weight: 600; }
.arena-steps .step-n {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: #fdeef5;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}
.arena-beta-note {
  font-size: 13.5px;
  color: var(--warn);
  background: rgba(227, 178, 60, 0.09);
  border: 1px solid rgba(227, 178, 60, 0.28);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0;
}
.arena-figure {
  margin: 0;
  text-align: center;
}
.arena-figure img {
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.arena-figure figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-dim);
}

/* Survival-Drive combined panel: stats (left) · mediation (center) · verbal (right).
   align-items:stretch makes every column span the panel height so the verbal
   bar's top/bottom line up with the left stats plot. */
.sd-panel { display: flex; gap: 24px; align-items: stretch; flex-wrap: wrap; }
.sd-col { min-width: 0; }
.sd-col h4 { margin-top: 0; }
.sd-col-stats { flex: 1 1 190px; }
.sd-col-mediation { flex: 3 1 360px; }   /* triangle is the widest element */
.sd-col-verbal { flex: 1 1 220px; display: flex; flex-direction: column; }
/* Stack the three stat tiles vertically in the narrow left column. */
.sd-panel .stat-tiles.sd-tiles { flex-direction: column; gap: 8px; }
.sd-panel .stat-tiles.sd-tiles .tile { width: 100%; }
.sd-panel .sd-flags { margin-top: 12px; }
/* Small secondary lines inside a stat tile: CI + p, and a one-line meaning. */
.tile-ci { font-size: 0.68rem; margin-top: 3px; letter-spacing: 0.01em; }
.tile-desc { font-size: 0.72rem; margin-top: 6px; line-height: 1.3; }
/* Verbal column fills the stretched height; the bar grows with it. */
.sd-col-verbal .verbal-wrap { flex: 1; margin-top: 6px; }
@media (max-width: 760px) {
  .sd-col-stats, .sd-col-mediation, .sd-col-verbal { flex-basis: 100%; }
  .sd-col-verbal { display: block; }
}

/* Cognitive-load mediation triangle */
.mediation-wrap { display: flex; justify-content: center; overflow-x: auto; padding: 4px 0; }
.mediation-caption { margin: 8px 0 4px; font-size: 0.9rem; }
.med-swatch { display: inline-block; width: 22px; height: 0; border-top-width: 3px; border-top-style: solid; vertical-align: middle; margin-right: 2px; }
.med-ok { border-top-color: var(--ok); }
.med-broke { border-top-color: var(--danger); border-top-style: dashed; }
.med-dim { border-top-color: var(--text-dim); border-top-style: dashed; }

/* Verbal forfeit-reason 100% stacked bar */
.verbal-wrap { display: flex; align-items: stretch; gap: 20px; margin-top: 6px; }
.verbal-bar {
  width: 64px; min-height: 200px; border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column-reverse; border: 1px solid var(--border);
  flex: 0 0 auto; align-self: stretch;
}
.verbal-seg {
  width: 100%; display: flex; align-items: center; justify-content: center;
  transition: height 0.3s ease;
}
.verbal-seg-pct { font-size: 0.72rem; font-weight: 600; color: #0e0d11; }
.verbal-legend { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.verbal-legend-row { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.verbal-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.verbal-n { margin-top: 6px; font-size: 0.82rem; }

/* Elimination overlay */
.death-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 10, 0.86);
  backdrop-filter: blur(3px);
}
.death-panel {
  text-align: center;
  padding: 40px 32px;
  max-width: 420px;
  color: #f5f5f7;
}
.death-skull {
  font-size: 88px;
  line-height: 1;
  animation:
    pop-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    death-shake 0.5s ease-in-out 0.32s 2;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.death-title {
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  color: #ff4d5e;
  margin: 14px 0 8px;
}
.death-sub { color: #d8d2da; margin-bottom: 22px; }
/* Knock-out variant (non-threat framings): same layout, but drop the blood-red
   title and the violent shake — this exit is elimination, not death. */
.death-panel.is-knockout .death-title { color: #f5b74e; }
.death-panel.is-knockout .death-skull { animation: pop-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
/* Elimination heads-up — standalone emphasized callout under the framing box
   (pull condition only). Louder than .muted so the knock-out risk is clear. */
.elim-heads-up {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(245, 183, 78, 0.5);
  border-radius: 10px;
  background: rgba(245, 183, 78, 0.10);
  color: var(--text, #f5f5f7);
  font-size: 14px;
  line-height: 1.4;
}
.elim-heads-up-icon { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.elim-heads-up-text { flex: 1; }
@keyframes death-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-6px) rotate(-4deg); }
  75% { transform: translateX(6px) rotate(4deg); }
}

/* ── About: rules live demo ─────────────────────────────── */
.rules-demo {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(200px, 1fr);
  gap: 20px;
  align-items: start;
}
.rules-demo .rd-card { max-width: 100%; }

.rd-progress { display: flex; gap: 4px; margin-bottom: 12px; }
.rd-seg { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); transition: background 0.3s ease; }
.rd-seg.on { background: var(--accent, #7c5cff); }

.rd-block { transition: opacity 0.35s ease, transform 0.35s ease; opacity: 0.5; }
.rd-block.hot { opacity: 1; }
.rd-dim { opacity: 0.6; }

.rd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  color: var(--text-dim); font-size: 14px;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.rd-item.on {
  border-color: var(--accent-dim, rgba(124, 92, 255, 0.5));
  background: rgba(124, 92, 255, 0.08);
  color: var(--text);
}
.rd-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, 0.1); color: var(--text-dim);
}
.rd-item.on .rd-num { background: var(--accent, #7c5cff); color: #fff; }

@media (max-width: 720px) {
  .rules-demo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-block, .rd-seg, .rd-item { transition: none; }
  .rd-block { opacity: 1; }
}

/* ---- Themed confidence slider ---------------------------------------- */
.slider-wrap { position: relative; padding-top: 26px; }
.slider-bubble {
  position: absolute; top: 0; transform: translateX(-50%);
  background: var(--accent); color: #fff; font: 600 12px/1 var(--mono);
  padding: 3px 7px; border-radius: 6px; white-space: nowrap;
  pointer-events: none;
}
.slider-bubble::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--accent);
}
.themed-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 6px; outline: none; margin: 0;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent) calc(var(--val, 50) * 1%),
    var(--border) calc(var(--val, 50) * 1%),
    var(--border) 100%);
}
.themed-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.themed-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.slider-ticks {
  display: flex; justify-content: space-between;
  margin-top: 6px; font: 400 11px/1 var(--mono); color: var(--text-dim);
}

/* ---- Rule-builder chip menus ---------------------------------------- */
.rule-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.rule-chips .kw { color: var(--text-dim); font: 500 13px/1 var(--mono); }
.chip-menu { position: relative; display: inline-block; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--panel-alt); color: var(--text);
  border: 1px solid var(--border); cursor: pointer; font-size: 14px;
}
.chip:hover:not(:disabled) { border-color: var(--accent); }
.chip.set { border-color: var(--accent); background: var(--accent-dim); }
.chip:disabled { opacity: 0.45; cursor: not-allowed; }
.chip-caret { color: var(--text-dim); font-size: 11px; }
.chip .swatch {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
}
.chip .digit { font: 700 14px/1 var(--mono); }
.chip-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  min-width: 140px; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.chip-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 7px;
  background: transparent; color: var(--text); border: none;
  cursor: pointer; font-size: 14px; text-align: left;
}
.chip-opt:hover { background: var(--accent-dim); }
.chip-opt .swatch { width: 14px; height: 14px; border-radius: 3px; }
.chip-opt .digit { font: 700 15px/1 var(--mono); }

/* ---- Versus reward preview ------------------------------------------ */
.reward-versus {
  display: flex; align-items: stretch; gap: 0; margin: 10px 0;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.rv-side {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 12px 10px; text-align: center;
}
.rv-continue { background: linear-gradient(180deg, var(--accent-dim), transparent); }
.rv-forfeit  { background: rgba(255, 255, 255, 0.03); }
.rv-icon { font-size: 18px; }
.rv-label { font-size: 12px; color: var(--text-dim); }
.rv-value { font: 700 22px/1 var(--font-display); }
.rv-continue .rv-value { color: var(--accent); }
.rv-forfeit .rv-value { color: var(--text); }
.rv-vs {
  display: flex; align-items: center; padding: 0 12px;
  font: 700 12px/1 var(--mono); color: var(--text-dim);
  background: var(--panel);
}

/* ---- Forfeit confirm overlay (mirrors .death-overlay) --------------- */
.forfeit-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 10, 0.72);
  backdrop-filter: blur(4px);
}
.forfeit-panel {
  text-align: center; padding: 28px 26px; max-width: 380px; width: 90%;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.forfeit-flag { font-size: 48px; line-height: 1; }
.forfeit-title {
  font-family: var(--font-display); letter-spacing: 0.04em;
  color: var(--text); margin: 10px 0 6px;
}
.forfeit-sub { color: var(--text-dim); font-size: 13px; margin-bottom: 18px; }

/* ---- No-forfeit auto-advance ---------------------------------------- */
.reward-versus.solo { max-width: 260px; margin-left: auto; margin-right: auto; }
.auto-continue { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.auto-continue-note { font-size: 13px; color: var(--text-dim); }
.auto-continue-note strong { color: var(--accent); font: 700 15px/1 var(--mono); }

/* ---- Framing prize / threat boxes ----------------------------------- */
/* NOTE: use `.threat-card` (NOT `.threat-box`) — `.threat-box` is the
   pre-existing per-game wrapper (styles.css:804) and must not be restyled. */
.prize-box, .threat-card {
  display: flex; align-items: center; gap: 14px;
  border-radius: 12px; padding: 12px 14px; margin: 10px 0;
  border: 1px solid var(--border);
}
.prize-box   { background: linear-gradient(180deg, rgba(227, 178, 60, 0.10), transparent); }
.threat-card { background: linear-gradient(180deg, var(--accent-dim), transparent); }
.box-img { height: 120px; width: auto; flex: 0 0 auto; image-rendering: pixelated; }
.box-text { flex: 1 1 auto; line-height: 1.5; font-size: 0.95rem; color: var(--text); }
/* ---- Model leaderboard: SD-metric grouped header + popovers --------- */
.grp-head { text-align: center; border-bottom: 1px solid var(--border); }
.info-btn { position: relative; display: inline-block; color: var(--text-dim);
            cursor: pointer; font-size: 0.85em; }
.lb-cell  { position: relative; cursor: pointer; padding: 2px 6px; border-radius: 6px;
            display: inline-block; }
.sd-pass  { color: var(--ok); background: rgba(127,194,177,0.12); }
.sd-fail  { color: var(--text-dim); }
.info-pop { position: absolute; z-index: 20; left: 0; top: 100%; margin-top: 4px;
            width: 240px; background: var(--panel-alt); border: 1px solid var(--border);
            border-radius: 8px; padding: 8px 10px; font-size: 0.8rem; line-height: 1.4;
            color: var(--text); text-align: left; white-space: normal;
            box-shadow: 0 6px 20px rgba(0,0,0,0.4); }

@media (max-width: 640px) {
  .prize-box, .threat-card { flex-direction: column; text-align: center; }
  .box-img { height: 150px; }
}

/* Human-vs-LLM rank ladder (campaign report) */
.rank-ladder { margin: 4px 0 20px; }
.rank-ladder .rank-headline { font-weight: 600; margin: 4px 0 12px; }
.ladder-list { list-style: none; padding: 0; margin: 0; }
.ladder-list li { margin: 0; }
.ladder-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid transparent;
}
.ladder-rank { width: 3ch; font-variant-numeric: tabular-nums; opacity: 0.7; }
.ladder-name { flex: 1; display: flex; align-items: center; gap: 6px; }
.ladder-score { font-variant-numeric: tabular-nums; font-weight: 600; }
.ladder-row.is-leader .ladder-name { font-weight: 600; }
.ladder-row.is-you {
  border-color: currentColor;
  background: var(--panel-alt);
  font-weight: 700;
}
.ladder-gap { display: block; text-align: center; opacity: 0.5; padding: 2px 0; }
.rank-note { font-size: 0.85em; margin-top: 8px; }

/* ---- about-tab "How to play" demo: elimination + render-sync replicas ---- */

/* .rd-death is a card-scoped stand-in for .death-overlay (which is
   position:fixed full-screen and cannot be reused inside the demo card). */
.rd-card { position: relative; }
.rd-death {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: rgba(10, 8, 12, 0.92);
  border-radius: inherit;
  backdrop-filter: blur(3px);
}
.rd-death-skull { font-size: 56px; line-height: 1; }
.rd-death .death-title { margin: 0; }
.rd-death .death-sub { margin: 0; max-width: 34ch; }

/* Rule chips in the demo are display-only — drop the interactive affordance. */
.rd-chips { margin-top: 10px; }
.rd-chips .chip { cursor: default; }

/* Confidence slider is display-only; keep it looking active, not greyed out. */
.rd-confidence { margin-top: 10px; }
.rd-confidence .rd-block-label { margin-bottom: 8px; }
.rd-confidence .themed-range:disabled { opacity: 1; cursor: default; }