/* Shared navigation styles — matches the cinematic nav on /play/*.html and
   the landing page. Include on every page: <link rel="stylesheet" href="nav.css"> */

:root{
  --nav-cream:#ece2c9;
  --nav-soot:#0c0a08;
  --nav-text:#e8ddc9;
  --nav-text-dim:#a89c86;
  --nav-text-faint:#6d655a;
  --nav-hair:#2a2520;
  --nav-hair-2:#3a3530;
  --nav-chronicles:#a17b5a;
  --nav-chronicles-glow:#c99672;
  --nav-heroes:#7aa368;
  --nav-heroes-glow:#9cc087;
  --nav-runner:#d85050;
  --nav-runner-glow:#ff7070;
}

/* Nav shell — sticky at top, 72px tall, cinematic feel */
nav#site-nav{
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:linear-gradient(180deg,rgba(12,10,8,0.92) 0%,rgba(12,10,8,0.72) 80%,rgba(12,10,8,0.55) 100%);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:0 32px;
  height:72px;
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Cinzel','Segoe UI',Tahoma,serif;
}

/* Logo mark */
.nav-home{display:flex;align-items:center;margin-right:22px;text-decoration:none}
.nav-mark{height:46px;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.55))}

/* Game links — colored dots */
.nav-wm{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  font-family:'Cinzel',serif;font-weight:500;text-transform:uppercase;
  padding:10px 16px;letter-spacing:2.2px;font-size:14px;
  color:var(--nav-text-dim);text-decoration:none;
  transition:color .25s,transform .25s;
  border-bottom:1px solid transparent;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
}
.nav-wm::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:0.8;box-shadow:0 0 8px currentColor;
  flex-shrink:0;
}
.nav-wm.wm-chronicles{color:var(--nav-chronicles)}
.nav-wm.wm-heroes{color:var(--nav-heroes)}
.nav-wm.wm-runner{color:var(--nav-runner)}
.nav-wm:hover{transform:translateY(-1px)}
.nav-wm.wm-chronicles:hover{color:var(--nav-chronicles-glow);border-bottom-color:var(--nav-chronicles)}
.nav-wm.wm-heroes:hover{color:var(--nav-heroes-glow);border-bottom-color:var(--nav-heroes)}
.nav-wm.wm-runner:hover{color:var(--nav-runner-glow);border-bottom-color:var(--nav-runner)}
.nav-wm.active{border-bottom-color:currentColor}

/* Plain text links (Downloads) */
.nav-link{
  color:var(--nav-text-dim);font-family:'Cinzel',serif;font-size:14px;font-weight:500;
  padding:10px 16px;letter-spacing:2.2px;text-transform:uppercase;
  transition:color .2s;text-decoration:none;
}
.nav-link:hover{color:var(--nav-cream)}
.nav-link.active{color:var(--nav-cream);border-bottom:1px solid var(--nav-cream)}

/* Install button */
.nav-install-btn{
  background:rgba(255,255,255,0.05);
  color:var(--nav-text-dim);
  border:1px solid var(--nav-hair-2);
  border-radius:3px;
  padding:8px 14px;
  margin-left:4px;
  font-family:'Cinzel',serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:1.5px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s;
}
.nav-install-btn:hover{color:var(--nav-cream);border-color:var(--nav-cream)}

.nav-spacer{flex:1}

/* Right cluster */
.nav-right{display:flex;align-items:center;gap:16px}
.miniplayer{
  display:flex;align-items:center;gap:10px;
  padding:7px 14px 7px 9px;
  border:1px solid var(--nav-hair-2);
  border-radius:24px;
  background:rgba(0,0,0,0.35);
  color:inherit;text-decoration:none;
}
.miniplayer-btn{
  width:26px;height:26px;border-radius:50%;
  background:var(--nav-cream);color:var(--nav-soot);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;
}
.miniplayer-title{
  font-family:'Crimson Pro',serif;font-style:italic;font-size:13px;
  color:var(--nav-text-dim);
}
.online{
  font-family:'Cinzel',serif;font-size:12px;
  color:var(--nav-text-faint);
  letter-spacing:1.8px;font-weight:500;text-transform:uppercase;
  padding-left:16px;
  border-left:1px solid var(--nav-hair);
  display:inline-flex;align-items:center;gap:7px;
}
.online .dot{
  display:inline-block;width:7px;height:7px;
  background:#4cd964;border-radius:50%;
  box-shadow:0 0 6px rgba(76,217,100,0.6);
}

/* Avatar — kept for pages that hand-roll the avatar <a id="nav-avatar"> slot */
.avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#ff9a3d,#d4741e);
  border:1px solid var(--nav-hair-2);
  display:flex;align-items:center;justify-content:center;
  color:var(--nav-soot);font-weight:700;font-size:15px;
  font-family:'Cinzel',serif;text-decoration:none;
}

/* ── Admin dropdown (injected by nav-auth.js when is_admin) ──────────── */
.nav-dropdown{position:relative;display:flex}
.nav-dropdown .nav-trigger{
  background:none;border:none;
  color:#DAA520;
  font-family:'Cinzel',serif;
  font-size:12px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:8px 14px;
  cursor:pointer;
  transition:color 0.2s;
  display:flex;align-items:center;gap:6px;
}
.nav-dropdown .nav-trigger:hover,.nav-dropdown .nav-trigger.active{color:#f0c040}
.nav-arrow{font-size:10px;opacity:0.7}
.nav-dropdown-menu{
  display:none;position:absolute;top:100%;left:0;
  background:rgba(26,22,16,0.97);
  border:1px solid var(--nav-hair-2);
  border-radius:4px;
  padding:6px;min-width:180px;
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
  z-index:1001;
  backdrop-filter:blur(12px);
}
.nav-dropdown:hover .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{
  display:block;padding:9px 14px;
  color:var(--nav-text-dim);text-decoration:none;
  font-family:'Cinzel',serif;
  font-size:12px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;
  border-radius:3px;transition:all 0.15s;
}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,0.06);color:var(--nav-cream)}
.nav-dropdown-menu a.active{color:#DAA520;background:rgba(218,165,32,0.08)}
.nav-dropdown-menu .nav-menu-divider{height:1px;background:rgba(255,255,255,0.08);margin:4px 2px}

.nav-submenu{position:relative}
.nav-submenu > .nav-submenu-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:9px 14px;
  color:var(--nav-text-dim);
  font-family:'Cinzel',serif;
  font-size:12px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;
  border-radius:3px;background:none;border:none;cursor:pointer;
  text-align:left;
}
.nav-submenu > .nav-submenu-toggle:hover,.nav-submenu:hover > .nav-submenu-toggle{
  background:rgba(255,255,255,0.06);color:var(--nav-cream);
}
.nav-submenu > .nav-submenu-toggle::after{content:'\25C2';font-size:9px;opacity:0.5}
.nav-submenu-panel{
  display:none;position:absolute;right:100%;top:-6px;margin-right:4px;
  background:rgba(26,22,16,0.97);
  border:1px solid var(--nav-hair-2);border-radius:4px;
  padding:6px;min-width:160px;
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
  z-index:1002;backdrop-filter:blur(12px);
}
.nav-submenu:hover > .nav-submenu-panel{display:block}
.nav-submenu-panel a{
  display:block;padding:9px 14px;
  color:var(--nav-text-dim);text-decoration:none;
  font-family:'Cinzel',serif;
  font-size:12px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;
  border-radius:3px;transition:all 0.15s;
}
.nav-submenu-panel a:hover{background:rgba(255,255,255,0.06);color:var(--nav-cream)}
.nav-submenu-panel a.active{color:#DAA520;background:rgba(218,165,32,0.08)}

/* ── Mobile tweaks ───────────────────────────────────────────────────── */
@media(max-width:900px){
  nav#site-nav{padding:0 14px;height:60px;gap:6px}
  .nav-mark{height:36px}
  .nav-home{margin-right:10px}
  .nav-wm{padding:8px 10px;font-size:12px;letter-spacing:1.5px;gap:7px}
  .nav-wm::before{width:5px;height:5px}
  .nav-link{padding:8px 10px;font-size:12px;letter-spacing:1.5px}
  .miniplayer-title{display:none}
  .online{padding-left:10px;font-size:11px}
  #online-label{display:none}
}
@media(max-width:640px){
  nav#site-nav{padding:0 10px;height:56px}
  .nav-mark{height:30px}
  .nav-link,.nav-wm{padding:6px 8px;font-size:11px;letter-spacing:1.2px}
  .miniplayer{padding:5px 10px 5px 6px}
  .miniplayer-btn{width:22px;height:22px;font-size:10px}
  .online{display:none}
}