/* Tarot reading area. ONE file for tarot-karte.html (SL) and en/tarot-cards.html (EN): keep the two pages identical. */
/* crystal ball loading */
.reading-loading{display:flex;flex-direction:column;align-items:center;padding:2rem 0 1.5rem;gap:1.2rem}
.crystal-wrap{position:relative;width:84px;height:84px}
.crystal-wrap::before{content:"";position:absolute;inset:-22px;border-radius:50%;background:radial-gradient(circle,rgba(216,189,154,.12),rgba(199,188,228,.08) 38%,transparent 68%);filter:blur(5px);animation:oracleHalo 4.8s ease-in-out infinite}
.crystal-ball{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 34% 27%,var(--ball-core,rgba(246,240,231,.74)) 0 8%,var(--ball-warm,rgba(216,189,154,.34)) 15%,var(--ball-mid,rgba(199,188,228,.28)) 32%,var(--ball-deep,rgba(76,64,96,.5)) 58%,var(--ball-dark,rgba(13,12,20,.92)) 82%);border:1px solid var(--ball-ring,rgba(216,189,154,.34));box-shadow:0 0 22px var(--ball-glow,rgba(216,189,154,.18)),0 0 48px var(--ball-glow2,rgba(199,188,228,.16)),0 18px 50px rgba(0,0,0,.36),inset 0 0 20px var(--ball-core,rgba(246,240,231,.16)),inset 0 -18px 28px var(--ball-dark,rgba(9,8,14,.82));position:relative;overflow:hidden;animation:oraclePulse 4.2s ease-in-out infinite}
.crystal-ball::after{content:"";position:absolute;left:18%;right:18%;bottom:8%;height:14%;border-radius:50%;background:radial-gradient(ellipse,rgba(216,189,154,.34),transparent 70%);filter:blur(4px);opacity:.58}
.crystal-glow{position:absolute;top:18%;left:22%;width:30%;height:20%;border-radius:50%;background:rgba(246,240,231,.46);filter:blur(4px);box-shadow:0 0 18px rgba(216,189,154,.36);animation:softGlint 4.6s ease-in-out infinite}
.crystal-swirl{position:absolute;inset:8%;border-radius:50%;background:conic-gradient(from 135deg,transparent 0 28%,rgba(216,189,154,.18) 36%,rgba(199,188,228,.22) 46%,transparent 62% 100%);filter:blur(2px);opacity:.72;animation:veilTurn 8s ease-in-out infinite}
.crystal-nebula{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 64% 66%,rgba(127,108,175,.34),transparent 54%),radial-gradient(ellipse at 28% 44%,rgba(216,189,154,.2),transparent 46%),radial-gradient(circle at 56% 45%,rgba(168,190,223,.14),transparent 36%);animation:mistBreath 5.8s ease-in-out infinite}
.crystal-arc{position:absolute;inset:13%;border-radius:50%;border:1px solid rgba(216,189,154,.14);box-shadow:inset 0 0 18px rgba(199,188,228,.08);animation:oracleRing 6.4s ease-in-out infinite}
.crystal-arc::before{content:"";position:absolute;left:20%;top:19%;width:56%;height:56%;border-radius:50%;border-top:1px solid rgba(216,189,154,.24);border-left:1px solid rgba(199,188,228,.16);transform:rotate(-18deg);filter:blur(.2px)}
.crystal-arc::after{content:"";position:absolute;left:48%;top:43%;width:5px;height:5px;border-radius:50%;background:rgba(216,189,154,.56);box-shadow:0 0 16px rgba(216,189,154,.5);animation:emberBlink 3.8s ease-in-out infinite}
@keyframes oraclePulse{0%,100%{transform:translateY(0) scale(1);box-shadow:0 0 22px rgba(216,189,154,.16),0 0 48px rgba(199,188,228,.14),0 18px 50px rgba(0,0,0,.36),inset 0 0 20px rgba(246,240,231,.14),inset 0 -18px 28px rgba(9,8,14,.82)}50%{transform:translateY(-3px) scale(1.015);box-shadow:0 0 30px rgba(216,189,154,.24),0 0 62px rgba(199,188,228,.2),0 18px 54px rgba(0,0,0,.42),inset 0 0 26px rgba(246,240,231,.18),inset 0 -16px 26px rgba(9,8,14,.74)}}
@keyframes oracleHalo{0%,100%{opacity:.44;transform:scale(.96)}50%{opacity:.82;transform:scale(1.08)}}
@keyframes softGlint{0%,100%{opacity:.42;transform:translate(0,0) scale(.95)}50%{opacity:.74;transform:translate(4px,3px) scale(1.05)}}
@keyframes veilTurn{0%,100%{transform:rotate(-8deg) scale(.96);opacity:.42}50%{transform:rotate(18deg) scale(1.06);opacity:.78}}
@keyframes mistBreath{0%,100%{opacity:.5;transform:scale(.98)}50%{opacity:.86;transform:scale(1.04)}}
@keyframes oracleRing{0%,100%{opacity:.32;transform:rotate(-12deg) scale(.96)}50%{opacity:.68;transform:rotate(8deg) scale(1.02)}}
@keyframes emberBlink{0%,100%{opacity:.28;transform:scale(.8)}42%,58%{opacity:.9;transform:scale(1.16)}}
.loading-text{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);animation:fadeOsc 2.8s ease-in-out infinite}
@keyframes fadeOsc{0%,100%{opacity:.42}50%{opacity:.86}}
.intent-wrap{max-width:520px;margin:0 auto;position:relative;opacity:0;visibility:hidden;transform:translateY(14px);max-height:0;overflow:hidden;pointer-events:none;transition:opacity .4s ease,transform .4s ease,visibility .4s}
.intent-wrap.visible{opacity:1;visibility:visible;transform:none;max-height:none;margin-bottom:3rem;pointer-events:auto}
.intent-label{display:block;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(199,188,228,.9);margin-bottom:.9rem;text-align:center;font-weight:400}
.intent-input{width:100%;background:rgba(199,188,228,.07);border:1.5px solid rgba(199,188,228,.45);color:#fff;font-family:var(--sans);font-size:1rem;font-weight:300;padding:1.1rem 1.4rem;outline:none;transition:.3s;resize:none;line-height:1.7;border-radius:2px}
.intent-input:focus{border-color:rgba(199,188,228,.8);background:rgba(199,188,228,.11);box-shadow:0 0 0 3px rgba(199,188,228,.08)}
.cards{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,3.4vw,38px);min-height:0;max-height:0;overflow:hidden;perspective:1400px}
.cards.cards-visible{min-height:calc(clamp(120px,17vw,176px)*1.6 + 14px);max-height:340px;overflow:visible}
.card{width:clamp(120px,17vw,176px);aspect-ratio:5/8;position:relative;border:0;background:none;padding:0;transition:.35s}
.card.is-ambient{pointer-events:none;animation:ambientFloat 5s ease-in-out infinite}
.card.is-dealing{pointer-events:none;animation:dealIn 1s cubic-bezier(.22,1,.36,1) both}
.card.is-shuffling{pointer-events:none;animation:shuffleWig 1.8s ease-out both}
.card.is-ready{animation:cardReady .6s ease-out both}
@keyframes ambientFloat{
  0%,100%{transform:translateY(0) rotate(var(--card-rot))}
  33%{transform:translateY(-10px) rotate(calc(var(--card-rot)*1.15))}
  66%{transform:translateY(-5px) rotate(calc(var(--card-rot)*.85))}
}
.card:nth-child(1){--card-rot:-9deg;--shuf-dir:-1}
.card:nth-child(2){--card-rot:4deg;--shuf-dir:1}
.card:nth-child(3){--card-rot:-6deg;--shuf-dir:-1}
@keyframes dealIn{
  0%{opacity:0;transform:translateY(80px) rotate(var(--card-rot)) scale(.85)}
  65%{opacity:1;transform:translateY(-10px) rotate(calc(var(--card-rot)*.25)) scale(1.03)}
  82%{transform:translateY(5px) rotate(calc(var(--card-rot)*.08)) scale(.99)}
  100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
}
@keyframes shuffleWig{
  0%,100%{transform:translateY(0) rotate(0)}
  8%{transform:translateX(calc(var(--shuf-dir)*-38px)) translateY(-22px) rotate(calc(var(--shuf-dir)*-9deg))}
  18%{transform:translateX(calc(var(--shuf-dir)*30px)) translateY(-16px) rotate(calc(var(--shuf-dir)*7deg))}
  30%{transform:translateX(calc(var(--shuf-dir)*-22px)) translateY(-12px) rotate(calc(var(--shuf-dir)*-5deg))}
  42%{transform:translateX(calc(var(--shuf-dir)*16px)) translateY(-8px) rotate(calc(var(--shuf-dir)*4deg))}
  55%{transform:translateX(calc(var(--shuf-dir)*-10px)) translateY(-5px) rotate(calc(var(--shuf-dir)*-3deg))}
  67%{transform:translateX(calc(var(--shuf-dir)*6px)) translateY(-3px) rotate(calc(var(--shuf-dir)*2deg))}
  78%{transform:translateX(calc(var(--shuf-dir)*-3px)) translateY(-1px) rotate(calc(var(--shuf-dir)*-1deg))}
  90%{transform:translateX(calc(var(--shuf-dir)*1px)) rotate(calc(var(--shuf-dir)*.4deg))}
}
@keyframes cardReady{
  0%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-6px) scale(1.025)}
  100%{transform:translateY(0) scale(1)}
}
.shuffle-hint{text-align:center;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:1.4rem;opacity:0;transition:opacity .6s ease}
.shuffle-hint.visible{opacity:1}
.card:hover:not(.flipped):not(.dimmed){transform:translateY(-14px)}
.card.dimmed{opacity:.24;pointer-events:none}
.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.4,.1,.2,1)}
.card.flipped .card-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:1.5px solid rgba(216,189,154,.38);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 18px 52px rgba(0,0,0,.5),0 0 0 1px rgba(199,188,228,.18),0 0 36px rgba(199,188,228,.12)}
.face-back{background-image:url("/cards/optimized/oracle-card-back-velvet-secret.webp");background-size:cover;background-position:center;background-color:#111018}
.face-back::after{content:"";position:absolute;inset:7px;border:1px solid rgba(216,189,154,.2);pointer-events:none}


.face-front{
  transform:rotateY(180deg) translateZ(1px);
  background:
    radial-gradient(circle at 50% 30%,rgba(216,189,154,.22),transparent 28%),
    linear-gradient(170deg,#2e2840,#1e1a30 72%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  flex-direction:column;gap:.55rem;padding:1rem;border-color:rgba(216,189,154,.34);
}
.face-front::before{content:"";position:absolute;inset:12px;border:1px solid rgba(216,189,154,.28)}
.face-front::after{content:"";position:absolute;inset:26px;border:1px solid rgba(199,188,228,.13);background:radial-gradient(circle,rgba(199,188,228,.12),transparent 56%)}
.face-front span{position:relative;z-index:1}
.face-front .card-kind{font-size:.52rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(216,189,154,.95);font-weight:400}
.face-front .symbol{font-size:2.35rem;color:var(--warm);line-height:1;filter:drop-shadow(0 0 8px rgba(216,189,154,.5))}
.face-front .card-name{font-family:var(--display);font-size:clamp(.92rem,1.3vw,1.12rem);color:#fff;letter-spacing:.03em;text-align:center;line-height:1.25;text-shadow:0 2px 12px rgba(0,0,0,.8),0 0 24px rgba(0,0,0,.6);font-weight:500}
.face-front .card-num{font-size:.58rem;letter-spacing:.22em;color:rgba(216,189,154,.82);text-align:center;text-transform:uppercase}
.result{max-width:640px;margin:3.4rem auto 0;padding:2.7rem 2.5rem;border:1px solid var(--line);background:rgba(17,16,24,.56);display:none;text-align:left;position:relative}
.daily-notice{display:none;text-align:center;margin:1.6rem auto 0;max-width:480px;font-size:.82rem;letter-spacing:.08em;color:var(--muted)}
.result.show{display:block;animation:rise .7s ease both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.result .section-label{text-align:center;color:var(--violet-light)}
.result h3{font-family:var(--display);font-size:2rem;color:var(--warm);text-align:center;margin:.8rem 0 1.2rem}
.result p{color:var(--text);font-weight:300;margin-bottom:1rem}
#rText,#r2Text{white-space:pre-line}
.result .reflect{border-left:1px solid var(--violet-light);padding:.25rem 0 .25rem 1.1rem;color:var(--violet-light);font-family:var(--display);font-style:italic;font-size:1.16rem;margin:1.4rem 0}
.result-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
@media(max-width:760px){
  .cards{gap:.5rem}
  .face{border-color:rgba(216,189,154,.58);box-shadow:0 16px 44px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.14),0 0 34px rgba(199,188,228,.2)}
  .face-back::after{border-color:rgba(216,189,154,.34)}
  .result{padding:1.8rem 1.2rem}
  .intent-wrap{margin-bottom:0}
  .intent-wrap.visible{margin-bottom:1.8rem}
  .intent-input{font-size:1rem;padding:1rem 1.1rem}
  .crystal-ball{width:64px;height:64px}
  .crystal-wrap{width:64px;height:64px}
}

/* The turned card is lit: a gold halo, in front of the others. */
.card.flipped{z-index:2}
.card.flipped .face-front{box-shadow:0 0 0 1px rgba(216,189,154,.78),0 0 34px rgba(216,189,154,.42),0 0 88px rgba(199,188,228,.26),0 22px 56px rgba(0,0,0,.55)}

/* Tarot-specific parts of the workspace (the general grid lives in workspace.css). */
.cards:has(.is-ambient){display:none}
@media(min-width:960px){
  .reading-panel .topic-row{justify-content:flex-start}
  .reading-panel .intent-wrap{max-width:none;margin-left:0}
  .reading-panel .intent-label{text-align:left}
  .reading-panel .intent-wrap>div:last-child{text-align:left!important}
  .cards:has(.is-ambient){display:flex}
  .reading-stage .cards{gap:1rem;justify-content:center}
  .reading-stage .card{width:min(176px,calc((100% - 2rem)/3))}
  .reading-stage .cards.cards-visible{min-height:0}
  /* reading shown: the panel gives way, the turned card is the only one left and larger */
  .reading-workspace:has(>.result.show) .card.dimmed{display:none}
  .reading-workspace:has(>.result.show) .reading-stage .card{width:min(280px,100%,calc((100vh - 20rem)/1.6))}
  .reading-workspace:has(>.result.show) .cards{max-height:none}
  .reading-workspace:has(>.result.show) .shuffle-hint{display:none}
}
/* Paid mode (Pot, Razplet): the same workspace. The free cards give way to the cards to choose from,
   then to the chosen cards, lit like the free card, while the longer reading takes the left column. */
.paid-note{margin-bottom:1.4rem}
.paid-note[hidden]{display:none}
.paid-note p{color:var(--muted);font-size:.9rem;line-height:1.6;margin:.4rem 0 .8rem}
.reading-stage .pot-spread{display:none;margin:0}
.paid-mode .reading-stage .cards,.paid-mode .reading-stage .shuffle-hint,.paid-mode .reading-stage .daily-notice{display:none!important}
.paid-mode .reading-stage .pot-spread:not(:empty){display:grid}
.paid-mode .pot-card.spread-card.is-revealed img{box-shadow:0 0 0 1px rgba(216,189,154,.7),0 0 26px rgba(216,189,154,.34)}
@media(min-width:960px){
  .paid-mode .reading-stage .pot-spread{grid-template-columns:repeat(3,1fr);gap:1rem}
  .paid-mode .reading-stage .razplet-spread{grid-template-columns:repeat(4,1fr);gap:.8rem}
  .paid-mode .reading-stage .pot-card img{width:100%;max-width:190px;margin-bottom:.7rem}
  .paid-mode .reading-stage .razplet-spread .pot-card img{max-width:96px}
  .paid-mode .reading-stage .chooser-card{width:96px;height:154px}
  .paid-mode .reading-stage .razplet-spread .chooser-card{width:78px;height:125px}
  .paid-mode .reading-stage .chooser-fan{gap:.7rem}
  .paid-mode .reading-stage .chooser-hint{margin-bottom:1rem}
}
#branje.daily-locked .reading-workspace,#reading.daily-locked .reading-workspace{display:block}
#branje.daily-locked .reading-panel,#reading.daily-locked .reading-panel{display:none}
#branje.daily-locked .reading-stage,#reading.daily-locked .reading-stage{min-height:0}
.topic svg{width:15px;height:15px;flex:0 0 auto}

/* Field buttons, the same on both pages */
.topic-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-bottom:3rem}
.topic{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  padding:.62rem 1.25rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  transition:.25s;
}
.topic:hover,.topic.active{background:var(--violet-deep);border-color:var(--violet-deep);color:#fff}
.topic:disabled{
  cursor:not-allowed;
  opacity:.52;
  background:transparent!important;
  border-color:rgba(199,188,228,.22)!important;
  color:var(--muted)!important;
}
@media(max-width:760px){
  .topic-row{gap:.45rem;margin-bottom:1.2rem}
  .topic{font-size:.62rem;padding:.45rem .8rem}
}

/* Card choice, chosen cards and the longer reading (Pot, Razplet / Path, Unfolding) */
.chooser-hint{grid-column:1/-1;text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:1.3rem}
.chooser-fan{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-bottom:1.2rem}
.chooser-card{position:relative;width:58px;height:96px;perspective:800px;cursor:pointer;background:none;border:none;padding:0;flex:0 0 auto}
.chooser-card:disabled{cursor:default}
.cc-inner{display:block;position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.22,1,.36,1);transform-style:preserve-3d}
.chooser-card.picked .cc-inner{transform:rotateY(180deg)}
.chooser-card.fading{transition:opacity .5s ease,transform .5s ease;opacity:0;transform:scale(.92)}
.cc-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:5px;border:1px solid rgba(216,189,154,.32);overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.cc-back{background-image:url("/cards/optimized/oracle-card-back-velvet-secret.webp");background-size:cover;background-position:center;background-color:#111018;transition:box-shadow .25s ease,border-color .25s ease}
.chooser-card:not(:disabled):hover .cc-back{border-color:rgba(216,189,154,.6);box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 0 1px rgba(216,189,154,.3)}
.cc-front{transform:rotateY(180deg);background-size:cover;background-position:center;background-color:#1e1a30;display:flex;align-items:flex-end;justify-content:center}
.cc-role{display:block;width:100%;padding:.25rem .2rem;font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;color:#fff;text-align:center;background:linear-gradient(to top,rgba(0,0,0,.85),transparent)}
.pot-spread{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.2rem 0 1.6rem}
.pot-card{border:1px solid rgba(199,188,228,.18);background:rgba(255,255,255,.035);padding:1rem;text-align:center}
.pot-card.spread-card{opacity:0;transform:translateY(18px) rotate(var(--spread-rot,0deg)) scale(.96);filter:blur(5px);transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1),filter .8s ease,border-color .8s ease,box-shadow .8s ease}
.pot-card.spread-card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(216,189,154,.08);pointer-events:none;opacity:0;transition:opacity .7s ease}
.pot-card.spread-card{position:relative;overflow:hidden}
.pot-card.spread-card.is-revealed{opacity:1;transform:translateY(0) rotate(0deg) scale(1);filter:none;border-color:rgba(199,188,228,.28);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.pot-card.spread-card.is-revealed::before{opacity:1}
.pot-card img{width:86px;aspect-ratio:5/8;object-fit:cover;margin:0 auto .8rem;border:1px solid rgba(199,188,228,.24)}
.pot-card-role{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-light);margin-bottom:.25rem;font-weight:700}
.pot-card-name{font-family:var(--display);font-size:1rem;color:#fff;line-height:1.25}
.pot-reading-text{white-space:pre-line;color:var(--text);line-height:1.85}
.pot-reading-heading{display:block;margin:1.35rem 0 .25rem;font-family:var(--display);font-size:1.25rem;line-height:1.3;color:#fff;font-weight:700}
.followup-box{margin-top:1.4rem;padding:1.1rem 1.3rem;border:1px solid rgba(199,188,228,.18);background:rgba(199,188,228,.04)}
.followup-box strong{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-light);margin-bottom:.7rem;font-weight:400}
.followup-box textarea{width:100%;background:rgba(199,188,228,.07);border:1.5px solid rgba(199,188,228,.35);color:#fff;font-family:var(--sans);font-size:.92rem;font-weight:300;padding:.85rem 1rem;outline:none;resize:vertical;line-height:1.65;border-radius:2px;min-height:80px}
.followup-locked{margin-top:1.4rem;padding:1.1rem 1.3rem;border:1px solid rgba(216,189,154,.22);background:rgba(216,189,154,.05)}
.followup-locked strong{display:block;font-family:var(--display);font-size:1.1rem;color:#fff;margin-bottom:.4rem;font-weight:400}
.followup-locked p{color:var(--muted);font-size:.86rem;line-height:1.6;margin-bottom:0}
.razplet-spread{grid-template-columns:repeat(auto-fit,minmax(116px,1fr))}
.razplet-spread .pot-card{padding:.85rem}
.razplet-spread .pot-card img{width:74px}
.razplet-spread .pot-card-name{font-size:.94rem}
.reading-question{font-family:var(--display);font-size:1.1rem;font-style:italic;color:rgba(255,255,255,.7);line-height:1.65;margin-bottom:2rem}
.pot-card img{border:1.5px solid rgba(216,189,154,.42);box-shadow:0 12px 32px rgba(0,0,0,.46),0 0 0 1px rgba(199,188,228,.16),0 0 24px rgba(199,188,228,.1);background:#090912;display:block;border-radius:1px}
@media(max-width:760px){
  .pot-spread{grid-template-columns:1fr}
  .pot-card{display:grid;grid-template-columns:64px 1fr;gap:.9rem;text-align:left;align-items:center}
  .pot-card img{width:64px;margin:0}
}

/* Keyboard and touch */
.card:focus-visible,.chooser-card:focus-visible,.topic:focus-visible,#confirmBtn:focus-visible,.result-cta .pricing-btn:focus-visible,.result-cta .btn:focus-visible{outline:2px solid #d8bd9a;outline-offset:3px}
@media(pointer:coarse){.topic{min-height:44px}}

/* Verified testers see the actual purchase button inside the offer. */
html.is-tester .tarot-public-offer{display:none}
#resumeDailyBtn[hidden]{display:none}

/* The loading square is the same on Cards, Dreams and Signs: the panel around it steps
   aside while the ball turns, so the box is the box and nothing else. */
.reading-loading{min-height:340px;padding:2rem;border:1px solid var(--load-line,rgba(199,188,228,.2));background:var(--load-bg,#111018);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem}
.result:has(.reading-loading),.result-card:has(.reading-loading){border-color:transparent;background:none;padding:0;box-shadow:none}
@media(max-width:760px){.reading-loading{min-height:280px;padding:1.4rem}}

/* The loading square and the ball follow the colours of each pillar: warm gold and violet
   on Cards, cool steel and blue on Dreams, clear violet on Signs. Same box, same ball, own light. */
.reading-loading{
  --load-line:rgba(199,188,228,.22);
  --load-bg:radial-gradient(circle at 50% 34%,rgba(216,189,154,.07),transparent 62%),#111018;
  --ball-core:rgba(246,240,231,.76);
  --ball-warm:rgba(216,189,154,.38);
  --ball-mid:rgba(199,188,228,.3);
  --ball-deep:rgba(76,64,96,.52);
  --ball-dark:rgba(13,12,20,.92);
  --ball-ring:rgba(216,189,154,.4);
  --ball-glow:rgba(216,189,154,.22);
  --ball-glow2:rgba(199,188,228,.18);
}