/* ============================================================
   VOIDFALL DESIGN SYSTEM — AB Creative World v3
   void-black / violet nebula / cyan accents / glass / motion
   Loads AFTER each page's inline <style>, so these rules win.
   ============================================================ */

/* ---------- base ---------- */
html{
  background:
    radial-gradient(1200px 800px at 12% -5%, rgba(124,58,237,.30), transparent 60%),
    radial-gradient(1000px 760px at 88% 8%, rgba(34,211,238,.15), transparent 60%),
    radial-gradient(1100px 900px at 50% 115%, rgba(168,85,247,.16), transparent 62%),
    #040209 !important;
  background-attachment: fixed;
}
body{
  background:transparent !important;
  color:#f2ecfd !important;
  overflow-x:hidden;
}
/* page-enter transition (void.js removes .void-loading) */
body.void-loading{opacity:0}
body{transition:opacity .55s ease}

/* ---------- variable remap (shared across all pages) ---------- */
body{
  --bg:transparent;
  --bg2:rgba(13,8,30,.62);
  --bg-2:rgba(13,8,30,.62);
  --card:rgba(19,11,40,.55);
  --panel:rgba(19,11,40,.55);
  --panel-2:rgba(26,15,52,.55);
  --gold:#a78bfa; --gold2:#c4b5fd;
  --amber:#a78bfa; --amber2:#d8b4fe; --amber-hot:#d8b4fe; --amber-deep:#8b5cf6;
  --orange:#8b5cf6; --ember:#a78bfa;
  --ec:#a78bfa; --ec2:#c4b5fd;
  --accent:#8b5cf6; --accent2:#22d3ee;
  --cream:#f2ecfd; --text:#f2ecfd; --ink:#f2ecfd;
  --ink-soft:#c3b3e6; --ink-faint:#8f7fb8;
  --muted:#ab9bcf;
  --border:rgba(167,139,250,.28);
  --line:rgba(167,139,250,.22);
  --cyan:#67e8f9; --pink:#f0abfc;
  --good:#7ee2a8;
  --tt:#a78bfa; --tw:#8b5cf6; --yt:#f0abfc;
  --g1:#8b5cf6; --g2:#22d3ee;
}
/* tutorial light-mode: keep the void look in both schemes */
@media (prefers-color-scheme: light){
  body{
    --bg:transparent; --bg-2:rgba(13,8,30,.62);
    --panel:rgba(19,11,40,.6); --panel-2:rgba(26,15,52,.6);
    --line:rgba(167,139,250,.22);
    --ink:#f2ecfd; --ink-soft:#c3b3e6; --ink-faint:#8f7fb8;
    --amber:#a78bfa; --amber-hot:#d8b4fe; --amber-deep:#8b5cf6;
    --good:#7ee2a8;
  }
}

/* ---------- ambient canvas ---------- */
#void-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none;
}

/* ---------- typography glow ---------- */
body h1, body h2{
  background:linear-gradient(100deg,#e9dcff 20%,#a78bfa 55%,#67e8f9 90%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 0 34px rgba(139,92,246,.35);
}
body .hero h1{
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.6));
}
body .kicker, body .sec-no{
  color:#c4b5fd !important;
  text-shadow:0 0 14px rgba(167,139,250,.6);
}

/* ---------- nav ---------- */
body nav{
  background:rgba(6,3,16,.72) !important;
  border-bottom:1px solid rgba(167,139,250,.22) !important;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 4px 30px rgba(0,0,0,.45);
}
body .nav-links a:hover{color:#e9dcff !important;text-shadow:0 0 12px rgba(167,139,250,.8)}
/* void-lit emblem: CSS treatment only, file untouched */
body .brand img{
  filter:drop-shadow(0 0 10px rgba(167,139,250,.95)) drop-shadow(0 0 26px rgba(34,211,238,.4)) saturate(1.35) hue-rotate(-28deg) !important;
  border-radius:50%;
}
body .pill{
  border-color:rgba(167,139,250,.5) !important;
  color:#d8b4fe !important;
  background:rgba(139,92,246,.10);
  box-shadow:inset 0 0 18px rgba(139,92,246,.12);
}
body .pill:hover{background:rgba(139,92,246,.24) !important;box-shadow:0 0 18px rgba(139,92,246,.45)}
body .menu-btn{border-color:rgba(167,139,250,.4) !important;color:#c4b5fd !important;min-width:48px;min-height:44px}

/* ---------- hero ---------- */
body .hero .shade{
  background:
    radial-gradient(ellipse at 50% 42%, rgba(88,40,180,.28) 0%, rgba(4,2,9,.62) 100%),
    linear-gradient(180deg, rgba(4,2,9,.62), rgba(4,2,9,.30) 40%, rgba(4,2,9,.94) 100%) !important;
}
body .hero h1 em{
  -webkit-text-fill-color:#67e8f9; color:#67e8f9;
  text-shadow:0 0 26px rgba(103,232,249,.75);
}
body .hero .sub{color:#d9cdf5 !important}
body .scroll-cue{color:#8f7fb8 !important}

/* ---------- buttons: big, glowing, pulsing ---------- */
body .btn{
  background:linear-gradient(180deg,#c4b5fd,#8b5cf6) !important;
  color:#0d0618 !important;
  min-height:52px; min-width:52px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 0 22px rgba(139,92,246,.55), 0 6px 26px rgba(0,0,0,.5) !important;
  animation:void-pulse 2.8s ease-in-out infinite;
  border:1px solid rgba(216,180,254,.6) !important;
}
@keyframes void-pulse{
  0%,100%{box-shadow:0 0 16px rgba(139,92,246,.45),0 6px 26px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 34px rgba(139,92,246,.85),0 6px 26px rgba(0,0,0,.5)}
}
body .btn:hover{transform:translateY(-2px)}
body .btn:active{transform:translateY(1px) scale(.98)}
body .btn.ghost{
  background:rgba(19,11,40,.55) !important;
  color:#e9dcff !important;
  border:1px solid rgba(167,139,250,.5) !important;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:none;
  box-shadow:0 0 16px rgba(139,92,246,.25) !important;
}
body .btn.ghost:hover{box-shadow:0 0 26px rgba(139,92,246,.55) !important}

/* ---------- glass cards: everything floats ---------- */
body .card, body .world, body .story-banner, body .support-box, body .feature, body .money-strip{
  background:linear-gradient(160deg, rgba(30,17,62,.66), rgba(10,5,24,.66)) !important;
  border:1px solid rgba(167,139,250,.30) !important;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(216,180,254,.14) !important;
  transform-style:preserve-3d;
  will-change:transform;
}
body .card:hover, body .world:hover{
  border-color:rgba(167,139,250,.65) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 30px rgba(139,92,246,.35), inset 0 1px 0 rgba(216,180,254,.2) !important;
}
body .card .flag{
  background:linear-gradient(180deg,#d8b4fe,#8b5cf6) !important;
  color:#0d0618 !important;
  box-shadow:0 0 14px rgba(139,92,246,.6);
}
body .card .flag.ghost{
  background:none !important;color:#c4b5fd !important;
  border:1px solid rgba(167,139,250,.5) !important;
  box-shadow:none !important;
}
body .card p, body .world p, body .support-box p, body .feature p, body .story-banner p{color:#ab9bcf !important}
body .textlink{color:#67e8f9 !important;text-shadow:0 0 12px rgba(103,232,249,.5)}
body .world .n{color:#c4b5fd !important;text-shadow:0 0 12px rgba(167,139,250,.7)}
body .world .go{color:#67e8f9 !important}
body .soon{color:#c4b5fd !important;text-shadow:0 0 12px rgba(167,139,250,.7)}
body .money-inner .price{color:#d8b4fe !important;text-shadow:0 0 14px rgba(167,139,250,.7)}

/* ---------- sections ---------- */
body section{background:transparent !important}
body #films, body #support{background:transparent !important;border-top:1px solid rgba(167,139,250,.14) !important;border-bottom:1px solid rgba(167,139,250,.14) !important}
body .money-strip{border-top:1px solid rgba(167,139,250,.2) !important;border-bottom:1px solid rgba(167,139,250,.2) !important;border-radius:0}

/* ---------- footer ---------- */
body footer{background:rgba(3,1,10,.82) !important;border-top:1px solid rgba(167,139,250,.22) !important;backdrop-filter:blur(10px)}
body .foot-col h4{color:#c4b5fd !important}
body .foot-col a{color:#ab9bcf !important}
body .foot-col a:hover{color:#e9dcff !important}
body .foot-brand p{color:#ab9bcf !important}
body .socials a{
  border:1px solid rgba(167,139,250,.4) !important;
  color:#d8b4fe !important;
  min-height:44px; display:inline-flex; align-items:center;
}
body .socials a:hover{background:rgba(139,92,246,.18) !important;box-shadow:0 0 16px rgba(139,92,246,.4)}
body .copy{color:#6f5f96 !important;border-top:1px solid rgba(167,139,250,.14) !important}

/* ---------- scroll reveal ---------- */
.vr{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.vr.vr-in{opacity:1; transform:none}

/* ---------- tilt ---------- */
.void-tilt{transition:transform .18s ease-out}

/* ---------- generic links / inputs (sub pages) ---------- */
body a{ -webkit-tap-highlight-color:rgba(139,92,246,.25)}
body button, body .btn, body a.btn{min-height:48px}
body input, body textarea, body select{
  background:rgba(10,5,24,.7) !important;color:#f2ecfd !important;
  border:1px solid rgba(167,139,250,.35) !important;border-radius:12px;
}
body input:focus, body textarea:focus{outline:none;border-color:#a78bfa !important;box-shadow:0 0 0 3px rgba(139,92,246,.25)}

/* storyboard / video sub-pages: keep media readable over the void */
body img, body video{border-radius:14px}
body .thumb, body .panel, body .tile, body .episode, body .issue{
  background:linear-gradient(160deg, rgba(30,17,62,.66), rgba(10,5,24,.66)) !important;
  border:1px solid rgba(167,139,250,.28) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.5) !important;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  body{transition:none}
  body.void-loading{opacity:1}
  body .btn{animation:none}
  .vr{opacity:1; transform:none; transition:none}
  #void-canvas{display:none}
  *{animation-duration:.001s !important; transition-duration:.001s !important}
}