/* nakama-draft.css — Gacha de 8 cartas + tablero de 8 puestos.
   Misma paleta oscura que impostor.css (madera + oro).

   Objetivo de diseño: la partida entera (marcador, tirada y banda) cabe en
   UNA pantalla sin scroll — medido en 360×740, 390×844, 768×1024, 1280×720 y
   1920×1080. En móvil todo va apilado y compacto (4×2 cartas + 4×2 puestos);
   desde 700px la tirada y la banda van lado a lado. Si la cabecera/anuncio
   empujan el juego fuera de la pantalla, focusGame() (JS) lo sube al girar. */

/* ============================================================
   LAYOUT
   ============================================================ */
.container-nd {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0.4rem;
  --text-primary: #fff8e1;
  --text-secondary: rgba(255, 248, 225, 0.7);
  --border-color: rgba(255, 179, 0, 0.3);
  --bg-card: rgba(30, 20, 18, 0.85);
  --color-gold: #ffb300;
  --color-fit: #ffca28;
  --color-nofit: #8d6e63;
  /* Medidas compartidas por cartas y puestos (misma altura exacta) */
  --nd-gap: 0.35rem;
  --nd-f1: 0.62rem;
  --nd-f2: 0.66rem;
  --nd-emoji: 1.9rem;
}

/* El ranking cierra la columna: sin margen inferior queda pegado al enlace de reporte. */
.container-nd .game-ranking { margin-bottom: 24px; }

/* Iconos de línea propios del juego: un solo trazo y la misma paleta en todos los sistemas. */
.nd-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.container-nd .game-container {
  padding: 10px 8px 12px;
  margin-bottom: 24px;
  color: var(--text-primary);
  background: linear-gradient(160deg, #3e2723 0%, #2b1d18 55%, #1f1512 100%);
  border-color: rgba(255, 179, 0, 0.45);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 248, 225, 0.08);
}

.nd-layout {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.nd-draw,
.nd-crew {
  min-width: 0;
}

/* Partida terminada: la banda y el desglose tienen sus propias franjas. */
.nd-game.is-finished .nd-draw {
  display: none;
}

/* ============================================================
   MARCADOR Y BARRA DE AYUDA
   ============================================================ */
.nd-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.2rem 0.4rem;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 0.45rem;
}

.nd-brand { display: none; }

@media (min-width: 700px) {
  .nd-brand {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: auto;
    max-width: 30%;
    height: min(42px, 100%);
    object-fit: contain;
    transform: translate(-50%, -55%);
    pointer-events: none;
  }
}

.nd-roll-counter {
  font-family: 'Pirata One', cursive;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-gold);
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.nd-score-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.nd-score-num {
  font-family: 'Pirata One', cursive;
  font-size: 1.6rem;
  line-height: 0.9;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255, 179, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.6);
}

.nd-score-num.bump {
  animation: nd-bump 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes nd-bump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35) rotate(-4deg); color: #fff3c4; }
  100% { transform: scale(1); }
}

.nd-score-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.nd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: 1.9rem;
  margin-bottom: 0.35rem;
}

.nd-hint {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--text-secondary);
}

.nd-tools {
  display: flex;
  flex-shrink: 0;
  gap: 0.3rem;
}

.nd-error {
  grid-column: 1 / -1;
  text-align: center;
  color: #ff8a80;
}

/* ============================================================
   GACHA (8 cartas)
   ============================================================ */
.nd-gacha-wrap {
  position: relative;
}

.nd-gacha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nd-gap);
  perspective: 900px;
}

/* ============================================================
   SKELETON — mientras responde la API (.nd-game.is-loading)
   Cartas, puestos y desglose ya tienen su tamaño final: solo brillan.
   ============================================================ */
.nd-skel-bar {
  display: inline-block;
  width: 70%;
  height: 0.75em;
  border-radius: 999px;
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(255, 248, 225, 0.06) 25%, rgba(255, 248, 225, 0.16) 50%, rgba(255, 248, 225, 0.06) 75%);
  background-size: 200% 100%;
  animation: nd-shimmer 1.4s linear infinite;
}

@keyframes nd-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

.nd-skel-counter { width: 6.5em; height: 0.7em; }
.nd-skel-score   { width: 1.4em; height: 0.7em; }

.nd-game.is-loading .nd-card-back .nd-icon {
  animation: nd-skel-pulse 1.4s ease-in-out infinite;
}

@keyframes nd-skel-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.55; }
}

.nd-slot.is-skeleton {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.08);
}

.nd-slot.is-skeleton .nd-slot-img-wrap {
  background: linear-gradient(90deg, rgba(255, 248, 225, 0.04) 25%, rgba(255, 248, 225, 0.1) 50%, rgba(255, 248, 225, 0.04) 75%);
  background-size: 200% 100%;
  animation: nd-shimmer 1.4s linear infinite;
}

.nd-slot.is-skeleton .nd-slot-label .nd-skel-bar { width: 65%; }
.nd-slot.is-skeleton .nd-slot-sub .nd-skel-bar   { width: 45%; }

.nd-skel-title { width: 45%; height: 1.1rem; align-self: center; }
.nd-skel-total { width: 55%; height: 3.2rem; align-self: center; border-radius: 12px; }
.nd-skel-row   { width: 100%; height: 1.9rem; border-radius: 8px; }
.nd-skel-tier  { width: 60%; height: 4.2rem; align-self: center; border-radius: 12px; margin-top: 0.3rem; }

.nd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.25rem 0.25rem 0.3rem;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: var(--bg-card);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.nd-card.is-back {
  cursor: default;
  background: linear-gradient(145deg, #4e342e, #2b1d18);
  border-color: rgba(255, 179, 0, 0.25);
}

.nd-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 7px;
  background: #000;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
}

.nd-card-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  -webkit-user-drag: none;
}

.nd-card-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  color: #d5b675;
  background: radial-gradient(circle, #3a2920, #1b120f);
}

.nd-card-back .nd-icon {
  width: min(44%, 3.3rem);
  height: min(44%, 3.3rem);
  opacity: 0.55;
}

.nd-card-back[hidden] { display: none; }

/* `display:block` de .nd-card-img anula el atributo hidden: sin src, Chrome
   pinta el marco de imagen rota (la línea blanca alrededor del logo). */
.nd-card-img[hidden] { display: none; }

.nd-card-name {
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.nd-card-fits {
  display: flex;
  gap: 1px;
}

.nd-card-fits i {
  font-style: normal;
}

.nd-card-fits i.none {
  color: var(--color-nofit);
}

.nd-card-fits .nd-icon { width: 0.95em; height: 0.95em; }
.nd-card-fits .nd-icon-compact { width: 1.25em; height: 1.25em; }

/* Girando: la imagen parpadea entre personajes del carrete */
.nd-card.is-spinning .nd-card-img-wrap {
  animation: nd-shake 0.18s linear infinite;
}

.nd-card.is-spinning .nd-card-img {
  filter: blur(1.5px) saturate(1.3);
}

@keyframes nd-shake {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Parada de cada carta */
.nd-card.stop {
  animation: nd-stop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes nd-stop {
  0%   { transform: scale(0.88) rotateX(25deg); }
  100% { transform: scale(1) rotateX(0); }
}

.nd-card.enter {
  animation: nd-stop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.nd-card.has-fit {
  border-color: rgba(255, 202, 40, 0.45);
}

@media (hover: hover) {
  .nd-card[data-slug]:hover {
    transform: translateY(-4px);
    border-color: var(--color-gold);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 179, 0, 0.35);
  }
}

.nd-card.selected {
  transform: translateY(-4px) scale(1.04);
  border-color: var(--color-gold);
  background: rgba(255, 179, 0, 0.14);
  box-shadow: 0 0 22px rgba(255, 179, 0, 0.6);
}

.nd-card.dimmed {
  opacity: 0.45;
}

.nd-card:focus-visible,
.nd-slot:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

/* ============================================================
   BOTONES
   ============================================================ */
/* Girar flota sobre las cartas boca abajo: no ocupa fila propia. */
.nd-spin-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.8rem;
  border: 2px solid #ffe082;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffca28, #ff8f00);
  color: #3e2723;
  font-family: 'Pirata One', cursive;
  font-size: 1.35rem;
  letter-spacing: 1px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 5px 0 #a65c00, 0 10px 26px rgba(0, 0, 0, 0.65);
  transition: transform 0.15s, box-shadow 0.15s;
  animation: nd-spin-call 1.6s ease-in-out infinite;
}

@keyframes nd-spin-call {
  0%, 100% { box-shadow: 0 5px 0 #a65c00, 0 10px 26px rgba(0, 0, 0, 0.65); }
  50%      { box-shadow: 0 5px 0 #a65c00, 0 0 28px rgba(255, 202, 40, 0.8); }
}

.nd-spin-btn:not(:disabled):hover {
  transform: translate(-50%, calc(-50% - 2px));
}

.nd-spin-btn:not(:disabled):active {
  transform: translate(-50%, calc(-50% + 4px));
  box-shadow: 0 1px 0 #a65c00, 0 4px 10px rgba(0, 0, 0, 0.4);
}

.nd-spin-btn:disabled {
  cursor: default;
  opacity: 0.55;
  animation: none;
}

.nd-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.65rem;
  border: 1.5px solid rgba(255, 179, 0, 0.5);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-gold);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.nd-tool-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.nd-cancel-btn {
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Volver a girar: mismo oro que ¡Girar! en pequeño, para que se vea sobre la madera. */
.nd-reroll-btn {
  padding: 0.32rem 0.85rem;
  border: 1.5px solid #ffe082;
  background: linear-gradient(180deg, #ffca28, #ff8f00);
  color: #3e2723;
  font-size: 0.78rem;
  box-shadow: 0 3px 0 #a65c00, 0 5px 12px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.nd-reroll-btn .nd-icon { stroke-width: 2.2; }

.nd-reroll-btn:not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.nd-reroll-btn:not(:disabled):active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #a65c00, 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Sin tiradas extra: vuelve a ser un contorno apagado. */
.nd-reroll-btn:disabled {
  border-color: rgba(255, 179, 0, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-gold);
  box-shadow: none;
}

/* ============================================================
   TABLERO (8 puestos)
   Cada puesto es un "hueco de carta": mismo tamaño, borde, recuadro
   cuadrado y dos líneas de texto que .nd-card, así tirada y banda miden
   exactamente lo mismo (4×2 cada una).
   ============================================================ */
.nd-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nd-gap);
}

.nd-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.25rem 0.25rem 0.3rem;
  border: 2px dashed rgba(255, 179, 0, 0.35);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.nd-slot.is-filled {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.12);
  background: var(--bg-card);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.nd-slot.is-filled.is-fit {
  border-color: rgba(255, 202, 40, 0.7);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4), inset 0 0 14px rgba(255, 202, 40, 0.15);
}

.nd-slot-img-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 7px;
  background: radial-gradient(circle, rgba(255, 179, 0, 0.1), rgba(0, 0, 0, 0.35));
}

.nd-slot.is-filled .nd-slot-img-wrap {
  background: #000;
}

.nd-slot-emoji {
  display: grid;
  place-items: center;
  line-height: 1;
  opacity: 0.9;
}

.nd-slot-emoji .nd-icon {
  width: var(--nd-emoji);
  height: var(--nd-emoji);
  color: var(--color-fit);
  stroke-width: 1.4;
}

.nd-slot-img {
  /* Absoluta: en Safari/iOS height:100% dentro de un contenedor con solo
     aspect-ratio (y display:grid) no siempre resuelve y la foto quedaba a media celda. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* "Hoy": esquina del recuadro, sin robar altura */
.nd-slot-daily {
  position: absolute;
  top: 3px;
  left: 3px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(198, 40, 40, 0.92);
  color: #fff;
  font-size: calc(var(--nd-f1) * 0.8);
  font-weight: 800;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Poder base y puntos reales comparten una franja al pie del retrato. */
.nd-slot-stats {
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  padding: 1px 2px;
  border: 1px solid rgba(255, 179, 0, 0.4);
  border-radius: 6px;
  background: rgba(20, 12, 10, 0.88);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

.nd-slot-power,
.nd-slot-pts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  line-height: 1;
}

.nd-slot-power { border-right: 1px solid rgba(255, 248, 225, 0.22); }

.nd-slot-power small,
.nd-slot-pts small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(var(--nd-f1) * 0.58);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.1;
}

.nd-slot-power small { color: rgba(255, 248, 225, 0.7); }
.nd-slot-pts small { color: #ffe082; }

.nd-power-num {
  font-family: 'Pirata One', cursive;
  font-size: calc(var(--nd-f1) * 1.3);
  line-height: 1;
  color: rgba(255, 248, 225, 0.82);
  font-variant-numeric: tabular-nums;
}

.nd-slot-pts strong {
  font-family: 'Pirata One', cursive;
  font-size: calc(var(--nd-f1) * 1.7);
  font-weight: 400;
  line-height: 1;
  color: #ffe082;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 7px rgba(255, 179, 0, 0.45);
}

.nd-slot-pts.fit strong { color: #ffdc56; }

.nd-slot-multiplier {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -60%);
  padding: 0 3px;
  border: 1px solid rgba(255, 232, 150, 0.85);
  border-radius: 4px;
  background: #ffca28;
  color: #2b1d18;
  font-size: calc(var(--nd-f1) * 0.62);
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.nd-slot-label {
  color: var(--color-fit);
  font-weight: 800;
}

.nd-slot-label .nd-icon { margin-right: 0.2em; }
.nd-slot-label .nd-icon-compact { width: 1.25em; height: 1.25em; }

.nd-slot-sub {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.25rem;
  color: var(--text-secondary);
  font-weight: 700;
}

.nd-slot-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.nd-slot.is-filled .nd-slot-sub {
  height: auto;
  min-height: calc(var(--nd-f2) * 1.5);
  overflow: visible;
}

.nd-slot.is-filled .nd-slot-name {
  width: 100%;
  font-size: 0.95em;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.08;
  text-align: center;
}

/* Las dos líneas de texto de cartas y puestos miden lo mismo */
.nd-card-name,
.nd-slot-label {
  width: 100%;
  height: calc(var(--nd-f1) * 1.25);
  font-size: var(--nd-f1);
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nd-card-fits,
.nd-slot-sub {
  width: 100%;
  height: calc(var(--nd-f2) * 1.25);
  font-size: var(--nd-f2);
  line-height: 1.25;
  overflow: hidden;
}

.nd-card-fits { justify-content: center; }

/* "Libre" y los nombres comparten la misma zona inferior de cada puesto. */
.nd-slot .nd-slot-sub {
  display: flex;
  height: auto;
  min-height: calc(var(--nd-f2) * 1.5);
  margin-top: auto;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

/* Puestos resaltados mientras hay una carta elegida */
.nd-slot.is-target {
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

.nd-slot.is-target.is-match {
  border-style: solid;
  border-color: var(--color-fit);
  background: rgba(255, 202, 40, 0.12);
  animation: nd-glow 1.1s ease-in-out infinite;
}

/* Brillo sin transform: el puesto no se mueve (clic estable en táctil y en tests). */
@keyframes nd-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 202, 40, 0.35); }
  50%      { box-shadow: 0 0 22px rgba(255, 202, 40, 0.75); }
}

.nd-slot.is-target.is-match::after {
  content: '×1.5';
  position: absolute;
  top: -7px;
  right: -4px;
  z-index: 2;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-fit);
  color: #3e2723;
  font-size: var(--nd-f2);
  font-weight: 900;
  line-height: 1.5;
}

@media (hover: hover) {
  .nd-slot.is-target:hover {
    border-color: var(--color-gold);
    background: rgba(255, 202, 40, 0.18);
  }
}

.nd-slot.revealing .nd-power-num {
  color: var(--color-gold);
  text-shadow: 0 0 12px rgba(255, 179, 0, 0.8);
}

.nd-slot.revealed {
  animation: nd-stop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nd-fit-badge {
  position: absolute;
  top: 38%;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--nd-f2);
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  animation: nd-badge 2.2s ease forwards;
}

.nd-fit-badge.fit {
  background: var(--color-fit);
  color: #3e2723;
}

.nd-fit-badge.nofit {
  background: #5d4037;
  color: #fff;
}

@keyframes nd-badge {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  15%  { opacity: 1; transform: translate(-50%, 0); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================================
   ≥700px: en grande. Dos disposiciones, la que dé cartas más grandes:
   - Pantallas panorámicas (≥17:10, portátiles/monitores 16:9): tirada y
     banda en dos mitades iguales, lado a lado — cabe sin scroll.
   - El resto (tablet vertical, 4:3, 16:10): apiladas, con el ancho
     limitado por la ALTURA (100svh − 230px) para que las 4 filas de
     cartas quepan enteras; al girar, focusGame() sube el juego.
   ============================================================ */
@media (min-width: 700px) {
  .container-nd {
    max-width: min(1320px, calc(100svh - 230px));
    padding: 0 1rem;
    --nd-gap: 0.55rem;
    --nd-f1: 0.74rem;
    --nd-f2: 0.8rem;
    --nd-emoji: 2.6rem;
  }

  .container-nd .game-container { padding: 14px 18px 18px; }

  .nd-layout { gap: 0.8rem; }


  .nd-roll-counter { font-size: 1.6rem; }
  .nd-score-num { font-size: 2rem; }
  .nd-hint { font-size: 0.9rem; }
  .nd-card-back { font-size: 2.6rem; }
  .nd-spin-btn { font-size: 1.7rem; padding: 0.75rem 2.4rem; }
}

@media (min-width: 700px) and (min-aspect-ratio: 17/10) {
  .container-nd {
    /* Ancho de las dos mitades limitado también por la altura disponible. */
    max-width: min(1320px, calc(4 * (100svh - 420px) + 150px));
  }

  .nd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.4rem;
    align-items: start;
  }


  /* La banda arranca a la altura de las cartas (debajo de la barra de ayuda). */
  .nd-crew { padding-top: calc(1.9rem + 0.35rem); }
  .nd-game.is-finished .nd-crew { padding-top: 0; }
}

/* PC con altura de sobra (≥900px, p. ej. 1920×1080): el ancho lo limitan
   los anuncios laterales, así que los personajes crecen en ALTO — retratos
   verticales 3:4 en cartas y puestos — y se recortan márgenes para ganar
   ancho. Sigue cabiendo sin scroll (medido en 1920×1080 y 2560×1440). */
@media (min-width: 700px) and (min-aspect-ratio: 17/10) and (min-height: 900px) {
  .container-nd {
    max-width: min(1500px, calc(4 * (100svh - 420px) + 150px));
    padding: 0 0.5rem;
    --nd-gap: 0.5rem;
  }

  .container-nd .game-container { padding: 14px 14px 16px; }

  .nd-layout { column-gap: 1rem; }

  .nd-card-img-wrap,
  .nd-slot-img-wrap {
    aspect-ratio: 3 / 4;
  }

}

@media (min-width: 1440px) {
  .container-nd {
    --nd-f1: 0.82rem;
    --nd-f2: 0.88rem;
    --nd-emoji: 3rem;
  }
}

/* ============================================================
   RESULTADO — desglose animado debajo de la banda
   ============================================================ */
.nd-summary {
  display: none;
}

.nd-game.is-finished .nd-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.7rem 0.8rem 0.8rem;
  border: 1px solid rgba(255, 179, 0, 0.4);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 179, 0, 0.16), transparent 60%),
    rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.nd-summary.is-playing {
  cursor: pointer;
}

.nd-sum-title {
  margin: 0;
  text-align: center;
  font-family: 'Pirata One', cursive;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--color-gold);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.nd-sum-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
}

.nd-sum-total strong {
  font-family: 'Pirata One', cursive;
  font-size: clamp(2.6rem, 7vw, 3.8rem);
  font-weight: 400;
  line-height: 1;
  color: #ffe082;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(255, 179, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.7);
}

.nd-sum-total strong.bump {
  animation: nd-bump 0.34s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nd-sum-total span {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.nd-sum-syn {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nd-sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  font-size: 0.82rem;
  background: rgba(255, 248, 225, 0.05);
}

.nd-sum-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nd-sum-row strong {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.nd-sum-base strong {
  color: #fff;
}

.nd-sum-chip {
  border: 1px solid rgba(255, 202, 40, 0.45);
  background: rgba(255, 202, 40, 0.1);
}

.nd-sum-chip span {
  color: var(--color-fit);
}

.nd-sum-chip small {
  color: var(--text-secondary);
}

.nd-sum-chip strong {
  color: var(--color-fit);
}

.nd-sum-chip.none {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.nd-sum-chip.none span,
.nd-sum-chip.none strong {
  color: var(--text-secondary);
}

.nd-sum-chip.pending { visibility: hidden; }

.nd-sum-chip.enter {
  animation: nd-chip-in 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes nd-chip-in {
  0%   { opacity: 0; transform: translateX(-30px) scale(0.9); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Sello del rango: invisible hasta el final, luego "golpea" el papel */
.nd-sum-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  opacity: 0;
}

.nd-sum-tier.shown {
  opacity: 1;
}

.nd-sum-tier.slam {
  opacity: 1;
}

.nd-sum-stamp {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 1.15rem;
  border: 3px double currentColor;
  border-radius: 8px;
  color: #ffca28;
  font-family: 'Pirata One', cursive;
  font-size: clamp(1.5rem, 4vw, 2.05rem);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transform: rotate(-5deg);
  background: rgba(0, 0, 0, 0.35);
  text-shadow: 0 0 12px rgba(255, 202, 40, 0.5);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px currentColor;
}

.nd-sum-stamp::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid currentColor;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
}

.nd-sum-stamp .nd-icon { width: 1.1em; height: 1.1em; }

.nd-sum-row .nd-icon { margin-right: 0.2em; }


.nd-sum-stamp.tier-rookie      { color: #a5d6a7; }
.nd-sum-stamp.tier-supernova   { color: #ff8a65; }
.nd-sum-stamp.tier-shichibukai { color: #90caf9; }
.nd-sum-stamp.tier-yonko       { color: #ffca28; }
.nd-sum-stamp.tier-rey         { color: #ff5252; text-shadow: 0 0 16px rgba(255, 82, 82, 0.7); }

.nd-sum-tier.slam .nd-sum-stamp {
  animation: nd-stamp 0.6s ease-out both;
}

.nd-sum-tier.slam .nd-sum-stamp::after {
  animation: nd-stamp-imprint 0.38s ease-out 0.26s both;
}

.nd-sum-tier.slam .nd-sum-crew {
  animation: nd-fade-up 0.38s ease 0.34s both;
}

@keyframes nd-stamp {
  0%   { opacity: 0; transform: translateY(-32px) scale(1.45) rotate(-9deg); filter: brightness(1.3); }
  34%  { opacity: 1; transform: translateY(-8px) scale(1.16) rotate(-6deg); }
  44%  { transform: translateY(0) scale(0.88, 0.8) rotate(-5deg); filter: brightness(1.7); }
  62%  { transform: translateY(-3px) scale(1.06, 1.04) rotate(-5deg); }
  82%  { transform: translateY(0) scale(0.98, 0.98) rotate(-5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(-5deg); filter: brightness(1); }
}

@keyframes nd-stamp-imprint {
  0%   { opacity: 0.7; transform: scale(0.88); }
  100% { opacity: 0; transform: scale(1.25); }
}

@keyframes nd-fade-up {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* El impacto del sello sacude el papel una sola vez. */
.nd-summary:has(.nd-sum-tier.slam) {
  animation: nd-shake-once 0.23s ease 0.26s;
}

/* El contenedor común conserva el mismo aspecto de la cuenta atrás en todos los juegos. */
.nd-postgame.hidden { display: none; }
.nd-postgame .btn-share:disabled { opacity: 0.55; cursor: wait; }

/* Partida extra del día (anuncio con recompensa): una sola línea. Botón de
   madera y oro con el icono de reproducir; la etiqueta "Práctica · sin ranking"
   cuelga de su esquina como el "Hoy" de los puestos. */
.nd-replay { display: flex; justify-content: center; margin: 1.1rem 0 0.8rem; padding-top: 0.5rem; }
.nd-replay.hidden, .nd-replay-note.hidden { display: none; }
.nd-replay-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: min(100%, 22rem);
  padding: 0.7rem 1.2rem;
  border: 2px solid #ffe082;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd54f 0%, #ffb300 48%, #ff8f00 100%);
  color: #3e2723;
  font-family: 'Pirata One', cursive;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  overflow: visible;
  box-shadow: 0 4px 0 #a65c00, 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.nd-replay-btn:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.06); }
.nd-replay-btn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 #a65c00, 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.nd-replay-btn:disabled { cursor: wait; filter: saturate(0.7); }
.nd-replay-icon { flex: none; width: 1.5rem; height: 1.5rem; }
.nd-replay-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nd-replay-tag {
  position: absolute;
  top: -0.7rem;
  right: 1rem;
  padding: 0.12rem 0.55rem;
  border: 1px solid rgba(255, 224, 130, 0.7);
  border-radius: 999px;
  background: #3e2723;
  color: #ffe082;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.nd-replay-note { margin: 0.5rem 0; font-size: 0.8rem; color: var(--text-secondary); text-align: center; }
@media (max-width: 380px) { .nd-replay-btn { font-size: 1.05rem; padding-inline: 0.8rem; } }

@keyframes nd-shake-once {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-3px, 2px); }
  50%      { transform: translate(3px, -2px); }
  75%      { transform: translate(-2px, 1px); }
}

.nd-sum-crew {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--text-primary);
}

.nd-sum-skip {
  position: absolute;
  right: 0.6rem;
  bottom: 0.4rem;
  margin: 0;
  font-size: 0.66rem;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* Cada puesto "suma" al total: brillo + salto */
.nd-slot.tally {
  animation: nd-tally 0.32s ease;
}

@keyframes nd-tally {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(255, 202, 40, 0); }
  40%  { transform: scale(1.07); box-shadow: 0 0 22px rgba(255, 202, 40, 0.85); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 202, 40, 0); }
}

.nd-float-pts {
  position: absolute;
  z-index: 1000;
  font-family: 'Pirata One', cursive;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  line-height: 1;
  color: #ffe082;
  white-space: nowrap;
  -webkit-text-stroke: 0.35px rgba(85, 45, 12, 0.8);
  text-shadow: 0 0 9px rgba(255, 202, 40, 0.85), 0 1px 2px rgba(35, 18, 7, 0.85);
  pointer-events: none;
  animation: nd-fly-pts 0.62s both;
}

.nd-float-pts.fit {
  color: #ffdf5c;
}

@keyframes nd-fly-pts {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.75); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  34%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  43%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  90%  { opacity: 1; transform: translate(calc(-50% + var(--nd-fly-x)), calc(-50% + var(--nd-fly-y))) scale(0.65); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--nd-fly-x)), calc(-50% + var(--nd-fly-y))) scale(0.4); }
}

/* Victoria: personajes arriba, puntuación debajo (nunca en la misma fila). */
.nd-game.is-finished .nd-crew    { order: 1; }
.nd-game.is-finished .nd-summary { order: 2; }

@media (min-width: 700px) {
  /* Solo al ganar: cuatro cartas por fila, ajustadas al alto de la pantalla. */
  .container-nd:has(.nd-game.is-finished) {
    max-width: min(1100px, max(560px, calc(200svh - 580px)));
  }

  .nd-game.is-finished .nd-layout {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  .nd-game.is-finished .nd-crew {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.9rem;
    border: 1px solid rgba(255, 179, 0, 0.4);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
  }

  .nd-game.is-finished .nd-board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .nd-game.is-finished .nd-slot {
    padding: 0.35rem 0.35rem 0.45rem;
  }

  .nd-game.is-finished .nd-slot-img-wrap {
    aspect-ratio: 1;
  }

  /* Desglose en franja horizontal: total | química | sello */
  .nd-game.is-finished .nd-summary {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
      "title base  tier"
      "total syn   tier";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.3rem;
    padding: 0.8rem 1rem;
  }

  .nd-sum-title { grid-area: title; }
  .nd-sum-total { grid-area: total; }
  .nd-sum-base  { grid-area: base; }
  .nd-sum-syn   { grid-area: syn; align-self: start; }
  .nd-sum-tier  { grid-area: tier; margin-top: 0; }

  .nd-skel-title { grid-area: title; justify-self: center; }
  .nd-skel-total { grid-area: total; justify-self: center; }
  .nd-skel-base  { grid-area: base; }
  .nd-skel-syn   { grid-area: syn; align-self: start; }
  .nd-skel-tier  { grid-area: tier; justify-self: center; width: 80%; margin-top: 0; }
}

/* ============================================================
   TUTORIAL ANIMADO (modal + «Cómo se juega»)
   Carrusel de 7 pasos: arriba la escena animada (.ndt-stage, la monta
   nakama-draft-tutorial.js), debajo el texto del paso y la navegación.
   Las piezas de la escena imitan las cartas y puestos del juego real.
   ============================================================ */
#tutorialModal .tutorial-content {
  width: min(880px, 100%);
  max-width: 880px;
  container-type: inline-size;
  max-height: calc(100dvh - 16px);
  padding: 18px 20px 16px;
  overflow-y: auto;
  border-color: #ffb300;
  background: linear-gradient(135deg, #3e2723, #281b18);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.68), inset 0 1px 0 rgba(255, 248, 225, 0.12);
}

.nd-tutorial-heading,
.nd-howto-heading {
  text-align: center;
}

#tutorialModal .tutorial-title,
.nd-howto .nd-howto-heading > h3 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  color: #ffca28;
  font-family: 'Pirata One', cursive;
  font-size: clamp(1.5rem, 4vw, 1.95rem);
  line-height: 1.15;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

.nd-tutorial-lead {
  width: min(590px, 100%);
  margin: 0 auto 12px;
  color: #d7ccc8;
  font-size: 0.86rem;
  line-height: 1.45;
}

.nd-howto {
  container-type: inline-size;
  width: min(880px, calc(100% - 20px));
  max-width: 880px;
  margin: 40px auto;
  padding: 24px;
}

.nd-howto .note-game {
  margin: 14px 0 0;
  padding-top: 12px;
  color: #bcaaa4;
  font-size: 0.82rem;
  text-align: center;
}

.ndt-skip {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  padding: 4px 10px;
  border: 1px solid rgba(255, 248, 225, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  color: #bcaaa4;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.ndt-skip:hover { color: #fff8e1; border-color: rgba(255, 202, 40, 0.6); }

/* ---------- Escenario ---------- */
.ndt {
  --ndt-gold: #ffca28;
  --ndt-dim: #8d6e63;
  color: #fff8e1;
  text-align: center;
}

.ndt-stage {
  position: relative;
  height: 292px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 179, 0, 0.3);
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 179, 0, 0.1), transparent 60%),
    linear-gradient(160deg, #3e2723 0%, #2b1d18 55%, #1f1512 100%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 225, 0.08), inset 0 -20px 40px rgba(0, 0, 0, 0.25);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.4s ease;
}

.ndt-stage.is-fading { opacity: 0; }

.ndt-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 10px 34px;
  animation: ndt-scene-in 0.35s ease both;
}

@keyframes ndt-scene-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.ndt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Rótulo inferior de la escena */
.ndt-caption {
  position: absolute;
  left: 50%;
  bottom: 9px;
  z-index: 4;
  max-width: calc(100% - 24px);
  padding: 3px 12px;
  border: 1px solid rgba(255, 202, 40, 0.55);
  border-radius: 12px;
  background: rgba(20, 12, 10, 0.88);
  color: var(--ndt-gold);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  width: max-content;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
}

.ndt-caption.is-in {
  animation: ndt-caption-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ndt-caption-in {
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Mano virtual que «pulsa» (mismo 👆 que el tutorial de sopa). El JS mueve
   el contenedor con transform; la pulsación anima el ::before para no pisarlo.
   El margen negativo deja la punta del dedo justo sobre el punto de destino. */
.ndt-finger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  margin: -3px 0 0 -15px;
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.35, 1), opacity 0.25s;
  pointer-events: none;
}

.ndt-finger::before {
  content: '👆';
  display: block;
  font-size: 32px;
  line-height: 1;
  transform-origin: 50% 0;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
}

.ndt-finger.is-in { opacity: 1; }

.ndt-finger.is-tap::before { animation: ndt-press 0.3s ease; }

@keyframes ndt-press {
  50% { transform: scale(0.82) translateY(3px); }
}

.is-pressed { transform: scale(0.94) !important; }

/* Copia que vuela de la carta al puesto */
.ndt-ghost {
  position: absolute;
  z-index: 5;
  display: block;
  overflow: hidden;
  border: 2px solid var(--ndt-gold);
  border-radius: 7px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 179, 0, 0.5);
  transform-origin: top left;
  pointer-events: none;
}

/* ---------- Cartas (como .nd-card) ---------- */
.ndt-gacha {
  display: grid;
  grid-template-columns: repeat(4, 62px);
  gap: 6px;
  justify-content: center;
  perspective: 700px;
}

.ndt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 3px 3px 4px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: rgba(30, 20, 18, 0.85);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, border-color 0.25s, box-shadow 0.25s, opacity 0.3s, filter 0.3s;
}

.ndt-card.is-back {
  background: linear-gradient(145deg, #4e342e, #2b1d18);
  border-color: rgba(255, 179, 0, 0.25);
}

.ndt-card-img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
}

.ndt-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d5b675;
  background: radial-gradient(circle, #3a2920, #1b120f);
}

.ndt-back .nd-icon { width: 46%; height: 46%; opacity: 0.55; }
.ndt-back[hidden] { display: none; }

.ndt-card-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.ndt-card-fits {
  display: flex;
  min-height: 0.8rem;
  gap: 2px;
  color: var(--ndt-gold);
  font-size: 0.66rem;
}

.ndt-card-fits i {
  display: grid;
  place-items: center;
  border-radius: 4px;
  font-style: normal;
  transition: transform 0.25s, background 0.25s, box-shadow 0.25s;
}

.ndt-card-fits i.none { color: var(--ndt-dim); }
.ndt-card-fits .nd-icon-compact { width: 1.1em; height: 1.1em; }
/* 5+ puestos (Ace) no caben en la carta con la separación normal */
.ndt-card-fits:has(> i:nth-child(5)) { gap: 1px; font-size: 0.6rem; }

.ndt-card.has-fit { border-color: rgba(255, 202, 40, 0.45); }

.ndt-card.is-spinning .ndt-card-img { animation: ndt-shake 0.18s linear infinite; }
.ndt-card.is-spinning img { filter: blur(1.5px) saturate(1.3); }

@keyframes ndt-shake {
  50% { transform: translateY(-3px); }
}

.ndt-card.stop { animation: ndt-stop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }

@keyframes ndt-stop {
  from { transform: scale(0.85) rotateX(30deg); opacity: 0.4; }
  to   { transform: none; opacity: 1; }
}

.ndt-card.selected {
  transform: translateY(-5px) scale(1.06);
  border-color: #ffb300;
  background: rgba(255, 179, 0, 0.16);
  box-shadow: 0 0 20px rgba(255, 179, 0, 0.65);
}

.ndt-card.dimmed { opacity: 0.4; filter: grayscale(0.5); }
.ndt-card.is-gone { opacity: 0; transform: scale(0.8); }

.ndt-card.is-focus {
  transform: scale(1.06);
  border-color: #ffb300;
  box-shadow: 0 0 18px rgba(255, 179, 0, 0.5);
}

/* Botón «Girar» flotando sobre las cartas boca abajo */
.ndt-gacha-wrap { position: relative; }

.ndt-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1.3rem;
  border: 2px solid #ffe082;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffca28, #ff8f00);
  color: #3e2723;
  font-family: 'Pirata One', cursive;
  font-size: 1.15rem;
  white-space: nowrap;
  box-shadow: 0 4px 0 #a65c00, 0 8px 20px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  transition: opacity 0.25s, transform 0.25s;
  animation: ndt-glow 1.6s ease-in-out infinite;
}

.ndt-spin.is-pressed { transform: translate(-50%, -46%) scale(0.95) !important; }
.ndt-spin.is-out { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }

@keyframes ndt-glow {
  50% { box-shadow: 0 4px 0 #a65c00, 0 0 24px rgba(255, 202, 40, 0.85); }
}

/* Barra superior: contador de tirada + re-roll / pista */
.ndt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 272px;
  max-width: 100%;
  min-height: 24px;
}

.ndt-counter {
  flex-shrink: 0;
  color: #ffb300;
  font-family: 'Pirata One', cursive;
  font-size: 1.05rem;
  line-height: 1;
}

.ndt-counter.bump { animation: ndt-bump 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.ndt-hint {
  min-width: 0;
  overflow: hidden;
  color: var(--ndt-gold);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ndt-fakebtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 9px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 179, 0, 0.6);
  border-radius: 999px;
  background: rgba(255, 179, 0, 0.12);
  color: var(--ndt-gold);
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity 0.3s, transform 0.3s, color 0.3s, border-color 0.3s;
}

.ndt-fakebtn.is-out { opacity: 0; transform: scale(0.7); }
.ndt-fakebtn.is-in { animation: ndt-attention 1s ease-in-out 2; }
.ndt-fakebtn.is-used { color: var(--ndt-dim); border-color: rgba(141, 110, 99, 0.5); background: transparent; animation: none; }

@keyframes ndt-attention {
  50% { transform: scale(1.1); box-shadow: 0 0 16px rgba(255, 179, 0, 0.7); }
}

/* ---------- Puestos (como .nd-slot) ---------- */
.ndt-board {
  display: grid;
  grid-template-columns: repeat(4, 64px);
  gap: 6px;
  justify-content: center;
}

.ndt-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 3px 3px 4px;
  border: 2px dashed rgba(255, 179, 0, 0.35);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s, opacity 0.3s, transform 0.3s;
}

.ndt-slot-img {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 248, 225, 0.04);
  color: var(--ndt-gold);
}

.ndt-slot-icon .nd-icon { width: 26px; height: 26px; }

.ndt-daily {
  position: absolute;
  top: 2px;
  left: 2px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(198, 40, 40, 0.92);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.5;
  text-transform: uppercase;
}

.ndt-slot-label {
  max-width: 100%;
  overflow: hidden;
  color: #d7ccc8;
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ndt-slot-pts {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 0 4px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff8e1;
  font-size: 0.6rem;
}

.ndt-slot-pts.fit { color: var(--ndt-gold); }

.ndt-slot.is-out { opacity: 0; transform: scale(0.6); }
.ndt-slot.pop { animation: ndt-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.ndt-slot.is-rolling .ndt-slot-img { animation: ndt-shake 0.16s linear infinite; }
.ndt-slot.is-rolling .ndt-slot-label { color: var(--ndt-dim); }

@keyframes ndt-pop {
  from { opacity: 0; transform: scale(0.55) rotateY(70deg); }
  to   { opacity: 1; transform: none; }
}

.ndt-slot.is-glow { animation: ndt-daily-glow 1.6s ease-in-out infinite; }

@keyframes ndt-daily-glow {
  50% { border-color: #ef5350; box-shadow: 0 0 16px rgba(229, 57, 53, 0.55); }
}

.ndt-slot.is-match {
  border-style: solid;
  border-color: #ffb300;
  animation: ndt-match 0.9s ease-in-out infinite;
}

@keyframes ndt-match {
  50% { box-shadow: 0 0 18px rgba(255, 179, 0, 0.75); background: rgba(255, 179, 0, 0.14); }
}

.ndt-slot.is-filled { border-style: solid; border-color: rgba(255, 255, 255, 0.15); }
.ndt-slot.is-fit { border-color: rgba(255, 202, 40, 0.7); }
.ndt-slot.land { animation: ndt-land 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes ndt-land {
  0%   { transform: scale(1.18); box-shadow: 0 0 26px rgba(255, 202, 40, 0.9); }
  100% { transform: none; }
}

/* Tablero compacto: mismo tablero en menos alto (escenas 3 y 4) */
.ndt-board-compact { grid-template-columns: repeat(4, 46px); gap: 5px; }
.ndt-board-compact .ndt-slot { padding: 2px 2px 3px; }
.ndt-board-compact .ndt-slot-icon .nd-icon { width: 18px; height: 18px; }
.ndt-board-compact .ndt-slot-label { font-size: 0.5rem; }
.ndt-board-compact .ndt-daily { font-size: 0.42rem; }

/* ---------- Escena 1: filas fijas / del día ---------- */
.ndt-board-row .ndt-slot { width: 64px; }

.ndt-rowlabel {
  color: var(--ndt-gold);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s, transform 0.35s;
}

.ndt-rowlabel.is-daily { color: #ef9a9a; margin-top: 4px; }
.ndt-rowlabel.is-in { opacity: 1; transform: none; }

/* ---------- Iconos de encaje encendidos ---------- */
/* Sin escalar en reposo: con los iconos casi pegados, cualquier scale los
   solapaba. El «pop» al encenderse es breve y pequeño. */
.ndt-card-fits i.is-lit {
  background: #ffb300;
  color: #3e2723;
  box-shadow: 0 0 8px rgba(255, 179, 0, 0.85);
  animation: ndt-fit-pop 0.35s ease-out;
}

@keyframes ndt-fit-pop {
  50% { transform: scale(1.18); }
}

.ndt-card-fits i.none.is-lit { background: #6d4c41; color: #ffab91; box-shadow: 0 0 10px rgba(255, 138, 101, 0.6); }
.ndt-card-fits i.shake { animation: ndt-no 0.5s ease 2; }

@keyframes ndt-no {
  25% { transform: scale(1.35) translateX(-3px); }
  75% { transform: scale(1.35) translateX(3px); }
}

/* ---------- Escena 3: mano de 4 cartas ---------- */
.ndt-gacha-hand { grid-template-columns: repeat(4, 54px); margin-bottom: 2px; }

/* ---------- Escena 4: revelar el Poder ---------- */
.ndt-reveal {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.ndt-rv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 126px;
  padding: 7px 7px 9px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.ndt-rv.pop { animation: ndt-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.ndt-rv.is-active { transform: translateY(-3px); border-color: rgba(255, 179, 0, 0.6); }
.ndt-rv.is-fit.is-done { border-color: #ffb300; box-shadow: 0 0 20px rgba(255, 179, 0, 0.45); }
.ndt-rv.is-nofit.is-done { border-color: rgba(141, 110, 99, 0.7); }

.ndt-rv-slot {
  position: relative;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.ndt-rv-cat {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px 2px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.75);
  color: var(--ndt-gold);
  font-size: 0.5rem;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ndt-rv-math {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
}

.ndt-rv-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 34px;
  line-height: 1;
}

.ndt-rv-line small {
  color: #bcaaa4;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ndt-rv-line b {
  font-family: 'Pirata One', cursive;
  font-size: 1.4rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.ndt-rv-base.flip { animation: ndt-flip 0.4s ease; }

@keyframes ndt-flip {
  0%   { transform: rotateX(90deg); }
  100% { transform: none; }
}

.ndt-rv-mult {
  padding: 1px 5px;
  border-radius: 6px;
  background: #ffb300;
  color: #3e2723;
  font-size: 0.72rem;
  font-weight: 900;
  opacity: 0;
  transform: scale(2.2) rotate(-12deg);
}

.ndt-rv.is-nofit .ndt-rv-mult { background: #5d4037; color: #d7ccc8; }

.ndt-rv-mult.is-in {
  animation: ndt-stamp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ndt-stamp {
  to { opacity: 1; transform: rotate(-6deg); }
}

.ndt-rv.is-fit.is-done .ndt-rv-total b { color: var(--ndt-gold); text-shadow: 0 0 12px rgba(255, 179, 0, 0.7); }
.ndt-rv.is-nofit.is-done .ndt-rv-total b { color: #bcaaa4; }

.ndt-rv-tag {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.6rem;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
}

.ndt-rv.is-fit .ndt-rv-tag { color: var(--ndt-gold); }
.ndt-rv.is-nofit .ndt-rv-tag { color: #bcaaa4; }
.ndt-rv-tag.is-in { animation: ndt-scene-in 0.3s ease forwards; }

/* ---------- Escena 5: química y tramo ---------- */
.ndt-chem-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ndt-chem-tier {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1.5px solid rgba(255, 179, 0, 0.5);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  color: #d7ccc8;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.ndt-chem-tier .nd-icon { width: 15px; height: 15px; }

.ndt-chem-tier.is-top {
  border-color: #ffe082;
  background: linear-gradient(180deg, #ffca28, #ff8f00);
  color: #3e2723;
  box-shadow: 0 0 18px rgba(255, 179, 0, 0.6);
}

.ndt-chem-tier.slam { animation: ndt-slam 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes ndt-slam {
  0%   { transform: scale(1.7); opacity: 0.2; }
  100% { transform: none; opacity: 1; }
}

.ndt-chem-score {
  color: #ffb300;
  line-height: 1;
}

.ndt-chem-score b {
  display: inline-block;
  font-family: 'Pirata One', cursive;
  font-size: 1.7rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255, 179, 0, 0.45);
}

.ndt-chem-score b.bump { animation: ndt-bump 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.ndt-chem-score small { color: #bcaaa4; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; }

@keyframes ndt-bump {
  50% { transform: scale(1.3) rotate(-4deg); color: #fff3c4; }
}

.ndt-crew {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.ndt-mate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 32px;
  transition: transform 0.25s, opacity 0.25s;
}

.ndt-mate img {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 202, 40, 0.55);
  border-radius: 7px;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.ndt-mate.is-nofit img { border-color: rgba(141, 110, 99, 0.7); }

.ndt-mate small {
  color: #d7ccc8;
  font-size: 0.54rem;
  font-weight: 800;
}

.ndt-mate.is-lit { transform: translateY(-4px); }
.ndt-mate.is-lit img { border-color: #fff3c4; box-shadow: 0 0 14px rgba(255, 202, 40, 0.95); }

.ndt-syn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 290px;
  max-width: 100%;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.ndt-syn li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.62rem;
  text-align: left;
  opacity: 0.55;
  transition: opacity 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
}

.ndt-syn-name {
  overflow: hidden;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ndt-syn-cond {
  color: #bcaaa4;
  font-size: 0.56rem;
  white-space: nowrap;
}

.ndt-syn-bonus {
  min-width: 30px;
  color: #bcaaa4;
  font-size: 0.72rem;
  text-align: right;
}

.ndt-syn li.is-on {
  opacity: 1;
  border-color: rgba(255, 179, 0, 0.7);
  background: rgba(255, 179, 0, 0.14);
  animation: ndt-pop-x 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ndt-syn li.is-on .ndt-syn-bonus { color: var(--ndt-gold); }
.ndt-syn li.is-off { opacity: 0.38; }
.ndt-syn li.is-off.hint { animation: ndt-hint 1.2s ease; }

@keyframes ndt-pop-x {
  from { transform: scale(0.92); }
  to   { transform: none; }
}

@keyframes ndt-hint {
  40% { opacity: 0.8; }
}

/* ---------- Texto del paso ---------- */
.ndt-steps {
  display: grid;
  min-height: 7.4rem;
  margin: 12px 0 8px;
}

.ndt-step { grid-area: 1 / 1; }
.ndt-step[hidden] { display: none; }
.ndt-step.is-active { animation: ndt-scene-in 0.35s ease both; }

.ndt-step-num {
  display: inline-block;
  margin-bottom: 3px;
  padding: 1px 8px;
  border: 1px solid rgba(255, 179, 0, 0.45);
  border-radius: 999px;
  color: var(--ndt-gold);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.ndt .ndt-step h3 {
  margin: 2px 0 5px;
  padding: 0;
  border: 0;
  color: #ffca28;
  font-family: 'Pirata One', cursive;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.1;
}

.ndt .ndt-step p {
  max-width: 440px;
  margin: 0 auto;
  color: #d7ccc8;
  font-size: 0.84rem;
  line-height: 1.45;
}

/* ---------- Dos columnas cuando hay sitio ----------
   Escena a la izquierda y texto + navegación a la derecha: todo el paso
   se ve de un vistazo, sin scroll, en la sección y en el modal. */
/* Envoltorio texto + navegación: transparente al layout salvo en dos columnas */
.ndt-side { display: contents; }

@container (min-width: 640px) {
  .ndt {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 26px;
    text-align: left;
  }

  .ndt-stage { grid-row: 1; height: 340px; }
  .ndt-scene { padding-bottom: 40px; transform: scale(1.24); }
  /* Columna de texto: la navegación va fija abajo (siempre en el mismo sitio)
     y el texto del paso se centra verticalmente en el espacio que queda encima */
  .ndt-side {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .ndt-steps { flex: none; margin: auto 0; }
  .ndt .ndt-step h3 { font-size: 1.65rem; }
  .ndt .ndt-step p { margin: 0; font-size: 0.9rem; }
  .ndt-nav { flex: none; justify-content: flex-start; margin-top: 10px; }
  #tutorialModal .ndt-play { grid-row: 2; }
}

/* ---------- Navegación ---------- */
.ndt-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ndt-prev,
.ndt-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border: 2px solid rgba(255, 179, 0, 0.55);
  border-radius: 999px;
  background: rgba(255, 179, 0, 0.1);
  color: #ffca28;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s, transform 0.15s;
}

.ndt-prev { width: 38px; padding: 0; }
.ndt-prev .nd-icon { transform: rotate(180deg); }
.ndt-next { padding: 0 16px; font-size: 0.86rem; }

.ndt-prev:not(:disabled):hover,
.ndt-next:not(:disabled):hover { background: rgba(255, 179, 0, 0.22); border-color: #ffb300; }

.ndt-prev:disabled,
.ndt-next:disabled { opacity: 0.3; cursor: default; }

.ndt-next[hidden],
.ndt-play[hidden] { display: none; }

.ndt-next.is-ready {
  border-color: #ffb300;
  animation: ndt-attention 1.2s ease-in-out 3;
}

.ndt-dots {
  display: flex;
  gap: 6px;
}

.ndt-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 248, 225, 0.2);
  cursor: pointer;
  transition: width 0.3s, background 0.3s;
}

.ndt-dot.is-done { background: rgba(255, 179, 0, 0.5); }
.ndt-dot.is-active { width: 24px; background: #ffb300; }

/* Botón final del modal («¡A RECLUTAR!») */
/* Quien ya lo vio: «¡A reclutar!» desde el primer paso, sin «Saltar» */
#tutorialModal .tutorial-content:has(.ndt.is-returning) .ndt-skip { display: none; }

/* Fila propia a todo el ancho, como el resto de tutoriales. Hasta el último
   paso va oculto pero conserva su hueco para que el modal no salte al aparecer. */
#tutorialModal .ndt-play {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  max-width: none;
  margin: 14px 0 0;
  padding: 12px 34px;
  border: 2px solid #3e2723;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffca28, #ffb300);
  color: #3e2723;
  font-family: 'Pirata One', cursive;
  font-size: 1.3rem;
  line-height: 1.1;
  box-shadow: 0 5px 0 #281b18, 0 8px 18px rgba(0, 0, 0, .3);
  animation: ndt-play-glow 2.4s ease-in-out infinite;
}

/* Solo un brillo suave: a todo el ancho, cualquier scale se salía de la pantalla */
@keyframes ndt-play-glow {
  50% { box-shadow: 0 5px 0 #281b18, 0 0 14px rgba(255, 179, 0, 0.45); }
}

#tutorialModal .ndt-play:hover {
  background: linear-gradient(135deg, #ffd54f, #ffb300);
}

#tutorialModal .ndt-play[hidden] {
  display: block;
  visibility: hidden;
  animation: none;
}

.ndt-prev:focus-visible,
.ndt-next:focus-visible,
.ndt-dot:focus-visible,
.ndt-skip:focus-visible {
  outline: 3px solid #ffb300;
  outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE (resultado y tutorial)
   ============================================================ */
@media (max-width: 560px) {
  #tutorialModal .tutorial-content { padding: 14px 10px 12px; }
  #tutorialModal .tutorial-title { margin-right: 54px; margin-left: 54px; }
  .nd-howto { padding: 18px 10px; }
  .ndt-stage { height: 286px; }
  .ndt .ndt-step p { font-size: 0.8rem; }
}

/* Pantallas bajas: el modal entero (escena + texto + botones) cabe sin scroll */
@media (max-height: 640px) {
  #tutorialModal .tutorial-content { padding-top: 10px; }
  #tutorialModal .tutorial-title { margin-bottom: 6px; font-size: 1.35rem; }
  #tutorialModal .ndt-steps { min-height: 6.6rem; margin: 8px 0 6px; }
}

html.tutorial-motion-reduce :is(.nd-skel-bar,
  .nd-slot.is-skeleton .nd-slot-img-wrap,
  .nd-game.is-loading .nd-card-back .nd-icon,
  .nd-card.is-spinning .nd-card-img-wrap,
  .nd-slot.is-target.is-match,
  .nd-spin-btn,
  .nd-sum-chip.enter,
  .nd-sum-tier.slam .nd-sum-crew) {
  animation: none;
}

/* El tutorial solo se detiene con «Desactivadas» elegido en Configuración
   (head_seo.php); el prefers-reduced-motion del sistema no lo para. */
html[data-tutorial-motion="reduce"] .ndt-scene,
html[data-tutorial-motion="reduce"] .ndt-card-fits i.is-lit,
html[data-tutorial-motion="reduce"] .ndt-spin,
html[data-tutorial-motion="reduce"] .ndt-slot.is-glow,
html[data-tutorial-motion="reduce"] .ndt-slot.is-match,
html[data-tutorial-motion="reduce"] .ndt-next.is-ready,
html[data-tutorial-motion="reduce"] #tutorialModal .ndt-play {
  animation: none;
}

/* ============================================================
   «Cómo se juega» de la página: mismos colores que el tutorial del modal
   (placa de arenisca con tinta oscura y medallón dorado). modals.css solo los
   aplica dentro de #tutorialModal, así que se repiten aquí para #ndTutPage.
   ============================================================ */
#ndTutPage .ndt-steps {
  padding: 12px 14px;
  color: #4a3218;
  border: none;
  border-radius: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .5 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(170deg, #ecd3a0, #d9b57a);
  box-shadow:
    inset 0 0 0 2px rgba(255, 238, 200, 0.5),
    inset 0 0 0 5px rgba(150, 108, 55, 0.35),
    inset 0 -6px 12px rgba(90, 60, 25, 0.25),
    0 5px 14px rgba(0, 0, 0, 0.4);
}

#ndTutPage .ndt-step h3 {
  color: #4a3218;
  text-shadow: 0 1px 0 rgba(255, 249, 230, 0.75);
}

#ndTutPage .ndt-step p {
  color: #5c4222;
  font-weight: 500;
  text-shadow: none;
}

#ndTutPage .ndt-step p :is(b, strong) { color: #8a5406; }

#ndTutPage .ndt-step-num {
  color: #4a2a05;
  border: none;
  background: linear-gradient(180deg, #ffe08a, #d48b12);
  box-shadow: inset 0 1px 0 rgba(255, 250, 220, 0.8), 0 2px 0 #8a5406;
  text-shadow: none;
}