/* ==========================================================================
   LSPD Portal — Design System
   Tactical / HUD-inspired dark theme. Pure presentation layer.
   ========================================================================== */

:root{
  --lspd-bg:        #05070d;
  --lspd-bg-2:      #0a0e1a;
  --lspd-panel:     #0d1220;
  --lspd-panel-2:   #10162a;
  --lspd-border:    rgba(148,163,184,0.10);
  --lspd-border-hi: rgba(96,165,250,0.35);
  --lspd-blue:      #3b82f6;
  --lspd-cyan:      #22d3ee;
  --lspd-glow:      rgba(59,130,246,0.35);
  /* Season II signature accent — used for season badges, ribbons, and
     highlight moments (rank-up success, top leaderboard, login hero) on
     top of the existing blue/cyan HUD palette, not a replacement for it. */
  --lspd-gold:      #f2b90c;
  --lspd-gold-2:    #ffd873;
  --lspd-violet:    #8b5cf6;
}

html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }

body{
  overflow-x:hidden; max-width:100%;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background-color:var(--lspd-bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(59,130,246,0.14), transparent 60%),
    radial-gradient(ellipse 700px 500px at 110% 10%, rgba(34,211,238,0.08), transparent 60%),
    radial-gradient(ellipse 500px 400px at 50% 120%, rgba(242,185,12,0.05), transparent 60%),
    linear-gradient(rgba(148,163,184,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.05) 1px, transparent 1px);
  background-size:auto,auto,auto,44px 44px,44px 44px;
  background-attachment:fixed;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  animation: bg-drift 60s linear infinite;
}
@keyframes bg-drift{
  0%{ background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100%{ background-position: 0 0, 0 0, 0 0, 88px 88px, 88px 88px; }
}

/* ─── Season II ribbon / marker ─────────────────────────────────────── */
.season-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  background:linear-gradient(135deg, rgba(242,185,12,0.16), rgba(139,92,246,0.10));
  border:1px solid rgba(242,185,12,0.35);
  color:var(--lspd-gold-2);
  font-family:'Rajdhani','Inter',sans-serif; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; font-size:.68rem;
  padding:.3rem .7rem; border-radius:999px;
  box-shadow:0 0 18px rgba(242,185,12,0.18);
}
.season-badge .dot{ width:6px; height:6px; border-radius:999px; background:var(--lspd-gold); box-shadow:0 0 8px var(--lspd-gold); animation:pulse-badge 2s ease-in-out infinite; }

.font-display{ font-family:'Rajdhani','Inter',system-ui,sans-serif; letter-spacing:.01em; }

/* ─── Scrollbars ─────────────────────────────────────────────────────── */
.scrollbar-thin::-webkit-scrollbar{ width:5px; height:5px; }
.scrollbar-thin::-webkit-scrollbar-track{ background:transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb{ background:rgba(96,165,250,0.35); border-radius:999px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover{ background:rgba(96,165,250,0.55); }
*{ scrollbar-width:thin; scrollbar-color:rgba(96,165,250,0.35) transparent; }

/* ─── Surfaces ───────────────────────────────────────────────────────── */
.lspd-panel{
  background:linear-gradient(180deg, var(--lspd-panel-2) 0%, var(--lspd-panel) 100%);
  border:1px solid var(--lspd-border);
  border-radius:1rem;
  position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 24px -12px rgba(0,0,0,0.55);
}
.lspd-panel::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(96,165,250,0.55), transparent);
  border-radius:1rem 1rem 0 0;
  opacity:.6;
}
.lspd-panel-glow:hover{
  border-color:var(--lspd-border-hi);
  box-shadow:0 0 0 1px rgba(59,130,246,0.15), 0 16px 34px -14px rgba(59,130,246,0.25);
  transition:all .25s ease;
}

.glass{
  background:rgba(13,18,32,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* ─── Stat Cards ─────────────────────────────────────────────────────── */
.stat-card{
  position:relative; overflow:hidden;
  border-radius:1rem; border:1px solid var(--lspd-border);
  background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 60%), var(--lspd-panel);
  padding:1.1rem 1.15rem;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.stat-card:hover{ transform:translateY(-3px); border-color:rgba(148,163,184,0.25); box-shadow:0 14px 28px -16px rgba(0,0,0,0.6); }
.stat-card .stat-icon{
  width:2.5rem; height:2.5rem; border-radius:.7rem;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; border-radius:.7rem; transition:all .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, #2563eb, #1d4ed8);
  color:#fff; box-shadow:0 8px 20px -8px rgba(37,99,235,0.6), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn-ghost{
  background:rgba(148,163,184,0.06); color:#e2e8f0; border:1px solid var(--lspd-border);
}
.btn-ghost:hover{ background:rgba(148,163,184,0.12); border-color:rgba(148,163,184,0.25); }

/* ─── Sidebar ────────────────────────────────────────────────────────── */
.sidebar-link{
  position:relative;
  transition:background-color .18s ease, color .18s ease;
}
.sidebar-link::before{
  content:""; position:absolute; left:0; top:50%; translate:0 -50%;
  width:3px; height:0; border-radius:0 4px 4px 0;
  background:linear-gradient(180deg, var(--lspd-cyan), var(--lspd-blue));
  transition:height .18s ease;
}
.sidebar-link.active::before,
.sidebar-link:hover::before{ height:60%; }
.sidebar-link.active{
  background:linear-gradient(90deg, rgba(59,130,246,0.22), rgba(59,130,246,0.05));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,0.25);
}

/* ─── Badge glow / avatar ring ───────────────────────────────────────── */
.badge-glow{ box-shadow:0 0 0 1px rgba(59,130,246,0.25), 0 0 45px rgba(59,130,246,0.28); }
.avatar-ring{ box-shadow:0 0 0 2px var(--lspd-bg), 0 0 0 3px rgba(59,130,246,0.55); }

@keyframes pulse-badge{ 0%,100%{opacity:1} 50%{opacity:.65} }
.badge-pulse{ animation:pulse-badge 3s ease-in-out infinite; }

@keyframes float-y{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.float-y{ animation:float-y 5s ease-in-out infinite; }

@keyframes scan{ 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }
.scanline{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.scanline::after{
  content:""; position:absolute; left:0; right:0; height:40%;
  background:linear-gradient(180deg, transparent, rgba(96,165,250,0.06), transparent);
  animation:scan 6s linear infinite;
}

/* ─── Corner frame accents (tactical HUD feel) ───────────────────────── */
.hud-corners{ position:relative; }
.hud-corners::before,.hud-corners::after{
  content:""; position:absolute; width:18px; height:18px; pointer-events:none;
  border-color:rgba(96,165,250,0.55); opacity:.8;
}
.hud-corners::before{ top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; border-radius:8px 0 0 0; }
.hud-corners::after{ bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; border-radius:0 0 8px 0; }

/* ─── Inputs ─────────────────────────────────────────────────────────── */
.input-field{
  background:rgba(15,20,35,0.8);
  border:1px solid rgba(148,163,184,0.18);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input-field:focus{
  border-color:rgba(59,130,246,0.6);
  box-shadow:0 0 0 3px rgba(59,130,246,0.18);
  background:rgba(15,20,35,0.95);
  outline:none;
}

/* ─── Progress ───────────────────────────────────────────────────────── */
.progress-track{ background:rgba(148,163,184,0.12); }
.progress-fill{
  background:linear-gradient(90deg, #2563eb, #22d3ee);
  box-shadow:0 0 12px rgba(34,211,238,0.5);
}

/* ─── Flash toast ────────────────────────────────────────────────────── */
.toast{
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:toast-in .25s ease;
}
@keyframes toast-in{ from{ opacity:0; transform:translateX(12px);} to{ opacity:1; transform:translateX(0);} }

/* ─── Developer credit chip ──────────────────────────────────────────── */
.dev-credit{ transition:all .2s ease; max-width:2.4rem; overflow:hidden; white-space:nowrap; }
.dev-credit:hover, .dev-credit:focus-within{ transform:translateY(-2px); max-width:14rem; }
.dev-credit span + span{ opacity:0; transition:opacity .15s ease .05s; }
.dev-credit:hover span + span, .dev-credit:focus-within span + span{ opacity:1; }

/* ─── Misc ───────────────────────────────────────────────────────────── */
.divider-fade{ background:linear-gradient(90deg, transparent, rgba(148,163,184,0.25), transparent); height:1px; }

/* ─── Gold / Season II accents ───────────────────────────────────────── */
.avatar-ring-gold{ box-shadow:0 0 0 2px var(--lspd-bg), 0 0 0 3px rgba(242,185,12,0.65), 0 0 16px rgba(242,185,12,0.35); }
.text-gold{ color:var(--lspd-gold-2); }
.border-gold{ border-color:rgba(242,185,12,0.4); }

.sidebar-link.active{
  background:linear-gradient(90deg, rgba(59,130,246,0.22), rgba(139,92,246,0.06));
  box-shadow:inset 0 0 0 1px rgba(59,130,246,0.25), inset 2px 0 0 var(--lspd-gold);
}

/* ─── Cinematic login background ─────────────────────────────────────── */
.login-orb{
  position:absolute; border-radius:999px; filter:blur(70px); pointer-events:none;
  animation: orb-float 14s ease-in-out infinite;
}
@keyframes orb-float{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(20px,-30px) scale(1.08); }
}
@keyframes badge-ring-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.badge-ring-spin{ animation:badge-ring-spin 18s linear infinite; }

@keyframes fade-up{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
.fade-up{ animation:fade-up .6s ease both; }