/* Pixel Pet Studio v2.0.0-alpha.2 — shell stabilization */
:root {
  --pps-bottom-toolbar-h: 74px;
  --pps-shell-gap: clamp(8px, 0.8vw, 14px);
}

/* The desktop app is a real viewport shell. The fixed tool tray owns space
   instead of covering the world or leaving an unused strip. */
body.pps-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.pps-shell .topbar {
  position: relative;
  flex: 0 0 auto;
}

body.pps-shell .layout {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding:
    var(--pps-shell-gap)
    clamp(10px, 1vw, 18px)
    calc(var(--pps-bottom-toolbar-h, 74px) + var(--pps-shell-gap));
  grid-template-columns: clamp(250px, 17vw, 310px) minmax(0, 1fr);
  gap: var(--pps-shell-gap);
  align-items: stretch;
}

body.pps-shell .sidebar {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 2px;
}

body.pps-shell .stage-wrap {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  place-items: start center;
  overflow: hidden;
}

body.pps-shell .stage-frame {
  width: min(100%, calc((100vh - var(--pps-bottom-toolbar-h, 74px) - 76px) * 16 / 9));
  width: min(100%, calc((100dvh - var(--pps-bottom-toolbar-h, 74px) - 76px) * 16 / 9));
  max-height: 100%;
  aspect-ratio: 16 / 9;
  padding: 0.3rem;
}

body.pps-shell #game {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

body.pps-shell #minimap {
  top: 4.1rem;
  right: clamp(10px, 1vw, 18px);
  max-width: min(220px, 18vw);
}

/* The control center must sit above the tool tray, not on top of its buttons. */
body.pps-shell .pps-v2-center {
  bottom: calc(var(--pps-bottom-toolbar-h, 74px) + 12px);
}

/* Production tools start compact. Expanded mode remains one click away. */
.pps-bottom-toolbar {
  contain: layout paint;
}

.pps-bottom-toolbar.collapsed {
  gap: 4px;
  padding-top: 6px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}

.pps-bottom-toolbar.collapsed .pps-bottom-toolbar__groups,
.pps-bottom-toolbar.collapsed .pps-bottom-toolbar__tools {
  display: none !important;
}

.pps-bottom-toolbar__title {
  min-width: 46px;
  font-weight: 700;
}

.pps-bottom-toolbar__tabs,
.pps-bottom-toolbar__groups {
  scrollbar-width: thin;
}

.pps-bottom-toolbar button:focus-visible,
.pps-v2-center button:focus-visible,
.topbar button:focus-visible,
.topbar select:focus-visible {
  outline: 2px solid #79eebd;
  outline-offset: 2px;
}

/* Don't animate the whole shell on low-power or reduced-motion systems. */
@media (prefers-reduced-motion: reduce) {
  body.pps-shell::before,
  body.pps-shell::after,
  body.pps-shell .panel {
    animation: none !important;
  }
}

@media (max-width: 1200px) {
  body.pps-shell {
    overflow: auto;
  }

  body.pps-shell .layout {
    display: grid;
    grid-template-columns: 1fr;
    padding-bottom: calc(var(--pps-bottom-toolbar-h, 74px) + 12px);
  }

  body.pps-shell .stage-wrap {
    order: 1;
    overflow: visible;
  }

  body.pps-shell .sidebar {
    order: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    overflow-x: auto;
  }

  body.pps-shell .stage-frame {
    width: 100%;
    max-height: none;
  }
}

@media (max-width: 760px) {
  body.pps-shell .sidebar {
    grid-template-columns: 1fr;
  }

  .pps-bottom-toolbar__header {
    min-height: 34px;
  }

  .pps-bottom-toolbar__tabs .chip,
  .pps-bottom-toolbar__groups .chip {
    min-height: 34px;
  }
}

/* Mobile owns its own world shell, but shared V2 UI still clears safe areas. */
body.m-shell .pps-v2-center {
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(var(--pps-bottom-toolbar-h, 0px) + 78px + env(safe-area-inset-bottom));
}