/* /css/layout-shell-v1.css
 * Shared world shell for desktop (/index.html) and mobile (/m/index.html).
 * Standardizes:
 *   - canvas wrapper
 *   - overlay root
 *   - HUD root
 *   - z-index layering
 */

:root {
  --pps-z-world: 0;
  --pps-z-overlay: 10;
  --pps-z-hud: 20;
  --pps-z-modal: 40;
}

/* Outer shell just fills the viewport */
body.pps-shell,
body.m-shell {
  margin: 0;
  padding: 0;
  background: #020b08;
}

/* Shared world wrapper */
.pps-world-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Any game canvas inside the shell */
.pps-world-shell canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Overlay root: lines, markers, rain, etc. */
#ppsOverlay {
  position: absolute;
  inset: 0;
  z-index: var(--pps-z-overlay);
  pointer-events: none;
}

/* HUD root: buttons, toasts, menus. */
#ppsHudRoot {
  position: absolute;
  inset: 0;
  z-index: var(--pps-z-hud);
  pointer-events: none;
}

/* Allow interactive children in HUD/overlay */
#ppsOverlay > *,
#ppsHudRoot > * {
  pointer-events: auto;
}

/* Mobile-specific tweaks */
body[data-layout="mobile"] .pps-world-shell {
  /* main world is below header + above bottom nav */
  position: absolute;
  top: 48px;    /* matches .m-topbar height */
  bottom: 64px; /* space for .m-nav */
  left: 0;
  right: 0;
}

/* Ensure drawer and nav live above overlay but below modals */
body[data-layout="mobile"] #drawer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px; /* just above nav */
  z-index: calc(var(--pps-z-hud) + 1);
}

body[data-layout="mobile"] .m-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--pps-z-hud) + 2);
}

/* --------------------------------------------------------
 * Compact UI mode (bottom toolbar primary)
 * -------------------------------------------------------- */
body.pps-shell.pps-compact-ui:not(.pps-panels-open) .sidebar{
  display:none !important;
}
body.pps-shell.pps-compact-ui:not(.pps-panels-open) .layout{
  grid-template-columns: 1fr !important;
}
body.pps-shell.pps-compact-ui .stage-wrap{
  /* keep world visible above bottom toolbar */
  padding-bottom: calc(var(--pps-bottom-toolbar-h, 0px) + 8px);
}
body.pps-shell.pps-compact-ui .stage-frame{
  padding-bottom: calc(var(--pps-bottom-toolbar-h, 0px) + 8px);
}

/* Make the topbar less loud in compact mode */
body.pps-shell.pps-compact-ui .topbar{
  padding: 0.45rem 0.8rem;
}
body.pps-shell.pps-compact-ui .topbar .version-pill{
  display:none;
}
body.pps-shell.pps-compact-ui #btnPanels{
  margin-left: 10px;
}