/* Mancia Apps — estilos autónomos (prefijo .mapp), pensados para convivir
   con cualquier tema y con los plugins tarot-apps (.tapp) y oraculo-apps
   (.oapp). Todo es fluido: no hay ni una medida fija en píxeles de escena. */

/* El width: 100 % no sobra. Si el tema mete la app dentro de un contenedor
   flex o grid, sin el la caja se mide por su contenido y las rejillas de los
   formularios la estiran por encima de la pantalla en movil. */
.mapp { width: 100%; max-width: 780px; margin: 0 auto; font-size: 1rem; }
.mapp * { box-sizing: border-box; }
.mapp [hidden] { display: none !important; }

.mapp .mapp-intro {
  margin: 0;
  font-size: clamp(.95rem, 2.7vw, 1.08rem);
  line-height: 1.45;
  max-width: 34rem;
}

.mapp .mapp-acciones { margin: 0; }

.mapp .mapp-btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: #fff;
  padding: .62rem 1.35rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #7a54d8, #5a34b8);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
  transition: transform .12s ease, filter .12s ease;
}
.mapp .mapp-btn:hover { filter: brightness(1.09); }
.mapp .mapp-btn:active { transform: translateY(1px); }
.mapp .mapp-btn:focus-visible { outline: 2px solid #ffd76b; outline-offset: 2px; }
.mapp .mapp-btn[disabled] { opacity: .55; cursor: default; filter: none; transform: none; }

/* Sin recuadro/fondo azul del navegador al pulsar las piezas interactivas */
.mapp button { -webkit-tap-highlight-color: transparent; }
.mapp button:focus { outline: none; }
.mapp button:focus-visible { outline: 2px solid #ffd76b; outline-offset: 3px; }

/* ── Cara o Cruz: mesa clara + moneda de 36 fotogramas ──────────── */
.mapp .mapp-mn {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.5rem;
  background: radial-gradient(ellipse at 50% 38%, #fff 0 44%, #eaf0f9 76%, #d7e0f1 100%);
  border: 1px solid rgba(30, 50, 100, .12);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  overflow: hidden;
}
.mapp .mapp-mn .mapp-intro { color: #33405e; }

.mapp .mapp-mn-mesa {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3.2rem; /* aire para el salto de la moneda */
}
.mapp .mapp-mn-moneda {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  width: clamp(9rem, 42vw, 14rem);
  line-height: 0;
}
/* El sprite es una rejilla 6×6 (36 fotogramas de una vuelta completa).
   Con background-size 600% cada fotograma ocupa justo el elemento y se
   elige con background-position (columna/5 y fila/5 en %). El multiply
   funde el fondo blanco del JPG con la mesa clara. */
.mapp .mapp-mn-cara {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-size: 600% 600%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  will-change: transform;
}
.mapp .mapp-mn-sombra {
  display: block;
  width: 58%;
  height: .85rem;
  margin-top: -4%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 30, 60, .3), rgba(20, 30, 60, 0) 70%);
  transition: transform .1s linear, opacity .1s linear;
}

.mapp .mapp-mn-resultado {
  margin: 0;
  min-height: 1.1em;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: .03em;
}
.mapp .mapp-mn-r-cara { color: #5e9200; animation: mapp-brota .45s ease both; }
.mapp .mapp-mn-r-cruz { color: #d3790a; animation: mapp-brota .45s ease both; }
.mapp .mapp-mn-espera {
  color: #6d7896;
  font-family: inherit;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1rem, 3.2vw, 1.15rem);
}
@keyframes mapp-brota {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}

.mapp .mapp-mn-lema {
  margin: 0;
  min-height: 1.3em;
  color: #2b3554;
  font-weight: 700;
  font-size: clamp(1rem, 3vw, 1.15rem);
}
.mapp .mapp-mn-frase {
  margin: 0;
  min-height: 2.6em;
  max-width: 32rem;
  color: #47506e;
  font-style: italic;
  font-size: clamp(.92rem, 2.6vw, 1.02rem);
  line-height: 1.4;
}

.mapp .mapp-mn-marcador {
  margin: 0;
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: .92rem;
  color: #43507a;
}
.mapp .mapp-mn-marcador b { font-weight: 700; }
.mapp .mapp-mn-mc b { color: #5e9200; }
.mapp .mapp-mn-mx b { color: #d3790a; }

/* ── Bola de Cristal: pregunta → respuesta dentro de la esfera ──── */
.mapp .mapp-bo {
  position: relative;
  border-radius: 12px;
  padding: 1.4rem 1.1rem 1.6rem;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 78% 12%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 88% 44%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 26% 66%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 62% 82%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 50% 20%, #26408f 0%, #0e1547 46%, #05061a 100%);
  color: #e9f0ff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}
.mapp .mapp-bo .mapp-intro { color: #d5e2ff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

.mapp .mapp-bo-f1, .mapp .mapp-bo-f2 { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .8rem; }

.mapp .mapp-bo-form {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  width: 100%;
  max-width: 32rem;
}
.mapp .mapp-bo-input {
  flex: 1 1 15rem;
  min-width: 0;
  padding: .6rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .42);
  color: #fff;
  font: inherit;
}
.mapp .mapp-bo-input::placeholder { color: rgba(255, 255, 255, .65); }
.mapp .mapp-bo-input:focus-visible { outline: 2px solid #6fe0ff; outline-offset: 2px; }

.mapp .mapp-bo-err {
  margin: 0;
  background: rgba(150, 10, 10, .82);
  color: #fff;
  font-weight: 700;
  padding: .5rem .9rem;
  border-radius: 8px;
  max-width: 32rem;
}
.mapp .mapp-bo-pregunta {
  margin: 0;
  font-style: italic;
  font-size: clamp(1rem, 2.7vw, 1.2rem);
  background: rgba(0, 0, 0, .42);
  padding: .45rem 1rem;
  border-radius: 8px;
  max-width: 92%;
}

.mapp .mapp-bo-conjunto { display: flex; flex-direction: column; align-items: center; width: 100%; }

.mapp .mapp-bo-bola {
  position: relative;
  width: min(64vw, 16.5rem);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: #04060f;
  overflow: hidden;
  box-shadow: 0 0 32px 6px rgba(0, 140, 255, .32), inset 0 0 34px rgba(0, 0, 0, .55);
  transition: box-shadow .5s ease, transform .3s ease;
}
.mapp .mapp-bo-esfera {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-size: 114%;      /* leve zoom: la esfera llena el círculo */
  background-position: 50% 40%;
  background-repeat: no-repeat;
}
/* Reflejo de cristal + sombra baja (esta última tapa la marca de agua
   del GIF antiguo, que llevaba el dominio de la marca anterior). */
.mapp .mapp-bo-brillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .55) 0 4%, rgba(255, 255, 255, .16) 11%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(to top, rgba(3, 5, 18, .97) 0 14%, rgba(3, 5, 18, .55) 22%, rgba(3, 5, 18, 0) 34%);
  pointer-events: none;
}
.mapp .mapp-bo-respuesta {
  position: absolute;
  inset: 11%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .4rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 4, 14, .74) 0 58%, rgba(2, 4, 14, 0) 80%);
  color: #fff;
  font-weight: 800;
  font-size: clamp(1rem, 4.2vw, 1.5rem);
  line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .85);
  opacity: 0;
  transition: opacity .5s ease;
}
.mapp .mapp-bo-visible .mapp-bo-respuesta { opacity: 1; animation: mapp-emerge .7s ease both; }
@keyframes mapp-emerge {
  from { opacity: 0; transform: scale(.72); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* La bola late mientras «se aclara» */
.mapp .mapp-bo-pensando { animation: mapp-late 1.1s ease-in-out infinite; }
@keyframes mapp-late {
  0%, 100% { box-shadow: 0 0 26px 4px rgba(0, 140, 255, .3), inset 0 0 34px rgba(0, 0, 0, .55); }
  50%      { box-shadow: 0 0 52px 14px rgba(90, 200, 255, .6), inset 0 0 34px rgba(0, 0, 0, .55); }
}
/* Color del halo según el tono de la respuesta */
.mapp .mapp-bo-si  { box-shadow: 0 0 44px 10px rgba(60, 220, 120, .5), inset 0 0 34px rgba(0, 0, 0, .55); }
.mapp .mapp-bo-no  { box-shadow: 0 0 44px 10px rgba(255, 90, 90, .48), inset 0 0 34px rgba(0, 0, 0, .55); }
.mapp .mapp-bo-duda { box-shadow: 0 0 44px 10px rgba(255, 200, 80, .48), inset 0 0 34px rgba(0, 0, 0, .55); }

.mapp .mapp-bo-base {
  display: block;
  width: 74%;
  max-width: 13rem;
  margin-top: -3%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
}
.mapp .mapp-bo-estado {
  margin: 0;
  min-height: 1.3em;
  font-size: .95rem;
  font-style: italic;
  color: #b9c9f0;
}

/* ── Cartas Zener: 25 cartas, adivina el símbolo ────────────────── */
.mapp .mapp-ze {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background: radial-gradient(circle at 50% 0%, #2c3061 0%, #191c3a 55%, #0b0d1d 100%);
  color: #ecebff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.mapp .mapp-ze .mapp-intro { color: #d0d3f7; }
.mapp .mapp-ze-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mapp .mapp-ze-azar { margin: 0; font-size: .84rem; font-style: italic; color: #969cd2; }
.mapp .mapp-ze-f1, .mapp .mapp-ze-f2, .mapp .mapp-ze-f3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}

.mapp .mapp-ze-marcador {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.6rem;
  justify-content: center;
  font-size: .9rem;
  color: #b6bbe9;
}
.mapp .mapp-ze-marcador b { color: #fff; font-variant-numeric: tabular-nums; }

/* Tira de 25 marcas: de un vistazo se ve cómo va el test */
.mapp .mapp-ze-tira { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 24rem; }
.mapp .mapp-ze-marca { width: .68rem; height: .68rem; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.mapp .mapp-ze-marca-ok { background: #3ec95f; }
.mapp .mapp-ze-marca-no { background: #c9445a; }

.mapp .mapp-ze-carta {
  position: relative;
  width: clamp(7rem, 30vw, 9.5rem);
  aspect-ratio: 231 / 372;   /* la proporción de las cartas del legacy */
  border-radius: 12px;
  border: 3px solid #14141c;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mapp .mapp-ze-dorso {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 11vw, 4.2rem);
  color: #14141c;
  line-height: 1;
}
.mapp .mapp-ze-simbolo { width: 68%; height: auto; }
.mapp .mapp-ze-carta-gira { animation: mapp-ze-flip .45s ease; }
@keyframes mapp-ze-flip {
  0%   { transform: rotateY(0); }
  50%  { transform: rotateY(90deg); }
  100% { transform: rotateY(0); }
}

.mapp .mapp-ze-veredicto {
  margin: 0;
  min-height: 1.4em;
  font-weight: 800;
  letter-spacing: .1em;
  font-size: 1rem;
}
.mapp .mapp-ze-ok { color: #4fdc72; }
.mapp .mapp-ze-no { color: #ff7a8c; }
.mapp .mapp-ze-pregunta { margin: 0; color: #dcdcff; font-size: 1rem; }

.mapp .mapp-ze-opciones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.mapp .mapp-ze-op {
  width: clamp(3.1rem, 12vw, 4.1rem);
  padding: .35rem .25rem .3rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mapp .mapp-ze-op svg { width: 100%; aspect-ratio: 1; }
.mapp .mapp-ze-op span { font-size: .62rem; color: #333; }
.mapp .mapp-ze-op:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .4); }
.mapp .mapp-ze-op[disabled] { opacity: .45; cursor: default; transform: none; box-shadow: none; }

.mapp .mapp-ze-rotulo { margin: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: #969cd2; }
.mapp .mapp-ze-nivel {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 7vw, 2.7rem);
  line-height: 1.1;
  background: linear-gradient(90deg, #ffd76b, #ff8ad0, #7ee7ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mapp .mapp-ze-datos {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 24rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: .4rem 1.2rem;
}
.mapp .mapp-ze-datos li {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  font-size: .9rem;
}
.mapp .mapp-ze-datos span { color: #a5aade; }
.mapp .mapp-ze-datos b { font-variant-numeric: tabular-nums; }
.mapp .mapp-ze-mensaje { margin: 0; max-width: 34rem; color: #e3e3ff; font-size: .95rem; line-height: 1.5; }

/* ── Dadomancia: tres dados al círculo del tapete ───────────────── */
.mapp .mapp-da {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background: radial-gradient(ellipse at 50% 30%, #2f9160 0%, #17643e 55%, #0d3f28 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .35);
  color: #f1fff7;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.mapp .mapp-da .mapp-intro { color: #d9f5e6; }

.mapp .mapp-da-mesa { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.mapp .mapp-da-vaso {
  order: -1;                /* el cubilete, encima del círculo */
  width: clamp(3.4rem, 14vw, 4.6rem);
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 90%;
}
.mapp .mapp-da-vaso img { width: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.mapp .mapp-da-agitando { animation: mapp-da-agita .28s ease-in-out infinite alternate; }
@keyframes mapp-da-agita { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }

/* El círculo de la mesa donde deben caer los dados (en escorzo) */
.mapp .mapp-da-circulo {
  width: min(94%, 22rem);
  aspect-ratio: 1.75;
  border: 3px dashed rgba(255, 255, 255, .4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7%;
}
.mapp .mapp-da-dado {
  width: clamp(2.5rem, 11vw, 3.5rem);
  aspect-ratio: 1;
  border-radius: 18%;
  background: linear-gradient(150deg, #fff, #e2e2e6 58%, #bcbcc4);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .45), inset 0 -3px 6px rgba(0, 0, 0, .16);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  opacity: 0;
  transition: opacity .25s ease;
}
.mapp .mapp-da-tirado .mapp-da-dado { opacity: 1; }
/* El punto se mide contra SU casilla (un tercio del dado), nunca en % del
   dado: un padding en % se resolvería contra el ancho del círculo y dejaría
   la caja a cero. El hueco alrededor sale solo al centrarlo en la casilla. */
.mapp .mapp-da-dado .p {
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #21242c;
  opacity: 0;
  place-self: center;
}
/* Caras del dado: qué puntos se encienden en cada valor */
.mapp .mapp-da-dado[data-v="1"] .p5,
.mapp .mapp-da-dado[data-v="2"] .p1, .mapp .mapp-da-dado[data-v="2"] .p9,
.mapp .mapp-da-dado[data-v="3"] .p1, .mapp .mapp-da-dado[data-v="3"] .p5, .mapp .mapp-da-dado[data-v="3"] .p9,
.mapp .mapp-da-dado[data-v="4"] .p1, .mapp .mapp-da-dado[data-v="4"] .p3, .mapp .mapp-da-dado[data-v="4"] .p7, .mapp .mapp-da-dado[data-v="4"] .p9,
.mapp .mapp-da-dado[data-v="5"] .p1, .mapp .mapp-da-dado[data-v="5"] .p3, .mapp .mapp-da-dado[data-v="5"] .p5, .mapp .mapp-da-dado[data-v="5"] .p7, .mapp .mapp-da-dado[data-v="5"] .p9,
.mapp .mapp-da-dado[data-v="6"] .p1, .mapp .mapp-da-dado[data-v="6"] .p3, .mapp .mapp-da-dado[data-v="6"] .p4,
.mapp .mapp-da-dado[data-v="6"] .p6, .mapp .mapp-da-dado[data-v="6"] .p7, .mapp .mapp-da-dado[data-v="6"] .p9 { opacity: 1; }

.mapp .mapp-da-rodando .mapp-da-dado { animation: mapp-da-tumbo .34s linear infinite; }
.mapp .mapp-da-rodando .mapp-da-dado:nth-child(2) { animation-delay: .11s; }
.mapp .mapp-da-rodando .mapp-da-dado:nth-child(3) { animation-delay: .22s; }
@keyframes mapp-da-tumbo {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(-38%) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

.mapp .mapp-da-lectura {
  width: 100%;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .36);
  animation: mapp-brota .4s ease both;
}
.mapp .mapp-da-suma { margin: 0; font-size: .92rem; color: #cdeedd; }
.mapp .mapp-da-total { font-size: 1.5rem; color: #ffe27a; font-variant-numeric: tabular-nums; }
.mapp .mapp-da-titulo { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.2rem, 4.5vw, 1.6rem); color: #fff; }
.mapp .mapp-da-texto { margin: 0; line-height: 1.5; color: #eafff3; }
.mapp .mapp-da-sino { margin: 0; font-size: .92rem; color: #cdeedd; }
.mapp .mapp-da-resp { font-size: 1.3rem; letter-spacing: .08em; }
.mapp .mapp-da-r-si { color: #85ffa6; }
.mapp .mapp-da-r-no { color: #ff9aa6; }

/* ── Dominomancia: tres fichas sobre el tapete ──────────────────── */
.mapp .mapp-do {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background: radial-gradient(ellipse at 50% 25%, #2b6f8f 0%, #17475f 55%, #0b2635 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .35);
  color: #eef9ff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.mapp .mapp-do .mapp-intro { color: #d3ecf7; }

.mapp .mapp-do-mesa {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  min-height: 3rem;
  align-items: center;
}
.mapp .mapp-do-ficha {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  width: clamp(6rem, 27vw, 9.5rem);
  border-radius: 10px;
  transition: transform .15s ease, filter .25s ease;
  animation: mapp-do-cae .45s ease both;
}
.mapp .mapp-do-ficha img { width: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.mapp .mapp-do-ficha:nth-child(2) { animation-delay: .12s; }
.mapp .mapp-do-ficha:nth-child(3) { animation-delay: .24s; }
.mapp .mapp-do-ficha:hover { transform: translateY(-4px); }
/* la que señala el oráculo (el legacy la teñía con hue-rotate) */
.mapp .mapp-do-elegida { filter: hue-rotate(70deg) saturate(1.3) brightness(1.12); }
.mapp .mapp-do-activa { outline: 2px solid #ffd76b; outline-offset: 4px; border-radius: 10px; }
@keyframes mapp-do-cae {
  from { opacity: 0; transform: translateY(-38px) rotate(-8deg); }
  to   { opacity: 1; transform: none; }
}
.mapp .mapp-do-estado { margin: 0; min-height: 1.3em; font-style: italic; color: #b8dcec; font-size: .95rem; }

.mapp .mapp-do-lectura {
  width: 100%;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .34);
  animation: mapp-brota .4s ease both;
}
.mapp .mapp-do-veredicto {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  letter-spacing: .01em;
}
.mapp .mapp-do-v-si   { color: #7dffa6; }
.mapp .mapp-do-v-no   { color: #ff9aa6; }
.mapp .mapp-do-v-casi-si { color: #d7ffbe; }
.mapp .mapp-do-v-casi-no { color: #ffd0b0; }
.mapp .mapp-do-rotulo { margin: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: #9fc9dc; }
.mapp .mapp-do-titulo { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.2rem, 4.5vw, 1.6rem); color: #fff; }
.mapp .mapp-do-texto { margin: 0; line-height: 1.5; color: #eaf7ff; }
.mapp .mapp-do-pista { margin: 0; font-size: .82rem; color: #9fc9dc; font-style: italic; }

/* ── Tarot de los Números: tragaperras de una rueda ─────────────── */
.mapp .mapp-nu {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background: radial-gradient(ellipse at 50% 20%, #4a2b6b 0%, #2a1745 55%, #120a22 100%);
  color: #f3ecff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.mapp .mapp-nu .mapp-intro { color: #ded1f7; }

.mapp .mapp-nu-maquina {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #d9d9e2, #9a9aa8 55%, #6d6d79);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .6);
}
/* Las cifras del legacy son metálicas: unas casi negras (1, 2) y otras
   plateadas (0, 3, 4), así que la ventana va en un tono medio para que las
   diez se lean, con una sombra que las despega del fondo. */
.mapp .mapp-nu-ventana {
  width: clamp(5rem, 22vw, 7rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(180deg, #b9bdcc, #8f94a8 52%, #676c80);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .5), inset 0 -3px 10px rgba(0, 0, 0, .35), 0 0 0 3px #55555f;
}
.mapp .mapp-nu-rodillo { display: block; will-change: transform; }
.mapp .mapp-nu-cifra { display: block; width: 100%; aspect-ratio: 1; }
.mapp .mapp-nu-cifra img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .55)) drop-shadow(0 -1px 2px rgba(0, 0, 0, .45));
}

/* La palanca de la tragaperras */
.mapp .mapp-nu-palanca {
  width: .55rem;
  height: clamp(3.4rem, 13vw, 4.6rem);
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c7c8a, #d7d7e2 45%, #5f5f6b);
  cursor: pointer;
  position: relative;
  transform-origin: 50% 100%;
  transition: transform .18s ease;
}
.mapp .mapp-nu-bola {
  position: absolute;
  top: -.55rem;
  left: 50%;
  translate: -50% 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8f8f, #c01f1f 60%, #7d0e0e);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}
.mapp .mapp-nu-tirada { transform: rotate(28deg); }

.mapp .mapp-nu-lectura {
  width: 100%;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .32);
  animation: mapp-brota .4s ease both;
}
.mapp .mapp-nu-titulo { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.3rem, 5vw, 1.8rem); color: #fff; }
.mapp .mapp-nu-clave { margin: 0; font-size: .84rem; text-transform: uppercase; letter-spacing: .1em; color: #c7b0ff; }
.mapp .mapp-nu-texto { margin: 0; line-height: 1.55; color: #f0e9ff; }

/* ── Péndulo online: cuatro movimientos en 3D ───────────────────── */
.mapp .mapp-pe {
  --mapp-pe-peso: clamp(1.5rem, 6vw, 2.2rem);   /* ancho del peso y del brazo */
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background:
    radial-gradient(1px 1px at 14% 16%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 84% 24%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 66% 72%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse at 50% 12%, #2a2f6d 0%, #14173c 48%, #070812 100%);
  color: #eceaff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}
.mapp .mapp-pe .mapp-intro { color: #cfd0f2; }

/* La escena tiene una altura fija en proporción para que el peso nunca
   se salga por abajo, sea cual sea el movimiento. */
.mapp .mapp-pe-escena {
  position: relative;
  width: min(100%, 26rem);
  aspect-ratio: 1 / 1.15;
  display: flex;
  justify-content: center;
}
.mapp .mapp-pe-mano-arriba {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -46% 0;
  width: 42%;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55));
}
.mapp .mapp-pe-mano-abajo {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -52% 0;
  width: 40%;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55));
  opacity: .95;
}

/* El punto del que cuelga la cuerda: bajo los dedos de la mano cerrada */
.mapp .mapp-pe-anclaje {
  position: absolute;
  top: 16%;
  left: 50%;
  translate: -50% 0;
  width: 0;
  height: 0;
  perspective: 640px;
}
.mapp .mapp-pe-eje, .mapp .mapp-pe-brazo { transform-style: preserve-3d; }
/* El brazo lleva ANCHO PROPIO a propósito: cuelga de un anclaje de 0×0, así
   que si dependiera del tamaño natural del peso, cualquier reset con
   «img { max-width: 100% }» lo resolvería contra 0 y el peso desaparecería
   (pasaba al publicar la vista previa, donde la página va envuelta en otro
   esqueleto). La cuerda no se veía afectada porque su ancho es explícito. */
.mapp .mapp-pe-brazo {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mapp-pe-peso);
  transform-origin: 50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  translate: -50% 0;
}
.mapp .mapp-pe-eje { transform-origin: 50% 0; }
.mapp .mapp-pe-cuerda {
  display: block;
  width: 3px;
  height: clamp(6rem, 26vw, 9.5rem);
  background: linear-gradient(180deg, #d9c07a, #a37f2c 45%, #d9c07a);
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(0, 0, 0, .6);
}
.mapp .mapp-pe-peso {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-top: -2px;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .65));
}

/* Los cuatro movimientos: el brazo gira en Z (izquierda-derecha) y el eje
   en X (adelante-atrás); combinando ambos con un cuarto de periodo de
   desfase, el peso describe un círculo en un sentido o en el otro. */
@keyframes mapp-pe-z { 0%, 100% { transform: rotateZ(-17deg); } 50% { transform: rotateZ(17deg); } }
@keyframes mapp-pe-x { 0%, 100% { transform: rotateX(20deg); } 50% { transform: rotateX(-20deg); } }

.mapp .mapp-pe-izqder .mapp-pe-brazo { animation: mapp-pe-z 1.5s ease-in-out infinite; }
.mapp .mapp-pe-adelante .mapp-pe-eje { animation: mapp-pe-x 1.5s ease-in-out infinite; }
/* Cuál de los dos ejes va un cuarto de periodo por delante decide el sentido
   del giro; está comprobado midiendo el recorrido del peso en pantalla. */
.mapp .mapp-pe-horario .mapp-pe-brazo { animation: mapp-pe-z 1.5s linear infinite; animation-delay: -.375s; }
.mapp .mapp-pe-horario .mapp-pe-eje { animation: mapp-pe-x 1.5s linear infinite; }
.mapp .mapp-pe-antihorario .mapp-pe-brazo { animation: mapp-pe-z 1.5s linear infinite; }
.mapp .mapp-pe-antihorario .mapp-pe-eje { animation: mapp-pe-x 1.5s linear infinite; animation-delay: -.375s; }

.mapp .mapp-pe-estado { margin: 0; min-height: 1.3em; font-style: italic; color: #b6b6e4; font-size: .95rem; }

.mapp .mapp-pe-lectura {
  width: 100%;
  max-width: 34rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .36);
  animation: mapp-brota .4s ease both;
}
.mapp .mapp-pe-rotulo { margin: 0 0 .3rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #a3a3d8; }
.mapp .mapp-pe-texto { margin: 0; font-size: clamp(1rem, 3.2vw, 1.15rem); line-height: 1.5; font-weight: 600; }
.mapp .mapp-pe-v-si { color: #85ffa6; }
.mapp .mapp-pe-v-no { color: #ff9aa6; }

/* ── Móvil ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .mapp .mapp-mn { padding: 1rem .8rem 1.2rem; }
  .mapp .mapp-mn-mesa { padding-top: 2.4rem; }
  .mapp .mapp-bo { padding: 1.1rem .8rem 1.3rem; }
  .mapp .mapp-bo-bola { width: min(78vw, 15rem); }
  .mapp .mapp-bo-form { max-width: 100%; }
  .mapp .mapp-ze, .mapp .mapp-da, .mapp .mapp-do, .mapp .mapp-nu { padding: 1.1rem .7rem 1.3rem; }
  .mapp .mapp-ze-opciones { gap: .35rem; }
  .mapp .mapp-ze-marca { width: .58rem; height: .58rem; }
  .mapp .mapp-da-circulo { width: 100%; aspect-ratio: 1.9; }
  .mapp .mapp-do-mesa { gap: .45rem; }
  .mapp .mapp-do-ficha { width: clamp(5rem, 30vw, 7rem); }
}

/* Menos animación para quien la pide: se quita lo decorativo (los bucles y
   las entradas), pero NO el giro de los dados ni el meneo del cubilete —
   ahí el movimiento ES la mancia. Se suavizan redefiniendo sus keyframes. */
@media (prefers-reduced-motion: reduce) {
  .mapp .mapp-bo-pensando { animation: none; }
  .mapp .mapp-bo-visible .mapp-bo-respuesta,
  .mapp .mapp-da-lectura, .mapp .mapp-do-lectura, .mapp .mapp-nu-lectura,
  .mapp .mapp-do-ficha,
  .mapp .mapp-ze-carta-gira,
  .mapp .mapp-mn-r-cara, .mapp .mapp-mn-r-cruz { animation: none; }

  @keyframes mapp-da-tumbo {
    0%, 100% { transform: none; }
    50%      { transform: rotate(14deg); }
  }
  @keyframes mapp-da-agita {
    from { transform: rotate(-6deg); }
    to   { transform: rotate(6deg); }
  }
  /* El péndulo tampoco se para: se reduce la amplitud a la mitad */
  @keyframes mapp-pe-z { 0%, 100% { transform: rotateZ(-8deg); } 50% { transform: rotateZ(8deg); } }
  @keyframes mapp-pe-x { 0%, 100% { transform: rotateX(10deg); } 50% { transform: rotateX(-10deg); } }
  .mapp .mapp-pe-lectura { animation: none; }
}