/* =========================
   cyber-base.css v7.3
   Global neon theme + utilities used by all pages
   ========================= */

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&display=swap");

/* Theme tokens */
:root{
  --bg-0:#05060b;
  --ink:#dff6ff;
  --mut:#9fb7c6;

  --cy:#00ffff;     /* cyan neon */
  --pk:#ff4ee6;     /* magenta neon */
  --ok:#00e08a;     /* success */
  --bad:#ff3b3b;    /* error */

  --g1:0 0 6px rgba(0,255,255,.35);
  --g2:0 0 14px rgba(0,255,255,.25);
  --pg1:0 0 10px rgba(255,78,230,.35);

  --r-s:10px;
  --r-m:14px;
  --r-l:16px;

  --font-ui:"Orbitron",system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif;
}

/* Reset-ish */
*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100% }
img,svg,video{ max-width:100%; display:block }

/* Body */
body{
  font-family:var(--font-ui);
  color:var(--ink);
  background:radial-gradient(1000px 700px at 60% 12%, #0b1120, #070a13 60%, var(--bg-0));
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Headings */
h1,h2,h3{
  color:#00fff7;
  text-shadow:0 0 10px #00fff7, 0 0 20px #008cff;
  margin-bottom:18px;
}
h1{ font-size:clamp(26px,5vw,42px) }
h2{ font-size:clamp(18px,3.2vw,26px) }
h3{ font-size:clamp(16px,2.6vw,20px) }

/* Basic text colors */
p,small,span,div{ color:var(--ink) }
.tag{ color:var(--mut) }

/* Links (generic) */
a{ color:var(--cy); text-decoration:none; text-shadow:var(--g1) }
a:hover{ color:#001314; background:var(--cy); box-shadow:var(--g2); border-radius:6px }

/* ---------- Layout helpers ---------- */
.wrap{ width:min(960px,92vw); margin:64px auto 24px }
.center{ text-align:center }
.row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }

/* ---------- Navigation (works for both plain <nav> and .topnav/.navbtn) ---------- */
nav, .topnav{
  margin:15px auto 30px;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
nav a, .navbtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border:1px solid #223145;
  border-radius:10px;
  color:#b9d4ff; background:#000;
  font-weight:800; letter-spacing:.06em; font-size:14px;
  box-shadow:0 0 10px rgba(0,255,255,.25);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
nav a[aria-current="page"], .navbtn[aria-current="page"]{
  background:linear-gradient(180deg, #02161a, #001014);
  color:var(--cy);
  box-shadow:0 0 12px rgba(0,255,255,.3) inset, 0 0 10px rgba(0,255,255,.25);
  border-color:#1c3c46;
}
nav a:hover, .navbtn:hover{ background:var(--cy); color:#001314; box-shadow:0 0 16px var(--cy) }
nav a:active, .navbtn:active{ transform:translateY(1px) }

/* ---------- Cards / panels ---------- */
.cards{
  display:flex; justify-content:center; flex-wrap:wrap; gap:25px;
  margin:20px auto; max-width:900px;
}
.card{
  background:linear-gradient(145deg, #00141c, #002633);
  border:2px solid var(--cy);
  border-radius:15px;
  box-shadow:0 0 20px rgba(0,255,255,.35);
  padding:24px;
  width:min(100%, 320px);
  margin-inline:auto;
  transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover{ transform:translateY(-6px) scale(1.03); box-shadow:0 0 24px rgba(255,78,230,.55) }

/* ---------- Buttons ---------- */
button, .btn{
  display:inline-block;
  padding:10px 18px;
  border:none;
  border-radius:10px;
  background:var(--cy);
  color:#001314;
  font-weight:900;
  letter-spacing:.06em;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}
button:hover, .btn:hover{
  background:var(--pk);
  color:#23001f;
  transform:scale(1.04);
  box-shadow:0 0 12px var(--pk);
}

/* ---------- HUD / Pills ---------- */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px;
  border:1px solid #1f2738;
  border-radius:999px;
  background:#0b0f19;
  color:var(--ink);
  font-weight:800;
  letter-spacing:.06em;
  min-width:90px;
}
.pill.time{ color:var(--cy) }
.pill.score{ color:var(--ok) }

/* ---------- Progress bar (results) ---------- */
.bar{
  height:14px; background:#0b1220; border:2px solid var(--cy);
  border-radius:999px; overflow:hidden; width:100%; max-width:520px; margin:8px auto 2px;
}
.bar>.fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--ok),#00c8ff);
  transition:width .3s ease;
}
.bar-caption{ text-align:center; font-size:14px; color:var(--mut) }

/* ---------- Fancy text helpers ---------- */
.neon-cy{ color:var(--cy); text-shadow:var(--g1), var(--g2) }
.neon-pk{ color:var(--pk); text-shadow:var(--pg1) }

.cyber-blurb{
  font-size:.98rem; line-height:1.65; letter-spacing:.04em;
  color:var(--ink);
  margin:.45rem 0 0;
  padding:.75rem 1rem;
  border-left:2px solid var(--cy);
  background:linear-gradient(180deg, rgba(0,255,255,.06), rgba(0,255,255,.02));
  box-shadow:inset 0 0 12px rgba(0,255,255,.12);
  border-radius:10px;
}
.cyber-blurb .cyber-tag{ color:var(--pk); margin-right:.35em; text-shadow:var(--pg1) }
.cyber-blurb .cyber-accent{ color:var(--cy); font-weight:800; text-shadow:var(--g1) }

.code-chip{
  display:inline-block; padding:.1em .5em;
  border:1px solid #233b45; border-radius:6px;
  background:#071018; color:var(--cy); font-weight:800; letter-spacing:.05em;
}

/* ---------- Factor Fury grid dots (compat) ---------- */
.grid{ display:grid; grid-template-columns:repeat(10,1fr); gap:6px; justify-items:center; margin-top:8px }
.cell{ width:20px; height:20px; border-radius:4px; background:#0c1220 }
.cell.ok{ background:#0e2b22 }
.cell.bad{ background:#2b0e14 }

/* ---------- Footer ---------- */
footer{ color:var(--mut); margin:40px 0 10px }

/* ---------- Page background presets ---------- */
.bg-home{
  background:
    radial-gradient(1200px 800px at 30% 10%, #101528, #07080d 65%, var(--bg-0)),
    linear-gradient(180deg, rgba(0,255,255,.06), transparent 25%);
}
.bg-num{
  background:
    radial-gradient(1200px 800px at 70% 15%, #12172b, #0a0c16 60%, #06070c),
    linear-gradient(180deg, rgba(0,255,255,.06), transparent 25%);
}
.bg-factor{
  background:
    radial-gradient(1200px 800px at 70% 10%, #0e1520, #07090f 60%, #05060b),
    linear-gradient(180deg, rgba(0,255,255,.06), transparent 25%);
}
.bg-daily{
  background:
    radial-gradient(1200px 800px at 55% 15%, #101520, #07090f 70%),
    linear-gradient(180deg, rgba(0,255,255,.06), transparent 25%);
}

/* ---------- Small screens ---------- */
@media (max-width:520px){
  .wrap{ margin:60px auto 20px }
  nav a, .navbtn{ padding:8px 10px; font-size:12px }
  h1{ font-size:clamp(22px,8vw,36px) }
}