/*
 * Copyright (c) 2026 Ajedrez de Silicio. Todos los derechos reservados.
 * SPDX-License-Identifier: LicenseRef-Ajedrez-de-Silicio-Proprietary
 * Backend visual propio de SilicioBoard. Todas las reglas estan encapsuladas.
 */
.silicio-board-native.silicio-board-host {
    position: relative;
    display: block;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.silicio-board-native > silicio-board-container,
.silicio-board-native .silicio-board-native__container {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.silicio-board-native silicio-board-surface.silicio-board-native__board {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
    cursor: default;
    background-color: var(--silicio-board-light, #EEE4D1);
    background-image: conic-gradient(
        var(--silicio-board-light, #EEE4D1) 25%,
        var(--silicio-board-dark, #1A8E78) 0 50%,
        var(--silicio-board-light, #EEE4D1) 0 75%,
        var(--silicio-board-dark, #1A8E78) 0
    );
    background-size: 25% 25%;
}

.silicio-board-native.manipulable silicio-board-surface.silicio-board-native__board {
    cursor: pointer;
}

.silicio-board-native silicio-board-surface > piece,
.silicio-board-native silicio-board-surface > square {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 12.5%;
    height: 12.5%;
    box-sizing: border-box;
    will-change: transform;
}

.silicio-board-native silicio-board-surface > square {
    z-index: 2;
    pointer-events: none;
}

.silicio-board-native silicio-board-surface > piece {
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.22, .78, .28, 1);
    cursor: grab;
}

.silicio-board-native silicio-board-surface > piece.dragging {
    z-index: 30;
    cursor: grabbing;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .38));
}

.silicio-board-native silicio-board-surface > square.move-dest::after {
    content: '';
    position: absolute;
    inset: 34%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-accent, #d4af37) 58%, transparent);
}

.silicio-board-native silicio-board-surface > square.move-dest.oc::after {
    inset: 8%;
    border: max(3px, calc(var(--silicio-board-size, 640px) / 150)) solid color-mix(in srgb, var(--theme-accent, #d4af37) 55%, transparent);
    background: transparent;
}

.silicio-board-native silicio-board-surface > square.selected {
    background: color-mix(in srgb, var(--theme-accent, #d4af37) 34%, transparent);
}

.silicio-board-native silicio-board-surface > square.last-move {
    background: color-mix(in srgb, var(--theme-accent, #d4af37) 24%, transparent);
}

.silicio-board-native silicio-board-surface > square.check {
    background: radial-gradient(circle, rgba(220, 38, 38, .78), rgba(220, 38, 38, .18) 58%, transparent 72%);
}

.silicio-board-native coords {
    pointer-events: none;
}

.silicio-board-native coords coord {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    /* El motor nativo genera las etiquetas en su orden visual definitivo. */
    order: initial !important;
}

.silicio-board-native > .silicio-board-shapes {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    overflow: visible;
}