/* ============================================================
   Shared site chrome — the SAME header + footer used across the
   static sub-pages (status.html, …). Mirrors the landing (index.html)
   header/footer exactly; index.html keeps its own inline copy because
   its header is wired into the app's auth/modal JS. Injected by
   site-chrome.js into #siteHeader / #siteFooter.

   Relies on the page's :root design tokens (--gold, --display, …).
   ============================================================ */

.chrome-wrap{width:min(1320px,94vw);margin-inline:auto}

/* ---- Top bar ---- */
header{position:sticky;top:0;z-index:50;
  backdrop-filter:blur(8px);
  background:linear-gradient(180deg, rgba(10,14,9,.93), rgba(10,14,9,.8)), url(media/art/tex-wood.jpg) center/cover;
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 6px 20px -10px rgba(0,0,0,.7);}
.bar{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--script);font-weight:900;
  font-size:1.5rem;letter-spacing:.04em;color:var(--ink);text-decoration:none}
.brand .crest-img{width:34px;height:34px;flex:none;border-radius:7px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.brand b{color:var(--gold)}

/* logo + status link stacked in the top-left of the bar */
.brand-stack{display:flex;flex-direction:column;gap:.25rem}
.status-link{display:inline-flex;align-items:center;gap:.5rem;width:fit-content;
  margin-left:calc(34px + .7rem);
  font-family:var(--display);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .25s}
.status-link:hover{color:var(--gold)}
.sl-dots{display:inline-flex;gap:.28rem}
.sl-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.sl-dot.is-online  {background:var(--verd); box-shadow:0 0 6px rgba(90,168,119,.7)}
.sl-dot.is-degraded{background:#e0a341;      box-shadow:0 0 6px rgba(224,163,65,.7)}
.sl-dot.is-offline {background:#d65a4e;      box-shadow:0 0 6px rgba(214,90,78,.7)}
.sl-dot.is-soon    {background:var(--gold-2);box-shadow:0 0 6px rgba(199,159,67,.6)}

nav.links{display:flex;gap:2rem;font-family:var(--display);font-size:.74rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
nav.links a{position:relative;padding:.3rem 0;transition:color .25s;text-decoration:none;color:inherit}
nav.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:var(--gold);transition:right .3s ease}
nav.links a:hover{color:var(--gold)}
nav.links a:hover::after{right:0}
/* nav-group is transparent on desktop; becomes the dropdown panel on mobile. */
.nav-group{display:contents}
.nav-toggle{display:none;width:42px;height:42px;padding:9px;background:none;border:0;cursor:pointer;flex:none}
.nav-toggle span{display:block;height:2px;border-radius:2px;background:var(--ink);margin:5px 0;transition:transform .25s,opacity .2s}
header.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.menu-open .nav-toggle span:nth-child(2){opacity:0}
header.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;
  padding:.72rem 1.3rem;border-radius:4px;cursor:pointer;color:var(--ink);text-decoration:none;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(28,38,27,.6),rgba(8,12,8,.6)), url(media/art/tex-wood.jpg) center/cover;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 20px -12px rgba(0,0,0,.7);
  transition:transform .2s ease, box-shadow .25s ease, filter .2s, border-color .25s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-gold{color:#23190a;
  background:linear-gradient(180deg,rgba(243,207,126,.6),rgba(199,159,67,.55)), url(media/art/tex-gold.jpg) center/cover;
  border:1px solid #f6d594;text-shadow:0 1px 0 rgba(255,246,210,.45);
  box-shadow:0 1px 0 #fff6 inset, 0 10px 24px -10px rgba(231,189,100,.6);}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* ---- About dropdown + nested Gameplay submenu ---- */
.navdrop{position:relative}
.navdrop-btn{font:inherit;font-family:var(--display);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;background:none;border:0;color:inherit;cursor:pointer;padding:.3rem 0}
.navdrop-btn:hover{color:var(--gold)}
.navdrop-menu{position:absolute;top:calc(100% + .6rem);right:0;min-width:160px;display:none;flex-direction:column;
  background:linear-gradient(180deg,#1a221a,#0c120c);border:1px solid var(--line-strong);border-radius:7px;
  box-shadow:var(--shadow);padding:.35rem;z-index:120}
.navdrop.open .navdrop-menu{display:flex}
.navdrop-menu a,.navdrop-menu button{font-family:var(--display);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  display:block;text-align:left;text-decoration:none;background:none;border:0;color:var(--ink-soft);padding:.6rem .8rem;border-radius:5px;cursor:pointer}
.navdrop-menu a:hover,.navdrop-menu button:hover{background:rgba(231,189,100,.12);color:var(--gold)}
.navsub{position:relative}
.navsub-btn{display:flex;justify-content:space-between;align-items:center;gap:.6rem;width:100%;
  font-family:var(--display);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;text-align:left;
  background:none;border:0;color:var(--ink-soft);padding:.6rem .8rem;border-radius:5px;cursor:pointer}
.navsub-btn:hover,.navsub:hover .navsub-btn,.navsub.open .navsub-btn{background:rgba(231,189,100,.12);color:var(--gold)}
.navsub-menu{position:absolute;top:-.35rem;right:calc(100% + .35rem);min-width:150px;display:none;flex-direction:column;
  background:linear-gradient(180deg,#1a221a,#0c120c);border:1px solid var(--line-strong);border-radius:7px;
  box-shadow:var(--shadow);padding:.35rem;z-index:130}
.navsub:hover .navsub-menu,.navsub.open .navsub-menu{display:flex}

/* ---- auth header state ---- */
.auth-col{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}
.hdr-ver{font-family:var(--display);font-size:.6rem;letter-spacing:.2em;color:var(--gold-2)}
.auth-actions{display:flex;align-items:center;gap:.9rem}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:2.4rem 0 3rem;background:var(--bg-2)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.foot .brand{font-size:1.2rem}
.stack{display:flex;gap:.6rem;align-items:center;font-family:var(--display);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.stack a{color:var(--gold-2);text-decoration:none;transition:color .2s}
.stack a:hover{color:var(--gold)}
.ver{font-family:var(--display);letter-spacing:.2em;color:var(--gold);font-size:.72rem}
.cookie-reopen{margin-left:.6rem;color:var(--muted);font-size:.7rem;letter-spacing:.04em;text-decoration:none}
.cookie-reopen:hover{color:var(--gold)}

/* ---- mobile: hamburger + slide-down panel (mirrors the landing ≤880px) ---- */
@media (max-width:880px){
  .nav-toggle{display:block}
  .bar{position:relative}
  .nav-group{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;padding:.3rem 0 1rem;
    background:linear-gradient(180deg,rgba(10,14,9,.99),rgba(10,14,9,.99)),url(media/art/tex-wood.jpg) center/cover;
    border-bottom:1px solid var(--line-strong);box-shadow:0 18px 34px -12px rgba(0,0,0,.75);
    max-height:calc(100vh - 74px);overflow-y:auto}
  header.menu-open .nav-group{display:flex}
  nav.links{display:flex;flex-direction:column;align-items:stretch;gap:0}
  nav.links>a{padding:.95rem 1.7rem;font-size:.8rem}
  nav.links>a::after{display:none}
  #navGroup .navdrop,#navGroup .navsub{position:static}
  #navGroup .navdrop-btn,#navGroup .navsub-btn{display:none}
  #navGroup .navdrop-menu,#navGroup .navsub-menu{position:static;display:flex;flex-direction:column;min-width:0;
    background:none;border:0;box-shadow:none;padding:0;margin:0}
  #navGroup .navdrop-menu a,#navGroup .navsub-menu a{padding:.95rem 1.7rem;font-family:var(--display);font-size:.8rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
  #navGroup .navdrop-menu a,#navGroup .navsub-menu a,#navGroup nav.links>a{border-top:1px solid rgba(231,189,100,.09)}
  #navGroup .navsub-menu a{padding-left:2.7rem;color:var(--muted)}
  .auth-col{flex-direction:column;align-items:stretch;gap:.7rem;width:100%;padding:1rem 1.7rem 0;margin-top:.3rem}
  .auth-actions{display:flex;flex-direction:column;gap:.7rem;width:100%}
  .auth-actions .btn,.auth-actions a,.auth-actions button{width:100%;justify-content:center;text-align:center}
  .hdr-ver{text-align:center}
}