/* ══════════════════════════════════════════════════════════
   TORIXPLAY — shared header & footer styles
   Loaded on every page so the nav and footer look identical.
   ══════════════════════════════════════════════════════════ */

/* Fallback vars (in case a page didn't define them) */
:root{
  --tx-bg:#0a0f17; --tx-bg2:#0e1520; --tx-border:#243448; --tx-border2:#2e4058;
  --tx-gold:#d4920a; --tx-gold2:#f0aa18; --tx-text:#e2ecf7; --tx-muted:#6a83a2; --tx-muted2:#4a6080;
}

/* ── Header ── */
.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:16px;
  padding:0 24px;height:64px;
  background:rgba(14,21,32,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border,var(--tx-border));
}
.nav .brand{
  display:flex;align-items:center;gap:11px;
  font-size:20px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold,var(--tx-gold));
  text-decoration:none;
}
.nav .brand svg{width:32px;height:32px;flex-shrink:0;}
.nav .spacer{flex:1;}
.nav .nav-btn{
  padding:9px 20px;border-radius:9px;
  background:var(--gold,var(--tx-gold));color:#160c00;
  font-size:14px;font-weight:800;letter-spacing:.04em;
  cursor:pointer;border:0;text-decoration:none;white-space:nowrap;
}
.nav .nav-btn:hover{background:var(--gold2,var(--tx-gold2));}

/* ── Footer ── */
.footer{
  margin-top:auto;
  background:#0e1520;
  border-top:1px solid var(--border,var(--tx-border));
  padding:28px 24px;
}
.footer-in{
  max-width:1160px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.footer-brand{
  display:flex;align-items:center;gap:9px;
  font-size:16px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold,var(--tx-gold));
}
.footer-brand svg{width:24px;height:24px;flex-shrink:0;}
.footer small{font-size:12px;color:var(--muted2,var(--tx-muted2));}
.footer .age{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  border:2px solid var(--muted2,var(--tx-muted2));
  font-size:10px;font-weight:800;color:var(--muted,var(--tx-muted));
}

@media (max-width:600px){
  .nav{gap:10px;padding:0 14px;}
  .footer-in{justify-content:center;text-align:center;}
}