/* A single typographic scale for HUD labels, icons and values. */
.game-header .progress-status { --hud-size: 14px; align-items: center; }
.game-header .progress-status>div { align-items: center; }
.game-header .progress-status dt, .game-header .progress-status dd { font-size: var(--hud-size); font-weight: 800; line-height: 1.4; }
.game-header .progress-status dt { color: var(--ink); }
.game-header .progress-status dt .icon { display: block; width: var(--hud-size); height: var(--hud-size); }
.game-header .progress-status dd small { font-size: var(--hud-size); font-weight: 400; }

.step-2 .stage { padding-top: 24px; padding-bottom: 24px; }
.step-2 .stage-heading { margin-bottom: 16px; }
.growth-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; margin: 0; }
.growth-grid .growth-card { position: relative; isolation: isolate; display: block; width: 100%; aspect-ratio: 1; min-height: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #211d28; text-align: left; color: #fff; }
.growth-grid .growth-card::before { display: none; }
.growth-grid .growth-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 27%,#15121b80 55%,#15121bee 85%,#15121b 100%); }
.growth-card>img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .35s ease; }
.growth-grid .growth-card:hover, .growth-grid .growth-card:focus-visible { transform: none; outline: 0; border-color: var(--line); }
.growth-card:not(:disabled):is(:hover,:focus-visible)>img { transform: scale(1.055); }
.growth-grid .growth-card:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.65); }
.growth-card-copy { position: absolute; z-index: 1; inset: auto 13px 13px; display: block; }
.growth-card-copy>strong { display: block; margin-bottom: 7px; font-size: clamp(16px,1.45vw,21px); line-height: 1.2; font-weight: 900; letter-spacing: -.5px; word-break: keep-all; }
.growth-card-description { display: block; font-size: 11px; line-height: 1.5; color: #ede7ef; word-break: keep-all; min-height: 32px; }
.growth-result { display: grid; grid-template-columns: 44% 1fr; max-width: 830px; padding: 0; overflow: hidden; }
.growth-result-art { min-height: 360px; }
.growth-result-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.charm-change { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 800; margin: 8px 0; }
.charm-change .icon { width: 16px; height: 16px; }
.growth-summary-image { width: 100%; height: 100%; object-fit: cover; }
@media (max-width:1000px) {
  .growth-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .growth-card-copy>strong { font-size: 19px; }
}
@media (max-width:820px) {
  .game-header .progress-status { --hud-size: 12px; }
  .game-header .progress-status>div { align-items: flex-start; }
}
@media (max-width:600px) {
  .game-header .progress-status { display: grid; grid-template-columns: 1fr 1fr 1.3fr; --hud-size: 12px; gap: 9px; }
  .game-header .progress-status>div { flex-direction: column; gap: 3px; }
  .game-header .progress-status .progress-money { align-items: flex-end; }
  html { scroll-padding-top: 135px; }
  .step-2 .stage-heading { position: relative; }
  .step-2 .stage-title>p { padding-right: 54px; }
  .step-2 .context-tools { position: absolute; right: 0; bottom: 0; width: auto; padding: 0; }
  .growth-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .growth-grid .growth-card { aspect-ratio: 4/5.5; }
  .growth-card-copy { inset: auto 10px 12px; }
  .growth-card-copy>strong { font-size: 17px; margin-bottom: 5px; }
  .growth-card-description { font-size: 10px; min-height: 30px; }
  .growth-result { grid-template-columns: 1fr; max-height: calc(100dvh - 36px); }
  .growth-result-art { min-height: 0; height: min(30dvh,235px); }
}
@media (max-width:360px) {
  .game-header .progress-status { --hud-size: 11px; }
  .growth-card-copy>strong { font-size: 15px; }
  .growth-card-description { font-size: 9px; }
}