/* Readability pass.
   Loaded after the visual themes so type can grow without scaling the raster UI. */

body.immersive {
  font-size: 16px;
}

body.immersive :is(button, select, input, textarea) {
  font-size: 13px;
}

/* Resource ribbon, map navigation and map annotations. */
.immersive .stats span,
.immersive .stats small {
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: .055em;
}

.immersive .stats strong,
.immersive .stats .round-stat strong {
  font-size: clamp(18px, 1.35vw, 23px);
}

.immersive .stats .round-stat i {
  font-size: 13px;
}

.immersive .nav::after,
.immersive .board-title,
.immersive .board-hint,
.immersive .map-legend,
.immersive .city-label,
.immersive .sea-label small {
  font-size: 11px;
  line-height: 1.25;
}

.immersive .nav::after {
  padding: 5px 9px;
}

.immersive .city-label {
  padding: 7px 10px;
  line-height: 1.15;
}

.immersive .sea-label {
  font-size: 13px;
}

.immersive .map-legend {
  flex-wrap: wrap;
  row-gap: 5px;
}

/* City command card and worker controls. */
.immersive .research-panel span,
.immersive .location-tag,
.immersive .city-number,
.immersive .inspect-button,
.immersive .city-topline .eyebrow,
.immersive .status-badge,
.immersive .city-values span,
.immersive .city-values small,
.immersive .city-footnote,
.immersive .tile-picker-label {
  font-size: 11px;
  line-height: 1.3;
}

.immersive .research-panel strong {
  font-size: 16px;
  line-height: 1.25;
}

.immersive .research-panel {
  height: 60px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.immersive .city-card {
  top: 196px;
  max-height: calc(100dvh - 404px);
}

.immersive .city-body h2 {
  font-size: 27px;
  line-height: 1.08;
}

.immersive .city-description,
.resource-yield,
.settler-panel,
.expansion-panel,
.worker-panel,
.attractions small,
.resource-yield small,
.settler-panel small,
.expansion-panel small,
.worker-panel small {
  font-size: 13px;
  line-height: 1.55;
}

.immersive .city-values strong {
  font-size: 17px;
}

.immersive #tile-picker,
.immersive .city-body :is(.primary, .secondary),
.immersive .action-row button,
.insurance-block button,
.settler-panel :is(button, select),
.worker-panel :is(button, select),
.attractions button {
  font-size: 12px !important;
  line-height: 1.35;
}

.insurance-block strong,
.insurance-block small,
.settler-panel h3,
.worker-panel h3,
.expansion-panel h3 {
  font-size: 13px;
  line-height: 1.4;
}

/* Rival ranking, turn command and news. */
.immersive .rank-no,
.immersive .rank-name,
.immersive .rank-value {
  font-size: 11px;
  line-height: 1.25;
}

.immersive .rank-name {
  overflow-wrap: anywhere;
}

.immersive .turn-bar::before {
  font-size: 11px;
  line-height: 1;
}

.immersive .turn-copy {
  padding-top: 10px;
}

.immersive .turn-copy strong {
  font-size: 18px;
  line-height: 1.25;
}

.immersive .turn-copy span {
  font-size: 12px;
  line-height: 1.45;
}

.immersive .turn-bar .primary {
  font-size: 12px;
  line-height: 1.15;
}

.immersive .news-card .eyebrow,
.immersive .news-card p:last-child,
.immersive .activity .section-title > span,
.immersive #activity-log,
.immersive #activity-log b {
  font-size: 11px;
  line-height: 1.45;
}

.immersive .news-card h3,
.immersive .activity .section-title h2 {
  font-size: 14px;
  line-height: 1.3;
}

/* Minimap labels remain inside the ornate fixed frame. */
.strategic-minimap::before,
.minimap-controls button {
  font-size: 11px;
  line-height: 1.15;
}

.strategic-minimap {
  padding-bottom: 39px;
}

.minimap-controls button {
  padding: 5px 3px;
  white-space: normal;
}

/* Dialog shell, common panels and form controls. */
.immersive dialog {
  line-height: 1.5;
}

.immersive .modal-top .eyebrow,
.immersive #modal-label {
  font-size: 12px;
  line-height: 1.35;
}

.immersive #modal-body p,
.immersive #modal-body .lead,
.immersive .help-steps li,
.immersive .holdings,
.immersive .portfolio-item small,
.immersive .save-slot p,
.immersive .leader-profile p,
.immersive .diplomacy-status,
.immersive .settings-grid label,
.immersive .settings-grid small {
  font-size: 14px;
  line-height: 1.65;
}

.immersive #modal-body h2 {
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1.15;
}

.immersive #modal-body h3,
.immersive .holdings h3,
.immersive .leader-profile h3,
.immersive .save-slot strong,
.immersive .portfolio-item strong {
  font-size: 16px;
  line-height: 1.35;
}

.immersive :is(.modal-actions, .diplomacy-actions) :is(.primary, .secondary),
.immersive .save-slot :is(.primary, .secondary),
.immersive .settings-grid select,
.immersive .trade-columns :is(input, select),
.immersive .stock-controls :is(button, select) {
  font-size: 13px;
  min-height: 42px;
}

.immersive .perk-banner {
  font-size: 14px;
  line-height: 1.55;
}

.immersive .perk-banner span {
  font-size: 11px;
  line-height: 1.3;
}

/* Building catalogue. */
.catalog-filter,
.catalog-filter select,
.building-card p,
.building-card > span,
.building-card > small,
.catalog-notice {
  font-size: 13px;
  line-height: 1.55;
}

.building-card h3 {
  font-size: 18px;
  line-height: 1.25;
}

.building-card .primary {
  font-size: 13px;
  min-height: 46px;
}

/* Technology tree gets taller rows rather than compressed copy. */
.tech-summary > span,
.era-row,
.tech-note {
  font-size: 12px !important;
  line-height: 1.4;
}

.tech-tree {
  min-width: 1250px;
  grid-template-rows: 36px repeat(3, 184px);
}

.tech-node {
  min-height: 168px;
  padding: 15px 13px 13px;
}

.tech-node h3 {
  font-size: 14px !important;
  line-height: 1.25;
}

.tech-node p,
.tech-node small,
.tech-action {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.tech-action {
  min-height: 34px;
  padding: 7px;
}

/* Stock market, trade and diplomacy. */
.stock-symbol,
.stock-heading h3,
.stock-heading small,
.stock-heading > strong small,
.stock-owned {
  font-size: 12px;
  line-height: 1.35;
}

.stock-heading > strong {
  font-size: 17px;
}

.trade-overview span,
.trade-route-card p,
.trade-route-card label,
.trade-route-card select,
.trade-route-card small,
.trade-route-note,
.trade-columns label,
.trade-preview {
  font-size: 13px !important;
  line-height: 1.6;
}

.trade-route-card h3 {
  font-size: 20px;
  line-height: 1.3;
}

.route-endpoints {
  font-size: 19px !important;
}

/* Home menu and leader selection. Keep the display title's existing clamp. */
.immersive .home-content > .eyebrow,
.immersive .home-brand > span,
.selection-header .eyebrow,
.selection-turns,
.leader-stage-caption span {
  font-size: 12px;
  line-height: 1.35;
}

.immersive .home-menu {
  width: min(350px, 88vw);
}

.immersive .home-menu button {
  font-size: 23px;
  line-height: 1.25;
  padding: 15px 23px;
}

.immersive .home-menu button small {
  font-size: 14px;
  line-height: 1.35;
}

.studio-intro p,
.skip-intro {
  font-size: 12px;
  line-height: 1.4;
}

.immersive .character-card strong {
  font-size: 13px;
  line-height: 1.3;
}

.immersive .character-card small,
.roster-note,
.fiction-note,
.immersive .character-detail label,
.immersive .character-detail .eyebrow,
.immersive .character-detail .victory-description,
.victory-rule,
.victory-progress,
.portfolio-item > span > small {
  font-size: 12px;
  line-height: 1.5;
}

.immersive .character-detail p {
  font-size: 15px;
  line-height: 1.65;
}

.immersive .character-detail :is(select, #game-victory) {
  font-size: 14px;
  line-height: 1.35;
}

/* Leader story and narration controls. */
.story-header,
.story-header > span,
.story-content > .eyebrow,
.story-fiction {
  font-size: 12px;
  line-height: 1.5;
}

.story-header .secondary,
.story-audio-controls button,
.story-audio-controls [role=status],
.story-audio-controls small,
.story-actions > div {
  font-size: 13px;
  line-height: 1.5;
}

.story-transcript {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.85;
}

.story-ability > span {
  font-size: 15px;
}

.story-ability p {
  font-size: 14px;
  line-height: 1.65;
}

.immersive .story-actions .primary {
  font-size: 20px;
}

@media (max-width: 1200px) and (min-width: 761px) {
  .immersive .stats {
    grid-template-columns: 1.25fr .8fr .72fr;
  }

  .immersive .stats > div:nth-child(2) {
    display: none;
  }
}

@media (max-width: 980px) and (min-width: 761px) {
  .immersive .stats {
    right: 132px;
  }

  .immersive .stats > div {
    padding-right: 8px;
  }

  .immersive .stats span,
  .immersive .stats small {
    font-size: 10px;
    letter-spacing: .025em;
  }

  .immersive .ranking-card {
    width: 250px;
  }

  .immersive .rank-row {
    width: 72px;
  }

  .immersive .turn-bar {
    min-width: 410px;
  }
}

@media (max-width: 760px) {
  body.immersive {
    font-size: 15px;
  }

  .immersive .stats {
    height: 66px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .immersive .stats > div {
    min-height: 56px;
    padding: 3px 4px 3px 35px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    row-gap: 1px;
  }

  .immersive .stats span,
  .immersive .stats strong,
  .immersive .stats small,
  .immersive .stats .round-stat strong {
    grid-column: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .immersive .stats strong,
  .immersive .stats .round-stat strong {
    grid-row: 1;
    font-size: 15px;
  }

  .immersive .stats span {
    grid-row: 2;
    font-size: 9px;
    letter-spacing: 0;
  }

  .immersive .stats small {
    grid-row: 3;
    font-size: 9px;
  }

  .immersive .topbar nav {
    top: 133px;
  }

  .immersive .board-panel {
    height: 680px;
    min-height: 680px;
  }

  .immersive .research-panel {
    top: 185px;
    width: 190px;
    height: 58px;
  }

  .immersive .research-panel span {
    font-size: 10px;
  }

  .immersive .research-panel strong {
    max-width: 132px;
    font-size: 12px;
  }

  .immersive .ranking-card {
    top: 189px;
    width: 180px;
  }

  .immersive .rank-row {
    width: 55px;
  }

  .immersive .rank-avatar {
    width: 42px;
    height: 42px;
  }

  .immersive .rank-no,
  .immersive .rank-name,
  .immersive .rank-value {
    font-size: 11px;
  }

  .immersive .rank-no {
    width: 16px;
    height: 16px;
  }

  .immersive .city-card {
    top: auto;
    max-height: none;
  }

  .immersive .turn-bar {
    left: 169px;
    min-height: 126px;
    padding: 22px 78px 14px 14px;
  }

  .immersive .turn-bar::before {
    font-size: 10px;
  }

  .immersive .turn-copy strong {
    max-width: 125px;
    font-size: 14px;
    line-height: 1.3;
  }

  .immersive .turn-bar .primary {
    width: 70px;
    min-width: 70px;
    height: 70px;
    font-size: 10px;
  }

  .strategic-minimap {
    width: 154px;
    height: 126px;
    padding: 21px 9px 33px;
  }

  .strategic-minimap::before {
    left: 12px;
    top: 7px;
    max-width: 130px;
    font-size: 9px;
    letter-spacing: .035em;
    white-space: normal;
  }

  .minimap-controls button {
    font-size: 9px;
    line-height: 1.1;
  }

  .immersive .board-controls {
    bottom: 140px;
  }

  .immersive .map-legend {
    bottom: 141px;
    max-width: 270px;
    font-size: 10px;
  }

  .immersive .sea-label,
  .immersive .city-label {
    font-size: 10px;
  }

  .immersive .home-content > .eyebrow,
  .selection-header .eyebrow,
  .selection-turns,
  .immersive .home-brand > span {
    font-size: 11px;
  }

  .immersive .character-card strong {
    font-size: 11px;
  }

  .immersive .character-detail p,
  .story-transcript {
    font-size: 15px;
  }

  .story-header > span {
    font-size: 11px;
    letter-spacing: .06em;
  }
}

@media (max-width: 430px) {
  .immersive .ranking-card {
    width: 176px;
  }

  .immersive .rank-row {
    width: 53px;
  }

  .immersive .home-menu {
    width: min(310px, 88vw);
  }

  .immersive .home-menu button {
    font-size: 20px;
    padding: 13px 19px;
  }

  .immersive .home-menu button small {
    font-size: 13px;
  }
}