/* cptchaos.com — shared styles for every page (moved out of index.html unchanged) */
@import url('assets/fonts.css');
:root{
  --acid:#b4f223; --acid-bright:#d2ff4d;
  --bg:#0a0d06; --panel:rgba(14,19,9,.82); --panel-solid:#0e1309;
  --ink:#e9f5d6; --muted:#93a67c;
  --line:rgba(180,242,35,.20); --border:rgba(180,242,35,.42);
  --cut:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Rajdhani',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(120% 80% at 15% 0%,rgba(180,242,35,.10),transparent 55%),
  radial-gradient(90% 70% at 90% 100%,rgba(180,242,35,.06),transparent 60%),
  repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,transparent 2px 9px)}
a{color:inherit;text-decoration:none}

/* ambient rising sparks, same treatment as the stream overlays.
   Fixed rather than absolute so they keep drifting as the page scrolls. */
#fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#fx .spark{position:absolute;bottom:-6%;border-radius:50%;background:var(--acid-bright);
  box-shadow:0 0 6px 2px rgba(180,242,35,.55);opacity:0;
  animation:rise linear infinite;will-change:transform,opacity}
@keyframes rise{
  0%   {opacity:0;   transform:translate(0,0) scale(.6)}
  10%  {opacity:.75}
  90%  {opacity:.45}
  100% {opacity:0;   transform:translate(var(--drift,14px),-108vh) scale(.4)}
}
/* keep the page usable for anyone who asks the OS for less motion */
@media (prefers-reduced-motion: reduce){ #fx{display:none} }

/* content sits above the spark layer */
header, .wrap{position:relative;z-index:1}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.teko{font-family:'Teko',sans-serif}

.panel{background:var(--panel);border:1px solid var(--border);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(8,11,5,.92);
  border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
header .bar{display:flex;align-items:center;gap:20px;height:66px}
header img{height:42px}
header nav{margin-left:auto;display:flex;gap:26px;align-items:center}
header nav a{font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:14px;color:var(--muted)}
header nav a:hover{color:var(--acid)}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--acid);color:#0b1005;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:14px;padding:11px 20px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn:hover{background:var(--acid-bright)}
.btn.ghost{background:transparent;color:var(--acid);border:1px solid var(--border)}
.btn.ghost:hover{color:var(--acid-bright);border-color:var(--acid)}

/* ---------- hero ---------- */
.hero{padding:74px 0 54px;display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:center}
.kicker{font-family:'Teko';font-size:26px;letter-spacing:7px;color:var(--acid);text-transform:uppercase}
h1{font-family:'Teko';font-weight:700;font-size:104px;line-height:.85;text-transform:uppercase;margin:2px 0 16px}
h1 .a{color:var(--acid);text-shadow:0 0 44px rgba(180,242,35,.42)}
.lede{font-size:19px;color:var(--muted);line-height:1.65;max-width:56ch}
.cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.livebox{padding:20px}
.livebox .row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dot{width:10px;height:10px;border-radius:50%;background:#5a6b46}
.dot.on{background:var(--acid);box-shadow:0 0 10px var(--acid);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.livebox .st{font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:14px}
.livebox .title{font-size:17px;line-height:1.4;margin-bottom:4px}
.livebox .game{color:var(--muted);font-size:14px;letter-spacing:1px;text-transform:uppercase}
.embedwrap{position:relative;padding-top:56.25%;margin-top:14px;background:#070903;border:1px solid var(--line)}
.embedwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:8px 0 64px}
.stat{padding:18px 20px;text-align:center}
.stat .n{font-family:'Teko';font-weight:700;font-size:48px;color:var(--acid);line-height:1}
.stat .l{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-weight:700}

/* ---------- sections ---------- */
section{padding:52px 0;scroll-margin-top:80px}
.sechead{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.sechead h2{font-family:'Teko';font-size:44px;letter-spacing:4px;text-transform:uppercase;line-height:1}
.sechead h2 i{color:var(--acid);font-size:30px;margin-right:12px}
.sechead .rule{flex:1;height:2px;background:linear-gradient(90deg,var(--acid),transparent)}

/* schedule */
.sched{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.day{overflow:hidden;display:flex;flex-direction:column}
.day .shot{aspect-ratio:3/4;overflow:hidden;background:#070903}
.day .shot img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) brightness(.85);transition:.4s}
.day:hover .shot img{filter:saturate(1.1) brightness(1.05);transform:scale(1.04)}
.day .meta{padding:14px 15px 17px}
.day .d{font-family:'Teko';font-size:27px;letter-spacing:3px;color:var(--acid);line-height:1}
.day .t{font-size:15px;font-weight:700;margin-top:3px}
.day .t span{color:var(--acid);font-size:12px;letter-spacing:1px;margin-left:3px}
.day .w{font-family:'Teko';font-size:24px;text-transform:uppercase;margin-top:8px;line-height:1.05}
.day .s{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
/* a split day: one double-wide card, arts side by side with a thin acid seam */
.day.multi{grid-column:span 2}
.day .shot.pair{aspect-ratio:auto;display:flex;align-items:flex-start;gap:3px;background:var(--acid)}
.day .shot.pair img{flex:1;min-width:0;height:auto;aspect-ratio:3/4}
.day .slots{display:flex;gap:16px}
.day .slot{flex:1;min-width:0}
.tzrow{display:flex;gap:8px;justify-content:flex-end;margin-bottom:14px;flex-wrap:wrap}
.tzbtn{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:7px 14px;
  border:1px solid var(--line);color:var(--muted);cursor:pointer;background:transparent;font-family:inherit}
.tzbtn.on{border-color:var(--acid);color:var(--acid)}

/* goal */
.goalbox{padding:26px 28px}
.goaltop{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;gap:20px;flex-wrap:wrap}
.goaltop .pts{font-family:'Teko';font-size:52px;color:var(--acid);line-height:1}
.goaltop .nxt{text-align:right;font-size:14px;color:var(--muted);letter-spacing:1px}
.goaltop .nxt b{color:var(--ink);display:block;font-size:17px;margin-top:3px}
.bar{height:16px;background:rgba(180,242,35,.10);position:relative;overflow:hidden}
.bar .fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--acid),var(--acid-bright));
  box-shadow:0 0 18px rgba(180,242,35,.55)}
.miles{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:11px;margin-top:22px}
.mile{padding:13px 15px;border:1px solid var(--line);display:flex;gap:12px;align-items:flex-start;font-size:14px}
.mile .p{font-family:'Teko';font-size:21px;color:var(--muted);line-height:1;flex:none;min-width:52px}
.mile.done{border-color:var(--border);background:rgba(180,242,35,.06)}
.mile.done .p{color:var(--acid)}
.mile.done .m{color:var(--ink)}
.mile .m{color:var(--muted);line-height:1.35}

/* video grids */
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.vid .shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:#070903;border:1px solid var(--line)}
.vid .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s}
.vid:hover .shot img{transform:scale(1.05)}
.vid .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(8,11,5,.35);opacity:0;transition:.3s;color:var(--acid);font-size:34px}
.vid:hover .play{opacity:1}
.vid .dur{position:absolute;right:8px;bottom:8px;background:rgba(8,11,5,.9);color:var(--acid);
  font-size:12px;font-weight:700;letter-spacing:1px;padding:3px 8px}
.vid h3{font-size:15px;line-height:1.35;margin:10px 0 4px;font-weight:600}
.vid .sub{font-size:13px;color:var(--muted);letter-spacing:1px}

/* supporters */
.sup{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:11px}
.sup .r{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--line)}
.sup .r.top{border-color:var(--border);background:rgba(180,242,35,.06)}
.sup .rank{font-family:'Teko';font-size:25px;color:var(--muted);min-width:34px;line-height:1}
.sup .r.top .rank{color:var(--acid)}
.sup .nm{font-weight:700;flex:1;font-size:16px}
.sup .r.top .nm{color:var(--acid-bright)}
.sup .det{font-size:13px;color:var(--muted);text-align:right;letter-spacing:.5px}

/* socials */
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px}
.soc{display:flex;align-items:center;gap:14px;padding:19px 20px;transition:.25s}
.soc:hover{border-color:var(--acid);transform:translateY(-3px)}
.soc i{font-size:27px;color:var(--acid);width:32px;text-align:center}
.soc .n{font-weight:700;letter-spacing:1px;font-size:16px}
.soc .h{font-size:13px;color:var(--muted)}

footer{border-top:1px solid var(--line);margin-top:56px;padding:30px 0 44px;
  color:var(--muted);font-size:14px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

.empty{color:var(--muted);font-size:15px;padding:22px;border:1px dashed var(--line)}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;gap:30px;padding:44px 0 34px}
  h1{font-size:74px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .sched{grid-template-columns:repeat(2,1fr)}
  header nav{display:none}
}
@media(max-width:560px){
  h1{font-size:56px}
  .sched{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ---- giving back ---- */
.giving{padding:26px 28px}
.giving p{font-size:18px;line-height:1.6;color:var(--ink);max-width:760px}
.giving p.lead{font-size:22px;margin-bottom:10px}
.giving p.lead b{color:var(--acid-bright)}
.giving p.fine{font-size:15px;color:var(--muted);margin:14px 0 16px}
.giving .btn{display:inline-block;font-family:'Rajdhani';font-weight:700;font-size:15px;letter-spacing:2px;
  text-transform:uppercase;text-decoration:none;padding:12px 22px;border-radius:9px;
  background:var(--acid);color:#0b1005}
.giving .btn:hover{background:var(--acid-bright)}
@media(max-width:560px){ .day.multi{grid-column:auto} }
