/* Estilos de tablero y fichas */
.board {
  border: 14px solid var(--frame);
  box-shadow: var(--board-shadow);
  background: var(--frame);
}
.sq.l { background: var(--light); }
.sq.d { background: var(--dark); }
.piece {
  width: 74%; height: 74%; margin: 13%;
  border-radius: 50%;
  position: relative;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.35),
    inset 0 -3px 5px rgba(0,0,0,.28),
    var(--piece-shadow);
}
.piece.w {
  background-color: var(--p-a);
  background-image:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 70% 78%, rgba(0,0,0,.18), transparent 50%);
}
.piece.b {
  background-color: var(--p-b);
  background-image:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.22), transparent 40%),
    radial-gradient(circle at 70% 78%, rgba(0,0,0,.35), transparent 52%);
}
.piece::after,
.piece::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 16%;
  border: 2px solid var(--p-ring);
  opacity: .55;
  pointer-events: none;
}
.piece::after { inset: 28%; opacity: .35; }
.piece.king .crown {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.05rem; color: var(--ring); z-index: 2; text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* Mesa de club: tablero tallado, una sola textura en el marco. */
html[data-style="mesa"] .board {
  border-width: 16px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 10%, transparent 90%, rgba(0,0,0,.22)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 8px),
    var(--frame);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.1),
    inset 0 0 0 5px rgba(0,0,0,.28),
    0 18px 40px rgba(0,0,0,.5);
}
html[data-style="mesa"] .sq.l {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
html[data-style="mesa"] .sq.d {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.22);
}
html[data-style="mesa"] .piece {
  box-shadow:
    inset 0 3px 4px rgba(255,255,255,.4),
    inset 0 -4px 6px rgba(0,0,0,.32),
    0 3px 2px rgba(0,0,0,.28),
    0 7px 10px rgba(0,0,0,.22);
}

/* ===== TRADICIONAL ===== */

/* ===== CARICATURA ===== */
html[data-style="caricatura"] .board {
  border-width: 10px;
  border-radius: 18px;
}
html[data-style="caricatura"] .sq { }
html[data-style="caricatura"] .piece {
  border: 4px solid var(--ink);
  box-shadow: 3px 4px 0 var(--ink), inset 0 -6px 0 rgba(0,0,0,.12);
}
html[data-style="caricatura"] .piece::before {
  border-width: 3px;
  opacity: .9;
}
html[data-style="caricatura"] .piece::after { display: none; }

/* ===== CASINO ===== */
html[data-style="casino"] body { background:
  radial-gradient(1200px 600px at 50% -10%, rgba(255,215,120,.08), transparent 50%),
  var(--bg);
}
html[data-style="casino"] .board {
  border-width: 18px;
  border-radius: 6px;
  box-shadow:
    0 0 0 2px var(--gold),
    0 18px 40px rgba(0,0,0,.55);
}
html[data-style="casino"] .sq.d {
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 8px 8px;
}
html[data-style="casino"] .piece {
  box-shadow:
    inset 0 0 0 6px var(--chip-edge),
    inset 0 0 0 8px rgba(255,255,255,.2),
    0 4px 8px rgba(0,0,0,.4);
}
html[data-style="casino"] .piece::before {
  inset: 22%;
  border: 2px dashed rgba(255,255,255,.45);
  opacity: 1;
}
html[data-style="casino"] .piece::after {
  inset: 34%;
  border: 2px solid rgba(255,255,255,.25);
}

/* ===== VEGAS ===== */
/* Más dramático que "Casino": marco con brillo de neón, tapete oscuro y
   fichas con reborde luminoso. Pensado para combinar con las paletas
   Oro y Negro o Neón, aunque funciona con cualquiera. */

/* ===== NOGAL ===== */
/* A diferencia de "Tradicional" (veta recta y sutil), acá el grano es
   curvo y bien marcado — como un tablero tallado en una sola pieza de
   madera — y el marco tiene un bisel triple, tipo moldura maciza. Los
   colores siguen saliendo de la paleta elegida, igual que en los demás
   estilos: esto sólo cambia la textura, no la combinación de colores. */

/* ===== HIPERREALISTA ===== */
/* El más "físico" de todos: marco con bisel triple y veta de madera en
   diagonal (no recta como en Nogal), casillas con dos capas de veta curva
   superpuestas para que no se note el patrón repetido, y fichas con brillo
   especular arriba-izquierda + sombra de contacto abajo, como una pieza
   real de madera lacada apoyada sobre la mesa. Los colores siguen viniendo
   de la paleta elegida; esto sólo cambia la textura y el volumen. */
/* ===========================================================================
   ESTILO "REALISTA"  (reemplaza al viejo "hiperrealista")
   ---------------------------------------------------------------------------
   Por qué se rehízo: el hiperrealista aplicaba TRES degradados radiales
   repetidos a CADA casilla. En un tablero de 12x12 son 144 elementos con
   textura compleja que el teléfono tiene que recalcular en cada repintado, y
   por eso se trababa.

   La regla que sigue este tema: la textura cara va UNA sola vez, sobre el
   tablero entero (1 elemento), y las casillas llevan color plano con una
   sombra interior barata. El resultado se ve igual de sólido y cuesta una
   fracción. Las fichas sí llevan degradados, pero son pocas (24 a 60) y
   chicas, y ahí es donde de verdad se nota el volumen.
   =========================================================================== */
/* Casillas: color plano + un bisel muy suave. Nada de texturas repetidas. */
/* Fichas: acá sí vale el detalle. Luz arriba a la izquierda, sombra propia
   abajo a la derecha, canto biselado y una sombra proyectada que las despega
   del tablero. Da el aspecto de una ficha de baquelita real. */
/* Los dos anillos concéntricos que tienen las fichas de damas de verdad. */

/* ===========================================================================
   ESTILO "MÁRMOL"
   Fichas de piedra pulida sobre tablero de mármol. Misma regla de
   rendimiento: la veta va en el tablero, no en cada casilla.
   =========================================================================== */

/* ===========================================================================
   ESTILO "MINIMAL"
   Plano, sin sombras ni texturas. Es el más rápido de todos y el más claro
   de leer: útil en teléfonos viejos y con los tableros de 12x12.
   =========================================================================== */
html[data-style="minimal"] .board {
  border-width: 8px;
  border-radius: 6px;
  background-color: var(--frame);
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
html[data-style="minimal"] .sq.l,
html[data-style="minimal"] .sq.d { background-image: none; box-shadow: none; }
html[data-style="minimal"] .piece {
  background-image: none;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.18);
}
html[data-style="minimal"] .piece::before { inset: 22%; border: 2px solid rgba(255,255,255,.22); opacity: .6; }
html[data-style="minimal"] .piece::after { display: none; }
html[data-style="minimal"] .piece.king .crown { color: var(--gold); text-shadow: none; }

/* ===== PALETAS ===== */
html[data-palette="madera"] {
  --bg: #1c1612; --panel: #2a221c; --panel2: #3a2e24; --text: #f4eadb; --muted: #c2b09a;
  --accent: #c4a574; --online: #7eb0d6;
  --light: #e6d3a8; --dark: #8a5a32; --frame: #6b4423;
  --p-a: #f3ece0; --p-b: #b42323; --p-ring: rgba(0,0,0,.25);
  --ring: #d4af37; --ink: #3a2414; --gold: #d4af37; --chip-edge: #7a1b1b;
  --board-shadow: 0 16px 36px rgba(0,0,0,.45);
  --piece-shadow: 0 4px 6px rgba(0,0,0,.3);
  --sel: #f6e27a;
}
html[data-palette="marino"] {
  --bg: #0b1520; --panel: #12202e; --panel2: #1b3144; --text: #e8f1f8; --muted: #8eabc0;
  --accent: #3d7ea6; --online: #6cb6ff;
  --light: #d7e6f2; --dark: #1e4a6d; --frame: #0f2a40;
  --p-a: #f4f7fb; --p-b: #14324a; --p-ring: rgba(20,60,90,.35);
  --ring: #e2c36a; --ink: #0c2436; --gold: #c9a44a; --chip-edge: #0d2a40;
  --board-shadow: 0 16px 36px rgba(0,0,0,.5);
  --piece-shadow: 0 4px 6px rgba(0,0,0,.35);
  --sel: #8fd3ff;
}
html[data-palette="verde"] {
  --bg: #0e1712; --panel: #16231b; --panel2: #20342a; --text: #e8f3ea; --muted: #95b39d;
  --accent: #3e8f6b; --online: #6ad0a0;
  --light: #dcead8; --dark: #2f6a4a; --frame: #1b3d2c;
  --p-a: #f3f7ef; --p-b: #163528; --p-ring: rgba(20,60,40,.35);
  --ring: #e0c36a; --ink: #123024; --gold: #c9b06a; --chip-edge: #0f2a1c;
  --board-shadow: 0 16px 36px rgba(0,0,0,.45);
  --piece-shadow: 0 4px 6px rgba(0,0,0,.3);
  --sel: #b6f0c8;
}
html[data-palette="bn"] {
  --bg: #111111; --panel: #1b1b1b; --panel2: #2a2a2a; --text: #f2f2f2; --muted: #9a9a9a;
  --accent: #d0d0d0; --online: #8ab4ff;
  --light: #e8e8e8; --dark: #2c2c2c; --frame: #141414;
  --p-a: #fafafa; --p-b: #161616; --p-ring: rgba(0,0,0,.3);
  --ring: #cfcfcf; --ink: #111; --gold: #c0c0c0; --chip-edge: #000;
  --board-shadow: 0 16px 36px rgba(0,0,0,.55);
  --piece-shadow: 0 4px 6px rgba(0,0,0,.4);
  --sel: #ffffff;
}
html[data-palette="rojo"] {
  --bg: #1a0d0d; --panel: #2a1414; --panel2: #3b1c1c; --text: #f8eaea; --muted: #c49a9a;
  --accent: #b33a3a; --online: #e07a7a;
  --light: #f0d6c8; --dark: #7a1f1f; --frame: #4a1212;
  --p-a: #f6efe6; --p-b: #6b1010; --p-ring: rgba(80,10,10,.35);
  --ring: #e0b04a; --ink: #3a1010; --gold: #d4af37; --chip-edge: #4a0c0c;
  --board-shadow: 0 16px 36px rgba(0,0,0,.5);
  --piece-shadow: 0 4px 6px rgba(0,0,0,.35);
  --sel: #ffd0a8;
}
html[data-palette="vino"] {
  --bg: #140e14; --panel: #221820; --panel2: #322430; --text: #f3e8ef; --muted: #b79aab;
  --accent: #8a3d62; --online: #d28bb0;
  --light: #ead9cf; --dark: #5a2744; --frame: #3a1830;
  --p-a: #f7f0ea; --p-b: #3a1428; --p-ring: rgba(80,20,50,.35);
  --ring: #e0c36a; --ink: #2a1020; --gold: #d4af37; --chip-edge: #2a0e1c;
  --board-shadow: 0 16px 36px rgba(0,0,0,.5);
  --piece-shadow: 0 4px 6px rgba(0,0,0,.35);
  --sel: #f0c0d8;
}
html[data-palette="arena"] {
  --bg: #1a1712; --panel: #262218; --panel2: #363024; --text: #f3ecdc; --muted: #b8ad94;
  --accent: #c2a15a; --online: #7eb8c8;
  --light: #efe2c4; --dark: #7a6240; --frame: #5a4630;
  --p-a: #fff8ea; --p-b: #4a3420; --p-ring: rgba(70,50,20,.3);
  --ring: #e8c86a; --ink: #3a2c18; --gold: #d4af37; --chip-edge: #3a2814;
  --board-shadow: 0 16px 36px rgba(0,0,0,.45);
  --piece-shadow: 0 4px 6px rgba(0,0,0,.3);
  --sel: #ffe9a8;
}
/* Alto nivel: negro y dorado, como la mesa de un casino de categoría. */
html[data-palette="oronegro"] {
  --bg: #0a0a0a; --panel: #161412; --panel2: #221e1a; --text: #f5eee0; --muted: #b0a284;
  --accent: #d4af37; --online: #e8c86a;
  --light: #2a2620; --dark: #0d0d0d; --frame: #1a1610;
  --p-a: #f8ecc8; --p-b: #0c0c0c; --p-ring: rgba(212,175,55,.4);
  --ring: #ffd700; --ink: #050505; --gold: #ffd700; --chip-edge: #1a1610;
  --board-shadow: 0 20px 44px rgba(0,0,0,.7);
  --piece-shadow: 0 4px 10px rgba(0,0,0,.6);
  --sel: #ffd700;
}
/* Neón: mesa iluminada como una sala de juego moderna, colores saturados. */
html[data-palette="neon"] {
  --bg: #0a0618; --panel: #150e26; --panel2: #201638; --text: #f0e8ff; --muted: #a08fc4;
  --accent: #ff2ec4; --online: #2ee6ff;
  --light: #2a1f4a; --dark: #120a24; --frame: #1a1030;
  --p-a: #2ee6ff; --p-b: #ff2ec4; --p-ring: rgba(255,255,255,.4);
  --ring: #ffe600; --ink: #0a0618; --gold: #ffe600; --chip-edge: #1a1030;
  --board-shadow: 0 0 60px rgba(255,46,196,.25), 0 20px 44px rgba(0,0,0,.6);
  --piece-shadow: 0 4px 8px rgba(0,0,0,.5);
  --sel: #ffe600;
}
/* El brillo de cada ficha tiene que ser SU propio color, no el de texto
   heredado: currentColor en un box-shadow lee `color`, no `background`,
   así que sin esto ambas fichas brillarían con el mismo tono equivocado. */
html[data-palette="neon"] .piece.w { box-shadow: var(--piece-shadow), 0 0 14px var(--p-a); }
html[data-palette="neon"] .piece.b { box-shadow: var(--piece-shadow), 0 0 14px var(--p-b); }

html[data-palette="bn"] button { color: #111; }
html[data-style="casino"][data-palette="madera"] { --p-b: #b42323; }
html[data-style="casino"][data-palette="rojo"] { --p-b: #8b1010; }

html[data-ui="oscuro"] { --bg: #121214; --panel: #1e1e24; --panel2: #2a2a32; --text: #f0f0f2; --muted: #9a9aa3; --accent: #81b64c; --accent-rgb: 129, 182, 76; }
html[data-ui="claro"] { --bg: #ece7dc; --panel: #f7f3ea; --panel2: #e4ddd0; --text: #2a241c; --muted: #6b6256; --accent: #3d7a3a; --accent-rgb: 61, 122, 58; }
html[data-ui="verde"] { --bg: #0c1610; --panel: #14241a; --panel2: #1d3326; --text: #e8f6ea; --muted: #8fb59a; --accent: #3d9a64; --accent-rgb: 61, 154, 100; }
html[data-ui="azul"] { --bg: #071a33; --panel: #0b2748; --panel2: #12345c; --text: #f4f7fb; --muted: #8aa4c4; --accent: #ffd200; --accent-rgb: 255, 210, 0; }
html[data-ui="rojo"] { --bg: #1a0e10; --panel: #2a1618; --panel2: #3b2024; --text: #f8ecec; --muted: #c49a9e; --accent: #c44a4a; --accent-rgb: 196, 74, 74; }
html[data-ui="violeta"] { --bg: #140f1c; --panel: #22182c; --panel2: #322440; --text: #f3eaf8; --muted: #b39ac4; --accent: #8a5ad4; --accent-rgb: 138, 90, 212; }
html[data-ui="oceano"] { --bg: #07161a; --panel: #0f242a; --panel2: #16343c; --text: #e6f4f6; --muted: #86b8bf; --accent: #2aa7b8; --accent-rgb: 42, 167, 184; }
html[data-ui="dorado"] { --bg: #0d0b06; --panel: #1a1610; --panel2: #262018; --text: #f5eede; --muted: #b0a284; --accent: #d4af37; --accent-rgb: 212, 175, 55; }
html[data-ui="rosa"] { --bg: #1a0714; --panel: #2a1020; --panel2: #3b1830; --text: #fbeaf5; --muted: #c48ab4; --accent: #e0409a; --accent-rgb: 224, 64, 154; }

/* ===========================================================================
   ESTILO "CLÁSICAS" — fichas de torneo acanaladas sobre tablero de madera.
   Copia el aspecto de las fichas de damas de plástico de toda la vida: un
   disco con anillos concéntricos en relieve, crema/marrón contra amarillo
   dorado, y tablero de madera clara con marco azul grisáceo.

   Los anillos se hacen con UN repeating-radial-gradient por ficha. Es la
   única textura repetida de todo el tema y va sólo en las fichas (24 a 60
   elementos chicos), nunca en las casillas: ahí está la diferencia con el
   viejo hiperrealista, que la ponía en las 144 casillas y trababa.
   =========================================================================== */
/* Casillas: color plano con un velo suave. Barato. */
/* Número de casilla, como en los tableros de competición de la foto. */
/* LA FICHA: anillos concéntricos en relieve + brillo arriba a la izquierda. */
/* El canto exterior del disco, que es lo que le da el aire de ficha real. */