/* Fit the available browser viewport, including Safari's expanding toolbar. */
:root { --play-height: 100vh; }
.fullscreen-button { white-space: nowrap; min-height: 44px; font-size: 14px; }
.fullscreen-message { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 12px; background: #f7e9bd; color: #16392f; border-radius: 8px; font-size: 16px; line-height: 1.4; }
.fullscreen-message > span { flex: 1; }
.fullscreen-message > button { flex-shrink: 0; min-height: 44px; }
@media (max-width: 699px) {
  .explore-header { flex-wrap: wrap; }
  .explore-header nav { margin-left: auto; flex-wrap: wrap; }
  .battle-header { flex-wrap: wrap; }
  .battle-header > div { min-width: 150px; }
}
@supports (height: 100dvh) { :root { --play-height: 100dvh; } }
.explore-game, .world-game { height: var(--play-height); min-height: 0; }
.explore-stage { min-height: 0; }
.explore-header, .explore-footer { flex-shrink: 0; }
.explore-footer { padding-bottom: max(7px, env(safe-area-inset-bottom)); }

/* Dialog navigation stays outside the scrollable content. Longer guides and
   enlarged text can still scroll without losing Close, Check, or Continue. */
.game-dialog {
  max-height: calc(var(--play-height) - 24px);
  max-width: min(960px, calc(100vw - 24px));
  overflow: hidden;
}
.game-dialog .dialog-shell {
  display: flex; flex-direction: column; gap: 0;
  padding: 0; max-height: calc(var(--play-height) - 28px);
}
.dialog-toolbar {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 10px; padding: 6px 12px; flex: 0 0 auto;
}
.game-dialog .dialog-toolbar .dialog-music,
.game-dialog .dialog-toolbar .dialog-close {
  position: static; margin: 0; min-height: 44px;
}
.game-dialog .dialog-toolbar .dialog-close { width: 44px; }
.dialog-body {
  min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 0 24px 18px; scrollbar-width: thin;
}
.dialog-footer {
  flex: 0 0 auto; padding: 12px 24px;
  border-top: 1px solid var(--line); background: #123335;
}
.dialog-footer > .dialog-actions, .dialog-footer > .puzzle-footer,
.dialog-footer > .story-actions, .dialog-footer > .welcome-actions { margin: 0; }
.dialog-footer > .gold-btn { display: flex; margin-inline: auto; }
.game-dialog h2 { margin: 6px 0 12px; font-size: 32px; }
.story-dialog .dialog-body {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px; align-items: center;
}
.story-text { font-size: 16px; line-height: 1.55; }
.menu-dialog { max-width: min(720px, calc(100vw - 24px)); }
.reward-dialog { max-width: min(690px, calc(100vw - 24px)); }
.profile-dialog { max-width: min(790px, calc(100vw - 24px)); }
.welcome-dialog { max-width: min(960px, calc(100vw - 24px)); }
.welcome-heading h2 { font-size: 44px; }
.welcome-roster { margin: 18px 0 12px; }
.hero-preview { margin-bottom: 8px; flex-wrap: wrap; }
.welcome-note { margin-top: 8px !important; }
.puzzle-feedback { margin: 12px 0 0; }
.dialog-body > .puzzle-feedback { grid-column: 1 / -1; }
.puzzle-footer .text-button, .challenge-tools .text-button,
.challenge-top .text-button { min-height: 44px; font-size: 14px; }
.training-dialog .dialog-body > p { max-width: 760px; }
.training-cards { margin: 16px 0 0; gap: 12px; }
.training-card { display: grid; grid-template-columns: 35% minmax(0, 1fr); }
.training-card .card-scene { height: 100%; min-height: 136px; aspect-ratio: auto; }
.training-card-copy { padding: 12px; }
.training-card-copy > b { font-size: 21px; }
.training-card-copy > small, .training-card-copy > span { font-size: 14px; }
.menu-list { margin: 14px 0; gap: 10px; }
.music-volume { margin: 14px 0; }
.chapter-steps { margin: 14px 0; }
.chapter-steps > li { padding: 9px 0; }
.journal-badges { padding: 10px 12px; margin: 10px 0; }
.reward-growth { margin: 10px auto; padding: 12px 18px; }
.reward-growth h3 { margin: 5px 0 8px; }
.battle-reward-art, .battle-reward-art img { height: 80px; }
.reward-dialog .training-scene { height: 130px; margin: 10px 0; }
.reward-dialog p { font-size: 16px; line-height: 1.45; }

/* Tablet layout uses space beside the activity instead of a tall introduction. */
@media (min-width: 700px) {
  .puzzle-dialog { max-width: min(1120px, calc(100vw - 24px)); }
  .puzzle-dialog .dialog-body {
    display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
    gap: 12px 18px; align-items: start;
  }
  .puzzle-header { padding: 0; }
  .puzzle-header h2 { font-size: 30px; }
  .puzzle-header p { font-size: 16px; line-height: 1.4; }
  .training-reward { padding: 8px 10px; margin: 10px 0; }
  .puzzle-header .training-scene { height: clamp(125px, 23dvh, 190px); margin: 12px 0; }
  .puzzle-steps { margin: 12px 0 0; }
  .puzzle-work { min-width: 0; }
  .place-values { gap: 8px; padding: 12px; }
  .place-title { padding-top: 8px; }
  .place-title h3 { font-size: 16px; }
  .block-source { height: 60px; margin: 8px 6px; width: calc(100% - 12px); gap: 5px; }
  .block-source > svg { height: 42px; }
  .block-source > span { font-size: 14px; }
  .block-tray { min-height: 68px; max-height: 112px; padding: 7px; }
  .math-block.h { width: 36px; height: 36px; }
  .block-controls { padding: 5px; }
  .block-controls button { width: 44px; height: 44px; }
  .target-banner { padding: 12px 16px; }
  .target-banner > strong { font-size: 40px; }
  .trade-row { gap: 5px 14px; }
  .trade-row .text-button { min-height: 44px; font-size: 14px; }
  .puzzle-help { font-size: 14px !important; padding: 8px 12px; line-height: 1.35; }
  .garden-target { gap: 8px; padding: 10px; flex-wrap: wrap; }
  .garden-target strong { font-size: 24px; }
  .garden-workspace { display: block; padding: 10px; }
  .garden-beds { gap: 5px; }
  .garden-bed { gap: 6px; }
  .row-label { min-width: 62px; font-size: 14px; }
  .bed-cells { gap: 4px; padding: 3px; }
  .bed-cells > button { height: 44px; }
  .garden-tally { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; padding-top: 6px; }
  .garden-tally b { font-size: 26px; }
  .garden-tally .text-button { min-height: 44px; font-size: 14px; }
  .garden-tally small { font-size: 12px; }
  .array-equation { padding: 7px; margin: 0 10px; font-size: 18px !important; }
  .clock-workspace { gap: 16px; padding: 16px; }
  #clockHolder { min-width: 0; flex: 1; }
  .clock-controls { min-width: 140px; }
  .hour-control button, .minute-presets button { min-width: 44px; min-height: 44px; }
  .minute-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .clock-controls input { min-height: 44px; }
  .clock-controls > label { font-size: 14px; }
  .menu-list { display: grid; grid-template-columns: 1fr 1fr; }
  .menu-list > :first-child { grid-column: 1 / -1; }
  .champion-profile { display: grid; grid-template-columns: 135px minmax(0, 1fr); column-gap: 18px; }
  .champion-profile > * { grid-column: 2; }
  .champion-profile > .profile-portrait { grid-column: 1; grid-row: 1 / 6; height: 145px; align-self: center; }
  .profile-stats { margin: 12px 0; gap: 8px; }
  .profile-stats span { padding: 9px 5px; font-size: 14px; }
  .profile-stats b { font-size: 26px; }
  .champion-profile > p { margin: 6px 0; font-size: 16px; line-height: 1.4; }
  .profile-badges { margin: 8px 0; padding: 8px; }
  .field-map-dialog { max-width: min(1020px, calc(100vw - 24px)); }
  .field-map-dialog .dialog-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(220px, 1fr); gap: 10px 18px; }
  .field-map-dialog .dialog-body > .overline, .field-map-dialog h2 { grid-column: 1 / -1; margin: 0; }
  #fieldMap { grid-column: 1; grid-row: 3; margin: 0; max-height: 310px; align-self: center; }
  .map-destinations { grid-column: 2; grid-row: 3 / 5; grid-template-columns: 1fr; margin: 0; align-content: start; }
  .map-destinations button { padding: 9px 10px; min-height: 44px; }
  .map-key { grid-column: 1; gap: 8px; }
  .region-connections { grid-column: 1 / -1; margin: 4px 0; }
}

/* The arena and next enemy move share one column; questions own the other.
   Answer feedback replaces the choice list instead of extending the page. */
@media (min-width: 700px) and (max-width: 1400px) {
  .battle-game { min-height: var(--play-height); padding: 12px 16px; }
  .battle-header { margin-bottom: 12px; gap: 12px; }
  .battle-header h1 { margin-top: 3px; font-size: 24px; }
  .battle-header .small-btn, .battle-header .round-btn { min-height: 44px; }
  .battle-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: 'arena controls' 'intent controls' '. controls';
    grid-template-rows: auto auto 1fr; gap: 12px 16px;
  }
  .arena-panel { grid-area: arena; width: 100%; margin: 0; }
  .battle-console { display: contents; }
  .enemy-intent { grid-area: intent; padding: 12px; }
  .enemy-intent p { font-size: 14px; }
  .enemy-intent small { font-size: 12px; letter-spacing: .6px; }
  #battleControls { grid-area: controls; min-width: 0; padding: 16px; background: #153436; border: 1px solid #78978355; border-radius: 14px; }
  .battle-tip { display: none; }
  .phase-track { margin: 10px 0 0; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .phase-track > span { font-size: 12px; }
  .turn-title { margin: 0 0 14px; }
  .turn-title h2 { font-size: 29px; margin: 6px 0; }
  .turn-title p { font-size: 16px; line-height: 1.4; }
  .move-grid { gap: 10px; }
  .move-button { min-height: 112px; padding: 12px; }
  .move-button .move-icon { font-size: 22px; margin-bottom: 4px; }
  .move-button > b { margin-bottom: 5px; }
  .move-button > small { font-size: 14px; line-height: 1.3; }
  .strategy-note { margin-top: 12px; padding-top: 10px; }
  .strategy-note p { font-size: 14px; line-height: 1.45; margin-top: 5px; }
  .challenge-top { margin: 0 0 4px; }
  .question-skill { margin: 4px 0 8px; color: #c4d9c5; font-size: 14px; }
  .battle-question { font-size: 24px; line-height: 1.3; margin: 8px 0 12px; }
  .answer-label { display: none; }
  .battle-choices { grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
  .battle-choice { min-height: 58px; padding: 10px; font-size: 16px; gap: 8px; overflow-wrap: anywhere; }
  .choice-letter { flex-basis: 25px; height: 28px; }
  .challenge-tools { margin-top: 6px; gap: 16px; }
  .battle-hint { margin: 8px 0 0; padding: 10px 12px; font-size: 16px; line-height: 1.4; }
  .showing-feedback .battle-choices, .showing-feedback .challenge-top,
  .showing-feedback .challenge-tools, .showing-feedback .answer-label,
  .showing-feedback .question-skill { display: none; }
  .battle-feedback { margin-top: 12px; padding: 12px; }
  .battle-feedback h3 { font-size: 24px; margin: 6px 0 10px; }
  .battle-feedback p { font-size: 16px; line-height: 1.45; }
  .battle-feedback .answer-recap { margin-bottom: 8px; color: #ffdfa0; }
  .battle-feedback .gold-btn { margin-top: 12px; min-height: 48px; }
  .turn-summary { margin-top: 10px; }
  .turn-summary span { font-size: 14px; }
  .arena-scene .hero-hud { width: 55%; padding: 8px; }
  .arena-scene .hero-hud img, .arena-scene .hero-hud small { display: none; }
  .arena-scene .enemy-hud { padding: 8px; width: 47%; }
  .arena-scene .enemy-hud b { font-size: 14px; }
  .arena-scene .hero-hud b, .arena-scene .hero-hud strong { font-size: 14px; }
  .arena-scene .enemy-hud small, .arena-scene .resource-row { font-size: 12px; }
}

@media (min-width: 700px) and (orientation: landscape) {
  .puzzle-dialog .dialog-body { grid-template-rows: auto 1fr; }
  .puzzle-header { grid-column: 1; grid-row: 1; }
  .puzzle-work { grid-column: 2; grid-row: 1 / 3; }
  .dialog-body > .puzzle-feedback { grid-column: 1; grid-row: 2; margin: 0; }
}

/* Portrait keeps a compact arena above the question, with two answer columns. */
@media (min-width: 700px) and (orientation: portrait) {
  .battle-layout { grid-template-columns: 1fr; grid-template-areas: 'arena' 'intent' 'controls'; grid-template-rows: auto auto auto; gap: 10px; }
  .arena-panel { max-width: min(520px, 56dvh); margin-inline: auto; }
  .enemy-intent { padding: 8px 12px; }
  .enemy-intent > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; }
  .enemy-intent small, .enemy-intent p { margin: 0; }
  .enemy-intent p { flex-basis: 100%; }
  #battleControls { padding: 12px 16px; }
  .move-button { min-height: 94px; }
  .move-button .move-icon { float: right; margin: 0; }
  .strategy-note { padding-top: 8px; margin-top: 8px; }
  .turn-title { margin-bottom: 10px; }
  .battle-question { font-size: 24px; }
  .puzzle-dialog .dialog-body { grid-template-columns: 1fr; }
  .puzzle-header { display: grid; grid-template-columns: 1fr 210px; gap: 0 16px; }
  .puzzle-header > * { grid-column: 1; }
  .puzzle-header .training-scene { grid-column: 2; grid-row: 1 / 6; height: 180px; margin: 0; }
  .puzzle-header h2 { font-size: 28px; }
  .puzzle-header .training-reward { margin: 8px 0; }
  .puzzle-steps { margin-top: 5px; }
  .garden-workspace { display: flex; gap: 16px; }
  .garden-tally { flex: 0 0 150px; flex-direction: column; gap: 5px; }
}
@media (min-width: 700px) and (max-height: 740px) {
  .explore-header { min-height: 56px; padding: 5px 16px; }
  .explore-footer { min-height: 64px; padding: 5px 16px; }
  .explore-champion > img { width: 50px; height: 50px; }
  .explore-location { padding: 8px 12px; top: 12px; left: 16px; }
  .explore-location h1 { font-size: 25px; }
  .explore-goal { top: 12px; right: 16px; padding: 8px 12px; }
  .explore-controls { display: none; }
  .welcome-heading h2 { font-size: 38px; }
  .hero-choice img { width: 76px; height: 76px; }
  .hero-choice { padding-block: 8px; }
  .welcome-roster { margin-top: 12px; }
  .dialog-body { padding-inline: 20px; }
}
@media (max-width: 699px) {
  .dialog-body { padding: 0 16px 16px; }
  .dialog-footer { padding: 10px 16px; }
  .dialog-footer .dialog-actions, .dialog-footer .puzzle-footer { gap: 8px; }
  .story-dialog .dialog-body { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
  .training-card { grid-template-columns: 32% minmax(0, 1fr); }
  .puzzle-header .training-scene { height: 140px; }
}