#sec-tcg {
  --tcg-ink: #594b55;
  --tcg-muted: #9c8b96;
  --tcg-pink: #e9a6b0;
  --tcg-cream: #fffaf5;
  --tcg-line: #f0e2e4;
  max-width: 1180px;
  margin: 0 auto;
  color: var(--tcg-ink);
}

#sec-tcg [hidden] { display: none !important; }

.tcg-profile-select {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 540px;
  margin: 52px auto;
  padding: 32px;
  border: 1px solid var(--tcg-line);
  border-radius: 24px;
  background: var(--tcg-cream);
  text-align: center;
  box-shadow: 0 16px 40px rgba(107, 70, 87, .08);
}

.tcg-profile-select h2 { margin: 0; font-size: 24px; }
.tcg-profile-select p { margin: 0; color: var(--tcg-muted); line-height: 1.55; }
.tcg-profile-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.tcg-profile-option {
  min-width: 145px;
  padding: 14px 20px;
  border: 1px solid var(--tcg-line);
  border-radius: 16px;
  background: white;
  color: var(--tcg-ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tcg-profile-option:hover { transform: translateY(-2px); border-color: var(--tcg-pink); box-shadow: 0 8px 20px #e9a6b029; }
.tcg-profile-select small { color: var(--tcg-muted); line-height: 1.5; }

.tcg-topbar, .tcg-section-heading, .tcg-panel-heading, .tcg-opening-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tcg-topbar { margin: 6px 0 18px; }
.tcg-eyebrow, .tcg-kicker {
  color: #b47c8a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.35px;
}
.tcg-heading { margin: 4px 0; font-size: clamp(24px, 4vw, 34px); letter-spacing: -.6px; }
.tcg-heading span { color: #d78c9c; }
.tcg-subtitle { margin: 0; color: var(--tcg-muted); font-size: 13px; }
.tcg-tools { display: flex; gap: 8px; }
.tcg-tool-btn, .tcg-link-btn {
  border: 1px solid var(--tcg-line);
  border-radius: 11px;
  padding: 9px 12px;
  background: white;
  color: var(--tcg-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.tcg-tool-btn:hover, .tcg-link-btn:hover { border-color: var(--tcg-pink); color: #a75e70; }
.tcg-link-btn { border: 0; background: transparent; color: #b07080; }

.tcg-profile-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
  padding: 10px 13px;
  border: 1px solid var(--tcg-line);
  border-radius: 14px;
  background: #fffdfb;
}
.tcg-profile-label, .tcg-profile-note { color: var(--tcg-muted); font-size: 11px; }
.tcg-profile-note { margin-left: auto; }
.tcg-profile-chip {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 11px;
  background: #f7f1f0;
  color: #8c7882;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.tcg-profile-chip.selected { border-color: #e7b6bb; background: #fff0ef; color: #9d5d6d; }
.tcg-profile-chip:disabled { opacity: .58; cursor: wait; }

.tcg-hero {
  position: relative;
  display: flex;
  min-height: 225px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #f3dfe1;
  border-radius: 24px;
  padding: 27px 32px;
  background: radial-gradient(ellipse at 82% 17%, #ffe6d9 0, transparent 39%), linear-gradient(120deg, #fff5ec, #f8e6e9 57%, #f8ede5);
}
.tcg-hero-copy { position: relative; z-index: 1; max-width: 68%; }
.tcg-hero-copy h2 { margin: 8px 0 5px; font-size: clamp(21px, 3vw, 30px); }
.tcg-hero-copy p { margin: 0; color: #917d87; font-size: 13px; }
.tcg-hero-sparkle { position: absolute; color: #fff; text-shadow: 0 1px 12px #dca2a4; }
.tcg-hero-sparkle-one { top: 28px; right: 38%; font-size: 25px; }
.tcg-hero-sparkle-two { bottom: 36px; right: 48%; font-size: 19px; }
.tcg-hero-art { position: absolute; right: 6%; bottom: -11px; display: flex; align-items: center; gap: 4px; font-size: clamp(60px, 11vw, 106px); filter: drop-shadow(0 11px 6px #9d6f6a26); }
.tcg-hero-art span { margin-top: -52px; color: #dc8798; font-size: 34px; }
.tcg-stats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 19px; }
.tcg-stats div { display: grid; min-width: 70px; gap: 1px; border: 1px solid #f2dfe0; border-radius: 12px; padding: 7px 10px; background: #ffffffa6; }
.tcg-stats strong { font-size: 16px; }
.tcg-stats span { color: var(--tcg-muted); font-size: 10px; }

.tcg-page-tabs { display: flex; gap: 7px; overflow-x: auto; margin: 20px 0 15px; border-bottom: 1px solid var(--tcg-line); }
.tcg-page-tab { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; padding: 10px 13px; background: transparent; color: var(--tcg-muted); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.tcg-page-tab.active { border-bottom-color: #d68c9a; color: #a35e70; }
.tcg-page:not(.active) { display: none; }

.tcg-feature-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 14px; }
.tcg-pack-panel, .tcg-extra-panel, .tcg-home-quests, .tcg-recent-section, .tcg-album-panel, .tcg-quests-panel {
  border: 1px solid var(--tcg-line);
  border-radius: 20px;
  padding: 20px;
  background: #fffdfb;
  box-shadow: 0 8px 24px rgba(95, 62, 74, .035);
}
.tcg-panel-heading { margin-bottom: 13px; }
.tcg-panel-heading h2, .tcg-section-heading h2 { margin: 4px 0 0; font-size: 19px; }
.tcg-section-heading p { margin: 5px 0 0; color: var(--tcg-muted); font-size: 12px; }
.tcg-panel-icon { font-size: 27px; }
.tcg-pack {
  position: relative;
  display: grid;
  width: min(100%, 300px);
  min-height: 155px;
  justify-items: center;
  align-content: center;
  gap: 7px;
  overflow: hidden;
  margin: 0 auto 12px;
  border: 2px solid #ffecbf;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 45%, #fff8df 0 2%, transparent 36%), linear-gradient(145deg, #eab9a8, #d98e9f 53%, #bc718e);
  color: #fffaf0;
  box-shadow: inset 0 0 0 5px #ffffff38, 0 8px 20px #bf728342;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tcg-pack::after { position: absolute; inset: -45% -15%; border: 1px solid #ffffff3d; border-radius: 50%; content: ""; transform: rotate(-20deg); }
.tcg-pack:hover { transform: translateY(-3px) rotate(-.5deg); box-shadow: inset 0 0 0 5px #ffffff50, 0 12px 25px #bf728355; }
.tcg-pack-seal { z-index: 1; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #ffffffa8; border-radius: 50%; background: #ffffff20; font-size: 11px; font-weight: 900; }
.tcg-pack-hearts { z-index: 1; font-size: 14px; letter-spacing: 7px; }
.tcg-pack-title { z-index: 1; font-family: Georgia, serif; font-size: 22px; font-weight: 700; }
.tcg-pack-count { z-index: 1; border-radius: 20px; padding: 4px 9px; background: #fff7e6; color: #a46976; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.tcg-pack-status { min-height: 18px; margin: 0 0 9px; color: var(--tcg-muted); text-align: center; font-size: 11px; }
.tcg-pack-status.tcg-cooldown { color: #a96879; font-weight: 800; }
.tcg-pack-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tcg-primary-btn, .tcg-secondary-btn {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 11px 15px;
  background: linear-gradient(110deg, #d98899, #c47b97);
  color: white;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 12px #c4789226;
}
.tcg-primary-btn:hover, .tcg-secondary-btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.tcg-primary-btn:disabled, .tcg-secondary-btn:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.tcg-secondary-btn { border: 1px solid #ecdce1; background: #fff5f5; color: #a96678; box-shadow: none; }
.tcg-extra-art { display: flex; min-height: 104px; align-items: center; justify-content: center; gap: 13px; margin: 2px 0 9px; border-radius: 15px; background: radial-gradient(circle, #fff8ec, #f7e9ef); font-size: 48px; }
.tcg-extra-art i { color: #dd9aa8; font-size: 24px; font-style: normal; }
.tcg-extra-panel > p { min-height: 34px; margin: 0 0 11px; color: var(--tcg-muted); font-size: 11px; line-height: 1.55; }

.tcg-home-quests, .tcg-recent-section { margin-top: 14px; }
.tcg-section-heading { margin-bottom: 13px; }
.tcg-quest-list { display: grid; gap: 9px; }
.tcg-quest {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid #f2e7e7;
  border-radius: 13px;
  padding: 10px 12px;
  background: white;
}
.tcg-quest-icon { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; background: #fff1ed; font-size: 18px; }
.tcg-quest-copy { min-width: 0; }
.tcg-quest-copy strong { display: block; font-size: 12px; }
.tcg-quest-copy small { color: var(--tcg-muted); font-size: 10px; }
.tcg-quest-progress { height: 4px; overflow: hidden; margin-top: 6px; border-radius: 9px; background: #f4ecec; }
.tcg-quest-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #eeb1ad, #c884a3); }
.tcg-quest-action { min-width: 77px; border: 1px solid #efdfe1; border-radius: 10px; padding: 7px 9px; background: #fff8f6; color: #a96879; font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.tcg-quest-action:disabled { border-color: transparent; background: #f7f3f2; color: #9f9296; cursor: default; }
.tcg-quest-footnote, .tcg-data-note { margin: 12px 2px 0; color: var(--tcg-muted); font-size: 10px; line-height: 1.5; }
.tcg-quest-hero-icon { font-size: 34px; }
.tcg-recent-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

.tcg-album-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.tcg-search-label { color: var(--tcg-muted); font-size: 11px; font-weight: 800; }
.tcg-search, .tcg-filter { min-height: 37px; border: 1px solid var(--tcg-line); border-radius: 10px; padding: 7px 10px; background: white; color: var(--tcg-ink); font: inherit; font-size: 12px; }
.tcg-search { flex: 1 1 190px; }
.tcg-filter { min-width: 145px; }
.tcg-album-progress { color: var(--tcg-muted); font-size: 12px; }
.tcg-album-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; }

/* ═══════════════════════════════════════════════════════════════
   TCG — MARCOS DE CARTA ESTILO COLECCIONISTA
   Imagen a sangre + cenefa ornamental + bordes brillantes (foil)
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables de rareza y marco ───────────────────────────────── */
.tcg-card {
  --tcg-rarity: #e7cfb1;
  --tcg-foil-1: #f6e7b4;
  --tcg-foil-2: #d9a9c9;
  --tcg-foil-3: #a9d5e8;
  --tcg-foil-4: #f3d89a;
  --tcg-edge: #ffffff;
  --tcg-ink-soft: #f7eef0;
  --tcg-frame-plate: #fffdf9;
}

/* ── Contenedor: la imagen ocupa toda la carta ─────────────────── */
.tcg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  aspect-ratio: .705;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  padding: 0;
  background: var(--tcg-frame-plate);
  color: var(--tcg-ink);
  text-align: left;
  isolation: isolate;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tcg-rarity) 55%, transparent),
    0 6px 16px rgba(92, 63, 74, .22);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}
.tcg-card:hover {
  z-index: 2;
  transform: translateY(-5px) rotate(-.5deg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tcg-rarity) 80%, transparent),
    0 0 22px color-mix(in srgb, var(--tcg-rarity) 42%, transparent),
    0 16px 30px rgba(92, 63, 74, .28);
}

/* ── Capa 1: la ilustración a sangre, ocupa toda la carta ─────── */
.tcg-card-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background: #241a1f;
}
.tcg-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Degradado inferior para que el texto se lea sobre la imagen */
.tcg-card-art::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(26, 16, 21, .88) 0%, rgba(26, 16, 21, .55) 22%, rgba(26, 16, 21, .08) 46%, transparent 62%),
    linear-gradient(to bottom, rgba(26, 16, 21, .55) 0%, transparent 26%);
  content: "";
}

/* ── Capa 2: la cenefa ornamental (marco interior) ─────────────── */
.tcg-card-frame {
  position: absolute;
  inset: 6px;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--tcg-rarity) 75%, #fff 25%);
  border-radius: 12px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .38),
    inset 0 0 14px color-mix(in srgb, var(--tcg-rarity) 30%, transparent);
}
/* Filete interior: la línea dorada fina de las cartas coleccionistas */
.tcg-card-frame::before {
  position: absolute;
  inset: 3px;
  border: 1px solid color-mix(in srgb, var(--tcg-rarity) 55%, transparent);
  border-radius: 9px;
  content: "";
}
/* Esquineras ornamentales */
.tcg-card-frame::after {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--tcg-rarity) 85%, transparent) 0 2.2px, transparent 2.4px),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--tcg-rarity) 85%, transparent) 0 2.2px, transparent 2.4px),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--tcg-rarity) 85%, transparent) 0 2.2px, transparent 2.4px),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--tcg-rarity) 85%, transparent) 0 2.2px, transparent 2.4px);
  content: "";
}

/* ── Capa 3: el borde brillante (foil) ─────────────────────────── */
.tcg-card-foil {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 16px;
  padding: 2.5px;
  background: conic-gradient(
    from var(--tcg-foil-angle, 0deg),
    var(--tcg-foil-1),
    var(--tcg-foil-2),
    var(--tcg-foil-3),
    var(--tcg-foil-4),
    var(--tcg-foil-1),
    var(--tcg-foil-2),
    var(--tcg-foil-3),
    var(--tcg-foil-4),
    var(--tcg-foil-1)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: tcg-foil-spin 7s linear infinite;
  opacity: .92;
}
@keyframes tcg-foil-spin {
  from { --tcg-foil-angle: 0deg; }
  to { --tcg-foil-angle: 360deg; }
}
@property --tcg-foil-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Fallback si no soporta @property: el foil queda estatico pero bonito */
@supports not (background: conic-gradient(from var(--x), red, blue)) {
  .tcg-card-foil {
    background: linear-gradient(135deg, var(--tcg-foil-1), var(--tcg-foil-2), var(--tcg-foil-3), var(--tcg-foil-4));
  }
}

/* ── Textos sobre la imagen ────────────────────────────────────── */
.tcg-card-name {
  position: relative;
  z-index: 4;
  display: block;
  overflow: hidden;
  margin-top: auto;
  padding: 22px 13px 0;
  color: #fff;
  font-family: Georgia, serif;
  font-size: clamp(10px, 1.05vw, 13px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .2px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .75), 0 0 12px rgba(0, 0, 0, .45);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tcg-card-story {
  position: relative;
  z-index: 4;
  display: block;
  overflow: hidden;
  padding: 2px 13px 11px;
  color: var(--tcg-ink-soft);
  font-size: clamp(7px, .78vw, 9.5px);
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Distintivo de rareza: pastilla con marco ─────────────────── */
.tcg-card-rarity {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 5;
  border: 1px solid color-mix(in srgb, var(--tcg-rarity) 80%, #fff 20%);
  border-radius: 20px;
  padding: 3px 8px;
  background: rgba(24, 15, 20, .55);
  backdrop-filter: blur(4px);
  color: color-mix(in srgb, var(--tcg-rarity) 45%, #fff 55%);
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* ── Cantidad ──────────────────────────────────────────────────── */
.tcg-card-qty {
  position: absolute;
  right: 11px;
  bottom: 42px;
  z-index: 5;
  min-width: 22px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 20px;
  padding: 3px 6px;
  background: rgba(24, 15, 20, .68);
  backdrop-filter: blur(4px);
  color: #fff;
  text-align: center;
  font-size: 8.5px;
  font-weight: 900;
}

/* ── Carta bloqueada ───────────────────────────────────────────── */
.tcg-card--locked {
  border: 0;
  background: linear-gradient(150deg, #f6efe9, #eadfd6);
  box-shadow: 0 4px 12px rgba(92, 63, 74, .12);
  cursor: default;
}
.tcg-card--locked .tcg-card-art {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, #fff 0, #f3e7e8 62%, #e6d3d6 100%);
  color: #c9a9b4;
  font-family: Georgia, serif;
  font-size: 46px;
}
.tcg-card--locked .tcg-card-art::after { display: none; }
.tcg-card--locked .tcg-card-name {
  color: #9d8d93;
  text-shadow: none;
}
.tcg-card--locked .tcg-card-story {
  color: #b0a1a7;
  text-shadow: none;
}
.tcg-card--locked .tcg-card-foil { opacity: .45; }
.tcg-card--locked:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(92, 63, 74, .12);
}

/* ═══════════════════════════════════════════════════════════════
   COLORES DE MARCO (cenefas) POR TEMA
   ═══════════════════════════════════════════════════════════════ */


/* Rarezas sin marco propio: foil plateado/neutral */
.tcg-card--common { --tcg-rarity: #cbbb9f; --tcg-foil-1: #efe9df; --tcg-foil-2: #d6cbb9; --tcg-foil-3: #f7f3ec; --tcg-foil-4: #b9ab93; }
.tcg-card--rare { --tcg-rarity: #9b83d6; --tcg-foil-1: #e6d8ff; --tcg-foil-2: #b39ce8; --tcg-foil-3: #f2e9ff; --tcg-foil-4: #7d63b8; }
.tcg-card--special { --tcg-rarity: #e08d5f; --tcg-foil-1: #ffe0c4; --tcg-foil-2: #f0ad7c; --tcg-foil-3: #fff2e2; --tcg-foil-4: #c26f42; }
.tcg-card--unique { --tcg-rarity: #dfbb45; --tcg-foil-1: #fff3bd; --tcg-foil-2: #e8c25c; --tcg-foil-3: #fffbe8; --tcg-foil-4: #b8912c; }
.tcg-card--secret { --tcg-rarity: #4fbdb6; --tcg-foil-1: #c9fbf6; --tcg-foil-2: #6fd0c9; --tcg-foil-3: #e6fffd; --tcg-foil-4: #2f9b94; }

/* ═══════════════════════════════════════════════════════════════
   TCG — FORMAS DE MARCO
   Progresión de simple a ornato. Cada marco cambia la SILUETA
   de la carta, no solo el color.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   TCG — MARCOS DE CARTA (estilo gaming / coleccionista)
   Reglas de diseño:
   · La imagen SIEMPRE se ve: los adornos solo ocupan las esquinas
   · Cada marco tiene silueta propia (clip-path / border-radius)
   · Los ::before / ::after usan background-position + no-repeat
     para NUNCA pintar sobre el centro de la carta
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables comunes ────────────────────────────────────────── */
.tcg-card {
  --tcg-rarity: #e7cfb1;
  --tcg-foil-1: #f6e7b4;
  --tcg-foil-2: #d9a9c9;
  --tcg-foil-3: #a9d5e8;
  --tcg-foil-4: #f3d89a;
  --tcg-accent: color-mix(in srgb, var(--tcg-rarity) 92%, #fff 25%);
  --tcg-accent-soft: color-mix(in srgb, var(--tcg-rarity) 55%, transparent);
  --tcg-dark: color-mix(in srgb, var(--tcg-rarity) 45%, #1a1218);
  --tcg-line: color-mix(in srgb, var(--tcg-rarity) 72%, #fff 28%);
}

/* ─────────────────────────────────────────────────────────────
   1. ROSE — Clásico
   Silueta rectangular con remates en las esquinas
   ───────────────────────────────────────────────────────────── */
.tcg-card.tcg-frame--rose { border-radius: 16px; }
.tcg-card.tcg-frame--rose .tcg-card-foil { border-radius: 16px; }
.tcg-card.tcg-frame--rose .tcg-card-frame {
  inset: 6px;
  border: 1.5px solid var(--tcg-line);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .34),
    inset 0 0 12px var(--tcg-accent-soft);
}
.tcg-card.tcg-frame--rose .tcg-card-frame::before {
  inset: 4px;
  border: 1px solid var(--tcg-accent-soft);
  border-radius: 8px;
}
/* Rombos en las 4 esquinas */
.tcg-card.tcg-frame--rose .tcg-card-frame::after {
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(45deg, transparent 42%, var(--tcg-accent) 42% 58%, transparent 58%) no-repeat 4px 4px / 9px 9px,
    linear-gradient(-45deg, transparent 42%, var(--tcg-accent) 42% 58%, transparent 58%) no-repeat 100% 4px / 9px 9px,
    linear-gradient(-45deg, transparent 42%, var(--tcg-accent) 42% 58%, transparent 58%) no-repeat 4px 100% / 9px 9px,
    linear-gradient(45deg, transparent 42%, var(--tcg-accent) 42% 58%, transparent 58%) no-repeat 100% 100% / 9px 9px;
}

/* ─────────────────────────────────────────────────────────────
   2. LAVENDER — Bisel
   Esquinas cortadas en chaflán, marco con doble bisel
   ───────────────────────────────────────────────────────────── */
.tcg-card.tcg-frame--lavender {
  border-radius: 6px;
  clip-path: polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);
}
.tcg-card.tcg-frame--lavender .tcg-card-foil { border-radius: 0; }
.tcg-card.tcg-frame--lavender .tcg-card-art { border-radius: 0; }
.tcg-card.tcg-frame--lavender .tcg-card-frame {
  inset: 7px;
  border: 1.5px solid var(--tcg-line);
  border-radius: 0;
  clip-path: polygon(4.5% 0, 95.5% 0, 100% 4.5%, 100% 95.5%, 95.5% 100%, 4.5% 100%, 0 95.5%, 0 4.5%);
  box-shadow: inset 0 0 10px var(--tcg-accent-soft);
}
.tcg-card.tcg-frame--lavender .tcg-card-frame::before {
  inset: 3px;
  border: 1px solid var(--tcg-accent-soft);
  border-radius: 0;
  clip-path: polygon(4% 0, 96% 0, 100% 4%, 100% 96%, 96% 100%, 4% 100%, 0 96%, 0 4%);
}
/* Brackets diagonales en las esquinas */
.tcg-card.tcg-frame--lavender .tcg-card-frame::after {
  inset: 0;
  border-radius: 0;
  background:
    linear-gradient(45deg, var(--tcg-accent) 0 42%, transparent 42%) no-repeat 2px 2px / 10px 10px,
    linear-gradient(-45deg, var(--tcg-accent) 0 42%, transparent 42%) no-repeat 100% 2px / 10px 10px,
    linear-gradient(-45deg, var(--tcg-accent) 0 42%, transparent 42%) no-repeat 2px 100% / 10px 10px,
    linear-gradient(45deg, var(--tcg-accent) 0 42%, transparent 42%) no-repeat 100% 100% / 10px 10px;
}

/* ─────────────────────────────────────────────────────────────
   3. GOLD — Hex / Tornillos
   Silueta octogonal con tornillos hexagonales en las esquinas
   ───────────────────────────────────────────────────────────── */
.tcg-card.tcg-frame--gold {
  border-radius: 0;
  clip-path: polygon(9% 0, 91% 0, 100% 9%, 100% 91%, 91% 100%, 9% 100%, 0 91%, 0 9%);
}
.tcg-card.tcg-frame--gold .tcg-card-foil { border-radius: 0; }
.tcg-card.tcg-frame--gold .tcg-card-art { border-radius: 0; }
.tcg-card.tcg-frame--gold .tcg-card-frame {
  inset: 8px;
  border: 1.5px solid var(--tcg-line);
  border-radius: 0;
  clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .3),
    inset 0 0 12px var(--tcg-accent-soft);
}
.tcg-card.tcg-frame--gold .tcg-card-frame::before {
  inset: 3px;
  border: 1px dashed var(--tcg-accent-soft);
  border-radius: 0;
  clip-path: polygon(7% 0, 93% 0, 100% 7%, 100% 93%, 93% 100%, 7% 100%, 0 93%, 0 7%);
}
/* Tornillos hexagonales */
.tcg-card.tcg-frame--gold .tcg-card-frame::after {
  inset: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 50%, var(--tcg-dark) 0 2.4px, transparent 2.6px) no-repeat 7px 7px / 11px 11px,
    radial-gradient(circle at 50% 50%, var(--tcg-dark) 0 2.4px, transparent 2.6px) no-repeat 100% 7px / 11px 11px,
    radial-gradient(circle at 50% 50%, var(--tcg-dark) 0 2.4px, transparent 2.6px) no-repeat 7px 100% / 11px 11px,
    radial-gradient(circle at 50% 50%, var(--tcg-dark) 0 2.4px, transparent 2.6px) no-repeat 100% 100% / 11px 11px,
    radial-gradient(circle at 50% 50%, var(--tcg-accent) 0 1.2px, transparent 1.4px) no-repeat 7px 7px / 11px 11px,
    radial-gradient(circle at 50% 50%, var(--tcg-accent) 0 1.2px, transparent 1.4px) no-repeat 100% 7px / 11px 11px,
    radial-gradient(circle at 50% 50%, var(--tcg-accent) 0 1.2px, transparent 1.4px) no-repeat 7px 100% / 11px 11px,
    radial-gradient(circle at 50% 50%, var(--tcg-accent) 0 1.2px, transparent 1.4px) no-repeat 100% 100% / 11px 11px;
}

/* ─────────────────────────────────────────────────────────────
   4. MINT — Circuito (cyber)
   Nodos LED y pistas de circuito en las esquinas
   ───────────────────────────────────────────────────────────── */
.tcg-card.tcg-frame--mint { border-radius: 14px; }
.tcg-card.tcg-frame--mint .tcg-card-foil { border-radius: 14px; }
.tcg-card.tcg-frame--mint .tcg-card-frame {
  inset: 6px;
  border: 1.5px solid var(--tcg-line);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 0 16px var(--tcg-accent-soft);
}
.tcg-card.tcg-frame--mint .tcg-card-frame::before {
  inset: 4px;
  border: 1px solid var(--tcg-accent-soft);
  border-radius: 7px;
}
/* Pistas de circuito en L + nodo LED */
.tcg-card.tcg-frame--mint .tcg-card-frame::after {
  inset: 0;
  border-radius: 10px;
  background:
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 2px 2px / 16px 1.5px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 2px 2px / 1.5px 16px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 100% 2px / 16px 1.5px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 100% 2px / 1.5px 16px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 2px 100% / 16px 1.5px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 2px 100% / 1.5px 16px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 100% 100% / 16px 1.5px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 100% 100% / 1.5px 16px,
    radial-gradient(circle, #fff 0 1.4px, var(--tcg-accent) 1.4px 2.8px, transparent 3px) no-repeat 1px 1px / 7px 7px,
    radial-gradient(circle, #fff 0 1.4px, var(--tcg-accent) 1.4px 2.8px, transparent 3px) no-repeat 100% 1px / 7px 7px,
    radial-gradient(circle, #fff 0 1.4px, var(--tcg-accent) 1.4px 2.8px, transparent 3px) no-repeat 1px 100% / 7px 7px,
    radial-gradient(circle, #fff 0 1.4px, var(--tcg-accent) 1.4px 2.8px, transparent 3px) no-repeat 100% 100% / 7px 7px;
}

/* ─────────────────────────────────────────────────────────────
   5. SKY — Sci-fi / Brackets
   Esquinas muy angulares con brackets estilo HUD
   ───────────────────────────────────────────────────────────── */
.tcg-card.tcg-frame--sky {
  border-radius: 0;
  clip-path: polygon(13% 0, 87% 0, 100% 13%, 100% 87%, 87% 100%, 13% 100%, 0 87%, 0 13%);
}
.tcg-card.tcg-frame--sky .tcg-card-foil { border-radius: 0; }
.tcg-card.tcg-frame--sky .tcg-card-art { border-radius: 0; }
.tcg-card.tcg-frame--sky .tcg-card-frame {
  inset: 8px;
  border: 1.5px solid var(--tcg-line);
  border-radius: 0;
  clip-path: polygon(11% 0, 89% 0, 100% 11%, 100% 89%, 89% 100%, 11% 100%, 0 89%, 0 11%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .26),
    inset 0 0 14px var(--tcg-accent-soft);
}
.tcg-card.tcg-frame--sky .tcg-card-frame::before {
  inset: 3px;
  border: 1px solid var(--tcg-accent-soft);
  border-radius: 0;
  clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
}
/* Brackets HUD [ ] en las esquinas */
.tcg-card.tcg-frame--sky .tcg-card-frame::after {
  inset: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 3px 3px / 14px 2.5px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 3px 3px / 2.5px 14px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 100% 3px / 14px 2.5px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 100% 3px / 2.5px 14px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 3px 100% / 14px 2.5px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 3px 100% / 2.5px 14px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 100% 100% / 14px 2.5px,
    linear-gradient(var(--tcg-accent), var(--tcg-accent)) no-repeat 100% 100% / 2.5px 14px;
}

/* ─────────────────────────────────────────────────────────────
   6. CORAL — Arcano / Arco
   Silueta de arco con gemas y runas
   ───────────────────────────────────────────────────────────── */
.tcg-card.tcg-frame--coral {
  border-radius: 50% 50% 16px 16px / 24% 24% 16px 16px;
}
.tcg-card.tcg-frame--coral .tcg-card-foil { border-radius: 50% 50% 16px 16px / 24% 24% 16px 16px; }
.tcg-card.tcg-frame--coral .tcg-card-frame {
  inset: 7px;
  border: 1.5px solid var(--tcg-line);
  border-radius: 50% 50% 12px 12px / 22% 22% 12px 12px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .3),
    inset 0 0 14px var(--tcg-accent-soft);
}
.tcg-card.tcg-frame--coral .tcg-card-frame::before {
  inset: 4px;
  border: 1px solid var(--tcg-accent-soft);
  border-radius: 50% 50% 9px 9px / 21% 21% 9px 9px;
}
/* Gemas en las esquinas + runas */
.tcg-card.tcg-frame--coral .tcg-card-frame::after {
  inset: 0;
  border-radius: 50% 50% 12px 12px / 22% 22% 12px 12px;
  background:
    radial-gradient(circle, var(--tcg-accent) 0 2.2px, var(--tcg-dark) 2.2px 3px, transparent 3.2px) no-repeat 4px 24% / 9px 9px,
    radial-gradient(circle, var(--tcg-accent) 0 2.2px, var(--tcg-dark) 2.2px 3px, transparent 3.2px) no-repeat 100% 24% / 9px 9px,
    radial-gradient(circle, var(--tcg-accent) 0 2.2px, var(--tcg-dark) 2.2px 3px, transparent 3.2px) no-repeat 4px 92% / 9px 9px,
    radial-gradient(circle, var(--tcg-accent) 0 2.2px, var(--tcg-dark) 2.2px 3px, transparent 3.2px) no-repeat 100% 92% / 9px 9px,
    linear-gradient(var(--tcg-accent-soft), var(--tcg-accent-soft)) no-repeat 50% 8px / 22px 1.5px,
    linear-gradient(var(--tcg-accent-soft), var(--tcg-accent-soft)) no-repeat 50% 100% / 22px 1.5px;
}

/* ─────────────────────────────────────────────────────────────
   7. PERLA — Prisma
   Facetas talladas como un cristal, refracción en las esquinas
   ───────────────────────────────────────────────────────────── */
.tcg-card.tcg-frame--perla {
  border-radius: 0;
  clip-path: polygon(24% 0, 76% 0, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0 76%, 0 24%);
}
.tcg-card.tcg-frame--perla .tcg-card-foil { border-radius: 0; }
.tcg-card.tcg-frame--perla .tcg-card-art { border-radius: 0; }
.tcg-card.tcg-frame--perla .tcg-card-frame {
  inset: 8px;
  border: 1.5px solid var(--tcg-line);
  border-radius: 0;
  clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    inset 0 0 18px color-mix(in srgb, var(--tcg-rarity) 24%, transparent);
}
.tcg-card.tcg-frame--perla .tcg-card-frame::before {
  inset: 3px;
  border: 1px solid var(--tcg-accent-soft);
  border-radius: 0;
  clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 0 20%);
}
/* Facetas triangulares solo en las esquinas */
.tcg-card.tcg-frame--perla .tcg-card-frame::after {
  inset: 0;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .85) 0 22%, transparent 22%) no-repeat 0 0 / 26px 26px,
    linear-gradient(-135deg, rgba(255, 255, 255, .7) 0 22%, transparent 22%) no-repeat 100% 0 / 26px 26px,
    linear-gradient(225deg, rgba(255, 255, 255, .85) 0 22%, transparent 22%) no-repeat 0 100% / 26px 26px,
    linear-gradient(45deg, rgba(255, 255, 255, .7) 0 22%, transparent 22%) no-repeat 100% 100% / 26px 26px,
    linear-gradient(135deg, var(--tcg-accent-soft) 0 14%, transparent 14%) no-repeat 0 0 / 26px 26px,
    linear-gradient(-135deg, var(--tcg-accent-soft) 0 14%, transparent 14%) no-repeat 100% 0 / 26px 26px,
    linear-gradient(225deg, var(--tcg-accent-soft) 0 14%, transparent 14%) no-repeat 0 100% / 26px 26px,
    linear-gradient(45deg, var(--tcg-accent-soft) 0 14%, transparent 14%) no-repeat 100% 100% / 26px 26px;
}

/* ─────────────────────────────────────────────────────────────
   8. NOCHE — Imperial Legendario
   Silueta gótica + triple filete + gemas + filigrana + halo
   ───────────────────────────────────────────────────────────── */
.tcg-card.tcg-frame--noche {
  border-radius: 0;
  clip-path: polygon(
    15% 0, 85% 0,
    91% 4%, 100% 4%, 100% 11%,
    94% 17%, 100% 24%,
    100% 76%,
    94% 83%, 100% 90%,
    100% 96%, 91% 96%,
    85% 100%, 15% 100%,
    9% 96%, 0 96%, 0 90%,
    6% 83%, 0 76%,
    0 24%,
    6% 17%, 0 11%,
    0 4%, 9% 4%
  );
}
.tcg-card.tcg-frame--noche .tcg-card-foil { border-radius: 0; }
.tcg-card.tcg-frame--noche .tcg-card-art { border-radius: 0; }
.tcg-card.tcg-frame--noche .tcg-card-frame {
  inset: 8px;
  border: 1.5px solid var(--tcg-line);
  border-radius: 0;
  clip-path: polygon(
    13% 0, 87% 0,
    92% 5%, 100% 5%, 100% 12%,
    93% 18%, 100% 25%,
    100% 75%,
    93% 82%, 100% 89%,
    100% 95%, 92% 95%,
    87% 100%, 13% 100%,
    8% 95%, 0 95%, 0 89%,
    7% 82%, 0 75%,
    0 25%,
    7% 18%, 0 12%,
    0 5%, 8% 5%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .34),
    inset 0 0 22px color-mix(in srgb, var(--tcg-rarity) 34%, transparent),
    0 0 16px color-mix(in srgb, var(--tcg-rarity) 30%, transparent);
}
/* Triple filete */
.tcg-card.tcg-frame--noche .tcg-card-frame::before {
  inset: 4px;
  border: 1px solid var(--tcg-accent-soft);
  border-radius: 0;
  clip-path: polygon(
    11% 0, 89% 0,
    93% 6%, 100% 6%, 100% 13%,
    93% 19%, 100% 26%,
    100% 74%,
    93% 81%, 100% 88%,
    100% 94%, 93% 94%,
    89% 100%, 11% 100%,
    7% 94%, 0 94%, 0 88%,
    7% 81%, 0 74%,
    0 26%,
    7% 19%, 0 13%,
    0 6%, 7% 6%
  );
}
/* Gemas + filigrana (solo en los puntos de las esquinas) */
.tcg-card.tcg-frame--noche .tcg-card-frame::after {
  inset: 0;
  border-radius: 0;
  background:
    radial-gradient(circle, #fff 0 1.2px, var(--tcg-accent) 1.2px 2.6px, transparent 2.8px) no-repeat 9% 6% / 8px 8px,
    radial-gradient(circle, #fff 0 1.2px, var(--tcg-accent) 1.2px 2.6px, transparent 2.8px) no-repeat 91% 6% / 8px 8px,
    radial-gradient(circle, #fff 0 1.2px, var(--tcg-accent) 1.2px 2.6px, transparent 2.8px) no-repeat 9% 94% / 8px 8px,
    radial-gradient(circle, #fff 0 1.2px, var(--tcg-accent) 1.2px 2.6px, transparent 2.8px) no-repeat 91% 94% / 8px 8px,
    radial-gradient(circle, #fff 0 1.6px, var(--tcg-accent) 1.6px 3.4px, var(--tcg-dark) 3.4px 4px, transparent 4.2px) no-repeat 50% 2% / 10px 10px,
    radial-gradient(circle, #fff 0 1.6px, var(--tcg-accent) 1.6px 3.4px, var(--tcg-dark) 3.4px 4px, transparent 4.2px) no-repeat 50% 98% / 10px 10px;
}
/* Filigrana interior (capa extra de la carta) */
.tcg-card.tcg-frame--noche::before {
  position: absolute;
  inset: 4px;
  z-index: 2;
  border: 1px solid var(--tcg-accent-soft);
  border-radius: 0;
  content: "";
  pointer-events: none;
  clip-path: polygon(
    10% 0, 90% 0,
    94% 7%, 100% 7%, 100% 14%,
    92% 20%, 100% 27%,
    100% 73%,
    92% 80%, 100% 87%,
    100% 93%, 94% 93%,
    90% 100%, 10% 100%,
    6% 93%, 0 93%, 0 87%,
    8% 80%, 0 73%,
    0 27%,
    8% 20%, 0 14%,
    0 7%, 6% 7%
  );
}

/* ═══════════════════════════════════════════════════════════════
   COLORES DE LOS MARCOS (solo el color; la forma va arriba)
   ═══════════════════════════════════════════════════════════════ */
.tcg-card.tcg-frame--rose {
  --tcg-rarity: #e8879a;
  --tcg-foil-1: #ffd9e2;
  --tcg-foil-2: #f2a9bf;
  --tcg-foil-3: #ffefc4;
  --tcg-foil-4: #d9728c;
}
.tcg-card.tcg-frame--lavender {
  --tcg-rarity: #a98ada;
  --tcg-foil-1: #ecdcff;
  --tcg-foil-2: #c3a6ee;
  --tcg-foil-3: #ffe4f2;
  --tcg-foil-4: #8f6cc4;
}
.tcg-card.tcg-frame--gold {
  --tcg-rarity: #d9a92f;
  --tcg-foil-1: #fff0b8;
  --tcg-foil-2: #e8c163;
  --tcg-foil-3: #fff8dd;
  --tcg-foil-4: #b8891d;
}
.tcg-card.tcg-frame--mint {
  --tcg-rarity: #63bfa4;
  --tcg-foil-1: #d6fbec;
  --tcg-foil-2: #8fd9c1;
  --tcg-foil-3: #e8fff8;
  --tcg-foil-4: #3f9c81;
}
.tcg-card.tcg-frame--sky {
  --tcg-rarity: #5fa8d4;
  --tcg-foil-1: #d3efff;
  --tcg-foil-2: #86c6ea;
  --tcg-foil-3: #eafaff;
  --tcg-foil-4: #3f88b5;
}
.tcg-card.tcg-frame--coral {
  --tcg-rarity: #f0795f;
  --tcg-foil-1: #ffd6c4;
  --tcg-foil-2: #f79a76;
  --tcg-foil-3: #fff0e6;
  --tcg-foil-4: #d45c42;
}
.tcg-card.tcg-frame--perla {
  --tcg-rarity: #b9b6cf;
  --tcg-foil-1: #ffffff;
  --tcg-foil-2: #dfe9f2;
  --tcg-foil-3: #f7eaf5;
  --tcg-foil-4: #a3a7bd;
}
.tcg-card.tcg-frame--noche {
  --tcg-rarity: #5a6bc4;
  --tcg-foil-1: #b8c6ff;
  --tcg-foil-2: #6f7fd8;
  --tcg-foil-3: #d8e0ff;
  --tcg-foil-4: #3d4a9e;
}

/* Rarezas altas: sheen más intenso y destello adicional */
.tcg-card--special,
.tcg-card--unique,
.tcg-card--secret {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tcg-rarity) 70%, transparent),
    0 0 18px color-mix(in srgb, var(--tcg-rarity) 35%, transparent),
    0 6px 16px rgba(92, 63, 74, .2);
}
.tcg-card--unique .tcg-card-foil,
.tcg-card--secret .tcg-card-foil {
  opacity: 1;
  filter: saturate(1.25) brightness(1.05);
}

/* Reflejo diagonal tipo holographic sobre rarezas altas */
.tcg-card--special::after,
.tcg-card--unique::after,
.tcg-card--secret::after {
  position: absolute;
  inset: -60%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, #ffffff5c 48%, #fff9 50%, transparent 56%);
  content: "";
  pointer-events: none;
  transform: translateX(-45%) rotate(18deg);
  animation: tcg-card-shine 5.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   VISTA GRANDE (LIGHTBOX) — MARCO MÁS DETALLADO
   ═══════════════════════════════════════════════════════════════ */
.tcg-lightbox .tcg-card {
  width: min(340px, 82vw);
  border-radius: 22px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tcg-rarity) 70%, transparent),
    0 0 40px color-mix(in srgb, var(--tcg-rarity) 40%, transparent),
    0 30px 70px rgba(0, 0, 0, .55);
}
.tcg-lightbox .tcg-card-foil {
  border-radius: 22px;
  padding: 4px;
  animation-duration: 5s;
}
.tcg-lightbox .tcg-card-frame {
  inset: 8px;
  border-radius: 16px;
}
.tcg-lightbox .tcg-card-frame::before { inset: 5px; border-radius: 12px; }
.tcg-lightbox .tcg-card-frame::after {
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--tcg-rarity) 90%, transparent) 0 3.4px, transparent 3.6px),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--tcg-rarity) 90%, transparent) 0 3.4px, transparent 3.6px),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--tcg-rarity) 90%, transparent) 0 3.4px, transparent 3.6px),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--tcg-rarity) 90%, transparent) 0 3.4px, transparent 3.6px);
}
.tcg-lightbox .tcg-card-name {
  padding: 30px 18px 0;
  font-size: 17px;
}
.tcg-lightbox .tcg-card-story {
  padding: 4px 18px 16px;
  font-size: 11.5px;
  white-space: normal;
}
.tcg-lightbox .tcg-card-rarity {
  top: 16px;
  left: 16px;
  padding: 4px 11px;
  font-size: 9px;
}
.tcg-lightbox .tcg-card-qty {
  right: 16px;
  bottom: 54px;
  padding: 4px 8px;
  font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   PANTALLA DE REVELADO / APERTURA
   ═══════════════════════════════════════════════════════════════ */
.tcg-reveal-card .tcg-card {
  width: min(300px, 78vw);
  border-radius: 20px;
  animation: tcg-enter .3s ease both;
}
.tcg-reveal-card .tcg-card-foil {
  border-radius: 20px;
  padding: 3.5px;
}
.tcg-reveal-card .tcg-card-frame { inset: 7px; border-radius: 14px; }
.tcg-reveal-card .tcg-card-frame::before { inset: 4px; border-radius: 10px; }
.tcg-reveal-card .tcg-card-name {
  padding: 26px 16px 0;
  font-size: 15px;
}
.tcg-reveal-card .tcg-card-story {
  padding: 3px 16px 14px;
  font-size: 10.5px;
}
.tcg-reveal-card .tcg-card-rarity {
  top: 14px;
  left: 14px;
  font-size: 8.5px;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .tcg-card-name { padding: 20px 11px 0; }
  .tcg-card-story { padding: 2px 11px 10px; }
}
.tcg-card--featured { min-width: 0; }
.tcg-card-slot { position: relative; min-width: 0; }
.tcg-card-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tcg-card-share, .tcg-card-edit { flex: 1 1 auto; border: 1px solid #f0dfe2; border-radius: 9px; padding: 6px 7px; background: #fff8f6; color: #986171; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.tcg-card-share:hover, .tcg-card-edit:hover { border-color: #e7aab4; background: #fff0ef; }

.tcg-opening, .tcg-lightbox { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; overflow-y: auto; padding: 20px; background: #342333ed; color: white; }
.tcg-opening-top { position: fixed; top: 17px; right: 18px; left: 18px; color: #f7dce5; font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.tcg-close-btn, .tcg-lightbox-close { width: 40px; height: 40px; border: 1px solid #ffffff50; border-radius: 50%; background: #ffffff15; color: white; font-size: 27px; line-height: 1; cursor: pointer; }
.tcg-opening-stage { width: min(640px, 100%); text-align: center; animation: tcg-enter .28s ease both; }
.tcg-opening-stage h2 { margin: 12px 0 5px; font-family: Georgia, serif; font-size: clamp(23px, 5vw, 34px); }
.tcg-opening-stage > p { color: #dfcbd8; font-size: 13px; }
.tcg-opening-stage .tcg-primary-btn { max-width: 330px; margin-top: 14px; }
.tcg-open-pack-art { position: relative; display: flex; width: min(300px, 80vw); min-height: 195px; align-items: center; justify-content: center; gap: 5px; overflow: hidden; margin: 0 auto; border: 2px solid #f5d7a0; border-radius: 25px; background: radial-gradient(circle at 50% 40%, #fff8e0, transparent 55%), linear-gradient(145deg, #e8b3a5, #cf819c 65%, #a9668c); box-shadow: inset 0 0 0 7px #ffffff29, 0 20px 60px #efb4c052; font-size: 67px; }
.tcg-open-pack-art::before { position: absolute; inset: 0 0 45%; z-index: 1; border-bottom: 4px dashed #fff2dd; background: linear-gradient(145deg, #edc0ad, #db91a5 65%, #bd7596); clip-path: polygon(0 0,100% 0,100% 88%,90% 82%,80% 91%,70% 82%,60% 90%,50% 82%,40% 91%,30% 82%,20% 91%,10% 82%,0 90%); content: ""; transform-origin: 50% 100%; }
.tcg-open-pack-art::after { position: absolute; top: 54%; left: 50%; z-index: 2; width: 130%; height: 7px; border-radius: 8px; background: linear-gradient(90deg, transparent, #fff5d8 10%, #fff 50%, #fff5d8 90%, transparent); content: ""; opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scaleX(.05); }
.tcg-open-pack-art.is-tearing { animation: tcg-pack-shake .16s linear 3; }
.tcg-open-pack-art.is-tearing::before { animation: tcg-pack-flap .85s .25s cubic-bezier(.2,.8,.2,1) forwards; }
.tcg-open-pack-art.is-tearing::after { animation: tcg-pack-rip .8s .2s ease-out forwards; }
.tcg-open-pack-art.is-torn > span, .tcg-open-pack-art.is-torn > b { animation: tcg-pack-fall .42s ease-in forwards; }
.tcg-open-pack-art.is-torn { background: linear-gradient(145deg, #51405f, #302a4c); box-shadow: inset 0 0 0 7px #ffffff17, 0 20px 60px #efb4c052; }
.tcg-open-pack-art b { color: #fff2dc; font-size: 25px; }
.tcg-reveal-count { color: #f4dce4 !important; font-weight: 900; letter-spacing: .5px; }
.tcg-reveal-card { display: flex; width: min(260px, 68vw); min-height: min(365px, 58vh); align-items: center; justify-content: center; margin: 0 auto; }
.tcg-reveal-card .tcg-card { width: 100%; max-height: 58vh; }
.tcg-card-back { display: grid; width: 100%; height: 100%; min-height: 300px; align-content: center; justify-items: center; gap: 12px; border: 2px solid #f4d28f; border-radius: 20px; background: radial-gradient(circle at 50% 40%, #fff8df 0 2%, transparent 36%), linear-gradient(145deg, #dca99a, #c67d99 55%, #9f668a); box-shadow: inset 0 0 0 8px #ffffff35, 0 14px 40px #100a183d; color: #fff8ed; }
.tcg-card-back span { font-size: 45px; }
.tcg-card-back strong { border: 1px solid #fff9; border-radius: 30px; padding: 8px 17px; font-size: 13px; letter-spacing: 3px; }
.tcg-card-back small { font-size: 11px; opacity: .8; }
.tcg-summary-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 19px 0; }
.tcg-summary-cards .tcg-card { max-height: 300px; }
.tcg-lightbox { z-index: 9010; }
.tcg-lightbox-close { position: fixed; top: 18px; right: 18px; }
.tcg-lightbox > div { width: min(340px, 82vw); }
.tcg-lightbox > div .tcg-card { width: 100%; max-height: 72vh; }

.tcg-create-card-btn { width: auto; margin: 0 0 12px; padding: 9px 14px; }
.tcg-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 9020;
  display: grid;
  align-items: center;
  justify-items: center;
  overflow: auto;
  padding: 16px;
  background: #342333bf;
  backdrop-filter: blur(5px);
}
.tcg-editor {
  width: min(540px, 100%);
  max-height: min(92vh, 850px);
  overflow: auto;
  border: 1px solid #f1dfe2;
  border-radius: 22px;
  padding: 20px;
  background: #fffdfb;
  color: var(--tcg-ink);
  box-shadow: 0 24px 80px #1c102a55;
}
.tcg-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.tcg-editor-header h2 { margin: 4px 0 0; font-family: Georgia, serif; font-size: 24px; }
.tcg-editor-close { flex: 0 0 auto; border-color: var(--tcg-line); background: #fff4f4; color: #956373; }
.tcg-editor-form { display: grid; gap: 12px; }
.tcg-editor-field { display: grid; gap: 6px; color: #766571; font-size: 11px; font-weight: 900; }
.tcg-editor-field input, .tcg-editor-field select, .tcg-editor-field textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid #eadfe2;
  border-radius: 10px;
  padding: 9px 11px;
  background: white;
  color: var(--tcg-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.tcg-editor-field textarea { min-height: 78px; resize: vertical; }
.tcg-editor-field input[type="file"] { padding: 7px; }
.tcg-editor-field input[type="file"]::file-selector-button { margin-right: 9px; border: 0; border-radius: 7px; padding: 7px 9px; background: #fff0ef; color: #9b6171; font-weight: 800; }
.tcg-editor-field small { color: var(--tcg-muted); font-size: 10px; font-weight: 600; }
.tcg-editor-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tcg-card-image-preview { display: grid; min-height: 130px; align-content: center; justify-items: center; gap: 7px; overflow: hidden; border: 1px dashed #e7cbd0; border-radius: 13px; background: #fff7f5; color: #ac8993; text-align: center; }
.tcg-card-image-preview > span { font-size: 30px; }
.tcg-card-image-preview > small { font-size: 10px; }
.tcg-card-image-preview img { width: 100%; max-height: 230px; object-fit: contain; }
.tcg-editor-shared-note { margin: 0; color: var(--tcg-muted); font-size: 10px; }
.tcg-editor-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 3px; }
.tcg-editor-actions .tcg-primary-btn { width: auto; min-width: 190px; }
.tcg-editor-actions .tcg-tool-btn { min-width: 96px; }
.tcg-transfer-intro { margin: 0; color: #806f79; font-size: 13px; line-height: 1.55; }

.tcg-notification-wrap { position: relative; flex: 0 0 auto; }
.tcg-notification-button { position: relative; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #f0e2e4; border-radius: 50%; background: #fffaf8; color: #8d5c6e; font-size: 17px; cursor: pointer; }
.tcg-notification-button:hover, .tcg-notification-button[aria-expanded="true"] { border-color: #e7aab4; background: #fff0ef; }
.tcg-notification-badge { position: absolute; top: -5px; right: -5px; display: grid; min-width: 18px; height: 18px; place-items: center; border: 2px solid white; border-radius: 12px; padding: 0 4px; background: #d66f84; color: white; font-size: 9px; font-weight: 900; }
.tcg-notification-badge[hidden] { display: none; }
.tcg-notification-panel { --tcg-ink: #594b55; --tcg-line: #f0e2e4; --tcg-muted: #9c8b96; position: absolute; top: calc(100% + 10px); right: 0; z-index: 9030; display: flex; width: min(390px, calc(100vw - 24px)); max-height: min(70vh, 570px); flex-direction: column; overflow: hidden; border: 1px solid #eedde2; border-radius: 17px; background: #fffdfb; color: var(--tcg-ink); box-shadow: 0 16px 45px #34233330; }
.tcg-notification-panel[hidden] { display: none; }
.tcg-notification-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--tcg-line); padding: 13px 15px; }
.tcg-notification-header > div { display: grid; gap: 3px; }
.tcg-notification-header strong { font-size: 13px; }
.tcg-notification-header small { color: var(--tcg-muted); font-size: 10px; }
.tcg-notification-header button { width: 30px; height: 30px; border: 1px solid var(--tcg-line); border-radius: 50%; background: white; color: #866f7a; font-size: 19px; cursor: pointer; }
.tcg-notification-list { display: grid; gap: 8px; overflow-y: auto; padding: 10px; }
.tcg-notification-empty { margin: 0; padding: 18px 10px; color: var(--tcg-muted); font-size: 12px; line-height: 1.5; text-align: center; }
.tcg-notification-item { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 9px; border: 1px solid #f0e4e6; border-radius: 12px; padding: 10px; background: white; }
.tcg-notification-item.is-unread { border-color: #ecc3c9; background: #fff7f5; }
.tcg-notification-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #fff0ef; font-size: 17px; }
.tcg-notification-copy { min-width: 0; }
.tcg-notification-copy > strong { font-size: 11px; }
.tcg-notification-copy > p { margin: 4px 0 0; color: #8c7c85; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.tcg-notification-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tcg-notification-actions .tcg-primary-btn, .tcg-notification-actions .tcg-tool-btn { width: auto; min-width: 0; padding: 7px 9px; font-size: 10px; }

@keyframes tcg-card-shine { 0%, 68% { transform: translateX(-45%) rotate(18deg); } 100% { transform: translateX(45%) rotate(18deg); } }
@keyframes tcg-enter { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tcg-pack-shake { 0%,100% { transform: rotate(0) translateX(0); } 25% { transform: rotate(-3deg) translateX(-5px); } 75% { transform: rotate(3deg) translateX(5px); } }
@keyframes tcg-pack-flap { to { opacity: .35; transform: translateY(-145px) rotate(-17deg); } }
@keyframes tcg-pack-rip { 15% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scaleX(.18); } 75%,100% { opacity: .75; transform: translate(-50%, -50%) rotate(-12deg) scaleX(1); } }
@keyframes tcg-pack-fall { to { opacity: 0; transform: translateY(25px) scale(.65) rotate(12deg); } }

@media (max-width: 760px) {
  .tcg-topbar { align-items: flex-start; flex-direction: column; }
  .tcg-tools { width: 100%; }
  .tcg-create-card-btn { width: 100%; }
  .tcg-tool-btn { flex: 1; }
  .tcg-editor-actions .tcg-primary-btn { min-width: 0; }
  .tcg-profile-note { flex-basis: 100%; margin: 3px 0 0; }
  .tcg-hero { min-height: 230px; padding: 23px 18px; }
  .tcg-hero-copy { max-width: 75%; }
  .tcg-hero-copy p { max-width: 250px; line-height: 1.45; }
  .tcg-hero-art { right: -9%; bottom: -2px; gap: 0; font-size: clamp(55px, 15vw, 85px); opacity: .83; }
  .tcg-hero-art span { margin-top: -37px; font-size: 24px; }
  .tcg-stats { gap: 6px; }
  .tcg-stats div { min-width: 58px; padding: 6px 8px; }
  .tcg-feature-grid { grid-template-columns: 1fr; }
  .tcg-pack-actions { grid-template-columns: 1fr; }
  .tcg-extra-panel > p { min-height: auto; }
  .tcg-album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .tcg-recent-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .tcg-card { border-radius: 11px; padding: 4px; }
  .tcg-card-rarity { top: 7px; left: 7px; padding: 2px 4px; font-size: 7px; }
  .tcg-card-name { font-size: 9px; }
  .tcg-card-story { font-size: 7px; }
  .tcg-card-qty { right: 5px; bottom: 32px; }
  .tcg-summary-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 50vh; overflow-y: auto; }
  .tcg-summary-cards .tcg-card { max-height: 250px; }
}

@media (max-width: 420px) {
  .topbar .tb-status > span { display: none; }
  .tcg-notification-button { width: 34px; height: 34px; }
  .tcg-notification-panel { right: -56px; width: min(390px, calc(100vw - 20px)); }
  .tcg-profile-select { margin: 25px auto; padding: 24px 17px; }
  .tcg-profile-options { width: 100%; }
  .tcg-profile-option { flex: 1; min-width: 110px; }
  .tcg-hero { min-height: 246px; padding: 19px 14px; }
  .tcg-hero-copy { max-width: 100%; align-self: flex-start; }
  .tcg-hero-copy h2 { max-width: 72%; font-size: 21px; }
  .tcg-hero-copy p { max-width: 69%; font-size: 11px; }
  .tcg-hero-art { right: -5%; bottom: -17px; font-size: 59px; }
  .tcg-hero-sparkle-one { right: 21%; }
  .tcg-hero-sparkle-two { right: 40%; }
  .tcg-stats { max-width: 75%; margin-top: 14px; }
  .tcg-stats div { min-width: 52px; }
  .tcg-stats strong { font-size: 14px; }
  .tcg-pack-panel, .tcg-extra-panel, .tcg-home-quests, .tcg-recent-section, .tcg-album-panel, .tcg-quests-panel { padding: 15px; }
  .tcg-quest { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 9px; }
  .tcg-quest-icon { width: 32px; height: 32px; }
  .tcg-quest-action { min-width: 66px; padding: 7px 6px; }
  .tcg-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tcg-card-name { font-size: 11px; }
  .tcg-card-story { font-size: 8px; }
  .tcg-card-qty { bottom: 37px; }
  .tcg-recent-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tcg-recent-cards .tcg-card:nth-child(n+4) { display: none; }
  .tcg-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcg-editor { padding: 16px; }
  .tcg-editor-row { grid-template-columns: 1fr; }
  .tcg-editor-actions > * { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tcg-card, .tcg-pack, .tcg-primary-btn, .tcg-secondary-btn, .tcg-profile-option { transition: none; }
  .tcg-card--special::after, .tcg-card--unique::after, .tcg-card--secret::after { animation: none; }
  .tcg-opening-stage { animation: none; }
  .tcg-open-pack-art.is-tearing, .tcg-open-pack-art.is-tearing::before, .tcg-open-pack-art.is-tearing::after, .tcg-open-pack-art.is-torn > span, .tcg-open-pack-art.is-torn > b { animation-duration: .01ms; animation-delay: 0ms; }
}