/*
 * Header and navigation hierarchy
 *
 * Loaded after the existing responsive and cohesion layers. This pass keeps all
 * routes and controls available, while giving the brand, player identity and
 * utilities distinct levels of emphasis.
 */

:root {
  --header-control-size: 42px;
  --header-control-radius: 10px;
}

/* Shared utility controls are quiet until interaction. */
.top .actions > .console-launch-button,
.top .actions > .theme-toggle,
.top .actions > #activityButton,
.top .actions > .account-menu-trigger {
  min-height: var(--header-control-size) !important;
  border-radius: var(--header-control-radius) !important;
  box-shadow: none !important;
}

.top .actions > .console-launch-button,
.top .actions > .theme-toggle,
.top .actions > #activityButton {
  color: var(--st-text-soft) !important;
  background: color-mix(in srgb, var(--st-surface-2) 72%, transparent) !important;
}

.top .actions > .console-launch-button strong {
  font-size: .72rem !important;
  letter-spacing: .025em;
}

.top .actions > .theme-toggle,
.top .actions > #activityButton {
  width: var(--header-control-size) !important;
  min-width: var(--header-control-size) !important;
  padding: 0 !important;
}

.top .actions > .theme-toggle .theme-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
}

.top .actions > .account-menu-trigger {
  min-width: 138px !important;
  padding-inline: 13px !important;
  background: color-mix(in srgb, var(--st-surface-2) 84%, transparent) !important;
}

.top .actions > .account-menu-trigger .account-trigger-copy strong {
  font-size: .78rem !important;
}

.top .actions > #sync {
  display: none !important;
}

/* The sidebar reads as a compact route list instead of a stack of feature cards. */
#nav.nav-sectioned {
  --nav-row: 43px;
  --nav-icon: 25px;
  gap: 0;
}

#nav .nav-section + .nav-section {
  margin-top: 5px;
  padding-top: 6px;
}

#nav .nav-section-label {
  min-height: 28px;
  padding: 5px 10px 3px;
  color: color-mix(in srgb, var(--st-muted) 88%, transparent);
  font-size: .58rem;
  letter-spacing: .105em;
}

#nav .nav-section-body {
  gap: 1px;
}

#nav .nav-row {
  gap: 9px;
  padding-inline: 9px;
  border-radius: 9px;
  color: var(--st-text-soft);
}

#nav .nav-row-icon {
  width: var(--nav-icon);
  height: var(--nav-icon);
  border-radius: 7px;
  background: color-mix(in srgb, var(--st-text) 5%, transparent);
  font-size: .82rem;
}

#nav .nav-row-label {
  font-size: .76rem;
  font-weight: 760;
}

#nav .nav-row:hover {
  background: color-mix(in srgb, var(--st-cyan) 7%, transparent);
}

#nav .nav-row.active {
  border-color: transparent;
  background: color-mix(in srgb, var(--st-cyan) 11%, transparent);
  box-shadow: inset 3px 0 0 var(--st-cyan);
}

#nav .nav-row.active .nav-row-icon {
  background: color-mix(in srgb, var(--st-cyan) 15%, transparent);
}

.sidefoot .clock,
.sidefoot .clock-format {
  border-radius: 9px;
}

/* Desktop: a two-tier header. Identity and brand anchor the full height;
   utilities sit above the quote and no longer define the header's scale. */
@media (min-width: 1101px) {
  .side > .sidebar-brand {
    min-height: 150px !important;
    height: 150px !important;
    padding: 7px 0 !important;
    align-content: center !important;
  }

  .side > .sidebar-brand img {
    width: 124px !important;
    height: 124px !important;
    max-width: 124px !important;
    max-height: 124px !important;
  }

  .top {
    grid-template-columns: minmax(218px, .78fr) minmax(290px, 370px) minmax(360px, 1.22fr) !important;
    grid-template-rows: 44px 70px !important;
    column-gap: clamp(16px, 2vw, 30px) !important;
    row-gap: 7px !important;
    min-height: 145px !important;
    padding: 12px 18px !important;
  }

  .top > .header-profile-avatar {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: min(100%, 238px) !important;
    min-height: 102px !important;
    padding: 8px 10px !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .top > .header-profile-avatar .header-profile-stage,
  .top > .header-profile-avatar img {
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
  }

  .top > .header-profile-avatar .header-profile-copy b {
    font-size: .78rem !important;
  }

  .top > .header-profile-avatar .header-profile-copy small,
  .top > .header-profile-avatar .header-profile-copy em {
    font-size: .64rem !important;
  }

  .top > .persistent-brand {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    width: min(100%, 370px) !important;
    padding: 7px 10px !important;
  }

  .top > .persistent-brand > span {
    width: min(100%, 350px) !important;
  }

  .top > .persistent-brand > span img:first-child {
    width: 100% !important;
    max-height: 79px !important;
    object-fit: contain !important;
  }

  .top > .persistent-brand > span img:last-child {
    width: 75% !important;
    max-height: 22px !important;
    object-fit: contain !important;
  }

  .top > .persistent-brand > img {
    width: 82px !important;
    height: 82px !important;
  }

  .top > .actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    width: 100% !important;
    height: 44px !important;
  }

  .top > .actions > .console-launch-button {
    min-width: 104px !important;
    padding-inline: 12px !important;
  }

  .top > .header-sprite-quote {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    grid-template-columns: 46px minmax(0, 1fr) 30px !important;
    width: min(100%, 316px) !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    gap: 9px !important;
    border-color: color-mix(in srgb, var(--st-border) 72%, transparent) !important;
    box-shadow: none !important;
  }

  .top > .header-sprite-quote img {
    width: 46px !important;
    height: 46px !important;
  }

  .top > .header-sprite-quote strong,
  .top > .header-sprite-quote cite {
    font-size: .72rem !important;
  }

  .top > .header-sprite-quote q {
    font-size: .7rem !important;
    line-height: 1.3 !important;
  }
}

/* Tablet: keep the existing two-row arrangement but reduce the utility weight. */
@media (min-width: 720px) and (max-width: 1100px) {
  .top > .actions {
    justify-content: end !important;
    grid-template-columns: auto var(--header-control-size) var(--header-control-size) minmax(138px, 210px) !important;
  }

  .top > .actions:has(.admin-mode-toggle) {
    grid-template-columns: auto auto var(--header-control-size) var(--header-control-size) minmax(138px, 210px) !important;
  }

  .top .actions > .console-launch-button,
  .top .actions > .theme-toggle,
  .top .actions > #activityButton,
  .top .actions > .account-menu-trigger {
    width: auto !important;
  }
}

/* Phone: brand and profile share the identity row. Console remains available
   in More, so the utility row only carries theme, notifications and account. */
@media (max-width: 719px), (max-width: 900px) and (orientation: landscape) {
  .top {
    grid-template-columns: minmax(0, 1fr) 54px !important;
    grid-template-rows: 58px 46px !important;
    gap: 7px 10px !important;
    padding-block: 7px 9px !important;
  }

  .top > .persistent-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: 43px minmax(0, 1fr) !important;
    min-height: 54px !important;
    padding: 0 3px !important;
  }

  .top > .persistent-brand > img {
    width: 42px !important;
    height: 42px !important;
  }

  .top > .persistent-brand > span img:first-child {
    width: min(100%, 220px) !important;
    max-height: 30px !important;
  }

  .top > .persistent-brand > span img:last-child {
    display: none !important;
  }

  .top > .header-profile-avatar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    padding: 4px !important;
    border-radius: 13px !important;
    grid-template-columns: 46px !important;
    place-items: center !important;
  }

  .top > .header-profile-avatar .header-profile-stage,
  .top > .header-profile-avatar img {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }

  .top > .header-profile-avatar .header-profile-copy {
    display: none !important;
  }

  .top > .actions,
  .top > .actions:not(:has(.admin-mode-toggle)) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    grid-template-columns: var(--header-control-size) var(--header-control-size) minmax(120px, 190px) !important;
    gap: 7px !important;
    width: min(100%, 288px) !important;
    min-height: 42px !important;
  }

  .top > .actions:has(.admin-mode-toggle) {
    grid-template-columns: auto var(--header-control-size) var(--header-control-size) minmax(112px, 170px) !important;
    width: min(100%, 390px) !important;
  }

  .top .actions > .console-launch-button {
    display: none !important;
  }

  .top .actions > .theme-toggle,
  .top .actions > #activityButton,
  .top .actions > .account-menu-trigger {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 !important;
  }

  .top .actions > .account-menu-trigger {
    padding-inline: 10px !important;
  }

  #mobile.mobile {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    overflow-x: hidden !important;
  }

  #mobile .mobile-nav-button,
  #mobile .mobile-nav-more-toggle {
    min-width: 0 !important;
    min-height: 54px !important;
  }

  #mobile .mobile-nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .top > .actions,
  .top > .actions:not(:has(.admin-mode-toggle)) {
    width: 100% !important;
  }

  .top > .persistent-brand > span img:first-child {
    max-width: 176px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nav .nav-row,
  .top .actions > * {
    transition: none !important;
  }
}

/* Keep player names, earned titles and Sprite quote names readable in full. */
.top > .header-profile-avatar .header-profile-copy b,
.top > .header-profile-avatar .header-profile-copy small,
.top > .header-profile-avatar .header-profile-copy em,
.top > .header-sprite-quote strong,
.top > .header-sprite-quote cite,
.top > .header-sprite-quote q {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.top > .header-profile-avatar .header-profile-copy em {
  line-height: 1.25 !important;
}

@media (min-width: 1101px) {
  .top > .header-sprite-quote {
    width: min(100%, 360px) !important;
  }
}


/* Mobile/tablet header v4 — final cascade authority.
   A single identity row prevents clipped controls in portrait and landscape.
   Secondary utilities stay available from the account menu. */
@media (max-width:1100px){
  .top{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 50px auto!important;
    grid-template-rows:minmax(64px,auto)!important;
    align-items:center!important;
    gap:10px!important;
    min-height:80px!important;
    height:80px!important;
    max-height:80px!important;
    box-sizing:border-box!important;
    padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))!important;
    overflow:visible!important;
  }
  .top>.header-sprite-quote,
  .top>.header-profile-avatar{display:none!important}
  .top>.persistent-brand{
    grid-column:1!important;
    grid-row:1!important;
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    align-items:center!important;
    justify-items:start!important;
    gap:9px!important;
    width:min(100%,560px)!important;
    min-width:0!important;
    min-height:64px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:none!important;
  }
  .top>.persistent-brand>img{
    display:block!important;
    grid-column:1!important;
    width:52px!important;
    height:52px!important;
    max-height:52px!important;
    object-fit:contain!important;
  }
  .top>.persistent-brand>span{
    grid-column:2!important;
    display:grid!important;
    justify-items:start!important;
    gap:2px!important;
    width:100%!important;
    min-width:0!important;
  }
  .top>.persistent-brand>span img:first-child{
    display:block!important;
    width:min(100%,330px)!important;
    height:auto!important;
    max-height:40px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .top>.persistent-brand>span img:last-child{
    display:none!important;
  }
  .top>.actions,
  .top>.actions.console-launcher-actions,
  .top>.actions:not(:has(.admin-mode-toggle)){
    display:contents!important;
  }
  .top .actions>.console-launch-button,
  .top .actions>#activityButton,
  .top .actions>.admin-mode-toggle,
  .top .actions>#sync{display:none!important}
  .top .actions>.theme-toggle{
    grid-column:2!important;
    grid-row:1!important;
    display:grid!important;
    place-items:center!important;
    width:50px!important;
    min-width:50px!important;
    height:50px!important;
    min-height:50px!important;
    padding:5px!important;
    border-radius:14px!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  .top .actions>.theme-toggle .theme-icon{font-size:23px!important;line-height:1!important}
  .top .actions>.theme-toggle .theme-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important}
  .top .actions>.account-menu-trigger{
    grid-column:3!important;
    grid-row:1!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    justify-self:end!important;
    width:auto!important;
    min-width:54px!important;
    max-width:210px!important;
    min-height:54px!important;
    height:54px!important;
    padding:5px 10px 5px 5px!important;
    overflow:hidden!important;
    border-radius:15px!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  .top .account-mini-menu{
    position:fixed!important;
    z-index:140!important;
    top:calc(80px + env(safe-area-inset-top))!important;
    right:max(10px,env(safe-area-inset-right))!important;
    left:auto!important;
    width:min(390px,calc(100vw - 20px))!important;
    max-height:calc(100dvh - 100px - env(safe-area-inset-bottom))!important;
    overflow:auto!important;
  }
}
@media (max-width:719px), (max-width:900px) and (orientation:landscape){
  .top{
    grid-template-columns:minmax(0,1fr) 44px 54px!important;
    grid-template-rows:64px!important;
    min-height:76px!important;
    height:76px!important;
    max-height:76px!important;
    gap:8px!important;
    padding-block:6px!important;
  }
  .top>.persistent-brand{
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:7px!important;
    min-height:58px!important;
  }
  .top>.persistent-brand>img{
    width:44px!important;
    height:44px!important;
    max-height:44px!important;
  }
  .top>.persistent-brand>span img:first-child{
    width:min(100%,250px)!important;
    max-height:34px!important;
  }
  .top .actions>.theme-toggle{width:44px!important;min-width:44px!important;height:48px!important;min-height:48px!important;padding:4px!important}
  .top .actions>.account-menu-trigger{
    grid-template-columns:44px!important;
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    padding:5px!important;
  }
  .top .actions>.account-menu-trigger>.account-trigger-copy,
  .top .actions>.account-menu-trigger>i{display:none!important}
  .top .actions>.account-menu-trigger::before{
    content:"◎";
    display:grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    border-radius:11px!important;
    background:color-mix(in srgb,var(--st-cyan) 10%,var(--st-surface-2))!important;
    color:var(--st-cyan)!important;
    font-size:25px!important;
  }
  .top .account-mini-menu{
    top:calc(76px + env(safe-area-inset-top))!important;
  }
}
@media (min-width:720px) and (max-width:1100px){
  .top{min-height:86px!important;height:86px!important;max-height:86px!important;padding-inline:16px!important}
  .top>.persistent-brand>span img:last-child{
    display:block!important;
    width:min(86%,300px)!important;
    max-height:15px!important;
    object-position:left center!important;
  }
}


/* Responsive mobile/tablet brand header v6.
   The header includes the iOS safe area in its measured height, so the Sprite
   Tracker mark and title never compete with the status bar. */
@media (max-width:1100px){
  .top{
    grid-template-columns:minmax(0,1fr) 54px auto!important;
    grid-template-rows:80px!important;
    align-items:center!important;
    gap:10px!important;
    min-height:calc(96px + env(safe-area-inset-top,0px))!important;
    height:calc(96px + env(safe-area-inset-top,0px))!important;
    max-height:none!important;
    padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px))!important;
  }
  .top>.persistent-brand{
    grid-template-columns:60px minmax(0,1fr)!important;
    min-height:80px!important;
    gap:10px!important;
    overflow:visible!important;
  }
  .top>.persistent-brand>img{width:60px!important;height:60px!important;max-height:60px!important}
  .top>.persistent-brand>span img:first-child{width:min(100%,380px)!important;max-height:52px!important}
  .top>.persistent-brand>span img:last-child{display:none!important}
  .top .actions>.theme-toggle{width:54px!important;min-width:54px!important;height:54px!important;min-height:54px!important;padding:5px!important;border-radius:14px!important}
  .top .actions>.theme-toggle .theme-icon{font-size:24px!important}
  .top .actions>.account-menu-trigger{min-width:56px!important;max-width:190px!important;min-height:58px!important;height:58px!important;padding:5px 10px 5px 6px!important;border-radius:15px!important}
  .top .account-mini-menu{top:calc(96px + env(safe-area-inset-top,0px))!important;max-height:calc(100dvh - 108px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important}
}
@media (max-width:719px){
  .top{
    grid-template-columns:minmax(0,1fr) 44px 48px!important;
    grid-template-rows:80px!important;
    gap:6px!important;
    min-height:calc(96px + env(safe-area-inset-top,0px))!important;
    height:calc(96px + env(safe-area-inset-top,0px))!important;
    padding:calc(8px + env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) 8px max(10px,env(safe-area-inset-left,0px))!important;
  }
  .top>.persistent-brand{grid-template-columns:50px minmax(0,1fr)!important;min-height:80px!important;gap:8px!important}
  .top>.persistent-brand>img{width:50px!important;height:50px!important;max-height:50px!important}
  .top>.persistent-brand>span img:first-child{width:min(100%,300px)!important;max-height:48px!important}
  .top .actions>.theme-toggle{width:44px!important;min-width:44px!important;height:48px!important;min-height:48px!important;padding:4px!important}
  .top .actions>.account-menu-trigger{grid-template-columns:42px!important;width:48px!important;min-width:48px!important;max-width:48px!important;min-height:50px!important;height:50px!important;padding:4px 3px!important}
  .top .actions>.account-menu-trigger::before{width:42px!important;height:42px!important;font-size:23px!important}
  .top .account-mini-menu{top:calc(96px + env(safe-area-inset-top,0px))!important}
}
@media (min-width:720px) and (max-width:1100px) and (orientation:portrait),
       (min-width:901px) and (max-width:1100px){
  .top{
    grid-template-columns:minmax(0,1fr) 58px auto!important;
    grid-template-rows:94px!important;
    gap:12px!important;
    min-height:calc(112px + env(safe-area-inset-top,0px))!important;
    height:calc(112px + env(safe-area-inset-top,0px))!important;
    padding:calc(9px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 9px max(16px,env(safe-area-inset-left,0px))!important;
  }
  .top>.persistent-brand{grid-template-columns:72px minmax(0,1fr)!important;min-height:94px!important;gap:12px!important}
  .top>.persistent-brand>img{width:72px!important;height:72px!important;max-height:72px!important}
  .top>.persistent-brand>span img:first-child{width:min(100%,430px)!important;max-height:64px!important}
  .top>.persistent-brand>span img:last-child{display:block!important;width:min(86%,320px)!important;max-height:18px!important;object-position:left center!important}
  .top .actions>.theme-toggle{width:58px!important;min-width:58px!important;height:58px!important;min-height:58px!important}
  .top .actions>.account-menu-trigger{min-width:58px!important;max-width:180px!important;min-height:62px!important;height:62px!important}
  .top .account-mini-menu{top:calc(112px + env(safe-area-inset-top,0px))!important}
}
@media (max-width:900px) and (orientation:landscape){
  .top{
    grid-template-columns:minmax(0,1fr) 46px 50px!important;
    grid-template-rows:72px!important;
    gap:7px!important;
    min-height:calc(84px + env(safe-area-inset-top,0px))!important;
    height:calc(84px + env(safe-area-inset-top,0px))!important;
    padding:calc(6px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px))!important;
  }
  .top>.persistent-brand{grid-template-columns:56px minmax(0,1fr)!important;min-height:72px!important;gap:9px!important}
  .top>.persistent-brand>img{width:56px!important;height:56px!important;max-height:56px!important}
  .top>.persistent-brand>span img:first-child{width:min(100%,350px)!important;max-height:52px!important}
  .top>.persistent-brand>span img:last-child{display:none!important}
  .top .actions>.theme-toggle{width:46px!important;min-width:46px!important;height:48px!important;min-height:48px!important}
  .top .actions>.account-menu-trigger{width:50px!important;min-width:50px!important;max-width:50px!important;min-height:52px!important;height:52px!important}
  .top .account-mini-menu{top:calc(84px + env(safe-area-inset-top,0px))!important}
}
@media (min-width:1101px){
  .top .actions>.admin-mode-toggle,
  .top .actions>.console-launch-button,
  .top .actions>.theme-toggle,
  .top .actions>#activityButton,
  .top .actions>.account-menu-trigger{min-height:44px!important}
}