/* PUZRU Core24 / one navigation design contract.
   The same measurements, affordances and active/open states are used by
   the Senses navigation and Spectrum's legacy game header.
   Data loading, account/session state and game logic are intentionally untouched. */
:root{--pz24-header-line:rgba(211,229,244,.20);--pz24-header-bg:#1b2434;--pz24-header-active:#b8f4d7}
.nav,.app-header{height:calc(67px + env(safe-area-inset-top,0px));min-width:0;gap:7px;padding:env(safe-area-inset-top,0px) 12px 0;align-items:center}
.nav .switcher,.app-header .brand-trigger{
  display:flex;align-items:center;flex:0 1 224px;width:auto;min-width:0;max-width:224px;
  height:49px;min-height:49px;padding:5px 7px 5px 5px;gap:8px;
  border-radius:17px;border:1px solid var(--pz24-header-line);
  color:#f1f6fb;text-align:left;
  background:linear-gradient(137deg,rgba(41,51,73,.89),rgba(22,29,43,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 7px 21px rgba(0,0,0,.13);
  transition:border-color .16s,background .16s,box-shadow .16s;
}
.app-header #brand-box{display:flex;min-width:0;flex:0 1 224px;max-width:224px}
.app-header #brand-box .brand-trigger{width:100%;max-width:none;flex:1 1 auto}
.nav .switcher:hover,.app-header .brand-trigger:hover{border-color:rgba(213,234,254,.4);background:#252f44}
.nav .switcher[aria-expanded="true"],.app-header .brand-trigger[aria-expanded="true"]{
  border-color:rgba(169,246,217,.83);background:linear-gradient(145deg,#243e41,#222d40);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 0 0 2px rgba(146,246,204,.09)
}
.nav .switcher .mark,.app-header .brand-trigger .brand-mark-v4{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;
  display:grid;place-items:center;overflow:hidden;background:#111a29;
  border:1px solid rgba(218,234,252,.21);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)
}
.nav .switcher .mark svg{width:27px;height:27px}
.app-header .brand-trigger .brand-mark-v4 svg{width:29px;height:29px}
.nav .switcher .brand-name,.app-header .brand-trigger .brand-lockup{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-width:0;max-width:none;overflow:hidden;gap:2px}
.nav .switcher .brand-name small,.app-header .brand-trigger .brand-micro{
  color:#b1bfd5;font-size:8px;font-weight:850;letter-spacing:.095em;white-space:nowrap;line-height:1.15
}
.nav .switcher .brand-name strong,.app-header .brand-trigger .brand-lockup strong{
  color:#f5f7fc;font-size:17px;font-weight:820;letter-spacing:-.045em;line-height:1.11;
  display:block;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.nav .switcher .caret-box,.app-header .brand-trigger .brand-switch{
  display:grid!important;place-items:center!important;flex:0 0 26px!important;
  width:26px!important;height:28px!important;margin-left:0!important;
  border:1px solid rgba(222,236,250,.13)!important;border-radius:9px!important;
  background:rgba(207,221,247,.08)!important;color:#dae7f2!important;
  transition:background .16s,border-color .16s,transform .16s
}
.nav .switcher[aria-expanded="true"] .caret-box,.app-header .brand-trigger[aria-expanded="true"] .brand-switch{
  transform:rotate(180deg);background:rgba(156,242,208,.20)!important;
  border-color:rgba(170,246,212,.65)!important;color:#c4ffdf!important
}
.nav .switcher .caret-box svg,.app-header .brand-trigger .brand-switch svg{width:15px!important;height:15px!important}
.nav .nav-right,.app-header .header-actions{display:flex;align-items:center;flex:0 0 auto;min-width:0;gap:6px}
.nav .nav-right>.tiny-button,.nav .nav-right>.pz-account-button,.nav .nav-right>.pz-header-ranking,
.app-header .header-actions>.icon-button,.app-header .header-actions>.pz-account-button,.app-header .header-actions>.pz-header-ranking{
  box-sizing:border-box;display:grid;place-items:center;
  width:40px!important;min-width:40px!important;max-width:40px!important;flex:0 0 40px!important;
  height:40px!important;min-height:40px!important;padding:0!important;border-radius:12px!important;
  border:1px solid rgba(211,228,246,.21)!important;background:#202b3d!important;
  color:#e6f0fa!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important
}
.nav .nav-right>.pz-header-ranking,.app-header .header-actions>.pz-header-ranking{color:#f5d9a3!important;background:#202d36!important;border-color:rgba(247,211,141,.33)!important}
.nav .nav-right>.pz-account-button,.app-header .header-actions>.pz-account-button{color:#b9f4d7!important;border-color:rgba(167,242,213,.38)!important}
.nav .nav-right>.tiny-button svg,.app-header .header-actions>.icon-button svg{width:21px;height:21px}
.nav .nav-right>.pz-header-ranking svg,.app-header .header-actions>.pz-header-ranking svg{width:21px;height:21px}
.nav .nav-right>*:hover,.app-header .header-actions>*:hover{filter:brightness(1.14)}
.nav .drop,.app-header .brand-menu{border:1px solid rgba(220,237,249,.26);box-shadow:0 22px 65px rgba(0,0,0,.72)}
/* Keep the dropdown affordance even on 320px phones. Text gives way before the chevron. */
@media(max-width:480px){
 .nav,.app-header{gap:6px;padding-inline:10px}
 .nav .switcher,.app-header #brand-box{flex:1 1 auto;max-width:none}
 .nav .switcher,.app-header .brand-trigger{gap:6px;padding:5px 6px 5px 5px}
 .nav .switcher .brand-name strong,.app-header .brand-trigger .brand-lockup strong{font-size:16px}
}
@media(max-width:375px){
 .nav,.app-header{gap:4px;padding-inline:8px}
 .nav .nav-right,.app-header .header-actions{gap:4px}
 .nav .nav-right>.tiny-button,.nav .nav-right>.pz-account-button,.nav .nav-right>.pz-header-ranking,
 .app-header .header-actions>.icon-button,.app-header .header-actions>.pz-account-button,.app-header .header-actions>.pz-header-ranking{
  width:35px!important;min-width:35px!important;max-width:35px!important;flex:0 0 35px!important;height:38px!important;min-height:38px!important;border-radius:11px!important
 }
 .nav .switcher .mark,.app-header .brand-trigger .brand-mark-v4{width:34px;height:34px;flex-basis:34px}
 .nav .switcher .brand-name strong,.app-header .brand-trigger .brand-lockup strong{font-size:14px}
 .nav .switcher .brand-name small,.app-header .brand-trigger .brand-micro{font-size:7px;letter-spacing:.03em}
 .nav .switcher .caret-box,.app-header .brand-trigger .brand-switch{width:23px!important;height:26px!important;flex-basis:23px!important}
}
@media(max-width:335px){
 .nav,.app-header{padding-inline:6px;gap:3px}
 .nav .nav-right,.app-header .header-actions{gap:3px}
 .nav .nav-right>.tiny-button,.nav .nav-right>.pz-account-button,.nav .nav-right>.pz-header-ranking,
 .app-header .header-actions>.icon-button,.app-header .header-actions>.pz-account-button,.app-header .header-actions>.pz-header-ranking{
  width:33px!important;min-width:33px!important;max-width:33px!important;flex:0 0 33px!important;height:36px!important;min-height:36px!important
 }
 .nav .switcher .mark,.app-header .brand-trigger .brand-mark-v4{width:30px;height:30px;flex-basis:30px}
 .nav .switcher .brand-name strong,.app-header .brand-trigger .brand-lockup strong{font-size:13px}
}
@media(max-height:520px) and (orientation:landscape){.nav,.app-header{height:calc(51px + env(safe-area-inset-top,0px))}.nav .switcher,.app-header .brand-trigger{height:43px;min-height:43px}.nav .switcher .mark,.app-header .brand-trigger .brand-mark-v4{width:31px;height:31px;flex-basis:31px}}
@media(prefers-reduced-motion:reduce){.nav .switcher,.app-header .brand-trigger,.nav .switcher .caret-box,.app-header .brand-trigger .brand-switch{transition:none}}

/* One replaceable mark for Logic. Approved art can replace this file without editing JS. */
.pz24-logic-mark{display:block;width:27px;height:27px;object-fit:contain;flex:0 0 27px}
.nav .drop .pz24-logic-mark,.app-header .brand-menu .pz24-logic-mark{width:26px;height:26px}
/* One menu surface and row cadence across Games, Arena and each game. */
.nav .drop,.app-header .brand-menu{
  top:calc(64px + env(safe-area-inset-top,0px));left:10px;
  width:min(330px,calc(100vw - 20px));max-width:calc(100vw - 20px);
  padding:9px;border-radius:19px;background:linear-gradient(165deg,#222d40,#151d2b 80%);
  border:1px solid rgba(207,231,252,.3);
  box-shadow:0 24px 70px rgba(0,0,0,.69),inset 0 1px 0 rgba(255,255,255,.07)
}
.nav .drop-label,.app-header .menu-topline{
  color:#a1b4c9;font-size:10px;font-weight:800;letter-spacing:.14em;
  height:31px;padding:10px 11px 7px;display:flex;align-items:center
}
.app-header .menu-count{margin-left:auto;color:#71829b}
.nav .drop a,.app-header .brand-menu .menu-option{
  display:flex;align-items:center;min-height:52px;padding:9px 10px;gap:11px;
  border-radius:11px;background:transparent;text-align:left
}
.nav .drop a:hover,.nav .drop a.selected,.app-header .brand-menu .menu-option:hover,.app-header .brand-menu .menu-option.is-current{background:rgba(156,185,217,.13)}
.nav .drop a .mark,.app-header .brand-menu .menu-icon{
  height:34px;width:34px;flex:0 0 34px;display:grid;place-items:center;
  border-radius:10px;border:1px solid rgba(216,231,250,.13);background:#263349
}
.nav .drop a b,.app-header .brand-menu .menu-copy strong{font-size:13px;font-weight:780;line-height:1.1;color:#edf3fb}
.nav .drop a small,.app-header .brand-menu .menu-copy small{font-size:10px;color:#a7b8cc;line-height:1.3;margin-top:3px}
.nav .drop a .check,.app-header .brand-menu .menu-selected{margin-left:auto;color:#baf4da}
.app-header .brand-menu .menu-option .menu-open{margin-left:auto;color:#bcd4e8}
@media(max-height:520px) and (orientation:landscape){.nav .drop,.app-header .brand-menu{top:calc(49px + env(safe-area-inset-top,0px));max-height:calc(100dvh - 53px);overflow-y:auto}}