/**
 * EDICION RESPONSIVE REDESIGN
 * Capa final y aislada para edicion.html.
 *
 * Objetivos:
 * - una sola fuente responsive para escritorio, tablet y móvil;
 * - tablero siempre cuadrado, centrado y sin desbordamiento;
 * - controles táctiles cómodos y acciones siempre accesibles;
 * - rotación estable sin estilos inline residuales.
 */

:root {
    --editor-safe-top: env(safe-area-inset-top, 0px);
    --editor-safe-right: env(safe-area-inset-right, 0px);
    --editor-safe-bottom: env(safe-area-inset-bottom, 0px);
    --editor-safe-left: env(safe-area-inset-left, 0px);
    --editor-gold: #d4af37;
    --editor-gold-bright: #f0cd58;
    --editor-red: #c90035;
    --editor-surface: rgba(16, 17, 20, 0.96);
    --editor-surface-soft: rgba(255, 255, 255, 0.035);
    --editor-border: rgba(212, 175, 55, 0.28);
    --editor-radius: 18px;
}

html {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden !important;
    background: #08090c;
}

html body {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    margin: 0 !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 14% 8%, rgba(201, 0, 53, 0.08), transparent 32%),
        radial-gradient(circle at 88% 92%, rgba(212, 175, 55, 0.07), transparent 30%),
        #0a0b0e !important;
    color: var(--theme-text-primary, #f3f3f3);
    font-family: "Poppins", system-ui, sans-serif !important;
    -webkit-tap-highlight-color: transparent;
}

html body .chess-layout,
html body .chess-layout *,
html body .chess-layout *::before,
html body .chess-layout *::after {
    box-sizing: border-box;
}

html body .chess-layout {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    color: var(--theme-text-primary, #f3f3f3) !important;
}

html body .chess-layout > .chess-container,
html body .chess-layout > .controls-container {
    min-width: 0 !important;
}

html body .chess-layout > .chess-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

html body .chess-layout .board,
html body .chess-layout #board {
    position: relative !important;
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    border-radius: 12px !important;
    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(212, 175, 55, 0.16) !important;
}

html body .chess-layout #board > silicio-board-surface,
html body .chess-layout #board > .silicio-board-host {
    width: 100% !important;
    height: 100% !important;
}

html body .controls-container {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--theme-text-primary, #f3f3f3) !important;
    background:
        linear-gradient(180deg, rgba(27, 28, 32, 0.98), rgba(11, 12, 15, 0.99)) !important;
    border: 1px solid var(--editor-border) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34) !important;
}

html body .controls-container .editor-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    background:
        linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 255, 255, 0.025)) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--editor-border) !important;
}

html body .controls-container .editor-header h3 {
    margin: 0 !important;
    color: var(--editor-gold-bright) !important;
    font-size: clamp(18px, 2vw, 25px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    text-transform: none !important;
}

html body .controls-container .editor-content {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--editor-gold) rgba(255, 255, 255, 0.04);
}

html body .controls-container .editor-section {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 13px !important;
    overflow: visible !important;
    background: var(--editor-surface-soft) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

html body .controls-container .editor-section h4 {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--editor-gold-bright) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    background: transparent !important;
    border: 0 !important;
}

html body .controls-container .editor-section h4::before {
    content: "";
    display: block;
    flex: 0 0 3px;
    width: 3px;
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--editor-red), var(--editor-gold));
}

html body .controls-container .piece-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html body .controls-container .piece-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 44px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 6px !important;
    cursor: pointer;
    touch-action: manipulation;
    background: rgba(4, 5, 7, 0.46) !important;
    border: 1px solid rgba(212, 175, 55, 0.26) !important;
    border-radius: 10px !important;
    transition:
        border-color 150ms ease,
        background-color 150ms ease,
        transform 150ms ease !important;
}

html body .controls-container .piece-item img {
    display: block !important;
    width: min(42px, 82%) !important;
    height: min(42px, 82%) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    html body .controls-container .piece-item:hover {
        border-color: rgba(240, 205, 88, 0.72) !important;
        background: rgba(212, 175, 55, 0.09) !important;
        transform: translateY(-1px);
    }
}

html body .controls-container .action-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
}

html body .controls-container button,
html body .controls-container select,
html body .controls-container input {
    font: inherit !important;
}

html body .controls-container .action-btn,
html body .controls-container .apply-btn,
html body .controls-container .cancel-btn {
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
    line-height: 1.2 !important;
    touch-action: manipulation;
}

html body .controls-container .action-btn {
    color: var(--theme-text-primary, #f5f5f5) !important;
    background: rgba(7, 8, 10, 0.5) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
}

html body .controls-container .action-btn:active,
html body .controls-container .piece-item:active {
    transform: scale(0.98);
}

html body .controls-container .fen-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
}

html body .controls-container .fen-controls > .control-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 7px !important;
}

html body .controls-container .fen-controls > .control-group:nth-child(2),
html body .controls-container .fen-controls > .control-group:nth-child(5) {
    grid-column: 1 / -1 !important;
}

html body .controls-container .control-group > label,
html body .controls-container .control-group > .fen-label {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

html body .controls-container select,
html body .controls-container input[type="text"],
html body .controls-container input[type="number"] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    color: #fff !important;
    background: rgba(4, 5, 7, 0.58) !important;
    border: 1px solid rgba(212, 175, 55, 0.28) !important;
    border-radius: 9px !important;
    outline: 0 !important;
}

html body .controls-container .input-number-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

html body .controls-container .input-number-wrapper input {
    padding-right: 42px !important;
}

html body .controls-container .castling-controls {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
}

html body .controls-container .castling-row {
    display: grid !important;
    grid-template-columns: minmax(62px, 0.8fr) repeat(2, minmax(58px, 1fr)) !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 0 !important;
}

html body .controls-container .castling-label,
html body .controls-container .castling-option {
    min-width: 0 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

html body .controls-container .castling-option {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 36px !important;
    cursor: pointer;
}

html body .controls-container .castling-option input {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: var(--editor-gold);
}

html body .controls-container .export-row {
    display: flex !important;
    justify-content: stretch !important;
    width: 100% !important;
    margin: 0 !important;
}

html body .controls-container .export-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    color: var(--editor-gold-bright) !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.11), rgba(201, 0, 53, 0.08)) !important;
    border: 1px solid rgba(212, 175, 55, 0.34) !important;
    border-radius: 10px !important;
    cursor: pointer;
    touch-action: manipulation;
}

html body .controls-container .export-btn .export-icon {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    object-fit: contain !important;
}

html body .controls-container .export-btn span {
    font-size: 13px !important;
    font-weight: 700 !important;
}

html body .controls-container .editor-actions {
    position: relative !important;
    inset: auto !important;
    z-index: 50 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding:
        11px
        max(12px, var(--editor-safe-right))
        max(11px, var(--editor-safe-bottom))
        max(12px, var(--editor-safe-left)) !important;
    gap: 10px !important;
    transform: none !important;
    background: rgba(9, 10, 12, 0.98) !important;
    border: 0 !important;
    border-top: 1px solid var(--editor-border) !important;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.28) !important;
}

html body .controls-container .editor-actions .apply-btn {
    color: #fff !important;
    background: linear-gradient(135deg, #b6002e, #d20a43) !important;
    border: 1px solid rgba(255, 210, 80, 0.85) !important;
    box-shadow: 0 6px 18px rgba(201, 0, 53, 0.25) !important;
}

html body .controls-container .editor-actions .cancel-btn {
    color: #f6f6f6 !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(212, 175, 55, 0.28) !important;
}

html body .controls-container button:focus-visible,
html body .controls-container select:focus-visible,
html body .controls-container input:focus-visible,
html body .controls-container .piece-item:focus-visible {
    outline: 3px solid rgba(240, 205, 88, 0.9) !important;
    outline-offset: 2px !important;
}

html body .editor-logo {
    z-index: 20 !important;
}

html body .editor-logo a,
html body .editor-logo img {
    display: block !important;
}

html body .editor-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

html body #floatingTooltip {
    z-index: 10000 !important;
}

/* Modales exclusivos del editor: reflow seguro sin ampliar estilos globales. */
html body .validation-modal,
html body .apply-modal,
html body .exit-modal {
    padding:
        max(16px, var(--editor-safe-top))
        max(16px, var(--editor-safe-right))
        max(16px, var(--editor-safe-bottom))
        max(16px, var(--editor-safe-left)) !important;
}

html body .validation-modal .modal-content,
html body .apply-modal .apply-modal-content,
html body .exit-modal .exit-modal-content {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    max-height: calc(100dvh - 32px) !important;
    margin: auto !important;
    overflow: auto !important;
    border-radius: 16px !important;
}

/* Escritorio amplio */
@media (min-width: 1181px) {
    html body {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    html body .chess-layout {
        --editor-panel-width: clamp(400px, 31vw, 480px);
        --editor-board-size: min(
            calc(900px * var(--board-zoom-factor, 1)),
            calc(100dvh - 40px),
            calc(100vw - var(--editor-panel-width) - 64px)
        );
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--editor-panel-width) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    html body .chess-layout > .chess-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 20px 28px !important;
    }

    html body .chess-layout .board,
    html body .chess-layout #board {
        width: var(--editor-board-size) !important;
        height: var(--editor-board-size) !important;
        max-width: var(--editor-board-size) !important;
        max-height: var(--editor-board-size) !important;
    }

    html body .chess-layout > .controls-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: var(--editor-panel-width) !important;
        max-width: var(--editor-panel-width) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-width: 0 0 0 1px !important;
        border-radius: 0 !important;
    }

    html body .controls-container .editor-content {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-content: start !important;
        gap: 12px !important;
        flex: 1 1 auto !important;
    }

    html body .controls-container .editor-content > .editor-section:nth-child(n + 3) {
        grid-column: 1 / -1 !important;
    }

    html body .editor-logo {
        position: fixed !important;
        top: 18px !important;
        left: 18px !important;
        width: 76px !important;
        height: 76px !important;
        margin: 0 !important;
        opacity: 0.94 !important;
    }
}

/* Tablet horizontal y portátiles compactos */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: landscape) {
    html body {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    html body .chess-layout {
        --editor-panel-width: clamp(340px, 38vw, 420px);
        --editor-board-size: min(
            calc(100dvh - 24px),
            calc(100vw - var(--editor-panel-width) - 32px),
            820px
        );
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--editor-panel-width) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    html body .chess-layout > .chess-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 12px 16px !important;
    }

    html body .chess-layout .board,
    html body .chess-layout #board {
        width: var(--editor-board-size) !important;
        height: var(--editor-board-size) !important;
        max-width: var(--editor-board-size) !important;
        max-height: var(--editor-board-size) !important;
    }

    html body .chess-layout > .controls-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: var(--editor-panel-width) !important;
        max-width: var(--editor-panel-width) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-width: 0 0 0 1px !important;
        border-radius: 0 !important;
    }

    html body .controls-container .editor-header {
        min-height: 54px !important;
        padding: 10px 14px !important;
    }

    html body .controls-container .editor-content {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-content: start !important;
        gap: 9px !important;
        flex: 1 1 auto !important;
        padding: 10px !important;
    }

    html body .controls-container .editor-content > .editor-section:nth-child(n + 3) {
        grid-column: 1 / -1 !important;
    }

    html body .controls-container .editor-section {
        padding: 10px !important;
    }

    html body .controls-container .editor-section h4 {
        margin-bottom: 9px !important;
        font-size: 14px !important;
    }

    html body .controls-container .piece-item {
        min-height: 46px !important;
        padding: 4px !important;
    }

    html body .controls-container .piece-item img {
        width: min(36px, 82%) !important;
        height: min(36px, 82%) !important;
    }

    html body .controls-container .editor-actions {
        min-height: 62px !important;
        padding: 8px 10px !important;
    }

    html body .editor-logo {
        position: fixed !important;
        top: 12px !important;
        left: 12px !important;
        width: 62px !important;
        height: 62px !important;
        margin: 0 !important;
        opacity: 0.92 !important;
    }
}

/* Tablet vertical: flujo de una columna, tablero primero y panel completo debajo. */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
    html body {
        min-height: 100dvh !important;
        overflow-y: auto !important;
    }

    html body .chess-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        max-height: none !important;
        padding:
            max(14px, var(--editor-safe-top))
            max(16px, var(--editor-safe-right))
            max(24px, var(--editor-safe-bottom))
            max(16px, var(--editor-safe-left)) !important;
        gap: 16px !important;
        overflow: visible !important;
    }

    html body .editor-logo {
        position: static !important;
        order: 0 !important;
        display: block !important;
        width: 70px !important;
        height: 70px !important;
        margin: 0 auto -4px !important;
    }

    html body .chess-layout > .chess-container {
        order: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 28px 28px !important;
    }

    html body .chess-layout .board,
    html body .chess-layout #board {
        width: min(calc(100vw - 88px), 820px) !important;
        height: min(calc(100vw - 88px), 820px) !important;
        max-width: min(calc(100vw - 88px), 820px) !important;
        max-height: min(calc(100vw - 88px), 820px) !important;
    }

    html body .chess-layout > .controls-container {
        order: 2 !important;
        width: min(920px, 100%) !important;
        max-width: 920px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: var(--editor-radius) !important;
    }

    html body .controls-container .editor-content {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-content: start !important;
        gap: 14px !important;
        overflow: visible !important;
    }

    html body .controls-container .editor-content > .editor-section:nth-child(n + 3) {
        grid-column: 1 / -1 !important;
    }

    html body .controls-container .editor-actions {
        position: sticky !important;
        bottom: 0 !important;
        border-radius: 0 0 var(--editor-radius) var(--editor-radius) !important;
    }
}

/* Móvil vertical */
@media (max-width: 768px) and (orientation: portrait) {
    html body {
        min-height: 100dvh !important;
        overflow-y: auto !important;
    }

    html body .chess-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        max-height: none !important;
        padding:
            max(10px, var(--editor-safe-top))
            max(8px, var(--editor-safe-right))
            max(18px, var(--editor-safe-bottom))
            max(8px, var(--editor-safe-left)) !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    html body .editor-logo {
        position: static !important;
        order: 0 !important;
        display: block !important;
        visibility: visible !important;
        width: 56px !important;
        height: 56px !important;
        margin: 0 auto -4px !important;
        opacity: 0.94 !important;
    }

    html body .chess-layout > .chess-container {
        order: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 4px 22px 26px !important;
    }

    html body .chess-layout .board,
    html body .chess-layout #board {
        width: min(calc(100vw - 44px), 640px) !important;
        height: min(calc(100vw - 44px), 640px) !important;
        max-width: min(calc(100vw - 44px), 640px) !important;
        max-height: min(calc(100vw - 44px), 640px) !important;
    }

    html body .chess-layout > .controls-container {
        order: 2 !important;
        width: 100% !important;
        max-width: 640px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: var(--editor-radius) !important;
    }

    html body .controls-container .editor-header {
        min-height: 54px !important;
        padding: 11px 14px !important;
    }

    html body .controls-container .editor-header h3 {
        font-size: 19px !important;
    }

    html body .controls-container .editor-content {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-content: start !important;
        gap: 10px !important;
        padding: 10px !important;
        overflow: visible !important;
    }

    html body .controls-container .editor-content > .editor-section:nth-child(n + 3) {
        grid-column: 1 / -1 !important;
    }

    html body .controls-container .editor-section {
        padding: 10px !important;
        border-radius: 12px !important;
    }

    html body .controls-container .editor-section h4 {
        margin-bottom: 9px !important;
        font-size: 14px !important;
    }

    html body .controls-container .piece-grid {
        gap: 6px !important;
    }

    html body .controls-container .piece-item {
        min-width: 44px !important;
        min-height: 48px !important;
        padding: 4px !important;
    }

    html body .controls-container .piece-item img {
        width: min(36px, 82%) !important;
        height: min(36px, 82%) !important;
    }

    html body .controls-container select,
    html body .controls-container input[type="text"],
    html body .controls-container input[type="number"] {
        font-size: 16px !important;
    }

    html body .controls-container .editor-actions {
        position: sticky !important;
        bottom: 0 !important;
        min-height: 68px !important;
        border-radius: 0 0 var(--editor-radius) var(--editor-radius) !important;
    }

    html body #floatingTooltip {
        display: none !important;
    }
}

/* Móvil horizontal: tablero y panel funcional en dos columnas. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
    html body {
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html body .chess-layout {
        --editor-landscape-board-size: min(
            calc(100dvh - 36px),
            calc(47vw - 30px)
        );
        display: grid !important;
        grid-template-columns: minmax(0, 47vw) minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        padding:
            max(4px, var(--editor-safe-top))
            max(4px, var(--editor-safe-right))
            max(4px, var(--editor-safe-bottom))
            max(4px, var(--editor-safe-left)) !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    html body .editor-logo {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html body .chess-layout > .chess-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 4px 12px 22px 24px !important;
    }

    html body .chess-layout .board,
    html body .chess-layout #board {
        width: var(--editor-landscape-board-size) !important;
        height: var(--editor-landscape-board-size) !important;
        max-width: var(--editor-landscape-board-size) !important;
        max-height: var(--editor-landscape-board-size) !important;
    }

    html body .chess-layout > .controls-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: none !important;
        height: calc(100dvh - max(8px, var(--editor-safe-top)) - max(8px, var(--editor-safe-bottom))) !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        border-radius: 12px !important;
    }

    html body .controls-container .editor-header {
        min-height: 42px !important;
        padding: 7px 10px !important;
    }

    html body .controls-container .editor-header h3 {
        font-size: 16px !important;
    }

    html body .controls-container .editor-content {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-content: start !important;
        gap: 7px !important;
        flex: 1 1 auto !important;
        padding: 7px !important;
        overflow-y: auto !important;
    }

    html body .controls-container .editor-content > .editor-section:nth-child(n + 3) {
        grid-column: 1 / -1 !important;
    }

    html body .controls-container .editor-section {
        padding: 8px !important;
        border-radius: 10px !important;
    }

    html body .controls-container .editor-section h4 {
        margin-bottom: 7px !important;
        font-size: 12px !important;
    }

    html body .controls-container .editor-section h4::before {
        height: 16px !important;
    }

    html body .controls-container .piece-grid {
        gap: 5px !important;
    }

    html body .controls-container .piece-item {
        min-width: 40px !important;
        min-height: 42px !important;
        padding: 3px !important;
    }

    html body .controls-container .piece-item img {
        width: min(32px, 82%) !important;
        height: min(32px, 82%) !important;
    }

    html body .controls-container .action-btn {
        min-height: 40px !important;
        padding: 7px !important;
        font-size: 11px !important;
    }

    html body .controls-container .fen-controls {
        gap: 8px !important;
    }

    html body .controls-container select,
    html body .controls-container input[type="text"],
    html body .controls-container input[type="number"] {
        min-height: 40px !important;
        padding: 7px 9px !important;
        font-size: 14px !important;
    }

    html body .controls-container .editor-actions {
        position: relative !important;
        bottom: auto !important;
        min-height: 54px !important;
        padding: 6px 8px !important;
        gap: 7px !important;
    }

    html body .controls-container .editor-actions .apply-btn,
    html body .controls-container .editor-actions .cancel-btn {
        min-height: 40px !important;
        padding: 7px 8px !important;
        font-size: 12px !important;
    }

    html body #floatingTooltip {
        display: none !important;
    }
}

@media (max-width: 360px) and (orientation: portrait) {
    html body .chess-layout {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    html body .chess-layout > .chess-container {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    html body .chess-layout .board,
    html body .chess-layout #board {
        width: calc(100vw - 40px) !important;
        height: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        max-height: calc(100vw - 40px) !important;
    }

    html body .controls-container .editor-content {
        gap: 7px !important;
        padding: 7px !important;
    }

    html body .controls-container .editor-section {
        padding: 8px !important;
    }

    html body .controls-container .piece-grid {
        gap: 4px !important;
    }

    html body .controls-container .piece-item {
        min-height: 44px !important;
    }

    html body .controls-container .piece-item img {
        width: min(32px, 80%) !important;
        height: min(32px, 80%) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .chess-layout *,
    html body .chess-layout *::before,
    html body .chess-layout *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/*
 * CIERRE DE ESPECIFICIDAD
 * Los estilos históricos del editor contienen selectores muy específicos.
 * Esta capa final fija únicamente la geometría principal para que ninguna
 * regla antigua vuelva a dividir la vista vertical o fuerce paneles fijos.
 */
@media (min-width: 1181px) {
    html body .chess-layout.chess-layout:not(:has(.icons-sidebar)) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--editor-panel-width) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        flex-direction: initial !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    html body .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 20px 28px !important;
    }

    html body .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .controls-container.controls-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: var(--editor-panel-width) !important;
        min-width: 0 !important;
        max-width: var(--editor-panel-width) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) and (orientation: landscape) {
    html body .chess-layout.chess-layout:not(:has(.icons-sidebar)) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--editor-panel-width) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        flex-direction: initial !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    html body .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 12px 16px !important;
    }

    html body .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .controls-container.controls-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: var(--editor-panel-width) !important;
        min-width: 0 !important;
        max-width: var(--editor-panel-width) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
    html body .chess-layout.chess-layout:not(:has(.icons-sidebar)) {
        display: flex !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        max-height: none !important;
        padding:
            max(14px, var(--editor-safe-top))
            max(16px, var(--editor-safe-right))
            max(24px, var(--editor-safe-bottom))
            max(16px, var(--editor-safe-left)) !important;
        gap: 16px !important;
        overflow: visible !important;
    }

    html body .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .editor-logo.editor-logo {
        position: static !important;
        order: 0 !important;
        display: block !important;
        visibility: visible !important;
        width: 70px !important;
        height: 70px !important;
        margin: 0 auto -4px !important;
        opacity: 0.94 !important;
    }

    html body .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .chess-container.chess-container {
        order: 1 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 28px 28px !important;
    }

    html body .chess-layout.chess-layout:not(:has(.icons-sidebar)) > .controls-container.controls-container {
        position: relative !important;
        order: 2 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: min(920px, 100%) !important;
        min-width: 0 !important;
        max-width: 920px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    html body .chess-layout.chess-layout {
        display: flex !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        max-height: none !important;
        padding:
            max(10px, var(--editor-safe-top))
            max(8px, var(--editor-safe-right))
            max(18px, var(--editor-safe-bottom))
            max(8px, var(--editor-safe-left)) !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    html body .chess-layout.chess-layout > .editor-logo.editor-logo {
        position: static !important;
        order: 0 !important;
        display: block !important;
        visibility: visible !important;
        width: 56px !important;
        height: 56px !important;
        margin: 0 auto -4px !important;
        opacity: 0.94 !important;
    }

    html body .chess-layout.chess-layout > .chess-container.chess-container {
        order: 1 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 4px 22px 26px !important;
    }

    html body .chess-layout.chess-layout > .controls-container.controls-container {
        position: relative !important;
        order: 2 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 640px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
    html body .chess-layout.chess-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 47vw) minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        flex-direction: initial !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        padding:
            max(4px, var(--editor-safe-top))
            max(4px, var(--editor-safe-right))
            max(4px, var(--editor-safe-bottom))
            max(4px, var(--editor-safe-left)) !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    html body .chess-layout.chess-layout > .chess-container.chess-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 4px 12px 22px 24px !important;
    }

    html body .chess-layout.chess-layout > .controls-container.controls-container {
        position: relative !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: calc(100dvh - 8px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 8px) !important;
        overflow: hidden !important;
    }

    html body .chess-layout.chess-layout > .editor-logo.editor-logo {
        display: none !important;
    }
}

/* El bloque histórico horizontal repite selectores; esta regla lo supera. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
    html body[data-require-auth="true"] .chess-layout.chess-layout.chess-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 47vw) minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        flex-direction: initial !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        padding:
            max(4px, var(--editor-safe-top))
            max(4px, var(--editor-safe-right))
            max(4px, var(--editor-safe-bottom))
            max(4px, var(--editor-safe-left)) !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    html body[data-require-auth="true"] .chess-layout.chess-layout.chess-layout > .chess-container.chess-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        padding: 4px 12px 22px 24px !important;
    }

    html body[data-require-auth="true"] .chess-layout.chess-layout.chess-layout > .controls-container.controls-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: calc(100dvh - 8px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 8px) !important;
        overflow: hidden !important;
    }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
    html body[data-require-auth="true"] .chess-layout.chess-layout.chess-layout
        .controls-container.controls-container .action-buttons.action-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
    }

    html body[data-require-auth="true"] .chess-layout.chess-layout.chess-layout
        .controls-container.controls-container .action-buttons.action-buttons .action-btn {
        min-height: 40px !important;
        padding: 7px 6px !important;
        font-size: 11px !important;
    }
}

/*
 * Móvil horizontal: el panel conserva su cabecera y acciones, mientras que la
 * paleta central recibe el desplazamiento táctil. Este bloque debe permanecer
 * después de los overrides históricos de layout-override.css.
 */
@media (max-width: 1024px) and (max-height: 520px) and (orientation: landscape) {
    html body[data-require-auth="true"] .chess-layout.chess-layout.chess-layout
        > .controls-container.controls-container {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    html body[data-require-auth="true"] .chess-layout.chess-layout.chess-layout
        > .controls-container.controls-container > .editor-header.editor-header {
        flex: 0 0 auto !important;
    }

    html body[data-require-auth="true"] .chess-layout.chess-layout.chess-layout
        > .controls-container.controls-container > .editor-content.editor-content {
        flex: 1 1 0% !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior-x: none;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
    }

    html body[data-require-auth="true"] .chess-layout.chess-layout.chess-layout
        > .controls-container.controls-container > .editor-actions.editor-actions {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 auto !important;
    }
}

/*
 * Paletas sandwich para movil y tablet vertical.
 * Los nodos originales se reubican por JavaScript; no existen paletas duplicadas.
 */
html body .portrait-palette-slot {
    display: none !important;
}

html body .portrait-palette-tool {
    display: none !important;
}

@media (max-width: 1180px) and (orientation: portrait) {
    html body .chess-layout {
        --editor-portrait-board-size: min(
            calc(100vw - 88px),
            calc(100dvh - 230px),
            820px
        );
    }

    html body .chess-layout > .chess-container.chess-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    html body .chess-layout .board,
    html body .chess-layout #board {
        width: var(--editor-portrait-board-size) !important;
        height: var(--editor-portrait-board-size) !important;
        max-width: var(--editor-portrait-board-size) !important;
        max-height: var(--editor-portrait-board-size) !important;
    }

    html body .portrait-palette-slot[hidden] {
        display: none !important;
    }

    html body .portrait-palette-slot:not([hidden]) {
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: var(--editor-portrait-board-size);
        min-width: 0;
        margin: 0;
        padding: 4px;
        overflow: hidden;
        background:
            linear-gradient(135deg, rgba(31, 32, 37, 0.98), rgba(10, 11, 14, 0.99));
        border: 1px solid rgba(212, 175, 55, 0.34);
        border-radius: 12px;
        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.035);
    }

    html body .portrait-palette-slot .editor-section.editor-section--palette {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    html body .portrait-palette-slot .editor-section--palette > h4 {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    html body .portrait-palette-slot .editor-section--palette > h4::before {
        display: none !important;
    }

    html body .portrait-palette-slot .piece-grid {
        display: grid !important;
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        align-items: center !important;
        gap: 1px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body .portrait-palette-slot .piece-item,
    html body .portrait-palette-slot .piece-tool {
        appearance: none;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: clamp(44px, 9vw, 64px) !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 3px !important;
        color: var(--editor-gold-bright) !important;
        cursor: pointer;
        touch-action: manipulation;
        background: rgba(4, 5, 7, 0.72) !important;
        border: 1px solid rgba(212, 175, 55, 0.18) !important;
        border-radius: 7px !important;
        box-shadow: none !important;
        transform: none !important;
    }

    html body .portrait-palette-slot[data-slot-palette-color="black"] .piece-item {
        background:
            linear-gradient(180deg, #f3ead8, #ddd1b8) !important;
        border-color: rgba(45, 39, 30, 0.26) !important;
    }

    html body .portrait-palette-slot .piece-item img {
        display: block !important;
        width: auto !important;
        height: 90% !important;
        max-width: 92% !important;
        max-height: 58px !important;
        object-fit: contain !important;
        pointer-events: none;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.34));
    }

    html body .portrait-palette-slot .piece-tool img {
        display: block !important;
        width: 23px !important;
        height: 23px !important;
        pointer-events: none;
    }

    html body .portrait-palette-slot .piece-item.selected,
    html body .portrait-palette-slot .piece-tool.active {
        position: relative;
        z-index: 1;
        background: rgba(201, 0, 53, 0.2) !important;
        border-color: var(--editor-gold-bright) !important;
        box-shadow:
            inset 0 0 0 1px rgba(201, 0, 53, 0.9),
            0 0 10px rgba(212, 175, 55, 0.34) !important;
    }

    html body .portrait-palette-slot[data-slot-palette-color="black"] .piece-item.selected {
        background:
            linear-gradient(180deg, #fff5df, #e6d5b4) !important;
    }

    html body .portrait-palette-slot .piece-item:focus-visible,
    html body .portrait-palette-slot .piece-tool:focus-visible {
        position: relative;
        z-index: 2;
        outline: 3px solid #ffffff !important;
        outline-offset: -3px !important;
    }

    html body .controls-container .editor-content {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .controls-container .editor-content > .editor-section {
        grid-column: 1 / -1 !important;
    }

    html body .controls-container .editor-section--actions .action-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body .controls-container .editor-section--actions #eraser {
        display: none !important;
    }

    html body .controls-container .editor-actions {
        position: static !important;
        inset: auto !important;
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    html body .chess-layout {
        --editor-portrait-board-size: min(
            calc(100vw - 16px),
            calc(100dvh - 184px),
            640px
        );
    }

    html body .chess-layout > .chess-container.chess-container {
        padding: 4px 8px 18px !important;
        gap: 6px !important;
    }

    html body .portrait-palette-slot:not([hidden]) {
        width: min(calc(100vw - 8px), 640px);
        padding: 0;
        border-radius: 10px;
    }

    html body .portrait-palette-slot .piece-grid {
        gap: 0 !important;
    }

    html body .controls-container .editor-section--actions .action-btn {
        min-height: 46px !important;
        padding-inline: 6px !important;
        font-size: 11px !important;
    }

    /*
     * La paleta inferior ocupa todo el ancho disponible bajo el tablero. En
     * móviles debe poder iniciar el desplazamiento de la página sin ceder ese
     * gesto a los botones de pieza. Un toque breve sigue activando la pieza.
     */
    html body .portrait-palette-slot--bottom,
    html body .portrait-palette-slot--bottom .editor-section--palette,
    html body .portrait-palette-slot--bottom .piece-grid,
    html body .portrait-palette-slot--bottom .piece-item,
    html body .portrait-palette-slot--bottom .piece-tool {
        touch-action: pan-y pinch-zoom !important;
        overscroll-behavior-y: auto !important;
    }

    /*
     * Un solo propietario del scroll en móvil vertical.
     *
     * layout-override.css deja .editor-content como contenedor desplazable y
     * la regla base añade overscroll-behavior: contain. En Chrome para Android
     * esa combinación atrapa el gesto cuando el panel llega a uno de sus
     * extremos y evita que la página continúe hacia el tablero.
     */
    html {
        overscroll-behavior-x: none;
    }

    html body {
        overflow-x: clip !important;
        overflow-y: visible !important;
        overscroll-behavior-y: auto !important;
    }

    html body[data-require-auth="true"] .chess-layout.chess-layout.chess-layout
        > .controls-container.controls-container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y pinch-zoom !important;
    }

    html body[data-require-auth="true"] .chess-layout.chess-layout.chess-layout
        > .controls-container.controls-container > .editor-content.editor-content {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y pinch-zoom !important;
        -webkit-overflow-scrolling: auto;
        scrollbar-gutter: auto;
    }
}

/*
 * Contraste de piezas negras en el panel lateral.
 *
 * En horizontal las paletas vuelven al panel derecho. Las piezas blancas
 * funcionan sobre la superficie oscura, pero las negras necesitan una base
 * clara que conserve su silueta y los detalles interiores.
 */
@media (orientation: landscape) {
    html body .controls-container
        .editor-section--palette[data-palette-color="black"] .piece-item {
        background:
            linear-gradient(180deg, #f4ecd9 0%, #ddd1b8 100%) !important;
        border-color: rgba(95, 76, 35, 0.5) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.72),
            0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    html body .controls-container
        .editor-section--palette[data-palette-color="black"] .piece-item img {
        filter:
            contrast(1.08)
            drop-shadow(0 2px 2px rgba(0, 0, 0, 0.32)) !important;
    }

    html body .controls-container
        .editor-section--palette[data-palette-color="black"] .piece-item.selected {
        background:
            linear-gradient(180deg, #fff8e8 0%, #ead8b6 100%) !important;
        border-color: var(--editor-red) !important;
        box-shadow:
            inset 0 0 0 2px rgba(201, 0, 53, 0.9),
            0 0 0 2px rgba(212, 175, 55, 0.3),
            0 0 12px rgba(212, 175, 55, 0.32) !important;
    }

    html body .controls-container
        .editor-section--palette[data-palette-color="black"] .piece-item:focus-visible {
        outline-color: #ffffff !important;
        box-shadow:
            inset 0 0 0 2px rgba(201, 0, 53, 0.92),
            0 0 0 3px rgba(212, 175, 55, 0.82) !important;
    }
}

@media (orientation: landscape) and (hover: hover) and (pointer: fine) {
    html body .controls-container
        .editor-section--palette[data-palette-color="black"] .piece-item:hover {
        background: linear-gradient(180deg, #fff9eb, #e8d8b9) !important;
        border-color: rgba(201, 0, 53, 0.72) !important;
    }
}

/* Selección inequívoca en las dos paletas laterales de cualquier tema. */
@media (orientation: landscape) {
    html body .controls-container
        .editor-section--palette .piece-item.selected {
        border-color: var(--editor-red) !important;
        box-shadow:
            inset 0 0 0 2px rgba(201, 0, 53, 0.9),
            0 0 0 2px rgba(212, 175, 55, 0.3),
            0 0 12px rgba(212, 175, 55, 0.28) !important;
    }
}

/*
 * Light Matrix necesita una escala propia de contraste. La estructura del
 * editor usa superficies claras en este tema, por lo que los textos blancos,
 * dorados pálidos y botones translúcidos del modo oscuro pierden legibilidad.
 */
html[data-theme="light-matrix"] body .controls-container {
    color: #263b4a !important;
}

html[data-theme="light-matrix"] body .controls-container .editor-header h3,
html[data-theme="light-matrix"] body .controls-container .editor-section h4 {
    color: #205b84 !important;
    text-shadow: none !important;
}

html[data-theme="light-matrix"] body .controls-container .editor-section h4::before {
    background: linear-gradient(180deg, #b00035, #2f78a8) !important;
}

html[data-theme="light-matrix"] body .controls-container .action-btn {
    color: #243845 !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #e5edf3 100%) !important;
    border-color: rgba(32, 91, 132, 0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 7px rgba(44, 62, 80, 0.12) !important;
}

html[data-theme="light-matrix"] body .controls-container .control-group > label,
html[data-theme="light-matrix"] body .controls-container .control-group > .fen-label,
html[data-theme="light-matrix"] body .controls-container .castling-label,
html[data-theme="light-matrix"] body .controls-container .castling-option {
    color: #344b5b !important;
    text-shadow: none !important;
}

html[data-theme="light-matrix"] body .controls-container select,
html[data-theme="light-matrix"] body .controls-container input[type="text"],
html[data-theme="light-matrix"] body .controls-container input[type="number"] {
    color: #1f303c !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(32, 91, 132, 0.46) !important;
    box-shadow: inset 0 1px 2px rgba(44, 62, 80, 0.08) !important;
}

html[data-theme="light-matrix"] body .controls-container select option {
    color: #1f303c !important;
    background: #ffffff !important;
}

html[data-theme="light-matrix"] body .controls-container .export-btn {
    color: #205b84 !important;
    background:
        linear-gradient(135deg, rgba(100, 181, 246, 0.18), rgba(255, 255, 255, 0.82)) !important;
    border-color: rgba(32, 91, 132, 0.42) !important;
}
/*
 * En pantallas compactas Light Matrix recupera superficies claras; así sus
 * títulos, etiquetas y controles azul pizarra conservan contraste tanto en
 * el panel horizontal del teléfono como bajo el tablero en modo vertical.
 */
@media (max-width: 1024px) and (max-height: 520px) and (orientation: landscape),
       (max-width: 1180px) and (orientation: portrait) {
    html[data-theme="light-matrix"] body[data-require-auth="true"]
        .chess-layout.chess-layout.chess-layout > .controls-container.controls-container {
        background:
            linear-gradient(180deg, #ffffff 0%, #edf3f7 100%) !important;
        border-color: rgba(32, 91, 132, 0.34) !important;
        box-shadow: 0 14px 34px rgba(44, 62, 80, 0.2) !important;
    }

    html[data-theme="light-matrix"] body .controls-container .editor-header {
        background:
            linear-gradient(135deg, rgba(100, 181, 246, 0.2), rgba(255, 255, 255, 0.94)) !important;
        border-bottom-color: rgba(32, 91, 132, 0.26) !important;
    }

    html[data-theme="light-matrix"] body .controls-container .editor-section {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(32, 91, 132, 0.22) !important;
    }

    html[data-theme="light-matrix"] body .controls-container .editor-content {
        scrollbar-color: #2f78a8 rgba(32, 91, 132, 0.1);
    }

    html[data-theme="light-matrix"] body .controls-container .editor-actions {
        background:
            linear-gradient(180deg, #f8fbfd 0%, #e5edf3 100%) !important;
        border-top-color: rgba(32, 91, 132, 0.3) !important;
    }

    html[data-theme="light-matrix"] body .controls-container .editor-actions .cancel-btn {
        color: #243845 !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border-color: rgba(32, 91, 132, 0.4) !important;
    }
}

@media (orientation: landscape) {
    html[data-theme="light-matrix"] body .controls-container
        .editor-section--palette[data-palette-color="white"] .piece-item {
        background:
            linear-gradient(180deg, #465462 0%, #29343d 100%) !important;
        border-color: rgba(32, 91, 132, 0.58) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.14),
            0 2px 7px rgba(44, 62, 80, 0.2) !important;
    }

    html[data-theme="light-matrix"] body .controls-container
        .editor-section--palette[data-palette-color="white"] .piece-item.selected {
        background:
            linear-gradient(180deg, #526372 0%, #303d48 100%) !important;
        border-color: var(--editor-red) !important;
        box-shadow:
            inset 0 0 0 2px rgba(201, 0, 53, 0.92),
            0 0 0 2px rgba(32, 91, 132, 0.3),
            0 0 12px rgba(32, 91, 132, 0.28) !important;
    }
}

@media (orientation: landscape) and (hover: hover) and (pointer: fine) {
    html[data-theme="light-matrix"] body .controls-container .action-btn:hover {
        color: #ffffff !important;
        background: linear-gradient(180deg, #327aaa, #205b84) !important;
        border-color: #174766 !important;
    }

    html[data-theme="light-matrix"] body .controls-container
        .editor-section--palette[data-palette-color="white"] .piece-item:hover {
        background: linear-gradient(180deg, #526372, #303d48) !important;
        border-color: rgba(240, 205, 88, 0.82) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .portrait-palette-slot .piece-item,
    html body .portrait-palette-slot .piece-tool {
        transition: none !important;
    }
}