/* ==========================================================================
   TRUCACHO GD - PULIDO VISUAL DE LA MESA
   Solo estilos (colores, bordes, tipografía, sombras, animaciones):
   no cambia posiciones ni tamaños de los contenedores de css/estilos.css.
   Cargar DESPUÉS de css/estilos.css (y de css/menu.css, que define la paleta).
   ========================================================================== */

:root {
    --tgi-tinta: #1a0a00;
    --tgi-crema: #f7ecd0;
    --tgi-oro: #ffd23f;
    --tgi-oro-osc: #c98a00;
    --tgi-fuente: Impact, 'Haettenschweiler', 'Arial Narrow Bold', 'Arial Black', sans-serif;
}

/* ---------- Botonera de cantos ---------- */
#panel-acciones-truco .btn-accion-arcade {
    font-family: var(--tgi-fuente);
    font-style: normal;
    font-size: 1.15rem;
    letter-spacing: .07em;
    color: #fff;
    border: 3px solid var(--tgi-tinta);
    border-radius: 12px;
    text-shadow: 2px 2px 0 var(--tgi-tinta), -1px -1px 0 var(--tgi-tinta);
    box-shadow:
        inset 0 0 0 2px rgba(255, 210, 63, .75),
        inset 0 10px 14px -8px rgba(255, 255, 255, .55),
        0 5px 0 var(--tgi-tinta),
        0 8px 12px rgba(0, 0, 0, .55);
    transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), filter .15s ease, box-shadow .15s ease;
}
#panel-acciones-truco .btn-accion-arcade:not(:disabled) { animation: tgiLatido 2.6s ease-in-out infinite; }
#panel-acciones-truco .btn-accion-arcade:not(:disabled):hover,
#panel-acciones-truco .btn-accion-arcade:focus-visible {
    animation: none !important;
    transform: translateY(-3px) rotate(-1deg) scale(1.05);
    filter: brightness(1.12);
    box-shadow:
        inset 0 0 0 2px rgba(255, 210, 63, .95),
        inset 0 10px 14px -8px rgba(255, 255, 255, .6),
        0 8px 0 var(--tgi-tinta),
        0 0 0 3px var(--tgi-oro),
        0 0 22px rgba(255, 210, 63, .7);
    outline: none;
}
#panel-acciones-truco .btn-accion-arcade:not(:disabled):active {
    transform: translateY(3px) scale(.97);
    box-shadow: inset 0 0 0 2px rgba(255, 210, 63, .75), 0 2px 0 var(--tgi-tinta);
    transition-duration: .05s;
}
#panel-acciones-truco .btn-accion-arcade:disabled { border-color: #555; }
@keyframes tgiLatido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* Colores por canto (2026-11-02, pedido del autor): todo lo del TRUCO en verde (cantar, subir, querer),
   todo lo del ENVIDO en amarillo (cantar, querer), y el NO QUIERO es el único rojo. Antes el truco y el
   "QUIERO RETRUCO" eran rojos como el NO QUIERO y confundían. */
#panel-acciones-truco .btn-truco   { background: linear-gradient(180deg, #3fcf7a 0%, #17803f 55%, #0a4a22 100%); }
#panel-acciones-truco .btn-envido  { background: linear-gradient(180deg, #ffe066 0%, #f0a500 55%, #b86e00 100%); }
#panel-acciones-truco .btn-quiero  { background: linear-gradient(180deg, #7fe0a4 0%, #2f8f4e 55%, #14532a 100%); }
/* [2026-11-05] pedido del autor: al responder el envido, QUIERO ENVIDO va VERDE y ARRIBA DE TODO (antes era amarillo como
   REAL ENVIDO y FALTA ENVIDO y quedaba entre ellos: "tan amarillo todo se confunde"). La botonera es flex en columna. */
#panel-acciones-truco .btn-quiero[data-canto="envido"] { order: -1; }
#panel-acciones-truco .btn-noquiero{ background: linear-gradient(180deg, #e0574a 0%, #9c2318 55%, #5c0d06 100%); }
#panel-acciones-truco .btn-mazo    { background: linear-gradient(180deg, #8a7458 0%, #5a4128 55%, #33230f 100%); }
#panel-acciones-truco #btn-canto-paso { background: linear-gradient(180deg, #6a7c8e 0%, #3e4c5a 55%, #222b33 100%); }
#panel-acciones-truco .btn-envido { color: var(--tgi-tinta); text-shadow: 1px 1px 0 rgba(255, 255, 255, .6); }

/* ---------- Órdenes al Ciruja ---------- */
#panel-ordenes-ciruja-mesa {
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 3px, transparent 3px 9px),
        linear-gradient(180deg, rgba(58, 36, 18, .97), rgba(26, 14, 6, .97));
    border: 3px solid var(--tgi-tinta);
    border-radius: 12px;
    padding: 6px 7px 8px;
    box-shadow: inset 0 0 0 2px var(--tgi-oro-osc), 0 6px 0 var(--tgi-tinta), 0 10px 22px rgba(0, 0, 0, .7);
}
#panel-ordenes-ciruja-mesa::before {
    content: 'ÓRDENES AL CIRUJA';
    display: block;
    margin: -1px -2px 2px;
    padding: 2px 6px 3px;
    font-family: var(--tgi-fuente);
    font-size: .68rem;
    letter-spacing: .14em;
    text-align: center;
    color: var(--tgi-tinta);
    background: var(--tgi-oro);
    border-radius: 6px 6px 3px 3px;
}
#panel-ordenes-ciruja-mesa .btn-orden-mesa {
    font-family: var(--tgi-fuente);
    font-style: normal;
    font-size: .82rem;
    letter-spacing: .06em;
    border: 2px solid var(--tgi-tinta);
    border-radius: 7px;
    text-shadow: 1px 1px 0 var(--tgi-tinta), -1px -1px 0 var(--tgi-tinta);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .6), inset 0 7px 9px -6px rgba(255, 255, 255, .5), 0 3px 0 var(--tgi-tinta);
    transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), filter .14s, box-shadow .14s;
}
#panel-ordenes-ciruja-mesa .btn-orden-mesa:hover:not(:disabled),
#panel-ordenes-ciruja-mesa .btn-orden-mesa:focus-visible {
    transform: translateX(3px) scale(1.04);
    filter: brightness(1.15);
    box-shadow: inset 0 0 0 1px var(--tgi-oro), 0 3px 0 var(--tgi-tinta), 0 0 0 2px var(--tgi-oro), 0 0 14px rgba(255, 210, 63, .6);
    outline: none;
}
#panel-ordenes-ciruja-mesa .btn-orden-mesa:active:not(:disabled) { transform: translateY(2px) scale(.97); box-shadow: 0 1px 0 var(--tgi-tinta); }
#panel-ordenes-ciruja-mesa .btn-juga       { background: linear-gradient(180deg, #4b8fc9, #1f4f7a); }
/* Mismo criterio que la botonera del jugador: truco verde, tanto amarillo. PONÉ pasó a violeta para no confundirse con el truco. */
#panel-ordenes-ciruja-mesa .btn-pone       { background: linear-gradient(180deg, #b48ae8, #4b2580); }
#panel-ordenes-ciruja-mesa .btn-veni       { background: linear-gradient(180deg, #f39a45, #a24c06); }
#panel-ordenes-ciruja-mesa .btn-tanto      { background: linear-gradient(180deg, #ffe066, #c98a00); color: var(--tgi-tinta); text-shadow: 1px 1px 0 rgba(255, 255, 255, .6); }
#panel-ordenes-ciruja-mesa .btn-cantatruco { background: linear-gradient(180deg, #3fcf7a, #0a4a22); }
#panel-ordenes-ciruja-mesa .btn-mazo       { background: linear-gradient(180deg, #8a7458, #33230f); }

/* ---------- Menú de pausa ---------- */
#modal-opciones-mesa { background: rgba(8, 4, 2, .78); backdrop-filter: blur(3px); }
#modal-opciones-mesa .contenido-modal-pausa {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .45), transparent 60%),
        linear-gradient(180deg, #fffaf0, #e3cf9f);
    border: 4px solid var(--tgi-tinta);
    border-radius: 16px;
    box-shadow: inset 0 0 0 4px #c8261b, inset 0 0 0 7px #f7ecd0, 0 10px 0 var(--tgi-tinta), 0 18px 40px rgba(0, 0, 0, .7);
    animation: tgiEntrarModal .3s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes tgiEntrarModal { from { transform: scale(.85) rotate(-2deg); opacity: 0; } }
#modal-opciones-mesa .contenido-modal-pausa h2 {
    font-family: var(--tgi-fuente);
    font-size: 1.9rem;
    letter-spacing: .06em;
    color: #c8261b;
    text-shadow: 2px 2px 0 var(--tgi-oro), 3px 3px 0 var(--tgi-tinta);
    -webkit-text-stroke: 0;
}
#modal-opciones-mesa .btn-arcade-opcion {
    font-family: var(--tgi-fuente);
    font-weight: normal;
    font-size: 1.2rem;
    letter-spacing: .07em;
    color: var(--tgi-crema);
    background: linear-gradient(180deg, #5a4128, #33230f);
    border: 3px solid var(--tgi-tinta);
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px rgba(255, 210, 63, .55), 0 4px 0 var(--tgi-tinta);
    text-shadow: 2px 2px 0 var(--tgi-tinta);
    transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), filter .14s, box-shadow .14s;
}
#modal-opciones-mesa .btn-arcade-opcion:first-child { background: linear-gradient(180deg, #5fd38a, #1f6b3a); }
#modal-opciones-mesa .btn-arcade-opcion:hover,
#modal-opciones-mesa .btn-arcade-opcion:focus-visible {
    color: #fff;
    border-color: var(--tgi-tinta);
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.12);
    box-shadow: inset 0 0 0 2px var(--tgi-oro), 0 6px 0 var(--tgi-tinta), 0 0 0 3px var(--tgi-oro);
    outline: none;
}
#modal-opciones-mesa .btn-arcade-opcion:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tgi-tinta); }
#modal-opciones-mesa .btn-arcade-opcion.btn-alarma:hover { background: linear-gradient(180deg, #ff5a48, #8f150c); color: #fff; }
#modal-opciones-mesa .btn-arcade-opcion.btn-salir { background: linear-gradient(180deg, #4a3a2a, #22170d); }
#modal-opciones-mesa .btn-cerrar-modal { color: var(--tgi-tinta); font-weight: bold; }
#modal-opciones-mesa .btn-cerrar-modal:hover { color: #c8261b; }

/* ---------- Fin de chico / las buenas / game over ---------- */
#overlay-fin-chico .btn-pancarta-continuar,
#overlay-las-buenas .btn-pancarta-continuar,
#overlay-buenas-rivales .btn-pancarta-continuar,
#overlay-game-over .btn-reiniciar-partida {
    font-family: var(--tgi-fuente);
    font-style: normal;
    letter-spacing: .07em;
    color: var(--tgi-oro);
    border: 4px solid var(--tgi-tinta);
    border-radius: 14px;
    -webkit-text-stroke: 1px var(--tgi-tinta);
    text-shadow: 3px 3px 0 var(--tgi-tinta);
    box-shadow:
        inset 0 0 0 3px var(--tgi-oro),
        inset 0 0 0 6px rgba(0, 0, 0, .15),
        inset 0 14px 18px -10px rgba(255, 255, 255, .5),
        0 7px 0 var(--tgi-tinta),
        0 14px 30px rgba(0, 0, 0, .7);
    transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), filter .15s;
}
#overlay-fin-chico .btn-pancarta-continuar,
#overlay-las-buenas .btn-pancarta-continuar { background: linear-gradient(180deg, #ff5a48 0%, #c8261b 55%, #8f150c 100%); }
#overlay-fin-chico.derrota-chico .btn-pancarta-continuar { background: linear-gradient(180deg, #8a7458, #33230f); }
#overlay-game-over .btn-reiniciar-partida { background: linear-gradient(180deg, #ff5a48 0%, #c8261b 55%, #8f150c 100%); }
#overlay-fin-chico .btn-pancarta-continuar:hover,
#overlay-las-buenas .btn-pancarta-continuar:hover,
#overlay-buenas-rivales .btn-pancarta-continuar:hover,
#overlay-game-over .btn-reiniciar-partida:hover {
    filter: brightness(1.12);
    transform: translateY(-3px) scale(1.04);
}
#overlay-fin-chico .btn-pancarta-continuar:active,
#overlay-game-over .btn-reiniciar-partida:active { transform: translateY(4px) scale(.98); }

#overlay-game-over { background: radial-gradient(circle, rgba(90, 10, 5, .7) 0%, rgba(0, 0, 0, .88) 80%); }
#overlay-game-over .titulo-game-over {
    font-family: var(--tgi-fuente);
    font-size: 4.6rem;
    letter-spacing: .06em;
    color: #ff5a48;
    -webkit-text-stroke: 3px var(--tgi-tinta);
    text-shadow: 6px 6px 0 var(--tgi-tinta);
}

/* Pantalla de selección de niveles histórica (por si se abre desde código viejo) */
#pantalla-cargar-nivel h2 { font-family: var(--tgi-fuente); letter-spacing: .06em; }

/* ==========================================================================
   TAMAÑO DE LA BOTONERA EN LA MESA (2026-10-31)
   Todas las medidas salen de --tg-u: cambiando ese único valor se agranda o
   achica la botonera entera manteniendo las proporciones.
   ========================================================================== */
/* Versión PC: tamaño fijo (11px por unidad → TRUCO de ~50px de alto, botonera de ~190px de ancho).
   No crece con la pantalla: en monitores grandes se mantiene proporcionado al resto de la mesa. */
#mesa-juego-screen { --tg-u: 11px; }

#panel-acciones-truco {
    width: calc(17 * var(--tg-u));
    min-width: 150px;
    gap: calc(.75 * var(--tg-u));
    right: calc(2 * var(--tg-u));
    bottom: 11%;
}
#panel-acciones-truco .btn-accion-arcade {
    min-height: calc(4.6 * var(--tg-u));
    font-size: max(.95rem, calc(1.85 * var(--tg-u)));
    padding: calc(.6 * var(--tg-u)) calc(.8 * var(--tg-u));
    border-width: max(3px, calc(.3 * var(--tg-u)));
    border-radius: calc(1.1 * var(--tg-u));
}

#panel-ordenes-ciruja-mesa {
    gap: calc(.55 * var(--tg-u));
    padding: calc(.6 * var(--tg-u)) calc(.7 * var(--tg-u)) calc(.8 * var(--tg-u));
    border-radius: calc(1.1 * var(--tg-u));
}
#panel-ordenes-ciruja-mesa::before { font-size: max(.65rem, calc(1.05 * var(--tg-u))); padding: calc(.3 * var(--tg-u)) calc(.6 * var(--tg-u)); }
#panel-ordenes-ciruja-mesa .btn-orden-mesa {
    min-width: calc(15 * var(--tg-u));
    min-height: calc(3.3 * var(--tg-u));
    font-size: max(.8rem, calc(1.4 * var(--tg-u)));
    padding: calc(.45 * var(--tg-u)) calc(1.2 * var(--tg-u));
    border-radius: calc(.7 * var(--tg-u));
}
/* estilos.css fija TRUCO y ENVIDO en 1.4rem con !important: se reemplaza por la medida proporcional */
#panel-acciones-truco .btn-truco { font-size: max(1rem, calc(2.15 * var(--tg-u))) !important; }
#panel-acciones-truco .btn-envido { font-size: max(.95rem, calc(1.85 * var(--tg-u))) !important; }

/* =====================================================================
   BOTÓN ELEGIDO (2026-11-06, js/ui/boton_elegido.js): el botón que tocó el jugador se estampa (copia que crece y brilla,
   con aro dorado y destello) y el resto de la botonera se apaga mientras dura.
   ===================================================================== */
.tg-be-copia {
    position: fixed; z-index: 1000050; pointer-events: none; box-sizing: border-box; margin: 0;
    display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden;
    outline: 3px solid #ffe08a; outline-offset: 2px;
    animation: none !important;
}
.tg-be-copia { box-shadow: 0 0 0 3px #2a1404, 0 0 22px 6px rgba(255, 210, 90, .85), 0 8px 16px rgba(0, 0, 0, .6) !important; }
.tg-be-destello {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 70%);
    transform: translateX(-120%); animation: tgBeDestello .5s .06s ease-out forwards;
}
@keyframes tgBeDestello { to { transform: translateX(120%); } }
.tg-be-aro {
    position: fixed; z-index: 1000049; pointer-events: none; box-sizing: border-box;
    border: 4px solid #ffd54a; box-shadow: 0 0 14px rgba(255, 200, 60, .9);
}
/* el resto de los botones se apagan; el elegido queda escondido debajo de su copia */
.tg-be-eligio .btn-accion-arcade, .tg-be-eligio .btn-orden-mesa {
    opacity: .22 !important; filter: grayscale(1) !important; transform: scale(.93) !important;
    transition: opacity .15s, filter .15s, transform .15s; animation: none !important;
}
.tg-be-eligio .tg-be-elegido { opacity: 0 !important; }

/* =====================================================================
   LAS CARTAS DEL JUGADOR (2026-11-07, js/ui/mano_jugador.js)
   ===================================================================== */
/* tu turno: resplandor dorado suave que late */
#contenedor-mano-jugador.tg-tu-turno .carta-placeholder { animation: tgTuTurno 1.6s ease-in-out infinite; }
@keyframes tgTuTurno {
    0%, 100% { box-shadow: 0 8px 18px rgba(0, 0, 0, .9), 0 0 0 2px rgba(255, 214, 90, .55), 0 0 10px 2px rgba(255, 200, 60, .35); }
    50%      { box-shadow: 0 8px 18px rgba(0, 0, 0, .9), 0 0 0 3px rgba(255, 220, 110, .95), 0 0 28px 9px rgba(255, 196, 50, .85); }
}
/* dos del mismo palo: brillo blanco que destella dos veces (1 s) */
#contenedor-mano-jugador .carta-placeholder.tg-mismo-palo { animation: tgMismoPalo 1s ease-in-out both !important; }
@keyframes tgMismoPalo {
    0%, 50%, 100% { box-shadow: 0 8px 18px rgba(0, 0, 0, .9), 0 0 0 0 rgba(255, 255, 255, 0); }
    25%, 75%      { box-shadow: 0 8px 18px rgba(0, 0, 0, .9), 0 0 0 3px #fff, 0 0 26px 8px rgba(255, 255, 255, .85); }
}
/* toque en el celular: la carta se levanta como con el mouse */
#contenedor-mano-jugador .carta-placeholder.tg-toque {
    transform: translateY(-22px) scale(1.08) !important; z-index: 10;
    box-shadow: 0 22px 40px rgba(0, 0, 0, 1), 0 0 25px rgba(241, 196, 15, .9);
}
/* rastro de la carta que viaja a la mesa */
.tg-rastro-carta { position: fixed; z-index: 1000020; pointer-events: none; object-fit: contain; transform-origin: 50% 50%; }

/* =====================================================================
   BOTONERA CON LA LETRA DEL JUEGO (2026-11-07, pedido del autor): Lilita One (la de la pizarra, los globos y el
   "REPARTIENDO...") en vez de Impact, con borde oscuro y relieve hacia abajo. Los colores de cada canto no cambian.
   ===================================================================== */
#panel-acciones-truco .btn-accion-arcade,
#panel-ordenes-ciruja-mesa .btn-orden-mesa,
#panel-ordenes-ciruja-mesa::before {
    font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif); font-weight: normal;
}
#panel-acciones-truco .btn-accion-arcade {
    font-size: 1.12rem; letter-spacing: .05em;
    -webkit-text-stroke: 3px var(--tgi-tinta); paint-order: stroke fill;
    text-shadow: 0 1px 0 var(--tgi-tinta), 1px 2px 0 var(--tgi-tinta), 1px 3px 0 var(--tgi-tinta), 2px 4px 3px rgba(0, 0, 0, .45);
}
#panel-acciones-truco .btn-envido {
    -webkit-text-stroke: 3px rgba(255, 246, 210, .9);
    text-shadow: 0 1px 0 rgba(120, 70, 0, .55), 1px 2px 0 rgba(120, 70, 0, .45);
}
#panel-ordenes-ciruja-mesa .btn-orden-mesa {
    /* [2026-11-07] el autor: "se ven chicas" → antes .8rem fijo (13px); ahora ~19px en PC y escala con --tg-u */
    font-size: max(1rem, calc(1.75 * var(--tg-u))); letter-spacing: .04em;
    min-height: calc(3.9 * var(--tg-u));
    -webkit-text-stroke: 3px var(--tgi-tinta); paint-order: stroke fill;
    text-shadow: 0 1px 0 var(--tgi-tinta), 1px 2px 0 var(--tgi-tinta);
}
#panel-ordenes-ciruja-mesa .btn-tanto { -webkit-text-stroke: 3px rgba(255, 246, 210, .9); text-shadow: 0 1px 0 rgba(120, 70, 0, .5); }
#panel-ordenes-ciruja-mesa::before { font-size: max(.75rem, calc(1.2 * var(--tg-u))); }

/* [2026-11-07] Tamaño de la botonera elegido en Opciones (CHICA / NORMAL / GRANDE): js/sistemas/config.js pone --tg-botonera */
#panel-acciones-truco, #panel-ordenes-ciruja-mesa { zoom: var(--tg-botonera, 1); }

/* =====================================================================
   BOTONES BLOQUEADOS CON MOTIVO (2026-11-07, pedido del autor; js/juego.js ponerBloqueo + js/ui/boton_elegido.js):
   el canto que ahora no se puede usar queda sombreado (sin latido ni brillo al pasar el mouse) y al tocarlo
   se sacude "que no" y aparece un cartelito con el motivo.
   ===================================================================== */
#panel-acciones-truco .btn-accion-arcade.boton-bloqueado-prohibido,
#panel-ordenes-ciruja-mesa .btn-orden-mesa.boton-bloqueado-prohibido {
    opacity: .45; filter: grayscale(.85) brightness(.8) !important; cursor: not-allowed;
    animation: none !important; transform: none !important;
}
#panel-acciones-truco .btn-accion-arcade.boton-bloqueado-prohibido:hover,
#panel-ordenes-ciruja-mesa .btn-orden-mesa.boton-bloqueado-prohibido:hover { opacity: .6; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3), 0 3px 0 var(--tgi-tinta); }
#panel-acciones-truco .btn-accion-arcade.boton-bloqueado-prohibido.tg-bloq-niega,
#panel-ordenes-ciruja-mesa .btn-orden-mesa.boton-bloqueado-prohibido.tg-bloq-niega { animation: tgBloqNiega .38s ease-in-out !important; }
@keyframes tgBloqNiega {
    0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); } 80% { transform: translateX(2px); }
}
.tg-bloq-cartel {
    position: fixed; z-index: 1000060; pointer-events: none; max-width: 260px;
    padding: 7px 12px 8px; border-radius: 10px;
    font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif); font-size: 15px; letter-spacing: .04em; line-height: 1.15;
    color: var(--tgi-crema); background: rgba(26, 10, 0, .94);
    border: 2px solid var(--tgi-oro); box-shadow: 0 4px 0 var(--tgi-tinta), 0 8px 18px rgba(0, 0, 0, .6);
    opacity: 0; transform: translateY(4px) scale(.96); transition: opacity .16s ease, transform .16s ease;
}
.tg-bloq-cartel.tg-visible { opacity: 1; transform: none; }