/* ==========================================================================
   TRUCACHO GD - Presentación de los tantos en mesa (js/sistemas/tantos_mesa.js)
   ========================================================================== */
.tg-tantos-velo {
    position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .55) 100%);
    transition: opacity .25s ease;
}
.tg-tantos-velo.visible { opacity: 1; }

/* Cartas del tanto: caen con rebote y brillan en dorado */
.tg-tanto-carta { transform-origin: 50% 80%; }
.tg-tanto-entra {
    opacity: 0;
    animation: tgTantoCae .5s cubic-bezier(.2, 1.35, .4, 1) forwards;
}
@keyframes tgTantoCae {
    0%   { opacity: 0; transform: translateY(-70px) scale(1.7) rotate(-9deg); }
    55%  { opacity: 1; transform: translateY(8px) scale(.96) rotate(2deg); }
    80%  { transform: translateY(-4px) scale(1.04) rotate(-1deg); }
    100% { opacity: 1; transform: translateY(0) scale(1.08) rotate(0deg); }
}
.tg-tanto-brillo { z-index: 59; }
.tg-tanto-entra.tg-tanto-brillo { animation: tgTantoCae .5s cubic-bezier(.2, 1.35, .4, 1) forwards, tgTantoBrillo 1.1s ease-in-out .7s 2; }
.tg-tanto-brillo:not(.tg-tanto-entra) { animation: tgTantoBrillo 1.1s ease-in-out 0s 2; }
@keyframes tgTantoBrillo {
    0%, 100% { box-shadow: 0 8px 18px rgba(0, 0, 0, .9), 0 0 0 3px #ffd23f, 0 0 14px 2px rgba(255, 210, 63, .55); filter: brightness(1); }
    50%      { box-shadow: 0 8px 18px rgba(0, 0, 0, .9), 0 0 0 5px #ffe680, 0 0 34px 10px rgba(255, 210, 63, .95); filter: brightness(1.18); }
}

/* Vitrina: las cartas del tanto juntas, en abanico, por encima de las jugadas (que se oscurecen) */
.tg-tanto-atenuada { filter: brightness(.45) saturate(.6); transition: filter .25s ease; }
.tg-tanto-vitrina { position: absolute; z-index: 65; pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.tg-tanto-vitrina.saliendo { opacity: 0; transform: translateY(14px) scale(.95); }
.tg-tanto-vitrina-carta {
    position: absolute; top: 0; aspect-ratio: 2 / 3; border-radius: 8px;
    rotate: var(--giro, 0deg);
}
.tg-tanto-vitrina-carta img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }

/* Cartel de historieta */
.tg-tanto-cartel {
    position: absolute; z-index: 70; pointer-events: none;
    transform: translate(-50%, -100%) rotate(-3deg);
    display: flex; flex-direction: column; align-items: center; gap: 0;
    padding: 6px 26px 8px; border: 4px solid #111; border-radius: 16px;
    box-shadow: 6px 7px 0 rgba(0, 0, 0, .85);
    font-family: var(--tg-fuente-titulo, 'Arial Black', Impact, sans-serif);
    text-align: center; white-space: nowrap;
    animation: tgTantoCartelPop .42s cubic-bezier(.2, 1.5, .4, 1) both;
}
.tg-tanto-cartel.saliendo { animation: tgTantoCartelSale .3s ease-in forwards; }
.tg-tanto-rival  { background: linear-gradient(180deg, #ffe066, #ffb400); color: #7a1208; }
.tg-tanto-nuestro { background: linear-gradient(180deg, #8ff0b0, #2fb865); color: #0c3a1c; }
.tg-tanto-quien {
    font-size: .95rem; letter-spacing: .12em; color: #111;
    font-family: var(--tg-fuente-pizarron, 'Arial Black', Impact, sans-serif);
}
.tg-tanto-num {
    font-size: 2.4rem; line-height: 1; letter-spacing: .02em;
    -webkit-text-stroke: 2px #111; paint-order: stroke fill;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, .55);
}
.tg-tanto-rival .tg-tanto-num { color: #e8331f; }
.tg-tanto-nuestro .tg-tanto-num { color: #fff; }
@keyframes tgTantoCartelPop {
    0%   { opacity: 0; transform: translate(-50%, -80%) rotate(-12deg) scale(.3); }
    100% { opacity: 1; transform: translate(-50%, -100%) rotate(-3deg) scale(1); }
}
@keyframes tgTantoCartelSale {
    to { opacity: 0; transform: translate(-50%, -120%) rotate(-5deg) scale(.9); }
}