/* ============================================================
   Ajedrez — tablero, piezas, panel lateral.
   El tablero ocupa todo el espacio posible: su lado es el mínimo
   entre el ancho de su columna y el alto de la ventana disponible.
   Temas de tablero: madera (por defecto), arena, pizarra.
   ============================================================ */
.chess-shell { max-width: 1180px; margin: 0 auto; }
.chess-layout { display: grid; grid-template-columns: minmax(0, calc(100dvh - 236px)) 300px; justify-content: center; gap: clamp(16px, 2.4vw, 36px); align-items: start; }
.chess-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.chess-main > * { width: 100%; }

.chess-status {
  margin: 0; padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600;
  background: var(--surface-2); color: var(--ink); white-space: nowrap;
}
.chess-status:empty { display: none; }
.chess-status.is-check { background: var(--danger-weak); color: var(--danger); }
.chess-status.is-thinking { color: var(--muted); }
.chess-status.is-thinking::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: currentColor; animation: think 1s ease-in-out infinite; vertical-align: middle; }
@keyframes think { 50% { opacity: .2; } }
.chess-status.is-over { background: var(--ink); color: var(--on-ink); }

/* ---------- jugadores ---------- */
.player-bar { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 4px; font-size: var(--t-sm); }
.pl-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #8C8377; flex: none; }
.pl-dot[data-color="w"] { background: #F7F1E4; }
.pl-dot[data-color="b"] { background: #27231F; }
.pl-name { font-weight: 600; }
.pl-captured { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; }
.pl-captured .cp { width: 20px; height: 20px; margin-right: -6px; }
.pl-captured .cp svg { width: 100%; height: 100%; }
.cp-diff { margin-left: 12px; font-family: var(--font-num); font-size: var(--t-xs); color: var(--muted); }
.chess-shell[data-turn="w"] .player-bar[data-color="w"] .pl-name,
.chess-shell[data-turn="b"] .player-bar[data-color="b"] .pl-name { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- tablero ---------- */
.chess-board {
  --light: #F0DDBF; --dark: #B78A5E; --last: rgba(212, 170, 60, .45); --sel-sq: rgba(42, 110, 116, .45);
  position: relative; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 18px 40px -18px rgba(60, 35, 10, .45), 0 0 0 1px rgba(60, 35, 10, .18);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.chess-board[data-board="arena"] { --light: #F3EBDD; --dark: #CDB38F; --last: rgba(200, 150, 50, .4); }
.chess-board[data-board="pizarra"] { --light: #DCE2E6; --dark: #7F95A3; --last: rgba(236, 196, 80, .5); --sel-sq: rgba(200, 48, 42, .35); }
.cb-squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.cb-sq {
  position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; background: var(--light);
  -webkit-tap-highlight-color: transparent;
}
.cb-sq.is-dark { background: var(--dark); }
.cb-sq.is-last::before, .cb-sq.is-selected::before, .cb-sq.is-check::before { content: ""; position: absolute; inset: 0; }
.cb-sq.is-last::before { background: var(--last); }
.cb-sq.is-selected::before { background: var(--sel-sq); }
.cb-sq.is-check::before { background: radial-gradient(circle, rgba(220, 40, 30, .85) 0%, rgba(220, 40, 30, .45) 45%, transparent 72%); }
.cb-sq.is-target::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; border-radius: 50%;
  transform: translate(-50%, -50%); background: rgba(30, 20, 10, .22); z-index: 2; pointer-events: none;
}
.cb-sq.is-capture::after { width: 88%; height: 88%; background: transparent; border: 5px solid rgba(30, 20, 10, .22); }
.cb-sq.is-hover { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7); }
.cb-sq:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent); z-index: 3; }
@media (hover: hover) { .cb-sq.is-target:hover::after { background: rgba(30, 20, 10, .38); } }
.cb-coord { position: absolute; font-family: var(--font-num); font-size: clamp(9px, 1.4vw, 12px); font-weight: 600; pointer-events: none; opacity: .8; }
.cb-rank { top: 3px; left: 4px; }
.cb-file { bottom: 2px; right: 4px; }
.cb-sq.is-light .cb-coord { color: var(--dark); }
.cb-sq.is-dark .cb-coord { color: var(--light); }
.no-coords .cb-coord { display: none; }

.cb-pieces { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.cb-piece {
  position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; padding: .4%;
  transition: transform .2s cubic-bezier(.3, .8, .3, 1), opacity .18s;
  will-change: transform;
}
.cb-piece svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 1.5px rgba(40, 20, 5, .28)); }
.cb-piece.is-dragging { transition: none; z-index: 10; }
.cb-piece.is-dragging svg { transform: scale(1.12); filter: drop-shadow(0 10px 8px rgba(40, 20, 5, .35)); }
.cb-piece.no-anim { transition: none; }
.cb-piece.is-captured { opacity: 0; }

/* ---------- panel lateral ---------- */
.chess-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(var(--header-h) + 12px); }
.chess-toolbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.chess-toolbar > .tool-btn, .chess-toolbar > .tool-group > .tool-btn { width: 100%; height: 54px; flex-direction: column; justify-content: center; gap: 3px; padding: 0 4px; font-size: .74rem; }
.chess-toolbar .tool-group > .tool-btn::after { display: none; }
.chess-toolbar .tool-more { margin-left: 0; }
.chess-toolbar .tool-btn .lbl { display: inline !important; }
.moves-card { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); padding: 12px 6px 8px 14px; }
.moves-h { margin: 0 0 6px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.chess-moves { list-style: none; margin: 0; padding: 0 8px 0 0; max-height: min(46vh, 420px); overflow-y: auto; font-family: var(--font-num); font-size: .9rem; scrollbar-width: thin; }
.chess-moves li { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 4px; padding: 4px 6px; border-radius: 6px; }
.chess-moves li:nth-child(odd) { background: var(--surface-2); }
.chess-moves li.is-last .cm-m:last-child { color: var(--accent-ink); font-weight: 600; }
.cm-n { color: var(--muted); }
.cm-empty { display: block !important; font-family: var(--font-ui); color: var(--muted); background: none !important; font-size: var(--t-sm); }

/* ---------- menú de estilo ---------- */
.style-pop { width: 300px; padding: 12px; }
.pop-h { margin: 4px 4px 8px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.style-sets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.style-opt, .board-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; font-size: .78rem; color: var(--ink-2);
}
.style-opt:hover, .board-opt:hover { border-color: var(--line-2); background: var(--surface-2); }
.style-opt[aria-pressed="true"], .board-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); color: var(--ink); font-weight: 600; }
.style-prev { display: flex; height: 38px; }
.style-prev svg { width: 34px; height: 38px; }
.board-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bt { width: 40px; height: 22px; border-radius: 4px; background: repeating-conic-gradient(var(--d) 0 25%, var(--l) 0 50%) 0 0 / 20px 22px; }
.bt-madera { --l: #F0DDBF; --d: #B78A5E; }
.bt-arena { --l: #F3EBDD; --d: #CDB38F; }
.bt-pizarra { --l: #DCE2E6; --d: #7F95A3; }
.pop-check { display: flex; align-items: center; gap: 8px; margin: 12px 4px 2px; font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; }

/* ---------- nueva partida / promoción / fin ---------- */
.new-card { max-width: 460px; text-align: left; }
.new-form fieldset { border: 0; margin: 0 0 16px; padding: 0; }
.new-form legend { margin-bottom: 8px; font-size: var(--t-sm); font-weight: 600; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg label { flex: 1 1 auto; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--surface); font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); cursor: pointer;
  transition: all var(--dur);
}
.seg span:hover { color: var(--ink); border-color: color-mix(in srgb, var(--line-2) 40%, var(--ink-2)); }
.seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.new-card .win-actions { justify-content: flex-end; }
.new-card .win-actions .btn { flex: 0 0 auto; }
.promo-options { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.promo-opt { width: 72px; height: 72px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.promo-opt:hover, .promo-opt:focus-visible { border-color: var(--accent); background: var(--accent-weak); }
.promo-opt svg { width: 100%; height: 100%; }
.end-result { font-size: 1.1rem; color: var(--muted); margin: 0 0 6px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .chess-layout { grid-template-columns: minmax(0, min(100%, calc(100dvh - 250px))); }
  .chess-side { position: static; }
  .chess-new-btn { display: none; }
  .moves-card { padding: 10px 12px; }
  .chess-moves { display: flex; gap: 2px 10px; max-height: none; overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }
  .chess-moves li { display: flex; gap: 6px; background: none !important; padding: 2px 0; }
}
@media (max-width: 640px) {
  .chess-layout { grid-template-columns: minmax(0, 1fr); }
  .chess-board { border-radius: 3px; }
  .play-chess .page { padding-left: 6px; padding-right: 6px; }
  .play-chess .play-topbar { padding: 0 4px; }
  .chess-status { padding: 6px 10px; font-size: var(--t-xs); }
  .style-pop { width: min(300px, calc(100vw - 24px)); }
}

/* ---------- página del juego (/juegos/ajedrez) ---------- */
.chess-hub-banner h1 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); color: #FFF9F0; line-height: 1; }
.chess-hub-banner .chess-banner-pieces { gap: clamp(4px, 1vw, 16px); }
.style-gallery { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.style-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; padding: 14px 16px; text-align: left;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; color: inherit;
  position: relative; transition: border-color var(--dur), box-shadow var(--dur);
}
.style-row:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); }
.style-row[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.style-row-pieces { display: flex; align-items: flex-end; gap: 0; padding: 8px 10px; border-radius: 10px; background: linear-gradient(90deg, #F0DDBF, #E6CDA6); overflow: hidden; }
.style-row-pieces svg { width: calc(100% / 12); max-width: 56px; height: auto; flex: 0 1 auto; }
.style-row-text { display: flex; flex-direction: column; gap: 2px; padding-right: 30px; }
.style-row-name { font-weight: 650; }
.style-row-desc { font-size: var(--t-sm); color: var(--muted); }
.style-row-check { position: absolute; right: 16px; bottom: 18px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); }
.style-row[aria-pressed="true"] .style-row-check { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.chess-quick fieldset { border: 0; margin: 0; padding: 0; }
.chess-quick legend { margin-bottom: 6px; font-size: var(--t-sm); font-weight: 600; }
.chess-quick .seg span { min-height: 38px; padding: 0 10px; }
.chess-rules-h { margin: 0 0 4px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }