/* Claim Chain: design tokens and components (GDD, Design system; Accessibility; Devices).
   Plain CSS with custom properties, light and dark themes, no build step. Status and
   role are carried by shape and label, never by colour alone. */

:root {
  color-scheme: light dark;
  --ink: #1e1b16;
  --ink-soft: #5a554c;
  --paper: #fbf7f0;
  --paper-2: #f1ebe0;
  --line: #d9d1c2;
  --accent: #6b4b2a;
  --accent-ink: #ffffff;
  --focus: #1f5fbf;
  --warn: #8a5a00;
  --danger: #8a2d2d;
  --draft: #3b2f6b;
  --draft-ink: #ffffff;
  --radius: 10px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --type-small: 0.875rem;
  --type-base: 1rem;
  --type-lead: 1.125rem;
  --type-h2: 1.25rem;
  --type-h1: 1.6rem;
  --type-headline: 1.9rem;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  --motion: 160ms;
  /* The charter card (D363): every text meets WCAG 2.2 AA on its background, the lowest 6.7:1. */
  --charter-bg: #fdf3d6;
  --charter-bar: #c65d3b;
  --charter-head: #e0a526;
  --charter-head-ink: #1e1b16;
  --charter-answer: #8a3a14;
  /* The front page's notice (D399): bold blue-gray text from the title image, on the page itself since D412, 6.6:1; the gold of its shimmer, 4.7:1 at its brightest (D414). */
  --notice-ink: #3e5c76;
  --notice-shine: #8a6a1f;
}

/* The dark display: the device's setting unless the player chose light, or the player's choice of dark (D364). The two blocks hold the same values; the stylesheet test checks they agree. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f1ece2;
    --ink-soft: #b9b1a3;
    --paper: #17150f;
    --paper-2: #221f17;
    --line: #3b362b;
    --accent: #d8b38a;
    --accent-ink: #1a1308;
    --focus: #8ab4ff;
    --warn: #ffcf70;
    --danger: #ff9a9a;
    --draft: #c9bdfb;
    --draft-ink: #1a1308;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    --charter-bg: #2a2313;
    --charter-bar: #d9734f;
    --charter-head: #e0a526;
    --charter-head-ink: #1a1308;
    --charter-answer: #f2a27d;
    --notice-ink: #a9c3da;
    --notice-shine: #f0cf7a;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1ece2;
  --ink-soft: #b9b1a3;
  --paper: #17150f;
  --paper-2: #221f17;
  --line: #3b362b;
  --accent: #d8b38a;
  --accent-ink: #1a1308;
  --focus: #8ab4ff;
  --warn: #ffcf70;
  --danger: #ff9a9a;
  --draft: #c9bdfb;
  --draft-ink: #1a1308;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  --charter-bg: #2a2313;
  --charter-bar: #d9734f;
  --charter-head: #e0a526;
  --charter-head-ink: #1a1308;
  --charter-answer: #f2a27d;
  --notice-ink: #a9c3da;
  --notice-shine: #f0cf7a;
}

:root[data-theme="light"] { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms; }
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--type-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link { position: absolute; left: -999px; top: 0; padding: var(--space-2) var(--space-3); background: var(--accent); color: var(--accent-ink); z-index: 100; }
.skip-link:focus { left: var(--space-2); }

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

.app { min-height: 100vh; display: flex; flex-direction: column; }

/* The prototype's label on every screen (the prototype amendment, item 2). */
.draft-banner {
  position: sticky; top: 0; z-index: 50;
  padding: var(--space-2) var(--space-3);
  background: var(--draft); color: var(--draft-ink);
  font-weight: 600; text-align: center; letter-spacing: 0.01em;
}

.frame-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.frame-head h1 { margin: 0; font-size: var(--type-h1); line-height: 1.2; }
.screen-label { margin: var(--space-1) 0 0; }

/* The role indicator at the top right of every role screen, readable without colour. */
.role-indicator {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-2);
  align-items: center; padding: var(--space-2) var(--space-3);
  border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper);
  min-width: 12rem;
}
.role-icon { grid-row: 1 / span 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
.role-text { font-weight: 700; }
.role-title { font-size: var(--type-small); color: var(--ink-soft); }

.frame-controls { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.menu { padding: var(--space-2) var(--space-4); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
.save-mark { margin: 0; padding: var(--space-1) var(--space-4); font-size: var(--type-small); background: var(--paper-2); border-bottom: 1px solid var(--line); }

.frame-main { flex: 1; padding: var(--space-4); max-width: 80rem; width: 100%; margin: 0 auto; }

.panel { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--accent); background: var(--paper-2); border-radius: 0 var(--radius) var(--radius) 0; }
.panel-lines { margin: 0; padding-left: 1.2rem; }
.panel-lines li { margin: var(--space-1) 0; }

.screen { display: block; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.three-column { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); align-items: start; }
.builder-screen { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(20rem, 1.4fr); gap: var(--space-4); align-items: start; }

.section { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.section > h2 { margin: 0 0 var(--space-2); font-size: var(--type-h2); }
.section h3 { font-size: var(--type-base); margin: var(--space-3) 0 var(--space-1); }
.section.result { background: var(--paper-2); }
.section.preview { background: var(--paper-2); }
.section.correction { border-style: dashed; }
.section.prereq { border-style: dotted; }

.lead { font-size: var(--type-lead); }
/* The mission line, centred in bold italic (D385), under the briefing's scene (D386), with a 2.5rem space above and below it (D387). */
.mission { font-weight: 700; font-style: italic; text-align: center; margin: var(--space-5) 0; }
/* The briefing text, one sentence per paragraph with a space between them (D382). */
.briefing-text .lead { margin: 0 0 var(--space-3); }
/* The two roles as a bulleted list under the sentence that introduces them, pulled up to it (D384). */
.briefing-text p.lead:has(+ .briefing-roles) { margin-bottom: var(--space-1); }
.briefing-roles { padding-left: 1.5rem; list-style: disc; }

/* The briefing's chain separator and the charter card (D363). */
.chain-separator { display: flex; justify-content: center; margin: var(--space-4) 0; }
.chain-separator svg { max-width: 100%; height: auto; }
.charter-card { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--charter-bg); color: var(--ink); border: 1px solid var(--line); border-left: 6px solid var(--charter-bar); border-radius: 0 var(--radius) var(--radius) 0; }
.charter-card .card-label { margin: 0; font-size: var(--type-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--charter-answer); }
.charter-card > h2 { margin: var(--space-1) 0 var(--space-2); font-size: var(--type-h2); }
.charter-card .muted { color: var(--ink-soft); }
.charter-card table.charter th { background: var(--charter-head); color: var(--charter-head-ink); }
.charter-card table.charter td.answers { color: var(--charter-answer); font-weight: 600; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--type-small); }
.note { font-style: italic; color: var(--ink-soft); }
.wording { font-size: var(--type-lead); font-weight: 600; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--line); margin: var(--space-2) 0; }
.ceo-words { font-style: italic; }
.ceo-ambition { font-weight: 700; color: var(--ink); }
/* The reminder of the CEO's ambition across the top of the dossier screen, above both cards (D383). */
.ceo-reminder { grid-column: 1 / -1; margin: 0; font-size: var(--type-lead); }
/* Version B's episode start: Begin on the right, after at least the space between sections, the scene under it (D366). */
/* START in Version B: the scene after the space between sections, centred, 50% larger than D388's 33.6rem, so at most 50.4rem and never wider than the column, then Begin under it on the left (D388, D389). display: block, since img.art's inline-block outranks .scene and auto margins centre only a block. */
.scene.start-scene { display: block; width: 100%; max-width: 50.4rem; margin: var(--space-4) auto 0; }
.start-begin { display: flex; justify-content: flex-start; margin: var(--space-3) 0; }
/* START in Version B: the CEO's ambition above the scene, centred, bold and a step larger than the lead (D390), with a 2.5rem space above and below it (D400). */
.start-ambition { margin: var(--space-5) 0; text-align: center; font-size: var(--type-h2); }
.start-ambition p { margin: 0 0 var(--space-2); }

.fields { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); }
.fields .field { display: contents; }
.fields dt { font-weight: 600; color: var(--ink-soft); }
.fields dd { margin: 0; }
.fields.compact { font-size: var(--type-small); }

.badge { display: inline-block; padding: 0 var(--space-2); border: 1px solid var(--ink-soft); border-radius: 999px; font-size: var(--type-small); line-height: 1.5; vertical-align: middle; }
.badge.model { border-style: dashed; }

.button {
  font: inherit; min-height: 2.5rem; min-width: 2.5rem; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius); border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  cursor: pointer; transition: transform var(--motion), background var(--motion);
}
.button:hover { background: var(--paper-2); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.button.warning { border-color: var(--warn); color: var(--warn); border-style: double; border-width: 4px; }
.button.danger { border-color: var(--danger); color: var(--danger); }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0; }

ul.options, ul.dossier-list, ul.cast, ul.components, ul.ambitions, ul.choices, ul.cards, ul.findings, ul.deliveries, ul.feedback-lines, ul.remedies, ul.differences, ul.clarify-list { list-style: none; margin: 0; padding: 0; }
ul.options li, ul.dossier-list li, ul.components li { padding: var(--space-1) 0; }
ul.options label { display: inline-flex; gap: var(--space-2); align-items: baseline; min-height: 1.75rem; }
input[type="radio"], input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--accent); flex: none; }
select { font: inherit; min-height: 2rem; margin-left: var(--space-2); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); }
legend { font-weight: 600; padding: 0 var(--space-1); }
.finding legend label { display: inline-flex; gap: var(--space-2); align-items: center; }
ul.choices li { margin: var(--space-2) 0; }

ol.parts { padding-left: 1.5rem; }
ol.parts li { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; padding: var(--space-1) 0; }
.part-controls { display: inline-flex; gap: var(--space-1); }
.parts-offered { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* The channel mockup: the headline in large type, each further part in small type (D296, item 2). */
.mockup { padding: var(--space-3) var(--space-4); border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper); }
.mockup-CH-pack { max-width: 18rem; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: center; border-radius: 1.5rem; }
.mockup-CH-web { max-width: 40rem; }
.mockup-CH-social { max-width: 24rem; border-radius: 1rem; }
.mockup .headline { font-size: var(--type-headline); line-height: 1.15; font-weight: 700; margin: 0 0 var(--space-2); }
.mockup .small-type { font-size: var(--type-small); margin: 0; }
.mockup .left-out { font-size: var(--type-small); margin: var(--space-1) 0 0; color: var(--ink-soft); }
/* Version B's chooser (D349): the four options as printed, side by side where there is room, none marked right or wrong. */
.claim-options { border: 0; padding: 0; margin: 0; min-width: 0; }
.claim-option-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.claim-option { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border: 2px solid transparent; border-radius: var(--radius); }
.claim-option.selected { border-color: var(--accent); }
.claim-option .mockup-CH-pack { max-width: 100%; }
.claim-option .headline { font-size: var(--type-lead); }
.claim-option .choose { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.full-game { margin: var(--space-3) 0; }
.units { font-weight: 600; }

.in-view { padding: var(--space-2) var(--space-3); border: 1px dashed var(--line); border-radius: var(--radius); margin-bottom: var(--space-3); }
.received-item { margin: var(--space-2) 0; }
.request-card { padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.dossier-group h3 { margin-top: var(--space-2); }
.dossier-list li { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* Outcomes by shape and label (GDD, Accessibility, item 1). */
.outcome { padding: var(--space-3); border: 2px solid var(--ink); border-radius: var(--radius); margin: var(--space-3) 0; }
.outcome-fails { border-style: solid; }
.outcome-meets { border-style: double; border-width: 5px; }
.outcome-qualified { border-style: dashed; }
.outcome-label { margin: 0; font-weight: 700; font-size: var(--type-lead); }
.outcome-mark { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 2px solid currentColor; border-radius: 4px; margin-right: var(--space-1); }
.outcome-meets .outcome-mark { border-radius: 50%; }
.outcome-line { margin: var(--space-2) 0 0; }
ul.rows { margin: var(--space-2) 0 0; padding-left: 1.2rem; }
.row-outcome { font-weight: 600; }
.row-line { color: var(--ink-soft); }

.role-card { padding: var(--space-5) var(--space-4); border: 3px solid var(--ink); border-radius: var(--radius); background: var(--paper-2); text-align: center; max-width: 40rem; margin: var(--space-4) auto; }
.role-card h2 { margin-top: 0; }

.notice { padding: var(--space-2) var(--space-3); border: 2px solid var(--warn); border-radius: var(--radius); background: var(--paper-2); }
.unavailable { padding: var(--space-2) var(--space-3); border: 2px dashed var(--ink-soft); border-radius: var(--radius); font-style: italic; }
.paused { padding: var(--space-4); border: 2px dashed var(--ink); border-radius: var(--radius); text-align: center; }

.dialog-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: grid; place-items: center; padding: var(--space-3); z-index: 60; }
.dialog { background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 52rem; width: 100%; max-height: 90vh; overflow: auto; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); }
.dialog-head h2 { margin: 0; font-size: var(--type-h2); }
.dialog-body { padding: var(--space-3) var(--space-4); }

/* The readers: plain and highly legible (GDD, Visual direction, item 1). */
.reader h3 { margin-top: 0; }
.document-body p { margin: var(--space-2) 0; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: var(--space-2) 0; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--line); vertical-align: top; }
caption { text-align: left; font-weight: 600; padding: var(--space-1) 0; }
.reading { margin-top: var(--space-3); }

.law { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--ink); background: var(--paper-2); font-family: Georgia, "Times New Roman", serif; }
details.rule { margin: var(--space-2) 0; }
details.rule summary { cursor: pointer; }
.card { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); margin: var(--space-2) 0; }
.card h4 { margin: 0 0 var(--space-2); }
.explanation .row-line { margin: var(--space-1) 0; }
.accepted-statement { display: inline-block; margin-right: var(--space-2); }

@media (max-width: 56rem) {
  .frame-head { grid-template-columns: 1fr; }
  .role-indicator { position: sticky; top: 2.4rem; z-index: 40; min-width: 0; }
  .frame-main { padding: var(--space-3); }
  .two-column, .three-column, .builder-screen { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .fields dt { margin-top: var(--space-1); }
  .mockup-CH-pack { aspect-ratio: auto; }
}

/* The art of the prototype (D343): scenes, portraits, logos, icons and marks; the portraits keep the role titles as captions. */
img.art { max-width: 100%; height: auto; display: inline-block; }
.scene { width: 100%; max-width: 48rem; aspect-ratio: 16 / 9; border-radius: var(--radius); margin: 0 0 var(--space-3); display: block; }
/* The scrutiny scene on the briefing, 20% larger than D375's size, centred under the separator (D376). display: block is needed here: img.art sets inline-block, which outranks .scene and leaves auto margins without effect. */
.scene.briefing-scene { display: block; width: 75%; max-width: 36rem; margin-inline: auto; }
.portrait { width: 6rem; height: 6rem; border-radius: 50%; }
.portrait.large { width: 9rem; height: 9rem; }
.role-portrait { grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; }
.portraits { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; gap: var(--space-4); flex-wrap: wrap; }
.portrait-figure, .portraits figure { margin: 0 0 var(--space-3); text-align: center; }
figcaption { font-size: var(--type-small); color: var(--ink-soft); }
.logo { width: 4rem; height: 4rem; }
.logo.inline { width: 2.5rem; height: 2.5rem; vertical-align: middle; margin-right: var(--space-2); }
.logos { display: flex; gap: var(--space-3); align-items: center; margin: 0 0 var(--space-2); }
.title-logo { margin: 0 0 var(--space-3); }
.game-logo { width: auto; max-width: min(6.24rem, 100%); max-height: 17.16vh; height: auto; object-fit: contain; display: block; } /* fits the screen at any window size (D346, item 3), 35% smaller than D346's 12rem and 33vh at Luc's direction of 11 Oct 2026, then 20% smaller again (D402) */
.selection-intro { max-width: 48rem; }
/* The CEO's portrait at the top right of the selection page (D377), twice D379's size, 24rem and 18rem at phone width, never wider than half the column so the text keeps room beside it (D380). */
.selection-ceo { float: right; margin: 0 0 var(--space-3) var(--space-3); }
.portrait.selection-ceo { width: 24rem; height: auto; aspect-ratio: 1; max-width: 50%; }
.selection-heading { font-size: var(--type-lead); font-weight: 700; margin: var(--space-3) 0 var(--space-2); }
ul.ambitions.plain li { padding: var(--space-1) 0; }
.ambition-link { color: var(--focus); text-decoration: underline; }
.ambition-unavailable { color: var(--ink-soft); }
.front-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.front-head .title-logo { margin: 0; }
/* The front page's notice opposite the logo (D399), without its box (D412) or icon (D413): bold blue-gray text at the body's size and the heaviest weight, 2.5rem below the top banner (D414), both sentences centred (D416). */
.intro-notice { display: flex; max-width: 24rem; margin-top: var(--space-5); color: var(--notice-ink); font-size: 1rem; font-weight: 800; line-height: 1.4; text-align: center; }
.intro-notice p { margin: 0; }
/* Its two sentences, one paragraph (D417), fade in one after the other; then a soft gold gleam crosses both, again every six seconds, settling on the blue-gray between (D418); the header's Pause motion button stops it, as WCAG 2.2.2 requires of motion that lasts; nothing moves where the player asks for reduced motion, and the gleam runs only where the browser can paint text with a background (D414, D415, D417). */
.intro-notice .notice-line { animation: notice-fade 0.6s ease-out both; }
.intro-notice .notice-line + .notice-line { animation-delay: 0.35s; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .intro-notice .notice-line { background: linear-gradient(100deg, var(--notice-ink) 42%, var(--notice-shine) 50%, var(--notice-ink) 58%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: notice-fade 0.6s ease-out both, notice-shimmer 6s ease-in-out 1.1s infinite both; }
  .intro-notice .notice-line + .notice-line { animation-delay: 0.35s, 1.45s; }
}
@keyframes notice-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes notice-shimmer { 0% { background-position: 100% 0; } 35% { background-position: 0 0; } 100% { background-position: 0 0; } }
:root[data-motion="paused"] .intro-notice .notice-line { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .intro-notice .notice-line { animation: none; }
}
/* The five skills illustrated on What you will learn (D404), above the page's text and centred, never wider than the column (D408), at 33.75rem, 25% larger than D408's 27rem (D409). display: block, since img.art's inline-block outranks a lone class and auto margins centre only a block. */
.learn-art.art { display: block; width: 33.75rem; max-width: 100%; height: auto; margin: var(--space-4) auto; border-radius: var(--radius); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 8px 12px 28px rgba(0, 0, 0, 0.28); } /* a noticeable shadow to the bottom right that lifts it off the page, in light and dark (D410, D411) */
/* The tagline as the front page's heading, shown as written with each word capitalised (D394), at 1.25rem in the full ink colour (D395), under the wordmark (D396), not bold (D397). */
.frame-head h1.tagline { margin: var(--space-1) 0 0; font-size: 1rem; line-height: 1.3; font-weight: 400; color: var(--ink); }
/* The game's name above the screen's title on every page, restored after D393 at the tagline's size, 1rem (D396, D400), in capitals (D398), bold again (D403; the tagline stays at normal weight). */
.wordmark { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 700; color: var(--ink); text-transform: uppercase; }
.intro-title { font-size: var(--type-h2); margin: var(--space-3) 0 var(--space-2); }
/* The welcome heading directly above the title image, with 1.5rem above and below, never against the image (D405). */
.intro-title.welcome-title { margin: var(--space-4) 0; }
.intro-learn { padding-left: 1.4rem; }
.intro-learn li { margin: var(--space-1) 0; }
.intro-law { list-style: none; padding: 0; margin: var(--space-2) 0; display: flex; gap: var(--space-3); flex-wrap: wrap; }
.intro-law a { color: var(--focus); }
.icon { width: 1.75rem; height: 1.75rem; vertical-align: middle; }
img.mark { width: 1.75rem; height: 1.75rem; vertical-align: middle; margin-right: var(--space-1); }
.mockup .pack { width: 100%; max-width: 14rem; height: auto; display: block; margin: 0 auto var(--space-2); }
@media (max-width: 56rem) {
  .portrait { width: 4.5rem; height: 4.5rem; }
  .portrait.selection-ceo { width: 18rem; height: auto; }
  .role-portrait { width: 2.25rem; height: 2.25rem; }
}

/* The visual components an option shows, drawn in the display's theme (D458): the dark drawing replaces the light one in the dark theme, chosen or from the system. */
.claim-components { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.claim-component img.art { max-height: 6rem; width: auto; }
/* A pack mockup that carries components grows with them instead of keeping the pack's proportions, so nothing spills over the next option (D458). */
.mockup-CH-pack:has(.claim-components) { aspect-ratio: auto; justify-content: flex-start; }
.claim-component[data-component="VC.AM05.globe_small"] img.art { max-height: 1.5rem; }
.claim-component .art-dark { display: none; }
:root[data-theme="dark"] .claim-component .art-light { display: none; }
:root[data-theme="dark"] .claim-component .art-dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .claim-component .art-light { display: none; }
  :root:not([data-theme="light"]) .claim-component .art-dark { display: inline-block; }
}
.claim-component.placeholder { border: 1px dashed var(--ink-soft); border-radius: var(--radius); padding: var(--space-1) var(--space-2); margin: 0; }

/* The Report a problem link under every screen (D469). */
.frame-foot { margin: var(--space-4) 0 var(--space-3); text-align: center; font-size: var(--type-small); }