/* page overrides */
footer { position: relative; z-index: 1; }

/* starfield canvas */
    #stars { position:fixed; inset:0; z-index:0; pointer-events:none; }

    /* ── HEADER ── */

    /* ── HERO ── */
    .hero {
      position:relative; z-index:1;
      text-align:center; padding:80px 20px 60px;
      background:radial-gradient(ellipse at 50% 50%,rgba(107,33,212,.12),transparent 70%);
    }
    .hero-title .line1 { background:linear-gradient(135deg,var(--purple-light),var(--white)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .hero-title .line2 { color:var(--white); }
    .hero-caption { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:3px; color:rgba(255,255,255,.3); }

    /* ── MANDALA ── */
    .mandala-wrap {
      position:relative; z-index:1;
      display:flex; align-items:center; justify-content:center;
      padding:40px 0;
    }
    .mandala {
      position:relative; width:260px; height:260px;
      display:flex; align-items:center; justify-content:center;
    }
    .ring {
      position:absolute; border-radius:50%;
      border:1px solid; animation:orbit 8s linear infinite;
    }
    .ring-1 { inset:0; border-color:rgba(107,33,212,.4); animation-duration:12s; }
    .ring-2 { inset:20px; border-color:rgba(107,33,212,.3); animation-duration:9s; animation-direction:reverse; }
    .ring-3 { inset:40px; border-color:rgba(155,95,227,.25); animation-duration:7s; }
    .ring-4 { inset:60px; border-color:rgba(107,33,212,.15); animation-duration:5s; animation-direction:reverse; }
    @keyframes orbit{ to{transform:rotate(360deg)} }
    .ring::before { content:'✌️'; position:absolute; top:0; left:50%; transform:translateX(-50%); font-size:14px; }
    .ring-2::before { content:'💜'; }
    .ring-3::before { content:'★'; font-size:10px; }
    .ring-4::before { content:'✨'; font-size:10px; }
    .mandala-core {
      position:relative; z-index:10;
      width:110px; height:110px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(107,33,212,.6),rgba(6,6,8,.9));
      border:2px solid rgba(107,33,212,.6);
      display:flex; align-items:center; justify-content:center;
      font-size:52px;
      box-shadow:0 0 60px rgba(107,33,212,.5),inset 0 0 30px rgba(107,33,212,.2);
      animation:corePulse 3s ease-in-out infinite;
    }
    @keyframes corePulse{ 0%,100%{box-shadow:0 0 40px rgba(107,33,212,.4),inset 0 0 20px rgba(107,33,212,.15)} 50%{box-shadow:0 0 80px rgba(107,33,212,.7),inset 0 0 40px rgba(107,33,212,.3)} }
    .mandala-tap { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:3px; color:rgba(255,255,255,.3); text-align:center; animation:tapBounce 1.5s ease-in-out infinite; }
    @keyframes tapBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

    /* ── ORACLE ── */
    .oracle-wrap {
      max-width:700px; margin:0 auto; padding:0 40px 80px;
      text-align:center; position:relative; z-index:1;
    }
    .oracle-box {
      padding:48px 40px;
      background:rgba(107,33,212,.06);
      border:1px solid rgba(107,33,212,.3);
      position:relative; overflow:hidden;
      min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center;
      transition:border-color .4s, box-shadow .4s;
    }
    .oracle-box.active { border-color:var(--purple-light); box-shadow:0 0 60px rgba(107,33,212,.3); }
    .oracle-box::before {
      content:''; position:absolute; inset:0;
      background:linear-gradient(180deg,transparent,rgba(107,33,212,.05),transparent);
      transform:translateY(-100%);
    }
    .oracle-box.active::before { animation:oracleSweep .8s ease forwards; }
    @keyframes oracleSweep{ to{transform:translateY(100%)} }
    .oracle-idle { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:3px; color:rgba(255,255,255,.25); }
    .oracle-fortune { display:none; }
    .oracle-fortune.show { display:block; animation:fortuneFade .6s ease; }
    @keyframes fortuneFade{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
    .oracle-category { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:5px; color:var(--purple-light); text-transform:uppercase; margin-bottom:20px; }
    .oracle-text {
      font-size:clamp(18px,3vw,26px); line-height:1.8; color:var(--white);
      margin-bottom:24px;
      border-right:2px solid var(--purple-light);
      overflow:hidden; white-space:normal;
    }
    .oracle-lucky { font-family:'Space Mono',monospace; font-size:11px; color:rgba(255,255,255,.45); letter-spacing:2px; }
    .oracle-lucky span { color:var(--gold); }
    .oracle-footer { margin-top:32px; }
    .btn-oracle {
      padding:14px 40px;
      background:transparent; border:1px solid var(--purple-light);
      color:var(--purple-light); cursor:pointer;
      font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:3px;
      position:relative; overflow:hidden;
      transition:color .3s, box-shadow .3s;
    }
    .btn-oracle::before { content:''; position:absolute; inset:0; background:var(--purple); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
    .btn-oracle:hover { color:#fff; box-shadow:0 0 30px rgba(107,33,212,.5); }
    .btn-oracle:hover::before { transform:scaleX(1); }
    .btn-oracle span { position:relative; z-index:1; }
    .btn-oracle.spinning .btn-icon { animation:btnOracle .5s linear infinite; }
    @keyframes btnOracle{ to{transform:rotate(360deg)} }
    .btn-icon { display:inline-block; margin-right:8px; transition:none; }

    /* ── FORTUNE CARDS ── */
    .cards-section { max-width:1100px; margin:0 auto; padding:0 40px 100px; position:relative; z-index:1; }
    .cards-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(44px,7vw,80px); text-align:center; color:var(--white); margin-bottom:12px; }
    .cards-title span { color:var(--purple-light); }
    .cards-sub { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:4px; color:rgba(255,255,255,.3); text-align:center; margin-bottom:60px; }
    .cards-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

    .fcard {
      perspective:600px; cursor:pointer; height:200px;
    }
    .fcard-inner {
      position:relative; width:100%; height:100%;
      transform-style:preserve-3d;
      transition:transform .8s cubic-bezier(.4,0,.2,1);
    }
    .fcard.flipped .fcard-inner { transform:rotateY(180deg); }
    .fcard-front, .fcard-back {
      position:absolute; inset:0;
      backface-visibility:hidden;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      padding:24px 16px; text-align:center;
      border:1px solid rgba(107,33,212,.25);
    }
    .fcard-front {
      background:rgba(107,33,212,.06);
      transition:border-color .3s;
    }
    .fcard:hover:not(.flipped) .fcard-front { border-color:var(--purple-light); }
    .fcard-front-icon { font-size:40px; animation:cardIdle 3s ease-in-out infinite; margin-bottom:12px; }
    .fcard:nth-child(2) .fcard-front-icon { animation-delay:-.5s }
    .fcard:nth-child(3) .fcard-front-icon { animation-delay:-1s }
    .fcard:nth-child(4) .fcard-front-icon { animation-delay:-1.5s }
    @keyframes cardIdle{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
    .fcard-front-label { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:3px; color:rgba(255,255,255,.3); text-transform:uppercase; }
    .fcard-back {
      background:rgba(107,33,212,.1);
      border-color:var(--purple-light);
      transform:rotateY(180deg);
    }
    .fcard-back-icon { font-size:28px; margin-bottom:10px; }
    .fcard-back-text { font-size:12px; line-height:1.7; color:rgba(255,255,255,.8); }

    /* ── FLOATING SYMBOLS ── */
    .floaters { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
    .floater { position:absolute; font-size:20px; opacity:.05; animation:floatUp linear infinite; }
    @keyframes floatUp{ from{transform:translateY(100vh) rotate(0)} to{transform:translateY(-120px) rotate(360deg)} }

    /* ── FOOTER ── */

    @media(max-width:900px){ .cards-grid{grid-template-columns:repeat(2,1fr);} }
    @media(max-width:600px){ .cards-grid{grid-template-columns:1fr 1fr;} .cards-section{padding:0 20px 60px;} .oracle-wrap{padding:0 20px 60px;} }