/* ===========================
   Chess App – Responsive + Drawer móvil (≤900px)
   =========================== */

/* Reset base */
/* --- Base / diseño responsivo --- */
:root{
  --gutter: 12px;
  --controls-max: 520px;  /* ya lo usas en tu grid */
  --board-min: 280px;
  /*--board-max: calc(min(50vmin, 50vh));              /* puedes ajustarlo */
  --ui-vertical: 350px; /* ajusta: espacio que ocupa tu UI arriba/abajo */
  /* menor entre (ancho) y (alto - UI) */
  --board-max: min(90svw, calc(90svh - var(--ui-vertical)));
  --board-size: clamp(var(--board-min), 92vw, var(--board-max));
  
  --gap: 12px;
  --gap-sm: 8px;
  --gap-lg: 16px;
  --radius: 10px;
  --muted: #6b7280;
  --accent: #1d4ed8;
  --accent-weak: rgba(30,144,255,.6);
  --ring: rgba(255,213,0,.95);
  --ring-soft: rgba(255,213,0,.6);
  --danger: rgba(220,68,68,.9);
  --surface: #f8fafc;
  --border: #e5e7eb;

}



html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: #111;
}

/* Menu Navegacion */
.app-nav{
  display:flex; gap:10px; align-items:center;
  padding:8px 12px; margin:6px 0 12px;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.app-nav .nav-link{
  padding:6px 10px; border:1px solid #d1d5db; border-radius:8px;
  text-decoration:none; color:#111827; background:#fafafa;
}
.app-nav .nav-link:hover{ background:#f3f4f6; }
.app-nav .nav-link[aria-current="page"]{
  border-color:#2563eb; background:#2563eb11; font-weight:600;
}


.nav-right {
  margin-left: auto;          /* <- clave */
  display: flex;
  align-items: center;
  gap: 8px;
}


.menu { position: relative; font-family: system-ui, sans-serif; z-index: 1000; }
.menu-toggle {
padding: .5rem .75rem; border: 1px solid #ccc; background: #fff; cursor: pointer; border-radius: .5rem;
}
.menu-list {
position: absolute; margin-top: .25rem; list-style: none; padding: .5rem 0; 
border: 1px solid #ddd; border-radius: .5rem; background: #fff; width: 220px;
box-shadow: 0 8px 20px rgba(0,0,0,.08); z-index: 1001;
}
.menu-list li { width: 100%; }
.menu-list a {
display: block; padding: .5rem .75rem; text-decoration: none; color: #222;
}
.menu-list a:hover { background: #f5f5f5; }



.page{
  /* en móvil: pila vertical (o tu aside) */
  padding-top:8px;
  display: grid;
  gap: var(--gutter);
  justify-content: center;
}


/* Contenedor principal centrado en columna */
.principal{
  margin-top:0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gutter);
  padding: var(--gutter);
}

/* --- Bloque del tablero --- */
.board-wrap{
  width: var(--board-size);
}

/* El div del tablero ocupa todo el ancho y mantiene forma cuadrada */
#board{
  width: 100%;
  max-width: var(--board-max);
  aspect-ratio: 1 / 1;   /* garantiza cuadrado sin JS */
  /* si tu librería fija la altura, puedes retirar aspect-ratio */
}


/* Toolbar en grid: botones se reparten y escalan al ancho disponible */
#card-toolbar {
  width: calc(var(--board-size) - 20px);
}
.toolbar{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gap-lg);
}

/* Botones fluidos y accesibles */
.toolbar button{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d9d9df;
  border-radius: 12px;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform .04s ease, background-color .15s ease, border-color .15s ease;
}

.toolbar button:hover{ transform: translateY(-1px); }
.toolbar button:active{ transform: translateY(0); }

.toolbar button:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.toolbar .primary{
  background: #2b74ff;
  color: #fff;
  border-color: #2b6ae0;
}
.toolbar .primary:disabled{
  background: #a7c0ff;
  border-color: #a7b7ff;
}

/* --- Panel de movimientos: mismo ancho que el tablero --- */
#movesPanel{
  width: var(--board-size);
  /* conservamos tu alto máximo y estilo inline; 
     aquí podrías quitar el style="" del HTML y moverlo abajo si prefieres: */
  /* max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  line-height: 1.6; */
}

#movesPanel .num { color:#666; margin-right:4px; }
#movesPanel .mv  { display:inline-block; margin:0 6px 6px 0; padding:2px 6px; border:1px solid #ccc; border-radius:6px; background:#fff; cursor:pointer; }
#movesPanel .mv:hover { background:#f3f4f6; }
#movesPanel .mv.current { background:#2563eb11; border-color:#2563eb; }

#movesPanel .cm{
  margin-top: 4px;
  padding-left: 6px;
  border-left: 2px solid #e5e7eb;
  color: #6b7280;            /* gris suave */
  font-size: 0.9em;
  line-height: 1.35;
  white-space: normal;       /* permite partir líneas largas */
  word-break: break-word;    /* evita desbordes */
}

/* ====== Estilos específicos del tablero/piezas/items ====== */

/* Ocultar piezas (tu toggle) */
#board.hide-pieces [class^="piece-"] { display: none !important; }

/* Casillas como ancla para pseudo/nodos */
#board [data-square-coord],
#board [data-square] { position: relative; }

/* Piezas: ABSOLUTAS siempre y por encima de los dots */
#board [class^="piece-"],
#board [class*=" piece-"] {
  position: absolute !important;
  z-index: 10;
}

/* Círculos nativos (items) – céntralos y dales color/capa */
#board [class^="item-"][class*=" circle-"],
#board [class*=" item-"][class*=" circle-"] {
  position: absolute;
  width: 28%;
  height: 28%;
  left: 36%;
  top: 36%;
  border-radius: 50%;
  background: var(--accent-weak);
  pointer-events: none;
  z-index: 6; /* por debajo de piezas */
}

/* Resaltado de casilla seleccionada: anillo por encima de pieza */
#board [data-square-coord].selected::after,
#board [data-square].selected::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 3px solid var(--ring);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--ring-soft);
  background: transparent !important;
  pointer-events: none;
  z-index: 11;
}

/* (Si usas anillo de captura con clase propia) */
#board .cb-cap {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 3px solid var(--danger);
  background: transparent;
  pointer-events: none;
  z-index: 12;
}


.grid-2 {
  display: grid;
  gap: var(--gap);
  /*grid-template-columns: 1fr 1fr;*/
}

.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* separaciones entre controles */
  row-gap: 16px;        /* espacio vertical entre filas */
  column-gap: 24px;     /* espacio horizontal entre columnas */
  /* o simplemente: gap: 16px 24px; */
}

/* separaciones internas dentro de cada campo */
.form-grid > label{
  display: flex;
  flex-direction: column;
  gap: 8px;             /* espacio entre el título y el input/select */
  min-width: 0;
}

/* Controles de formulario */
label { display: inline-flex; gap: 6px; align-items: center; }
select, button, input[type="checkbox"] {
  font: inherit;
}
select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
button {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
}
button:disabled { opacity: .6; cursor: not-allowed; }
button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;         /* opcional, para aire */
  border-radius: 6px;        /* opcional */
  overflow: hidden;
  text-overflow: ellipsis;   /* añade "…" si no cabe */
}



/* --- Detalles visuales opcionales --- */
button[data-i18n]{ text-transform: none; }


/* ====== Pestaña del drawer (oculta en escritorio) ====== */
#btnConf{ display:none; }







/* ====== DESKTOP / ancho ≥ 900px: tablero izq + controles dcha ====== */
@media (min-width: 900px){

	
  .page{
    display: grid;
    grid-template-columns: var(--board-size) minmax(320px, 520px); /* 2ª col fija en rango */
    gap: var(--gutter);
    justify-content: center;   /* <- centra el conjunto de columnas */
    align-items: start;
  }

  /* tablero siempre en la columna 1 */
  .principal{ grid-column: 1; }

  /* manda los controles a la columna 2 y deja que ocupen todo su ancho */
  .controls{
    grid-column: 2;
    width: 100%;
    max-width: 520px;              /* ajusta si quieres más/menos ancho */
	
	padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
    overflow: auto;
	
	gap: 12px;              /* opcional: separación entre items */
	display: flex;          /* << activar flex */
	flex-direction: column; /* los items uno debajo del otro */
	/* Clave: que los hijos se ESTIREN, no centrarlos por su ancho */
	align-items: stretch;       /* antes: center */
	justify-content: flex-start;/* evita “centrado vertical” conflictivo */
		
  }
  
  /* Por si acaso, fuerzo que los hijos llenen el ancho */
	.controls > *{
	  width: 100%;
	  min-width: 0;               /* evita desbordes por contenido largo */
	  box-sizing: border-box;
	}
  
  /* El div del tablero ocupa todo el ancho y mantiene forma cuadrada */
  #board{
    width: 100%;
    aspect-ratio: 1 / 1;   /* garantiza cuadrado sin JS */
    /* si tu librería fija la altura, puedes retirar aspect-ratio */
  }

}


.help-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  z-index: 9999;
}

.help-modal[hidden] {
  display: none;
}

.help-modal__content {
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  color: #222;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  position: relative;
}

.help-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}



/* ====== MODO MÓVIL (≤900px): tablero full + drawer ====== */
@media (max-width: 900px){

 
  /* Drawer a pantalla completa en móvil */
  aside.controls{
    position: fixed;
    top: 100px; right: 0;
    height: var(--vh);
    width: 97dvw;             /* ocupa TODO el ancho del móvil */
	height: 88dvh;             /* ocupa TODO el ancho del móvil */
    max-width: none;
    border-radius: 0;
    border-left: none;
    transform: translateX(100%);
    transition: transform .24s ease;
    z-index: 1002;
    box-shadow: 0 6px 28px rgba(0,0,0,.18);
    background: #fff;
    padding: 12px;
	
	padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
    overflow: auto;
	
	
	display: flex;          /* << activar flex */
	flex-direction: column; /* los items uno debajo del otro */
	/* Clave: que los hijos se ESTIREN, no centrarlos por su ancho */
	align-items: stretch;       /* antes: center */
	justify-content: flex-start;/* evita “centrado vertical” conflictivo */
	gap: 12px;              /* opcional: separación entre items */
  }


  #btnConf{ display:inline-block;; }

  /* Backdrop propio del drawer (si lo añades en HTML) 
  .drawer-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.28);
    opacity: 0; pointer-events: none;
    transition: opacity .24s ease;
    z-index: 1001;
  }*/
  body.drawer-open .drawer-backdrop{
    opacity: 1; pointer-events: auto;
  }

  /* Estado abierto del drawer */
  body.drawer-open aside.controls{ transform: translateX(0); }
}

/* ===== Pantalla negra existente (no usada como backdrop del drawer) ===== */
#blackout{
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 999999;
  cursor: none;
  touch-action: none;
}

/* Footer SensoryChess copyright*/
.site-footer{
  padding: 18px 16px;
  text-align: center;
  color: #666;
  border-top: 1px solid #e6e6e6;
  margin-top: 18px;
}
.site-footer small{ font-size: .9rem; }

/* ===== Texto donde se Muestra el Texto Reconocido por Voz ===== */
.voice-hud{
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  color: #444;
  background: #fafafa;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.95rem;
}

.voice-hud__icon{ opacity: .8; }
.voice-hud__text{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.voice-hud[hidden]{
  display: none !important;
}

/* logo + nombre */
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.brand__name{
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Si la pantalla es estrecha, ocultamos el nombre */
@media (max-width: 520px){
  .brand__name{ display: none; }
}