/* ═══════════ NAVBAR ═══════════ */
.nav-logo-road{
  position:relative;
  width:88px;height:38px;
  background:linear-gradient(180deg,var(--bg2) 0%,var(--bg3) 100%);
  border-radius:11px;
  border:1.5px solid rgba(99,102,241,.35);
  overflow:hidden;
  box-shadow:0 3px 14px rgba(99,102,241,.3);
  flex-shrink:0;
}
.road-track{
  position:absolute;bottom:6px;left:0;right:0;height:3px;
  background:repeating-linear-gradient(
    to left,
    rgba(255,255,255,.45) 0px,
    rgba(255,255,255,.45) 16px,
    transparent 16px,
    transparent 30px
  );
  background-size:30px 100%;
  animation:road-scroll 0.55s linear infinite;
}
.road-line{display:none}
.road-track::before{display:none!important}
.road-track::after{display:none!important}
.road-car{
  position:absolute;
  bottom:0px;
  animation:car-drive-nav 3.5s ease-in-out infinite;
}
.road-car-police{
  animation:car-drive-nav 3.5s .9s ease-in-out infinite;
}
.plight-r{animation:plight 0.28s linear infinite}
.plight-b{animation:plight 0.28s .14s linear infinite}
.car-wh{
  transform-box:fill-box;transform-origin:center;
  animation:wh-spin 0.4s linear infinite;
}
.car-hl{animation:hl-pulse 1.2s ease-in-out infinite}

.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:62px;
  width:100%;max-width:100vw;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;
  background:rgba(var(--bg-rgb,7,16,31),.92);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.nav-logo{display:flex;align-items:center;gap:10px;cursor:pointer}
.nav-logo-mark{
  width:38px;height:38px;border-radius:11px;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 14px rgba(99,102,241,.45);
}
.nav-logo-mark svg{width:22px;height:22px}
.nav-logo-text{
  font-size:16px;font-weight:900;letter-spacing:-.2px;
  background:var(--grad);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.nav-links{display:flex;gap:2px}
.nav-link{
  padding:7px 12px;border-radius:9px;
  font-size:13px;font-weight:700;font-family:var(--font);
  color:var(--muted);background:none;border:none;cursor:pointer;
  transition:color .15s, background .15s, transform .18s;
  position:relative;
}
.nav-link::after{
  content:'';
  position:absolute;bottom:3px;left:50%;right:50%;
  height:2px;border-radius:2px;
  background:var(--grad);
  transition:left .22s ease, right .22s ease;
}
.nav-link:hover::after,.nav-link.active::after{left:12%;right:12%}
.nav-link:hover{
  color:var(--text);background:var(--card2);
  transform:translateY(-2px);
}
.nav-link:active{transform:translateY(0) scale(.96)}
.nav-link.active{color:var(--text);background:var(--card2)}
.nav-right{display:flex;align-items:center;gap:8px}

.stat-pill{
  display:flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:20px;
  font-size:12px;font-weight:900;font-family:var(--font);
}
.stat-pill.xp  {background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.22);color:var(--indigo)}
.stat-pill.fire{background:rgba(245,158,11,.1) ;border:1px solid rgba(245,158,11,.2) ;color:#fcd34d}

/* ── THEME TOGGLE ── */
.theme-toggle{
  width:38px;height:38px;border-radius:50%;
  background:var(--card2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:17px;transition:all .25s;
  flex-shrink:0;
}
.theme-toggle:hover{transform:rotate(20deg);}

/* ── BUTTONS ── */
.btn{
  padding:8px 17px;border-radius:10px;
  font-family:var(--font);font-size:13px;font-weight:800;
  border:none;cursor:pointer;transition:all .18s;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 3px 14px rgba(99,102,241,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.5)}
.btn-ghost{background:var(--card2);border:1px solid var(--border2);color:var(--muted)}
.btn-ghost:hover{color:var(--text);background:rgba(255,255,255,.1)}

/* ── DESKTOP: hide mobile-only elements ── */
#nav-mob-brand{display:none}
#nav-mob-char{display:none}

/* ── MOBILE ── */
@media(max-width:600px){
  /* flex space-between: [car+road RIGHT] ... [stats+avatar LEFT] */
  .navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 12px;
  }
  /* car+road: show on mobile right */
  .nav-logo{display:flex;align-items:center}
  .nav-logo-road{display:flex!important}
  #nav-brand-text{display:none!important}
  /* brand text: centered absolutely */
  #nav-mob-brand{
    display:flex!important;
    position:absolute;
    left:0;right:0;
    top:50%;
    transform:translateY(-50%) translateX(18px);
    margin:0 auto;
    width:-webkit-fit-content;
    width:fit-content;
    flex-direction:column;
    align-items:center;
    pointer-events:auto;
    z-index:1;
  }
  /* stats+avatar: show on mobile left */
  .nav-right{display:flex!important;align-items:center;gap:4px;position:relative;z-index:2}
  /* hide rest */
  .nav-links{display:none!important}
  #nav-mob-char{display:none!important}
  .navbar .theme-toggle{display:none!important}
  .nav-xp-wrap{display:none!important}
  .nav-stats-sep{display:none!important}
  #nav-username{display:none!important}
  .nav-stats-cluster{padding:3px 8px!important;gap:5px!important}
  .nav-avatar-btn>svg{display:none!important}
  .nav-avatar-btn{
    padding:4px 6px!important;
    border-radius:12px!important;
    position:relative!important;
  }
  .nav-avatar-btn #nav-avatar-wrap{
    width:34px!important;
    height:34px!important;
    border-radius:10px!important;
    overflow:visible!important;
  }
  .nav-avatar-btn #nav-avatar-wrap svg{
    width:52px!important;
    height:52px!important;
  }
  .nav-avatar-btn::after{
    content:'⚙️';
    position:absolute;
    bottom:-4px;
    left:-4px;
    font-size:11px;
    line-height:1;
    background:var(--bg2);
    border-radius:50%;
    padding:2px;
    border:1px solid var(--border2);
  }
  #nav-guest{display:none!important}
}