/* Compact club navigation. Review alternatives use the same live controls. */
html[data-menu] body .masthead{
 --menu-width:1080px;
 --menu-surface:linear-gradient(120deg,#193731e8,#142a2be3);
 --menu-border:#d8ede32e;--menu-text:#c5d4cf;--menu-strong:#f3f8f2;
 --menu-hover:#e7f7ef0d;--menu-active:#d3ff681a;--menu-accent:#d6ff7e;
}
html[data-menu] body.is-live .masthead{--menu-width:1240px}
html[data-menu] body .masthead .wordmark{color:var(--menu-strong)}
html[data-menu] body .masthead .masthead-tools{gap:4px;margin-left:0}
html[data-menu] body .masthead .masthead-tools :is(.tool-button,.status-key summary,.nav-menu){
 display:grid;place-items:center;flex:none;width:36px;height:36px;margin:0;padding:0;
 border:1px solid transparent;border-radius:8px;background:transparent;
 color:var(--menu-text);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
 transition:background .15s,color .15s,border-color .15s;
}
html[data-menu] body .masthead .masthead-tools :is(.tool-button,.status-key summary,.nav-menu):hover,
html[data-menu] body .masthead .masthead-tools .status-key[open] summary{
 background:var(--menu-hover);color:var(--menu-strong);border-color:var(--menu-border);box-shadow:none;
}
html[data-menu] body .masthead .masthead-tools :is(.tool-button,.status-key summary,.nav-menu) svg{width:18px;height:18px;stroke-width:1.7}
html[data-menu] body .masthead .masthead-tools .masthead-rule{display:block;height:20px;margin:0 7px;background:var(--menu-border)}
html[data-menu] body .masthead .masthead-tools .profile-trigger{width:36px;height:36px;margin:0;flex:none}
html[data-menu] body .masthead .profile-trigger:not(.has-photo){border:1px solid #cfff6159;background:#ccff6110;color:var(--menu-accent);box-shadow:none}
html[data-menu] body .masthead .profile-trigger:not(.has-photo)::before,
html[data-menu] body .masthead .profile-trigger:not(.has-photo)::after{display:none}
html[data-menu] body .masthead .profile-trigger:not(.has-photo) .avatar-silhouette{filter:none}
html[data-menu] body .masthead .profile-trigger:not(.has-photo):hover{background:#ccff6126;border-color:var(--menu-accent)}
html[data-menu] body .masthead :is(a,button,summary):focus-visible{outline:2px solid var(--menu-accent);outline-offset:3px}
/* Keyboard navigation and open popovers must remain reachable while scrolling. */
html[data-menu] body .masthead.is-nav-hidden:is(:focus-within,:has(.status-key[open]),:has([data-league-toggle][aria-expanded=true])){
 transform:none;opacity:1;pointer-events:auto;
}

@media(min-width:681px){
 html[data-menu] body .masthead{
  top:16px;left:max(18px,calc((100vw - var(--menu-width)) / 2));right:max(18px,calc((100vw - var(--menu-width)) / 2));
  height:60px;border:1px solid var(--menu-border);border-radius:14px;background:var(--menu-surface);
  box-shadow:0 12px 28px -16px #0009,inset 0 1px 0 #ffffff0b;
  backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);
 }
 html[data-menu] body .masthead .masthead-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:24px;padding:0 14px 0 20px}
 html[data-menu] body .masthead .masthead-brand{gap:14px}
 html[data-menu] body .masthead .wordmark{font-size:29px}
 html[data-menu] body .masthead .brand-rule{background:var(--menu-border)}
 html[data-menu] body .masthead .team-switch-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;color:var(--menu-strong)}
 html[data-menu] body .masthead .masthead-nav{height:42px;gap:2px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 html[data-menu] body .masthead .masthead-nav .main-nav-link{
  height:42px;padding:0 13px;border:1px solid transparent;border-radius:8px;
  font:500 13.5px/1 var(--font-ui,Inter,sans-serif);letter-spacing:0;text-transform:none;
  color:var(--menu-text);background:transparent;text-shadow:none;transition:background .15s,color .15s,border-color .15s;
 }
 html[data-menu] body .masthead .masthead-nav .main-nav-link:hover{background:var(--menu-hover);color:var(--menu-strong)}
 html[data-menu] body .masthead .masthead-nav .main-nav-link.active{background:var(--menu-active);border-color:#d3ff681c;color:var(--menu-accent);font-weight:650}
 html[data-menu] body .masthead .masthead-nav .main-nav-link.active::after{display:none}
 html[data-menu] body .masthead .masthead-tools button.nav-menu{display:none}
}

/* Silver echoes the metallic frames, with a dark active tab. */
html[data-menu=silver] body .masthead{
 --menu-surface:linear-gradient(130deg,#ecf2ecf2,#c9d6d0ed);
 --menu-border:#f8fffbbf;--menu-text:#43564f;--menu-strong:#152e25;
 --menu-hover:#17352c0b;--menu-active:#203d31;--menu-accent:#d8ff87;
}
html[data-menu=silver] body .masthead .masthead-tools .masthead-rule{background:#18352726}
html[data-menu=silver] body .masthead .profile-trigger:not(.has-photo){color:#294b32;border-color:#254d3940;background:#2348340a}
html[data-menu=silver] body .masthead :is(a,button,summary):focus-visible{outline-color:#2a603b}

/* Three floating groups expose more of the stadium between the controls. */
@media(min-width:1040px){
 html[data-menu=islands] body .masthead{
  --menu-width:1240px;background:transparent;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;
 }
 html[data-menu=islands] body .masthead .masthead-inner{padding:0;gap:24px}
 html[data-menu=islands] body .masthead .masthead-brand,
 html[data-menu=islands] body .masthead .masthead-nav,
 html[data-menu=islands] body .masthead .masthead-tools{
  height:54px;border:1px solid var(--menu-border);border-radius:13px;background:var(--menu-surface);
  box-shadow:0 10px 22px -14px #000b,inset 0 1px 0 #ffffff0b;
  backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);
  pointer-events:auto;
 }
 html[data-menu=islands] body .masthead .masthead-brand{padding:0 17px}
 html[data-menu=islands] body .masthead .masthead-nav{padding:5px}
 html[data-menu=islands] body .masthead .masthead-tools{padding:0 8px}
}

/* Switch to the existing full menu before the labels and tools compete. */
@media(min-width:681px) and (max-width:1039px){
 html[data-menu] body .masthead{--menu-width:760px;height:58px}
 html[data-menu] body .masthead .masthead-inner{grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:0 12px 0 18px}
 html[data-menu] body .masthead .masthead-nav{display:none}
 html[data-menu] body .masthead .masthead-tools{grid-column:2}
 html[data-menu] body .masthead .masthead-tools button.nav-menu{display:grid;margin-left:4px}
}
@media(max-width:680px){
 html[data-menu] body .masthead{position:relative;z-index:60;background:var(--menu-surface);border-bottom:1px solid var(--menu-border);box-shadow:none;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
 html[data-menu] body .masthead .masthead-inner{display:flex;justify-content:space-between;gap:10px;padding-inline:14px}
 html[data-menu] body .masthead .wordmark{font-size:30px}
 html[data-menu] body .masthead .masthead-tools{gap:2px}
 html[data-menu] body .masthead .masthead-tools .masthead-rule{display:none}
 html[data-menu] body .masthead .masthead-tools button.nav-menu{display:grid}
 html[data-menu] body .masthead .masthead-tools :is(.tool-button,.status-key summary,.profile-trigger,.nav-menu){width:34px;height:36px}
}
@media(max-width:1039px){
 html[data-menu] body .masthead .masthead-tools .status-key{position:static}
 html[data-menu] body .masthead .masthead-tools .status-key-panel{top:calc(100% + 8px);right:12px;left:auto;max-width:calc(100vw - 24px)}
}
@media(max-width:360px){
 html[data-menu] body .masthead .masthead-tools button.watchlist-trigger{display:none}
 html[data-menu] body .masthead .masthead-inner{padding-inline:10px}
}
@media(prefers-reduced-motion:reduce){html[data-menu] body .masthead :is(a,button,summary){transition:none}}