/* ============================================================
   DIVTEAM XMAS SHOOTER – CSS FINAL (SANTA + ELFO + GUARDAR)
============================================================ */

/* ============================================================
   CURSOR SNIPER
============================================================ */

#cabecera.sniper-mode,
#sniper-cursor.active {
    cursor: none !important;
}

#sniper-cursor {
    position: fixed !important;
    width: 48px;
    height: 48px;
    pointer-events: none !important;
    opacity: 0;

    background-image: url("/style/DivTeam/navidad/images/sniper_cursor.png");
    background-size: contain;
    background-repeat: no-repeat;

    /* Z-INDEX ABSOLUTO → nunca quedará debajo del elfo */
    z-index: 999999999999 !important;

    transition: opacity 0.1s linear, filter 0.1s linear;
}

#sniper-cursor.active {
    opacity: 1;
}

#sniper-cursor.red {
    filter: drop-shadow(0 0 8px red) saturate(5);
}

/* ============================================================
   SANTA
============================================================ */

#santa-peek {
    position: absolute;
    width: 110px;
    height: 110px;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 0;
    z-index: 6;

    pointer-events: none !important;
    transition: opacity 0.25s ease;
}

#santa-peek.sprite-normal {
    background-image: url("/style/DivTeam/navidad/images/santa-normal.png");
}

#santa-peek.sprite-hit {
    background-image: url("/style/DivTeam/navidad/images/santa_hit.png");
    animation: santaHit 1.2s ease-out forwards;
}

#santa-peek.sprite-laugh {
    background-image: url("/style/DivTeam/navidad/images/santa_laugh.png");
    animation: santaDown 1.3s ease-in forwards;
}

/* ============================================================
   ANIMACIONES DE SANTA
============================================================ */

@keyframes santaUp {
    0% { transform: translateY(40px); opacity: 0; }
    100% { transform: translateY(0px); opacity: 1; }
}

@keyframes santaDown {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(40px); opacity: 0; }
}

@keyframes santaHit {
    0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    40% { transform: translateY(10px) rotate(-20deg) scale(1.05); opacity: 1; }
    100% { transform: translateY(80px) rotate(-40deg) scale(0.8); opacity: 0; }
}

/* ============================================================
   ELFO – ENEMIGO LATERAL
============================================================ */

#elfo-fly {
    position: absolute;
    width: 90px;
    height: auto;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    pointer-events: none;
    display: none;

    z-index: 999999998; /* Debajo del cursor, encima del resto */
    opacity: 1;

    transition: transform 0.2s linear;
}

/* ============================================================
   HUD SUPERIOR IZQUIERDO
============================================================ */

#xmas-hud {
    position: absolute;
    top: 10px;
    left: 10px;

    display: flex;
    gap: 14px;

    padding: 8px 14px;
    background: rgba(0,0,0,0.45);
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 10px;

    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 15px;

    z-index: 9999999;
    backdrop-filter: blur(4px);
}

.hud-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 55px;
}

.hud-label {
    font-size: 11px;
    opacity: 0.8;
}

.hud-value {
    font-size: 20px;
    font-weight: bold;
    margin-top: -2px;
}

/* ============================================================
   PANEL FINAL (NIVEL / GAME OVER)
============================================================ */

#xmas-endpanel {
    position: absolute;
    top: 90px;
    left: 10px;

    width: 280px;

    background: rgba(0,0,0,0.8);
    color: #fff;

    padding: 18px 20px;
    border-radius: 10px;
    border: 2px solid #ff4444;

    font-size: 18px;
    font-weight: bold;

    z-index: 99999999;
}

#xmas-endpanel.hidden {
    display: none;
}

#xmas-endpanel-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
}

#xmas-endpanel-subtitle {
    font-size: 14px;
    opacity: 0.85;
    margin-bottom: 18px;
}

/* Botón principal */
#xmas-endpanel-btn {
    width: 100%;
    padding: 8px 12px;

    border: none;
    border-radius: 6px;

    background: #ff4444;
    color: #fff;
    cursor: pointer;

    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

#xmas-endpanel-btn:hover {
    background: #ff6666;
}

/* Botón guardar partida */
#xmas-save-btn {
    width: 100%;
    padding: 8px 12px;

    border: none;
    border-radius: 6px;

    background: #0099ff;
    color: white;
    cursor: pointer;

    font-size: 15px;
    font-weight: bold;
}

#xmas-save-btn:hover {
    background: #33adff;
}

/* ============================================================
   ANIMACIÓN ELFO (opcional)
============================================================ */

@keyframes elfoFly {
    0%   { transform: translateX(0px); }
    100% { transform: translateX(2000px); }
}

/* ============================================================
   FIN CSS
============================================================ */