/* ---------- Mesa al estilo de Ludoteka ---------- */
body.in-table { overflow: hidden; }
/* La mesa queda anclada a la pantalla: aunque la página quede corrida (iPhone, teclado del chat), la barra de botones
   siempre se ve arriba */
body.in-table .table-screen { position: fixed; top: 0; left: 0; right: 0; height: 100dvh; z-index: 1; }
@supports not (height: 100dvh) { body.in-table .table-screen { height: 100vh; bottom: 0; } }
body.in-table .topbar { display: none; }
.table-screen {
  max-width: none; padding: 0; height: 100dvh; display: flex; flex-direction: column;
  background: #3b2311;
}

/* Barra de íconos */
.tbar {
  display: flex; align-items: center; gap: 4px; padding: 3px 6px; background: #f4f4f4; border-bottom: 1px solid #cfcfcf;
  padding-top: max(3px, env(safe-area-inset-top)); flex: none;
}
.tb-game { width: 30px; height: 30px; display: inline-block; }
.tb-game svg { width: 100%; height: 100%; }
.tb, .tb-ico { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 30px; }
.tb { border: 1px solid #c9c9c9; background: #fff; border-radius: 4px; font-size: 17px; padding: 0 6px; position: relative; color: #333; }
.tb:active { background: #e6e6e6; }
.tb-ico .round { width: 28px; height: 28px; font-size: 14px; }
.tb-sep { flex: 1; }
#unread { position: absolute; top: -6px; right: -6px; background: var(--red); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 800; min-width: 10px; height: 14px; line-height: 14px; padding: 0 3px; border: 1.5px solid #fff; box-sizing: content-box; text-align: center; animation: unreadPulso 1.4s ease-in-out infinite; }
#unread[hidden] { display: none; }
@keyframes unreadPulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
#chatToggle:has(#unread:not([hidden])) { background: #ffe9a8; border-color: #e0a800; }

/* Madera */
.felt {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, rgba(0,0,0,.035) 2px 7px, rgba(255,255,255,.012) 7px 11px),
    linear-gradient(180deg, #6a3f1f 0%, #5a3418 45%, #4d2c14 100%);
}
/* Tableros (como en Ludoteka): paños con textura fina y maderas */
.felt-verde, .sw.felt-verde { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.06), transparent 60%), repeating-radial-gradient(circle at 10% 10%, rgba(0,0,0,.05) 0 1px, transparent 1px 3px), #0f5a1c; }
.felt-azul, .sw.felt-azul { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.07), transparent 60%), repeating-radial-gradient(circle at 10% 10%, rgba(0,0,0,.06) 0 1px, transparent 1px 3px), #0e4a6b; }
.felt-vino, .sw.felt-vino { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.05), transparent 60%), repeating-radial-gradient(circle at 10% 10%, rgba(0,0,0,.06) 0 1px, transparent 1px 3px), #5e1414; }
.felt-madera, .sw.felt-madera {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, rgba(0,0,0,.035) 2px 7px, rgba(255,255,255,.012) 7px 11px),
    linear-gradient(180deg, #6a3f1f 0%, #5a3418 45%, #4d2c14 100%);
}
.felt-pino, .sw.felt-pino { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.05), transparent 60%), repeating-radial-gradient(circle at 10% 10%, rgba(0,0,0,.07) 0 1px, transparent 1px 3px), #26473a; }
.felt-clara, .sw.felt-clara {
  background:
    repeating-linear-gradient(176deg, rgba(150,90,60,.10) 0 2px, transparent 2px 9px, rgba(160,100,70,.07) 9px 12px, transparent 12px 21px),
    linear-gradient(180deg, #dcb796, #d2a985);
}
.felt-clara .center-label { background: rgba(70,40,20,.8); }
.felt-menu {
  position: absolute; top: 40px; right: 70px; z-index: 30; display: flex; gap: 6px; padding: 8px; background: #fff;
  border: 1px solid #c9c9c9; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.sw { width: 40px; height: 40px; border: 2px solid #999; border-radius: 3px; padding: 0; cursor: pointer; }
.sw.on { outline: 3px solid #f2c230; outline-offset: 1px; }
.tbar { position: relative; }
/* Teléfono: una sola fila; los botones se encogen lo necesario para que ✖ y ⛶ nunca queden fuera */
@media (max-width: 600px) {
  .tbar { flex-wrap: nowrap; gap: 2px; padding-left: 3px; padding-right: 3px; }
  .tbar > * { flex: 0 1 auto; min-width: 0; }
  .tb, .tb-ico { flex: 0 1 30px; min-width: 22px; height: 30px; }
  .tb { padding: 0; font-size: 15px; } /* sin overflow:hidden: taparía el globito rojo de mensajes nuevos */
  #unread, .tb .badge-n { top: -5px; right: -5px; z-index: 2; }
  .tb-ico .round { width: 24px; height: 24px; font-size: 12px; }
  .tb-game { flex: none; width: 24px; height: 24px; }
  .tb-watch { font-size: 12px; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; }
  .tb-sep { flex: 1 1 0; min-width: 0; }
}

.board { position: absolute; top: 96px; bottom: 180px; left: 58px; right: 58px; display: flex; align-items: center; justify-content: center; }
.board svg { width: 100%; height: 100%; overflow: visible; }
#lastPlayed { transform-box: fill-box; transform-origin: center; }
.board .toast { max-width: 100%; }

/* Asientos */
.seat { position: absolute; z-index: 2; color: #fff; }
.seat .row { display: flex; align-items: center; gap: 6px; }
.score {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 26px; padding: 0 8px;
  background: linear-gradient(180deg, #d9d4cc, #b9b2a7); color: #3a2312; border-radius: 6px; font-weight: 800; font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.nm-pill {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(40,22,10,.55); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; padding: 2px 8px 2px 2px; font-weight: 700; font-size: 15px; max-width: 220px;
}
.nm-pill.on { border-color: #4ccf4c; box-shadow: 0 0 0 1px #4ccf4c; }
/* El reloj de cada jugador es el marco de su nombre (12-oct): verde completo al empezar el turno, se va gastando en el
   sentido del reloj (lo gastado queda claro) y los últimos 5 segundos en rojo. Reemplaza a la barra de tiempo. */
.nm-pill { border-width: 2px; }
.nm-pill.reloj-on {
  border: 3px solid transparent; box-shadow: 0 0 9px rgba(49,211,49,.5);
  background: linear-gradient(rgba(40,22,10,.88), rgba(40,22,10,.88)) padding-box,
              conic-gradient(var(--rc, #31d331) var(--p, 100%), rgba(255,255,255,.28) 0) border-box;
}
.nm-pill.reloj-on.reloj-low { --rc: #ff5a3c; box-shadow: 0 0 10px rgba(255,90,60,.65); animation: relojPulso .5s ease-in-out infinite alternate; }
@keyframes relojPulso { to { box-shadow: 0 0 16px rgba(255,90,60,.9); } }
.clock { display: none !important; } /* la barra de antes */
.nm-pill .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-pill .av { width: 24px; height: 24px; border-radius: 4px; background: #3a3a3a; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.nm-pill .shield { width: 11px; height: 20px; border-radius: 3px; border-width: 1px; }
.nm-pill .shield .rg-bot { border-top-width: 1px; gap: 1px; }
.nm-pill .shield .rg-bot i { width: 2px; height: 2px; }
.nm-pill.empty { padding: 4px 10px; color: #ddd; }
.off { color: #ffb4a8; font-size: 11px; font-weight: 700; }

.clock { display: flex; align-items: center; gap: 4px; }
.clock .num {
  min-width: 34px; height: 20px; border-radius: 5px; background: #cfc9bf; color: #2a3a6a; font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.clock .bar { flex: 1; height: 7px; border-radius: 4px; background: #2e3c78; overflow: hidden; min-width: 60px; position: relative; }
.clock .bar i { display: block; height: 100%; width: 100%; background: #3c5bd1; }
.clock.on .bar i { background: #31d331; }
.clock.on .num { color: #1f7a1f; }
.clock.low .bar i { background: #ff6040; }

/* Fichas boca abajo de los rivales */
/* De canto: se ve solo el grosor de cada ficha parada, una tira fina que deja libre el centro de la mesa */
.backs { display: flex; gap: 1px; }
.backs.h { justify-content: center; margin-top: 4px; }
.backs.v { flex-direction: column; }
.back { display: block; background: linear-gradient(180deg, #fffaf0 0 45%, #e7d3b4 55% 100%); border-radius: 1.5px; box-shadow: 0 1px 1px rgba(0,0,0,.55); }
.back.h { width: 14px; height: 7px; }
.back.v { width: 7px; height: 14px; background: linear-gradient(90deg, #fffaf0 0 45%, #e7d3b4 55% 100%); }

/* Administrador observando: 👁 junto a cada nombre destapa (o tapa) las fichas de esa persona en su puesto */
.ojo-admin { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 3px; padding: 0;
  border: 2px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(0,0,0,.45); font-size: 15px; cursor: pointer; flex: none; position: relative; z-index: 5; }
.ojo-admin.on { background: #ffd54a; border-color: #fff; box-shadow: 0 0 0 2px rgba(255,213,74,.5); }
.seat-left > .ojo-admin, .seat-right > .ojo-admin { margin: 2px 0; }
.backs.admin-caras { gap: 2px; flex-wrap: nowrap; }
.backs.admin-caras .rt { display: block; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.backs.admin-caras .rt svg { display: block; width: 100%; height: auto; }
.backs.h.admin-caras .rt { width: 22px; }
.backs.v.admin-caras .rt { width: 40px; }
.backs.admin-caras.abajo { justify-content: center; }
.backs.admin-caras.abajo .rt { width: 30px; }
@media (min-width: 700px) { .backs.h.admin-caras .rt { width: 30px; } .backs.v.admin-caras .rt { width: 52px; } .backs.admin-caras.abajo .rt { width: 40px; } }

/* Marco de madera alrededor del paño (sombra por dentro: no ocupa espacio) */
.felt { box-shadow: inset 0 0 0 9px #6e4220, inset 0 0 0 10px #8a5a30, inset 0 0 0 13px #3b220e, inset 0 0 26px 16px rgba(0,0,0,.42); }
/* Tapiz con el nombre del juego estampado en el centro, como el paño de un casino (debajo de las fichas) */
.felt.con-nombre::before {
  content: 'Dominó\A Raíces'; white-space: pre; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; font: 900 clamp(34px, 11vw, 96px)/1 Nunito, system-ui, sans-serif; letter-spacing: .02em;
  color: rgba(255,255,255,.075); text-shadow: 0 2px 0 rgba(0,0,0,.10);
  padding: .35em .7em; border: 3px solid rgba(255,255,255,.06); border-radius: 50%; pointer-events: none; z-index: 0;
}
.felt.con-nombre.felt-clara::before { color: rgba(90,50,20,.10); border-color: rgba(90,50,20,.09); text-shadow: none; }
.felt-menu { flex-wrap: wrap; max-width: 300px; }
/* Tapices con el logo, hechos por el dueño (img/tapices/raices-<color>.jpg vertical con marco, -h.jpg horizontal sin marco).
   Teléfono: la vertical llena la mesa. Pantalla ancha: la horizontal cubre la mesa sin estirarse y el marco (con sus
   esquinas) se toma de la vertical con border-image, así no se deforma aunque la mesa cambie de forma (chat abierto). */
.felt-raices-azul { --tv: url(img/tapices/raices-azul.jpg); --th: url(img/tapices/raices-azul-h.jpg); --tc: #0a3a7a; }
.felt-raices-verde { --tv: url(img/tapices/raices-verde.jpg); --th: url(img/tapices/raices-verde-h.jpg); --tc: #0d4a22; }
.felt-raices-vino { --tv: url(img/tapices/raices-vino.jpg); --th: url(img/tapices/raices-vino-h.jpg); --tc: #4e0c12; }
.felt-raices-clara { --tv: url(img/tapices/raices-clara.jpg); --th: url(img/tapices/raices-clara-h.jpg); --tc: #8a5326; }
.felt-raices-madera { --tv: url(img/tapices/raices-madera.jpg); --th: url(img/tapices/raices-madera-h.jpg); --tc: #2e1a0e; }
.felt[class*="felt-raices-"] { background: var(--tv) center / 100% 100% no-repeat, var(--tc); box-shadow: none; }
.felt[class*="felt-raices-"].con-nombre::before { display: none; } /* ya traen el nombre */
@media (min-aspect-ratio: 3/4) { .felt[class*="felt-raices-"] { background: var(--th) center / cover no-repeat, var(--tc);
  border-image: var(--tv) 125 / 58px stretch; border-style: solid; border-width: 0; }
  .felt[class*="felt-raices-"] .seat-left { left: 30px; } .felt[class*="felt-raices-"] .seat-right { right: 30px; } /* sin pisar el marco */
  .felt[class*="felt-raices-"] .seat-top { top: 22px; } }
.vp[class*="felt-raices-"] { background: var(--th) center / cover no-repeat, var(--tc); } /* repetición de la Libreta */
.sw[class*="felt-raices-"] { background: var(--tv) center 45% / 160% auto; }
.felt-nombre-op { flex-basis: 100%; padding: 8px; border: 2px solid #c9c9c9; border-radius: 6px; background: #f6f6f6; font: 800 13px Nunito, system-ui, sans-serif; color: #333; cursor: pointer; }
.felt-nombre-op[aria-pressed="true"] { border-color: #f2c230; background: #fff4cc; }
@media (min-width: 900px) { .felt { box-shadow: inset 0 0 0 12px #6e4220, inset 0 0 0 13px #8a5a30, inset 0 0 0 17px #3b220e, inset 0 0 34px 20px rgba(0,0,0,.42); } }

.seat-top { top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.seat-top .clock { width: 170px; }
.seat-left, .seat-right { top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.seat-left { left: 13px; }
.seat-right { right: 13px; }
.seat-left .col, .seat-right .col { display: flex; gap: 3px; align-items: flex-start; }
.seat-right .col { flex-direction: row-reverse; }
.seat-left .nm-pill, .seat-right .nm-pill { writing-mode: vertical-rl; padding: 6px 2px; max-height: 190px; max-width: none; }
.seat-left .nm-pill { transform: rotate(180deg); }
.seat-left .nm-pill .av, .seat-right .nm-pill .av { writing-mode: horizontal-tb; }
.seat-left .clock, .seat-right .clock { flex-direction: column; width: 40px; }
.seat-left .clock .bar, .seat-right .clock .bar { min-width: 0; width: 7px; height: 60px; flex: none; }
.seat-left .clock .bar i, .seat-right .clock .bar i { width: 100% !important; height: 100%; }

/* Resultado de la data sobre la mesa */
/* Fichas destapadas como en una mesa de verdad: enfrente, una fila de fichas paradas; a los lados, la fila de ese jugador
   corre a lo largo de su lado (una columna de fichas acostadas, del mismo tamaño) */
.reveal { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 250px; }
.reveal .rt { width: 21px; display: block; }
.reveal .rt { border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.reveal .rt svg { display: block; width: 100%; height: auto; }
.seat-left .reveal, .seat-right .reveal { max-width: 46px; flex-direction: column; flex-wrap: nowrap; }
.seat-left .reveal .rt, .seat-right .reveal .rt { width: 42px; }
.pts-red { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; background: #c62828; color: #fff; font-weight: 800; font-size: 13px; border: 2px solid #fff; }
.pts-green { background: #1f7a2e; color: #fff; font-weight: 800; font-size: 13px; padding: 3px 9px; border-radius: 7px; border: 1px solid #b6f0b6; white-space: nowrap; }

/* Globos (Paso / chat) */
.bubble { position: absolute; z-index: 5; font-weight: 800; font-size: 12px; padding: 3px 8px; border-radius: 10px; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.bubble.paso { background: #fff7b5; color: #3a2312; border: 1px solid #d8c96a; }
/* ✊ «toc, toc»: el puño (pequeño) da dos toques junto a la hilera de fichas del que pasa y en cada toque salta polvito
   de la mesa. Dura ~1,1 s; los golpes caen a los 330 ms y 715 ms (TOC_GOLPES en mesa.js, sincronizados con el sonido). */
.toc-capa { position: fixed; z-index: 2500; width: 26px; height: 26px; pointer-events: none; }
/* Puño ✊ con los nudillos (arriba del emoji) mirando al tablero desde cada jugador:
   yo (abajo) → nudillos arriba; el de enfrente → abajo; izquierda → a la derecha; derecha → a la izquierda. En su marco, -y = nudillos */
.toc-capa .puno-giro { position: absolute; inset: 0; transform-origin: 50% 50%; }
.toc-capa .puno-giro.bottom { transform: none; }
.toc-capa .puno-giro.top    { transform: rotate(180deg); }
.toc-capa .puno-giro.left   { transform: rotate(90deg); }
.toc-capa .puno-giro.right  { transform: rotate(-90deg); }
.toc-capa .puno { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform-origin: 50% 70%;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); animation: tocToc 1.1s ease-in-out both; }
.toc-capa .puno img { width: 28px; height: 28px; display: block; flex: none; }
@keyframes tocToc {
  0%   { opacity: 0; transform: translateY(12px) rotate(-10deg) scale(.9); }
  12%  { opacity: 1; transform: translateY(12px) rotate(-10deg) scale(.95); }
  30%  { transform: translateY(-2px) rotate(0) scale(1.06); }      /* 1.er toque: los nudillos contra la mesa */
  45%  { transform: translateY(10px) rotate(-8deg) scale(.95); }
  65%  { transform: translateY(-2px) rotate(0) scale(1.06); }      /* 2.º toque */
  82%  { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
  100% { opacity: 0; transform: translateY(4px) scale(.95); }
}
/* El polvito sale justo donde pegan los nudillos (borde -y del puño) */
.toc-capa .polvo { position: absolute; left: 50%; top: 8%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  background: radial-gradient(circle, rgba(245,236,214,.95), rgba(196,180,150,.6)); opacity: 0; animation: polvo .5s ease-out both; }
@keyframes polvo {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
  15%  { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.5); }
}
.bubble.chat { background: #fff; color: #222; border: 1px solid #ccc; font-weight: 600; }
.seat-top .bubble { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; }
.seat-top .bubble.chat { top: auto; bottom: 100%; margin: 0 0 4px; }
.seat-left .bubble { left: 100%; top: 50%; margin-left: 6px; }
.seat-right .bubble { right: 100%; top: 50%; margin-right: 6px; }
.seat-left .bubble.chat, .seat-right .bubble.chat { top: 10%; }
.bubble.me { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; }
.bubble.chat.me { bottom: auto; top: -30px; }

/* Yo (abajo) */
.seat-bottom { left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.me-actions { position: relative; min-height: 0; display: flex; justify-content: center; width: 100%; }
.tray { background: rgba(255,255,255,.04); border-radius: 6px; padding: 4px 6px; transition: background .2s; max-width: 100%; }
.tray.myturn { background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.me-line { display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; width: min(520px, 100%); }
.me-line .clock { width: 100%; }
.me-line .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }

.hand { display: flex; justify-content: center; align-items: flex-end; gap: 3px; flex-wrap: nowrap; min-height: 64px; }
.hand .tile { flex: 0 0 auto; width: clamp(28px, 8.6vw, 46px); border: 0; padding: 0; background: none; transition: transform .12s; touch-action: none; cursor: grab; }
.hand .tile.drag { transition: none; z-index: 5; position: relative; cursor: grabbing; box-shadow: 0 6px 10px rgba(0,0,0,.45); }
.hand .tile { border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.hand .tile svg { display: block; width: 100%; height: auto; }
.hand .tile.flip { transform: rotate(180deg); transition: transform .14s; }
.hand .tile.sel { transform: translateY(-14px); box-shadow: 0 0 8px 2px var(--gold); }

.side-pick { position: absolute; bottom: 4px; display: flex; gap: 8px; justify-content: center; align-items: center; z-index: 6; }
.pick-rand { position: absolute; bottom: 4px; background: #3e3bb5; border-color: #2c2a8a; z-index: 6; }
.countdown {
  position: absolute; bottom: 6px; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.35); color: #d8d0c4;
  font-size: 28px; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 6;
}

/* Escoger fichas: 55 boca abajo regadas */
.pick-zone { position: absolute; top: 110px; bottom: 200px; left: 70px; right: 70px; z-index: 3; }
.ptile {
  position: absolute; width: 22px; height: 38px; border: 0; padding: 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(180deg, #fffaf1, #efdcc0); box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: opacity .2s;
}
.ptile:hover { box-shadow: 0 0 0 2px #ffe27a, 0 1px 3px rgba(0,0,0,.5); }
.ptile.gone { opacity: 0; pointer-events: none; }
.pick-zone.full .ptile { cursor: default; }

/* Etiqueta del centro y montón de dormidas */
.center-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; background: rgba(60,34,16,.85);
  color: #fff; border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 700; text-align: center; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.sleep-pile { position: absolute; top: 10px; left: 10px; width: 46px; height: 42px; z-index: 1; }
.sleep-pile i { position: absolute; left: 10px; top: 6px; width: 14px; height: 24px; border-radius: 2px; background: linear-gradient(180deg, #fff9ee, #ecdcc4); box-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* Final de la data: solo botones pequeños (la mesa queda a la vista) */
.hand-result.mini {
  top: auto; bottom: 168px; transform: translateX(-50%); width: auto; padding: 0; background: none; box-shadow: none;
  display: flex; gap: 8px;
}
.pts-win { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; background: #1f7a2e; color: #fff; font-weight: 800; font-size: 13px; border: 2px solid #fff; }
.pts-gray { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; background: #666; color: #fff; font-weight: 800; font-size: 13px; border: 2px solid #fff; }
.reveal { align-items: center; }
/* El reloj sin número (se confundía con los puntos): solo la barra, y solo del que le toca jugar */
.clock .num { display: none; }
.clock:not(.on) { visibility: hidden; }
/* La mano del que salió: pequeña, dentro de la etiqueta del nombre */
.mano-s { font-size: 13px; line-height: 1; filter: drop-shadow(0 0 2px rgba(242,194,48,.9)); }
.seat-left .mano-s, .seat-right .mano-s { writing-mode: horizontal-tb; }

/* Espectador: solo mira */
#tbWatch { cursor: pointer; }
.tb-watch { background: #e8f1ff; color: #1d4fa8; border: 1px solid #b8cdf0; border-radius: 12px; padding: 3px 9px; font-size: 13px; font-weight: 800; white-space: nowrap; }
body.spectating .tray { background: none; }
.backs.spec { padding: 4px 0; }
/* Quien mira la partida ve la fila del jugador de abajo igual que las de los demás: pequeñas y boca abajo */
.backs.spec .back { width: 16px; height: 30px; }
.tp-fill { text-align: center; color: #5a4a2a; background: #fff3d1; border-radius: 6px; padding: 6px; margin: 8px 0; font-weight: 700; font-size: 14px; }

/* Resumen al terminar la data */
.hand-result {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; width: min(340px, calc(100% - 24px));
  background: rgba(255,255,255,.97); color: #222; border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.hand-result.min { width: auto; padding: 6px; top: auto; bottom: 200px; transform: translateX(-50%); background: rgba(255,255,255,.9); }
.hr-title { font-weight: 800; font-size: 17px; text-align: center; color: #0b6f86; margin-bottom: 8px; }
.hr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hr-table td { padding: 4px 4px; border-bottom: 1px solid #eee; }
.hr-table td:nth-child(2), .hr-table td:nth-child(3) { text-align: right; white-space: nowrap; color: #555; }
.hr-table tr.w td:first-child { font-weight: 800; color: #1f7a2e; }
.hr-table .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.hr-calc { margin-top: 8px; text-align: center; font-size: 15px; background: #e9f7ea; border-radius: 6px; padding: 6px; }
.hr-score { margin-top: 8px; text-align: center; font-size: 16px; }
.hr-score b { font-size: 20px; }
.hr-score small { color: #777; }
.hr-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.hr-foot { margin-top: 8px; text-align: center; font-size: 12px; color: #666; }
.hr-foot .link { color: #2f6fb5; display: block; margin: 4px auto 0; }

/* Repaso jugada por jugada */
.replay-bar {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 9; background: rgba(255,255,255,.97); color: #222;
  border-radius: 10px; padding: 8px 10px; box-shadow: 0 -4px 18px rgba(0,0,0,.4); max-height: 46%; overflow: auto;
}
.rp-desc { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rp-ctrls { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.rp-ctrls .btn { min-width: 44px; font-size: 16px; }
.rp-hands { display: grid; gap: 4px; }
.rp-hand { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; }
.rp-hand .dot { width: 8px; height: 8px; border-radius: 50%; }
.rp-hand b { margin-right: 4px; }
.rp-tile { display: inline-block; width: 34px; vertical-align: middle; }
.rp-tile { border-radius: 3px; box-shadow: 0 1px 1px rgba(0,0,0,.35); }
.rp-tile svg { display: block; width: 100%; height: auto; }

/* «Tu partida» (esperando jugadores) */
.waiting { flex: 1; overflow: auto; background: #f6f3ea; padding: 16px; display: flex; justify-content: center; align-items: flex-start; }
.tu-partida { width: 100%; max-width: 460px; background: #fffbea; border: 1px solid #e3dcc0; border-radius: 10px; padding: 14px; transition: background .3s; }
.tu-partida.starting { background: #fcd9b6; border-color: #e9b98a; }
.tp-head { display: flex; align-items: center; gap: 12px; }
.tp-head .gicon { width: 64px; height: 64px; }
.tp-head .gtitle b { font-size: 30px; }
.tp-head .gtitle i { font-size: 20px; }
.tp-close { margin-left: auto; width: 34px; height: 34px; border-radius: 4px; border: 0; background: #d9534f; color: #fff; font-size: 18px; align-self: flex-start; }
.tp-icons { display: flex; justify-content: space-around; border-top: 1px solid #ddd2b5; border-bottom: 1px solid #ddd2b5; margin: 12px -14px; padding: 8px 4px; }
.tp-icons > span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; }
.tp-icons small { color: #333; font-size: 13px; }
.tu-partida .gseats { margin: 18px auto 10px; max-width: 340px; }
.tu-partida .srow .av { width: 24px; height: 24px; border-radius: 4px; background: #3a3a3a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.tu-partida button.srow { width: 100%; border: 0; border-bottom: 1px solid #cfdccf; background: transparent; cursor: pointer; justify-content: center; }
.tu-partida button.srow:disabled { cursor: default; }
.tp-status { text-align: center; color: #a33a1e; font-weight: 800; font-size: 18px; margin-top: 18px; }
.tp-code { text-align: center; margin-top: 6px; color: #555; }
.tp-code b { letter-spacing: 3px; font-size: 18px; color: #3a2312; }
.tp-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.tp-count { margin: 20px auto 6px; width: 54px; height: 54px; border-radius: 50%; background: #c8640f; color: #fff; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 18px rgba(200,100,15,.6); }

/* Fin de partida */
.overlay { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(0,0,0,.4); }
.result { background: #fff; border-radius: 12px; padding: 18px; width: 100%; max-width: 420px; text-align: center; }
.result .big { font-size: 24px; font-weight: 800; margin: 4px 0 12px; }
.final-score { display: grid; grid-template-columns: 1fr auto auto auto 1fr; gap: 8px; align-items: center; font-size: 15px; }
.final-score b { font-size: 30px; }
.final-score span:first-child { text-align: right; }
.final-score span:last-child { text-align: left; }
.result .actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }

.toast {
  position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 9; background: rgba(0,0,0,.82);
  color: #fff; padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; max-width: 90%; text-align: center;
}
.toast.global { position: fixed; top: 70px; }

/* Chat: abajo de la mesa en el celular (como Ludoteka), al lado en pantallas anchas */
.chat {
  position: fixed; left: 0; right: 0; bottom: 0; height: 42dvh; background: #fde0c4; z-index: 10;
  display: flex; flex-direction: column; box-shadow: 0 -4px 16px rgba(0,0,0,.25); transform: translateY(105%); transition: transform .2s;
}
.chat.open { transform: none; }
body.chat-open .table-screen { height: 58dvh; }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: #1aa0b8; color: #fff; }
.chat-head .link { color: #fff; }
.chat-log { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.chat-log .m b { color: #0b6f86; }
.chat-log .sys { color: #7a6a5a; font-style: italic; font-size: 13px; }
/* Mensaje del administrador (atención a los jugadores) */
.chat-log .m.soporte { background: #e3f3f8; border-left: 3px solid #0b8fb3; border-radius: 6px; padding: 3px 6px; }
.chat-form { display: flex; gap: 6px; padding: 6px; background: #fff; border-top: 1px solid #e3c9ad; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.chat-form input { flex: 1; min-width: 0; padding: 9px; border: 1px solid #bbb; border-radius: 4px; font-size: 16px; }

@media (min-width: 1100px) {
  .table-screen { display: grid; grid-template-columns: 1fr 320px; grid-template-rows: auto 1fr; }
  .tbar, .felt, .waiting { grid-column: 1; }
  .chat { position: static; grid-column: 2; grid-row: 1 / span 2; transform: none; height: auto; box-shadow: none; }
  body.chat-open .table-screen { height: 100dvh; }
  /* El chat se puede esconder (botón «Cerrar» o ✉) para que la mesa use toda la pantalla */
  body:not(.chat-open) .table-screen { grid-template-columns: 1fr; height: 100dvh; }
  body:not(.chat-open) .chat { display: none; }
}
@media (min-width: 700px) {
  .board { top: 110px; bottom: 200px; left: 90px; right: 90px; }
  .back.h { width: 20px; height: 10px; }
  .back.v { width: 10px; height: 20px; }
}

/* ---------- B3: marcador en la barra; los círculos de puntos salen del paño ---------- */
.seat .score, #meLine .score { display: none; }
.tb-marcador { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.tb-marcador[hidden] { display: none; }
.tb-marcador .mc { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 7px; border-radius: 12px; background: #fff;
  border: 1px solid #c9c9c9; color: #3a2312; font: 900 14px Nunito, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.tb-marcador .mc i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tb-marcador .mc b { font-weight: 900; color: #0b6f86; }
.tb-marcador .mc.yo { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.tb-marcador .mc-meta { color: #6b7780; font-weight: 800; font-size: 11px; }
@media (max-width: 480px) {
  .tb-marcador { gap: 2px; }
  .tb-marcador .mc { height: 22px; padding: 0 4px; font-size: 12px; gap: 2px; }
  .tb-marcador .mc i { width: 7px; height: 7px; }
  .tb-marcador .mc-meta { display: none; }
}
/* El marcador no puede empujar fuera de la pantalla ✖ y ⛶ (15-oct: con 3 cifras se salían a 375 px y a 320 px).
   En teléfonos se ocultan los dos íconos solo informativos (📊 puntuable y el ritmo): eso mismo lo dice ℹ️. */
@media (max-width: 420px) { #tbScored, #tbSpeed { display: none; } }
@media (max-width: 340px) {
  .tb-marcador .mc { padding: 0 3px; font-size: 11px; }
  .tb-marcador .mc i { display: none; }
  #tbar { gap: 1px; }
  #tbar .tb { font-size: 14px; }
}
/* El marcador casi no encoge: primero encogen los botones (hasta su mínimo de 22 px) y el marcador se lee entero.
   Solo si aun así no cabe, el marcador se recorta antes que sacar ✖ o ⛶ de la pantalla (garantía de último recurso). */
.tbar > .tb-marcador { flex: 0 0.01 auto; min-width: 0; overflow: hidden; }
.tb-marcador .mc, .tb-marcador .mc-meta { flex: none; }