/* Visual-only battlefield skin. Scoped to active duels and leaves board logic untouched. */
body.duel-playing {
    background:
        radial-gradient(circle at 50% 44%, rgba(247, 169, 54, 0.15), transparent 23rem),
        radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.20), transparent 30rem),
        radial-gradient(circle at 86% 74%, rgba(160, 54, 24, 0.22), transparent 29rem),
        linear-gradient(135deg, #040710 0%, #071325 42%, #160b10 100%);
}

body.duel-playing::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(255, 211, 117, 0.09) 49%, transparent 56%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 92px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 92px);
    opacity: 0.48;
    mask-image: radial-gradient(circle at center, #000 0 64%, transparent 100%);
}

body.duel-playing::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 52%, transparent 0 42%, rgba(0, 0, 0, 0.48) 100%),
        linear-gradient(180deg, rgba(4, 7, 16, 0.12), rgba(4, 7, 16, 0.62));
}

body.duel-playing main {
    max-width: none;
    padding-inline: clamp(10px, 1.5vw, 24px);
}

body.duel-playing #duel.view.active {
    isolation: isolate;
}

body.duel-playing .duel-toolbar {
    border: 1px solid rgba(244, 199, 106, 0.22);
    background:
        linear-gradient(135deg, rgba(244, 199, 106, 0.10), transparent 36%, rgba(45, 112, 255, 0.12)),
        rgba(3, 8, 20, 0.82);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
}

body.duel-playing .duel-toolbar h2 {
    color: #fff4cf;
    text-shadow: 0 0 18px rgba(244, 199, 106, 0.22);
}

body.duel-playing .duel-toolbar p,
body.duel-playing .duel-toolbar label {
    color: rgba(226, 232, 240, 0.78);
}

body.duel-playing .duel-toolbar select {
    border-color: rgba(244, 199, 106, 0.26);
    color: #eaf4ff;
    background: rgba(5, 12, 28, 0.86);
}

body.duel-playing .game-board {
    position: relative;
}

body.duel-playing .game-board::before {
    content: "";
    position: absolute;
    inset: clamp(-10px, -0.8vw, -6px);
    z-index: -1;
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 161, 74, 0.15), transparent 31rem),
        radial-gradient(circle at 50% 12%, rgba(64, 136, 255, 0.16), transparent 26rem),
        rgba(0, 0, 0, 0.18);
    filter: blur(1px);
}

body.duel-playing .board-layout {
    align-items: stretch;
}

body.duel-playing .board-main.panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(244, 199, 106, 0.33);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(122, 52, 18, 0.42), transparent 34%),
        radial-gradient(circle at 24% 20%, rgba(45, 112, 255, 0.18), transparent 23rem),
        radial-gradient(circle at 76% 82%, rgba(247, 169, 54, 0.16), transparent 25rem),
        linear-gradient(180deg, rgba(8, 13, 26, 0.94), rgba(8, 16, 30, 0.84));
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.48),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 0 58px rgba(244, 199, 106, 0.08);
}



body.duel-playing .board-main > * {
    position: relative;
    z-index: 1;
}

body.duel-playing .match-data,
body.duel-playing .jungle-card,
body.duel-playing .zone-box,
body.duel-playing .stack-zone,
body.duel-playing .climate-zone,
body.duel-playing .action-dock,
body.duel-playing .detail-dock {
    border-color: rgba(244, 199, 106, 0.28);
    background:
        linear-gradient(135deg, rgba(244, 199, 106, 0.08), transparent 43%, rgba(45, 112, 255, 0.09)),
        rgba(6, 13, 28, 0.72);
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 24px rgba(45, 112, 255, 0.06);
    backdrop-filter: blur(10px);
}

body.duel-playing .match-data {
    border-radius: 14px;
}

body.duel-playing .match-data > strong,
body.duel-playing .zone-box > header strong,
body.duel-playing .action-dock h3,
body.duel-playing .detail-dock h3 {
    color: #fff4cf;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(244, 199, 106, 0.22);
}

body.duel-playing .match-data > span {
    color: #dbeafe;
}

body.duel-playing .match-player-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

body.duel-playing .duel-latency-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    font-size: .67rem;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
}

body.duel-playing #localDuelLatency {
    justify-self: start;
}

body.duel-playing .duel-latency-badge--good {
    border-color: rgba(74, 222, 128, 0.45);
    background: rgba(20, 83, 45, 0.34);
    color: #bbf7d0;
}

body.duel-playing .duel-latency-badge--moderate {
    border-color: rgba(250, 204, 21, 0.5);
    background: rgba(113, 63, 18, 0.38);
    color: #fef08a;
}

body.duel-playing .duel-latency-badge--high {
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(127, 29, 29, 0.38);
    color: #fecaca;
}

body.duel-playing .duel-latency-badge--unknown {
    border-color: rgba(148, 163, 184, 0.34);
    background: rgba(30, 41, 59, 0.48);
    color: #cbd5e1;
}

body.duel-playing .duel-latency-badge--offline {
    border-color: rgba(185, 96, 96, 0.42);
    background: rgba(69, 36, 41, 0.48);
    color: #e5b8b8;
}

body.duel-playing .zone-box {
    border-width: 1px;
    border-radius: 16px;
}

body.duel-playing .zone-box > header {
    border-bottom: 1px solid rgba(244, 199, 106, 0.16);
    background:
        linear-gradient(90deg, rgba(244, 199, 106, 0.12), rgba(45, 112, 255, 0.10)),
        rgba(4, 9, 20, 0.52);
}

body.duel-playing .hand-zone {
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.30),
        inset 0 0 0 1px rgba(244, 199, 106, 0.20),
        inset 0 -22px 42px rgba(244, 199, 106, 0.05);
}

body.duel-playing .field-zone {
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(60, 216, 160, 0.18),
        inset 0 0 46px rgba(33, 128, 92, 0.10);
}

body.duel-playing .opponent-field-zone {
    background:
        linear-gradient(180deg, rgba(43, 64, 108, 0.24), rgba(7, 14, 30, 0.72)),
        rgba(6, 13, 28, 0.68);
}

body.duel-playing .player-field-zone {
    background:
        linear-gradient(180deg, rgba(23, 105, 72, 0.20), rgba(7, 14, 30, 0.72)),
        rgba(6, 13, 28, 0.68);
}

body.duel-playing .field-zone[data-faction-theme] {
    background:
        linear-gradient(180deg, rgba(2, 6, 23, .30), rgba(2, 6, 23, .70)),
        var(--field-faction-image-url, none),
        radial-gradient(ellipse at 18% 30%, var(--field-faction-glow-a, rgba(244, 199, 106, .12)), transparent 45%),
        radial-gradient(ellipse at 84% 74%, var(--field-faction-glow-b, rgba(60, 216, 160, .10)), transparent 48%),
        linear-gradient(180deg, var(--field-faction-top, rgba(23, 105, 72, .20)), rgba(7, 14, 30, .76)),
        rgba(6, 13, 28, .72);
    background-size: auto, 100% 100%, auto, auto, auto, auto;
    background-position: center, center, center, center, center, center;
    border-color: var(--field-faction-border, rgba(180, 141, 38, .50));
}

body.duel-playing .field-zone[data-faction-theme="celestial"] {
    --field-faction-glow-a: rgba(255, 245, 180, .26);
    --field-faction-glow-b: rgba(96, 165, 250, .16);
    --field-faction-top: rgba(74, 108, 166, .30);
    --field-faction-border: rgba(250, 204, 21, .58);
}

body.duel-playing .field-zone[data-faction-theme="feral"] {
    --field-faction-glow-a: rgba(74, 222, 128, .18);
    --field-faction-glow-b: rgba(190, 92, 45, .18);
    --field-faction-top: rgba(29, 91, 56, .32);
    --field-faction-border: rgba(132, 204, 22, .52);
}

body.duel-playing .field-zone[data-faction-theme="imperial"] {
    --field-faction-glow-a: rgba(245, 158, 11, .20);
    --field-faction-glow-b: rgba(148, 163, 184, .14);
    --field-faction-top: rgba(113, 63, 18, .28);
    --field-faction-border: rgba(245, 158, 11, .55);
}

body.duel-playing .field-zone[data-faction-theme="infernal"] {
    --field-faction-glow-a: rgba(168, 85, 247, .18);
    --field-faction-glow-b: rgba(244, 63, 94, .14);
    --field-faction-top: rgba(65, 35, 91, .30);
    --field-faction-border: rgba(168, 85, 247, .50);
}

body.duel-playing .field-zone[data-faction-theme="arcana"] {
    --field-faction-glow-a: rgba(45, 212, 191, .16);
    --field-faction-glow-b: rgba(129, 140, 248, .16);
    --field-faction-top: rgba(21, 94, 117, .28);
    --field-faction-border: rgba(45, 212, 191, .50);
}

body.duel-playing .board-main .hand,
body.duel-playing .board-main .battlefield {
    border-radius: 0 0 14px 14px;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(244, 199, 106, 0.09), transparent 55%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 20%, transparent 80%, rgba(255, 255, 255, 0.025));
}

body.duel-playing .board-main .battlefield {
    background:
        radial-gradient(ellipse at center, rgba(60, 216, 160, 0.09), transparent 58%),
        linear-gradient(90deg, rgba(15, 23, 42, 0.30), rgba(17, 24, 39, 0.08), rgba(15, 23, 42, 0.30));
}

body.duel-playing .side-stacks .stack-zone,
body.duel-playing .jungle-card,
body.duel-playing .climate-zone > button {
    border-width: 1px;
    border-radius: 14px;
    color: #eaf4ff;
    text-shadow: 0 0 12px rgba(45, 112, 255, 0.22);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

body.duel-playing .side-stacks .stack-zone:hover,
body.duel-playing .jungle-card:hover,
body.duel-playing .climate-zone > button:hover {
    transform: translateY(-1px);
    border-color: rgba(244, 199, 106, 0.54);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32), 0 0 24px rgba(244, 199, 106, 0.09);
}

body.duel-playing .side-stacks .deck-zone {
    cursor: default;
}

body.duel-playing .side-stacks .deck-zone:hover {
    transform: none;
}

body.duel-playing .stack-zone {
    min-height: 0;
}

body.duel-playing .stack-zone.muted-zone {
    color: rgba(207, 226, 255, 0.74);
    background:
        linear-gradient(135deg, rgba(148, 163, 184, 0.08), transparent 50%, rgba(45, 112, 255, 0.08)),
        rgba(6, 13, 28, 0.66);
}

body.duel-playing .jungle-area {
    border-radius: 16px;
}

body.duel-playing .jungle-card {
    background:
        radial-gradient(circle at top, rgba(139, 92, 246, 0.22), transparent 65%),
        rgba(8, 16, 34, 0.76);
}

body.duel-playing .climate-zone {
    border-radius: 16px;
    padding: 10px;
}

body.duel-playing .climate-zone > button {
    border-color: rgba(125, 211, 252, 0.38);
    background:
        radial-gradient(circle at 50% 18%, rgba(125, 211, 252, 0.18), transparent 62%),
        rgba(6, 18, 36, 0.78);
}

body.duel-playing .active-player,
body.duel-playing .player-zone.active-player {
    border-color: rgba(244, 199, 106, 0.62);
    box-shadow:
        0 0 0 1px rgba(244, 199, 106, 0.34),
        0 0 28px rgba(244, 199, 106, 0.13),
        inset 0 0 30px rgba(244, 199, 106, 0.07);
}

body.duel-playing .defender-player,
body.duel-playing .player-zone.defender-player {
    border-color: rgba(125, 211, 252, 0.52);
    box-shadow:
        0 0 0 1px rgba(125, 211, 252, 0.22),
        0 0 26px rgba(56, 189, 248, 0.10),
        inset 0 0 30px rgba(56, 189, 248, 0.06);
}

body.duel-playing .player-info,
body.duel-playing .compact-info {
    border-color: rgba(244, 199, 106, 0.20);
    background: rgba(3, 8, 20, 0.46);
}

body.duel-playing .mini-pillars .pilar {
    border-color: rgba(244, 199, 106, 0.54);
    background:
        radial-gradient(circle at 18% 18%, rgba(125, 211, 252, 0.20), transparent 30%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(8, 18, 38, 0.82));
}

body.duel-playing .mini-pillars .pilar.damaged {
    border-color: rgba(251, 191, 36, 0.70);
}

body.duel-playing .mini-pillars .pilar.critical,
body.duel-playing .mini-pillars .pilar.danger {
    border-color: rgba(248, 113, 113, 0.82);
    background:
        radial-gradient(circle at 18% 18%, rgba(248, 113, 113, 0.26), transparent 32%),
        linear-gradient(135deg, rgba(69, 10, 10, 0.92), rgba(15, 23, 42, 0.86));
}

body.duel-playing .mini-pillars .pilar.destroyed {
    border-color: rgba(100, 116, 139, 0.72);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.66));
}

body.duel-playing .action-dock,
body.duel-playing .detail-dock {
    border: 1px solid rgba(244, 199, 106, 0.31);
    border-radius: 18px;
    background:
        linear-gradient(160deg, rgba(244, 199, 106, 0.10), transparent 36%, rgba(45, 112, 255, 0.12)),
        rgba(4, 9, 20, 0.86);
}

body.duel-playing .action-dock .action-row button,
body.duel-playing .duel-toolbar button {
    border: 1px solid rgba(244, 199, 106, 0.26);
    color: #fff4cf;
    background:
        linear-gradient(180deg, rgba(244, 199, 106, 0.14), rgba(45, 112, 255, 0.08)),
        rgba(8, 18, 38, 0.90);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.20);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.duel-playing .action-dock .action-row button:hover,
body.duel-playing .duel-toolbar button:hover {
    border-color: rgba(244, 199, 106, 0.56);
    background:
        linear-gradient(180deg, rgba(244, 199, 106, 0.20), rgba(45, 112, 255, 0.14)),
        rgba(10, 24, 48, 0.94);
}

body.duel-playing .action-dock .action-row .danger-button,
body.duel-playing .duel-toolbar .danger-button {
    border-color: rgba(248, 113, 113, 0.38);
    color: #fee2e2;
    background:
        linear-gradient(180deg, rgba(248, 113, 113, 0.18), rgba(127, 29, 29, 0.24)),
        rgba(24, 8, 16, 0.88);
}

body.duel-playing .selection-box,
body.duel-playing .combat-summary,
body.duel-playing .detail-dock .selected-card-detail,
body.duel-playing .ability-feedback-panel {
    border: 1px solid rgba(244, 199, 106, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 55%),
        rgba(2, 7, 18, 0.54);
    color: #dbeafe;
}

body.duel-playing .combat-summary strong,
body.duel-playing .selected-card-detail > strong,
body.duel-playing .ability-feedback-panel > strong {
    color: #fff4cf;
}

body.duel-playing .combat-line {
    border-top-color: rgba(244, 199, 106, 0.14);
}

body.duel-playing .log {
    border: 1px solid rgba(244, 199, 106, 0.16);
    border-radius: 14px;
    color: rgba(226, 232, 240, 0.86);
    background:
        linear-gradient(180deg, rgba(45, 112, 255, 0.06), rgba(244, 199, 106, 0.04)),
        rgba(1, 5, 14, 0.58);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.22);
}

body.duel-playing .detail-dock .detail-head img,
body.duel-playing .detail-dock .detail-placeholder {
    border-color: rgba(244, 199, 106, 0.26);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

body.duel-playing .board-main .empty-zone {
    border-color: rgba(244, 199, 106, 0.22);
    color: rgba(226, 232, 240, 0.62);
    background: rgba(2, 7, 18, 0.32);
}

body.duel-playing .game-timer-hud {
    border-color: rgba(244, 199, 106, 0.36);
    background:
        linear-gradient(135deg, rgba(244, 199, 106, 0.14), rgba(45, 112, 255, 0.12)),
        rgba(4, 9, 20, 0.92);
}

body.duel-playing .play-drop-target,
body.duel-playing .play-drop-target-zone {
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

body.duel-playing.dragging-card .field-zone.play-drop-target-zone,
body.duel-playing .field-zone.play-drop-active-zone {
    border-color: rgba(74, 222, 128, 0.98) !important;
    box-shadow:
        inset 0 0 0 2px rgba(74, 222, 128, 0.44),
        0 0 34px rgba(74, 222, 128, 0.18),
        0 14px 36px rgba(0, 0, 0, 0.34) !important;
}

@media (max-width: 1200px) {
    body.duel-playing main {
        padding-inline: 10px;
    }

    body.duel-playing .board-main.panel {
        border-radius: 16px;
    }

    body.duel-playing .action-dock,
    body.duel-playing .detail-dock {
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.duel-playing .side-stacks .stack-zone,
    body.duel-playing .jungle-card,
    body.duel-playing .climate-zone > button,
    body.duel-playing .action-dock .action-row button,
    body.duel-playing .duel-toolbar button {
        transition: none;
    }
}

/* v14.13.1 - Tema para estructura real de Tablero 2.0 */
body.duel-playing .duel-top-shell {
    overflow: visible;
}

body.duel-playing .global-domain-row {
    border-color: rgba(244, 199, 106, 0.24);
    background:
        linear-gradient(90deg, rgba(88, 28, 135, 0.18), rgba(8, 47, 73, 0.18), rgba(22, 101, 52, 0.16)),
        rgba(3, 8, 20, 0.38);
}

body.duel-playing .global-climate-slot {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    backdrop-filter: none;
}

body.duel-playing .global-climate-slot > button {
    width: 100%;
    height: 100%;
    min-height: 96px;
}

/* =====================
   Ajuste visual seguro Tablero 2.0 - tema battlefield
   A: separación rival/jugador, B: brillos, C: headers, D: Jefe, F: paneles
   ===================== */

/* A — Separación campo rival vs jugador en tema battlefield */
body.duel-playing .opponent-field-zone {
    border-top-color: rgba(56, 189, 248, .52);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, .34),
        inset 0 0 0 1px rgba(56, 189, 248, .20),
        inset 0 0 40px rgba(14, 165, 233, .08);
}
body.duel-playing .player-field-zone {
    border-bottom-color: rgba(245, 158, 11, .52);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, .34),
        inset 0 0 0 1px rgba(245, 158, 11, .18),
        inset 0 0 40px rgba(245, 158, 11, .07);
}

/* B — Brillos de zonas de mano en tema battlefield */
body.duel-playing .hand-zone {
    box-shadow:
        0 12px 32px rgba(0, 0, 0, .30),
        inset 0 0 0 1px rgba(244, 199, 106, .18),
        inset 0 -18px 36px rgba(239, 68, 68, .07);
}

/* C — Headers en tema battlefield */
body.duel-playing .hand-zone > header {
    background:
        linear-gradient(90deg, rgba(127, 29, 29, .30), rgba(4, 9, 20, .52));
    border-bottom-color: rgba(239, 68, 68, .28);
    color: #fecaca;
    text-shadow: 0 0 12px rgba(239, 68, 68, .22);
}
body.duel-playing .field-zone > header {
    background:
        linear-gradient(90deg, rgba(20, 83, 45, .30), rgba(4, 9, 20, .52));
    border-bottom-color: rgba(34, 197, 94, .28);
    color: #bbf7d0;
    text-shadow: 0 0 12px rgba(34, 197, 94, .18);
}

/* D — Jefe de Jungla con más peso visual en tema battlefield */
body.duel-playing #jungleBossZone {
    border-color: rgba(251, 191, 36, .72);
    background:
        radial-gradient(circle at 50% 0%, rgba(251, 191, 36, .28), transparent 68%),
        linear-gradient(180deg, rgba(92, 51, 8, .82), rgba(8, 16, 34, .86));
    box-shadow:
        0 0 24px rgba(251, 191, 36, .14),
        inset 0 1px 0 rgba(255, 255, 255, .10);
    color: #fef3c7;
    text-shadow: 0 0 14px rgba(251, 191, 36, .38);
}

/* F — action-dock / detail-dock con más contraste entre sí */
body.duel-playing .action-dock {
    border-color: rgba(244, 199, 106, .38);
    box-shadow:
        0 12px 34px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 0 28px rgba(244, 199, 106, .06);
}
body.duel-playing .detail-dock {
    border-color: rgba(125, 211, 252, .30);
    background:
        linear-gradient(160deg, rgba(125, 211, 252, .07), transparent 36%, rgba(45, 112, 255, .10)),
        rgba(4, 9, 20, .88);
    box-shadow:
        0 12px 34px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .06),
        inset 0 0 28px rgba(56, 189, 248, .06);
}

@media (prefers-reduced-motion: reduce) {
    body.duel-playing #jungleBossZone {
        box-shadow: 0 0 0 2px rgba(251, 191, 36, .40);
    }
}

/* v14.13.34 - Duel visual guardrails.
   Keep the battlefield inside the viewport and let template cards scale as a
   whole in the selected-card dock. This is layout-only; game zones and rules
   remain untouched. */
body.duel-playing main {
    height: 100vh;
    overflow: hidden;
}

body.duel-playing #duel.view.active,
body.duel-playing #gameBoard.game-board,
body.duel-playing .board-layout {
    height: 100%;
    min-height: 0;
}

body.duel-playing .board-layout {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 23vw, 382px);
    align-items: stretch;
    gap: clamp(10px, .85vw, 14px);
    overflow: hidden;
}

body.duel-playing .board-main {
    height: 100%;
    min-height: 0;
    grid-template-rows:
        clamp(196px, 20vh, 235px)
        minmax(128px, .68fr)
        minmax(226px, 1.48fr)
        minmax(128px, .68fr) !important;
    gap: clamp(8px, .68vw, 12px);
    overflow: hidden;
}

body.duel-playing .right-dock {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(390px, 45%) minmax(0, 1fr) !important;
    min-height: 0;
    overflow: hidden;
}

body.duel-playing .duel-top-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: visible;
}

body.duel-playing .duel-status-bar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
    align-items: center;
    gap: clamp(8px, .8vw, 14px);
    min-height: 0;
    overflow: visible;
}

body.duel-playing .global-domain-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
    grid-template-rows: auto minmax(70px, 1fr);
    grid-template-areas:
        "title title"
        "jungle climate";
    align-items: stretch;
    gap: clamp(7px, .62vw, 11px);
    min-height: 0;
    max-height: 100%;
    padding: 6px 10px 8px;
    overflow: hidden;
}

body.duel-playing .global-domain-title {
    grid-area: title;
    align-self: center;
    min-height: 16px;
    line-height: 1.05;
}

body.duel-playing .jungle-area {
    grid-area: jungle;
    display: grid;
    grid-template-columns: minmax(130px, 1.32fr) repeat(3, minmax(96px, 1fr)) !important;
    gap: clamp(7px, .62vw, 11px) !important;
    min-height: 0;
    overflow: hidden;
}

body.duel-playing .global-climate-slot {
    grid-area: climate;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.duel-playing .jungle-card,
body.duel-playing .jungle-card.small-zone,
body.duel-playing .climate-zone > button {
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    align-items: center;
    justify-items: center;
    gap: 3px;
    min-height: 0 !important;
    padding: clamp(6px, .52vw, 9px) !important;
    line-height: 1.08;
    overflow: hidden;
}

body.duel-playing .jungle-card::after,
body.duel-playing .climate-zone button::after {
    align-self: end;
    margin-top: 0;
    line-height: 1;
    white-space: nowrap;
}

body.duel-playing .global-card-mini,
body.duel-playing .global-card-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
}

body.duel-playing .global-card-mini-art {
    min-height: 0;
    overflow: hidden;
}

body.duel-playing .global-card-mini-art img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

body.duel-playing #jungleBossZone .global-card-boss .global-card-mini-art img {
    object-position: 32% 0% !important;
    transform: scale(1.72);
    transform-origin: 32% 0%;
}

body.duel-playing .global-card-mini-body {
    min-width: 0;
    padding: 2px 4px;
}

body.duel-playing .global-card-mini-body strong,
body.duel-playing .global-card-placeholder strong {
    max-width: 100%;
    line-height: 1.06;
    overflow-wrap: anywhere;
}

body.duel-playing .global-card-mini-body small,
body.duel-playing .global-card-placeholder small {
    line-height: 1.05;
}

body.duel-playing .opponent-hand-row,
body.duel-playing .player-hand-row {
    align-items: stretch;
    min-height: 0;
}

body.duel-playing .resource-strip {
    position: relative;
    z-index: 3;
    flex-wrap: wrap;
    row-gap: 3px;
    max-width: 100%;
    line-height: 1;
}

body.duel-playing .action-dock,
body.duel-playing .detail-dock {
    min-height: 0;
    overflow: hidden;
}

body.duel-playing .action-dock {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, .55vw, 9px);
}

body.duel-playing .action-dock h3,
body.duel-playing .detail-dock h3 {
    flex: 0 0 auto;
    margin-bottom: clamp(4px, .42vw, 8px);
    line-height: 1.08;
}

body.duel-playing .action-dock .action-row {
    flex: 0 0 auto;
    gap: 7px;
}

body.duel-playing .action-dock .selection-box,
body.duel-playing .action-dock .combat-summary {
    flex: 0 0 auto;
    min-height: 0;
    max-height: clamp(56px, 9vh, 92px);
    overflow: auto;
}

body.duel-playing .action-dock .selection-box {
    min-height: clamp(42px, 6vh, 62px);
}

body.duel-playing .action-dock .combat-summary {
    min-height: clamp(54px, 7vh, 76px);
}

body.duel-playing .action-dock .ability-feedback-panel {
    flex: 0 1 auto;
    min-height: clamp(58px, 8vh, 88px);
    max-height: clamp(70px, 12vh, 128px);
    overflow: auto;
}

body.duel-playing .action-dock .log {
    flex: 1 1 64px;
    min-height: 54px !important;
    max-height: none !important;
    overflow: auto;
}

body.duel-playing .detail-dock {
    display: flex;
    flex-direction: column;
}

body.duel-playing .detail-dock .selected-card-detail {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: clamp(8px, .7vw, 12px);
}

body.duel-playing .detail-dock .selected-card-template {
    width: 100%;
    min-height: 0;
}

body.duel-playing .detail-dock .selected-card-template .cg-template-runtime {
    width: min(100%, 330px);
    max-width: 100%;
    flex: 0 0 auto;
}

body.duel-playing .detail-dock .selected-card-template .cg-template-stage,
body.duel-playing .detail-dock .selected-card-template .cg-template-runtime-card {
    overflow: hidden !important;
}

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

@media (max-width: 1220px) {
    body.duel-playing .board-layout {
        grid-template-columns: minmax(0, 1fr) clamp(316px, 28vw, 350px);
    }

    body.duel-playing .board-main {
        grid-template-rows:
            clamp(232px, 26vh, 260px)
            minmax(118px, .62fr)
            minmax(210px, 1.38fr)
            minmax(118px, .62fr) !important;
    }

    body.duel-playing .duel-status-bar {
        grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    }

    body.duel-playing .match-players {
        grid-column: auto;
    }
}

@media (max-width: 980px) {
    body.duel-playing main {
        overflow: auto;
    }

    body.duel-playing .board-layout {
        height: auto;
        min-height: 100%;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    body.duel-playing .right-dock {
        grid-template-rows: auto auto !important;
        overflow: visible;
    }

    body.duel-playing .global-domain-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "jungle"
            "climate";
    }

    body.duel-playing .global-climate-slot {
        width: min(280px, 100%);
        justify-self: center;
    }
}

/* v14.13.35 - Compact duel-card proportions.
   Give hand cards enough vertical space so the cost/stat badges no longer
   stack on top of each other in compact rows. */
body.duel-playing .board-main {
    grid-template-rows:
        clamp(160px, 18.5vh, 190px)
        minmax(176px, .86fr)
        minmax(196px, .98fr)
        minmax(176px, .86fr) !important;
}

body.duel-playing .opponent-hand-row,
body.duel-playing .player-hand-row {
    min-height: 154px;
}

body.duel-playing .hand-zone > header.zone-header-stack {
    min-height: clamp(42px, 4.8vw, 54px);
    padding: 4px 8px !important;
    gap: 3px;
}

body.duel-playing .hand-zone .zone-title-line {
    min-height: 18px;
    gap: 8px;
}

body.duel-playing .hand-zone .zone-title-line > strong {
    flex: 0 0 auto;
    line-height: 1;
}

body.duel-playing .hand-zone .resource-strip {
    gap: 4px;
    row-gap: 2px;
}

body.duel-playing .hand-zone .resource-chip {
    padding: 2px 7px;
    font-size: clamp(.58rem, .54vw, .7rem);
    line-height: 1.05;
}

body.duel-playing .hand-zone .mini-pillars {
    gap: 5px;
}

body.duel-playing .hand-zone .mini-pillars .pilar {
    min-width: clamp(86px, 6vw, 112px);
    min-height: clamp(34px, 2.55vw, 44px);
    padding: 5px 7px;
    grid-template-columns: auto 1fr auto;
    column-gap: 6px;
}

body.duel-playing .hand-zone .mini-pillars .pillar-icon {
    width: clamp(22px, 1.55vw, 28px);
    height: clamp(22px, 1.55vw, 28px);
    font-size: clamp(.82rem, .95vw, 1.1rem);
}

body.duel-playing .hand-zone .mini-pillars .pillar-label {
    font-size: clamp(.56rem, .52vw, .66rem);
    line-height: 1;
}

body.duel-playing .hand-zone .mini-pillars .pillar-value {
    font-size: clamp(1.02rem, 1vw, 1.34rem);
    line-height: 1;
}

body.duel-playing .board-main .hand {
    padding: clamp(7px, .55vw, 10px) clamp(9px, .72vw, 13px) clamp(8px, .62vw, 11px) !important;
    align-items: stretch !important;
}

body.duel-playing .board-main .hand.hand-overlap {
    padding-right: clamp(70px, 5vw, 105px) !important;
}

body.duel-playing .board-main .hand .game-card.duel-card {
    flex-basis: clamp(146px, 8.1vw, 174px) !important;
    width: clamp(146px, 8.1vw, 174px) !important;
    min-width: clamp(146px, 8.1vw, 174px) !important;
    min-height: clamp(104px, 12.8vh, 136px) !important;
}

body.duel-playing .board-main .field-zone .game-card.duel-card {
    flex-basis: clamp(154px, 8.4vw, 184px) !important;
    width: clamp(154px, 8.4vw, 184px) !important;
    min-width: clamp(154px, 8.4vw, 184px) !important;
}

body.duel-playing .board-main .hand .game-card.duel-card .card-image {
    height: clamp(72px, 8.6vh, 104px) !important;
    min-height: clamp(72px, 8.6vh, 104px) !important;
}

body.duel-playing .board-main .game-card.duel-card .cost {
    min-width: clamp(25px, 1.75vw, 33px) !important;
    width: clamp(25px, 1.75vw, 33px) !important;
    height: clamp(25px, 1.75vw, 33px) !important;
    font-size: clamp(.74rem, .74vw, .96rem) !important;
}

body.duel-playing .board-main .game-card.duel-card .stats {
    bottom: clamp(6px, .5vw, 9px) !important;
}

body.duel-playing .board-main .game-card.duel-card .stat-badge {
    min-width: clamp(28px, 1.95vw, 38px) !important;
    width: clamp(28px, 1.95vw, 38px) !important;
    height: clamp(28px, 1.95vw, 38px) !important;
}

body.duel-playing .board-main .game-card.duel-card .stat-badge span {
    font-size: clamp(.38rem, .35vw, .48rem) !important;
}

body.duel-playing .board-main .game-card.duel-card .stat-badge strong {
    font-size: clamp(.72rem, .7vw, .96rem) !important;
}

body.duel-playing .board-main .game-card.duel-card .dons,
body.duel-playing .board-main .game-card.duel-card.has-visible-state-strip .dons,
body.duel-playing .board-main .game-card.duel-card.has-state-badges .dons {
    left: clamp(39px, 2.6vw, 52px) !important;
    right: clamp(39px, 2.6vw, 52px) !important;
    bottom: clamp(8px, .55vw, 11px) !important;
}

@media (max-width: 1450px) {
    body.duel-playing .board-main {
        grid-template-rows:
            clamp(160px, 18.5vh, 180px)
            minmax(176px, .84fr)
            minmax(190px, .96fr)
            minmax(176px, .84fr) !important;
    }

    body.duel-playing .board-main .hand .game-card.duel-card {
        flex-basis: clamp(142px, 10.5vw, 166px) !important;
        width: clamp(142px, 10.5vw, 166px) !important;
        min-width: clamp(142px, 10.5vw, 166px) !important;
    }
}

@media (max-width: 1220px) {
    body.duel-playing .board-main {
        grid-template-rows:
            clamp(162px, 18.5vh, 180px)
            minmax(168px, .82fr)
            minmax(190px, .96fr)
            minmax(168px, .82fr) !important;
    }
}

/* v14.13.36 - Battlefield sketch structure.
   The duel surface now follows the hand-drawn board map more closely:
   match data on the left, global domain on the top band, hands above/below
   the central field, and action/detail panels locked to the right. */
@media (min-width: 981px) {
    body.duel-playing .board-layout {
        grid-template-columns: minmax(0, 1fr) clamp(318px, 23.5vw, 372px);
        gap: clamp(10px, .82vw, 14px);
    }

    body.duel-playing .board-main {
        grid-template-rows:
            clamp(154px, 19.5vh, 188px)
            minmax(166px, .82fr)
            minmax(188px, .96fr)
            minmax(166px, .82fr) !important;
    }

    body.duel-playing .duel-top-shell {
        grid-template-columns: clamp(260px, 22vw, 330px) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        gap: clamp(8px, .7vw, 12px);
        overflow: hidden;
    }

    body.duel-playing .duel-status-bar {
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
        align-content: stretch;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
    }

    body.duel-playing .duel-status-bar .match-data {
        min-height: 0;
        padding: 8px 10px;
    }

    body.duel-playing .duel-status-bar .match-data > strong,
    body.duel-playing .duel-status-bar .match-data > span {
        line-height: 1.08;
    }

    body.duel-playing .game-timer-hud {
        position: static;
        justify-self: stretch;
        width: 100%;
        min-width: 0;
        transform: none;
        padding: 5px 9px;
    }

    body.duel-playing .match-players {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
    }

    body.duel-playing .compact-info {
        min-height: 0;
        padding: 6px 8px;
    }

    body.duel-playing .compact-info .match-player-identity {
        min-width: 0;
    }

    body.duel-playing .compact-info .match-resource-line,
    body.duel-playing .compact-info .zone-extra-counts {
        font-size: .66rem;
        line-height: 1.05;
    }

    body.duel-playing .global-domain-row {
        grid-column: 2;
        grid-row: 1;
        grid-template-columns: minmax(0, 1fr) minmax(152px, 216px);
        grid-template-rows: auto minmax(0, 1fr);
        min-width: 0;
        height: 100%;
        padding: 7px 10px 9px;
    }

    body.duel-playing .global-domain-title {
        min-height: 17px;
        line-height: 1;
    }

    body.duel-playing .jungle-area {
        grid-template-columns: minmax(130px, 1.32fr) repeat(3, minmax(92px, 1fr)) !important;
        min-width: 0;
    }

    body.duel-playing .jungle-card,
    body.duel-playing .jungle-card.small-zone,
    body.duel-playing .climate-zone > button {
        min-height: 0 !important;
        height: 100%;
    }

    body.duel-playing .opponent-hand-row,
    body.duel-playing .player-hand-row {
        grid-template-columns: minmax(0, 1fr) clamp(108px, 8vw, 142px) !important;
        gap: 8px;
        min-height: 0;
    }

    body.duel-playing .side-stacks {
        min-width: 0;
        gap: 7px;
    }

    body.duel-playing .side-stacks .stack-zone {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 0;
        height: 100%;
        padding: 6px 7px !important;
        text-align: center;
        font-size: clamp(.58rem, .54vw, .7rem);
        line-height: 1.05;
    }

    body.duel-playing .side-stacks .stack-zone::before {
        position: static;
        transform: none;
        font-size: .92rem;
        line-height: 1;
    }

    body.duel-playing .side-stacks .stack-zone::after {
        position: static;
        transform: none;
        max-width: 100%;
        min-width: 0;
        margin-top: 0;
        padding: 2px 6px;
        font-size: clamp(.56rem, .52vw, .66rem);
        line-height: 1;
        white-space: nowrap;
    }

    body.duel-playing .field-row {
        min-height: 0;
        overflow: hidden;
    }

    body.duel-playing .field-row .field-column {
        display: grid;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        height: 100%;
        min-height: 0;
    }

    body.duel-playing .field-zone {
        min-height: 0;
        overflow: hidden;
    }

    body.duel-playing .field-zone > header {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 6px 8px;
    }

    body.duel-playing .board-main .battlefield {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

    body.duel-playing .right-dock {
        grid-template-rows: minmax(376px, 44%) minmax(0, 1fr) !important;
    }
}

@media (min-width: 981px) and (max-width: 1220px) {
    body.duel-playing .duel-top-shell {
        grid-template-columns: clamp(232px, 28vw, 282px) minmax(0, 1fr);
    }

    body.duel-playing .global-domain-row {
        grid-template-columns: minmax(0, 1fr) minmax(136px, 176px);
    }

    body.duel-playing .jungle-area {
        grid-template-columns: minmax(110px, 1.25fr) repeat(3, minmax(78px, 1fr)) !important;
    }
}

/* v14.13.37 - Lean action menu, larger selected-card detail.
   Hide secondary status blocks from the action menu and reserve the right
   rail for the full selected-card preview. The underlying DOM stays in place
   so selection/combat feedback code keeps working. */
body.duel-playing .action-dock #selectionInfo,
body.duel-playing .action-dock #combatSummary,
body.duel-playing .action-dock #gameLog,
body.duel-playing .action-dock .ability-feedback-panel {
    display: none !important;
}

body.duel-playing .right-dock {
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(8px, .7vw, 12px);
}

body.duel-playing .action-dock {
    flex: 0 0 auto;
    min-height: 0;
    padding: clamp(9px, .8vw, 13px);
}

body.duel-playing .action-dock h3 {
    margin-bottom: clamp(8px, .7vw, 12px);
}

body.duel-playing .action-dock .action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(7px, .62vw, 10px);
}

body.duel-playing .action-dock .action-row button {
    min-height: clamp(32px, 3.9vh, 42px);
    padding: 6px 8px;
}

body.duel-playing .detail-dock {
    min-height: 0;
}

body.duel-playing .detail-dock .selected-card-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.duel-playing .detail-dock .selected-card-template {
    display: grid;
    place-items: center;
}

body.duel-playing .detail-dock .selected-card-template .cg-template-runtime {
    width: min(100%, 344px);
}

body.duel-playing .detail-dock .selected-card-detail > strong,
body.duel-playing .detail-dock .selected-card-detail > span {
    text-align: center;
}

@media (min-width: 981px) {
    body.duel-playing .right-dock {
        grid-template-rows: minmax(132px, auto) minmax(0, 1fr) !important;
    }
}

/* v14.13.38 - Climate column and left jungle rail.
   Keep the duel information and jungles on the left, move the climate between
   the discard stacks, and return the top center row to the opponent hand. */
@media (min-width: 981px) {
    body.duel-playing .board-main.panel {
        display: grid;
        grid-template-columns: clamp(218px, 18.2vw, 256px) minmax(0, 1fr) clamp(104px, 7.7vw, 128px);
        grid-template-rows:
            minmax(132px, .58fr)
            minmax(264px, 1.36fr)
            minmax(132px, .58fr) !important;
        grid-template-areas:
            "left opponent stacksTop"
            "left fields climate"
            "left player stacksBottom";
        gap: clamp(7px, .55vw, 10px);
        align-items: stretch;
    }

    body.duel-playing .duel-top-shell {
        grid-area: left;
        display: grid;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        gap: clamp(7px, .55vw, 10px);
        min-width: 0;
        min-height: 0;
        overflow: hidden !important;
    }

    body.duel-playing .duel-status-bar {
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
    }

    body.duel-playing .duel-status-bar .match-data {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(72px, 88px);
        align-items: start;
        gap: 5px 8px;
        min-width: 0;
        padding: 8px 10px;
        overflow: hidden;
    }

    body.duel-playing .duel-status-bar .match-data > strong {
        min-width: 0;
        font-size: clamp(.62rem, .6vw, .72rem);
        line-height: 1.08;
    }

    body.duel-playing .duel-status-bar #phaseText {
        justify-self: end;
        max-width: 88px;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
        font-size: clamp(.78rem, .82vw, 1rem);
        line-height: 1.04;
    }

    body.duel-playing .duel-status-bar #turnText {
        grid-column: 1 / -1;
        min-width: 0;
        font-size: clamp(.66rem, .62vw, .78rem);
        line-height: 1.08;
    }

    body.duel-playing .global-domain-row {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: grid;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        grid-template-areas:
            "title"
            "jungle";
        min-width: 0;
        min-height: 0;
        height: 100%;
        padding: clamp(7px, .58vw, 10px);
    }

    body.duel-playing .global-domain-title {
        grid-area: title;
        min-height: 16px;
        line-height: 1;
    }

    body.duel-playing .jungle-area {
        grid-area: jungle;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: minmax(86px, .26fr) minmax(0, 1fr);
        grid-template-areas:
            "jungleOne jungleTwo jungleThree"
            "jungleBoss jungleBoss jungleBoss";
        gap: clamp(7px, .55vw, 10px) !important;
        min-width: 0;
        min-height: 0;
    }

    body.duel-playing #jungleBossZone {
        grid-area: jungleBoss;
    }

    body.duel-playing #jungleSlot1 {
        grid-area: jungleOne;
    }

    body.duel-playing #jungleSlot2 {
        grid-area: jungleTwo;
    }

    body.duel-playing #jungleSlot3 {
        grid-area: jungleThree;
    }

    body.duel-playing .jungle-card,
    body.duel-playing .jungle-card.small-zone {
        min-width: 0;
        min-height: 0 !important;
        height: 100%;
    }

    body.duel-playing .jungle-card.small-zone {
        font-size: clamp(.58rem, .66vw, .76rem);
        padding: 5px 4px !important;
    }

    body.duel-playing #jungleBossZone .global-card-mini-body strong {
        font-size: clamp(.66rem, .82vw, .92rem);
    }

    body.duel-playing .opponent-hand-row,
    body.duel-playing .player-hand-row {
        display: contents;
    }

    body.duel-playing .opponent-hand-zone {
        grid-area: opponent;
    }

    body.duel-playing .player-hand-zone {
        grid-area: player;
    }

    body.duel-playing .opponent-stacks {
        grid-area: stacksTop;
    }

    body.duel-playing .player-stacks {
        grid-area: stacksBottom;
    }

    body.duel-playing .field-row {
        grid-area: fields;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    body.duel-playing .board-climate-column {
        grid-area: climate;
        display: grid;
        min-width: 0;
        min-height: 0;
        padding: clamp(7px, .55vw, 10px);
        border: 1px solid rgba(125, 211, 252, .30);
        background:
            linear-gradient(180deg, rgba(8, 47, 73, .22), rgba(3, 8, 20, .42)),
            rgba(6, 18, 36, .70);
        box-shadow:
            0 12px 32px rgba(0, 0, 0, .30),
            inset 0 0 0 1px rgba(125, 211, 252, .08);
        backdrop-filter: blur(10px);
    }

    body.duel-playing .board-climate-column > button {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0 !important;
    }

    body.duel-playing .opponent-hand-zone,
    body.duel-playing .player-hand-zone,
    body.duel-playing .opponent-stacks,
    body.duel-playing .player-stacks,
    body.duel-playing .board-climate-column {
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    body.duel-playing .side-stacks {
        display: grid;
        grid-template-rows: repeat(4, minmax(0, 1fr));
        gap: clamp(6px, .48vw, 8px);
    }

    body.duel-playing .field-row .field-column {
        display: grid;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(7px, .55vw, 10px);
        height: 100%;
        min-height: 0;
    }

    body.duel-playing .board-main .hand,
    body.duel-playing .board-main .battlefield {
        min-height: 0;
    }
}

@media (min-width: 981px) and (max-width: 1220px) {
    body.duel-playing .board-main.panel {
        grid-template-columns: clamp(202px, 18vw, 230px) minmax(0, 1fr) clamp(96px, 7.6vw, 112px);
        grid-template-rows:
            minmax(126px, .56fr)
            minmax(244px, 1.32fr)
            minmax(126px, .56fr) !important;
    }

    body.duel-playing .jungle-area {
        grid-template-rows: minmax(78px, .25fr) minmax(0, 1fr);
    }

    body.duel-playing .jungle-card.small-zone {
        font-size: clamp(.54rem, .62vw, .68rem);
    }
}

/* ============================================================
   Layout v2 — panel lateral unificado.
   El área de juego (manos + campos) ocupa todo el ancho izquierdo; la columna
   derecha apila: Menú de acciones · Dominio Global · Zona de Climas · Datos de
   la partida. El panel "Detalle de la carta seleccionada" se quitó (lo reemplaza
   el preview grande al hover).
   Se usa FLEX (no grid con áreas) y selectores de alta especificidad para ganar
   a las reglas de @media (min-width: 981px) que repartían board-main en columnas
   con áreas nombradas (left/opponent/fields/climate...).
   ============================================================ */

/* --- Área de juego: pila vertical simple a todo el ancho. --- */
body.duel-playing .board-layout .board-main.panel {
    display: flex !important;
    flex-direction: column !important;
    grid-template-areas: none !important;
    gap: clamp(8px, .7vw, 12px);
}
body.duel-playing .board-main.panel > .opponent-hand-row,
body.duel-playing .board-main.panel > .player-hand-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    gap: clamp(8px, .7vw, 12px);
    flex: 0 0 auto;
    min-height: 0;
}
body.duel-playing .board-main.panel > .field-row {
    display: flex !important;
    flex: 1 1 auto !important;
    grid-area: auto !important;
    width: auto !important;
    min-height: 0;
    overflow: hidden;
}
body.duel-playing .board-main.panel .opponent-hand-zone,
body.duel-playing .board-main.panel .player-hand-zone {
    grid-area: auto !important;
    flex: 1 1 auto;
    min-width: 0;
}
body.duel-playing .board-main.panel .opponent-stacks,
body.duel-playing .board-main.panel .player-stacks {
    grid-area: auto !important;
    flex: 0 0 auto;
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

body.duel-playing .board-main.panel .field-row > .field-column {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* --- Columna derecha: Menú · Dominio · Clima · Datos, con scroll si hace falta. --- */
body.duel-playing .board-layout .right-dock {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
    gap: clamp(8px, .7vw, 12px);
    overflow-y: auto !important;
    overflow-x: hidden;
}
body.duel-playing .right-dock > .action-dock { flex: 0 0 auto; min-height: 0; }
body.duel-playing .right-dock > .domain-dock { flex: 0 0 auto; min-height: 0; }
/* La Zona de Climas absorbe el espacio sobrante para que la columna llene el alto
   y "Datos de la partida" quede al fondo (como en la referencia). */
body.duel-playing .right-dock > .right-climate-slot { flex: 1 1 auto; min-height: clamp(110px, 15vh, 170px); }
body.duel-playing .right-dock > .match-info-dock { flex: 0 0 auto; min-height: 0; }

/* Dominio Global en panel derecho: título, junglas en fila, jefe grande debajo. */
body.duel-playing .right-dock .domain-dock { padding: 10px 12px 12px; }
body.duel-playing .right-dock .domain-dock .global-domain-row {
    display: grid !important;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "title" "jungle" !important;
    height: auto !important;
    max-height: none !important;
    gap: clamp(6px, .5vw, 10px) !important;
    padding: 0 !important;
    overflow: visible !important;
}
body.duel-playing .right-dock .domain-dock .global-domain-title {
    grid-area: title;
    text-align: center;
}
body.duel-playing .right-dock .domain-dock .jungle-area {
    grid-area: jungle;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto clamp(150px, 20vh, 230px) !important;
    grid-template-areas:
        "jungleOne jungleTwo jungleThree"
        "jungleBoss jungleBoss jungleBoss" !important;
    gap: clamp(6px, .5vw, 9px) !important;
    min-height: 0;
}
body.duel-playing .right-dock .domain-dock #jungleBossZone { grid-area: jungleBoss; min-height: 0 !important; height: 100%; }
body.duel-playing .right-dock .domain-dock #jungleSlot1 { grid-area: jungleOne; }
body.duel-playing .right-dock .domain-dock #jungleSlot2 { grid-area: jungleTwo; }
body.duel-playing .right-dock .domain-dock #jungleSlot3 { grid-area: jungleThree; }

/* Zona de Climas en panel derecho. */
body.duel-playing .right-dock .right-climate-slot {
    grid-area: auto !important;
    display: block !important;
    min-height: clamp(110px, 15vh, 170px);
    overflow: hidden;
}
body.duel-playing .right-dock .right-climate-slot > button {
    width: 100%;
    height: 100%;
    min-height: 110px;
}

/* Datos de la partida al fondo de la columna derecha. */
body.duel-playing .right-dock .match-info-dock { padding: 8px 12px 10px; }
body.duel-playing .right-dock .match-info-dock .duel-status-bar {
    grid-area: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 6px !important;
    overflow: visible !important;
}
body.duel-playing .right-dock .match-info-dock .match-players {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
}

body.duel-playing .right-dock .match-info-dock .match-data {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 4px !important;
}

body.duel-playing .right-dock .match-info-dock .match-data > strong,
body.duel-playing .right-dock .match-info-dock .match-data > span {
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: start !important;
}

body.duel-playing .right-dock .match-info-dock .match-data #phaseText {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
    font-size: .95rem !important;
    line-height: 1.08 !important;
}

/* --- Encabezado de mano: título · pilares (centrados) · recursos (derecha). --- */
body.duel-playing .hand-zone > header.zone-header-stack.pillars-centered {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between;
    gap: clamp(8px, .8vw, 14px) !important;
    min-height: clamp(46px, 5vw, 58px) !important;
}
body.duel-playing .hand-zone > header.zone-header-stack.pillars-centered > .zone-title-line {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-start;
}
body.duel-playing .hand-zone > header.zone-header-stack.pillars-centered > .mini-pillars {
    flex: 1 1 auto;
    justify-content: center !important;
    min-width: 0;
}
body.duel-playing .hand-zone > header.zone-header-stack.pillars-centered > .resource-strip {
    flex: 0 0 auto;
    justify-content: flex-end !important;
    flex-wrap: nowrap;
}
body.duel-playing .hand-zone > header.zone-header-stack.pillars-centered > .hand-deck-zone {
    display: flex;
    flex: 0 0 clamp(64px, 4.8vw, 78px);
    align-self: stretch;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 4px 6px !important;
    text-align: center;
    font-size: clamp(.56rem, .52vw, .68rem);
    line-height: 1;
}
body.duel-playing .hand-zone > header.zone-header-stack.pillars-centered > .hand-deck-zone::before,
body.duel-playing .hand-zone > header.zone-header-stack.pillars-centered > .hand-deck-zone::after {
    position: static;
    transform: none;
}
body.duel-playing .hand-zone > header.zone-header-stack.pillars-centered > .hand-deck-zone::before {
    font-size: .9rem;
    line-height: 1;
}
body.duel-playing .hand-zone > header.zone-header-stack.pillars-centered > .hand-deck-zone::after {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 2px 4px;
    font-size: clamp(.52rem, .48vw, .62rem);
    line-height: 1;
    white-space: nowrap;
}

/* --- Reloj de partida: vuelve a flotar arriba-centro (la barra de Datos ahora vive
   en la columna derecha, así que el HUD ya no se incrusta en un grid estático). --- */
body.duel-playing .game-timer-hud {
    position: fixed !important;
    --timer-hud-y: -50%;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, var(--timer-hud-y)) !important;
    width: max-content !important;
    max-width: min(560px, calc(100vw - 24px)) !important;
    justify-self: auto !important;
}

body.duel-playing .game-timer-hud.timer-decision {
    --timer-hud-y: 0px;
    top: clamp(16px, 3.5vh, 34px) !important;
    z-index: 145 !important;
}

/* 2.0.1 timer-preview: cuando el preview grande de carta está visible, el reloj
   sube a la zona superior segura (topbar/tabs ocultas en duelo) para no tapar la
   habilidad/don de la carta ampliada. Sigue visible y no recibe eventos
   (pointer-events:none heredado del HUD). Mismo desplazamiento que .timer-decision.
   Va antes de la regla :has(.modal-overlay) para que el comportamiento de modales
   conserve prioridad cuando hay un modal abierto. */
body.duel-playing.large-card-preview-active .game-timer-hud {
    --timer-hud-y: 0px;
    top: clamp(16px, 3.5vh, 34px) !important;
    z-index: 145 !important;
    opacity: 0.9;
}

body.duel-playing:has(.modal-overlay) .game-timer-hud {
    --timer-hud-y: 0px;
    top: max(6px, env(safe-area-inset-top)) !important;
    transform: translate(-50%, var(--timer-hud-y)) !important;
    z-index: 99 !important;
    opacity: .72;
}

/* 2.0.4 field-fit: las cartas jugadas se escalan por el alto real del campo.
   El runtime de plantilla escala por ancho, asi que el ancho se limita usando
   cqh del contenedor en vez de forzar height:100%, que recorta la carta. */
body.duel-playing .board-main .field-zone .battlefield {
    align-items: center !important;
    container-type: size;
}

body.duel-playing .board-main .field-zone .game-card.duel-card.has-field-template-card {
    --field-card-max-width: clamp(170px, 9.8vw, 230px);
    --field-card-fit-width: max(124px, min(var(--field-card-max-width), calc((100cqh - 4px) * .76)));
    width: var(--field-card-max-width) !important;
    min-width: var(--field-card-max-width) !important;
    max-width: var(--field-card-max-width) !important;
    height: auto !important;
    max-height: none !important;
    align-self: center;
    flex: 0 0 auto;
}

@supports (width: 1cqh) {
    body.duel-playing .board-main .field-zone .game-card.duel-card.has-field-template-card {
        width: var(--field-card-fit-width) !important;
        min-width: var(--field-card-fit-width) !important;
        max-width: var(--field-card-fit-width) !important;
    }
}

body.duel-playing .board-main .field-zone .game-card.duel-card.has-field-template-card .cg-template-runtime {
    height: auto;
    width: 100%;
    max-width: none;
    aspect-ratio: var(--cg-tpl-w, 380) / var(--cg-tpl-h, 540);
}