/* =========================================================
   V149 · PHASE 3 · EXPERIENCE ARCHITECTURE
   Shared composition contract for J0–J4.
   WORLD < INTERACTION < HUD < MODAL < TRANSITION.
   This file intentionally avoids narrative/asset rewrites.
   ========================================================= */

:root{
  --dobox-safe-top:max(12px,env(safe-area-inset-top));
  --dobox-safe-right:max(12px,env(safe-area-inset-right));
  --dobox-safe-bottom:max(12px,env(safe-area-inset-bottom));
  --dobox-safe-left:max(12px,env(safe-area-inset-left));
  --dobox-hud-top:clamp(72px,10svh,104px);
  --dobox-hud-bottom:clamp(66px,9svh,92px);
  --dobox-content-inline:clamp(12px,3vw,52px);
  --dobox-copy-narrow:min(92vw,440px);
  --dobox-copy-wide:min(38vw,520px);
  --dobox-tap:48px;
  --dobox-z-world:0;
  --dobox-z-interaction:10;
  --dobox-z-hud:40;
  --dobox-z-modal:70;
  --dobox-z-transition:90;
}

html,body,#app{min-width:0;min-height:100%;}
.experience{isolation:isolate;overflow:hidden;}
.experience>.world-layer,
.experience>.world{z-index:var(--dobox-z-world)!important;}
.interaction-layer{position:absolute;inset:0;z-index:var(--dobox-z-interaction);isolation:isolate;pointer-events:none;}
.interaction-layer>*{pointer-events:auto;}
.hud-layer{position:absolute;inset:0;z-index:var(--dobox-z-hud);pointer-events:none;isolation:isolate;}
.hud-layer>*{pointer-events:auto;}
.modal-layer{position:absolute;inset:0;z-index:var(--dobox-z-modal);pointer-events:none;isolation:isolate;}
.modal-layer>*{pointer-events:auto;}
.transition-curtain{z-index:var(--dobox-z-transition)!important;}

/* The HUD owns these safe zones. Scene content may not occupy them by default. */
.hud-layer .brand{top:var(--dobox-safe-top)!important;left:var(--dobox-safe-left)!important;}
.hud-layer .scene-meta{top:calc(var(--dobox-safe-top) + 2px)!important;}
.hud-layer .journey-menu-trigger{right:var(--dobox-safe-right)!important;}

/* Stable controls: world/camera animations never move the HUD or primary fixed CTA. */
.hud-layer,.modal-layer{transform:none!important;filter:none!important;}
.interaction-layer button,
.modal-layer button,
.hud-layer button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.interaction-layer :is(button,[role="button"],a),
.modal-layer :is(button,[role="button"],a),
.hud-layer :is(button,[role="button"],a){min-height:min(var(--dobox-tap),100%);}

/* Scene family contracts. Phase 4/5 can refine a scene without reinventing its geometry. */
.scene-family-cinematic .interaction-layer{display:block;}
.scene-family-dialogue .interaction-layer,
.scene-family-choice .interaction-layer,
.scene-family-object .interaction-layer,
.scene-family-exploration .interaction-layer,
.scene-family-travel .interaction-layer,
.scene-family-reflection .interaction-layer{padding:0;}

/* Culture/details are optional information and never get a higher layer than progression. */
.interaction-layer details{max-width:100%;}
.interaction-layer details[open]{overscroll-behavior:contain;}

/* Pointer affordance for true hotspots, without changing their authored coordinates. */
[data-dobox-input="pointer"] .interaction-layer :is([class*="hotspot"],[class*="observe"],[class*="path"],[class*="door-hotspot"]):not(:disabled){cursor:pointer;}
[data-dobox-input="pointer"] .interaction-layer :is([class*="hotspot"],[class*="observe"],[class*="path"],[class*="door-hotspot"]):not(:disabled):hover i{transform:scale(1.08);}

/* Keyboard support is global and visible but restrained. */
.experience :focus-visible{outline:2px solid rgba(247,240,223,.96)!important;outline-offset:3px!important;box-shadow:0 0 0 4px rgba(5,28,39,.45)!important;}
.experience :focus:not(:focus-visible){outline:none;}

/* PHONE COMPOSITION: world first, essential action second, narrative sheet third. */
@media(max-width:600px){
  :root{--dobox-hud-top:78px;--dobox-hud-bottom:72px;--dobox-content-inline:12px;--dobox-copy-narrow:calc(100vw - 24px);--dobox-tap:48px;}
  .interaction-layer{padding-top:var(--dobox-hud-top);padding-right:var(--dobox-safe-right);padding-bottom:var(--dobox-hud-bottom);padding-left:var(--dobox-safe-left);}
  /* Full-world authored scenes opt out of padding while their panels inherit safe containment. */
  .interaction-layer>:is(.day0-stage,.day1-stage,.day2-stage,.d2-scene,.v104-d3-scene,.d4-scene,.threshold){margin:calc(-1 * var(--dobox-hud-top)) calc(-1 * var(--dobox-safe-right)) calc(-1 * var(--dobox-hud-bottom)) calc(-1 * var(--dobox-safe-left));}
  .interaction-layer :is(.narration,.d2-story-panel,.d2-narrative-caption,.v104-whisper,.v104-dialogue,.d4-dialogue,.d4-card,.d2-prayer-panel,.v86-shrine-discovery){box-sizing:border-box;max-width:var(--dobox-copy-narrow)!important;}
  .modal-layer>:is(.journey-menu,.auth-shell,.restart-shell,.stamp-award){padding-top:var(--dobox-safe-top);padding-bottom:var(--dobox-safe-bottom);}
  .hud-layer .scene-meta{left:50%!important;right:auto!important;max-width:44vw;transform:translateX(-50%);text-align:center;}
}

/* TABLET: distinct composition rather than stretched phone. */
@media(min-width:601px) and (max-width:1180px){
  :root{--dobox-hud-top:88px;--dobox-hud-bottom:76px;--dobox-content-inline:clamp(20px,4vw,42px);--dobox-copy-wide:min(46vw,500px);}
  .interaction-layer :is(.narration,.d2-story-panel,.d2-narrative-caption,.v104-whisper,.v104-dialogue,.d4-dialogue,.d4-card){max-width:min(56vw,540px)!important;}
}

/* DESKTOP: preserve world surface; narrative lives in a lateral reading zone. */
@media(min-width:1181px){
  :root{--dobox-hud-top:94px;--dobox-hud-bottom:80px;--dobox-content-inline:clamp(28px,4vw,72px);--dobox-copy-wide:min(34vw,520px);}
  .scene-family-dialogue .interaction-layer :is(.narration,.d2-story-panel,.v104-dialogue,.v104-whisper,.d4-dialogue),
  .scene-family-choice .interaction-layer :is(.narration,.d2-story-panel,.d2-narrative-caption,.d4-card),
  .scene-family-reflection .interaction-layer :is(.narration,.d2-story-panel,.v104-whisper,.d4-card){max-width:var(--dobox-copy-wide)!important;}
  .modal-layer :is(.auth-card,.restart-card,.stamp-award-card){max-height:calc(100svh - 2 * var(--dobox-safe-top));overflow:auto;}
}

/* Landscape laptops with little vertical room must remain usable. */
@media(min-width:901px) and (max-height:800px){
  :root{--dobox-hud-top:78px;--dobox-hud-bottom:66px;}
  .interaction-layer :is(.narration,.d2-story-panel,.d2-prayer-panel,.v104-dialogue,.v104-whisper,.d4-card){max-height:calc(100svh - var(--dobox-hud-top) - var(--dobox-hud-bottom));overflow:auto;overscroll-behavior:contain;}
}

/* Reduced motion is a product contract, not a scene exception. */
@media(prefers-reduced-motion:reduce){
  .experience *, .experience *::before, .experience *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .world-image{transform:none!important;}
}

/* Reusable primitives introduced in Phase 3. */
.scene-frame{position:absolute;inset:0;min-width:0;min-height:0;}
.scene-hotspot{position:absolute!important;left:var(--hotspot-x)!important;top:var(--hotspot-y)!important;transform:translate(-50%,-50%);min-width:var(--dobox-tap);min-height:var(--dobox-tap);}
.scene-hotspot>i{display:block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(247,240,223,.9);background:rgba(247,240,223,.24);box-shadow:0 0 0 7px rgba(247,240,223,.08);transition:transform .18s ease,opacity .18s ease;}
.scene-hotspot.is-done>i{opacity:.48;box-shadow:none;}
.cultural-insight{box-sizing:border-box;}
.cultural-insight-body{padding-top:10px;}
.gesture-hint{display:flex;align-items:center;gap:10px;pointer-events:none;}
.gesture-hint>i{width:22px;height:22px;border:1px solid currentColor;border-radius:999px;opacity:.72;animation:doboxGestureGhost 1.8s ease-in-out infinite;}
@keyframes doboxGestureGhost{0%,100%{transform:translateX(0);opacity:.35}50%{transform:translateX(12px);opacity:.9}}
@media(prefers-reduced-motion:reduce){.gesture-hint>i{animation:none!important;}}
.gesture-hint.is-returned{opacity:.72;}
.shoji-gesture>.gesture-hint{position:absolute;right:clamp(12px,4vw,40px);bottom:clamp(12px,4vh,34px);margin:0;padding:8px 11px;border-radius:999px;background:rgba(5,28,39,.58);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55);backdrop-filter:blur(5px);font-size:12px;letter-spacing:.02em;}