/**
 * THEME POLISH
 * Afinación visual común de tablero y editor.
 *
 * Esta capa se carga al final para reforzar la identidad de cada tema sin
 * alterar el tamaño, la distribución ni la interacción de SilicioBoard.
 */

:root {
    --silicio-board-frame:
        0 22px 55px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(212, 175, 55, 0.24),
        0 0 18px rgba(212, 175, 55, 0.07);
    --silicio-piece-white-shadow:
        drop-shadow(0 1px 1px rgba(24, 18, 8, 0.52));
    --silicio-piece-black-shadow:
        drop-shadow(0 1px 1px rgba(255, 255, 255, 0.34));
    --silicio-palette-white-bg:
        linear-gradient(180deg, #19231f 0%, #0d1412 100%);
    --silicio-palette-white-border: rgba(212, 175, 55, 0.3);
    --silicio-palette-black-bg:
        linear-gradient(180deg, #f4ecd9 0%, #ddd1b8 100%);
    --silicio-palette-black-border: rgba(95, 76, 35, 0.5);
}

/* Tokens cromáticos compartidos por tablero y editor. */
html[data-theme="light-matrix"] {
    color-scheme: light;
    --theme-bg-primary: #f4f1e9;
    --theme-bg-secondary: #fffefa;
    --theme-bg-tertiary: #e7e2d8;
    --color-primary: #2f6f64;
    --color-primary-light: #4a8c80;
    --color-primary-dark: #245a51;
    --color-bg-dark: #f4f1e9;
    --color-bg-medium: #fffefa;
    --color-bg-light: #e7e2d8;
    --theme-accent-primary: #2f6f64;
    --theme-accent-secondary: #8a5a0c;
    --color-accent: #8a5a0c;
    --color-accent-light: #aa7625;
    --theme-text-primary: #182522;
    --theme-text-secondary: #374742;
    --theme-text-muted: #606e69;
    --color-text-primary: #182522;
    --color-text-secondary: #374742;
    --color-text-muted: #606e69;
    --color-text-white: #182522;
    --color-success: #2e7d32;
    --color-error: #b3261e;
    --color-warning: #8a5a0c;
    --color-info: #2f6f64;
    --theme-border: rgba(47, 111, 100, 0.28);
    --theme-button-bg: linear-gradient(145deg, #fffefa 0%, #e9e5dc 100%);
    --theme-button-hover: linear-gradient(145deg, #2f6f64 0%, #245a51 100%);
    --theme-button-text: #24322e;
    --theme-button-text-hover: #ffffff;
    --theme-modal-bg: linear-gradient(135deg, #fffefa 0%, #f4f1e9 100%);
    --theme-input-bg: rgba(255, 254, 250, 0.96);
    --theme-input-border: rgba(47, 111, 100, 0.38);
    --theme-input-placeholder: #66736f;
    --theme-coords-color: #344c46;
    --theme-coords-text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
    --theme-board-selection: rgba(138, 90, 12, 0.35);
    --shadow-sm: 0 2px 5px rgba(34, 55, 49, 0.09);
    --shadow-md: 0 5px 14px rgba(34, 55, 49, 0.12);
    --shadow-lg: 0 12px 30px rgba(34, 55, 49, 0.16);
    --shadow-glow: 0 0 16px rgba(47, 111, 100, 0.2);
    --theme-shadow: rgba(31, 47, 43, 0.14);
    --theme-shadow-glow: rgba(47, 111, 100, 0.22);
    --nav-svg-light: #fffefa;
    --nav-svg-dark: #22312d;
    --nav-svg-border: #2f6f64;
    --nav-svg-arrow: #2f6f64;
}

html[data-theme="silicio-core"] {
    color-scheme: dark;
    --theme-bg-primary: #070707;
    --theme-bg-secondary: #11100f;
    --theme-bg-tertiary: #1c1917;
    --color-primary: #ff3b30;
    --color-primary-light: #ff6259;
    --color-primary-dark: #c92820;
    --color-bg-dark: #070707;
    --color-bg-medium: #11100f;
    --color-bg-light: #1c1917;
    --theme-accent-primary: #ff3b30;
    --theme-accent-secondary: #d6ae4a;
    --color-accent: #d6ae4a;
    --color-accent-light: #edcb75;
    --theme-text-primary: #f4efe6;
    --theme-text-secondary: #ddd5c8;
    --theme-text-muted: #a69b8b;
    --color-text-primary: #f4efe6;
    --color-text-secondary: #ddd5c8;
    --color-text-muted: #a69b8b;
    --color-text-white: #ffffff;
    --color-success: #67c587;
    --color-error: #ff6259;
    --color-warning: #d6ae4a;
    --color-info: #8eb3c7;
    --theme-border: rgba(255, 59, 48, 0.28);
    --theme-button-bg: linear-gradient(145deg, #201c1a 0%, #11100f 100%);
    --theme-button-hover: linear-gradient(145deg, #ff3b30 0%, #b91f19 100%);
    --theme-button-text: #eee7dc;
    --theme-button-text-hover: #ffffff;
    --theme-modal-bg: linear-gradient(135deg, #161311 0%, #090909 100%);
    --theme-input-bg: rgba(0, 0, 0, 0.46);
    --theme-input-border: rgba(214, 174, 74, 0.34);
    --theme-input-placeholder: #a69b8b;
    --theme-coords-color: #d6ae4a;
    --theme-coords-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
    --theme-board-selection: rgba(255, 59, 48, 0.42);
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.62);
    --shadow-glow: 0 0 22px rgba(255, 59, 48, 0.28);
    --theme-shadow: rgba(0, 0, 0, 0.58);
    --theme-shadow-glow: rgba(255, 59, 48, 0.34);
    --nav-svg-light: #f4efe6;
    --nav-svg-dark: #090909;
    --nav-svg-border: #ff3b30;
    --nav-svg-arrow: #ff3b30;
    --silicio-board-frame: 0 24px 58px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 59, 48, 0.34), 0 0 25px rgba(214, 174, 74, 0.12);
    --silicio-piece-white-shadow: drop-shadow(0 1px 1px rgba(21, 20, 17, 0.64));
    --silicio-piece-black-shadow: drop-shadow(0 1px 1px rgba(243, 238, 226, 0.46));
    --silicio-palette-white-bg: linear-gradient(180deg, #351512 0%, #160b0a 100%);
    --silicio-palette-white-border: rgba(255, 59, 48, 0.44);
    --silicio-palette-black-bg: linear-gradient(180deg, #eee7d9 0%, #cfc5b3 100%);
    --silicio-palette-black-border: rgba(214, 174, 74, 0.48);
}

html[data-theme="eclipse-matrix"] {
    color-scheme: dark;
    --theme-bg-primary: #07111c;
    --theme-bg-secondary: #0e1a29;
    --theme-bg-tertiary: #17283a;
    --color-primary: #86c5e0;
    --color-primary-light: #addced;
    --color-primary-dark: #4f91b3;
    --color-bg-dark: #07111c;
    --color-bg-medium: #0e1a29;
    --color-bg-light: #17283a;
    --theme-accent-primary: #86c5e0;
    --theme-accent-secondary: #c58a5a;
    --color-accent: #c58a5a;
    --color-accent-light: #dfa77a;
    --theme-text-primary: #eef5f7;
    --theme-text-secondary: #c6d5de;
    --theme-text-muted: #8da2b2;
    --color-text-primary: #eef5f7;
    --color-text-secondary: #c6d5de;
    --color-text-muted: #8da2b2;
    --color-text-white: #ffffff;
    --color-success: #72c7a2;
    --color-error: #ef7f7a;
    --color-warning: #d8a568;
    --color-info: #86c5e0;
    --theme-border: rgba(134, 197, 224, 0.3);
    --theme-button-bg: linear-gradient(145deg, #17283a 0%, #0b1724 100%);
    --theme-button-hover: linear-gradient(145deg, #86c5e0 0%, #4f91b3 100%);
    --theme-button-text: #dce8ee;
    --theme-button-text-hover: #07111c;
    --theme-modal-bg: linear-gradient(135deg, #102034 0%, #08131f 100%);
    --theme-input-bg: rgba(4, 13, 23, 0.58);
    --theme-input-border: rgba(134, 197, 224, 0.42);
    --theme-input-placeholder: #8da2b2;
    --theme-coords-color: #c58a5a;
    --theme-coords-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.86);
    --theme-board-selection: rgba(197, 138, 90, 0.4);
    --shadow-sm: 0 2px 5px rgba(0, 5, 12, 0.42);
    --shadow-md: 0 6px 16px rgba(0, 5, 12, 0.5);
    --shadow-lg: 0 14px 36px rgba(0, 5, 12, 0.64);
    --shadow-glow: 0 0 22px rgba(134, 197, 224, 0.25);
    --theme-shadow: rgba(0, 5, 12, 0.56);
    --theme-shadow-glow: rgba(134, 197, 224, 0.3);
    --nav-svg-light: #eef5f7;
    --nav-svg-dark: #09131f;
    --nav-svg-border: #86c5e0;
    --nav-svg-arrow: #86c5e0;
    --silicio-board-frame: 0 24px 58px rgba(0, 5, 12, 0.68), 0 0 0 1px rgba(134, 197, 224, 0.34), 0 0 26px rgba(197, 138, 90, 0.12);
    --silicio-piece-white-shadow: drop-shadow(0 1px 1px rgba(12, 25, 34, 0.64));
    --silicio-piece-black-shadow: drop-shadow(0 1px 1px rgba(226, 241, 247, 0.46));
    --silicio-palette-white-bg: linear-gradient(180deg, #203c4a 0%, #10242e 100%);
    --silicio-palette-white-border: rgba(134, 197, 224, 0.44);
    --silicio-palette-black-bg: linear-gradient(180deg, #edf3f2 0%, #cbd8d8 100%);
    --silicio-palette-black-border: rgba(74, 106, 119, 0.56);
}

html[data-theme="light-matrix"] {
    --silicio-board-frame:
        0 20px 44px rgba(39, 64, 83, 0.2),
        0 0 0 1px rgba(47, 120, 168, 0.3),
        0 0 18px rgba(47, 120, 168, 0.08);
    --silicio-piece-white-shadow:
        drop-shadow(0 1px 1px rgba(25, 35, 42, 0.56));
    --silicio-piece-black-shadow:
        drop-shadow(0 1px 1px rgba(255, 255, 255, 0.42));
    --silicio-palette-white-bg:
        linear-gradient(180deg, #465b6a 0%, #2b3943 100%);
    --silicio-palette-white-border: rgba(32, 91, 132, 0.6);
    --silicio-palette-black-bg:
        linear-gradient(180deg, #fffdf5 0%, #e8e1cf 100%);
    --silicio-palette-black-border: rgba(82, 95, 104, 0.42);
}

html[data-theme="quantum-matrix"] {
    --silicio-board-frame:
        0 22px 56px rgba(2, 0, 20, 0.58),
        0 0 0 1px rgba(0, 245, 255, 0.38),
        0 0 28px rgba(139, 76, 255, 0.2);
    --silicio-piece-white-shadow:
        drop-shadow(0 1px 1px rgba(14, 13, 38, 0.62));
    --silicio-piece-black-shadow:
        drop-shadow(0 1px 1px rgba(208, 248, 255, 0.48));
    --silicio-palette-white-bg:
        linear-gradient(180deg, #252653 0%, #14152f 100%);
    --silicio-palette-white-border: rgba(0, 245, 255, 0.4);
    --silicio-palette-black-bg:
        linear-gradient(180deg, #edf6ff 0%, #ccd9ee 100%);
    --silicio-palette-black-border: rgba(74, 96, 154, 0.58);
}

html[data-theme="aurum-matrix"] {
    --silicio-board-frame:
        0 22px 56px rgba(28, 18, 6, 0.58),
        0 0 0 1px rgba(229, 193, 121, 0.34),
        0 0 24px rgba(184, 129, 58, 0.15);
    --silicio-piece-white-shadow:
        drop-shadow(0 1px 1px rgba(31, 20, 7, 0.62));
    --silicio-piece-black-shadow:
        drop-shadow(0 1px 1px rgba(255, 240, 203, 0.42));
    --silicio-palette-white-bg:
        linear-gradient(180deg, #382a18 0%, #1e160c 100%);
    --silicio-palette-white-border: rgba(229, 193, 121, 0.42);
    --silicio-palette-black-bg:
        linear-gradient(180deg, #fff1d4 0%, #dfc79e 100%);
    --silicio-palette-black-border: rgba(111, 75, 31, 0.56);
}

html[data-theme="rose-matrix"] {
    --silicio-board-frame:
        0 22px 56px rgba(24, 3, 21, 0.6),
        0 0 0 1px rgba(255, 105, 180, 0.38),
        0 0 26px rgba(255, 20, 147, 0.18);
    --silicio-piece-white-shadow:
        drop-shadow(0 1px 1px rgba(45, 10, 31, 0.6));
    --silicio-piece-black-shadow:
        drop-shadow(0 1px 1px rgba(255, 222, 233, 0.46));
    --silicio-palette-white-bg:
        linear-gradient(180deg, #4b1937 0%, #281020 100%);
    --silicio-palette-white-border: rgba(255, 105, 180, 0.42);
    --silicio-palette-black-bg:
        linear-gradient(180deg, #fff0f4 0%, #e9cbd6 100%);
    --silicio-palette-black-border: rgba(142, 55, 85, 0.56);
}

html[data-theme="falling-code-matrix"] {
    --silicio-board-frame:
        0 22px 56px rgba(0, 0, 0, 0.68),
        0 0 0 1px rgba(0, 255, 65, 0.38),
        0 0 26px rgba(0, 255, 65, 0.16);
    --silicio-piece-white-shadow:
        drop-shadow(0 1px 1px rgba(4, 23, 9, 0.66));
    --silicio-piece-black-shadow:
        drop-shadow(0 1px 1px rgba(214, 255, 219, 0.44));
    --silicio-palette-white-bg:
        linear-gradient(180deg, #13361e 0%, #07180c 100%);
    --silicio-palette-white-border: rgba(0, 255, 65, 0.4);
    --silicio-palette-black-bg:
        linear-gradient(180deg, #eff8e9 0%, #ccdfc6 100%);
    --silicio-palette-black-border: rgba(47, 97, 56, 0.58);
}

/* Marco temático: no altera el tamaño ni la geometría del tablero. */
#board.silicio-board-host {
    box-shadow: var(--silicio-board-frame) !important;
}

@media (max-width: 1024px) {
    #board.silicio-board-host {
        box-shadow:
            0 10px 28px var(--theme-shadow),
            0 0 0 1px var(--theme-border) !important;
    }
}

html.theme-transitioning #board.silicio-board-host {
    transition: box-shadow var(--transition-theme);
}

/* Light Matrix: navegación PGN blanca con matiz azul, sin el gris general. */
html[data-theme="light-matrix"] body:not([data-tablet-fix])
    .controls-container > .navigation-section {
    background: linear-gradient(180deg, #f8fcff 0%, #edf6fc 100%) !important;
    border: 1px solid rgba(47, 120, 168, 0.2) !important;
    box-shadow:
        0 4px 14px rgba(39, 64, 83, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

html[data-theme="light-matrix"] body:not([data-tablet-fix])
    .controls-container > .navigation-section .navigation-buttons-redesigned {
    background: transparent !important;
}

html[data-theme="light-matrix"] body
    .navigation-buttons-redesigned .nav-button {
    background: linear-gradient(180deg, #ffffff 0%, #f2f8fc 100%) !important;
    border-color: rgba(47, 120, 168, 0.38) !important;
    box-shadow:
        0 3px 10px rgba(39, 64, 83, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

html[data-theme="light-matrix"] body
    .navigation-buttons-redesigned .nav-button .nav-icon {
    color: #2f78a8 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light-matrix"] body
    .navigation-buttons-redesigned .nav-button .nav-chess-border {
    stroke: #2f78a8;
}

html[data-theme="light-matrix"] body
    .navigation-buttons-redesigned .nav-button .nav-arrow-path {
    fill: #2f78a8;
}

html[data-theme="light-matrix"] body
    .navigation-buttons-redesigned .nav-button.active {
    background: linear-gradient(145deg, #64b5f6 0%, #3f91cf 100%) !important;
    border-color: #2f78a8 !important;
    box-shadow:
        0 4px 12px rgba(47, 120, 168, 0.24),
        0 0 0 2px rgba(100, 181, 246, 0.18) !important;
}

html[data-theme="light-matrix"] body
    .navigation-buttons-redesigned .nav-button.active .nav-icon {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(31, 87, 126, 0.45);
}

html[data-theme="light-matrix"] body
    .navigation-buttons-redesigned .nav-button.disabled-by-other {
    background: linear-gradient(180deg, #f8fbfd 0%, #edf4f8 100%) !important;
    border-color: rgba(47, 120, 168, 0.2) !important;
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme="light-matrix"] body
        .navigation-buttons-redesigned .nav-button:hover:where(:not(.touch-feedback-ended)):not(.active):not(.disabled-by-other) {
        background: linear-gradient(180deg, #eef8ff 0%, #dceffc 100%) !important;
        border-color: #42a5f5 !important;
        box-shadow:
            0 5px 14px rgba(47, 120, 168, 0.18),
            0 0 0 2px rgba(100, 181, 246, 0.14) !important;
    }
}

@media (hover: none), (pointer: coarse) {

    html[data-theme="light-matrix"] body:not([data-tablet-fix])
        .navigation-buttons-redesigned .nav-button:active:not(.disabled-by-other) {
        background: linear-gradient(180deg, #dceffc 0%, #c8e4f8 100%) !important;
        border-color: #42a5f5 !important;
        box-shadow: 0 2px 7px rgba(47, 120, 168, 0.2) !important;
    }
}

/*
 * La gama Silicio conserva su dibujo original. Una única sombra de contorno
 * separa el dorado de las casillas claras y el carbón de las oscuras sin
 * convertir las piezas en elementos luminosos.
 */
html:not([data-piece-theme]) #board.silicio-board-host piece.white,
html[data-piece-theme="silicio"] #board.silicio-board-host piece.white {
    filter: var(--silicio-piece-white-shadow);
}

html:not([data-piece-theme]) #board.silicio-board-host piece.black,
html[data-piece-theme="silicio"] #board.silicio-board-host piece.black {
    filter: var(--silicio-piece-black-shadow);
}

/* Opt-in, crisp silhouettes; no recoloring of the user's original artwork. */
html[data-board-readability="enhanced"] #board.silicio-board-host piece.white,
html[data-board-readability="enhanced"] .silicio-board-host piece.white {
    filter: drop-shadow(0 0 .8px #201b14) drop-shadow(0 1px .45px #201b14);
}
html[data-board-readability="enhanced"] #board.silicio-board-host piece.black,
html[data-board-readability="enhanced"] .silicio-board-host piece.black {
    filter: drop-shadow(0 0 .8px #fff5df) drop-shadow(0 1px .45px #fff5df);
}
html[data-board-readability="enhanced"] #board square.move-dest::before {
    border-width: 2px;
    border-color: var(--move-hint);
}

/* A single crisp outline for the whole annotation; stored paint colors stay intact. */
#board .drawing-svg-container :is(g.arrow, g.arrow-temp, g.square-highlight-rect) {
    filter: drop-shadow(0 0 .7px var(--silicio-mark-edge, rgba(16,24,23,.8)));
}
#board .drawing-svg-container :is(g.arrow, g.arrow-temp) :is(line, path) {
    filter: none;
}
html[data-board-readability="enhanced"] #board .drawing-svg-container :is(g.arrow, g.arrow-temp, g.square-highlight-rect) {
    filter: drop-shadow(0 0 1px var(--silicio-mark-edge, rgba(16,24,23,.8)));
}

/*
 * Paletas del editor: la pieza dorada vive sobre una placa oscura y la pieza
 * negra sobre una placa clara, ambas teñidas por el tema activo.
 */
html body .controls-container
    .editor-section--palette[data-palette-color="white"] .piece-item:not(.selected),
html body .portrait-palette-slot[data-slot-palette-color="white"]
    .piece-item:not(.selected) {
    background: var(--silicio-palette-white-bg) !important;
    border-color: var(--silicio-palette-white-border) !important;
}

html body .controls-container
    .editor-section--palette[data-palette-color="black"] .piece-item:not(.selected),
html body .portrait-palette-slot[data-slot-palette-color="black"]
    .piece-item:not(.selected) {
    background: var(--silicio-palette-black-bg) !important;
    border-color: var(--silicio-palette-black-border) !important;
}

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

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

/* El encabezado compacto también adopta la identidad del tema activo. */
@media (max-width: 768px),
       (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    html body:not([data-tablet-fix]) .mobile-header {
        border-bottom-color: var(--theme-border);
    }

    html body:not([data-tablet-fix]) .mobile-menu-trigger {
        color: var(--theme-text-muted);
    }

    html body:not([data-tablet-fix]) .mobile-menu-trigger-right {
        color: var(--theme-accent-primary);
    }

    html body:not([data-tablet-fix]) .mobile-header-title {
        color: var(--theme-text-secondary);
    }

    html[data-theme="light-matrix"] body:not([data-tablet-fix]) .mobile-header {
        background: linear-gradient(180deg, #ffffff 0%, #edf3f7 100%);
        box-shadow: 0 3px 14px rgba(39, 64, 83, 0.1);
    }

    html[data-theme="quantum-matrix"] body:not([data-tablet-fix]) .mobile-header {
        background: linear-gradient(180deg, #1a0a2e 0%, #0a0718 100%);
    }

    html[data-theme="aurum-matrix"] body:not([data-tablet-fix]) .mobile-header {
        background: linear-gradient(180deg, #2a1f0f 0%, #120f09 100%);
    }

    html[data-theme="rose-matrix"] body:not([data-tablet-fix]) .mobile-header {
        background: linear-gradient(180deg, #2a0a2a 0%, #150715 100%);
    }

    html[data-theme="falling-code-matrix"] body:not([data-tablet-fix]) .mobile-header {
        background: linear-gradient(180deg, #041008 0%, #000000 100%);
    }
}

/* El logotipo decorativo nunca debe cubrir una pieza del editor. */
@media (min-width: 1181px) {
    html body .editor-logo {
        top: 20px !important;
        left: 10px !important;
        width: 46px !important;
        height: 46px !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) and (orientation: landscape) {
    html body .editor-logo {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.theme-transitioning #board.silicio-board-host {
        transition: none;
    }
}