/* Shared phone layout. Later than the original scene styles so touch controls have one source. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
.experience,.app{height:var(--app-height,100svh);min-height:0}
.modal{height:var(--app-height,100svh);padding-top:max(16px,var(--safe-top));padding-bottom:max(16px,var(--safe-bottom));align-items:safe center}
.modal-card{max-height:calc(var(--app-height,100svh) - 36px - var(--safe-top) - var(--safe-bottom));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.touch-hint{display:none}
@media(max-width:760px),(pointer:coarse) and (max-height:600px){
  .site-header,.topbar{top:calc(10px + var(--safe-top));left:calc(14px + var(--safe-left));right:calc(14px + var(--safe-right));height:44px}
  .topbar{height:48px;padding:1px 3px 1px 10px;border:1px solid rgba(205,222,244,.18);border-radius:27px;background:rgba(12,23,43,.70)}
  .icon-button,.round-button{width:44px;height:44px;flex-shrink:0}
  .header-actions,.header-tools{gap:5px}
  .brand{min-height:44px}.brand strong{font-size:11px;letter-spacing:.20em}.brand small{font-size:7px}
  .brand-icon,.brand-mark,.brand-mark svg{width:27px;height:30px}
  .modal{padding-left:14px;padding-right:14px}
  .modal-card{padding:34px 20px 22px;width:min(100%,470px)}
  .modal-close,.close-button{width:44px;height:44px;right:7px;top:7px}
  .primary-button,.quality-button,.settings-row button{min-height:44px}
  .modal-card .eyebrow{font-size:8px;letter-spacing:2px}.modal-card h2{font-size:22px}
  .scene-footer,.welcome-edition,.telemetry,.desktop-controls,.location-label{display:none}

  /* The portrait itself has a reserved stage above the thumb controls. */
  .experience[data-phase=dormant] #goddessStage{left:0;top:27%;bottom:auto;width:100%;height:62%}
  .experience[data-phase=entering] #goddessStage,.experience[data-phase=active] #goddessStage{left:0;top:calc(68px + var(--safe-top));bottom:auto;width:100%;height:calc(100% - 310px - var(--safe-top) - var(--safe-bottom))}
  .invitation{top:calc(76px + var(--safe-top));left:0;right:0;text-align:center}
  .invitation h1{font-size:clamp(33px,10vw,47px)}.invitation h1 span{font-size:12px;margin-top:8px}
  .invitation .eyebrow{font-size:7px;margin-bottom:7px}.title-rule{margin-top:9px}
  .entry-controls{left:50%;width:calc(100% - 40px);bottom:calc(76px + var(--safe-bottom));transform:translateX(-50%);transition:opacity .7s}
  .summon-button{min-height:64px}.entry-note{margin-top:9px;font-size:9px}
  .active-controls{left:50%;width:calc(100% - 28px);max-width:430px;bottom:calc(72px + var(--safe-bottom));transform:translateX(-50%)}
  .journey-heading{margin:0 2px 5px}#sceneName{font-size:15px}.active-controls .guidance,.gesture-note{display:none}
  .skill-deck{gap:6px;margin-bottom:4px}.skill-deck button{min-height:61px;padding:6px 3px;border-radius:9px}
  .skill-deck b{font-size:18px}.skill-deck span{font-size:11px}.skill-deck small{font-size:8px}
  .skill-status{display:block;font-size:9px;min-height:13px;margin:3px 2px 6px;letter-spacing:1px}
  .magic-toolbar{border-radius:9px}.magic-button{min-height:51px;padding:5px 2px}
  .magic-button svg{display:inline-block;width:16px;height:16px;margin:0}.magic-button span{font-size:10px}.magic-button small{display:none}
  .blessing-link{min-height:44px;position:absolute;bottom:-49px;left:0;font-size:10px;max-width:50%;text-align:left}
  .palace-portal{right:calc(14px + var(--safe-right));bottom:calc(12px + var(--safe-bottom));min-height:46px;padding:8px 13px;gap:8px;border-radius:9px}
  .palace-portal strong{font-size:12px}.palace-portal small{font-size:8px}.portal-moon{font-size:25px}
  .awakening-caption{top:calc(85px + var(--safe-top));left:auto;right:18px;bottom:auto;transform:none;width:220px;max-width:calc(100% - 36px);text-align:right}
  .awakening-caption h2{font-size:22px;letter-spacing:5px}.awakening-caption>small{font-size:7px;letter-spacing:1.4px}.awakening-caption p{font-size:9px;letter-spacing:1px}
  .experience .toast{top:calc(66px + var(--safe-top));font-size:10px;max-width:90%;padding:7px 12px}
  .share-arrow{top:calc(12px + var(--safe-top));right:calc(14px + var(--safe-right))}

  /* Moon Palace: four spells above, joystick and actions at the lower corners. */
  .welcome{left:22px;right:22px;top:auto;bottom:calc(30px + var(--safe-bottom));width:auto}
  .welcome h1{font-size:46px;display:flex;gap:12px}.welcome h1 span{margin:0}.welcome h1 i{position:static;font-size:20px}
  .welcome .eyebrow{margin-bottom:9px}.welcome-copy{font-size:12px;margin:13px 0}.traveler{display:none}
  .touch-hint{display:block;margin-top:9px;font:10px/1.7 var(--sans);letter-spacing:1px;color:#bad1e3}
  .quest-card{left:12px;right:84px;top:calc(68px + var(--safe-top));max-width:none;padding:6px 8px;gap:6px;min-height:48px}
  .quest-star{font-size:23px}.quest-card strong{font-size:10px;letter-spacing:0}.quest-card small{font-size:8px;line-height:1.5;margin-top:2px}
  .quest-card button{width:44px;min-width:44px;height:44px}
  .mini-map{display:block;top:calc(70px + var(--safe-top));right:12px;width:60px}.mini-map canvas{width:58px;height:58px}.mini-map span{font-size:7px;padding-bottom:5px}.mini-map b{display:none}
  .discovery{top:calc(130px + var(--safe-top));left:14px;bottom:auto;font-size:9px}.discovery-gems{display:none}
  .nearby-card{left:12px;right:auto;transform:none;bottom:calc(224px + var(--safe-bottom))!important;width:calc(100% - 86px);max-width:310px;min-height:46px;padding:7px 10px;gap:8px}
  .nearby-card strong{font-size:12px}.nearby-card small{font-size:7px}.nearby-card p{display:none}.nearby-symbol{font-size:24px}
  .app[data-nearby=false] .nearby-card{display:none}
  .joystick{display:block;left:calc(18px + var(--safe-left));bottom:calc(28px + var(--safe-bottom));width:104px;height:104px;touch-action:none}
  .joystick-knob{width:42px;height:42px;left:30px;top:30px}.joystick small{bottom:-19px;font-size:9px}
  .action-buttons{right:calc(16px + var(--safe-right));bottom:calc(36px + var(--safe-bottom));gap:8px}
  .action-button{width:58px;height:58px}.interact-button{width:65px;height:65px}.action-button span{font-size:10px}.action-button kbd{display:none}
  .skill-tray{left:12px;bottom:calc(150px + var(--safe-bottom));transform:none;display:flex;width:calc(100% - 24px);max-width:none;gap:6px}
  .skill-tray button{width:auto;min-width:0;min-height:62px;flex:1;padding:7px 2px;border-radius:11px}.skill-tray b{font-size:20px;margin-bottom:3px}.skill-tray span{font-size:10px;letter-spacing:0}.skill-tray small{display:block;font-size:8px}
  .altitude-controls{right:calc(15px + var(--safe-right));bottom:calc(224px + var(--safe-bottom));flex-direction:column;gap:3px}
  .altitude-controls button{width:44px;height:44px;font-size:22px}.altitude-controls span{font-size:8px}
  .route-status{top:calc(148px + var(--safe-top));bottom:auto;left:12px;transform:none;max-width:calc(100% - 24px);padding:0 4px 0 12px;gap:5px;min-height:44px;font-size:10px}
  .route-status span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.route-status button{width:44px;height:44px;flex-shrink:0}
  .dash-target-panel{top:calc(68px + var(--safe-top));bottom:auto;width:calc(100% - 24px);padding:9px 12px;border-radius:10px}
  .dash-target-panel strong{font-size:12px;letter-spacing:1px}.dash-target-panel>span{font-size:10px;margin:4px 0 8px}.dash-target-panel button{min-height:44px;padding:8px}
  .app[data-targeting=true] .quest-card,.app[data-targeting=true] .mini-map,.app[data-targeting=true] .discovery{visibility:hidden}
  .app .toast{top:calc(155px + var(--safe-top));font-size:10px;padding:7px 12px}.app[data-route=true] .discovery{display:none}
  .atlas{height:225px;margin:18px auto}.atlas-spot{min-width:32px;min-height:32px}.spot-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.spot-list button{min-height:44px;font-size:11px;padding:9px}
  .settings-row{gap:10px;flex-wrap:wrap}.settings-row button{min-height:44px}.guide-list{margin:15px 0}.guide-list li{padding:9px 0}
  .letterbox{min-height:calc(48px + var(--safe-top));padding:12px 16px}.letterbox-top{padding-top:calc(12px + var(--safe-top))}.letterbox-bottom{min-height:calc(48px + var(--safe-bottom));padding-bottom:calc(12px + var(--safe-bottom))}
  .letterbox-top>span{font-size:10px}.letterbox-top small{font-size:8px}.letterbox-bottom>span:first-child{display:none}.letterbox-bottom time{font-size:9px;white-space:nowrap}.cg-timeline{max-width:none}
  .cinema-caption{bottom:calc(70px + var(--safe-bottom));left:6%;right:6%}.cinema-caption p{font-size:12px;line-height:1.8;letter-spacing:1px}.cinema-caption h2{font-size:25px}
  .cinema-caption p{padding:7px 10px;border-radius:7px;background:rgba(8,16,34,.55);color:#f1f2fa}
  .app[data-mode=cinematic] .topbar,.app[data-mode=cg-loading] .topbar{background:none;border-color:transparent;box-shadow:none}
  .app[data-mode=cinematic] #soundButton,.app[data-mode=cg-loading] #soundButton{top:calc(62px + var(--safe-top));right:14px;width:44px;height:44px}
}
@media(max-width:360px){
  .brand small{display:none}.header-tools{gap:3px}.quest-card small{display:none}.quest-card{min-height:46px}
  .skill-tray span{font-size:9px}.joystick{width:96px;height:96px;left:14px}.joystick-knob{left:26px;top:26px}
  .action-buttons{right:12px;gap:6px}.action-button{width:54px;height:54px}.interact-button{width:61px;height:61px}
}
@media(max-height:650px) and (max-width:760px){
  .invitation .eyebrow,.title-rule{display:none}.invitation{top:calc(68px + var(--safe-top))}.invitation h1{font-size:32px}
  .active-controls .journey-heading{display:none}.skill-status{font-size:8px}.experience[data-phase=active] #goddessStage,.experience[data-phase=entering] #goddessStage{top:calc(64px + var(--safe-top));height:calc(100% - 284px - var(--safe-top) - var(--safe-bottom))}
  .quest-card small,.discovery{display:none}.awakening-caption{top:calc(70px + var(--safe-top))}.awakening-caption h2{font-size:18px}.awakening-caption>small{display:none}
  .modal-card h2{font-size:20px}.atlas{height:180px}.cinema-caption p{font-size:11px}
}
/* Landscape is fully usable, with the scene in the center and thumb controls at the sides. */
@media(orientation:landscape) and (max-height:600px) and (pointer:coarse){
  .experience[data-phase] #goddessStage{left:40%;top:54px;width:60%;height:calc(100% - 64px)}
  .experience .invitation{top:75px;left:20px;right:auto;width:270px;text-align:left}.invitation h1{font-size:32px;padding:0}.invitation .eyebrow,.title-rule{display:none}
  .experience .entry-controls{left:20px;width:285px;transform:none;bottom:calc(40px + var(--safe-bottom))}.entry-note{display:none}
  .experience .active-controls{left:20px;width:290px;max-width:37%;transform:none;bottom:calc(60px + var(--safe-bottom));animation:none}.active-controls .journey-heading{display:none}
  .awakening-caption{right:18px;top:60px;width:210px}.awakening-caption h2{font-size:18px}.awakening-caption>small{display:none}
  .welcome{left:24px;width:300px;top:90px;bottom:auto}.welcome h1{font-size:35px}.welcome-copy{font-size:11px;margin:8px 0}.welcome .eyebrow{display:none}
  .quest-card{top:calc(64px + var(--safe-top));max-width:260px;right:auto;min-height:44px}.quest-card small,.mini-map,.discovery,.nearby-card{display:none}
  .joystick{left:calc(22px + var(--safe-left));bottom:calc(24px + var(--safe-bottom));width:96px;height:96px}.joystick-knob{left:26px;top:26px}
  .action-buttons{right:calc(20px + var(--safe-right));bottom:calc(26px + var(--safe-bottom))}
  .skill-tray{left:50%;bottom:calc(18px + var(--safe-bottom));width:min(42%,360px);transform:translateX(-50%)}
  .altitude-controls{right:calc(25px + var(--safe-right));bottom:calc(113px + var(--safe-bottom));flex-direction:row}
  .route-status{top:calc(116px + var(--safe-top));max-width:270px}
  .dash-target-panel{top:calc(64px + var(--safe-top));left:50%;width:330px;max-width:50%;transform:translateX(-50%)}
  .app .toast{top:calc(115px + var(--safe-top));max-width:45%}.letterbox{min-height:44px}.cinema-caption{bottom:calc(55px + var(--safe-bottom))}.cinema-caption h2{font-size:21px;margin:4px 0 0}
}