.app-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.view[hidden], .offline-notice[hidden], [hidden] { display: none !important; }
.feature-view { width: min(760px, calc(100% - 64px)); margin: 0 auto; padding: 62px 0 70px; flex: 1; outline: none; }
.feature-heading .eyebrow { margin: 0 0 12px; font-size: 10px; color: #85888b; letter-spacing: .17em; font-weight: 500; }
.feature-heading h1 { margin: 0; font-size: 42px; letter-spacing: -.04em; font-weight: 300; line-height: 1.25; }
.feature-heading > p:last-child { margin: 14px 0 0; font-size: 15px; color: #96989a; line-height: 1.7; }
.feature-summary { display: flex; justify-content: space-between; gap: 24px; margin: 35px 0 24px; padding: 18px 0; border-block: 1px solid #ffffff12; color: #96989a; font-size: 13px; }
.feature-summary > span { display: flex; align-items: baseline; gap: 12px; }
.feature-summary strong { color: #efeee9; font-size: 19px; font-weight: 400; font-variant-numeric: tabular-nums; }
.feature-card { border: 1px solid #ffffff16; border-radius: 19px; padding: 28px; background: #ffffff02; }
.feature-card h2 { margin: 0; font-size: 20px; font-weight: 450; letter-spacing: -.025em; }
.card-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.level-label { color: #96989a; font-size: 12px; white-space: nowrap; }
.card-description { color: #96989a; font-size: 13px; line-height: 1.7; margin: 7px 0 0; }
.upgrade-change { display: flex; align-items: center; gap: 26px; margin-top: 25px; font-size: 47px; font-weight: 300; letter-spacing: -.04em; line-height: 1.3; }
.upgrade-change > :first-child { color: #96989a; }
.upgrade-change svg { width: 29px; height: 22px; fill: none; stroke: #767a7d; stroke-width: 1.1; }
.purchase-row { display: flex; justify-content: space-between; gap: 25px; align-items: center; margin-top: 27px; border-top: 1px solid #ffffff0c; padding-top: 23px; }
.purchase-hint { color: #96989a; font-size: 12px; line-height: 1.7; max-width: 285px; margin: 0; }
.purchase-button { border: 1px solid #efeee9; background: #efeee9; color: #202123; border-radius: 9px; padding: 13px 19px; cursor: pointer; font-size: 13px; font-weight: 550; line-height: 1.4; white-space: nowrap; transition: background .15s, border-color .15s; }
.purchase-button:hover:not(:disabled) { background: #fff; border-color: #fff; }
.purchase-button:disabled { background: #ffffff05; border-color: #ffffff15; color: #818487; cursor: default; }
.future-prices { margin-top: 31px; }
.future-prices h2 { font-size: 13px; font-weight: 400; margin: 0 0 18px; }
.future-prices > p { color: #85888b; font-size: 11px; margin: 17px 0 0; }
.price-path { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 15px; }
.price-step { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid #ffffff16; padding-left: 12px; }
.price-step span { font-size: 10px; color: #96989a; white-space: nowrap; }
.price-step strong { font-size: 14px; font-weight: 400; white-space: nowrap; }
.business-main { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 20px; }
.business-icon { color: #dedfda; }
.business-icon svg { width: 44px; height: 54px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.business-rate { font-size: 16px; font-weight: 400; margin: 12px 0 0; }
.owned-label { color: #ccceca; font-size: 11px; display: inline-flex; align-items: center; gap: 7px; }
.owned-label > span { width: 5px; height: 5px; border-radius: 50%; background: #ccceca; }
.feature-note { margin: 23px 0 0; font-size: 12px; color: #96989a; line-height: 1.8; max-width: 540px; }
.purchase-error { font-size: 12px; color: #d0b4aa; line-height: 1.6; margin-top: 18px; }
.passive-summary { margin: 11px 0 0; font-size: 12px; color: #96989a; }
.passive-summary span { margin-left: 7px; color: #d5d6d1; }
.offline-notice { position: fixed; z-index: 8; bottom: 25px; left: 50%; transform: translateX(-50%); width: min(330px, calc(100% - 40px)); display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 19px 22px; background: #292c2f; border: 1px solid #45494d; border-radius: 14px; box-shadow: 0 10px 30px #0004; }
.offline-notice div { display: flex; flex-direction: column; gap: 6px; }
.offline-notice span { font-size: 11px; color: #b4b6b7; }
.offline-notice strong { font-size: 23px; font-weight: 350; }
.offline-notice button { background: transparent; border: 0; color: #aeb0b2; cursor: pointer; padding: 6px; font-size: 23px; }
@media (max-width: 600px) {
  .feature-view { width: calc(100% - 48px); padding-top: 36px; padding-bottom: 42px; }
  .feature-heading h1 { font-size: 35px; }
  .feature-heading .eyebrow { font-size: 8px; letter-spacing: .13em; }
  .feature-heading > p:last-child { font-size: 13px; }
  .feature-summary { margin-top: 26px; font-size: 11px; gap: 13px; }
  .feature-summary > span { flex-direction: column; gap: 6px; }
  .feature-summary strong { font-size: 18px; }
  .feature-card { padding: 21px; border-radius: 15px; }
  .feature-card h2 { font-size: 18px; }
  .upgrade-change { font-size: 40px; gap: 19px; }
  .level-label { font-size: 10px; }
  .purchase-row { flex-direction: column; align-items: stretch; gap: 15px; padding-top: 19px; }
  .purchase-button { width: 100%; padding-block: 14px; }
  .price-path { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 23px; }
  .business-main { grid-template-columns: 40px 1fr; gap: 15px; }
  .business-icon svg { width: 34px; height: 45px; }
  .owned-label { grid-column: 2; margin-top: 1px; }
  .business-rate { font-size: 14px; }
}

/* Desktop screens use the available viewport height; content must remain visible. */
@media (min-width: 901px) and (min-height: 640px) {
  body {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: clamp(64px, 9dvh, 94px) minmax(0, 1fr) auto;
  }
  .site-header { min-height: 0; height: 100%; }
  .app-main { min-height: 0; justify-content: center; }
  .site-footer { padding: 10px 24px 16px; }
  .site-footer p { font-size: 13px; line-height: 1.5; }
  .site-footer .storage-message { margin-top: 5px; }
  .game { flex: 0 1 auto; justify-content: center; padding: 12px 24px 20px; }
  :root { --key-width: clamp(180px, 28dvh, 286px); }
  .key-stage { margin-top: clamp(18px, 4dvh, 48px); }
  .instructions { margin-top: clamp(12px, 2dvh, 24px); }
  .feature-view { flex: 0 1 auto; width: min(1080px, calc(100% - 96px)); padding: 16px 0 24px; }
  .feature-heading .eyebrow { margin-bottom: 8px; }
  .feature-heading h1 { font-size: clamp(32px, 4.2dvh, 42px); }
  .feature-heading > p:last-child { margin-top: 10px; line-height: 1.5; }
  .feature-summary { margin: 20px 0; padding: 13px 0; }
  .feature-card { padding: 24px; }
  #upgrades { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px 40px; }
  #upgrades .feature-heading, #upgrades .feature-summary, #upgrades .purchase-error { grid-column: 1 / -1; }
  #upgrades .feature-summary { margin: 0; }
  .upgrade-change { margin-top: 18px; font-size: 44px; }
  .purchase-row { margin-top: 20px; padding-top: 18px; gap: 18px; }
  .purchase-hint { font-size: 12px; }
  .future-prices { margin: 0; align-self: center; }
  .future-prices h2 { margin-bottom: 22px; }
  .price-path { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px 18px; }
  .price-step strong { font-size: 16px; }
  .future-prices > p { margin-top: 22px; }
  #businesses { width: min(960px, calc(100% - 96px)); }
}
@media (min-width: 901px) and (min-height: 640px) and (max-height: 760px) {
  .feature-heading > p:last-child { font-size: 13px; }
  #upgrades { gap: 16px 30px; }
  .feature-card { padding: 20px; }
  .upgrade-change { margin-top: 12px; font-size: 38px; }
  .purchase-row { margin-top: 16px; padding-top: 14px; }
  .feature-summary { margin: 16px 0; padding: 10px 0; }
  .feature-note { margin-top: 15px; }
  .balance h1 { font-size: 18px; }
  .balance-value { font-size: 60px; }
}
/* Quiet release label: does not take space from the game content. */
.site-footer { position: relative; }
.game-version {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  right: 32px;
  bottom: 18px;
  color: #74777b;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .025em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .game-version { right: 18px; bottom: max(20px, env(safe-area-inset-bottom)); font-size: 9px; }
}