/* =========================================================
   V154.4 · GATE A+ · DAY 0 ONLY
   Severe responsive / FR-EN / HUD pass.
   Intentionally scoped to .chapter-day0 so J1–J4 remain frozen.
   ========================================================= */

/* ---------- Shared Day 0 contracts ---------- */
.chapter-day0 :is(button,input,summary){touch-action:manipulation}
.chapter-day0 :is(button,input,[role="button"]){box-sizing:border-box}
.chapter-day0 :is(.focus-copy,.packing-copy,.narration,.letter-scroll){overflow-wrap:anywhere}

/* ---------- Laptop / desktop: mouse-first composition ---------- */
@media (min-width:761px){
  .chapter-day0 .hud-layer .sound,
  .chapter-day0 > .sound{
    top:var(--dobox-safe-top,20px)!important;
    right:clamp(24px,3vw,48px)!important;
    width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;
  }
  .chapter-day0 .hud-layer .journey-menu-trigger,
  .chapter-day0 > .journey-menu-trigger{
    top:var(--dobox-safe-top,20px)!important;
    right:calc(clamp(24px,3vw,48px) + 68px)!important;
    width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;
  }
  .chapter-day0 .hud-layer .scene-meta{
    max-width:min(42vw,560px)!important;
  }
  .chapter-day0 .paper-letter h2{font-size:clamp(36px,4vw,56px)!important;line-height:1!important}
  .chapter-day0 .letter-scroll{font-size:clamp(15px,1.15vw,18px)!important;line-height:1.5!important}
  .chapter-day0 :is(.quiet-action,.primary.inline,.passport-questions button,.choice-row button){min-height:50px!important}
}

/* Short laptops: text may scroll, controls remain visible. */
@media (min-width:761px) and (max-height:820px){
  .chapter-day0 .narration h2{font-size:clamp(30px,3.3vw,44px)!important}
  .chapter-day0 .focus-copy h2{font-size:clamp(28px,3vw,40px)!important}
  .chapter-day0 .paper-letter{max-height:calc(100svh - 24px)!important}
  .chapter-day0 .letter-scroll{min-height:0!important;overflow:auto!important}
  .chapter-day0 .object-focus{padding-bottom:max(16px,env(safe-area-inset-bottom))!important}
}

/* Fine pointer gets hover/focus enrichment. */
@media (hover:hover) and (pointer:fine){
  .chapter-day0 :is(.quiet-action,.primary.inline,.passport-questions button,.choice-row button,.transport-objects button,.drag-piece,.drag-destination){transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
  .chapter-day0 :is(.quiet-action,.primary.inline,.passport-questions button,.choice-row button,.transport-objects button):hover{transform:translateY(-2px)}
  .chapter-day0 :is(button,input,summary):focus-visible{outline:3px solid rgba(247,240,223,.92)!important;outline-offset:3px!important}
}

/* ---------- Phone: touch-first composition ---------- */
@media (max-width:760px){
  html[data-dobox-layout^="phone"] .chapter-day0 .brand{
    top:max(8px,env(safe-area-inset-top))!important;left:8px!important;
    max-width:calc(100vw - 76px)!important;
    padding:4px 8px 4px 4px!important;gap:7px!important;
  }
  html[data-dobox-layout^="phone"] .chapter-day0 .brand img{width:36px!important;height:36px!important;flex:0 0 36px!important}

  /* Two upper controls are deliberately stacked: no collision at 360–480 px. */
  html[data-dobox-layout^="phone"] .chapter-day0 .sound{
    top:max(8px,env(safe-area-inset-top))!important;right:8px!important;
    width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;
  }
  html[data-dobox-layout^="phone"] .chapter-day0 .journey-menu-trigger{
    top:max(66px,calc(env(safe-area-inset-top) + 58px))!important;right:8px!important;
    width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;
  }
  html[data-dobox-layout^="phone"] .chapter-day0 .scene-meta{
    top:max(66px,calc(env(safe-area-inset-top) + 58px))!important;
    left:10px!important;right:70px!important;width:auto!important;max-width:none!important;
    transform:none!important;text-align:left!important;overflow:hidden!important;
  }

  /* Main interactive sheets begin below the two-row HUD. */
  html[data-dobox-layout^="phone"] .chapter-day0 :is(.object-focus,.packing-focus){
    top:max(124px,calc(env(safe-area-inset-top) + 116px))!important;
  }
  html[data-dobox-layout^="phone"] .chapter-day0 .narration{
    max-height:min(58svh,470px)!important;overflow:auto!important;
  }
  html[data-dobox-layout^="phone"] .chapter-day0 .narration h2{font-size:clamp(28px,8vw,36px)!important;line-height:1.03!important}
  html[data-dobox-layout^="phone"] .chapter-day0 .narration p{font-size:13.5px!important;line-height:1.47!important}
  html[data-dobox-layout^="phone"] .chapter-day0 .quiet-action{min-height:54px!important}

  html[data-dobox-layout^="phone"] .chapter-day0 .paper-letter{padding:18px 16px 10px!important}
  html[data-dobox-layout^="phone"] .chapter-day0 .paper-letter h2{font-size:clamp(32px,9.8vw,42px)!important;line-height:1!important;margin:4px 0 8px!important}
  html[data-dobox-layout^="phone"] .chapter-day0 .letter-scroll{font-size:clamp(15px,4.15vw,17px)!important;line-height:1.48!important;padding-bottom:14px!important}
  html[data-dobox-layout^="phone"] .chapter-day0 .paper-letter footer button{min-height:52px!important}

  html[data-dobox-layout^="phone"] .chapter-day0 .focus-copy h2{font-size:clamp(26px,7.6vw,34px)!important;line-height:1.05!important}
  html[data-dobox-layout^="phone"] .chapter-day0 .focus-copy p{font-size:13px!important;line-height:1.46!important}
  html[data-dobox-layout^="phone"] .chapter-day0 :is(.primary.inline,.passport-questions button,.choice-row button,.transport-objects button,.drag-piece,.drag-destination){min-height:50px!important}
  html[data-dobox-layout^="phone"] .chapter-day0 .ticket-personalize input{min-height:48px!important}

  /* Touch has press feedback; no hover-only requirement. */
  @media (hover:none),(pointer:coarse){
    html[data-dobox-layout^="phone"] .chapter-day0 :is(.quiet-action,.primary.inline,.passport-questions button,.choice-row button,.transport-objects button):active{transform:scale(.985)}
    html[data-dobox-layout^="phone"] .chapter-day0 :is(.quiet-action,.primary.inline,.passport-questions button,.choice-row button,.transport-objects button):hover{transform:none!important}
  }
}

/* Narrow phones: clarity beats squeezed two-column UI. */
@media (max-width:400px){
  html[data-dobox-layout^="phone"] .chapter-day0 .passport-questions fieldset{grid-template-columns:1fr!important}
  html[data-dobox-layout^="phone"] .chapter-day0 .choice-row{grid-template-columns:1fr!important}
  html[data-dobox-layout^="phone"] .chapter-day0 .transport-objects{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  html[data-dobox-layout^="phone"] .chapter-day0 .transport-objects button{
    width:100%!important;min-height:112px!important;
    grid-template-columns:minmax(84px,31%) 1fr!important;align-items:center!important;
  }
  html[data-dobox-layout^="phone"] .chapter-day0 .transport-objects img{height:96px!important;max-height:96px!important}
}

@media (prefers-reduced-motion:reduce){
  .chapter-day0 *, .chapter-day0 *::before, .chapter-day0 *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}