/* Zaplat Gaming — Adaptive UI Core V2 / H13.1
   Presentation-only compatibility layer for application surfaces.
   No application logic, API, permissions, membership, OAuth, JaaS/media,
   Companion Bridge, database, or workflow behavior is defined here. */

:root{
  --zg-adaptive-edge:clamp(10px,1.35vw,20px);
  --zg-adaptive-control-gap:clamp(6px,.75vw,10px);
  --zg-adaptive-panel-radius:clamp(14px,1.25vw,22px);
}

/* App surfaces must be allowed to shrink inside resizable browser/desktop windows. */
:where(
  #app,.shell,.topbar-inner,.nav,.member-utilities,.member-utility-buttons,
  .community-overlay,.hero,.hero-copy-block,.hero-actions,.section,.section-head,
  .support-band-inner,.support-hero,.giveaway-current,.current-tournament,
  .profile-page,.profile-hero,.profile-main,.profile-hero-side,.profile-grid,
  .profile-v31-identity,.profile-v31-panel-trigger,.zg-player-hub,.zg-player-hub-toggle,
  .zg-pgs,.zg-pgs-head,.zg-pgs-dashboard,.zg-pgs-two-col,.zg-pgs-game-body,
  .zg-game-library-page,.zg-game-detail-page,.zg-lib-shell,.zg-lib-hero,.zg-lib-controls,
  .zg-lib-filter-row,.zg-lib-results-head,.zg-lib-grid,.zg-game-detail-shell,
  .zg-game-hero-card,.zg-game-hero-copy,.zg-game-detail-grid,.zg-game-hub,
  .zg-hub-head,.zg-hub-stats,.zg-hub-passport,.zg-hub-passport-body,
  .message-dock,.member-center-popover,.social-inbox,.social-inbox-layout,
  .social-inbox-main,.social-inbox-sidebar,.social-inbox-conversation,
  .social-notification-center,.notification-center-toolbar,
  .arena-v33,.arena-v33-shell,.arena-v33-left,.arena-v33-context,.arena-v33-content,
  .arena-v33 .arena-panel-head,.arena-public-profile-modal,.arena-public-profile-scroll,
  .admin-online-header,.admin-online-actions,.admin-app-frame,.admin-control-sidebar,
  .admin-online-shell,.admin-page-head,.admin-page-actions,.admin-filter-bar,
  .admin-members-layout,.admin-member-list,.admin-member-detail,.admin-inbox-layout,
  .admin-inbox-list,.admin-inbox-conversation
){min-width:0}

:where(
  .hero-copy-block,.community-overlay>*,.section-head>*,.support-band-inner>*,
  .giveaway-current>*,.current-tournament>*,.profile-hero>*,.profile-grid>*,
  .profile-v31-panel-trigger>*,.zg-player-hub-toggle>*,.zg-pgs-head>*,
  .zg-pgs-dashboard>*,.zg-pgs-two-col>*,.zg-lib-hero>*,.zg-lib-results-head>*,
  .zg-game-hero-card>*,.zg-game-detail-grid>*,.zg-hub-head>*,.zg-hub-passport>*,
  .social-inbox-layout>*,.arena-v33-shell>*,.admin-page-head>*,.admin-members-layout>*
){min-width:0}

/* Long translated labels/usernames must wrap inside their own control/card, not widen the page. */
:where(
  .nav a,.language-switcher,.btn,.profile-meta span,.profile-v31-panel-copy,
  .zg-player-hub-copy,.zg-pgs-head,.zg-pgs-block-head,.zg-lib-results-head,
  .zg-game-section-title,.zg-hub-head,.social-thread-copy,.notification-center-toolbar,
  .admin-page-head,.admin-page-actions,.admin-nav-btn,.admin-control-card
){overflow-wrap:anywhere}

/* The main visual canvas follows the same width policy as H13 Phase 1. */
.community-overlay{
  width:min(var(--zg-adaptive-shell-max),calc(100% - var(--zg-adaptive-gutter) - var(--zg-adaptive-gutter)));
}

/* Header: keep all controls reachable in the awkward laptop / split-window range.
   We do not remove or rename navigation; the lane becomes horizontally scrollable only when needed. */
@media (min-width:921px) and (max-width:1180px){
  .topbar-inner>.nav{
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    scrollbar-color:#383842 transparent;
    padding-block:3px;
  }
  .topbar-inner>.nav>a,
  .topbar-inner>.nav>.language-switcher{flex:0 0 auto}
}

@media (max-width:920px){
  .topbar-inner>.nav{
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .topbar-inner>.nav>a,
  .topbar-inner>.nav>.language-switcher{flex:0 0 auto}
}

/* Public/home surfaces: prevent image/copy lanes from forcing overflow while preserving the existing design. */
:where(
  .home-hero-copy,.hero-side-card,.community-overlay p,.support-hero p,
  .giveaway-current-copy,.current-tournament-copy,.media-modal,.public-modal,
  .youtube-consent-modal,.account-card,.login-box
){max-width:100%}

:where(.media-modal-frame,.media-modal-layout,.media-playlist-panel,.playlist-episode-list)>*{min-width:0}

/* Profile: preserve the current visual hierarchy, but allow every hero/panel lane to contract. */
.profile-experience-v31 .profile-main{max-width:100%}
.profile-experience-v31 .profile-rank-spotlight{max-width:100%}
.profile-page .profile-hero-side{max-width:min(390px,100%)}
.profile-v31-panel-copy,.zg-player-hub-copy,.zg-pgs-game-body{min-width:0}
.profile-v31-panel-copy b,.profile-v31-panel-copy small,
.zg-player-hub-copy strong,.zg-player-hub-copy>span{max-width:100%}

/* Games: sticky controls and modal/detail surfaces stay inside the actual app window. */
.zg-lib-controls{max-width:100%}
.zg-game-tabs{max-width:100%;overscroll-behavior-inline:contain}
.zg-game-modal,.zg-experience-dialog{max-width:calc(100vw - (var(--zg-adaptive-edge) * 2))}
.zg-game-modal-scroll,.zg-experience-scroll{min-width:0}

/* Social/private messaging: use dynamic viewport height so a short desktop window still exposes controls. */
.message-dock .social-inbox{
  max-width:calc(100vw - (var(--zg-adaptive-edge) * 2));
  height:min(690px,calc(100dvh - 96px));
}
.member-center-popover{
  max-width:calc(100vw - (var(--zg-adaptive-edge) * 2));
  max-height:min(680px,calc(100dvh - 96px));
}
#notificationsCenter.notification-portal .member-center-body{
  max-height:min(430px,calc(100dvh - 245px))!important;
}

/* Arena viewport safety only. The Arena/JaaS/Lounge behavior and internal feature logic are untouched. */
.arena-panel.arena-v33{
  max-width:calc(100vw - 36px)!important;
  max-height:calc(100dvh - 102px)!important;
}
.arena-v33 .arena-panel-head>*{min-width:0}
.arena-v33-brand-copy{max-width:100%}
.arena-public-profile-modal{
  max-width:calc(100vw - (var(--zg-adaptive-edge) * 2));
  max-height:calc(100dvh - (var(--zg-adaptive-edge) * 2));
}

/* Admin: protect dense operational surfaces in resizable windows without changing any action or permission. */
body.admin-online-body{overflow-x:clip}
.admin-online-header{max-width:100%}
.admin-online-actions{min-width:0}
.admin-online-shell{max-width:100%}
.admin-page-actions{min-width:0;flex-wrap:wrap}
.admin-filter-bar>*{min-width:0}
.admin-member-row-copy,.admin-inbox-person,.admin-inbox-thread{min-width:0}

/* Medium desktop/tablet window: compact only spacing/layout, never controls. */
@media (max-width:1100px){
  .profile-experience-v31 .profile-main{min-width:0}
  .profile-page .profile-hero-side{min-width:min(330px,100%)}
  .zg-lib-results-head{align-items:flex-start;flex-wrap:wrap}
  .zg-hub-head>*{min-width:0}
  .admin-online-actions{justify-content:flex-end}
}

/* Narrow app window / phone. Existing feature styles decide the design; these are safety fallbacks. */
@media (max-width:760px){
  .community-overlay{
    gap:14px;
    padding-block:clamp(24px,7vh,42px);
    flex-wrap:wrap;
  }
  .community-overlay>div{min-width:0;flex:1 1 260px}
  .hero-logo{width:clamp(76px,22vw,104px);height:clamp(76px,22vw,104px)}

  .profile-page .profile-hero-side{min-width:100%;max-width:none}
  .profile-v31-panel-trigger,.zg-player-hub-toggle{max-width:100%}
  .zg-pgs-head{gap:10px;flex-wrap:wrap}

  .zg-lib-results-head>div{min-width:0;flex-wrap:wrap}
  .zg-game-modal,.zg-experience-dialog{max-width:100vw}

  .message-dock .social-inbox{
    height:calc(100dvh - 82px)!important;
    max-height:none!important;
  }
  .member-center-popover{max-width:calc(100vw - 14px);max-height:calc(100dvh - 84px)}

  .arena-panel.arena-v33{
    max-width:100vw!important;
    max-height:100dvh!important;
  }
  .arena-v33-brand-copy>em{max-width:min(58vw,420px)}

  .admin-online-header{gap:9px}
  .admin-online-actions{max-width:100%}
  .admin-page-actions{width:100%}
}

@media (max-width:520px){
  .community-overlay{align-items:flex-start}
  .community-overlay .hero-actions{width:100%}
  .community-overlay .hero-actions .btn{flex:1 1 145px}

  .profile-v31-editor-actions{flex-wrap:wrap}
  .profile-v31-editor-actions .btn{flex:1 1 130px}
  .profile-v31-panel-copy small,.zg-player-hub-copy>span{overflow-wrap:anywhere}

  .zg-lib-results-head{gap:6px}
  .zg-lib-results-head>div{width:100%}

  .notification-center-toolbar{align-items:flex-start;flex-wrap:wrap}
  .notification-center-toolbar>div{max-width:100%;overflow-x:auto}

  .admin-online-actions{gap:5px}
  .admin-page-actions .btn{flex:1 1 145px}
}

/* Very short desktop/app windows: reduce decorative vertical space instead of hiding features. */
@media (min-width:701px) and (max-height:720px){
  .community-hero{min-height:clamp(330px,58dvh,430px)}
  .community-overlay{padding-block:24px}
  .profile-page,.zg-lib-shell{padding-top:18px}
  .message-dock .social-inbox{height:calc(100dvh - 74px)}
  .member-center-popover{max-height:calc(100dvh - 74px)}
  .arena-panel.arena-v33{inset-block:74px 10px!important;max-height:calc(100dvh - 84px)!important}
  .admin-online-shell{padding-top:16px;padding-bottom:40px}
}

/* Large/ultrawide monitors: do not scale controls to comical sizes; use the extra canvas cleanly. */
@media (min-width:1600px){
  .profile-page,.zg-lib-shell,.zg-game-detail-shell{min-width:0}
  .profile-grid,.zg-game-detail-grid{column-gap:clamp(14px,1.15vw,20px)}
  .admin-online-shell{column-gap:clamp(12px,1vw,18px)}
}

@media (prefers-reduced-motion:reduce){
  .topbar-inner>.nav{scroll-behavior:auto}
}