/* Window System v2.32.5
   Final composition layer for the live game. Earlier feature styles keep their
   content rules; this file owns only viewport geometry, stacking and scrolling. */
:root {
  --window-safe-top:max(8px,env(safe-area-inset-top));
  --window-safe-right:max(8px,env(safe-area-inset-right));
  --window-safe-bottom:max(8px,env(safe-area-inset-bottom));
  --window-safe-left:max(8px,env(safe-area-inset-left));
  --window-layer-panel:300;
  --window-layer-dialog:420;
  --window-layer-critical:520;
  --window-ink:#173c56;
  --window-muted:#648095;
  --window-line:#cfe2eb;
  --window-card:#f9fdff;
  --window-shadow:0 22px 60px rgba(8,42,61,.24);
}

/* One predictable layer order. A raised window always stays below a true dialog. */
.game-screen :is(#sidePanel,#chatPanel,#editorPanel).is-open { z-index:var(--window-layer-panel)!important; isolation:isolate; }
.game-screen :is(#marketplaceModal,#inventoryItemDialog,#tradeDialog,#worldChannelConfirm,#dialogueDialog,#starterDialog,#professorTransferDialog,#labGames,#pvpInvite,#socialInvite)[aria-hidden="false"] { z-index:var(--window-layer-dialog)!important; }
.game-screen :is(#battleSurrenderConfirm,#activityRecoveryDialog)[aria-hidden="false"] { z-index:var(--window-layer-critical)!important; }

/* The movable desktop windows have a single scroll owner. Individual feature
   panels that render virtual grids retain their own internal scroll container. */
@media (min-width:761px) {
  .game-screen #sidePanel.side-panel.is-open:not(.is-inventory-panel) { overflow:hidden!important; box-shadow:var(--window-shadow); }
  .game-screen #sidePanel.side-panel.is-open:not(.is-inventory-panel) #sidePanelContent { min-height:0; overscroll-behavior:contain; }
  .game-screen #sidePanel.side-panel.is-open:is(.is-team-panel,.is-center-panel,.is-pokemon-detail-panel,.is-quest-panel,.is-settings-panel,.is-mechanics-panel,.is-progression-panel,.is-factions-panel,.is-genetics-lab-panel) #sidePanelContent { height:100%; overflow:auto!important; scrollbar-gutter:stable; }
  .game-screen #chatPanel.chat-panel.is-open:not(.is-minimized) { overflow:hidden!important; box-shadow:var(--window-shadow); }
}

/* Dialog cards never create page-level scrolling. Their own body owns overflow. */
.game-screen :is(.marketplace-modal,.inventory-item-dialog-v2738,.trade-dialog,.world-channel-confirm,.dialogue-layer,.starter-dialog,.professor-transfer-dialog,.lab-games) { overscroll-behavior:contain; }
.game-screen :is(.marketplace-shell,.inventory-item-dialog-v2738__content,.trade-dialog__content,.world-channel-confirm__card,.dialogue-card,.starter-experience,.professor-transfer-card-shell,.lab-games__shell) { max-height:calc(100dvh - var(--window-safe-top) - var(--window-safe-bottom)); }
.game-screen :is(.marketplace-modal__backdrop,.inventory-item-dialog-v2738__backdrop,.trade-dialog__backdrop,.world-channel-confirm__backdrop,.dialogue-shade,.starter-backdrop,.lab-games__shade) { backdrop-filter:blur(3px); }

/* Shared close affordance: touch-size is stable, visible focus is never hidden. */
.game-screen :is(.panel-close,.marketplace-head>button,.world-channel-confirm__close,.dialogue-close,.starter-close,.inventory-item-dialog-v2738 [data-inventory-detail-close]) { min-width:40px; min-height:40px; touch-action:manipulation; }
.game-screen :is(button,[role="button"],input,select,textarea):focus-visible { outline:3px solid color-mix(in srgb,#1598df 72%,white)!important; outline-offset:2px; }

/* Phone portrait: the side panel becomes one full-height sheet. It deliberately
   overrides legacy translated/positioned states, so no old window can escape
   below the dock or under the notch. */
@media (max-width:760px) and (orientation:portrait) {
  body:not(.is-battling) .game-screen #sidePanel.side-panel.is-open {
    position:fixed!important;
    top:var(--window-safe-top)!important;
    right:var(--window-safe-right)!important;
    bottom:calc(70px + var(--window-safe-bottom))!important;
    left:var(--window-safe-left)!important;
    width:auto!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:8px!important;
    transform:none!important;
    border-radius:22px!important;
    overflow:hidden!important;
    box-shadow:var(--window-shadow)!important;
  }
  body:not(.is-battling) .game-screen #sidePanel.side-panel.is-open #sidePanelContent {
    height:100%!important;
    min-height:0!important;
    padding:0!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  body:not(.is-battling) .game-screen #sidePanel.side-panel.is-open .panel-window-grip { display:none!important; }
  body:not(.is-battling) .game-screen #sidePanel.side-panel.is-open>.panel-close { position:absolute!important; z-index:4!important; top:12px!important; right:12px!important; width:40px!important; height:40px!important; border-radius:13px!important; }

  /* The atlas is a map canvas, therefore it needs every safe pixel, not a
     second bottom sheet inside a bottom sheet. */
  body:not(.is-battling) .game-screen #sidePanel.side-panel.is-regions-panel.is-open { bottom:var(--window-safe-bottom)!important; }

  body:not(.is-battling) .game-screen #chatPanel.chat-panel.chat-messenger.is-open:not(.is-minimized) {
    position:fixed!important;
    top:auto!important;
    right:var(--window-safe-right)!important;
    bottom:calc(70px + var(--window-safe-bottom))!important;
    left:var(--window-safe-left)!important;
    width:auto!important;
    height:min(70dvh,610px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 84px - var(--window-safe-top) - var(--window-safe-bottom))!important;
    margin:0!important;
    border-radius:22px!important;
    box-shadow:var(--window-shadow)!important;
    transform:none!important;
  }
  body:not(.is-battling) .game-screen #chatPanel.chat-panel.chat-messenger.is-minimized { right:var(--window-safe-right)!important; bottom:calc(74px + var(--window-safe-bottom))!important; left:auto!important; max-width:calc(100vw - var(--window-safe-left) - var(--window-safe-right))!important; }

  .game-screen .marketplace-modal { align-items:end!important; padding:var(--window-safe-top) var(--window-safe-right) var(--window-safe-bottom)!important; }
  .game-screen .marketplace-shell { width:100%!important; height:min(88dvh,760px)!important; border-radius:22px 22px 17px 17px!important; }
  .game-screen .marketplace-body { padding:12px!important; overscroll-behavior:contain; }
  .game-screen .inventory-item-dialog-v2738 { align-items:end!important; padding:var(--window-safe-top) var(--window-safe-right) var(--window-safe-bottom)!important; }
  .game-screen .inventory-item-dialog-v2738__content { width:100%!important; max-width:560px!important; max-height:min(82dvh,680px)!important; border-radius:22px 22px 16px 16px!important; overflow:auto!important; overscroll-behavior:contain; }
  .game-screen .trade-dialog__content,.game-screen .world-channel-confirm__card,.game-screen .dialogue-card,.game-screen .starter-experience,.game-screen .professor-transfer-card-shell,.game-screen .lab-games__shell { width:min(100% - 16px,620px)!important; max-height:calc(100dvh - var(--window-safe-top) - var(--window-safe-bottom) - 16px)!important; overflow:auto!important; overscroll-behavior:contain; }
}

/* Short phone landscape uses the full viewport for an intentional task, while
   persistent HUD and decorative rails are retired by the existing battle mode. */
@media (max-height:560px) and (orientation:landscape) {
  body:not(.is-battling) .game-screen #sidePanel.side-panel.is-open,
  body:not(.is-battling) .game-screen #chatPanel.chat-panel.chat-messenger.is-open:not(.is-minimized) {
    position:fixed!important;
    top:var(--window-safe-top)!important;
    right:var(--window-safe-right)!important;
    bottom:var(--window-safe-bottom)!important;
    left:var(--window-safe-left)!important;
    width:auto!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    transform:none!important;
  }
  /* The dock remains visible outside of battle, so chat must reserve its row
     even in the compact landscape composition.  The keyboard case replaces
     that reserve below because the dock is intentionally hidden then. */
  body:not(.is-battling) .game-screen #chatPanel.chat-panel.chat-messenger.is-open:not(.is-minimized) {
    bottom:calc(70px + var(--window-safe-bottom))!important;
  }
  html[data-mobile-keyboard="open"] body:not(.is-battling) .game-screen #chatPanel.chat-panel.chat-messenger.is-open:not(.is-minimized) {
    bottom:calc(var(--pk-mobile-keyboard-inset,0px) + var(--window-safe-bottom))!important;
  }
  body:not(.is-battling) .game-screen #sidePanel.side-panel.is-open #sidePanelContent { height:100%!important; overflow:auto!important; }
}

@media (prefers-reduced-motion:reduce) {
  .game-screen :is(#sidePanel,#chatPanel,#editorPanel,.marketplace-shell,.inventory-item-dialog-v2738__content,.trade-dialog__content,.world-channel-confirm__card,.dialogue-card,.starter-experience) { transition:none!important; animation:none!important; }
}