.tabla-recetas {
  width: 100%;
  max-width: 930px;
  margin: 20px auto;
  border-collapse: separate;
  border-spacing: 0;
}

.tabla-recetas td {
  background-color: rgba(0, 0, 0, 0.6); /* negro transparente */
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  color: #ffffff; /* texto blanco dentro del td */
}

@media (max-width: 768px) {
  .tabla-recetas td {
    padding: 16px;        /* relleno consistente cuando pasan a block */
    overflow-wrap: anywhere; /* previene desbordes raros de texto */
  }

  .tabla-inicio {
    width: 100% !important;
    display: block;
  }

  .tabla-inicio td {
    display: block;
    padding: 0 10px;
  }

  .tabla-inicio iframe {
    height: 200px;
  }
}
/* ==== YGO Deck UI (scoped) ==== */
.twm-ygo {
  --gap: 10px;
  --border: #2a2c35;
  --bg: #0f1115;
  --card: #181a20;
  --title: #fff;
  --pill: #2f3342;
  --pillText: #e9ecf2;
  --cardW: 68px; /* ancho de carta */
}

.twm-ygo {
  box-sizing: border-box;
  display: grid;
  gap: 22px;
  padding: 14px;
}

.twm-ygo * {
  box-sizing: inherit;
}

/* ====== Grupo ====== */
.twm-ygo__group {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  padding: 12px;
  overflow-x: auto; /* permite desplazamiento horizontal */
}

/* ====== Título ====== */
.twm-ygo__title {
  margin: 0 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--title);
  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

.twm-ygo__pill {
  background: var(--pill);
  color: var(--pillText);
  font: 700 12px/1 system-ui;
  padding: 6px 10px;
  border-radius: 999px;
  min-width: 36px;
  text-align: center;
}

/* ====== Listado ====== */
.twm-ygo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(10, var(--cardW)); /* 10 cartas por fila */
  justify-content: start;
}

/* ====== Carta ====== */
.twm-ygo__item {
  position: relative;
  width: var(--cardW);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.twm-ygo__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* ====== Imagen ====== */
.twm-ygo__img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 59 / 86;
  object-fit: cover;
}

/* ====== Overlay de Banlist ====== */
.twm-ygo__imgwrap {
  position: relative;
}

.twm-ygo__ban {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 30px;
  height: 30px;
  z-index: 2;
  pointer-events: none;
}


/* ====== Nombre ====== */
.twm-ygo__name {
  display: block;
  padding: 6px 8px;
  color: #b7bbc7;
  font: 500 11px/1.2 ui-sans-serif, system-ui;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ====== Etiqueta (si decides usarla más adelante) ====== */
.twm-ygo__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #121318;
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: 700 11px/1 ui-sans-serif;
  padding: 3px 6px;
}

/* ====== Responsivo opcional ====== */
@media (min-width: 900px) {
  .twm-ygo__list {
    grid-template-columns: repeat(10, var(--cardW));
  }
}

/* Ocultar nombres debajo de las cartas */
.twm-ygo__name {
  display: none !important;
}

/* ===== Modal base ===== */
.twm-modal {
  position: fixed;
  inset: 0;
  display: none; /* oculto por defecto */
  z-index: 9999;
}

/* Mostrar cuando se abre */
.twm-modal[aria-hidden="false"] {
  display: block;
}

/* Fondo oscuro detrás del panel */
.twm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* Panel principal */
.twm-modal__panel {
  position: relative;
  margin: 4vh auto;
  max-width: 880px;
  width: calc(100% - 24px);
  background: #0f1115;
  border: 1px solid #2a2c35;
  border-radius: 14px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
  color: #e9ecf2;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  padding: 16px;
  align-items: start; /* sin hueco vertical */
}

/* Botón de cerrar */
.twm-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #181a20;
  border: 1px solid #2a2c35;
  color: #e9ecf2;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.twm-modal__close:hover {
  background: #2a2c35;
}

/* Imagen (lado izquierdo) */
.twm-modal__imgwrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #181a20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.twm-modal__imgwrap img {
  width: 90%;
  height: auto;
  display: block;
}

/* Datos (lado derecho) */
.twm-modal__data {
  display: grid;
  gap: 10px;
  align-content: start; /* sin espacio superior */
}

.twm-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #00c3ff;
}

.twm-modal__rows {
  display: grid;
  gap: 8px;
  align-content: start; /* filas compactas */
}

/* Cada fila de dato */
.twm-modal__row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 8px;
  background: #181a20;
  border: 1px solid #2a2c35;
  border-radius: 10px;
  padding: 6px 10px;
}

.twm-modal__label {
  color: #b7bbc7;
  font-size: 14px;
  line-height: 1.3;
}

.twm-modal__value {
  color: #e9ecf2;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}

/* Responsivo */
@media (max-width: 720px) {
  .twm-modal__panel {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .twm-modal__imgwrap {
    width: 35%;
    max-width: 320px;
    margin: 0 auto;
  }


  .twm-ygo {
  --gap: 2px;
  --border: #2a2c35;
  --bg: #0f1115;
  --card: #181a20;
  --title: #fff;
  --pill: #2f3342;
  --pillText: #e9ecf2;
  --cardW: 28px; /* ancho de carta */
  }

  .twm-ygo__ban {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 16px;
  height: 16px;
  z-index: 2;
  pointer-events: none;
  }

  .banlist-box {
    display: block !important; /* o inline-block, según tu diseño */
  }

}

body.is-modal-open {
  overflow: hidden;
  padding-right: var(--sbw, 0px);
}

.tw-btn-img img {
  width: 100px;       /* ajusta el tamaño */
  height: auto;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.tw-btn-img img:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.tw-btn-img img:active {
  transform: scale(0.98);
}

/* Fila especial para "Cartas Sugeridas" y "Cartas Peligrosas" */
.twm-ygo__row-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* En móvil — mantenerlas lado a lado pero más compactas */
@media (max-width: 720px) {
  .twm-ygo__row-two {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Ajusta las cartas internas para que quepan */
  .twm-ygo__row-two .twm-ygo__list {
    grid-template-columns: repeat(5, var(--cardW)) !important;
  }

  .twm-ygo__row-two .twm-ygo__group {
    padding: 6px !important;
  }
}