html{ scroll-behavior: smooth; }
.suit-section{ scroll-margin-top: 65px; }

/* Tamaño de carta adaptable (móvil -> desktop) */
:root{
  --card-w: clamp(120px, 42vw, 180px);
  --card-h: calc(var(--card-w) * 1.444); /* 180x260 ≈ 1.444 */
}

/* móvil vertical: cartas más pequeñas */
@media (max-width: 640px){
  :root{
    --card-w: clamp(96px, 30vw, 132px);
    --card-h: calc(var(--card-w) * 1.444);
  }
}

/* móvil muy pequeño */
@media (max-width: 380px){
  :root{
    --card-w: clamp(88px, 28vw, 120px);
    --card-h: calc(var(--card-w) * 1.444);
  }
}

/* móvil en horizontal: deja crecer un poco */
@media (max-width: 900px) and (orientation: landscape){
  :root{
    --card-w: clamp(110px, 18vw, 155px);
    --card-h: calc(var(--card-w) * 1.444);
  }
}
/* =========================================================
   One-card piles layout
   ========================================================= */
.piles{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 860px){
  .piles{ grid-template-columns: 1fr; }
}

.pile-col{ display:flex; flex-direction:column; gap: 8px; align-items:center; }
.pile-label{ 
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
 }

.pile{
  width: 100%;
  min-height: var(--card-h);
  border-radius: 22px;
  border: none;
  background: transparent;
  position: relative;
  padding: 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* Soft "area" feel without boxing it */
.pile::before{
  content:"";
  position:absolute;
  inset: 4px;
  border-radius: 20px;
  background: radial-gradient(600px 260px at 50% 30%, rgba(255,255,255,0.06), transparent 62%);
  opacity: 0.75;
  pointer-events:none;
}

.pile--clickable{ cursor:pointer; }
.pile--clickable:hover::before{ opacity: 1; }
.pile--clickable:hover{ background: rgba(255,255,255,0.06); }

.pile--clickable:focus-visible{ outline: none; }
.pile--clickable:focus-visible::before{
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(190,160,255,0.18);
}


.pile-stack,
.pile-stack--right{
  width: var(--card-w);
  height: var(--card-h);
  position: relative;
}

/*
  IMPORTANT:
  We use CSS variables so stack offsets and "reversed" rotation can combine
  without transform rules fighting each other.
*/
.pile-card,
.pile-card--right{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.10);

  /* transform composition */
  --dx: 0px;
  --dy: 0px;
  --rot: 0deg;
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  transform-origin: 50% 50%;
}

.pile-card.is-reversed,
.pile-card--right.is-reversed{
  --rot: 180deg;
}

/* Left pile: your original offsets, but expressed via variables */
.pile-card--offset1{ --dx: -6px; --dy: 6px; opacity: 0.85; }
.pile-card--offset2{ --dx:  6px; --dy: -4px; opacity: 0.85; }
.pile-card--top{ --dx: 0px; --dy: 0px; }

.pile-hint{ margin-top: 16px; font-size: 14px; color: var(--muted); }

.single-meaning{ margin-top: 12px; }

/* Right pile: visible stacking, still compatible with reversed rotation */
.pile-stack--right .pile-card--right:nth-child(1){ --dx: 0px;  --dy: 0px;  opacity: 1; }
.pile-stack--right .pile-card--right:nth-child(2){ --dx: 6px;  --dy: 6px;  opacity: 0.92; }
.pile-stack--right .pile-card--right:nth-child(3){ --dx: 12px; --dy: 12px; opacity: 0.88; }
.pile-stack--right .pile-card--right:nth-child(4){ --dx: 18px; --dy: 18px; opacity: 0.84; }
.pile-stack--right .pile-card--right:nth-child(n+5){ --dx: 22px; --dy: 22px; opacity: 0.80; }

/* Left pile "empty deck" look */
.pile-card.is-empty{
  filter: grayscale(1) brightness(0.7);
  opacity: 0.55;
}

/* Optional: when disabled, make the whole pile feel inactive */
.pile:disabled{
  cursor: not-allowed;
  opacity: 0.75;
}

/* ================= Fly + Flip (deck -> drawn pile) ================= */

/* Carta flotante por encima de todo */
.fly-card{
  position: fixed;
  left: 0;
  top: 0;
  width: var(--card-w);
  height: var(--card-h);
  z-index: 9999;
  pointer-events: none;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  transform: translate3d(0,0,0);
  will-change: transform;
}

/* Flip 3D (se aplica dentro de la carta flotante) */
.flip-card__inner{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:14px;
  transform-style:preserve-3d;
  transition: transform 450ms cubic-bezier(.2,.75,.1,1);
}

.flip-card.is-flipped .flip-card__inner{
  transform: rotateY(180deg);
}

.flip-card__face{
  position:absolute;
  inset:0;
  border-radius:14px;
  overflow:hidden;
  backface-visibility:hidden;
}

.flip-card__face--front{
  transform: rotateY(180deg);
}

.flip-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Reversals: solo rota la imagen frontal */
.flip-card.is-reversed .flip-card__face--front .flip-card__img{
  transform: rotate(180deg);
}

/* Bloquear clicks mientras anima */
.pile.is-busy{
  pointer-events: none;
}

/* Comentearios cartas */
.pile-meta{
  margin-top: 10px;
  text-align: center;
  max-width: 360px;
}
.pile-meta__title{
  font-weight: 800;
  letter-spacing: 0.2px;
}
.pile-meta__meaning{
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.5;
}

/* ZOOM a cartas extraidas*/
.pile-card--right{ cursor: zoom-in; }

.card-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}
.card-modal.is-hidden{ display:none; }

.card-modal__panel{
  width: min(680px, 100%);
  border-radius: 22px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--card2), var(--card));
  box-shadow: var(--shadow);
  padding: 14px;
}

.card-modal__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.card-modal__close{
  cursor:pointer;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 8px 10px;
  font-weight: 700;
}
.card-modal__close:hover{ background: rgba(255,255,255,0.10); }

.card-modal__img{
  width: 100%;
  height: auto;
  max-height: 74vh;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 16px 50px rgba(0,0,0,0.55);
  display:block;
}

.card-modal__img.is-reversed{ transform: rotate(180deg); }

/*CUSTOM SPREAD*/
.custom-grid{
  --cell-w: clamp(64px, 20vw, 100px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, var(--cell-w)));
  gap: 10px;

  width: 100%;
  max-width: calc(4 * var(--cell-w) + 3 * 10px);
  margin: 10px auto 0;
  justify-content: center;
}

/* En pantallas pequeñas, baja a 3 columnas */
@media (max-width: 420px){
  .custom-grid{
    grid-template-columns: repeat(3, minmax(0, var(--cell-w)));
    max-width: calc(3 * var(--cell-w) + 2 * 10px);
  }
}

.custom-cell{
  width: var(--cell-w);
  aspect-ratio: 7 / 12;           /* más “carta” que cuadrado */
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
}


.custom-cell.blocked{
  background: rgba(255,255,255,0.08);
  cursor: not-allowed;
  opacity: 0.7;
}

.custom-cell.selected{
  background: rgba(255,255,255,0.08);
  font-weight: 800;
}
/*---------- MINOR ARCANA ------------------*/

.logos-minor-arcana{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: 18px 0 24px;
}

.suit-logo{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 🔥 quita cualquier recuadro */
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  text-decoration: none;
}
/*
.suit-logo img{
  width: 140px;
  height: auto;
  display: block;
  transition: transform 200ms ease, filter 200ms ease;
  transform-origin: center;
}
.suit-logo:hover img{
  transform: scale(1.18);
  filter: drop-shadow(0 0 18px rgba(190,160,255,0.45));
}*/

/*
/* hover sutil (sin caja): solo “sube” el icono 
.suit-logo img{
  transition: transform 140ms ease, filter 140ms ease;
}
.suit-logo:hover img{
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
}*/

/* móvil: 2 por fila */
@media (max-width: 640px){
  .logos-minor-arcana{ flex-wrap: wrap; }
  .suit-logo{ flex: 0 0 50%; padding: 10px 0; }
}

/* ===== Suit logos: glow elegante por palo ===== */
.suit-logo{
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  /* sin cajas */
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* tamaño icono */
.suit-logo img{
  width: 200px;
  height: auto;
  display: block;
  transition: transform 240ms ease, filter 240ms ease;
}

/* Glow radial (independiente del contorno del WebP) */
.suit-logo::before{
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 999px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--glow) 65%, transparent) 0%,
    color-mix(in srgb, var(--glow) 35%, transparent) 35%,
    transparent 70%
  );
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 240ms ease, transform 240ms ease;
  z-index: 0;
}

/* Hover: activa halo + aumenta logo */
.suit-logo:hover::before{
  opacity: 0.4;
  transform: scale(1);
}

.suit-logo:hover img{
  transform: scale(1.15);
  filter:
    brightness(1.12)
    drop-shadow(0 0 10px color-mix(in srgb, var(--glow) 90%, transparent))
    drop-shadow(0 0 26px color-mix(in srgb, var(--glow) 70%, transparent));
  z-index: 1;
}

/* Colores por palo */
.suit-cups{ --glow: rgb(60,120,255); }         /* azul */
.suit-wands{ --glow: rgb(255,70,40); }         /* rojo */
.suit-pentacles{ --glow: rgb(180,140,60); }    /* dorado-tierra */
.suit-swords{ --glow: rgb(255,255,255); }      /* blanco */

/* ---------------- Custom spread panel ---------------- */
.custom-panel{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.12);
}

.custom-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}
/*
.custom-error{
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(190,160,255,0.08);
}
*/
.custom-notes{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.custom-gridhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
/* Warning bubble */
.custom-error{
  display: none;
  margin-top: 8px;
}

.warning-bubble{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 10px;

  font-size: 0.85rem;
  line-height: 1.2;

  background: #fff4e5;
  border: 1px solid #f5c07a;
  color: #8a4b00;

  position: relative;
}

/* icon */
.warning-bubble::before{
  content: "⚠";
  font-size: 0.9rem;
}

/* little triangle */
.warning-bubble::after{
  content: "";
  position: absolute;
  top: -6px;
  left: 14px;

  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #f5c07a transparent;
}

/* --- Center Tarot settings form (tarot.html) --- */

/* centra el bloque del formulario */
#settingsCard.tarot-settings{
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

/* centra el grid (el formulario) y controla su ancho */
#settingsCard.tarot-settings .form-grid{
  max-width: 420px;
  margin: 12px auto 0;
}

/* centra labels */
#settingsCard.tarot-settings .field__label{
  text-align: center;
}

/* centra el texto seleccionado del <select> (importante) */
#settingsCard.tarot-settings select.field__control{
  text-align: center;
  text-align-last: center; /* Chrome/Edge + algunos casos */
}

/* intenta centrar opciones del dropdown (no todos los navegadores lo respetan) */
#settingsCard.tarot-settings select.field__control option{
  text-align: center;
}

#settingsCard.tarot-settings h1,
#settingsCard.tarot-settings p{
  text-align: center;
}

/* Overlay “rota el móvil” solo cuando estás en lectura */
.rotate-hint{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: rgba(0,0,0,0.75);
  z-index: 99999;
}

body.is-reading.is-portrait .rotate-hint{ display:flex; }

@media (min-width: 641px){
  .rotate-hint{ display:none !important; }
}