/* =============================================================================
   REACCIONES DEL CIRUJA (js/ui/reacciones_ciruja.js)
   Cada efecto se ancla en el borde de arriba de la cabeza (left/top) y se mide
   con --w (ancho de la cabeza), así acompaña al Ciruja en cualquier nivel y
   tamaño de pantalla.
   ============================================================================= */
.tgr-efecto { position: absolute; width: 0; height: 0; z-index: 60; pointer-events: none; }

/* ---------- FESTEJO: confeti + notitas ---------- */
.tgr-festejo i {
    position: absolute; left: 0; top: calc(var(--h) * .25);
    width: calc(var(--w) * .07); height: calc(var(--w) * .12); background: var(--c);
    border: 1px solid rgba(0, 0, 0, .45); border-radius: 2px; opacity: 0;
    animation: tgrConfeti 1.6s cubic-bezier(.15, .7, .4, 1) forwards;
}
@keyframes tgrConfeti {
    0%   { opacity: 1; transform: translate(-50%, 0) rotate(0deg) scale(.4); }
    55%  { opacity: 1; transform: translate(calc(-50% + var(--dx) * var(--w)), calc(var(--dy) * var(--w))) rotate(calc(var(--giro) * .6)) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * var(--w) * 1.15), calc(var(--dy) * var(--w) + var(--w) * .9)) rotate(var(--giro)) scale(1); }
}
.tgr-festejo b {
    position: absolute; left: calc(var(--w) * (-.45 + var(--i) * .42)); top: 0;
    font: 900 calc(var(--w) * .32) / 1 'Arial Black', sans-serif; color: #f7c948;
    -webkit-text-stroke: calc(var(--w) * .022) #1a1209; paint-order: stroke fill; opacity: 0;
    animation: tgrNota 1.9s ease-out forwards; animation-delay: calc(var(--i) * 220ms);
}
@keyframes tgrNota {
    0%   { opacity: 0; transform: translate(-50%, 0) rotate(-12deg); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, calc(var(--w) * -.9)) rotate(14deg); }
}

/* ---------- BRONCA: nube de puteadas de historieta + vapor ---------- */
.tgr-puteada {
    position: absolute; left: 0; top: calc(var(--w) * .1); white-space: nowrap;
    padding: calc(var(--w) * .07) calc(var(--w) * .16); border-radius: 50% / 46%;
    background: #fff; border: calc(var(--w) * .025) solid #1a1209; box-shadow: calc(var(--w) * .03) calc(var(--w) * .03) 0 #1a1209;
    font: 900 calc(var(--w) * .26) / 1 "Arial Black", Impact, sans-serif; color: #c0392b; letter-spacing: 1px;
    transform: translate(-50%, -100%) scale(0); animation: tgrPuteada 1.9s ease forwards;
}
@keyframes tgrPuteada {
    0%   { transform: translate(-50%, -100%) scale(0) rotate(-8deg); }
    12%  { transform: translate(-50%, -100%) scale(1.15) rotate(4deg); }
    18%, 30%, 42% { transform: translate(-52%, -100%) scale(1) rotate(-3deg); }
    24%, 36%, 48% { transform: translate(-48%, -100%) scale(1) rotate(3deg); }
    80%  { transform: translate(-50%, -100%) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, -110%) scale(.9); opacity: 0; }
}
.tgr-vapor {
    position: absolute; top: calc(var(--h) * .35); width: calc(var(--w) * .2); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .95) 30%, rgba(230, 230, 230, 0) 70%); opacity: 0;
}
.tgr-vapor.izq { left: calc(var(--w) * -.55); animation: tgrVaporIzq 1.1s ease-out .15s 2; }
.tgr-vapor.der { left: calc(var(--w) * .35);  animation: tgrVaporDer 1.1s ease-out .15s 2; }
@keyframes tgrVaporIzq { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: translate(calc(var(--w) * -.3), calc(var(--w) * -.35)) scale(1.6); } }
@keyframes tgrVaporDer { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: translate(calc(var(--w) * .3), calc(var(--w) * -.35)) scale(1.6); } }

/* ---------- SORPRESA: "!" gigante ---------- */
.tgr-exclama {
    position: absolute; left: calc(var(--w) * .38); top: calc(var(--w) * .12);
    font: 900 calc(var(--w) * .72) / 1 'Arial Black', Impact, sans-serif; color: #f7c948;
    -webkit-text-stroke: calc(var(--w) * .035) #1a1209; paint-order: stroke fill;
    transform: translate(-50%, -100%) scale(0) rotate(-14deg); transform-origin: 50% 100%;
    animation: tgrExclama 1.4s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
@keyframes tgrExclama {
    0%   { transform: translate(-50%, -100%) scale(0) rotate(-14deg); }
    22%  { transform: translate(-50%, -100%) scale(1.15) rotate(8deg); }
    35%  { transform: translate(-50%, -100%) scale(1) rotate(6deg); }
    80%  { transform: translate(-50%, -100%) scale(1) rotate(6deg); opacity: 1; }
    100% { transform: translate(-50%, -100%) scale(.85) rotate(6deg); opacity: 0; }
}

/* ---------- LAMENTO: nubecita que le llueve encima ---------- */
.tgr-nube {
    position: absolute; left: 0; top: calc(var(--w) * .02); width: calc(var(--w) * .8); height: calc(var(--w) * .26);
    background: #8e9aa6; border-radius: 999px; border: calc(var(--w) * .02) solid #2c3640;
    transform: translate(-50%, -100%); opacity: 0; animation: tgrNube 2.5s ease forwards;
}
.tgr-nube::before, .tgr-nube::after {
    content: ''; position: absolute; background: #8e9aa6; border: inherit; border-bottom: 0; border-radius: 50% 50% 0 0;
}
.tgr-nube::before { left: 14%; bottom: 55%; width: 38%; height: 80%; }
.tgr-nube::after  { left: 42%; bottom: 55%; width: 46%; height: 110%; }
@keyframes tgrNube {
    0%   { opacity: 0; transform: translate(-50%, -140%); }
    15%, 85% { opacity: 1; transform: translate(-50%, -100%); }
    100% { opacity: 0; transform: translate(-50%, -100%); }
}
.tgr-lamento i {
    position: absolute; top: calc(var(--w) * .02); width: calc(var(--w) * .035); height: calc(var(--w) * .11);
    background: #5dade2; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; opacity: 0;
    animation: tgrGota .7s linear infinite;
}
.tgr-lamento i:nth-of-type(1) { left: calc(var(--w) * -.2); animation-delay: .5s; }
.tgr-lamento i:nth-of-type(2) { left: calc(var(--w) * -.04); animation-delay: .75s; }
.tgr-lamento i:nth-of-type(3) { left: calc(var(--w) * .12); animation-delay: .62s; }
.tgr-lamento i:nth-of-type(4) { left: calc(var(--w) * .24); animation-delay: .9s; }
@keyframes tgrGota { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--w) * .5)); } }