/* DANI LEVEL 30 · AppShell V8 migration · v24.120
   Architectural source of truth for mobile viewport + safe area.
   Views contribute theme/content only. */
:root{
  --app-safe-top:env(safe-area-inset-top,0px);
  --app-safe-right:env(safe-area-inset-right,0px);
  --app-safe-bottom:env(safe-area-inset-bottom,0px);
  --app-safe-left:env(safe-area-inset-left,0px);
  --app-shell-bg:#f6f1ed;
}
html,body{width:100%;min-height:100%;background:var(--app-shell-bg);}
body{
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:auto;
}
#appShell{
  width:100%;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  background:var(--app-shell-bg);
}
.app-screen{
  width:100%;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  background:var(--app-shell-bg);
}
.app-safe-shell{
  width:100%;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  padding:var(--app-safe-top) var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left);
  display:flex;
  flex-direction:column;
}
.app-shell-header{flex:0 0 auto;min-width:0;}
.app-shell-main{flex:1 0 auto;min-height:0;display:flex;flex-direction:column;}
.app-shell-stack{flex:1 0 auto;min-height:0;display:flex;flex-direction:column;}
.app-view{flex:1 0 auto;min-height:0;width:100%;}
.app-view[hidden]{display:none!important;}

/* The shared shell owns the safe area. Root views must not add it a second time. */
#appShell .hud{top:0;}
#appShell .hero--intro{min-height:100%;}
#appShell .party-mode{min-height:100%;}

/* Main application views are normal flow content, never top-layer/fixed viewport shells. */
#adminDialog.app-view,
#clandestineDialog.app-view,
#infiltrationDialog.app-view,
#blindDialog.app-view,
#aimDialog.app-view,
#arcadeDialog.app-view,
#safeDialog.app-view{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  min-height:100%!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
}

/* Admin uses document scroll. Its old modal card no longer creates a second viewport. */
#adminDialog .admin-dialog__card{
  width:100%!important;
  min-height:100%!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#adminDialog .admin-dialog__head{position:relative!important;top:auto!important;}
#adminDialog .admin-command-bar,#adminDialog .admin-tabs{position:relative!important;top:auto!important;}

/* Clandestinas and game homes inherit the one shell safe area. */
#clandestineDialog .clandestine-shell{
  min-height:100%;
  height:auto;
  padding:18px 16px 14px!important;
}
#clandestineDialog .clandestine-shell--playfirst{height:100%;max-height:none;}
#infiltrationDialog .arcade-shell,
#blindDialog .arcade-shell,
#aimDialog .arcade-shell,
#arcadeDialog .arcade-shell,
#safeDialog .arcade-shell{
  min-height:100%;
  padding:15px 13px 20px;
}

/* Fullscreen gameplay still fills the AppShell content box, without becoming another viewport. */
body.arcade-playing #arcadeDialog,
body.safe-playing #safeDialog,
body.infiltration-playing #infiltrationDialog,
body.blind-playing #blindDialog,
body.aim-playing #aimDialog,
body.operation-result-open .app-view[data-app-theme="game"]{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
  overflow:hidden!important;
}
body.arcade-playing #arcadeDialog>.arcade-shell,
body.safe-playing #safeDialog>.arcade-shell,
body.infiltration-playing #infiltrationDialog>.arcade-shell,
body.blind-playing #blindDialog>.arcade-shell,
body.aim-playing #aimDialog>.arcade-shell,
body.operation-result-open .app-view[data-app-theme="game"]>.operation-shell{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* Safe-area values are not repeated inside game canvases; AppShell already protected them. */
body.infiltration-playing .inf-game{padding-top:58px!important;padding-bottom:12px!important;}
body.blind-playing .blind-game{padding-top:14px!important;padding-bottom:14px!important;}
body.aim-playing .aim-game{padding-top:14px!important;padding-bottom:12px!important;}
body.safe-playing .safe-game{padding-top:58px!important;padding-bottom:10px!important;}
body.operation-result-open .operation-result:not([hidden]){padding:18px!important;}

/* Theme is also painted on root/html/body so overscroll never reveals a foreign strip. */
html[data-app-theme="invite"],html[data-app-theme="invite"] body{--app-shell-bg:#f6f1ed;}
html[data-app-theme="party"],html[data-app-theme="party"] body{--app-shell-bg:#f6f1ed;}
html[data-app-theme="admin"],html[data-app-theme="admin"] body{--app-shell-bg:#f5f6f8;}
html[data-app-theme="clandestine"],html[data-app-theme="clandestine"] body{--app-shell-bg:#11131b;}
html[data-app-theme="game"],html[data-app-theme="game"] body{--app-shell-bg:#0d0b12;}
html[data-app-theme="invite"] body.intro-mode{--app-shell-bg:#17151d;}

/* No Safari/PWA geometry fork: standalone may change paint, never dimensions. */
html.is-standalone,html.is-standalone body{min-height:100%;}

/* V8 contract enforcement: legacy gameplay classes may change game internals,
   but they may not create another viewport or lock the document. */
body.arcade-playing,
body.safe-playing,
body.infiltration-playing,
body.blind-playing,
body.aim-playing,
body.operation-loading-open,
body.operation-result-open{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
}

body.arcade-playing #arcadeDialog,
body.safe-playing #safeDialog,
body.infiltration-playing #infiltrationDialog,
body.blind-playing #blindDialog,
body.aim-playing #aimDialog{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
  margin:0!important;
}
body.arcade-playing #arcadeDialog>.arcade-shell,
body.safe-playing #safeDialog>.arcade-shell,
body.infiltration-playing #infiltrationDialog>.arcade-shell,
body.blind-playing #blindDialog>.arcade-shell,
body.aim-playing #aimDialog>.arcade-shell{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
}

/* The outer AppShell already owns iOS safe-area padding. */
#appShell .hud{top:8px!important;}
#clandestineDialog .clandestine-shell{padding:18px 16px 14px!important;}
body.arcade-playing .arcade-game-hud{padding-top:12px!important;}
body.arcade-playing .arcade-touch-controls{padding-bottom:18px!important;}
body.infiltration-playing .inf-game{padding-top:58px!important;padding-bottom:12px!important;}
body.infiltration-playing .inf-practice-badge{top:15px!important;}
body.blind-playing .blind-game{padding-top:14px!important;padding-bottom:14px!important;}
body.blind-playing .blind-practice-badge{top:17px!important;}
body.aim-playing .aim-game{padding-top:14px!important;padding-bottom:12px!important;}
body.aim-playing .aim-practice-badge{top:17px!important;}
body.safe-playing .safe-game{padding-top:58px!important;padding-bottom:10px!important;}

/* Loading belongs to the active game's content box, never to the viewport. */
#appShell .operation-loading{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
  padding:26px 24px 30px!important;
}

/* Results fill the active AppShell view. The old [open] dialog selector no
   longer applies because fullscreen games are normal AppShell views. */
body.operation-result-open .app-view[data-app-theme="game"] .arcade-head,
body.operation-result-open .app-view[data-app-theme="game"] .inf-head,
body.operation-result-open .app-view[data-app-theme="game"] .blind-head,
body.operation-result-open .app-view[data-app-theme="game"] .aim-head,
body.operation-result-open .app-view[data-app-theme="game"] .operation-ranking,
body.operation-result-open .app-view[data-app-theme="game"]>.operation-shell>.form-message{
  display:none!important;
}
body.operation-result-open .app-view[data-app-theme="game"] .operation-game-card{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
}
body.operation-result-open .app-view[data-app-theme="game"] .operation-result:not([hidden]){
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  padding:18px!important;
}

/* The legacy GTA HUD is the shell header for the two base experiences only.
   Full AppShell views bring their own view-level navigation/content and must
   never render the base HUD behind or above them. */
body:not([data-app-view="invite"]):not([data-app-view="party"]) #appShellHeader{
  display:none;
}