/* Worldstride's game-facing theme. Shared by both language versions. */
:root {
  color-scheme: dark;
  --paper: #0b1724;
  --ink: #f1f6fa;
  --muted: #a9bacb;
  --line: #294154;
  --lime: #38d9ed;
  --surface: #14283b;
  --raised: #1b3449;
  --gold: #f4c76b;
  --serif: 'Helvetica Neue', Arial, sans-serif;
}
body { background: var(--paper); }
.wrap { width: min(1360px, calc(100% - 80px)); }
h1, h2, h3 { font-weight: 650; }
em, html[lang=zh-CN] em { font-family: inherit; font-style: normal; font-weight: inherit; }
button, a, summary { transition: background .18s, border-color .18s, color .18s; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.skip-link { color: var(--paper); }
.header { height: 88px; gap: 24px; }
.wordmark svg, .wordmark > span:last-child { color: var(--lime); }
.header nav { color: var(--muted); }
.header nav a:hover, .text-link:hover { color: var(--lime); }
.header-cta { border-color: var(--line); background: var(--surface); border-radius: 8px; }
.header-cta:hover { background: var(--raised); color: var(--lime); border-color: var(--lime); }
.language-switch { border-radius: 8px; background: var(--surface); }
.language-switch button { border-radius: 5px; }
.language-switch button[aria-pressed=true] { background: var(--lime); color: var(--paper); }
.language-switch button:hover { background: var(--raised); color: var(--ink); }
.primary-button, .closing .primary-button {
  background: var(--lime); color: var(--paper); border-radius: 8px; font-weight: 700;
  min-height: 48px; white-space: normal;
}
.primary-button:hover, .closing .primary-button:hover { background: #85ecf6; }
.status-dot, .film-label i { background: var(--lime); }
.eyebrow, .section-index { color: var(--lime); }

/* Put the encounter alongside the introduction, with controls after the media in DOM order. */
.hero {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
  grid-template-areas: 'eyebrow eyebrow' 'heading film' 'intro film' '. caption';
  gap: 0 48px; padding-block: 32px 48px; align-items: start;
}
.hero > .eyebrow { grid-area: eyebrow; margin-bottom: 25px; }
.hero-top { grid-area: heading; display: block; margin: 0 0 24px; }
.hero h1, html[lang=zh-CN] .hero h1 {
  font-size: clamp(38px, 3.8vw, 56px); line-height: 1.09; letter-spacing: -.045em;
}
.hero h1 em, html[lang=zh-CN] .hero h1 em { font-size: .9em; letter-spacing: -.04em; color: var(--lime); }
.hero-aside { grid-area: intro; display: block; padding: 0; }
.hero-aside > p, html[lang=zh-CN] .hero-aside > p { max-width: 460px; font-size: 15px; line-height: 1.75; margin: 0 0 24px; }
.hero-aside > .text-link { display: flex; width: fit-content; margin-top: 18px; }
.hero-film, html[lang=zh-CN] .hero-film {
  grid-area: film; width: 100%; height: 100%; min-height: 430px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  box-shadow: 0 18px 50px #0004;
}
.film-shade { background: linear-gradient(180deg, #07121e18 25%, #07121e60 55%, #07121ef5 100%); }
.film-top, .film-bottom { left: 24px; right: 24px; }
.film-label { background: #0b1724dc; border: 1px solid #ffffff25; border-radius: 5px; font-size: 8px; }
.film-top { top: 20px; gap: 10px; flex-wrap: wrap; }
.film-bottom { bottom: 44px; flex-direction: column; align-items: flex-start; gap: 20px; }
.film-bottom > p, html[lang=zh-CN] .film-bottom > p { font-size: 30px; font-weight: 650; letter-spacing: -.7px; }
.film-watch { padding: 0; }
.film-watch > span:first-child { background: var(--lime); border-color: var(--lime); color: var(--paper); }
.film-watch:hover > span:first-child { background: #85ecf6; color: var(--paper); }
.motion-toggle { background: #0b1724cf; border-radius: 5px; padding: 6px 9px; }
.film-caption { grid-area: caption; flex-wrap: wrap; gap: 3px 12px; font-size: 10px; }

/* Consistent dark panels and compact section headings keep the footage dominant. */
.section-heading { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 28px; }
.section-heading h2, html[lang=zh-CN] .section-heading h2 { font-size: clamp(30px, 3vw, 43px); line-height: 1.15; letter-spacing: -.035em; }
.section-heading h2 em { color: var(--muted); }
.section-index { margin-bottom: 12px; }
.approach { background: #102132; color: var(--ink); border-block: 1px solid var(--line); padding: 48px 0 32px; }
.approach .section-index { color: var(--lime); }
.approach .section-heading > p, .technical-note summary, .technical-note p,
.standing-plan p, .live-decision > p, .footage-note, .brain-key, .brain-key > span,
.handoff-timeline button, .handoff-timeline button span, #decision-result { color: var(--muted); }
.handoff { gap: 24px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.handoff-footage video { border-radius: 10px; border: 1px solid var(--line); background: var(--paper); }
.decision-reader { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.standing-plan { background: var(--raised); border-bottom-color: var(--line); }
.standing-plan h3, .live-decision h3 { font-size: 25px; }
.standing-plan .micro, .live-decision .micro, .plan-held, .decision-choice span { color: var(--lime); }
.live-decision { background: var(--surface); }
.decision-choice { background: var(--paper); border-left-color: var(--lime); border-radius: 0 6px 6px 0; }
.handoff-controls button { background: var(--lime); color: var(--paper); border-radius: 6px; font-weight: 650; }
.handoff-controls > span { color: var(--muted); }
.handoff-timeline { border-color: var(--line); border-radius: 8px; overflow: hidden; margin-top: 20px; }
.handoff-timeline button + button { border-left-color: var(--line); }
.handoff-timeline button[aria-pressed=true] { background: #38d9ed15; border-bottom-color: var(--lime); color: var(--lime); }
.brain-key b { color: var(--ink); }
.technical-note { border-top-color: var(--line); }
.rsi-study { padding-block: 48px; }
.combat-comparison { gap: 24px; }
.combat-comparison article { border-radius: 10px; overflow: hidden; background: var(--surface); }
.combat-comparison video { background: var(--paper); }
.comparison-title { background: #35262e; color: #ffb3aa; }
.comparison-title.improved { background: #302d25; color: var(--gold); }
.comparison-state { border-radius: 4px; }
.comparison-copy h3 { font-size: 25px; font-weight: 650; }
.pill { color: var(--lime); border-color: #38d9ed60; background: #38d9ed0c; }
.case-tabs { border-radius: 8px; background: var(--surface); overflow: hidden; margin-bottom: 24px; }
.case-tabs button[aria-selected=true] { background: #38d9ed15; border-bottom-color: var(--lime); color: var(--lime); }
.case-tabs button:hover { background: var(--raised); }
.loop-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; gap: 32px; }
.loop-record { background: var(--raised); }
.loop-record > strong { font-size: 28px; }
.record-row { border-color: var(--line); }
.case-copy { padding: 28px 28px 28px 0; }
.case-copy h3 { font-size: 30px; }
.case-status, .case-next:hover { color: var(--lime); }
.case-status.blocked { color: var(--gold); }
.case-next { border-color: var(--line); }
.evidence-actions button { border-radius: 6px; }
.evidence-actions button:hover { background: var(--raised); }
.evidence-facts strong { color: var(--gold); }
.highlights { padding-bottom: 48px; }
.highlight-grid { gap: 24px; }
.highlight-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; padding-bottom: 24px; }
.highlight-card:hover { border-color: var(--lime); background: var(--raised); }
.highlight-card > .micro, .highlight-card > strong, .highlight-description { margin-inline: 22px; }
.highlight-description { max-width: none; }
.highlight-card strong { font-weight: 650; font-size: 23px; }
.clip-play { background: #0b1724cc; color: var(--lime); }
.vote-section { background: #102132; border-color: var(--line); padding-block: 48px; margin-bottom: 48px; }
.vote-layout { grid-template-columns: .85fr 1.3fr; gap: 48px; }
.vote-intro h2 { font-size: clamp(34px, 3.5vw, 48px); letter-spacing: -.035em; }
.vote-intro > p { color: var(--muted); }
.vote-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.vote-option { border-radius: 7px; }
.vote-option:has(:checked) { background: #38d9ed14; border-color: var(--lime); }
.vote-option:hover { background: var(--raised); }
.vote-option input { accent-color: var(--lime); }
#vote-message { color: var(--lime); }
#vote-message[data-state=error] { color: #ffb3aa; }
.horizon, .questions { gap: 48px; }
.horizon h2, .closing h2 { font-weight: 650; }
.closing { background: var(--surface); color: var(--ink); border-block: 1px solid var(--line); }
.closing .micro { color: var(--lime); }
.stream-status { color: var(--lime); }
.stream-status::before { background: var(--lime); }
.stream-section[data-status=live] .stream-status { color: var(--paper); }
.stream-section[data-status=live] .stream-status::before { background: var(--paper); }
dialog { border-color: var(--line); border-radius: 12px; background: var(--surface); }
dialog::backdrop { background: #050c16e8; }
#demo-video { background: #050c16; }
.video-chapters button { background: var(--raised); border-radius: 5px; }
.video-chapters button[aria-pressed=true] { background: var(--lime); color: var(--paper); }

@media (max-width: 1100px) {
  .wrap { width: calc(100% - 48px); }
  .hero { gap: 0 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .hero h1, html[lang=zh-CN] .hero h1 { font-size: 40px; }
  .hero-film, html[lang=zh-CN] .hero-film { min-height: 450px; }
  .film-top .film-label:last-child { display: none; }
  .handoff { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .header { height: 76px; }
  .hero { grid-template-columns: 1fr; grid-template-areas: 'eyebrow' 'heading' 'film' 'intro' 'caption'; padding-block: 26px 36px; }
  .hero > .eyebrow { margin-bottom: 18px; }
  .hero h1, html[lang=zh-CN] .hero h1 { font-size: clamp(36px, 6vw, 48px); }
  .hero h1 br:first-child { display: none; }
  .hero-film, html[lang=zh-CN] .hero-film { height: auto; min-height: 0; aspect-ratio: 16/10; }
  .hero-aside { margin-top: 24px; }
  .hero-aside > p, html[lang=zh-CN] .hero-aside > p { max-width: none; }
  .film-caption { padding-top: 20px; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .handoff { grid-template-columns: 1fr; }
  .standing-plan { border-right-color: var(--line); }
  .case-copy { padding: 0 24px 24px; }
  .highlight-grid { gap: 14px; }
  .highlight-card > .micro, .highlight-card > strong, .highlight-description { margin-inline: 14px; }
  .highlight-card strong { font-size: 20px; }
  .vote-layout { grid-template-columns: 1fr; gap: 28px; }
  .vote-intro > p { max-width: 600px; }
}
@media (max-width: 520px) {
  .wrap { width: calc(100% - 36px); }
  .hero h1, html[lang=zh-CN] .hero h1 { font-size: 37px; }
  .hero h1 br:first-child { display: initial; }
  .hero-film, html[lang=zh-CN] .hero-film { aspect-ratio: 1.1; }
  .film-top, .film-bottom { left: 16px; right: 16px; }
  .film-bottom { gap: 16px; bottom: 43px; }
  .film-bottom > p, html[lang=zh-CN] .film-bottom > p { font-size: 26px; }
  .hero-aside > p, html[lang=zh-CN] .hero-aside > p { font-size: 14px; }
  .section-heading h2, html[lang=zh-CN] .section-heading h2 { font-size: 32px; }
  .hero, .rsi-study { padding-bottom: 32px; }
  .approach, .rsi-study, .vote-section { padding-top: 32px; }
  .highlight-grid { grid-template-columns: 1fr; gap: 20px; }
  .highlight-card strong { font-size: 24px; }
  .highlight-card > .micro, .highlight-card > strong, .highlight-description { margin-inline: 20px; }
  .vote-intro h2, html[lang=zh-CN] .vote-intro h2 { font-size: 36px; }
  .horizon, .questions { gap: 24px; }
}