/* The Arcana — styles */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --bg:#0a0812; --gold:#d4a24e; --gold-dim:#9a7638;
  --text:#ece6f0; --muted:#8a7fa0; --purple:#b18cf2; --line:#2a2340;
}
html,body{height:100%;}
body{
  background:radial-gradient(circle at 50% 0%, #1a1330 0%, var(--bg) 60%), var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:22px 16px 48px;overflow-x:hidden;position:relative;
}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.5;}
.stars i{position:absolute;background:#fff;border-radius:50%;animation:tw 3s infinite ease-in-out;}
@keyframes tw{0%,100%{opacity:0.2}50%{opacity:0.9}}
.wrap{position:relative;z-index:1;width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;}
.title{font-size:15px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);font-weight:600;}
.glyph{font-size:20px;color:var(--gold);margin:4px 0 12px;}

.modes{display:flex;gap:6px;background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:30px;padding:4px;margin-bottom:24px;}
.mode{padding:9px 22px;border-radius:24px;font-size:13px;letter-spacing:1px;color:var(--muted);cursor:pointer;transition:all .2s;font-weight:600;}
.mode.active{background:linear-gradient(135deg,var(--gold),#c88a3a);color:#120e05;}

.single-view{display:flex;flex-direction:column;align-items:center;}
.stage{perspective:1400px;width:250px;height:430px;margin-bottom:6px;}
.card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1);cursor:pointer;}
.card.flipped{transform:rotateY(180deg);}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:15px;overflow:hidden;box-shadow:0 12px 40px rgba(180,140,242,0.35),0 0 0 1px rgba(212,162,78,0.3) inset;}
.back{background:repeating-linear-gradient(45deg,#1a1430 0 10px,#221838 10px 20px);border:2px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;}
.back .ring{width:140px;height:140px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(212,162,78,0.4),0 0 30px rgba(212,162,78,0.2) inset;position:relative;}
.back .ring::before{content:"";position:absolute;width:104px;height:104px;border-radius:50%;border:1px solid var(--gold-dim);}
.back .star{font-size:52px;color:var(--gold);filter:drop-shadow(0 0 10px rgba(212,162,78,0.6));}
.back .lbl{color:var(--gold-dim);letter-spacing:4px;font-size:11px;text-transform:uppercase;}
.front{transform:rotateY(180deg);background:#0d0a16;border:2px solid var(--gold);}
.front img{width:100%;height:100%;object-fit:cover;display:block;}
.front img.rev{transform:rotate(180deg);}
.rev-tag{position:absolute;top:10px;right:10px;z-index:3;background:rgba(177,140,242,0.92);color:#0a0812;font-size:10px;font-weight:700;letter-spacing:1px;padding:3px 8px;border-radius:20px;text-transform:uppercase;}

.info{width:100%;max-width:390px;margin-top:18px;text-align:center;opacity:0;transform:translateY(14px);transition:all .5s ease .2s;}
.info.show{opacity:1;transform:translateY(0);}
.card-name{font-size:24px;font-weight:700;margin-bottom:3px;}
.card-arcana{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:11px;}
.kw{display:inline-block;font-size:12.5px;color:var(--purple);border:1px solid var(--line);border-radius:20px;padding:5px 14px;margin-bottom:14px;background:rgba(177,140,242,0.06);}
.meaning{font-size:15px;line-height:1.65;color:#cfc7dc;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0));border:1px solid var(--line);border-radius:12px;padding:15px 17px;}
.meaning .pos{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:6px;}

.spread{display:none;width:100%;flex-direction:column;align-items:center;}
.spread.active{display:flex;}
.spread-row{display:flex;gap:10px;justify-content:center;width:100%;}
.slot{flex:1;max-width:130px;display:flex;flex-direction:column;align-items:center;}
.slot .pos-lbl{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;height:14px;}
.mini-stage{perspective:900px;width:100%;aspect-ratio:250/430;}
.mini-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1);cursor:pointer;}
.mini-card.flipped{transform:rotateY(180deg);}
.mini-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:9px;overflow:hidden;box-shadow:0 6px 20px rgba(180,140,242,0.3),0 0 0 1px rgba(212,162,78,0.3) inset;}
.mini-back{background:repeating-linear-gradient(45deg,#1a1430 0 7px,#221838 7px 14px);border:1.5px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;}
.mini-back .s{font-size:30px;color:var(--gold);filter:drop-shadow(0 0 6px rgba(212,162,78,0.6));}
.mini-front{transform:rotateY(180deg);background:#0d0a16;border:1.5px solid var(--gold);}
.mini-front img{width:100%;height:100%;object-fit:cover;}
.mini-front img.rev{transform:rotate(180deg);}
.mini-rev{position:absolute;top:5px;right:5px;z-index:3;background:rgba(177,140,242,0.92);color:#0a0812;font-size:7px;font-weight:700;letter-spacing:.5px;padding:2px 5px;border-radius:12px;text-transform:uppercase;}
.mini-name{font-size:11px;font-weight:600;margin-top:7px;text-align:center;line-height:1.3;min-height:28px;}

.readings{width:100%;margin-top:22px;display:flex;flex-direction:column;gap:12px;}
.reading{opacity:0;transform:translateY(10px);transition:all .5s ease;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0));border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:13px 15px;text-align:left;}
.reading.show{opacity:1;transform:translateY(0);}
.reading .r-pos{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);}
.reading .r-name{font-size:16px;font-weight:700;margin:2px 0 4px;}
.reading .r-name .tiny{font-size:11px;color:var(--purple);font-weight:600;letter-spacing:1px;margin-left:6px;}
.reading .r-mean{font-size:13.5px;line-height:1.55;color:#cfc7dc;}

.draw-btn{margin-top:24px;background:linear-gradient(135deg,var(--gold),#c88a3a);color:#120e05;font-weight:700;font-size:15px;letter-spacing:2px;text-transform:uppercase;border:none;border-radius:40px;padding:16px 44px;cursor:pointer;box-shadow:0 6px 24px rgba(212,162,78,0.4);transition:transform .15s ease;}
.draw-btn:active{transform:scale(0.95);}
.draw-btn.pulse{animation:btnpulse 2s infinite;}
@keyframes btnpulse{0%,100%{box-shadow:0 6px 24px rgba(212,162,78,0.4)}50%{box-shadow:0 6px 34px rgba(212,162,78,0.7)}}

.opts{display:flex;align-items:center;gap:10px;margin-top:16px;color:var(--muted);font-size:13px;}
.toggle{position:relative;width:44px;height:24px;background:var(--line);border-radius:20px;cursor:pointer;transition:background .2s;}
.toggle.on{background:var(--purple);}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:left .2s;}
.toggle.on::after{left:22px;}
.counter{margin-top:18px;color:var(--muted);font-size:12px;letter-spacing:1px;}
.hint{color:var(--muted);font-size:12px;margin-top:6px;font-style:italic;opacity:0.7;text-align:center;}
.footer{margin-top:30px;color:var(--gold-dim);font-size:11px;letter-spacing:3px;text-transform:uppercase;opacity:0.6;}