/* HEAVEN production mobile shell. Keep the public/auth screens isolated from
   navigation and render a true phone layout rather than stretched desktop tabs. */
#mobileNavToggle{display:none}
#mobileNavBackdrop{display:none}
#mobileSessionInfo{display:none}
#app:not([data-auth-state="authenticated"]) #heavenMenuRail{display:none!important}
#app:not([data-auth-state="authenticated"]) #mobileNavToggle{display:none!important}
#app:not([data-auth-state="authenticated"]) .topbar .top-action{display:none!important}
#app:not([data-auth-state="authenticated"]) #netState{display:none!important}
#app:not([data-auth-state="authenticated"]) #userLabel{display:none!important}
#app[data-auth-state="signed-out"] #screen{grid-column:1/-1!important}
#app[data-auth-state="signed-out"] .topbar .logo{pointer-events:none}
#app[data-auth-state="signed-out"] .topbar .logo{opacity:.8}
@media(max-width:760px) and (pointer:coarse) and (hover:none){
 html,body{width:100%;max-width:100%;overflow:hidden}
 #app.app{
  position:relative;isolation:isolate;width:100%;max-width:100vw;
  height:100dvh;min-height:0;grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:58px minmax(0,1fr) 26px!important;overflow:hidden;
 }
 #app .topbar{
  grid-column:1!important;grid-row:1!important;
  display:flex;align-items:center;gap:9px;min-width:0;min-height:0;
  height:58px;padding:6px 12px!important;z-index:102;
 }
 #app .topbar .logo{width:39px;height:39px;flex:0 0 39px;font-size:21px}
 #app .topbar>div:not(.top-spacer){min-width:0;flex:0 1 auto}
 #app .topbar strong{font-size:11px;letter-spacing:.14em;white-space:nowrap}
 #app .topbar #crumb{font-size:9px;letter-spacing:.15em}
 #app .topbar #hardwareMode,#app .topbar #socialToggle{display:none!important}
 #app .topbar #userLabel{display:none!important}
 #app .topbar #netState{flex:0 0 auto;font-size:9px;padding:6px 8px;letter-spacing:.05em}
 #app .topbar .top-spacer{flex:1 1 auto;min-width:3px}
 #app[data-auth-state="authenticated"]:not(:has(.world-wrap)) #mobileNavToggle{
  display:inline-flex!important;flex:0 0 auto;align-items:center;justify-content:center;
  gap:5px;padding:8px 10px;min-height:40px;border:1px solid #477d96;
  border-radius:7px;background:#142b3b;color:#dff5ff;font:700 10px/1 system-ui;
  letter-spacing:.05em;cursor:pointer;touch-action:manipulation;
 }
 #mobileNavToggle[aria-expanded="true"]{border-color:#8cd5ef!important;background:#27516a!important}
 #app #screen{
  grid-column:1!important;grid-row:2!important;min-height:0;
  overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;
  width:100%;padding:14px 13px max(30px,env(safe-area-inset-bottom))!important;
 }
 #app:has(.world-wrap) #screen{padding:0!important}
 #app footer{
  grid-column:1!important;grid-row:3!important;min-height:0;height:26px;
  padding:4px 10px!important;white-space:nowrap;overflow:hidden;
  font-size:8px!important;letter-spacing:.05em;
 }
 #app footer .grow{min-width:0}
 /* The base site CSS forces display:flex!important on the game rail.
    Explicitly hide it when the user has not opened the drawer. */
 #app.app[data-auth-state="authenticated"] #heavenMenuRail{
  display:none!important;
  position:fixed!important;inset:58px 0 0 auto!important;
  top:58px!important;right:0!important;bottom:0!important;left:auto!important;
  transform:none!important;width:min(330px,88vw)!important;max-width:88vw!important;
  max-height:calc(100dvh - 58px)!important;min-height:0!important;
  flex-direction:column!important;align-items:stretch!important;
  gap:13px!important;overflow-y:auto!important;overflow-x:hidden!important;
  overscroll-behavior:contain;padding:17px 15px max(24px,env(safe-area-inset-bottom))!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 0;
  z-index:100;background:rgba(0,3,9,.72);border:0;padding:0;cursor:pointer;
 }
 #app #heavenMenuRail .hm-brand{display:block!important;font-size:19px;letter-spacing:.16em;padding:7px 9px}
 #app #heavenMenuRail .hm-nav{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  grid-auto-rows:minmax(43px,auto)!important;align-content:start!important;
  align-items:stretch!important;gap:4px!important;flex:0 0 auto!important;
  width:100%;height:auto!important;min-height:0!important;white-space:normal!important;
 }
 #app #heavenMenuRail .hm-nav button,
 #app #heavenMenuRail .hm-bottom button{
  width:100%!important;min-width:0!important;height:44px!important;min-height:44px!important;
  max-height:52px!important;padding:9px 13px!important;
  display:flex!important;flex:0 0 auto!important;align-items:center!important;
  justify-content:flex-start!important;font:700 11px/1.2 system-ui!important;
  letter-spacing:.055em!important;border-radius:6px!important;
  background-image:none!important;
 }
 #app #heavenMenuRail .hm-nav button.hm-active{
  background:#254e64!important;box-shadow:inset 3px 0 #8fd3f2!important;
 }
 #app #heavenMenuRail .hm-bottom{display:grid!important;flex:0 0 auto!important;gap:4px!important;margin-top:6px!important}
 #app #heavenMenuRail .hm-bottom button[hidden]{display:none!important}
 #mobileSessionInfo{
  display:block!important;border-top:1px solid #28485b;padding:12px 8px 2px;
  font:600 10px system-ui;color:#a6ccd9;word-break:break-word;
 }
 #app .hm-home{display:grid;gap:12px;min-width:0;max-width:100%}
 #app .hm-banner{
  min-height:0!important;padding:22px 18px!important;gap:9px!important;
  border-radius:10px!important;background:linear-gradient(120deg,#173746,#0a1724)!important;
 }
 #app .hm-banner::after{width:130px;height:130px;right:-35px;bottom:-47px}
 #app .hm-banner h1{font-size:clamp(26px,7.9vw,34px)!important;line-height:1.1!important;letter-spacing:.015em!important;margin:3px 0!important}
 #app .hm-banner p{font-size:12px!important;line-height:1.45!important;margin:0 0 7px!important}
 #app .hm-banner .row{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%;gap:8px;min-width:0}
 #app .hm-banner .row .btn{
  min-width:0!important;min-height:43px!important;padding:10px 7px!important;
  text-align:center;font:700 10px system-ui!important;letter-spacing:.01em!important;
 }
 #app .hm-home-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;min-width:0;
 }
 #app .hm-home-grid .hm-tile{
  min-height:128px!important;padding:14px 12px!important;gap:7px!important;
  overflow:hidden;max-width:100%;
 }
 #app .hm-home-grid .hm-tile.featured{grid-column:auto!important;min-height:128px!important}
 #app .hm-home-grid .hm-tile b,
 #app .hm-home-grid .hm-tile.featured b{font-size:14px!important;letter-spacing:.045em!important;overflow-wrap:anywhere}
 #app .hm-home-grid .hm-tile small{font-size:11px!important;line-height:1.35!important;padding-right:0!important}
 #app .hm-tile-caption{font-size:9px!important;letter-spacing:.09em!important}
 #app .hm-corner{font-size:16px!important;right:10px;bottom:9px}
 #app .hm-status{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px!important;padding:12px!important;
 }
 #app .hm-status span{border:0!important;padding:0!important;line-height:1.5;overflow-wrap:anywhere}
 #app .hm-status b{display:block;padding:2px 0 0;font-size:14px}
 #app .hm-subgrid,#app .hm-stats,#app .clean-world-grid,#app .grid.two,
 #app .grid.three,#app .grid.four{grid-template-columns:minmax(0,1fr)!important}
 #app .hm-extract-hero,#app .hm-hero-slim{padding:18px!important;min-height:0!important}
 #app .hm-extract-hero h2,#app .hm-hero-slim h2{font-size:27px!important;letter-spacing:.045em}
 #app .screen-head{padding-bottom:13px!important;margin-bottom:15px!important}
 #app .screen-head h1{font-size:26px!important;line-height:1.15}
 #app .screen-head .actions{flex-wrap:wrap}
 #app .hm-home .btn,#app .hm-subgrid .btn{max-width:100%}
 #app .card{max-width:100%;overflow-wrap:anywhere}
 #app .auth-box{width:min(430px,100%)!important;max-width:100%!important;padding:18px!important}
 #app .login{min-height:100%!important;padding:14px 0!important;align-items:center}
 #app .auth-section .row{display:flex;flex-wrap:wrap;gap:8px}
 #app .auth-section .row .btn{flex:1 1 120px;min-width:0}
}
@media(max-width:345px){
 #app .topbar #netState{display:none!important}
 #app .hm-home-grid{grid-template-columns:minmax(0,1fr)!important}
 #app .hm-home-grid .hm-tile{min-height:92px!important}
}

/* HEAVEN_MOBILE_LANDSCAPE_MENU_312 */
@media(pointer:coarse) and (hover:none) and (orientation:landscape) and (max-width:1200px){
 html,body{width:100%!important;overflow:hidden!important}
 #app.app[data-auth-state="authenticated"]:not(:has(.world-wrap)){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:45px minmax(0,1fr)!important;height:100dvh!important;max-width:100vw!important;overflow:hidden!important}
 #app.app[data-auth-state="authenticated"]:not(:has(.world-wrap)) .topbar{display:flex!important;grid-column:1!important;grid-row:1!important;height:45px!important;min-height:45px!important;padding:4px 8px!important;z-index:210!important}
 #app.app[data-auth-state="authenticated"]:not(:has(.world-wrap)) .topbar #hardwareMode,#app.app[data-auth-state="authenticated"]:not(:has(.world-wrap)) .topbar #socialToggle,#app.app[data-auth-state="authenticated"]:not(:has(.world-wrap)) .topbar #userLabel{display:none!important}
 #app.app[data-auth-state="authenticated"]:not(:has(.world-wrap)) .topbar .top-spacer{flex:1!important}
 #app.app[data-auth-state="authenticated"]:not(:has(.world-wrap)) #mobileNavToggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:36px!important;padding:5px 10px!important;background:#163448!important;border:1px solid #6098b9!important;color:#e7f6ff!important}
 #app.app[data-auth-state="authenticated"]:not(:has(.world-wrap)) #screen{grid-column:1!important;grid-row:2!important;height:calc(100dvh - 45px)!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:8px 12px!important}
 #app.app[data-auth-state="authenticated"]:not(:has(.world-wrap)) footer{display:none!important}
 #app.app[data-auth-state="authenticated"] #heavenMenuRail{display:none!important;position:fixed!important;inset:45px 0 0 auto!important;top:45px!important;right:0!important;bottom:0!important;left:auto!important;width:min(330px,76vw)!important;max-height:calc(100dvh - 45px)!important;z-index:205!important;overflow-y:auto!important;padding:12px!important;background:#0b1b29!important}
 #app.app.nav-open[data-auth-state="authenticated"]:not(:has(.world-wrap)) #heavenMenuRail{display:flex!important;flex-direction:column!important}
 #app.app.nav-open[data-auth-state="authenticated"]:not(:has(.world-wrap)) #mobileNavBackdrop{display:block!important;position:fixed!important;inset:45px 0 0!important;z-index:204!important;background:#010613cc!important}
 #app.app[data-auth-state="authenticated"] #heavenMenuRail .hm-nav{height:auto!important;display:grid!important;grid-template-columns:1fr!important;gap:4px!important}
 #app.app[data-auth-state="authenticated"] #heavenMenuRail button{min-height:39px!important;max-height:none!important;height:auto!important;padding:8px 10px!important}
 #app .hm-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* HEAVEN_INPUT_DESKTOP_314: desktop mouse layout retains canonical desktop menu and HUD. */