/* Build 2026.10.23-82: crisp locally bundled interface typography and a
   genuinely expansive desktop layout across every game surface, while
   preserving the dedicated landscape-phone and foldable compositions.
   Restore correctly layered 16:9 clash dice; enlarge and raise first-call guidance; strengthen the mobile title masthead; lock iPhone text scaling and enforce one shared title-explainer body size; Safari-safe streamed/offline audio and repeatable mobile audio unlock; one central Store/Latest/Update control; standardised front-page explainer copy; revised front-page biography; new PWA app icons; first-call guidance, clean-save streaks and seven-panel patrol recap; first-crisis chapter card
   and long-form music crossfades; roomier playable-card carousel panels;
   eight structurally distinct newspaper front pages;
   safe-area starburst typography with a consistent
   2.5-second hold; forward-facing Quantum Knight transitions only at
   title entry and the final-score reveal; slightly calmer title-page typography,
   plus frame-accurate Quantum Knight scene wipes,
   BPM-aware music, arcade feedback and phone-safe card carousels. */
@font-face {
  font-family: "I7 Barlow Condensed";
  src: url("../fonts/barlow-condensed/barlow-condensed-600-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "I7 Barlow Condensed";
  src: url("../fonts/barlow-condensed/barlow-condensed-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "I7 Barlow Condensed";
  src: url("../fonts/barlow-condensed/barlow-condensed-800-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "I7 Barlow Condensed";
  src: url("../fonts/barlow-condensed/barlow-condensed-800-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --bg-dark: #071014;
  --bg-surface: #11191b;
  --bg-card: #f0e5cc;
  --cream: #f0e5cc;
  --cream-dim: #bcc3b4;
  --teal: #12858b;
  --teal-light: #61c4c0;
  --teal-dim: #0a555a;
  --teal-glow: transparent;
  --orange: #e65327;
  --orange-glow: transparent;
  --gold: #d4a536;
  --gold-glow: transparent;
  --red: #b72824;
  --navy: #071014;
  --ink: #0b0f12;
  --paper: #f0e5cc;
  --paper-white: #fff7e7;
  --font-poster: Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
  --font-display: "I7 Barlow Condensed", "Arial Narrow", "Franklin Gothic Medium", Arial, sans-serif;
  --font-condensed: var(--font-display);
  --font-body: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  --font-mono: "Courier New", Courier, monospace;
  --app-safe-left: max(10px, env(safe-area-inset-left, 0px));
  --app-safe-right: max(10px, env(safe-area-inset-right, 0px));
  --title-explainer-body-size: 14.25px;
  --title-explainer-body-leading: 1.35;
}

html,
body {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ========================================================================== 
   NEW YORK PRESS ROOM
   Eight front pages built from the same editorial furniture. Paper grain,
   fine rules, captions and bylines do the work; spot colour stays deliberately
   imperfect and restrained so these read as printed papers, not score cards.
   ========================================================================== */

.newspaper-sheet {
  border: 1px solid #17191a;
  box-shadow:
    inset 0 0 34px rgb(57 45 28 / 11%),
    0 18px 42px rgb(0 0 0 / 48%),
    4px 5px 0 rgb(0 0 0 / 34%);
}

.newspaper-sheet::before {
  height: 1px;
  opacity: 0.44;
  background: linear-gradient(90deg, transparent, rgb(20 20 18 / 25%) 18%, rgb(255 255 255 / 64%) 51%, rgb(20 20 18 / 18%) 84%, transparent);
}

.newspaper-sheet .news-masthead {
  border-color: currentcolor;
}

.newspaper-sheet .news-extra-box {
  box-shadow: none;
}

.newspaper-sheet .news-headline {
  max-height: 2.05em;
  font-size: clamp(24px, calc(6.8vh + 1px), 42px);
  line-height: 0.93;
  text-align: left;
  text-align-last: auto;
  text-wrap: balance;
  text-shadow: none;
}

.newspaper-sheet .news-subhead-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 3px 5px;
  font-style: normal;
  text-align: left;
  border-top: 1px solid currentcolor;
  border-bottom: 3px double currentcolor;
}

.news-section-tag {
  padding: 2px 6px;
  color: #f4edd9;
  background: #17191a;
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

#news-subhead-strip {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.newspaper-sheet .news-photo-box {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-color: #b8b5aa;
  background-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 28%);
}

.news-photo-box::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.27;
  background:
    radial-gradient(circle, rgb(17 17 17 / 68%) 0 0.6px, transparent 0.8px) 0 0 / 4px 4px,
    linear-gradient(96deg, transparent 0 48%, rgb(255 255 255 / 12%) 50%, transparent 52%);
  mix-blend-mode: multiply;
}

.news-photo-box figcaption {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 3px 5px;
  color: #161616;
  background: rgb(239 231 211 / 90%);
  border-top: 1px solid rgb(23 25 26 / 70%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(7px, calc(1.45vh + 1px), 9px);
  font-style: italic;
  line-height: 1.08;
  text-align: left;
}

.news-article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 7px;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentcolor;
  font-family: var(--font-mono);
  font-size: 0.66em;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.newspaper-sheet .news-article-lead {
  margin-bottom: 4px;
  font-family: Georgia, "Times New Roman", serif;
}

.newspaper-sheet .news-article-snippet p {
  text-align: left;
}

.newspaper-sheet .news-article-snippet p::first-letter {
  float: left;
  margin: 1px 3px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.35em;
  font-weight: 900;
  line-height: 0.76;
}

.newspaper-sheet .news-opinion-delta {
  display: grid;
  gap: 2px;
  padding: 5px 7px;
  color: #17191a;
  background: rgb(247 242 226 / 62%);
  border: 3px double #17191a;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, calc(2.4vh + 1px), 14px);
  line-height: 1.08;
}

.news-result-label {
  padding-bottom: 2px;
  border-bottom: 1px solid currentcolor;
  font-family: var(--font-mono);
  font-size: 0.64em;
  font-weight: 900;
  text-transform: uppercase;
}

.news-result-copy {
  display: block;
  font-weight: 800;
}

.newspaper-sheet .news-opinion-delta.is-negative {
  color: #17191a !important;
  background: rgb(226 194 91 / 25%);
  border-color: #594711;
  box-shadow: none;
}

.newspaper-sheet .news-opinion-delta.is-critical {
  color: #17191a !important;
  background: rgb(181 45 36 / 14%);
  border-color: #7d211b;
  box-shadow: none;
  font-size: clamp(10px, calc(2.15vh + 1px), 13px);
}

.newspaper-sheet .news-continue-button {
  min-height: 30px;
  color: #f4edd9;
  background: #17191a;
  border: 1px solid #17191a;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: clamp(10px, calc(2.2vh + 1px), 13px);
  text-transform: uppercase;
}

.newspaper-sheet .news-continue-button:not(:disabled):hover,
.newspaper-sheet .news-continue-button:not(:disabled):focus-visible {
  color: #17191a;
  background: #e3c44e;
  outline: 2px solid #17191a;
  outline-offset: 1px;
}

/* 1. THE DAILY CHRONICLE — classic metropolitan picture tabloid. */
.news-tabloid-chronicle .news-masthead {
  border-top: 4px double #17191a;
  border-bottom: 4px double #17191a;
}

.news-tabloid-chronicle .news-extra-box {
  min-height: 38px;
  font-size: clamp(16px, calc(3.8vh + 1px), 23px);
  border: 3px double #17191a;
}

.news-tabloid-chronicle .news-headline {
  border-top: 1px solid #17191a;
  border-bottom: 5px solid #17191a;
  text-align: center;
  text-align-last: center;
}

/* 2. NEW YORK BOLT — red-top splash with a dark report rail. */
.newspaper-sheet.news-tabloid-bolt {
  border-top: 7px solid #b3261e;
}

.news-tabloid-bolt .news-masthead {
  background: transparent;
  border-top: 0;
  border-bottom: 5px solid #17191a;
}

.news-tabloid-bolt .news-nameplate-kicker,
.news-tabloid-bolt .news-nameplate-deck {
  color: #8e211b;
}

.news-tabloid-bolt .news-extra-box {
  color: #f4edd9;
  background: #a92720;
  border: 1px solid #17191a;
  transform: rotate(-1.5deg);
}

.news-tabloid-bolt .news-extra-box:nth-of-type(3) {
  transform: rotate(1.5deg);
}

.news-tabloid-bolt .news-headline {
  color: #f4edd9;
  background: #17191a;
  border-left: 9px solid #b3261e;
  transform: none;
}

.news-tabloid-bolt .news-subhead-strip {
  color: #17191a;
  background: rgb(179 38 30 / 13%);
  border-top: 1px solid #17191a;
  border-bottom: 3px double #17191a;
  font-family: Georgia, "Times New Roman", serif;
  text-transform: none;
}

.news-tabloid-bolt .news-article-snippet {
  color: #f4edd9;
  background: #202020;
  border-top: 5px solid #b3261e;
}

.news-tabloid-bolt .news-opinion-delta {
  color: #f4edd9;
  background: #17191a;
  border-color: #f4edd9;
}

.news-tabloid-bolt .news-opinion-delta.is-critical {
  color: #f4edd9 !important;
  background: #351815;
  border-color: #b3261e;
}

/* 3. THE MANHATTAN ECHO — lively popular paper with restrained spot ink. */
.newspaper-sheet.news-tabloid-echo {
  background-color: #e9e1cb;
  background-image:
    linear-gradient(135deg, rgb(8 83 88 / 8%), transparent 34%),
    url("../ui/newsprint-paper-texture.webp");
  background-size: 100% 100%, cover;
  border-top: 7px solid #164d50;
  border-right-color: #17191a;
  border-bottom-color: #17191a;
  border-left-color: #17191a;
  box-shadow: inset 0 0 34px rgb(57 45 28 / 11%), 0 18px 42px rgb(0 0 0 / 48%), 4px 5px 0 rgb(0 0 0 / 34%);
}

.news-tabloid-echo .news-masthead {
  color: #f4edd9;
  background: #164d50;
  border: 0;
}

.news-tabloid-echo .news-paper-name {
  color: #f4edd9;
  text-shadow: 2px 2px 0 #8d251d;
}

.news-tabloid-echo .news-extra-box,
.news-tabloid-echo .news-extra-box:nth-of-type(3) {
  color: #17191a;
  background: #e3c44e;
  border: 2px solid #f4edd9;
  border-radius: 0;
  transform: none;
}

.news-tabloid-echo .news-meta-bar {
  color: #17191a;
  background: #e3c44e;
}

.news-tabloid-echo .news-headline {
  color: #17191a;
  background: transparent;
  border: 0;
  border-bottom: 5px solid #164d50;
  text-align: center;
  text-align-last: center;
}

.news-tabloid-echo .news-subhead-strip {
  color: #17191a;
  background: rgb(227 196 78 / 38%);
  border-top: 1px solid #17191a;
  border-bottom: 3px double #17191a;
  font-family: Georgia, "Times New Roman", serif;
  text-transform: none;
}

.news-tabloid-echo .news-brief-column,
.news-tabloid-echo .news-article-snippet {
  color: #17191a;
  background: rgb(255 255 255 / 12%);
  border-color: #164d50;
}

/* 4. THE NEW YORK REGISTER — sober paper-of-record columns. */
.news-broadsheet-register .news-headline {
  font-weight: 700;
  border-top: 0;
  border-bottom: 4px double #17191a;
}

.news-broadsheet-register .news-article-snippet p {
  column-count: 2;
  column-gap: 10px;
  column-rule: 1px solid rgb(23 25 26 / 28%);
}

/* 5. THE METROPOLITAN REVIEW — Sunday analysis with an offset feature image. */
.newspaper-sheet.news-broadsheet-review {
  background-color: #e9e4d8;
  background-image:
    linear-gradient(90deg, rgb(48 56 66 / 7%) 0 1px, transparent 1px 100%),
    url("../ui/newsprint-paper-texture.webp");
  background-size: 100% 100%, cover;
  border-color: #303842;
  box-shadow: inset 0 0 34px rgb(57 45 28 / 10%), 0 18px 42px rgb(0 0 0 / 48%), 4px 5px 0 rgb(48 56 66 / 44%);
}

.news-broadsheet-review .news-headline {
  font-style: normal;
  font-weight: 600;
}

.news-broadsheet-review .news-brief-column {
  color: #f4edd9;
  background: #303842;
}

.news-broadsheet-review .news-opinion-delta {
  color: #303842;
  background: transparent;
  border-color: #303842;
}

/* 6. THE WALL STREET LEDGER — compact financial grid and data rail. */
.newspaper-sheet.news-financial-ledger {
  color: #1b292d;
  background-color: #e6d8ce;
  background-image:
    linear-gradient(90deg, rgb(84 54 43 / 5%) 0 1px, transparent 1px 100%),
    url("../ui/newsprint-paper-texture.webp");
  background-size: 24px 100%, cover;
  border-top: 6px solid #294e52;
}

.news-financial-ledger .news-masthead {
  grid-template-columns: clamp(55px, 8vw, 80px) minmax(0, 1fr) clamp(55px, 8vw, 80px);
  padding-block: 1px 3px;
  border-top: 1px solid #1b292d;
  border-bottom: 5px double #1b292d;
}

.news-financial-ledger .news-paper-name {
  color: #1b292d;
  font-style: normal;
  font-variant: small-caps;
  line-height: 0.86;
}

.news-financial-ledger .news-extra-box {
  min-height: 34px;
  font-family: var(--font-mono);
  font-size: clamp(9px, calc(1.9vh + 1px), 11px);
  font-style: normal;
  text-transform: uppercase;
  border: 1px solid #1b292d;
  transform: none;
}

.news-financial-ledger .news-extra-box:nth-of-type(3) {
  transform: none;
}

.news-financial-ledger .news-headline {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, calc(6.2vh + 1px), 38px);
  font-weight: 700;
  line-height: 0.98;
  text-transform: none;
  border-top: 1px solid #1b292d;
  border-bottom: 3px double #1b292d;
}

.news-financial-ledger .news-subhead-strip {
  color: #f4edd9;
  background: #294e52;
  border-color: #1b292d;
  font-family: var(--font-mono);
}

.news-financial-ledger .news-section-tag {
  color: #1b292d;
  background: #e6d8ce;
}

.news-financial-ledger .news-body-grid {
  grid-template-columns: minmax(180px, 41%) minmax(210px, 43%) minmax(75px, 16%);
  grid-template-areas: "article photo brief";
  gap: 7px;
}

.news-financial-ledger .news-article-snippet {
  padding: 4px 8px 3px 2px;
  border: 0;
  border-right: 1px solid #1b292d;
}

.news-financial-ledger .news-photo-box {
  border: 1px solid #1b292d;
  outline: 1px solid #1b292d;
  outline-offset: 2px;
}

.news-financial-ledger .news-brief-column {
  padding: 4px 2px 4px 7px;
  text-align: left;
  border: 0;
  border-left: 3px double #1b292d;
}

.news-financial-ledger .news-opinion-delta {
  border-color: #294e52;
}

/* 7. THE BOROUGH GAZETTE — friendly local weekly led by community copy. */
.newspaper-sheet.news-local-gazette {
  color: #1d2722;
  background-color: #ebe3cd;
  border-top: 6px solid #315746;
}

.news-local-gazette .news-masthead {
  grid-template-columns: clamp(64px, 10vw, 96px) minmax(0, 1fr) clamp(64px, 10vw, 96px);
  border-top: 0;
  border-bottom: 6px double #315746;
}

.news-local-gazette .news-paper-name {
  color: #315746;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  line-height: 0.86;
}

.news-local-gazette .news-extra-box {
  min-height: 36px;
  color: #315746;
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, calc(2.7vh + 1px), 17px);
  border: 2px solid #315746;
  transform: none;
}

.news-local-gazette .news-extra-box:nth-of-type(3) {
  transform: none;
}

.news-local-gazette .news-headline {
  padding-inline: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(23px, calc(6.8vh + 1px), 41px);
  font-weight: 700;
  line-height: 0.96;
  text-align: center;
  text-align-last: center;
  text-transform: none;
  border-bottom: 2px solid #315746;
}

.news-local-gazette .news-subhead-strip {
  color: #1d2722;
  background: rgb(49 87 70 / 10%);
  border-color: #315746;
}

.news-local-gazette .news-section-tag {
  background: #315746;
}

.news-local-gazette .news-body-grid {
  grid-template-columns: minmax(90px, 18%) minmax(190px, 45%) minmax(170px, 37%);
  grid-template-areas: "brief article photo";
  gap: 7px;
}

.news-local-gazette .news-brief-column {
  padding: 5px;
  color: #315746;
  background: rgb(49 87 70 / 8%);
  border: 1px solid #315746;
  text-align: left;
}

.news-local-gazette .news-article-snippet {
  padding: 4px 8px;
  border: 0;
  border-inline: 1px solid rgb(49 87 70 / 55%);
}

.news-local-gazette .news-photo-box {
  border: 4px double #315746;
}

.news-local-gazette .news-opinion-delta {
  border-color: #315746;
}

/* 8. NEW YORK EVENING DISPATCH — late photo edition with a vertical news rail. */
.newspaper-sheet.news-evening-dispatch {
  color: #17191a;
  border-top: 8px solid #17191a;
}

.news-evening-dispatch .news-masthead {
  grid-template-columns: clamp(62px, 9vw, 90px) minmax(0, 1fr) clamp(62px, 9vw, 90px);
  color: #f4edd9;
  background: #17191a;
  border: 0;
}

.news-evening-dispatch .news-paper-name {
  color: #f4edd9;
  font-family: var(--font-display);
  font-style: normal;
  line-height: 0.8;
  text-transform: uppercase;
}

.news-evening-dispatch .news-nameplate-deck {
  color: #e3c44e;
}

.news-evening-dispatch .news-extra-box {
  min-height: 38px;
  color: #17191a;
  background: #e3c44e;
  font-family: var(--font-mono);
  font-size: clamp(11px, calc(2.4vh + 1px), 15px);
  font-style: normal;
  text-transform: uppercase;
  border: 1px solid #f4edd9;
  transform: none;
}

.news-evening-dispatch .news-extra-box:nth-of-type(3) {
  transform: none;
}

.news-evening-dispatch .news-meta-bar {
  border-top-color: #f4edd9;
}

.news-evening-dispatch .news-headline {
  padding: 3px 7px 1px;
  color: #17191a;
  background: transparent;
  border-top: 0;
  border-bottom: 7px solid #a92720;
  font-size: clamp(28px, calc(8.7vh + 1px), 50px);
  text-align: center;
  text-align-last: center;
}

.news-evening-dispatch .news-subhead-strip {
  border-color: #17191a;
}

.news-evening-dispatch .news-section-tag {
  background: #a92720;
}

.news-evening-dispatch .news-body-grid {
  grid-template-columns: minmax(0, 67%) minmax(150px, 33%);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "photo brief"
    "article brief";
  gap: 5px 7px;
}

.news-evening-dispatch .news-photo-box {
  border: 1px solid #17191a;
  outline: 3px double #17191a;
  outline-offset: 2px;
}

.news-evening-dispatch .news-brief-column {
  padding: 6px;
  color: #f4edd9;
  background: #17191a;
  border: 0;
  border-top: 6px solid #a92720;
  text-align: left;
}

.news-evening-dispatch .news-brief-column hr {
  border-top-color: #f4edd9;
}

.news-evening-dispatch .news-article-snippet {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1.2fr);
  grid-template-rows: auto auto 1fr;
  gap: 2px 8px;
  padding: 4px 6px;
  border: 0;
  border-top: 3px double #17191a;
}

.news-evening-dispatch .news-article-meta {
  grid-column: 1 / -1;
}

.news-evening-dispatch .news-article-lead {
  grid-column: 1;
  grid-row: 2 / span 2;
  padding-right: 7px;
  border-right: 1px solid #17191a;
}

.news-evening-dispatch .news-article-snippet p {
  grid-column: 2;
  grid-row: 2;
}

.news-evening-dispatch .news-opinion-delta {
  grid-column: 2;
  grid-row: 3;
}

/* Landscape phone edition: keep every identity, tighten only the furniture. */
@media (orientation: landscape) and (max-height: 500px) {
  .newspaper-sheet {
    gap: 3px 6px;
    padding: 6px;
  }

  .newspaper-sheet .news-subhead-strip {
    gap: 5px;
    padding-block: 2px;
    font-size: clamp(8px, calc(1.95vh + 1px), 11px);
  }

  .news-section-tag {
    padding: 1px 4px;
  }

  .news-article-meta {
    margin-bottom: 2px;
    padding-bottom: 2px;
  }

  .news-photo-box figcaption {
    max-height: 2.45em;
    padding: 2px 4px;
    overflow: hidden;
    font-size: 7px;
  }

  .newspaper-sheet .news-article-lead {
    margin-bottom: 2px;
  }

  .newspaper-sheet .news-opinion-delta,
  .newspaper-sheet .news-opinion-delta.is-critical {
    gap: 1px;
    padding: 3px 5px;
    font-size: clamp(9px, calc(2.1vh + 1px), 12px);
    line-height: 1.02;
  }

  .news-result-label {
    padding-bottom: 1px;
  }

  .news-broadsheet-register .news-article-snippet p {
    column-gap: 6px;
  }

  .news-financial-ledger .news-body-grid {
    grid-template-columns: minmax(150px, 38%) minmax(220px, 47%) minmax(70px, 15%);
  }

  .news-local-gazette .news-body-grid {
    grid-template-columns: minmax(72px, 16%) minmax(190px, 43%) minmax(180px, 41%);
  }

  .news-evening-dispatch .news-article-snippet {
    grid-template-columns: minmax(105px, 0.72fr) minmax(180px, 1.28fr);
    padding-block: 2px;
  }
}

@media (orientation: landscape) and (max-width: 720px) {
  .newspaper-sheet .news-body-grid {
    grid-template-columns: minmax(0, 56%) minmax(0, 44%);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "photo article";
  }

  .newspaper-sheet .news-brief-column {
    display: none;
  }

  .news-evening-dispatch .news-article-snippet {
    display: flex;
  }

  .news-evening-dispatch .news-article-lead {
    padding-right: 0;
    border-right: 0;
  }
}

@media (orientation: landscape) and (max-height: 359px) {
  .newspaper-sheet {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background:
    repeating-linear-gradient(0deg, rgb(240 229 204 / 2%) 0 1px, transparent 1px 4px),
    radial-gradient(circle, rgb(240 229 204 / 9%) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    var(--navy) !important;
}

body {
  padding-right: var(--app-safe-right);
  padding-left: var(--app-safe-left);
  color: var(--cream);
  letter-spacing: 0;
}

body::after {
  position: fixed;
  z-index: 1000;
  inset: 0;
  content: "";
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(255 255 255 / 1.4%) 3px 4px);
  pointer-events: none;
}

/* The canvas is transparent while Thomas approaches. At each sequence's
   designated opaque frame it masks the whole viewport while the page beneath
   changes, preventing a flash or visible jump between gameplay screens. */
.quantum-wipe-overlay {
  position: fixed;
  z-index: 1800;
  inset: 0;
  display: none;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  touch-action: none;
}

.quantum-wipe-overlay.active {
  display: block;
  pointer-events: auto;
}

.quantum-wipe-overlay canvas {
  display: block;
  width: 100%;
  height: 100%;
}

body.quantum-wipe-running {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .quantum-wipe-overlay {
    display: none !important;
  }
}

button,
.brand,
.carousel-card,
.hand-carousel-item,
.prop-carousel-item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

header {
  height: 40px;
  padding: 3px 8px;
  color: var(--ink);
  background:
    radial-gradient(circle, rgb(11 15 18 / 8%) 0 1px, transparent 1.2px) 0 0 / 7px 7px,
    var(--paper) !important;
  border-bottom: 4px solid var(--ink);
  box-shadow: none;
}

.brand {
  gap: 6px;
  color: var(--ink);
}

.brand-atom {
  width: 27px;
  height: 27px;
  color: var(--paper-white);
  background: var(--orange);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 19px;
  transform: rotate(-3deg);
}

.brand-title {
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0;
}

.brand-sub {
  color: #46504c;
  font-size: 9px;
}

.status-hud {
  gap: 6px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.stat-pill,
.stat-pill.stability,
.stat-pill.charge,
.stat-pill.opinion,
.stat-pill.streak,
.stat-pill.actions {
  color: var(--ink);
  font-size: 12px;
}

.stat-pill > span:first-child {
  filter: grayscale(1) contrast(1.4);
}

.opinion-bar-wrap {
  height: 7px;
  background: var(--paper-white);
  border: 1px solid var(--ink);
  border-radius: 0;
}

.opinion-bar-fill {
  background: var(--orange);
}

.action-pip {
  width: 9px;
  height: 9px;
  background: var(--gold);
  border: 1px solid var(--ink);
  border-radius: 50%;
  box-shadow: none;
}

.action-pip.spent {
  background: transparent;
}

.btn-call-levine-header,
.btn-header-icon {
  min-height: 34px;
  padding: 4px 8px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--ink);
  gap: 4px;
  font-size: 13px;
  letter-spacing: 0;
}

.header-action-icon {
  flex: 0 0 auto;
  font-size: 19px;
}

.header-action-label {
  font-size: 13px;
}

.btn-header-icon {
  background: var(--orange);
}

.btn-call-levine-header:hover,
.btn-header-icon:hover {
  color: var(--paper-white);
  background: var(--orange);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: none;
}

main {
  height: calc(100% - 40px);
  max-width: 1600px;
  gap: 3px;
  padding: 3px 5px 5px;
}

.top-nav-switcher-bar {
  height: 36px;
  gap: 0;
  margin: 0;
  background: var(--ink);
  border: 2px solid var(--ink);
}

.top-view-tab-btn {
  min-height: 32px;
  max-width: none;
  padding: 3px 8px;
  color: var(--cream-dim);
  background: var(--bg-surface);
  border: 0;
  border-right: 2px solid #425054;
  border-radius: 0;
  font-size: 13px;
  letter-spacing: 0;
}

.top-view-tab-btn:last-child {
  border-right: 0;
}

.top-view-tab-btn:hover {
  color: var(--paper-white);
  background: var(--teal-dim);
  border-color: #425054;
}

.top-view-tab-btn.active {
  color: var(--paper-white);
  background: var(--orange);
  border-color: var(--ink);
  box-shadow: none;
}

.tab-icon-badge,
.top-view-tab-btn.active .tab-icon-badge {
  padding: 1px 4px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-size: 9px;
}

.view-panel {
  gap: 0;
  background-size: auto, 100% 100%;
  box-shadow: inset 0 0 0 3px var(--area-accent);
}

#view-panel-sector {
  --area-accent: var(--teal);
  background:
    radial-gradient(circle, rgb(240 229 204 / 6%) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    linear-gradient(145deg, #0a3b40, #071c21 72%);
}

#view-panel-hand {
  --area-accent: var(--orange);
  background:
    radial-gradient(circle, rgb(240 229 204 / 6%) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    linear-gradient(145deg, #4a2015, #21100d 72%);
}

#view-panel-props {
  --area-accent: var(--gold);
  background:
    radial-gradient(circle, rgb(240 229 204 / 7%) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    linear-gradient(145deg, #463613, #211b0b 72%);
}

#tab-nav-sector.active {
  background: var(--teal);
}

#tab-nav-hand.active {
  background: var(--orange);
}

#tab-nav-props.active {
  color: var(--ink);
  background: var(--gold);
}

.comic-toast-banner {
  top: 4px;
  max-width: calc(100vw - 16px);
  padding: 5px 12px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 5px 5px 0 rgb(0 0 0 / 60%);
  font-size: 12px;
  letter-spacing: 0;
}

/* A clear chapter break between the opening supply deal and call one. */
.comic-toast-banner.chapter-break {
  top: 50%;
  width: min(760px, calc(100vw - 22px));
  max-width: none;
  padding: clamp(20px, 5vh, 34px) clamp(54px, 10vw, 104px);
  transform: translate(-50%, -50%);
  color: var(--ink);
  background: var(--gold);
  border: 0;
  clip-path: var(--comic-pointed-burst);
  filter: drop-shadow(7px 8px 0 rgb(0 0 0 / 72%));
  font-size: clamp(25px, 4.5vw, 46px);
  line-height: 0.98;
  letter-spacing: 0.8px;
  text-wrap: balance;
  text-transform: uppercase;
  z-index: 1500;
}

.comic-toast-banner.chapter-break.hidden {
  transform: translate(-50%, -50%) scale(0.78);
}

@media (orientation: landscape) and (max-height: 500px) {
  .comic-toast-banner.chapter-break {
    width: min(720px, calc(100vw - 34px));
    padding: 24px 72px;
    font-size: clamp(24px, 4.2vw, 36px);
  }
}

/* First-call coach: three light-touch highlights, driven by the player's own
   progress rather than an additional tutorial modal. */
.first-call-coach {
  position: fixed;
  right: max(9px, var(--app-safe-right, 0px));
  bottom: max(66px, calc(var(--app-safe-bottom, 0px) + 60px));
  z-index: 1490;
  width: min(390px, calc(100vw - 18px));
  min-height: 68px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 11px 32px 12px 42px;
  color: var(--ink);
  background: var(--paper-white, #fff8e7);
  clip-path: polygon(0 50%, 7% 38%, 4% 17%, 14% 21%, 18% 0, 31% 10%, 43% 3%, 52% 12%, 66% 2%, 71% 12%, 88% 5%, 86% 24%, 100% 19%, 94% 50%, 100% 81%, 86% 76%, 88% 95%, 71% 88%, 66% 98%, 52% 88%, 43% 97%, 31% 90%, 18% 100%, 14% 79%, 4% 83%, 7% 62%);
  filter: drop-shadow(5px 6px 0 rgb(0 0 0 / 75%));
  pointer-events: none;
  text-align: left;
}

.first-call-coach strong,
.first-call-coach span {
  display: block;
}

.first-call-coach strong {
  color: var(--orange);
  font: 900 18px/1 var(--font-display);
  letter-spacing: 0.4px;
}

.first-call-coach span {
  margin-top: 0;
  font: 800 12.25px/1.2 var(--font-body);
  text-wrap: balance;
}

.first-call-focus {
  position: relative !important;
  z-index: 1200 !important;
  outline: 4px solid var(--gold) !important;
  outline-offset: 3px;
  animation: firstCallGuidePulse 780ms ease-in-out infinite alternate;
}

.carousel-card.first-call-focus {
  animation: firstCallGuideCardPulse 780ms ease-in-out infinite alternate;
}

@keyframes firstCallGuidePulse {
  from { box-shadow: 0 0 0 0 rgb(242 92 48 / 15%); }
  to { box-shadow: 0 0 0 10px rgb(242 92 48 / 34%), 0 0 24px rgb(230 177 44 / 82%); }
}

@keyframes firstCallGuideCardPulse {
  from { outline-color: var(--gold); }
  to { outline-color: var(--orange); }
}

/* Cosmetic momentum feedback. It intentionally sits between the score tally
   and the full-screen verdict, and it never alters patrol scoring. */
.clean-streak-celebration {
  position: fixed;
  top: 27%;
  left: 50%;
  z-index: 1650;
  min-width: min(480px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 46px;
  color: var(--ink);
  background: linear-gradient(110deg, var(--teal-light), var(--gold));
  clip-path: polygon(0 50%, 7% 36%, 2% 23%, 15% 25%, 11% 8%, 28% 17%, 37% 0, 50% 16%, 63% 0, 72% 17%, 89% 8%, 85% 25%, 98% 23%, 93% 36%, 100% 50%, 93% 64%, 98% 77%, 85% 75%, 89% 92%, 72% 83%, 63% 100%, 50% 84%, 37% 100%, 28% 83%, 11% 92%, 15% 75%, 2% 77%, 7% 64%);
  filter: drop-shadow(8px 9px 0 rgb(0 0 0 / 78%));
  pointer-events: none;
  animation: cleanStreakArrival 1250ms cubic-bezier(0.18, 0.84, 0.26, 1) both;
}

.clean-streak-celebration strong {
  color: var(--paper-white);
  font: 900 clamp(44px, 10vh, 72px)/0.8 var(--font-display);
  text-shadow: 4px 4px 0 var(--ink);
}

.clean-streak-celebration span {
  font: 900 clamp(23px, 5.5vh, 40px)/0.9 var(--font-display);
  text-wrap: balance;
}

@keyframes cleanStreakArrival {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55) rotate(-3deg); }
  14%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08) rotate(0); }
}

@media (orientation: landscape) and (max-height: 500px) {
  .first-call-coach {
    right: max(9px, var(--app-safe-right, 0px));
    bottom: max(64px, calc(var(--app-safe-bottom, 0px) + 58px));
    width: min(390px, 52vw);
    min-height: 66px;
    padding: 10px 32px 11px 42px;
  }

  .first-call-coach strong { font-size: 18px; }
  .first-call-coach span {
    font-size: 12.25px;
    line-height: 1.2;
  }

  .clean-streak-celebration {
    min-width: min(470px, calc(100vw - 30px));
    padding: 13px 42px;
  }
}

/* The final report preserves the seven-call story as a compact comic strip. */
.shift-call-recap {
  margin: 0 0 8px;
  padding: 6px;
  background: rgb(5 8 12 / 92%);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--orange);
}

.shift-call-recap-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--paper-white);
}

.shift-call-recap-heading strong {
  color: var(--gold);
  font: 900 14px/1 var(--font-display);
  letter-spacing: 0.5px;
}

.shift-call-recap-heading span {
  font: 800 8px/1 var(--font-mono);
  text-transform: uppercase;
}

.shift-call-recap-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(92px, 1fr));
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.shift-call-recap-card {
  min-width: 92px;
  overflow: hidden;
  color: var(--paper-white);
  background: #111820;
  border: 2px solid var(--teal);
}

.shift-call-recap-card.outcome-seven { border-color: var(--gold); }
.shift-call-recap-card.outcome-compromise { border-color: #ef9d2e; }
.shift-call-recap-card.outcome-collateral { border-color: var(--red); }
.shift-call-recap-card.pending { opacity: 0.48; border-style: dashed; }

.shift-call-recap-art {
  position: relative;
  min-height: 55px;
  padding: 4px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3px;
  background-color: #1a2630;
  background-position: center;
  background-size: cover;
}

.shift-call-recap-art span,
.shift-call-recap-art b {
  padding: 2px 3px;
  color: var(--paper-white);
  background: rgb(5 8 12 / 86%);
  font: 900 7.5px/1 var(--font-mono);
}

.shift-call-recap-card.outcome-seven .shift-call-recap-art b { color: var(--gold); }
.shift-call-recap-card.outcome-clean .shift-call-recap-art b { color: var(--teal-light); }
.shift-call-recap-card.outcome-compromise .shift-call-recap-art b { color: #ffc058; }
.shift-call-recap-card.outcome-collateral .shift-call-recap-art b { color: #ff7c7c; }

.shift-call-recap-copy {
  min-height: 38px;
  padding: 3px 4px;
}

.shift-call-recap-copy strong,
.shift-call-recap-copy span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.shift-call-recap-copy strong {
  min-height: 18px;
  color: var(--paper-white);
  font: 900 8px/1.05 var(--font-body);
  -webkit-line-clamp: 2;
}

.shift-call-recap-copy span {
  margin-top: 2px;
  color: var(--cream-dim);
  font: 700 7px/1 var(--font-mono);
  -webkit-line-clamp: 1;
}

@media (orientation: landscape) and (max-height: 500px) {
  .shift-call-recap {
    margin-bottom: 6px;
    padding: 4px;
  }

  .shift-call-recap-heading { margin-bottom: 3px; }
  .shift-call-recap-heading strong { font-size: 12px; }
  .shift-call-recap-art { min-height: 48px; }
  .shift-call-recap-copy { min-height: 32px; }
}

/* Arcade-style score feedback: decorative, transient, and never blocks input. */
.arcade-score-layer {
  position: fixed;
  /* Above the scanline veneer and every result/newspaper overlay. */
  z-index: 1600;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}

.arcade-score-popup {
  --arcade-x: 0vw;
  position: absolute;
  top: 44%;
  left: 50%;
  min-width: 116px;
  padding: 5px 12px 6px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 rgb(0 0 0 / 58%);
  font-family: var(--font-display);
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(calc(-50% + var(--arcade-x)), 20px) scale(0.55) rotate(-4deg);
  animation: arcadeScoreCollect 2350ms cubic-bezier(0.16, 0.9, 0.3, 1) forwards;
}

.arcade-score-popup strong {
  display: block;
  font-size: clamp(28px, calc(8vh + 1px), 56px);
  letter-spacing: 1px;
  text-shadow: 3px 3px 0 var(--ink);
}

.arcade-score-popup span {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: clamp(8px, calc(2vh + 1px), 12px);
  font-weight: 900;
  letter-spacing: 0.5px;
}

.arcade-score-popup.negative {
  color: var(--paper-white);
  background: var(--orange);
  box-shadow: 5px 5px 0 var(--red), 0 0 20px rgb(242 92 48 / 48%);
}

.arcade-score-popup.resource {
  color: var(--ink);
  background: var(--gold);
  box-shadow: 5px 5px 0 var(--orange);
}

.arcade-score-popup.neutral {
  color: var(--ink);
  background: var(--paper);
}

.arcade-score-popup.emphasis {
  min-width: 155px;
  border-width: 4px;
  animation-name: arcadeScoreJackpot;
}

.arcade-score-popup.emphasis strong {
  font-size: clamp(39px, calc(11vh + 1px), 76px);
}

@keyframes arcadeScoreCollect {
  0% { opacity: 0; transform: translate(calc(-50% + var(--arcade-x)), 28px) scale(0.5) rotate(-7deg); }
  14% { opacity: 1; transform: translate(calc(-50% + var(--arcade-x)), 0) scale(1.14) rotate(3deg); }
  25% { transform: translate(calc(-50% + var(--arcade-x)), -5px) scale(1) rotate(-1deg); }
  74% { opacity: 1; transform: translate(calc(-50% + var(--arcade-x)), -34px) scale(1) rotate(-1deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--arcade-x)), -96px) scale(0.82) rotate(2deg); }
}

@keyframes arcadeScoreJackpot {
  0% { opacity: 0; transform: translate(calc(-50% + var(--arcade-x)), 35px) scale(0.35) rotate(-8deg); }
  17% { opacity: 1; transform: translate(calc(-50% + var(--arcade-x)), -3px) scale(1.28) rotate(4deg); }
  30% { transform: translate(calc(-50% + var(--arcade-x)), -8px) scale(1) rotate(-1deg); }
  76% { opacity: 1; transform: translate(calc(-50% + var(--arcade-x)), -42px) scale(1) rotate(-1deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--arcade-x)), -112px) scale(0.76) rotate(3deg); }
}

@media (orientation: landscape) and (max-height: 500px) {
  .arcade-score-popup { padding: 4px 9px 5px; }
  .arcade-score-popup strong { font-size: clamp(24px, 8vh, 40px); }
  .arcade-score-popup.emphasis strong { font-size: clamp(32px, 11vh, 56px); }
}

.carousel-section-wrap {
  gap: 2px;
  padding: 2px 0 0;
}

.sector-top-control-bar {
  position: absolute;
  z-index: 35;
  top: 4px;
  right: 4px;
  left: 4px;
  width: calc(100% - 8px) !important;
  min-height: 0;
  max-width: 1100px !important;
  margin: 0 auto !important;
  pointer-events: none;
}

.sector-recon-pill {
  min-width: 0;
  width: clamp(150px, 19vw, 220px);
  max-width: 22vw;
  box-sizing: border-box;
  padding: 5px 7px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px !important;
  align-items: stretch !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  overflow: hidden;
  white-space: normal;
  box-shadow: 4px 4px 0 rgb(0 0 0 / 58%);
  pointer-events: auto;
}

.sector-recon-pill > span,
.sector-recon-pill strong {
  color: var(--ink) !important;
}

.sector-recon-pill > span:first-child {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.08;
  white-space: normal;
}

.sector-recon-pill > span:nth-child(2) {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sector-recon-pill > span:last-child {
  grid-column: 1;
  justify-self: stretch;
  margin-left: 0 !important;
  text-align: center;
  color: var(--paper-white) !important;
  background: var(--teal) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  white-space: nowrap;
}

#sector-top-crisis-counter {
  color: var(--paper) !important;
  font-size: 11px !important;
  white-space: nowrap;
  pointer-events: auto;
}

.carousel-stage {
  height: 100% !important;
  min-height: 0;
  perspective: 900px;
  /* The centre card's raised Engage tab must be allowed above the stage. */
  overflow: visible !important;
}

.carousel-arrow-btn {
  width: 42px;
  height: 42px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 3px solid var(--paper);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 19px;
}

.carousel-arrow-btn:hover {
  color: var(--paper-white);
  background: var(--orange);
  border-color: var(--paper);
  transform: translateY(-50%);
}

.carousel-card {
  width: clamp(245px, 39vw, 325px);
  height: clamp(182px, 58vh, 228px);
  background: var(--paper);
  border-radius: 0;
  transition-duration: 420ms;
}

.carousel-card.pos-center {
  transform: translateX(0) translateZ(80px) scale(1.04) rotateY(0deg);
}

.carousel-card.pos-left {
  transform: translateX(clamp(-310px, -31vw, -190px)) translateZ(-80px) scale(0.82) rotateY(12deg);
}

.carousel-card.pos-right {
  transform: translateX(clamp(190px, 31vw, 310px)) translateZ(-80px) scale(0.82) rotateY(-12deg);
}

.flip-card-inner,
.flip-card-front {
  color: var(--ink);
  background: var(--paper);
  border-radius: 0;
}

.flip-card-inner {
  box-shadow: 7px 7px 0 rgb(0 0 0 / 64%);
}

.flip-card-front {
  border: 4px solid var(--ink);
}

.flip-card-front .card-art-bg {
  opacity: 1;
  background-position: center;
  filter: grayscale(1) contrast(1.25) sepia(0.08);
}

.flip-card-front .card-content {
  padding: 6px 8px;
  color: var(--teal-dark, #073c42);
  background:
    linear-gradient(180deg, rgb(240 229 204 / 96%) 0 18%, transparent 31% 66%, rgb(240 229 204 / 97%) 80% 100%),
    radial-gradient(circle, rgb(11 15 18 / 7%) 0 1px, transparent 1.2px) 0 0 / 7px 7px;
}

.type-pill,
.target-difficulty,
.card-description,
.card-how-to-beat,
.double-tap-prompt {
  border-radius: 0;
  letter-spacing: 0;
}

.type-pill {
  color: var(--paper-white);
  background: var(--orange);
  border: 2px solid var(--ink);
}

.type-pill.location {
  color: var(--paper-white);
  background: var(--teal);
  border-color: var(--ink);
}

.type-pill.hazard,
.type-pill.threat {
  color: var(--paper-white);
  background: var(--red);
  border-color: var(--ink);
}

.type-pill.anomaly,
.type-pill.cosmic {
  color: var(--paper-white);
  background: var(--teal);
  border-color: var(--ink);
}

.type-pill.dilemma {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--ink);
}

.type-pill.mystery {
  color: var(--paper-white);
  background: #343d42;
  border-color: var(--ink);
}

.target-difficulty {
  color: var(--teal-dark, #073c42);
  background: var(--gold);
  border: 2px solid var(--ink);
}

.card-title {
  color: var(--teal-light, #47e2cf);
  font-size: clamp(18px, calc(4.4vh + 1px), 23px);
  letter-spacing: 0;
  paint-order: stroke fill;
  -webkit-text-stroke: 1px var(--ink);
  text-shadow: 2px 2px 0 var(--ink), 0 0 5px rgba(0, 0, 0, 0.95);
  text-transform: uppercase;
}

.card-description {
  color: var(--teal-light, #47e2cf);
  background: rgb(7 60 66 / 96%);
  border: 2px solid var(--ink);
  border-left: 6px solid var(--teal-light, #47e2cf);
  font-size: 11px;
  font-weight: 750;
  text-shadow: 1px 1px 0 var(--ink);
}

.card-how-to-beat {
  color: var(--teal-light, #47e2cf);
  background: var(--teal-dark, #073c42);
  border: 2px solid var(--ink);
  border-left: 6px solid var(--gold);
  font-size: 10px;
  text-shadow: 1px 1px 0 var(--ink);
}

.double-tap-prompt {
  top: -9px;
  color: var(--paper-white);
  background: var(--orange);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  animation: none;
}

.carousel-card.pos-center.target-active,
.carousel-card.pos-center.target-active .flip-card-front {
  border-color: var(--orange) !important;
  box-shadow: none;
}

.ink-stamp {
  color: var(--teal-dark, #073c42);
  background: rgb(240 229 204 / 92%);
  border-color: var(--teal-dark, #073c42);
  border-radius: 0;
  box-shadow: none;
  letter-spacing: 0;
}

.thomas-dialogue {
  margin: 2px auto 1px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-left: 6px solid var(--teal);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink);
}

.thomas-dialogue strong {
  color: var(--red);
}

.hand-view-container,
.props-view-container,
.focused-crisis-card {
  color: var(--ink);
  background:
    radial-gradient(circle, rgb(240 229 204 / 4%) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    var(--bg-surface);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
}

.hand-view-container,
.props-view-container {
  padding: 4px 7px;
}

.hand-target-info-pill,
.props-info-pill {
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
}

.hand-category-tabs-bar {
  gap: 3px;
}

.tab-filter-btn {
  min-height: 27px;
  padding: 3px 8px;
  color: var(--paper);
  background: #1b2528;
  border: 1px solid #536065;
  border-radius: 0;
  letter-spacing: 0;
}

.tab-filter-btn.active {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--ink);
  box-shadow: none;
}

.hand-carousel-item {
  width: clamp(205px, 30vw, 260px);
}

.prop-carousel-item {
  width: clamp(190px, 28vw, 240px);
}

.hand-carousel-item,
.prop-carousel-item {
  height: clamp(202px, 58vh, 242px);
  padding: 5px;
  gap: 3px;
  color: var(--ink);
  background:
    radial-gradient(circle, rgb(11 15 18 / 7%) 0 1px, transparent 1.2px) 0 0 / 7px 7px,
    var(--paper);
  border: 4px solid var(--ink);
  border-radius: 0;
  box-shadow: 7px 7px 0 rgb(0 0 0 / 68%);
}

/* Let the foremost carousel card cross the footer edge. The footer sits above
   the recessed cards (z-index < 55), while the active card (z-index 60) lands
   over it, so the centre card is never chopped off on short phone screens. */
.hand-carousel-stage-wrap,
.props-carousel-stage-wrap {
  min-height: 0;
  overflow: visible;
}

/* Perspective creates a stacking context. Lift the playable-card stage itself,
   not just its centre child, so the orbit can genuinely pass over the footer. */
.hand-carousel-stage-wrap {
  z-index: 70;
}

.hand-carousel-item,
.prop-carousel-item {
  box-sizing: border-box;
  max-height: calc(100% - 8px);
}

.hand-carousel-item.pos-center,
.hand-carousel-item.pos-center.recommended-hand-card,
.prop-carousel-item.pos-center,
.prop-carousel-item.attached-to-roll {
  border-color: var(--ink) !important;
  box-shadow: 7px 7px 0 var(--orange) !important;
}

.p-card-cost {
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.p-card-cost.free {
  color: var(--paper-white);
  background: var(--teal);
}

.p-card-cat {
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 1px solid var(--ink);
  border-radius: 0;
}

.p-card-tactical-tag,
.prop-tile-perk {
  color: var(--ink);
  background: var(--gold);
  border: 1px solid var(--ink);
  border-radius: 0;
}

.p-card-art,
.prop-tile-art {
  min-height: 58%;
  background-color: var(--paper-white);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  filter: grayscale(1) contrast(1.22) sepia(0.06);
}

.p-card-bottom-content,
.prop-tile-bottom-content {
  padding: 3px 4px;
  color: var(--teal-light, #47e2cf);
  background: var(--teal-dark, #073c42);
  border: 2px solid var(--ink);
  border-left: 5px solid var(--orange);
  border-radius: 0;
}

.p-card-title,
.prop-tile-name {
  color: var(--teal-light, #47e2cf);
  font-size: 14px;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 var(--ink);
  text-transform: uppercase;
}

.p-card-rules,
.prop-tile-desc {
  color: #e8fff9;
  font-size: 11px;
  text-shadow: 1px 1px 0 var(--ink);
}

.btn-play-trigger,
.btn-deploy-prop,
.hand-carousel-item.pos-center .btn-play-trigger,
.prop-carousel-item.pos-center .btn-deploy-prop:not(:disabled),
.prop-carousel-item.attached-to-roll .btn-deploy-prop {
  min-height: 27px;
  padding: 3px;
  color: var(--paper-white) !important;
  background: var(--teal) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0;
  box-shadow: none !important;
  font-size: 11px;
  letter-spacing: 0;
}

.hand-bottom-action-bar {
  position: relative;
  z-index: 55;
  min-height: 38px;
  padding: 3px 6px;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  border-radius: 0;
}

.btn {
  min-height: 34px;
  padding: 5px 12px;
  color: var(--paper-white);
  background: var(--teal);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 12px;
  letter-spacing: 0;
}

.btn:hover {
  color: var(--paper-white);
  background: var(--orange);
}

.btn:disabled,
.btn-start-game-cta:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.5;
}

.btn.secondary {
  color: var(--paper);
  background: #172125;
  border: 2px solid #536065;
}

.btn.secondary:hover {
  background: var(--teal-dark, #073c42);
  border-color: var(--paper);
}

.screen-overlay,
.newspaper-modal,
.sector-transit-banner-overlay {
  padding: 6px;
  background: rgb(7 16 20 / 96%);
  backdrop-filter: none;
}

.title-screen-box,
.crisis-splash-box,
.modal-box {
  width: 100%;
  max-width: 1120px;
  max-height: calc(100svh - 12px);
  color: var(--ink);
  background:
    radial-gradient(circle, rgb(11 15 18 / 7%) 0 1px, transparent 1.2px) 0 0 / 7px 7px,
    var(--paper);
  border: 4px solid var(--ink);
  border-radius: 0;
  box-shadow: 9px 9px 0 rgb(0 0 0 / 72%);
  animation: none;
}

.title-screen-box {
  height: calc(100svh - 12px);
}

.title-hero-header,
.splash-hero-header {
  color: var(--paper-white);
  background:
    radial-gradient(circle, rgb(240 229 204 / 9%) 0 1px, transparent 1.2px) 0 0 / 7px 7px,
    var(--orange);
  border-bottom: 4px solid var(--ink);
}

.title-hero-header {
  min-height: 54px;
  padding: 6px 12px;
}

.title-tag-badge,
.splash-tag-badge {
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--ink);
  letter-spacing: 0;
}

.title-main-logo,
.splash-hero-title {
  color: var(--paper-white);
  letter-spacing: 0;
  text-shadow: 3px 3px 0 var(--ink);
}

.title-main-logo {
  font-size: clamp(25px, calc(6vh + 1px), 39px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.title-main-logo-primary {
  line-height: 0.92;
}

.title-main-logo-world {
  color: var(--paper-white);
  font-size: 0.43em;
  line-height: 1;
  letter-spacing: 1.1px;
}

.title-sub-logo,
.splash-hero-sub {
  color: var(--paper-white);
  letter-spacing: 0;
}

.title-body-content {
  flex: 1;
  padding: 7px 10px;
  gap: 7px;
  justify-content: center;
  overflow: hidden;
}

.title-approval-hero-card,
.title-story-card,
.title-feature-pill {
  color: var(--ink);
  background: var(--paper-white);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--teal-dark, #073c42);
}

.title-approval-hero-card {
  padding: 6px 9px;
}

.title-approval-top {
  padding-bottom: 3px;
  border-color: var(--ink);
}

.title-approval-tag {
  color: var(--teal-dark, #073c42);
  letter-spacing: 0;
}

.title-approval-status {
  color: var(--paper-white);
  background: var(--orange);
  border: 1px solid var(--ink);
  border-radius: 0;
}

.title-approval-center {
  gap: 10px;
}

.title-approval-number-wrap {
  min-width: 112px;
  padding: 5px 8px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 0;
}

.title-approval-big-percent {
  color: var(--orange);
  font-size: clamp(37px, calc(10vh + 1px), 59px);
  letter-spacing: 0;
  text-shadow: 2px 2px 0 var(--ink);
}

.title-approval-sub-label {
  color: var(--ink);
  letter-spacing: 0;
}

.title-approval-bar-bg {
  height: 11px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
}

.title-approval-bar-fill {
  background: linear-gradient(90deg, var(--orange) 0 45%, var(--gold) 45% 65%, var(--teal) 65% 100%);
  border-radius: 0;
}

.title-approval-bar-labels,
.title-approval-desc {
  color: #313a37;
}

.title-story-card {
  padding: 5px 8px;
}

.title-avatar-portrait,
.thomas-avatar-frame,
.speech-bubble-avatar {
  border: 3px solid var(--ink);
  border-radius: 0;
  filter: grayscale(1) contrast(1.25) sepia(0.06);
}

.title-story-text h3 {
  color: var(--orange) !important;
  letter-spacing: 0;
}

.title-story-text p {
  color: #313a37 !important;
}

.title-how-to-grid {
  display: none;
}

.title-screen-footer,
.modal-footer,
.splash-action-footer {
  min-height: 44px;
  padding: 5px 10px;
  background: var(--ink);
  border-top: 3px solid var(--ink);
}

.btn-start-game-cta {
  min-height: 36px;
  max-width: 560px;
  padding: 5px 14px;
  color: var(--paper-white);
  background: var(--orange);
  border: 3px solid var(--paper);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 14px;
  letter-spacing: 0;
}

.btn-start-game-cta:hover {
  box-shadow: 4px 4px 0 var(--ink);
  transform: none;
}

.modal-header {
  min-height: 38px;
  padding: 5px 10px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border-bottom: 4px solid var(--ink);
}

.modal-header h2 {
  color: var(--paper-white);
  letter-spacing: 0;
}

.doctor-tag {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
}

.modal-body {
  padding: 6px 8px;
  gap: 5px;
  color: var(--ink);
}

.thomas-profile-hero {
  min-height: 45px;
  padding: 4px 7px;
  color: var(--ink);
  background: var(--paper-white);
  border: 2px solid var(--ink);
  border-radius: 0;
}

.thomas-avatar-frame {
  width: 40px;
  height: 40px;
}

.thomas-hero-name {
  color: var(--ink);
  letter-spacing: 0;
}

.thomas-tag {
  color: var(--paper-white);
  background: var(--teal);
  border: 1px solid var(--ink);
  border-radius: 0;
}

.mood-grid {
  flex: 1;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.mood-card {
  min-height: 0;
  padding: 4px 6px;
  gap: 2px;
  color: var(--ink);
  background: var(--paper-white);
  border: 2px solid var(--ink);
  border-radius: 0;
  overflow: hidden;
}

.mood-name {
  color: var(--ink);
  font-size: 11px;
}

.mood-score {
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 1px solid var(--ink);
  border-radius: 0;
}

.btn-stat-roll {
  min-height: 25px;
  padding: 2px 7px;
  color: var(--paper-white);
  background: var(--orange);
  border: 1px solid var(--ink);
  border-radius: 0;
}

.stat-lock-tag {
  color: var(--paper-white);
  background: var(--teal);
  border: 1px solid var(--ink);
  border-radius: 0;
}

.mood-quote {
  display: none;
}

.mood-effect {
  min-width: 0;
  padding: 2px 4px;
  color: #313a37;
  background: var(--paper);
  border-radius: 0;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-intro-prompt {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px max(20px, var(--app-safe-right)) 16px max(20px, var(--app-safe-left));
  background:
    radial-gradient(circle at 50% 42%, rgb(10 111 118 / 38%), transparent 48%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(240 229 204 / 5%) 3px 4px),
    rgb(5 10 14 / 92%);
  backdrop-filter: blur(2px);
}

.stats-intro-card {
  position: relative;
  width: min(680px, 88vw);
  padding: 18px 22px 20px;
  color: var(--ink);
  text-align: center;
  background:
    radial-gradient(circle, rgb(11 15 18 / 8%) 0 1px, transparent 1.2px) 0 0 / 7px 7px,
    var(--paper-white);
  border: 4px solid var(--ink);
  box-shadow: 9px 9px 0 var(--orange);
  transform: rotate(-0.8deg);
}

.stats-intro-card::after {
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(5 7 10 / 45%);
  content: '';
  pointer-events: none;
}

.stats-intro-kicker {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 7px;
  padding: 3px 10px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 2px solid var(--ink);
  font: 900 12px var(--font-condensed);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.stats-intro-dice {
  position: relative;
  z-index: 1;
  margin-bottom: 2px;
  color: var(--orange);
  font-size: 27px;
  filter: drop-shadow(2px 2px 0 rgb(5 7 10 / 35%));
}

.stats-intro-card h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 7px;
  color: var(--teal-dark, #073c42);
  font: 900 clamp(24px, 5.8vh, 39px) var(--font-display);
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
}

.stats-intro-card p {
  position: relative;
  z-index: 1;
  max-width: 58ch;
  margin: 0 auto 13px;
  color: #172d2e;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.28;
}

.stats-intro-button {
  position: relative;
  z-index: 1;
  min-height: 39px;
  padding: 7px 20px;
  color: var(--paper-white);
  background: var(--orange);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--teal-dark, #073c42);
  font-size: 14px;
}

.saved-patrol-card {
  width: min(720px, 90vw);
  padding: 18px 22px 21px;
  color: var(--ink);
  text-align: center;
  background:
    radial-gradient(circle, rgb(11 15 18 / 8%) 0 1px, transparent 1.2px) 0 0 / 7px 7px,
    var(--paper-white);
  border: 4px solid var(--ink);
  box-shadow: 9px 9px 0 var(--teal);
  transform: rotate(0.6deg);
}

.saved-patrol-kicker {
  display: inline-block;
  margin-bottom: 7px;
  padding: 3px 11px;
  color: var(--paper-white);
  background: var(--orange);
  border: 2px solid var(--ink);
  font: 900 12px var(--font-condensed);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.saved-patrol-card h2 {
  margin: 0 0 6px;
  color: var(--teal-dark, #073c42);
  font: 900 clamp(25px, 6vh, 40px) var(--font-display);
  line-height: 0.95;
  text-transform: uppercase;
}

.saved-patrol-copy {
  max-width: 62ch;
  margin: 0 auto 11px;
  color: #172d2e;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.saved-patrol-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 12px;
}

.saved-patrol-summary div {
  display: grid;
  gap: 1px;
  padding: 5px 4px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 2px solid var(--ink);
}

.saved-patrol-summary strong {
  color: var(--teal-light, #61c4c0);
  font: 900 17px var(--font-display);
}

.saved-patrol-summary span {
  font: 800 9px var(--font-condensed);
  text-transform: uppercase;
}

.saved-patrol-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
}

.saved-patrol-actions .btn {
  min-height: 38px;
  padding: 6px 15px;
  border: 3px solid var(--ink);
  font-size: 12px;
}

.saved-patrol-restart {
  color: var(--ink);
  background: var(--gold);
}

.saved-patrol-continue {
  color: var(--paper-white);
  background: var(--teal);
  box-shadow: 4px 4px 0 var(--orange);
}

.crisis-splash-box {
  height: calc(100svh - 12px);
}

.splash-hero-header {
  min-height: 58px;
  padding: 5px 12px;
}

.splash-tag-badge {
  margin-bottom: 1px;
  font-size: 9px;
}

.splash-hero-title {
  margin: 0;
  font-size: clamp(21px, calc(6vh + 1px), 30px);
}

.splash-hero-sub {
  margin-top: 0;
  font-size: 10px;
}

.splash-body-content {
  flex: 1;
  min-height: 0;
  padding: 6px 8px;
  grid-template-columns: minmax(230px, 38%) minmax(0, 1fr);
  gap: 8px;
  color: var(--ink);
  align-items: stretch;
  overflow: hidden;
}

.splash-body-content > div:first-child {
  min-height: 0;
}

.splash-body-content > div:last-child {
  justify-content: center;
}

.splash-comic-panel-frame {
  height: 100%;
  min-height: 0;
  background-color: var(--paper-white);
  border: 4px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--ink);
  filter: grayscale(1) contrast(1.2) sepia(0.05);
}

.comic-caption-box,
.comic-speech-bubble,
.splash-tactical-intel-box {
  color: var(--ink);
  background: var(--paper-white);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink);
}

.comic-caption-box {
  min-height: 62px;
  padding: 8px 10px;
  font-size: clamp(13px, calc(2vh + 1px), 15px);
  line-height: 1.28;
}

.comic-caption-box strong {
  color: var(--red);
  letter-spacing: 0;
  font-size: 14px;
}

.comic-speech-bubble-wrap {
  margin-top: 0;
}

.comic-speech-bubble {
  min-height: 62px;
  padding: 8px 11px;
  font-size: clamp(13.5px, calc(2.1vh + 1px), 15.5px);
  line-height: 1.28;
}

.comic-speech-bubble::before,
.comic-speech-bubble::after {
  display: none;
}

.splash-tactical-intel-box {
  min-height: 80px;
  padding: 8px 10px;
  font-size: clamp(13px, calc(2vh + 1px), 15px);
  line-height: 1.28;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
}

.splash-speaker-label {
  margin-bottom: 3px;
  font-size: 12px;
}

.splash-props-note {
  margin-top: 6px;
  font-size: 13px;
}

.focused-crisis-view-wrap {
  padding: 3px;
}

.focused-crisis-card {
  max-width: 1100px;
  padding: 5px 7px;
  gap: 4px;
}

.focused-crisis-header {
  padding-bottom: 3px;
  border-color: #536065;
}

.btn-abandon-mission {
  min-height: 30px;
  color: var(--paper-white);
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 0;
  letter-spacing: 0;
}

.focused-crisis-body {
  gap: 7px;
  overflow: hidden;
}

.focused-crisis-art {
  background-color: var(--paper-white);
  border: 4px solid var(--ink);
  border-radius: 0;
  filter: grayscale(1) contrast(1.2) sepia(0.05);
}

.focused-art-badge {
  color: var(--paper-white);
  background: var(--orange);
  border: 2px solid var(--ink);
  border-radius: 0;
  letter-spacing: 0;
}

.focused-location-crumb {
  color: var(--teal-light);
}

.focused-crisis-title {
  color: var(--paper-white);
  letter-spacing: 0;
}

.focused-crisis-desc,
.focused-crisis-rec {
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-left: 6px solid var(--teal);
  border-radius: 0;
}

.focused-crisis-rec {
  background: var(--gold);
  border-left-color: var(--orange);
}

.focused-crisis-quote {
  color: var(--cream-dim);
}

.dice-fullscreen-overlay {
  padding: 7px 10px;
  background:
    radial-gradient(circle, rgb(240 229 204 / 8%) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    rgb(7 16 20 / 97%);
  backdrop-filter: none;
}

.dice-owner-badge,
.dice-top-heading,
.dice-result-card {
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 5px 5px 0 rgb(0 0 0 / 68%);
}

.dice-owner-badge.threat {
  border-left: 7px solid var(--red);
}

.dice-owner-badge.player {
  border-right: 7px solid var(--teal);
}

.dice-owner-badge.active-turn {
  border-color: var(--orange);
  box-shadow: 5px 5px 0 rgb(0 0 0 / 68%);
  transform: none;
}

.badge-label,
.badge-value,
.dice-result-desc {
  color: var(--ink);
}

.dice-top-heading {
  color: var(--paper-white);
  background: var(--orange);
  letter-spacing: 0;
}

.btn-nudge {
  min-height: 34px;
  padding: 4px 9px;
  color: var(--paper-white);
  background: var(--teal);
  border: 2px solid var(--ink);
  border-radius: 0;
}

.dice-result-card {
  max-width: 520px;
  padding: 7px 11px;
  border-color: var(--ink);
}

.dice-result-tag {
  color: var(--red);
}

.dice-result-title {
  color: var(--orange);
  letter-spacing: 0;
}

.modal-dice-banner {
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 5px 5px 0 rgb(0 0 0 / 68%);
  letter-spacing: 0;
}

.newspaper-sheet {
  position: relative;
  width: 100%;
  max-width: 1040px;
  height: min(620px, calc(100svh - 18px));
  max-height: calc(100svh - 18px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 4px;
  padding: clamp(7px, 1.2vw, 12px);
  overflow: hidden;
  color: var(--ink);
  background-color: #eee4cf;
  background-image:
    linear-gradient(103deg, rgb(255 255 255 / 24%), transparent 38%, rgb(88 67 38 / 7%) 72%, transparent),
    radial-gradient(ellipse at 20% 8%, rgb(255 255 255 / 30%), transparent 34%),
    url("../ui/newsprint-paper-texture.webp");
  background-position: center;
  background-size: 100% 100%, 100% 100%, cover;
  background-repeat: no-repeat;
  background-blend-mode: soft-light, screen, normal;
  border: 5px solid var(--ink);
  border-radius: 0;
  box-shadow: inset 0 0 32px rgb(76 57 29 / 13%), 9px 9px 0 rgb(0 0 0 / 68%);
  transform-origin: 100% 50%;
  will-change: transform, clip-path, opacity;
}

.newspaper-modal:not(.hidden) .newspaper-sheet {
  animation: newspaperPageTurnLanding 980ms cubic-bezier(0.18, 0.78, 0.22, 1.02) both;
}

.newspaper-sheet::before,
.newspaper-sheet::after {
  position: absolute;
  z-index: 3;
  content: "";
  pointer-events: none;
}

.newspaper-sheet::before {
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(11 15 18 / 38%) 12%, rgb(255 247 231 / 72%) 49%, rgb(11 15 18 / 28%) 88%, transparent);
  box-shadow: 0 3px 7px rgb(11 15 18 / 18%);
}

.newspaper-sheet::after {
  top: 0;
  bottom: 0;
  left: 96%;
  width: clamp(38px, 9vw, 96px);
  background: linear-gradient(90deg, rgb(11 15 18 / 44%), rgb(255 247 231 / 88%) 42%, rgb(255 255 255 / 45%) 72%, transparent);
  box-shadow: -9px 0 16px rgb(11 15 18 / 22%);
  animation: newspaperCurlEdge 980ms cubic-bezier(0.18, 0.78, 0.22, 1.02) both;
}

@keyframes newspaperPageTurnLanding {
  0% {
    opacity: 0;
    clip-path: inset(0 0 0 96% round 46% 0 0 46%);
    transform: translateX(44%) scaleX(0.14) rotate(2.2deg);
  }
  24% {
    opacity: 1;
    clip-path: inset(0 0 0 69% round 28% 0 0 28%);
    transform: translateX(24%) scaleX(0.42) rotate(1.4deg);
  }
  58% {
    clip-path: inset(0 0 0 19% round 12% 0 0 12%);
    transform: translateX(5%) scaleX(0.88) rotate(-1.6deg);
  }
  82% {
    clip-path: inset(0 round 0);
    transform: translateX(-0.7%) scaleX(1.025) rotate(-1.2deg);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 round 0);
    transform: translateX(0) scaleX(1) rotate(-0.9deg);
  }
}

@keyframes newspaperCurlEdge {
  0% { left: 94%; opacity: 0.9; transform: skewY(-7deg); }
  58% { left: 15%; opacity: 0.8; transform: skewY(-2deg); }
  84% { left: -8%; opacity: 0.3; transform: skewY(0); }
  100% { left: -12%; opacity: 0; transform: skewY(0); }
}

.news-paper-name,
.news-headline {
  letter-spacing: 0;
}

.news-masthead {
  display: grid;
  grid-template-columns: clamp(72px, 12vw, 116px) minmax(0, 1fr) clamp(72px, 12vw, 116px);
  grid-template-rows: minmax(42px, auto) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 4px 5px 2px;
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
}

.news-extra-box {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(19px, calc(4.7vh + 1px), 29px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px var(--ink);
  transform: rotate(-2deg);
}

.news-extra-box:nth-of-type(3) {
  transform: rotate(2deg);
}

.news-nameplate {
  min-width: 0;
  text-align: center;
}

.news-nameplate-kicker,
.news-nameplate-deck {
  font-family: var(--font-mono);
  font-size: clamp(7px, calc(1.7vh + 1px), 10px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.news-paper-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, calc(7.7vh + 1px), 44px);
  font-style: italic;
  font-weight: 900;
  line-height: 0.82;
  text-transform: none;
}

.news-paper-name span {
  display: block;
  margin-bottom: 1px;
  font-family: var(--font-mono);
  font-size: 0.25em;
  font-style: normal;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.news-meta-bar {
  grid-column: 1 / -1;
  margin: 0;
  padding: 2px 0 0;
  border-top: 1px solid var(--ink);
  border-bottom: 0;
  font-size: clamp(7px, calc(1.65vh + 1px), 10px);
}

.news-headline {
  max-height: 1.9em;
  overflow: hidden;
  padding: 2px 3px 1px;
  font-family: var(--font-display);
  font-size: clamp(28px, calc(8.8vh + 1px), 51px);
  line-height: 0.9;
  /* Give every line the full-width, deliberately oversized tabloid treatment. */
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-word;
  text-wrap: wrap;
  border-bottom: 2px solid var(--ink);
}

.news-subhead-strip {
  padding: 2px 5px;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(10px, calc(2.6vh + 1px), 15px);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--ink);
}

.news-body-grid {
  grid-template-columns: minmax(72px, 15%) minmax(200px, 47%) minmax(155px, 38%);
  gap: 5px;
  min-height: 0;
  overflow: hidden;
}

.news-brief-column {
  min-width: 0;
  padding: 2px 5px;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(8px, calc(2.1vh + 1px), 11px);
  line-height: 1.08;
  text-align: center;
  border: 2px solid var(--ink);
}

.news-brief-column strong,
.news-brief-column span,
.news-brief-column i {
  display: block;
}

.news-brief-column strong {
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-size: 1.25em;
  text-transform: uppercase;
}

.news-brief-column hr {
  margin: 5px 0;
  border: 0;
  border-top: 2px solid var(--ink);
}

.news-photo-box {
  height: 100%;
  min-height: 0;
  background-position: center;
  border: 3px solid var(--ink);
  filter: grayscale(1) contrast(1.35);
}

.news-article-snippet {
  min-width: 0;
  padding: 2px 5px;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(9px, calc(2.35vh + 1px), 13px);
  line-height: 1.17;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.news-article-lead {
  display: block;
  margin-bottom: 3px;
  font-size: 1.25em;
  line-height: 1;
}

.news-opinion-delta {
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  margin-top: 5px;
  padding: 6px 10px;
  font-size: clamp(18px, calc(4.6vh + 1px), 24px);
  font-weight: 900;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 rgb(0 0 0 / 48%);
}

.news-opinion-delta.is-negative {
  color: var(--ink) !important;
  background: var(--gold);
  box-shadow: 4px 4px 0 var(--orange);
}

.news-opinion-delta.is-critical {
  color: var(--ink) !important;
  background: var(--orange);
  box-shadow: 4px 4px 0 var(--gold);
}

/* Five rotating front pages. The first three retain an emphatic tabloid
   silhouette; the final two use calmer broadsheet typography and spacing. */
.newspaper-sheet.news-tabloid-bolt {
  border-top-width: 9px;
  border-top-color: var(--orange);
}

.news-tabloid-bolt .news-masthead {
  border-top: 4px solid var(--ink);
  border-bottom: 5px solid var(--ink);
}

.news-tabloid-bolt .news-paper-name {
  font-family: var(--font-display);
  font-style: normal;
  line-height: 0.78;
  text-transform: uppercase;
}

.news-tabloid-bolt .news-extra-box {
  color: var(--paper-white);
  background: var(--orange);
  font-family: var(--font-display);
  font-style: normal;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--ink);
}

.news-tabloid-bolt .news-headline {
  padding: 4px 7px 2px;
  color: var(--paper-white);
  background: var(--ink);
  border-left: 8px solid var(--orange);
}

.newspaper-sheet.news-tabloid-echo {
  border-color: var(--teal-dark, #073c42);
  box-shadow: inset 0 0 32px rgb(76 57 29 / 13%), 9px 9px 0 var(--orange);
}

.news-tabloid-echo .news-masthead {
  border-color: var(--teal-dark, #073c42);
}

.news-tabloid-echo .news-paper-name {
  color: var(--teal-dark, #073c42);
  font-family: var(--font-display);
  font-style: normal;
  text-transform: uppercase;
}

.news-tabloid-echo .news-extra-box {
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border-color: var(--ink);
  font-family: var(--font-display);
  font-style: normal;
}

.news-tabloid-echo .news-headline {
  border-top: 5px solid var(--teal-dark, #073c42);
  border-bottom: 5px solid var(--teal-dark, #073c42);
}

.newspaper-sheet.news-broadsheet-register,
.newspaper-sheet.news-broadsheet-review {
  background-color: #f0e8d7;
  background-image:
    linear-gradient(rgb(255 255 255 / 34%), rgb(255 255 255 / 22%)),
    radial-gradient(ellipse at 78% 14%, rgb(255 255 255 / 26%), transparent 38%),
    url("../ui/newsprint-paper-texture.webp");
  background-position: center;
  background-size: 100% 100%, 100% 100%, cover;
  background-repeat: no-repeat;
  background-blend-mode: screen, soft-light, normal;
}

.news-broadsheet-register .news-masthead,
.news-broadsheet-review .news-masthead {
  grid-template-columns: clamp(48px, 8vw, 72px) minmax(0, 1fr) clamp(48px, 8vw, 72px);
  border-top: 1px solid var(--ink);
  border-bottom: 4px double var(--ink);
}

.news-broadsheet-register .news-extra-box,
.news-broadsheet-review .news-extra-box {
  min-height: 34px;
  padding: 4px 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(9px, calc(2vh + 1px), 12px);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  box-shadow: none;
  transform: none;
}

.news-broadsheet-register .news-extra-box:nth-of-type(3),
.news-broadsheet-review .news-extra-box:nth-of-type(3) {
  transform: none;
}

.news-broadsheet-register .news-paper-name,
.news-broadsheet-review .news-paper-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, calc(7vh + 1px), 40px);
  font-style: normal;
  font-weight: 700;
  line-height: 0.88;
  text-transform: none;
}

.news-broadsheet-register .news-nameplate-deck,
.news-broadsheet-review .news-nameplate-deck {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: none;
}

.news-broadsheet-register .news-headline,
.news-broadsheet-review .news-headline {
  max-height: 2.15em;
  padding: 3px 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, calc(6.2vh + 1px), 37px);
  font-weight: 800;
  line-height: 0.98;
  text-align: left;
  text-align-last: auto;
  text-transform: none;
  border-top: 1px solid var(--ink);
  border-bottom: 3px double var(--ink);
}

.news-broadsheet-register .news-subhead-strip,
.news-broadsheet-review .news-subhead-strip {
  text-align: left;
}

.news-broadsheet-register .news-article-lead,
.news-broadsheet-review .news-article-lead {
  font-size: 1.18em;
  font-weight: 700;
}

.newspaper-sheet.news-broadsheet-review {
  border-color: #303842;
  box-shadow: inset 0 0 32px rgb(76 57 29 / 11%), 9px 9px 0 #5e6870;
}

.news-broadsheet-review .news-masthead,
.news-broadsheet-review .news-headline,
.news-broadsheet-review .news-brief-column,
.news-broadsheet-review .news-photo-box,
.news-broadsheet-review .news-article-snippet {
  border-color: #303842;
}

.news-broadsheet-review .news-paper-name {
  font-variant: small-caps;
  letter-spacing: 0.035em;
}

.news-continue-button {
  width: 100%;
  min-height: 30px;
  margin-top: 0;
}

.mission-complete-burst {
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* The pointed outer fifth is decorative: all verdict copy stays within the
   broad centre of the star so no letter can be clipped by a spike. */
.mission-complete-kicker,
.mission-complete-return {
  width: min(62%, 520px);
  margin-inline: auto;
  font-size: clamp(11px, calc(1.65vw + 1px), 17px);
  line-height: 1.14;
  text-wrap: balance;
}

.mission-complete-burst strong {
  width: min(72%, 610px);
  margin: 4px auto;
  font-size: clamp(40px, calc(7.4vw + 1px), 78px);
  line-height: 0.92;
  text-wrap: balance;
}

.mission-complete-overlay.outcome-compromise .mission-complete-burst strong {
  font-size: clamp(34px, calc(6.2vw + 1px), 64px);
}

.transit-comic-box {
  color: var(--ink);
  background: var(--paper);
  border: 6px solid var(--ink);
  border-radius: 0;
  box-shadow: 9px 9px 0 var(--orange);
}

.transit-title-tag {
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border-radius: 0;
}

.transit-location-name {
  letter-spacing: 0;
}

/* Opening cover, portrait rotate gate, boot, utility actions, and audio controls */
.build-cover-overlay {
  padding: 8px;
  background:
    radial-gradient(circle at 50% 40%, rgb(18 133 139 / 24%), transparent 46%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(240 229 204 / 4%) 3px 4px),
    var(--navy);
}

.build-cover-card {
  position: relative;
  width: min(980px, calc(100vw - 16px));
  height: min(540px, calc(100svh - 16px));
  min-height: 310px;
  display: grid;
  grid-template-columns: minmax(150px, 31%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle, rgb(11 15 18 / 8%) 0 1.2px, transparent 1.4px) 0 0 / 7px 7px,
    var(--paper);
  border: 6px solid var(--ink);
  box-shadow: 12px 12px 0 var(--orange), 0 24px 70px rgb(0 0 0 / 82%);
  isolation: isolate;
  animation: buildCoverSlam 420ms cubic-bezier(0.18, 0.89, 0.32, 1.25) both;
}

.build-cover-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    conic-gradient(from 246deg at 31% 55%, transparent 0 9deg, rgb(230 80 43 / 16%) 9deg 13deg, transparent 13deg 25deg);
  opacity: 0.9;
}

@keyframes buildCoverSlam {
  from { opacity: 0; transform: translateY(-18px) scale(0.88) rotate(-1.5deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.build-cover-topline {
  grid-column: 1 / -1;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 14px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border-bottom: 4px solid var(--ink);
  font-family: var(--font-mono);
  font-size: clamp(9px, calc(1.8vh + 1px), 12px);
  font-weight: 900;
  text-transform: uppercase;
}

.build-cover-seven {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  width: clamp(112px, 23vw, 210px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--paper-white);
  background: var(--orange);
  border: clamp(5px, 1.2vh, 9px) solid var(--ink);
  box-shadow: clamp(7px, 1.6vh, 12px) clamp(7px, 1.6vh, 12px) 0 var(--ink);
  font-family: var(--font-display);
  font-size: clamp(83px, calc(26vh + 1px), 179px);
  line-height: 1;
  transform: rotate(-5deg);
  text-shadow: 4px 4px 0 rgb(0 0 0 / 24%);
}

.build-cover-copy {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  min-width: 0;
  padding: 10px clamp(18px, 4vw, 46px) 22px 12px;
  text-transform: uppercase;
}

.build-cover-kicker {
  display: inline-block;
  margin-bottom: 5px;
  padding: 3px 8px;
  color: var(--paper-white);
  background: var(--orange);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--font-mono);
  font-size: clamp(9px, calc(1.8vh + 1px), 12px);
  font-weight: 900;
}

.build-cover-copy h1,
.build-cover-copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  line-height: 0.88;
  letter-spacing: 0;
}

.build-cover-copy h1 {
  max-width: 700px;
  font-size: clamp(39px, calc(13vh + 1px), 87px);
}

.build-cover-copy h2 {
  margin-top: 5px;
  color: var(--teal-dark, #073c42);
  font-size: clamp(26px, calc(8vh + 1px), 53px);
}

.build-cover-copy p {
  max-width: 620px;
  margin-top: 10px;
  color: #293432;
  font-family: var(--font-display);
  font-size: clamp(12px, calc(2.7vh + 1px), 19px);
  line-height: 1.05;
}

.build-cover-skyline {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 50px;
  left: 28%;
  height: 26%;
  opacity: 0.16;
  background:
    linear-gradient(90deg,
      transparent 0 2%, var(--ink) 2% 7%, transparent 7% 9%,
      var(--ink) 9% 16%, transparent 16% 19%, var(--ink) 19% 28%,
      transparent 28% 31%, var(--ink) 31% 38%, transparent 38% 40%,
      var(--ink) 40% 51%, transparent 51% 54%, var(--ink) 54% 59%,
      transparent 59% 62%, var(--ink) 62% 73%, transparent 73% 76%,
      var(--ink) 76% 84%, transparent 84% 87%, var(--ink) 87% 96%, transparent 96%);
  clip-path: polygon(0 55%, 4% 55%, 4% 20%, 7% 20%, 7% 48%, 12% 48%, 12% 4%, 15% 4%, 15% 50%, 21% 50%, 21% 28%, 25% 28%, 25% 42%, 32% 42%, 32% 8%, 36% 8%, 36% 49%, 43% 49%, 43% 24%, 47% 24%, 47% 43%, 54% 43%, 54% 0, 58% 0, 58% 48%, 65% 48%, 65% 18%, 69% 18%, 69% 42%, 76% 42%, 76% 9%, 80% 9%, 80% 49%, 87% 49%, 87% 27%, 91% 27%, 91% 45%, 100% 45%, 100% 100%, 0 100%);
}

.build-cover-footer {
  grid-column: 1 / -1;
  grid-row: 3;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 12px;
  background: rgb(246 240 222 / 92%);
  border-top: 4px solid var(--ink);
}

.build-cover-number {
  color: var(--teal-dark, #073c42);
  font-family: var(--font-mono);
  font-size: clamp(10px, calc(2vh + 1px), 13px);
  font-weight: 900;
  text-transform: uppercase;
}

.build-cover-continue {
  min-height: 38px;
  padding: 6px 16px;
  color: var(--paper-white);
  background: var(--orange);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-display);
  font-size: clamp(13px, calc(2.8vh + 1px), 18px);
  text-transform: uppercase;
  cursor: pointer;
}

.build-cover-continue:hover,
.build-cover-continue:focus-visible {
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.update-available-notice {
  position: fixed;
  z-index: 1100;
  top: 9px;
  left: 50%;
  width: min(700px, calc(100vw - 18px));
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  color: var(--ink);
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 20%, rgb(255 255 255 / 28%), transparent 36%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(7 60 66 / 7%) 3px 4px),
    var(--teal-light);
  border: 4px solid var(--ink);
  box-shadow: 7px 7px 0 var(--teal-dark, #073c42), 0 16px 40px rgb(0 0 0 / 54%);
  transform: translateX(-50%) rotate(-0.35deg);
  animation: updateNoticeDrop 360ms cubic-bezier(0.18, 0.89, 0.32, 1.25) both;
}

.update-available-notice[hidden] {
  display: none !important;
}

.offline-install-notice {
  z-index: 1110;
  top: 86px;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 20%, rgb(255 255 255 / 28%), transparent 36%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(7 60 66 / 7%) 3px 4px),
    var(--teal-light);
  border-color: var(--ink);
  box-shadow: 7px 7px 0 var(--teal-dark, #073c42), 0 16px 40px rgb(0 0 0 / 54%);
}

.offline-install-notice .update-available-stamp {
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
}

.offline-install-notice .update-available-copy strong,
.offline-install-notice .update-available-copy span {
  color: var(--ink);
}

.offline-install-meter {
  width: 100%;
  height: 7px;
  margin-top: 5px;
  overflow: hidden;
  background: rgb(255 247 231 / 72%);
  border: 2px solid var(--ink);
}

.offline-install-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--orange);
  transition: width 180ms ease;
}

@keyframes updateNoticeDrop {
  from { opacity: 0; transform: translate(-50%, -28px) rotate(-1deg); }
  to { opacity: 1; transform: translate(-50%, 0) rotate(-0.35deg); }
}

.update-available-stamp {
  padding: 5px 7px 3px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display);
  font-size: clamp(14px, calc(3.6vh + 1px), 21px);
  line-height: 0.9;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.update-available-copy {
  min-width: 0;
  line-height: 1.05;
}

.update-available-copy strong,
.update-available-copy span {
  display: block;
}

.update-available-copy strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(16px, calc(4vh + 1px), 23px);
  text-transform: uppercase;
}

.update-available-copy span {
  color: var(--ink);
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: clamp(9px, calc(1.9vh + 1px), 12px);
  font-weight: 800;
}

.update-available-actions {
  display: flex;
  align-items: stretch;
  gap: 5px;
}

.update-available-actions a,
.update-available-actions button {
  min-height: 38px;
  padding: 5px 9px;
  border: 3px solid var(--ink);
  font-family: var(--font-display);
  font-size: clamp(11px, calc(2.5vh + 1px), 15px);
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.update-available-actions a {
  display: grid;
  place-items: center;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  text-decoration: none;
}

.update-available-actions button {
  color: var(--ink);
  background: var(--paper-white);
}

.title-utility-button:disabled,
.controls-download-button:disabled,
.update-available-actions button:disabled {
  cursor: wait;
  opacity: 0.78;
}

.update-available-actions a:hover,
.update-available-actions a:focus-visible,
.update-available-actions button:hover,
.update-available-actions button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

@media (max-width: 680px), (max-height: 360px) {
  .update-available-notice {
    top: 5px;
    width: calc(100vw - 10px);
    min-height: 58px;
    gap: 7px;
    padding: 5px 6px;
    border-width: 3px;
    box-shadow: 4px 4px 0 var(--teal-dark, #073c42), 0 10px 26px rgb(0 0 0 / 48%);
  }

  .offline-install-notice {
    top: 72px;
    box-shadow: 4px 4px 0 var(--teal-dark, #073c42), 0 10px 26px rgb(0 0 0 / 48%);
  }

  .update-available-stamp {
    padding: 4px 5px 2px;
    border-width: 2px;
    box-shadow: 2px 2px 0 var(--ink);
  }

  .update-available-copy span {
    max-width: 34ch;
  }

  .update-available-actions a,
  .update-available-actions button {
    min-height: 34px;
    padding: 4px 7px;
    border-width: 2px;
  }
}

.rotate-device-gate {
  display: none;
}

@media (orientation: portrait) and (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .rotate-device-gate {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--paper-white);
    background:
      radial-gradient(circle at 50% 34%, rgb(18 133 139 / 38%), transparent 42%),
      repeating-linear-gradient(0deg, transparent 0 3px, rgb(240 229 204 / 6%) 3px 4px),
      var(--navy);
  }

  .rotate-device-panel {
    position: relative;
    width: min(480px, 92vw);
    min-height: min(650px, 88svh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
    padding: clamp(24px, 6vh, 46px) 22px;
    color: var(--ink);
    text-align: center;
    background:
      radial-gradient(circle, rgb(11 15 18 / 8%) 0 1.2px, transparent 1.4px) 0 0 / 7px 7px,
      var(--paper);
    border: 6px solid var(--ink);
    box-shadow: 10px 10px 0 var(--orange), 0 24px 70px rgb(0 0 0 / 85%);
  }

  .rotate-device-kicker,
  .rotate-device-note {
    position: relative;
    z-index: 2;
    padding: 4px 9px;
    font-family: var(--font-mono);
    font-size: clamp(10px, calc(2.8vw + 1px), 13px);
    font-weight: 900;
    text-transform: uppercase;
  }

  .rotate-device-kicker {
    color: var(--paper-white);
    background: var(--teal-dark, #073c42);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
  }

  .rotate-device-illustration {
    position: relative;
    width: min(300px, 76vw);
    height: min(240px, 32svh);
    flex: 0 0 auto;
  }

  .rotate-phone {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 82px;
    height: 142px;
    display: grid;
    place-items: center;
    color: var(--paper-white);
    background: var(--teal-dark, #073c42);
    border: 7px solid var(--ink);
    border-radius: 15px;
    box-shadow: 8px 8px 0 var(--orange);
    transform-origin: 50% 50%;
    animation: rotatePhonePrompt 2.2s cubic-bezier(0.62, 0.02, 0.36, 1) infinite;
  }

  .rotate-phone::after {
    content: "";
    position: absolute;
    bottom: 5px;
    width: 22px;
    height: 4px;
    background: var(--paper);
    border-radius: 3px;
  }

  html[data-fold-prompt="open"] .rotate-device-panel {
    box-shadow: 10px 10px 0 var(--teal), 0 24px 70px rgb(0 0 0 / 85%);
  }

  html[data-fold-prompt="open"] .rotate-phone {
    width: 156px;
    height: 142px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: translate(-50%, -50%);
    animation: foldPhoneSettle 2.6s ease-in-out infinite;
    perspective: 520px;
  }

  html[data-fold-prompt="open"] .rotate-phone::before,
  html[data-fold-prompt="open"] .rotate-phone::after {
    content: "";
    position: absolute;
    top: 0;
    width: 76px;
    height: 132px;
    background:
      radial-gradient(circle at 50% 42%, rgb(240 229 204 / 22%) 0 2px, transparent 2.4px) 0 0 / 9px 9px,
      var(--teal-dark, #073c42);
    border: 6px solid var(--ink);
    border-radius: 12px 4px 4px 12px;
    box-shadow: 7px 8px 0 var(--orange);
    backface-visibility: hidden;
  }

  html[data-fold-prompt="open"] .rotate-phone::before {
    right: 50%;
    transform-origin: 100% 50%;
    animation: foldPhoneLeft 2.6s cubic-bezier(0.2, 0.72, 0.22, 1) infinite;
  }

  html[data-fold-prompt="open"] .rotate-phone::after {
    bottom: auto;
    left: 50%;
    transform-origin: 0 50%;
    border-radius: 4px 12px 12px 4px;
    animation: foldPhoneRight 2.6s cubic-bezier(0.2, 0.72, 0.22, 1) infinite;
  }

  html[data-fold-prompt="open"] .rotate-phone b {
    position: absolute;
    z-index: 4;
    top: 39px;
    left: 54px;
    transform: rotate(-4deg);
  }

  html[data-fold-prompt="open"] .rotate-arrow {
    font-size: 150px;
    transform: translate(-50%, -49%);
  }

  .rotate-phone b {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: var(--paper-white);
    background: var(--orange);
    border: 3px solid var(--ink);
    font-family: var(--font-display);
    font-size: 35px;
    transform: rotate(-4deg);
  }

  .rotate-arrow {
    position: absolute;
    z-index: 2;
    inset: 50% auto auto 50%;
    color: var(--orange);
    font-family: var(--font-display);
    font-size: 181px;
    line-height: 1;
    transform: translate(-50%, -51%);
    text-shadow: 3px 3px 0 var(--ink);
  }

  .rotate-city {
    position: absolute;
    right: 0;
    bottom: 8px;
    left: 0;
    height: 54px;
    opacity: 0.22;
    background: repeating-linear-gradient(90deg, var(--ink) 0 20px, transparent 20px 28px);
    clip-path: polygon(0 48%, 5% 48%, 5% 12%, 10% 12%, 10% 61%, 18% 61%, 18% 30%, 26% 30%, 26% 68%, 34% 68%, 34% 8%, 41% 8%, 41% 58%, 52% 58%, 52% 20%, 58% 20%, 58% 64%, 67% 64%, 67% 38%, 75% 38%, 75% 56%, 84% 56%, 84% 18%, 91% 18%, 91% 62%, 100% 62%, 100% 100%, 0 100%);
  }

  .rotate-device-panel h1 {
    position: relative;
    z-index: 2;
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(39px, calc(13vw + 1px), 67px);
    line-height: 0.92;
    text-transform: uppercase;
  }

  .rotate-device-panel p {
    position: relative;
    z-index: 2;
    max-width: 360px;
    color: #293432;
    font-family: var(--font-display);
    font-size: clamp(18px, calc(5vw + 1px), 26px);
    line-height: 1.05;
    text-transform: uppercase;
  }

  .rotate-device-note {
    color: var(--orange);
  }

  @keyframes rotatePhonePrompt {
    0%, 24% { transform: translate(-50%, -50%) rotate(0deg) scale(0.9); }
    55%, 82% { transform: translate(-50%, -50%) rotate(90deg) scale(1); }
    100% { transform: translate(-50%, -50%) rotate(90deg) scale(0.9); }
  }

  @keyframes foldPhoneSettle {
    0%, 22% { transform: translate(-50%, -50%) scale(0.9); }
    58%, 84% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(0.9); }
  }

  @keyframes foldPhoneLeft {
    0%, 22% { transform: rotateY(72deg); }
    58%, 84% { transform: rotateY(5deg); }
    100% { transform: rotateY(72deg); }
  }

  @keyframes foldPhoneRight {
    0%, 22% { transform: rotateY(-72deg); }
    58%, 84% { transform: rotateY(-5deg); }
    100% { transform: rotateY(-72deg); }
  }
}

@media (orientation: portrait) and (max-width: 900px) and (max-height: 620px) {
  .rotate-device-gate {
    place-items: start center;
  }

  .rotate-device-panel {
    min-height: 560px;
    margin-block: 12px;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .build-cover-card {
    min-height: 260px;
  }

  .build-cover-topline {
    min-height: 28px;
    padding-block: 3px;
  }

  .build-cover-seven {
    width: clamp(104px, 29vh, 150px);
    font-size: clamp(73px, calc(25vh + 1px), 113px);
  }

  .build-cover-copy {
    padding-block: 5px 10px;
  }

  .build-cover-copy h1 {
    font-size: clamp(37px, calc(13vh + 1px), 61px);
  }

  .build-cover-copy h2 {
    font-size: clamp(24px, calc(8vh + 1px), 39px);
  }

  .build-cover-copy p {
    margin-top: 7px;
  }

  .build-cover-footer {
    min-height: 48px;
    padding-block: 5px;
  }
}

.loading-screen {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(240 229 204 / 5%) 3px 4px),
    var(--navy);
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.loading-screen.ready {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-sheet {
  width: min(920px, calc(100vw - 24px));
  height: min(370px, calc(100svh - 24px));
  min-height: 250px;
  display: grid;
  grid-template-columns: minmax(170px, 29%) minmax(0, 1fr);
  overflow: hidden;
  background: var(--paper);
  border: 5px solid var(--ink);
  box-shadow: 11px 11px 0 rgb(0 0 0 / 72%);
}

.loading-portrait {
  min-width: 0;
  background:
    linear-gradient(rgb(18 133 139 / 18%), rgb(18 133 139 / 18%)),
    url("../characters/thomas-moorfield.png") center 15% / cover no-repeat,
    var(--paper-white);
  border-right: 5px solid var(--ink);
  filter: grayscale(1) contrast(1.35);
}

.loading-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(14px, 4vh, 30px);
  background:
    radial-gradient(circle, rgb(11 15 18 / 7%) 0 1px, transparent 1.2px) 0 0 / 7px 7px,
    var(--paper);
}

.loading-kicker,
.loading-dispatch-strip,
.loading-readout {
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
}

.loading-kicker {
  font-size: clamp(9px, calc(1.7vh + 1px), 12px);
  font-weight: 900;
  color: var(--teal-dark, #073c42);
}

.loading-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.loading-seven {
  width: clamp(52px, 13vh, 78px);
  height: clamp(52px, 13vh, 78px);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--paper-white);
  background: var(--orange);
  border: 4px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-display);
  font-size: clamp(35px, calc(9vh + 1px), 59px);
  transform: rotate(-3deg);
}

.loading-title-row h1 {
  max-width: 100%;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(35px, calc(10vh + 1px), 65px);
  line-height: 0.9;
  letter-spacing: 0;
  white-space: nowrap;
}

.loading-title-row p {
  margin-top: 6px;
  color: var(--orange);
  font-family: var(--font-display);
  font-size: clamp(12px, calc(2.8vh + 1px), 19px);
  letter-spacing: 0;
  text-transform: uppercase;
}

.loading-dispatch-strip {
  align-self: flex-start;
  max-width: 100%;
  padding: 4px 8px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  font-size: clamp(9px, calc(1.8vh + 1px), 12px);
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loading-meter {
  width: 100%;
  height: 18px;
  padding: 2px;
  background: var(--paper-white);
  border: 3px solid var(--ink);
}

.loading-meter-fill {
  width: 0;
  height: 100%;
  background: var(--orange);
  transition: width 180ms ease;
}

.loading-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  color: #313a37;
  font-size: clamp(9px, calc(1.8vh + 1px), 12px);
}

.loading-readout span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loading-readout strong {
  flex: 0 0 auto;
  color: var(--orange);
  font-family: var(--font-display);
  font-size: clamp(16px, calc(4vh + 1px), 23px);
}

.loading-enter-button {
  min-height: 40px;
  align-self: flex-start;
  padding: 6px 18px;
  color: var(--paper-white);
  background: var(--orange);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.loading-enter-button:hover,
.loading-enter-button:focus-visible {
  background: var(--teal-dark, #073c42);
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.btn-audio-controls {
  width: 31px;
  padding-inline: 0;
  font-family: var(--font-body);
  font-size: 17px;
}

.title-screen-footer {
  justify-content: center;
}

.title-channel-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -5px 0 5px;
  color: var(--teal-light);
  font-family: var(--font-mono);
  font-size: clamp(8px, calc(1.35vh + 1px), 10px);
  font-weight: 900;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}

.title-build-number {
  flex: 0 0 auto;
  padding: 2px 7px;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--cream);
  box-shadow: 2px 2px 0 #000;
  white-space: nowrap;
}

.title-age-advisory {
  position: absolute;
  z-index: 3;
  left: max(10px, var(--app-safe-left));
  bottom: 6px;
  width: 46px;
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--paper-white);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 rgb(0 0 0 / 68%);
  font-family: var(--font-display);
  line-height: 0.86;
  transform: rotate(-2deg);
}

.title-age-advisory strong {
  font-size: 24px;
  letter-spacing: -0.5px;
}

.title-age-advisory span {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: 0.25px;
}

.title-channel-line {
  padding-left: 54px;
}

.title-cover-stripe {
  min-height: 42px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 5px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--orange);
  font-family: var(--font-display);
}

.title-cover-stripe b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--paper-white);
  background: var(--orange);
  border: 2px solid var(--paper-white);
  font-size: 25px;
  line-height: 1;
  transform: rotate(-4deg);
}

.title-cover-stripe span {
  min-width: 0;
  font-size: clamp(12px, calc(2.5vh + 1px), 17px);
  letter-spacing: 0.4px;
}

.title-cover-stripe i {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.title-footer-actions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(76px, 0.2fr) minmax(98px, 0.25fr) minmax(86px, 0.22fr) minmax(260px, 1fr) minmax(130px, 0.34fr);
  align-items: stretch;
  gap: 8px;
}

.title-footer-stack {
  width: min(900px, 100%);
  display: grid;
  justify-items: center;
  gap: 6px;
}

.title-copyright {
  color: rgba(244, 237, 217, 0.72);
  font-family: var(--font-mono);
  font-size: clamp(9px, calc(1.35vh + 1px), 11px);
  font-weight: 700;
  letter-spacing: 0.25px;
  line-height: 1.15;
  text-align: center;
}

.title-copyright a {
  color: var(--teal-light);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.title-copyright a:hover,
.title-copyright a:focus-visible {
  color: var(--paper-white);
}

.music-credits-overlay {
  overflow: hidden;
  background: rgb(4 12 15 / 94%);
}

.music-credits-box {
  width: min(900px, calc(100vw - 18px));
  max-height: calc(100svh - 18px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--ink);
  background:
    radial-gradient(circle, rgb(11 15 18 / 7%) 0 1px, transparent 1.2px) 0 0 / 7px 7px,
    var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--teal);
  overflow: hidden;
}

.music-credits-header {
  height: auto;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42) !important;
  border-bottom: 4px solid var(--ink);
}

.music-credits-kicker {
  display: block;
  color: var(--teal-light);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.music-credits-header h2 {
  margin: 1px 0 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 5vh, 42px);
  letter-spacing: 0.5px;
  line-height: 0.95;
  text-transform: uppercase;
}

.music-credits-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  color: var(--paper-white);
  background: var(--orange);
  border: 3px solid var(--ink);
  box-shadow: 2px 2px 0 #000;
  font-size: 23px;
  cursor: pointer;
}

.music-credits-body {
  min-height: 0;
  display: grid;
  gap: 9px;
  padding: 10px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.music-credits-intro,
.music-credits-loop-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
}

.music-credits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.music-credit-card {
  min-width: 0;
  padding: 8px 10px;
  background: var(--paper-white);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--teal);
}

.music-credit-card > span {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.music-credit-card h3 {
  margin: 2px 0 1px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
}

.music-credit-card p {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.2;
}

.music-credit-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
}

.music-credit-card a {
  color: var(--teal-dark, #073c42);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
}

.music-credit-scoreboard {
  box-shadow: 3px 3px 0 var(--gold);
}

.music-credits-loop-note {
  padding: 5px 7px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

.music-credits-footer {
  padding: 7px 12px 10px;
  border-top: 3px solid var(--ink);
}

.music-credits-footer button {
  width: 100%;
  min-height: 38px;
  color: var(--paper-white);
  background: var(--teal);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
}

.title-utility-button {
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 3px solid var(--paper);
  box-shadow: 3px 3px 0 #000;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.title-utility-button:hover,
.title-utility-button:focus-visible {
  color: var(--paper-white);
  background: var(--orange);
  outline: 2px solid var(--paper-white);
  outline-offset: 2px;
}

.title-how-to-button {
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
}

.title-how-to-button span:first-child {
  width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-family: var(--font-display);
}

/* Illustrated, code-animated field manual. */
.tutorial-overlay {
  background:
    radial-gradient(circle at 50% 46%, rgb(18 133 139 / 22%), transparent 50%),
    rgb(7 16 20 / 98%);
}

.tutorial-box {
  width: min(1120px, 100%);
  height: min(650px, calc(100svh - 14px));
  max-height: calc(100svh - 14px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle, rgb(11 15 18 / 7%) 0 1px, transparent 1.2px) 0 0 / 7px 7px,
    var(--paper);
  border: 5px solid var(--ink);
  box-shadow: 10px 10px 0 var(--orange), 0 24px 70px rgb(0 0 0 / 84%);
}

.tutorial-header {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border-bottom: 4px solid var(--ink);
}

.tutorial-kicker,
.tutorial-step-number {
  font-family: var(--font-mono);
  font-size: clamp(8px, calc(1.7vh + 1px), 11px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tutorial-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, calc(7vh + 1px), 43px);
  line-height: 0.88;
  text-transform: uppercase;
}

.tutorial-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--paper-white);
  background: var(--orange);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display);
  font-size: 29px;
  line-height: 1;
  cursor: pointer;
}

.tutorial-progress {
  min-height: 30px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
  padding: 4px 7px;
  background: var(--ink);
}

.tutorial-progress button {
  min-width: 0;
  padding: 2px 3px;
  overflow: hidden;
  color: var(--cream-dim);
  background: #253033;
  border: 1px solid #536065;
  font-family: var(--font-display);
  font-size: clamp(8px, calc(1.8vh + 1px), 11px);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.tutorial-progress button.active {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--paper);
}

.tutorial-stage {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 29%);
  gap: 8px;
  padding: 8px;
  overflow: hidden;
}

.tutorial-capture-frame {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #020709;
  border: 4px solid var(--ink);
  box-shadow: 5px 5px 0 var(--teal);
}

.tutorial-capture-frame::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background: rgb(2 7 9 / 46%);
  pointer-events: none;
}

.tutorial-capture-frame.is-changing {
  animation: tutorialPanelChange 360ms cubic-bezier(0.18, 0.89, 0.32, 1.25) both;
}

.tutorial-capture-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #020709;
}

.tutorial-focus-box {
  position: absolute;
  z-index: 4;
  left: calc(var(--focus-x, 5) * 1%);
  top: calc(var(--focus-y, 5) * 1%);
  width: calc(var(--focus-w, 30) * 1%);
  height: calc(var(--focus-h, 30) * 1%);
  border: clamp(2px, 0.35vw, 4px) solid var(--gold);
  box-shadow: 0 0 0 999px rgb(2 7 9 / 38%), 0 0 18px var(--gold);
  animation: tutorialFocusPulse 1.25s ease-in-out infinite alternate;
}

.tutorial-arrow {
  position: absolute;
  z-index: 6;
  left: calc(var(--arrow-x, 50) * 1%);
  top: calc(var(--arrow-y, 50) * 1%);
  color: var(--orange);
  font-family: var(--font-display);
  font-size: clamp(32px, calc(6vw + 1px), 73px);
  line-height: 0.7;
  text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--paper-white);
  transform: translate(-50%, -50%) rotate(calc(var(--arrow-angle, 0) * 1deg));
  transform-origin: 50% 50%;
  animation: tutorialArrowPoint 720ms ease-in-out infinite alternate;
}

.tutorial-screen-label {
  position: absolute;
  z-index: 7;
  left: calc(var(--label-x, 50) * 1%);
  top: calc(var(--label-y, 50) * 1%);
  max-width: 42%;
  padding: 3px 7px;
  color: var(--paper-white);
  background: var(--orange);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display);
  font-size: clamp(9px, calc(2.2vh + 1px), 14px);
  line-height: 1;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-1deg);
  animation: tutorialLabelPop 420ms cubic-bezier(0.18, 0.89, 0.32, 1.3) both;
}

.tutorial-copy {
  min-width: 0;
  padding: clamp(8px, 1.4vw, 15px);
  overflow: hidden;
  color: var(--paper-white);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(240 229 204 / 5%) 3px 4px),
    var(--teal-dark, #073c42);
  border: 4px solid var(--ink);
  box-shadow: 5px 5px 0 var(--gold);
}

.tutorial-copy.is-changing > * {
  animation: tutorialCopyIn 430ms cubic-bezier(0.18, 0.89, 0.32, 1.2) both;
}

.tutorial-step-number {
  display: inline-block;
  padding: 3px 6px;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
}

.tutorial-copy h3 {
  margin: clamp(6px, 1.8vh, 12px) 0;
  color: var(--paper-white);
  font-family: var(--font-display);
  font-size: clamp(22px, calc(5.8vh + 1px), 37px);
  line-height: 0.94;
  text-transform: uppercase;
}

.tutorial-copy p {
  color: var(--paper-white);
  font-family: var(--font-body);
  font-size: clamp(11px, calc(2.6vh + 1px), 16px);
  line-height: 1.27;
}

.tutorial-tip {
  margin-top: clamp(8px, 2vh, 14px);
  padding: 6px 8px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-left: 8px solid var(--orange);
  font-family: var(--font-mono);
  font-size: clamp(9px, calc(2.05vh + 1px), 12px);
  font-weight: 700;
  line-height: 1.2;
}

.tutorial-footer {
  min-height: 43px;
  display: grid;
  grid-template-columns: minmax(110px, 0.4fr) minmax(125px, 0.45fr) minmax(110px, 0.4fr);
  justify-content: center;
  gap: 7px;
  padding: 5px 8px;
  background: var(--ink);
}

.tutorial-footer button {
  min-height: 31px;
  padding: 3px 9px;
  color: var(--paper-white);
  background: #293539;
  border: 2px solid #536065;
  font-family: var(--font-display);
  font-size: clamp(10px, calc(2.4vh + 1px), 14px);
  text-transform: uppercase;
  cursor: pointer;
}

.tutorial-footer .next,
.tutorial-auto-button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--paper);
}

.tutorial-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

@keyframes tutorialPanelChange {
  0% { opacity: 0.3; transform: translateX(24px) rotate(0.7deg) scale(0.97); }
  100% { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}

@keyframes tutorialCopyIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes tutorialFocusPulse {
  from { filter: brightness(0.92); transform: scale(0.985); }
  to { filter: brightness(1.2); transform: scale(1.015); }
}

@keyframes tutorialArrowPoint {
  from { margin-left: -8px; }
  to { margin-left: 8px; }
}

@keyframes tutorialLabelPop {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-5deg) scale(0.6); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-1deg) scale(1); }
}

.offline-download-copy {
  display: grid;
  gap: 2px;
}

.offline-download-copy b {
  font: inherit;
}

.offline-download-copy small {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0;
}

.title-update-status-button {
  gap: 0;
  padding-inline: 3px;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.title-update-status-button .offline-download-copy {
  width: 100%;
  min-width: 0;
}

.title-update-status-button[data-update-state="current"],
.title-update-status-button[data-update-state="applied"] {
  background: var(--teal-dark, #073c42);
  border-color: var(--teal-light);
}

.title-update-status-button[data-update-state="store"] {
  color: var(--cream);
  background: #07515a;
  border-color: var(--teal-light);
  box-shadow: inset 0 0 0 1px rgb(71 226 207 / 25%);
}

.title-update-status-button[data-update-state="store"] .offline-download-copy small {
  color: var(--teal-light);
}

.title-update-status-button[data-update-state="storing"] {
  color: var(--cream);
  background: #173e43;
  border-color: var(--teal);
}

.title-update-status-button[data-update-state="retry"] {
  color: var(--cream);
  background: #6b281d;
  border-color: var(--orange);
}

.title-update-status-button[data-update-state="ready"] {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--paper-white);
}

.title-update-status-button[data-update-state="ready"] .offline-download-copy small {
  color: var(--ink);
}

.title-update-status-button[data-update-state="offline"],
.title-update-status-button[data-update-state="check-failed"],
.title-update-status-button[data-update-state="unavailable"] {
  background: #273138;
  border-color: var(--cream-dim);
}

.title-update-status-button .offline-download-copy small {
  font-size: 7px;
  white-space: nowrap;
}

.title-footer-actions .btn-start-game-cta {
  max-width: none;
}

.controls-box {
  max-width: 760px;
  height: auto;
  max-height: calc(100svh - 12px);
}

.controls-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.controls-kicker {
  margin-bottom: 1px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.controls-close-button,
.audio-mute-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--paper-white);
  background: var(--orange);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
}

.controls-close-button {
  width: 32px;
  height: 32px;
  font-size: 23px;
  line-height: 1;
}

.controls-body {
  display: grid;
  gap: 8px;
  padding: 12px;
  color: var(--ink);
}

.audio-channel-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(125px, 0.32fr) minmax(170px, 1fr) 48px 36px;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  background: var(--paper-white);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--teal-dark, #073c42);
}

.audio-channel-label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.audio-channel-label span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  flex: 0 0 auto;
  color: var(--paper-white);
  background: var(--orange);
  border: 2px solid var(--ink);
}

.audio-slider {
  width: 100%;
  min-width: 0;
  height: 26px;
  margin: 0;
  accent-color: var(--orange);
  cursor: pointer;
}

.audio-value {
  color: var(--teal-dark, #073c42);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.audio-mute-button {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 15px;
}

.audio-mute-button[aria-pressed="true"] {
  background: var(--red);
}

.controls-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.controls-download-button {
  margin-right: auto;
  text-decoration: none;
}

.phone-call-status {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 7px 10px;
  color: var(--teal-light);
  background: rgb(0 114 124 / 16%);
  border: 2px solid var(--teal);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

#btn-hangup-phone:disabled {
  opacity: 0.62;
  cursor: wait;
}

.offline-edition .title-utility-button[href*="crisis-cards-offline"],
.offline-edition .controls-download-button {
  display: none;
}

.offline-edition .title-footer-actions {
  grid-template-columns: minmax(76px, 0.2fr) minmax(98px, 0.25fr) minmax(86px, 0.22fr) minmax(280px, 1fr) minmax(100px, 0.26fr);
}

@media (orientation: landscape) and (max-height: 500px) {
  .loading-screen {
    padding: 8px;
  }

  .loading-sheet {
    width: min(780px, calc(100vw - 16px));
    height: min(320px, calc(100svh - 16px));
    min-height: 230px;
    grid-template-columns: minmax(150px, 26%) minmax(0, 1fr);
  }

  .loading-content {
    gap: 7px;
    padding: 10px 14px;
  }

  .loading-title-row h1 {
    font-size: clamp(33px, calc(12vh + 1px), 49px);
  }

  .loading-title-row p {
    margin-top: 3px;
    font-size: clamp(11px, calc(3.2vh + 1px), 14px);
  }

  .loading-seven {
    width: 54px;
    height: 54px;
    font-size: 39px;
  }

  .loading-meter {
    height: 15px;
  }

  .brand-sub,
  .thomas-dialogue,
  .title-how-to-grid,
  .hand-bottom-action-bar > span,
  .props-top-control-bar > div:last-child {
    display: none !important;
  }

  .brand-title {
    font-size: 13px;
  }

  .status-hud {
    gap: 4px;
  }

  .stat-pill {
    gap: 2px;
    font-size: 11px;
  }

  .opinion-bar-wrap {
    width: 27px;
  }

  .btn-call-levine-header,
  .btn-header-icon {
    min-height: 34px;
    padding-inline: 7px;
    font-size: 13px;
  }

  .header-action-icon {
    font-size: 19px;
  }

  .header-action-label {
    font-size: 13px;
  }

  .top-view-tab-btn {
    font-size: clamp(11.5px, calc(1.55vw + 1px), 13px);
  }

  .carousel-stage {
    height: 100% !important;
  }

  .carousel-card {
    width: clamp(255px, 38vw, 310px) !important;
    height: clamp(180px, 54vh, 216px) !important;
  }

  .carousel-card.pos-left {
    transform: translateX(clamp(-300px, -31vw, -185px)) translateZ(-80px) scale(0.8) rotateY(10deg);
  }

  .carousel-card.pos-right {
    transform: translateX(clamp(185px, 31vw, 300px)) translateZ(-80px) scale(0.8) rotateY(-10deg);
  }

  .card-title {
    font-size: clamp(16px, calc(4.2vh + 1px), 20px) !important;
  }

  .card-description {
    padding: 2px 5px !important;
    font-size: 10px !important;
  }

  .card-how-to-beat {
    padding: 2px 5px;
    font-size: 9px;
  }

  .hand-carousel-item {
    width: clamp(195px, 27vw, 235px) !important;
  }

  .prop-carousel-item {
    width: clamp(245px, 34vw, 290px) !important;
    height: clamp(164px, 43vh, 176px) !important;
    flex-direction: row;
    align-items: stretch;
    gap: 4px !important;
  }

  .hand-carousel-item {
    width: clamp(215px, 29vw, 250px) !important;
    height: min(174px, calc(100% - 8px)) !important;
    max-height: calc(100% - 8px) !important;
    padding: 4px !important;
  }

  .hand-carousel-item .p-card-art {
    flex-basis: 46% !important;
    min-height: 46% !important;
  }

  .hand-carousel-item .p-card-bottom-content {
    min-height: 0;
    overflow: hidden;
  }

  .hand-carousel-item .p-card-rules {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .hand-carousel-item .btn-play-trigger {
    min-height: 23px;
    padding: 2px 3px;
    font-size: 10px;
  }

  .prop-carousel-item {
    padding: 4px !important;
  }

  .p-card-art {
    height: auto !important;
    min-height: 56% !important;
  }

  .prop-tile-art {
    flex: 0 0 42% !important;
    width: 42%;
    height: 100% !important;
    min-height: 0 !important;
    padding: 2px;
  }

  .prop-tile-bottom-content {
    flex: 1 1 auto;
    width: 58%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    margin-top: 0;
    overflow: hidden;
  }

  .prop-tile-header {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .prop-tile-name {
    font-size: 13px;
    line-height: 1.02;
  }

  .prop-tile-perk {
    align-self: flex-start;
    max-width: 100%;
    padding: 1px 3px;
    overflow: hidden;
    font-size: 9.5px;
    text-overflow: ellipsis;
  }

  .prop-tile-desc {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.14;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .prop-carousel-item .btn-deploy-prop {
    min-height: 24px;
    margin-top: auto;
    padding: 2px;
    font-size: 10.5px;
  }

  .hand-top-control-bar,
  .props-top-control-bar {
    min-height: 28px;
    flex-wrap: nowrap;
  }

  .hand-target-info-pill,
  .props-info-pill {
    max-width: 43%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hand-bottom-action-bar {
    min-height: 38px;
  }

  .title-screen-box,
  .crisis-splash-box,
  .modal-box {
    height: calc(100svh - 8px);
    max-height: calc(100svh - 8px);
  }

  .screen-overlay,
  .newspaper-modal {
    padding: 4px;
  }

  .title-hero-header {
    flex: 0 0 68px;
    min-height: 65px;
    padding: 4px 10px;
    overflow: hidden;
  }

  .title-tag-badge {
    display: none;
    padding: 1px 7px;
    margin-bottom: 1px;
    font-size: 8px;
  }

  .title-main-logo {
    gap: 1px;
    font-size: 31px;
  }

  .title-main-logo-world {
    font-size: 0.49em;
    line-height: 1;
    letter-spacing: 0.5px;
  }

  .title-sub-logo {
    display: none;
  }

  .title-body-content {
    padding: 5px 8px;
    gap: 5px;
    justify-content: stretch;
  }

  .title-approval-hero-card {
    flex: 1.45 1 0;
    justify-content: center;
  }

  .title-story-card {
    flex: 0.8 1 0;
  }

  .title-approval-hero-card {
    padding: 4px 7px;
  }

  .title-approval-top {
    font-size: 9px;
  }

  .title-approval-number-wrap {
    min-width: 102px;
    padding: 3px 6px;
  }

  .title-approval-big-percent {
    font-size: 39px;
  }

  .title-approval-bar-labels {
    font-size: 8px;
  }

  .title-approval-desc {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.18;
  }

  .title-story-card {
    min-height: 56px;
  }

  .title-avatar-portrait {
    width: 48px;
    height: 48px;
  }

  .title-story-text h3 {
    margin-bottom: 1px !important;
    font-size: 12px !important;
  }

  .title-story-text p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10px !important;
    line-height: 1.18 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .title-screen-footer {
    min-height: 42px;
    padding: 4px 8px;
  }

  .title-channel-line {
    margin: -2px 0 2px;
    font-size: 8px;
  }

  .title-build-number {
    padding: 1px 5px;
  }

  .title-cover-stripe {
    display: none;
  }

  .title-footer-actions {
    grid-template-columns: 64px 84px 72px minmax(190px, 1fr) 124px;
    gap: 6px;
  }

  .title-utility-button {
    min-height: 34px;
    padding: 4px 6px;
    font-size: 10px;
  }

  .btn-start-game-cta {
    min-height: 34px;
    font-size: 12px;
  }

  .tutorial-box {
    height: calc(100svh - 8px);
    max-height: calc(100svh - 8px);
  }

  .tutorial-header {
    min-height: 43px;
    padding: 3px 8px;
  }

  .tutorial-header h2 {
    font-size: clamp(25px, calc(7.8vh + 1px), 35px);
  }

  .tutorial-close {
    width: 31px;
    height: 31px;
    font-size: 24px;
  }

  .tutorial-progress {
    min-height: 24px;
    padding: 3px 6px;
  }

  .tutorial-stage {
    grid-template-columns: minmax(0, 1fr) minmax(175px, 28%);
    gap: 6px;
    padding: 6px;
  }

  .tutorial-copy {
    padding: 7px;
  }

  .tutorial-copy h3 {
    margin: 5px 0;
    font-size: clamp(21px, calc(5.8vh + 1px), 29px);
  }

  .tutorial-copy p {
    font-size: clamp(10px, calc(2.55vh + 1px), 13px);
  }

  .tutorial-tip {
    margin-top: 6px;
    padding: 4px 6px;
  }

  .tutorial-footer {
    min-height: 37px;
    padding: 3px 7px;
  }

  .controls-box {
    width: min(760px, calc(100vw - 8px));
    height: auto;
    max-height: calc(100svh - 8px);
  }

  .controls-body {
    gap: 5px;
    padding: 6px 8px;
  }

  .audio-channel-row {
    min-height: 48px;
    grid-template-columns: minmax(115px, 0.3fr) minmax(160px, 1fr) 44px 32px;
    gap: 7px;
    padding: 4px 7px;
  }

  .audio-channel-label {
    font-size: 12px;
  }

  .audio-channel-label span {
    width: 24px;
    height: 24px;
  }

  .audio-mute-button {
    width: 30px;
    height: 30px;
  }

  .controls-footer {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .controls-footer .btn {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 10px;
  }

  .modal-header {
    min-height: 35px;
    padding: 4px 8px;
  }

  .modal-header h2 {
    font-size: 16px;
  }

  .modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .thomas-profile-hero {
    min-height: 42px;
  }

  .thomas-avatar-frame {
    width: 35px;
    height: 35px;
  }

  .thomas-hero-name {
    font-size: 13px;
  }

  .mood-card {
    padding: 3px 5px;
  }

  .mood-name {
    font-size: 10px;
  }

  .mood-score {
    font-size: 11px;
  }

  .btn-stat-roll {
    min-height: 23px;
    font-size: 9px;
  }

  .mood-effect {
    font-size: 9px;
  }

  .modal-footer {
    min-height: 40px;
    padding: 3px 8px;
  }

  .splash-hero-header {
    min-height: 54px;
    padding: 3px 10px;
  }

  .splash-body-content {
    padding: 5px 7px;
  }

  .splash-body-content > div:last-child {
    gap: 7px !important;
  }

  .comic-caption-box,
  .comic-speech-bubble,
  .splash-tactical-intel-box {
    font-size: clamp(12.5px, calc(3vh + 1px), 14px);
    line-height: 1.22;
  }

  .comic-caption-box,
  .comic-speech-bubble {
    min-height: 56px;
    padding: 7px 9px;
  }

  .comic-caption-box strong {
    font-size: 13px;
  }

  .splash-tactical-intel-box {
    min-height: 74px;
    padding: 7px 9px;
  }

  .splash-speaker-label {
    font-size: 11.5px;
  }

  .splash-props-note {
    margin-top: 4px;
    font-size: 12.5px;
  }

  .speech-bubble-avatar {
    width: 44px;
    height: 44px;
  }

  .splash-action-footer {
    min-height: 42px;
    padding: 4px 8px;
  }

  .focused-crisis-art {
    min-height: 110px !important;
  }

  .focused-crisis-quote {
    display: none;
  }

  .focused-crisis-desc,
  .focused-crisis-rec {
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  .dice-owner-badge {
    min-width: 130px;
    padding: 3px 7px;
  }

  .dice-top-heading {
    padding: 3px 8px;
    font-size: 12px;
  }

  .dice-result-card {
    max-width: 55vw;
    padding: 5px 8px;
  }

  .dice-result-title {
    font-size: 18px;
  }

  .dice-result-desc {
    font-size: 11px;
  }

  .newspaper-sheet {
    width: 100%;
    max-width: 1040px;
    height: calc(100svh - 8px);
    max-height: calc(100svh - 8px);
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 4px 8px;
    padding: 7px;
    overflow: hidden;
  }

  .news-masthead,
  .news-headline,
  .newspaper-sheet > button {
    grid-column: 1 / -1;
  }

  .news-paper-name {
    font-size: clamp(26px, calc(7.4vh + 1px), 39px);
  }

  .news-headline {
    overflow: hidden;
    font-size: clamp(26px, calc(8.5vh + 1px), 44px);
    line-height: 0.9;
  }

  .news-body-grid {
    grid-column: 1 / -1;
    grid-template-columns: minmax(72px, 15%) minmax(200px, 47%) minmax(155px, 38%);
    gap: 5px;
    min-height: 0;
  }

  .news-photo-box {
    align-self: stretch;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    aspect-ratio: auto;
    background-position: center;
  }

  .news-article-snippet {
    min-width: 0;
    font-size: clamp(10.5px, calc(2.9vh + 1px), 12.5px);
    line-height: 1.25;
  }

  .news-opinion-delta {
    margin-top: 3px;
    padding: 4px 7px;
    font-size: clamp(17px, calc(4.3vh + 1px), 21px);
    line-height: 1.02;
  }

  .news-continue-button {
    min-height: 30px;
    margin-top: 0;
  }

  .mission-complete-burst {
    width: min(760px, 92vw);
    padding: clamp(18px, 5vh, 26px) clamp(44px, 9vw, 72px);
  }

  .mission-complete-burst strong {
    font-size: clamp(38px, calc(14vh + 1px), 64px);
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 720px) {
  .brand > div:last-child,
  .stat-pill.streak,
  .opinion-bar-wrap {
    display: none;
  }

  .status-hud {
    gap: 3px;
  }
}

@media (min-width: 1100px) and (min-height: 700px) {
  header {
    height: 68px;
    padding: 7px 22px;
  }

  .brand-atom {
    width: 45px;
    height: 45px;
    font-size: 32px;
  }

  .brand-title {
    font-size: 20px;
  }

  .brand-sub {
    font-size: 11px;
  }

  .status-hud {
    gap: 14px;
  }

  .stat-pill {
    font-size: 13px;
  }

  main {
    height: calc(100% - 68px);
    padding: 8px 12px 12px;
    gap: 7px;
  }

  .top-nav-switcher-bar {
    height: 52px;
  }

  .top-view-tab-btn {
    min-height: 48px;
    font-size: 17px;
  }

  .tab-icon-badge {
    font-size: 11px;
  }

  .sector-top-control-bar {
    min-height: 38px;
  }

  .sector-recon-pill,
  #sector-top-crisis-counter {
    font-size: 14px !important;
  }

  .carousel-card {
    width: clamp(330px, 28vw, 430px);
    height: clamp(360px, 56vh, 520px);
  }

  .carousel-card.pos-left {
    transform: translateX(clamp(-470px, -30vw, -330px)) translateZ(-100px) scale(0.82) rotateY(12deg);
  }

  .carousel-card.pos-right {
    transform: translateX(clamp(330px, 30vw, 470px)) translateZ(-100px) scale(0.82) rotateY(-12deg);
  }

  .card-title {
    font-size: clamp(25px, calc(3.3vh + 1px), 35px);
  }

  .card-description {
    font-size: 14px;
  }

  .card-how-to-beat {
    font-size: 13px;
  }

  .hand-carousel-item {
    width: clamp(300px, 25vw, 370px);
  }

  .prop-carousel-item {
    width: clamp(275px, 23vw, 340px);
  }

  .hand-carousel-item,
  .prop-carousel-item {
    height: clamp(390px, 61vh, 520px);
    padding: 8px;
  }

  .p-card-title,
  .prop-tile-name {
    font-size: 20px;
  }

  .p-card-rules,
  .prop-tile-desc {
    font-size: 14px;
  }

  .title-screen-box,
  .crisis-splash-box {
    height: auto;
    max-height: 92vh;
  }

  .title-hero-header {
    min-height: 96px;
    padding: 13px 18px;
  }

  .title-main-logo {
    font-size: 49px;
  }

  .title-body-content {
    padding: 14px 18px;
    gap: 12px;
  }

  .title-screen-footer {
    padding: 10px 18px;
  }

  .splash-hero-header {
    min-height: 96px;
    padding: 12px 18px;
  }

  .splash-hero-title {
    font-size: 43px;
  }

  .splash-body-content {
    min-height: 420px;
    padding: 14px 18px;
    grid-template-columns: minmax(360px, 43%) minmax(0, 1fr);
    gap: 18px;
  }

}

@media (orientation: portrait) {
  .loading-sheet {
    height: min(620px, calc(100svh - 24px));
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px, 34%) minmax(0, 1fr);
  }

  .loading-portrait {
    border-right: 0;
    border-bottom: 5px solid var(--ink);
    background-position: center 20%;
  }

  .loading-content {
    padding: 14px;
  }

  .loading-title-row h1 {
    font-size: clamp(31px, calc(8vh + 1px), 49px);
  }

  .title-footer-actions {
    grid-template-columns: 40px 40px 40px minmax(0, 1fr) 40px;
    gap: 5px;
  }

  .title-footer-stack {
    gap: 3px;
  }

  .title-copyright {
    font-size: 8px;
  }

  .title-utility-button span:last-child {
    display: none;
  }

  .title-utility-button {
    min-width: 0;
    padding-inline: 0;
    font-size: 18px;
  }

  .controls-box {
    height: auto;
  }

  .controls-body {
    overflow-y: auto;
  }

  .audio-channel-row {
    grid-template-columns: minmax(0, 1fr) 48px 36px;
  }

  .audio-channel-label {
    grid-column: 1 / -1;
  }

  .controls-footer {
    flex-wrap: wrap;
  }

  .controls-download-button {
    width: 100%;
    margin-right: 0;
  }

  .screen-overlay,
  .newspaper-modal {
    align-items: flex-start;
    overflow-y: auto;
  }

  .title-screen-box,
  .crisis-splash-box,
  .modal-box {
    height: auto;
    max-height: none;
  }

  .title-body-content,
  .modal-body,
  .splash-body-content {
    overflow-y: auto;
  }

  .mood-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Score changes are information, not ornamental motion. Keep them readable for
   players who use Reduce Motion, using a stationary fade instead of travel. */
@keyframes arcadeScoreReducedMotion {
  0% { opacity: 0; transform: translate(calc(-50% + var(--arcade-x)), 0) scale(0.96); }
  10%, 82% { opacity: 1; transform: translate(calc(-50% + var(--arcade-x)), 0) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--arcade-x)), 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .arcade-score-popup,
  .arcade-score-popup.emphasis {
    animation: arcadeScoreReducedMotion 2350ms ease-out forwards !important;
  }
}

/* Keep every interactive panel clear of landscape phone camera cut-outs. */
.screen-overlay,
.newspaper-modal,
.sector-transit-banner-overlay,
.mission-complete-overlay,
.dice-fullscreen-overlay,
.loading-screen,
.rotate-device-gate,
.comic-action-burst-overlay {
  padding-right: var(--app-safe-right);
  padding-left: var(--app-safe-left);
}

.update-available-notice,
.offline-install-notice {
  width: min(700px, calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 8px));
}

/* Build 33: readable setup, named local scores and a genuinely scrollable
   title dossier on short landscape phones. */
.title-screen-box {
  min-height: 0;
}

.title-body-content {
  min-height: 0;
  justify-content: flex-start;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.title-patrol-goal,
.title-screen-footer,
.title-hero-header {
  flex-shrink: 0;
}

.mood-name {
  font-size: 13.5px;
  line-height: 1.05;
}

.mood-score {
  font-size: 13px;
}

.mood-effect {
  padding: 3px 5px;
  overflow: visible;
  color: #182624;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: clip;
  white-space: normal;
}

.shift-player-name-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(180px, 0.75fr) auto;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px;
  color: var(--ink);
  background: #fff8e7;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--teal);
}

.shift-player-name-row label span {
  display: block;
  margin-top: 1px;
  font: 800 9px var(--font-mono);
  color: #42514d;
}

.shift-player-name-row input {
  min-width: 0;
  min-height: 36px;
  padding: 5px 8px;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  font: 900 16px var(--font-mono);
  text-transform: uppercase;
}

.shift-player-name-row button {
  min-height: 36px;
  padding: 5px 11px;
  color: #fff;
  background: var(--orange);
  border: 3px solid var(--ink);
  font: 900 12px var(--font-display);
  text-transform: uppercase;
  cursor: pointer;
}

#shift-player-name-status {
  grid-column: 1 / -1;
  min-height: 12px;
  color: var(--teal-dark, #073c42);
  font: 800 10px var(--font-mono);
}

.records-table {
  min-width: 850px;
}

.record-player {
  font-weight: 900;
  text-transform: uppercase;
}

/* The result verdict now follows the score tally and fills the screen like an
   arcade/comic impact card instead of being lost behind the point popups. */
.comic-action-burst-overlay {
  z-index: 1700;
}

.comic-burst-star {
  width: min(1060px, 94vw);
  min-height: min(58vh, 390px);
  padding: clamp(30px, 7vh, 64px) clamp(56px, 10vw, 124px);
}

.comic-burst-title {
  width: min(70%, 730px);
  margin-inline: auto;
  font-size: clamp(40px, calc(11vh + 1px), 80px);
  line-height: 0.94;
  text-wrap: balance;
}

.comic-burst-subtitle {
  width: min(62%, 620px);
  margin-inline: auto;
  font-size: clamp(19px, calc(4.8vh + 1px), 34px);
  line-height: 1;
  text-wrap: balance;
}

.comic-burst-star.long-copy .comic-burst-title {
  font-size: clamp(34px, calc(9vh + 1px), 66px);
}

.comic-burst-star.long-copy .comic-burst-subtitle {
  font-size: clamp(17px, calc(4vh + 1px), 29px);
}

/* A Venetian-blind reveal is deliberately 2D and phone-safe. Ten opaque
   strips slide away in alternating directions, revealing the settled paper. */
.newspaper-venetian-blinds {
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
}

.newspaper-venetian-blinds i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 10.25%;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 4%) 0 2px, transparent 2px 5px),
    #071116;
  border-bottom: 2px solid rgb(240 229 204 / 38%);
  box-shadow: 0 3px 10px rgb(0 0 0 / 55%);
}

.newspaper-venetian-blinds i:nth-child(1) { top: 0%; }
.newspaper-venetian-blinds i:nth-child(2) { top: 10%; }
.newspaper-venetian-blinds i:nth-child(3) { top: 20%; }
.newspaper-venetian-blinds i:nth-child(4) { top: 30%; }
.newspaper-venetian-blinds i:nth-child(5) { top: 40%; }
.newspaper-venetian-blinds i:nth-child(6) { top: 50%; }
.newspaper-venetian-blinds i:nth-child(7) { top: 60%; }
.newspaper-venetian-blinds i:nth-child(8) { top: 70%; }
.newspaper-venetian-blinds i:nth-child(9) { top: 80%; }
.newspaper-venetian-blinds i:nth-child(10) { top: 90%; }

.newspaper-modal:not(.hidden) .newspaper-venetian-blinds i {
  animation: newspaperBlindRight 720ms cubic-bezier(0.22, 0.74, 0.24, 1) both;
}

.newspaper-modal:not(.hidden) .newspaper-venetian-blinds i:nth-child(even) {
  animation-name: newspaperBlindLeft;
}

.newspaper-modal:not(.hidden) .newspaper-venetian-blinds i:nth-child(2),
.newspaper-modal:not(.hidden) .newspaper-venetian-blinds i:nth-child(9) { animation-delay: 35ms; }
.newspaper-modal:not(.hidden) .newspaper-venetian-blinds i:nth-child(3),
.newspaper-modal:not(.hidden) .newspaper-venetian-blinds i:nth-child(8) { animation-delay: 70ms; }
.newspaper-modal:not(.hidden) .newspaper-venetian-blinds i:nth-child(4),
.newspaper-modal:not(.hidden) .newspaper-venetian-blinds i:nth-child(7) { animation-delay: 105ms; }
.newspaper-modal:not(.hidden) .newspaper-venetian-blinds i:nth-child(5),
.newspaper-modal:not(.hidden) .newspaper-venetian-blinds i:nth-child(6) { animation-delay: 140ms; }

.newspaper-modal:not(.hidden) .newspaper-sheet {
  transform-origin: 50% 50%;
  animation: newspaperBlindPaperLanding 760ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
}

.newspaper-sheet::after {
  display: none;
  animation: none;
}

@keyframes newspaperBlindRight {
  0%, 10% { opacity: 1; transform: translateX(0) scaleX(1); }
  100% { opacity: 0; transform: translateX(108%) scaleX(0.12); }
}

@keyframes newspaperBlindLeft {
  0%, 10% { opacity: 1; transform: translateX(0) scaleX(1); }
  100% { opacity: 0; transform: translateX(-108%) scaleX(0.12); }
}

@keyframes newspaperBlindPaperLanding {
  0% { opacity: 0.3; transform: scale(0.965) rotate(-0.2deg); }
  72% { opacity: 1; transform: scale(1.008) rotate(-0.7deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.props-carousel-stage-wrap {
  z-index: 70;
}

/* Build 36: make every menu dossier explanation a full 30% larger. The title
   dossier already scrolls, so legibility takes priority over fitting it all in
   one short-landscape viewport. */
.title-approval-tag,
.title-approval-status {
  font-size: clamp(13px, calc(1.69vh + 1.3px), 15px);
}

.title-approval-sub-label {
  font-size: 12.35px;
}

.title-approval-bar-labels {
  font-size: 13px;
}

.title-approval-desc {
  font-size: var(--title-explainer-body-size);
  line-height: var(--title-explainer-body-leading);
}

.title-story-text h3 {
  font-size: 19.5px !important;
}

.title-story-text p {
  font-size: var(--title-explainer-body-size) !important;
  line-height: var(--title-explainer-body-leading) !important;
}

.title-feature-pill {
  font-size: var(--title-explainer-body-size);
  line-height: var(--title-explainer-body-leading);
}

.title-feature-pill strong {
  font-size: clamp(16.25px, calc(2.34vh + 1.3px), 18.2px);
}

@media (orientation: landscape) and (max-height: 500px) {
  .title-screen-box {
    --title-explainer-body-size: 12.25px;
    --title-explainer-body-leading: 1.32;
  }

  .title-age-advisory {
    left: max(7px, var(--app-safe-left));
    bottom: 5px;
    width: 40px;
    height: 40px;
    border-width: 2px;
    box-shadow: 2px 2px 0 rgb(0 0 0 / 68%);
  }

  .title-age-advisory strong {
    font-size: 21px;
  }

  .title-age-advisory span {
    font-size: 5.7px;
  }

  .title-channel-line {
    padding-left: 45px;
  }

  .title-approval-hero-card,
  .title-story-card {
    flex: none;
  }

  .title-approval-tag,
  .title-approval-status {
    font-size: 13px;
  }

  .title-approval-sub-label {
    font-size: 12.35px;
  }

  .title-approval-bar-labels {
    font-size: 10.4px;
  }

  .title-approval-desc {
    font-size: var(--title-explainer-body-size);
    line-height: var(--title-explainer-body-leading);
  }

  .title-story-text h3 {
    font-size: 15.6px !important;
  }

  .title-story-text p {
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: none !important;
    line-clamp: none !important;
    font-size: var(--title-explainer-body-size) !important;
    line-height: var(--title-explainer-body-leading) !important;
  }

  .title-story-card {
    min-height: max-content;
    align-items: flex-start;
  }

  .title-how-to-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .title-feature-pill {
    min-height: 68px;
    padding: 7px 9px;
    font-size: var(--title-explainer-body-size);
    line-height: var(--title-explainer-body-leading);
  }

  .title-feature-pill strong {
    font-size: 16.25px;
  }

  .mood-card {
    min-height: 94px;
    padding: 5px 7px;
  }

  .mood-grid {
    grid-template-rows: repeat(3, minmax(94px, auto));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mood-name {
    font-size: 14.5px;
    line-height: 1.08;
  }

  .mood-score {
    font-size: 14px;
  }

  .btn-stat-roll {
    min-height: 28px;
    font-size: 11.5px;
  }

  .mood-effect {
    font-size: 13px;
    line-height: 1.18;
  }

  .prop-carousel-item {
    width: clamp(270px, 37vw, 330px) !important;
    height: clamp(180px, 49vh, 198px) !important;
  }

  .prop-tile-name {
    font-size: 14px;
  }

  .prop-tile-desc {
    font-size: 11px;
  }

  .shift-player-name-row {
    grid-template-columns: minmax(155px, 1fr) minmax(150px, 0.8fr) auto;
    margin-top: 5px;
    padding: 5px;
  }

  .shift-player-name-row input,
  .shift-player-name-row button {
    min-height: 31px;
  }

  .comic-burst-star {
    width: min(1000px, 94vw);
    min-height: 58vh;
    padding: 24px 48px;
  }

  .comic-burst-title {
    font-size: clamp(36px, calc(13vh + 1px), 62px);
  }

  .comic-burst-subtitle {
    font-size: clamp(18px, calc(5vh + 1px), 28px);
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .music-credits-box {
    width: min(900px, calc(100vw - 10px));
    max-height: calc(100svh - 10px);
  }

  .music-credits-header {
    min-height: 45px;
    padding: 5px 9px;
  }

  .music-credits-kicker {
    font-size: 8px;
  }

  .music-credits-header h2 {
    font-size: 25px;
  }

  .music-credits-close {
    width: 32px;
    height: 32px;
    font-size: 19px;
  }

  .music-credits-body {
    gap: 5px;
    padding: 6px 9px;
  }

  .music-credits-intro {
    font-size: 11px;
  }

  .music-credits-grid {
    gap: 6px;
  }

  .music-credit-card {
    padding: 5px 7px;
    border-width: 2px;
  }

  .music-credit-card > span {
    font-size: 7px;
  }

  .music-credit-card h3 {
    font-size: 16px;
  }

  .music-credit-card p,
  .music-credit-card a {
    font-size: 9px;
  }

  .music-credits-loop-note {
    padding: 3px 6px;
    font-size: 8px;
  }

  .music-credits-footer {
    padding: 4px 9px 6px;
  }

  .music-credits-footer button {
    min-height: 31px;
    font-size: 13px;
  }
}

@media (orientation: portrait) {
  .music-credits-box {
    width: calc(100vw - 14px);
    max-height: calc(100svh - 14px);
  }

  .music-credits-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   FIVE PUBLICATIONS, FIVE FRONT-PAGE ARCHITECTURES

   These rules deliberately change the information hierarchy—not just the
   masthead. Chronicle is a classic picture tabloid; Bolt is a red-top splash;
   Echo is a supermarket sensationalist; Register is a newspaper of record;
   Review is a restrained literary/current-affairs weekly.
   ------------------------------------------------------------------------- */

.newspaper-sheet .news-body-grid {
  display: grid;
}

.newspaper-sheet .news-photo-box {
  grid-area: photo;
  background-size: cover;
}

.newspaper-sheet .news-brief-column {
  grid-area: brief;
}

.newspaper-sheet .news-article-snippet {
  grid-area: article;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.newspaper-sheet .news-article-snippet p {
  margin: 2px 0;
}

.newspaper-sheet .news-opinion-delta {
  margin-top: auto;
  overflow-wrap: anywhere;
}

.newspaper-sheet .news-opinion-delta.is-critical {
  font-size: clamp(15px, calc(3.55vh + 1px), 20px);
}

/* 1. THE DAILY CHRONICLE — traditional illustrated city tabloid. */
.news-tabloid-chronicle .news-body-grid {
  grid-template-columns: minmax(72px, 15%) minmax(200px, 47%) minmax(155px, 38%);
  grid-template-areas: "brief photo article";
}

.news-tabloid-chronicle .news-article-snippet {
  border-top-width: 2px;
  border-bottom-width: 2px;
}

/* 2. NEW YORK BOLT — bold red-top with a picture splash and news rail. */
.news-tabloid-bolt .news-masthead {
  grid-template-columns: clamp(86px, 13vw, 124px) minmax(0, 1fr) clamp(70px, 10vw, 96px);
  padding: 2px 5px 3px;
  background: linear-gradient(90deg, var(--paper) 0 17%, rgb(239 73 37 / 12%) 17% 100%);
}

.news-tabloid-bolt .news-nameplate {
  transform: skewX(-4deg);
}

.news-tabloid-bolt .news-nameplate-kicker {
  color: var(--orange);
}

.news-tabloid-bolt .news-nameplate-deck {
  letter-spacing: 0.16em;
}

.news-tabloid-bolt .news-headline {
  max-height: 1.86em;
  font-size: clamp(29px, calc(9.2vh + 1px), 53px);
  line-height: 0.88;
  transform: skewX(-1deg);
}

.news-tabloid-bolt .news-subhead-strip {
  color: var(--paper-white);
  background: var(--orange);
  border: 0;
  font-family: var(--font-mono);
  font-style: normal;
  text-transform: uppercase;
}

.news-tabloid-bolt .news-body-grid {
  grid-template-columns: minmax(0, 62%) minmax(0, 38%);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "photo article"
    "brief article";
  gap: 5px;
}

.news-tabloid-bolt .news-photo-box {
  border-width: 4px;
  border-left-color: var(--orange);
}

.news-tabloid-bolt .news-article-snippet {
  padding: 6px 7px;
  color: var(--paper-white);
  background: var(--ink);
  border: 0;
  border-top: 7px solid var(--orange);
}

.news-tabloid-bolt .news-article-lead {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.4em;
  text-transform: uppercase;
}

.news-tabloid-bolt .news-brief-column {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 6px;
  padding: 3px 6px;
  color: var(--paper-white);
  background: var(--orange);
  border: 0;
  text-align: left;
}

.news-tabloid-bolt .news-brief-column i,
.news-tabloid-bolt .news-brief-column hr {
  display: none;
}

.news-tabloid-bolt .news-brief-column strong {
  margin: 0;
  color: var(--gold);
  font-size: 1em;
  white-space: nowrap;
}

.news-tabloid-bolt .news-opinion-delta {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--paper-white);
  box-shadow: 3px 3px 0 var(--orange);
}

/* 3. THE MANHATTAN ECHO — colourful supermarket-style sensationalism. */
.newspaper-sheet.news-tabloid-echo {
  background:
    linear-gradient(135deg, rgb(240 183 58 / 16%), transparent 34%),
    radial-gradient(circle, rgb(11 15 18 / 7%) 0 1px, transparent 1.2px) 0 0 / 7px 7px,
    var(--paper);
  border-top-width: 10px;
  border-top-color: var(--teal-dark, #073c42);
}

.news-tabloid-echo .news-masthead {
  grid-template-columns: clamp(66px, 10vw, 96px) minmax(0, 1fr) clamp(66px, 10vw, 96px);
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 0;
}

.news-tabloid-echo .news-paper-name {
  color: var(--paper-white);
  font-size: clamp(28px, calc(8vh + 1px), 46px);
  text-shadow: 3px 3px 0 var(--orange);
}

.news-tabloid-echo .news-extra-box {
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--paper-white);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--orange);
  transform: rotate(-8deg);
}

.news-tabloid-echo .news-extra-box:nth-of-type(3) {
  transform: rotate(8deg);
}

.news-tabloid-echo .news-meta-bar {
  color: var(--ink);
  background: var(--gold);
  border: 0;
  padding-inline: 5px;
}

.news-tabloid-echo .news-headline {
  max-height: 1.92em;
  padding: 4px 9px 2px;
  color: var(--ink);
  background: var(--gold);
  border: 4px solid var(--teal-dark, #073c42);
  font-size: clamp(27px, calc(8.8vh + 1px), 49px);
  line-height: 0.9;
  text-align: center;
  text-align-last: center;
  text-shadow: 2px 2px 0 var(--paper-white);
}

.news-tabloid-echo .news-subhead-strip {
  color: var(--paper-white);
  background: var(--orange);
  border: 0;
  font-family: var(--font-display);
  font-style: normal;
  text-transform: uppercase;
}

.news-tabloid-echo .news-body-grid {
  grid-template-columns: minmax(0, 59%) minmax(0, 41%);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "photo brief"
    "photo article";
  gap: 5px;
}

.news-tabloid-echo .news-photo-box {
  border: 5px solid var(--teal-dark, #073c42);
  box-shadow: inset 0 0 0 3px var(--paper);
}

.news-tabloid-echo .news-brief-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 6px;
  padding: 4px 6px;
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 55%, var(--paper));
  border: 3px solid var(--orange);
  text-align: left;
}

.news-tabloid-echo .news-brief-column strong,
.news-tabloid-echo .news-brief-column span {
  margin: 0;
}

.news-tabloid-echo .news-brief-column i,
.news-tabloid-echo .news-brief-column hr {
  display: none;
}

.news-tabloid-echo .news-article-snippet {
  padding: 4px 7px;
  background: rgb(8 83 88 / 9%);
  border: 3px solid var(--teal-dark, #073c42);
}

.news-tabloid-echo .news-article-lead {
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 1.34em;
  text-transform: uppercase;
}

/* 4. THE NEW YORK REGISTER — ordered newspaper-of-record columns. */
.news-broadsheet-register .news-masthead {
  padding-block: 1px 3px;
}

.news-broadsheet-register .news-nameplate {
  border-inline: 1px solid var(--ink);
}

.news-broadsheet-register .news-headline {
  letter-spacing: -0.018em;
}

.news-broadsheet-register .news-subhead-strip {
  padding-left: 9px;
  border-left: 7px double var(--ink);
}

.news-broadsheet-register .news-body-grid {
  grid-template-columns: minmax(155px, 34%) minmax(210px, 46%) minmax(78px, 20%);
  grid-template-areas: "article photo brief";
  gap: 7px;
}

.news-broadsheet-register .news-article-snippet {
  padding: 3px 8px 3px 2px;
  border: 0;
  border-right: 1px solid var(--ink);
}

.news-broadsheet-register .news-article-lead {
  padding-bottom: 4px;
  border-bottom: 3px double var(--ink);
  font-size: 1.24em;
}

.news-broadsheet-register .news-photo-box {
  border-width: 1px;
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}

.news-broadsheet-register .news-brief-column {
  padding: 3px 2px 3px 8px;
  border: 0;
  border-left: 1px solid var(--ink);
  text-align: left;
}

.news-broadsheet-register .news-brief-column strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05em;
  letter-spacing: 0.05em;
}

.news-broadsheet-register .news-opinion-delta {
  padding: 5px 7px;
  font-size: clamp(15px, calc(3.8vh + 1px), 20px);
  box-shadow: none;
}

/* 5. THE METROPOLITAN REVIEW — asymmetrical literary weekly feature page. */
.newspaper-sheet.news-broadsheet-review {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  padding: clamp(8px, 1.35vw, 14px);
  background:
    linear-gradient(90deg, rgb(48 56 66 / 9%) 0 1px, transparent 1px 100%),
    var(--paper);
}

.news-broadsheet-review .news-masthead {
  grid-template-columns: minmax(0, 1fr) clamp(70px, 11vw, 108px);
  grid-template-rows: minmax(48px, auto) auto;
  padding: 0 0 3px;
  border-top: 0;
  border-bottom: 6px solid #303842;
}

.news-broadsheet-review .news-extra-left {
  display: none;
}

.news-broadsheet-review .news-nameplate {
  grid-column: 1;
  grid-row: 1;
  padding-left: 10px;
  text-align: left;
  border-left: 10px solid var(--orange);
}

.news-broadsheet-review .news-extra-right {
  grid-column: 2;
  grid-row: 1;
  min-height: 48px;
  color: var(--paper-white);
  background: #303842;
  border: 0;
}

.news-broadsheet-review .news-meta-bar {
  grid-column: 1 / -1;
  grid-row: 2;
}

.news-broadsheet-review .news-paper-name {
  font-size: clamp(29px, calc(7.7vh + 1px), 44px);
  line-height: 0.78;
}

.news-broadsheet-review .news-nameplate-kicker {
  letter-spacing: 0.13em;
}

.news-broadsheet-review .news-headline {
  padding-left: 10px;
  border-top: 0;
  border-bottom: 1px solid #303842;
  font-size: clamp(23px, calc(6.4vh + 1px), 39px);
  font-style: italic;
  font-weight: 600;
}

.news-broadsheet-review .news-subhead-strip {
  padding-left: 10px;
  color: var(--paper-white);
  background: #303842;
  border: 0;
  font-family: var(--font-mono);
  font-style: normal;
  text-transform: uppercase;
}

.news-broadsheet-review .news-body-grid {
  grid-template-columns: minmax(220px, 61%) minmax(170px, 39%);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "photo article"
    "photo brief";
  gap: 7px;
}

.news-broadsheet-review .news-photo-box {
  border: 0;
  border-right: 8px solid var(--orange);
  filter: grayscale(1) contrast(1.15) sepia(0.12);
}

.news-broadsheet-review .news-article-snippet {
  padding: 5px 8px;
  border: 0;
  border-left: 1px solid #303842;
}

.news-broadsheet-review .news-article-lead {
  font-size: 1.28em;
  font-style: italic;
}

.news-broadsheet-review .news-brief-column {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: 3px 6px;
  padding: 5px 7px;
  color: var(--paper-white);
  background: #303842;
  border: 0;
  text-align: left;
}

.news-broadsheet-review .news-brief-column i,
.news-broadsheet-review .news-brief-column hr {
  display: none;
}

.news-broadsheet-review .news-brief-column strong {
  margin: 0;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98em;
  white-space: nowrap;
}

.news-broadsheet-review .news-opinion-delta {
  color: var(--paper-white);
  background: #303842;
  border-color: var(--orange);
  box-shadow: 3px 3px 0 var(--orange);
}

.news-broadsheet-review .news-opinion-delta.is-negative {
  color: var(--ink) !important;
  background: var(--gold);
}

.news-broadsheet-review .news-opinion-delta.is-critical {
  color: var(--ink) !important;
  background: var(--orange);
}

/* Landscape phones retain the five identities while using tighter furniture. */
@media (orientation: landscape) and (max-height: 500px) {
  .news-tabloid-bolt .news-brief-column,
  .news-broadsheet-review .news-brief-column {
    padding-block: 2px;
    font-size: 8px;
  }

  .news-tabloid-echo .news-brief-column {
    padding: 2px 4px;
    font-size: 8px;
  }

  .news-tabloid-bolt .news-article-snippet,
  .news-tabloid-echo .news-article-snippet,
  .news-broadsheet-register .news-article-snippet,
  .news-broadsheet-review .news-article-snippet {
    font-size: clamp(9.5px, calc(2.45vh + 1px), 11.5px);
    line-height: 1.16;
  }

  .newspaper-sheet .news-opinion-delta {
    padding: 4px 6px;
    font-size: clamp(14px, calc(3.7vh + 1px), 19px);
    line-height: 1;
  }

  .newspaper-sheet .news-opinion-delta.is-critical {
    font-size: clamp(12px, calc(3.05vh + 1px), 16px);
  }
}

/* The playable-card hand has more visual weight than the utility-object deck.
   Centre cards can safely cross the footer because the stage already sits on
   the higher layer; the extra height also keeps their rules and action button
   inside the cream card frame instead of spilling beneath it. */
.hand-carousel-item {
  width: clamp(235px, 34vw, 320px);
  height: clamp(238px, 63vh, 300px);
  max-height: calc(100% + 22px);
}

@media (orientation: landscape) and (max-height: 500px) {
  .hand-carousel-item {
    width: clamp(248px, 34vw, 290px) !important;
    height: min(202px, calc(100% + 16px)) !important;
    max-height: calc(100% + 16px) !important;
    padding: 5px !important;
  }

  .hand-carousel-item .p-card-art {
    flex-basis: 50% !important;
    min-height: 50% !important;
  }

  .hand-carousel-item .p-card-rules {
    -webkit-line-clamp: 3;
  }
}

@media (min-width: 1100px) and (min-height: 700px) {
  .hand-carousel-item {
    width: clamp(350px, 29vw, 410px);
    height: clamp(330px, 49vh, 390px);
    max-height: calc(100% - 2px);
  }
}

/* Dr Levine hotline: both participants remain visible while the active voice
   receives the colour, scale and live audio trace. */
.phone-call-panel {
  width: min(920px, calc(100vw - 18px));
  max-width: 920px !important;
  height: min(620px, calc(100svh - 14px));
  max-height: calc(100svh - 14px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.phone-call-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #0d1522;
}

.phone-call-header h2 {
  margin: 0;
}

.phone-call-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(112px, 0.8fr) auto minmax(42px, 1fr);
  gap: 8px;
  padding: 10px 12px;
  overflow: hidden;
}

.phone-contact-strip {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  color: var(--cream);
  background: #0b1018;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--teal-dark, #073c42);
}

.phone-contact-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  background: #101720 url("../characters/dr-levine-phone-portrait-bw.webp") center / cover no-repeat;
  border: 2px solid var(--teal);
}

.phone-contact-name {
  color: var(--cream);
  font-size: 14px;
  font-weight: 900;
}

.phone-fee {
  color: var(--gold);
  font: 800 11.5px var(--font-mono);
}

.phone-conversation-stage {
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(88px, 18vw, 138px) minmax(150px, 1fr) clamp(88px, 18vw, 138px);
  align-items: stretch;
  gap: 9px;
  padding: 7px;
  background:
    linear-gradient(rgb(13 141 145 / 14%) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgb(13 141 145 / 14%) 1px, transparent 1px) 0 0 / 18px 18px,
    #081017;
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 28px rgb(45 213 201 / 10%);
}

.phone-speaker-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  color: var(--cream-dim);
  background: #121a22;
  border: 3px solid #536065;
  filter: grayscale(0.86) brightness(0.55);
  opacity: 0.72;
  transform: scale(0.96);
  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.phone-speaker-card strong {
  position: relative;
  z-index: 2;
  padding: 3px 5px;
  overflow: hidden;
  background: rgb(5 10 15 / 88%);
  font: 900 11px var(--font-display);
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.phone-speaker-portrait {
  min-height: 0;
  background-repeat: no-repeat;
  transform: translateY(var(--phone-talk-y, 0)) rotate(var(--phone-talk-tilt, 0deg)) scale(var(--phone-talk-scale, 1));
  transform-origin: center 42%;
  transition: transform 72ms linear;
}

.phone-speaker-thomas .phone-speaker-portrait {
  background-image: url("../characters/thomas-phone-portrait-bw.webp");
  background-position: center;
  background-size: cover;
}

.phone-speaker-levine .phone-speaker-portrait {
  background-image: url("../characters/dr-levine-phone-portrait-bw.webp");
  background-position: center;
  background-size: cover;
}

.phone-conversation-stage[data-speaker="thomas"] .phone-speaker-thomas {
  color: var(--paper-white);
  border-color: var(--orange);
  box-shadow: 5px 5px 0 var(--orange), 0 0 22px rgb(242 92 48 / 38%);
  filter: none;
  opacity: 1;
  transform: scale(1.025);
}

.phone-conversation-stage[data-speaker="levine"] .phone-speaker-levine {
  color: var(--paper-white);
  border-color: var(--teal-light);
  box-shadow: 5px 5px 0 var(--teal-dark, #073c42), 0 0 22px rgb(45 213 201 / 34%);
  filter: none;
  opacity: 1;
  transform: scale(1.025);
}

.phone-waveform-console {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(54px, 1fr) auto;
  align-items: center;
  padding: 8px 10px 6px;
  overflow: hidden;
  color: var(--teal-light);
  background: rgb(4 11 16 / 92%);
  border: 2px solid var(--teal-dark, #073c42);
}

.phone-line-light {
  position: absolute;
  inset: 50% 8px auto;
  height: 1px;
  background: rgb(45 213 201 / 42%);
  box-shadow: 0 0 8px rgb(45 213 201 / 40%);
}

.phone-waveform {
  --phone-wave-colour: var(--teal-light);
  position: relative;
  z-index: 2;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.55vw, 5px);
  overflow: hidden;
}

.phone-conversation-stage[data-speaker="thomas"] .phone-waveform {
  --phone-wave-colour: var(--orange);
}

.phone-waveform-bar {
  width: clamp(3px, 0.55vw, 6px);
  height: 58px;
  flex: 1 1 auto;
  max-width: 7px;
  background: var(--phone-wave-colour);
  box-shadow: 0 0 7px color-mix(in srgb, var(--phone-wave-colour) 75%, transparent);
  transform: scaleY(var(--phone-wave-level, 0.1));
  transform-origin: center;
  transition: transform 54ms linear, background 150ms ease;
}

.phone-waveform.is-fallback .phone-waveform-bar {
  animation: phoneWaveFallback 560ms ease-in-out infinite alternate;
  animation-delay: calc(var(--phone-wave-index, 0) * -37ms);
}

.phone-conversation-stage[data-speaker="thomas"]:has(.phone-waveform.is-fallback) .phone-speaker-thomas .phone-speaker-portrait,
.phone-conversation-stage[data-speaker="levine"]:has(.phone-waveform.is-fallback) .phone-speaker-levine .phone-speaker-portrait {
  animation: phonePortraitFallback 480ms ease-in-out infinite alternate;
}

@keyframes phoneWaveFallback {
  0% { transform: scaleY(0.12); }
  45% { transform: scaleY(0.72); }
  100% { transform: scaleY(0.28); }
}

@keyframes phonePortraitFallback {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-2px) scale(1.026); }
}

.phone-speaker-status {
  position: relative;
  z-index: 2;
  min-height: 22px;
  display: grid;
  place-items: center;
  padding: 3px 5px;
  overflow: hidden;
  color: var(--teal-light);
  background: rgb(7 16 20 / 88%);
  border-top: 1px solid currentColor;
  font: 900 clamp(8px, calc(1.7vh + 1px), 11px) var(--font-mono);
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.phone-conversation-stage[data-speaker="thomas"] .phone-speaker-status {
  color: var(--orange);
}

.phone-transcript {
  max-height: 4.5em;
  padding: 6px 9px;
  overflow: auto;
  color: var(--cream);
  background: rgb(7 16 20 / 90%);
  border-left: 5px solid var(--teal);
  font-size: 13px;
  line-height: 1.32;
}

.phone-options-container {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Roll screen: teal minor grid with orange major lines behind transparent dice. */
.dice-fullscreen-overlay {
  background-color: rgb(7 16 20 / 98%);
  background-image:
    linear-gradient(rgb(242 92 48 / 18%) 2px, transparent 2px),
    linear-gradient(90deg, rgb(242 92 48 / 18%) 2px, transparent 2px),
    linear-gradient(rgb(45 213 201 / 12%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(45 213 201 / 12%) 1px, transparent 1px),
    radial-gradient(circle, rgb(240 229 204 / 9%) 0 1px, transparent 1.3px);
  background-position: center;
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, 8px 8px;
}

.dice-fullscreen-stage {
  /* Regression guard: the two 1280x720 dice canvases must stay stacked.
     Flex flow stretches the red dice and pushes Thomas below the viewport. */
  position: absolute;
}

.dice-fullscreen-stage::before {
  position: absolute;
  inset: 10% 4%;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(45 213 201 / 13%), transparent 68%);
  border: 1px solid rgb(45 213 201 / 24%);
  clip-path: polygon(4% 0, 96% 0, 100% 12%, 100% 88%, 96% 100%, 4% 100%, 0 88%, 0 12%);
}

.dice-fullscreen-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.dice-target-announcement {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 30;
  width: min(560px, 72vw);
  min-height: 130px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  place-items: center;
  gap: 12px;
  padding: 20px clamp(34px, 6vw, 72px);
  color: var(--ink);
  background: linear-gradient(110deg, var(--teal-light), var(--gold));
  clip-path: polygon(5% 0, 95% 0, 100% 22%, 96% 50%, 100% 78%, 95% 100%, 5% 100%, 0 78%, 4% 50%, 0 22%);
  filter: drop-shadow(10px 10px 0 rgb(0 0 0 / 78%));
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72) rotate(-1deg);
}

.dice-target-announcement.active {
  animation: diceTargetAnnouncement 1650ms cubic-bezier(0.16, 0.78, 0.18, 1) both;
}

.dice-target-announcement span {
  font: 900 clamp(27px, calc(7vh + 1px), 48px) var(--font-display);
  line-height: 0.94;
  text-align: center;
  text-transform: uppercase;
}

.dice-target-announcement strong {
  color: var(--paper-white);
  font: 900 clamp(54px, calc(15vh + 1px), 96px) var(--font-display);
  line-height: 0.8;
  text-shadow: 5px 5px 0 var(--ink);
}

@keyframes diceTargetAnnouncement {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.62) rotate(-3deg); }
  14%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08) rotate(0); }
}

@media (orientation: landscape) and (max-height: 500px) {
  .phone-call-panel {
    width: min(900px, calc(100vw - 8px));
    height: calc(100svh - 8px);
    max-height: calc(100svh - 8px);
  }

  .phone-call-body {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.68fr);
    grid-template-rows: auto minmax(50px, 0.3fr) minmax(144px, 1fr);
    gap: 5px 7px;
    padding: 6px 8px;
  }

  .phone-contact-strip {
    grid-column: 1 / -1;
    min-height: 37px;
    padding: 3px 6px;
  }

  .phone-contact-avatar {
    width: 31px;
    height: 31px;
  }

  .phone-contact-name {
    font-size: 12px;
  }

  .phone-fee {
    font-size: 9px;
  }

  .phone-conversation-stage {
    grid-column: 1;
    grid-row: 2 / 4;
    grid-template-columns: clamp(76px, 14vw, 116px) minmax(118px, 1fr) clamp(76px, 14vw, 116px);
    gap: 6px;
    padding: 5px;
  }

  .phone-waveform-console {
    padding: 5px 7px 4px;
  }

  .phone-waveform {
    height: 54px;
  }

  .phone-waveform-bar {
    height: 48px;
  }

  .phone-transcript {
    grid-column: 2;
    grid-row: 2;
    max-height: none;
    padding: 5px 7px;
    font-size: 10.5px;
    line-height: 1.2;
  }

  .phone-options-container {
    grid-column: 2;
    grid-row: 3;
    font-size: 10px;
  }

  .phone-options-container .btn {
    min-height: 34px;
    padding-block: 3px !important;
    font-size: 10.5px !important;
    line-height: 1.08;
  }

  .dice-target-announcement {
    width: min(560px, 78vw);
    min-height: 92px;
    padding: 13px clamp(30px, 6vw, 56px);
  }

  .dice-target-announcement span {
    font-size: clamp(25px, calc(9vh + 1px), 38px);
  }

  .dice-target-announcement strong {
    font-size: clamp(50px, calc(20vh + 1px), 76px);
  }
}

/* Build 62: empty-hand emergency requisition. */
.patrol-deal-empty.emergency-draw-state {
  width: min(760px, 92vw);
  min-height: 300px;
  gap: 9px;
  padding: 20px 28px;
  border: 3px solid var(--orange);
  background:
    linear-gradient(135deg, rgb(242 92 48 / 15%), transparent 42%),
    radial-gradient(circle at 50% 35%, rgb(45 213 201 / 18%), rgb(8 13 22 / 97%) 70%);
}

.emergency-draw-kicker {
  color: var(--orange);
  font: 900 13px/1 var(--font-mono);
  letter-spacing: 1.6px;
}

.emergency-draw-state h2 {
  color: var(--paper-white);
  font-size: clamp(28px, 4vw, 42px);
}

.emergency-draw-state p {
  max-width: 680px;
  color: var(--cream);
  font-size: 15px;
  line-height: 1.3;
}

.emergency-draw-state p strong {
  color: var(--gold);
}

.emergency-draw-ledger {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.emergency-draw-ledger span {
  padding: 6px 10px;
  color: var(--cream);
  background: rgb(0 0 0 / 42%);
  border: 1px solid rgb(45 213 201 / 52%);
  font: 800 12px/1.1 var(--font-mono);
  text-transform: uppercase;
}

.emergency-draw-ledger b {
  color: var(--teal-light);
}

.btn-emergency-draw {
  min-width: min(440px, 78vw);
  background: linear-gradient(180deg, var(--gold), #b87900);
  color: var(--ink);
  font-size: 17px;
}

.emergency-draw-availability {
  color: var(--cream-dim);
  font: 800 11px/1.15 var(--font-mono);
}

.btn-emergency-dice {
  min-width: min(300px, 68vw);
  font-size: 13px;
}

@media (orientation: landscape) and (max-height: 500px) {
  .patrol-deal-empty.emergency-draw-state {
    width: min(720px, 86vw);
    min-height: 222px;
    gap: 5px;
    padding: 10px 18px;
  }

  .emergency-draw-kicker {
    font-size: 10px;
  }

  .emergency-draw-state h2 {
    font-size: clamp(21px, calc(6vh + 1px), 28px);
  }

  .emergency-draw-state p {
    max-width: 650px;
    font-size: 12.25px;
    line-height: 1.18;
  }

  .emergency-draw-ledger span {
    padding: 4px 7px;
    font-size: 10.5px;
  }

  .btn-emergency-draw {
    min-height: 32px;
    padding: 5px 16px;
    font-size: 13px;
  }

  .emergency-draw-availability {
    font-size: 9.5px;
  }

  .btn-emergency-dice {
    min-height: 30px;
    padding: 4px 14px;
    font-size: 11px;
  }
}

/* -------------------------------------------------------------------------
   BOOK-CODE SURVEILLANCE TERMINAL
   ------------------------------------------------------------------------- */
.title-menu-tabs {
  flex: 0 0 auto;
  min-height: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: var(--paper-white);
  background: var(--ink);
  border-bottom: 3px solid var(--ink);
}

.title-menu-tab {
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 10px;
  color: var(--paper-white);
  background: #173135;
  border: 0;
  border-right: 2px solid var(--ink);
  font: 900 12px/1 var(--font-display);
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.title-menu-tab:last-child {
  border-right: 0;
}

.title-menu-tab:hover,
.title-menu-tab:focus-visible {
  color: var(--ink);
  background: var(--gold);
  outline: 2px solid var(--paper-white);
  outline-offset: -3px;
}

.title-menu-tab.is-active {
  color: var(--ink);
  background: var(--orange);
  box-shadow: inset 0 -4px 0 var(--paper-white);
}

.title-menu-tab[data-title-tab="surveillance"].is-active {
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
}

.title-menu-tab b {
  min-width: 39px;
  padding: 3px 5px 2px;
  color: var(--ink);
  background: var(--paper-white);
  border: 2px solid var(--ink);
  font: 900 9px/1 var(--font-mono);
  letter-spacing: 0;
}

.title-menu-tab.has-unlocks b {
  color: var(--paper-white);
  background: var(--orange);
}

.title-tab-panel {
  min-height: 0;
}

.surveillance-terminal-panel {
  flex: 1 1 0;
  width: 100%;
  padding: 7px 10px;
  color: var(--paper-white);
  overflow: hidden;
}

.surveillance-console {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--paper-white);
  background:
    radial-gradient(circle, rgb(74 226 207 / 13%) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    #071013;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--orange);
  overflow: hidden;
}

.surveillance-console::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 4px, rgb(71 226 207 / 4%) 4px 5px);
}

.surveillance-console-header {
  position: relative;
  z-index: 1;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 9px;
  color: var(--teal-light);
  background: #0d2024 !important;
  border-bottom: 3px solid var(--teal);
  font: 900 9px/1 var(--font-mono);
  letter-spacing: 0;
}

.surveillance-console-header i {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 3px;
  background: var(--teal-light);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--teal-light);
  animation: surveillanceSignalPulse 1.4s steps(2, end) infinite;
}

.surveillance-console-header strong {
  padding: 3px 7px;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--paper-white);
  font: 900 10px/1 var(--font-display);
  letter-spacing: 0;
  white-space: nowrap;
}

.surveillance-console-grid {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 0.88fr) minmax(310px, 1.12fr);
  overflow-y: auto;
  align-content: start;
  scrollbar-color: var(--teal) #071013;
}

.loyalty-reward {
  order: -1;
  grid-column: 1 / -1;
  min-width: 0;
  padding: 14px 18px;
  border-bottom: 3px solid var(--teal);
  background: #10242a;
  color: var(--paper-white);
}

.loyalty-reward > header {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent !important;
  color: var(--gold);
}

.loyalty-reward h3 {
  margin: 4px 0 8px;
  color: var(--paper-white);
  font: 900 25px/1.1 var(--font-display);
}

.loyalty-reward p, .loyalty-reward label {
  color: var(--paper-white) !important;
  font-size: 13px;
}

.loyalty-reward #loyalty-code-form {
  grid-template-columns: minmax(230px, 1fr) auto;
  align-items: center;
}

.loyalty-reward #loyalty-code-form label {
  grid-column: 1 / -1;
}

.loyalty-reward button {
  min-height: 40px;
}

@media (max-width: 600px) {
  .loyalty-reward #loyalty-code-form { grid-template-columns: minmax(0, 1fr); }
}

.surveillance-code-form,
.surveillance-archive {
  min-width: 0;
  min-height: 0;
  padding: 12px;
}

.surveillance-code-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  border-right: 3px solid var(--teal-dark, #073c42);
}

.surveillance-terminal-heading {
  min-width: 0;
}

.surveillance-eyebrow,
.surveillance-input-label {
  display: block;
  color: var(--teal-light);
  font: 900 9px/1 var(--font-mono);
  letter-spacing: 0;
}

.surveillance-terminal-heading h2 {
  margin-top: 3px;
  color: var(--paper-white);
  font: 900 clamp(23px, calc(5vh + 1px), 35px)/0.95 var(--font-display);
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--orange);
}

.surveillance-code-entry {
  position: relative;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  cursor: text;
}

.surveillance-code-prefix {
  position: relative;
  z-index: 1;
  min-width: 72px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--paper-white);
  box-shadow: 3px 3px 0 var(--orange);
  font: 900 clamp(22px, calc(6vh + 1px), 35px)/1 var(--font-mono);
  letter-spacing: 0;
}

.surveillance-code-entry input {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  color: transparent;
  caret-color: transparent;
  background: transparent;
  border: 0;
  opacity: 0.01;
  font-size: 16px;
  user-select: text;
  -webkit-user-select: text;
}

.surveillance-code-slots {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.surveillance-code-slots span {
  min-width: 0;
  display: grid;
  place-items: center;
  color: #526a6b;
  background: #071013;
  border: 2px solid #31585b;
  box-shadow: inset 0 -5px 0 rgb(0 0 0 / 38%);
  font: 900 clamp(25px, calc(7vh + 1px), 42px)/1 var(--font-mono);
  letter-spacing: 0;
}

.surveillance-code-slots span.has-character {
  color: var(--paper-white);
  border-color: var(--teal-light);
  text-shadow: 0 0 9px var(--teal);
}

.surveillance-code-entry:focus-within .surveillance-code-slots span {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}

.surveillance-command-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr);
  align-items: stretch;
  gap: 7px;
}

.surveillance-decrypt-button,
.surveillance-demo-code,
.surveillance-file-button {
  min-height: 36px;
  border: 3px solid var(--ink);
  border-radius: 0;
  font: 900 12px/1 var(--font-display);
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.surveillance-decrypt-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink);
  background: var(--gold);
  box-shadow: 3px 3px 0 var(--orange);
}

.surveillance-decrypt-button:disabled {
  color: #668083;
  background: #152a2e;
  box-shadow: none;
  cursor: default;
}

.surveillance-demo-code {
  padding: 4px 9px;
  color: var(--teal-light);
  background: #0d2024;
  border-color: var(--teal);
  font-family: var(--font-mono);
  font-size: 9px;
}

.surveillance-demo-code b {
  color: var(--paper-white);
}

.surveillance-code-status {
  min-height: 20px;
  padding: 5px 7px;
  color: var(--teal-light);
  background: rgb(28 181 163 / 9%);
  border-left: 4px solid var(--teal);
  font: 900 9px/1.1 var(--font-mono);
  letter-spacing: 0;
}

.surveillance-code-form[data-state="scanning"] .surveillance-code-status {
  color: var(--gold);
  border-left-color: var(--gold);
  animation: surveillanceTextBlink 0.25s steps(2, end) infinite;
}

.surveillance-code-form[data-state="denied"] {
  animation: surveillanceDenied 0.46s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.surveillance-code-form[data-state="denied"] .surveillance-code-status {
  color: #ffb4a0;
  background: rgb(230 92 43 / 17%);
  border-left-color: var(--orange);
}

.surveillance-code-form[data-state="granted"] .surveillance-code-status {
  color: var(--ink);
  background: var(--teal-light);
  border-left-color: var(--paper-white);
}

.surveillance-archive {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  background: rgb(4 10 12 / 63%);
}

.surveillance-archive-header {
  height: auto;
  min-height: 56px;
  background: #0d2024 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.surveillance-archive-header span {
  display: block;
  color: var(--teal-light);
  font: 900 8px/1 var(--font-mono);
  letter-spacing: 0;
}

.surveillance-archive-header h3 {
  margin-top: 3px;
  color: var(--paper-white);
  font: 900 clamp(19px, calc(4vh + 1px), 27px)/1 var(--font-display);
  letter-spacing: 0;
  text-transform: uppercase;
}

.surveillance-archive-header small {
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font: 900 8px/1 var(--font-mono);
  letter-spacing: 0;
}

.surveillance-archive-header > strong {
  padding: 5px 8px;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--paper-white);
  font: 900 13px/1 var(--font-mono);
  letter-spacing: 0;
  white-space: nowrap;
}

.surveillance-slot-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
}

.surveillance-archive-slot {
  min-width: 0;
  min-height: 24px;
  display: grid;
  place-items: center;
  color: #647477;
  background: #101a1d;
  border: 1px solid #32484b;
  font: 900 8px/1 var(--font-mono);
  letter-spacing: 0;
}

.surveillance-archive-slot.is-unlocked {
  color: var(--ink);
  background: var(--teal-light);
  border-color: var(--paper-white);
  box-shadow: 0 0 9px rgb(71 226 207 / 68%);
}

.surveillance-archive-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: var(--teal) #071013;
}

.surveillance-archive-empty {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 10px;
  color: #708487;
  border: 2px dashed #29474a;
  font: 900 10px/1.2 var(--font-mono);
  letter-spacing: 0;
  text-align: center;
}

.surveillance-archive-entry {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  padding: 0;
  color: var(--paper-white);
  background: #12272b;
  border: 2px solid var(--teal);
  text-align: left;
}

.surveillance-archive-view {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  color: var(--paper-white);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.surveillance-archive-view > span:first-child {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--teal-light);
  border: 2px solid var(--paper-white);
  font: 900 10px/1 var(--font-mono);
}

.surveillance-archive-view > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.surveillance-archive-view strong {
  overflow: hidden;
  font: 900 14px/1 var(--font-display);
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.surveillance-archive-view small {
  color: var(--teal-light);
  font: 900 8px/1 var(--font-mono);
  letter-spacing: 0;
}

.surveillance-archive-view > b {
  color: var(--gold);
  font: 900 9px/1 var(--font-mono);
  letter-spacing: 0;
}

.surveillance-archive-view:hover,
.surveillance-archive-view:focus-visible {
  background: var(--teal-dark, #073c42);
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}

.surveillance-equip-button,
.surveillance-pool-status {
  min-width: 72px;
  margin-right: 5px;
  padding: 5px 6px;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 0;
  font: 900 8px/1.05 var(--font-mono);
  letter-spacing: 0;
  text-align: center;
}

.surveillance-equip-button {
  cursor: pointer;
}

.surveillance-equip-button.is-equipped {
  color: var(--paper-white);
  background: var(--orange);
}

.surveillance-equip-button:hover,
.surveillance-equip-button:focus-visible {
  outline: 2px solid var(--paper-white);
  outline-offset: 1px;
}

.surveillance-pool-status {
  color: var(--teal-light);
  background: #0d2024;
  border-color: var(--teal);
  white-space: normal;
}

.surveillance-reveal-overlay {
  padding: 7px;
  background: rgb(2 8 10 / 96%);
  perspective: 1100px;
}

.surveillance-reveal-sheet {
  position: relative;
  width: min(920px, calc(100vw - 14px));
  height: min(500px, calc(100svh - 14px));
  max-height: calc(100svh - 14px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--ink);
  background:
    radial-gradient(circle, rgb(11 15 18 / 8%) 0 1px, transparent 1.3px) 0 0 / 7px 7px,
    var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 9px 9px 0 var(--teal), 16px 16px 0 rgb(230 92 43 / 72%);
  overflow: hidden;
}

.surveillance-reveal-scan {
  position: absolute;
  z-index: 8;
  inset: -90% 0 auto;
  height: 90%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgb(71 226 207 / 5%) 44%, rgb(71 226 207 / 72%) 49%, rgb(244 237 217 / 92%) 50%, rgb(71 226 207 / 15%) 53%, transparent 100%);
  opacity: 0;
}

.surveillance-reveal-overlay.is-revealing .surveillance-reveal-scan {
  animation: surveillanceScan 0.92s 0.1s ease-in-out both;
}

.surveillance-reveal-header {
  position: relative;
  z-index: 3;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  color: var(--paper-white);
  background: var(--orange);
  border-bottom: 4px solid var(--ink);
}

.surveillance-reveal-header span {
  display: block;
  color: var(--gold);
  font: 900 9px/1 var(--font-mono);
  letter-spacing: 0;
}

.surveillance-reveal-header h2 {
  margin-top: 2px;
  font: 900 clamp(26px, calc(6vh + 1px), 42px)/0.9 var(--font-display);
  letter-spacing: 0;
  text-shadow: 3px 3px 0 var(--ink);
  text-transform: uppercase;
}

.surveillance-reveal-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--paper-white);
  background: var(--ink);
  border: 3px solid var(--paper-white);
  border-radius: 0;
  font: 900 28px/1 var(--font-body);
  cursor: pointer;
}

.surveillance-reveal-body {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 58%) minmax(250px, 42%);
  gap: 12px;
  padding: 12px;
  overflow: hidden;
}

.surveillance-reveal-card-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  perspective: 950px;
}

.surveillance-reveal-burst {
  position: absolute;
  z-index: 0;
  width: min(560px, 110%);
  aspect-ratio: 2.15 / 1;
  background: var(--teal);
  -webkit-mask-image: url("../ui/results-star.png");
  mask-image: url("../ui/results-star.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 0;
  transform: scale(0.3) rotate(-10deg);
}

.surveillance-reveal-overlay.is-revealing .surveillance-reveal-burst {
  animation: surveillanceBurst 0.72s 0.24s cubic-bezier(0.16, 0.9, 0.26, 1.22) both;
}

.surveillance-unlock-card {
  position: relative;
  z-index: 1;
  width: min(310px, 92%);
  height: min(350px, 100%);
  max-height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 3px;
  padding: 5px;
  color: var(--ink);
  background:
    radial-gradient(circle, rgb(11 15 18 / 7%) 0 1px, transparent 1.2px) 0 0 / 7px 7px,
    var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 7px 7px 0 rgb(0 0 0 / 67%);
  overflow: hidden;
  opacity: 0;
  transform-origin: 50% 60%;
  backface-visibility: hidden;
}

.surveillance-reveal-overlay.is-revealing .surveillance-unlock-card {
  animation: surveillanceCardReveal 1.06s 0.16s cubic-bezier(0.2, 0.88, 0.32, 1.16) both;
}

.surveillance-card-stamp {
  position: absolute;
  z-index: 4;
  top: 42px;
  right: -7px;
  padding: 4px 7px;
  color: var(--paper-white);
  background: var(--orange);
  border: 2px solid var(--ink);
  font: 900 9px/1 var(--font-mono);
  letter-spacing: 0;
  transform: rotate(3deg);
  box-shadow: 2px 2px 0 var(--ink);
}

.surveillance-card-art {
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.surveillance-card-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 37%;
  filter: grayscale(1) contrast(1.18);
}

.surveillance-card-copy {
  min-height: 68px;
}

.surveillance-card-copy h3 {
  color: var(--teal-light, #47e2cf);
  font: 900 clamp(17px, calc(3.8vh + 1px), 24px)/0.95 var(--font-display);
  letter-spacing: 0;
  text-shadow: 1px 1px 0 var(--ink);
  text-transform: uppercase;
}

.surveillance-card-copy p {
  margin-top: 4px;
  color: #e8fff9;
  font: 800 10px/1.15 var(--font-body);
  text-shadow: 1px 1px 0 var(--ink);
}

.surveillance-reveal-intel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: var(--paper-white);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--gold);
  overflow: hidden;
}

.surveillance-reveal-classification {
  color: var(--teal-dark, #073c42);
  font: 900 9px/1 var(--font-mono);
  letter-spacing: 0;
}

.surveillance-reveal-intel h3 {
  color: var(--orange);
  font: 900 clamp(28px, calc(6vh + 1px), 43px)/0.92 var(--font-display);
  letter-spacing: 0;
  text-transform: uppercase;
}

.surveillance-reveal-intel > p {
  color: #263331;
  font: 750 13px/1.25 var(--font-body);
}

.surveillance-reveal-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 3px solid var(--ink);
}

.surveillance-reveal-rule span {
  font: 900 8px/1 var(--font-mono);
  letter-spacing: 0;
}

.surveillance-reveal-rule strong {
  color: var(--gold);
  font: 900 11px/1 var(--font-display);
  letter-spacing: 0;
  text-align: right;
}

.surveillance-prototype-note {
  padding-left: 7px;
  border-left: 4px solid var(--orange);
  font-size: 10px !important;
  line-height: 1.18 !important;
}

.surveillance-file-button {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--paper-white);
  background: var(--orange);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--teal-dark, #073c42);
}

.surveillance-file-button:hover,
.surveillance-file-button:focus-visible,
.surveillance-reveal-close:hover,
.surveillance-reveal-close:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@keyframes surveillanceSignalPulse {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0.28; }
}

@keyframes surveillanceTextBlink {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0.58; }
}

@keyframes surveillanceDenied {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-7px); }
  36% { transform: translateX(6px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(3px); }
}

@keyframes surveillanceScan {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  82% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(220%); }
}

@keyframes surveillanceBurst {
  0% { opacity: 0; transform: scale(0.3) rotate(-10deg); }
  70% { opacity: 0.95; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 0.8; transform: scale(1) rotate(0); }
}

@keyframes surveillanceCardReveal {
  0% { opacity: 0; transform: translateY(72px) scale(0.55) rotateY(-92deg) rotateZ(-5deg); }
  42% { opacity: 1; transform: translateY(-10px) scale(1.05) rotateY(7deg) rotateZ(1.5deg); }
  68% { transform: translateY(5px) scale(0.98) rotateY(-3deg) rotateZ(-0.7deg); }
  84% { transform: translateY(-2px) scale(1.015) rotateY(1deg) rotateZ(0.3deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateY(0) rotateZ(0); }
}

@media (orientation: landscape) and (max-height: 500px) {
  .title-menu-tabs,
  .title-menu-tab {
    min-height: 29px;
  }

  .title-menu-tab {
    gap: 5px;
    padding: 3px 8px;
    font-size: 10px;
  }

  .title-menu-tab b {
    min-width: 34px;
    padding: 2px 4px;
    font-size: 8px;
  }

  .surveillance-terminal-panel {
    padding: 4px 7px;
  }

  .surveillance-console {
    box-shadow: 3px 3px 0 var(--orange);
  }

  .surveillance-console-header {
    min-height: 23px;
    padding: 3px 7px;
    font-size: 8px;
  }

  .surveillance-console-header strong {
    padding: 2px 5px;
    font-size: 8px;
  }

  .surveillance-console-grid {
    grid-template-columns: minmax(245px, 0.9fr) minmax(300px, 1.1fr);
  }

  .loyalty-reward {
    padding: 5px 8px;
  }

  .loyalty-reward h3 {
    margin: 1px 0 3px;
    font-size: 16px;
  }

  .loyalty-reward p,
  .loyalty-reward label {
    margin-block: 2px;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .surveillance-code-form,
  .surveillance-archive {
    min-height: 176px;
    padding: 5px 7px;
  }

  .surveillance-code-form {
    gap: 4px;
  }

  .surveillance-eyebrow,
  .surveillance-input-label {
    font-size: 7px;
  }

  .surveillance-terminal-heading h2 {
    margin-top: 1px;
    font-size: clamp(18px, calc(5.2vh + 1px), 23px);
    text-shadow: 2px 2px 0 var(--orange);
  }

  .surveillance-code-entry {
    min-height: 38px;
    gap: 3px;
  }

  .surveillance-code-prefix {
    min-width: 49px;
    border-width: 2px;
    box-shadow: 2px 2px 0 var(--orange);
    font-size: clamp(16px, calc(5vh + 1px), 21px);
  }

  .surveillance-code-slots {
    gap: 3px;
  }

  .surveillance-code-slots span {
    border-width: 1px;
    box-shadow: inset 0 -3px 0 rgb(0 0 0 / 38%);
    font-size: clamp(19px, calc(6vh + 1px), 25px);
  }

  .surveillance-command-row {
    gap: 4px;
  }

  .surveillance-decrypt-button,
  .surveillance-demo-code {
    min-height: 26px;
    border-width: 2px;
    font-size: 8px;
  }

  .surveillance-demo-code {
    padding: 2px 6px;
  }

  .surveillance-code-status {
    min-height: 16px;
    padding: 3px 5px;
    font-size: 7px;
  }

  .surveillance-archive {
    grid-template-rows: auto auto minmax(64px, 1fr);
    gap: 4px;
  }

  .surveillance-archive-list {
    min-height: 64px;
    scroll-padding-block: 4px;
  }

  .surveillance-archive-header h3 {
    margin-top: 1px;
    font-size: clamp(15px, calc(4.2vh + 1px), 19px);
  }

  .surveillance-archive-header span {
    font-size: 7px;
  }

  .surveillance-archive-header small {
    margin-top: 1px;
    font-size: 6.5px;
  }

  .surveillance-archive-header > strong {
    padding: 3px 6px;
    font-size: 10px;
  }

  .surveillance-slot-grid {
    gap: 2px;
  }

  .surveillance-archive-slot {
    min-height: 17px;
    font-size: 6.5px;
  }

  .surveillance-archive-empty {
    padding: 4px;
    font-size: 8px;
  }

  .surveillance-archive-entry {
    min-height: 34px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px;
    margin-bottom: 3px;
  }

  .surveillance-archive-view {
    min-height: 30px;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 4px;
    padding: 2px 4px;
  }

  .surveillance-archive-view > span:first-child {
    width: 24px;
    height: 24px;
    font-size: 8px;
  }

  .surveillance-archive-view strong {
    font-size: 11px;
  }

  .surveillance-archive-view small,
  .surveillance-archive-view > b,
  .surveillance-equip-button,
  .surveillance-pool-status {
    font-size: 6.5px;
  }

  .surveillance-equip-button,
  .surveillance-pool-status {
    min-width: 60px;
    margin-right: 3px;
    padding: 3px 4px;
  }

  .surveillance-reveal-overlay {
    padding: 4px;
  }

  .surveillance-reveal-sheet {
    width: min(850px, calc(100vw - 8px));
    height: calc(100svh - 8px);
    max-height: calc(100svh - 8px);
    box-shadow: 5px 5px 0 var(--teal);
  }

  .surveillance-reveal-header {
    min-height: 43px;
    padding: 4px 7px;
  }

  .surveillance-reveal-header span {
    font-size: 7px;
  }

  .surveillance-reveal-header h2 {
    font-size: clamp(24px, calc(7.5vh + 1px), 31px);
  }

  .surveillance-reveal-close {
    width: 31px;
    height: 31px;
    font-size: 22px;
  }

  .surveillance-reveal-body {
    grid-template-columns: minmax(355px, 58%) minmax(245px, 42%);
    gap: 7px;
    padding: 7px;
  }

  .surveillance-unlock-card {
    width: min(250px, 92%);
    height: min(280px, 100%);
    padding: 4px;
    gap: 2px;
    border-width: 3px;
    box-shadow: 5px 5px 0 rgb(0 0 0 / 67%);
  }

  .surveillance-card-stamp {
    top: 32px;
    right: -5px;
    padding: 2px 4px;
    font-size: 6.5px;
  }

  .surveillance-card-art {
    border-bottom-width: 2px;
  }

  .surveillance-card-copy {
    min-height: 52px;
    padding: 4px 6px 5px;
  }

  .surveillance-card-copy h3 {
    font-size: clamp(14px, calc(4.5vh + 1px), 19px);
  }

  .surveillance-card-copy p {
    margin-top: 2px;
    font-size: 8px;
  }

  .surveillance-reveal-intel {
    gap: 5px;
    padding: 7px;
    box-shadow: 3px 3px 0 var(--gold);
  }

  .surveillance-reveal-classification {
    font-size: 7px;
  }

  .surveillance-reveal-intel h3 {
    font-size: clamp(24px, calc(7vh + 1px), 31px);
  }

  .surveillance-reveal-intel > p {
    font-size: 10px;
    line-height: 1.15;
  }

  .surveillance-reveal-rule {
    padding: 4px;
    border-width: 2px;
  }

  .surveillance-reveal-rule span {
    font-size: 6.5px;
  }

  .surveillance-reveal-rule strong {
    font-size: 9px;
  }

  .surveillance-prototype-note {
    padding-left: 5px;
    border-left-width: 3px;
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  .surveillance-file-button {
    min-height: 29px;
    border-width: 2px;
    font-size: 9px;
  }
}

@media (min-width: 1000px) and (min-height: 600px) {
  .title-screen-box[data-title-tab="surveillance"] {
    height: min(720px, calc(100svh - 24px));
    max-height: calc(100svh - 24px);
  }

  .title-menu-tabs {
    min-height: 42px;
  }

  .title-menu-tab {
    min-height: 42px;
    font-size: 14px;
  }

  .surveillance-console-grid {
    grid-template-columns: minmax(340px, 0.8fr) minmax(440px, 1.2fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .surveillance-console-header i,
  .surveillance-code-form[data-state="scanning"] .surveillance-code-status,
  .surveillance-code-form[data-state="denied"],
  .surveillance-reveal-overlay.is-revealing .surveillance-reveal-scan,
  .surveillance-reveal-overlay.is-revealing .surveillance-reveal-burst,
  .surveillance-reveal-overlay.is-revealing .surveillance-unlock-card {
    animation: none;
  }

  .surveillance-reveal-overlay:not(.hidden) .surveillance-reveal-burst {
    opacity: 0.8;
    transform: none;
  }

  .surveillance-reveal-overlay:not(.hidden) .surveillance-unlock-card {
    opacity: 1;
    transform: none;
  }
}

/* Preserve the designed 360px-tall landscape canvas on unusually short
   screens, then let the document and full-screen panels scroll to reach it. */
@media (orientation: landscape) and (max-height: 359px) {
  html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto !important;
  }

  body:not(.quantum-wipe-running) {
    height: auto !important;
    min-height: 360px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.quantum-wipe-running) > main {
    height: calc(360px - clamp(36px, 7vh, 44px));
    min-height: calc(360px - clamp(36px, 7vh, 44px));
  }

  .screen-overlay,
  .newspaper-modal,
  .loading-screen,
  .surveillance-reveal-overlay {
    align-items: flex-start;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .title-body-content,
  .music-credits-body,
  .mood-grid,
  .phone-options-container {
    overscroll-behavior-y: auto;
  }

  .title-screen-box,
  .crisis-splash-box,
  .modal-box,
  .newspaper-sheet,
  .surveillance-reveal-sheet {
    height: 352px;
    max-height: none;
    flex: 0 0 auto;
  }
}

/* ========================================================================== 
   FOLDABLE / DUAL-DISPLAY EDITION
   Progressive enhancement for viewport segments, device posture, and the
   expanded-touch fallback used when a browser exposes only dynamic resizing.
   ========================================================================== */

.foldable-command-deck,
.foldable-title-sidecar {
  display: none;
}

.foldable-control-row {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(245px, 1fr) minmax(180px, 0.52fr);
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--teal-dark, #073c42);
}

.foldable-mode-control {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--ink);
}

.foldable-mode-control button {
  min-width: 0;
  min-height: 34px;
  padding: 4px 7px;
  color: var(--ink);
  background: var(--paper-white);
  border: 0;
  border-right: 2px solid var(--ink);
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
}

.foldable-mode-control button:last-child {
  border-right: 0;
}

.foldable-mode-control button.active {
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  box-shadow: inset 0 -4px 0 var(--orange);
}

.foldable-control-status {
  color: var(--teal-dark, #073c42);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-align: right;
}

html.fold-layout-dual {
  --fold-hinge-gap: 24px;
  --fold-header-height: 40px;
  --fold-nav-height: 36px;
  --fold-top-pane-height: calc(50svh - var(--fold-header-height) - var(--fold-nav-height) - 12px);
}

html.fold-layout-dual .rotate-device-gate {
  display: none !important;
}

html.fold-layout-dual body::after {
  content: "";
  position: fixed;
  z-index: 27;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 7%), transparent 20% 80%, rgb(255 255 255 / 5%)),
    var(--ink);
  opacity: 0.92;
}

html.fold-layout-dual.fold-axis-x body::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--fold-hinge-gap);
  transform: translateX(-50%);
  box-shadow: -3px 0 0 rgb(0 0 0 / 50%), 3px 0 0 rgb(240 229 204 / 8%);
}

html.fold-layout-dual.fold-axis-x header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fold-hinge-gap) minmax(0, 1fr);
  gap: 0;
}

html.fold-layout-dual.fold-axis-x header .brand {
  grid-column: 1;
  min-width: 0;
  justify-self: start;
}

html.fold-layout-dual.fold-axis-x header .status-hud {
  grid-column: 3;
  min-width: 0;
  max-width: 100%;
  justify-self: end;
  justify-content: flex-end;
}

html.fold-layout-dual.fold-axis-x .comic-toast-banner {
  left: 75%;
  width: max-content;
  max-width: calc(50vw - var(--fold-hinge-gap) - 20px);
}

html.fold-layout-dual.fold-axis-x[data-main-view="hand"] .comic-toast-banner,
html.fold-layout-dual.fold-axis-x[data-main-view="props"] .comic-toast-banner {
  left: 25%;
}

html.fold-layout-dual.fold-axis-y body::after {
  right: 0;
  left: 0;
  top: 50%;
  height: var(--fold-hinge-gap);
  transform: translateY(-50%);
  box-shadow: 0 -3px 0 rgb(0 0 0 / 50%), 0 3px 0 rgb(240 229 204 / 8%);
}

html.fold-layout-dual header,
html.fold-layout-dual main,
html.fold-layout-dual .screen-overlay,
html.fold-layout-dual .newspaper-modal,
html.fold-layout-dual .loading-screen,
html.fold-layout-dual .surveillance-reveal-overlay {
  padding-left: max(5px, env(safe-area-inset-left));
  padding-right: max(5px, env(safe-area-inset-right));
}

html.fold-layout-dual main {
  display: grid;
  max-width: none;
  width: 100%;
  gap: 0;
  margin: 0;
  overflow: hidden;
}

html.fold-layout-dual .top-nav-switcher-bar {
  position: relative;
  z-index: 32;
  width: 100%;
  max-width: none;
  margin: 0;
}

html.fold-layout-dual .view-panel:not(.hidden),
html.fold-layout-dual .foldable-command-deck {
  min-width: 0;
  min-height: 0;
}

html.fold-layout-dual .foldable-command-deck {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  color: var(--paper);
  background:
    linear-gradient(rgb(240 229 204 / 4%) 1px, transparent 1px) 0 0 / 100% 17px,
    radial-gradient(circle, rgb(240 229 204 / 8%) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    #071c21;
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--teal);
}

.foldable-deck-header {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border-bottom: 3px solid var(--ink);
}

.foldable-deck-kicker,
.foldable-section-heading span,
.foldable-docket-location,
.foldable-odds-readout > span {
  display: block;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.foldable-deck-header h2,
.foldable-section-heading h3,
.foldable-incident-docket h3 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0;
  text-transform: uppercase;
}

.foldable-deck-header h2 {
  margin-top: 2px;
  font-size: clamp(19px, 3.4vh, 27px);
  line-height: 0.95;
}

.foldable-posture-badge {
  flex: 0 0 auto;
  padding: 4px 6px;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
}

.foldable-incident-docket {
  position: relative;
  margin: 6px 7px 0;
  padding: 6px 8px;
  color: var(--ink);
  background:
    radial-gradient(circle, rgb(11 15 18 / 7%) 0 1px, transparent 1.2px) 0 0 / 7px 7px,
    var(--paper);
  border: 3px solid var(--ink);
  border-left: 8px solid var(--orange);
  box-shadow: 3px 3px 0 rgb(0 0 0 / 58%);
}

.foldable-docket-location {
  color: var(--red);
}

.foldable-incident-docket h3 {
  margin: 2px 0 4px;
  overflow: hidden;
  font-size: clamp(17px, 3vh, 25px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foldable-docket-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--teal-dark, #073c42);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
}

.foldable-stack-section {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 7px 3px;
  overflow: hidden;
}

.foldable-section-heading {
  min-height: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
}

.foldable-section-heading h3 {
  margin-top: 1px;
  color: var(--paper-white);
  font-size: clamp(14px, 2.4vh, 19px);
  line-height: 1;
}

.foldable-section-heading > strong {
  flex: 0 0 auto;
  padding: 3px 5px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 8px;
}

.foldable-section-heading.compact {
  min-height: 27px;
}

.foldable-card-stack-viewport {
  min-height: 0;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--orange) #091216;
  scrollbar-width: thin;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.foldable-card-stack-viewport:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

.foldable-card-stack {
  min-width: max-content;
  height: 100%;
  min-height: 178px;
  display: flex;
  align-items: flex-end;
  padding: 9px 44px 8px 10px;
}

.foldable-stack-card {
  position: relative;
  width: clamp(122px, 11.5vw, 158px);
  height: min(100%, clamp(176px, 27vh, 225px));
  min-height: 170px;
  display: grid;
  grid-template-rows: minmax(70px, 1fr) auto auto;
  gap: 3px;
  flex: 0 0 auto;
  margin-left: -38px;
  padding: 5px;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle, rgb(11 15 18 / 7%) 0 1px, transparent 1.2px) 0 0 / 7px 7px,
    var(--paper);
  border: 4px solid var(--ink);
  border-radius: 0;
  box-shadow: 7px 7px 0 rgb(0 0 0 / 72%);
  transform: translateY(4px) rotate(var(--stack-tilt));
  transform-origin: 50% 100%;
  scroll-snap-align: center;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.2, 0.85, 0.35, 1.22), box-shadow 180ms ease, filter 180ms ease;
}

.foldable-stack-card:first-child {
  margin-left: 0;
}

.foldable-stack-card:hover,
.foldable-stack-card:focus-visible {
  z-index: 90 !important;
  outline: 0;
  box-shadow: 8px 10px 0 var(--teal);
  transform: translateY(-10px) rotate(0deg) scale(1.03);
}

.foldable-stack-card.selected {
  z-index: 70 !important;
  border-color: var(--paper-white);
  box-shadow: 8px 10px 0 var(--orange);
  transform: translateY(-14px) rotate(0deg);
}

.foldable-stack-art {
  min-height: 0;
  display: block;
  background-color: var(--paper-white);
  background-position: center;
  background-size: cover;
  border: 2px solid var(--ink);
  filter: grayscale(1) contrast(1.45);
}

.foldable-stack-category {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 40px);
  padding: 2px 4px;
  overflow: hidden;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.foldable-stack-card > strong {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(10px, 1.45vw, 13px);
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.foldable-stack-card > b {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 11px;
}

.foldable-stack-card > i {
  display: block;
  padding: 3px 4px;
  color: var(--paper-white);
  background: var(--orange);
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.foldable-stack-card.selected > i {
  background: var(--teal);
}

.foldable-stack-empty {
  width: min(360px, calc(100vw - 40px));
  min-height: 135px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 3px dashed var(--ink);
  text-align: center;
}

.foldable-stack-empty strong {
  font-family: var(--font-display);
  font-size: 20px;
}

.foldable-stack-empty span {
  font-size: 11px;
}

.foldable-object-drawer {
  padding: 3px 7px 5px;
}

.foldable-object-list {
  min-height: 44px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.foldable-object-chip {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  padding: 3px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 rgb(0 0 0 / 70%);
  cursor: pointer;
}

.foldable-object-chip > span:first-child {
  display: grid;
  place-items: center;
  font-size: 19px;
}

.foldable-object-chip > span:last-child {
  min-width: 0;
  display: grid;
  text-align: left;
}

.foldable-object-chip strong,
.foldable-object-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foldable-object-chip strong {
  font-family: var(--font-display);
  font-size: 8px;
  text-transform: uppercase;
}

.foldable-object-chip small {
  color: var(--teal-dark, #073c42);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 900;
}

.foldable-object-chip.selected {
  color: var(--paper-white);
  background: var(--teal);
  box-shadow: 3px 3px 0 var(--orange);
  transform: translateY(-2px);
}

.foldable-object-chip.selected small {
  color: var(--paper-white);
}

.foldable-object-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 40px;
  color: var(--cream-dim);
  border: 2px dashed #536065;
  font-family: var(--font-mono);
  font-size: 9px;
}

.foldable-roll-console {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr);
  gap: 5px 9px;
  padding: 6px 7px;
  color: var(--ink);
  background: var(--paper);
  border-top: 4px solid var(--ink);
}

.foldable-odds-readout {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0 7px;
}

.foldable-odds-readout > span {
  color: var(--red);
}

.foldable-odds-readout > strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--teal-dark, #073c42);
  font-family: var(--font-display);
  font-size: clamp(24px, 4.6vh, 40px);
  line-height: 0.9;
}

.foldable-odds-readout > small {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
}

.foldable-odds-meter {
  align-self: center;
  height: 12px;
  overflow: hidden;
  background: var(--paper-white);
  border: 2px solid var(--ink);
}

.foldable-odds-meter i {
  width: 0;
  height: 100%;
  display: block;
  background: var(--orange);
  transition: width 260ms ease;
}

.foldable-console-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 0.7fr)) minmax(0, 1fr);
  gap: 4px;
}

.foldable-console-actions button {
  min-width: 0;
  min-height: 31px;
  padding: 4px 6px;
  overflow: hidden;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 2px solid var(--ink);
  font-family: var(--font-display);
  font-size: 9px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.foldable-console-actions button.primary {
  background: var(--orange);
}

.foldable-console-actions button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

/* Book posture: incident and response desk sit on opposite sides of the fold. */
html.fold-layout-dual.fold-axis-x main {
  grid-template-columns: minmax(0, 1fr) var(--fold-hinge-gap) minmax(0, 1fr);
  grid-template-rows: var(--fold-nav-height) minmax(0, 1fr);
}

html.fold-layout-dual.fold-axis-x .top-nav-switcher-bar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fold-hinge-gap) repeat(2, minmax(0, 0.5fr));
  background: transparent;
  border: 0;
}

html.fold-layout-dual.fold-axis-x #tab-nav-sector {
  grid-column: 1;
}

html.fold-layout-dual.fold-axis-x #tab-nav-hand {
  grid-column: 3;
}

html.fold-layout-dual.fold-axis-x #tab-nav-props {
  grid-column: 4;
}

html.fold-layout-dual.fold-axis-x .view-panel:not(.hidden) {
  grid-column: 1;
  grid-row: 2;
  margin: 3px 3px 0 0;
}

html.fold-layout-dual.fold-axis-x .foldable-command-deck {
  grid-column: 3;
  grid-row: 2;
  margin: 3px 0 0 3px;
}

html.fold-layout-dual.fold-axis-x[data-main-view="hand"] .view-panel:not(.hidden),
html.fold-layout-dual.fold-axis-x[data-main-view="props"] .view-panel:not(.hidden) {
  grid-column: 3;
  margin-right: 0;
  margin-left: 3px;
}

html.fold-layout-dual.fold-axis-x[data-main-view="hand"] .foldable-command-deck,
html.fold-layout-dual.fold-axis-x[data-main-view="props"] .foldable-command-deck {
  grid-column: 1;
  margin-right: 3px;
  margin-left: 0;
}

html.fold-layout-dual.fold-axis-x .carousel-card {
  width: clamp(215px, 25vw, 300px) !important;
}

html.fold-layout-dual.fold-axis-x .carousel-card.pos-left {
  transform: translateX(clamp(-205px, -18vw, -145px)) translateZ(-90px) scale(0.79) rotateY(15deg);
}

html.fold-layout-dual.fold-axis-x .carousel-card.pos-right {
  transform: translateX(clamp(145px, 18vw, 205px)) translateZ(-90px) scale(0.79) rotateY(-15deg);
}

html.fold-layout-dual.fold-axis-x .hand-carousel-item {
  width: clamp(205px, 22vw, 285px) !important;
}

html.fold-layout-dual.fold-axis-x .prop-carousel-item {
  width: clamp(205px, 23vw, 290px) !important;
}

html.fold-layout-dual.fold-axis-x .hand-top-control-bar,
html.fold-layout-dual.fold-axis-x .props-top-control-bar {
  align-items: stretch;
}

html.fold-layout-dual.fold-axis-x .hand-category-tabs-bar {
  width: 100%;
}

html.fold-layout-dual.fold-axis-x .title-screen-box {
  grid-column: 3;
  width: 100%;
  max-width: none;
  height: calc(100svh - 12px);
  max-height: none;
  min-width: 0;
}

html.fold-layout-dual.fold-axis-x #modal-controls:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fold-hinge-gap) minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

html.fold-layout-dual.fold-axis-x #modal-controls .controls-box {
  grid-column: 3;
  width: calc(100% - 12px);
  max-width: none;
  max-height: calc(100svh - 12px);
}

html.fold-layout-dual.fold-axis-x #modal-controls .controls-body {
  overflow-y: auto;
}

html.fold-layout-dual.fold-axis-x #modal-controls .foldable-control-row {
  grid-template-columns: 1fr;
}

html.fold-layout-dual.fold-axis-x #modal-controls .foldable-control-status {
  text-align: left;
}

html.fold-layout-dual.fold-axis-x #modal-title-screen:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fold-hinge-gap) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding-top: 6px;
  padding-bottom: 6px;
}

html.fold-layout-dual.fold-axis-x .foldable-title-sidecar {
  grid-column: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  min-width: 0;
  overflow: hidden;
  color: var(--paper-white);
  background: var(--teal-dark, #073c42);
  border: 5px solid var(--ink);
  box-shadow: inset 0 0 0 3px var(--paper);
}

.foldable-title-portrait {
  min-height: 0;
  margin: 9px 9px 0;
  background:
    linear-gradient(180deg, transparent 48%, rgb(7 28 33 / 12%) 65%, #071c21 100%),
    url('../characters/thomas-moorfield.png') center 18% / cover no-repeat,
    var(--paper-white);
  border: 4px solid var(--ink);
  filter: grayscale(1) contrast(1.22);
}

.foldable-title-sidecar > span,
.foldable-title-sidecar > strong,
.foldable-title-sidecar > i {
  margin-inline: 12px;
}

.foldable-title-sidecar > span {
  width: max-content;
  max-width: calc(100% - 24px);
  margin-top: -18px;
  padding: 5px 7px;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
}

.foldable-title-sidecar > strong {
  padding: 7px 0 2px;
  font-family: var(--font-display);
  font-size: clamp(34px, 6.8vw, 72px);
  line-height: 0.82;
}

.foldable-title-sidecar > i {
  margin-bottom: 12px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

/* Tabletop posture: the crisis remains above the fold and tactile controls
   move below it, keeping the physical hinge clear. */
html.fold-layout-dual.fold-axis-y main {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--fold-nav-height) minmax(0, var(--fold-top-pane-height)) var(--fold-hinge-gap) minmax(0, 1fr);
}

html.fold-layout-dual.fold-axis-y .top-nav-switcher-bar {
  grid-column: 1;
  grid-row: 1;
}

html.fold-layout-dual.fold-axis-y .view-panel:not(.hidden) {
  grid-column: 1;
  grid-row: 2;
  margin-bottom: 3px;
}

html.fold-layout-dual.fold-axis-y .foldable-command-deck {
  grid-column: 1;
  grid-row: 4;
  margin-top: 3px;
}

html.fold-layout-dual.fold-axis-y[data-main-view="hand"] .view-panel:not(.hidden),
html.fold-layout-dual.fold-axis-y[data-main-view="props"] .view-panel:not(.hidden) {
  grid-row: 4;
  margin-top: 3px;
  margin-bottom: 0;
}

html.fold-layout-dual.fold-axis-y[data-main-view="hand"] .foldable-command-deck,
html.fold-layout-dual.fold-axis-y[data-main-view="props"] .foldable-command-deck {
  grid-row: 2;
  margin-top: 0;
  margin-bottom: 3px;
}

html.fold-layout-dual.fold-axis-y .foldable-command-deck {
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

html.fold-layout-dual.fold-axis-y .foldable-deck-header {
  grid-column: 1 / -1;
}

html.fold-layout-dual.fold-axis-y .foldable-incident-docket {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  margin-bottom: 6px;
  overflow: hidden;
}

html.fold-layout-dual.fold-axis-y .foldable-incident-docket::after {
  content: "";
  position: absolute;
  inset: 78px 8px 8px;
  background: var(--fold-crisis-art, none) center / cover no-repeat var(--paper-white);
  border: 3px solid var(--ink);
  filter: grayscale(1) contrast(1.28);
}

html.fold-layout-dual.fold-axis-y .foldable-incident-docket > * {
  position: relative;
  z-index: 1;
}

html.fold-layout-dual.fold-axis-y .foldable-stack-section {
  grid-column: 2;
  grid-row: 2;
}

html.fold-layout-dual.fold-axis-y .foldable-object-drawer {
  display: none;
}

html.fold-layout-dual.fold-axis-y .foldable-roll-console {
  grid-column: 1 / -1;
  grid-row: 3;
}

html.fold-layout-dual.fold-axis-y .foldable-card-stack {
  min-height: 150px;
}

html.fold-layout-dual.fold-axis-y .foldable-stack-card {
  width: clamp(112px, 16vw, 150px);
  min-height: 145px;
  height: min(100%, 190px);
}

html.fold-layout-dual.fold-axis-y #modal-controls:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--fold-hinge-gap) minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

html.fold-layout-dual.fold-axis-y #modal-controls .controls-box {
  grid-row: 3;
  width: calc(100% - 12px);
  max-width: 760px;
  max-height: calc(50svh - var(--fold-hinge-gap) - 12px);
}

html.fold-layout-dual.fold-axis-y #modal-controls .controls-body {
  overflow-y: auto;
}

@media (horizontal-viewport-segments: 2) {
  html.fold-layout-dual {
    --fold-hinge-gap: max(18px, calc(env(viewport-segment-left 1 0, 50vw) - env(viewport-segment-right 0 0, 50vw)));
  }
}

@media (vertical-viewport-segments: 2) {
  html.fold-layout-dual {
    --fold-hinge-gap: max(18px, calc(env(viewport-segment-top 0 1, 50vh) - env(viewport-segment-bottom 0 0, 50vh)));
    --fold-top-pane-height: calc(env(viewport-segment-height 0 0, 50vh) - var(--fold-header-height) - var(--fold-nav-height));
  }
}

@media (min-width: 1100px) and (min-height: 700px) {
  html.fold-layout-dual {
    --fold-header-height: 68px;
    --fold-nav-height: 52px;
  }
}

@media (max-height: 520px) {
  html.fold-layout-dual .foldable-deck-header {
    min-height: 40px;
    padding-block: 3px;
  }

  html.fold-layout-dual .foldable-deck-header h2 {
    font-size: 19px;
  }

  html.fold-layout-dual .foldable-incident-docket {
    padding-block: 3px;
  }

  html.fold-layout-dual .foldable-incident-docket h3 {
    font-size: 16px;
  }

  html.fold-layout-dual .foldable-card-stack {
    min-height: 145px;
    padding-top: 5px;
  }

  html.fold-layout-dual .foldable-stack-card {
    min-height: 138px;
    height: 100%;
    width: 112px;
  }

  html.fold-layout-dual .foldable-stack-card > strong {
    font-size: 9px;
  }

  html.fold-layout-dual .foldable-object-drawer {
    display: none;
  }

  html.fold-layout-dual .foldable-roll-console {
    padding-block: 4px;
  }

  html.fold-layout-dual .foldable-odds-readout > strong {
    font-size: 27px;
  }
}

@media (max-width: 1300px) {
  html.fold-layout-dual.fold-axis-x .header-action-label,
  html.fold-layout-dual.fold-axis-x .shift-score-best,
  html.fold-layout-dual.fold-axis-x .opinion-bar-wrap {
    display: none;
  }

  html.fold-layout-dual.fold-axis-x .status-hud {
    gap: 4px;
  }

  html.fold-layout-dual.fold-axis-x .btn-call-levine-header,
  html.fold-layout-dual.fold-axis-x .btn-header-icon {
    min-width: 34px;
    padding-inline: 5px;
    justify-content: center;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .foldable-control-row {
    min-height: 48px;
    grid-template-columns: minmax(115px, 0.3fr) minmax(205px, 1fr) minmax(145px, 0.48fr);
    gap: 7px;
    padding: 4px 7px;
  }

  .foldable-mode-control button {
    min-height: 30px;
    font-size: 10px;
  }

  .foldable-control-status {
    font-size: 8px;
  }
}

@media (max-width: 620px) {
  .foldable-control-row {
    grid-template-columns: 1fr;
  }

  .foldable-control-status {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .foldable-stack-card,
  .foldable-odds-meter i {
    transition: none;
  }
}

/* Wide desktop command centre. The phone layout is intentionally dense, but
   a browser window should use the room it has instead of presenting that same
   interface as a small fixed-size panel in the middle of the screen. */
@media (min-width: 1440px) and (min-height: 760px) {
  html:not(.fold-layout-dual) main {
    width: 100%;
    max-width: 2200px;
  }

  html:not(.fold-layout-dual) #modal-title-screen {
    padding: clamp(16px, 2vmin, 28px);
  }

  html:not(.fold-layout-dual) .title-screen-box,
  html:not(.fold-layout-dual) .title-screen-box[data-title-tab="surveillance"] {
    width: min(2200px, 94vw);
    max-width: none;
    height: min(1050px, 94svh);
    max-height: min(1050px, 94svh);
  }

  html:not(.fold-layout-dual) .title-hero-header {
    min-height: clamp(104px, 13svh, 145px);
    padding: clamp(10px, 1.5svh, 18px) clamp(20px, 2vw, 36px);
  }

  html:not(.fold-layout-dual) .title-channel-line {
    margin-bottom: 8px;
    font-size: clamp(10px, 0.7vw, 13px);
  }

  html:not(.fold-layout-dual) .title-main-logo {
    font-size: clamp(50px, 4vw, 76px);
  }

  html:not(.fold-layout-dual) .title-tag-badge {
    padding: 4px 12px;
    font-size: clamp(10px, 0.72vw, 14px);
  }

  html:not(.fold-layout-dual) .title-sub-logo {
    font-size: clamp(15px, 1.05vw, 20px);
  }

  html:not(.fold-layout-dual) .title-menu-tabs,
  html:not(.fold-layout-dual) .title-menu-tab {
    min-height: clamp(46px, 5svh, 58px);
  }

  html:not(.fold-layout-dual) .title-menu-tab {
    font-size: clamp(15px, 1vw, 19px);
  }

  html:not(.fold-layout-dual) #title-tab-briefing.title-body-content:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(430px, 0.72fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    gap: clamp(10px, 1.2vmin, 16px);
    padding: clamp(12px, 1.4vmin, 20px);
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-cover-stripe {
    grid-column: 1 / -1;
    min-height: clamp(48px, 5.5svh, 62px);
    padding-inline: 9px 16px;
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-cover-stripe span {
    font-size: clamp(18px, 1.3vw, 25px);
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-approval-hero-card {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    justify-content: center;
    gap: clamp(10px, 1.4svh, 18px);
    padding: clamp(14px, 1.5vmin, 22px);
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-approval-top {
    font-size: clamp(12px, 0.9vw, 17px);
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-approval-center {
    align-items: stretch;
    gap: clamp(14px, 1.5vw, 26px);
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-approval-number-wrap {
    min-width: clamp(150px, 11vw, 215px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-approval-big-percent {
    font-size: clamp(66px, 6.5vw, 104px);
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-approval-sub-label {
    font-size: clamp(12px, 0.9vw, 17px);
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-approval-meter-wrap {
    align-self: center;
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-approval-bar-labels {
    font-size: clamp(10px, 0.73vw, 14px);
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-approval-desc {
    margin-top: clamp(9px, 1.3svh, 16px);
    font-size: clamp(14px, 0.95vw, 18px);
    line-height: 1.38;
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-story-card {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(135px, 0.42fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(12px, 1.2vw, 20px);
    padding: clamp(12px, 1.3vmin, 20px);
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-avatar-portrait {
    width: 100%;
    height: 100%;
    min-height: 170px;
    background-position: center 12%;
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-story-text {
    min-width: 0;
    align-self: center;
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-story-text h3 {
    margin-bottom: 8px !important;
    font-size: clamp(21px, 1.5vw, 29px) !important;
    line-height: 1;
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-story-text p {
    display: block;
    overflow: visible;
    font-size: clamp(13px, 0.9vw, 17px) !important;
    line-height: 1.42 !important;
    -webkit-line-clamp: initial;
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-how-to-grid {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 0.8vw, 14px);
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-feature-pill {
    min-height: clamp(86px, 10svh, 112px);
    padding: clamp(10px, 1vmin, 15px);
    font-size: clamp(12px, 0.78vw, 15px);
    line-height: 1.3;
  }

  html:not(.fold-layout-dual) #title-tab-briefing .title-feature-pill strong {
    font-size: clamp(16px, 1.08vw, 21px);
  }

  html:not(.fold-layout-dual) .title-patrol-goal {
    min-height: 38px;
    padding: 7px clamp(16px, 1.4vw, 26px);
    font-size: clamp(12px, 0.83vw, 16px);
  }

  html:not(.fold-layout-dual) .title-screen-footer {
    min-height: clamp(64px, 7svh, 78px);
    padding: 7px clamp(16px, 1.4vw, 26px);
  }

  html:not(.fold-layout-dual) .title-footer-stack {
    width: min(1680px, 100%);
  }

  html:not(.fold-layout-dual) .title-footer-actions {
    grid-template-columns: minmax(105px, 0.2fr) minmax(125px, 0.22fr) minmax(115px, 0.21fr) minmax(400px, 1.2fr) minmax(165px, 0.32fr);
    gap: clamp(8px, 0.8vw, 14px);
  }

  html:not(.fold-layout-dual) .title-utility-button,
  html:not(.fold-layout-dual) .btn-start-game-cta {
    min-height: 42px;
    font-size: clamp(12px, 0.8vw, 16px);
  }

  html:not(.fold-layout-dual) .btn-start-game-cta {
    max-width: none;
  }

  html:not(.fold-layout-dual) .surveillance-terminal-panel {
    padding: clamp(12px, 1.4vmin, 20px);
  }

  html:not(.fold-layout-dual) .surveillance-console-grid {
    grid-template-columns: minmax(460px, 0.72fr) minmax(640px, 1.28fr);
  }
}

/* Press-room rules sit last in the cascade so the eight current editions
   supersede the retained legacy newspaper styling above. */
.newspaper-sheet {
  border: 1px solid #17191a;
  box-shadow: inset 0 0 34px rgb(57 45 28 / 11%), 0 18px 42px rgb(0 0 0 / 48%), 4px 5px 0 rgb(0 0 0 / 34%);
}

.newspaper-sheet .news-extra-box {
  box-shadow: none;
}

.newspaper-sheet .news-headline {
  max-height: 2.05em;
  font-size: clamp(24px, calc(6.8vh + 1px), 42px);
  line-height: 0.93;
  text-align: left;
  text-align-last: auto;
  text-wrap: balance;
  text-shadow: none;
}

.newspaper-sheet .news-subhead-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 3px 5px;
  color: #17191a;
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  text-align: left;
  text-transform: none;
  border-top: 1px solid currentcolor;
  border-bottom: 3px double currentcolor;
}

.newspaper-sheet .news-opinion-delta,
.news-tabloid-bolt .news-opinion-delta,
.news-broadsheet-review .news-opinion-delta {
  display: grid;
  gap: 2px;
  padding: 5px 7px;
  color: #17191a;
  background: rgb(247 242 226 / 62%);
  border: 3px double #17191a;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, calc(2.4vh + 1px), 14px);
  line-height: 1.08;
}

.newspaper-sheet .news-opinion-delta.is-negative {
  color: #17191a !important;
  background: rgb(226 194 91 / 25%);
  border-color: #594711;
  box-shadow: none;
}

.newspaper-sheet .news-opinion-delta.is-critical {
  color: #17191a !important;
  background: rgb(181 45 36 / 14%);
  border-color: #7d211b;
  box-shadow: none;
  font-size: clamp(10px, calc(2.15vh + 1px), 13px);
}

.newspaper-sheet .news-continue-button {
  min-height: 30px;
  color: #f4edd9;
  background: #17191a;
  border: 1px solid #17191a;
  box-shadow: none;
}

.news-tabloid-chronicle .news-masthead {
  border-top: 4px double #17191a;
  border-bottom: 4px double #17191a;
}

.news-tabloid-chronicle .news-headline {
  border-top: 1px solid #17191a;
  border-bottom: 5px solid #17191a;
  text-align: center;
  text-align-last: center;
}

.newspaper-sheet.news-tabloid-bolt {
  border-top: 7px solid #b3261e;
}

.news-tabloid-bolt .news-masthead {
  background: transparent;
  border-top: 0;
  border-bottom: 5px solid #17191a;
}

.news-tabloid-bolt .news-headline {
  color: #f4edd9;
  background: #17191a;
  border-left: 9px solid #b3261e;
  transform: none;
}

.news-tabloid-bolt .news-subhead-strip {
  color: #17191a;
  background: rgb(179 38 30 / 13%);
}

.news-tabloid-bolt .news-opinion-delta {
  color: #f4edd9;
  background: #17191a;
  border-color: #f4edd9;
}

.news-tabloid-bolt .news-opinion-delta.is-critical {
  color: #f4edd9 !important;
  background: #351815;
  border-color: #b3261e;
}

.newspaper-sheet.news-tabloid-echo {
  background-color: #e9e1cb;
  background-image: linear-gradient(135deg, rgb(8 83 88 / 8%), transparent 34%), url("../ui/newsprint-paper-texture.webp");
  background-size: 100% 100%, cover;
  border: 1px solid #17191a;
  border-top: 7px solid #164d50;
  box-shadow: inset 0 0 34px rgb(57 45 28 / 11%), 0 18px 42px rgb(0 0 0 / 48%), 4px 5px 0 rgb(0 0 0 / 34%);
}

.news-tabloid-echo .news-masthead {
  color: #f4edd9;
  background: #164d50;
  border: 0;
}

.news-tabloid-echo .news-extra-box,
.news-tabloid-echo .news-extra-box:nth-of-type(3) {
  color: #17191a;
  background: #e3c44e;
  border: 2px solid #f4edd9;
  border-radius: 0;
  transform: none;
}

.news-tabloid-echo .news-headline {
  color: #17191a;
  background: transparent;
  border: 0;
  border-bottom: 5px solid #164d50;
  text-align: center;
  text-align-last: center;
}

.news-tabloid-echo .news-subhead-strip {
  color: #17191a;
  background: rgb(227 196 78 / 38%);
}

.news-tabloid-echo .news-brief-column,
.news-tabloid-echo .news-article-snippet {
  color: #17191a;
  background: rgb(255 255 255 / 12%);
  border-color: #164d50;
}

.news-broadsheet-register .news-headline {
  font-weight: 700;
  border-top: 0;
  border-bottom: 4px double #17191a;
}

.news-broadsheet-register .news-article-snippet p {
  column-count: 2;
  column-gap: 10px;
  column-rule: 1px solid rgb(23 25 26 / 28%);
}

.newspaper-sheet.news-broadsheet-review {
  background-color: #e9e4d8;
  background-image: linear-gradient(90deg, rgb(48 56 66 / 7%) 0 1px, transparent 1px 100%), url("../ui/newsprint-paper-texture.webp");
  background-size: 100% 100%, cover;
  border: 1px solid #303842;
  box-shadow: inset 0 0 34px rgb(57 45 28 / 10%), 0 18px 42px rgb(0 0 0 / 48%), 4px 5px 0 rgb(48 56 66 / 44%);
}

.news-broadsheet-review .news-headline {
  font-style: normal;
  font-weight: 600;
}

.news-broadsheet-review .news-opinion-delta {
  color: #303842;
  background: transparent;
  border-color: #303842;
}

@media (orientation: landscape) and (max-height: 500px) {
  .newspaper-sheet .news-opinion-delta,
  .newspaper-sheet .news-opinion-delta.is-critical {
    gap: 1px;
    padding: 3px 5px;
    font-size: clamp(9px, calc(2.1vh + 1px), 12px);
    line-height: 1.02;
  }
}

/* ========================================================================== 
   TYPE ROLES
   Impact remains a deliberate comic-cover voice. The narrower Barlow face is
   reserved for controls, card labels and small headings so their counters stay
   open and sharp instead of turning into dark blocks at browser scale.
   ========================================================================== */

.title-main-logo-primary,
.title-main-logo-world,
.splash-hero-title,
.loading-seven,
.loading-title-row h1,
.mission-complete-burst strong,
.clean-streak-celebration strong,
.arcade-score-popup strong,
.transit-location-name {
  font-family: var(--font-poster);
}

.title-menu-tab,
.title-feature-pill strong,
.title-story-text h3,
.title-utility-button,
.btn-start-game-cta,
.modal-header h2,
.mood-name,
.surveillance-terminal-heading h2,
.surveillance-archive-header h3,
.loyalty-reward h3 {
  text-shadow: none;
}

.surveillance-terminal-heading h2 {
  text-shadow: 1px 1px 0 var(--orange);
}

/* ========================================================================== 
   WIDE DESKTOP COMMAND CENTRE
   Large monitors receive real layout space rather than an enlarged phone
   canvas. This is isolated from landscape phones and dual-screen layouts.
   ========================================================================== */

@media (min-width: 1440px) and (min-height: 760px) {
  html:not(.fold-layout-dual) {
    --desktop-stage-width: min(2200px, 94vw);
    --desktop-panel-width: min(1900px, 92vw);
  }

  html:not(.fold-layout-dual) .screen-overlay,
  html:not(.fold-layout-dual) .newspaper-modal,
  html:not(.fold-layout-dual) .sector-transit-banner-overlay,
  html:not(.fold-layout-dual) .loading-screen,
  html:not(.fold-layout-dual) .surveillance-reveal-overlay {
    padding: clamp(16px, 2vmin, 28px);
  }

  /* Loading and title surfaces */
  html:not(.fold-layout-dual) .loading-sheet {
    width: min(1680px, 88vw);
    height: min(760px, 80svh);
    grid-template-columns: minmax(360px, 34%) minmax(0, 1fr);
  }

  html:not(.fold-layout-dual) .loading-content {
    gap: 22px;
    padding: 42px 52px;
  }

  html:not(.fold-layout-dual) .loading-kicker,
  html:not(.fold-layout-dual) .loading-dispatch-strip,
  html:not(.fold-layout-dual) .loading-readout {
    font-size: 15px;
  }

  html:not(.fold-layout-dual) .loading-title-row h1 {
    font-size: 82px;
  }

  html:not(.fold-layout-dual) .loading-title-row p {
    font-size: 25px;
  }

  html:not(.fold-layout-dual) .loading-seven {
    width: 104px;
    height: 104px;
    font-size: 76px;
  }

  html:not(.fold-layout-dual) .loading-meter {
    height: 25px;
  }

  html:not(.fold-layout-dual) .loading-enter-button {
    min-height: 54px;
    padding-inline: 26px;
    font-size: 20px;
  }

  /* Core gameplay canvas and all three card views */
  html:not(.fold-layout-dual) main {
    width: 100%;
    max-width: 2200px;
  }

  html:not(.fold-layout-dual) .sector-top-control-bar {
    max-width: 1800px !important;
  }

  html:not(.fold-layout-dual) .sector-recon-pill {
    width: clamp(250px, 18vw, 360px);
    max-width: 24vw;
    padding: 9px 12px !important;
    font-size: 16px !important;
  }

  html:not(.fold-layout-dual) #sector-top-crisis-counter {
    font-size: 16px !important;
  }

  html:not(.fold-layout-dual) .carousel-stage {
    perspective: 1250px;
  }

  html:not(.fold-layout-dual) .carousel-card {
    width: clamp(460px, 27vw, 560px);
    height: clamp(500px, 61vh, 650px);
  }

  html:not(.fold-layout-dual) .carousel-card.pos-left {
    transform: translateX(clamp(-650px, -32vw, -500px)) translateZ(-115px) scale(0.82) rotateY(13deg);
  }

  html:not(.fold-layout-dual) .carousel-card.pos-right {
    transform: translateX(clamp(500px, 32vw, 650px)) translateZ(-115px) scale(0.82) rotateY(-13deg);
  }

  html:not(.fold-layout-dual) .card-title {
    font-size: 36px;
  }

  html:not(.fold-layout-dual) .card-description {
    font-size: 16px;
  }

  html:not(.fold-layout-dual) .card-how-to-beat {
    font-size: 15px;
  }

  html:not(.fold-layout-dual) .hand-carousel-item,
  html:not(.fold-layout-dual) .prop-carousel-item {
    width: clamp(420px, 23vw, 500px);
    height: clamp(500px, 59vh, 630px);
    padding: 10px;
  }

  html:not(.fold-layout-dual) .hand-carousel-item.pos-left,
  html:not(.fold-layout-dual) .prop-carousel-item.pos-left {
    transform: translateX(clamp(-560px, -28vw, -430px)) translateZ(-90px) scale(0.79) rotateY(15deg);
  }

  html:not(.fold-layout-dual) .hand-carousel-item.pos-right,
  html:not(.fold-layout-dual) .prop-carousel-item.pos-right {
    transform: translateX(clamp(430px, 28vw, 560px)) translateZ(-90px) scale(0.79) rotateY(-15deg);
  }

  html:not(.fold-layout-dual) .p-card-title,
  html:not(.fold-layout-dual) .prop-tile-name {
    font-size: 24px;
  }

  html:not(.fold-layout-dual) .p-card-rules,
  html:not(.fold-layout-dual) .prop-tile-desc {
    font-size: 16px;
    line-height: 1.25;
  }

  html:not(.fold-layout-dual) .focused-crisis-card {
    width: min(1900px, 92vw);
    max-width: none;
    padding: 16px 20px;
  }

  /* Dr Levine's assessment */
  html:not(.fold-layout-dual) #modal-mood .modal-box {
    width: var(--desktop-panel-width);
    max-width: none;
    height: min(900px, 88svh);
    max-height: 88svh;
  }

  html:not(.fold-layout-dual) #modal-mood .modal-header {
    min-height: 66px;
    padding: 10px 18px;
  }

  html:not(.fold-layout-dual) #modal-mood .modal-header h2 {
    font-size: 27px;
  }

  html:not(.fold-layout-dual) #modal-mood .doctor-tag {
    padding: 5px 10px;
    font-size: 13px;
  }

  html:not(.fold-layout-dual) #modal-mood .modal-body {
    flex: 1;
    min-height: 0;
    padding: 16px 18px;
    gap: 14px;
  }

  html:not(.fold-layout-dual) .thomas-profile-hero {
    min-height: 82px;
    padding: 9px 12px;
  }

  html:not(.fold-layout-dual) .thomas-avatar-frame {
    width: 64px;
    height: 64px;
  }

  html:not(.fold-layout-dual) .thomas-hero-name {
    font-size: 20px;
  }

  html:not(.fold-layout-dual) .thomas-hero-details > div:last-child {
    font-size: 15px !important;
  }

  html:not(.fold-layout-dual) .mood-grid {
    gap: 12px;
  }

  html:not(.fold-layout-dual) .mood-card {
    padding: 12px 14px;
    gap: 7px;
  }

  html:not(.fold-layout-dual) .mood-name {
    font-size: 24px;
  }

  html:not(.fold-layout-dual) .mood-score,
  html:not(.fold-layout-dual) .btn-stat-roll,
  html:not(.fold-layout-dual) .stat-lock-tag {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 14px;
  }

  html:not(.fold-layout-dual) .mood-quote {
    display: block;
    color: #4f5c58;
    font-size: 17px;
    font-style: italic;
    line-height: 1.2;
  }

  html:not(.fold-layout-dual) .mood-effect {
    flex: 1;
    padding: 8px 10px;
    overflow: visible;
    font-size: 17px;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
  }

  html:not(.fold-layout-dual) #modal-mood .modal-footer {
    min-height: 72px;
    padding: 10px 18px;
  }

  html:not(.fold-layout-dual) #modal-mood .modal-footer .btn {
    min-height: 44px;
    padding-inline: 18px;
    font-size: 16px !important;
  }

  html:not(.fold-layout-dual) .stats-intro-card,
  html:not(.fold-layout-dual) .saved-patrol-card {
    width: min(1100px, 68vw);
    padding: 34px 42px 38px;
    transform: none;
  }

  html:not(.fold-layout-dual) .stats-intro-card h2,
  html:not(.fold-layout-dual) .saved-patrol-card h2 {
    font-size: 44px;
  }

  html:not(.fold-layout-dual) .stats-intro-card p,
  html:not(.fold-layout-dual) .saved-patrol-copy {
    font-size: 18px;
  }

  /* Controls and credits */
  html:not(.fold-layout-dual) #modal-controls .controls-box {
    width: min(1500px, 82vw);
    max-width: none;
    height: min(720px, 78svh);
  }

  html:not(.fold-layout-dual) #modal-controls .modal-header {
    min-height: 72px;
    padding: 10px 18px;
  }

  html:not(.fold-layout-dual) #modal-controls .modal-header h2 {
    font-size: 30px;
  }

  html:not(.fold-layout-dual) .controls-kicker {
    font-size: 12px;
  }

  html:not(.fold-layout-dual) .controls-close-button {
    width: 44px;
    height: 44px;
  }

  html:not(.fold-layout-dual) .controls-body {
    flex: 1;
    align-content: center;
    gap: 14px;
    padding: 20px;
  }

  html:not(.fold-layout-dual) .audio-channel-row {
    min-height: 86px;
    grid-template-columns: minmax(210px, 0.3fr) minmax(280px, 1fr) 68px 48px;
    gap: 16px;
    padding: 12px 16px;
  }

  html:not(.fold-layout-dual) .audio-channel-label {
    font-size: 21px;
  }

  html:not(.fold-layout-dual) .audio-channel-label span {
    width: 38px;
    height: 38px;
  }

  html:not(.fold-layout-dual) .audio-value {
    font-size: 15px;
  }

  html:not(.fold-layout-dual) .audio-mute-button {
    width: 44px;
    height: 44px;
    font-size: 19px;
  }

  html:not(.fold-layout-dual) .foldable-control-row {
    min-height: 82px;
    padding: 12px 16px;
  }

  html:not(.fold-layout-dual) #modal-controls .modal-footer .btn {
    min-height: 44px;
    font-size: 16px;
  }

  html:not(.fold-layout-dual) .music-credits-box {
    width: min(1600px, 84vw);
    height: min(760px, 78svh);
    max-height: 82svh;
  }

  html:not(.fold-layout-dual) .music-credits-header {
    min-height: 78px;
    padding: 12px 18px;
  }

  html:not(.fold-layout-dual) .music-credits-header h2 {
    font-size: 38px;
  }

  html:not(.fold-layout-dual) .music-credits-body {
    align-content: center;
    gap: 16px;
    padding: 20px 24px;
  }

  html:not(.fold-layout-dual) .music-credits-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  html:not(.fold-layout-dual) .music-credit-card {
    min-height: 220px;
    padding: 18px;
  }

  html:not(.fold-layout-dual) .music-credit-card h3 {
    font-size: 28px;
  }

  html:not(.fold-layout-dual) .music-credit-card p,
  html:not(.fold-layout-dual) .music-credits-intro {
    font-size: 16px;
  }

  /* Field manual, records and patrol report */
  html:not(.fold-layout-dual) .tutorial-box {
    width: var(--desktop-stage-width);
    max-width: none;
    height: min(920px, 88svh);
    max-height: 88svh;
  }

  html:not(.fold-layout-dual) .tutorial-header {
    min-height: 78px;
    padding: 10px 16px;
  }

  html:not(.fold-layout-dual) .tutorial-header h2 {
    font-size: 44px;
  }

  html:not(.fold-layout-dual) .tutorial-progress {
    min-height: 44px;
    gap: 6px;
    padding: 6px 10px;
  }

  html:not(.fold-layout-dual) .tutorial-progress button {
    font-size: 14px;
  }

  html:not(.fold-layout-dual) .tutorial-stage {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 31%);
    gap: 16px;
    padding: 16px;
  }

  html:not(.fold-layout-dual) .tutorial-copy {
    padding: 24px;
  }

  html:not(.fold-layout-dual) .tutorial-copy h3 {
    font-size: 42px;
  }

  html:not(.fold-layout-dual) .tutorial-copy p {
    font-size: 18px;
    line-height: 1.38;
  }

  html:not(.fold-layout-dual) .tutorial-tip {
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.3;
  }

  html:not(.fold-layout-dual) .tutorial-footer {
    min-height: 66px;
    padding: 9px 14px;
  }

  html:not(.fold-layout-dual) .tutorial-footer button {
    font-size: 17px;
  }

  html:not(.fold-layout-dual) .records-box,
  html:not(.fold-layout-dual) .shift-report-box {
    width: min(1900px, 92vw);
    max-width: none;
    transform: none;
  }

  html:not(.fold-layout-dual) .records-box {
    height: min(790px, 78svh);
  }

  html:not(.fold-layout-dual) .shift-report-box {
    height: min(920px, 88svh);
  }

  html:not(.fold-layout-dual) .records-header,
  html:not(.fold-layout-dual) .shift-report-header {
    min-height: 76px;
    padding: 11px 18px;
  }

  html:not(.fold-layout-dual) .records-header h2,
  html:not(.fold-layout-dual) .shift-report-header h2 {
    font-size: 36px;
  }

  html:not(.fold-layout-dual) .records-body,
  html:not(.fold-layout-dual) .shift-report-body {
    flex: 1;
    padding: 18px 20px;
  }

  html:not(.fold-layout-dual) .records-body {
    display: flex;
    flex-direction: column;
  }

  html:not(.fold-layout-dual) .records-table-wrap {
    flex: 1;
  }

  html:not(.fold-layout-dual) .records-table {
    font-size: 15px;
  }

  html:not(.fold-layout-dual) .records-table th,
  html:not(.fold-layout-dual) .records-table td {
    padding: 10px;
  }

  html:not(.fold-layout-dual) .records-career-card {
    padding: 12px;
  }

  html:not(.fold-layout-dual) .records-career-card strong {
    font-size: 34px;
  }

  html:not(.fold-layout-dual) .records-career-card span,
  html:not(.fold-layout-dual) .records-target-strip {
    font-size: 14px;
  }

  html:not(.fold-layout-dual) .records-actions,
  html:not(.fold-layout-dual) .shift-report-actions {
    min-height: 68px;
    padding: 10px 18px;
  }

  html:not(.fold-layout-dual) .records-actions button,
  html:not(.fold-layout-dual) .shift-report-actions button {
    min-height: 44px;
    font-size: 15px;
  }

  html:not(.fold-layout-dual) .shift-call-recap-card {
    min-width: 150px;
  }

  html:not(.fold-layout-dual) .shift-call-recap-art {
    min-height: 92px;
  }

  html:not(.fold-layout-dual) .shift-call-recap-copy strong {
    font-size: 12px;
  }

  html:not(.fold-layout-dual) .shift-breakdown-item,
  html:not(.fold-layout-dual) .shift-objective-result {
    font-size: 14px;
  }

  /* Crisis briefing, phone call and tactical confirmation */
  html:not(.fold-layout-dual) .crisis-splash-box {
    width: var(--desktop-panel-width);
    max-width: none;
    height: min(920px, 88svh);
    max-height: 88svh;
  }

  html:not(.fold-layout-dual) .splash-hero-header {
    min-height: 104px;
    padding: 13px 20px;
  }

  html:not(.fold-layout-dual) .splash-hero-title {
    font-size: 52px;
  }

  html:not(.fold-layout-dual) .splash-hero-sub {
    font-size: 15px;
  }

  html:not(.fold-layout-dual) .splash-body-content {
    min-height: 0;
    padding: 18px 22px;
    grid-template-columns: minmax(520px, 44%) minmax(0, 1fr);
    gap: 24px;
  }

  html:not(.fold-layout-dual) .comic-caption-box,
  html:not(.fold-layout-dual) .comic-speech-bubble,
  html:not(.fold-layout-dual) .splash-tactical-intel-box {
    padding: 16px 18px;
    font-size: 18px;
    line-height: 1.38;
  }

  html:not(.fold-layout-dual) .speech-bubble-avatar {
    width: 74px;
    height: 74px;
  }

  html:not(.fold-layout-dual) .splash-action-footer {
    min-height: 76px;
    padding: 12px 22px;
  }

  html:not(.fold-layout-dual) .splash-action-footer .btn {
    min-height: 46px;
    font-size: 16px;
  }

  html:not(.fold-layout-dual) .phone-call-panel {
    width: min(1600px, 82vw);
    max-width: none !important;
    height: min(880px, 86svh);
    max-height: 86svh;
  }

  html:not(.fold-layout-dual) .phone-call-header {
    min-height: 72px;
    padding: 11px 18px;
  }

  html:not(.fold-layout-dual) .phone-call-header h2 {
    font-size: 30px;
  }

  html:not(.fold-layout-dual) .phone-call-body {
    grid-template-columns: minmax(0, 1.35fr) minmax(430px, 0.8fr);
    grid-template-rows: auto minmax(120px, 0.34fr) minmax(0, 1fr);
    gap: 14px;
    padding: 18px 22px;
  }

  html:not(.fold-layout-dual) .phone-contact-strip {
    grid-column: 1 / -1;
    min-height: 74px;
    padding: 9px 12px;
  }

  html:not(.fold-layout-dual) .phone-conversation-stage {
    grid-column: 1;
    grid-row: 2 / 4;
    grid-template-columns: clamp(170px, 12vw, 230px) minmax(240px, 1fr) clamp(170px, 12vw, 230px);
    gap: 14px;
    padding: 12px;
  }

  html:not(.fold-layout-dual) .phone-waveform {
    height: 120px;
  }

  html:not(.fold-layout-dual) .phone-waveform-bar {
    height: 104px;
  }

  html:not(.fold-layout-dual) .phone-contact-avatar {
    width: 58px;
    height: 58px;
  }

  html:not(.fold-layout-dual) .phone-contact-name {
    font-size: 19px;
  }

  html:not(.fold-layout-dual) .phone-transcript,
  html:not(.fold-layout-dual) .phone-option-button {
    font-size: 16px;
  }

  html:not(.fold-layout-dual) .phone-transcript {
    grid-column: 2;
    grid-row: 2;
    max-height: none;
    padding: 14px 16px;
    font-size: 18px;
  }

  html:not(.fold-layout-dual) .phone-options-container {
    grid-column: 2;
    grid-row: 3;
    gap: 12px;
  }

  html:not(.fold-layout-dual) .phone-options-container .btn {
    min-height: 72px;
    padding: 12px 14px !important;
    font-size: 16px !important;
    line-height: 1.22;
  }

  html:not(.fold-layout-dual) .phone-options-container .btn small {
    margin-bottom: 5px !important;
    font-size: 13px;
  }

  html:not(.fold-layout-dual) .roll-review-panel {
    width: min(1600px, 72vw);
    min-height: min(760px, 70svh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 38px 46px;
  }

  html:not(.fold-layout-dual) .roll-review-panel h2 {
    font-size: 62px;
  }

  html:not(.fold-layout-dual) .roll-review-kicker,
  html:not(.fold-layout-dual) .roll-review-target,
  html:not(.fold-layout-dual) .roll-review-warning,
  html:not(.fold-layout-dual) .roll-review-remaining {
    font-size: 20px;
  }

  html:not(.fold-layout-dual) .roll-review-math strong {
    font-size: 58px;
  }

  html:not(.fold-layout-dual) .roll-review-math span {
    font-size: 15px;
  }

  html:not(.fold-layout-dual) .roll-review-math div {
    min-height: 112px;
    display: grid;
    place-content: center;
    padding: 14px;
  }

  html:not(.fold-layout-dual) .roll-review-icons,
  html:not(.fold-layout-dual) .dice-loadout-strip {
    min-height: 72px;
  }

  html:not(.fold-layout-dual) .roll-review-actions .btn {
    min-height: 56px;
    padding-inline: 24px;
    font-size: 20px;
  }

  /* Unlock reveal and mission newspapers */
  html:not(.fold-layout-dual) .surveillance-reveal-sheet {
    width: min(1700px, 86vw);
    height: min(880px, 84svh);
    max-height: 84svh;
  }

  html:not(.fold-layout-dual) .surveillance-reveal-header {
    min-height: 82px;
    padding: 10px 16px;
  }

  html:not(.fold-layout-dual) .surveillance-reveal-header h2 {
    font-size: 46px;
  }

  html:not(.fold-layout-dual) .surveillance-reveal-body {
    grid-template-columns: minmax(560px, 54%) minmax(420px, 46%);
    gap: 22px;
    padding: 22px;
  }

  html:not(.fold-layout-dual) .surveillance-unlock-card {
    width: min(440px, 92%);
    height: min(590px, 100%);
    padding: 8px;
  }

  html:not(.fold-layout-dual) .surveillance-card-copy h3 {
    font-size: 28px;
  }

  html:not(.fold-layout-dual) .surveillance-card-copy p,
  html:not(.fold-layout-dual) .surveillance-reveal-intel > p {
    font-size: 16px;
  }

  html:not(.fold-layout-dual) .surveillance-reveal-intel {
    gap: 14px;
    padding: 22px;
  }

  html:not(.fold-layout-dual) .surveillance-reveal-intel h3 {
    font-size: 48px;
  }

  html:not(.fold-layout-dual) .newspaper-sheet {
    width: min(1720px, 88vw);
    max-width: none;
    height: min(900px, 86svh);
    max-height: 86svh;
    padding: 18px;
    transform: none;
  }

  html:not(.fold-layout-dual) .newspaper-sheet .news-paper-name {
    font-size: 52px;
  }

  html:not(.fold-layout-dual) .newspaper-sheet .news-headline {
    font-size: 58px;
  }

  html:not(.fold-layout-dual) .newspaper-sheet .news-brief-column,
  html:not(.fold-layout-dual) .newspaper-sheet .news-article-snippet {
    font-size: 15px;
    line-height: 1.28;
  }

  html:not(.fold-layout-dual) .newspaper-sheet .news-opinion-delta,
  html:not(.fold-layout-dual) .newspaper-sheet .news-opinion-delta.is-critical {
    font-size: 17px;
  }

  html:not(.fold-layout-dual) .transit-comic-box {
    width: min(1500px, 76vw);
    max-width: none;
    padding: 40px 64px;
  }

  html:not(.fold-layout-dual) .transit-location-name {
    font-size: 64px;
  }

  html:not(.fold-layout-dual) .transit-sub {
    font-size: 19px;
  }
}

/* A front page needs more than a headline and one paragraph. These compact
   reporting modules give every edition a believable lower article column
   while disappearing on short landscape phones, where the lead is enough. */
.news-article-secondary {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 3px double currentcolor;
}

.newspaper-sheet .news-article-followup {
  margin: 0;
}

.newspaper-sheet .news-article-followup::first-letter {
  float: none;
  margin: 0;
  font: inherit;
  line-height: inherit;
}

.news-witness-report {
  margin: 0;
  padding: 7px 9px;
  border-left: 4px solid currentcolor;
  background: rgb(255 255 255 / 14%);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  line-height: 1.18;
}

.news-witness-report span {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 0.66em;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.news-response-file {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
}

.news-response-file div {
  min-width: 0;
  padding: 5px 6px;
  border-top: 1px solid currentcolor;
  border-bottom: 1px solid currentcolor;
}

.news-response-file dt {
  font-family: var(--font-mono);
  font-size: 0.58em;
  font-weight: 900;
  text-transform: uppercase;
}

.news-response-file dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1.05;
}

@media (min-width: 1440px) and (min-height: 760px) {
  html:not(.fold-layout-dual) .newspaper-sheet .news-article-secondary {
    gap: 11px;
    margin-top: 11px;
    padding-top: 11px;
  }

  html:not(.fold-layout-dual) .newspaper-sheet .news-witness-report {
    padding: 10px 12px;
    font-size: 16px;
  }

  html:not(.fold-layout-dual) .newspaper-sheet .news-response-file dd {
    font-size: 14px;
  }
}

@media (min-height: 501px) and (max-width: 1439px) {
  .news-article-secondary {
    gap: 4px;
    margin-top: 4px;
    padding-top: 4px;
  }

  .newspaper-sheet .news-article-followup {
    display: none;
  }

  .news-witness-report {
    padding: 4px 6px;
    font-size: 0.82em;
  }

  .news-response-file div {
    padding: 3px 4px;
  }

  .news-broadsheet-review .news-witness-report {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .news-article-secondary {
    display: none;
  }
}