/* ════════════════════════════════════════════════════════════════════
   AIBORGZ OS - "LIQUID CIRCUIT" DESIGN SYSTEM  v1.0
   ─────────────────────────────────────────────────────────────────────
   A modern, iOS-inspired skin layer for every AIBORGZ page.
   Loads AFTER each page's own <style> block, so these rules win ties.

   What it does:
     • Frosted-glass materials, soft depth, rounded geometry
     • Floating dock navigation
     • Pill buttons with springy press states
     • iOS-style inputs, modals, toasts
   What it keeps:
     • The cyan/pink identity, glitch text (.gt), travelling RGB
       borders, scanlines - the soul of the brand.
════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────
   01 · TOKENS
──────────────────────────────────────────────── */
:root{
  /* brand */
  --cyan:#00e5ff; --pink:#ff0080; --violet:#7c6cff;
  --os-grad:linear-gradient(135deg,var(--cyan),var(--violet) 52%,var(--pink));
  --os-grad-soft:linear-gradient(135deg,rgba(0,229,255,.55),rgba(124,108,255,.5) 52%,rgba(255,0,128,.55));

  /* surfaces */
  --os-bg:#04060b;
  --os-glass:rgba(13,17,28,.58);
  --os-glass-strong:rgba(10,13,22,.82);
  --os-glass-soft:rgba(16,21,34,.42);
  --os-stroke:rgba(255,255,255,.09);
  --os-stroke-strong:rgba(255,255,255,.14);
  --os-highlight:inset 0 1px 0 rgba(255,255,255,.07);

  /* radii */
  --r-xl:26px; --r-lg:20px; --r-md:14px; --r-sm:10px; --r-pill:999px;

  /* depth */
  --shadow-1:0 2px 10px rgba(0,0,0,.35);
  --shadow-2:0 10px 34px rgba(0,0,0,.45);
  --shadow-3:0 24px 70px rgba(0,0,0,.55);
  --glow-cyan:0 0 24px rgba(0,229,255,.35);
  --glow-pink:0 0 24px rgba(255,0,128,.3);

  /* motion */
  --spring:cubic-bezier(.32,1.4,.46,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

/* ────────────────────────────────────────────────
   02 · BASE & TYPOGRAPHY
──────────────────────────────────────────────── */
html{scroll-padding-top:104px}
body{
  background:var(--os-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Modern reading font for body copy - display faces stay Orbitron/mono */
body,
p, .hbody, .stbody, .ctbody, .cta-desc, .ut-desc, .raffle-body,
.team-bio, .ftag, .colcp, .header-copy p, .hero-desc, .sdesc, .jnsub{
  font-family:'Inter','Rajdhani',-apple-system,'SF Pro Text',sans-serif;
}
p, .stbody, .hbody, .ctbody{letter-spacing:.005em}

::selection{background:var(--pink);color:#fff}

/* iOS-style scrollbar */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(0,229,255,.55),rgba(255,0,128,.45));
  border-radius:99px;border:2px solid rgba(4,6,11,.9);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--cyan),var(--pink))}

/* Focus ring - visible, soft, rounded */
:focus{outline:none}
:focus-visible{
  outline:2px solid rgba(0,229,255,.75);
  outline-offset:2px;
  border-radius:6px;
}

/* ────────────────────────────────────────────────
   03 · FLOATING DOCK NAVBAR  (#nb on index / whitelist / my-aiborgz)
──────────────────────────────────────────────── */
#nb{
  top:calc(12px + var(--rh-banner-h,0px));
  left:50%;right:auto;
  transform:translateX(-50%);
  width:min(1280px,calc(100% - 24px));
  height:62px;
  padding:0 14px 0 20px;
  background:var(--os-glass);
  -webkit-backdrop-filter:blur(28px) saturate(1.7);
  backdrop-filter:blur(28px) saturate(1.7);
  border:1px solid var(--os-stroke);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2),var(--os-highlight);
  transition:background .3s var(--ease-out),box-shadow .3s var(--ease-out),height .3s var(--ease-out);
}
#nb::after{
  bottom:-1px;left:10%;
  border-radius:99px;
  height:1.5px;
}
#nb.sc{
  height:56px;
  background:var(--os-glass-strong);
  border-color:var(--os-stroke-strong);
  border-bottom-color:var(--os-stroke-strong);
  box-shadow:var(--shadow-3),var(--os-highlight);
}
.nlinks a{border-radius:8px;padding:6px 10px;transition:color .2s,background .2s}
.nlinks a::after{display:none}
.nlinks a:hover,.nlinks a.act{background:rgba(255,255,255,.07);color:#fff}
.mdrawer{
  background:rgba(6,8,14,.82);
  -webkit-backdrop-filter:blur(40px) saturate(1.6);
  backdrop-filter:blur(40px) saturate(1.6);
}
.mdrawer a{border-radius:14px;padding:10px 26px;transition:background .25s var(--spring),color .2s}
.mdrawer a:hover{background:rgba(255,255,255,.07)}

/* ────────────────────────────────────────────────
   04 · BUTTONS → PILLS  (springy, glowing)
──────────────────────────────────────────────── */
.btn, .ncta, .mcta, .nb-cta, .hero-cta,
.wallet-term-btn, .cs-social, .holo-send,
.sbox-enter-btn, .entry-btn,
.tstep-btn, .tquick button,
.carr, .lore-arr{
  clip-path:none !important;
  border-radius:var(--r-pill) !important;
  transition:transform .35s var(--spring),box-shadow .3s var(--ease-out),
             background .25s var(--ease-out),color .2s,border-color .2s,filter .2s;
}
.btn:active, .ncta:active, .nb-cta:active, .hero-cta:active,
.wallet-term-btn:active, .cs-social:active, .holo-send:active,
.sbox-enter-btn:active, .entry-btn:active{
  transform:scale(.96);
}

/* Primary cyan */
.bc, .ncta, .nb-cta, .hero-cta{
  background:linear-gradient(180deg,#5df2ff,#00d9f2 55%,#00bfe0);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 20px rgba(0,229,255,.28);
}
.bc:hover, .ncta:hover, .nb-cta:hover, .hero-cta:hover{
  background:linear-gradient(180deg,#8ff6ff,#22e2ff 55%,#00cdf0);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 30px rgba(0,229,255,.45);
  transform:translateY(-2px);
  color:#000;
}
/* Pink primary */
.bp{
  background:linear-gradient(180deg,#ff4da6,#ff0080 55%,#d90070);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 6px 20px rgba(255,0,128,.3);
}
.bp:hover{
  background:linear-gradient(180deg,#ff70b8,#ff2a94 55%,#ef007c);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 30px rgba(255,0,128,.5);
}
/* Ghost */
.bg, .bgh{
  border:1px solid var(--os-stroke-strong);
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.bg:hover, .bgh:hover{
  background:rgba(0,229,255,.08);
  border-color:rgba(0,229,255,.5);
}

/* Carousel arrows → round glass buttons */
.carr, .lore-arr{
  width:44px;height:44px;
  background:var(--os-glass);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--os-stroke);
  box-shadow:var(--shadow-1),var(--os-highlight);
}
.carr:hover, .lore-arr:hover{
  background:var(--cyan);color:#000;
  box-shadow:var(--glow-cyan);
  transform:scale(1.06);
}

/* Entry button - keep the beg-shake, add gradient ring */
.entry-btn{
  background:linear-gradient(180deg,#ff4da6,#ff0080 55%,#c9006c);
  border:1px solid rgba(255,255,255,.25);
}

/* Stepper buttons (raffle modal) */
.tstep-btn{border-radius:var(--r-md) !important}
.tquick button{border-radius:var(--r-pill) !important}

/* ────────────────────────────────────────────────
   05 · GLASS CARDS
──────────────────────────────────────────────── */
/* Full glass panels - blur + stroke + depth */
.wallet-term, .ucard, .cta-card, .raffle-card, .ch-card,
.create-box, .boost-strip, .loop-strip, .sim-banner,
.team-card, .c-classified, .stcls, .colcoming, .ctdet,
.entry-sound-wrap, .feature-card, .hero-stat, .hero-tag,
.tmodal, .holo-window, .toast, .winner-strip{
  background:var(--os-glass);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--os-stroke);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2),var(--os-highlight);
  clip-path:none !important;
}
/* Cards that hold images / grids of content keep their own bg but round off */
.crouter, .utlay, .isl, .sbox, .lore-carousel, .raffle-grid,
.colbanner, .boot-inner, .mdrawer .mcta{
  border-radius:var(--r-lg);
  overflow:hidden;
  clip-path:none !important;
}
.crouter, .utlay, .raffle-grid{border:1px solid var(--os-stroke);box-shadow:var(--shadow-2)}

/* Interior panels lose their hard square edges */
.cinfo{border-right-color:var(--os-stroke)}
.wstat, .ustat, .tsummary, .loop-step, .ctdet{
  border-radius:var(--r-md);
  border:1px solid var(--os-stroke);
}
.stcls, .c-classified, .sim-banner, .winner-strip{border-radius:var(--r-md)}

/* Hover lift - springy */
.ucard:hover, .cta-card:hover, .ch-card:hover, .team-card:hover, .feature-card:hover{
  transform:translateY(-5px) scale(1.008);
  border-color:rgba(0,229,255,.35);
  box-shadow:var(--shadow-3),0 0 34px rgba(0,229,255,.12),var(--os-highlight);
}
.ucard, .cta-card, .ch-card, .team-card, .feature-card{
  transition:transform .45s var(--spring),border-color .3s,box-shadow .35s var(--ease-out);
}
.ucard.boosted:hover{border-color:rgba(255,0,128,.5);box-shadow:var(--shadow-3),0 0 34px rgba(255,0,128,.14)}

/* RGB hairline across glass card tops - brand signature, subtler */
.wallet-term::before, .ucard::before, .ch-card::before,
.create-box::before, .boost-strip::before, .tmodal::before{
  height:1.5px;
  background:var(--os-grad);
  opacity:.65;
  border-radius:99px;
  left:14px;right:14px;width:auto;
}

/* Badges → pills */
.lvl-badge, .boost-badge, .staked-badge, .raffle-pill{
  border-radius:var(--r-pill);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
}
/* Chips → pills */
.trait-chip, .boost-chip, .ctag, .loop-step{border-radius:var(--r-pill)}

/* Image corners inside rounded cards */
.raffle-img-wrap{border-radius:var(--r-lg) var(--r-lg) 0 0}
.team-img-wrap{border-radius:var(--r-lg) var(--r-lg) 0 0}
.ucard-img{border-radius:var(--r-lg) var(--r-lg) 0 0}
.ch-avatar{border-radius:var(--r-md);overflow:hidden}

/* ────────────────────────────────────────────────
   06 · INPUTS - iOS field styling
──────────────────────────────────────────────── */
.finp, .ftxa, .holo-inp, .tstep-inp,
.cfield select, .cfield input,
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], select, textarea{
  border-radius:var(--r-md);
  background:rgba(255,255,255,.045);
  border:1px solid var(--os-stroke);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.finp:focus, .ftxa:focus, .holo-inp:focus, .tstep-inp:focus,
.cfield select:focus, .cfield input:focus,
input:focus, select:focus, textarea:focus{
  border-color:rgba(0,229,255,.6);
  background:rgba(0,229,255,.05);
  box-shadow:0 0 0 3px rgba(0,229,255,.14);
}
.holo-inp{border:1px solid var(--os-stroke)}
.holo-inp:focus{box-shadow:0 0 0 3px rgba(0,229,255,.14)}

/* ────────────────────────────────────────────────
   07 · MODALS & TOASTS
──────────────────────────────────────────────── */
.tmodal-bg, .holo-backdrop{
  background:rgba(2,4,9,.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
}
.tmodal, .holo-window{
  border-radius:var(--r-xl);
  border:1px solid var(--os-stroke-strong);
  box-shadow:var(--shadow-3),var(--os-highlight);
  animation:osModalIn .5s var(--spring);
}
@keyframes osModalIn{
  from{opacity:0;transform:scale(.92) translateY(18px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.holo-bar{border-radius:var(--r-xl) var(--r-xl) 0 0}
.toast{
  border-radius:var(--r-md);
  border-left-width:3px;
  animation:osToastIn .55s var(--spring);
  box-shadow:var(--shadow-2);
}
@keyframes osToastIn{
  from{opacity:0;transform:translateY(16px) scale(.96)}
  to{opacity:1;transform:none}
}

/* ────────────────────────────────────────────────
   08 · INDEX PAGE FURNITURE
──────────────────────────────────────────────── */
/* Boot terminal → rounded glass window */
.boot-inner{
  border-radius:var(--r-xl);
  background:rgba(5,8,16,.9);
  -webkit-backdrop-filter:blur(30px);
  backdrop-filter:blur(30px);
  border:1px solid var(--os-stroke-strong);
  box-shadow:var(--shadow-3),var(--os-highlight);
}
.boot-frame{clip-path:none !important;border-radius:var(--r-xl);border-color:transparent}
.boot-corner{display:none}
.boot-titlebar{border-radius:var(--r-xl) var(--r-xl) 0 0;background:rgba(255,255,255,.035)}
.boot-footer{border-radius:0 0 var(--r-xl) var(--r-xl)}
.boot-progress-bar{border-radius:99px;overflow:hidden}
.boot-progress-fill{background:var(--os-grad)}

/* Entry screen - soften panels, keep drama */
.entry-sound-wrap{border-radius:var(--r-lg)}
.entry-frame{border-radius:var(--r-xl);inset:12px}

/* Hero stats → floating glass bar */
.hstats{
  margin:-34px clamp(12px,3vw,44px) 26px;
  border-radius:var(--r-lg);
  border:1px solid var(--os-stroke);
  background:var(--os-glass);
  -webkit-backdrop-filter:blur(26px) saturate(1.6);
  backdrop-filter:blur(26px) saturate(1.6);
  box-shadow:var(--shadow-2),var(--os-highlight);
  overflow:hidden;
  z-index:5;
}
.stit{border-right-color:var(--os-stroke)}

/* Page frame - round the viewport HUD frame */
.page-frame{border-radius:var(--r-xl)}
.entry-frame{border:1px solid var(--os-stroke)}

/* Social join boxes */
.sbox{border-radius:var(--r-lg);border:1px solid var(--os-stroke-strong)}
.social-boxes{gap:16px}

/* Lore carousel & character carousel dots → iOS page dots */
.crdot, .lore-dot{background:rgba(255,255,255,.22);border:none}
.crdot.act, .lore-dot.act{
  background:var(--cyan);
  box-shadow:0 0 10px rgba(0,229,255,.6);
}

/* Audio player → glass capsule */
#audioPlayer{
  clip-path:none !important;
  border-radius:var(--r-pill);
  background:var(--os-glass-strong);
  -webkit-backdrop-filter:blur(26px) saturate(1.6);
  backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid var(--os-stroke-strong);
  box-shadow:var(--shadow-2),var(--os-highlight);
  padding:8px 16px 8px 8px;
}
.ap-btn{clip-path:none !important;border-radius:50%}
.ap-vol{border-radius:99px}
.ap-vol-fill{border-radius:99px}

/* Contact / holo terminal button row */
.holo-send{border:1px solid rgba(0,229,255,.5)}

/* Footer */
footer{border-top:1px solid var(--os-stroke)}
.fsoc{border-radius:var(--r-md);transition:all .3s var(--spring)}
.fsoc:hover{transform:translateY(-2px);background:rgba(0,229,255,.08)}

/* ────────────────────────────────────────────────
   09 · THEME PAGES (regenesis / battle / raffle)
──────────────────────────────────────────────── */
.wallet-term{overflow:hidden}
.wallet-term-head{border-bottom-color:var(--os-stroke)}
.wallet-term-btn.disconnect{border-radius:var(--r-pill) !important}
.xp-bar, .raffle-bar-wrap{border-radius:99px;overflow:hidden}
.xp-fill, .raffle-bar-fill{border-radius:99px}
.empty-state{
  border:1px dashed rgba(255,255,255,.12);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.015);
}
.raffle-card{border-right:none;border-bottom:none;margin:0}
.raffle-grid{gap:18px;border:none;box-shadow:none;overflow:visible;padding:2px}
.raffle-card{border:1px solid var(--os-stroke)}
.rf-footer{border-top-color:var(--os-stroke)}

/* raffle prize row + wager rows keep left accent, round off */
.raffle-prize-row, .ch-wager{border-radius:var(--r-sm)}

/* ────────────────────────────────────────────────
   10 · WHITELIST / MY-AIBORGZ / COMING-SOON
──────────────────────────────────────────────── */
.nb-cta{clip-path:none !important}
.cs-social{clip-path:none !important}
.hero-tag{border-radius:var(--r-pill)}
.hero-stat{border-radius:var(--r-md);padding:12px 22px}
.feature-card{border-radius:var(--r-lg)}

/* ────────────────────────────────────────────────
   11 · SCANLINES & GLITCH - keep, but refined
──────────────────────────────────────────────── */
.scanlines{opacity:.75}
.page-scan{opacity:.8}

/* ────────────────────────────────────────────────
   12 · REDUCED MOTION
──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .ucard, .cta-card, .ch-card, .team-card, .feature-card,
  .btn, .ncta, .hero-cta{transition-duration:.01ms !important}
}

/* ────────────────────────────────────────────────
   13 · CHROMA RING - the signature RGB treatment.
   One smooth colour-cycling ring around content,
   replacing all flashing box-shadow RGB effects.
──────────────────────────────────────────────── */
@property --os-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
:root{--os-angle:0deg}
@keyframes osRingSpin{from{--os-angle:0deg}to{--os-angle:360deg}}

#nb, .sbox, .team-card, .lore-carousel, #audioPlayer, .boot-inner{
  --ring-bg:#0c0f18;
  border:1.5px solid transparent !important;
  background:
    linear-gradient(var(--ring-bg),var(--ring-bg)) padding-box,
    conic-gradient(from var(--os-angle),
      #00e5ff 0deg,
      rgba(124,108,255,.85) 95deg,
      #ff0080 180deg,
      rgba(124,108,255,.85) 265deg,
      #00e5ff 360deg) border-box !important;
  animation:osRingSpin 6s linear infinite !important;
}
#nb{--ring-bg:rgba(13,17,28,.74)}
#nb.sc{--ring-bg:rgba(9,12,20,.88)}
#audioPlayer{--ring-bg:rgba(10,13,22,.86)}
.boot-inner{--ring-bg:rgba(5,8,16,.93)}

/* stagger the rings so they don't spin in lockstep */
.sbox:nth-child(2){animation-delay:-1.5s !important}
.sbox:nth-child(3){animation-delay:-3s !important}
.sbox:nth-child(4){animation-delay:-4.5s !important}
.sbox:nth-child(5){animation-delay:-6s !important}
.team-card:nth-child(2n){animation-delay:-2s !important}
.team-card:nth-child(3n){animation-delay:-4s !important}

/* retire the old flashing / stray-line effects */
#nb::after,
.sbox::before,
.team-card::before,
.lore-carousel::before,
.lore-carousel::after,
.boot-titlebar::after{content:none !important;animation:none !important}

/* entry CTA - pink pill wrapped in its own spinning ring */
.entry-btn{
  border:2px solid transparent !important;
  background:
    linear-gradient(180deg,#ff4da6,#ff0080 55%,#c9006c) padding-box,
    conic-gradient(from var(--os-angle),
      #00e5ff,#7c6cff,#ff0080,#7c6cff,#00e5ff) border-box !important;
  animation:osRingSpin 3.5s linear infinite !important;
  box-shadow:0 10px 34px rgba(255,0,128,.35);
}

@media (prefers-reduced-motion: reduce){
  #nb,.sbox,.team-card,.lore-carousel,#audioPlayer,.boot-inner,.entry-btn{
    animation:none !important;
  }
}

/* ────────────────────────────────────────────────
   14 · RESPONSIVE POLISH
──────────────────────────────────────────────── */
@media (max-width:768px){
  #nb{
    top:calc(8px + var(--rh-banner-h,0px));
    width:calc(100% - 16px);
    height:56px;
    border-radius:var(--r-md);
    padding:0 10px 0 14px;
  }
  html{scroll-padding-top:80px}
  .hstats{margin:-20px 10px 18px;border-radius:var(--r-md)}
  #audioPlayer{border-radius:50%}
}