/* 最后加载的手机可读性层：统一字号层级，并为放大后的文字重新分配空间。 */
:root {
  --ui-caption: 12px;
  --ui-body: 14px;
  --ui-label: 15px;
  --ui-title: 18px;
  --ui-number: 20px;
}

.app {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 开场与新手剧情 */
.edition-pill,
.start-fineprint,
.prologue-brand small,
.prologue-progress,
.prologue-dialogue > small {
  font-size: var(--ui-caption);
  line-height: 1.35;
}

.start-fineprint {
  margin-top: 10px;
  letter-spacing: 0.08em;
}

.prologue-dialogue > b {
  font-size: 17px;
}

.prologue-dialogue > p {
  font-size: 16px;
  line-height: 1.65;
}

.prologue-skip,
.prologue-next {
  font-size: var(--ui-body);
}

/* 顶部身份、资源和当前目标 */
.topbar {
  position: relative;
  grid-template-columns: minmax(128px, 1fr) auto 46px;
  gap: 6px;
  min-height: 82px;
  padding: calc(8px + env(safe-area-inset-top)) 10px 20px;
}

.profile-avatar {
  width: 50px;
  height: 50px;
}

.profile-copy {
  margin-left: 8px;
}

.profile-copy small {
  font-size: var(--ui-caption);
  line-height: 1.2;
}

.profile-copy b {
  font-size: 17px;
  line-height: 1.2;
}

.profile-copy em {
  position: absolute;
  right: 10px;
  bottom: 4px;
  left: 68px;
  max-width: none;
  font-size: var(--ui-caption);
  line-height: 1.3;
}

.resource-strip {
  gap: 4px;
}

.resource {
  min-height: 40px;
  padding: 3px 8px 3px 4px;
  font-size: 17px;
}

.resource i {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  font-size: 14px;
}

.resource small {
  font-size: var(--ui-caption);
}

.icon-button {
  width: 46px;
  height: 46px;
  font-size: 22px;
}

.mission-card {
  grid-template-columns: 42px minmax(0, 1fr) auto 24px;
  min-height: 70px;
  padding: 8px 10px;
}

.mission-icon {
  width: 36px;
  height: 36px;
  font-size: 20px;
}

.mission-copy small {
  font-size: var(--ui-caption);
  line-height: 1.25;
}

.mission-copy b {
  font-size: var(--ui-label);
  line-height: 1.35;
}

.sector-pill {
  min-height: 34px;
  padding: 6px 10px;
  font-size: var(--ui-caption);
  letter-spacing: 0.03em;
}

/* 基地状态、敌情与模式切换 */
.base-view {
  --base-tabs-top: 84px;
  --squad-grid-top: 150px;
}

.base-status {
  min-height: 38px;
  padding: 0 11px;
  font-size: var(--ui-caption);
}

.base-status b {
  font-size: var(--ui-caption);
}

.base-status small {
  font-size: var(--ui-caption);
}

.enemy-intel {
  grid-template-columns: 52px minmax(0, 1fr);
  width: min(57%, 226px);
  min-height: 66px;
  padding: 5px 9px 5px 4px;
  border-radius: 17px 6px 17px 6px;
}

.enemy-intel img {
  width: 50px;
  height: 54px;
}

.enemy-intel span {
  gap: 1px;
}

.enemy-intel small,
.enemy-intel em {
  font-size: var(--ui-caption);
  line-height: 1.25;
}

.enemy-intel b {
  font-size: 13px;
  line-height: 1.3;
}

.enemy-intel em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.base-mode-tabs {
  grid-template-columns: repeat(2, minmax(108px, 1fr));
  padding: 5px;
}

.base-mode-tabs button {
  gap: 7px;
  min-height: 48px;
  padding: 0 15px;
  font-size: var(--ui-body);
}

.base-mode-tabs span {
  font-size: 19px;
}

/* 岛屿建设区 */
.construction-view::before {
  inset: 102px 0 0;
}

.construction-routes,
.building-plots {
  top: 116px;
}

.construction-routes {
  height: calc(100% - 146px);
}

.building-label {
  min-height: 30px;
  max-width: 122%;
  gap: 5px;
  padding: 4px 5px 4px 8px;
}

.building-label b {
  font-size: var(--ui-caption);
  line-height: 1.2;
}

.building-label em {
  padding: 4px 6px;
  font-size: var(--ui-caption);
  line-height: 1;
}

.building-plot.is-empty b {
  padding: 4px 8px;
  font-size: var(--ui-caption);
  letter-spacing: 0.02em;
}

.plot-plus {
  width: 46px;
  height: 46px;
  font-size: 27px;
}

.construction-hint {
  right: 10px;
  bottom: 7px;
  left: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(24, 70, 73, 0.56);
  font-size: var(--ui-caption);
  line-height: 1.35;
}

.construction-panel {
  right: 7px;
  bottom: 7px;
  left: 7px;
  max-height: min(62%, 390px);
  padding: 18px 14px 14px;
}

.construction-panel-close {
  top: 6px;
  right: 6px;
  font-size: 25px;
}

.construction-detail-head {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  padding-right: 34px;
}

.construction-detail-head img {
  width: 88px;
  height: 82px;
}

.construction-detail-head small,
.construction-option small {
  font-size: var(--ui-caption);
  line-height: 1.5;
}

.construction-detail-head h3 {
  margin: 3px 0 5px;
  font-size: var(--ui-title);
  line-height: 1.25;
}

.construction-effect-stack {
  gap: 7px;
  margin: 12px 0;
}

.construction-effect-stack span {
  min-height: 36px;
  padding: 9px 11px;
  font-size: var(--ui-caption);
  line-height: 1.35;
}

.building-actions {
  gap: 9px;
}

.building-move-action,
.building-action {
  min-height: 52px;
  font-size: var(--ui-body);
  line-height: 1.3;
}

.building-move-action {
  min-width: 112px;
  padding: 0 14px;
}

.construction-options-title {
  font-size: 16px;
}

.construction-option {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  min-height: 88px;
  gap: 9px;
  padding: 6px 9px 6px 5px;
}

.construction-option img {
  width: 70px;
  height: 70px;
}

.construction-option b,
.construction-option em,
.construction-option strong {
  font-size: var(--ui-caption);
  line-height: 1.3;
}

/* 编队、训练与底部主导航 */
.guide-bubble p {
  font-size: var(--ui-body);
  line-height: 1.45;
}

.unit-grid .formation-state {
  font-size: 8px;
}

.unit-grid .merge-result {
  font-size: 9px;
}

.unit-grid .tutorial-merge-mark,
.unit-grid .unit-level {
  font-size: 9px;
}

.unit-grid .unit-stars {
  font-size: 7px;
}

.merge-tip,
.selection-actions button {
  font-size: var(--ui-caption);
  line-height: 1.35;
}

.recruit-panel {
  padding: 9px 10px 10px;
}

.recruit-head b {
  font-size: var(--ui-body);
}

.recruit-head small,
.power-readout small {
  font-size: var(--ui-caption);
}

.recruit-buttons {
  gap: 7px;
  margin: 7px 0 9px;
}

.recruit-button {
  grid-template-columns: 40px minmax(0, 1fr);
  min-height: 56px;
  padding: 6px;
}

.recruit-button .mini-icon {
  width: 38px;
  height: 38px;
}

.recruit-button b {
  font-size: var(--ui-caption);
}

.recruit-button small {
  font-size: var(--ui-caption);
}

.power-readout strong {
  font-size: 26px;
}

.deploy-button {
  min-height: 52px;
  font-size: 16px;
}

.bottom-nav {
  padding-top: 4px;
}

.bottom-nav button {
  min-height: 56px;
}

.bottom-nav .nav-icon-shell {
  width: 38px;
  height: 32px;
}

.bottom-nav .nav-icon {
  width: 24px;
  height: 24px;
}

.bottom-nav button b {
  margin-top: 4px;
  font-size: var(--ui-caption);
  line-height: 1.2;
}

/* 新手引导、设置和英雄列表 */
.tutorial-step,
.tutorial-copy p,
.tutorial-skip {
  font-size: var(--ui-caption);
  line-height: 1.4;
}

.tutorial-copy strong {
  font-size: 16px;
}

.settings-dialog form,
.hero-dialog form {
  gap: 11px;
  padding: 18px;
}

.settings-dialog h2,
.hero-dialog h2 {
  font-size: 22px;
}

.settings-dialog label,
.hero-dialog header span small,
.hero-dialog form > p,
.bgm-now-playing small,
.bgm-now-playing b {
  font-size: var(--ui-caption);
  line-height: 1.4;
}

.setting-row,
.danger-button,
.dialog-close,
.reset-confirmation button,
.battle-menu-status,
.battle-menu-status button {
  min-height: 48px;
  font-size: var(--ui-body);
}

.restart-game-hint,
.reset-confirmation p {
  color: #c7e2e6;
  font-size: var(--ui-body);
  line-height: 1.55;
}

.reset-confirmation strong {
  font-size: 16px;
}

.hero-card {
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 100px;
}

.hero-card > img {
  width: 72px;
  height: 102px;
}

.hero-select-state {
  font-size: var(--ui-caption);
  line-height: 1.4;
}

.hero-card-copy > b {
  font-size: var(--ui-body);
}

.hero-card-copy {
  padding-bottom: 31px;
}

.hero-select-state {
  position: absolute;
  right: 9px;
  bottom: 8px;
  max-width: calc(100% - 62px);
  margin: 0;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #f2fbff;
  background: rgba(3, 28, 47, 0.82);
  text-align: right;
}

.hero-card.is-selected .hero-select-state {
  color: #243b4c;
  background: linear-gradient(135deg, #ffe57e, #f5b661);
}

.hero-dialog header button {
  width: 44px;
  height: 44px;
}

.hero-cards {
  flex: 0 0 auto;
}

/* 章节、剧情、战斗 HUD 和结算 */
.chapter-number,
.chapter-exit b,
.chapter-card > small,
.story-head,
.chapter-objective small,
.final-stats small {
  font-size: var(--ui-caption);
  line-height: 1.35;
}

.chapter-card h3,
.chapter-objective b,
.chapter-story > b {
  font-size: 18px;
}

.chapter-card > p,
.chapter-story > p {
  font-size: 16px;
  line-height: 1.6;
}

.chapter-decision {
  font-size: 16px;
  line-height: 1.6;
}

.chapter-intel-card small {
  font-size: var(--ui-caption);
}

.chapter-intel-card b,
.chapter-intel-card em {
  font-size: var(--ui-label);
}

.story-next,
.chapter-card .primary-cta {
  font-size: 16px;
}

.chapter-briefing[data-story-active="true"] .story-head,
.chapter-briefing[data-story-active="true"] .story-head small,
.chapter-briefing[data-story-active="true"] #story-progress {
  font-size: var(--ui-caption);
  line-height: 1.35;
}

.chapter-briefing[data-story-active="true"] .story-next {
  font-size: var(--ui-label);
}

.combatant-card {
  min-height: 62px;
  padding: 8px 10px;
}

.combatant-card span,
.battle-hero-tag small,
.unit-status,
.unit-count,
.overdrive-button small {
  font-size: var(--ui-caption);
  line-height: 1.3;
}

.combatant-card b {
  font-size: var(--ui-number);
}

.battle-hero-tag b,
.overdrive-button b {
  font-size: var(--ui-body);
}

.matchup-pill,
.battle-speed,
.toast,
.battle-event {
  font-size: var(--ui-body);
  line-height: 1.35;
}

.matchup-pill {
  top: 86px;
  min-height: 32px;
  padding: 6px 11px;
}

.battlefield {
  top: 120px;
}

.battle-dialogue > span > b,
.result-story > span > b {
  font-size: 19px;
}

.battle-dialogue > span > p,
.result-story > span > p {
  font-size: 16px;
  line-height: 1.6;
}

.battle-dialogue button,
.result-story button {
  font-size: var(--ui-label);
}

#battle-hero-title,
.battlefield .battle-hero-tag small {
  font-size: var(--ui-caption);
  line-height: 1.25;
}

#battle-hero-name,
.battlefield .battle-hero-tag b {
  font-size: var(--ui-body);
  line-height: 1.25;
}

.battle-view .battle-unit .unit-level {
  min-height: 20px;
  padding: 3px 6px;
  font-size: var(--ui-caption);
  line-height: 1.15;
}

#battle-dialogue-speaker,
#result-story-chapter {
  font-size: 19px;
}

#battle-dialogue-line,
#result-story-line {
  font-size: 16px;
  line-height: 1.6;
}

#battle-dialogue-next,
#result-story-next {
  font-size: var(--ui-label);
}

#result-story-kicker,
#result-story-progress {
  font-size: var(--ui-caption);
  line-height: 1.25;
}

/* 矮屏仍保留可读字号，只压缩留白和非文字图形。 */
@media (max-width: 370px), (max-height: 700px) {
  .topbar {
    grid-template-columns: minmax(116px, 1fr) auto 44px;
    min-height: 78px;
    padding-bottom: 18px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .profile-avatar {
    width: 46px;
    height: 46px;
  }

  .profile-copy {
    margin-left: 6px;
  }

  .profile-copy em {
    right: 8px;
    left: 60px;
  }

  .resource {
    padding-right: 6px;
  }

  .resource i {
    width: 28px;
    height: 28px;
    margin-right: 3px;
  }

  .mission-card {
    grid-template-columns: 40px minmax(0, 1fr) auto 20px;
    min-height: 64px;
    padding: 6px 8px;
  }

  .sector-pill {
    padding-right: 7px;
    padding-left: 7px;
  }

  .base-view {
    --base-tabs-top: 80px;
    --squad-grid-top: 142px;
  }

  .enemy-intel {
    grid-template-columns: 46px minmax(0, 1fr);
    width: min(57%, 206px);
    min-height: 62px;
  }

  .enemy-intel img {
    width: 44px;
    height: 48px;
  }

  .base-mode-tabs button {
    min-height: 46px;
  }

  .construction-routes,
  .building-plots {
    top: 108px;
  }

  .construction-routes {
    height: calc(100% - 138px);
  }

  .construction-panel {
    max-height: 66%;
    padding: 15px 12px 12px;
  }

  .construction-detail-head {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 8px;
  }

  .construction-detail-head img {
    width: 74px;
    height: 68px;
  }

  .construction-effect-stack {
    margin: 8px 0;
  }

  .building-move-action {
    min-width: 104px;
  }

  .recruit-panel {
    padding-top: 7px;
    padding-bottom: 8px;
  }

  .recruit-button {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 52px;
    padding: 4px;
  }

  .recruit-button .mini-icon {
    width: 30px;
    height: 34px;
  }

  .bottom-nav button {
    min-height: 52px;
  }

  .hero-card {
    min-height: 96px;
  }

  .combatant-card {
    min-height: 58px;
    padding: 6px 8px;
  }

  .matchup-pill {
    top: 82px;
  }

  .battlefield {
    top: 114px;
  }
}