:root {
  --fondo: #07051a;
  --fondo-2: #140c33;
  --panel: rgba(22, 14, 52, 0.78);
  --borde: rgba(217, 180, 90, 0.35);
  --oro: #d9b45a;
  --oro-claro: #f3dc9a;
  --violeta: #8b6cff;
  --texto: #ece6ff;
  --texto-tenue: #b3a9d6;
  --error: #ff9b8f;
  /* Colores de las cartas de Marsella */
  --pergamino: #f4e9cf;
  --rojo: #c8372d;
  --azul: #1f4e9c;
  --amarillo: #e8b62c;
  --tinta: #1b1712;
  --titulo: "Cinzel", "Times New Roman", serif;
  --cuerpo: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

html { background: var(--fondo); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 1.15rem;
  line-height: 1.55;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(139, 108, 255, 0.28), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(217, 180, 90, 0.12), transparent 55%),
    var(--fondo);
  background-attachment: fixed;
}

#cielo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

main {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

[hidden] { display: none !important; }

/* --- Portal -------------------------------------------------------------- */

.portal { text-align: center; margin-bottom: 28px; }

.sigilo {
  width: 104px;
  height: 104px;
  fill: none;
  stroke: var(--oro);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 12px rgba(217, 180, 90, 0.55));
  animation: girar 60s linear infinite;
}
.sigilo .fino { stroke-width: 0.8; opacity: 0.7; }
.sigilo .pupila { fill: var(--oro); animation: latir 4s ease-in-out infinite; transform-origin: 60px 60px; }

.antetitulo {
  margin: 14px 0 4px;
  font-family: var(--titulo);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oro);
}

h1 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(1.9rem, 7vw, 3.1rem);
  line-height: 1.15;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 60%, #a07c2c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(217, 180, 90, 0.25);
}

.lema {
  max-width: 34rem;
  margin: 12px auto 0;
  font-style: italic;
  color: var(--texto-tenue);
}

h2, h3, h4 { font-family: var(--titulo); font-weight: 500; color: var(--oro-claro); }
h2 { font-size: 1.25rem; margin: 0 0 12px; letter-spacing: 0.06em; }

/* --- Paneles y botones --------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 0 40px rgba(139, 108, 255, 0.12), inset 0 0 30px rgba(217, 180, 90, 0.05);
  backdrop-filter: blur(4px);
}

.pasos { margin: 0 0 8px; padding-left: 1.3rem; color: var(--texto-tenue); }
.pasos li { margin-bottom: 6px; }
.pasos li::marker { color: var(--oro); font-family: var(--titulo); }

.boton {
  display: block;
  margin: 8px auto 0;
  padding: 12px 26px;
  font-family: var(--titulo);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--fondo);
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(217, 180, 90, 0.45);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.boton:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 32px rgba(217, 180, 90, 0.7); }
.boton:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; }
.boton:disabled { opacity: 0.55; cursor: wait; }
.boton-siguiente { margin-top: 18px; }
.boton-secundario {
  color: var(--oro-claro);
  background: transparent;
  border: 1px solid var(--oro);
  box-shadow: none;
}
.boton-secundario:hover:not(:disabled) { box-shadow: 0 0 18px rgba(217, 180, 90, 0.35); }

/* --- Compra y pase ------------------------------------------------------- */

.precio { text-align: center; margin: 4px 0 6px; }
.precio strong { font-family: var(--titulo); font-size: 1.3rem; color: var(--oro-claro); }
.precio small { display: block; font-size: 0.85rem; color: var(--texto-tenue); }
.privacidad { text-align: center; font-size: 0.85rem; font-style: italic; color: var(--texto-tenue); margin: 12px 0 4px; }
.aviso { text-align: center; margin: 4px 0 10px; color: var(--texto); }
.aviso p { margin: 0 0 4px; }
.aviso strong { font-family: var(--titulo); letter-spacing: 0.12em; color: var(--oro-claro); }
.aviso small { display: block; font-size: 0.85rem; font-style: italic; color: var(--texto-tenue); }
#usar-codigo { margin-top: 10px; text-align: center; }
#usar-codigo summary { cursor: pointer; color: var(--oro-claro); font-size: 0.95rem; }
#form-codigo { margin-top: 10px; }
#codigo {
  display: block;
  width: 12rem;
  margin: 0 auto;
  padding: 10px 12px;
  font: inherit;
  text-align: center;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--texto);
  background: rgba(7, 5, 26, 0.75);
  border: 1px solid var(--borde);
  border-radius: 10px;
}
#codigo:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(217, 180, 90, 0.2); }

.error { color: var(--error); text-align: center; margin: 10px 0 0; }

/* --- Mazo que se baraja -------------------------------------------------- */

.mazo { position: relative; width: 70px; height: 116px; margin: 18px auto 10px; }
.mazo span {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  border: 1px solid var(--oro);
  background: var(--fondo-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 0L14 7L7 14L0 7Z' fill='none' stroke='%23d9b45a' stroke-opacity='.35'/%3E%3C/svg%3E");
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.mazo span:nth-child(2) { transform: translate(2px, -2px); }
.mazo span:nth-child(3) { transform: translate(4px, -4px); }
.mazo span:nth-child(4) { transform: translate(6px, -6px); }
.mazo span:nth-child(5) { transform: translate(8px, -8px); }
.barajando .mazo span:nth-child(odd) { animation: riffle-izq 0.45s ease-in-out infinite; }
.barajando .mazo span:nth-child(even) { animation: riffle-der 0.45s ease-in-out infinite; }

/* --- Formulario ---------------------------------------------------------- */

label { display: block; font-family: var(--titulo); color: var(--oro-claro); margin-bottom: 8px; }

textarea {
  width: 100%;
  resize: vertical;
  padding: 12px 14px;
  font: inherit;
  color: var(--texto);
  background: rgba(7, 5, 26, 0.75);
  border: 1px solid var(--borde);
  border-radius: 10px;
}
textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(217, 180, 90, 0.2); }
.consejo { margin: 8px 0 0; font-size: 0.9rem; font-style: italic; color: var(--texto-tenue); }
.pasos strong { color: var(--oro-claro); font-weight: 600; }

.fila-form { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.fila-form .boton { margin: 0; }
#contador { font-size: 0.85rem; color: var(--texto-tenue); }

/* --- Tiradas ------------------------------------------------------------- */

.tirada {
  padding: 18px 12px;
  margin-bottom: 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  opacity: 0.45;
  transition: opacity 0.4s, border-color 0.4s, background 0.4s;
}
.tirada.activa, .tirada.respondida { opacity: 1; }
.tirada.activa { border-color: var(--borde); background: rgba(22, 14, 52, 0.45); }
.tirada.respondida { background: rgba(14, 9, 36, 0.82); }
.tirada h3 { margin: 0 0 4px; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; }
.texto-pregunta { margin: 0 0 12px; text-align: center; font-style: italic; color: var(--texto); }
.texto-pregunta:empty { display: none; }

.cartas { display: flex; justify-content: center; gap: clamp(10px, 4vw, 26px); }

.carta { width: min(27vw, 132px); perspective: 900px; }
.carta-giro {
  position: relative;
  aspect-ratio: 6 / 11;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.carta.revelada .carta-giro { transform: rotateY(180deg); }
.consultando .carta-giro { animation: flotar 1.6s ease-in-out infinite; }
.consultando .carta:nth-child(2) .carta-giro { animation-delay: 0.2s; }
.consultando .carta:nth-child(3) .carta-giro { animation-delay: 0.4s; }

.cara {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.dorso {
  display: grid;
  place-items: center;
  border: 1px solid var(--oro);
  background:
    radial-gradient(circle at 50% 50%, rgba(139, 108, 255, 0.45), transparent 55%),
    var(--fondo-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 0L18 9L9 18L0 9Z' fill='none' stroke='%23d9b45a' stroke-opacity='.4'/%3E%3Ccircle cx='9' cy='9' r='1.2' fill='%23d9b45a' fill-opacity='.5'/%3E%3C/svg%3E");
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 0 0 4px var(--fondo-2), inset 0 0 0 5px rgba(217, 180, 90, 0.6);
}
.dorso span {
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  font-family: var(--titulo);
  font-size: clamp(0.9rem, 3.4vw, 1.2rem);
  color: var(--oro-claro);
  background: var(--fondo);
  border: 1px solid var(--oro);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(217, 180, 90, 0.5);
}

/* Cara al estilo Marsella: cartucho con el número arriba, figura, cartucho con el nombre abajo */
.frente {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 5%;
  background: var(--pergamino);
  border: 2px solid var(--tinta);
  box-shadow: 0 0 26px rgba(243, 220, 154, 0.55), inset 0 0 0 3px var(--pergamino), inset 0 0 0 4px var(--tinta);
  color: var(--tinta);
}
.cartucho {
  display: grid;
  place-items: center;
  min-height: 15%;
  padding: 2px 3px;
  font-family: var(--titulo);
  text-align: center;
  line-height: 1.1;
  border: 1px solid var(--tinta);
  background: #fbf3df;
}
.cartucho.numero { font-size: clamp(0.62rem, 2.6vw, 0.9rem); font-weight: 700; }
.cartucho.nombre { font-size: clamp(0.48rem, 2vw, 0.7rem); text-transform: uppercase; letter-spacing: 0.03em; }
.figura {
  flex: 1;
  display: grid;
  place-items: center;
  margin: 4% 0;
  font-size: clamp(1.9rem, 10vw, 3.4rem);
  font-variant-emoji: text;
  color: var(--rojo);
  border: 1px solid var(--tinta);
  background:
    linear-gradient(180deg, rgba(31, 78, 156, 0.18), transparent 45%),
    linear-gradient(0deg, rgba(232, 182, 44, 0.3), transparent 40%),
    var(--pergamino);
  text-shadow: 1px 1px 0 var(--azul);
}
/* Colores de Marsella por palo; las numerales reparten sus símbolos en filas. */
.figura[data-palo="Bastos"], .figura[data-palo="Espadas"] { color: var(--azul); text-shadow: 1px 1px 0 var(--rojo); }
.figura.numeral {
  grid-template-columns: repeat(var(--columnas), 1fr);
  align-content: space-evenly;
  padding: 4% 6%;
  font-size: clamp(1rem, 4.8vw, 1.7rem);
  line-height: 1;
  text-shadow: 0.5px 0.5px 0 var(--azul);
}
.figura.numeral span:last-child:nth-child(odd) { grid-column: 1 / -1; }

.posicion {
  margin: 8px 0 0;
  text-align: center;
  font-family: var(--titulo);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
}

/* --- Lectura ------------------------------------------------------------- */

.lectura { margin-top: 18px; animation: aparecer 0.9s ease both; }
.apertura { font-style: italic; text-align: center; color: var(--oro-claro); font-size: 1.2rem; }
.lectura-carta { margin: 14px 0; padding-left: 14px; border-left: 2px solid var(--borde); }
.lectura-carta h4 { margin: 0 0 4px; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
.lectura-carta p { margin: 0; }
.mensaje {
  margin-top: 18px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--oro);
  background: linear-gradient(135deg, rgba(139, 108, 255, 0.18), rgba(217, 180, 90, 0.1));
  box-shadow: 0 0 26px rgba(217, 180, 90, 0.18);
}
.mensaje h4 { margin: 0 0 6px; text-align: center; font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase; }
.mensaje p { margin: 0; }

/* --- Acta ---------------------------------------------------------------- */

#acta ol { columns: 2; column-gap: 24px; padding-left: 1.6rem; margin: 12px 0; font-size: 1rem; }
#acta li { break-inside: avoid; }
#acta li.sin-usar { color: var(--texto-tenue); opacity: 0.75; }
#acta li::marker { color: var(--oro); font-family: var(--titulo); font-size: 0.8rem; }
#acta summary { cursor: pointer; text-align: center; color: var(--oro-claro); font-family: var(--titulo); font-size: 0.85rem; letter-spacing: 0.06em; }
#verificacion { text-align: center; font-weight: 600; }
#verificacion.ok { color: #9be7b4; }
#verificacion.mal { color: var(--error); }

footer { margin-top: 32px; text-align: center; font-size: 0.9rem; font-style: italic; color: var(--texto-tenue); }
footer p { margin: 0 auto 8px; max-width: 34rem; }
footer .pie-lema { font-family: var(--titulo); font-style: normal; color: var(--oro-claro); letter-spacing: 0.04em; }

/* --- Animaciones --------------------------------------------------------- */

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latir { 50% { transform: scale(1.35); opacity: 0.7; } }
@keyframes flotar { 50% { transform: translateY(-6px); box-shadow: 0 0 24px rgba(139, 108, 255, 0.7); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }
@keyframes riffle-izq { 50% { transform: translate(-34px, 4px) rotate(-8deg); } }
@keyframes riffle-der { 50% { transform: translate(34px, -4px) rotate(8deg); } }

@media (max-width: 480px) {
  body { font-size: 1.08rem; }
  .panel { padding: 16px; }
  .fila-form { flex-direction: column-reverse; align-items: stretch; }
  #acta ol { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}