/**
 * MOBILE-COORDS.CSS - Coordenadas Móviles del Editor
 * Ajedrez de Silicio - Editor de Posiciones
 * 
 * Estilos para coordenadas móviles del editor de posiciones.
 * Migrado desde edicion.html (bloque <style id="mobile-coords-fix">)
 */

/* Móvil y tablet vertical, siempre fuera del modo compacto de tablet horizontal. */
@media (max-width: 1180px) and (orientation: portrait),
       (max-width: 980px) and (max-height: 600px) and (orientation: landscape) {

  /* CONTENEDOR: Padding para coordenadas externas */
  body:not([data-tablet-fix]) .chess-container {
    padding-left: 24px !important;   /* Espacio para coordenadas verticales (1-8) */
    padding-bottom: 24px !important; /* Espacio para coordenadas horizontales (a-h) */
    padding-right: 8px !important;   /* Pequeño margen derecho */
    padding-top: 8px !important;     /* Pequeño margen superior */
    position: relative !important;   /* Para posicionamiento absoluto de coordenadas */
  }

  /* === FILES (a–h) — POSICIONAMIENTO EXTERNO === */
  body:not([data-tablet-fix]) .silicio-board-host coords.files {
    position: absolute !important;
    bottom: -20px !important;        /* Debajo del tablero */
    left: 0 !important;
    right: 0 !important;
    height: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    align-items: center !important;
    pointer-events: none !important;
    z-index: 10 !important;
    transform: none !important;
  }

  body:not([data-tablet-fix]) .silicio-board-host coords.files coord {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #D4AF37 !important;        /* Dorado brillante */
    background: none !important;      /* Sin fondo */
    border-radius: 0 !important;      /* Sin bordes redondeados */
    padding: 0 !important;            /* Sin padding */
    min-width: auto !important;
    text-align: center !important;
    line-height: 1 !important;
    transform: none !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important; /* Sombra negra para contraste */
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* === RANKS (1–8) — POSICIONAMIENTO EXTERNO === */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks {
    position: absolute !important;
    left: -20px !important;          /* A la izquierda del tablero */
    top: 0 !important;
    bottom: 0 !important;
    width: 16px !important;
    display: grid !important;
    grid-template-rows: repeat(8, 1fr) !important;
    align-items: center !important;
    pointer-events: none !important;
    z-index: 10 !important;
    transform: none !important;
  }

  body:not([data-tablet-fix]) .silicio-board-host coords.ranks coord {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #D4AF37 !important;        /* Dorado brillante */
    background: none !important;      /* Sin fondo */
    border-radius: 0 !important;      /* Sin bordes redondeados */
    padding: 0 !important;            /* Sin padding */
    min-width: auto !important;
    text-align: center !important;
    line-height: 1 !important;
    transform: none !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important; /* Sombra negra para contraste */
    letter-spacing: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* INVERTIR ORDEN VISUAL DE COORDENADAS RANKS - ORIENTACIÓN WHITE */
  /* DOM: 8,7,6,5,4,3,2,1 → Visual: 1,2,3,4,5,6,7,8 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks coord:nth-child(1) { order: 8; } /* 8 → posición 8 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks coord:nth-child(2) { order: 7; } /* 7 → posición 7 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks coord:nth-child(3) { order: 6; } /* 6 → posición 6 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks coord:nth-child(4) { order: 5; } /* 5 → posición 5 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks coord:nth-child(5) { order: 4; } /* 4 → posición 4 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks coord:nth-child(6) { order: 3; } /* 3 → posición 3 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks coord:nth-child(7) { order: 2; } /* 2 → posición 2 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks coord:nth-child(8) { order: 1; } /* 1 → posición 1 */

  /* INVERTIR ORDEN VISUAL DE COORDENADAS FILES - ORIENTACIÓN BLACK */
  /* DOM: a,b,c,d,e,f,g,h → Visual: h,g,f,e,d,c,b,a */
  body:not([data-tablet-fix]) .silicio-board-host coords.files.black coord:nth-child(1) { order: 8; } /* a → posición 8 (derecha) */
  body:not([data-tablet-fix]) .silicio-board-host coords.files.black coord:nth-child(2) { order: 7; } /* b → posición 7 */
  body:not([data-tablet-fix]) .silicio-board-host coords.files.black coord:nth-child(3) { order: 6; } /* c → posición 6 */
  body:not([data-tablet-fix]) .silicio-board-host coords.files.black coord:nth-child(4) { order: 5; } /* d → posición 5 */
  body:not([data-tablet-fix]) .silicio-board-host coords.files.black coord:nth-child(5) { order: 4; } /* e → posición 4 */
  body:not([data-tablet-fix]) .silicio-board-host coords.files.black coord:nth-child(6) { order: 3; } /* f → posición 3 */
  body:not([data-tablet-fix]) .silicio-board-host coords.files.black coord:nth-child(7) { order: 2; } /* g → posición 2 */
  body:not([data-tablet-fix]) .silicio-board-host coords.files.black coord:nth-child(8) { order: 1; } /* h → posición 1 (izquierda) */

  /* INVERTIR ORDEN VISUAL DE COORDENADAS RANKS - ORIENTACIÓN BLACK */
  /* DOM: 8,7,6,5,4,3,2,1 → Visual: 8,7,6,5,4,3,2,1 (orden natural para perspectiva negra) */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks.black coord:nth-child(1) { order: 1; } /* 8 → posición 1 (arriba) */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks.black coord:nth-child(2) { order: 2; } /* 7 → posición 2 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks.black coord:nth-child(3) { order: 3; } /* 6 → posición 3 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks.black coord:nth-child(4) { order: 4; } /* 5 → posición 4 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks.black coord:nth-child(5) { order: 5; } /* 4 → posición 5 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks.black coord:nth-child(6) { order: 6; } /* 3 → posición 6 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks.black coord:nth-child(7) { order: 7; } /* 2 → posición 7 */
  body:not([data-tablet-fix]) .silicio-board-host coords.ranks.black coord:nth-child(8) { order: 8; } /* 1 → posición 8 (abajo) */

  /* El host del tablero no debe recortar las coords */
  body:not([data-tablet-fix]) .board,
  body:not([data-tablet-fix]) #board,
  body:not([data-tablet-fix]) silicio-board-surface {
    overflow: visible !important;
  }

  /* Pantallas muy estrechas: ajustar tamaño de coordenadas */
  @media (max-width: 420px) {
    body:not([data-tablet-fix]) .silicio-board-host coords.files coord,
    body:not([data-tablet-fix]) .silicio-board-host coords.ranks coord {
      font-size: 9px !important;
      padding: 1px 3px !important;
      min-width: 10px !important;
    }
  }
}