:root {
  --font-hero: clamp(28px, 2.5vw, 36px);
  --font-event-title: clamp(24px, 2.3vw, 31px);
  --font-panel-title: 19px;
  --font-section-title: 15px;
  --font-body: 16px;
  --font-small: 13px;
  --font-tiny: 11px;
}

#game-title { font-size: var(--font-hero); line-height: 1.1; }
.event-card h2 { font-size: var(--font-event-title); line-height: 1.2; margin-bottom: 12px; }
.event-card p { font-size: var(--font-body); line-height: 1.7; }
.panel-heading h2 { font-size: var(--font-panel-title); }
.side-section h3,
.base-build-section h4,
.travel-dock h3 { font-size: var(--font-section-title); }

.action-result-dock { min-height: 92px; max-height: 138px; padding-top: 9px; padding-bottom: 9px; }
.action-result-heading span { font-size: 12px; }
.action-result-heading small { font-size: var(--font-tiny); }
.action-result-title { font-size: 14px; }
.action-result-text { font-size: 12px; line-height: 1.45; }
.action-result-chip { font-size: 10px; }

.travel-button,
.choice { font-size: 16px; line-height: 1.35; }
.choice { padding: 12px 14px; }
.travel-button { padding: 11px 13px; }

.inventory-row-name,
.base-build-row strong,
.base-storage-row,
.base-job-note,
.base-clock,
.base-power-note { font-size: var(--font-small); }
.inventory-row-count,
.base-build-row small,
.event-meta,
.history-numbers { font-size: 12px; }
#history-log li > span { font-size: 11px; }
#history-log li > strong { font-size: 14px; }
#history-log li > p { font-size: 12px; line-height: 1.5; }

.info-tab { font-size: 14px; }
.stat span,
.resource-stat span { font-size: 11px; }
.stat strong { font-size: 17px; }
.resource-stat strong { font-size: 20px; }

@media (max-width: 760px) {
  :root {
    --font-hero: 28px;
    --font-event-title: 24px;
    --font-panel-title: 18px;
    --font-body: 15px;
  }
}