/* --- ELEMENTOS DEL JUEGO --- */
.duck {
    position: absolute;
    width: 34px;
    height: 34px;
    background-image: url('https://i0.wp.com/github.com/elpsk/Unity3D-Nintentdo_Duck_Hunt/raw/master/Assets/Resources/duckhunt_various_sheet.png?ssl=1');
    background-repeat: no-repeat;
    background-size: auto;
    z-index: 10;
    transform-origin: center center;
    image-rendering: pixelated;
}

.duck.controlled {
    z-index: 20;
    filter: brightness(1.3);
}

/* Indicador circular punteado para el pato controlado */
.duck.controlled::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px; /* Centrar perfectamente: -(width/2) */
    border: 2px dashed cyan;
    border-radius: 50%;
    box-sizing: border-box;
    animation: spin 3s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes spin { 100% { transform: rotate(360deg); } }

.duck-health {
    position: absolute;
    bottom: -8px; left: 0;
    width: 100%;
    height: 4px;
    background: #000;
    border-radius: 2px;
}

.duck-health-fill {
    height: 100%;
    background: #0f0;
    width: 100%;
    transition: width 0.1s;
}

/* Mira del cazador */
.crosshair {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
}
.crosshair.visible { opacity: 1; }
.crosshair::before,
.crosshair::after {
    content: '';
    position: absolute;
    background: red;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.crosshair::before { width: 100%; height: 2px; }
.crosshair::after  { height: 100%; width: 2px; }

/* Efectos de disparo */
.muzzle-flash {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 10%, #ffaa00 40%, transparent 80%);
    z-index: 55;
    animation: flashFast 0.08s linear forwards;
}

@keyframes flashFast {
    0%   { opacity: 1; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(1); }
}

.bullet-trail {
    position: absolute;
    width: 2px;
    background: rgba(255,255,0,0.5);
    z-index: 45;
}

/* ── POWER-UPS ──────────────────────────────────────────────────── */
.powerup {
    position: absolute;
    font-size: 22px;
    z-index: 30;
    cursor: default;
    filter: drop-shadow(0 0 6px var(--pu-color, #fff));
    animation: puFloat 2s ease-in-out infinite, puAppear 0.3s ease forwards;
    transform-origin: center;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.powerup-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: pixelated;
}

@keyframes puFloat {
    0%,100% { transform: translateY(0)   rotate(-5deg); }
    50%      { transform: translateY(-8px) rotate(5deg);  }
}

@keyframes puAppear {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1);   }
}

.powerup-collect {
    animation: puCollect 0.4s ease forwards !important;
}
@keyframes puCollect {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Texto flotante al recoger */
.powerup-float {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    pointer-events: none;
    z-index: 60;
    text-shadow: 1px 1px 0 #000;
    animation: pfloat 0.8s ease forwards;
}
@keyframes pfloat {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-40px); }
}

/* Pato con escudo activo */
.duck-shielded {
    filter: brightness(1.4) drop-shadow(0 0 8px #00aaff) !important;
}
.duck-shielded::before {
    content: '🛡️';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
}

/* 🦆 PATO CONTROLADO: Indicador visual de líder de la bandada */
.duck.controlled {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8)); /* Dorado suave */
}
/* Estrella indicadora de líder (se mantiene en ::after) */
.duck.controlled::after {
    content: '⭐';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    animation: starPulse 1s ease-in-out infinite;
    text-shadow: 0 0 4px rgba(255,215,0,0.9);
    z-index: 25;
}

@keyframes starPulse {
    0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50%      { opacity: 0.7; transform: translateX(-50%) scale(0.85); }
}

/* 🦆 PATOS NPC: Estilo sutil para diferenciar del líder */
.duck:not(.controlled) {
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.2));
}