/* ================================================================
   TAROT INTERATIVO v4 — Baralho Empilhado
   Fundo branco · Pilha de cartas com efeito 3D
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=IM+Fell+English:ital@0;1&family=Lato:wght@300;400&display=swap');

:root {
  --ti-bg:        #ffffff;
  --ti-bg2:       #f8f6ff;
  --ti-bg3:       #f0edf8;
  --ti-indigo:    #2e2b6e;
  --ti-indigo2:   #3d3a8c;
  --ti-indigo3:   #5550bb;
  --ti-gold:      #c9922a;
  --ti-gold2:     #e8b84b;
  --ti-gold3:     #f5d080;
  --ti-red:       #c93f3f;
  --ti-text:      #1a1830;
  --ti-muted:     #6b6890;
  --ti-border:    rgba(46,43,110,.12);
  --ti-border2:   rgba(201,146,42,.30);
  --ti-shadow:    rgba(46,43,110,.10);
  --ti-r:         14px;
  --ti-r-card:    10px;
  /* Tamanho base da carta */
  --card-w:       130px;
  --card-h:       215px;
}

/* ── Wrapper ─────────────────────────────────────────── */
.ti-wrap {
  font-family: 'Lato', sans-serif;
  background: var(--ti-bg);
  color: var(--ti-text);
  border-radius: 20px;
  padding: 44px 28px 52px;
  margin: 28px auto;
  max-width: 1060px;
  border: 1px solid var(--ti-border);
  box-shadow: 0 2px 0 var(--ti-border2), 0 8px 40px var(--ti-shadow);
  position: relative;
  overflow: hidden;
}
.ti-wrap::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--ti-gold), var(--ti-gold3), var(--ti-gold), transparent);
}

/* ── Partículas ──────────────────────────────────────── */
.ti-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.ti-particles span {
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--ti-gold2); opacity:0;
  animation:particle-float 10s ease-in-out infinite;
}
.ti-particles span:nth-child(1)  { left:8%;  top:15%; animation-delay:0s;   animation-duration:9s; }
.ti-particles span:nth-child(2)  { left:22%; top:55%; animation-delay:1.8s; animation-duration:11s; }
.ti-particles span:nth-child(3)  { left:48%; top:8%;  animation-delay:3.2s; animation-duration:8s; }
.ti-particles span:nth-child(4)  { left:72%; top:35%; animation-delay:4.5s; animation-duration:10s; }
.ti-particles span:nth-child(5)  { left:88%; top:70%; animation-delay:2.1s; animation-duration:12s; }
.ti-particles span:nth-child(6)  { left:38%; top:82%; animation-delay:0.9s; animation-duration:9.5s; }
.ti-particles span:nth-child(7)  { left:62%; top:50%; animation-delay:5.4s; animation-duration:7.5s; }
.ti-particles span:nth-child(8)  { left:12%; top:88%; animation-delay:3.7s; animation-duration:13s; }
.ti-particles span:nth-child(9)  { left:92%; top:18%; animation-delay:6.2s; animation-duration:10s; }
.ti-particles span:nth-child(10) { left:33%; top:30%; animation-delay:2.6s; animation-duration:8.5s; }
@keyframes particle-float {
  0%,100% { opacity:0; transform:translateY(0); }
  15%     { opacity:.4; }
  50%     { opacity:.15; transform:translateY(-35px); }
  85%     { opacity:0; }
}

/* ── Cabeçalho ───────────────────────────────────────── */
.ti-main, .ti-result { position:relative; z-index:1; }

.ti-ornament {
  font-family:'Playfair Display',serif;
  color:var(--ti-gold); letter-spacing:10px; font-size:.85rem;
  opacity:.75; margin-bottom:14px; text-align:center;
}
.ti-header { text-align:center; margin-bottom:28px; }
.ti-titulo {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.4rem,4vw,2.2rem); font-weight:900;
  color:var(--ti-indigo); margin:0 0 12px; line-height:1.2;
}
.ti-instrucao {
  font-family:'IM Fell English',serif; font-style:italic;
  font-size:1.05rem; color:var(--ti-muted); margin:0;
}
.ti-instrucao strong { color:var(--ti-indigo3); font-style:normal; font-weight:700; }

/* ── Divisor ─────────────────────────────────────────── */
.ti-divider {
  display:flex; align-items:center; gap:16px;
  max-width:400px; margin:0 auto 28px;
}
.ti-divider::before,.ti-divider::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--ti-border2));
}
.ti-divider::after { background:linear-gradient(90deg,var(--ti-border2),transparent); }
.ti-divider span {
  font-family:'Playfair Display',serif; font-size:.8rem;
  color:var(--ti-gold); letter-spacing:3px; text-transform:uppercase;
}

/* ── Progresso ───────────────────────────────────────── */
.ti-progress-area {
  max-width:480px; margin:0 auto 24px;
  display:flex; align-items:center; gap:16px;
}
.ti-progress-track {
  flex:1; height:6px; background:var(--ti-bg3);
  border-radius:3px; overflow:hidden; border:1px solid var(--ti-border);
}
.ti-progress-fill {
  height:100%; width:0%; border-radius:3px;
  background:linear-gradient(90deg,var(--ti-indigo3),var(--ti-gold2));
  transition:width .45s cubic-bezier(.4,0,.2,1);
}
.ti-progress-label {
  font-family:'Playfair Display',serif; font-size:.95rem;
  color:var(--ti-indigo); white-space:nowrap; min-width:80px;
  text-align:right; font-weight:700;
}

/* ── Botões ──────────────────────────────────────────── */
.ti-controls { display:flex; gap:12px; justify-content:center; margin-bottom:32px; flex-wrap:wrap; }
.ti-btn {
  font-family:'Playfair Display',serif; font-size:.8rem;
  letter-spacing:1.5px; text-transform:uppercase; padding:10px 24px;
  border-radius:50px; cursor:pointer; transition:all .22s ease;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent; font-weight:700; outline:none;
}
.ti-btn svg { width:15px; height:15px; flex-shrink:0; }
.ti-btn--shuffle { background:var(--ti-bg3); color:var(--ti-indigo2); border-color:var(--ti-border); }
.ti-btn--shuffle:hover { background:var(--ti-indigo); color:#fff; border-color:var(--ti-indigo); transform:translateY(-2px); box-shadow:0 6px 18px rgba(46,43,110,.25); }
.ti-btn--reset { background:transparent; color:var(--ti-muted); border-color:var(--ti-border); }
.ti-btn--reset:hover { background:var(--ti-bg3); color:var(--ti-text); transform:translateY(-2px); }
.ti-btn--consult {
  background:linear-gradient(135deg,var(--ti-indigo) 0%,var(--ti-indigo3) 100%);
  color:var(--ti-gold3); border-color:var(--ti-gold2);
  font-size:1rem; padding:16px 44px; letter-spacing:2px;
  box-shadow:0 6px 28px rgba(46,43,110,.30);
}
.ti-btn--consult:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 10px 40px rgba(46,43,110,.42); filter:brightness(1.08); }
.ti-btn--new { background:var(--ti-bg3); color:var(--ti-muted); border-color:var(--ti-border); padding:12px 28px; }
.ti-btn--new:hover { background:var(--ti-indigo); color:#fff; border-color:var(--ti-indigo); transform:translateY(-1px); }
.ti-btn-crystal { font-size:1.3rem; animation:crystal-pulse 3s ease-in-out infinite; }
@keyframes crystal-pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }

/* ── BOARD: pilha + selecionadas ─────────────────────── */
.ti-board {
  display: grid;
  grid-template-columns: var(--card-w) 1fr;
  gap: 40px;
  align-items: start;
  min-height: calc(var(--card-h) + 80px);
}

/* ── COLUNA DO BARALHO ───────────────────────────────── */
.ti-deck-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ti-deck-hint {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: .82rem;
  color: var(--ti-muted);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.ti-deck-remaining {
  font-family: 'Playfair Display', serif;
  font-size: .78rem;
  color: var(--ti-indigo3);
  font-weight: 700;
  text-align: center;
  margin: 0;
  letter-spacing: .5px;
}

/* ── PILHA DE CARTAS ─────────────────────────────────── */
.ti-deck {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  cursor: pointer;
}

/* Cada carta na pilha — posicionada com offset visual */
.ti-card {
  position: absolute;
  width: var(--card-w);
  height: var(--card-h);
  /* Deslocamento para criar ilusão de profundidade */
  top:  calc(var(--depth, 0) * -1.5px);
  left: calc(var(--depth, 0) * 0.5px);
  cursor: pointer;
  perspective: 900px;
  /* Carta do topo tem z-index maior */
  z-index: calc(100 - var(--depth, 0));
  transition: top .3s ease, left .3s ease, opacity .3s ease;
  outline: none;
}

/* Apenas a carta do topo é clicável ativamente */
.ti-deck .ti-card:first-child {
  top: calc(var(--depth, 0) * -1.5px);
}

.ti-card__inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
  border-radius: var(--ti-r-card);
  box-shadow:
    0 2px 0 rgba(0,0,0,.08),
    0 4px 12px rgba(46,43,110,.18);
}

/* Hover na pilha — levanta o topo */
.ti-deck:hover .ti-card:first-child .ti-card__inner {
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: 0 16px 36px rgba(46,43,110,.28), 0 0 0 2px var(--ti-gold2);
}

/* Estado de saída da carta (animação ao clicar) */
.ti-card.is-leaving .ti-card__inner {
  transform: translateX(120%) rotate(15deg) !important;
  opacity: 0;
  transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
}

/* ── Faces da carta ──────────────────────────────────── */
.ti-card__back,
.ti-card__front {
  position: absolute;
  inset: 0;
  border-radius: var(--ti-r-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.ti-card__back { background:#2e2b6e; border:none; padding:0; }
.ti-card__back-svg { width:100%; height:100%; display:block; overflow:hidden; border-radius:var(--ti-r-card); }
.ti-card__back-svg svg { width:100%; height:100%; display:block; }

.ti-card__front {
  transform: rotateY(180deg);
  background: #fff;
  border: 2px solid var(--ti-indigo3);
  display: flex;
  flex-direction: column;
}
.ti-card__img { width:100%; flex:1; object-fit:cover; object-position:top; display:block; }
.ti-card__label {
  background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(46,43,110,.92) 50%);
  padding:22px 6px 7px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  position:absolute; bottom:0; left:0; right:0;
}
.ti-card__num { font-family:'Playfair Display',serif; font-size:.62rem; color:var(--ti-gold3); opacity:.9; letter-spacing:1px; }
.ti-card__name { font-family:'Playfair Display',serif; font-size:.58rem; color:#fff; text-align:center; font-weight:700; line-height:1.2; }

/* ── COLUNA DE SELECIONADAS ──────────────────────────── */
.ti-selected-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ti-selected-hint {
  font-family: 'Playfair Display', serif;
  font-size: .82rem;
  color: var(--ti-muted);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}

/* Grade de cartas selecionadas */
.ti-selected-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: var(--card-h);
  align-content: flex-start;
}

/* Carta selecionada — menor, mostrada com frente */
.ti-selected-card {
  width: 80px;
  height: 132px;
  position: relative;
  perspective: 900px;
  flex-shrink: 0;
  animation: card-arrive .5s cubic-bezier(.175,.885,.32,1.275) both;
}

@keyframes card-arrive {
  from { opacity:0; transform:scale(.5) rotate(-10deg); }
  to   { opacity:1; transform:scale(1) rotate(0deg); }
}

.ti-selected-card__inner {
  width:100%; height:100%;
  position:relative; transform-style:preserve-3d;
  border-radius:8px;
  box-shadow:0 4px 14px rgba(46,43,110,.2);
  border: 1.5px solid var(--ti-indigo3);
  overflow: hidden;
  background: #fff;
}

.ti-selected-card__inner img {
  width:100%; height:75%;
  object-fit:cover; object-position:top; display:block;
}

.ti-selected-card__label {
  background: var(--ti-indigo);
  padding: 4px 4px 5px;
  text-align: center;
}
.ti-selected-card__num {
  font-family:'Playfair Display',serif;
  font-size:.52rem; color:var(--ti-gold2); display:block;
  line-height:1.2; letter-spacing:.5px;
}
.ti-selected-card__name {
  font-family:'Playfair Display',serif;
  font-size:.5rem; color:#fff; display:block;
  line-height:1.2; font-weight:700;
}

/* Número da posição */
.ti-selected-card__pos {
  position:absolute; top:4px; left:4px;
  width:18px; height:18px; border-radius:50%;
  background:var(--ti-red); border:1px solid var(--ti-gold2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-size:.58rem;
  color:#fff; font-weight:700; z-index:2;
}

/* Mensagem vazia */
.ti-empty-msg {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px;
  height:var(--card-h);
  width:100%; color:var(--ti-muted);
  border:2px dashed var(--ti-border);
  border-radius:var(--ti-r);
}
.ti-empty-msg span { font-size:1.8rem; opacity:.35; color:var(--ti-gold); }
.ti-empty-msg p { font-family:'IM Fell English',serif; font-style:italic; font-size:.9rem; margin:0; }

/* ── CTA ─────────────────────────────────────────────── */
.ti-cta-wrap {
  text-align:center; margin:36px 0 0; position:relative;
  animation:fade-up .6s ease;
}
.ti-cta-glow {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:320px; height:80px;
  background:radial-gradient(ellipse,rgba(46,43,110,.12),transparent 70%);
  pointer-events:none; filter:blur(20px);
}

/* ── Loading ─────────────────────────────────────────── */
.ti-loading { text-align:center; padding:80px 20px; }
.ti-loading__inner { display:inline-block; }
.ti-loading__orb {
  width:70px; height:70px; margin:0 auto 24px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--ti-indigo3),var(--ti-indigo));
  box-shadow:0 0 0 8px rgba(46,43,110,.08), 0 0 40px rgba(46,43,110,.25);
  animation:orb-pulse 2s ease-in-out infinite;
}
@keyframes orb-pulse {
  0%,100%{transform:scale(1); box-shadow:0 0 0 8px rgba(46,43,110,.08),0 0 40px rgba(46,43,110,.25);}
  50%    {transform:scale(1.1); box-shadow:0 0 0 16px rgba(46,43,110,.04),0 0 70px rgba(46,43,110,.40);}
}
.ti-loading p { font-family:'IM Fell English',serif; font-style:italic; color:var(--ti-muted); font-size:1.1rem; }

/* ── Resultado ───────────────────────────────────────── */
.ti-result { animation:fade-up .7s ease; }
.ti-result__header { text-align:center; margin-bottom:40px; }
.ti-result__header h3 {
  font-family:'Playfair Display',serif; font-size:clamp(1.3rem,3.5vw,2rem);
  color:var(--ti-indigo); margin:10px 0 8px; font-weight:900;
}
.ti-result__header p { font-family:'IM Fell English',serif; font-style:italic; color:var(--ti-muted); font-size:.95rem; margin:0; }

.ti-result__cards {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px; margin-bottom:36px;
}
.ti-result-item {
  background:#fff; border:1px solid var(--ti-border); border-radius:var(--ti-r);
  overflow:hidden; animation:fade-up .5s ease both;
  box-shadow:0 4px 16px var(--ti-shadow);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
}
.ti-result-item:hover { transform:translateY(-4px); box-shadow:0 10px 32px rgba(46,43,110,.15); }
.ti-result-item__thumb { position:relative; height:180px; overflow:hidden; background:var(--ti-bg3); }
.ti-result-item__thumb img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.ti-result-item__thumb-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(46,43,110,.7) 100%); }
.ti-result-item__pos {
  position:absolute; top:10px; left:10px; width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--ti-indigo),var(--ti-indigo3)); border:1px solid var(--ti-gold2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-size:.75rem; color:var(--ti-gold3); font-weight:700;
}
.ti-result-item__body { padding:18px 20px 20px; flex:1; }
.ti-result-item__emoji { font-size:1.6rem; margin-bottom:8px; display:block; }
.ti-result-item__titulo { font-family:'Playfair Display',serif; font-size:.95rem; color:var(--ti-indigo); font-weight:700; margin-bottom:8px; }
.ti-result-item__texto { font-size:.88rem; color:var(--ti-muted); line-height:1.7; margin:0; }
.ti-result__footer { text-align:center; padding-top:24px; border-top:1px solid var(--ti-border); }

/* ── Animações ───────────────────────────────────────── */
@keyframes fade-up { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
@keyframes shuffle-wobble {
  0%{transform:rotate(0deg);}  25%{transform:rotate(-4deg) translateX(-6px);}
  50%{transform:rotate(4deg) translateX(6px);}  75%{transform:rotate(-2deg);}
  100%{transform:rotate(0deg);}
}
.ti-card.is-shuffling .ti-card__inner { animation:shuffle-wobble .4s ease; }

/* ── Responsivo ──────────────────────────────────────── */
@media (max-width: 680px) {
  :root { --card-w:100px; --card-h:165px; }
  .ti-wrap { padding:28px 14px 40px; border-radius:14px; margin:0; }
  .ti-board { grid-template-columns:var(--card-w) 1fr; gap:20px; }
  .ti-selected-card { width:66px; height:110px; }
  .ti-result__cards { grid-template-columns:1fr; }
  .ti-result-item__thumb { height:140px; }
}
@media (max-width: 420px) {
  :root { --card-w:88px; --card-h:145px; }
  .ti-board { gap:14px; }
  .ti-selected-card { width:58px; height:96px; }
}