/* ============================================================
   Fase 3A - Runtime único de plantillas de carta.
   Colección / Detalle / Constructor usan la MISMA plantilla del editor.
   Mantiene la proporción exacta del lienzo del editor (por defecto 380x540)
   y la escala de forma responsiva con container queries, sin medir en JS.
   No afecta duelo, mano, campo ni .game-card.
   ============================================================ */

.cg-template-runtime {
    position: relative;
    container-type: inline-size;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    /* Reserva el alto manteniendo la proporción del lienzo de la plantilla. */
    aspect-ratio: var(--cg-tpl-w, 380) / var(--cg-tpl-h, 540);
}

.cg-template-runtime--full { max-width: 360px; }
.cg-template-runtime--md { max-width: 320px; }
.cg-template-runtime--compact { max-width: 240px; }

/* Tamaños para plantillas DENTRO de ventanas del duelo (mulligan, decisiones, detalle
   lateral, opciones, diálogos). Se muestra SOLO la carta completa, así que pueden ser más
   grandes que cuando había info externa, pero contenidas para no tapar botones/textos ni
   romper el scroll. No afectan a las cartas pequeñas de mano/campo del tablero. */
.cg-template-runtime--duel-dialog { max-width: min(100%, 320px); }
.cg-template-runtime--duel-choice { max-width: min(100%, 320px); }
/* El detalle lateral llena el panel (carta grande, como el ejemplo) con un tope razonable. */
.cg-template-runtime--duel-selected { max-width: 100%; }
.cg-template-runtime--duel-zone { max-width: 210px; }
.cg-template-runtime--duel-field { max-width: none; }

.cg-template-runtime--duel-dialog,
.cg-template-runtime--duel-choice,
.cg-template-runtime--duel-selected,
.cg-template-runtime--duel-zone,
.cg-template-runtime--duel-field {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* El lienzo real vive en coordenadas 1:1 (mismas que el editor) y se escala
   para llenar el ancho disponible del contenedor (100cqw). */
.cg-template-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--cg-tpl-w, 380) * 1px);
    height: calc(var(--cg-tpl-h, 540) * 1px);
    transform-origin: top left;
    /* Escala = ancho del contenedor / ancho del lienzo. El divisor lleva px para
       que length / length dé un número válido para scale(). */
    transform: scale(calc(100cqw / (var(--cg-tpl-w, 380) * 1px)));
    border-radius: 22px;
    overflow: hidden;
    background: rgba(2, 6, 23, .92);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

/* La carta real (createDetailTemplateCard) llena el lienzo, igual que en el
   "Resultado" del editor. Anulamos el layout de colección para que los slots
   reposicionados calcen con las coordenadas de la plantilla. */
.cg-template-stage .cg-template-runtime-card {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 22px;
    box-shadow: none;
    /* Sin z-index: la carta NO crea contexto de apilado propio, así los slots y las
       capas/assets comparten el contexto del stage y su z-index se intercala
       (las capas pueden ir detrás o delante de los iconos). */
}

.cg-template-stage .cg-template-runtime-card:hover {
    box-shadow: none;
}

/* v14.13.25 - Aislamiento visual del runtime.
   Las reglas del duelo para el detalle antiguo usan selectores con !important
   sobre .detail-visual, .detail-meta, .detail-ability, .detail-dons y sus
   estadísticas. Dentro del stage esas reglas no deben alterar la plantilla:
   elements/layers y el lienzo guardado son la única fuente de geometría. */
.cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card {
    --cg-metal-edge: rgba(0, 0, 0, .62);
    --cg-parchment-top: #e8dbb6;
    --cg-parchment-bot: #d4c08f;
    --cg-parchment-ink: #2a1c0c;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 11px 11px 12px !important;
    border: 0 !important;
    color: #ece3cf;
    overflow: hidden !important;
    background:
        linear-gradient(180deg, rgba(22, 17, 11, .55), rgba(8, 6, 4, .85)),
        radial-gradient(120% 78% at 50% -4%, var(--cg-card-accent-soft), transparent 62%),
        linear-gradient(162deg, #241c12, #0c0a07 72%) !important;
}

.cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card::before {
    content: none !important;
}

.cg-template-stage .cg-template-runtime-card .card-layout-official-slot {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

.cg-template-stage .cg-template-runtime-card .cg-frame {
    border: 1px solid var(--cg-card-frame);
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .5), inset 0 0 26px rgba(0, 0, 0, .6);
}

.cg-template-stage .cg-template-runtime-card .cg-frame::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid var(--cg-card-frame);
    border-radius: 13px;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .4);
}

.cg-template-stage .cg-template-runtime-card .cg-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 13px 13px, var(--cg-card-accent) 0 2.5px, transparent 3px),
        radial-gradient(circle at calc(100% - 13px) 13px, var(--cg-card-accent) 0 2.5px, transparent 3px),
        radial-gradient(circle at 13px calc(100% - 13px), var(--cg-card-accent) 0 2.5px, transparent 3px),
        radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), var(--cg-card-accent) 0 2.5px, transparent 3px);
    opacity: .85;
}

.cg-template-stage .cg-template-runtime-card .cg-cost-medallion {
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: 50%;
    color: #1d1405;
    font-weight: 900;
    background: radial-gradient(circle at 36% 28%, #fff7d2, var(--cg-card-accent) 56%, #5e3f12);
}

.cg-template-stage .cg-template-runtime-card .cg-art {
    order: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    overflow: hidden !important;
    isolation: auto !important;
    border: 1px solid var(--cg-card-frame);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .5)), rgba(0, 0, 0, .42) !important;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, .55);
}

.cg-template-stage .cg-template-runtime-card .cg-art img,
.cg-template-stage .cg-template-runtime-card .cg-art .detail-placeholder {
    position: relative !important;
    inset: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 1px solid rgba(0, 0, 0, .5) !important;
    border-radius: 7px !important;
    background: rgba(8, 10, 16, .7) !important;
}

.cg-template-stage .cg-template-runtime-card .cg-banner {
    order: 3;
    position: relative;
    z-index: 4;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: -17px 12px 0 !important;
    padding: 6px 12px 5px !important;
    border: 1px solid var(--cg-card-frame);
    border-radius: 9px;
    text-align: center !important;
    background: linear-gradient(180deg, rgba(42, 31, 16, .97), rgba(13, 10, 6, .98)) !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.cg-template-stage .cg-template-runtime-card .cg-card-status-strip {
    order: 2;
    position: absolute !important;
    top: 13px;
    left: 12px;
    right: 12px;
    z-index: 18;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    max-height: 44px;
    margin: 0 !important;
    padding: 5px 7px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 240, 188, .58);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(8, 7, 5, .9), rgba(25, 17, 8, .82));
    box-shadow: 0 5px 13px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.cg-template-stage .cg-template-runtime-card .cg-card-status-strip .card-state-badge {
    min-height: 19px !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.large-card-preview .cg-template-stage .cg-template-runtime-card .cg-card-status-strip,
.game-dialog-card-template .cg-template-stage .cg-template-runtime-card .cg-card-status-strip {
    max-height: 58px;
    top: 15px;
    left: 16px;
    right: 16px;
    margin: 0 !important;
    padding: 6px 9px !important;
    gap: 6px !important;
}

.large-card-preview .cg-template-stage .cg-template-runtime-card .cg-card-status-strip .card-state-badge,
.game-dialog-card-template .cg-template-stage .cg-template-runtime-card .cg-card-status-strip .card-state-badge {
    min-height: 23px !important;
    padding: 4px 11px !important;
    font-size: .82rem !important;
}

.cg-template-stage .cg-template-runtime-card .cg-title {
    margin: 0 !important;
    color: #fff4cf;
    line-height: 1.1;
    font-weight: 900;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 14px var(--cg-card-accent-soft);
}

.cg-template-stage .cg-template-runtime-card .cg-taxonomy {
    margin: 0 !important;
    color: rgba(232, 224, 200, .72);
    letter-spacing: .03em;
    text-transform: uppercase;
    text-align: center;
}

.cg-template-stage .cg-template-runtime-card .cg-ability {
    order: 4;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 9px 6px 0 !important;
    border: 1px solid var(--cg-card-frame);
    border-radius: 8px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--cg-parchment-ink) !important;
    line-height: 1.36 !important;
    text-align: center !important;
    overflow: auto !important;
    background: linear-gradient(180deg, var(--cg-parchment-top), var(--cg-parchment-bot));
    box-shadow: inset 0 0 20px rgba(120, 88, 38, .35), 0 2px 6px rgba(0, 0, 0, .35);
}

.cg-template-stage .cg-template-runtime-card .cg-ability .cg-ability-content {
    display: block;
    width: 100%;
}

.cg-template-stage .cg-template-runtime-card .cg-ability.cg-ability--compact-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.cg-template-stage .cg-template-runtime-card .cg-ability .cg-ability-name {
    font-weight: 900;
    color: #4a2c0c;
}

.cg-template-stage .cg-template-runtime-card .cg-dons {
    order: 5;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-height: 0 !important;
    margin: 8px 6px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--cg-card-frame) !important;
    border-bottom: 1px solid var(--cg-card-frame) !important;
    text-align: center !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .12)) !important;
}

.cg-template-stage .cg-template-runtime-card .cg-dons .cg-dons-label {
    display: inline-block;
    color: var(--cg-card-accent);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.cg-template-stage .cg-template-runtime-card .cg-dons .cg-dons-list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.cg-template-stage .cg-template-runtime-card .cg-dons .card-state-badge,
.cg-template-stage .cg-template-runtime-card .cg-dons .cg-dons-list span {
    min-width: 0 !important;
    padding: 3px 9px !important;
    border: 1px solid var(--cg-card-frame) !important;
    border-radius: 6px;
    color: #f3e2b3 !important;
    font-size: .71rem;
    font-weight: 700;
    background: rgba(0, 0, 0, .4) !important;
}

.cg-template-stage .cg-template-runtime-card .cg-stats {
    order: 6;
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: 9px 6px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.cg-template-stage .cg-template-runtime-card .cg-gem {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 50%;
    text-align: center;
}

.cg-template-stage .cg-template-runtime-card .cg-gem:not(.cg-slot-has-icon) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}

.cg-template-stage .cg-template-runtime-card .cg-gem.cg-slot-has-icon {
    display: grid !important;
    place-items: center !important;
}

/* El detalle lateral del duelo tiene reglas históricas más específicas y con
   !important. Esta segunda barrera solo existe bajo body.duel-playing y nunca
   alcanza las .game-card de mano/campo. */
body.duel-playing .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .card-layout-official-slot {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

body.duel-playing .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .cg-art {
    min-height: 0 !important;
    margin: 0 !important;
    isolation: auto !important;
}

body.duel-playing .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .cg-art img,
body.duel-playing .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .cg-art .detail-placeholder {
    position: relative !important;
    inset: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 1px solid rgba(0, 0, 0, .5) !important;
}

body.duel-playing .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .cg-ability {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 9px 6px 0 !important;
    color: var(--cg-parchment-ink) !important;
    line-height: 1.36 !important;
    text-align: center !important;
}

body.duel-playing .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .cg-dons {
    min-height: 0 !important;
    margin: 8px 6px 0 !important;
}

body.duel-playing .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .cg-stats {
    flex-wrap: nowrap !important;
    margin: 9px 6px 0 !important;
    padding: 0 !important;
}

body.duel-playing .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .cg-gem {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
}

body.duel-playing .detail-dock .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .cg-ability,
body.duel-playing .detail-dock .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .detail-ability {
    color: var(--cg-parchment-ink) !important;
    font-size: inherit !important;
    line-height: 1.36 !important;
    text-align: center !important;
}

body.duel-playing .detail-dock .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .cg-ability .cg-ability-name {
    color: #4a2c0c !important;
}

body.duel-playing .detail-dock .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .cg-stats {
    color: inherit !important;
    gap: 10px !important;
}

body.duel-playing .detail-dock .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .cg-stats .cg-gem {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border-color: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    font-size: inherit !important;
}

body.duel-playing .detail-dock .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .cg-gem b {
    display: none !important;
}

body.duel-playing .detail-dock .cg-template-stage .cg-template-runtime-card.detail-template-card.cg-card .cg-gem strong {
    display: block !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .9), 0 0 7px rgba(0, 0, 0, .65) !important;
}

/* Fase 3E - Los slots quedan en z 2 dentro del contexto del stage. Las capas/assets
   con z < 2 van detrás de los iconos/textos; con z > 2, delante. */
.cg-template-stage .cg-template-runtime-card .card-layout-official-slot {
    z-index: 2;
}

.cg-template-stage .cg-template-runtime-card .detail-visual img,
.cg-template-stage .cg-template-runtime-card .detail-visual .detail-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: 12px;
}

/* Fase 3B - Iconos nativos (gemas FUE/COR y medallón de coste) proporcionales al slot
   que define el editor. Se quita el tamaño mínimo fijo (50px) para que respeten el
   Ancho/Alto/Margen del slot y el número siga el "Tamaño de fuente". Aplica al editor
   (.card-layout-real-template) y al render real (.cg-template-runtime-card).
   No afecta al duelo (.game-card) ni a la colección sin plantilla. */
.card-layout-real-template .cg-gem,
.cg-template-runtime-card .cg-gem,
.card-layout-real-template .cg-card-cost-medallion,
.cg-template-runtime-card .cg-card-cost-medallion {
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

.card-layout-real-template .cg-gem strong,
.cg-template-runtime-card .cg-gem strong {
    font-size: inherit !important;
    line-height: 1 !important;
}

.cg-template-runtime-card .cg-stat-support-note {
    display: block;
    margin-top: 1px;
    color: #fff4bf;
    font-size: .42em;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .9);
}

/* Fase 3D - El arte se centra en su slot para que el control de tamaño (escala de la
   imagen) quede centrado dentro del área definida por los márgenes. */
.card-layout-real-template .detail-visual,
.cg-template-stage .cg-template-runtime-card .detail-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Fase 3E - En FUE/COR se muestra SOLO el número (como el coste): se oculta la
   etiqueta de texto "FUERZA"/"CORRUPCIÓN". */
.card-layout-real-template .cg-gem b,
.cg-template-runtime-card .cg-gem b {
    display: none !important;
}

/* Fase 3E - Oculta el fondo/marco nativo del slot (gradiente/medallón/parchment) para
   usar una capa/asset detrás del texto. El número/texto se mantiene encima. */
.cg-slot-no-native-bg {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Fase 3B - Icono propio que reemplaza el nativo: la imagen va como background del
   slot (se pinta detrás del texto) y esta clase neutraliza el chrome nativo
   (gradiente/borde/sombra de medallón o gema). El número/letra queda encima. */
.cg-slot-has-icon {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.card-layout-real-template .cg-card-cost-medallion.cg-slot-has-icon,
.cg-template-runtime-card .cg-card-cost-medallion.cg-slot-has-icon,
.card-layout-real-template .cg-gem.cg-slot-has-icon,
.cg-template-runtime-card .cg-gem.cg-slot-has-icon {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    flex: none !important;
    gap: 0 !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
}

.card-layout-real-template .cg-emblem.cg-slot-has-icon,
.cg-template-runtime-card .cg-emblem.cg-slot-has-icon,
.card-layout-real-template .cg-template-don-icon.cg-slot-has-icon,
.cg-template-runtime-card .cg-template-don-icon.cg-slot-has-icon {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.card-layout-real-template .cg-emblem.cg-slot-has-icon .cg-emblem-abbr,
.cg-template-runtime-card .cg-emblem.cg-slot-has-icon .cg-emblem-abbr {
    opacity: 0;
}

.cg-template-runtime-card .cg-template-special-slot {
    margin: 0 !important;
}

.cg-template-runtime-card .cg-template-don-icon {
    display: block;
    border: 0;
    background-color: transparent;
}

/* Capas/assets persistentes de la plantilla (frames PNG, etc.). */
.cg-template-runtime-layer {
    position: absolute;
    pointer-events: none;
    object-fit: contain;
    display: block;
    max-width: none;
}

.cg-template-runtime-layer.is-loading-local {
    visibility: hidden;
}

.cg-template-runtime-layer.is-empty {
    display: none;
}

.cg-template-runtime-layer.is-broken {
    outline: 2px solid #f87171;
    outline-offset: -2px;
}

/* Acciones (botón) fuera del lienzo escalado para no deformarse. */
.cg-template-runtime-actions {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.cg-template-runtime-actions button {
    width: 100%;
}

.cg-template-runtime.clickable {
    cursor: pointer;
}

/* Centrado en la cuadrícula de colección, igual que la carta de detalle. */
.card-grid .cg-template-runtime {
    justify-self: center;
}

/* ------------------------------------------------------------
   Constructor de Mazos - mini carta con plantilla (modo compacto).
   Conserva selección/click/Agregar sin tocar el render de duelo.
   ------------------------------------------------------------ */
.deck-template-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: rgba(15, 23, 42, .55);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.deck-template-tile:hover {
    border-color: rgba(245, 158, 11, .45);
}

.deck-template-tile.is-selected {
    border-color: rgba(245, 158, 11, .65);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .18);
}

.deck-template-tile .cg-template-runtime {
    max-width: 100%;
}

.deck-template-tile .deck-template-copies {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, .4);
    background: rgba(2, 6, 23, .85);
    color: #fde68a;
    font-weight: 800;
    font-size: .78rem;
}

.deck-template-tile .deck-template-add {
    width: 100%;
}


/* v14.13.21 - Plantillas: cuando un slot oculta su fondo nativo,
   se elimina también el borde/marco del tema real. Evita que el cuadro
   antiguo de habilidad tape el asset persistente agregado detrás. */
.cg-template-stage .cg-template-runtime-card .card-layout-official-slot.cg-slot-no-native-bg,
body:not(.duel-playing) .cg-template-stage .cg-template-runtime-card .cg-ability.cg-slot-no-native-bg,
body:not(.duel-playing) .cg-template-stage .cg-template-runtime-card .cg-card-ability-box.cg-slot-no-native-bg {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* v14.13.23 - Las plantillas ahora también se usan DENTRO del duelo (diálogos, detalle,
   opciones, mulligan, visor de zonas). El cuadro nativo de habilidad debe ocultarse igual
   que en Colección. Se limita a .cg-template-runtime-card (nunca afecta a .game-card del
   tablero), por eso es seguro aplicarlo también con body.duel-playing. */
.cg-template-stage .cg-template-runtime-card .cg-ability.cg-slot-no-native-bg,
.cg-template-stage .cg-template-runtime-card .cg-card-ability-box.cg-slot-no-native-bg {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
   Contenedores de la plantilla dentro de ventanas del duelo.
   Centrado y márgenes contenidos; no rompen el scroll del diálogo.
   ------------------------------------------------------------ */
.game-dialog-card-detail .game-dialog-card-template {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

/* Modo "solo carta": cuando se usa la plantilla nueva no se redibuja info externa, así que
   se quita el chrome del contenedor antiguo (borde/fondo/sombra/relleno) para que NO parezca
   una carta dentro de otra. Solo quedan el rótulo funcional (arriba) y, en decisiones, las
   líneas extraLine/subLine (abajo). card-template-runtime.css se carga al final, así que esto
   gana en la cascada sobre dialogs-zones.css sin !important. */
.game-dialog-card-detail.card-only {
    border: 0;
    background: none;
    box-shadow: none;
    padding: 2px 0 0;
    gap: 8px;
}

.game-dialog-card-detail.card-only > small {
    margin-bottom: 2px;
}

#selectedCardDetail .selected-card-template,
.selected-card-template {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

body.duel-playing .detail-dock .selected-card-detail:has(> .selected-card-template .cg-template-runtime) {
    display: block !important;
    padding: 8px !important;
    overflow: auto !important;
}

/* Carta-plantilla dentro del visor de zonas: conserva cursor de selección y la pista
   visual de "doble click para activar habilidad". */
.zone-viewer-list .cg-template-runtime.zone-viewer-card {
    margin: 0;
}

.cg-template-runtime.zone-viewer-card.clickable {
    cursor: pointer;
}

.cg-template-runtime.zone-viewer-card.ability-doubleclick-candidate .cg-template-stage {
    outline: 3px solid rgba(248, 113, 113, .96);
    outline-offset: -3px;
    border-radius: 10px;
    box-shadow:
        0 0 0 3px rgba(127, 29, 29, .38),
        0 0 28px rgba(248, 113, 113, .62),
        0 0 54px rgba(220, 38, 38, .26);
    animation: zone-ability-candidate-glow 1.55s ease-in-out infinite;
}

.detail-template-card.zone-viewer-card.ability-doubleclick-candidate {
    outline: 3px solid rgba(248, 113, 113, .96);
    outline-offset: 3px;
    box-shadow:
        0 0 0 3px rgba(127, 29, 29, .38),
        0 0 28px rgba(248, 113, 113, .62),
        0 0 54px rgba(220, 38, 38, .26);
    animation: zone-ability-candidate-glow 1.55s ease-in-out infinite;
}

.cg-template-runtime.zone-viewer-card.revive-doubleclick-candidate {
    cursor: pointer;
}

.cg-template-runtime.zone-viewer-card.revive-doubleclick-candidate .cg-template-stage {
    outline: 3px solid rgba(248, 113, 113, .92);
    outline-offset: -3px;
    border-radius: 10px;
    box-shadow:
        0 0 0 3px rgba(127, 29, 29, .32),
        0 0 24px rgba(248, 113, 113, .46);
    animation: zone-revive-candidate-glow 1.8s ease-in-out infinite;
}

.cg-template-runtime.zone-viewer-card.revive-doubleclick-candidate:focus-visible .cg-template-stage {
    outline-color: #fde68a;
    box-shadow: 0 0 0 5px rgba(253, 230, 138, .35), 0 0 28px rgba(248, 113, 113, .55);
}

@keyframes zone-revive-candidate-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.08); }
}

@keyframes zone-ability-candidate-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.16) saturate(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .cg-template-runtime.zone-viewer-card.revive-doubleclick-candidate .cg-template-stage,
    .cg-template-runtime.zone-viewer-card.ability-doubleclick-candidate .cg-template-stage,
    .detail-template-card.zone-viewer-card.ability-doubleclick-candidate {
        animation: none;
    }
}

/* v14.13.55 - Etiquetas de estado ancladas sobre la ilustracion, no sobre atributos */
.cg-template-stage .cg-template-runtime-card .cg-art {
    position: relative !important;
}

.cg-template-stage .cg-template-runtime-card .cg-art .cg-card-status-strip,
.large-card-preview .cg-template-stage .cg-template-runtime-card .cg-art .cg-card-status-strip,
.game-dialog-card-template .cg-template-stage .cg-template-runtime-card .cg-art .cg-card-status-strip {
    top: auto !important;
    left: 50px !important;
    right: 50px !important;
    bottom: 7px !important;
    z-index: 28 !important;
    max-height: 44px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    gap: 6px !important;
    border-radius: 9px !important;
    border-color: rgba(255, 240, 188, .48) !important;
    background: linear-gradient(180deg, rgba(8, 7, 5, .64), rgba(25, 17, 8, .78)) !important;
    box-shadow: 0 5px 13px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.cg-template-stage .cg-template-runtime-card .cg-art .cg-card-status-strip .card-state-badge,
.large-card-preview .cg-template-stage .cg-template-runtime-card .cg-art .cg-card-status-strip .card-state-badge,
.game-dialog-card-template .cg-template-stage .cg-template-runtime-card .cg-art .cg-card-status-strip .card-state-badge {
    min-height: 22px !important;
    padding: 4px 10px !important;
    font-size: .78rem !important;
    line-height: 1 !important;
}

.cg-template-runtime--duel-field .cg-template-stage .cg-template-runtime-card .cg-art .cg-card-status-strip {
    left: 42px !important;
    right: 42px !important;
    bottom: 5px !important;
    max-height: 40px !important;
    padding: 4px 7px !important;
    gap: 5px !important;
}

.cg-template-runtime--duel-field .cg-template-stage .cg-template-runtime-card .cg-art .cg-card-status-strip .card-state-badge {
    min-height: 20px !important;
    padding: 3px 9px !important;
    font-size: .72rem !important;
}

/* v14.13.57 - Estados siempre visibles por encima de las capas de plantilla */
.cg-template-stage > .cg-card-status-strip--stage {
    position: absolute !important;
    left: 46px !important;
    right: 46px !important;
    top: auto !important;
    bottom: 210px !important;
    z-index: 2147480000 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    max-height: 48px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    overflow: visible !important;
    pointer-events: none !important;
    border: 1px solid rgba(255, 240, 188, .42) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, rgba(8, 7, 5, .72), rgba(24, 16, 8, .82)) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.cg-template-stage > .cg-card-status-strip--stage .card-state-badge {
    min-height: 23px !important;
    padding: 4px 10px !important;
    font-size: .78rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.cg-template-runtime--duel-field .cg-template-stage > .cg-card-status-strip--stage {
    left: 42px !important;
    right: 42px !important;
    bottom: 208px !important;
    max-height: 46px !important;
    padding: 4px 7px !important;
    gap: 6px !important;
}

.cg-template-runtime--duel-field .cg-template-stage > .cg-card-status-strip--stage .card-state-badge {
    min-height: 22px !important;
    padding: 4px 9px !important;
    font-size: .74rem !important;
}