:root {
    --grid: 4; /* 4x4 */
    /* Dejo ~100px de margen alrededor, nunca menor de 280px, máx 820px */
    --board-size: clamp(280px, min(100dvh - 50px, 100vw - 50px), 820px);
    --bench-count: 12; /* se ajusta por JS */
}
            
/* Evita overscroll y recarga por gesto al arrastrar */
html, body { height: 100%; overscroll-behavior: none; }
.game-wrap, .play-area, #board, #bench { touch-action: none; }
body.dragging { overflow: hidden; } /* se activa mientras arrastras */
            
html, body, .game-wrap, .play-area, #board, #bench, .board, .square, .piece, .piece img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
            
body { background:#000; color:#e9eef5; }
            
.logo {position:fixed;top:20px;left:25px;line-height:.8;font-size:1.35rem;}
.logo span {font-size:0.875rem;}
.instrucciones {position:fixed;top:70px;left:25px;line-height:1;font-size:0.875rem; color:#3e9a6b;max-width:250px;}
#btnClean {position:fixed;bottom:20px;right:25px;}
            
.game-wrap { min-height:100dvh; display:flex; align-items:center; justify-content:center; /*padding:100px;*/ }
.play-area { display:flex; flex-direction:column; align-items:center; gap:12px; }

@media (hover: hover) and (pointer: fine) {
#selLevel.form-select:hover {
    background-color: rgba(var(--outline-rgb), .08);
}
}
#selLevel.form-select:focus {
border-color: var(--outline-color);
box-shadow: 0 0 0 .2rem rgba(var(--outline-rgb), .25);
outline: 0;
}

/* BANQUILLO */
#bench { width:var(--board-size); display:flex; gap:0; justify-content:left; align-items:left; overflow:hidden;}

/* PIEZAS: 
tamaño en tablero = 1 casilla; 
en banquillo = ancho tablero dividido por el  nº piezas */
.piece { 
width: calc(var(--board-size) / var(--grid)); height: calc(var(--board-size) / var(--grid)); display:flex; align-items:center; justify-content:center; user-select:none; cursor:grab; 
background:transparent; color:#666; font: 900 48px/1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; 
}
            
/* Imagen de pieza cuando está en tablero */
.piece img {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
-webkit-user-drag: none;
user-drag: none;
touch-action: none;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.on-board {}
.piece:active { cursor:grabbing; }
.piece.on-bench { width: calc(var(--board-size) / var(--bench-count)); height: calc(var(--board-size) / var(--bench-count)); }

/* TABLERO */
.board { width:var(--board-size); height:var(--board-size); display:grid; grid-template-columns: repeat(var(--grid), 1fr); grid-template-rows: repeat(var(--grid), 1fr); position: relative; }
.square { display:flex; align-items:center; justify-content:center; }
.square.light { background:#f3f3f3; }
.square.dark { background:#3e9a6b; }
.square.drop-highlight { }

.drag-ghost { position:fixed; left:0; top:0; z-index:9999; pointer-events:none; opacity:.95; }
            
.win-overlay {
    position: absolute;
    inset: 0;
    display: none;                 /* oculta por defecto */
    /*align-items: center;
    justify-content: center;*/
    z-index: 50;                   /* por encima de las casillas/piezas */
    pointer-events: none;          /* que no bloquee toques/clicks */
}
.win-overlay.show { display: flex; }
.win-overlay img {
    width: 100%;
    height: 100%;
    user-select: none;
    pointer-events: none;
}
            
/* efectos de hover al mover ficha sobre casilla */
.square.drop-highlight { filter: brightness(0.3); transition: filter 0.1s ease; }
.square.drop-legal { background:orange; }
            
/* Select con look de btn-outline-secondary */
#selLevel.form-select {
    --outline-color: var(--bs-light);
    --outline-rgb: var(--bs-light-rgb, 255,255,255);

    appearance: none; -webkit-appearance: none;
    background-color: transparent;
    color: var(--outline-color);
    border: 1px solid var(--outline-color);
    border-radius: .375rem;          /* igual a .btn-sm (rounded) */
    padding: .25rem 1.75rem .25rem .5rem; /* similar a btn-sm + espacio para flecha */
    line-height: 1.5;
    width: auto;

    /* Flecha usando SVG con el mismo color */
    /*background-image: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%236c757d">\<path d="M3.3 5.3a1 1 0 0 1 1.4 0L8 8.6l3.3-3.3a1 1 0 1 1 1.4 1.4L8.7 10.7a1 1 0 0 1-1.4 0L3.3 6.7a1 1 0 0 1 0-1.4z"/>\</svg>');*/
    background-image: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%23fff">\<path d="M3.3 5.3a1 1 0 0 1 1.4 0L8 8.6l3.3-3.3a1 1 0 1 1 1.4 1.4L8.7 10.7a1 1 0 0 1-1.4 0L3.3 6.7a1 1 0 0 1 0-1.4z"/>\</svg>');
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: .8rem;
}

@media (max-width:768px){ 
    .piece{ font-size:36px; border-width:3px; } 
    .on-board {font-size: 4rem;}
}
            
/* Mostrar foco SOLO cuando viene de teclado (Tab). El click/touch no lo deja “pegado” */
.btn:focus { outline: none !important; box-shadow: none !important; }

/* Cuando sí es foco visible (teclado), muestra el aro; ajusta color si no usas outline-light */
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(255,255,255,.35) !important; }

/* Mantén el aspecto outline en foco (sin rellenar) para btn-outline-light */
.btn-outline-light:focus,
.btn-outline-light:focus-visible {
    color: #fff !important;
    background-color: transparent !important;
    border-color: #fff !important;
}

/* Evita combinaciones “active+focus” que dejen estilos residuales */
.btn-outline-light:active,
.btn-outline-light:active:focus,
.btn-outline-light:active:focus-visible {
    box-shadow: none !important;
    color: #fff !important;
    background-color: transparent !important;
    border-color: #fff !important;
}