/* nav.css: shared top menu (Our Games + eSports dropdowns). Self-contained so it also works on the
   hub pages (coach/, links/) that do not load studio.css. Markup is generated by tools/build_nav.py. */
.nav{
  --n-ink:#070f18; --n-moon:#dcefff; --n-soft:#a9cfe6; --n-muted:#9fb6c6;
  --n-amber:#ffae42; --n-amber2:#ff8a1e; --n-jade:#37e0c8;
  --n-line:rgba(150,200,230,.14); --n-panel:rgba(10,22,33,.97);
  --n-display:'Cinzel',Georgia,serif; --n-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;transition:background .3s ease,padding .3s ease,box-shadow .3s;
  font-family:var(--n-body);line-height:1.4;text-align:left;
}
.nav *,.nav *::before,.nav *::after{box-sizing:border-box}
.nav.scrolled{background:rgba(7,15,24,.9);padding:12px 28px;box-shadow:0 10px 30px -12px #000;border-bottom:1px solid var(--n-line)}
@supports (backdrop-filter:blur(1px)){.nav.scrolled{background:rgba(7,15,24,.82);backdrop-filter:blur(14px)}}
.nav a{color:inherit;text-decoration:none}
.nav .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--n-display);font-weight:900;font-size:1.1rem;letter-spacing:1px;color:var(--n-moon)}
.nav .brand .dot{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--n-amber) 60%,#a14b00);box-shadow:0 0 26px rgba(255,150,60,.55)}
.nav .brand b{background:linear-gradient(90deg,var(--n-moon),var(--n-jade));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav .nav-links{display:flex;align-items:center;gap:28px}
.nav .nav-links>a,.nav .nav-dd-btn{font-family:var(--n-body);font-weight:600;font-size:.94rem;color:var(--n-soft);transition:color .2s}
.nav .nav-links>a:hover,.nav .nav-dd-btn:hover,.nav .nav-dd.open>.nav-dd-btn{color:var(--n-amber)}
.nav .nav-cta{display:inline-flex;align-items:center;padding:.6em 1.2em;font-size:.85rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  border-radius:999px;background:linear-gradient(135deg,var(--n-amber),var(--n-amber2));color:#2a1400;box-shadow:0 0 26px rgba(255,150,60,.55);
  transition:transform .18s ease,filter .2s ease}
.nav .nav-links>a.nav-cta{color:#2a1400}
.nav .nav-cta:hover{transform:translateY(-2px);filter:brightness(1.08)}
.nav .burger{display:none;background:none;border:0;color:var(--n-moon);font-size:1.6rem;cursor:pointer;line-height:1;padding:4px 8px}
.nav a:focus-visible,.nav button:focus-visible{outline:2px solid var(--n-amber);outline-offset:3px;border-radius:6px}

/* dropdown group */
.nav .nav-dd{position:relative}
.nav .nav-dd-btn{display:inline-flex;align-items:center;gap:.4em;background:none;border:0;padding:6px 0;cursor:pointer;font-size:.94rem}
.nav .caret{width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.12em) rotate(45deg);transition:transform .2s}
.nav .nav-dd.open>.nav-dd-btn .caret{transform:translateY(.08em) rotate(-135deg)}
.nav .nav-dd-panel{position:absolute;top:calc(100% + 14px);left:50%;width:300px;max-width:94vw;padding:10px;
  background:var(--n-panel);border:1px solid var(--n-line);border-radius:16px;box-shadow:0 24px 60px -18px #000;
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-6px);transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}
.nav .nav-dd.open>.nav-dd-panel,
html:not(.nav-js) .nav .nav-dd:hover>.nav-dd-panel,
html:not(.nav-js) .nav .nav-dd:focus-within>.nav-dd-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
.nav .nav-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} /* hover bridge */
.nav .nav-dd-panel ul{list-style:none;margin:0;padding:0}
.nav .nav-dd-panel li a,.nav .nav-dd-panel li.soon{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:10px}
.nav .nav-dd-panel li a:hover,.nav .nav-dd-panel li a:focus-visible{background:rgba(255,174,66,.1)}
.nav .nav-dd-panel li a[aria-current="page"]{background:rgba(55,224,200,.1)}
.nav .dd-name{font-weight:700;font-size:.93rem;color:var(--n-moon)}
.nav .dd-tag{font-size:.78rem;color:var(--n-muted);line-height:1.3}
.nav li.soon{opacity:.85;cursor:default}
.nav li.soon .dd-tag{color:var(--n-amber);font-weight:600}
.nav .nav-dd-foot{display:block;margin:8px 2px 0;padding:10px 12px;border-top:1px solid var(--n-line);font-weight:700;font-size:.85rem;color:var(--n-jade);border-radius:0 0 10px 10px}
.nav .nav-dd-foot:hover{color:var(--n-amber)}
/* wide two-column games panel, anchored to the nav bar */
.nav .nav-dd--games{position:static}
.nav .nav-dd--games>.nav-dd-panel{top:calc(100% + 2px);width:min(700px,94vw)}
.nav .nav-dd--games>.nav-dd-panel::before{top:-24px;height:24px}
.nav .nav-dd--games ul{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
/* hub pages: leave room for the fixed bar */
.nav ~ .hub{padding-top:96px}

@media (max-width:900px){
  .nav,.nav.scrolled{padding:14px 16px}
  .nav.scrolled{backdrop-filter:none;background:rgba(7,15,24,.96)} /* a blur here would trap the fixed menu inside the bar */
  .nav .burger{display:block;z-index:60}
  .nav .nav-links{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);height:100vh;height:100dvh;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:6px;padding:76px 18px 28px;background:rgba(10,22,33,.98);transform:translateX(100%);visibility:hidden;
    transition:transform .3s ease,visibility 0s linear .3s;border-left:1px solid var(--n-line);overflow-y:auto;overscroll-behavior:contain;z-index:55}
  .nav .nav-links.open{transform:none;visibility:visible;transition-delay:0s}
  .nav .nav-links>a,.nav .nav-dd-btn{font-size:1.02rem;padding:10px 6px}
  .nav .nav-dd,.nav .nav-dd--games{position:static}
  .nav .nav-dd-btn{width:100%;justify-content:space-between;color:var(--n-moon);border-bottom:1px solid var(--n-line)}
  .nav .nav-dd-panel,.nav .nav-dd--games>.nav-dd-panel{position:static;display:none;width:100%;max-width:none;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    padding:4px 0 8px;background:none;border:0;box-shadow:none;transition:none}
  .nav .nav-dd.open>.nav-dd-panel{display:block;transform:none}
  html:not(.nav-js) .nav .nav-dd>.nav-dd-panel{display:block}
  .nav .nav-dd-panel::before{display:none}
  .nav .nav-dd--games ul{display:block}
  .nav .nav-dd-panel li a,.nav .nav-dd-panel li.soon{padding:8px 10px}
  .nav .nav-cta{justify-content:center;margin-top:10px;padding:.9em 1.2em}
  .nav ~ .hub{padding-top:84px}
}
@media (prefers-reduced-motion:reduce){.nav,.nav *{transition:none!important}}
