/* ============================================================================
   SERATH2 — sticky top navigation (markup: user/topnav.php)
   SHARED stylesheet: loaded by the main site (head.php) AND by the web
   ItemShop (itemshop/head.php, absolute /css/topnav.css because that page
   sets <base href="/itemshop/">).
   Both hosts define the same :root palette; the local --tn* vars below carry
   fallbacks so the bar still looks right on a page that does not.
   Everything is scoped under #topnav / .tn-* so it cannot touch host styles,
   and the ul/li/a resets are explicit (the itemshop has no global list reset).
   NOTE: the 1040px burger breakpoint MUST stay in sync with the resize
   handler in user/topnav.php.
   ============================================================================ */
#topnav{
  --tnv:var(--violet,#a974ff);
  --tnvd:var(--violet-deep,#7a3fd6);
  --tnvs:var(--violet-soft,#c9a6ff);
  --tnt:var(--text,#ece7f6);
  --tnm:var(--muted,#9a90b4);
  --tnb:var(--border,rgba(150,96,236,.22));
  position:sticky;top:0;z-index:900;
  background:rgba(10,6,18,.86);border-bottom:1px solid var(--tnb);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 30px -20px rgba(0,0,0,.9);
  font-family:var(--fb),-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px;line-height:1.6;text-align:left}
#topnav *,#topnav *::before,#topnav *::after{box-sizing:border-box}
#topnav ul{list-style:none;margin:0;padding:0}
#topnav li{list-style:none;margin:0;padding:0}
#topnav a{text-decoration:none;transition:.18s}

/* FULL-BLEED on purpose (user requirement): the bar is NOT capped to the
   content max-width, so logo+nav sit hard LEFT and the auth group sits hard
   RIGHT on big screens. Capping it to --maxw parks the buttons ~370px short of
   the right edge on a 1920 screen, which reads as "roughly in the middle".
   Right alignment itself comes from .tn-auth{margin-left:auto}.
   NOTE: an earlier revert of this was a misdiagnosis — the real cause of the
   "everything is on the left" report was the burger breakpoint being raised to
   1100px (viewport flipped into the stacked panel), not this width. */
.tn-inner{padding:0 clamp(16px,3vw,48px);
  display:flex;align-items:center;gap:16px;min-height:58px}

/* small logo — hidden until the hero banner is scrolled past */
.tn-logo{flex:0 0 auto;line-height:0;overflow:hidden;max-width:0;opacity:0;
  transition:max-width .3s ease,opacity .25s ease}
.tn-logo img{display:block;height:30px;width:auto;max-width:none;
  filter:drop-shadow(0 0 10px rgba(169,116,255,.55))}
#topnav.tn-stuck .tn-logo{max-width:170px;opacity:1}

/* The panel MUST fill all remaining width, otherwise the auth group cannot be
   pushed right. `flex:1 1 0%` makes that deterministic (basis 0 + grow), and
   `justify-content:space-between` then pins .tn-nav left / .tn-auth right by
   geometry rather than depending on the auto-margin alone. */
.tn-panel{display:flex;flex:1 1 0%;justify-content:space-between;
  align-items:center;gap:16px;min-width:0}
.tn-nav{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;flex:0 1 auto}
.tn-nav li a{display:block;padding:.5em .78em;border-radius:9px;color:var(--tnt);
  font-weight:500;font-size:.93rem;white-space:nowrap}
.tn-nav li a:hover{background:rgba(169,116,255,.14);color:#fff}
.tn-nav li a.is-active{color:#fff;background:rgba(169,116,255,.18);
  box-shadow:inset 0 -2px 0 var(--tnv)}

.tn-auth{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:nowrap}
/* every auth item is a flex item so all buttons share one vertical centre line */
.tn-auth li{display:flex;align-items:center}
.tn-btn{display:inline-flex;align-items:center;justify-content:center;
  padding:.52em 1.05em;border-radius:9px;font-weight:600;font-size:.9rem;
  white-space:nowrap;color:var(--tnt);border:1px solid var(--tnb);
  background:rgba(255,255,255,.04)}
.tn-btn:hover{color:#fff;border-color:var(--tnv);background:rgba(169,116,255,.16)}
.tn-btn-primary{color:#fff;border-color:transparent;
  background:linear-gradient(180deg,var(--tnv),var(--tnvd));
  box-shadow:0 8px 20px -10px rgba(122,63,214,.7)}
.tn-btn-primary:hover{color:#fff;filter:brightness(1.1)}
/* ItemShop button while you are actually inside the shop */
.tn-btn.is-current{color:#fff;border-color:var(--tnv);background:rgba(169,116,255,.2)}
.tn-coins{display:inline-flex;align-items:center;gap:6px;padding:.42em .8em;
  border-radius:9px;border:1px solid var(--tnb);background:rgba(255,255,255,.04);
  font-size:.86rem;color:var(--tnm);white-space:nowrap}
.tn-coins b{color:var(--tnvs);font-weight:700}

/* burger (hidden on desktop) */
.tn-burger{display:none;flex:0 0 auto;margin-left:auto;
  width:42px;height:38px;padding:0;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:rgba(255,255,255,.04);border:1px solid var(--tnb);border-radius:10px}
.tn-burger span{display:block;width:20px;height:2px;border-radius:2px;
  background:var(--tnt);transition:.22s}
.tn-burger:hover{border-color:var(--tnv)}
.tn-burger:hover span{background:#fff}
#topnav.tn-open .tn-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#topnav.tn-open .tn-burger span:nth-child(2){opacity:0}
#topnav.tn-open .tn-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- narrow desktop (1041–1240): tighten spacing so the single row keeps
        fitting all the way down to the burger breakpoint, even with a long
        username plus the SÉ chip ---- */
@media(max-width:1240px){
  .tn-inner{gap:12px}
  .tn-panel{gap:12px}
  .tn-nav li a{padding:.5em .6em;font-size:.9rem}
  .tn-auth{gap:8px}
  .tn-btn{padding:.5em .85em;font-size:.87rem}
  .tn-coins{padding:.4em .65em;font-size:.82rem}
  #topnav.tn-stuck .tn-logo{max-width:130px}
}

/* ---- tablet + mobile: everything collapses into the burger panel ---- */
@media(max-width:1040px){
  .tn-burger{display:flex}
  .tn-inner{min-height:56px;gap:12px}
  /* logo always visible here — the bar is the only nav */
  .tn-logo{max-width:170px;opacity:1}
  .tn-panel{position:absolute;left:0;right:0;top:100%;display:none;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:8px 0 14px;
    background:rgba(12,7,22,.98);border-bottom:1px solid var(--tnb);
    box-shadow:0 26px 44px -22px rgba(0,0,0,.92);
    max-height:calc(100vh - 56px);overflow-y:auto;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  #topnav.tn-open .tn-panel{display:flex}
  .tn-nav{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .tn-nav li a{padding:.85em 22px;border-radius:0;font-size:.98rem;
    border-bottom:1px solid rgba(255,255,255,.06)}
  .tn-nav li a.is-active{box-shadow:inset 3px 0 0 var(--tnv)}
  .tn-auth{flex-direction:column;align-items:stretch;gap:10px;
    margin:0;width:100%;padding:14px 20px 2px}
  .tn-auth li{width:100%}
  .tn-btn{width:100%;padding:.68em 1.05em;font-size:.95rem}
  .tn-coins{width:100%;justify-content:center;padding:.55em .8em}
}
@media(max-width:620px){
  .tn-logo img{height:26px}
}
@media(max-width:400px){
  .tn-logo img{height:24px}
}