/* ══════════════════════════════════════════════════════════════
   Soul Siphon · shared site design system
   Used by index / howtoplay / library. Dark-tarot + gold.
   ══════════════════════════════════════════════════════════════ */
:root{
  --void:#070509; --ink:#0b0810; --panel:#0e0a14;
  --gold:#b8922a; --gold-lt:#e8c060; --gold-dp:#c9880a;
  --soul:#4bb4ec; --soul-lt:#9fe4ff;
  --bone:#f3e7cf;
  --embers:#ff7040; --tides:#60c8e8; --daggers:#c8d8f0; --spoils:#90a850; --radiance:#f0d070;
}
html{scroll-behavior:smooth;}
body{background:var(--void); overflow-x:clip;}
.ss-wrap{position:relative; z-index:2;}
::selection{background:rgba(232,192,96,0.28); color:#fff;}

/* section rhythm */
.sec{position:relative; padding:110px 24px; max-width:1200px; margin:0 auto;}
.sec.tight{padding:76px 24px;}
.sec-label{font-family:'DIN Alternate',sans-serif; font-size:12px; letter-spacing:0.42em; text-transform:uppercase; color:var(--gold-dp); text-align:center; margin-bottom:14px;}
.sec-title{font-family:'Cinzel Decorative',serif; font-weight:700; font-size:clamp(28px,4.2vw,50px); text-align:center; color:var(--bone); line-height:1.1; margin-bottom:18px;}
.sec-title .g,.g{background:linear-gradient(135deg,#b8922a,#e8c060 45%,#c9880a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.sec-sub{font-family:'Crimson Text',serif; font-size:19px; line-height:1.7; color:rgba(226,214,190,0.72); text-align:center; max-width:62ch; margin:0 auto 52px;}

/* ornate divider */
.rule{display:flex; align-items:center; justify-content:center; gap:16px; margin:0 auto; max-width:340px; padding:8px 0;}
.rule::before,.rule::after{content:''; height:1px; flex:1; background:linear-gradient(90deg,transparent,rgba(184,146,42,0.55));}
.rule::after{background:linear-gradient(90deg,rgba(184,146,42,0.55),transparent);}
.rule i{width:9px;height:9px;transform:rotate(45deg); background:linear-gradient(135deg,#e8c060,#c9880a); box-shadow:0 0 12px rgba(232,192,96,0.5);}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:'Cinzel',serif; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; text-decoration:none; border-radius:4px; transition:transform .18s, box-shadow .25s, filter .2s; cursor:pointer;}
.btn-gold{font-size:15px; padding:16px 40px; color:#160f04; background:linear-gradient(135deg,#f0cf78 0%,#e8c060 40%,#c9880a 100%); border:1px solid rgba(245,220,150,0.7); box-shadow:0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.35);}
.btn-gold:hover{transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 14px 40px rgba(0,0,0,0.55), 0 0 34px rgba(232,192,96,0.4), inset 0 1px 0 rgba(255,255,255,0.4);}
.btn-ghost{font-size:14px; padding:15px 34px; color:var(--gold-lt); background:rgba(184,146,42,0.06); border:1px solid rgba(184,146,42,0.45);}
.btn-ghost:hover{color:#fff; border-color:rgba(232,192,96,0.85); background:rgba(184,146,42,0.14); transform:translateY(-2px);}

/* ── HERO (page header) ── */
.hero{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:150px 20px 90px; overflow:hidden;}
.hero.tall{min-height:100svh; padding:96px 20px 60px;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg video,.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 60%;}
.hero-bg::after{content:''; position:absolute; inset:0;
  background:
    radial-gradient(135% 110% at 50% 40%, transparent 40%, rgba(7,5,9,0.4) 78%, rgba(7,5,9,0.88) 100%),
    linear-gradient(180deg, rgba(7,5,9,0.55) 0%, transparent 26%, transparent 58%, var(--void) 100%);}
.hero-vig{position:absolute; inset:0; z-index:1; pointer-events:none; box-shadow:inset 0 0 150px 16px rgba(0,0,0,0.5);}
.corner{position:absolute; width:110px; height:110px; z-index:3; opacity:0.7; pointer-events:none;}
.corner::before,.corner::after{content:''; position:absolute; background:linear-gradient(90deg,var(--gold-lt),transparent);}
.corner::before{width:100px; height:2px;}
.corner::after{width:2px; height:100px; background:linear-gradient(180deg,var(--gold-lt),transparent);}
.corner.tl{top:24px; left:24px;} .corner.tr{top:24px; right:24px; transform:scaleX(-1);}
.corner.bl{bottom:24px; left:24px; transform:scaleY(-1);} .corner.br{bottom:24px; right:24px; transform:scale(-1);}
.hero-inner{position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; animation:rise 1s cubic-bezier(.2,.8,.2,1) both;}
.hero-eyebrow{font-family:'DIN Alternate',sans-serif; font-size:13px; letter-spacing:0.5em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:22px; opacity:0.9;}
.hero-eyebrow::before,.hero-eyebrow::after{content:'✦'; color:var(--gold-dp); margin:0 14px; font-size:10px; opacity:0.7;}
.hero-title{font-family:'Cinzel Decorative',serif; font-weight:900; font-size:clamp(42px,7vw,88px); line-height:1.02; color:var(--bone); text-shadow:0 6px 30px rgba(0,0,0,0.6);}
.hero-title .g{filter:drop-shadow(0 2px 12px rgba(201,136,10,0.25));}
.hero-tag{font-family:'Crimson Text',serif; font-style:italic; font-size:clamp(17px,2.2vw,22px); color:rgba(240,230,208,0.84); margin:20px auto 8px; letter-spacing:0.02em; max-width:60ch;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:34px;}
.hero-chips{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:26px;}
.chip{font-family:'DIN Alternate',sans-serif; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(232,214,180,0.85); border:1px solid rgba(184,146,42,0.4); background:rgba(184,146,42,0.07); padding:8px 16px; border-radius:40px;}
.chip.gold{color:#160f04; background:linear-gradient(135deg,#e8c060,#c9880a); border-color:transparent; font-weight:700;}

/* ── logo lockup ── */
.logo-wrap{position:relative; width:min(640px,84vw);}
.logo-wrap .halo{position:absolute; left:50%; top:52%; width:120%; height:150%; transform:translate(-50%,-50%); background:radial-gradient(50% 44% at 50% 50%, rgba(232,192,96,0.22), rgba(75,180,236,0.08) 46%, transparent 70%); filter:blur(10px); z-index:-1; animation:pulse 6s ease-in-out infinite;}
.logo-wrap img{width:100%; height:auto; display:block; filter:drop-shadow(0 14px 40px rgba(0,0,0,0.7)); animation:float 7s ease-in-out infinite;}

/* ── RIBBON ── */
.ribbon{position:relative; z-index:2; border-top:1px solid rgba(184,146,42,0.22); border-bottom:1px solid rgba(184,146,42,0.22); background:linear-gradient(180deg,rgba(20,14,10,0.6),rgba(10,7,12,0.6));}
.ribbon-in{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr);}
.ribbon-in .cell{padding:28px 16px; text-align:center; border-right:1px solid rgba(184,146,42,0.14);}
.ribbon-in .cell:last-child{border-right:none;}
.ribbon .v{font-family:'Cinzel',serif; font-weight:900; font-size:32px; line-height:1; background:linear-gradient(135deg,#e8c060,#c9880a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.ribbon .k{font-family:'DIN Alternate',sans-serif; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(226,214,190,0.5); margin-top:9px;}

/* ── split (text + visual) ── */
.split{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.split.flip .split-media{order:-1;}
.split h2{font-family:'Cinzel Decorative',serif; font-weight:700; font-size:clamp(26px,3.4vw,42px); color:var(--bone); line-height:1.14; margin-bottom:20px;}
.split p{font-family:'Crimson Text',serif; font-size:18px; line-height:1.75; color:rgba(230,220,198,0.82); max-width:54ch;}
.split p+p{margin-top:14px;}

/* ── step cards ── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.step{position:relative; padding:38px 26px 32px; background:linear-gradient(180deg,rgba(20,15,26,0.66),rgba(11,8,16,0.66)); border:1px solid rgba(184,146,42,0.18); border-radius:6px; overflow:hidden; transition:border-color .25s, transform .25s;}
.step:hover{border-color:rgba(232,192,96,0.5); transform:translateY(-4px);}
.step::before{content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(232,192,96,0.6),transparent);}
.step .num{font-family:'Cinzel Decorative',serif; font-weight:900; font-size:30px; color:transparent; -webkit-text-stroke:1px rgba(232,192,96,0.55); margin-bottom:14px;}
.step h3{font-family:'Cinzel',serif; font-weight:700; font-size:20px; color:var(--gold-lt); margin-bottom:11px; letter-spacing:0.02em;}
.step p{font-family:'Crimson Text',serif; font-size:16.5px; line-height:1.62; color:rgba(226,214,190,0.72);}

/* ── panel (generic framed card) ── */
.panel{position:relative; background:linear-gradient(180deg,rgba(20,15,26,0.6),rgba(11,8,16,0.62)); border:1px solid rgba(184,146,42,0.2); border-radius:8px; padding:26px 24px;}
.panel .p-tag{font-family:'DIN Alternate',sans-serif; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-dp); margin-bottom:8px;}
.panel h4{font-family:'Cinzel',serif; font-weight:700; font-size:19px; color:var(--bone); margin-bottom:10px;}
.panel p{font-family:'Crimson Text',serif; font-size:16px; line-height:1.6; color:rgba(226,214,190,0.74);}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}

/* ── orb cards (owned art) ── */
.orbs-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.orbcard{position:relative; border-radius:8px; overflow:hidden; text-align:center; transition:transform .3s;}
.orbcard:hover{transform:translateY(-6px);}
.orbcard .art{position:relative; aspect-ratio:5/7; overflow:hidden;}
.orbcard .art img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s;}
.orbcard:hover .art img{transform:scale(1.05);}
.orbcard .glow{position:absolute; inset:0; opacity:0; transition:opacity .3s; pointer-events:none;}
.orbcard:hover .glow{opacity:1;}
.orbcard h4{font-family:'Cinzel',serif; font-weight:700; font-size:18px; margin-top:15px; letter-spacing:0.05em;}
.orbcard .tag{font-family:'DIN Alternate',sans-serif; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(226,214,190,0.5); margin-top:6px; display:block;}
.orbcard.embers h4{color:var(--embers);} .orbcard.embers .glow{box-shadow:inset 0 0 50px rgba(255,112,64,0.4);}
.orbcard.tides h4{color:var(--tides);} .orbcard.tides .glow{box-shadow:inset 0 0 50px rgba(96,200,232,0.4);}
.orbcard.daggers h4{color:var(--daggers);} .orbcard.daggers .glow{box-shadow:inset 0 0 50px rgba(200,216,240,0.35);}
.orbcard.spoils h4{color:var(--spoils);} .orbcard.spoils .glow{box-shadow:inset 0 0 50px rgba(144,168,80,0.4);}
.orbcard.radiance h4{color:var(--radiance);} .orbcard.radiance .glow{box-shadow:inset 0 0 50px rgba(240,208,112,0.4);}

/* ── soul orb (CSS energy sphere) ── */
.soul-orb{position:relative; width:70%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 40% 34%, #eafaff 0%, #9fe4ff 11%, #4bb4ec 31%, #1a5fa0 56%, #0a2650 79%, #041530 100%);
  box-shadow:0 0 90px rgba(75,180,236,0.5), 0 0 30px rgba(159,228,255,0.4), inset -14px -18px 60px rgba(0,10,30,0.75), inset 14px 18px 46px rgba(180,235,255,0.4);
  animation:orbPulse 5.5s ease-in-out infinite;}
.soul-orb::before{content:''; position:absolute; inset:-30%; background:conic-gradient(from 0deg, transparent, rgba(159,228,255,0.5), transparent 30%, rgba(75,180,236,0.42) 55%, transparent 75%, rgba(200,245,255,0.5), transparent); animation:spin 15s linear infinite; mix-blend-mode:screen; opacity:0.7;}
.soul-orb::after{content:''; position:absolute; left:29%; top:22%; width:26%; height:20%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.95), transparent 70%); filter:blur(3px);}
.soul-orb.dim{filter:grayscale(0.55) brightness(0.5);}

/* ── finale ── */
.finale{position:relative; padding:120px 24px; text-align:center; overflow:hidden; border-top:1px solid rgba(184,146,42,0.2);}
.finale-bg{position:absolute; inset:0; z-index:0;}
.finale-bg img{width:100%; height:100%; object-fit:cover; opacity:0.32;}
.finale-bg::after{content:''; position:absolute; inset:0; background:radial-gradient(80% 90% at 50% 50%, transparent, var(--void) 82%), linear-gradient(180deg, var(--void), transparent 30%, transparent 70%, var(--void));}
.finale-in{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;}
.finale img.mark{width:min(340px,72vw); height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.7)); margin-bottom:6px;}
.finale h2{font-family:'Cinzel Decorative',serif; font-weight:700; font-size:clamp(28px,4vw,46px); color:var(--bone); margin:10px 0 14px;}
.finale p{font-family:'Crimson Text',serif; font-size:20px; color:rgba(230,220,198,0.75); margin-bottom:32px;}

/* animations */
@keyframes rise{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;}}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);}}
@keyframes pulse{0%,100%{opacity:0.75;} 50%{opacity:1;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes orbPulse{0%,100%{box-shadow:0 0 80px rgba(75,180,236,0.45),0 0 26px rgba(159,228,255,0.35), inset -14px -18px 60px rgba(0,10,30,0.75), inset 14px 18px 46px rgba(180,235,255,0.4);} 50%{box-shadow:0 0 120px rgba(75,180,236,0.65),0 0 42px rgba(159,228,255,0.55), inset -14px -18px 60px rgba(0,10,30,0.7), inset 16px 20px 52px rgba(190,240,255,0.5);}}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1; transform:none;}

/* responsive */
@media(max-width:900px){
  .sec{padding:76px 20px;}
  .split{grid-template-columns:1fr; gap:34px;}
  .split.flip .split-media{order:0;}
  .split-media{max-width:380px; margin:0 auto;}
  .steps{grid-template-columns:1fr;}
  .orbs-grid,.grid-3{grid-template-columns:repeat(2,1fr);}
  .ribbon-in{grid-template-columns:repeat(2,1fr);}
  .ribbon-in .cell:nth-child(odd){border-right:1px solid rgba(184,146,42,0.14);}
  .ribbon-in .cell:nth-child(even){border-right:none;}
  .ribbon-in .cell{border-bottom:1px solid rgba(184,146,42,0.14);}
  .ribbon-in .cell:last-child{grid-column:1/-1;}
}
@media(max-width:560px){
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .orbs-grid{grid-template-columns:repeat(2,1fr);}
  .corner{width:64px;height:64px;} .corner::before{width:58px;} .corner::after{height:58px;}
  .hero{padding:120px 18px 70px;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;}
  .reveal{opacity:1; transform:none;}
}