/* Zaplat Gaming — Adaptive UI Core V5 / H13.3B
   Header, navigation and global shell adaptation.
   Presentation only: no routes, application logic, APIs, permissions, membership,
   OAuth, JaaS/media, Companion Bridge, database or workflow behavior lives here. */

:root{
  /* Page families use bounded canvases. Extra monitor space improves breathing room;
     it never turns controls or copy into oversized 4K UI. */
  --zg-shell-content-max:clamp(1240px,82vi,1480px);
  --zg-shell-header-max:1480px;
  --zg-shell-admin-max:1720px;
  --zg-header-wide-height:clamp(78px,calc(72px + .45vi),82px);
  --zg-header-mid-height:clamp(94px,calc(88px + .55vi),102px);
  --zg-header-nav-gap:clamp(3px,calc(1px + .24vi),6px);

  /* H13.1 consumers inherit the refined content canvas automatically. */
  --zg-adaptive-shell-max:var(--zg-shell-content-max);
}

html{scroll-padding-block-start:92px}

/* Immediate HTML first paint while deferred application modules are downloading. */
.zg-boot-shell{
  min-height:min(62vh,620px);
  display:grid;
  place-items:center;
  padding-block:clamp(40px,8vh,96px);
}
.zg-boot-card{
  width:min(420px,100%);
  min-height:230px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:11px;
  padding:28px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:linear-gradient(155deg,rgba(20,21,28,.96),rgba(9,10,14,.98));
  box-shadow:0 22px 60px rgba(0,0,0,.24);
  text-align:center;
}
.zg-boot-card>img{width:58px;height:58px;object-fit:contain}
.zg-boot-card>strong{font-size:16px;color:#f7f7fa}
.zg-boot-card>small{max-width:310px;color:#898e9b;font-size:10.5px;line-height:1.7}
.zg-boot-pulse{display:flex;align-items:center;gap:5px;height:13px}
.zg-boot-pulse>i{
  width:5px;height:5px;border-radius:50%;background:#ef233c;
  animation:zgBootPulse 1s ease-in-out infinite;
}
.zg-boot-pulse>i:nth-child(2){animation-delay:.12s}
.zg-boot-pulse>i:nth-child(3){animation-delay:.24s}
@keyframes zgBootPulse{50%{opacity:.28;transform:translateY(-2px)}}

/* One bounded shell policy for public content and the header. More specialized
   page widths (legal, draw, Lounge) keep their existing dedicated policies. */
.shell{
  box-sizing:border-box;
  width:min(var(--zg-shell-content-max),calc(100% - (var(--zg-fluid-page-gutter) * 2)));
  max-inline-size:100%;
}
.topbar-inner.shell{
  width:min(var(--zg-shell-header-max),calc(100% - (var(--zg-fluid-page-gutter) * 2)));
}

:where(
  .topbar-inner,.topbar-inner>.brand,.topbar-inner>.brand span,
  .topbar-inner>.nav,.topbar-inner>.member-utilities,.member-utility-buttons,
  .section-head,.section-head>*,.community-join,.community-join>*,
  .support-band-inner,.support-band-inner>*,.footer-inner,.footer-inner>*,
  .admin-online-header,.admin-header-primary,.admin-online-actions,
  .admin-app-frame,.admin-online-shell,.admin-page-head,.admin-page-head>*
){min-inline-size:0}

/* Sticky header remains above app surfaces and respects device safe areas. */
.topbar{
  inset-block-start:0;
  padding-block-start:env(safe-area-inset-top);
  isolation:isolate;
}
.topbar-inner{
  box-sizing:border-box;
  max-inline-size:100%;
}
.topbar-inner>.brand{max-inline-size:100%}
.topbar-inner>.brand span{overflow:hidden}
.topbar-inner>.brand strong,.topbar-inner>.brand small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.topbar-inner>.nav{
  max-inline-size:100%;
  overscroll-behavior-inline:contain;
  touch-action:pan-x pan-y pinch-zoom;
  scrollbar-width:thin;
  scrollbar-color:#3a3a44 transparent;
}
.topbar-inner>.nav>a,
.topbar-inner>.nav>.language-switcher{
  min-inline-size:max-content;
  flex:0 0 auto;
}
.member-utility-buttons{flex-wrap:nowrap}

:where(.topbar a,.topbar button,.topbar select):focus-visible{
  outline:2px solid #ff6074;
  outline-offset:2px;
}

/* Wide header: three stable columns. The center track is allowed to contract and
   becomes a local navigation lane before it can collide with brand/member controls. */
@media (min-width:1401px){
  html[lang] .topbar-inner{
    display:grid!important;
    grid-template-columns:minmax(190px,1fr) minmax(0,max-content) minmax(190px,1fr)!important;
    grid-template-areas:"brand nav member"!important;
    align-items:center!important;
    column-gap:clamp(10px,1vi,16px)!important;
    min-height:var(--zg-header-wide-height)!important;
    height:auto!important;
    padding-block:7px!important;
  }
  html[lang] .topbar-inner>.brand{
    grid-area:brand;
    justify-self:start;
    align-self:center;
    max-inline-size:225px;
  }
  html[lang] .topbar-inner>.nav{
    grid-area:nav;
    justify-self:stretch!important;
    justify-content:center!important;
    align-self:center;
    width:auto!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:var(--zg-header-nav-gap)!important;
    padding:2px 0!important;
  }
  html[lang] .topbar-inner>.nav a{
    min-block-size:44px;
    padding:8px clamp(7px,.55vi,10px)!important;
    font-size:clamp(12.5px,calc(7px + .4vi),13.5px)!important;
    line-height:1.15;
  }
  html[lang] .topbar-inner>.nav a small{
    margin-block-start:3px;
    font-size:clamp(9px,calc(5px + .28vi),10px)!important;
    line-height:1.2;
  }
  html[lang] .topbar-inner>.member-utilities{
    grid-area:member;
    justify-self:end!important;
    align-self:center!important;
    margin:0!important;
    transform:translateY(3px)!important;
  }
  html[lang] .language-switcher{min-block-size:44px;margin-inline-start:0}
}

/* Medium desktop/laptop/zoomed windows: brand and account stay in the first row;
   every navigation destination stays available in its own horizontal lane. */
@media (min-width:921px) and (max-width:1400px){
  .topbar{
    background:rgba(7,7,9,.985);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  html{scroll-padding-block-start:128px}
  html[lang] .topbar-inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand member" "nav nav"!important;
    align-items:center!important;
    min-height:var(--zg-header-mid-height)!important;
    height:auto!important;
    padding-block:5px!important;
    column-gap:12px!important;
    row-gap:4px!important;
  }
  html[lang] .topbar-inner>.brand{
    grid-area:brand;
    justify-self:start;
    align-self:center;
    max-inline-size:min(310px,48vi);
  }
  html[lang] .topbar-inner>.brand .brand-logo{inline-size:42px;block-size:42px}
  html[lang] .topbar-inner>.brand small{display:none}
  html[lang] .topbar-inner>.member-utilities{
    grid-area:member;
    justify-self:end!important;
    align-self:center!important;
    margin:0!important;
    transform:none!important;
  }
  html[lang] .topbar-inner>.nav{
    grid-area:nav;
    justify-self:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:var(--zg-header-nav-gap)!important;
    padding:2px 0 3px!important;
  }
  html[lang] .topbar-inner>.nav a{
    min-block-size:40px;
    padding:6px 8px!important;
    font-size:12px!important;
  }
  html[lang] .topbar-inner>.nav a small{font-size:9px!important;line-height:1.2}
  html[lang] .language-switcher{min-block-size:40px;margin-inline-start:0}
  html[lang] .member-utility-btn,
  html[lang] .member-profile-shortcut{block-size:40px}
}

/* The specialized signed-out foreign-language header already has a proven two-column
   layout. Keep it, but guarantee that its navigation is locally scroll-safe. */
@media (min-width:1181px){
  body.locale-ltr.zg-guest-header .topbar-inner>.nav{
    min-width:0!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
}

@media (min-width:1181px) and (max-width:1400px){
  body.locale-ltr.zg-guest-header .topbar-inner{
    min-height:var(--zg-header-wide-height)!important;
  }
}

/* Compact windows retain the same two-row information architecture. */
@media (max-width:920px){
  .topbar{
    background:rgba(7,7,9,.985);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  html{scroll-padding-block-start:118px}
  html[lang] .topbar-inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand member" "nav nav"!important;
    align-items:center!important;
    height:auto!important;
    min-height:0!important;
    padding-block:5px!important;
    column-gap:9px!important;
    row-gap:4px!important;
  }
  html[lang] .topbar-inner>.brand{grid-area:brand;justify-self:start;align-self:center}
  html[lang] .topbar-inner>.member-utilities{
    grid-area:member;
    justify-self:end!important;
    align-self:center!important;
    margin:0!important;
    transform:none!important;
  }
  html[lang] .topbar-inner>.nav{
    grid-area:nav;
    justify-self:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:4px!important;
    padding:2px 0 3px!important;
  }
  html[lang] .topbar-inner>.nav a{
    min-block-size:40px;
    padding:6px 8px!important;
    font-size:11.5px!important;
  }
  html[lang] .topbar-inner>.nav a small{font-size:8.5px!important;line-height:1.2}
  html[lang] .language-switcher{min-block-size:40px;margin-inline-start:0}
}

@media (max-width:620px){
  html{scroll-padding-block-start:112px}
  .topbar-inner.shell{width:calc(100% - (var(--zg-fluid-page-gutter) * 2))}
  html[lang] .topbar-inner>.brand{max-inline-size:min(220px,52vi)}
  html[lang] .topbar-inner>.nav a{padding-inline:7px!important;font-size:11px!important}
  html[lang] .language-switcher{padding-inline:6px}
  html[lang] .language-switcher select{min-width:78px}
}

@media (max-width:520px){
  html[lang] .topbar-inner{grid-template-columns:46px minmax(0,1fr)!important}
  html[lang] .topbar-inner>.brand{inline-size:44px;max-inline-size:44px}
  html[lang] .topbar-inner>.member-utilities{max-inline-size:100%}
}

/* Global shell rows wrap before content overlaps; no control is removed. */
.section-head,.community-join,.support-band-inner,.footer-inner{max-inline-size:100%}
.footer-inner{flex-wrap:wrap}
.footer-copy{min-inline-size:0;flex:1 1 300px}
.socials{max-inline-size:100%}

@media (max-width:1100px){
  .section-head,.community-join,.support-band-inner{flex-wrap:wrap}
  .section-head{align-items:flex-start}
}

@media (max-width:760px){
  .footer-inner{align-items:flex-start;flex-direction:column}
  .footer-copy{flex-basis:auto}
  .socials{width:100%}
}

/* Admin uses a wider bounded canvas, but it still follows the available grid column. */
body.admin-online-body{--zg-admin-shell-gutter:clamp(12px,1.5vi,24px)}
.admin-online-header{
  box-sizing:border-box;
  max-inline-size:100%;
  padding-inline:var(--zg-admin-shell-gutter);
  padding-left:max(var(--zg-admin-shell-gutter),env(safe-area-inset-left));
  padding-right:max(var(--zg-admin-shell-gutter),env(safe-area-inset-right));
}
.admin-online-actions{max-inline-size:100%;justify-content:flex-end}
.admin-app-frame>*{min-inline-size:0}
.admin-online-shell{
  box-sizing:border-box;
  width:min(var(--zg-shell-admin-max),calc(100% - (var(--zg-admin-shell-gutter) * 2)));
  max-inline-size:100%;
}
.admin-page-head{flex-wrap:wrap}
.admin-page-actions{max-inline-size:100%;flex-wrap:wrap}

@media (min-width:981px) and (max-width:1250px){
  .admin-page-head{align-items:flex-start}
  .admin-page-actions{width:100%}
}

@media (max-width:980px){
  body.admin-online-body{--zg-admin-shell-gutter:12px}
  .admin-online-shell{width:calc(100% - (var(--zg-admin-shell-gutter) * 2))}
}

@media (max-width:620px){
  body.admin-online-body{--zg-admin-shell-gutter:10px}
  .admin-online-header{column-gap:8px;row-gap:6px}
  .admin-online-actions{gap:5px}
  .admin-page-actions{width:100%}
  .admin-page-actions>.btn{flex:1 1 145px;min-inline-size:0}
}

/* Short windows compact whitespace without altering navigation or account actions. */
@media (min-width:701px) and (max-height:700px){
  html[lang] .topbar-inner{padding-block:5px!important}
  .admin-online-header{padding-block:8px}
  .admin-online-shell{padding-block-start:16px}
}

@media (prefers-reduced-motion:reduce){
  .topbar-inner>.nav{scroll-behavior:auto}
  .zg-boot-pulse>i{animation:none}
}

/* H13.3B.1 — Arena correction for Windows scaling and compact desktop windows.
   A 1366px display at 125% scaling exposes roughly 1090 CSS pixels, so the
   three-rail desktop shell must collapse well before the old 980px breakpoint. */
@media (max-width:1280px){
  .arena-v33-shell{
    grid-template-columns:minmax(170px,190px) minmax(0,1fr)!important;
  }
  .arena-v33-context{display:none!important}
  .arena-v33-live-drawer-btn{display:flex!important}
  .arena-v33-live-drawer-close{display:grid!important;place-items:center}
  .arena-v33.arena-v33-live-drawer-open .arena-v33-context{
    display:flex!important;
    position:absolute!important;
    z-index:160!important;
    inset-block:72px 12px!important;
    inset-inline-end:12px!important;
    width:min(350px,calc(100% - 24px))!important;
    border-color:var(--za-line-strong)!important;
    border-radius:20px!important;
    background:rgba(14,16,22,.99)!important;
    box-shadow:0 28px 80px rgba(0,0,0,.68)!important;
  }

  /* These translucent layers cover most of the viewport. Removing their live
     blur at constrained widths saves GPU work without changing any feature. */
  .arena-panel.arena-v33,
  .arena-v33 .arena-panel-head,
  .arena-v33-left,
  .arena-v33-context,
  .arena-v33.arena-v33-live-drawer-open .arena-v33-context{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
}

/* Compact desktop/tablet mode. The content receives the full canvas and every
   primary destination—including the private Lounge when eligible—stays reachable. */
@media (max-width:940px){
  .arena-panel.arena-v33{
    inset:0!important;
    width:auto!important;
    height:auto!important;
    border:0!important;
    border-radius:0!important;
    padding-top:env(safe-area-inset-top)!important;
    background:var(--za-bg)!important;
  }
  .arena-v33 .arena-panel-head{
    min-height:60px!important;
    padding:7px 9px!important;
  }
  .arena-v33-brand{gap:8px!important}
  .arena-v33-emblem{inline-size:34px!important;block-size:34px!important;flex-basis:34px!important}
  .arena-v33-brand-copy>small{font-size:7px!important}
  .arena-v33-brand-copy>strong{font-size:15px!important}
  .arena-v33-brand-copy>em{font-size:9px!important;max-inline-size:min(220px,34vi)!important}
  .arena-v33 .arena-head-controls{gap:5px!important}
  .arena-v33 .arena-close,
  .arena-v33 .arena-settings-btn,
  .arena-v33 .arena-search-btn,
  .arena-v33-live-drawer-btn{
    inline-size:36px!important;
    min-inline-size:36px!important;
    block-size:36px!important;
    border-radius:11px!important;
    padding:0!important;
  }
  .arena-v33-live-drawer-btn span{display:none!important}

  .arena-v33-shell{display:block!important;padding:0!important}
  .arena-v33-content{
    height:calc(100% - 60px - env(safe-area-inset-bottom))!important;
    border:0!important;
    border-radius:0!important;
    background:#0b0c11!important;
    padding-bottom:68px!important;
  }
  .arena-v33-left{
    position:absolute!important;
    inset-inline:0!important;
    inset-block-end:0!important;
    z-index:95!important;
    height:68px!important;
    min-height:68px!important;
    border:0!important;
    border-top:1px solid var(--za-line)!important;
    border-radius:0!important;
    background:rgba(14,16,22,.99)!important;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 68px!important;
    align-items:stretch!important;
    gap:4px!important;
  }
  .arena-v33-nav-title,
  .arena-v33-divider,
  .arena-v33-explore-label{display:none!important}

  .arena-v33 .arena-v33-primary-nav{
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-around!important;
    gap:3px!important;
  }
  .arena-v33 .arena-v33-primary-nav>button,
  .arena-v33 .arena-v33-rooms-group{
    flex:1 1 0!important;
    min-width:0!important;
  }
  .arena-v33 .arena-v33-rooms-group{
    display:block!important;
    margin:0!important;
    padding:0!important;
  }
  .arena-v33 .arena-v33-primary-nav>button,
  .arena-v33 .arena-v33-rooms-heading{
    min-height:54px!important;
    grid-template-columns:1fr!important;
    grid-template-rows:22px auto!important;
    place-items:center!important;
    gap:2px!important;
    padding:5px 4px!important;
    border-radius:12px!important;
    cursor:pointer!important;
    text-align:center!important;
  }
  .arena-v33 .arena-v33-primary-nav>button svg,
  .arena-v33 .arena-v33-rooms-heading svg{width:20px!important;height:20px!important}
  .arena-v33 .arena-v33-primary-nav>button span,
  .arena-v33 .arena-v33-rooms-heading span{display:block!important;min-width:0!important}
  .arena-v33 .arena-v33-primary-nav>button b,
  .arena-v33 .arena-v33-rooms-heading b{
    display:block!important;
    font-size:10px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .arena-v33 .arena-v33-primary-nav>button small,
  .arena-v33 .arena-v33-primary-nav>button>i,
  .arena-v33 .arena-v33-rooms-heading>i{display:none!important}

  .arena-v33 .arena-v33-room-list{
    display:none!important;
    position:absolute!important;
    inset-inline:8px!important;
    inset-block-end:70px!important;
    z-index:135!important;
    grid-template-columns:1fr 1fr!important;
    padding:8px!important;
    border:1px solid var(--za-line-strong)!important;
    border-radius:18px!important;
    background:rgba(20,22,30,.995)!important;
    box-shadow:0 -18px 55px rgba(0,0,0,.52)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  .arena-v33 .arena-v33-rooms-group.mobile-open .arena-v33-room-list{display:grid!important}

  .arena-v33-lounge-zone{
    display:block!important;
    margin:0!important;
    min-width:0!important;
  }
  .arena-v33-lounge-zone[hidden]{display:none!important}
  .arena-v33-secondary-nav{display:flex!important;height:100%!important}
  .arena-v33 .arena-v33-lounge-entry,
  .arena-v33 .arena-final-b-lounge-portal{
    width:64px!important;
    min-width:64px!important;
    min-height:54px!important;
    height:54px!important;
    margin:0!important;
    padding:4px!important;
    border-radius:12px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:1fr!important;
    place-items:center!important;
    gap:0!important;
    overflow:hidden!important;
  }
  .arena-v33 .arena-final-b-lounge-logo{
    width:34px!important;
    height:34px!important;
    border-radius:11px!important;
  }
  .arena-v33 .arena-final-b-lounge-main,
  .arena-v33 .arena-final-b-lounge-status{display:none!important}
  .arena-v33 .arena-v33-lounge-entry:not(.arena-final-b-lounge-portal)>span{display:none!important}
  .arena-v33 .arena-v33-lounge-entry:not(.arena-final-b-lounge-portal)>svg{
    width:21px!important;
    height:21px!important;
  }

  .arena-v33.arena-v33-live-drawer-open .arena-v33-context{
    inset:60px 0 68px!important;
    width:100%!important;
    border:0!important;
    border-radius:0!important;
    padding:12px!important;
    background:#0e1016!important;
  }
  .arena-v33-official-card,
  .arena-v33-member-live-section{max-width:560px!important;width:100%!important;margin-inline:auto!important}
  .arena-v33-member-live-list{grid-template-columns:1fr 1fr!important;gap:9px!important}
}

@media (max-width:520px){
  .arena-v33-brand-copy>em{display:none!important}
  .arena-v33-left{grid-template-columns:minmax(0,1fr) 58px!important;padding-inline:5px!important}
  .arena-v33 .arena-v33-lounge-entry,
  .arena-v33 .arena-final-b-lounge-portal{width:54px!important;min-width:54px!important}
  .arena-v33-member-live-list{grid-template-columns:1fr!important}
}