:root { --bg:#0d1117; --panel:#111827; --ink:#f3f4f6; --muted:#9ca3af; --accent:#00bcd4; --barbg:#374151; --fill1:#00bcd4; --fill2:#0288d1; --card:#1f2937; }
*{box-sizing:border-box}

/* Base + stacking context for backgrounds */
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif;
  background:var(--bg);
  color:var(--ink);
  position: relative;
}

/* Starfield across entire site (slightly brighter), above body background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,0.22) 99%, transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 80%, rgba(255,255,255,0.18) 99%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 10%, rgba(255,255,255,0.18) 99%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 60%, rgba(255,255,255,0.16) 99%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 40%, rgba(255,255,255,0.16) 99%, transparent 100%),
    linear-gradient(180deg, rgba(0,188,212,0.05), rgba(0,0,0,0));
  background-repeat:no-repeat;
}

/* One-time fade-in */
body{ opacity:0; animation:bodyfade .9s ease .05s forwards; }
@keyframes bodyfade{ to{ opacity:1 } }

/* Fixed full-face moon on top-right; semi-transparent; absolute path */
body::after{
  content:"";
  position:fixed;
  right:4vw; top:86px;
  width:38vw; max-width:700px; aspect-ratio:1/1;
  background-image: url('/assets/moon.webp');
  background-size: contain; background-repeat: no-repeat; background-position: top right;
  opacity: .25; pointer-events:none; z-index:0;
}
/* Fallback if the browser doesn't support WebP */
.no-webp body::after{
  background-image: url('/assets/moon.png');
}

/* Ensure content appears above background layers */
main, header, footer{ position:relative; z-index:1; }

/* Header */
.site-header{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  padding:18px 20px; background:var(--panel); border-bottom:1px solid #222;
  position:sticky; top:0; z-index:10;
}
.site-header .left{ display:flex; align-items:center; }
.site-header .right{ display:flex; justify-content:flex-end; align-items:center; }
.site-header .logo img{ height:130px; max-height:130px; display:block; }
.nav a{ color:var(--ink); text-decoration:none; margin-left:14px; opacity:.85; }
.nav a:hover{ opacity:1; color:var(--accent); }
.header-updated{ color:var(--muted); font-size:13px; opacity:.9; white-space:nowrap; }
@media (max-width:640px){
  .header-updated{ display:none; }
  .site-header{ grid-template-columns:auto 1fr; }
  .site-header .right{ display:none; }
  .site-header .logo img{ height:56px; max-height:56px; }
}

/* Hero */
.hero{ padding:40px 20px; text-align:center; position:relative; overflow:hidden; }
.hero-intro{ padding:48px 20px 10px; text-align:center; }
.tag-hero{ text-align:center; margin:10px auto 18px; max-width:960px; }
.site-title{ font-size:36px; line-height:1.15; margin:0 0 8px 0; }
.site-subtitle{ color:var(--muted); font-size:18px; margin:0; }

/* Competition block with open space above */
.hero-score{ text-align:left; max-width:1000px; margin:0 auto; padding-top:60px; }
.h2-compact{ text-align:center; font-size:22px; margin:14px 0 6px; opacity:.95; }
.tagline{ color:var(--muted); margin-bottom:20px; }
.tagline-centered{ text-align:center; }

/* Scorecards */
.scoregrid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.scorecard.big{ background:var(--card); padding:16px; border-radius:12px; box-shadow:0 0 0 1px #2a3340; }
.scorecard-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.score-badge{ font-weight:700; color:#0b1220; background:var(--accent); padding:6px 10px; border-radius:999px; line-height:1; }
.score-badge.alt{ background:#06b6d4; }
.bar.big{ height:18px; border-radius:999px; background:var(--barbg); overflow:hidden; }
.bar.big .fill{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, var(--fill1), var(--fill2)); transition:width .9s ease; }
.bar.big .fill.alt{ background:linear-gradient(90deg, #06b6d4, #0891b2); }
.breakdown{ list-style:none; padding:0; margin:12px 0 0 0; }
.breakdown li{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #2a3340; }
.breakdown li:last-child{ border-bottom:0; }
.method-note{ text-align:center; color:var(--muted); margin-top:12px; }

/* Sections */
.section{ padding:36px 20px; max-width:1000px; margin:0 auto; }
.section h2{ margin-top:0; }
.muted{ color:var(--muted); }
.scorecards{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.score{ font-size:28px; margin:4px 0 8px; color:var(--accent); }
.news{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.news article{ background:var(--card); padding:16px; border-radius:12px; box-shadow:0 0 0 1px #2a3340; }
.timeline{ list-style:none; padding:0; margin:0; border-left:2px solid #333; margin-left:10px; }
.timeline li{ position:relative; padding:10px 10px 10px 16px; }
.timeline .dot{ width:10px; height:10px; background:var(--accent); border-radius:50%; position:absolute; left:-6px; top:14px; box-shadow:0 0 0 3px rgba(0,188,212,0.2); }
.timeline .dot.future{ background:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,0.2); }
.timeline .when{ color:var(--muted); margin-right:8px; display:inline-block; min-width:100px; }

.aside{ padding:20px; max-width:1000px; margin:0 auto; }
.aside ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.aside li{ background:var(--card); border:1px solid #2a3340; border-radius:12px; padding:12px; }
.aside .tminus{ font-weight:600; color:#fbbf24; margin-left:6px; }

.subscribe{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; max-width:560px; margin:10px auto 0; }
.subscribe input[type=email]{ flex:1; min-width:240px; padding:10px 14px; border-radius:999px; border:1px solid #2a3340; background:#0d1117; color:var(--ink); }
.subscribe button{ padding:10px 16px; border-radius:999px; border:1px solid #2a3340; background:#1f2937; color:var(--ink); cursor:pointer; }
.subscribe button:hover{ box-shadow:0 0 0 3px rgba(0,188,212,0.12); }

.site-footer{ text-align:center; color:var(--muted); padding:24px; border-top:1px solid #222; background:var(--panel); }
.ad-note{ margin-bottom:8px; color:#cbd5e1; }