/* ══════════════════════════════════════════════
   MAZOS VIEW  (css/mazos-view.css)
   Mis Mazos tab — deck management UI
══════════════════════════════════════════════ */

/* ── View container ── */
#view-mazos {
  position: fixed; top: 48px; left: 0; right: 0; bottom: 0;
  background: #111118;
  display: flex; flex-direction: column;
  font-family: system-ui, sans-serif;
  overflow: hidden;
  z-index: 9050;
  color: #e0e0e0;
}

/* ── Sub-views ── */
#mz-grid-view,
#mz-detail-view {
  display: flex; flex-direction: column;
  flex: 1; overflow: hidden;
  min-height: 0;
}
#mz-detail-view { display: none; }

/* ════ DECK GRID VIEW ═════════════════════════════════════════════ */

/* Header bar */
#mz-header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px 12px;
  background: #1a1a28;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
#mz-title {
  font-family: system-ui, sans-serif;
  font-size: 16px; font-weight: 600;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.02em;
}
#mz-deck-count {
  font-family: system-ui, sans-serif;
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
  margin-right: auto;   /* espaciador: empuja «Seleccionar»+«Nuevo mazo» a la derecha, juntos */
}
#mz-new-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  font-size: 12px; font-weight: 700;
  font-family: system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
#mz-new-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
#mz-new-btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.22);
}

/* Botón «Seleccionar» — mismo skin neutro, a la izquierda de «Nuevo mazo» */
#mz-select-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  font: 700 12px system-ui, sans-serif; letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
#mz-select-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
#mz-select-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.22); }

/* En modo selección, la barra sustituye al conmutador Meta/Mis mazos + contador */
#mz-header.mz-selecting #mz-mode-toggle,
#mz-header.mz-selecting #mz-deck-count { display: none; }

/* Barra de selección múltiple — ocupa el ancho; acciones a la derecha */
#mz-select-bar {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
}
#mz-sel-count {
  font: 700 12px system-ui, sans-serif; letter-spacing: 0.03em;
  color: rgba(255,255,255,0.6);
  margin-right: auto;   /* separa Cancelar+contador (izq) de las acciones (dcha) */
}
#mz-select-bar button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.62);
  font: 700 12px system-ui, sans-serif; letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
#mz-select-bar button:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.22); }
#mz-sel-del.mz-sel-danger { border-color: rgba(220,60,60,0.28); color: rgba(230,110,110,0.85); }
#mz-sel-del.mz-sel-danger:hover:not(:disabled) { background: rgba(220,60,60,0.14); color: rgba(245,130,130,0.95); border-color: rgba(220,60,60,0.5); }
#mz-select-bar button:disabled { opacity: 0.4; cursor: default; }
#mz-select-bar button:disabled:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.62); border-color: rgba(255,255,255,0.12); }
/* Botón «Favoritos» — dorado cuando la selección ya es toda favorita */
#mz-sel-fav.on { border-color: rgba(240,200,90,0.5); color: rgba(245,205,110,0.95); background: rgba(240,200,90,0.1); }
#mz-sel-fav.on svg { fill: rgba(245,205,110,0.95); }

/* Scrollable grid body */
#mz-grid-body {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 20px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
#mz-grid-body::-webkit-scrollbar { width: 6px; }
#mz-grid-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* Grid layout */
#mz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

/* Empty state */
#mz-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 40px;
  gap: 14px;
  color: rgba(255,255,255,0.25);
  font-size: 15px; text-align: center;
}
#mz-empty svg { width: 48px; height: 48px; opacity: 0.2; }
#mz-empty-hint {
  font-size: 12px; color: rgba(255,255,255,0.18); line-height: 1.6;
}

/* ── Deck card ── */
.mz-deck-card {
  display: flex; flex-direction: column;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: #16161f;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 0.18s, transform 0.2s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.2s;
}
.mz-deck-card:hover {
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}

/* Stack preview: 3 back layers + front card, like "Mis Mazos" sidebar */
.mz-stack {
  position: relative;
  aspect-ratio: 400/559;
  margin-bottom: 18px;
}
.mz-stack-back {
  position: absolute; inset: 0;
  border-radius: 9px;
  background-size: cover; background-position: center;
  background-color: #252535;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.26s cubic-bezier(0.34,1.3,0.64,1), opacity 0.24s;
}
.mz-stack-back-3 { transform: translateY(10px); opacity: 0.35; z-index: 0; }
.mz-stack-back-2 { transform: translateY(6px);  opacity: 0.55; z-index: 1; }
.mz-stack-back-1 { transform: translateY(3px);  opacity: 0.78; z-index: 2; }
.mz-stack-front {
  position: absolute; inset: 0; z-index: 3;
  border-radius: 9px;
  background-size: cover; background-position: center;
  background-color: #1a1a2a;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s;
}
.mz-stack-front-empty {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e1e30, #252540);
}
.mz-stack-front-empty svg {
  width: 40px; height: 40px; opacity: 0.18;
}
/* Hover: el mazo "se abre" — las cartas del stack se separan por igual.
   Esa separación (NO un zoom que recorta el borde) es lo que da la sensación
   de elevación. La info tapa con su fondo el borde inferior que asoma. */
.mz-deck-card:hover .mz-stack-front {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.mz-deck-card:hover .mz-stack-back-1 { transform: translateY(6px);  opacity: 0.9;  }
.mz-deck-card:hover .mz-stack-back-2 { transform: translateY(12px); opacity: 0.68; }
.mz-deck-card:hover .mz-stack-back-3 { transform: translateY(18px); opacity: 0.48; }

/* Miniatura compuesta (cartas destacadas): 2-3 bandas = mitad superior de cada carta */
.mz-thumb-bands { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: inherit; overflow: hidden; }
.mz-thumb-band {
  flex: 1 1 0; min-height: 0;
  background-size: 100% auto; background-repeat: no-repeat;
  background-color: #14141c;
}
.mz-thumb-band + .mz-thumb-band { box-shadow: inset 0 1px 0 rgba(0,0,0,0.55); }

/* Marca de selección (solo en modo selección) */
.mz-select-check {
  position: absolute; top: 9px; left: 9px; z-index: 6;
  width: 22px; height: 22px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: rgba(14,14,22,0.55); border: 2px solid rgba(255,255,255,0.55);
  color: transparent;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.mz-select-check { z-index: 8; }   /* por encima del tinte de selección */
.mz-select-check svg { width: 13px; height: 13px; }
.mz-deck-card.mz-selectable .mz-select-check { display: flex; }
.mz-deck-card.mz-selectable .mz-fav-badge,
.mz-deck-card.mz-selectable .mz-deck-btns { display: none; }
/* Al ocultar los botones en selección, la energía se queda en su esquina (dcha), no salta */
.mz-deck-card.mz-selectable .mz-deck-bar { justify-content: flex-end; }
/* Selección MUY visible: tinte de toda la tarjeta + contorno grueso + check sólido */
.mz-deck-card.mz-selected {
  border-color: #4dabff;
  box-shadow: 0 0 0 2px rgba(77,171,255,0.75), 0 8px 22px rgba(30,120,220,0.35);
}
.mz-deck-card.mz-selected::after {
  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border-radius: inherit;
  background: rgba(77,171,255,0.26);
}
.mz-deck-card.mz-selected .mz-select-check {
  background: #4dabff; border-color: #4dabff; color: #fff;
  box-shadow: 0 2px 8px rgba(30,120,220,0.6);
}

/* Estrella de favorito (esquina sup. izq., fuera de modo selección) */
.mz-fav-badge {
  position: absolute; top: 8px; left: 8px; z-index: 6;
  width: 24px; height: 24px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,14,22,0.55); border: 1px solid rgba(240,200,90,0.35);
  color: rgba(245,205,110,0.98);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.mz-fav-badge svg { width: 14px; height: 14px; }

/* Rubber-band: rectángulo de selección con el ratón */
.mz-rubber {
  position: fixed; z-index: 9200; pointer-events: none;
  background: rgba(77,171,255,0.14);
  border: 1px solid rgba(77,171,255,0.6);
  border-radius: 3px;
}

/* Info area below thumb */
.mz-deck-info {
  position: relative; z-index: 5;
  background: #16161f;
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.mz-deck-name {
  font-family: system-ui, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  color: rgba(255,255,255,0.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mz-deck-date {
  font-size: 10.5px; color: rgba(255,255,255,0.34);
  letter-spacing: 0.01em;
}
/* Barra inferior: botones (izq) + orbes de energía (esquina inferior derecha) */
.mz-deck-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px; margin-top: 8px;
}
.mz-deck-btns { display: flex; gap: 6px; }
.mz-deck-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.58);
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.1s;
}
.mz-deck-btn svg { width: 14px; height: 14px; }
.mz-deck-btn:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.2); }
.mz-deck-btn:active { transform: scale(0.94); }
.mz-deck-energy { display: flex; align-items: center; gap: 4px; padding-bottom: 3px; }
.mz-deck-energy .mz-el-orb { width: 17px; height: 17px; }

/* ════ DECK DETAIL VIEW ══════════════════════════════════════════ */

/* Detail header */
#mz-detail-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: #1a1a28;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
#mz-back-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  font-size: 12px; font-weight: 700;
  font-family: system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#mz-back-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
#mz-detail-deck-name-header {
  font-family: system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.85);
}

/* Detail body: two columns */
#mz-detail-body {
  flex: 1; overflow: hidden; min-height: 0;
  display: flex; gap: 0;
}

/* Left: card grid */
#mz-detail-cards-col {
  flex: 0 0 60%;
  overflow-y: auto;
  padding: 16px;
  border-right: 1px solid rgba(255,255,255,0.07);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
#mz-detail-cards-col::-webkit-scrollbar { width: 6px; }
#mz-detail-cards-col::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* 5-column card grid */
#mz-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

/* Individual card in detail grid */
.mz-detail-card {
  position: relative;
  aspect-ratio: 400/559;
  border-radius: 8px;
  background-size: cover; background-position: center;
  background-color: #252535;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s;
  overflow: visible;
}
.mz-detail-card:hover {
  transform: scale(1.04) translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.65);
  border-color: rgba(255,255,255,0.22);
  z-index: 2;
}
.mz-detail-card-empty {
  background-color: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.08);
}
/* Duplicate badge */
.mz-card-count-badge {
  position: absolute; top: -4px; right: -4px;
  background: rgba(18,18,28,0.95);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  font-family: system-ui, sans-serif;
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,0.8);
  padding: 1px 4px;
  line-height: 1.3;
  pointer-events: none;
  z-index: 3;
}

/* Section label inside detail */
.mz-section-label {
  font-size: 9px; font-weight: 800;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 6px; margin-top: 12px;
  font-family: system-ui, sans-serif;
}
.mz-section-label:first-child { margin-top: 0; }

/* Right: stats + actions */
#mz-detail-info-col {
  flex: 0 0 40%;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
#mz-detail-info-col::-webkit-scrollbar { width: 6px; }
#mz-detail-info-col::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* Deck name editable */
#mz-detail-name {
  font-family: system-ui, sans-serif;
  font-size: 18px; font-weight: 600;
  color: rgba(255,255,255,0.92);
  outline: none;
  border-radius: 6px;
  padding: 2px 4px;
  cursor: text;
  transition: background 0.15s;
  word-break: break-word;
}
#mz-detail-name:focus {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}

/* Stats panel */
.mz-stats-panel {
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.mz-stat-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
}
.mz-stat-label {
  color: rgba(255,255,255,0.4);
  font-family: system-ui, sans-serif;
}
.mz-stat-value {
  font-family: system-ui, sans-serif;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
}

/* Type breakdown bar */
.mz-type-bar {
  display: flex; border-radius: 4px; overflow: hidden;
  height: 6px; gap: 1px;
}
.mz-type-bar-poke {
  background: rgba(100,220,100,0.7);
  border-radius: 3px 0 0 3px;
  transition: width 0.3s ease;
}
.mz-type-bar-trainer {
  background: rgba(100,170,255,0.7);
  border-radius: 0 3px 3px 0;
  transition: width 0.3s ease;
}

/* Element dots row */
.mz-element-row {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.mz-el-dot {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.5);
  font-family: system-ui, sans-serif;
}
.mz-el-dot-circle {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.mz-el-orb {
  width: 16px; height: 16px; object-fit: contain; flex-shrink: 0;
  border-radius: 50%;   /* los orbes son JPEG sin transparencia → recortar esquinas negras */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* ── Editor de energías (detalle, solo mazos propios) ── */
/* La energía de la cabecera es editable: se toca y sale el popover (como el nombre) */
.mz-energy-editable { cursor: pointer; border-radius: 7px; padding: 2px 6px; transition: background 0.14s; }
.mz-energy-editable:hover { background: rgba(255,255,255,0.07); }
.mz-energy-add {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 11px system-ui, sans-serif; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.4);
}
.mz-energy-add svg { width: 12px; height: 12px; }

/* Popover del selector de energía */
.mz-energy-pop {
  position: fixed; z-index: 9300;
  display: flex; flex-wrap: wrap; gap: 7px; max-width: 220px;
  padding: 12px; border-radius: 12px;
  background: rgba(20,20,28,0.97);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(-4px) scale(0.98);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.mz-energy-pop.open { opacity: 1; transform: none; }

.mz-energy-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  opacity: 0.4;
  filter: grayscale(0.85);
  transition: opacity 0.15s, filter 0.15s, background 0.15s, border-color 0.15s, transform 0.1s;
}
.mz-energy-toggle .mz-el-orb { width: 20px; height: 20px; }
.mz-energy-toggle:hover { opacity: 0.8; filter: grayscale(0.3); border-color: rgba(255,255,255,0.2); }
.mz-energy-toggle:active { transform: scale(0.92); }
.mz-energy-toggle.on {
  opacity: 1; filter: none;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.28);
}

/* Stage row */
.mz-stage-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.mz-stage-badge {
  padding: 3px 10px; border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.7);
  font-family: system-ui, sans-serif;
}

/* Action buttons in detail */
#mz-detail-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0 6px;
}
.mz-detail-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.62);
  font-family: system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mz-detail-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.mz-detail-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }
/* Solo icono: el texto del botón = tooltip al pasar el ratón (aparece a los 0.5s). */
.mz-detail-btn span {
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: rgba(14,14,22,0.97); color: rgba(255,255,255,0.9);
  font: 700 11px system-ui, sans-serif; letter-spacing: 0.02em; white-space: nowrap;
  padding: 5px 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.1);
  pointer-events: none; opacity: 0; transition: opacity 0.15s 0.5s; z-index: 5;
}
.mz-detail-btn:hover span { opacity: 1; }
.mz-detail-btn.eliminar {
  border-color: rgba(220,60,60,0.2);
  color: rgba(220,100,100,0.6);
}
.mz-detail-btn.eliminar:hover { background: rgba(220,60,60,0.12); color: rgba(240,120,120,0.9); border-color: rgba(220,60,60,0.35); }

/* ── Export toast ── */
#mz-export-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(18,18,28,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13px; font-weight: 700; font-family: system-ui, sans-serif;
  color: rgba(255,255,255,0.85);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
#mz-export-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Responsive: narrow screens ── */
@media (max-width: 600px) {
  #mz-detail-body { flex-direction: column; }
  #mz-detail-cards-col {
    flex: none; max-height: 50vh;
    border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  #mz-detail-info-col { flex: none; }
  #mz-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ══ AESTHETIC UPDATE — align with app design language ══ */

/* Headers transparent — same as Cartas */
#mz-header, #mz-detail-header {
  background: transparent !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* Deck cards — less opaque, more subtle */
.mz-deck-card {
  border-radius: 10px !important;
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.mz-deck-card:hover {
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.05) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,0.5) !important;
}

/* Thumbnail fallback — darker */
.mz-stack-front-empty { background: linear-gradient(135deg, #141420, #1c1c2e) !important; }

/* Detail back button — match app style */
#mz-back-btn { border-radius: 10px !important; }

/* Stats panel — no heavy surface */
.mz-stats-panel {
  background: rgba(255,255,255,0.025) !important;
  border-radius: 10px !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Detail column separator */
#mz-detail-body { gap: 20px !important; }
#mz-detail-cards-col { border-right-color: rgba(255,255,255,0.05) !important; }

/* Grid gap more breathable */
#mz-grid { gap: 14px !important; }

/* ══ SELECTOR DE RIVAL (Probar mazo) — cápsulas horizontales ══ */
.mz-rival-modal { width: 575px; max-width: calc(100vw - 48px); }
.mz-rival-title { text-align: center; font-size: 16px; }
.mz-rival-sub-head { text-align: center; margin-top: -8px; }
.mz-rival-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  max-height: 340px; overflow-y: auto; padding: 2px;
}
.mz-rival-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 12px;
  border: 1.5px solid transparent;
  background: rgba(255,255,255,0.04);
  cursor: pointer; font-family: system-ui, sans-serif;
  text-align: left; width: 100%;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.mz-rival-opt:hover { background: rgba(255,255,255,0.08); }
.mz-rival-opt:active { transform: scale(0.98); }
.mz-rival-opt.sel { border-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); }
.mz-rival-opt.disabled { opacity: 0.35; cursor: default; }
/* Stack de cartas — mismo lenguaje que Mis Mazos de la sidebar */
.mz-rival-stack {
  width: 52px; height: 73px; flex-shrink: 0;
  position: relative; border-radius: 5px;
}
.mzr-back {
  position: absolute; inset: 0; border-radius: 5px;
  background-size: cover; background-position: center;
}
.mzr-back-3 { transform: translateY(5px); opacity: 0.45; }
.mzr-back-2 { transform: translateY(3.5px); opacity: 0.65; }
.mzr-back-1 { transform: translateY(2px); opacity: 0.82; }
.mzr-front {
  position: absolute; inset: 0; border-radius: 5px;
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,0.06);
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}
.mzr-front-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
}
.mz-rival-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mz-rival-name {
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.88);
  line-height: 1.3; word-break: break-word;
}
.mz-rival-sub { font-size: 11px; color: rgba(255,255,255,0.35); }
.mz-rival-section {
  grid-column: 1 / -1;
  font-family: system-ui, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 9px 4px 2px;
}
.mz-rival-section:first-child { padding-top: 2px; }
/* Picker: dos pestañas deslizantes (Mis mazos / Mazos meta) */
.mz-pick-tabs {
  position: relative; display: flex; gap: 0;
  background: rgba(255,255,255,0.04); border-radius: 10px; padding: 4px;
  margin-bottom: 4px;
}
.mz-pick-tab {
  position: relative; z-index: 1; flex: 1 1 0;
  padding: 8px 10px; border: none; background: transparent;
  color: rgba(255,255,255,0.5);
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: color 0.18s;
}
.mz-pick-tab:hover { color: rgba(255,255,255,0.82); }
.mz-pick-tab.active { color: #fff; }
.mz-pick-tab-ind {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  background: rgba(255,255,255,0.1); border-radius: 7px;
  transition: transform 0.24s cubic-bezier(0.4,0,0.2,1);
}
.mz-pick-tabs.on-meta .mz-pick-tab-ind { transform: translateX(100%); }
.mz-pick-empty {
  grid-column: 1 / -1; text-align: center; padding: 34px 12px; white-space: pre-line;
  color: rgba(255,255,255,0.35); font-family: system-ui, sans-serif; font-size: 13px; line-height: 1.5;
}
/* Lado "aleatorio oculto" del selector: dorso de carta (misterio) */
.start-sel-cover.mystery { background-color: rgba(255,255,255,0.04); }

/* ══ SELECTOR DE INICIO X-vs-Y (vertical) ══ */
.start-sel { width: min(380px, calc(100vw - 36px)); gap: 8px; padding: 16px 18px; }
.start-sel-side {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 13px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid color-mix(in srgb, var(--pc) 50%, rgba(255,255,255,0.06));
}
.start-sel-label {
  font-family: system-ui, sans-serif; font-weight: 800; font-size: 12px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--pc);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.start-sel-cover {
  position: relative; cursor: pointer;
  width: 94px; aspect-ratio: 367 / 512; border-radius: 8px;
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,0.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.16s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.16s, filter 0.16s, border-color 0.16s;
}
.start-sel-cover:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 26px rgba(0,0,0,0.6);
  filter: brightness(1.07);
  border-color: color-mix(in srgb, var(--pc) 60%, rgba(255,255,255,0.12));
}
.start-sel-cover:active { transform: translateY(-1px) scale(0.99); }
.start-sel-cover.empty {
  color: rgba(255,255,255,0.4); font-size: 11px; line-height: 1.4; text-align: center;
  padding: 8px; font-family: system-ui, sans-serif;
}
/* Insignia "cambiar mazo" en la esquina (color del jugador) — clic en el mazo para elegir otro */
.start-sel-edit {
  position: absolute; top: -8px; right: -8px;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--pc, #4dabff); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid #16161f;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: transform 0.16s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.16s;
}
.start-sel-edit svg { width: 13px; height: 13px; }
.start-sel-cover:hover .start-sel-edit { transform: scale(1.15); box-shadow: 0 3px 11px rgba(0,0,0,0.55); }
.start-sel-deckname {
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.7); text-align: center; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color 0.15s;
}
.start-sel-deckname:hover { color: rgba(255,255,255,0.95); }
.start-sel-vs {
  font-family: system-ui, sans-serif; font-weight: 900; font-size: 19px;
  letter-spacing: 2px; color: rgba(255,255,255,0.45); text-align: center; margin: -1px 0;
}
.start-sel-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.start-sel-actions .pb-btn { display: block; width: 100%; text-align: center; }
.start-sel-begin:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* ══ INTRO VS ══ */
#vs-overlay {
  position: fixed; inset: 0; z-index: 999990;
  background: rgba(8,8,14,0);
  display: flex; align-items: center; justify-content: center; gap: 56px;
  pointer-events: none;
  transition: background 0.35s;
}
#vs-overlay.in { background: rgba(8,8,14,0.94); pointer-events: auto; }
.vs-side {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.4s;
}
.vs-left  { transform: translateX(-56px); }
.vs-right { transform: translateX(56px); }
#vs-overlay.in .vs-side { opacity: 1; transform: translateX(0); }
.vs-cover {
  width: 150px; height: 210px; border-radius: 11px;
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,0.05);
  box-shadow: 0 18px 48px rgba(0,0,0,0.6);
}
.vs-name {
  font-family: system-ui, sans-serif; font-size: 15px; font-weight: 600;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vs-name-p1 { color: #4dabff; }
.vs-name-p2 { color: #ff6b6b; }
.vs-text {
  font-family: system-ui, sans-serif; font-size: 44px; font-weight: 800;
  color: rgba(255,255,255,0.95); letter-spacing: 0.04em;
  opacity: 0; transform: scale(1.7); filter: blur(8px);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1) 0.18s,
              opacity 0.35s ease 0.18s, filter 0.45s ease 0.18s;
  text-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
#vs-overlay.in .vs-text { opacity: 1; transform: scale(1); filter: blur(0); }
#vs-overlay.out { opacity: 0; transition: opacity 0.3s; }

/* ══ MANO INICIAL: probabilidades por básico ══ */
#mz-start-probs { display: flex; flex-direction: column; gap: 6px; }
.mz-prob-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.035);
  transition: background 0.15s;
}
.mz-prob-row:hover { background: rgba(255,255,255,0.07); }
.mz-prob-thumb {
  width: 40px; height: 56px; border-radius: 4px; flex-shrink: 0;
  background-size: cover; background-position: center top;
  background-color: rgba(255,255,255,0.06);
}
.mz-prob-name {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85);
  font-family: system-ui, sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mz-prob-vals {
  font-size: 11.5px; color: rgba(255,255,255,0.35);
  font-family: system-ui, sans-serif; white-space: nowrap;
}
.mz-prob-vals b { color: rgba(255,255,255,0.78); font-weight: 600; }
.mz-prob-empty { font-size: 11px; color: rgba(255,200,90,0.7); font-family: system-ui, sans-serif; }

/* ── Click = zoom SOLO en la miniatura (no toda la barra); hover en la fila = tooltip. ── */
.mz-prob-thumb, .mz-md-fthumb { cursor: zoom-in; }
.mz-tip {
  position: fixed; z-index: 12000; pointer-events: none;
  max-width: 280px; padding: 9px 12px; border-radius: 10px;
  background: rgba(18,18,26,0.98); border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  font: 12px/1.45 system-ui, sans-serif; color: rgba(255,255,255,0.82);
  opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s;
}
.mz-tip.show { opacity: 1; transform: translateY(0); }
.mz-tip b { color: #fff; font-weight: 700; }
.mz-tip::after {
  content: ''; position: absolute; left: var(--mztip-ax, 50%); top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(18,18,26,0.98);
}
.mz-tip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: rgba(18,18,26,0.98); }

/* Renombrar mazo desde el título de la cabecera (doble clic) */
#mz-detail-deck-name-header.mz-rename { cursor: text; }
#mz-detail-deck-name-header[contenteditable="true"] { outline: 1px solid rgba(255,255,255,0.25); border-radius: 5px; padding: 0 4px; background: rgba(255,255,255,0.04); }

/* Energía del mazo junto al nombre en la cabecera del detalle */
.mz-detail-energy { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; vertical-align: middle; }
.mz-detail-energy .mz-el-orb { width: 18px; height: 18px; }

/* ── Mano inicial: nombre + cifras en una línea (sin barras) ── */
.mz-prob-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

/* ── Robada para el turno v2: curva acumulada ── */
.mz-turn2-chart { margin-top: 2px; }
.mz-tc-svg { width: 100%; height: auto; display: block; overflow: visible; }
.mz-tc-line { stroke: #6fe6a0; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mz-tc-dot { fill: #6fe6a0; }
.mz-tc-dot.key { fill: #fff; stroke: #6fe6a0; stroke-width: 2; }
.mz-tc-pct { fill: rgba(255,255,255,0.5); font: 700 9px system-ui, sans-serif; }
.mz-tc-pct.key { fill: #fff; font-size: 11px; }
.mz-tc-lbl { fill: rgba(255,255,255,0.4); font: 600 8.5px system-ui, sans-serif; }
.mz-tc-lbl.key { fill: rgba(255,255,255,0.7); }
.mz-tc-mid { stroke: rgba(255,255,255,0.13); stroke-width: 1; stroke-dasharray: 3 3; }
.mz-tc-midlbl { fill: rgba(255,255,255,0.3); font: 600 7.5px system-ui, sans-serif; }

/* Chips del modal de export */
.mz-export-lbl {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.4);
  font-family: system-ui, sans-serif; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.mz-export-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mz-export-chip {
  padding: 7px 14px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.11);
  background: transparent; color: rgba(255,255,255,0.5);
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.mz-export-chip:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); }
.mz-export-chip:active { transform: scale(0.96); }
.mz-export-chip.sel { border-color: rgba(255,255,255,0.85); color: #fff; background: rgba(255,255,255,0.08); }


/* ══ MENÚ COMPARTIR ══ */
.mz-share-modal { width: 320px; }
.mz-share-list { display: flex; flex-direction: column; gap: 7px; }
.mz-share-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: background 0.15s, transform 0.1s;
}
.mz-share-opt:hover { background: rgba(255,255,255,0.09); }
.mz-share-opt:active { transform: scale(0.97); }
.mz-share-opt svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.8; }

/* ══ CALCULADORA «ROBADA PARA EL TURNO» ══ */
.mz-turn-select {
  width: 100%;
  padding: 7px 10px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.88);
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; outline: none;
  margin-bottom: 7px;
}
.mz-turn-select:hover { background: rgba(255,255,255,0.08); }
.mz-turn-select option { background: #16161f; }
.mz-turn-chips { display: flex; gap: 5px; }
.mz-turn-chip {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 2px; border-radius: 8px;
  background: rgba(255,255,255,0.035);
}
.mz-turn-chip-t { font-size: 9.5px; font-weight: 600; color: rgba(255,255,255,0.35); }
.mz-turn-chip b { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.88); }

/* ════ SECCIÓN META — Mejores mazos (tanda 2) ═════════════════════ */

/* Toggle Mis mazos | Meta (estética Cartas: blanco translúcido) */
#mz-mode-toggle {
  display: inline-flex; padding: 4px; gap: 3px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
}
.mz-mode-btn {
  appearance: none; border: none; cursor: pointer;
  padding: 9px 20px; border-radius: 9px;
  background: transparent; color: rgba(255,255,255,0.55);
  font-family: system-ui, sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s;
}
.mz-mode-btn:hover { color: rgba(255,255,255,0.8); }
.mz-mode-btn.active {
  background: rgba(255,255,255,0.11);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* Banner del meta (fuente + expansión + fecha) */
#mz-meta-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -4px 0 16px; padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-family: system-ui, sans-serif;
  font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.5;
}
#mz-meta-banner b { color: rgba(255,255,255,0.85); font-weight: 700; }
#mz-meta-banner .mz-meta-dot { opacity: 0.35; }
#mz-meta-banner .mz-meta-src { margin-left: auto; color: rgba(255,255,255,0.35); }

/* Tarjeta de mazo meta (hereda .mz-deck-card para hover/borde/acciones) */
.mz-meta-card .mz-meta-thumb {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 10px 14px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.05), transparent 70%);
}
.mz-meta-rank {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.8);
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 800;
}

/* Imagen de arquetipo: tamaño carta, corte horizontal, mitad superior de cada protagonista */
.mz-arch {
  position: relative; width: 104px; aspect-ratio: 367/512;
  border-radius: 9px; overflow: hidden; background: #12121c;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.mz-arch .mz-arch-h {
  position: absolute; left: 0; right: 0; height: 50%;
  background-size: 100% auto; background-repeat: no-repeat; background-position: center top;
}
.mz-arch .mz-arch-h.top { top: 0; }
.mz-arch .mz-arch-h.bot { bottom: 0; }
.mz-arch .mz-arch-h.full { top: 0; height: 100%; background-size: cover; background-position: center; }
.mz-arch .mz-arch-seam {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  transform: translateY(-1px);
  background: rgba(255,255,255,0.6); box-shadow: 0 0 4px rgba(0,0,0,0.55);
}

/* Línea de stats del meta (uso / victorias) bajo el nombre */
.mz-meta-statline {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; color: rgba(255,255,255,0.45);
}
.mz-meta-statline .mz-meta-num { color: rgba(255,255,255,0.85); font-weight: 800; }
.mz-meta-statline .mz-meta-dot { opacity: 0.35; }

/* Botón Guardar en Mis Mazos (detalle) — neutro, sutilmente destacado */
.mz-detail-btn.guardar {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.82);
}
.mz-detail-btn.guardar:hover {
  background: rgba(255,255,255,0.13); color: #fff; border-color: rgba(255,255,255,0.3);
}

/* Línea meta dentro del detalle (uso / victorias / partidas) */
.mz-meta-detail-line {
  display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 6px;
}
.mz-meta-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  font-family: system-ui, sans-serif; font-size: 11px; color: rgba(255,255,255,0.6);
}
.mz-meta-chip b { color: #fff; font-weight: 800; }

/* ════ META — tabla ultra-minimalista (estética lista de Cartas) ═══ */
#mz-grid-body.mz-meta-mode #mz-grid { display: block; }
#mz-meta-wrap { overflow-x: auto; }

.mz-meta-table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; font-size: 14px; }
.mz-meta-table th {
  background: #15151f; border-bottom: 1px solid #2a2a3a;
  padding: 9px 14px; text-align: left; color: #888;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap; position: sticky; top: 0; z-index: 2; user-select: none;
}
.mz-meta-table th.num { text-align: right; }
.mz-meta-table th.sortable { cursor: pointer; transition: color .13s; }
.mz-meta-table th.sortable:hover { color: #bbb; }
.mz-meta-table th.sorted { color: #e6e6ee; }
.mz-meta-table th .mz-sort-arrow { font-size: 9px; margin-left: 4px; }

/* Filas relajadas: ~doble de altas, con aire entre mazos */
.mz-meta-table td { padding: 15px 14px; border-bottom: 1px solid #1a1a24; vertical-align: middle; color: #e0e0e0; }
.mz-meta-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; }
.mz-meta-table tr.mz-trow { cursor: pointer; }
.mz-meta-table tr.mz-trow:hover td { background: #1a1a26; }

.mz-meta-table .mz-rk { color: #5e5e6e; font-variant-numeric: tabular-nums; text-align: right; width: 1%; padding-right: 10px; font-size: 14px; }
.mz-meta-table .mz-tcell-thumb { width: 1%; padding-right: 6px; }
/* Las dos cartas protagonistas COMPLETAS, una al lado de otra, sin redondez extra */
.mz-meta-table .mz-tcards { display: flex; gap: 5px; align-items: center; }
.mz-meta-table .mz-tcard { height: 92px; width: auto; display: block; border-radius: 0; box-shadow: 0 2px 7px rgba(0,0,0,.5); }
.mz-meta-table .mz-tname { font-weight: 500; font-size: 15.5px; color: rgba(255,255,255,0.92); white-space: nowrap; }
.mz-meta-table td.wr.pos { color: #6fe6a0; }
.mz-meta-table td.wr.neg { color: #ff8f8f; }

.mz-meta-table .mz-tbar {
  display: inline-block; width: 48px; height: 5px; border-radius: 3px; margin-right: 10px;
  background: rgba(255,255,255,0.08); overflow: hidden; vertical-align: middle;
}
.mz-meta-table .mz-tbar > span { display: block; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0.55), rgba(255,255,255,0.22)); }

/* Tendencia: COLUMNA propia a la derecha del uso (no empuja el %) */
.mz-meta-table th.mz-tcol-h, .mz-meta-table td.mz-tcol { width: 1%; white-space: nowrap; padding-left: 4px; }
.mz-meta-table .mz-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: default;
}
.mz-meta-table .mz-trend.up   { color: #6fe6a0; }
.mz-meta-table .mz-trend.down { color: #ff8f8f; }
/* Orbe DORADA "nuevo" — brillante y con glow pulsante */
/* Indicador «nuevo» en la lista del meta — badge limpio (sin el punto amarillo) */
.mz-newbadge {
  display: inline-block; padding: 2px 7px; border-radius: 6px; cursor: default;
  font: 700 9px system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: #cfe3ff; background: rgba(120,170,255,0.16); border: 1px solid rgba(120,170,255,0.35);
}

/* ── Barra de filtros del meta (estilo Cartas) ── */
#mz-meta-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
#mz-meta-search {
  flex: 0 0 auto; width: 210px; max-width: 40vw;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px; padding: 8px 12px; color: #e8e8ee;
  font-family: system-ui, sans-serif; font-size: 13px; outline: none;
  transition: border-color .15s, background .15s;
}
#mz-meta-search:focus { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.07); }
#mz-meta-search::placeholder { color: rgba(255,255,255,0.34); }
/* Tendencia (Nuevos / En alza / En caída): UNA pill segmentada estilo Cartas (.cv-chip-group),
   con color de estado por segmento. El resto de la apariencia la hereda de cards-view.css. */
.mz-trend-group .cv-chip { gap: 6px; }
.mz-trend-group .cv-chip .mz-fic { font-size: 10px; opacity: 0.85; }
.mz-trend-group .cv-chip[data-q="new"].active     { background: rgba(120,170,255,0.22); color: #cfe3ff; }
.mz-trend-group .cv-chip[data-q="rising"].active  { background: rgba(111,230,160,0.22); color: #aef0c8; }
.mz-trend-group .cv-chip[data-q="falling"].active { background: rgba(255,143,143,0.2);  color: #ffc2c2; }

/* Dropdown «Ajustes avanzados» (mismo look que el de Cartas #cv-advanced) */
#mz-advanced { flex-basis: 100%; width: 100%; margin-top: 2px; }
#mz-adv-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 11px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.11); background: transparent;
  color: rgba(255,255,255,0.5); cursor: pointer;
  font-family: system-ui, sans-serif; font-size: 12.5px; font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
#mz-adv-toggle:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.82); }
#mz-advanced.open #mz-adv-toggle { color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.06); }
#mz-advanced.open .cv-adv-caret { transform: rotate(90deg); }
#mz-adv-count {
  display: none; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: rgba(255,255,255,0.18); color: #fff; font-size: 10px; font-weight: 800; line-height: 1;
  align-items: center; justify-content: center;
}
#mz-adv-count.on { display: inline-flex; }
#mz-adv-body { display: none; width: 100%; margin-top: 12px; }
#mz-advanced.open #mz-adv-body { display: block; }
.mz-adv-block { margin-bottom: 16px; }
#mz-card-search {
  width: 280px; max-width: 100%;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px; padding: 8px 12px; color: #e8e8ee;
  font-family: system-ui, sans-serif; font-size: 13px; outline: none;
  transition: border-color .15s, background .15s;
}
#mz-card-search:focus { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.07); }
#mz-card-search::placeholder { color: rgba(255,255,255,0.34); }

/* Sliders de filtro: MÍNIMO de partidas + VICTORIAS (rango, 2 mangos) */
.mz-sliders { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 18px 32px; margin-top: 6px; }
.mz-slider { display: flex; flex-direction: column; gap: 8px; flex: 1 1 240px; min-width: 210px; max-width: 360px; }
.mz-slider-lbl { font: 600 12px system-ui, sans-serif; color: rgba(255,255,255,0.5); }
.mz-slider-lbl b { color: rgba(255,255,255,0.92); font-weight: 800; font-variant-numeric: tabular-nums; }
.mz-range { position: relative; height: 22px; }
.mz-range-track { position: absolute; top: 50%; left: 0; right: 0; height: 4px; transform: translateY(-50%);
  background: rgba(255,255,255,0.12); border-radius: 3px; }
.mz-range-fill { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,0.6); border-radius: 3px; }
.mz-range input[type=range] {
  position: absolute; top: 0; left: 0; width: 100%; height: 22px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.mz-range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(0,0,0,0.35); cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.mz-range input[type=range]::-moz-range-thumb {
  pointer-events: auto; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: none; cursor: grab;
}
.mz-range-dual .mz-range-lo { z-index: 3; }
.mz-range-dual .mz-range-hi { z-index: 4; }
/* Tipos de energía: pill segmentada idéntica a Cartas — .cv-chip-group + .cv-el-icon
   (orbes reales + icono de dragón) heredan todo su estilo de cards-view.css. */
#mz-meta-empty-filter { padding: 50px 20px; text-align: center; color: rgba(255,255,255,0.3); font-size: 14px; }

#mz-meta-more { display: flex; justify-content: center; padding: 16px 0 6px; }
#mz-meta-more button {
  padding: 8px 18px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 700; font-family: system-ui, sans-serif;
  letter-spacing: .03em; transition: background .15s, color .15s, border-color .15s;
}
#mz-meta-more button:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.22); }

/* ════ DETALLE META (consenso + flex/tech) ════════════════════════ */
#mz-meta-detail { flex: 1 1 auto; width: 100%; overflow-y: auto; padding: 10px 26px 28px; }

.mz-md-head { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; margin-bottom: 18px; }
.mz-md-art .mz-tcards { display: flex; gap: 6px; }
.mz-md-art .mz-tcard { height: 104px; width: auto; border-radius: 0; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.mz-md-title { font-family: system-ui, sans-serif; font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 0; }
/* Stats del ARQUETIPO junto al nombre: línea de datos PLANA (no botones: sin borde ni caja). */
.mz-md-chips { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; }
.mz-md-chip {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 0; border: none; background: none;
  font-family: system-ui, sans-serif; font-size: 12.5px; color: rgba(255,255,255,0.42);
}
.mz-md-chip b { color: rgba(255,255,255,0.95); font-weight: 800; font-size: 14px; }
.mz-md-chip.wr.pos b { color: #6fe6a0; } .mz-md-chip.wr.neg b { color: #ff8f8f; }
/* Chip de tipos de energía en el detalle meta (orbes reales) */
.mz-md-energychip { gap: 5px; padding: 4px 9px; }
.mz-md-energychip .mz-el-orb { width: 15px; height: 15px; }
.mz-md-chip.trendchip { padding: 0; }
.mz-md-sub { margin-top: 9px; font-family: system-ui, sans-serif; font-size: 11.5px; color: rgba(255,255,255,0.35); }

.mz-md-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 720px) { .mz-md-cols { grid-template-columns: 1fr; } }
.mz-md-col-h {
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: rgba(255,255,255,0.4); margin-bottom: 10px;
  padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mz-md-sec { margin-bottom: 14px; }
.mz-md-h { font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5); margin: 0 0 7px 2px; }
.mz-md-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 6px; }
.mz-md-card {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
}
.mz-md-thumb { width: 30px; height: 42px; object-fit: cover; border-radius: 0; background: #1a1a24; flex: 0 0 auto; }
.mz-md-count { font-family: system-ui, sans-serif; font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
.mz-md-name { font-family: system-ui, sans-serif; font-size: 12.5px; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.mz-md-flex {
  flex: 0 0 auto; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px;
  background: rgba(120,150,255,0.16); color: #b9c4ff; border: 1px solid rgba(120,150,255,0.3);
}
.mz-md-flex.tech { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.12); }

.mz-md-flexhint { font-family: system-ui, sans-serif; font-size: 11.5px; color: rgba(255,255,255,0.4); margin: -2px 0 10px; }
.mz-md-frow { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.mz-md-fthumb { width: 24px; height: 33px; object-fit: cover; border-radius: 0; background: #1a1a24; flex: 0 0 auto; }
.mz-md-fname { font-family: system-ui, sans-serif; font-size: 12.5px; color: rgba(255,255,255,0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.mz-md-fbar { flex: 0 0 70px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.mz-md-fbar > span { display: block; height: 100%; background: linear-gradient(90deg, rgba(150,180,255,0.85), rgba(120,150,255,0.5)); }
.mz-md-fbar.tech > span { background: rgba(255,255,255,0.28); }
.mz-md-fpct { flex: 0 0 auto; width: 34px; text-align: right; font-family: system-ui, sans-serif; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; }
/* .mz-md-legend eliminada (2026-07-03): ya no hay resaltado verde que explicar */

/* ── 2ª fila de pestañas: Estadísticas / Enfrentamientos (bajo los botones) ── */
/* Doble clase para ganar al margin de `.mz-md-tabs` (definido después). Mismo ancho completo
   + justify-content:center que las pestañas de versión → quedan centradas igual. */
.mz-md-tabs.mz-md-tabs2 { margin: 28px 0 16px; }
.mz-md-low { width: 100%; }
.mz-md-low .mz-md-prob { max-width: 680px; margin: 18px auto 0; }
.mz-md-low .mz-md-start { display: flex; flex-direction: column; gap: 6px; }
.mz-md-empty { padding: 24px 8px; color: rgba(255,255,255,0.3); font-family: system-ui, sans-serif; font-size: 13px; }

.mz-md-probs { margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; }
.mz-md-probs summary {
  cursor: pointer; font-family: system-ui, sans-serif; font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,0.7); list-style: none; user-select: none; padding: 4px 0;
}
.mz-md-probs summary::-webkit-details-marker { display: none; }
.mz-md-probs summary::before { content: '▸ '; color: rgba(255,255,255,0.4); }
.mz-md-probs[open] summary::before { content: '▾ '; }
.mz-md-probsbody { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 12px 2px 2px; }
@media (max-width: 720px) { .mz-md-probsbody { grid-template-columns: 1fr; } }
.mz-md-prob-h { font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.45); margin-bottom: 8px; }

.mz-md-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.mz-md-actions .mz-detail-btn { flex: 0 0 auto; }

/* ── Enfrentamientos (matchups del meta) ── */
.mz-md-mu { width: 100%; max-width: 680px; margin: 22px auto 4px; font-family: system-ui, sans-serif; }
.mz-mu-bar2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mz-mu-title { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
/* Conmutador segmentado (estética Cartas) */
.mz-mu-seg { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 9px; padding: 2px; gap: 2px; }
.mz-mu-sg { border: none; background: none; cursor: pointer; padding: 5px 12px; border-radius: 7px;
  font: 600 12px system-ui, sans-serif; color: rgba(255,255,255,0.5); transition: background 0.15s, color 0.15s; }
.mz-mu-sg:hover { color: rgba(255,255,255,0.8); }
.mz-mu-sg.on { background: rgba(255,255,255,0.12); color: #fff; }

/* Lista única (1 columna, mejor → peor) + explicación + divisores mejores/peores */
.mz-mu-explain { font-family: system-ui, sans-serif; font-size: 11px; color: rgba(255,255,255,0.4);
  margin: -6px 0 11px; }
.mz-mu-list { display: flex; flex-direction: column; gap: 2px; }
.mz-mu-div { display: flex; align-items: center; gap: 10px; margin: 12px 2px 4px;
  font: 800 10px system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.mz-mu-div:first-child { margin-top: 0; }
.mz-mu-div::before, .mz-mu-div::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
.mz-mu-div span { flex: 0 0 auto; }
.mz-mu-div.best  span { color: #6fe6a0; }
.mz-mu-div.worst span { color: #ff8f8f; }

/* Fila de enfrentamiento (botón clicable) */
.mz-mu-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 8px; padding: 7px 10px; cursor: pointer;
  font-family: system-ui, sans-serif; transition: background 0.14s; }
.mz-mu-row:hover { background: rgba(255,255,255,0.06); }
.mz-mu-row.nolink { cursor: default; }
.mz-mu-row.nolink:hover { background: none; }
/* Miniatura del rival = formato de mazo de la tierlist (mono/dual, _tlDeckCover).
   Forma de CARTA por defecto: SIN recorte cuadrado ni redondeo. */
.mz-mu-cover { width: 42px; aspect-ratio: 367 / 512; flex-shrink: 0; overflow: hidden;
  background: rgba(255,255,255,0.04); }
.mz-mu-cover .tl-deck-cover { width: 100%; height: 100%; }
.mz-mu-name { flex: 1; min-width: 0; font-size: 13.5px; color: rgba(255,255,255,0.85);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-mu-bar { width: 96px; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; flex-shrink: 0; }
.mz-mu-bar > span { display: block; height: 100%; border-radius: 4px; }
.mz-mu-pct { font-size: 13px; font-weight: 700; width: 44px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mz-mu-n { font-size: 10.5px; color: rgba(255,255,255,0.3); width: 42px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ── Distribución apaisada (deckLayout) ── */
.mz-dl { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mz-dl-row { display: flex; justify-content: center; gap: 8px; flex-wrap: nowrap; }
.mz-dl-row.wrap { flex-wrap: wrap; gap: 16px 13px; max-width: 1180px; align-items: flex-start; }
.mz-dl.big { gap: 16px; }
.mz-dl-card { position: relative; flex: 0 0 auto; }
/* aspect-ratio reserva la caja aunque la imagen tarde/falle → no colapsa ni desplaza al resto */
.mz-dl-card > img { height: 96px; width: auto; aspect-ratio: 367 / 512; object-fit: cover; display: block; border-radius: 0; box-shadow: 0 2px 8px rgba(0,0,0,.5); background: rgba(255,255,255,0.04); }
.mz-dl.big .mz-dl-card > img { height: 200px; }   /* detalle meta ~2x (tuneable) */
.mz-dl-x {
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,20,28,0.9); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-family: system-ui, sans-serif; font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.mz-dl-flag {
  position: absolute; top: 4px; right: 4px;
  padding: 1px 5px; border-radius: 6px;
  background: rgba(120,150,255,0.92); color: #0d0d16;
  font-family: system-ui, sans-serif; font-size: 10px; font-weight: 800;
}
.mz-dl-card.tech .mz-dl-flag { background: rgba(255,200,120,0.92); }

/* ── Selector de variantes ── */
.mz-md-vtabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 14px; }
.mz-md-vtab {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6); font-family: system-ui, sans-serif; font-size: 12.5px; font-weight: 700;
  transition: background .14s, color .14s, border-color .14s;
}
.mz-md-vtab:hover { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.2); }
.mz-md-vtab.active { background: rgba(255,255,255,0.13); color: #fff; border-color: rgba(255,255,255,0.3); }
.mz-md-vt-share { font-size: 11px; font-weight: 800; color: rgba(150,180,255,0.95); font-variant-numeric: tabular-nums; }
.mz-md-vtab.active .mz-md-vt-share { color: #b9c4ff; }

.mz-md-head { text-align: left; margin-bottom: 14px; }
.mz-md-hero { display: flex; justify-content: center; margin: 4px 0 6px; }
.mz-md-vline { text-align: center; font-family: system-ui, sans-serif; font-size: 12.5px; color: rgba(255,255,255,0.55); margin: 6px 0 2px; }
.mz-md-vline b { color: #fff; }
.mz-md-actions { justify-content: center; }
.mz-md-meta { margin-top: 22px; max-width: 560px; margin-left: auto; margin-right: auto; }
.mz-md-fsr { flex: 0 0 auto; margin-left: 8px; font-size: 11px; color: #6fe6a0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Mis mazos: mismo lenguaje que el meta (deck apaisado arriba, stats debajo) ── */
#mz-detail-body.mz-mine { flex-direction: column; overflow-y: auto; gap: 18px !important; padding: 18px 20px; align-items: center; }
#mz-detail-body.mz-mine #mz-detail-cards-col {
  flex: none; width: 100%; max-width: 980px; overflow: visible;
  border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 6px 0 20px;
}
#mz-detail-body.mz-mine #mz-cards-grid { display: block; }
#mz-detail-body.mz-mine #mz-detail-info-col {
  flex: none; width: 100%; max-width: 720px; overflow: visible; padding: 0;
}

/* Núcleo / slots flexibles dentro del deckLayout */
.mz-dl-sep {
  margin: 16px 0 4px; font-family: system-ui, sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(255,205,110,0.95);
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px;
}
.mz-dl-sep::before, .mz-dl-sep::after { content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,205,110,0.4), transparent); }
.mz-dl-flag { font-size: 11px; padding: 1px 6px; }

/* ── Tabs del detalle meta (estilo sidebar: subrayado inferior) ── */
.mz-md-tabs { display: flex; gap: 4px; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.08); margin: 6px 0 12px; }
.mz-md-tab {
  position: relative; background: none; border: none; cursor: pointer;
  padding: 9px 16px; font-family: system-ui, sans-serif; font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,0.4); transition: color .15s;
}
.mz-md-tab:hover { color: rgba(255,255,255,0.7); }
.mz-md-tab.active { color: #fff; }
.mz-md-tab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 14%; right: 14%;
  height: 2px; background: rgba(255,255,255,0.6); border-radius: 2px 2px 0 0;
}
.mz-md-tshare { font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.5); margin-left: 5px; font-variant-numeric: tabular-nums; }
.mz-md-tab.active .mz-md-tshare { color: rgba(255,255,255,0.92); }
.mz-md-subline { text-align: center; font-family: system-ui, sans-serif; font-size: 12px; color: rgba(255,255,255,0.5); margin: 0 0 10px; }
.mz-md-subline b { color: #fff; }

/* Esquinas redondeadas como las cartas del tablero → el aro del hueco SIGUE la forma de la carta */
.mz-dl.big .mz-dl-card > img { border-radius: 10px; }

/* ── STACK de hueco intercambiable (anti-correlación): ancla delante + alternativas asomando.
      Sin glow de color (Daniel 2026-07-03): el cue es el chip ⇄N + bordes detrás + puntitos. ── */
.mz-dl-card.mz-slot { position: relative; margin-right: 12px; }   /* aire para el borde que asoma */
.mz-slot-swap {
  position: absolute; top: -9px; left: -9px; z-index: 120;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(20,20,28,0.95); color: #fff;
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 800; line-height: 1;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
  transition: background .15s ease, color .15s ease, transform .15s ease;
  animation: mzSwapNudge 2s ease 0.7s 2;
}
.mz-slot-swap:hover { background: rgba(255,255,255,0.94); color: #14141c; transform: scale(1.06); }
.mz-slot-swap:active { transform: scale(0.97); }
.mz-slot-swap svg { display: block; }
@keyframes mzSwapNudge { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.22); } 28% { transform: scale(1); } }
html.pb-reduce-motion .mz-slot-swap { animation: none; }
.mz-slot-dots {
  position: absolute; bottom: 27px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; z-index: 110; pointer-events: none;
}
.mz-slot-dots.hi { bottom: 48px; }   /* la ancla ×2 apila badge ×N + % debajo */
.mz-slot-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.4); box-shadow: 0 1px 3px rgba(0,0,0,.55);
  transition: background .2s ease, transform .2s ease;
}
.mz-slot-dot.on { background: #fff; transform: scale(1.2); }
.mz-slot-sizer { visibility: hidden; }   /* solo reserva el tamaño de una carta normal (responsive) */
.mz-slot-layer { position: absolute; inset: 0; overflow: visible; touch-action: pan-y; cursor: grab; }
.mz-slot-layer:active { cursor: grabbing; }
.mz-slot-card {
  position: absolute; inset: 0;
  will-change: transform, filter; transform-origin: 50% 60%;
  border-radius: 10px;
}
.mz-slot-card > img {
  width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 10px;
  background: rgba(255,255,255,0.04); pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.55);
}
/* % de inclusión de la carta swipeable → ARRIBA-DERECHA (el ⇄N va arriba-izq.), para NO
   tapar el «spot» del nº de copias, que vive abajo-centro (.mz-dl-x). */
.mz-slot-pct {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  padding: 1px 7px; border-radius: 6px;
  background: rgba(15,15,22,0.9); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; font-family: system-ui, sans-serif; font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: .2px; pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.mz-slot-pct.main { background: rgba(255,255,255,0.92); border-color: transparent; color: #14141c; }
.mz-slot-pct.up { top: 6px; }   /* la % ya no compite con el badge ×2 (ahora vive arriba-dcha) */

/* ── «Resultados» = pestaña estilo Best Finishes de Limitless: columnas fijas
      (Jugador · Torneo · Fecha · Puesto · Resultado + botones) y BAJO cada fila las 20
      cartas individuales a la vista. Cabecera + filas comparten grid → columnas alineadas. ── */
.mz-md-fins { width: 100%; max-width: 1080px; margin: 0 auto; }
/* columnas: Jugador | Torneo | Fecha | Puesto | Resultado | acciones. Cabecera y filas
   comparten grid EXACTO (última columna FIJA, no auto) → todo alineado. */
.mz-fin-thead, .mz-fin-cols {
  display: grid;
  grid-template-columns: minmax(92px,1fr) minmax(150px,2.2fr) 156px 112px 92px 112px;
  gap: 16px; align-items: center;
}
.mz-fin-thead {
  padding: 0 13px 9px; margin-bottom: 2px;
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* cabeceras ordenables (fecha/puesto/score) */
.mz-fin-h {
  background: none; border: none; padding: 0; margin: 0; font: inherit; letter-spacing: inherit;
  text-transform: inherit; color: rgba(255,255,255,0.3); cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 4px; transition: color .12s ease;
}
.mz-fin-h:hover { color: rgba(255,255,255,0.65); }
.mz-fin-h.on { color: rgba(255,255,255,0.85); }
.mz-fin-arr { font-style: normal; font-size: 8px; opacity: 0.9; }
.mz-fin-rows { display: flex; flex-direction: column; gap: 11px; padding-top: 11px; }
.mz-fin-row {
  background: rgba(255,255,255,0.028); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 12px 13px 11px;
}
.mz-fin-cols { font-family: system-ui, sans-serif; font-size: 13px; margin-bottom: 11px; min-width: 0; }
.mz-fin-cols > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* jerarquía: PUESTO y RESULTADO destacan (es lo que comparas); jugador/torneo/fecha = contexto */
.mz-fin-place  { font-weight: 800; color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
.mz-fin-score  { font-weight: 700; color: rgba(255,255,255,0.82); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mz-fin-player { font-weight: 600; color: rgba(255,255,255,0.78); }
.mz-fin-tourn  { color: rgba(255,255,255,0.44); }
.mz-fin-date   { color: rgba(255,255,255,0.44); font-variant-numeric: tabular-nums; }
.mz-fin-acts { display: inline-flex; gap: 6px; justify-self: end; }
.mz-fin-btn {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8); cursor: pointer;
  transition: background .14s ease, color .14s ease, transform .1s ease;
}
.mz-fin-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.mz-fin-btn:active { transform: scale(0.94); }
.mz-fin-btn svg { width: 15px; height: 15px; }
/* la lista de 20: siempre 20 columnas → todas las filas igual de largas */
.mz-fin-strip { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
.mz-fin-card { position: relative; cursor: zoom-in; min-width: 0; }
.mz-fin-card img {
  width: 100%; aspect-ratio: 367 / 512; object-fit: cover; display: block;
  border-radius: 4px; background: rgba(255,255,255,0.04);
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.mz-fin-card:hover img { transform: translateY(-2px); transition: transform .15s ease; }

/* móvil: sin cabecera de tabla. Cada resultado = tarjeta ordenada:
   1) línea de datos con PRIORIDAD a puesto · resultado · fecha (jugador y torneo ocultos
      por ahora — no caben con las cartas grandes);
   2) mazo en 10×2 filas (cartas grandes, distinguibles) → ~3-5 resultados por pantalla;
   3) botones de acción centrados ABAJO. */
@media (max-width: 720px) {
  .mz-md-fins { max-width: 100%; }
  .mz-fin-thead { display: none; }
  .mz-fin-player, .mz-fin-tourn { display: none; }
  /* la fila apila: datos (puesto·resultado·fecha) → mazo 10×2 → botones abajo */
  .mz-fin-row { display: flex; flex-direction: column; }
  .mz-fin-cols {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; margin-bottom: 9px;
    grid-template-areas: none;
  }
  .mz-fin-place  { order: 1; font-size: 15px; }
  .mz-fin-score  { order: 2; }
  .mz-fin-date   { order: 3; margin-left: auto; font-size: 12px; }
  .mz-fin-strip  { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
  .mz-fin-card img { border-radius: 5px; }
  .mz-fin-acts   { justify-content: center; gap: 12px; margin-top: 11px; }   /* botones centrados abajo */
  .mz-fin-btn { width: 34px; height: 34px; }
  .mz-fin-btn svg { width: 17px; height: 17px; }
}

/* ── Lista «Flex y tech» bajo el mazo: miniatura + barra de % de uso + % (restaurada) ── */
.mz-md-flexpanel { width: 100%; max-width: 680px; margin: 20px auto 6px; }
.mz-md-flextitle {
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 3px;
}
.mz-md-flexhint { font-family: system-ui, sans-serif; font-size: 11.5px; color: rgba(255,255,255,0.4); margin: 0 0 11px; }
.mz-md-flexlist { display: flex; flex-direction: column; gap: 1px; }
.mz-md-frow { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 8px; transition: background .14s; }
.mz-md-frow:hover { background: rgba(255,255,255,0.05); }
.mz-md-fthumb { width: 40px; height: 56px; object-fit: cover; border-radius: 2px; background: #1a1a24; flex: 0 0 auto; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.mz-md-fname { font-family: system-ui, sans-serif; font-size: 13.5px; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.mz-md-fbar { flex: 0 0 120px; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.mz-md-fbar > span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(95,214,138,0.95), rgba(95,214,138,0.55)); }
.mz-md-fbar.tech > span { background: rgba(255,255,255,0.3); }
.mz-md-fpct { flex: 0 0 38px; text-align: right; font-family: system-ui, sans-serif; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.72); font-variant-numeric: tabular-nums; }

/* ══════ CARTAS DESTACADAS (portada compuesta) — bloque aislado, fácil de quitar ══════ */
/* Botón «Cartas destacadas» en la cabecera del detalle (a la derecha) */
#mz-featured-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6);
  font: 700 12px system-ui, sans-serif; letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#mz-featured-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
#mz-featured-btn:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.22); }

/* Modal «Elige las cartas destacadas» (hoja inferior) */
.mz-feat-modal {
  position: fixed; inset: 0; z-index: 9400;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: rgba(0,0,0,0.45);
  opacity: 0; transition: opacity 0.2s ease;
}
.mz-feat-modal.open { opacity: 1; }
.mz-feat-sheet {
  background: #15151f;
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  border-top: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 -14px 40px rgba(0,0,0,0.5);
  max-height: 82vh; overflow-y: auto;
  padding: 22px 22px 90px;
  transform: translateY(24px); transition: transform 0.24s cubic-bezier(0.22,1,0.36,1);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.mz-feat-modal.open .mz-feat-sheet { transform: none; }
.mz-feat-sheet::-webkit-scrollbar { width: 7px; }
.mz-feat-sheet::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.mz-feat-title {
  text-align: center; font: 800 22px system-ui, sans-serif;
  color: rgba(255,255,255,0.92); margin-bottom: 18px;
}
.mz-feat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; max-width: 720px; margin: 0 auto;
}
.mz-feat-card {
  position: relative; aspect-ratio: 367/512; border-radius: 10px; overflow: hidden;
  cursor: pointer; background: #202030;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
}
.mz-feat-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mz-feat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.2); }
.mz-feat-card.sel { border-color: #4dabff; box-shadow: 0 0 0 2px rgba(77,171,255,0.8); }
.mz-feat-card.sel::after { content: ''; position: absolute; inset: 0; background: rgba(77,171,255,0.28); pointer-events: none; }
.mz-feat-num {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,28,44,0.86); border: 2px solid rgba(255,255,255,0.85);
  color: #fff; font: 800 26px system-ui, sans-serif;
  box-shadow: 0 3px 12px rgba(0,0,0,0.5);
}
.mz-feat-done {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 9401;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28,28,40,0.96); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.15s, transform 0.1s;
}
.mz-feat-done svg { width: 26px; height: 26px; }
.mz-feat-done:hover { background: rgba(40,40,56,0.98); }
.mz-feat-done:active { transform: translateX(-50%) scale(0.94); }

/* Vista rápida de un mazo (mantener pulsado en el selector de partida) */
.mz-dv-modal {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); padding: 24px;
  opacity: 0; transition: opacity 0.16s ease;
}
.mz-dv-modal.open { opacity: 1; }
.mz-dv-panel {
  width: min(760px, 96vw); max-height: 88vh; display: flex; flex-direction: column;
  background: #15151f; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6); overflow: hidden;
  transform: scale(0.97); transition: transform 0.16s ease;
}
.mz-dv-modal.open .mz-dv-panel { transform: none; }
.mz-dv-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mz-dv-title { flex: 1; min-width: 0; font: 700 15px system-ui, sans-serif; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-dv-close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.65); font-size: 15px; cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.mz-dv-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.mz-dv-grid {
  overflow-y: auto; padding: 16px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.mz-dv-grid::-webkit-scrollbar { width: 7px; }
.mz-dv-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.mz-dv-card { position: relative; aspect-ratio: 367/512; border-radius: 7px; overflow: visible; cursor: pointer; }
.mz-dv-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block; transition: transform 0.13s; }
.mz-dv-card:hover img { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.6); }
.mz-dv-count {
  position: absolute; top: -4px; right: -4px; z-index: 2;
  background: rgba(18,18,28,0.95); border: 1px solid rgba(255,255,255,0.25); border-radius: 8px;
  font: 700 10px system-ui, sans-serif; color: #fff; padding: 1px 5px;
}

/* ── Descargar imagen: diálogo con preview GRANDE 16:9 + controles en UNA fila ── */
.mz-dlimg-modal { width: min(96vw, 1120px); max-width: 1120px; }
/* El hueco se adapta al FORMATO: el lienzo manda su tamaño (retrato = alto, apaisado = ancho)
   → la vertical llena en móvil y la horizontal en escritorio, sin recortes ni zoom. */
.mz-dlimg-preview {
  position: relative;
  width: 100%; min-height: 160px; background: #060608; border-radius: 10px; overflow: hidden;
  margin: 2px 0 4px; display: flex; align-items: center; justify-content: center;
}
/* overlay «procesando» sobre el lienzo (se revela la imagen ya terminada) */
.mz-dlimg-loading {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: #060608; z-index: 2;
}
.mz-dlimg-loading.on { display: flex; }
.mz-dlimg-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.14); border-top-color: rgba(255,255,255,0.75);
  animation: mzDlSpin 0.7s linear infinite;
}
@keyframes mzDlSpin { to { transform: rotate(360deg); } }
html.pb-reduce-motion .mz-dlimg-spin { animation-duration: 1.4s; }

/* «Hold» del mazo del detalle: oculta las cartas y muestra un círculo hasta que cargan. */
.mz-md-hero.mz-imgs-loading, #mz-cards-grid.mz-imgs-loading { position: relative; min-height: 200px; }
.mz-md-hero.mz-imgs-loading > *, #mz-cards-grid.mz-imgs-loading > * { visibility: hidden; }
.mz-md-hero.mz-imgs-loading::after, #mz-cards-grid.mz-imgs-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%; margin: -17px 0 0 -17px;
  width: 34px; height: 34px; border-radius: 50%; visibility: visible;
  border: 3px solid rgba(255,255,255,0.13); border-top-color: rgba(255,255,255,0.7);
  animation: mzDlSpin 0.7s linear infinite;
}
html.pb-reduce-motion .mz-md-hero.mz-imgs-loading::after,
html.pb-reduce-motion #mz-cards-grid.mz-imgs-loading::after { animation-duration: 1.5s; }
.mz-dlimg-preview canvas { max-width: 100%; max-height: 56vh; width: auto; height: auto; display: block; }
@media (max-width: 720px) { .mz-dlimg-preview canvas { max-height: 52vh; } }
.mz-dlimg-dims { text-align: center; font-size: 11.5px; color: rgba(255,255,255,0.4); margin: 0 0 10px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.mz-dlimg-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.mz-dlimg-controls .cv-chip { white-space: nowrap; }
.mz-dlimg-controls .cv-chip.active { background: rgba(255,255,255,0.14); color: #fff; }
/* manchas del liquid glass: el modal es grande → sin turbulencia warp (cristal limpio como el resto de menús) */
html.pb-warp .mz-dlimg-modal { -webkit-backdrop-filter: blur(18px) saturate(1.9) brightness(1.06); backdrop-filter: blur(18px) saturate(1.9) brightness(1.06); }
html.pb-warp .mz-dlimg-modal::after { -webkit-backdrop-filter: blur(3px) brightness(1.35); backdrop-filter: blur(3px) brightness(1.35); }