v13.35 - Ajuste visual configurable de ilustraciones
   ===================== */
:root {
    --cg-art-height: 132px;
    --cg-duel-art-height: 76px;
    --cg-hand-art-height: 62px;
    --cg-dialog-art-height: 180px;
    --cg-card-art-scale: 1;
    --cg-card-art-shift-x: 0%;
    --cg-card-art-shift-y: 0%;
}

.card-image img,
.game-dialog-card-image img,
.detail-visual img,
.detail-head img,
.detail-template-card img,
.zone-viewer-list .game-card.zone-viewer-card .card-image img {
    object-fit: contain;
    object-position: center center;
    transform: translate(var(--cg-card-art-shift-x, 0%), var(--cg-card-art-shift-y, 0%)) scale(var(--cg-card-art-scale, 1));
    transform-origin: center center;
    transition: transform .12s ease, object-position .12s ease;
}

.card-image {
    height: var(--cg-art-height, 132px);
}

.game-board .card-image {
    height: var(--cg-duel-art-height, 76px);
}

.game-board .hand .card-image {
    height: var(--cg-hand-art-height, 62px);
}

.game-dialog-card-image,
.tactico-decision-modal .game-dialog-card-image,
.pending-choice-card .choice-target-card-detail .game-dialog-card-image,
.attacker-choice-modal .choice-target-card-detail .game-dialog-card-image {
    height: var(--cg-dialog-art-height, 180px) !important;
}

.art-settings-panel {
    margin-top: 18px;
}

.art-settings-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.art-settings-head h3,
.art-settings-head p,
.art-global-controls h4,
.art-preview-wrap h4 {
    margin-top: 0;
}

.art-settings-head p {
    color: var(--muted);
    line-height: 1.45;
    margin-bottom: 0;
}

.art-settings-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(260px, 340px);
    gap: 18px;
    align-items: start;
}

.art-settings-controls {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.art-card-picker,
.art-control-grid label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #e0f2fe;
    font-weight: 800;
}

.art-card-picker select {
    width: 100%;
}

.art-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.art-control-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.art-control-grid span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .86rem;
}

.art-control-grid output {
    color: #fde68a;
    font-weight: 900;
    white-space: nowrap;
}

.art-control-grid input[type="range"] {
    width: 100%;
    min-height: 28px;
    padding: 0;
    accent-color: var(--accent);
}

.art-global-controls {
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 16px;
    padding: 12px;
    background: rgba(2, 6, 23, .22);
}

.art-global-controls h4,
.art-preview-wrap h4 {
    color: #fef3c7;
    margin-bottom: 10px;
}

.art-settings-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.art-preview-wrap {
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 18px;
    padding: 12px;
    background: rgba(2, 6, 23, .24);
}

.art-preview-box {
    display: grid;
    place-items: center;
    min-height: 380px;
    color: var(--muted);
}

.art-preview-card {
    width: min(100%, 310px);
}

@media (max-width: 980px) {
    .art-settings-layout {
        grid-template-columns: 1fr;
    }
    .art-control-grid,
    .art-control-grid.compact {
        grid-template-columns: 1fr;
    }
    .art-settings-head {
        flex-direction: column;
    }
}


/* v13.36 - Corrección de recorte al ajustar ilustraciones.
   La imagen completa queda visible cuando el zoom está en 100% o menos;
   solo se recorta si el jugador decide acercarla sobre 100%. */
.card-image,
.game-dialog-card-image,
.detail-visual,
.detail-head,
.detail-template-card {
    background-color: rgba(2, 6, 23, .48);
}

.card-image img,
.game-dialog-card-image img,
.detail-visual img,
.detail-head img,
.detail-template-card img,
.zone-viewer-list .game-card.zone-viewer-card .card-image img {
    object-fit: contain !important;
    max-width: 100%;
    max-height: 100%;
}


/* v13.37 - Vista previa de ajuste visual con el mismo formato de carta usado en Colección/Juego. */
.art-preview-box {
    align-items: start;
}

.art-preview-box .detail-template-card.art-preview-card {
    width: min(100%, 330px);
    max-width: 330px;
    min-height: auto;
}

.art-preview-box .detail-template-card.art-preview-card .detail-visual img,
.art-preview-box .detail-template-card.art-preview-card .detail-visual .detail-placeholder {
    height: var(--cg-art-height, 132px);
    min-height: var(--cg-art-height, 132px);
}

/* v13.38 - Marco fijo para zoom/movimiento de ilustraciones.
   El zoom y desplazamiento quedan recortados dentro del marco de imagen
   para no invadir fuerza, corrupción, coste, habilidad ni dones. */
.card-image,
.game-dialog-card-image,
.detail-template-card .detail-visual,
.zone-viewer-list .game-card.zone-viewer-card .card-image {
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
}

.detail-template-card .detail-visual {
    height: var(--cg-art-height, 250px);
    min-height: var(--cg-art-height, 250px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(30, 41, 59, .7);
}

.detail-template-card .detail-visual img,
.detail-template-card .detail-visual .detail-placeholder {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: inherit;
}

.detail-template-card .detail-visual img,
.card-image img,
.game-dialog-card-image img,
.zone-viewer-list .game-card.zone-viewer-card .card-image img {
    position: relative;
    z-index: 1;
    will-change: transform;
}



/* v13.39 - Vista previa doble y marco real para detalle en duelo */
.art-preview-box {
    display: block;
    min-height: 0;
}

.art-preview-grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(170px, 220px);
    gap: 14px;
    align-items: start;
}

.art-preview-panel {
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 16px;
    padding: 10px;
    background: rgba(15, 23, 42, .38);
    display: grid;
    gap: 8px;
    justify-items: center;
}

.art-preview-panel h5 {
    width: 100%;
    margin: 0;
    color: #fef3c7;
    font-size: .9rem;
    text-align: left;
}

.art-preview-panel p {
    width: 100%;
    margin: -3px 0 2px;
    color: #aeb8c8;
    font-size: .78rem;
    line-height: 1.3;
    text-align: left;
}

.art-preview-duel-surface {
    width: 100%;
    display: grid;
    place-items: center;
    padding: 8px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .82), rgba(2, 6, 23, .72)),
        radial-gradient(circle at center, rgba(245, 158, 11, .10), transparent 12rem);
    border: 1px dashed rgba(148, 163, 184, .22);
}

.art-preview-hand-zone {
    width: 150px;
    min-height: 214px;
    display: grid;
    place-items: center;
}

.art-preview-duel-surface .game-card.duel-preview-card,
.compact-card-surface .game-card.compact-card-template {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    width: 132px !important;
    min-width: 132px !important;
    height: 196px !important;
    min-height: 196px !important;
    padding: 7px !important;
    gap: 4px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.96)) !important;
    border: 1px solid rgba(245, 158, 11, .58) !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .12), 0 14px 28px rgba(0, 0, 0, .34) !important;
}

.art-preview-duel-surface .game-card.duel-preview-card .card-image,
.compact-card-surface .game-card.compact-card-template .card-image {
    order: 1 !important;
    width: 100% !important;
    height: var(--cg-hand-art-height, 62px) !important;
    min-height: var(--cg-hand-art-height, 62px) !important;
    border-radius: 10px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

.art-preview-duel-surface .game-card.duel-preview-card .card-image img,
.compact-card-surface .game-card.compact-card-template .card-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: inherit !important;
}

.art-preview-duel-surface .game-card.duel-preview-card .card-top,
.compact-card-surface .game-card.compact-card-template .card-top {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    z-index: 5 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    pointer-events: none !important;
}

.art-preview-duel-surface .game-card.duel-preview-card .faction,
.art-preview-duel-surface .game-card.duel-preview-card .card-type,
.art-preview-duel-surface .game-card.duel-preview-card .ability,
.compact-card-surface .game-card.compact-card-template .faction,
.compact-card-surface .game-card.compact-card-template .card-type,
.compact-card-surface .game-card.compact-card-template .ability {
    display: none !important;
}

.art-preview-duel-surface .game-card.duel-preview-card .cost,
.compact-card-surface .game-card.compact-card-template .cost {
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(245, 158, 11, .98) !important;
    color: #111827 !important;
    border: 1px solid rgba(255, 237, 213, .72) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .32) !important;
    font-size: .86rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

.art-preview-duel-surface .game-card.duel-preview-card .card-name,
.compact-card-surface .game-card.compact-card-template .card-name {
    order: 2 !important;
    margin: 1px 0 0 !important;
    min-height: 0 !important;
    text-align: center !important;
    font-size: .78rem !important;
    line-height: 1.08 !important;
    color: #f8fafc !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .75) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.art-preview-duel-surface .game-card.duel-preview-card .dons,
.compact-card-surface .game-card.compact-card-template .dons {
    order: 3 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 0 30px !important;
    gap: 4px !important;
    max-height: none !important;
    min-height: 16px !important;
    overflow: hidden !important;
}

.art-preview-duel-surface .game-card.duel-preview-card .don:not(.status):not(.card-action-badge),
.compact-card-surface .game-card.compact-card-template .don:not(.status):not(.card-action-badge) {
    border-color: transparent !important;
    background: transparent !important;
    padding: 0 3px !important;
    color: #fde68a !important;
    font-size: .64rem !important;
    font-weight: 850 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .75) !important;
}

.art-preview-duel-surface .game-card.duel-preview-card .stats,
.compact-card-surface .game-card.compact-card-template .stats {
    display: flex !important;
    position: absolute !important;
    left: 7px !important;
    right: 7px !important;
    bottom: 7px !important;
    z-index: 4 !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    color: #fff !important;
    pointer-events: none !important;
}

.art-preview-duel-surface .game-card.duel-preview-card .stat-badge,
.compact-card-surface .game-card.compact-card-template .stat-badge {
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: rgba(15, 23, 42, .88) !important;
    border: 2px solid rgba(255, 255, 255, .74) !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .35) !important;
    line-height: .95 !important;
}

.art-preview-duel-surface .game-card.duel-preview-card .stat-badge span,
.compact-card-surface .game-card.compact-card-template .stat-badge span {
    font-size: .46rem !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    color: #cbd5e1 !important;
}

.art-preview-duel-surface .game-card.duel-preview-card .stat-badge strong,
.compact-card-surface .game-card.compact-card-template .stat-badge strong {
    font-size: .82rem !important;
    font-weight: 950 !important;
    color: #fff7ed !important;
}

.art-preview-duel-surface .game-card.duel-preview-card .stat-fue,
.compact-card-surface .game-card.compact-card-template .stat-fue {
    border-color: rgba(255, 237, 213, .92) !important;
}

.art-preview-duel-surface .game-card.duel-preview-card .stat-cor,
.compact-card-surface .game-card.compact-card-template .stat-cor {
    border-color: rgba(125, 211, 252, .86) !important;
}

body.duel-playing .detail-dock .detail-visual {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    width: 100% !important;
    height: clamp(190px, 29vh, 340px) !important;
    min-height: clamp(190px, 29vh, 340px) !important;
    padding: 8px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    background: rgba(30, 41, 59, .7) !important;
}

body.duel-playing .detail-dock .detail-visual img,
body.duel-playing .detail-dock .detail-visual .detail-placeholder {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(2, 6, 23, .36) !important;
    display: block !important;
}

@media (max-width: 1120px) {
    .art-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================
   v13.40 - Previsualizaciones debajo de controles y margen real en detalle de duelo
   ===================== */
.art-settings-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.art-settings-controls {
    width: 100%;
    max-width: 1180px;
}

.art-preview-wrap {
    width: 100%;
    max-width: 1180px;
    overflow: hidden;
}

.art-preview-box {
    width: 100%;
    overflow: hidden;
}

.art-preview-grid {
    width: 100%;
    grid-template-columns: minmax(280px, 390px) minmax(170px, 250px) !important;
    justify-content: start;
    align-items: start;
}

.art-preview-panel {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.art-preview-panel-detail .detail-template-card.art-preview-card {
    width: 100%;
    max-width: 360px;
}

.art-preview-panel-duel {
    justify-items: center;
}

.art-preview-duel-surface {
    max-width: 100%;
    overflow: hidden;
}

.art-preview-hand-zone {
    width: min(100%, 170px);
    overflow: visible;
}

body.duel-playing .detail-dock .selected-card-detail {
    overflow: hidden !important;
}

body.duel-playing .detail-dock .detail-visual {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: clamp(150px, 23vh, 260px) !important;
    min-height: clamp(150px, 23vh, 260px) !important;
    padding: 10px !important;
    margin: 0 0 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    background: rgba(30, 41, 59, .70) !important;
}

body.duel-playing .detail-dock .detail-visual img,
body.duel-playing .detail-dock .detail-visual .detail-placeholder {
    position: absolute !important;
    inset: 10px !important;
    width: calc(100% - 20px) !important;
    height: calc(100% - 20px) !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(2, 6, 23, .36) !important;
    display: block !important;
}

body.duel-playing .detail-dock .detail-stats-row,
body.duel-playing .detail-dock .detail-meta,
body.duel-playing .detail-dock .detail-ability,
body.duel-playing .detail-dock .detail-dons {
    position: relative;
    z-index: 2;
}

@media (max-width: 820px) {
    .art-preview-grid {
        grid-template-columns: 1fr !important;
    }

    .art-preview-panel-detail .detail-template-card.art-preview-card,
    .art-preview-panel-duel {
        max-width: 390px;
    }
}

/* =====================
   v13.33 - Mulligan inicial en bloques de 4 cartas
   ===================== */
.initial-mulligan-modal {
    width: min(1480px, 96vw);
    max-width: min(1480px, 96vw);
}

.initial-mulligan-modal .choice-modal-head {
    margin-bottom: 10px;
}

.initial-mulligan-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    position: sticky;
    top: -18px;
    z-index: 3;
    padding: 10px;
    margin: 0 0 12px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 16px;
    background: rgba(15, 23, 42, .96);
    backdrop-filter: blur(10px);
}

.initial-mulligan-actions button {
    min-height: 42px;
}

.initial-mulligan-modal .initial-mulligan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
    padding: 8px 4px 4px;
    max-height: calc(88vh - 190px);
    overflow: auto;
}

.initial-mulligan-card {
    width: 100%;
    min-width: 0;
}

.initial-mulligan-card .choice-target-card-detail {
    height: 100%;
    min-height: 100%;
    padding: 10px;
}

.initial-mulligan-card .choice-target-card-detail .game-dialog-card-image {
    height: clamp(96px, 13vh, 140px) !important;
}

.initial-mulligan-card .choice-target-card-detail strong {
    font-size: clamp(.9rem, 1.05vw, 1.04rem);
}

.initial-mulligan-card .game-dialog-card-ability {
    max-height: 82px;
}

@media (max-width: 1180px) {
    .initial-mulligan-modal .initial-mulligan-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .initial-mulligan-modal .initial-mulligan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .initial-mulligan-actions {
        grid-template-columns: 1fr;
        position: static;
    }
}

@media (max-width: 560px) {
    .initial-mulligan-modal .initial-mulligan-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================
   Online local - salas, token y polling
   ===================== */
.online-room-panel {
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(56, 189, 248, .28);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, .88), rgba(30, 41, 59, .72));
}
.online-room-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.online-room-head strong {
    color: #fef3c7;
    font-size: 1.02rem;
}
.online-room-head span,
.online-room-status {
    color: var(--muted);
    line-height: 1.45;
}
.online-room-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.online-room-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #bfdbfe;
    font-weight: 800;
    font-size: .86rem;
}
.online-room-grid input {
    width: 100%;
}
.online-room-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.online-room-status {
    margin: 10px 0 0;
    font-size: .88rem;
}
.online-room-status.error {
    color: #fecaca;
}
.game-card .card-name:has(+ .card-type) {}
.game-card.duel-card .card-name {
    overflow-wrap: anywhere;
}
.game-card.duel-card:has(.card-name) .card-name {
    min-height: 1.9em;
}
@media (max-width: 700px) {
    .online-room-grid { grid-template-columns: 1fr; }
}

/* =====================
   Online local - flujo de combate seguro
   ===================== */
.online-intercept-modal .game-dialog-card-list {
    margin-top: 14px;
}
.online-intercept-modal .game-dialog-actions {
    border-top: 1px solid rgba(148, 163, 184, .22);
    margin-top: 16px;
    padding-top: 14px;
}

/* =====================
   Online local - ranking, limpieza y reconexión
   ===================== */
.online-room-extra {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(220px, .9fr);
    gap: 10px;
    margin-top: 10px;
}
.online-ranking-box,
.online-reconnect-box {
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(2, 6, 23, .28);
}
.online-ranking-box > strong {
    display: block;
    color: #fef3c7;
    margin-bottom: 6px;
}
.online-ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.online-ranking-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #dbeafe;
    font-size: .86rem;
    border-top: 1px solid rgba(148, 163, 184, .12);
    padding-top: 6px;
}
.online-ranking-list li:first-child {
    border-top: 0;
    padding-top: 0;
}
.online-ranking-list strong {
    color: #bbf7d0;
    white-space: nowrap;
}
.online-reconnect-box {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.45;
}
@media (max-width: 760px) {
    .online-room-extra { grid-template-columns: 1fr; }
}

/* =====================