/* Efectos y animaciones de la partida y el lobby.
   Solo reacciona a clases y estilos que ya pone DLL.dll; no cambia la lógica del juego.
   Coordenadas en el espacio del juego (800x600, el contenedor se escala). */

/* ---------- Teclas de atajo (se ven al mantener Alt) ---------- */

.Alt {
    padding: 0 5px;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: linear-gradient(180deg, #fff, #e3dcff) !important;
    box-shadow: 0 2px 0 var(--ink);
    color: var(--ink) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 15px;
}

/* ---------- Temporizador de turno: solo es visible en TU turno ---------- */

#turn_timer { filter: drop-shadow(0 4px 0 rgba(29, 15, 58, .6)) drop-shadow(0 0 10px rgba(255, 210, 63, .55)); }

/* Cartel "¡TU TURNO!" en el centro (aparece cada vez que el temporizador se muestra) */
#turn_timer::after {
    content: "¡TU TURNO!";
    position: absolute;
    left: -475px;
    white-space: nowrap;
    top: 200px;
    width: 400px;
    text-align: center;
    pointer-events: none;
    font-family: var(--font);
    font-size: 54px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--yellow);
    background: linear-gradient(180deg, #fff7b0 0%, #ffd23f 50%, #ff8a1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px var(--ink);
    paint-order: stroke fill;
    filter: drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 0 16px rgba(255, 138, 31, .8));
    opacity: 0;
    animation: fxMyTurn 1.9s .4s cubic-bezier(.2, .9, .3, 1.3) forwards;
}

@keyframes fxMyTurn {
    0% { opacity: 0; transform: scale(.2) rotate(-8deg); }
    18% { opacity: 1; transform: scale(1.15) rotate(3deg); }
    28% { transform: scale(1) rotate(0); }
    75% { opacity: 1; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(.9) translateY(-30px); }
}

/* Últimos 5 segundos: el número late en rojo (sprite de 100px por segundo) */
#turn_timer[style*="y: 0px"],
#turn_timer[style*="y: -100px"],
#turn_timer[style*="y: -200px"],
#turn_timer[style*="y: -300px"],
#turn_timer[style*="y: -400px"] {
    animation: fxUrgent .5s ease-in-out infinite alternate;
}

@keyframes fxUrgent {
    from { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 40, 60, .6)); }
    to { transform: scale(1.12); filter: drop-shadow(0 0 18px rgba(255, 40, 60, 1)) brightness(1.15); }
}

/* Mientras es tu turno, la barra de potencia brilla */
#gameScreen:has(#turn_timer[style*="display: block"]) #powerMarkArea {
    border-radius: 6px;
    animation: fxPowerArea 1.4s ease-in-out infinite;
}

@keyframes fxPowerArea {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0); }
    50% { box-shadow: 0 0 10px 2px rgba(255, 210, 63, .55); }
}

/* ---------- Barra de potencia ---------- */

#powerBar {
    filter: drop-shadow(0 0 3px rgba(255, 210, 63, .9)) saturate(1.3);
    animation: fxPowerBar .7s ease-in-out infinite alternate;
}

@keyframes fxPowerBar {
    from { filter: drop-shadow(0 0 2px rgba(255, 210, 63, .7)) saturate(1.2); }
    to { filter: drop-shadow(0 0 6px rgba(255, 120, 30, 1)) saturate(1.5) brightness(1.15); }
}

#powerMark { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 6px var(--cyan)); }

#last_power_mark { animation: fxBlink 1.2s ease-in-out infinite; }

@keyframes fxBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* ---------- Armas (1, 2, SS) ---------- */

#btnShot1, #btnShot2, #btnShotSS {
    border-radius: 10px;
    transition: transform .12s ease-out, filter .12s;
}

#btnShot1:hover, #btnShot2:hover, #btnShotSS:hover { transform: translateY(-3px) scale(1.08); }

#btnShot1.Pressed, #btnShot2.Pressed, #btnShotSS.Pressed {
    animation: fxWeapon 1.1s ease-in-out infinite;
}

@keyframes fxWeapon {
    0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 3px var(--yellow)) drop-shadow(0 0 6px var(--orange)); }
    50% { transform: translateY(-3px); filter: drop-shadow(0 0 7px var(--yellow)) drop-shadow(0 0 12px var(--orange)) brightness(1.1); }
}

#btnShot1.grayscale, #btnShot2.grayscale, #btnShotSS.grayscale { opacity: .6; }

/* SS disponible: destello para que se note */
#btnShotSS:not(.grayscale):not(.Pressed) { animation: fxSSReady 2.2s ease-in-out infinite; }

@keyframes fxSSReady {
    0%, 80%, 100% { filter: none; }
    88% { filter: brightness(1.6) drop-shadow(0 0 8px var(--cyan)); }
}

#btnPass, #btnEsc, #slice_drag_button { transition: transform .12s, filter .12s; }
#btnPass:hover, #btnEsc:hover, #slice_drag_button:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.1); }
#btnPass:active, #btnEsc:active, #slice_drag_button:active { transform: translateY(1px) scale(.96); }

/* ---------- Ítems ---------- */

[id^=gameItemSlot] { transition: transform .12s ease-out, filter .12s; }

[id^=gameItemSlot]:hover {
    transform: translateY(-3px) scale(1.05);
    filter: brightness(1.12) drop-shadow(0 3px 0 rgba(29, 15, 58, .6));
}

[id^=gameItemSlot]:active { transform: scale(.94); }

#message_over_items.items_locked { animation: fxLocked 2.4s ease-in-out infinite; }

@keyframes fxLocked {
    0%, 100% { opacity: .9; }
    50% { opacity: .55; }
}

/* Muerte súbita */
#message_over_items.sudden_death { animation: fxSudden .9s ease-in-out infinite; }

@keyframes fxSudden {
    0%, 100% { transform: none; filter: drop-shadow(0 0 4px rgba(255, 30, 60, .7)); }
    25% { transform: translateX(-2px) rotate(-1deg); }
    50% { filter: drop-shadow(0 0 14px rgba(255, 30, 60, 1)) brightness(1.2); }
    75% { transform: translateX(2px) rotate(1deg); }
}

/* ---------- Clima: el activo late, los siguientes en gris ---------- */

[id^=weatherSlot] { transition: transform .2s; }
[id^=weatherSlot].grayscale { opacity: .65; }

#weatherSlot1 {
    border-radius: 50%;
    animation: fxWeather 1.6s ease-in-out infinite;
}

@keyframes fxWeather {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #fff); }
    50% { transform: scale(1.18); filter: drop-shadow(0 0 7px var(--cyan)); }
}

/* ---------- Lista de turnos ---------- */

#turns_list .turn_list_title {
    font-weight: 700;
    color: var(--yellow) !important;
    text-shadow: 0 1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink) !important;
}

.turn_line {
    border-radius: 6px;
    transition: background-color .2s;
}

.turn_line_name, .turn_line_delay { font-weight: 600; }

/* El primero de la lista es quien juega ahora */
#turn_line0 { box-shadow: inset 3px 0 0 var(--yellow); }

.turn_line_me {
    background: linear-gradient(90deg, rgba(255, 210, 63, .55), rgba(255, 63, 164, .35) 60%, rgba(255, 63, 164, 0)) !important;
    background-size: 200% 100% !important;
    animation: fxMeLine 2.5s linear infinite;
}

@keyframes fxMeLine {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/* ---------- Chat de la partida y del lobby ---------- */

#gameChat .gumbao-chat-line,
#channel .gumbao-chat-line {
    animation: fxChatIn .35s ease-out backwards;
}

@keyframes fxChatIn {
    from { opacity: 0; transform: translateX(-14px); }
    to { opacity: 1; transform: none; }
}

#gameChat .ztext, #gameChat .gumbao-chat-line {
    font-weight: 500;
    text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 0 4px rgba(0, 0, 0, .8) !important;
}

#gameInput {
    box-sizing: border-box;
    border: 1px solid rgba(35, 213, 255, .35) !important;
    border-radius: 4px !important;
    background: rgba(4, 6, 26, .35) !important;
    color: #fff !important;
    font-weight: 500;
    outline: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

#gameInput:focus { background: rgba(4, 6, 26, .82) !important; border-color: var(--cyan) !important; box-shadow: 0 0 0 1px var(--cyan), 0 0 14px rgba(35, 213, 255, .5); }

/* ---------- Textos grandes de la partida (Ready, Tutorial, kills, eventos) ---------- */

.BonusMsg, .EventGameMsg1, .EventGameMsg2, .EventGameMsg3 {
    font-family: var(--font) !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
    -webkit-text-stroke: 3px var(--ink);
    paint-order: stroke fill;
    text-shadow: 0 6px 0 var(--ink), 0 0 30px rgba(0, 0, 0, .55) !important;
}

.EventGameMsg2 { color: var(--lime) !important; animation: fxReady 2s ease-out forwards !important; }
.EventGameMsg3 { color: #ff7ad9 !important; animation: fxReady 2s ease-out forwards !important; }
.BonusMsg { animation: fxBonus 2s ease-out forwards !important; }
.EventGameMsg1 { color: #ff6fae !important; animation: fxEvent 10s ease-out forwards !important; }

@keyframes fxReady {
    0% { opacity: 0; transform: scale(3); }
    15% { opacity: 1; transform: scale(.9); }
    25% { transform: scale(1.05); }
    35%, 75% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.4); }
}

@keyframes fxBonus {
    0% { opacity: 0; transform: translateY(40px) scale(.4) rotate(-6deg); }
    15% { opacity: 1; transform: translateY(0) scale(1.15) rotate(2deg); }
    25% { transform: scale(1) rotate(0); }
    75% { opacity: 1; transform: translateY(-10px); }
    100% { opacity: 0; transform: translateY(-60px) scale(.9); }
}

@keyframes fxEvent {
    0% { opacity: 0; transform: scale(.5); }
    5% { opacity: 1; transform: scale(1.1); }
    8%, 85% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: translateY(-40px); }
}

/* ---------- Fin de partida ---------- */

#game_over .score { animation: fxScoreIn .45s cubic-bezier(.2, .9, .3, 1.2) both; }
#game_over #score0 { animation-delay: .25s; }
#game_over #score1 { animation-delay: .35s; }
#game_over #score2 { animation-delay: .45s; }
#game_over #score3 { animation-delay: .55s; }
#game_over #score4 { animation-delay: .65s; }
#game_over #score5 { animation-delay: .75s; }
#game_over #score6 { animation-delay: .85s; }
#game_over #score7 { animation-delay: .95s; }

@keyframes fxScoreIn {
    from { opacity: 0; transform: translateY(30px) scale(.9); }
    to { opacity: 1; transform: none; }
}

#game_over .score_name, #game_over .score_gp, #game_over .score_gold { font-weight: 700; }

#scores_lose_a.win, #scores_lose_b.win { animation: fxWin 1.4s ease-in-out .6s infinite; }

@keyframes fxWin {
    0%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 6px var(--yellow)); }
    50% { transform: scale(1.06) rotate(-2deg); filter: drop-shadow(0 0 18px var(--yellow)) brightness(1.15); }
}

#GameOverMyGPGot, #GameOverMyGoldGot {
    font-weight: 700 !important;
    -webkit-text-stroke: 2px var(--ink);
    paint-order: stroke fill;
    animation: fxGot .6s 1.1s cubic-bezier(.2, .9, .3, 1.5) backwards;
}

#GameOverMyGPGot { color: var(--yellow) !important; }
#GameOverMyGoldGot { color: #fff3a6 !important; }

@keyframes fxGot {
    from { opacity: 0; transform: scale(.3); }
    to { opacity: 1; transform: scale(1); }
}

/* ---------- Lobby ---------- */

/* Salas: se elevan al pasar el ratón */
.room { transition: transform .12s ease-out, filter .12s; }
.room:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.08) drop-shadow(0 4px 0 rgba(29, 15, 58, .5)); }

/* Botones de premios / cash: bamboleo para llamar la atención */
#event_button, #buttonCharge2 { animation: fxWiggle 3.2s ease-in-out infinite; }
#facebook_post.intermitente { animation: fxWiggle 1.6s ease-in-out infinite; }

@keyframes fxWiggle {
    0%, 82%, 100% { transform: rotate(0); }
    85% { transform: rotate(-7deg) scale(1.06); }
    89% { transform: rotate(6deg) scale(1.06); }
    93% { transform: rotate(-4deg); }
    97% { transform: rotate(2deg); }
}

#event_button:hover, #buttonCharge2:hover { animation: none; }

/* Tarjetas de servidor: entran escalonadas */
#BrokerScreen .BrokerChannel { animation: fxCardIn .4s cubic-bezier(.2, .9, .3, 1.3) backwards; }
#BrokerChannel0 { animation-delay: .05s !important; }
#BrokerChannel1 { animation-delay: .1s !important; }
#BrokerChannel2 { animation-delay: .15s !important; }
#BrokerChannel3 { animation-delay: .2s !important; }
#BrokerChannel4 { animation-delay: .25s !important; }
#BrokerChannel5 { animation-delay: .3s !important; }
#BrokerChannel6 { animation-delay: .35s !important; }
#BrokerChannel7 { animation-delay: .4s !important; }
#BrokerChannel8 { animation-delay: .45s !important; }
#BrokerChannel9 { animation-delay: .5s !important; }
#BrokerChannel10 { animation-delay: .55s !important; }

@keyframes fxCardIn {
    from { opacity: 0; transform: translateY(18px) scale(.85); }
    to { opacity: 1; transform: none; }
}

/* Diálogos: entrada con rebote */
#myDialog .AlertBox { animation: fxPop .35s cubic-bezier(.2, .9, .3, 1.4) backwards !important; }

@keyframes fxPop {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: scale(1); }
}

/* ---------- Accesibilidad: sin animaciones si el sistema lo pide ---------- */

@media (prefers-reduced-motion: reduce) {
    #turn_timer, #turn_timer::after, #powerBar, #powerMarkArea, #last_power_mark, [id^=btnShot], [id^=weatherSlot],
    #message_over_items, .turn_line_me, .gumbao-chat-line, #game_over *, #event_button, #buttonCharge2, #facebook_post,
    .BrokerChannel, #myDialog .AlertBox, #LoadingS::before {
        animation-duration: .01s !important;
        animation-iteration-count: 1 !important;
    }
}