/* Top bar shared by every page: brand left, menu in the far top-right corner.
   Self-contained (own font and sizes) so it renders identically on every page.
   Mobile: CSS-only hamburger (checkbox + label), no JavaScript. */
header.top { position:relative; z-index:10; width:100%; min-height:40px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex:none;
       font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.home { display:flex; align-items:center; gap:8px; font-weight:700; color:#f4f6ff; text-decoration:none; }
.home svg { width:26px; height:26px; }
.home span { color:#ffb454; }
.home.is-home { visibility:hidden; }
.nav { display:flex; gap:4px; justify-content:flex-end; }
.nav a { font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:#a9b1d6; text-decoration:none; white-space:nowrap;
         padding:6px 10px; border:1px solid transparent; border-radius:999px; transition:color .15s, background .15s; }
.nav a:hover, .nav a:focus-visible { color:#f4f6ff; background:#ffffff14; }
.nav a[aria-current="page"] { color:#ffb454; }
.nav a.nav-lb { display:inline-flex; align-items:center; gap:7px; color:#ffb454; border-color:#ffb45466; background:#ffb45414; }
.nav a.nav-lb:hover, .nav a.nav-lb:focus-visible, .nav a.nav-lb[aria-current="page"] { color:#0f1226; background:#ffb454; border-color:#ffb454; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 #4ade8099; animation:pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 7px #4ade8000; } 100% { box-shadow:0 0 0 0 #4ade8000; } }

/* "Info" parent: Roadmap / Changelog / Status. Desktop opens a dropdown on hover or keyboard
   focus (:focus-within), no JS. .nav-info.on marks it active (set per page, like aria-current). */
.nav-info { position:relative; }
.nav-info-btn { font:inherit; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:#a9b1d6;
                background:none; border:1px solid transparent; border-radius:999px; padding:6px 10px; cursor:pointer;
                transition:color .15s, background .15s; }
.nav-info-btn:hover, .nav-info-btn:focus-visible, .nav-info:focus-within .nav-info-btn { color:#f4f6ff; background:#ffffff14; }
.nav-info.on .nav-info-btn { color:#ffb454; }
.nav-info-menu { position:absolute; top:calc(100% + 6px); right:0; min-width:150px; display:flex; flex-direction:column; gap:2px; padding:6px;
                 border:1px solid #ffffff2a; border-radius:14px; background:#151a36f2; backdrop-filter:blur(10px);
                 box-shadow:0 12px 32px #00000066; opacity:0; visibility:hidden; transform:translateY(-4px) scale(.98); transform-origin:top right;
                 transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.nav-info:hover .nav-info-menu, .nav-info:focus-within .nav-info-menu {
  opacity:1; visibility:visible; transform:none; transition:opacity .15s ease, transform .15s ease; }
@media (prefers-reduced-motion: reduce) { .nav-info-menu { transition:none; } }

/* Hamburger: hidden on desktop. */
.menu-toggle { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.burger { display:none; }

@media (max-width:640px) {
  .burger { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; cursor:pointer;
            border:1px solid #ffffff2a; background:#ffffff14; }
  .burger span, .burger span::before, .burger span::after { display:block; width:18px; height:2px; border-radius:2px; background:#f4f6ff;
            transition:transform .25s ease, background .25s ease; }
  .burger span { position:relative; }
  .burger span::before, .burger span::after { content:""; position:absolute; left:0; }
  .burger span::before { transform:translateY(-6px); }
  .burger span::after { transform:translateY(6px); }
  .menu-toggle:checked + .burger span { background:transparent; }
  .menu-toggle:checked + .burger span::before { transform:rotate(45deg); }
  .menu-toggle:checked + .burger span::after { transform:rotate(-45deg); }
  .menu-toggle:focus-visible + .burger { outline:2px solid #ffb454; outline-offset:2px; }

  .nav { position:absolute; top:calc(100% + 8px); right:0; min-width:210px; flex-direction:column; align-items:stretch; gap:4px; padding:8px;
         border:1px solid #ffffff2a; border-radius:16px; background:#151a36f2; backdrop-filter:blur(10px);
         box-shadow:0 12px 32px #00000066; opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transform-origin:top right;
         transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  .nav a { padding:10px 14px; font-size:.85rem; }
  .menu-toggle:checked ~ .nav { opacity:1; visibility:visible; transform:none; transition:opacity .2s ease, transform .2s ease; }

  /* Info becomes a plain section label with its three links always shown, indented, below it —
     no hover dropdown on touch. */
  .nav-info { border-top:1px solid #ffffff1a; margin-top:4px; padding-top:4px; }
  .nav-info-btn { display:block; width:100%; text-align:left; padding:10px 14px 2px; cursor:default; }
  .nav-info-btn:hover, .nav-info-btn:focus-visible, .nav-info:focus-within .nav-info-btn { background:none; color:#a9b1d6; }
  .nav-info-menu { position:static; flex-direction:column; padding:0; margin:0; border:0; background:none; box-shadow:none;
                   opacity:1; visibility:visible; transform:none; transition:none; }
  .nav-info-menu a { padding-left:26px; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation:none; } .nav, .burger span, .burger span::before, .burger span::after { transition:none; } }

/* Tap outside the open menu closes it: an invisible full-screen label for the same checkbox. */
.scrim { display:none; }
@media (max-width:640px) {
  .burger, .nav { position:relative; z-index:2; }
  .nav { position:absolute; }
  .menu-toggle:checked ~ .scrim { display:block; position:fixed; inset:0; z-index:1; cursor:default; -webkit-tap-highlight-color:transparent; }
}

/* Sponsor line at the very bottom of every page (moved here from index.html so it is one rule site-wide). */
.sponsor { display:inline-flex; flex:none; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px;
           margin-top:24px; padding:22px 16px 7px; border-top:1px solid var(--line, #ffffff2a); color:var(--muted, #a9b1d6); text-decoration:none;
           font:500 .7rem/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:.16em; text-transform:uppercase; opacity:.55; transition:opacity .2s; }
.sponsor:hover, .sponsor:focus-visible { opacity:1; }
.sponsor img { height:13px; width:auto; display:block; }

/* Top-left beta badge: playful, links to the changelog. Lives in the top bar, so the nav never shifts. */
.beta-badge { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:7px; font:600 .72rem/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
              letter-spacing:.12em; text-transform:uppercase; color:#0f1226; background:linear-gradient(135deg,#ffb454,#ffd28a); padding:8px 12px;
              border-radius:999px; text-decoration:none; box-shadow:0 4px 18px #ffb45440; transform:rotate(-2deg); transition:transform .2s ease, box-shadow .2s ease; }
.beta-badge:hover, .beta-badge:focus-visible { transform:rotate(0) scale(1.05); box-shadow:0 6px 24px #ffb45466; }
.beta-badge i { font-style:normal; animation:twinkle 2.4s ease-in-out infinite; }
.beta-badge span { font-size:.62rem; letter-spacing:.06em; background:#0f12261f; padding:3px 6px; border-radius:999px; }
.beta-badge::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 35%,#ffffff8c 50%,transparent 65%);
                     transform:translateX(-120%); animation:shine 4s ease-in-out infinite 1s; }
@keyframes shine { 0%, 70% { transform:translateX(-120%); } 100% { transform:translateX(120%); } }
@keyframes twinkle { 0%, 100% { opacity:1; transform:scale(1) rotate(0); } 50% { opacity:.55; transform:scale(.8) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .beta-badge i, .beta-badge::after { animation:none; } }

/* Home icon: first item of the nav, left of Leaderboard (text label only in the mobile menu). */
.nav a.nav-home { display:inline-flex; align-items:center; gap:8px; padding:4px 8px; }
.nav a.nav-home svg { width:24px; height:24px; display:block; transition:transform .2s ease; }
.nav a.nav-home:hover svg, .nav a.nav-home:focus-visible svg { transform:scale(1.08) rotate(-4deg); }
.nav a.nav-home span { display:none; }
@media (max-width:640px) { .nav a.nav-home span { display:inline; } .nav a.nav-home svg { width:20px; height:20px; } }

/* The hidden attribute always wins over component display rules (admin bar, "new posts" pill, profile line). */
[hidden] { display:none !important; }
/* Leaderboard hover menu (Stats, Coin Log): reuses the Info dropdown; opens under the pill, left-aligned.
   .on = current page is Stats or Coin Log, so the Leaderboard pill shows as active. */
.nav-lb-wrap .nav-info-menu { left:0; right:auto; }
.nav-lb-wrap.on a.nav-lb { color:#0f1226; background:#ffb454; border-color:#ffb454; }
@media (max-width:640px) {
  .nav-lb-wrap { border-top:0; margin-top:0; padding-top:0; }
}