:root{--bg:#11091c;--bg2:#1e1230;--gold:#d7b56d;--gold2:#fff1b8;--text:#fff8e8;--muted:#c9b7d9;--panel:rgba(255,255,255,.075);--line:rgba(215,181,109,.28)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 20% 10%,#432060 0,#140a22 34%,#08050e 100%);color:var(--text);overflow-x:hidden}#stars{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#fff8 1px,transparent 1px),radial-gradient(#d7b56d99 1px,transparent 1px);background-size:70px 70px,110px 110px;animation:drift 30s linear infinite;opacity:.32;z-index:-3}.orb{position:fixed;border-radius:50%;filter:blur(24px);opacity:.28;z-index:-2}.orb-one{width:270px;height:270px;background:#7b3fff;top:12%;left:-80px}.orb-two{width:330px;height:330px;background:#d7b56d;right:-140px;bottom:8%}@keyframes drift{to{background-position:400px 600px,300px 450px}}.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 5vw;background:rgba(10,5,18,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand{display:flex;gap:10px;align-items:center;color:var(--text);text-decoration:none;font-weight:800;letter-spacing:.08em}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;color:var(--gold)}.nav{display:flex;gap:22px}.nav a{color:var(--muted);text-decoration:none;font-size:14px}.nav a:hover{color:var(--gold2)}.header-actions{display:flex;gap:10px}.ghost-btn,.menu-btn,.primary-btn,.secondary-btn,.mini-btn{border:1px solid var(--line);border-radius:999px;padding:11px 18px;background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}.primary-btn{background:linear-gradient(135deg,#b8893d,#ffe2a0,#9d6a23);color:#201206;font-weight:800;border:0;box-shadow:0 15px 45px rgba(215,181,109,.22)}.secondary-btn:hover,.ghost-btn:hover,.mini-btn:hover{border-color:var(--gold);color:var(--gold2)}.menu-btn{display:none}.section{padding:88px 7vw}.hero{min-height:86vh;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}.eyebrow{text-transform:uppercase;letter-spacing:.28em;color:var(--gold);font-size:12px;font-weight:800}.hero h1,.section h2{font-family:Georgia,serif;font-size:clamp(42px,7vw,86px);line-height:.96;margin:10px 0 22px}.section h2{font-size:clamp(32px,5vw,58px)}.hero-text,.section-head p,.glass-panel p,.contact p{color:var(--muted);font-size:18px;line-height:1.8;max-width:720px}.hero-actions,.action-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.hero-card-wrap{position:relative;min-height:480px;display:grid;place-items:center}.moon{position:absolute;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff4c7,#d7b56d 42%,#4b2a69 70%);box-shadow:0 0 90px #d7b56d66;opacity:.65}.floating-card{width:230px;height:350px;border-radius:24px;border:2px solid var(--gold);background:linear-gradient(160deg,#22102f,#07040d);box-shadow:0 30px 90px #0009, inset 0 0 0 8px #0004, inset 0 0 0 10px #d7b56d55;display:flex;flex-direction:column;justify-content:space-between;padding:28px;text-align:center;position:absolute}.main-card{transform:rotate(3deg);animation:float 5s ease-in-out infinite}.back-card{opacity:.45}.back-card.one{transform:translate(-42px,30px) rotate(-12deg)}.back-card.two{transform:translate(45px,35px) rotate(14deg)}.card-moon{font-size:96px;color:var(--gold2);text-shadow:0 0 25px #d7b56d}.card-top,.card-bottom{letter-spacing:.3em;color:var(--gold)}@keyframes float{50%{transform:translateY(-16px) rotate(1deg)}}.two-col{display:grid;grid-template-columns:.8fr 1.2fr;gap:34px}.glass-panel,.service-card,.reading-result,.faq-list details,.contact,.library-card{background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:0 20px 70px #0004;backdrop-filter:blur(14px)}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.service-card span{font-size:34px;color:var(--gold)}.service-card h3,.library-card h3{font-family:Georgia,serif;font-size:24px}.service-card p,.library-card p,.faq-list p{color:var(--muted);line-height:1.7}.service-card strong{display:block;color:var(--gold2);font-size:22px;margin:16px 0}.mini-btn{padding:9px 14px;font-size:14px}.reading-zone{background:linear-gradient(180deg,transparent,rgba(215,181,109,.055),transparent)}.reading-result{margin-top:26px;min-height:170px}.reading-result.glow{animation:glow 1s ease}.muted{color:var(--muted)}@keyframes glow{30%{box-shadow:0 0 60px #d7b56d66}}.reading-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}.reading-card{border:1px solid var(--line);border-radius:22px;padding:22px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.035));animation:rise .5s ease both}.reading-card .symbol{font-size:44px;color:var(--gold2)}@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}.library-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.library-card{padding:22px}.faq-list{display:grid;gap:14px}.faq-list details{padding:20px}.faq-list summary{cursor:pointer;color:var(--gold2);font-weight:800}.contact{text-align:center}.contact .primary-btn{margin-top:20px}footer{text-align:center;color:var(--muted);padding:30px;border-top:1px solid var(--line)}@media(max-width:900px){.nav{position:absolute;right:5vw;top:70px;display:none;flex-direction:column;padding:18px;background:#12091f;border:1px solid var(--line);border-radius:18px}.nav.show{display:flex}.menu-btn{display:inline-flex}.hero,.two-col{grid-template-columns:1fr}.hero{padding-top:54px}.hero-card-wrap{min-height:380px}.service-grid,.library-grid{grid-template-columns:1fr 1fr}.floating-card{width:190px;height:290px}.section{padding:68px 5vw}}@media(max-width:560px){.service-grid,.library-grid{grid-template-columns:1fr}.hero h1{font-size:44px}.site-header{padding:14px 4vw}.ghost-btn,.menu-btn{padding:9px 12px}.primary-btn,.secondary-btn{width:100%}.hero-actions .primary-btn,.hero-actions .secondary-btn{width:auto}.hero-card-wrap{min-height:330px}}

.search-box{width:min(720px,100%);margin:12px 0 24px;padding:15px 18px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--text);outline:none}.search-box:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(215,181,109,.12)}.mini-meta{color:var(--gold);font-size:12px;letter-spacing:.12em;text-transform:uppercase}.library-card details{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}.library-card summary{cursor:pointer;color:var(--gold2);font-weight:800}.reading-card h3{font-family:Georgia,serif;font-size:24px;margin:8px 0}.reading-card p{color:var(--muted);line-height:1.65}.library-card .symbol{font-size:36px;color:var(--gold2)}@media(max-width:1100px){.library-grid{grid-template-columns:repeat(3,1fr)}}

.position-pill{display:inline-flex;margin:4px 0 10px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--gold2);background:rgba(215,181,109,.10);font-size:12px;font-weight:800;letter-spacing:.08em}.reading-card.is-reversed{background:linear-gradient(160deg,rgba(124,72,190,.16),rgba(255,255,255,.035));}.reading-card.is-upright{background:linear-gradient(160deg,rgba(215,181,109,.13),rgba(255,255,255,.035));}@media(max-width:560px){#musicBtn{font-size:0;padding:9px 11px}#musicBtn::first-letter{font-size:14px}}


/* Mobile polish fixes */
#musicBtn{min-width:112px;white-space:nowrap}
#musicBtn .music-icon{font-size:16px;line-height:1}
#musicBtn .music-label{font-size:14px;line-height:1}

@media(max-width:700px){
  .site-header{gap:8px;padding:13px 4vw}
  .brand{gap:9px;font-size:18px;letter-spacing:.04em;min-width:0;flex:1}
  .brand-mark{width:38px;height:38px;flex:0 0 38px}
  .header-actions{gap:7px;flex:0 0 auto}
  #musicBtn{width:42px;height:42px;min-width:42px;padding:0;border-radius:50%;font-size:16px;overflow:hidden}
  #musicBtn .music-icon{font-size:17px;display:block}
  #musicBtn .music-label{display:none}
  #langBtn,.menu-btn{width:48px;height:42px;padding:0}
  .nav{top:68px;right:4vw}
}

@media(max-width:560px){
  .section{padding:58px 4.6vw}
  #library .section-head h2{font-size:38px;line-height:1.06}
  .search-box{padding:14px 16px;margin-bottom:18px}
  .library-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px}
  .library-card{padding:16px 13px;border-radius:22px;min-width:0}
  .library-card .symbol{font-size:28px;margin-bottom:6px}
  .library-card h3{font-size:23px;line-height:1.15;margin:8px 0 10px;word-break:keep-all;overflow-wrap:normal}
  .library-card p{font-size:14px;line-height:1.55;margin:8px 0;word-break:break-word}
  .library-card summary{font-size:14px;line-height:1.35}
  .mini-meta{font-size:10px;letter-spacing:.08em;line-height:1.35}
}

@media(max-width:380px){
  .brand{font-size:16px}
  #langBtn,.menu-btn{width:42px}
  #musicBtn{width:40px;min-width:40px}
  .library-card h3{font-size:21px}
}

/* v4: tap-to-reveal tarot cards */
.reading-card.flip-card{
  padding:0;
  min-height:430px;
  perspective:1200px;
  background:transparent;
  border:0;
  cursor:pointer;
  outline:none;
}
.flip-card:focus-visible .card-inner{box-shadow:0 0 0 3px rgba(255,241,184,.45),0 24px 70px rgba(0,0,0,.45)}
.card-inner{
  position:relative;
  width:100%;
  min-height:430px;
  transition:transform .78s cubic-bezier(.2,.75,.2,1), box-shadow .3s ease;
  transform-style:preserve-3d;
  border-radius:26px;
}
.flip-card.revealed .card-inner{transform:rotateY(180deg)}
.tarot-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 22px 70px rgba(0,0,0,.38);
}
.tarot-back{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:28px 20px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,241,184,.20),transparent 20%),
    linear-gradient(160deg,#16091f,#09040d 58%,#2e1842);
  box-shadow:inset 0 0 0 8px rgba(0,0,0,.20), inset 0 0 0 10px rgba(215,181,109,.30);
}
.back-top,.back-bottom{color:var(--gold);letter-spacing:.32em;font-size:12px;text-transform:uppercase;font-weight:800}
.back-bottom{letter-spacing:.08em;color:var(--gold2);font-size:13px;opacity:.95}
.back-symbol{font-size:84px;color:var(--gold2);text-shadow:0 0 28px rgba(215,181,109,.65)}
.back-lines{display:grid;gap:10px;width:70%;opacity:.55}
.back-lines span{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.tarot-front{
  transform:rotateY(180deg);
  padding:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
}
.flip-card.is-reversed .tarot-front{background:linear-gradient(160deg,rgba(124,72,190,.20),rgba(255,255,255,.04));}
.flip-card.is-upright .tarot-front{background:linear-gradient(160deg,rgba(215,181,109,.16),rgba(255,255,255,.04));}
.card-explanation{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.tap-hint{font-size:12px;color:var(--gold);opacity:.8;margin-top:14px}
@media(max-width:560px){
  .reading-cards{grid-template-columns:1fr;gap:20px}
  .reading-card.flip-card,.card-inner{min-height:460px}
  .tarot-front{padding:22px}
}

/* v5: prevent long revealed explanations from being cropped on mobile */
.reading-card.flip-card{height:auto;}
.card-inner{height:auto;}
.flip-card.revealed .card-inner{transition:transform .78s cubic-bezier(.2,.75,.2,1), min-height .25s ease, box-shadow .3s ease;}
.tarot-front{overflow:visible;}
@media(max-width:560px){
  .tarot-front{padding:20px 18px;}
  .card-explanation p{font-size:14px;line-height:1.62;}
  .reading-card h3{font-size:25px;line-height:1.12;}
}

/* v6: sound-ready reveal layout + desktop fixed tarot card width */
@media (min-width: 701px){
  .reading-cards{
    grid-template-columns: repeat(auto-fit, minmax(210px, 260px));
    justify-content: center;
    align-items: start;
  }
  .reading-cards.one-card{
    grid-template-columns: 260px;
  }
  .reading-card.flip-card{
    width: 100%;
    max-width: 260px;
    justify-self: center;
  }
}
@media (max-width:700px){
  .reading-cards,.reading-cards.one-card,.reading-cards.three-card-spread{
    grid-template-columns:1fr;
  }
  .reading-card.flip-card{
    max-width:100%;
  }
}


/* v8: shared Birthday Edition card UI for brand website */
.tarot-back{padding:12px;gap:10px;overflow:hidden}
.tarot-front{padding:16px;overflow:visible}
.tarot-card-img{display:block;width:100%;height:auto;border-radius:16px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));user-select:none;-webkit-user-drag:none}
.tarot-back-img{height:100%;object-fit:contain;max-height:390px;margin:auto;filter:drop-shadow(0 0 20px rgba(215,181,109,.18))}
.tarot-art-wrap{width:min(165px,78%);margin:0 auto 14px;border-radius:18px;position:relative;transition:transform .35s ease, filter .35s ease}
.tarot-art-wrap::after{content:"";position:absolute;inset:0;border-radius:18px;background:linear-gradient(110deg,transparent 0%,rgba(255,241,184,.22) 42%,transparent 62%);opacity:.0;transform:translateX(-35%);transition:.45s ease;pointer-events:none}
.flip-card.revealed .tarot-art-wrap::after{opacity:.85;transform:translateX(35%)}
.is-reversed-img{transform:rotate(180deg)}
.flip-card.revealed .card-inner{box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 34px rgba(215,181,109,.18)}
.library-card-art{width:100%;max-width:150px;margin:0 auto 14px;display:grid;place-items:center}
.library-card-img{width:100%;height:auto;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.36);border:1px solid rgba(215,181,109,.22)}
.library-card .symbol,.reading-card .symbol{display:none!important}
@media(min-width:901px){
  .reading-cards.one-card{grid-template-columns:220px!important;justify-content:center}
  .reading-cards.one-card .reading-card.flip-card{width:220px!important;max-width:220px!important}
  .reading-cards.three-card-spread{grid-template-columns:repeat(3,220px)!important;justify-content:center}
  .reading-cards.three-card-spread .reading-card.flip-card{width:220px!important;max-width:220px!important}
  .reading-card.flip-card,.card-inner{min-height:520px}
}
@media(max-width:900px){
  .tarot-art-wrap{width:min(190px,72%)}
  .tarot-back-img{max-height:410px}
}
@media(max-width:560px){
  .tarot-front{padding:14px}
  .tarot-art-wrap{width:min(175px,76%);margin-bottom:12px}
  .library-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .library-card{padding:14px!important;border-radius:20px!important}
  .library-card-art{max-width:118px;margin-bottom:10px}
  .library-card h3{font-size:17px!important;line-height:1.15!important;word-break:normal!important;overflow-wrap:anywhere!important}
  .library-card p,.library-card details{font-size:13px!important;line-height:1.45!important}
}

/* v10: mobile smoothness + anti-crash polish */
html,body{background-color:#08050e;}
.reading-card.flip-card{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.library-card{content-visibility:auto;contain-intrinsic-size:360px;}
.tarot-card-img,.library-card-img{transform:translateZ(0);}
@media (max-width:700px){
  html{scroll-behavior:auto;}
  body{background:#08050e radial-gradient(circle at 20% 8%,#2b1741 0,#140a22 42%,#08050e 100%) fixed;}
  #stars{animation:none!important;opacity:.20;background-size:95px 95px,145px 145px;}
  .orb{display:none!important;}
  .site-header,.glass-panel,.service-card,.reading-result,.faq-list details,.contact,.library-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  .hero-card-wrap .floating-card{animation:none!important;}
  .reading-result{contain:layout paint;}
  .reading-cards{align-items:start;}
  .card-inner{transition:transform .52s cubic-bezier(.2,.75,.2,1), min-height .18s ease, box-shadow .2s ease;}
  .flip-card.revealed .card-inner{transition:transform .52s cubic-bezier(.2,.75,.2,1), min-height .18s ease, box-shadow .2s ease;}
  .tarot-card-img{filter:drop-shadow(0 10px 18px rgba(0,0,0,.30));}
  .library-card-img{box-shadow:0 10px 24px rgba(0,0,0,.30);}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}