/**
 * Poke Royale - Tower Styles
 * Section 3: Tower Styles
 * Contains: Tower platform, HP bars, positioning, attack animations, dormant/activated states
 */

/* ===== Legendary Towers ===== */
.tower {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    transition: filter 0.1s;
}

/* Tower platform/pedestal */
.tower-platform {
    position: absolute;
    bottom: -15px;
    width: 90px;
    height: 35px;
    background: linear-gradient(180deg, 
        rgba(80, 80, 100, 0.9) 0%,
        rgba(50, 50, 70, 0.95) 40%,
        rgba(30, 30, 50, 1) 100%);
    border-radius: 8px 8px 4px 4px;
    border: 2px solid rgba(100, 100, 120, 0.8);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.6),
        inset 0 2px 0 rgba(255, 255, 255, 0.15),
        inset 0 -5px 15px rgba(0, 0, 0, 0.3);
    z-index: -1;
}

.tower-platform::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 5px;
    right: 5px;
    height: 8px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,255,255,0.1) 30%,
        rgba(255,255,255,0.2) 50%,
        rgba(255,255,255,0.1) 70%,
        transparent 100%);
    border-radius: 4px;
}

.tower.player .tower-platform {
    background: linear-gradient(180deg, 
        rgba(59, 76, 202, 0.7) 0%,
        rgba(40, 50, 140, 0.85) 40%,
        rgba(30, 40, 100, 1) 100%);
    border-color: rgba(100, 130, 255, 0.5);
}

.tower.enemy .tower-platform {
    background: linear-gradient(180deg, 
        rgba(180, 60, 80, 0.7) 0%,
        rgba(140, 40, 60, 0.85) 40%,
        rgba(100, 30, 50, 1) 100%);
    border-color: rgba(255, 100, 120, 0.5);
}

.tower.king .tower-platform {
    width: 110px;
    height: 40px;
    bottom: -18px;
}

/* Tower Sprite */
.tower-sprite {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
    transition: transform 0.15s;
    animation: tower-idle 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes tower-idle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.tower.king .tower-sprite {
    width: 100px;
    height: 100px;
    animation: tower-idle-king 2.5s ease-in-out infinite;
}

@keyframes tower-idle-king {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.02); }
}

/* Dormant king tower (not yet activated) */
.tower.king.dormant .tower-sprite {
    filter: grayscale(0.6) brightness(0.7);
    animation: tower-idle-dormant 3s ease-in-out infinite;
}

.tower.king.dormant::after {
    content: '💤';
    position: absolute;
    top: -10px;
    right: -5px;
    font-size: 16px;
    animation: float-zzz 2s ease-in-out infinite;
}

@keyframes tower-idle-dormant {
    0%, 100% { transform: translateY(0) scale(0.98); }
    50% { transform: translateY(-3px) scale(1); }
}

@keyframes float-zzz {
    0%, 100% { opacity: 0.5; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-5px); }
}

/* Activated king tower glow */
.tower.king.activated .tower-sprite {
    filter: drop-shadow(0 0 15px rgba(255,50,50,0.6)) drop-shadow(0 0 30px rgba(255,100,100,0.3));
}

.tower.enemy .tower-sprite {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)) hue-rotate(-10deg) saturate(1.3);
}

/* Tower attacking animation */
.tower.attacking .tower-sprite {
    animation: tower-attack 0.4s ease-out !important;
}

@keyframes tower-attack {
    0% { transform: scale(1); filter: brightness(1); }
    30% { transform: scale(1.15); filter: brightness(1.5); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Tower type-specific attack glow */
.tower.attacking.type-ice .tower-sprite {
    filter: drop-shadow(0 0 20px #67e8f9) drop-shadow(0 0 40px #3b82f6) brightness(1.3) !important;
}

.tower.attacking.type-electric .tower-sprite {
    filter: drop-shadow(0 0 20px #fcd34d) drop-shadow(0 0 40px #fbbf24) brightness(1.4) !important;
}

.tower.attacking.type-fire .tower-sprite {
    filter: drop-shadow(0 0 20px #ff6b35) drop-shadow(0 0 40px #dc2626) brightness(1.3) !important;
}

.tower.attacking.type-psychic .tower-sprite {
    filter: drop-shadow(0 0 20px #f472b6) drop-shadow(0 0 40px #be185d) brightness(1.3) !important;
}

.tower.attacking.type-water .tower-sprite {
    filter: drop-shadow(0 0 20px #60a5fa) drop-shadow(0 0 40px #2563eb) brightness(1.3) !important;
}

.tower.attacking.type-dragon .tower-sprite {
    filter: drop-shadow(0 0 20px #a855f7) drop-shadow(0 0 40px #7c3aed) brightness(1.3) !important;
}

.tower.attacking.type-ghost .tower-sprite {
    filter: drop-shadow(0 0 20px #a78bfa) drop-shadow(0 0 40px #6d28d9) brightness(1.3) !important;
}

.tower.attacking.type-flying .tower-sprite {
    filter: drop-shadow(0 0 20px #93c5fd) drop-shadow(0 0 40px #60a5fa) brightness(1.3) !important;
}

/* Tower attack charge-up ring */
.tower-charge-ring {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    animation: charge-ring-expand 0.4s ease-out forwards;
    z-index: 5;
}

.tower.king .tower-charge-ring {
    width: 120px;
    height: 120px;
}

@keyframes charge-ring-expand {
    0% { transform: scale(0.3); opacity: 1; border-width: 6px; }
    100% { transform: scale(1.5); opacity: 0; border-width: 1px; }
}

.tower-charge-ring.ice { border-color: #67e8f9; box-shadow: 0 0 20px #3b82f6; }
.tower-charge-ring.electric { border-color: #fcd34d; box-shadow: 0 0 20px #fbbf24; }
.tower-charge-ring.fire { border-color: #ff6b35; box-shadow: 0 0 20px #dc2626; }
.tower-charge-ring.psychic { border-color: #f472b6; box-shadow: 0 0 20px #be185d; }

/* Tower HP Bar */
.tower-hp-bar {
    width: 70px;
    height: 10px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 5px;
    margin-top: -5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.tower.king .tower-hp-bar {
    width: 90px;
    height: 12px;
}

.tower-hp-fill {
    height: 100%;
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
    transition: width 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.tower-hp-fill.warning {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
}

.tower-hp-fill.critical {
    background: linear-gradient(180deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
    animation: pulse 0.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.tower-crown {
    position: absolute;
    top: -25px;
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Tower positions */
.tower.enemy.left { top: 8%; left: 12%; }
.tower.enemy.right { top: 8%; right: 12%; }
.tower.enemy.king { top: 2%; left: 50%; transform: translateX(-50%); }
.tower.player.left { bottom: 18%; left: 12%; }
.tower.player.right { bottom: 18%; right: 12%; }
.tower.player.king { bottom: 8%; left: 50%; transform: translateX(-50%); }