/* ════════════════════════════════════════════════════════════════
   AIBORGZ SHARED THEME — core tokens, chrome & layout atoms
   Used by: regenesis.html, battle.html, raffle.html
   Page-specific styles stay in each page's own <style> block,
   which loads AFTER this file so page rules win on conflicts.
════════════════════════════════════════════════════════════════ */

:root{
  --black:#050608; --dark:#080a0f; --dark2:#0c0f18; --dark3:#10131e;
  --cyan:#00e5ff; --pink:#ff0080; --white:#f0f4ff; --grey:#7b86a0; --lgrey:#9aa4ba;
  --border:rgba(0,229,255,0.1); --borderp:rgba(255,0,128,0.2);
  --glow-c:rgba(0,229,255,0.15); --glow-p:rgba(255,0,128,0.12);
  --gold:#ffb800; --green:#00ff88; --red:#ff3355;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
html,body{overflow-x:hidden;max-width:100%}
body{background:var(--black);color:var(--white);font-family:'Rajdhani',sans-serif;line-height:1.6;overflow-x:hidden;max-width:100vw}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:2px}
::selection{background:var(--pink);color:#fff}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}

.scanlines{position:fixed;inset:0;z-index:1000;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.018) 2px,rgba(0,0,0,.018) 4px)}

/* ── MOTION & MOBILE PERFORMANCE ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .gt::before,.gt::after{content:none!important}
}
@media (max-width:768px){
  .scanlines,.page-scan{display:none}
}

/* ── GLITCH TEXT (signature heading treatment) ── */
@keyframes gm{0%,91%,100%{clip-path:none;opacity:1}91.5%{clip-path:polygon(0 18%,100% 18%,100% 30%,0 30%);opacity:.95}92%{clip-path:polygon(0 55%,100% 55%,100% 68%,0 68%)}92.5%{clip-path:none}93%{clip-path:polygon(0 38%,100% 38%,100% 50%,0 50%)}93.5%{clip-path:none}}
@keyframes gb{0%,91%,100%{opacity:0}91.5%{opacity:.8;clip-path:polygon(0 14%,100% 14%,100% 28%,0 28%);transform:translateX(4px);color:var(--pink)}92%{clip-path:polygon(0 52%,100% 52%,100% 66%,0 66%);transform:translateX(-4px);color:var(--cyan)}92.5%,93.5%{opacity:0}93%{opacity:.7;clip-path:polygon(0 34%,100% 34%,100% 46%,0 46%);transform:translateX(-3px);color:var(--cyan)}}
@keyframes ga{0%,92%,100%{opacity:0}92.2%{opacity:.6;clip-path:polygon(0 36%,100% 36%,100% 50%,0 50%);transform:translateX(-4px);color:var(--cyan)}92.8%{clip-path:polygon(0 60%,100% 60%,100% 74%,0 74%);transform:translateX(4px);color:var(--pink)}93.3%{opacity:0}}
.gt{position:relative;animation:gm 12s infinite}
.gt::before,.gt::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}
.gt::before{animation:gb 12s infinite}
.gt::after{animation:ga 12s infinite}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pglow{0%,100%{text-shadow:0 0 10px rgba(0,229,255,.5),0 0 20px rgba(0,229,255,.3)}50%{text-shadow:0 0 20px rgba(0,229,255,.8),0 0 40px rgba(0,229,255,.5),0 0 80px rgba(0,229,255,.2)}}
@keyframes scanmove{0%{top:-5%;opacity:.5}100%{top:108%;opacity:0}}
@keyframes shimmer{0%{left:-100%}100%{left:220%}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes enterFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── PAGE FRAME — travelling RGB border around the whole viewport ── */
.page-rgb-border{position:fixed;inset:0;z-index:998;pointer-events:none}
.page-rgb-border::before{content:'';position:absolute;width:160px;height:2px;top:0;left:-160px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.9),rgba(255,255,255,.6),rgba(255,0,128,.9),transparent);
  box-shadow:0 0 12px rgba(0,229,255,.8),0 0 24px rgba(0,229,255,.4);
  animation:borderTravel 9s linear infinite}
@keyframes borderTravel{
  0%{left:-160px;top:0;width:160px;height:2px}
  24.9%{left:calc(100% + 160px);top:0;width:160px;height:2px}
  25%{left:calc(100% - 2px);top:0;width:2px;height:0}
  49.9%{left:calc(100% - 2px);top:calc(100% + 160px);width:2px;height:160px}
  50%{left:calc(100%);top:calc(100% - 2px);width:0;height:2px}
  74.9%{left:-160px;top:calc(100% - 2px);width:160px;height:2px}
  75%{left:0;top:calc(100% - 2px);width:2px;height:0}
  99.9%{left:0;top:-160px;width:2px;height:160px}
  100%{left:-160px;top:0;width:160px;height:2px}
}
.page-frame{position:fixed;inset:14px;z-index:997;pointer-events:none;border:1px solid rgba(0,229,255,.07)}
.page-scan{position:fixed;left:0;right:0;height:2px;top:-2px;z-index:996;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.35),rgba(255,255,255,.18),rgba(0,229,255,.35),transparent);
  animation:pageScanDown 11s linear infinite}
@keyframes pageScanDown{0%{top:-2px;opacity:.7}100%{top:100vh;opacity:0}}
.page-corner{position:fixed;width:26px;height:26px;pointer-events:none;z-index:999}
.page-corner.tl{top:20px;left:20px;border-top:2px solid rgba(0,229,255,.55);border-left:2px solid rgba(0,229,255,.55)}
.page-corner.tr{top:20px;right:20px;border-top:2px solid rgba(0,229,255,.55);border-right:2px solid rgba(0,229,255,.55)}
.page-corner.bl{bottom:20px;left:20px;border-bottom:2px solid rgba(255,0,128,.45);border-left:2px solid rgba(255,0,128,.45)}
.page-corner.br{bottom:20px;right:20px;border-bottom:2px solid rgba(255,0,128,.45);border-right:2px solid rgba(255,0,128,.45)}

/* ── GRID BG ── */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,229,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.025) 1px,transparent 1px);
  background-size:52px 52px}
.bg-radial{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(0,229,255,.05) 0%,transparent 60%)}

/* ── LAYOUT ATOMS ── */
.wrap{width:100%;position:relative;z-index:1}
.inner{max-width:1360px;margin:0 auto;padding:90px 60px}
.slbl{font-family:'Orbitron',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.slbl::before{content:'//';color:var(--pink);font-family:'Share Tech Mono',monospace;font-size:11px}
.slbl::after{content:'';flex:1;height:1px;max-width:80px;background:linear-gradient(90deg,var(--cyan),rgba(0,229,255,0))}
.stitle{font-family:'Orbitron',sans-serif;font-size:clamp(28px,5vw,56px);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.0;margin-bottom:18px}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:13px 28px;border:none;clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);transition:all .22s}
.bc{background:var(--cyan);color:#000}
.bc:hover{background:#fff;box-shadow:0 0 30px rgba(0,229,255,.6);transform:translateY(-2px)}
.bg{background:transparent;color:var(--white);border:1px solid rgba(240,244,255,.18)}
.bg:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.bg:disabled,.bc:disabled,.bp:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.bp{background:var(--pink);color:#fff}
.bp:hover{background:#fff;color:var(--pink);box-shadow:0 0 30px rgba(255,0,128,.5);transform:translateY(-2px)}

.rv{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
.rv.vs{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}