/* Thèmes de l'Échiquier */
        #board.theme-emerald .white-1e1d7 {
            background-color: #eeeed2 !important;
            color: #769656 !important;
        }

        #board.theme-emerald .black-3c85d {
            background-color: #769656 !important;
            color: #eeeed2 !important;
        }

        #board.theme-slate .white-1e1d7 {
            background-color: #e1e8ed !important;
            color: #4b7399 !important;
        }

        #board.theme-slate .black-3c85d {
            background-color: #4b7399 !important;
            color: #e1e8ed !important;
        }

        #board.theme-wood .white-1e1d7 {
            background-color: #f0d9b5 !important;
            color: #b58863 !important;
        }

        #board.theme-wood .black-3c85d {
            background-color: #b58863 !important;
            color: #f0d9b5 !important;
        }

        #board.theme-dark .white-1e1d7 {
            background-color: #c4cace !important;
            color: #4b525d !important;
        }

        #board.theme-dark .black-3c85d {
            background-color: #4b525d !important;
            color: #c4cace !important;
        }

        #board.theme-ocean .white-1e1d7 {
            background-color: #e0f2fe !important;
            color: #0369a1 !important;
        }

        #board.theme-ocean .black-3c85d {
            background-color: #0369a1 !important;
            color: #e0f2fe !important;
        }

        #board.theme-neon .white-1e1d7 {
            background-color: #2a2a40 !important;
            color: #00f0ff !important;
        }

        #board.theme-neon .black-3c85d {
            background-color: #7928ca !important;
            color: #00f0ff !important;
        }

        #board.theme-custom .white-1e1d7 {
            background-color: var(--custom-light-sq, #eeeed2) !important;
            color: var(--custom-dark-sq, #3b7a57) !important;
        }

        #board.theme-custom .black-3c85d {
            background-color: var(--custom-dark-sq, #3b7a57) !important;
            color: var(--custom-light-sq, #eeeed2) !important;
        }

        /* Surbrillances */
        .highlight-selected {
            box-shadow: inset 0 0 0 3.5px #10b981 !important;
            background-color: rgba(16, 185, 129, 0.35) !important;
        }

        .highlight-last-move {
            background-color: rgba(234, 179, 8, 0.30) !important;
            box-shadow: inset 0 0 0 1.5px rgba(234, 179, 8, 0.5) !important;
        }

        /* Surbrillances dynamiques adaptées à la DA et à la qualité du coup */
        .highlight-move-from,
        .highlight-move-to {
            position: relative;
            transition: background-color 0.2s ease, box-shadow 0.2s ease;
        }

        /* Coup Brillant (Cyan / Turquoise éclatant) */
        .highlight-cat-brilliant {
            background-color: rgba(6, 182, 212, 0.40) !important;
            box-shadow: inset 0 0 0 2.5px rgba(6, 182, 212, 0.85), 0 0 12px rgba(6, 182, 212, 0.35) !important;
        }
        .highlight-cat-brilliant.highlight-move-to::after {
            content: '★';
            position: absolute;
            top: 2px;
            right: 3px;
            font-size: 11px;
            font-weight: 900;
            line-height: 1;
            color: #22d3ee;
            text-shadow: 0 0 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(6, 182, 212, 0.85);
            pointer-events: none;
            z-index: 6;
        }

        /* Bon coup / Théorique / Roque (Émeraude / Vert) */
        .highlight-cat-good,
        .highlight-cat-capture_major,
        .highlight-cat-castling,
        .highlight-cat-opening_center,
        .highlight-cat-opening_development {
            background-color: rgba(16, 185, 129, 0.35) !important;
            box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.7) !important;
        }
        .highlight-cat-good.highlight-move-to::after,
        .highlight-cat-capture_major.highlight-move-to::after,
        .highlight-cat-castling.highlight-move-to::after,
        .highlight-cat-opening_center.highlight-move-to::after,
        .highlight-cat-opening_development.highlight-move-to::after {
            content: '✓';
            position: absolute;
            top: 2px;
            right: 3px;
            font-size: 11px;
            font-weight: 900;
            line-height: 1;
            color: #34d399;
            text-shadow: 0 0 4px rgba(0, 0, 0, 0.95);
            pointer-events: none;
            z-index: 6;
        }

        /* Légère Imprécision (Ambre / Jaune chaleureux) */
        .highlight-cat-inaccuracy {
            background-color: rgba(245, 158, 11, 0.35) !important;
            box-shadow: inset 0 0 0 2px rgba(245, 158, 11, 0.75) !important;
        }
        .highlight-cat-inaccuracy.highlight-move-to::after {
            content: '?!';
            position: absolute;
            top: 2px;
            right: 3px;
            font-size: 11px;
            font-weight: 900;
            line-height: 1;
            color: #fbbf24;
            text-shadow: 0 0 4px rgba(0, 0, 0, 0.95);
            pointer-events: none;
            z-index: 6;
        }

        /* Erreur tactique (Orange cuivré) */
        .highlight-cat-mistake {
            background-color: rgba(249, 115, 22, 0.38) !important;
            box-shadow: inset 0 0 0 2px rgba(249, 115, 22, 0.8) !important;
        }
        .highlight-cat-mistake.highlight-move-to::after {
            content: '?';
            position: absolute;
            top: 2px;
            right: 3px;
            font-size: 12px;
            font-weight: 900;
            line-height: 1;
            color: #fb923c;
            text-shadow: 0 0 4px rgba(0, 0, 0, 0.95);
            pointer-events: none;
            z-index: 6;
        }

        /* Gaffe majeure (Rouge carmin vif) */
        .highlight-cat-blunder {
            background-color: rgba(239, 68, 68, 0.42) !important;
            box-shadow: inset 0 0 0 2.5px rgba(239, 68, 68, 0.85), 0 0 12px rgba(239, 68, 68, 0.3) !important;
        }
        .highlight-cat-blunder.highlight-move-to::after {
            content: '??';
            position: absolute;
            top: 2px;
            right: 3px;
            font-size: 11px;
            font-weight: 900;
            line-height: 1;
            color: #f87171;
            text-shadow: 0 0 4px rgba(0, 0, 0, 0.95);
            pointer-events: none;
            z-index: 6;
        }

        /* Échec au Roi (Doré lumineux) */
        .highlight-cat-check {
            background-color: rgba(234, 179, 8, 0.38) !important;
            box-shadow: inset 0 0 0 2px rgba(234, 179, 8, 0.8) !important;
        }
        .highlight-cat-check.highlight-move-to::after {
            content: '+';
            position: absolute;
            top: 2px;
            right: 3px;
            font-size: 13px;
            font-weight: 900;
            line-height: 1;
            color: #fde047;
            text-shadow: 0 0 4px rgba(0, 0, 0, 0.95);
            pointer-events: none;
            z-index: 6;
        }

        /* Échec et Mat (Trophée or) */
        .highlight-cat-checkmate {
            background-color: rgba(250, 204, 21, 0.45) !important;
            box-shadow: inset 0 0 0 2.5px rgba(250, 204, 21, 0.95), 0 0 15px rgba(250, 204, 21, 0.4) !important;
        }
        .highlight-cat-checkmate.highlight-move-to::after {
            content: '#';
            position: absolute;
            top: 2px;
            right: 3px;
            font-size: 12px;
            font-weight: 900;
            line-height: 1;
            color: #fef08a;
            text-shadow: 0 0 4px rgba(0, 0, 0, 0.95);
            pointer-events: none;
            z-index: 6;
        }

        /* Prévisualisation au survol d'un coup dans le chat / historique */
        .highlight-preview {
            outline: 2px dashed rgba(255, 255, 255, 0.8) !important;
            outline-offset: -2px;
        }

        .highlight-hint,
        .highlight-hint-to {
            position: relative;
        }

        .highlight-hint::after {
            content: '';
            position: absolute;
            width: 26%;
            height: 26%;
            border-radius: 50%;
            background: rgba(16, 185, 129, 0.85);
            top: 37%;
            left: 37%;
            pointer-events: none !important;
            z-index: 5;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }

        .highlight-hint.has-piece::after {
            width: 86%;
            height: 86%;
            border-radius: 50%;
            border: 5px solid rgba(16, 185, 129, 0.85);
            background: transparent;
            top: 7%;
            left: 7%;
            box-sizing: border-box;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
            pointer-events: none !important;
            z-index: 5;
        }

        /* Point d'indice (Hint) : même teinte jaune que la case d'origine (highlight-hint-from) */
        .highlight-hint-to::after {
            content: '';
            position: absolute;
            width: 26%;
            height: 26%;
            border-radius: 50%;
            background: #eab308;
            top: 37%;
            left: 37%;
            pointer-events: none !important;
            z-index: 5;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 8px rgba(234, 179, 8, 0.6);
        }

        .highlight-hint-to.has-piece::after {
            width: 86%;
            height: 86%;
            border-radius: 50%;
            border: 5px solid #eab308;
            background: transparent;
            top: 7%;
            left: 7%;
            box-sizing: border-box;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 0 8px rgba(234, 179, 8, 0.5);
            pointer-events: none !important;
            z-index: 5;
        }

        /* Danger Map & Hint */
        #board[class*="theme-"] .square-55d63.danger-square,
        #board .square-55d63.danger-square {
            background-color: rgba(239, 68, 68, 0.32) !important;
            box-shadow: inset 0 0 0 1.5px rgba(239, 68, 68, 0.65) !important;
        }
        #board[class*="theme-"] .square-55d63.undefended-piece,
        #board .square-55d63.undefended-piece {
            box-shadow: inset 0 0 0 3.5px #eab308, 0 0 12px rgba(234, 179, 8, 0.85) !important;
            animation: pulse-danger 1.5s infinite;
        }
        #board[class*="theme-"] .square-55d63.highlight-hint-from,
        #board .square-55d63.highlight-hint-from {
            background-color: rgba(234, 179, 8, 0.45) !important;
            box-shadow: inset 0 0 0 4px rgba(234, 179, 8, 0.9) !important;
        }
        @keyframes pulse-danger {
            0%, 100% {
                box-shadow: inset 0 0 0 3px #eab308, 0 0 6px rgba(234, 179, 8, 0.4);
            }
            50% {
                box-shadow: inset 0 0 0 4.5px #facc15, 0 0 16px rgba(250, 204, 21, 0.95);
            }
        }

        /* Design Moderne des Cases à Cocher (Custom Checkboxes) */
        input[type="checkbox"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 1.15rem;
            height: 1.15rem;
            border-radius: 0.375rem;
            background-color: #0f172a;
            border: 1.5px solid #334155;
            outline: none;
            cursor: pointer;
            display: inline-grid;
            place-content: center;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            vertical-align: middle;
            position: relative;
            box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.5);
            flex-shrink: 0;
            margin: 0;
        }

        input[type="checkbox"]:hover {
            border-color: #10b981;
            background-color: #1e293b;
            box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
            transform: scale(1.05);
        }

        input[type="checkbox"]:checked {
            background-color: #059669;
            border-color: #10b981;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
        }

        input[type="checkbox"]:checked::before {
            content: "";
            width: 0.55rem;
            height: 0.32rem;
            border-left: 2px solid #ffffff;
            border-bottom: 2px solid #ffffff;
            transform: rotate(-45deg) translate(0.5px, -1px);
            transition: transform 0.15s ease-in-out;
        }

        input[type="checkbox"]:focus-visible {
            box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #10b981;
        }

        input[type="checkbox"]:active {
            transform: scale(0.92);
        }

        /* Variante Indigo pour la modale */
        input[type="checkbox"].text-indigo-600:hover {
            border-color: #6366f1;
            box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
        }

        input[type="checkbox"].text-indigo-600:checked {
            background-color: #4f46e5;
            border-color: #6366f1;
            box-shadow: 0 0 10px rgba(99, 102, 241, 0.45);
        }

        input[type="checkbox"].text-indigo-600:focus-visible {
            box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #6366f1;
        }

        /* Barre d'évaluation */
        .eval-bar {
            transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Échiquier : isolation de l'empilement & fluidité maximale */
        #board {
            position: relative;
            isolation: isolate;
            touch-action: none;
            user-select: none;
        }

        /* Fluidité tactile mobile et verrouillage du scroll parasite */
        #board,
        #board * {
            touch-action: none !important;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        /* Pièces sur l'échiquier : accélération matérielle GPU */
        #board .square-55d63 img {
            user-select: none;
            -webkit-user-drag: none;
            position: relative;
            z-index: 2;
            will-change: transform;
            transform: translateZ(0);
            filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.45));
            transition: transform 0.1s ease-out;
        }

        #board .square-55d63 img:hover {
            transform: scale(1.05) translateZ(0);
        }

        /* Pièce en cours de déplacement (drag) : 0 latence, 0 transition, calée sur le curseur */
        #board .piece-417db[style*="position: absolute"],
        #board>img,
        body>img.piece-417db {
            z-index: 10 !important;
            transition: none !important;
            pointer-events: none !important;
            will-change: top, left;
            transform: translateZ(0);
            filter: drop-shadow(2px 6px 12px rgba(0, 0, 0, 0.6)) !important;
        }

        /* Piece cards dans le customizer */
        .piece-card {
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .piece-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px -5px rgba(99, 102, 241, 0.25);
        }

        .piece-card .piece-preview-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
            padding: 6px 0;
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
        }

        /* Scrollbars & Scroll momentum */
        #coach-chat-history,
        #move-history-container,
        #board-editor-modal > div {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            scroll-behavior: smooth;
            scrollbar-width: thin;
            scrollbar-color: #475569 #0f172a;
        }

        /* Styles de la réserve de pièces de l'éditeur */
        .spare-pieces-7492f {
            display: flex;
            justify-content: center;
            gap: 4px;
            padding: 8px;
            background: rgba(15, 23, 42, 0.6);
            border-radius: 8px;
            margin: 6px 0;
            border: 1px solid rgba(51, 65, 85, 0.8);
        }
        
        .spare-pieces-7492f img {
            width: 100% !important;
            height: 100% !important;
            max-width: 32px;
            max-height: 32px;
            cursor: pointer;
            transition: transform 0.1s;
        }
        
        .spare-pieces-7492f img:hover {
            transform: scale(1.1);
        }

        /* Distinction visuelle Coup des Blancs vs Coup des Noirs dans le Chat Coach */
        .chat-move-white {
            border-left: 3px solid #f8fafc;
            padding-left: 0.5rem;
        }

        .chat-move-white .message-bubble {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.85) 100%);
            border-color: rgba(71, 85, 105, 0.65);
        }

        .chat-move-black {
            border-left: 3px solid #64748b;
            padding-left: 0.5rem;
            margin-left: 0.65rem;
            width: calc(100% - 0.65rem);
        }

        .chat-move-black .message-bubble {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 12, 22, 0.98) 100%);
            border-color: rgba(51, 65, 85, 0.75);
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: #1e293b;
        }

        ::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 3px;
        }
    </style>