/* Launchpad shared game theme — layered on top of each page's own styles.
   Bold, bright, arcade-leaning. Additive: background lives behind content,
   enhances headings, buttons, cards and the end-of-game nav. */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&display=swap');

/* ---- bright colored backdrop (overrides each page's flat dark bg) ---- */
body{
  background:
    radial-gradient(1100px 720px at 12% -5%, rgba(45,212,191,.32), transparent 55%),
    radial-gradient(1200px 820px at 92% 0%,  rgba(56,189,248,.30), transparent 55%),
    radial-gradient(1000px 840px at 80% 106%, rgba(167,139,250,.28), transparent 58%),
    radial-gradient(860px 700px at 0% 104%,  rgba(251,146,60,.20), transparent 55%),
    linear-gradient(155deg,#0f1a30 0%, #0b1120 55%, #0c1b26 100%) !important;
  background-attachment: fixed !important;
}
/* slow-moving glow blobs for life */
body::before{
  content:""; position:fixed; inset:-30%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(440px 440px at 30% 38%, rgba(94,234,212,.26), transparent 60%),
    radial-gradient(500px 500px at 72% 64%, rgba(125,211,252,.24), transparent 60%),
    radial-gradient(420px 420px at 55% 90%, rgba(167,139,250,.20), transparent 60%);
  mix-blend-mode:screen;
  animation: lpDrift 20s ease-in-out infinite alternate;
}
@keyframes lpDrift{
  from{ transform:translate3d(-3%,-2%,0) scale(1.04) }
  to  { transform:translate3d(3%,2%,0)  scale(1.10) }
}
/* faint HUD grid */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.6;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 46px 100%;
}

/* ---- game-ish display type ---- */
.brand h1, h1, h2.head, .hero h1, .pc-title, .grade, .countdown, .cat .t, .metric .v, .stat .v{
  font-family:'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.015em;
}
.brand h1{ text-shadow:0 0 28px rgba(94,234,212,.4); }
.hero h1{ text-shadow:0 0 46px rgba(94,234,212,.18); }

/* ---- brighter, glassier cards ---- */
.card{
  border-color: rgba(125,211,252,.22) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 30px 80px -30px rgba(0,0,0,.7),
    0 0 90px -30px rgba(94,234,212,.5) !important;
}

/* ---- punchy buttons with a slow light sweep ---- */
.btn{
  font-family:'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
  text-transform:uppercase; letter-spacing:.05em;
  position:relative; overflow:hidden;
}
.btn::after{
  content:""; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-18deg); animation: lpSheen 5.5s ease-in-out infinite;
}
@keyframes lpSheen{ 0%,60%{ left:-70% } 85%,100%{ left:150% } }
.btn:hover{ filter:brightness(1.12) saturate(1.08); }

/* ---- end-of-game navigation bar ---- */
.lp-endnav{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:20px; }
.lp-nav-btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:'Chakra Petch', ui-sans-serif, system-ui, sans-serif; font-weight:600;
  font-size:14px; letter-spacing:.03em; color:#e6edf3;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05);
  border-radius:12px; padding:13px 20px; transition:transform .1s, border-color .14s, background .14s, box-shadow .14s;
}
.lp-nav-btn:hover{ transform:translateY(-2px); border-color:rgba(94,234,212,.65); background:rgba(94,234,212,.1); }
.lp-nav-btn.primary{
  border-color:rgba(94,234,212,.6);
  background:linear-gradient(180deg, rgba(94,234,212,.26), rgba(94,234,212,.08));
  color:#eafffb; box-shadow:0 8px 26px -12px rgba(94,234,212,.6);
}
.lp-nav-btn.primary:hover{ box-shadow:0 10px 32px -10px rgba(94,234,212,.8); }
.lp-nav-reason{ width:100%; text-align:center; color:#94a1b3; font-size:12px; margin-top:2px; }

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none }
  .btn::after{ animation:none; display:none }
}