:root{
  --cosmico:#0D0A14;--arcano:#1A1525;--arcano-2:#241c33;
  --roxo:#8B5CF6;--violeta:#4C1D95;--lavanda:#C4B5FD;
  --dourado:#D4A24E;--lunar:#F5F3FF;
  --display:'Cormorant Garamond',serif;--corpo:'Sora',sans-serif;
  --glow:0 0 24px rgba(139,92,246,.4);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--cosmico);color:var(--lunar);font-family:var(--corpo);font-weight:300;overflow-x:hidden}
#ceu{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.6}
em{font-style:normal;color:var(--roxo);font-weight:700;text-shadow:0 0 10px rgba(139,92,246,.6)}

.topo{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;border-bottom:1px solid rgba(139,92,246,.18)}
.voltar{color:var(--lavanda);text-decoration:none;font-size:.9rem}
.voltar:hover{color:var(--dourado)}
.marca{font-family:var(--display);font-size:1.3rem}
.marca em{} .usuario{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dourado)}

.palco{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:2.5rem 1.2rem 4rem;text-align:center}
.etapa h1{font-family:var(--display);font-weight:500;font-size:clamp(2rem,5vw,3rem);margin-bottom:1rem}
.etapa h2{font-family:var(--display);font-weight:500;font-size:1.8rem;margin-bottom:.4rem}
.subtitulo{color:var(--lavanda);max-width:34rem;margin:0 auto 2rem;line-height:1.6}
#contador{color:var(--dourado);font-size:1.1rem}

.campo-pergunta{width:100%;max-width:30rem;background:var(--arcano);border:1px solid rgba(196,181,253,.3);border-radius:999px;padding:.85rem 1.4rem;color:var(--lunar);font-family:var(--corpo);font-size:.95rem;margin-bottom:1.6rem}
.campo-pergunta:focus{outline:none;border-color:var(--roxo);box-shadow:var(--glow)}

.botao-magico{background:linear-gradient(135deg,var(--roxo),var(--violeta));color:var(--lunar);border:none;border-radius:999px;padding:.95rem 2rem;font-family:var(--corpo);font-weight:600;font-size:1rem;cursor:pointer;box-shadow:var(--glow);transition:.25s}
.botao-magico:hover{transform:translateY(-2px);box-shadow:0 0 38px rgba(139,92,246,.6)}
.botao-magico.secundario{background:transparent;border:1px solid rgba(196,181,253,.35);box-shadow:none;margin-top:2rem}
.botao-magico.secundario:hover{border-color:var(--dourado);color:var(--dourado)}

/* leque de cartas para escolher */
.leque{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem;perspective:1200px}
.carta{width:78px;height:130px;border-radius:10px;cursor:pointer;position:relative;transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;transform-style:preserve-3d;animation:surgir .5s backwards}
.carta:hover{transform:translateY(-16px) rotateZ(-2deg);box-shadow:0 8px 30px rgba(139,92,246,.5)}
.carta.escolhida{transform:translateY(-24px) scale(.92);pointer-events:none;opacity:.4;filter:saturate(.5)}
.carta-verso{position:absolute;inset:0;border-radius:10px;
  background:#0D0A14 url('cartas/tarot-verso.jpg') center/cover no-repeat;
  border:1px solid rgba(212,162,78,.45);display:flex;align-items:center;justify-content:center;overflow:hidden}
.carta-verso::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(245,243,255,.22) 50%,transparent 70%);transform:translateX(-100%);transition:transform .5s;z-index:1}
.carta:hover .carta-verso::before{transform:translateX(100%)}
@keyframes surgir{from{opacity:0;transform:translateY(20px) rotateY(40deg)}to{opacity:1;transform:none}}
@keyframes brilhoLua{50%{text-shadow:0 0 14px rgba(212,162,78,.9)}}

/* cartas escolhidas / reveladas */
.cartas-escolhidas{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}
.slot{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.slot-pos{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dourado);opacity:0;animation:aparecer .5s forwards}
.carta-revelada{width:150px;height:250px;border-radius:12px;background:linear-gradient(160deg,var(--arcano),var(--arcano-2));border:1px solid rgba(212,162,78,.5);box-shadow:0 0 30px rgba(76,29,149,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem;text-align:center;animation:revelarCarta .8s cubic-bezier(.34,1.3,.64,1) backwards;position:relative;overflow:hidden}
.carta-revelada::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 30%, rgba(212,162,78,.18), transparent 60%);pointer-events:none}
.carta-revelada.invertida .carta-simbolo{transform:rotate(180deg)}
.carta-revelada.invertida .carta-arte img{transform:rotate(180deg)}
.carta-arte{width:100%;flex:1;border-radius:8px;overflow:hidden;margin-bottom:.4rem;display:flex;align-items:center;justify-content:center;min-height:0}
.carta-arte img{width:100%;height:100%;object-fit:cover;display:block}
.carta-simbolo{font-size:2.4rem;margin-bottom:.5rem;animation:flutua 4s ease-in-out infinite}
.carta-nome{font-family:var(--display);font-size:1.05rem;line-height:1.2;color:var(--lunar)}
.carta-inv{font-size:.65rem;color:var(--dourado);margin-top:.3rem;letter-spacing:.1em;text-transform:uppercase}
@keyframes revelarCarta{from{transform:rotateY(90deg) scale(.8);opacity:0}to{transform:rotateY(0) scale(1);opacity:1}}
@keyframes flutua{50%{transform:translateY(-6px)}}
@keyframes aparecer{to{opacity:1}}

/* leitura da Sofia */
.leitura{max-width:42rem;margin:0 auto}
.leitura-sofia{background:var(--arcano);border:1px solid rgba(212,162,78,.35);border-radius:16px;padding:1.8rem 2rem;box-shadow:0 0 40px rgba(76,29,149,.3);text-align:left}
.leitura-texto{font-family:var(--display);font-size:1.2rem;line-height:1.7;color:var(--lunar);white-space:pre-wrap}
.leitura-texto.carregando{font-style:italic;color:var(--lavanda);text-align:center}

.aviso-limite{max-width:38rem;margin:1.5rem auto 0;background:rgba(212,162,78,.1);border:1px solid rgba(212,162,78,.4);border-radius:14px;padding:1.2rem 1.5rem;color:var(--dourado);line-height:1.6}
.aviso-limite a{color:var(--lunar);font-weight:600}

@media (max-width:600px){
  .carta{width:60px;height:100px}
  .carta-revelada{width:130px;height:217px}
  .carta-simbolo{font-size:2rem}
}

/* ===== grade de escolha dos jogos ===== */
.jogos-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;max-width:560px;margin:1.5rem auto 0}
.jogo-card{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  background:rgba(26,21,37,.7);border:1px solid rgba(139,92,246,.25);border-radius:16px;
  padding:1.4rem 1rem;cursor:pointer;color:var(--lunar);font-family:var(--corpo);
  transition:transform .2s,border-color .2s,background .2s;position:relative;
}
.jogo-card:hover{transform:translateY(-3px);border-color:rgba(212,162,78,.5);background:rgba(139,92,246,.12)}
.jogo-card.bloqueado{opacity:.6}
.jogo-card.bloqueado:hover{transform:none;border-color:rgba(139,92,246,.25)}
.jogo-icone{font-size:2rem}
.jogo-nome{font-family:var(--display);font-size:1.15rem;color:var(--dourado);text-align:center;line-height:1.2}
.jogo-qtd{font-size:.78rem;color:var(--lavanda);opacity:.8}
.jogo-selo{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .6rem;border-radius:999px;background:rgba(212,162,78,.15);color:var(--dourado);margin-top:.2rem}
.jogo-selo.gratis{background:rgba(155,230,168,.15);color:#9BE6A8}
.voltar-jogos{background:none;border:none;color:var(--lavanda);cursor:pointer;font-family:var(--corpo);font-size:.85rem;margin-bottom:1rem;opacity:.8}
.voltar-jogos:hover{color:var(--dourado);opacity:1}
/* na cruz celta (10 cartas), as reveladas ficam menores e em grade */
.cartas-cruz .carta-revelada{width:90px;height:150px}
.cartas-cruz{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.8rem;max-width:520px}


/* ===== animação de embaralhar ===== */
.baralho-embaralhar{position:relative;height:150px;width:120px;margin:2rem auto}
.baralho-embaralhar span{position:absolute;left:50%;top:0;width:78px;height:130px;margin-left:-39px;border-radius:10px;border:1px solid rgba(212,162,78,.45);background:#0D0A14 url('cartas/tarot-verso.jpg') center/cover no-repeat;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.baralho-embaralhar span:nth-child(1){animation:embaralha 1.05s ease-in-out infinite}
.baralho-embaralhar span:nth-child(2){animation:embaralha 1.05s ease-in-out infinite .1s}
.baralho-embaralhar span:nth-child(3){animation:embaralha 1.05s ease-in-out infinite .2s}
.baralho-embaralhar span:nth-child(4){animation:embaralha 1.05s ease-in-out infinite .3s}
.baralho-embaralhar span:nth-child(5){animation:embaralha 1.05s ease-in-out infinite .4s}
@keyframes embaralha{0%{transform:translateX(0) rotate(0)}25%{transform:translateX(-48px) rotate(-10deg)}50%{transform:translateX(0) rotate(0)}75%{transform:translateX(48px) rotate(10deg)}100%{transform:translateX(0) rotate(0)}}
@media (prefers-reduced-motion:reduce){.baralho-embaralhar span{animation-duration:.01s}}