/* Story Garden v1.170 isolated viewport fixes.
   This file intentionally contains only the short-laptop and wide-canvas
   overrides. The established Story Garden stylesheet remains unchanged. */

/* Correct the older landscape rule that makes the story art too tall on
   short laptop screens before the more targeted height rules below apply. */
@media (min-width: 900px) and (max-width: 1366px) and (orientation: landscape) and (max-height: 1024px) and (hover: hover) and (pointer: fine) {
  .sn-story-card-v3 .sn-scene-stage.sn-scene-stage-v3 {
    aspect-ratio: 80 / 27 !important;
  }
}

/* Fit the full reading workspace on common laptop screens and at 125% zoom.
   These rules do not apply to touch-first mobile or tablet layouts. */
@media (min-width: 1025px) and (max-width: 1600px) and (max-height: 880px) and (hover: hover) and (pointer: fine) {
  .sn-shell {
    padding-top: 4px !important;
    padding-bottom: 5px !important;
  }

  .sn-topbar {
    height: 54px !important;
    min-height: 54px !important;
  }

  .sn-stats {
    min-height: 54px !important;
    margin-top: 5px !important;
    margin-bottom: 6px !important;
  }

  .sn-story-card-v3 .sn-scene-stage.sn-scene-stage-v3 {
    height: clamp(230px, 36vh, 290px) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  .sn-right-column > .sn-companion-panel {
    height: clamp(230px, 36vh, 290px) !important;
  }

  .sn-story-page-navigation {
    height: 62px !important;
    min-height: 58px !important;
    padding-top: 8px !important;
    padding-bottom: 4px !important;
  }

  .sn-story-page-button {
    min-height: 46px !important;
  }

  #storyQuestCard .sn-story-garden-progress {
    grid-template-rows: auto minmax(64px, 1fr) auto auto !important;
    grid-template-areas:
      "meta"
      "plant"
      "milestones"
      "reward" !important;
    gap: 2px !important;
    padding: 5px 6px !important;
  }

  #storyQuestCard .sn-story-growth {
    min-height: 64px !important;
  }

  #storyQuestCard .sn-story-garden-milestone {
    width: 21px !important;
    height: 21px !important;
    font-size: .86rem !important;
  }

  #storyQuestCard .sn-story-garden-milestones {
    min-height: 23px;
    padding-block: 0 !important;
  }

  #storyQuestCard .sn-story-garden-next-reward {
    margin-top: 0 !important;
    font-size: .56rem !important;
    line-height: 1.1 !important;
  }

  #storyQuestCard .sn-story-garden-open-cue {
    display: none !important;
  }
}

@media (min-width: 1025px) and (max-width: 1600px) and (max-height: 660px) and (hover: hover) and (pointer: fine) {
  .sn-story-card-v3 .sn-scene-stage.sn-scene-stage-v3,
  .sn-right-column > .sn-companion-panel {
    height: clamp(208px, 34vh, 224px) !important;
  }

  .sn-story-page-navigation {
    height: 58px !important;
    min-height: 54px !important;
    padding-top: 6px !important;
    padding-bottom: 2px !important;
  }

  #storyQuestCard .sn-story-garden-progress {
    grid-template-rows: auto minmax(48px, 1fr) auto auto !important;
    padding-block: 4px !important;
  }

  #storyQuestCard .sn-story-growth {
    min-height: 48px !important;
  }

  #storyQuestCard .sn-story-garden-milestone {
    width: 18px !important;
    height: 18px !important;
    font-size: .76rem !important;
  }

  #storyQuestCard .sn-story-garden-milestones {
    min-height: 20px;
  }

  .sn-story-card-v3 .sn-line-btn {
    margin-bottom: 1px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.34 !important;
  }
}

/* Restore a generous canvas on wide desktop displays. The extra width is
   assigned primarily to the story area while the Reading Buddy remains bounded. */
@media (min-width: 1441px) {
  .sn-shell {
    width: min(1680px, 100%) !important;
    max-width: 1680px !important;
  }

  .sn-play-layout-v3,
  .pp-play-layout.sn-play-layout-v3 {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 350px) !important;
  }
}