/* ========================================================================
   HL2MP Ranked — Site-wide base styles (global only)
   - Tokens, reset, layout, header/nav, buttons, utilities
   - Generic media/card styles
   - Flash messages
   - Starfield background (global)
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* palette */
  --hue-lambda: 28;     /* orange */
  --hue-combine: 195;   /* cyan   */

  --accent:   hsl(var(--hue-lambda) 100% 58%);
  --accent-2: hsl(var(--hue-combine) 92% 56%);

  --ink:   #e8eef7;
  --muted: #9aa8bd;
  --line:  #1a2a40;

  --bg:   #080b12;
  --bg-1: #0a0f18;
  --bg-2: #0c131f;

  --radius: 12px;
  --ease: cubic-bezier(.5,1,.89,1);
}

/* ---------- Base / reset ---------- */
*{ box-sizing:border-box; }
html, body { height: 100%; }
body{
  margin:0;
  color:var(--ink);
  font:15px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 10% -20%, #162133 0%, transparent 60%),
    radial-gradient(900px 500px  at 110% 120%, #1b1022 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

a{ color:var(--accent-2); text-decoration:none; }
a:hover{ text-decoration:underline; }
.muted{ color:var(--muted); }

/* ---------- Layout wrappers ---------- */
main{ max-width:1100px; margin:0 auto; padding:12px; }
section{ margin:16px 0 22px; }
h1,h2,h3{ margin:0 0 8px; line-height:1.25; }
h2{ font-size:22px; }
h3{ font-size:18px; color:#cbd8ea; }

/* ---------- Header / nav / userbox ---------- */
.cl-header{ border-bottom:1px solid #142033; background:#0b111c; }
.cl-header .bar{
  max-width:1100px; margin:0 auto; padding:10px 12px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}

.brand{
  font-weight:800; letter-spacing:.4px; color:#cfe4ff;
  padding:6px 10px; border:1px solid var(--line); border-radius:10px;
  background:linear-gradient(180deg, #0f1827, #0b121d);
}

.cl-nav{ flex:1 1 auto; }
.cl-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.cl-nav a{
  display:block; padding:6px 10px; border:1px solid var(--line); border-radius:10px;
  background:linear-gradient(180deg, #0f1827, #0b121d);
  color:#8ecbff; text-decoration:none;
}
.cl-nav a:hover{ box-shadow:0 0 0 1px #1c3453 inset; }
.cl-nav .badge{
  display:inline-block; margin-left:6px; padding:0 6px; line-height:18px; font-size:12px;
  border-radius:9px; color:#00141f; background:#7bd0ff; vertical-align:baseline;
}

.userbox{ display:flex; align-items:center; gap:8px; }
.userbox .avatar{ width:32px; height:32px; border-radius:6px; display:block; }

/* Buttons (used across pages, incl. Steam sign-in + theme toggle) */
.btn{
  display:inline-block; padding:6px 10px; border:1px solid var(--line);
  border-radius:10px; background:#0e1725; color:#9ed1ff; cursor:pointer;
}
.btn-small{ padding:4px 8px; font-size:13px; }

/* ---------- Generic cards / links ---------- */
.box{
  border:1px solid var(--line); border-radius:14px; padding:14px;
  background:linear-gradient(180deg, #0e1725cc, #0b121dcc);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.box-link{
  display:inline-block; padding:6px 10px; border:1px solid var(--line); border-radius:10px;
  background:#0e1725; color:#8ecbff; text-decoration:none;
}
.box-link:hover{ text-decoration:underline; }

/* ---------- Generic media wrapper ---------- */
.media-frame{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#000; }
.media{ display:block; width:100%; height:auto; }
.wide32x9 .media{ aspect-ratio:32/9; object-fit:cover; background:#000; }

/* ---------- Flash messages (rendered in header.php) ---------- */
.flash{
  padding:10px 12px; margin:12px 0; border-radius:8px; border:1px solid transparent;
  font-weight:600;
}
.flash.success{
  background:#0f2a18; border-color:#1e7f4f; color:#c9f3da;
}
.flash.error{
  background:#2a1114; border-color:#b24a5a; color:#ffd8de;
}

/* ---------- Starfield (global) ---------- */
/* Keep content above the fixed star layers */
header, main, footer, .site, .page-wrap { position: relative; z-index: 1; }

/* Base layer styling shared by all star layers */
#stars, #stars2, #stars3{
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; background-repeat: repeat;
  will-change: background-position;
}

/* Layer 1: many tiny stars (fastest) */
#stars{
  opacity: .55;
  background-size: 800px 800px;
  background-image:
    radial-gradient(1px 1px at 7%   12%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 18%  78%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 28%  34%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 39%  62%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 51%  22%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 63%  88%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 72%  15%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 84%  54%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 93%  31%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 11%  45%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 22%  12%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 33%  83%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 44%  10%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 55%  71%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 66%  40%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 77%  96%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 88%  70%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 96%  84%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 5%   92%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 15%  57%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 26%  68%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 37%  27%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 48%  48%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 59%  30%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 70%  44%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 81%  23%, #fff 1px, transparent 1.2px),
    radial-gradient(1px 1px at 92%  11%, #fff 1px, transparent 1.2px);
  animation: starScroll1 120s linear infinite;
}

/* Layer 2: fewer, slightly larger (slower) */
#stars2{
  opacity: .45;
  background-size: 1000px 1000px;
  background-image:
    radial-gradient(1.5px 1.5px at 9%   22%, #fff 1.5px, transparent 1.7px),
    radial-gradient(1.5px 1.5px at 21%  66%, #fff 1.5px, transparent 1.7px),
    radial-gradient(1.5px 1.5px at 34%  12%, #fff 1.5px, transparent 1.7px),
    radial-gradient(1.5px 1.5px at 47%  78%, #fff 1.5px, transparent 1.7px),
    radial-gradient(1.5px 1.5px at 59%  35%, #fff 1.5px, transparent 1.7px),
    radial-gradient(1.5px 1.5px at 72%  58%, #fff 1.5px, transparent 1.7px),
    radial-gradient(1.5px 1.5px at 83%  14%, #fff 1.5px, transparent 1.7px),
    radial-gradient(1.5px 1.5px at 93%  82%, #fff 1.5px, transparent 1.7px),
    radial-gradient(1.5px 1.5px at 13%  86%, #fff 1.5px, transparent 1.7px),
    radial-gradient(1.5px 1.5px at 28%  46%, #fff 1.5px, transparent 1.7px),
    radial-gradient(1.5px 1.5px at 42%  26%, #fff 1.5px, transparent 1.7px),
    radial-gradient(1.5px 1.5px at 67%  90%, #fff 1.5px, transparent 1.7px),
    radial-gradient(1.5px 1.5px at 78%  72%, #fff 1.5px, transparent 1.7px),
    radial-gradient(1.5px 1.5px at 88%  38%, #fff 1.5px, transparent 1.7px);
  animation: starScroll2 200s linear infinite;
}

/* Layer 3: biggest/rarest (slowest) */
#stars3{
  opacity: .35;
  background-size: 1200px 1200px;
  background-image:
    radial-gradient(2px 2px at 12%  32%, #fff 2px, transparent 2.2px),
    radial-gradient(2px 2px at 36%  68%, #fff 2px, transparent 2.2px),
    radial-gradient(2px 2px at 58%  18%, #fff 2px, transparent 2.2px),
    radial-gradient(2px 2px at 74%  54%, #fff 2px, transparent 2.2px),
    radial-gradient(2px 2px at 88%  82%, #fff 2px, transparent 2.2px),
    radial-gradient(2px 2px at 22%  88%, #fff 2px, transparent 2.2px),
    radial-gradient(2px 2px at 46%  42%, #fff 2px, transparent 2.2px),
    radial-gradient(2px 2px at 70%  26%, #fff 2px, transparent 2.2px);
  animation: starScroll3 320s linear infinite;
}

/* Scroll “upwards” for parallax feel */
@keyframes starScroll1 { from { background-position: 0 0; } to { background-position: 0 -2000px; } }
@keyframes starScroll2 { from { background-position: 0 0; } to { background-position: 0 -2000px; } }
@keyframes starScroll3 { from { background-position: 0 0; } to { background-position: 0 -2000px; } }

/* Respect reduced motion: freeze the layers */
@media (prefers-reduced-motion: reduce){
  #stars, #stars2, #stars3 { animation: none; }
}