/**

 * La Lectura Oracular — mobile: mapa arriba + rueda concéntrica abajo.

 */

:root {
  /* Paridad panel ↔ mapa y mapa ↔ rueda (margin-bottom + flex gap) */
  --tirada-stack-gap: 0.5rem;
  --tirada-instruction-panel-gap: 0.7rem;
  --tirada-map-fan-gap: calc(var(--tirada-instruction-panel-gap) + var(--tirada-stack-gap));
}



/* ---- Dock (sin panel — el círculo usa todo el ancho) ---- */

.tirada-mobile-dock {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  flex-shrink: 0;

  position: relative;

  z-index: 1;

  padding: 0 0.15rem calc(0.2rem + env(safe-area-inset-bottom, 0px));

  background: transparent;

}



.tirada-mobile-dock.hidden {

  display: none;

}



/* Panel de instrucción — encima del mapa en mobile picking */
.tirada-mobile-instruction-panel {
  width: min(92%, 22rem);
  margin: 0 auto var(--tirada-instruction-panel-gap, 0.7rem);
  padding: 0.45rem 0.7rem 0.42rem;
  border-radius: 0.45rem;
  background: rgba(12, 36, 28, 0.94);
  border: 1px solid rgba(197, 160, 89, 0.58);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 248, 238, 0.08);
  backdrop-filter: blur(4px);
  flex-shrink: 0;
  text-align: center;
  overflow: visible;
}

.tirada-mobile-instruction-panel.hidden {
  display: none;
}

.tirada-mobile-progress {
  font-family: var(--font-ui);
  font-size: clamp(0.56rem, 1.6vw, 0.64rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8c878;
  margin: 0 0 0.12rem;
  text-align: center;
  line-height: 1.25;
}

.tirada-mobile-hint {
  font-family: var(--font-display);
  font-size: clamp(0.74rem, 2.6vw, 0.88rem);
  font-weight: 500;
  line-height: 1.2;
  color: #fff8ee;
  margin: 0;
  text-align: center;
  text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.is-tirada-one-screen .tirada-mobile-instruction-panel {
  margin-top: 0;
  margin-bottom: var(--tirada-instruction-panel-gap, 0.7rem);
  padding: 0.42rem 0.68rem 0.38rem;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}

body.is-tirada-one-screen .tirada-mobile-progress {
  margin-bottom: 0.06rem;
}



.tirada-mobile-remaining {

  font-family: var(--font-ui);

  font-size: 0.58rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--carto-micro);

  margin: 0.12rem 0 0;

  text-align: center;

  flex-shrink: 0;

}



body.is-tirada-one-screen .tirada-mobile-remaining {

  display: none;

}



/* ---- Rueda: corona de 22 cartas, base hacia el centro ---- */

.tirada-mobile-fan {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  flex: 0 0 auto;

  min-height: 0;

  overflow: visible;

  padding: 0;

  margin: 0;

}



.tirada-mobile-fan-wheel {

  display: flex;

  justify-content: center;

  width: 100%;

  padding: 0;

  overflow: visible;

}



.tirada-mobile-fan-wheel-stage {

  position: relative;

  --tirada-wheel-stage-scale: 1;

  width: calc(var(--tirada-wheel-size, min(96vw, 100%)) * var(--tirada-wheel-stage-scale));

  height: calc(var(--tirada-wheel-size, min(96vw, 100%)) * var(--tirada-wheel-stage-scale));

  margin: 0 auto;

  flex-shrink: 0;

  overflow: visible;

  padding: 0;

}



.tirada-mobile-fan-ring {

  position: absolute;

  top: 50%;

  left: 50%;

  width: calc(100% / var(--tirada-wheel-stage-scale, 1));

  height: calc(100% / var(--tirada-wheel-stage-scale, 1));

  transform: translate(-50%, -50%);

  --fan-n: 22;

  /* Radio proporcional al tamaño lógico (ratios ajustados en JS por viewport) */
  --card-w: calc(var(--tirada-wheel-size, min(96vw, 100%)) * var(--tirada-card-w-ratio, 0.175));

  --ring-r: calc(var(--tirada-wheel-size, min(96vw, 100%)) * var(--tirada-ring-r-ratio, 0.305));

  pointer-events: none;

}



.tirada-mobile-fan-card {

  position: absolute;

  left: 50%;

  top: 50%;

  width: max(var(--card-w, 3.1rem), 49px);

  height: max(calc(var(--card-w, 3.1rem) * 1.58), 49px);

  min-width: 49px;

  min-height: 49px;

  box-sizing: border-box;

  padding: 0;

  border: 0;

  background: transparent;

  border-radius: 0.35rem;

  cursor: pointer;

  touch-action: manipulation;

  pointer-events: auto;

  display: flex;

  align-items: center;

  justify-content: center;

  transform-origin: center center;

  z-index: calc(var(--fan-i, 0) + 1);

  transform:

    translate(-50%, -50%)

    rotate(calc((var(--fan-i) / var(--fan-n)) * 360deg))

    translateY(calc(-1 * var(--ring-r)));

  transition:

    transform 420ms var(--ease-reveal),

    opacity 380ms var(--ease-velvet),

    filter var(--duration-base) var(--ease-velvet);

}



/* Carta del ápice (12h, deck-index 0) — encima de todo el anillo */

.tirada-mobile-fan-card[data-deck-index="0"] {

  z-index: calc(var(--fan-n, 22) + 10);

}



.tirada-mobile-fan-card img {

  display: block;

  width: var(--card-w, 3.1rem);

  height: calc(var(--card-w, 3.1rem) * 1.58);

  flex-shrink: 0;

  object-fit: contain;

  border-radius: 0.34rem;

  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.38);

}



.tirada-mobile-fan-card:active:not(:disabled) {

  filter: brightness(0.92) saturate(1.05);

}



.tirada-mobile-fan-card.is-leaving-circle {

  opacity: 0;

  transform:

    translate(-50%, -50%)

    rotate(calc((var(--fan-i) / var(--fan-n)) * 360deg))

    translateY(calc(-1 * var(--ring-r)))

    scale(0.35);

  pointer-events: none;

}



.tirada-mobile-fan-card:focus-visible {

  outline: 2px solid var(--reino-oro);

  outline-offset: 3px;

}



body.is-tirada-one-screen .tirada-mobile-dock {

  flex: 1 1 auto;

  min-height: 0;

  justify-content: flex-start;

  gap: var(--tirada-dock-gap, 0.35rem);

  overflow: visible;

  padding-bottom: max(0.1rem, env(safe-area-inset-bottom, 0px));

}



body.is-tirada-one-screen .tirada-mobile-fan {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  justify-content: center;
  align-items: center;
  align-self: center;
  overflow: visible;
  padding: 0;
  margin: 0;
}

body.is-tirada-one-screen .tirada-mobile-fan-wheel {
  flex-shrink: 0;
}

body.is-tirada-one-screen .tirada-mobile-fan-wheel-stage {
  width: calc(var(--tirada-wheel-size, min(96vw, 100%)) * var(--tirada-wheel-stage-scale, 1));
  height: calc(
    2 *
      (
        var(--tirada-wheel-size, min(96vw, 100%)) * var(--tirada-ring-r-ratio, 0.305) +
          var(--tirada-wheel-size, min(96vw, 100%)) * var(--tirada-card-w-ratio, 0.175) * 0.79
      )
  );
}



@media (max-width: 380px) {

  body:not(.is-tirada-one-screen) .tirada-mobile-fan-ring {

    --card-w: calc(var(--tirada-wheel-size, 14rem) * 0.17);

    --ring-r: calc(var(--tirada-wheel-size, 14rem) * 0.3);

  }

}



/* ---- Vuelo: círculo → mapa (encima del mapa) ---- */

.tirada-mobile-fly-overlay {

  position: fixed;

  inset: 0;

  z-index: 280;

  pointer-events: none;

}



.tirada-mobile-fly-card {

  position: absolute;

  top: 0;

  left: 0;

  will-change: transform, width, height;

  transform-origin: center center;

}



.tirada-mobile-fly-card-inner {

  position: relative;

  width: 100%;

  height: 100%;

  transform-style: preserve-3d;

  transition: transform 780ms var(--ease-reveal);

}



.tirada-mobile-fly-card-inner.is-flipped {

  transform: rotateY(180deg);

}



.tirada-mobile-fly-card .tirada-fly-back,

.tirada-mobile-fly-card .tirada-fly-face {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  border-radius: 0.4rem;

  backface-visibility: hidden;

  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));

}



.tirada-mobile-fly-card .tirada-fly-face {

  transform: rotateY(180deg);

}



@media (prefers-reduced-motion: reduce) {

  .tirada-mobile-fan-card {

    transition: none;

  }



  .tirada-mobile-fly-card-inner {

    transition: none;

  }

}



/* ---- Mobile: sin rollover (:hover) — touch no usa mouse ---- */
body[data-surface="mobile"] .tirada-map-teaser:hover .tirada-map-teaser-img,
body[data-surface="mobile"] .tirada-map-teaser:focus-visible .tirada-map-teaser-img {
  transform: none;
}

body[data-surface="mobile"] .tirada-station-help:hover,
body[data-surface="mobile"] .tirada-station-help:hover:focus-visible {
  z-index: 1;
  transform: translate(calc(-50% + 1rem), calc(-50% - 1rem));
  border-color: rgba(197, 160, 89, 0.72);
  background: rgba(10, 32, 26, 0.94);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 248, 238, 0.12);
}

body[data-surface="mobile"] .tirada-station-help:hover .tirada-station-help-tooltip {
  opacity: 0;
  visibility: hidden;
}

body[data-surface="mobile"] .tirada-station.is-revealed .tirada-mini-card:hover {
  transform: none;
}

body[data-surface="mobile"] .tirada-deck-card:hover:not(:disabled) {
  transform: none;
  z-index: auto;
}

body[data-surface="mobile"]
  .tirada-deck-group.tirada-deck--on-map
  .tirada-deck-layer.tirada-deck--fan
  .tirada-deck-card:hover:not(:disabled) {
  transform: rotate(calc((var(--fan-i) - (var(--fan-n) - 1) / 2) * var(--fan-spread, 7.5deg)));
  z-index: calc(var(--fan-i) + 1);
}

body[data-surface="mobile"]
  .tirada-deck-group.tirada-deck--on-map
  .tirada-deck-card:hover:not(:disabled)
  .tirada-deck-card-inner
  img {
  filter: none;
}

body[data-surface="mobile"] .tirada-deck--fan .tirada-deck-card:hover:not(:disabled) {
  transform: rotate(calc((var(--fan-i) - (var(--fan-n) - 1) / 2) * 4deg));
  z-index: calc(var(--fan-i) + 1);
}

body[data-surface="mobile"] .tirada-zoom-close:hover {
  transform: none;
  filter: none;
}

body[data-surface="mobile"] .tirada-zoom-close:hover .tirada-zoom-close-ring {
  stroke: inherit;
}

body[data-surface="mobile"] .tirada-zoom-scroll-btn:hover:not(:disabled) {
  transform: none;
  background: rgba(255, 245, 226, 0.92);
}

/* Zoom con lectura: paridad cabecera desktop (título + carta en fila) */
body[data-surface="mobile"] .tirada-zoom-panel.reino-corners.has-reading {
  --reino-corner-pad-x: 4px;
  --reino-corner-pad-bottom: 0.65rem;
  width: calc(100% - 0.5rem);
  max-width: none;
  min-height: 0;
  max-height: calc(
    100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.25rem
  );
  overflow: hidden;
  padding-inline: 4px;
  padding-top: calc(var(--reino-corner-inset, 0.4rem) + var(--tirada-zoom-headroom, 10px) + 0.35rem);
  padding-bottom: calc(var(--reino-corner-inset, 0.4rem) + 0.55rem);
}

body[data-surface="mobile"] .tirada-zoom-panel.has-reading {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  column-gap: 0.65rem;
  row-gap: 0.45rem;
}

body[data-surface="mobile"] .tirada-zoom.is-zoom-viewport-sync .tirada-zoom-panel.reino-corners.has-reading {
  max-height: calc(100% - 1.25rem);
}

body[data-surface="mobile"] .tirada-zoom-panel.has-reading > .tirada-zoom-title-row {
  position: static;
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: end;
  width: fit-content;
  max-width: min(14rem, 44cqi);
  min-width: 0;
  z-index: 1;
  grid-template-columns: none;
  left: auto;
  right: auto;
  top: auto;
  padding: 0;
  margin: 0;
}

body[data-surface="mobile"] .tirada-zoom-panel.reino-corners.has-reading > .tirada-zoom-title-row {
  left: auto;
  right: auto;
  top: auto;
  padding-left: 0;
}

body[data-surface="mobile"] .tirada-zoom-panel.has-reading .tirada-zoom-title {
  grid-column: auto;
  justify-self: auto;
  width: auto;
  max-width: 100%;
  text-align: center;
  font-size: calc(0.82rem + 4pt);
  line-height: 1.25;
}

body[data-surface="mobile"] .tirada-zoom-panel.has-reading > .tirada-zoom-card-col {
  grid-column: 3;
  grid-row: 1;
  flex: none;
  align-self: center;
  justify-self: start;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  align-items: center;
  text-align: center;
}

body[data-surface="mobile"] .tirada-zoom-panel.has-reading .tirada-zoom-card-wrap {
  width: auto;
  align-items: center;
  justify-content: center;
}

body[data-surface="mobile"] .tirada-zoom-panel.has-reading .tirada-zoom-arcana {
  font-size: 0.68rem;
  padding: 0.32rem 0.72rem;
  margin: 0 0 0.36rem;
}

body[data-surface="mobile"] .tirada-zoom-panel.has-reading .tirada-zoom-img {
  max-width: min(100%, 3.65rem);
  max-height: min(7rem, 16vh);
}

body[data-surface="mobile"] .tirada-zoom-panel.has-reading > .tirada-zoom-content {
  grid-column: 1 / -1;
  grid-row: 2;
  flex: none;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  width: 100%;
  overflow: hidden;
}

body[data-surface="mobile"] .tirada-zoom-panel.has-reading .tirada-zoom-reading-wrap {
  grid-column: auto;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body[data-surface="mobile"] .tirada-zoom-panel.reino-corners.has-reading .tirada-zoom-reading-wrap::after {
  display: none;
}

body[data-surface="mobile"] .tirada-zoom-panel.reino-corners.has-reading .tirada-zoom-reading {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  max-height: none;
  overflow-y: auto;
  padding-left: 3px;
  padding-right: calc(2.75rem + 0.35rem);
  padding-bottom: var(--tirada-reading-scroll-inset, 3.5rem);
  -webkit-overflow-scrolling: touch;
}

body[data-surface="mobile"] .tirada-zoom-panel.has-reading > .tirada-zoom-nav {
  grid-column: 1 / -1;
  grid-row: 3;
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: 0;
  padding-top: 0.35rem;
}

/* ---- Mobile: territorios táctiles (descripción por tap) ---- */
body[data-surface="mobile"] .tirada-station-helps {
  display: none !important;
}

body[data-surface="mobile"] .tirada-station-tap:active {
  background: rgba(197, 160, 89, 0.14);
  outline: 1px solid rgba(197, 160, 89, 0.35);
  outline-offset: -1px;
}

/* ---- Apertura del mapa: sin flash del HUD desktop ---- */
body[data-surface="mobile"] #tirada-root.is-map-opening .tirada-zoom-hint,
body[data-surface="mobile"] #tirada-root.is-map-open:not(.is-mobile-map-elevated) .tirada-zoom-hint {
  display: none;
}

body[data-surface="mobile"] #tirada-root.is-map-opening .tirada-map-stage,
body[data-surface="mobile"] #tirada-root.is-map-open .tirada-map-stage,
body[data-surface="mobile"] #tirada-root.is-mobile-map-elevated .tirada-map-stage {
  padding-bottom: 0;
}

body[data-surface="mobile"] #tirada-root.is-map-opening .tirada-mobile-dock {
  display: none !important;
}

body[data-surface="mobile"] .tirada.is-map-opening .tirada-play {
  transform-origin: center center;
  will-change: opacity, transform;
  animation: tirada-map-unfold-mobile 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes tirada-map-unfold-mobile {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-surface="mobile"] .tirada.is-map-opening .tirada-play {
    animation: none;
  }
}

/* Mapa a sangre: bordes laterales de la pantalla (escapa .wrap + panel pergamino) */
body[data-surface="mobile"] #step-revelation:has(#tirada-root.is-map-open) #step-cards,
body[data-surface="mobile"] #step-revelation:has(#tirada-root.is-map-opening) #step-cards,
body[data-surface="mobile"] #step-revelation:has(#tirada-root.is-mobile-map-elevated) #step-cards,
body[data-surface="mobile"] #step-revelation:has(.map-scene-wrap.is-mobile-picking) #step-cards,
body[data-surface="mobile"] #step-revelation:has(#tirada-root.is-map-open) .map-scene-wrap,
body[data-surface="mobile"] #step-revelation:has(#tirada-root.is-map-opening) .map-scene-wrap,
body[data-surface="mobile"] #step-revelation:has(#tirada-root.is-mobile-map-elevated) .map-scene-wrap,
body[data-surface="mobile"] #step-revelation:has(.map-scene-wrap.is-mobile-picking) .map-scene-wrap {
  --map-panel-edge-inset: 0;
  width: 100vw;
  width: 100dvw;
  max-width: 100dvw;
  margin-left: calc(50% - 50vw);
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50vw);
  margin-right: calc(50% - 50dvw);
  padding-inline: 0;
}

body[data-surface="mobile"] #step-revelation:has(#tirada-root.is-map-open) .tirada-map-wrap,
body[data-surface="mobile"] #step-revelation:has(#tirada-root.is-map-opening) .tirada-map-wrap,
body[data-surface="mobile"] #step-revelation:has(#tirada-root.is-mobile-map-elevated) .tirada-map-wrap,
body[data-surface="mobile"] #step-revelation:has(.map-scene-wrap.is-mobile-picking) .tirada-map-wrap {
  border-radius: 2px;
  border-left: none;
  border-right: none;
  box-shadow: none;
}