:root {
  --navy: #142b46;
  --navy-dark: #0e2034;
  --burgundy: #6c2430;
  --background: #f4f6f8;
  --paper: #ffffff;
  --text: #202a34;
  --muted: #69737d;
  --border: #c9d0d7;
  --bronze: #9a7943;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: Arial, Roboto, 'Helvetica Neue', sans-serif;
  background: var(--background);
  color: var(--text);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1,
h2,
h3,
.metadata-label {
  font-family: Georgia, 'Times New Roman', serif;
}

/* ===== Header ===== */
.site-header {
  background: var(--navy);
  color: #ffffff;
  border-bottom: 3px solid var(--bronze);
}

.header-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.emblem {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
}

.brand-text h1 {
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.brand-text p {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: #c8d3df;
  margin-top: 2px;
}

/* ===== Main ===== */
.main {
  flex: 1;
  width: 100%;
}

.app-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* ===== Landing / Start ===== */
.landing {
  background: var(--paper);
  border: 1px solid var(--frame-ink);
  box-shadow: inset 0 0 0 4px rgba(159,128,80,.055), 0 10px 30px rgba(16,43,67,.055);
  padding: 40px 32px;
  text-align: center;
}

.landing h2 {
  font-size: 1.8rem;
  color: var(--navy);
  margin-bottom: 12px;
}

.landing p {
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 8px;
}

.landing .rules {
  margin-top: 20px;
  text-align: left;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.landing .rules li {
  margin-bottom: 6px;
}

.btn {
  display: inline-block;
  background: var(--navy);
  color: #ffffff;
  border: none;
  padding: 12px 28px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
}

.btn:hover {
  background: var(--navy-dark);
}

.btn:focus-visible {
  outline: 3px solid var(--bronze);
  outline-offset: 2px;
}

.btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}

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

/* ===== Game screen ===== */
.game-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--navy);
}

.game-topbar .case-indicator {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  color: var(--navy);
}

.game-topbar .score {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  color: var(--burgundy);
  font-weight: 700;
}

.metadata-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}

.metadata-table tr {
  border-bottom: 1px solid var(--border);
}

.metadata-table tr:last-child {
  border-bottom: none;
}

.metadata-table td {
  padding: 8px 12px;
  font-size: 0.95rem;
}

.metadata-table td:first-child {
  width: 140px;
  font-family: Georgia, serif;
  color: var(--navy);
  font-weight: 700;
  background: #eef1f5;
  border-right: 1px solid var(--border);
}

.section {
  margin-bottom: 22px;
}

.section-title {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--burgundy);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 10px;
  font-weight: 700;
}

.summary-text {
  font-size: 1rem;
  line-height: 1.6;
}

.summary-text.narrative-text {
  white-space: pre-line;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.key-facts {
  list-style: none;
}

.key-facts li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
}

.key-facts li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--bronze);
  font-weight: 700;
}

.defendant-fields p {
  margin-bottom: 6px;
}

/* ===== Answer control ===== */
.answer-section {
  border-top: 2px solid var(--navy);
  padding-top: 20px;
  margin-top: 20px;
}

.answer-section h3 {
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 16px;
  text-align: center;
}

.slider-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.slider-row input[type='range'] {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  outline: none;
}

.slider-row input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--navy);
  border: 2px solid var(--bronze);
  border-radius: 0;
  cursor: pointer;
}

.slider-row input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--navy);
  border: 2px solid var(--bronze);
  border-radius: 0;
  cursor: pointer;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 6px;
}

.selected-answer {
  text-align: center;
  font-family: Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  margin: 8px 0 16px;
  min-height: 2rem;
}

.answer-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-life {
  background: transparent;
  color: var(--burgundy);
  border: 1px solid var(--burgundy);
}

.btn-life.active {
  background: var(--burgundy);
  color: #ffffff;
}

.btn-life:hover {
  background: var(--burgundy);
  color: #ffffff;
}

/* ===== Reveal ===== */
.reveal {
  margin-top: 24px;
  border: 2px solid var(--navy);
  background: var(--paper);
}

.reveal-header {
  background: var(--navy);
  color: #ffffff;
  padding: 10px 16px;
  font-weight: 700;
  font-family: Georgia, serif;
  letter-spacing: 0.05em;
}

.reveal-body {
  padding: 16px;
}

.reveal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.reveal-row:last-child {
  border-bottom: none;
}

.reveal-row .label {
  color: var(--muted);
  font-size: 0.9rem;
}

.reveal-row .value {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
}

.reveal-points {
  margin-top: 12px;
  padding: 12px;
  background: #eef1f5;
  border-left: 4px solid var(--bronze);
  font-family: Georgia, serif;
}

.reveal-points .points {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--burgundy);
}

.comparison-text {
  margin-top: 8px;
  color: var(--text);
}

.reveal-actions {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.source-link {
  color: var(--navy);
  text-decoration: underline;
  font-size: 0.9rem;
}

/* ===== Final results ===== */
.results {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 32px;
}

.results h2 {
  color: var(--navy);
  text-align: center;
  margin-bottom: 8px;
}

.total-score {
  text-align: center;
  font-family: Georgia, serif;
  font-size: 2.2rem;
  color: var(--burgundy);
  font-weight: 700;
  margin-bottom: 24px;
}

.profile-label {
  text-align: center;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  color: var(--navy);
  letter-spacing: 0.08em;
  background: #eef1f5;
  border: 1px solid var(--border);
  padding: 12px;
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border: 1px solid var(--border);
  margin-bottom: 24px;
}

.stat {
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.stat:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.stat .stat-label {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat .stat-value {
  font-family: Georgia, serif;
  font-size: 1.2rem;
  color: var(--navy);
  font-weight: 700;
}

.results-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ===== Campaign / challenge landing ===== */
.challenge-landing {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 40px 32px;
  text-align: center;
}

.challenge-landing h2 {
  color: var(--navy);
  margin-bottom: 12px;
}

.challenge-landing .target {
  font-family: Georgia, serif;
  font-size: 1.6rem;
  color: var(--burgundy);
  font-weight: 700;
  margin: 20px 0;
}

/* ===== Error ===== */
.error-box {
  background: var(--paper);
  border: 1px solid var(--burgundy);
  padding: 32px;
  text-align: center;
}

.error-box h2 {
  color: var(--burgundy);
  margin-bottom: 12px;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--navy-dark);
  color: #c8d3df;
  font-size: 0.8rem;
  padding: 20px;
  text-align: center;
}

.site-footer p {
  max-width: 760px;
  margin: 0 auto 6px;
  line-height: 1.5;
}

.mock-notice {
  color: var(--bronze);
  font-weight: 700;
}

.hidden {
  display: none !important;
}

/* ===== Responsive ===== */
@media (max-width: 700px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat:nth-child(odd) {
    border-right: none;
  }

  .landing,
  .results,
  .challenge-landing,
  .error-box {
    padding: 24px 16px;
  }

  .reveal-actions,
  .results-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .reveal-actions .btn,
  .results-actions .btn {
    width: 100%;
    text-align: center;
  }
}

.case-breakdown { margin: 30px 0 26px; text-align: left; }
.case-breakdown h3 { margin: 0 0 12px; color: var(--burgundy); font-family: Georgia, "Times New Roman", serif; font-size: 1rem; letter-spacing: .08em; }
.result-case-list { display: grid; gap: 12px; }
.result-case-card { position: relative; display: grid; grid-template-columns: 86px minmax(0, 1fr) 92px; align-items: stretch; min-height: 116px; overflow: hidden; border: 1px solid var(--frame-ink); background: linear-gradient(105deg, #fffefa 0%, #fbf8f1 100%); box-shadow: inset 0 0 0 3px rgba(159,128,80,.045), 0 5px 16px rgba(16,43,67,.045); }
.result-case-card.is-perfect { border-color: var(--bronze); }
.result-case-index { display: grid; place-items: center; padding: 12px; border-right: 1px solid var(--border); color: var(--burgundy); font-size: .65rem; font-weight: 800; letter-spacing: .075em; text-align: center; text-transform: uppercase; }
.result-case-content { min-width: 0; padding: 16px 20px; }
.result-case-content h4 { margin: 0 0 13px; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.outcome-comparison { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 8px; }
.outcome-side { display: grid; gap: 4px; min-width: 0; }
.outcome-side span { color: var(--muted); font-size: .59rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.outcome-side strong { color: var(--text); font-family: Georgia, "Times New Roman", serif; font-size: .9rem; line-height: 1.2; overflow-wrap: anywhere; }
.court-outcome strong { color: var(--navy); }
.player-outcome strong { color: var(--burgundy); }
.outcome-arrow { color: var(--bronze); font-family: Georgia, serif; font-size: 1.25rem; text-align: center; }
.result-points-seal { align-self: center; justify-self: center; display: grid; place-items: center; align-content: center; width: 66px; height: 66px; border: 1px solid var(--burgundy); border-radius: 50%; background: #fffefa; color: var(--burgundy); }
.result-points-seal strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; line-height: 1; }
.result-points-seal span { margin-top: 4px; font-size: .52rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.result-case-card.is-perfect .result-points-seal { border-color: var(--bronze); color: #7a5b2c; }
.case-results-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); }
.case-results-table { width: 100%; border-collapse: collapse; background: #fffefa; table-layout: fixed; }
.case-results-table th,
.case-results-table td { padding: 13px 14px; border-bottom: 1px solid var(--border); color: var(--text); font-size: .84rem; line-height: 1.35; text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.case-results-table thead th { background: #f2eee6; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.case-results-table thead th:first-child { width: 40%; }
.case-results-table thead th:nth-child(2) { width: 10%; text-align: center; }
.case-results-table tbody th { color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: .94rem; font-weight: 700; }
.case-results-table tbody tr:last-child th,
.case-results-table tbody tr:last-child td { border-bottom: 0; }
.result-case-number { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border: 1px solid var(--burgundy); color: var(--burgundy); font: 700 .7rem/1 Inter, sans-serif; }
.case-results-table .result-case-points { color: var(--burgundy); font-family: Georgia, serif; font-size: 1.25rem; font-weight: 700; text-align: center; }

@media (max-width: 700px) {
  .result-case-card { grid-template-columns: 62px minmax(0, 1fr) 74px; min-height: 126px; }
  .result-case-index { padding: 8px; font-size: .58rem; }
  .result-case-content { padding: 14px 12px; }
  .result-case-content h4 { margin-bottom: 11px; font-size: .92rem; }
  .outcome-comparison { grid-template-columns: 1fr; gap: 8px; }
  .outcome-arrow { display: none; }
  .outcome-side { grid-template-columns: 88px minmax(0, 1fr); align-items: baseline; gap: 8px; }
  .outcome-side strong { font-size: .82rem; }
  .result-points-seal { width: 56px; height: 56px; }
  .result-points-seal strong { font-size: 1.3rem; }
  .case-results-wrap { overflow: visible; border: 0; }
  .case-results-table,
  .case-results-table tbody { display: block; }
  .case-results-table thead { display: none; }
  .case-results-table tr { display: grid; gap: 0; margin-bottom: 12px; border: 1px solid var(--border); background: #fffefa; }
  .case-results-table th,
  .case-results-table td { display: grid; grid-template-columns: minmax(92px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 10px; width: 100%; border-bottom: 1px solid var(--border); text-align: right; }
  .case-results-table th::before,
  .case-results-table td::before { content: attr(data-label); color: var(--muted); font: 800 .62rem/1.2 Inter, sans-serif; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
  .case-results-table tbody th { font-size: .86rem; }
  .case-results-table .result-case-points { font-size: 1.05rem; text-align: right; }
  .result-case-number { display: none; }
}

/* ===== Editorial case layout with visual asset slots ===== */
.app-container {
  max-width: 1240px;
}

.case-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 330px);
  gap: 20px;
  align-items: start;
}

.case-paper,
.answer-panel {
  background: #fbf8f2;
  border: 1px solid #c9c1b5;
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(23, 43, 69, 0.04);
}

.case-paper { min-width: 0; overflow: hidden; padding: 18px 24px 24px; }
.editorial-topbar { margin-bottom: 18px; }

.case-hero {
  display: grid;
  grid-template-columns: minmax(250px, 38%) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.asset-placeholder {
  position: relative;
  overflow: hidden;
  border: 1px dashed #9da8b3;
  background:
    linear-gradient(135deg, rgba(23,43,69,.08) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(315deg, rgba(122,43,51,.06) 25%, transparent 25%) 0 0 / 18px 18px,
    #ece7de;
  color: #334960;
}

.asset-placeholder::after {
  content: '';
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(51,73,96,.16);
  border-radius: 50%;
}

.asset-placeholder span,
.asset-placeholder strong,
.asset-placeholder small { position: relative; z-index: 1; }

.scene-placeholder {
  min-height: 330px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.scene-placeholder span { font-size: .78rem; color: #647080; }
.scene-placeholder strong { max-width: 74%; font-family: Georgia, serif; font-size: 1.35rem; color: #172b45; text-transform: capitalize; letter-spacing: 0; }
.scene-placeholder small { font-size: .72rem; color: #647080; }

.case-category-art {
  min-height: 330px;
  overflow: hidden;
  border: 1px solid #c9c1b5;
  border-radius: 6px;
  background: #ece7de;
}

.case-category-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  object-position: center;
}

.case-hero-copy { position: relative; display: flex; flex-direction: column; justify-content: center; }
.hero-kicker { color: #55606e; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; }
.case-hero-copy h2 { color: #172b45; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.75rem, 2.4vw, 2.55rem); line-height: 1.08; overflow-wrap: anywhere; margin: 10px 96px 16px 0; }
.hero-details { display: grid; gap: 8px; color: #24384f; font-size: 1rem; }
.state-outline { position: absolute; top: 0; right: 0; width: 78px; height: 78px; display: grid; place-items: center; opacity: .95; }
.state-outline svg { width: 100%; height: 100%; overflow: visible; }
.state-outline path { fill: #b9ced8; stroke: #172b45; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.story-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr); gap: 24px; margin-top: 24px; padding-top: 22px; border-top: 1px solid #a9b3bf; }
.story-grid .section { margin: 0; }
.case-accusation { margin: 0 0 12px; color: #172b45; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-weight: 400; line-height: 1.55; }
.story-section .summary-text { font-size: 1.07rem; line-height: 1.7; }
.story-section .narrative-text { white-space: pre-line; }
.defendant-section { border-left: 1px solid #d3cabd; padding-left: 24px; }
.defendant-name { margin: 0 0 10px; color: #172b45; font-family: Georgia, serif; font-size: 1.2rem; font-weight: 700; }
.defendant-section .muted-copy { display: none; }
.muted-copy { color: var(--muted); line-height: 1.6; }
.defense-inline { margin-top: 14px; color: #45546a; }

.fact-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #a9b3bf; }
.factor-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.factor-card { display: grid; grid-template-columns: 82px minmax(0, 1fr); column-gap: 14px; margin: 0; padding: 10px; border: 1px solid #bfc7d0; border-radius: 8px; background: #fbfaf6; }
.factor-card h4 { margin: 10px 2px 0; color: #7a2b33; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.factor-card p { margin: 10px 2px 2px; color: #26303b; font-size: .91rem; line-height: 1.45; }
.factor-card h4, .factor-card p, .factor-card .locked-clue { grid-column: 2; }
.factor-card .factor-art { grid-row: 1 / span 3; }
.factor-card.is-locked .factor-art img { filter: grayscale(1) blur(6px); transform: scale(1.06); opacity: .45; }
.locked-clue { display: grid; gap: 9px; margin-top: 10px; text-align: center; }
.locked-clue > span { color: #596575; font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.unlock-clue { display: grid; gap: 3px; width: 100%; padding: 10px 7px; border: 1px solid #7a2b33; background: #fffaf4; color: #702630; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.unlock-clue:hover { background: #7a2b33; color: #fff; }
.unlock-clue:disabled { cursor: wait; opacity: .65; }
.unlock-clue small { color: inherit; font-size: .66rem; font-weight: 400; }
.clue-intro { margin: -2px 0 14px; color: #687383; font-size: .82rem; }
.factor-art { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid #c9c1b5; border-radius: 5px; background: #ece7de; }
.factor-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .2s ease, transform .2s ease, opacity .2s ease; }
.factor-card.is-locked .factor-art::after { content: ''; position: absolute; inset: 0; background: rgba(23, 43, 69, .12); }

.answer-panel { position: sticky; top: 18px; min-width: 0; padding: 18px; border-top: 4px solid #172b45; }
.answer-panel h3 { font-family: Georgia, "Times New Roman", serif; color: #1f2f41; font-size: 1.22rem; line-height: 1.25; }
.case-timer { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 4px; padding: 9px 10px; border: 1px solid #bfc7d0; border-radius: 5px; background: #f4eee5; color: #45546a; font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.case-timer strong { color: #172b45; font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; letter-spacing: .03em; }
.case-timer.is-unlimited strong { color: var(--burgundy); font-size: .78rem; letter-spacing: .075em; }
.case-timer.is-critical { border-color: #9d403f; background: #fbebe6; color: #7a2b33; }
.case-timer.is-critical strong, .case-timer.is-expired strong { color: #7a2b33; }
.case-timer.is-expired strong { font-family: inherit; font-size: .72rem; letter-spacing: .04em; text-align: right; }
.answer-panel .selected-answer { font-family: Georgia, serif; font-size: 2rem; color: #172b45; padding: 16px 0 8px; }
.answer-panel .answer-buttons { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 10px; }
.answer-panel .btn { width: 100%; min-width: 0; padding-inline: 8px; font-size: .8rem; }
.answer-panel .btn-life { margin: 0; background: transparent; color: var(--burgundy); }
.answer-panel .btn-life:hover,
.answer-panel .btn-life.active { background: var(--burgundy); color: #fff; }
.verdict-note { margin: 16px 0; padding: 14px; border-left: 3px solid #7a2b33; background: #f4eee5; }
.verdict-note strong { color: #7a2b33; font-size: .78rem; letter-spacing: .06em; }
.verdict-note p { margin: 6px 0 0; line-height: 1.5; }
.case-details-link {
  display: inline-flex;
  margin-top: 10px;
  color: var(--navy);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}
.case-details-link:hover { text-decoration: underline; }

@media (max-width: 1080px) {
  .case-layout { grid-template-columns: 1fr; }
  .answer-panel { position: static; }
}

@media (max-width: 760px) {
  .case-paper { padding: 16px; }
  .case-hero, .story-grid { grid-template-columns: 1fr; }
  .case-category-art, .case-category-art img { min-height: 240px; }
  .defendant-section { border-left: 0; border-top: 1px solid #d3cabd; padding: 18px 0 0; }
  .factor-grid { grid-template-columns: 1fr; }
  .state-outline { width: 64px; height: 64px; }
  .case-hero-copy h2 { margin-right: 74px; }
}

@media (max-width: 480px) {
  .factor-card { grid-template-columns: 62px minmax(0, 1fr); }
  .answer-panel .answer-buttons { grid-template-columns: 1fr; }
}

/* Refined civic interface: restrained court-record typography and materials. */
:root {
  --navy: #102b43;
  --burgundy: #7b2735;
  --background: #eeece6;
  --paper: #fcfbf7;
  --text: #17242f;
  --muted: #65717a;
  --border: #d4cabd;
  --bronze: #9f8050;
  --frame-ink: rgba(91, 52, 39, .56);
  --frame-rule: rgba(123, 39, 53, .28);
}

body {
  background: var(--background);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.site-header { position: sticky; top: 0; z-index: 20; flex-shrink: 0; border-bottom: 3px solid var(--bronze); box-shadow: 0 1px 0 rgba(255,255,255,.18); }
.header-inner { max-width: 1240px; min-height: 86px; padding: 12px 28px; }
.brand { gap: 14px; }
.emblem { width: 64px; height: 64px; }
.brand-title-line { display: flex; align-items: center; gap: 10px; }
.brand-text h1 { font-size: 1.48rem; letter-spacing: .09em; }
.brand-text p { margin-top: 4px; color: #c4ad82; font-size: .68rem; letter-spacing: .15em; }
.demo-badge { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 0; color: #e5c87f; font-size: .56rem; font-weight: 800; letter-spacing: .12em; line-height: 1; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.language-toggle { display: inline-flex; align-items: center; padding: 3px; border: 1px solid rgba(229,213,183,.6); border-radius: 3px; background: transparent; color: #eadfc8; cursor: pointer; font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .07em; }
.language-option { padding: 5px 7px; opacity: .68; }
.language-option.is-active { background: #e7dbc3; color: var(--navy); opacity: 1; }
.language-toggle:hover { border-color: #fff2d6; color: #fff2d6; }

.main:has(.landing) {
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - 89px);
  background: #f4f0e7;
}

/* The illustration is viewport-based, not content-height-based. Opening the
   timer menu therefore cannot stretch or rescale it. */
.main:has(.landing)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #f4f0e7;
  background-image: linear-gradient(rgba(244,240,231,.36), rgba(244,240,231,.58)), var(--landing-base-image, url('assets/backgrounds/landing-court-record.webp'));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.main:has(.landing)::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-color: #f4f0e7;
  background-image: linear-gradient(rgba(244,240,231,.36), rgba(244,240,231,.58)), var(--landing-next-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.main.landing-is-switching::after { opacity: 1; animation: landing-wave-redraw .42s cubic-bezier(.2,.72,.22,1) both; }
@keyframes landing-wave-redraw {
  0% { clip-path: polygon(-18% 0, -18% 0, -18% 100%, -18% 100%); }
  42% { clip-path: polygon(0 0, 57% 0, 43% 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

.main:has(.landing) .app-container { position: relative; z-index: 1; }

.case-preparing { min-height: 430px; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 48px 28px; text-align: center; border: 1px solid var(--border); background: rgba(255,255,255,.82); box-shadow: 0 12px 36px rgba(32,39,46,.1); }
.case-preparing h2 { margin: 0; color: var(--ink); font-family: Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.case-preparing p { max-width: 390px; margin: 0; color: var(--muted); line-height: 1.6; }
.preparing-kicker { color: var(--burgundy); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.archive-loader { width: 44px; height: 44px; border: 3px solid #d8d0c2; border-top-color: var(--burgundy); border-radius: 50%; animation: archive-spin .85s linear infinite; }
@keyframes archive-spin { to { transform: rotate(360deg); } }
.main:has(.landing) + .site-footer { padding: 12px 20px 16px; border-top: 0; background: #f4f0e7; }
.app-container { max-width: 1240px; padding: 34px 24px 48px; }
.landing { position: relative; max-width: 690px; margin: 56px auto; padding: 54px 56px 48px; border: 1px solid #9f8764; border-radius: 1px; background: #fffefb; box-shadow: 0 15px 34px rgba(16,43,67,.14); text-align: left; }
.landing::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(159,135,100,.32); pointer-events: none; }
.landing > * { position: relative; z-index: 1; }
.mode-picker { display: flex; width: fit-content; margin: 0 0 26px; border: 1px solid var(--border); background: #f7f2e9; }
.mode-option { min-width: 112px; padding: 10px 16px; border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--navy); cursor: pointer; font: 800 .68rem/1 Inter, "Segoe UI", Arial, sans-serif; letter-spacing: .12em; }
.mode-option:last-child { border-right: 0; }
.mode-option.is-selected { background: var(--burgundy); color: #fff; }
.mode-option:focus-visible { outline: 3px solid var(--bronze); outline-offset: 2px; }
.landing h2 { margin: 0; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 400; line-height: 1.05; letter-spacing: -.035em; }
.case-source-link { color: var(--burgundy); font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; }
.case-source-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.landing > p { max-width: 430px; margin: 20px 0 30px; color: var(--muted); font-family: Georgia, serif; font-size: 1.13rem; line-height: 1.55; }
.landing-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 32px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.landing-fact, .timer-settings { min-width: 0; padding: 12px 10px; color: var(--navy); text-align: center; }
.landing-fact { display: grid; grid-auto-rows: min-content; align-content: center; gap: 2px; }
.landing-fact strong, .timer-settings summary strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; font-weight: 700; }
.landing-fact span, .timer-settings summary span { display: block; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .09em; }
.timer-settings { position: relative; border-left: 1px solid var(--border); }
.timer-settings[open] { background: #f7f2e9; }
.timer-settings summary { display: grid; gap: 2px; list-style: none; cursor: pointer; }
.timer-settings summary::-webkit-details-marker { display: none; }
.timer-settings summary span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.timer-chevron { width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid var(--burgundy); border-bottom: 1.5px solid var(--burgundy); transform: rotate(45deg); }
.timer-settings[open] .timer-chevron { margin-top: 2px; transform: rotate(225deg); }
.timer-options { position: absolute; z-index: 4; top: calc(100% + 8px); right: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; padding: 7px; border: 1px solid var(--frame-ink); background: #fffdf8; box-shadow: inset 0 0 0 3px rgba(159,128,80,.05), 0 12px 24px rgba(16,43,67,.14); }
.timer-option { padding: 8px 6px; border: 0; background: transparent; color: var(--navy); cursor: pointer; font: 800 .63rem/1.1 Inter, "Segoe UI", Arial, sans-serif; letter-spacing: .055em; text-transform: uppercase; }
.timer-option:hover, .timer-option.is-selected { background: #eee6d8; color: var(--burgundy); }
.timer-option:last-child { grid-column: 1 / -1; border-top: 1px solid var(--border); }
.landing .btn { min-width: 186px; }

.btn { border-radius: 2px; background: var(--burgundy); box-shadow: none; font-size: .74rem; letter-spacing: .095em; }
.btn:hover { background: #611c28; transform: translateY(-1px); box-shadow: 0 5px 13px rgba(123,39,53,.2); }
.btn-secondary { border-color: var(--navy); background: transparent; color: var(--navy); }
.btn-secondary:hover { background: #e7e4dc; color: var(--navy); }
.case-paper, .answer-panel { border: 1px solid var(--frame-ink); border-radius: 1px; background: repeating-linear-gradient(0deg, rgba(159,128,80,.022) 0 1px, transparent 1px 5px), rgba(252,251,247,.98); box-shadow: inset 0 0 0 3px rgba(252,251,247,.96), inset 0 0 0 4px var(--frame-rule), 0 10px 30px rgba(16,43,67,.055); }
.case-paper { padding: 26px 30px 30px; }
.case-layout { gap: 28px; }
.case-hero { grid-template-columns: minmax(290px, 42%) minmax(0, 1fr); align-items: center; gap: 28px; }
.case-category-art { width: 100%; aspect-ratio: 1570 / 1001; min-height: 0; border: 1px solid var(--frame-ink); border-radius: 1px; background: #e9e4d9; box-shadow: inset 0 0 0 3px rgba(159,128,80,.08); }
.case-category-art img { width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; }
.case-hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; column-gap: 24px; padding: 8px 0 12px; overflow: visible; min-width: 0; }
.case-hero-copy.has-jurisdiction { grid-template-columns: minmax(0, 1fr) minmax(118px, 138px); }
.case-hero-copy > .hero-kicker,
.case-hero-copy > h2,
.case-hero-copy > .hero-details { grid-column: 1; }
.case-hero-copy h2 { min-width: 0; margin-right: 0; color: var(--navy); font-size: clamp(1.75rem, 3vw, 2.6rem); letter-spacing: -.025em; line-height: 1.08; overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.case-meta { margin-top: 18px; }
.state-jurisdiction { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end; display: grid; grid-template-rows: auto 1fr; justify-items: center; width: 100%; min-height: 138px; gap: 8px; padding: 10px 9px 9px; border: 1px solid var(--frame-ink); border-radius: 1px; background-color: #f1e3cb; background-image: radial-gradient(rgba(91,52,39,.11) .45px, transparent .7px); background-size: 4px 4px; box-shadow: inset 0 0 0 3px rgba(253,247,235,.86), inset 0 0 0 4px var(--frame-rule); }
.state-jurisdiction-name { max-width: 100%; padding: 0 5px 6px; border-bottom: 1px solid var(--frame-rule); color: #5b241f; font: 700 .72rem/1.05 Georgia, "Times New Roman", serif; letter-spacing: .12em; overflow-wrap: anywhere; text-align: center; text-transform: uppercase; }
.state-outline { position: static; align-self: center; width: 100%; height: 98px; padding: 3px 6px; overflow: hidden; opacity: 1; transform: none; }
.state-outline svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.state-outline-underprint { fill: none; stroke: rgba(159,108,67,.33); stroke-width: 3.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.state-outline-ink { fill: rgba(123,39,53,.05); stroke: #5b241f; stroke-width: 1.55; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.editorial-topbar { border-bottom-color: var(--burgundy); }
.editorial-topbar .score, .section-title, .factor-card h4 { color: var(--burgundy); }
.story-grid { gap: 30px; margin-top: 28px; padding-top: 26px; border-color: var(--border); }
.case-accusation {
  margin-bottom: 16px;
  color: var(--navy);
  font-size: clamp(1.28rem, 2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.35;
}
.story-section .summary-text { font-family: Georgia, serif; font-size: 1.1rem; line-height: 1.68; }
.defendant-section { border-color: var(--border); }
.defendant-name { font-size: 1.28rem; }
.fact-section { border-color: var(--border); }
.clue-intro { color: var(--muted); font-size: .8rem; }
.factor-card { border-color: var(--frame-ink); border-radius: 1px; background: #fffefa; box-shadow: inset 0 0 0 2px rgba(159,128,80,.045); transition: border-color .15s ease, background .15s ease; }
.factor-card:hover { border-color: var(--bronze); background: #fffdf7; }
.factor-art { border-color: var(--frame-ink); border-radius: 1px; }
.unlock-clue { border-radius: 1px; }

.answer-panel { top: 20px; overflow: hidden; padding: 22px; }
.answer-panel h3 { color: var(--navy); font-size: 1.3rem; }
.case-timer { border-color: var(--border); border-radius: 2px; background: #f7f2e9; }
.answer-panel .selected-answer { color: var(--burgundy); font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.08; overflow-wrap: anywhere; }
.special-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.outcome-choice { display: grid; grid-template-rows: 38px auto; place-items: center; gap: 7px; min-width: 0; min-height: 92px; padding: 11px 7px; border: 1px solid var(--burgundy); border-radius: 2px; background: transparent; color: var(--burgundy); cursor: pointer; font: 700 .67rem/1.15 Inter, "Segoe UI", Arial, sans-serif; letter-spacing: .055em; text-align: center; text-transform: uppercase; }
.outcome-choice span { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.outcome-choice:hover,
.outcome-choice.active { background: var(--burgundy); color: #fff; }
.outcome-choice:focus-visible { outline: 3px solid var(--bronze); outline-offset: 2px; }
.outcome-choice:disabled { cursor: default; opacity: .64; }
.choice-icon { display: block; width: 38px; height: 38px; object-fit: contain; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.skull-icon { fill: currentColor; stroke: none; }
.answer-submit { display: block; width: 100%; margin-top: 12px; padding-block: 13px; }
.verdict-note { border-left-color: var(--burgundy); background: #f7f2e9; }
.reveal { scroll-margin-top: 18px; border-top-color: var(--burgundy); }
.reveal:focus { outline: none; }
.reveal-header { background: var(--burgundy); }
.site-footer { border-top: 1px solid var(--border); background: transparent; color: var(--muted); }

@media (max-width: 760px) {
  .main:has(.landing) { min-height: calc(100dvh - 75px); }
  .main:has(.landing)::before {
    inset: 0;
    background-position: 48% center;
    background-size: auto 100%;
  }
  .main:has(.landing)::after { inset: 0; background-position: 48% center; background-size: auto 100%; }
  .header-inner { min-height: 72px; padding: 9px 16px; }
  .emblem { width: 52px; height: 52px; }
  .brand-text h1 { font-size: 1.18rem; }
  .brand-text p { font-size: .56rem; letter-spacing: .12em; }
  .brand-title-line { gap: 7px; }
  .demo-badge { min-height: 18px; padding-inline: 0; font-size: .5rem; }
  .app-container { padding: 20px 16px 36px; }
  .landing { margin: 22px 0; padding: 36px 26px 32px; }
  .case-paper { padding: 20px; }
  .case-hero { grid-template-columns: 1fr; }
  .case-category-art, .case-category-art img { min-height: 0; }
  .case-hero-copy { grid-template-columns: minmax(0, 1fr); column-gap: 12px; padding: 4px 0 0; }
  .case-hero-copy.has-jurisdiction { grid-template-columns: minmax(0, 1fr); }
  .case-hero-copy.has-jurisdiction > .hero-kicker,
  .case-hero-copy.has-jurisdiction > h2,
  .case-hero-copy.has-jurisdiction > .hero-details { grid-column: 1; }
  .state-jurisdiction { grid-column: 1; grid-row: auto; justify-self: end; width: min(180px, 100%); min-height: 112px; gap: 5px; padding: 7px 6px; }
  .state-jurisdiction-name { padding-bottom: 4px; font-size: .59rem; }
  .state-outline { height: 72px; padding-inline: 3px; }
}

@media (max-width: 420px) {
  .answer-panel { padding: 18px 16px; }
  .outcome-choice { min-height: 84px; padding-inline: 5px; font-size: .62rem; letter-spacing: .035em; }
}