/* ================ Glassmorphism Tarot UI ================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:#f5f1fb;font-family:'Inter','Segoe UI',system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
body{background:#0a0420;position:relative}
/* Vibrant animated background orbs (sit behind everything, blurred) */
body::before, body::after{content:"";position:fixed;border-radius:50%;filter:blur(120px);opacity:.55;pointer-events:none;z-index:0;animation:orb 22s ease-in-out infinite}
body::before{width:520px;height:520px;background:radial-gradient(circle,#8b5cf6,#5b21b6 60%,transparent 70%);top:-120px;left:-140px}
body::after{width:560px;height:560px;background:radial-gradient(circle,#ec4899,#9d174d 60%,transparent 70%);bottom:-160px;right:-180px;animation-delay:-8s}
.bg-orb{position:fixed;border-radius:50%;filter:blur(110px);opacity:.45;pointer-events:none;z-index:0}
.bg-orb.b3{width:400px;height:400px;background:radial-gradient(circle,#06b6d4,#0c4a6e 60%,transparent 70%);top:30%;right:15%;animation:orb 26s ease-in-out infinite reverse}
.bg-orb.b4{width:360px;height:360px;background:radial-gradient(circle,#fbbf24,#7c2d12 60%,transparent 70%);bottom:20%;left:20%;animation:orb 30s ease-in-out infinite}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(80px,-60px) scale(1.1)}66%{transform:translate(-60px,40px) scale(.95)}}

#app{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:28px 18px 100px}
.title{text-align:center;font-size:2.2rem;letter-spacing:.06em;margin-bottom:28px;font-weight:700;background:linear-gradient(120deg,#e9d5ff,#fbcfe8 40%,#fde68a);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(232,213,255,.25);filter:drop-shadow(0 4px 12px rgba(167,139,250,.35))}
h2{font-weight:600;font-size:1.2rem;color:#f5f1fb;margin-top:0}
.muted{color:rgba(245,241,251,.65)}.center{text-align:center}
.hidden{display:none!important}

/* ----------- Glass primitives ----------- */
.glass, .step .glass-panel,
textarea, .type-card, .result, .error,
.sec, .rules-modal, .login-card, .pc .face,
#picked-cards, .fan, .shuffle-stage{
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* ----------- SPA state machine ----------- */
.step{display:none;animation:fade .4s ease}
#app[data-state="type"] [data-step="type"],
#app[data-state="question"] [data-step="question"],
#app[data-state="shuffle"] [data-step="shuffle"],
#app[data-state="spread"] [data-step="spread"],
#app[data-state="reading"] [data-step="reading"]{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ----------- Buttons ----------- */
.btn{border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:11px 22px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .25s;color:#f5f1fb;background:rgba(255,255,255,.06);backdrop-filter:blur(10px)}
.btn.primary{background:linear-gradient(135deg,rgba(139,92,246,.85),rgba(236,72,153,.85));border-color:rgba(255,255,255,.22);box-shadow:0 8px 24px rgba(139,92,246,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px rgba(139,92,246,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{background:rgba(255,255,255,.05);color:#cfc7ed;border-color:rgba(255,255,255,.14)}
.btn.ghost:hover:not(:disabled){background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}

/* ----------- Inputs ----------- */
textarea{width:100%;padding:16px;background:rgba(255,255,255,.06);color:#f5f1fb;border:1px solid rgba(255,255,255,.14);border-radius:16px;font-size:1rem;resize:vertical;transition:all .25s;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
textarea::placeholder{color:rgba(245,241,251,.4)}
textarea:focus{outline:none;border-color:rgba(167,139,250,.6);background:rgba(255,255,255,.09);box-shadow:0 0 0 4px rgba(167,139,250,.15),inset 0 1px 0 rgba(255,255,255,.08)}

/* ----------- Type select ----------- */
.type-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.type-header h2{margin:0;flex:1}
.btn-link-rules{background:rgba(167,139,250,.14);color:#e9d5ff;border:1px solid rgba(167,139,250,.4);padding:9px 18px;border-radius:999px;font-size:.88rem;cursor:pointer;transition:all .2s;font-weight:500;backdrop-filter:blur(10px)}
.btn-link-rules:hover{background:rgba(167,139,250,.28);color:#fff;border-color:rgba(232,213,255,.7);transform:translateY(-1px);box-shadow:0 6px 18px rgba(167,139,250,.35)}

.type-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:18px}
.type-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:20px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.1)}
.type-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(167,139,250,.15),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.type-card:hover{transform:translateY(-4px);border-color:rgba(232,213,255,.5);box-shadow:0 12px 32px rgba(167,139,250,.3),inset 0 1px 0 rgba(255,255,255,.15)}
.type-card:hover::before{opacity:1}
.type-card h3{margin:0 0 6px;font-size:1.08rem;color:#fff;position:relative}
.type-card p{margin:0;color:rgba(245,241,251,.65);font-size:.85rem;position:relative}

/* ----------- Shuffle stage (glass) ----------- */
.shuffle-stage{position:relative;height:380px;display:flex;align-items:center;justify-content:center;perspective:1200px;overflow:hidden;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 40px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)}
.shuffle-stage::before{content:"";position:absolute;left:50%;top:50%;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.32),rgba(236,72,153,.14) 45%,transparent 70%);transform:translate(-50%,-50%);animation:auraPulse 3s ease-in-out infinite;pointer-events:none}
.shuffle-stage::after{content:"";position:absolute;left:50%;top:50%;width:280px;height:280px;border-radius:50%;border:1px dashed rgba(252,211,77,.45);transform:translate(-50%,-50%);animation:auraSpin 8s linear infinite;pointer-events:none}
@keyframes auraPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes auraSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.shuffle-deck{position:relative;width:140px;height:220px;transform-style:preserve-3d}
.shuffle-deck .card{position:absolute;inset:0;border-radius:14px;background:linear-gradient(135deg,rgba(91,33,182,.85),rgba(26,19,48,.85));border:1px solid rgba(167,139,250,.45);box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 0 18px rgba(167,139,250,.4),inset 0 1px 0 rgba(255,255,255,.12);animation:shuffleA 2.6s infinite ease-in-out;backface-visibility:visible;transform-style:preserve-3d;backdrop-filter:blur(8px)}
.shuffle-deck .card::before{content:"✦";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c4b5fd;font-size:1.7rem;opacity:.7;text-shadow:0 0 12px rgba(167,139,250,.85)}
.shuffle-deck .card[data-variant="2"]{animation-name:shuffleB}
.shuffle-deck .card[data-variant="3"]{animation-name:shuffleC}
.shuffle-deck .card[data-variant="4"]{animation-name:shuffleD}
@keyframes shuffleA{0%,100%{transform:translate(0,0) rotate(0) rotateY(0) scale(1)}20%{transform:translate(-130px,-30px) rotate(-22deg) rotateY(20deg) scale(1.05)}50%{transform:translate(0,-70px) rotate(8deg) rotateY(180deg) scale(1)}80%{transform:translate(120px,-20px) rotate(20deg) rotateY(340deg) scale(.95)}}
@keyframes shuffleB{0%,100%{transform:translate(0,0) rotate(0) rotateY(0)}25%{transform:translate(150px,40px) rotate(35deg) rotateY(180deg)}60%{transform:translate(-100px,30px) rotate(-18deg) rotateY(360deg)}85%{transform:translate(60px,-20px) rotate(10deg) rotateY(540deg)}}
@keyframes shuffleC{0%,100%{transform:translate(0,0) rotate(0) rotateY(0) rotateX(0)}33%{transform:translate(-110px,-80px) rotate(-15deg) rotateY(180deg) rotateX(30deg)}66%{transform:translate(110px,-50px) rotate(22deg) rotateY(360deg) rotateX(-15deg)}}
@keyframes shuffleD{0%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(0,90px) rotate(180deg)}60%{transform:translate(0,90px) rotate(360deg)}}

.spark{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fde68a 0%,#fbbf24 40%,transparent 75%);box-shadow:0 0 14px #fde68a,0 0 28px rgba(252,211,77,.55);animation:sparkPath 2.6s infinite ease-out;pointer-events:none}
.spark.purple{background:radial-gradient(circle,#e9d5ff 0%,#a78bfa 45%,transparent 75%);box-shadow:0 0 14px #c4b5fd,0 0 28px rgba(167,139,250,.6)}
.spark.pink{background:radial-gradient(circle,#fce7f3 0%,#ec4899 45%,transparent 75%);box-shadow:0 0 14px #f9a8d4,0 0 28px rgba(236,72,153,.6)}
@keyframes sparkPath{0%{transform:translate(-50%,-50%) scale(0);opacity:0}20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.2);opacity:0}}
.rune{position:absolute;font-size:1.5rem;color:rgba(252,211,77,.75);text-shadow:0 0 14px rgba(252,211,77,.65);animation:runeFloat 4s infinite ease-in-out;pointer-events:none}
@keyframes runeFloat{0%,100%{transform:translateY(0) rotate(0);opacity:0}25%{opacity:.9}75%{opacity:.9}50%{transform:translateY(-30px) rotate(180deg)}}

/* ----------- Spread: arch fan + mat ----------- */
.fan{position:relative;z-index:10;height:340px;display:flex;justify-content:center;align-items:flex-end;margin:18px 0 0;background:transparent;border:none;box-shadow:none;overflow:visible}
.fan .card{position:absolute;width:90px;height:150px;border-radius:10px;background:linear-gradient(135deg,rgba(91,33,182,.92),rgba(26,19,48,.92));border:1px solid rgba(167,139,250,.5);cursor:pointer;transition:transform .35s cubic-bezier(.4,.05,.2,1), box-shadow .3s, border-color .3s, filter .3s;box-shadow:0 6px 16px rgba(0,0,0,.5),inset 0 0 14px rgba(167,139,250,.3),inset 0 1px 0 rgba(255,255,255,.15);transform-origin:50% 360px;backdrop-filter:blur(6px);will-change:transform}
.fan .card::before{content:"✦";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c4b5fd;font-size:1.7rem;opacity:.7;text-shadow:0 0 12px rgba(167,139,250,.7);transition:opacity .3s}
.fan .card:hover:not(.placed){filter:brightness(1.3);border-color:rgba(232,213,255,.75);z-index:5}
.fan .card.placed{cursor:pointer;pointer-events:auto;transition:transform .85s cubic-bezier(.45,.05,.2,1), filter .25s, box-shadow .25s;border-color:rgba(251,207,232,.6);box-shadow:0 12px 32px rgba(251,207,232,.4),inset 0 0 20px rgba(251,207,232,.18),inset 0 1px 0 rgba(255,255,255,.18)}
.fan .card.placed:hover{filter:brightness(1.15);box-shadow:0 14px 36px rgba(251,207,232,.55),inset 0 0 22px rgba(251,207,232,.25),inset 0 1px 0 rgba(255,255,255,.22)}
.fan .card.placed::after{content:"⤴ 클릭해 되돌리기";position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);font-size:.66rem;color:#fbcfe8;background:rgba(0,0,0,.55);padding:3px 9px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none;letter-spacing:.04em}
.fan .card.placed:hover::after{opacity:1}

.counter{text-align:center;color:rgba(245,241,251,.75);margin-top:10px;font-size:.92rem;letter-spacing:.04em}
.counter span{font-weight:700;color:#fbcfe8;font-size:1.15rem}

.mat{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:22px;margin-top:24px;padding:8px 0;flex-wrap:wrap;background:transparent;border:none;box-shadow:none;min-height:0}
.slot{width:100px;height:164px;box-sizing:border-box;border-radius:12px;border:2px dashed rgba(255,255,255,.28);display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(245,241,251,.5);transition:all .35s;position:relative;background:rgba(255,255,255,.02)}
.slot.filled{border-style:solid;border-color:rgba(167,139,250,.55);background:rgba(167,139,250,.08);box-shadow:0 0 24px rgba(167,139,250,.2),inset 0 0 16px rgba(167,139,250,.08)}
.slot-num{font-size:1.7rem;font-weight:700;color:rgba(232,213,255,.45);letter-spacing:.05em;line-height:1}
.slot-label{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;margin-top:6px;font-weight:600}
.slot.filled .slot-num,.slot.filled .slot-label{visibility:hidden}

/* ----------- Picked & flip ----------- */
#picked-cards{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:20px 0;padding:20px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px)}
.pc{width:150px;text-align:center}
.pc .label{color:rgba(232,213,255,.85);font-size:.85rem;margin-bottom:8px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.pc .flipper{position:relative;width:150px;height:240px;perspective:1200px;margin:0 auto}
.pc .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;transition:transform .8s;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1)}
.pc .face img{width:100%;height:100%;display:block;object-fit:cover}
.pc .back{background:#1a1330}
.pc .front{transform:rotateY(180deg)}
.pc.flipped .back{transform:rotateY(180deg)}
.pc.flipped .front{transform:rotateY(360deg)}
.pc.reversed .front img{transform:rotate(180deg)}
.pc .name{font-weight:700;margin-top:12px;font-size:.98rem;color:#fbcfe8;letter-spacing:.04em;text-shadow:0 0 12px rgba(251,207,232,.3)}
.pc .theme{color:rgba(245,241,251,.6);font-size:.78rem;margin-top:3px}
.pc .dir{margin-top:5px}
.dir-badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.1em;backdrop-filter:blur(8px)}
.dir-up{background:rgba(52,211,153,.18);color:#86efac;border:1px solid rgba(52,211,153,.45)}
.dir-rev{background:rgba(248,113,113,.2);color:#fca5a5;border:1px solid rgba(248,113,113,.5)}

/* ----------- Loading ----------- */
.loading{text-align:center;margin:36px 0;color:rgba(245,241,251,.7)}
.spinner{width:48px;height:48px;border:3px solid rgba(167,139,250,.18);border-top-color:#a78bfa;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 14px;box-shadow:0 0 24px rgba(167,139,250,.4)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ----------- Mystical Seer (LLM 처리 중) ----------- */
.seer{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;margin:-12px auto 8px;padding:0;animation:fade .5s ease;text-align:center}
.seer-text{margin:0 auto 6px;padding:8px 18px;color:#fbcfe8;font-size:.98rem;letter-spacing:.04em;text-align:center;background:linear-gradient(180deg,rgba(60,40,110,.55),rgba(30,20,60,.4));border:1px solid rgba(167,139,250,.35);border-radius:999px;backdrop-filter:blur(10px);box-shadow:0 6px 20px rgba(124,58,237,.25);text-shadow:0 0 12px rgba(251,207,232,.45);display:inline-block}
.seer-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;margin-top:-12px}
.seer-svg{width:240px;max-width:62vw;height:auto;display:block;filter:drop-shadow(0 12px 36px rgba(124,58,237,.45));position:relative;z-index:2}

/* 좌우 회전하는 카드 (가로 약 70px) */
.seer-side-card{position:absolute;width:70px;height:auto;border-radius:6px;display:block;filter:drop-shadow(0 6px 14px rgba(167,139,250,.55));z-index:1;top:50%;transform-origin:center}
.seer-side-left{left:calc(50% - 165px);animation:seerCardLeft 3.6s ease-in-out infinite}
.seer-side-right{right:calc(50% - 165px);animation:seerCardRight 3.6s ease-in-out infinite}
@keyframes seerCardLeft{
  0%,100%{transform:translateY(-50%) rotate(-12deg) rotateY(0deg)}
  50%   {transform:translateY(-58%) rotate(12deg)  rotateY(180deg)}
}
@keyframes seerCardRight{
  0%,100%{transform:translateY(-50%) rotate(12deg)  rotateY(0deg)}
  50%   {transform:translateY(-58%) rotate(-12deg) rotateY(-180deg)}
}

@media (max-width:640px){
  .seer-side-card{width:32px}
  .seer-side-left{left:calc(50% - 120px)}
  .seer-side-right{right:calc(50% - 120px)}
}
@media (max-width:380px){
  .seer-side-card{width:26px}
  .seer-side-left{left:calc(50% - 100px)}
  .seer-side-right{right:calc(50% - 100px)}
}
.seer-aura{transform-origin:120px 140px;animation:seerAura 4s ease-in-out infinite}
@keyframes seerAura{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
.seer-body{transform-origin:120px 200px;animation:seerBreath 4.5s ease-in-out infinite}
@keyframes seerBreath{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1.5deg)}}
.seer-eye{animation:seerBlink 5.5s infinite}
@keyframes seerBlink{0%,46%,52%,96%,100%{opacity:1}48%,50%,98%{opacity:0}}
.seer-hands{transform-origin:120px 200px;animation:seerHands 5s ease-in-out infinite}
@keyframes seerHands{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.seer-ball{transform-origin:120px 215px;animation:seerBall 3.8s ease-in-out infinite}
@keyframes seerBall{0%,100%{filter:brightness(1) drop-shadow(0 0 12px rgba(252,211,77,.4))}50%{filter:brightness(1.25) drop-shadow(0 0 22px rgba(252,211,77,.85))}}
.seer-ball-spark{transform-origin:120px 210px;animation:seerSpark 6s linear infinite}
@keyframes seerSpark{to{transform:rotate(360deg)}}
.seer-stars circle{animation:seerStarTwinkle 3s ease-in-out infinite}
.seer-stars circle:nth-child(2n){animation-delay:-1s;animation-duration:4s}
.seer-stars circle:nth-child(3n){animation-delay:-2s;animation-duration:5s}
@keyframes seerStarTwinkle{0%,100%{opacity:.3}50%{opacity:1}}
.seer-rune{animation:seerRuneFloat 4.5s ease-in-out infinite;transform-origin:center}
.seer-rune.r1{animation-delay:-0.3s}
.seer-rune.r2{animation-delay:-1.2s}
.seer-rune.r3{animation-delay:-2.1s}
.seer-rune.r4{animation-delay:-3s;animation-duration:5.2s}
@keyframes seerRuneFloat{0%,100%{transform:translateY(0) rotate(0);opacity:.5}50%{transform:translateY(-12px) rotate(180deg);opacity:1}}
.seer-dots{display:inline-block;margin-right:6px}
.seer-dots i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#c4b5fd;margin:0 2px;animation:seerDot 1.4s ease-in-out infinite;vertical-align:middle}
.seer-dots i:nth-child(2){animation-delay:.2s}
.seer-dots i:nth-child(3){animation-delay:.4s}
@keyframes seerDot{0%,80%,100%{transform:scale(.55);opacity:.4}40%{transform:scale(1.15);opacity:1;box-shadow:0 0 10px #c4b5fd}}

/* ----------- Summary loader: 회전하는 타로카드 ----------- */
.summary-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:24px 0;animation:fade .4s ease}
.summary-card-spin{width:100px;height:160px;perspective:900px;margin-bottom:14px;filter:drop-shadow(0 12px 30px rgba(167,139,250,.55))}
.summary-card-back{width:100%;height:100%;border-radius:10px;display:block;animation:summarySpin 2.6s cubic-bezier(.5,.05,.5,.95) infinite;transform-style:preserve-3d}
@keyframes summarySpin{
  0%{transform:rotateY(0) scale(1)}
  50%{transform:rotateY(180deg) scale(1.06)}
  100%{transform:rotateY(360deg) scale(1)}
}
.summary-loader-text{margin:0;color:#fbcfe8;font-size:.96rem;letter-spacing:.04em;text-align:center;text-shadow:0 0 12px rgba(251,207,232,.4)}
.summary-loader-text::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#c4b5fd;margin-left:6px;animation:summaryDot 1.2s ease-in-out infinite;vertical-align:middle;box-shadow:0 0 8px #c4b5fd}
@keyframes summaryDot{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}

@media (max-width:640px){
  .summary-card-spin{width:80px;height:128px}
}

/* ----------- Result/error ----------- */
.result, .error{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:24px;margin-top:20px;animation:fade .4s;box-shadow:0 12px 36px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)}
.result h3{margin-top:0;color:#f5f1fb}
#reading-text{line-height:1.85}
.error{border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.1)}
.error p{color:#fca5a5;margin:0 0 12px}

/* Result header & toggle */
.result-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.result-header h3{margin:0}
.view-toggle{display:inline-flex;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:4px;gap:2px;backdrop-filter:blur(10px)}
.btn-toggle{background:transparent;border:none;color:rgba(245,241,251,.65);padding:7px 16px;border-radius:999px;cursor:pointer;font-size:.86rem;transition:all .25s;font-weight:500}
.btn-toggle:hover{color:#fff}
.btn-toggle.active{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(139,92,246,.4)}
#summary-text{white-space:pre-wrap;line-height:1.85;font-size:.98rem}
.small-loading{color:rgba(245,241,251,.6);font-size:.9rem;padding:14px;text-align:center}

/* ----------- Reading sections (glass + colored accents) ----------- */
.sec{position:relative;padding:0;border-radius:18px;margin-bottom:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;animation:secIn .45s ease}
@keyframes secIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.sec-head{display:flex;align-items:center;gap:12px;padding:14px 20px;background:linear-gradient(135deg,var(--c1,#a78bfa),var(--c2,#7c3aed));position:relative;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.2)}
.sec-head::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.22);filter:blur(40px)}
.sec-badge{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;font-size:1.4rem;border:1.5px solid rgba(255,255,255,.5);box-shadow:0 0 18px rgba(255,255,255,.3),inset 0 0 10px rgba(0,0,0,.2);position:relative;z-index:1}
.sec-titlewrap{flex:1;position:relative;z-index:1}
.sec-pretitle{font-size:.7rem;letter-spacing:.28em;color:rgba(255,255,255,.78);font-weight:600;text-transform:uppercase;display:block;margin-bottom:2px}
.sec-title{font-size:1.12rem;font-weight:700;color:#fff;letter-spacing:.05em;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.sec-time{font-size:.95rem;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.18em;flex-shrink:0;font-family:Georgia,serif;position:relative;z-index:1}
.sec-body{white-space:pre-wrap;line-height:1.88;color:#f5f1fb;font-size:.97rem;padding:18px 22px;border-left:4px solid var(--c1,#a78bfa);background:rgba(255,255,255,.03)}

.sec-overall{--c1:#8b5cf6;--c2:#ec4899}
.sec-past   {--c1:#f59e0b;--c2:#9a3412}
.sec-present{--c1:#10b981;--c2:#0f766e}
.sec-future {--c1:#3b82f6;--c2:#7c3aed}
.sec-advice {--c1:#facc15;--c2:#dc2626}
.sec-default{--c1:#94a3b8;--c2:#475569}
.sec-overall .sec-body{background:linear-gradient(180deg,rgba(139,92,246,.12),rgba(255,255,255,.02))}
.sec-past .sec-body   {background:linear-gradient(180deg,rgba(245,158,11,.12),rgba(255,255,255,.02))}
.sec-present .sec-body{background:linear-gradient(180deg,rgba(16,185,129,.12),rgba(255,255,255,.02))}
.sec-future .sec-body {background:linear-gradient(180deg,rgba(59,130,246,.14),rgba(255,255,255,.02))}
.sec-advice .sec-body {background:linear-gradient(180deg,rgba(250,204,21,.12),rgba(255,255,255,.02))}

/* ----------- Rules overlay ----------- */
.rules-overlay{position:fixed;inset:0;background:rgba(8,4,18,.7);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px;animation:fade .35s}
.rules-modal{background:linear-gradient(160deg,rgba(50,30,90,.65) 0%,rgba(20,10,40,.75) 100%);backdrop-filter:blur(30px) saturate(140%);border:1px solid rgba(167,139,250,.35);border-radius:22px;max-width:680px;width:100%;max-height:92vh;overflow:auto;padding:34px 32px 28px;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 60px rgba(167,139,250,.3),inset 0 1px 0 rgba(255,255,255,.12)}
.rules-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#cfc7ed;font-size:1rem;cursor:pointer;transition:all .25s;backdrop-filter:blur(10px)}
.rules-close:hover{background:rgba(236,72,153,.28);color:#fff;border-color:rgba(236,72,153,.5)}
.rules-modal h2{margin:0 0 8px;font-size:1.55rem;background:linear-gradient(120deg,#e9d5ff,#fbcfe8 50%,#fde68a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 8px rgba(232,213,255,.3))}
.rules-sub{color:rgba(245,241,251,.7);margin:0 0 22px;font-size:.92rem}
.rules-steps{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:14px}
.rules-steps li{display:flex;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:15px 18px;transition:all .25s;backdrop-filter:blur(10px)}
.rules-steps li:hover{transform:translateX(4px);border-color:rgba(167,139,250,.5);background:rgba(255,255,255,.08)}
.rules-num{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.15rem;box-shadow:0 6px 18px rgba(139,92,246,.55),inset 0 1px 0 rgba(255,255,255,.3)}
.rules-text h3{margin:0 0 5px;font-size:1.05rem;color:#f5f1fb}
.rules-text p{margin:0;color:rgba(245,241,251,.72);font-size:.88rem;line-height:1.65}
.rules-text b{color:#fbcfe8;font-weight:600}
.rules-tips{background:rgba(252,211,77,.08);border:1px solid rgba(252,211,77,.25);border-radius:14px;padding:16px 20px;margin-bottom:22px;backdrop-filter:blur(10px)}
.rules-tips h4{margin:0 0 10px;color:#fde68a;font-size:.97rem}
.rules-tips ul{margin:0;padding-left:18px;color:rgba(245,241,251,.78);font-size:.86rem;line-height:1.75}
.rules-tips ul li{margin-bottom:5px}
.tip-up{color:#86efac}
.tip-rev{color:#fca5a5}
.rules-actions{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.rules-check{display:flex;align-items:center;gap:8px;color:rgba(245,241,251,.7);font-size:.85rem;cursor:pointer;user-select:none}
.rules-check input{accent-color:#a78bfa}

/* ----------- Ad slots ----------- */
.ad-slot{max-width:1100px;margin:0 auto;padding:8px 16px;text-align:center;min-height:0;position:relative;z-index:1}
.ad-slot:empty{padding:0}
.ad-slot ins.adsbygoogle{display:block;margin:0 auto}

/* ----------- Mobile ----------- */
@media (max-width: 640px){
  body::before, body::after{filter:blur(80px)}
  #app{padding:18px 12px 70px}
  .title{font-size:1.6rem;margin-bottom:18px}
  h2{font-size:1.05rem}
  .type-list{grid-template-columns:1fr 1fr;gap:10px}
  .type-card{padding:14px;border-radius:14px}
  .type-card h3{font-size:1rem}
  .type-card p{font-size:.78rem}
  textarea{font-size:.95rem;border-radius:12px}
  .btn{padding:10px 16px;font-size:.9rem;border-radius:12px}

  .shuffle-stage{height:280px;border-radius:18px}
  .shuffle-deck{width:104px;height:166px}
  .shuffle-deck .card::before{font-size:1.3rem}

  .fan{height:280px;margin:14px 0 0}
  .fan .card{width:56px;height:96px;transform-origin:50% 280px}
  .fan .card::before{font-size:1.2rem}
  .mat{gap:10px;padding:6px 0;margin-top:14px}
  .slot{width:64px;height:108px;border-radius:9px}
  .slot-num{font-size:1.2rem}
  .slot-label{font-size:.66rem;margin-top:3px}

  #picked-cards{gap:10px;padding:12px;border-radius:16px}
  .pc{width:104px}
  .pc .flipper{width:104px;height:166px}
  .pc .name{font-size:.85rem;margin-top:8px}
  .pc .theme{font-size:.7rem}

  .result, .error{padding:18px;border-radius:18px}
  #reading-text{font-size:.92rem;line-height:1.75}
  .sec{border-radius:14px}
  .sec-head{padding:12px 16px;gap:10px}
  .sec-badge{width:34px;height:34px;font-size:1.15rem}
  .sec-title{font-size:1rem}
  .sec-time{font-size:.82rem}
  .sec-body{padding:14px 16px;font-size:.92rem;line-height:1.78}

  .rules-modal{padding:24px 18px 20px;border-radius:18px}
  .rules-modal h2{font-size:1.3rem}
  .rules-num{width:34px;height:34px;font-size:1rem}
  .rules-steps li{padding:12px;border-radius:12px}
  .rules-text h3{font-size:.95rem}
  .rules-text p,.rules-tips ul{font-size:.82rem}
  .rules-actions{flex-direction:column;align-items:stretch}
  .rules-actions .btn{width:100%}
}

@media (max-width: 380px){
  .type-list{grid-template-columns:1fr}
  .fan .card{width:48px;height:80px;transform-origin:50% 220px}
  #picked-cards{gap:8px}
  .pc{width:90px}
  .pc .flipper{width:90px;height:144px}
}