/* Mobile reading balance and seamless homepage. Desktop and landscape unchanged. */
@media (max-width:650px) and (orientation:portrait) {
  .playing .play-stage.dialogue-stage {
    /* 35% of the stage for dialogue, leaving the larger area to the portraits. */
    grid-template-rows: 28px minmax(0,1fr) minmax(210px,35%);
    gap:5px;
    padding-inline:8px;
  }
  .playing .play-stage.choice-stage {
    grid-template-rows:28px minmax(0,1fr) minmax(225px,42%);
    gap:5px;
    padding-inline:8px;
  }
  .playing .dialogue-stage .play-mid,
  .playing .choice-stage .play-mid {min-height:0;overflow:hidden}
  .playing .dialogue-stage .portrait-large,
  .playing .choice-stage .portrait-large {height:100%;max-width:88%;min-height:0}
  .playing .dialogue-stage .story-panel,
  .playing .choice-stage .story-panel {
    min-height:0;
    padding:10px 14px 10px;
    gap:6px;
    border-radius:10px;
    overflow:hidden;
    box-sizing:border-box;
  }
  .playing .dialogue-stage .cultivation-summary {
    padding-bottom:6px;
    gap:3px;
  }
  .playing .dialogue-stage .story-heading {
    margin:0;
    padding-bottom:7px;
    min-height:28px;
  }
  .playing .dialogue-stage .speaker {font-size:20px}
  .playing .dialogue-stage .dialogue-text {
    display:block;
    flex:1 1 auto;
    min-height:0;
    margin:0;
    overflow:hidden;
    font-size:var(--reading-size);
    line-height:1.8;
    letter-spacing:.012em;
    overflow-wrap:anywhere;
  }
  .playing .dialogue-stage .continue-line {
    flex-shrink:0;
    margin-top:auto;
    gap:8px;
    min-height:44px;
    align-items:center;
  }
  .playing .dialogue-stage .reading-tools {
    gap:5px;
    flex-shrink:0;
    font-size:13px;
  }
  .playing .dialogue-stage .reading-tools button {
    min-width:42px;
    width:42px;
    min-height:44px;
    padding:7px;
    touch-action:manipulation;
  }
  .playing .dialogue-stage .small-nav {
    margin-left:auto;
    display:flex;
    gap:7px;
    min-width:0;
  }
  .playing .dialogue-stage .small-nav .btn {
    min-height:44px;
    padding:8px 12px;
    white-space:nowrap;
  }
  .playing .choice-stage .decision-prompt {
    font-size:15px;
    line-height:1.6;
    max-height:none;
    overflow:auto;
  }
  .playing .choice-stage .choice-btn {
    padding:13px;
    min-height:96px;
    overflow:auto;
  }
  .playing .choice-stage .choice-label {font-size:17px;line-height:1.5}
  .playing .choice-stage .choice-detail {font-size:13px;line-height:1.55}
  .playing .choice-stage .choice-pager {gap:5px}
  .playing .choice-stage .choice-pager .btn {
    min-height:42px;
    padding:7px 9px;
    font-size:13px;
  }
}
@media (max-width:650px) and (orientation:portrait) and (max-height:690px) {
  /* Short phone: prioritize the reading controls over the artwork. */
  .playing .play-stage.dialogue-stage {
    grid-template-rows:25px minmax(0,1fr) minmax(190px,38%);
  }
  .playing .play-stage.choice-stage {
    grid-template-rows:25px minmax(0,1fr) minmax(205px,46%);
  }
  .playing .dialogue-stage .story-panel,
  .playing .choice-stage .story-panel {padding:9px 11px 9px;gap:5px}
  .playing .dialogue-stage .cultivation-summary {gap:2px;padding-bottom:4px}
  .playing .dialogue-stage .story-heading {padding-bottom:5px}
}
@media (max-width:360px) and (orientation:portrait) {
  .playing .dialogue-stage .reading-tools button {width:40px;min-width:40px}
  .playing .dialogue-stage .small-nav .btn {padding-inline:9px}
  .playing .dialogue-stage .story-panel {padding-inline:10px}
}
.season-section {margin-top:42px}
.season-section:first-of-type {margin-top:14px}
.season-header {display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:22px}
.season-header h2 {font-size:clamp(24px,4vw,36px);line-height:1.4;margin:4px 0 10px;color:#efd19f}
.season-header .panel-subtitle {margin:0;max-width:760px}
.season-header .tag {white-space:nowrap}
@media (max-width:650px) {
  .season-header {align-items:flex-start;flex-direction:column;gap:9px}
  .season-section {margin-top:32px}
  .season-header .tag {font-size:12px}
}

/* Home viewport: the masthead, cover and footer must form one continuous page.
 * On iOS Safari 100vh and 100svh can differ; the old .home was shorter
 * than the #view flex item and left an empty dark strip above the footer.
 * Do not affect chapter pages, journals or the desktop layout.
 */
@media (max-width:650px) and (orientation:portrait) {
  html.home-page { min-height:100dvh; }
  html.home-page body { min-height:100dvh; }
  .home-page .app-shell { min-height:100dvh; }
  .home-page #view {
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
  }
  .home-page #view > .home {
    display:flex;
    flex:1 0 auto;
    width:100%;
    min-height:calc(100dvh - 132px);
    margin:0;
    background-size:cover;
  }
  .home-page .site-footer { margin-top:0; flex-shrink:0; }
}