/* HEAVEN mobile UI composition: touch-first menus and non-overlapping gameplay.
   This final stylesheet overrides legacy desktop positioning without altering
   input handling, saved user HUD settings, or developer permissions. */
@media (pointer:coarse) and (min-width:761px) and (max-width:1200px){
  #app.app{
    width:100%;max-width:100%;height:100dvh;overflow:hidden;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:58px minmax(0,1fr) 0px!important;
  }
  #app .topbar{grid-column:1!important;grid-row:1!important;min-height:0;height:58px;padding:5px 12px!important;gap:10px;min-width:0}
  #app .topbar .portfolio-return{display:none!important}
  #app .topbar .logo{height:38px;width:38px;flex:0 0 38px}
  #app .topbar strong{font-size:12px;letter-spacing:.1em;white-space:nowrap}
  #app .topbar #crumb{font-size:9px}
  #app .topbar #socialToggle,#app .topbar #hardwareMode,#app .topbar #userLabel{display:none!important}
  #app .topbar .top-spacer{flex:1 1 auto;min-width:2px}
  #app[data-auth-state="authenticated"]:not(:has(.world-wrap)) #mobileNavToggle{
    display:inline-flex!important;align-items:center;justify-content:center;min-height:40px;
    flex:0 0 auto;gap:5px;padding:8px 13px;border:1px solid #477d96;border-radius:7px;
    color:#e8f8ff;background:#142b3b;font:700 11px system-ui;touch-action:manipulation;
  }
  #app #screen{
    min-width:0;width:100%;height:auto;grid-column:1!important;grid-row:2!important;
    padding:12px max(14px,env(safe-area-inset-left)) 25px!important;
    overflow-x:hidden!important;overflow-y:auto!important;
  }
  #app:has(.world-wrap) #screen{padding:0!important}
  #app footer{display:none!important}
  #app.app[data-auth-state="authenticated"] #heavenMenuRail{
    position:fixed!important;display:none!important;grid-column:1!important;
    inset:58px 0 0 auto!important;width:min(340px,86vw)!important;max-width:86vw!important;
    min-height:0!important;height:auto!important;overflow-x:hidden!important;overflow-y:auto!important;
    flex-direction:column!important;gap:9px!important;padding:13px!important;
    background:#0b1823!important;border:1px solid #3a6279!important;
    box-shadow:-18px 15px 50px #000c!important;z-index:101!important;
  }
  #app.app.nav-open[data-auth-state="authenticated"]:not(:has(.world-wrap)) #heavenMenuRail{display:flex!important}
  #app.app.nav-open[data-auth-state="authenticated"]:not(:has(.world-wrap)) #mobileNavBackdrop{
    display:block!important;position:fixed;inset:58px 0 0;z-index:100;
    background:rgba(0,3,9,.7);border:0;
  }
  #app #heavenMenuRail .hm-brand{font-size:17px;padding:8px!important}
  #app #heavenMenuRail .hm-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;white-space:normal!important;width:100%}
  #app #heavenMenuRail .hm-nav button,#app #heavenMenuRail .hm-bottom button{
    flex:auto!important;width:100%!important;min-width:0!important;min-height:44px!important;
    text-align:left!important;font:700 11px system-ui!important;padding:8px 11px!important;
  }
  #app #heavenMenuRail .hm-bottom{display:grid!important;gap:5px}
  #app #heavenMenuRail .hm-bottom button[hidden]{display:none!important}
  #mobileSessionInfo{display:block!important;color:#b0d2dd;font:11px system-ui;padding:9px 6px}
  #app .hm-home{gap:10px!important}
  #app .hm-banner{min-height:0!important;padding:17px 20px!important;gap:6px!important}
  #app .hm-banner h1{font-size:clamp(25px,4.6vw,39px)!important;line-height:1.07}
  #app .hm-banner p{margin:0!important;line-height:1.4!important}
  #app .hm-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  #app .hm-tile,#app .hm-tile.featured{min-height:115px!important;padding:13px!important;grid-column:auto!important}
  #app .hm-tile b,#app .hm-tile.featured b{font-size:16px!important}
  #app .hm-tile small{font-size:11px!important;line-height:1.3!important}
  #app .hm-status{gap:8px!important;padding:10px!important}
  #app .screen-head{padding:8px 0 12px!important;margin-bottom:12px!important}
  #app .screen-head h1{font-size:24px!important}
}
/* The fixed height of small phone screens requires tighter typography and
   consistent scroll containment; world canvas remains unscrolled. */
@media (pointer:coarse) and (max-width:760px){
  #app #screen:not(:has(.world-wrap)){scrollbar-width:thin}
  #app .hm-home{gap:9px!important}
  #app .hm-banner{padding:17px 15px!important}
  #app .hm-banner h1{font-size:clamp(24px,7vw,31px)!important;line-height:1.12!important}
  #app .hm-banner p{font-size:11px!important}
  #app .hm-home-grid .hm-tile,#app .hm-home-grid .hm-tile.featured{min-height:107px!important;padding:12px 10px!important}
  #app .hm-home-grid .hm-tile b,#app .hm-home-grid .hm-tile.featured b{font-size:13px!important}
  #app .hm-home-grid .hm-tile small{font-size:10px!important}
  #app .hm-status{padding:9px!important}
}
/* Show the actual canvas as the principal surface on landscape phones. */
@media (pointer:coarse) and (orientation:landscape) and (max-width:1200px){
  body.heaven-touch-game.mobile-world-fullscreen #app.app{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
  }
  body.heaven-touch-game.mobile-world-fullscreen #app .topbar,
  body.heaven-touch-game.mobile-world-fullscreen #app footer{display:none!important}
  body.heaven-touch-game.mobile-world-fullscreen #app #screen{
    grid-column:1/-1!important;grid-row:1!important;
    height:100dvh!important;width:100vw!important;padding:0!important;
    margin:0!important;overflow:hidden!important;
  }
  body.heaven-touch-game.mobile-world-fullscreen .world-wrap{
    position:fixed!important;inset:0!important;width:100vw!important;
    height:100dvh!important;max-height:100dvh!important;border:0!important;
  }
  body.heaven-touch-game.mobile-world-fullscreen #mobileNavToggle{display:none!important}
}
/* Touch HUD: ignore user-authored desktop offsets only in the responsive game
   view. Desktop continues to honor saved HUD positions. */
@media (pointer:coarse) and (max-width:1200px){
  body.heaven-touch-game .world-wrap{overflow:hidden!important;touch-action:none}
  body.heaven-touch-game .heaven-player-hud{--hud-scale:1!important}
  body.heaven-touch-game .hud-core{overflow:hidden!important}
  body.heaven-touch-game .hud-core .hud-party,
  body.heaven-touch-game .hud-core .hud-objectives,
  body.heaven-touch-game .hud-core .hud-environment,
  body.heaven-touch-game .hud-core .hud-weapon,
  body.heaven-touch-game .hud-core .hud-actions,
  body.heaven-touch-game .hud-core #hudDebug,
  body.heaven-touch-game .hud-core .fps-kill-feed{display:none!important}
  body.heaven-touch-game .hud-compass{
    top:6px!important;left:50%!important;right:auto!important;
    width:min(45vw,480px)!important;height:45px!important;
    transform:translateX(-50%)!important;transform-origin:top center!important;
  }
  body.heaven-touch-game .hud-compass .compass-track{top:7px;height:22px}
  body.heaven-touch-game .hud-compass .compass-pointer{bottom:11px}
  body.heaven-touch-game .hud-vitals{
    top:9px!important;bottom:auto!important;left:max(10px,env(safe-area-inset-left))!important;
    right:auto!important;width:190px!important;min-height:0!important;
    height:69px!important;padding:7px 9px!important;display:block!important;
    clip-path:none!important;border-radius:7px!important;
    transform:none!important;background:rgba(3,17,27,.79)!important;
  }
  body.heaven-touch-game .hud-vitals .body-status{display:none!important}
  body.heaven-touch-game .hud-vitals .vitals-bars{display:block!important}
  body.heaven-touch-game .hud-vitals .hud-label{font-size:8px;margin-bottom:2px}
  body.heaven-touch-game .hud-vitals .vital-row{height:15px;grid-template-columns:39px 1fr 24px;gap:4px}
  body.heaven-touch-game .hud-vitals .hud-life{display:none!important}
  body.heaven-touch-game .hud-quickbar{
    top:auto!important;bottom:max(9px,env(safe-area-inset-bottom))!important;
    left:50%!important;right:auto!important;min-width:0!important;min-height:0!important;
    width:auto!important;padding:3px!important;gap:4px;
    border-radius:7px!important;transform:translateX(-50%)!important;
    background:rgba(3,15,24,.76)!important;
  }
  body.heaven-touch-game .hud-quickbar .quick-slot{
    min-width:0!important;width:clamp(72px,10vw,111px)!important;
    max-width:111px!important;height:39px!important;
    padding:4px!important;grid-template-columns:11px minmax(0,1fr) auto;
  }
  body.heaven-touch-game .hud-quickbar .quick-slot b{font-size:9px!important;letter-spacing:0!important}
  body.heaven-touch-game .hud-quickbar .quick-slot small{font-size:8px!important}
  body.heaven-touch-game .hud-network-stats{
    top:6px!important;right:max(9px,env(safe-area-inset-right))!important;
    font-size:8px!important;padding:3px 6px!important;
  }
  body.heaven-touch-game .mobile-game-chrome{
    top:35px!important;right:max(8px,env(safe-area-inset-right))!important;
    z-index:94!important;
  }
  body.heaven-touch-game .mobile-fullview{font-size:9px!important;min-height:34px!important;padding:6px 9px!important}
  body.heaven-touch-game .mobile-joystick{left:max(12px,env(safe-area-inset-left))!important;bottom:max(14px,env(safe-area-inset-bottom))!important}
  body.heaven-touch-game .mobile-actions{right:max(9px,env(safe-area-inset-right))!important;bottom:max(10px,env(safe-area-inset-bottom))!important}
  body.heaven-touch-game .mobile-controls button{height:40px!important;font-size:10px!important}
  body.heaven-touch-game .mobile-actions{grid-template-columns:repeat(3,minmax(0,53px))!important;gap:5px!important}
  body.heaven-touch-game .mobile-hint{display:none!important}
}
/* Portrait touch screens have little width: keep vitals/top controls clear and
   never let weapon slots compete with the movement stick and fire grid. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:760px){
  body.heaven-touch-game .hud-compass{display:none!important}
  body.heaven-touch-game .hud-vitals{top:10px!important;left:8px!important;width:min(180px,46vw)!important}
  body.heaven-touch-game .hud-network-stats{top:7px!important;right:7px!important}
  body.heaven-touch-game .mobile-game-chrome{top:36px!important;right:7px!important}
  body.heaven-touch-game .hud-quickbar{
    left:8px!important;top:86px!important;bottom:auto!important;
    max-width:calc(100vw - 16px)!important;transform:none!important;
  }
  body.heaven-touch-game .hud-quickbar .quick-slot{width:min(93px,23vw)!important}
  body.heaven-touch-game .mobile-actions{grid-template-columns:repeat(3,minmax(0,44px))!important;gap:4px!important}
  body.heaven-touch-game .mobile-controls button{height:44px!important;font-size:9px!important}
  body.heaven-touch-game .mobile-joystick{width:104px!important;height:104px!important}
  body.heaven-touch-game .mobile-joystick-knob{width:46px;height:46px}
  body.heaven-touch-game .hud-interaction{bottom:29%!important;max-width:70vw}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:540px){
  body.heaven-touch-game .hud-vitals{width:170px!important;height:62px!important;top:6px!important}
  body.heaven-touch-game .hud-vitals .hud-label{display:none}
  body.heaven-touch-game .hud-network-stats{top:5px!important}
  body.heaven-touch-game .hud-quickbar{bottom:5px!important}
  body.heaven-touch-game .mobile-actions{bottom:6px!important;grid-template-columns:repeat(3,49px)!important}
  body.heaven-touch-game .mobile-controls button{height:38px!important;font-size:9px!important}
  body.heaven-touch-game .mobile-joystick{width:101px!important;height:101px!important;bottom:9px!important}
  body.heaven-touch-game .mobile-joystick-label{display:none!important}
  body.heaven-touch-game .hud-compass{width:min(40vw,350px)!important;height:39px!important}
}
@media (pointer:coarse) and (orientation:landscape) and (max-width:700px){
  body.heaven-touch-game .hud-compass{display:none!important}
  body.heaven-touch-game .hud-quickbar{bottom:6px!important}
}