/* mesas.css — Aspecto compartido de mesas, tableros, cartas y fichas.

   Va DESPUÉS de juegos.css y también después de los <style> propios de cada
   página, así que muchos selectores llevan "body " delante a propósito: es la
   forma de ganar en especificidad sin ensuciar el código con !important.

   Los colores salen de las variables que publica js/mesa-tema.js, de modo que
   el selector de color de la parte de arriba repinta todos los juegos a la vez.

   Juegos que visten esta hoja:
     cartas  -> Blackjack, Chinchón, Solitario
     tablero -> Ajedrez, Damas, Reversi, Conecta 4
     fichas  -> Dominó
*/

/* ============================================================
   1. PIEZAS COMUNES
   ============================================================ */

/* Superficie de tapete, reutilizada por las mesas de cartas. */
.ms-tapete{
  position:relative;
  background:
    radial-gradient(ellipse 78% 62% at 50% 38%,var(--mt-pano-luz,#15a049) 0%,var(--mt-pano,#0b6b2e) 52%,var(--mt-pano-osc,#04381a) 100%);
  border:clamp(8px,2.2vw,14px) solid var(--mt-madera,#7a4a1e);
  border-radius:clamp(18px,4.5vw,28px);
  box-shadow:
    0 0 0 2px var(--mt-madera-osc,#3d2309),
    inset 0 0 0 3px rgba(0,0,0,.26),
    inset 0 3px 20px rgba(0,0,0,.42),
    0 18px 40px rgba(0,0,0,.5);
}
.ms-tapete::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 55% 40% at 50% 6%,rgba(255,255,255,.12),transparent 70%)}
.ms-tapete>*{position:relative}

/* Marco de madera para los tableros de casillas. */
.ms-marco{
  border:clamp(8px,2.2vw,16px) solid var(--mt-madera,#7a4a1e);
  border-radius:clamp(10px,2.5vw,16px);
  box-shadow:
    0 0 0 2px var(--mt-madera-osc,#3d2309),
    inset 0 0 0 2px rgba(0,0,0,.35),
    0 18px 40px rgba(0,0,0,.45);
}

/* ============================================================
   2. CARTAS (baraja francesa e española)
   Mismo lenguaje visual que el póker: índice y palo en las dos
   esquinas, palo grande al centro, papel con veta y filo.
   ============================================================ */

body .bj-carta,
body .ch-carta,
body .sol-carta{
  position:relative;
  background:linear-gradient(158deg,#fff 0%,#f7f9fc 48%,#e8edf6 100%);
  border-radius:calc(var(--ms-cw,48px) * .13);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.16),inset 0 1px 0 rgba(255,255,255,.95),0 6px 14px rgba(0,0,0,.45);
  font-family:"Rajdhani",system-ui,sans-serif;font-weight:700;line-height:1;
  overflow:hidden;
}

/* Esquinas e índice central: marcado común generado por cada juego. */
body .ms-esq{position:absolute;display:flex;flex-direction:column;align-items:center;
  font-size:calc(var(--ms-cw,48px) * .30);line-height:.98;letter-spacing:-.5px}
body .ms-esq i{font-style:normal;font-size:calc(var(--ms-cw,48px) * .26)}
body .ms-esq-tl{top:calc(var(--ms-cw,48px) * .07);left:calc(var(--ms-cw,48px) * .08)}
body .ms-esq-br{bottom:calc(var(--ms-cw,48px) * .07);right:calc(var(--ms-cw,48px) * .08);transform:rotate(180deg)}
body .ms-pip{font-size:calc(var(--ms-cw,48px) * .60);line-height:1;opacity:.92}

/* Dorso común: azul profundo, celosía y filo dorado. */
body .bj-carta.bj-dorso,
body .ch-carta.ch-dorso,
body .sol-carta.dorso{
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.09) 0 3px,transparent 3px 7px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.09) 0 3px,transparent 3px 7px),
    linear-gradient(160deg,#2b52c9 0%,#1e3a8a 55%,#101f52 100%);
  box-shadow:inset 0 0 0 2px rgba(253,230,138,.55),inset 0 0 0 5px rgba(15,23,42,.45),0 6px 14px rgba(0,0,0,.45);
  color:transparent;
}
body .bj-carta.bj-dorso::after,
body .ch-carta.ch-dorso::after,
body .sol-carta.dorso::after{
  content:"♠";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--ms-cw,48px) * .42);color:rgba(253,230,138,.55)
}

/* --- Blackjack --- */
body .bj-carta{--ms-cw:clamp(52px,13.5vw,76px);width:var(--ms-cw);aspect-ratio:5/7;height:auto;
  color:#0f172a;display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;max-width:calc(33% - 6px)}
body .bj-carta.bj-rojo{color:#d21f3c}
body .bj-cartas{gap:clamp(4px,1.4vw,8px);align-items:center;min-height:clamp(74px,19vw,108px)}
body .bj-mesa{
  background:radial-gradient(ellipse 78% 62% at 50% 34%,var(--mt-pano-luz,#15a049) 0%,var(--mt-pano,#0b6b2e) 52%,var(--mt-pano-osc,#04381a) 100%);
  border:clamp(8px,2.2vw,14px) solid var(--mt-madera,#7a4a1e);
  border-radius:clamp(18px,4.5vw,28px);
  box-shadow:0 0 0 2px var(--mt-madera-osc,#3d2309),inset 0 0 0 3px rgba(0,0,0,.26),
             inset 0 3px 20px rgba(0,0,0,.42),0 18px 40px rgba(0,0,0,.5);
}
body .bj-quien{color:rgba(255,255,255,.82);text-shadow:0 1px 3px rgba(0,0,0,.6)}
body .bj-chips,body .bj-bet{text-shadow:0 1px 3px rgba(0,0,0,.5)}
body .bj-res{color:#bbf7d0;text-shadow:0 1px 4px rgba(0,0,0,.6)}
/* La zona del croupier queda marcada como en una mesa real. */
body .bj-fila{background:rgba(0,0,0,.2);border:1px dashed rgba(253,230,138,.32);
  border-radius:16px;padding:12px 14px;box-shadow:inset 0 2px 14px rgba(0,0,0,.4)}

/* --- Chinchón (baraja española) --- */
body .ch-carta{--ms-cw:clamp(50px,13vw,72px);width:var(--ms-cw);aspect-ratio:5/7;height:auto;
  display:inline-flex;align-items:center;justify-content:center;border:2px solid transparent;
  transition:transform .16s ease,box-shadow .16s ease;flex:0 0 auto}
body .ch-carta.ch-mini{--ms-cw:clamp(30px,7.5vw,40px)}
body .ch-carta.ch-sel{border-color:#fbbf24;transform:translateY(-10px);
  box-shadow:0 0 0 3px rgba(251,191,36,.35),0 12px 20px rgba(0,0,0,.5)}
body .ch-carta:not(.ch-dorso):not(.ch-vacia):hover{transform:translateY(-6px)}
body .ch-carta.ch-vacia{background:rgba(255,255,255,.09);color:#cbd5e1;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);
  font-size:11px;text-align:center;padding:4px}
body .ch-mano{gap:clamp(4px,1.6vw,8px);min-height:clamp(74px,19vw,104px)}
body .ch-mesa{
  background:radial-gradient(ellipse 78% 62% at 50% 34%,var(--mt-pano-luz,#15a049) 0%,var(--mt-pano,#0b6b2e) 52%,var(--mt-pano-osc,#04381a) 100%);
  border:clamp(8px,2.2vw,14px) solid var(--mt-madera,#7a4a1e);
  border-radius:clamp(18px,4.5vw,28px);
  box-shadow:0 0 0 2px var(--mt-madera-osc,#3d2309),inset 0 0 0 3px rgba(0,0,0,.26),
             inset 0 3px 20px rgba(0,0,0,.42),0 18px 40px rgba(0,0,0,.5);
}
body .ch-jug{background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.18));
  border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.3)}
body .ch-jug.ch-yo{background:linear-gradient(180deg,rgba(59,130,246,.34),rgba(30,64,175,.2))}
body .ch-centro{gap:clamp(16px,6vw,40px);margin:18px 0}
body .ch-nombre,body .ch-turno-txt{text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* --- Solitario --- */
body .sol-carta{--ms-cw:clamp(44px,10vw,70px);color:#111;display:flex;align-items:center;justify-content:center;
  border:2px solid transparent}
body .sol-carta.roja{color:#d21f3c}
body .sol-carta.seleccionada{border-color:#fbbf24;transform:translateY(-8px);
  box-shadow:0 0 0 3px rgba(251,191,36,.35),0 12px 20px rgba(0,0,0,.5)}
body .sol-hueco{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);
  color:rgba(255,255,255,.5)}
/* Tapete verde bajo el tablero del solitario (.sol-mesa envuelve mazo,
   descarte, fundaciones y columnas). */
body .sol-mesa{
  background:radial-gradient(ellipse 80% 70% at 50% 30%,var(--mt-pano-luz,#15a049) 0%,var(--mt-pano,#0b6b2e) 55%,var(--mt-pano-osc,#04381a) 100%);
  border:clamp(7px,2vw,12px) solid var(--mt-madera,#7a4a1e);
  border-radius:clamp(14px,3.5vw,22px);
  padding:clamp(10px,2.5vw,18px);
  box-shadow:0 0 0 2px var(--mt-madera-osc,#3d2309),inset 0 2px 18px rgba(0,0,0,.4),0 16px 36px rgba(0,0,0,.45);
  box-sizing:border-box;
}

/* ============================================================
   3. TABLEROS DE CASILLAS
   ============================================================ */

/* --- Ajedrez --- */
body .aj-clara{background:var(--mt-casilla-clara,#eef3e0)}
body .aj-oscura{background:var(--mt-casilla-oscura,#4e7a3a)}
body .aj-celda{text-shadow:0 2px 3px rgba(0,0,0,.35);transition:background .15s ease}
body .aj-celda.posible::after{background:rgba(0,0,0,.34);box-shadow:0 0 0 2px rgba(255,255,255,.25)}
body #tableroAjedrez,body .aj-tablero{
  border:clamp(8px,2.2vw,16px) solid var(--mt-madera,#7a4a1e);
  border-radius:clamp(10px,2.5vw,16px);overflow:hidden;
  box-shadow:0 0 0 2px var(--mt-madera-osc,#3d2309),inset 0 0 0 2px rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.45);
}

/* --- Damas --- */
body .dm-tablero{border:clamp(8px,2.2vw,16px) solid var(--mt-madera,#7a4a1e);border-radius:clamp(10px,2.5vw,16px);
  box-shadow:0 0 0 2px var(--mt-madera-osc,#3d2309),inset 0 0 0 2px rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.45)}
body .dm-clara{background:var(--mt-casilla-clara,#eef3e0)}
body .dm-osc{background:var(--mt-casilla-oscura,#4e7a3a)}
/* Fichas con canto, como las de baquelita de verdad. */
body .dm-ficha{box-shadow:
  inset 0 -5px 10px rgba(0,0,0,.42),inset 0 4px 8px rgba(255,255,255,.28),
  0 5px 10px rgba(0,0,0,.5)}
body .dm-ficha::after{content:"";position:absolute;inset:18%;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.16)}
body .dm-c{position:relative}
body .dm-hum{background:radial-gradient(circle at 34% 28%,#fda4a4 0%,#e23b3b 55%,#8f1414 100%)}
body .dm-cpu{background:radial-gradient(circle at 34% 28%,#8d9cb0 0%,#3b485c 55%,#0b111c 100%)}
body .dm-corona{text-shadow:0 2px 4px rgba(0,0,0,.5)}

/* --- Reversi --- */
body #reversi{background:var(--mt-madera,#7a4a1e);padding:clamp(7px,2vw,12px);border-radius:clamp(10px,2.5vw,16px);
  box-shadow:0 0 0 2px var(--mt-madera-osc,#3d2309),inset 0 0 0 2px rgba(0,0,0,.3),0 18px 40px rgba(0,0,0,.45)}
body .rev-celda{background:
  radial-gradient(circle at 50% 30%,rgba(255,255,255,.10),transparent 60%),var(--mt-pano,#0b6b2e);
  border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
body .rev-valida::after{background:rgba(255,255,255,.5);box-shadow:0 0 0 2px rgba(255,255,255,.2)}
body .rev-n,body .rev-b{border-radius:50%}
body .rev-n{background:radial-gradient(circle at 34% 28%,#4b5566 0%,#151b26 55%,#05080f 100%);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.6),0 3px 7px rgba(0,0,0,.55)}
body .rev-b{background:radial-gradient(circle at 34% 28%,#ffffff 0%,#e8eef6 55%,#b3bdcc 100%);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.28),0 3px 7px rgba(0,0,0,.45)}

/* --- Conecta 4 --- */
body #conecta4{
  background:linear-gradient(170deg,var(--mt-pano-luz,#15a049) 0%,var(--mt-pano,#0b6b2e) 45%,var(--mt-pano-osc,#04381a) 100%);
  border:clamp(6px,1.6vw,10px) solid var(--mt-madera,#7a4a1e);
  box-shadow:0 0 0 2px var(--mt-madera-osc,#3d2309),inset 0 2px 16px rgba(0,0,0,.45),0 18px 40px rgba(0,0,0,.5);
}
body.tema-claro #conecta4{
  background:linear-gradient(170deg,var(--mt-pano-luz,#15a049) 0%,var(--mt-pano,#0b6b2e) 45%,var(--mt-pano-osc,#04381a) 100%);
}
/* Los huecos vacíos parecen agujeros del tablero, no botones planos. */
body .c4-celda{background:radial-gradient(circle at 50% 38%,rgba(0,0,0,.55),rgba(0,0,0,.32) 70%);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.65),inset 0 -2px 3px rgba(255,255,255,.14)}
body .c4-celda:hover{background:radial-gradient(circle at 50% 38%,rgba(0,0,0,.42),rgba(255,255,255,.14) 75%)}
body .c4-r{background:radial-gradient(circle at 34% 28%,#ff9d9d 0%,#e23b3b 52%,#8f1414 100%);
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.45),inset 0 3px 6px rgba(255,255,255,.35),0 3px 7px rgba(0,0,0,.45)}
body .c4-a{background:radial-gradient(circle at 34% 28%,#ffe08a 0%,#f5b301 52%,#a06e00 100%);
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.42),inset 0 3px 6px rgba(255,255,255,.45),0 3px 7px rgba(0,0,0,.45)}
body .c4-gana{box-shadow:0 0 0 4px #22c55e inset,0 0 16px rgba(34,197,94,.6)}

/* ============================================================
   4. DOMINÓ — fichas de marfil con puntos de verdad
   ============================================================ */
body .ficha{background:linear-gradient(160deg,#fffdf7 0%,#f4efe2 55%,#ded7c6 100%);
  border-radius:9px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.9),0 5px 11px rgba(0,0,0,.45)}
body .ficha .mitad{width:clamp(30px,8vw,40px);height:clamp(38px,10vw,50px);position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:14%;box-sizing:border-box;gap:0}
body .ficha .mitad+.mitad{border-left:2px solid rgba(15,23,42,.55)}
/* Cada punto se coloca en su casilla de la rejilla 3×3. */
body .ficha .pip{width:70%;height:70%;border-radius:50%;align-self:center;justify-self:center;
  background:radial-gradient(circle at 34% 28%,#5b6472 0%,#1e2530 60%,#0b0f16 100%);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.6),0 1px 1px rgba(255,255,255,.5)}
body .do-linea{background:
  radial-gradient(ellipse 80% 90% at 50% 30%,var(--mt-pano-luz,#15a049) 0%,var(--mt-pano,#0b6b2e) 55%,var(--mt-pano-osc,#04381a) 100%);
  border:clamp(5px,1.4vw,9px) solid var(--mt-madera,#7a4a1e);border-radius:16px;
  box-shadow:0 0 0 2px var(--mt-madera-osc,#3d2309),inset 0 2px 14px rgba(0,0,0,.42),0 14px 30px rgba(0,0,0,.45)}
body .do-tapada{background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 3px,transparent 3px 7px),
  linear-gradient(160deg,#2b52c9,#1e3a8a 55%,#101f52);
  border-radius:7px;box-shadow:inset 0 0 0 2px rgba(253,230,138,.45),0 3px 8px rgba(0,0,0,.5)}
body .mano .ficha.jugable{outline:3px solid #22c55e;outline-offset:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 14px rgba(34,197,94,.45),0 5px 11px rgba(0,0,0,.45)}

/* ============================================================
   5. LIENZOS DE LOS JUEGOS DEPORTIVOS
   Air Hockey, Pong, Tenis, Fútbol de cabezas, Minigolf y Penaltis
   dibujan la pista dentro del propio <canvas> (ver el patrón de
   fondo cacheado en cada página). Aquí sólo va el marco exterior:
   esquinas redondeadas, filo de madera y sombra proyectada, para
   que el lienzo parezca un mueble y no un rectángulo pegado.
   ============================================================ */
body canvas.ms-lienzo{
  border-radius:clamp(12px,2.6vw,18px);
  background:var(--mt-pano-osc,#04381a);
  box-shadow:
    0 0 0 2px var(--mt-madera-osc,#3d2309),
    0 18px 38px rgba(0,0,0,.5),
    0 2px 0 rgba(255,255,255,.08) inset;
}

/* Variante sin banda de madera propia (el juego ya la dibuja dentro). */
body canvas.ms-lienzo-liso{
  border-radius:clamp(12px,2.6vw,18px);
  box-shadow:0 16px 34px rgba(0,0,0,.45);
}

/* ============================================================
   6. TABLEROS SIMPLES (tanda 3)
   Tres en raya, Cinco en raya, Batalla Naval, Timbiriche y
   Piedra-papel-tijera. Los cinco montan el tablero con DOM, así
   que todo se resuelve aquí: no hace falta tocar su JS.
   (El Gomoku va en <canvas> y lleva su propio fondo cacheado.)

   Recordatorio: esta hoja se carga ANTES de los <style> propios
   de cada página, por eso los selectores llevan "body " delante.
   Es la forma de ganar en especificidad sin llenar esto de
   !important.
   ============================================================ */

/* ---------- 6.1 Tres en raya ----------
   Rejilla de 3×3 sobre tapete, con marco de madera. Las casillas
   son huecos rehundidos, no botones flotantes. */
body #tresenraya{
  gap:clamp(6px,1.6vw,10px);
  padding:clamp(9px,2.4vw,15px);
  box-sizing:border-box;
  width:min(80vw,340px);
  background:
    radial-gradient(ellipse 80% 70% at 50% 36%,var(--mt-pano-luz,#15a049) 0%,var(--mt-pano,#0b6b2e) 55%,var(--mt-pano-osc,#04381a) 100%);
  border:clamp(9px,2.4vw,15px) solid var(--mt-madera,#7a4a1e);
  border-radius:clamp(14px,3.6vw,22px);
  box-shadow:
    0 0 0 2px var(--mt-madera-osc,#3d2309),
    inset 0 0 0 2px rgba(0,0,0,.30),
    inset 0 3px 18px rgba(0,0,0,.42),
    0 18px 40px rgba(0,0,0,.48);
}
body .ter-celda,body.tema-claro .ter-celda{
  border-radius:clamp(8px,2vw,13px);
  background:linear-gradient(160deg,rgba(0,0,0,.30),rgba(0,0,0,.16));
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 1px 0 rgba(255,255,255,.07);
  text-shadow:0 3px 6px rgba(0,0,0,.55);
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
body .ter-celda:hover,body.tema-claro .ter-celda:hover{
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  transform:translateY(-1px);
}
body .ter-celda:focus-visible{outline:3px solid var(--mt-acento,#22c55e);outline-offset:2px}

/* ---------- 6.2 Cinco en raya ----------
   Goban de verdad: la madera es la CASILLA y el fondo del tablero
   asoma por los huecos de 1px haciendo de líneas grabadas. */
body .go-tablero{
  gap:2px;
  padding:clamp(7px,1.8vw,11px);
  background:var(--mt-madera-osc,#3d2309);
  border:clamp(8px,2.2vw,14px) solid var(--mt-madera,#7a4a1e);
  border-radius:clamp(10px,2.6vw,16px);
  box-shadow:
    0 0 0 2px var(--mt-madera-osc,#3d2309),
    inset 0 0 0 2px rgba(0,0,0,.35),
    0 18px 40px rgba(0,0,0,.48);
}
body .go-c{
  background:
    repeating-linear-gradient(96deg,rgba(0,0,0,.05) 0 2px,transparent 2px 7px),
    linear-gradient(150deg,var(--mt-madera-luz,#a86f33),var(--mt-madera,#7a4a1e));
  transition:background .14s ease,box-shadow .14s ease;
}
body .go-c:hover{
  background:
    repeating-linear-gradient(96deg,rgba(0,0,0,.05) 0 2px,transparent 2px 7px),
    linear-gradient(150deg,var(--mt-madera-luz,#a86f33),var(--mt-madera-luz,#a86f33));
  box-shadow:inset 0 0 0 2px var(--mt-acento,#22c55e);
}
/* Piedras con volumen y sombra proyectada sobre la madera. */
body .go-ficha{
  inset:9%;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,.45),
    inset 0 2px 3px rgba(255,255,255,.30),
    0 4px 7px rgba(0,0,0,.55);
}
body .go-ficha::after{
  content:"";position:absolute;left:22%;top:16%;width:34%;height:24%;
  border-radius:50%;background:rgba(255,255,255,.45);filter:blur(1px);
}

/* ---------- 6.3 Batalla Naval ----------
   El mar toma el tono oscuro del tema y el marco es la cubierta. */
body #batallanaval,body.tema-claro #batallanaval{
  gap:3px;
  padding:clamp(7px,1.8vw,11px);
  box-sizing:border-box;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px),
    radial-gradient(ellipse 85% 70% at 50% 30%,var(--mt-pano,#0b6b2e) 0%,var(--mt-pano-osc,#04381a) 70%,#020b14 100%);
  border:clamp(8px,2.2vw,14px) solid var(--mt-madera,#7a4a1e);
  border-radius:clamp(10px,2.6vw,16px);
  box-shadow:
    0 0 0 2px var(--mt-madera-osc,#3d2309),
    inset 0 0 0 2px rgba(0,0,0,.4),
    inset 0 4px 20px rgba(0,0,0,.5),
    0 18px 40px rgba(0,0,0,.48);
}
body .bn-celda,body.tema-claro .bn-celda{
  border-radius:6px;
  background:linear-gradient(160deg,rgba(255,255,255,.17),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 5px rgba(0,0,0,.35);
  transition:background .14s ease,transform .14s ease;
}
body .bn-celda:hover,body.tema-claro .bn-celda:hover{
  background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.14));
  transform:translateY(-1px);
}
body .bn-celda.agua,body.tema-claro .bn-celda.agua{
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.20),rgba(255,255,255,.03) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transform:none;
}
body .bn-celda.tocado{
  background:radial-gradient(circle at 45% 32%,#fde68a,#f97316 45%,#b91c1c 100%);
  box-shadow:inset 0 -2px 5px rgba(0,0,0,.4),0 0 12px rgba(249,115,22,.6);
  transform:none;
}
body .bn-celda.hundido{
  background:radial-gradient(circle at 45% 32%,#64748b,#1e293b 60%,#020617 100%);
  box-shadow:inset 0 -2px 5px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12);
  transform:none;
}

/* ---------- 6.4 Timbiriche ----------
   Tablero de madera con clavos de latón; las líneas trazadas se
   encienden con el color de acento del tema. */
body .tb-tablero{
  padding:clamp(10px,2.6vw,16px);
  box-sizing:border-box;
  background:
    repeating-linear-gradient(93deg,rgba(0,0,0,.05) 0 2px,transparent 2px 8px),
    linear-gradient(155deg,var(--mt-madera-luz,#a86f33),var(--mt-madera,#7a4a1e) 55%,var(--mt-madera-osc,#3d2309));
  border:clamp(8px,2.2vw,13px) solid var(--mt-madera-osc,#3d2309);
  border-radius:clamp(10px,2.6vw,16px);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.30),
    inset 0 3px 16px rgba(0,0,0,.35),
    0 18px 40px rgba(0,0,0,.45);
}
body .tb-punto{
  background:radial-gradient(circle at 34% 28%,#fff2c2,#e0b64a 45%,#8a6414 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.6),inset 0 -1px 1px rgba(0,0,0,.4);
}
body .tb-h,body .tb-v{
  background:rgba(0,0,0,.28);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
body .tb-h:hover,body .tb-v:hover{
  background:rgba(255,255,255,.34);
  box-shadow:0 0 8px rgba(255,255,255,.35);
}
body .tb-on.tb-h,body .tb-on.tb-v{
  background:linear-gradient(180deg,#fde68a,var(--mt-acento,#22c55e));
  box-shadow:0 1px 3px rgba(0,0,0,.5),0 0 9px rgba(251,191,36,.45);
}
body .tb-caja{
  text-shadow:0 2px 4px rgba(0,0,0,.6);
  border-radius:3px;
}
body .tb-c0{background:radial-gradient(circle at 40% 32%,rgba(253,224,71,.55),rgba(202,138,4,.30))}
body .tb-c1{background:radial-gradient(circle at 40% 32%,rgba(96,165,250,.55),rgba(30,64,175,.32))}

/* ---------- 6.5 Piedra, papel o tijera ----------
   Las tres jugadas, como fichas de casino sobre el tapete. */
body .ppt-resultado{
  max-width:420px;margin-left:auto;margin-right:auto;
  padding:16px 18px 14px;
  border-radius:clamp(14px,3.4vw,20px);
  background:
    radial-gradient(ellipse 80% 70% at 50% 30%,var(--mt-pano-luz,#15a049) 0%,var(--mt-pano,#0b6b2e) 55%,var(--mt-pano-osc,#04381a) 100%);
  border:clamp(7px,1.9vw,11px) solid var(--mt-madera,#7a4a1e);
  box-shadow:
    0 0 0 2px var(--mt-madera-osc,#3d2309),
    inset 0 0 0 2px rgba(0,0,0,.28),
    inset 0 3px 16px rgba(0,0,0,.40),
    0 16px 34px rgba(0,0,0,.45);
}
body .ppt-manos{filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
body .ppt-vs{
  color:#fde68a;letter-spacing:2px;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
}
body .ppt-frase{color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.55)}
body .ppt-boton,body.tema-claro .ppt-boton{
  border-radius:50%;
  background:
    radial-gradient(circle at 36% 28%,var(--mt-pano-luz,#15a049),var(--mt-pano,#0b6b2e) 62%,var(--mt-pano-osc,#04381a) 100%);
  box-shadow:
    0 0 0 4px var(--mt-madera,#7a4a1e),
    0 0 0 6px var(--mt-madera-osc,#3d2309),
    inset 0 -4px 8px rgba(0,0,0,.45),
    inset 0 3px 5px rgba(255,255,255,.22),
    0 10px 22px rgba(0,0,0,.5);
  transition:transform .16s ease,box-shadow .16s ease;
}
body .ppt-boton:hover,body.tema-claro .ppt-boton:hover{
  transform:translateY(-5px) scale(1.04);
  background:
    radial-gradient(circle at 36% 28%,var(--mt-pano-luz,#15a049),var(--mt-pano-luz,#15a049) 55%,var(--mt-pano,#0b6b2e) 100%);
  box-shadow:
    0 0 0 4px var(--mt-madera-luz,#a86f33),
    0 0 0 6px var(--mt-madera-osc,#3d2309),
    inset 0 -4px 8px rgba(0,0,0,.4),
    inset 0 3px 5px rgba(255,255,255,.3),
    0 16px 30px rgba(0,0,0,.55);
}
body .ppt-boton:focus-visible{outline:3px solid #fbbf24;outline-offset:4px}

@media(prefers-reduced-motion:reduce){
  body .ter-celda,body .bn-celda,body .ppt-boton,body .go-c{transition:none}
  body .ter-celda:hover,body .bn-celda:hover,body .ppt-boton:hover{transform:none}
}

/* ============================================================
   7. Ajustes en tema claro
   ============================================================ */
body.tema-claro .sol-hueco{background:rgba(0,0,0,.12);box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);color:rgba(0,0,0,.45)}

@media(prefers-reduced-motion:reduce){
  body .ch-carta,body .sol-carta,body .mano .ficha{transition:none}
}