:root {
  --nx-shell-height: 72px;
  --nx-shell-bg: rgba(8, 10, 18, .94);
  --nx-shell-border: rgba(224, 183, 86, .22);
  --nx-shell-gold: #e2b94f;
  --nx-shell-gold-2: #ffe386;
  --nx-shell-text: #f7f4ec;
  --nx-shell-muted: #a9adba;
  --nx-shell-panel: #111522;
  --nx-shell-danger: #ff7272;
}

html { scroll-padding-top: calc(var(--nx-shell-height) + 18px); }
body.nx-shell-active { padding-top: var(--nx-shell-height); }
body.nx-shell-active.nx-battle-page { padding-top: 0; }

.nx-skip-link {
  position: fixed; inset-inline-start: 16px; top: -60px; z-index: 10050;
  padding: 10px 16px; border-radius: 10px; background: #fff; color: #090b12;
  font-weight: 800; text-decoration: none; transition: top .18s ease;
}
.nx-skip-link:focus { top: 10px; }

.nx-global-header {
  position: fixed; inset: 0 0 auto 0; z-index: 10000; min-height: var(--nx-shell-height);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: 10px clamp(16px, 3vw, 46px); color: var(--nx-shell-text);
  background: linear-gradient(180deg, rgba(14, 17, 28, .98), var(--nx-shell-bg));
  border-bottom: 1px solid var(--nx-shell-border); box-shadow: 0 14px 38px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-family: inherit;
}
.nx-global-header *, .nx-global-drawer * { box-sizing: border-box; }
.nx-global-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; white-space: nowrap; }
.nx-global-brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  color: #15100a; background: radial-gradient(circle at 35% 30%, #fff1a9, var(--nx-shell-gold));
  box-shadow: 0 0 28px rgba(226, 185, 79, .32); font-size: 17px;
}
.nx-global-brand strong { letter-spacing: .12em; font-size: 16px; }
.nx-global-nav { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; }
.nx-global-nav a, .nx-global-more > summary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
  padding: 0 12px; border: 1px solid transparent; border-radius: 12px;
  color: #cdd0da; text-decoration: none; font-size: 14px; font-weight: 750; cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.nx-global-nav a:hover, .nx-global-more > summary:hover,
.nx-global-nav a:focus-visible, .nx-global-more > summary:focus-visible {
  color: #fff; background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.08); outline: none;
}
.nx-global-nav a.active { color: #161108; background: linear-gradient(135deg, var(--nx-shell-gold-2), var(--nx-shell-gold)); }
.nx-global-more { position: relative; }
.nx-global-more > summary { list-style: none; }
.nx-global-more > summary::-webkit-details-marker { display: none; }
.nx-global-more > summary::after { content: "⌄"; margin-inline-start: 7px; color: var(--nx-shell-gold); }
.nx-global-more[open] > summary { color: #fff; background: rgba(255,255,255,.06); }
.nx-global-more-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 230px; padding: 8px;
  display: grid; gap: 4px; background: rgba(15, 18, 29, .99); border: 1px solid var(--nx-shell-border);
  border-radius: 16px; box-shadow: 0 22px 54px rgba(0,0,0,.44);
}
.nx-global-more-menu a { justify-content: flex-start; width: 100%; }
.nx-global-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; white-space: nowrap; }
.nx-wallet-chip {
  display: none; align-items: center; gap: 7px; min-height: 40px; padding: 0 11px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.035);
  color: var(--nx-shell-muted); font-size: 12px;
}
.nx-wallet-chip.is-visible { display: inline-flex; }
.nx-wallet-chip b { color: #fff; font-size: 13px; }
.nx-account-link, .nx-play-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px;
  border-radius: 12px; text-decoration: none; font-size: 13px; font-weight: 850;
}
.nx-account-link { color: #eef0f6; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.045); }
.nx-play-link { color: #161108; background: linear-gradient(135deg, var(--nx-shell-gold-2), var(--nx-shell-gold)); box-shadow: 0 10px 24px rgba(226,185,79,.16); }
.nx-mobile-toggle {
  display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  color: #fff; background: rgba(255,255,255,.045); cursor: pointer; font-size: 21px;
}

.nx-global-drawer-backdrop {
  position: fixed; inset: 0; z-index: 10010; background: rgba(0,0,0,.58); opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.nx-global-drawer {
  position: fixed; z-index: 10020; top: 0; bottom: 0; inset-inline-end: 0; width: min(88vw, 360px);
  display: flex; flex-direction: column; padding: 20px; color: #fff; background: #0c101b;
  border-inline-start: 1px solid var(--nx-shell-border); transform: translateX(-100%);
  transition: transform .25s ease; box-shadow: 0 0 70px rgba(0,0,0,.55);
}
html[dir="ltr"] .nx-global-drawer { transform: translateX(100%); }
html[dir="ltr"].nx-drawer-open .nx-global-drawer { transform: translateX(0); }
.nx-drawer-open .nx-global-drawer-backdrop { opacity: 1; pointer-events: auto; }
.nx-drawer-open .nx-global-drawer { transform: translateX(0); }
.nx-drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.08); }
.nx-drawer-close { width: 40px; height: 40px; border: 0; border-radius: 11px; color: #fff; background: rgba(255,255,255,.07); font-size: 23px; cursor: pointer; }
.nx-drawer-nav { display: grid; gap: 5px; padding: 18px 0; overflow-y: auto; }
.nx-drawer-nav a { padding: 13px 14px; border-radius: 12px; color: #d7dae3; text-decoration: none; font-weight: 750; }
.nx-drawer-nav a.active { color: #161108; background: linear-gradient(135deg, var(--nx-shell-gold-2), var(--nx-shell-gold)); }
.nx-drawer-footer { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* The old page header remains in the DOM so existing page scripts can keep updating counters. */
body.nx-shell-active:not(.nx-battle-page) > header.nx-legacy-header { display: none !important; }

.nx-battle-menu {
  position: fixed; z-index: 10030; inset-inline-start: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 13px; border: 1px solid rgba(226,185,79,.36); border-radius: 12px;
  color: #fff; background: rgba(8,10,18,.88); text-decoration: none; font: 800 13px/1 inherit;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(12px);
}
.nx-battle-menu:hover { border-color: var(--nx-shell-gold); }

.nx-service-banner {
  margin: 10px auto 0; width: min(1180px, calc(100% - 28px)); padding: 11px 14px; border-radius: 13px;
  border: 1px solid rgba(226,185,79,.22); color: #e7e0cb; background: rgba(226,185,79,.07); text-align: center;
  font-size: 13px;
}

/* Shared presentation polish without forcing every page into one visual theme. */
body.nx-shell-active :where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgba(226,185,79,.45); outline-offset: 2px;
}
body.nx-shell-active :where(button, .primary-btn, .ghost-btn, .primary-button, .secondary-button) { touch-action: manipulation; }
body.nx-shell-active main { min-width: 0; }
body.nx-shell-active img { max-width: 100%; }
body.nx-shell-active .eyebrow { letter-spacing: .08em; }

.nx-developer-only { display: none !important; }

@media (max-width: 1180px) {
  .nx-global-header { grid-template-columns: auto 1fr auto; gap: 12px; padding-inline: 18px; }
  .nx-global-nav { justify-content: flex-end; }
  .nx-global-nav > a:nth-of-type(n+6) { display: none; }
  .nx-wallet-chip { display: none !important; }
}
@media (max-width: 860px) {
  :root { --nx-shell-height: 64px; }
  .nx-global-header { min-height: 64px; grid-template-columns: auto 1fr auto; padding: 8px 12px; }
  .nx-global-nav, .nx-play-link { display: none; }
  .nx-mobile-toggle { display: grid; place-items: center; }
  .nx-global-actions { gap: 7px; }
  .nx-account-link { min-height: 40px; padding-inline: 11px; }
  .nx-global-brand-mark { width: 34px; height: 34px; }
  .nx-global-brand strong { font-size: 14px; }
}
@media (max-width: 480px) {
  .nx-account-link { width: 40px; padding: 0; font-size: 0; }
  .nx-account-link::before { content: "♙"; font-size: 20px; }
  .nx-global-header { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-global-header *, .nx-global-drawer, .nx-global-drawer-backdrop, .nx-skip-link { transition: none !important; scroll-behavior: auto !important; }
}