/* Death Date 3000 — shared nav, theme, and menu styles.
   Linked from every page so there's exactly one copy to maintain. */

:root{
  --bg: #150a1f; --bg-alt: #1f1030; --panel: #1a0e28;
  --ink: #f4ecd8; --ink-dim: #cabfae;
  --orange: #ff6b35; --yellow: #f7c548; --mint: #6fffb0; --pink: #ff3ea5;
  --border: #3a2250; --shadow: rgba(255,107,53,0.35);
}
[data-theme="light"]{
  --bg: #f0e6cc; --bg-alt: #e6d8b5; --panel: #fbf5e4;
  --ink: #241633; --ink-dim: #5a4a3f;
  --orange: #c94f1e; --yellow: #a3780f; --mint: #227a52; --pink: #c22a7c;
  --border: #cbb98e; --shadow: rgba(201,79,30,0.25);
}
[data-theme="truedark"]{
  --bg: #050208; --bg-alt: #0c0612; --panel: #0a0510;
  --ink: #f4ecd8; --ink-dim: #93887c;
  --border: #211730; --shadow: rgba(255,107,53,0.3);
}

*{ box-sizing:border-box; -webkit-text-size-adjust:100%; }
html{ overflow-x:hidden; }

.nav-wrap-outer{ max-width:720px; margin:0 auto; }
.nav-row, .toggle-row{
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; margin:0 auto 8px; flex-wrap:wrap; max-width:720px;
}

.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--panel); border:2px solid var(--border); border-radius:999px;
  padding:8px 16px; color:var(--ink); text-decoration:none;
  font-family:'VT323', monospace; font-size:17px; letter-spacing:1px;
}
.nav-link:hover{ border-color:var(--orange); color:var(--orange); }

.icon-only-btn, .icon-circle-btn{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  background:var(--panel); border:2px solid var(--border); border-radius:50%;
  cursor:pointer; font-size:18px; color:var(--ink); padding:0; text-decoration:none;
}
.icon-only-btn:hover, .icon-circle-btn:hover{ border-color:var(--orange); }
.icon-only-btn:focus-visible, .icon-circle-btn:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

.left-group, .icon-group, .nav-group{ display:flex; align-items:center; gap:8px; }

.menu-wrap{ position:relative; }
.menu-btn{
  display:flex; align-items:center; gap:8px;
  background:var(--panel); border:2px solid var(--border); border-radius:999px;
  padding:9px 16px; font-family:'VT323', monospace; font-size:16px; letter-spacing:1px;
  color:var(--ink); cursor:pointer;
}
.menu-btn:hover{ border-color:var(--orange); color:var(--orange); }
.menu-icon{ font-size:18px; line-height:1; }
@media (max-width:480px){
  .menu-text{ display:none; }
  .menu-btn{ padding:9px 12px; }
}
.menu-dropdown{
  position:absolute; top:calc(100% + 8px); left:0;
  background:var(--panel); border:2px solid var(--border); border-radius:10px;
  padding:8px; display:flex; flex-direction:column; gap:4px; min-width:170px;
  z-index:50; box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.menu-dropdown a{
  padding:10px 12px; border-radius:6px; font-size:17px; color:var(--ink);
  text-decoration:none; display:flex; align-items:center; gap:8px;
}
.menu-dropdown a:hover{ background:var(--bg); color:var(--orange); }
.menu-dropdown[hidden]{ display:none; }

footer{ text-align:center; margin-top:40px; font-size:13px; color:var(--ink-dim); opacity:.6; }
footer a{ color:var(--ink-dim); }