/* =====================================================================
   TEXTOS DE LA MESA (2026-11-06, pedidos del autor)
   - Globos de diálogo de los cantos de los cuatro (.tg-globo, js/ui/globos.js): globo ovalado de historieta, blanco con borde
     negro y sombra dura, cola en SVG según el lado, y letra de historieta negra, la misma para todos (los colores quedan
     solo para la botonera). Entra con golpe desde la cola.
   - Cartel de "REPARTIENDO...": chapa de madera oscura con filete dorado, letras doradas con relieve
     y la barra de tiempo con marco y brillo que corre.
   ===================================================================== */

/* ---------- cartel de REPARTIENDO... ---------- */
#contenedor-fin-ronda-accion {
    background: linear-gradient(180deg, #4a2a12 0%, #2e1808 100%);
    border: 3px solid #c8962e; border-radius: 14px;
    box-shadow: inset 0 0 0 2px #2a1404, inset 0 2px 0 3px rgba(255, 220, 150, .18), 0 8px 0 #1a0c03, 0 14px 24px rgba(0, 0, 0, .7);
    padding: 12px 34px 16px; gap: 9px;
}
#texto-estado-ronda {
    font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif) !important; font-weight: normal;
    font-size: 1.7rem; letter-spacing: .1em; margin: 0; line-height: 1.1;
    color: #ffd23a !important; -webkit-text-stroke: 5px #2a0f02; paint-order: stroke fill;
    text-shadow: 0 1px 0 #2a0f02, 1px 2px 0 #2a0f02, 2px 3px 0 #2a0f02, 2px 4px 0 #2a0f02, 3px 6px 4px rgba(0, 0, 0, .6);
    transform: skewX(-6deg);
}
#contenedor-fin-ronda-accion .barra-tiempo-reclamo-cont {
    width: 210px; height: 14px; border-radius: 8px; overflow: hidden;
    background: #170b03; border: 2px solid #c8962e; box-shadow: 0 0 0 2px #2a1404, inset 0 2px 3px rgba(0, 0, 0, .8);
}
#barra-progreso-reclamo {
    position: relative;
    background: linear-gradient(90deg, #2ecc71 0%, #f1c40f 50%, #e74c3c 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .25);
}
#barra-progreso-reclamo::after {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .18) 0 6px, rgba(255, 255, 255, 0) 6px 12px);
    animation: tgBarraCorre .6s linear infinite;
}
@keyframes tgBarraCorre { from { background-position: 0 0; } to { background-position: 17px 0; } }

/* ---------- globos de diálogo de los cantos (js/ui/globos.js) ---------- */
.tg-globo {
    position: absolute; z-index: 60; pointer-events: none; display: none;
    background: #fff; border: 4px solid #000; border-radius: 50%;   /* globo ovalado de historieta */
    padding: .5em 1.05em .58em; box-shadow: 5px 6px 0 rgba(0, 0, 0, .85);
    font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif); font-size: clamp(24px, 2.9cqw, 56px); line-height: 1.15;
    white-space: nowrap;
    transform: scale(0); opacity: 0;
    transition: transform .18s ease-in, opacity .18s ease-in;
}
.tg-globo.activo { opacity: 1; transform: scale(1); animation: tgGloboPop .42s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes tgGloboPop {
    0% { transform: scale(.15); opacity: 0; }
    55% { transform: scale(1.12, 1.06); opacity: 1; }
    75% { transform: scale(.95, 1.03); }
    100% { transform: scale(1); opacity: 1; }
}
.tg-globo[data-cola="abajo-izq"] { transform-origin: 28% 120%; }
.tg-globo[data-cola="abajo-der"] { transform-origin: 72% 120%; }
.tg-globo[data-cola="abajo-centro"] { transform-origin: 50% 125%; }
.tg-globo[data-cola="izq"] { transform-origin: -8% 45%; }
.tg-globo[data-cola="der"] { transform-origin: 108% 45%; }
/* la letra: de historieta, negra y la misma para todos (los colores quedan para la botonera); pega un saltito apenas después del globo */
.tg-globo-letra { display: inline-block; color: #151515; letter-spacing: .03em; transform: skewX(-5deg); }
.tg-globo.activo .tg-globo-letra { animation: tgGloboLetra .4s .08s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes tgGloboLetra { 0% { transform: skewX(-5deg) scale(.6); } 60% { transform: skewX(-5deg) scale(1.08); } 100% { transform: skewX(-5deg) scale(1); } }

/* la cola: un SVG del tamaño del globo (con el borde), dibujado por js/ui/globos.js (armarCola) a la medida del óvalo */
.tg-globo-cola { position: absolute; left: -4px; top: -4px; overflow: visible; pointer-events: none; }
.tg-globo-cola-relleno { fill: #fff; }
.tg-globo-cola-sombra { fill: rgba(0, 0, 0, .85); stroke: rgba(0, 0, 0, .85); stroke-width: 4; stroke-linejoin: round; }
.tg-globo-cola-borde { fill: none; stroke: #000; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }