@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Inter:wght@400;500;700;800&display=swap');

:root{
  --bg:#05010b;
  --panel:rgba(22,8,36,.78);
  --panel2:rgba(8,3,17,.82);
  --gold:#f5c76f;
  --gold2:#fff0bd;
  --purple:#8c35ff;
  --pink:#ff5acb;
  --text:#fff7e8;
  --muted:#cbb7de;
  --line:rgba(245,199,111,.25);
}

*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; font-family:Inter,system-ui,sans-serif; color:var(--text);
  background:
    radial-gradient(circle at 35% 25%,rgba(140,53,255,.28),transparent 32%),
    radial-gradient(circle at 82% 70%,rgba(255,90,203,.12),transparent 30%),
    linear-gradient(140deg,#020004,#080112 50%,#180620);
  overflow-x:hidden;
}
.stars{position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(var(--gold) 1px,transparent 1px);background-size:62px 62px,113px 113px;animation:drift 30s linear infinite}
@keyframes drift{to{transform:translateY(-180px)}}
.aura{position:fixed;width:520px;height:520px;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.35}
.aura-1{left:-160px;top:160px;background:var(--purple)}.aura-2{right:-180px;bottom:-170px;background:var(--gold)}
.app{width:min(1540px,calc(100vw - 28px));margin:18px auto;position:relative}
.hero{text-align:center;padding:24px 18px 20px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,rgba(30,8,48,.52),rgba(5,1,11,.6));box-shadow:0 0 70px rgba(0,0,0,.36),inset 0 0 40px rgba(245,199,111,.04);position:relative}
.top-actions{position:absolute;right:18px;top:18px}
.music-btn{border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.22);color:var(--gold);padding:10px 14px;cursor:pointer;font-family:Cinzel,serif;text-transform:uppercase;letter-spacing:.05em}
.music-btn.active{box-shadow:0 0 22px rgba(245,199,111,.22);background:linear-gradient(135deg,rgba(245,199,111,.2),rgba(140,53,255,.25))}
.kicker{font-family:Cinzel,serif;color:var(--gold);letter-spacing:.16em;text-transform:uppercase}
h1{font-family:Cinzel,serif;color:var(--gold);font-size:clamp(2.8rem,7vw,6.4rem);line-height:.9;margin:12px 0;text-transform:uppercase;text-shadow:0 0 32px rgba(245,199,111,.25)}
.hero p{max-width:820px;margin:0 auto;color:var(--muted);line-height:1.7}
.workspace{display:grid;grid-template-columns:310px minmax(420px,1fr) 500px;gap:18px;margin-top:18px}
.box,.question-box,.result{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,var(--panel),var(--panel2));box-shadow:0 0 34px rgba(140,53,255,.22)}
.box{padding:18px;margin-bottom:16px}
.box h2{font-family:Cinzel,serif;color:var(--gold);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
.spread{width:100%;display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:12px;align-items:center;justify-items:start;text-align:left;background:rgba(255,255,255,.04);color:var(--text);border:1px solid rgba(245,199,111,.16);border-radius:14px;padding:13px;margin-bottom:9px;cursor:pointer;transition:.25s}
.spread:hover,.spread.active{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(245,199,111,.18);background:linear-gradient(135deg,rgba(140,53,255,.25),rgba(255,90,203,.06))}
.spread-icon{display:grid;width:2.5rem;min-width:2.5rem;place-items:center;color:#fff;font-weight:900;line-height:1;text-align:center;text-shadow:0 0 12px rgba(255,255,255,.28)}
.spread-copy{display:grid;width:100%;min-width:0;justify-items:start}.spread b{font-family:Cinzel,serif;color:var(--gold)}.spread small{color:var(--muted)}
.themes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.theme{min-height:54px;display:grid;grid-template-columns:1.5rem minmax(0,auto);gap:.35rem;place-content:center;align-items:center;border-radius:999px;border:1px solid rgba(245,199,111,.18);background:rgba(0,0,0,.24);color:var(--text);cursor:pointer;transition:.25s}
.theme-icon{display:grid;width:1.5rem;place-items:center;color:#fff;line-height:1}
.theme:hover,.theme.active{border-color:var(--gold);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(245,199,111,.14)}
.smallprint{color:var(--muted);line-height:1.55}.smallprint b{color:var(--gold)}
.center{min-width:0}.question-box{padding:18px}
label{display:block;color:var(--gold);font-family:Cinzel,serif;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
textarea{width:100%;min-height:100px;resize:vertical;border-radius:16px;border:1px solid rgba(245,199,111,.22);background:rgba(0,0,0,.24);color:var(--text);padding:14px;font:inherit;outline:none}
textarea:focus{border-color:var(--gold);box-shadow:0 0 22px rgba(245,199,111,.12)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.chip{border:1px solid rgba(245,199,111,.26);border-radius:999px;padding:6px 10px;color:var(--gold);background:rgba(0,0,0,.2);font-size:.84rem}
.portal{min-height:560px;display:grid;place-items:center;position:relative}.portal-ring{position:absolute;width:440px;height:440px;border-radius:50%;border:1px solid rgba(245,199,111,.3);box-shadow:0 0 45px rgba(245,199,111,.18),inset 0 0 60px rgba(140,53,255,.14);animation:pulse 3.5s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.05);opacity:.68}}
.cards{display:flex;justify-content:center;align-items:center;gap:18px;z-index:2;flex-wrap:wrap}
.card{width:240px;height:390px;perspective:1200px}.card.small{width:128px;height:208px}
.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card.revealed .card-inner{transform:rotateY(180deg)}
.card-face,.card-back{position:absolute;inset:0;border-radius:20px;border:2px solid rgba(245,199,111,.78);backface-visibility:hidden;overflow:hidden;box-shadow:0 0 30px rgba(245,199,111,.2),0 0 70px rgba(140,53,255,.35)}
.card-back{display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(245,199,111,.16),transparent 22%),linear-gradient(145deg,#26043c,#05010b 58%,#3b075d)}
.card-back:before,.card-face:before{content:"";position:absolute;inset:13px;border:1px solid rgba(245,199,111,.4);border-radius:15px;z-index:5;pointer-events:none}
.moon{font-size:5.8rem;color:var(--gold);text-shadow:0 0 28px rgba(245,199,111,.5)}.deck-title{position:absolute;left:12px;right:12px;bottom:54px;text-align:center;font-family:Cinzel,serif;font-size:.82rem;letter-spacing:.16em;color:var(--gold);white-space:nowrap}
.card-face{transform:rotateY(180deg);background:#f7e8bd;color:#1d1023}
.card-art{position:absolute;inset:34px 16px 70px;border:1px solid #5d3d16;border-radius:10px;background:linear-gradient(#f7e8bd,#e9c87d);overflow:hidden}
.card-art svg{width:100%;height:100%;display:block}
.card-name{position:absolute;left:14px;right:14px;bottom:22px;text-align:center;color:#2a1631;font-family:Cinzel,serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:1rem}
.card-num{position:absolute;top:15px;width:100%;text-align:center;color:#2a1631;font-family:Cinzel,serif;font-weight:700;z-index:2}
.card.small .card-name{font-size:.58rem;bottom:12px}.card.small .card-num{top:8px;font-size:.68rem}.card.small .card-art{inset:20px 8px 36px}.card.small .card-back:before,.card.small .card-face:before{inset:7px;border-radius:10px}.card.small .deck-title{bottom:28px;font-size:.42rem;letter-spacing:.1em}.card.small .moon{font-size:3rem}
.shuffling{animation:shuffle .7s ease-in-out infinite}
@keyframes shuffle{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-24px) rotate(-6deg)}50%{transform:translateX(18px) rotate(6deg) scale(1.03)}75%{transform:translateX(-12px) rotate(-3deg)}}
.actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.primary,.secondary{border-radius:14px;padding:16px 22px;min-width:220px;cursor:pointer;font-family:Cinzel,serif;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line);transition:.25s}
.primary{background:linear-gradient(135deg,#ffe2a2,#ff64ca,#8c35ff);color:#21051f;font-weight:800}.secondary{background:rgba(0,0,0,.22);color:var(--text)}
.primary:hover,.secondary:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(245,199,111,.18),0 0 16px rgba(245,199,111,.12)}
.result{padding:24px;min-height:740px}.empty{min-height:640px;display:grid;place-items:center;align-content:center;text-align:center;color:var(--muted)}.empty div{font-size:5rem;color:var(--gold)}.empty h2{font-family:Cinzel,serif;color:var(--gold)}
.hidden{display:none}.reading-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:18px;min-width:0}.reading-top>div{min-width:0}.reading-top p{margin:0 0 7px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;font-size:.8rem}.reading-top h2{font-family:Cinzel,serif;color:var(--gold);font-size:2.4rem;margin:0;text-transform:uppercase;line-height:1;overflow-wrap:anywhere}
#energyScore{flex:0 1 auto;max-width:100%;height:max-content;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--gold);white-space:normal;text-align:center;line-height:1.25;font-size:.86rem}
blockquote{margin:22px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.2);line-height:1.7;color:#fff0cf;text-align:center;font-size:1.08rem}
section{border-bottom:1px solid rgba(245,199,111,.16);padding:14px 0}section h3{font-family:Cinzel,serif;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;font-size:.98rem}section p,li{line-height:1.72;color:#efe4f8}
ul{list-style:none;padding:0;margin:0}li{margin:8px 0}li:before{content:"✦ ";color:var(--gold)}
.spread-item{border:1px solid rgba(245,199,111,.18);border-radius:14px;padding:12px;margin:10px 0;background:rgba(0,0,0,.18);line-height:1.6}.spread-item b{color:var(--gold);font-family:Cinzel,serif}
footer{text-align:center;color:rgba(255,255,255,.52);padding:22px}
@media(max-width:1280px){.workspace{grid-template-columns:300px 1fr}.result{grid-column:1/-1;min-height:auto}.empty{min-height:260px}}
@media(max-width:850px){.app{width:calc(100vw - 14px);margin:7px auto}.top-actions{position:static;margin-bottom:12px}.workspace{grid-template-columns:1fr}.portal{min-height:430px}.portal-ring{width:330px;height:330px}.card{width:210px;height:340px}.card.small{width:92px;height:150px}.themes{grid-template-columns:1fr}.primary,.secondary{width:100%}.reading-top{display:block}}


#fx{
 position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.9;
}
.app{position:relative; z-index:2;}
.hero{
 backdrop-filter: blur(8px);
 box-shadow:0 0 90px rgba(245,199,111,.12), inset 0 0 70px rgba(255,255,255,.03);
}
.hero:after{
 content:""; position:absolute; inset:0; border-radius:26px;
 background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.06) 35%,transparent 60%);
 animation:shine 8s linear infinite;
 pointer-events:none;
}
@keyframes shine{
 from{transform:translateX(-100%)}
 to{transform:translateX(100%)}
}
.portal-ring{
 box-shadow:0 0 55px rgba(245,199,111,.24), inset 0 0 80px rgba(140,53,255,.18);
 border-width:2px;
}
.card{
 filter:drop-shadow(0 0 24px rgba(245,199,111,.15));
}
.card.revealed{
 animation:floatCard 3.2s ease-in-out infinite;
}
@keyframes floatCard{
 0%,100%{transform:translateY(0px)}
 50%{transform:translateY(-10px)}
}
.card-face:after{
 content:""; position:absolute; inset:-20%;
 background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.22) 45%,transparent 65%);
 transform:translateX(-120%) rotate(12deg);
 animation:cardShine 5s linear infinite;
}
@keyframes cardShine{
 to{transform:translateX(140%) rotate(12deg);}
}
.primary{
 box-shadow:0 0 26px rgba(245,199,111,.22), 0 0 60px rgba(140,53,255,.18);
}
.primary:hover{
 transform:none;
}
.result{
 backdrop-filter: blur(6px);
}
blockquote{
 font-size:1.15rem;
 box-shadow: inset 0 0 40px rgba(245,199,111,.03);
}
.reading-top h2{
 text-shadow:0 0 20px rgba(245,199,111,.2);
}


/* ===== V6 GOD MODE ===== */
.god-dashboard{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:16px;
 margin:18px 0;
}
.god-card{
 border:1px solid var(--line);
 border-radius:22px;
 padding:18px;
 background:linear-gradient(180deg,rgba(35,8,55,.76),rgba(7,2,14,.82));
 box-shadow:0 0 36px rgba(140,53,255,.18);
 position:relative;
 overflow:hidden;
 min-height:178px;
}
.god-card:before{
 content:"";
 position:absolute;
 inset:-50%;
 background:radial-gradient(circle,rgba(245,199,111,.12),transparent 40%);
 animation:godPulse 5s ease-in-out infinite;
}
@keyframes godPulse{50%{transform:scale(1.2) rotate(10deg)}}
.god-card span{
 position:relative;
 font-size:2.3rem;
 color:var(--gold);
}
.god-card h3{
 position:relative;
 margin:10px 0 6px;
 color:var(--gold);
 font-family:Cinzel,serif;
 text-transform:uppercase;
}
.god-card p{
 position:relative;
 color:var(--muted);
 line-height:1.45;
 min-height:42px;
}
.god-card button{
 position:relative;
 width:100%;
 border:1px solid rgba(245,199,111,.34);
 border-radius:12px;
 padding:12px;
 background:rgba(0,0,0,.24);
 color:var(--gold);
 cursor:pointer;
 font-family:Cinzel,serif;
 text-transform:uppercase;
}
.god-card button:hover{
 box-shadow:inset 0 0 0 1px rgba(245,199,111,.18);
 transform:none;
}
.premium-locked{
 background:linear-gradient(180deg,rgba(83,30,100,.76),rgba(28,5,38,.86));
}
.portal:after{
 content:"Sleep de energie naar je toe";
 position:absolute;
 bottom:34px;
 color:rgba(245,199,111,.65);
 font-family:Cinzel,serif;
 letter-spacing:.12em;
 text-transform:uppercase;
 font-size:.78rem;
}
.card:hover{
 transition:.25s ease;
}
.modal{
 position:fixed;
 inset:0;
 z-index:20;
 display:grid;
 place-items:center;
 background:rgba(0,0,0,.72);
 backdrop-filter:blur(8px);
}
.modal.hidden{display:none}
.modal-box{
 width:min(560px,92vw);
 border:1px solid var(--line);
 border-radius:26px;
 padding:28px;
 background:linear-gradient(180deg,rgba(35,8,55,.96),rgba(7,2,14,.98));
 box-shadow:0 0 80px rgba(245,199,111,.18);
 position:relative;
}
.modal-box h2{
 font-family:Cinzel,serif;
 color:var(--gold);
 font-size:2.3rem;
 margin:8px 0 12px;
}
.modal-box p,.modal-box li{color:#efe4f8;line-height:1.7}
.modal-close{
 position:absolute;
 top:14px;
 right:14px;
 width:36px;
 height:36px;
 border-radius:999px;
 border:1px solid var(--line);
 background:rgba(0,0,0,.24);
 color:var(--gold);
 cursor:pointer;
 font-size:1.4rem;
}
@media(max-width:1100px){
 .god-dashboard{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
 .god-dashboard{grid-template-columns:1fr}
}


/* ===== V7 DEEP READING EMPIRE ===== */
.empire-banner{
 display:flex;
 justify-content:space-between;
 gap:18px;
 align-items:center;
 border:1px solid var(--line);
 border-radius:26px;
 padding:24px;
 margin:18px 0;
 background:
 linear-gradient(135deg,rgba(83,30,100,.76),rgba(28,5,38,.86));
 box-shadow:0 0 50px rgba(245,199,111,.14);
}
.empire-banner h2{
 margin:8px 0;
 color:var(--gold);
 font-family:Cinzel,serif;
 font-size:2rem;
 text-transform:uppercase;
}
.empire-banner p{
 color:#efe4f8;
 max-width:700px;
 line-height:1.7;
}
.empire-btn{
 border:1px solid rgba(245,199,111,.34);
 border-radius:14px;
 padding:16px 22px;
 background:linear-gradient(135deg,#ffe2a2,#ff64ca,#8c35ff);
 color:#22051f;
 font-weight:800;
 cursor:pointer;
 font-family:Cinzel,serif;
 text-transform:uppercase;
 letter-spacing:.08em;
 min-width:240px;
}
.empire-btn:hover{
 transform:none;
 box-shadow:inset 0 0 0 1px rgba(245,199,111,.18),0 0 16px rgba(245,199,111,.12);
}
.empire-btn.full{width:100%; margin-top:6px;}
.deep-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:12px;
 margin-top:12px;
}
.deep-card{
 border:1px solid rgba(245,199,111,.18);
 border-radius:16px;
 padding:14px;
 background:rgba(0,0,0,.18);
}
.deep-card h4{
 margin:0 0 8px;
 color:var(--gold);
 font-family:Cinzel,serif;
 text-transform:uppercase;
 font-size:.88rem;
 letter-spacing:.08em;
}
.deep-card p{
 margin:0;
 color:#efe4f8;
 line-height:1.65;
}
@media(max-width:900px){
 .empire-banner{display:block}
 .empire-btn{width:100%;margin-top:14px}
 .deep-grid{grid-template-columns:1fr}
}


/* ===== V7.2 DEEP RITUAL CARD LAYOUT ===== */
.deep-ritual-card{
 transition: opacity .4s ease, transform .5s ease;
}
.deep-laid{
 animation:deepLayFloat 4s ease-in-out infinite;
}
@keyframes deepLayFloat{
 0%,100%{filter:drop-shadow(0 0 18px rgba(245,199,111,.16))}
 50%{filter:drop-shadow(0 0 34px rgba(245,199,111,.34))}
}
.cards:has(.deep-ritual-card){
 max-width:760px;
}
.cards:has(.deep-ritual-card) .card.small{
 width:106px;
 height:172px;
}
@media(max-width:850px){
 .cards:has(.deep-ritual-card) .card.small{
   width:82px;
   height:134px;
 }
}


.language-select{
 border:1px solid var(--line);
 border-radius:999px;
 background:rgba(0,0,0,.22);
 color:var(--gold);
 padding:10px 12px;
 cursor:pointer;
 font-family:Cinzel,serif;
 text-transform:uppercase;
 letter-spacing:.05em;
 margin-right:8px;
 outline:none;
}
.language-select option{
 background:#12051c;
 color:#f5c76f;
}
.top-actions{
 display:flex;
 align-items:center;
 gap:8px;
 position:relative;
 z-index:10020;
}

.back-to-steffsweb{
 position:fixed;
 top:14px;
 left:14px;
 z-index:10000;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:38px;
 height:38px;
 padding:0;
 color:#180512;
 font-weight:900;
 font-family:Inter,system-ui,sans-serif;
 cursor:pointer;
 background:linear-gradient(135deg,#ffe7a3,#f5c76f);
 border:1px solid rgba(255,255,255,.22);
 border-radius:999px;
 box-shadow:0 16px 45px rgba(0,0,0,.42),0 0 28px rgba(245,199,111,.22);
 text-decoration:none;
}
.back-to-steffsweb b{
 position:absolute;
 width:1px;
 height:1px;
 overflow:hidden;
 clip:rect(0 0 0 0);
 white-space:nowrap;
}
.back-to-steffsweb span{
 display:grid;
 width:26px;
 height:26px;
 place-items:center;
 color:#ffe7a3;
 background:#19051d;
 border-radius:50%;
 font-size:20px;
 line-height:1;
}
.back-to-steffsweb:hover{
 transform:translateY(-1px);
 filter:brightness(1.05);
}
@media(max-width:640px){
 .back-to-steffsweb{
   top:12px;
   left:10px;
   width:34px;
   height:34px;
 }
}


/* ===== V9 MOBILE CLARITY UPGRADE ===== */
.mobile-jump{
 display:none;
 position:fixed;
 left:14px;
 right:14px;
 bottom:14px;
 z-index:30;
 border:1px solid rgba(245,199,111,.5);
 border-radius:16px;
 padding:15px 18px;
 background:linear-gradient(135deg,#ffe2a2,#ff64ca,#8c35ff);
 color:#22051f;
 font-family:Cinzel,serif;
 font-weight:800;
 text-transform:uppercase;
 letter-spacing:.06em;
 box-shadow:0 0 30px rgba(245,199,111,.24);
}

@media(max-width:850px){
 body{
   background:
    radial-gradient(circle at 50% 12%,rgba(140,53,255,.26),transparent 28%),
    linear-gradient(160deg,#05010b,#12051c 70%,#05010b);
 }
 .app{
   width:100%;
   margin:0;
   padding:0 10px 86px;
 }
 .hero{
   margin-top:8px;
   padding:16px 12px;
   border-radius:18px;
 }
 .top-actions{
   justify-content:center;
   flex-wrap:wrap;
   gap:8px;
   margin-bottom:8px;
 }
 .language-select,
 .music-btn{
   min-height:42px;
   font-size:.78rem;
 }
 .kicker{
   font-size:.72rem;
   letter-spacing:.11em;
 }
 h1{
   font-size:2.45rem;
   line-height:1;
   margin:8px 0;
 }
 .hero p{
   font-size:.92rem;
   line-height:1.55;
 }
 .god-dashboard,
 .empire-banner{
   display:none !important;
 }
 .workspace{
   display:flex;
   flex-direction:column;
   gap:12px;
   margin-top:12px;
 }
 .controls{ order:1; }
 .center{ order:2; }
 .result{ order:3; }
 .box{
   padding:14px;
   border-radius:18px;
   margin-bottom:12px;
 }
 .box h2{
   font-size:.9rem;
   margin-bottom:10px;
 }
 .spread{
   padding:11px 12px;
   border-radius:13px;
   margin-bottom:7px;
 }
 .spread small{
   display:none;
 }
 .spread b{
   font-size:.86rem;
 }
 .themes{
   grid-template-columns:repeat(2,1fr);
   gap:8px;
 }
 .theme{
   min-height:46px;
   font-size:.88rem;
 }
 .smallprint{
   display:none;
 }
 .question-box{
   padding:14px;
   border-radius:18px;
 }
 label{
   font-size:.86rem;
 }
 textarea{
   min-height:82px;
   border-radius:14px;
   font-size:.95rem;
 }
 .chips{
   gap:6px;
 }
 .chip{
   font-size:.75rem;
   padding:5px 8px;
 }
 .portal{
   min-height:360px;
   margin-top:4px;
 }
 .portal-ring{
   width:260px;
   height:260px;
 }
 .portal:after{
   display:none;
 }
 .cards{
   gap:9px;
   max-width:100%;
 }
 .card{
   width:178px;
   height:292px;
 }
 .card.small{
   width:76px !important;
   height:124px !important;
 }
 .card.small .card-name{
   font-size:.45rem;
   bottom:8px;
 }
 .card.small .card-num{
   font-size:.55rem;
   top:5px;
 }
 .card.small .card-art{
   inset:15px 6px 28px;
 }
 .moon{
   font-size:4.2rem;
 }
 .deck-title{
   bottom:42px;
   font-size:.62rem;
   letter-spacing:.12em;
 }
 .actions{
   position:sticky;
   bottom:8px;
   z-index:25;
   background:rgba(5,1,11,.78);
   backdrop-filter:blur(10px);
   border:1px solid rgba(245,199,111,.16);
   border-radius:18px;
   padding:10px;
   margin-top:6px;
 }
 .primary,.secondary{
   min-width:0;
   width:100%;
   padding:14px 16px;
   font-size:.78rem;
   border-radius:13px;
 }
 #voiceRead{
   display:none;
 }
 .result{
   padding:16px;
   border-radius:18px;
   min-height:auto;
 }
 .empty{
   min-height:220px;
   padding:10px;
 }
 .empty div{
   font-size:3.2rem;
 }
 .empty h2{
   font-size:1.35rem;
   margin:8px 0;
 }
 .empty p{
   font-size:.92rem;
   line-height:1.55;
 }
 .reading-top{
   display:block;
   padding-bottom:12px;
 }
 .reading-top h2{
   font-size:1.75rem;
   line-height:1.08;
 }
 .reading-top p{
   font-size:.72rem;
 }
 #energyScore{
   display:inline-block;
   max-width:100%;
   margin-top:10px;
   font-size:.75rem;
 }
 blockquote{
   margin:14px 0;
   padding:14px;
   font-size:.95rem;
   line-height:1.6;
 }
 section{
   padding:10px 0;
 }
 section h3{
   font-size:.82rem;
   margin:8px 0;
 }
 section p,li{
   font-size:.94rem;
   line-height:1.62;
 }
 .deep-grid{
   grid-template-columns:1fr;
   gap:9px;
 }
 .deep-card{
   padding:12px;
   border-radius:14px;
 }
 .spread-item{
   padding:10px;
   font-size:.9rem;
 }
 .modal-box{
   padding:20px;
   border-radius:20px;
 }
 .modal-box h2{
   font-size:1.7rem;
 }
 footer{
   font-size:.78rem;
   padding:16px 10px 90px;
 }
 .mobile-jump.show{
   display:block;
 }
}

@media(max-width:420px){
 .app{
   padding-left:8px;
   padding-right:8px;
 }
 h1{
   font-size:2.1rem;
 }
 .card{
   width:160px;
   height:264px;
 }
 .card.small{
   width:68px !important;
   height:112px !important;
 }
 .cards:has(.deep-ritual-card){
   display:grid;
   grid-template-columns:repeat(3,1fr);
   justify-items:center;
 }
 .cards:has(.deep-ritual-card) .card.small{
   width:82px !important;
   height:134px !important;
 }
 .themes{
   grid-template-columns:1fr;
 }
}

.oracle-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.oracle-stat{padding:12px;border:1px solid rgba(245,199,111,.18);border-radius:14px;background:rgba(0,0,0,.18);text-align:center}
.oracle-stat b{display:block;color:var(--gold);font-size:1.2rem}
.oracle-timeline{padding:12px;border-radius:14px;background:rgba(140,53,255,.08);border:1px solid rgba(140,53,255,.18);margin:10px 0}
@media(max-width:850px){.oracle-stats{grid-template-columns:1fr}}


/* ===== V11 INFINITE ORACLE ===== */
.infinite-badge{
 display:inline-flex;
 align-items:center;
 gap:8px;
 border:1px solid rgba(245,199,111,.24);
 border-radius:999px;
 padding:7px 11px;
 color:var(--gold);
 background:rgba(0,0,0,.18);
 font-family:Cinzel,serif;
 font-size:.72rem;
 letter-spacing:.08em;
 text-transform:uppercase;
 margin-bottom:10px;
}
.variation-note{
 border:1px solid rgba(147,255,210,.18);
 border-radius:14px;
 padding:12px;
 background:rgba(147,255,210,.05);
 color:#dfffee;
 line-height:1.6;
 margin:12px 0;
}

.tarot-module-section{
 border-bottom:0;
 margin-top:10px;
 padding:16px 0 4px;
}
.module-intro{
 color:var(--muted);
 line-height:1.65;
 margin-bottom:14px;
}
.tarot-module-buttons{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:10px;
 margin:12px 0 14px;
}
.tarot-module-buttons button{
 position:relative;
 overflow:hidden;
 min-height:82px;
 padding:14px;
 text-align:left;
 color:var(--text);
 cursor:pointer;
 background:
   radial-gradient(circle at 85% 18%,rgba(245,199,111,.12),transparent 7rem),
   linear-gradient(135deg,rgba(140,53,255,.24),rgba(255,90,203,.09)),
   rgba(0,0,0,.22);
 border:1px solid rgba(245,199,111,.22);
 border-radius:16px;
 box-shadow:0 16px 40px rgba(0,0,0,.22);
 transition:.22s ease;
}
.tarot-module-buttons button:before{
 content:"✦";
 position:absolute;
 top:12px;
 right:14px;
 color:var(--gold);
 text-shadow:0 0 18px rgba(245,199,111,.7);
}
.tarot-module-buttons button:hover,
.tarot-module-buttons button.active{
 border-color:var(--gold);
 transform:none;
 box-shadow:inset 0 0 0 1px rgba(245,199,111,.18),0 0 16px rgba(245,199,111,.1);
}
.tarot-module-buttons button.active{
 background:
   radial-gradient(circle at 85% 18%,rgba(245,199,111,.2),transparent 7rem),
   linear-gradient(135deg,rgba(245,199,111,.16),rgba(140,53,255,.28)),
   rgba(0,0,0,.24);
}
.tarot-module-buttons span{
 display:block;
 margin-bottom:6px;
 color:var(--gold);
 font-family:Cinzel,serif;
 text-transform:uppercase;
 letter-spacing:.06em;
}
.tarot-module-buttons small{
 display:block;
 max-width:90%;
 color:var(--muted);
 line-height:1.45;
}
.tarot-module-result{
 border:1px solid rgba(245,199,111,.22);
 border-radius:18px;
 padding:14px;
 background:
   radial-gradient(circle at top left,rgba(245,199,111,.10),transparent 12rem),
   rgba(0,0,0,.2);
 box-shadow:inset 0 0 38px rgba(245,199,111,.03);
}
.module-result-top{
 display:flex;
 gap:12px;
 align-items:flex-start;
 padding-bottom:12px;
 border-bottom:1px solid rgba(245,199,111,.16);
}
.module-result-top>span{
 display:grid;
 width:36px;
 height:36px;
 flex:0 0 auto;
 place-items:center;
 color:#1c071f;
 background:linear-gradient(135deg,#ffe2a2,#f5c76f);
 border-radius:50%;
 box-shadow:0 0 24px rgba(245,199,111,.22);
}
.module-result-top h4{
 margin:0 0 6px;
 color:var(--gold);
 font-family:Cinzel,serif;
 text-transform:uppercase;
}
.module-result-top p{
 margin:0;
 color:var(--muted);
 line-height:1.55;
}
.module-reading-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
 margin-top:12px;
}
.module-reading-grid article{
 padding:12px;
 background:rgba(255,255,255,.035);
 border:1px solid rgba(245,199,111,.14);
 border-radius:14px;
}
.module-reading-grid b{
 display:block;
 margin-bottom:7px;
 color:var(--gold);
 font-family:Cinzel,serif;
 text-transform:uppercase;
 letter-spacing:.05em;
}
.module-reading-grid p{
 margin:.35rem 0 0;
 color:#efe4f8;
 line-height:1.62;
}
.module-wide{
 grid-column:1/-1;
}
@media(max-width:850px){
 .tarot-module-buttons,
 .module-reading-grid{
   grid-template-columns:1fr;
 }
 .tarot-module-buttons button{
   min-height:74px;
   padding:12px;
 }
 .module-wide{
   grid-column:auto;
 }
}

/* Absolute still-hover controls: no growth, no jump, no oversized aura. */
.music-btn,
.language-select,
.spread,
.theme,
.primary,
.secondary,
.empire-btn,
.god-mode-btn,
.mobile-jump,
.god-card button,
.tarot-module-buttons button,
.back-to-steffsweb {
 transform:none !important;
 filter:none !important;
 transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease !important;
 will-change:auto !important;
 contain:layout;
}

.music-btn:hover,
.language-select:hover,
.primary:hover,
.secondary:hover,
.empire-btn:hover,
.god-mode-btn:hover,
.mobile-jump:hover,
.god-card button:hover,
.tarot-module-buttons button:hover,
.back-to-steffsweb:hover {
 transform:none !important;
 filter:none !important;
 box-shadow:none !important;
}

.spread,
.theme,
.tarot-module-buttons button {
 position:relative;
 overflow:hidden;
 isolation:isolate;
}

.spread > *,
.theme > *,
.tarot-module-buttons button > * {
 position:relative;
 z-index:1;
}

.spread::after,
.theme::after,
.tarot-module-buttons button::after {
 content:"";
 position:absolute;
 inset:-45% -80%;
 z-index:0;
 pointer-events:none;
 background:linear-gradient(115deg,transparent 34%,rgba(255,239,190,.18) 45%,rgba(255,255,255,.32) 50%,rgba(245,199,111,.16) 56%,transparent 68%);
 opacity:0;
 transform:translateX(-115%) rotate(8deg);
 transition:opacity .18s ease;
}

.spread:hover::after,
.theme:hover::after,
.tarot-module-buttons button:hover::after {
 opacity:1;
 animation:tarotButtonShine 1.45s ease-in-out infinite;
}

.spread:hover,
.theme:hover,
.tarot-module-buttons button:hover {
 transform:none !important;
 filter:none !important;
 border-color:rgba(245,199,111,.72) !important;
 box-shadow:inset 0 0 0 1px rgba(245,199,111,.2),inset 0 0 24px rgba(245,199,111,.08),0 0 18px rgba(245,199,111,.12) !important;
}

@keyframes tarotButtonShine{
 0%{transform:translateX(-115%) rotate(8deg)}
 55%{transform:translateX(115%) rotate(8deg)}
 100%{transform:translateX(115%) rotate(8deg)}
}

.spread:hover:not(.active){
 border-color:rgba(245,199,111,.72) !important;
 background:linear-gradient(135deg,rgba(245,199,111,.07),rgba(140,53,255,.13)),rgba(255,255,255,.04) !important;
 box-shadow:inset 0 0 0 1px rgba(245,199,111,.2),inset 0 0 24px rgba(245,199,111,.08),0 0 18px rgba(245,199,111,.12) !important;
 color:var(--text) !important;
}

.theme:hover:not(.active){
 border-color:rgba(245,199,111,.72) !important;
 background:linear-gradient(135deg,rgba(245,199,111,.07),rgba(140,53,255,.13)),rgba(0,0,0,.24) !important;
 color:var(--text) !important;
 box-shadow:inset 0 0 0 1px rgba(245,199,111,.2),inset 0 0 24px rgba(245,199,111,.08),0 0 18px rgba(245,199,111,.12) !important;
}

.spread.active,
.theme.active,
.tarot-module-buttons button.active {
 transform:none !important;
 filter:none !important;
 box-shadow:inset 0 0 0 1px rgba(245,199,111,.18) !important;
}

.spread.magic-hover-aura::before,
.spread.magic-hover-aura:hover::before,
.theme.magic-hover-aura::before,
.theme.magic-hover-aura:hover::before,
.primary.magic-hover-aura::before,
.primary.magic-hover-aura:hover::before,
.secondary.magic-hover-aura::before,
.secondary.magic-hover-aura:hover::before,
.music-btn.magic-hover-aura::before,
.empire-btn.magic-hover-aura::before,
.god-card button.magic-hover-aura::before,
.tarot-module-buttons button.magic-hover-aura::before,
.tarot-module-buttons button.magic-hover-aura:hover::before {
 display:none !important;
 opacity:0 !important;
 animation:none !important;
 content:none !important;
}

.spread .magic-spark,
.theme .magic-spark,
.primary .magic-spark,
.secondary .magic-spark,
.music-btn .magic-spark,
.empire-btn .magic-spark,
.god-card button .magic-spark,
.tarot-module-buttons button .magic-spark {
 display:none !important;
}


.god-db-panel{
 border:1px solid rgba(245,199,111,.22);
 border-radius:16px;
 padding:14px;
 background:linear-gradient(135deg,rgba(245,199,111,.08),rgba(140,53,255,.08));
 margin:12px 0;
}
.god-db-panel h3{
 color:var(--gold);
 font-family:Cinzel,serif;
 text-transform:uppercase;
 letter-spacing:.08em;
}

.member-deep-note{
 max-width:720px;
 margin:10px 0 0;
 color:#fff0bd;
 font-weight:800;
 line-height:1.55;
}

.empire-btn.member-locked{
 background:linear-gradient(135deg,#ffe2a2,#f5c76f 45%,#5b1c7b);
 color:#170315;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 22px rgba(245,199,111,.16);
}

.tarot-member-deep-locked #deepSection{
 display:none !important;
}

.tarot-member-gate-section{
 border-color:rgba(245,199,111,.42) !important;
 background:
   linear-gradient(135deg,rgba(245,199,111,.09),rgba(151,55,255,.12),rgba(161,23,70,.14)),
   rgba(3,0,8,.72) !important;
 box-shadow:inset 0 0 54px rgba(245,199,111,.06),0 0 34px rgba(140,53,255,.14);
}

.tarot-member-gate-symbol{
 width:44px;
 height:44px;
 display:grid;
 place-items:center;
 margin-bottom:12px;
 border-radius:50%;
 color:#170315;
 background:linear-gradient(135deg,#ffe7a8,#f5c76f,#a44dff);
 box-shadow:0 0 26px rgba(245,199,111,.22);
 font-weight:900;
}

.tarot-member-cta{
 display:flex;
 flex-wrap:wrap;
 gap:12px;
 margin-top:18px;
}

.tarot-member-cta a{
 min-height:48px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 padding:12px 18px;
 border-radius:999px;
 border:1px solid rgba(245,199,111,.62);
 text-decoration:none;
 font-weight:900;
 line-height:1;
 letter-spacing:.01em;
 transition:box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}

.tarot-member-cta a:hover{
 border-color:rgba(255,228,161,.95);
 box-shadow:0 0 22px rgba(245,199,111,.18),inset 0 0 20px rgba(255,255,255,.08);
}

.tarot-member-primary{
 color:#170315;
 background:linear-gradient(135deg,#ffe6a7,#f5c76f 48%,#ff8ebd);
}

.tarot-member-secondary{
 color:var(--gold);
 background:rgba(0,0,0,.24);
}

.card.has-real-art .card-face{
 background:linear-gradient(145deg,#f7deb0,#ffe9af 46%,#d29b47);
}

.card.has-real-art .card-art{
 inset:10px;
 border:0;
 border-radius:16px;
 background:#f4dfaa;
 box-shadow:inset 0 0 0 2px rgba(245,199,111,.32),0 10px 24px rgba(35,10,25,.18);
}

.card.has-real-art .card-art img{
 width:100%;
 height:100%;
 display:block;
 object-fit:contain;
 object-position:center;
 user-select:none;
 pointer-events:none;
}

.card.has-real-art .card-num,
.card.has-real-art .card-name{
 display:none;
}

.card.is-reversed .card-art img{
 transform:rotate(180deg);
}

.card.deep-preserved-card{
 filter:drop-shadow(0 0 10px rgba(245,199,111,.14));
}

.card.deep-new-card{
 animation:deepCardArrive .9s ease forwards;
}

body.tarot-deep-opened #unlockDeepTop,
body.tarot-deep-opened #unlockDeepInline{
 display:none !important;
}

@keyframes deepCardArrive{
 0%{opacity:0;filter:blur(6px) brightness(1.35);transform:translateY(-24px) scale(.82) rotate(0deg)}
 100%{opacity:1;filter:blur(0) brightness(1);transform:var(--deep-final-transform, none)}
}