/* Zaplat Gaming — Adaptive UI Core V5 / H13.4
   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);
  --zg-topbar-height:86px;
  --zg-viewport-height:100vh;

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

html{scroll-padding-block-start:calc(var(--zg-topbar-height) + 12px);max-inline-size:100%;overflow-x:clip}
body{max-inline-size:100%;overflow-x:clip}

/* 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:3px!important;row-gap:2px!important}
  html[lang] .topbar-inner>.brand .brand-logo{inline-size:36px;block-size:36px}
  html[lang] .topbar-inner>.nav a{min-block-size:34px!important;padding-block:4px!important}
  html[lang] .language-switcher{min-block-size:34px!important}
  .admin-online-header{padding-block:8px}
  .admin-online-shell{padding-block-start:16px}
}

/* The open Arena panel follows the measured header, including browser zoom and
   translated two-row layouts. Only the retired full-height dock needs that top
   offset; the modern compact launcher must remain anchored to the bottom. */
@media (min-width:941px){
  .arena-dock:not(.arena-v33-dock){top:calc(var(--zg-topbar-height) + 8px)!important}
  .arena-v33-dock{top:auto!important}
  .arena-panel.arena-v33{
    inset-block-start:calc(var(--zg-topbar-height) + 8px)!important;
    inset-block-end:12px!important;
    height:auto!important;
  }
}
.arena-dock-button.loading{cursor:wait!important;opacity:.82}
.arena-dock-button.loading::after{
  content:"";position:absolute;inset-block-start:16px;inset-inline-end:14px;
  inline-size:16px;block-size:16px;border:2px solid rgba(255,255,255,.18);
  border-top-color:#ff6074;border-radius:50%;animation:zgFeatureSpin .7s linear infinite;
}
@keyframes zgFeatureSpin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .topbar-inner>.nav{scroll-behavior:auto}
  .zg-boot-pulse>i{animation:none}
  .arena-dock-button.loading::after{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;
  }
}

/* A wide but shallow laptop is height-constrained, not width-constrained. Keep
   the feed generous and move the optional live rail into its drawer. */
@media (min-width:941px) and (max-height:820px){
  .arena-v33-shell{grid-template-columns:minmax(168px,188px) 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:64px 10px!important;inset-inline-end:10px!important;
    width:min(350px,calc(100% - 20px))!important;border-radius:18px!important;
    background:rgba(14,16,22,.995)!important;box-shadow:0 24px 70px rgba(0,0,0,.68)!important;
  }
  .arena-v33 .arena-panel-head{min-height:62px!important;padding-block:7px!important}
  .arena-v33-shell{padding:9px!important;gap:9px!important}
  .arena-v33-left,.arena-v33-context,.arena-panel.arena-v33{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* At extremely low usable heights the Arena becomes an app-like full-screen
   surface, preserving every control instead of compressing it under the header. */
@media (min-width:941px) and (max-height:680px){
  body.zg-arena-open{overflow:hidden!important}
  .arena-dock.panel-open{top:0!important;bottom:0!important;z-index:1000!important}
  .arena-panel.arena-v33{
    inset:0!important;width:auto!important;height:auto!important;
    border:0!important;border-radius:0!important;background:var(--za-bg)!important;
  }
  .arena-v33 .arena-panel-head{min-height:58px!important;padding:6px 9px!important}
  /* The panel is already a column flex container. Let the shell consume the
     remaining height instead of subtracting the header a second time. */
  .arena-v33-shell{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    padding:7px!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){
  body.zg-arena-open{overflow:hidden!important}
  .arena-dock.panel-open{z-index:1000!important}
  .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}

  /* The shell already occupies the area below the header. It becomes the
     positioning context for the mobile dock, so content loses only the dock's
     68px once—not the header and dock twice. */
  .arena-v33-shell{
    position:relative!important;
    display:block!important;
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
  }
  .arena-v33-content{
    box-sizing:border-box!important;
    height:100%!important;
    border:0!important;
    border-radius:0!important;
    background:#0b0c11!important;
    padding-bottom:calc(68px + env(safe-area-inset-bottom))!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:0 0 calc(68px + env(safe-area-inset-bottom))!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}
}

/* H13.6 — the signed-in identity paints immediately while the single profile
   request and enhancement bundle complete independently in the background. */
.profile-instant-page{display:grid;gap:14px;min-height:min(62vh,680px);align-content:start}
.profile-instant-identity{
  display:flex;align-items:center;gap:16px;padding:clamp(18px,2.4vw,28px);
  border:1px solid rgba(239,35,60,.24);border-radius:22px;
  background:linear-gradient(135deg,rgba(24,13,18,.96),rgba(11,12,17,.98));
}
.profile-instant-avatar{
  inline-size:64px;block-size:64px;flex:0 0 64px;display:grid;place-items:center;
  overflow:hidden;border-radius:20px;border:1px solid rgba(255,77,100,.42);
  background:linear-gradient(145deg,#291019,#11131a);box-shadow:0 0 28px rgba(239,35,60,.16);
  color:#fff;font:900 18px/1 Inter,system-ui,sans-serif;
}
.profile-instant-avatar img{inline-size:100%;block-size:100%;object-fit:cover}
.profile-instant-identity small{display:block;color:#ff5a70;font:800 10px/1.3 Inter,system-ui,sans-serif;letter-spacing:.17em}
.profile-instant-identity h1{margin:5px 0 3px;color:#fff;font-size:clamp(22px,3vw,34px);line-height:1.15}
.profile-instant-identity span{color:#9398a6;font:700 12px/1.4 Inter,system-ui,sans-serif;direction:ltr;unicode-bidi:isolate}
.profile-instant-status,.profile-load-failure{
  display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid rgba(255,255,255,.08);
  border-radius:18px;background:rgba(14,15,21,.94);
}
.profile-instant-status b,.profile-instant-status small{display:block}
.profile-instant-status b{color:#f5f5f8;font-size:14px}
.profile-instant-status small{margin-top:4px;color:#898e9b;font-size:11px;line-height:1.6}
.profile-instant-spinner{
  inline-size:22px;block-size:22px;flex:0 0 22px;border:2px solid rgba(255,255,255,.12);
  border-block-start-color:#ef233c;border-radius:50%;animation:zgProfileInstantSpin .72s linear infinite;
}
@keyframes zgProfileInstantSpin{to{transform:rotate(1turn)}}
.profile-instant-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.profile-instant-grid i{
  display:block;min-height:92px;border:1px solid rgba(255,255,255,.055);border-radius:17px;
  background:linear-gradient(105deg,rgba(255,255,255,.025) 20%,rgba(255,255,255,.065) 36%,rgba(255,255,255,.025) 52%);
  background-size:220% 100%;animation:zgProfileSkeleton 1.25s ease-in-out infinite;
}
.profile-instant-grid i:nth-child(2){animation-delay:.08s}.profile-instant-grid i:nth-child(3){animation-delay:.16s}.profile-instant-grid i:nth-child(4){animation-delay:.24s}
@keyframes zgProfileSkeleton{to{background-position:-220% 0}}
.profile-load-failure{border-color:rgba(255,75,99,.28);background:linear-gradient(135deg,rgba(42,13,20,.92),rgba(13,14,19,.97))}
.profile-load-failure>span{inline-size:38px;block-size:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:13px;background:rgba(239,35,60,.14);color:#ff6074;font:900 20px/1 Inter,system-ui,sans-serif}
.profile-load-failure>div{min-inline-size:0;flex:1}.profile-load-failure h2{margin:0 0 5px;color:#fff;font-size:17px}.profile-load-failure p{margin:0;color:#ffafba;font-size:12px;line-height:1.6}.profile-load-failure small{display:block;margin-top:5px;color:#8d929f;font-size:10.5px;line-height:1.55}.profile-load-failure .btn{flex:0 0 auto}
@media (max-width:720px){
  .profile-instant-page{gap:10px}.profile-instant-identity{padding:16px;border-radius:18px}.profile-instant-avatar{inline-size:54px;block-size:54px;flex-basis:54px;border-radius:17px}
  .profile-instant-grid{grid-template-columns:1fr 1fr;gap:9px}.profile-instant-grid i{min-height:76px;border-radius:14px}
  .profile-load-failure{align-items:flex-start;flex-wrap:wrap}.profile-load-failure .btn{inline-size:100%}
}
@media (prefers-reduced-motion:reduce){.profile-instant-spinner,.profile-instant-grid i{animation:none}}