/* One document scroll on small screens; scenery never competes with controls. */
html { scroll-padding-bottom: 110px; }
.universe { overflow: clip; }
.world-view { scroll-margin-top: 180px; }
.site-header { position: relative; }
.brand-world-goal { display: block; font-size: 12px; }
.top-journey a { font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; }
.world-cast { pointer-events: none; }
.world-cast .mascot { pointer-events: auto; }
.story-title-row, #story .story-title-row { position: static; }
.story-title-row h2, #story .story-title-row h2 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.story-stage h3 { text-shadow: 0 2px 14px #20162980; overflow-wrap: anywhere; }
.story-copy .eyebrow { padding-right: 0 !important; }
.story-stage p, .intro { font-weight: 600; }
.story-counter { display: block; text-transform: none; letter-spacing: .04em; }
.story-chapters { width: 100%; max-width: 100%; flex-wrap: wrap; overflow: visible; gap: 8px; }
.story-chapters .chapter { flex: 0 1 auto; min-width: 48px; padding: 8px 12px; border-radius: 999px; background: #251d346e; border: 1px solid #fff4; }
.story-chapters .chapter > span { display: none; }
.story-chapters .chapter strong { display: block; font-size: 14px; white-space: normal; }
.story-chapters .chapter[aria-pressed=true] { color: #362639; background: #ffedc9; }
.story-pagination { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
.story-pagination button { min-height: 44px; font-size: 14px; padding: 10px 12px; }
#storyProgress { min-width: 0; font-size: 14px; }
.life-progress p { font-size: 14px !important; }
.story-copy .text-link, .story-copy #storyHint { display: block; font-size: 14px; }
.story-copy .text-link { width: fit-content; margin-top: 14px; }
.story-copy .text-link[hidden] { display: none; }
.story-size-detail { display: none; }
.story-stage figcaption { font-size: 14px; }
.world-view, .hero-copy, .mission-copy, .story-copy { min-width: 0; }
.sound-palette { z-index: 8; }
.panel-content { scroll-padding-block: 20px; }
.panel-content h2, .panel-content h3, .panel-content p, .final-total { overflow-wrap: anywhere; }
.panel-top { align-items: center; }
.panel-top .close-panel { flex: 0 0 auto; }
.panel-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.panel-nav > a { flex-shrink: 0; }
.panel-nav .more-nav { flex-shrink: 0; }
.panel-nav .more-nav[open] { position: static; }
.panel-header { position: relative; }
.panel-nav .more-nav > div { position: absolute; top: 100%; left: 12px; right: 12px; width: auto; max-width: none; max-height: 45svh; overflow-y: auto; }
.adult-page input, .adult-page select, .adult-page textarea { font-size: 16px; }
.adult-page button, .adult-page .button, .panel-nav a, .more-nav > summary { min-height: 44px; font-size: 14px; }
.baby-world-note { font-size: 14px !important; }
.baby-world-metrics span, .mission-copy .mission-note { font-size: 14px !important; }
.baby-world-metrics strong { overflow-wrap: normal; }
.story-size-note { margin-top: 16px; }
@media (min-width: 761px) {
  .universe { display: flex; flex-direction: column; min-height: 0; height: 100svh; }
  .site-header { flex: 0 0 auto; }
  #main { flex: 1 1 auto; min-height: 0; height: auto; }
  #home.world-view, #story.world-view, #mission.world-view { left: 5%; top: 0; bottom: 112px; width: 49%; max-width: 690px; overflow-y: auto; padding: 16px 22px 35px 0; scrollbar-width: thin; }
  .story-copy, #story .story-copy { max-height: none; overflow: visible; }
  #story .story-title-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px; }
  #story .story-title-row h2 { font-size: clamp(22px,2.1vw,30px); margin: 0; max-width: 370px; }
  #story .story-title-row .button { flex-shrink: 0; }
  .story-stage h3 { font-size: clamp(30px,3.2vw,48px); line-height: 1.12; }
  .story-stage > p { font-size: 18px; line-height: 1.6; }
  .story-copy > .eyebrow { font-size: 14px; }
  .world-atmosphere { background: linear-gradient(90deg,#261d35db 0%,#30233bbb 40%,#30233b20 70%); }
  .sound-palette, .sound-status { left: auto; right: 5%; bottom: 110px; }
}
@media (max-width: 760px) {
  body { min-width: 0; height: auto; }
  .universe, .universe[data-view=story][data-life-stage] { height: auto; min-height: 100svh; padding-bottom: calc(100px + env(safe-area-inset-bottom)); perspective: none; overflow: clip; }
  .site-header { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 18px 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .brand { min-width: 0; }
  .brand-max { font-size: 11px; letter-spacing: .22em; }
  .brand-baby { font-size: clamp(22px,5.8vw,29px); }
  .brand-world-goal { display: none; }
  .header-tools { gap: 6px; }
  .header-tools button, .header-tools .icon-button, .header-tools #language { width: 44px !important; min-width: 44px !important; min-height: 44px; padding: 0; }
  .header-tools .icon-button { font-size: 0; }
  .icon-button#motion::before { content: 'Ⅱ'; font-size: 18px; }
  .icon-button#motion[aria-pressed=true]::before { content: '▷'; }
  .icon-button#sound::before { content: '♪'; font-size: 18px; }
  .icon-button#sound[aria-pressed=false]::before { content: '♪ ×'; font-size: 16px; }
  .header-tools #language { font-size: 14px; }
  .top-journey { grid-row: 2; grid-column: 1/-1; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: 100%; gap: 7px; padding: 2px 0 5px; scrollbar-width: thin; }
  .top-journey a { flex: 0 0 auto; font-size: 14px; padding: 10px 14px; }
  #main { position: relative; height: auto; width: 100%; }
  #home.world-view, #story.world-view, #mission.world-view { position: relative; inset: auto; width: auto; max-width: none; margin: 0; padding: 26px 24px 10px; text-align: left; }
  .story-copy, #story .story-copy { max-height: none; overflow: visible; }
  #story .story-copy > .eyebrow { font-size: 13px; min-height: 0; margin: 0 0 12px; padding: 0; }
  #story .story-title-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin-bottom: 24px; }
  #story .story-title-row h2 { font-size: 20px; line-height: 1.35; font-weight: 600; max-width: 100%; margin: 0; }
  #story .story-title-row .button { min-height: 44px; font-size: 14px; padding: 12px 18px; }
  #story .story-counter { font-size: 14px; margin-bottom: 12px; line-height: 1.5; }
  #story .story-stage h3 { font-size: clamp(28px,7.8vw,40px); line-height: 1.14; max-width: none; margin-bottom: 18px; }
  #story .story-stage > p { font-size: 17px; line-height: 1.65; max-width: none; margin-bottom: 16px; }
  .story-speech { font-size: 20px; line-height: 1.4; margin: 12px 0; }
  .story-pagination { gap: 8px; margin-block: 18px; }
  .story-chapters { margin: 12px 0; }
  #storyHint { margin: 18px 0 0; line-height: 1.5; }
  .world-atmosphere, .universe[data-view=story][data-grown=true] .world-atmosphere { background: linear-gradient(180deg,#231b33c9 0%,#302239b0 65%,#30223926 100%); }
  .world-camera { inset: 0; transform: none; }
  .world-land, .chapter-land { object-position: 65% center; }
  .world-cast { position: relative; height: clamp(240px,65vw,380px); margin-top: 16px; }
  .universe .world-cast .players-anchor, .universe[data-view=story][data-life-stage] .world-cast .players-anchor { width: 90%; max-width: 600px; right: -2%; bottom: 0; transform: none; }
  .universe .world-cast .mascot-anchor, .universe[data-view=story][data-grown] .world-cast .mascot-anchor { width: 110px; right: auto; left: 2%; bottom: 40px; transform: none; }
  .universe[data-grown=true] .world-cast { height: 160px; }
  .universe[data-grown=true] .world-cast .mascot-anchor { bottom: 30px; }
  .mascot-hint { font-size: 14px; }
  .sound-palette { position: relative; inset: auto; transform: none; justify-content: center; flex-wrap: wrap; margin: 10px 20px; }
  .sound-chip { font-size: 14px; min-height: 44px; padding: 10px 16px; }
  .sound-status { position: relative; inset: auto; display: block; text-align: center; margin: 0 20px; font-size: 14px; }
  .world-dock { position: fixed; left: 12px; right: 12px; bottom: max(10px,env(safe-area-inset-bottom)); transform: none; margin: 0; border-radius: 999px; background: #332c40ec; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 30; }
  .world-dock a { min-height: 54px; min-width: 0; font-size: 14px; padding: 9px 4px; border-radius: 999px; }
  .hero-copy h1, html[lang=ru] .hero-copy h1 { font-size: clamp(32px,8.5vw,50px); line-height: 1.08; }
  .hero-copy .intro { font-size: 17px; line-height: 1.6; margin: 16px 0 22px; max-width: none; }
  .hero-actions { justify-content: flex-start; }
  .age-note { font-size: 14px; margin-top: 22px; }
  .mission-copy .million { font-size: clamp(36px,9.5vw,65px); overflow-wrap: normal; }
  .mission-copy h2 { font-size: 30px; margin: 16px 0; }
  .mission-copy > p:not(.eyebrow) { font-size: 17px; max-width: none; margin: 18px 0; }
  #adultPanel { width: calc(100vw - 16px); max-width: none; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); border-radius: 24px; }
  .panel-header .panel-top { display: flex; flex-wrap: wrap; padding: 16px; gap: 10px; }
  .panel-top > div { flex: 1 1 calc(100% - 70px); order: 0; }
  .panel-top .close-panel { order: 1; }
  .panel-top .top-action, .panel-top #panelMotion { order: 2; }
  .panel-top h2 { font-size: 22px; }
  .panel-top .eyebrow { font-size: 12px; }
  .panel-header .panel-nav { padding: 8px 16px 12px; position: static; }
  .panel-nav a, .more-nav > summary { font-size: 14px; min-height: 44px; white-space: nowrap; }
  .panel-content { padding: 24px 20px 36px; }
  .panel-content h2 { font-size: 30px; line-height: 1.15; }
  .fields, .request-fields, .campaign-path, .request-choices, .roles, .final-controls { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  .giving-equation { gap: 10px; }
  .giving-equation strong { font-size: 48px; }
  .giving-equation span { font-size: 14px; }
  .giving-equation > b { font-size: 22px; }
  .baby-world-metrics { grid-template-columns: 1fr; }
  .baby-world-metrics article { display: flex; align-items: center; gap: 16px; border-radius: 20px; }
  .baby-world-metrics span { margin: 0; }
}
@media (max-width: 360px) {
  .site-header { padding-inline: 12px; gap: 8px; }
  .header-tools { gap: 4px; }
  .brand-baby { font-size: 21px; }
  #home.world-view, #story.world-view, #mission.world-view { padding-inline: 18px; }
}

/* Keep the modal on a single scroll surface, including on small phones. */
html:has(#adultPanel[open]), body:has(#adultPanel[open]) { overflow: hidden; }
.world-view, .top-journey, .panel-nav, .panel-content { scrollbar-color: #bcadbd66 transparent; scrollbar-width: thin; }
.panel-nav { align-items: center; }
.panel-nav > a { display: inline-flex; align-items: center; }
.panel-nav .more-nav { margin: 0; padding: 0; border: 0; }
.panel-nav .more-nav:not([open]) > div { display: none; }
.panel-nav .more-nav > div { min-width: 0; }
@media (max-width: 760px) {
  #adultPanel { margin: auto; border: 1px solid #fff3; }
  .panel-header .panel-top { display: grid; grid-template-columns: minmax(0,1fr) 44px; }
  .panel-top > div { grid-column: 1; }
  .panel-top .top-action, .panel-top #panelMotion { display: none; }
  .panel-top #closePanel { grid-column: 2; grid-row: 1; width: 44px; height: 44px; padding: 0; font-size: 0; }
  .panel-top #closePanel::before { content: '×'; font-size: 28px; }
  .panel-top h2 { font-size: 20px; }
  .panel-top .eyebrow { font-size: 10px; }
  .panel-header .panel-nav { padding-top: 0; }
  .panel-nav .more-nav > div { grid-template-columns: 1fr; }
}