/* Zaplat Gaming — Adaptive UI Core V4 / H13.3A
   Fluid foundation and content-driven header safety.
   Presentation only: this layer does not change application logic, routes, APIs,
   permissions, membership, OAuth, JaaS/media, Companion Bridge or workflows. */

:root{
  /* Shared fluid tokens. The limits are intentional: screens gain breathing room,
     controls never scale without a ceiling, and compact windows keep usable targets. */
  --zg-fluid-page-gutter:clamp(12px,calc(5px + 1.35vi),28px);
  --zg-fluid-section-space:clamp(20px,calc(16px + .7vi),32px);
  --zg-fluid-card-gap:clamp(10px,calc(7px + .45vi),14px);
  --zg-fluid-control-gap:clamp(6px,calc(4px + .35vi),10px);
  --zg-fluid-panel-padding:clamp(16px,calc(11px + .7vi),22px);
  --zg-fluid-control-height:clamp(40px,calc(37px + .3vi),46px);
  --zg-fluid-panel-radius:clamp(14px,calc(10px + .7vi),22px);
  --zg-fluid-overlay-gap:clamp(8px,calc(5px + .55vi),20px);
  --zg-fluid-readable-copy:72ch;

  /* Feed the existing H13 layers from one policy without rewriting them. */
  --zg-adaptive-gutter:var(--zg-fluid-page-gutter);
  --zg-adaptive-edge:clamp(10px,calc(6px + .65vi),20px);
  --zg-adaptive-control-gap:var(--zg-fluid-control-gap);
  --zg-adaptive-panel-radius:var(--zg-fluid-panel-radius);
  --zg-adaptive-modal-gap:var(--zg-fluid-overlay-gap);
  --zg-adaptive-overlay-gap:var(--zg-fluid-overlay-gap);
}

/* Logical-size safety keeps the same rules valid in RTL and LTR. Deliberately do
   not hide page overflow here: a future regression must remain detectable in QA. */
html,body,#app,#adminRoot{min-inline-size:280px;max-inline-size:100%}

:where(
  .shell,.topbar-inner,.nav,.member-utilities,.member-utility-buttons,
  .hero,.hero-copy-block,.hero-actions,.hero-stats,.section,.section-head,
  .grid,.cards-2,.cards-3,.cards-4,.feature-row,.giveaway-layout,
  .form-grid,.prize-grid,.completed-grid,.milestone-grid,.episode-row,
  .profile-page,.profile-main,.profile-grid,.zg-lib-shell,.zg-lib-grid,
  .zg-game-detail-shell,.zg-game-detail-grid,.arena-v33-shell,
  .admin-app-frame,.admin-online-shell,.admin-main,.admin-page-head,
  .admin-page-actions,.admin-members-layout,.admin-member-detail
){min-inline-size:0}

:where(
  img,video,canvas,svg,iframe,input,select,textarea,button,
  .panel,.glass,.card,.modal-card,.member-center-popover
){max-inline-size:100%}

/* Base rhythm becomes gradual between breakpoints instead of jumping by device
   labels. Feature-specific spacing remains free to override these primitives. */
.section{padding-block:var(--zg-fluid-section-space)}
.grid{gap:var(--zg-fluid-card-gap)}
.panel{padding:var(--zg-fluid-panel-padding);border-radius:var(--zg-fluid-panel-radius)}
.hero-actions,.actions,.admin-page-actions{gap:var(--zg-fluid-control-gap)}

:where(.btn,.field input,.field select,.control){min-block-size:var(--zg-fluid-control-height)}
textarea{max-inline-size:100%}

:where(
  .hero-copy-block p,.community-overlay p,.support-hero p,
  .legal-card p,.profile-bio,.zg-game-hero-copy p
){max-inline-size:min(100%,var(--zg-fluid-readable-copy))}

:where(
  .section-head h1,.section-head h2,.section-head h3,
  .admin-page-head h1,.admin-page-head h2,.profile-main h1,
  .zg-game-hero-copy h1,.zg-game-hero-copy h2
){overflow-wrap:anywhere;text-wrap:balance}

/* Header is a component, so it responds to its own available width. This matters
   in browser zoom, split screen and the future desktop shell, where device labels
   and physical inches do not describe the real space. */
.topbar{container-type:inline-size;container-name:zg-topbar}
.topbar-inner{column-gap:clamp(8px,1vi,16px)}
.topbar-inner>.brand,.topbar-inner>.brand span,
.topbar-inner>.nav,.topbar-inner>.member-utilities{min-inline-size:0}
.topbar-inner>.brand span{max-inline-size:100%}
.topbar-inner>.nav{
  scroll-padding-inline:var(--zg-fluid-page-gutter);
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.topbar-inner>.nav>a,.topbar-inner>.nav>.language-switcher{flex:0 0 auto}

/* Content-driven congestion mode. No navigation or account action is removed;
   navigation gets its own local scroll lane before it can collide with controls. */
@media (min-width:921px) and (max-width:1400px){
  html[lang] .topbar-inner{
    min-height:0!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand member" "nav nav"!important;
    row-gap:clamp(5px,.65vi,8px)!important;
  }
  html[lang] .topbar-inner>.nav{
    width:100%!important;
    min-width:0!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
}

@media (max-width:920px){
  .topbar-inner>.nav{
    width:100%;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  .topbar-inner>.brand small{display:none}
  .hero-actions,.actions,.admin-page-actions{flex-wrap:wrap}
}

/* At very narrow component widths only decorative brand copy collapses. The logo,
   navigation, language picker, notification button and profile action all remain. */
@container zg-topbar (max-width:520px){
  .topbar-inner>.brand span{display:none}
  .topbar-inner>.brand{inline-size:clamp(40px,10cqi,46px)}
  .topbar-inner>.brand .brand-logo{
    inline-size:clamp(40px,10cqi,44px);
    block-size:clamp(40px,10cqi,44px);
  }
  .member-utility-buttons{gap:4px}
}

/* Fallback for engines without container queries. */
@supports not (container-type:inline-size){
  @media (max-width:520px){
    .topbar-inner>.brand span{display:none}
    .topbar-inner>.brand{inline-size:44px}
  }
}

/* Short desktop/app windows gain density by reducing decorative whitespace. */
@media (min-width:701px) and (max-height:760px){
  :root{--zg-fluid-section-space:clamp(16px,3.2dvh,23px)}
  .hero{padding-block:clamp(22px,5dvh,38px)}
  .admin-online-shell{padding-block-start:clamp(12px,3dvh,18px)}
}

@media (max-width:620px){
  :root{
    --zg-fluid-page-gutter:10px;
    --zg-fluid-panel-padding:clamp(14px,calc(12px + .65vi),18px);
    --zg-fluid-overlay-gap:7px;
  }
  .shell,.community-overlay,.legal-shell,.admin-online-shell{
    width:calc(100% - var(--zg-fluid-page-gutter) - var(--zg-fluid-page-gutter));
  }
  :where(.hero-actions,.actions,.admin-page-actions)>.btn{
    min-inline-size:0;
  }
}

@media (max-width:390px){
  :root{--zg-fluid-page-gutter:8px;--zg-fluid-control-gap:6px}
}

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