/**
 * DRAWING.CSS - Estilos para Sistema de Pintado Custom
 * Ajedrez de Silicio - Chessground + Chessops
 */

/* ===== MARCAS DE CASILLAS - MARCOS CUADRADOS ===== */
square.highlight-gold {
    box-shadow: inset 0 0 0 4px #D4AF37 !important;
    z-index: 10 !important;
}

square.highlight-red {
    box-shadow: inset 0 0 0 4px #DC143C !important;
    z-index: 10 !important;
}

square.highlight-blue {
    box-shadow: inset 0 0 0 4px #4169E1 !important;
    z-index: 10 !important;
}

square.highlight-green {
    box-shadow: inset 0 0 0 4px #00FF00 !important;
    z-index: 10 !important;
}

/* ===== ALTERNATIVA: CÍRCULOS (comentado por defecto) ===== */
/*
square.highlight-gold::after,
square.highlight-red::after,
square.highlight-blue::after,
square.highlight-green::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    border-radius: 50%;
    pointer-events: none;
}

square.highlight-gold::after {
    border: 4px solid #D4AF37;
}

square.highlight-red::after {
    border: 4px solid #DC143C;
}

square.highlight-blue::after {
    border: 4px solid #4169E1;
}

square.highlight-green::after {
    border: 4px solid #00FF00;
}
*/

/* ===== CONTENEDOR SVG PARA FLECHAS ===== */
.drawing-svg-container {
    pointer-events: none;
    overflow: visible;
}

/* ===== FLECHAS SVG ===== */
.drawing-svg-container g.arrow {
    pointer-events: none;
}

.drawing-svg-container g.arrow line {
    stroke-linecap: round;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

.drawing-svg-container g.arrow path {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

/* ===== ANIMACIONES SUAVES ===== */
square[class*="highlight"] {
    transition: box-shadow 0.2s ease;
}

/* ===== HOVER EN CASILLAS MARCADAS ===== */
square[class*="highlight"]:hover {
    opacity: 0.9;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Ajustar grosor de marcos en móviles */
    square[class*="highlight"] {
        box-shadow: inset 0 0 0 3px !important;
    }
}

/* ===== MÓVIL HORIZONTAL - FLECHAS MÁS DELGADAS ===== */
@media (max-width: 768px) and (orientation: landscape) {
    /* Reducir grosor de flechas en móvil horizontal */
    .drawing-svg-container g.arrow line {
        stroke-width: 3.5 !important;
    }
    
    /* Reducir tamaño de sombra para flechas más delgadas */
    .drawing-svg-container g.arrow line,
    .drawing-svg-container g.arrow path {
        filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
    }
}