/* slots.css - Unit Slots and Unit Sprite Containers */

.slot-area {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 4px;
    padding: 10px;
    z-index: 2; /* [User Request] Slots z=2 */
    background: transparent;
    margin-top: 148px;
}

.card-slot {
    position: relative;
    box-sizing: border-box;
    border: none; 
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: visible; 
    z-index: 2; /* [User Request] Slots z=2 */
}

.card-slot:hover::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 80%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
}

.card-slot:hover { transform: scale(1.1); }
.card-slot.occupied { border: none; background: transparent; box-shadow: none; }

.card-slot.drag-over {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

.unit {
    position: relative;
    width: 80%; height: 80%;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; z-index: 110; /* [User Request] Above bottom-panel (100) */
    pointer-events: auto; background: transparent;
    overflow: visible;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.unit.selected { 
    transform: scale(1.1); 
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: brightness(0.7) contrast(1.2); /* [User Request] Dim selected unit to make buttons pop */
}

.unit.summoning { animation: holySummon 0.8s ease-out forwards; }

@keyframes holySummon {
    0% { transform: scale(0) translateY(20px); filter: brightness(10) blur(5px); opacity: 0; }
    50% { transform: scale(1.2) translateY(-10px); filter: brightness(5) blur(2px); opacity: 1; }
    100% { transform: scale(1) translateY(0); filter: brightness(1) blur(0); opacity: 1; }
}

.unit-overlay-btn {
    position: absolute; width: 44px; height: 44px;
    background: linear-gradient(145deg, #222, #000);
    border-radius: 50%;
    display: none; justify-content: center; align-items: center;
    font-size: 24px; cursor: pointer; z-index: 120;
    border: 3px solid #fff; pointer-events: auto;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 10px rgba(0,0,0,0.8);
}

.unit.selected .unit-overlay-btn { display: flex; }

.unit-overlay-btn:hover { 
    transform: scale(1.25); 
    background: #fff; 
    color: #000;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    z-index: 121; 
}

/* Positional Classes: Clock-based - Moved inward to stay within slot */
.promote-10 { 
    top: -15px; left: -15px; 
    border-color: #00ff00; color: #00ff00; 
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
}
.promote-12 { 
    top: -22px; left: calc(50% - 22px); 
    border-color: #00e5ff; color: #00e5ff; 
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}
.promote-2 { 
    top: -15px; right: -15px; 
    border-color: #ffd700; color: #ffd700; 
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.sell-btn { 
    bottom: -15px; left: calc(50% - 22px); 
    border-color: #ff1744; color: #ff1744; 
    background: linear-gradient(145deg, #300, #000);
    box-shadow: 0 0 20px rgba(255, 23, 68, 0.5); 
    animation: dangerPulse 1.5s infinite alternate;
}

@keyframes dangerPulse {
    from { box-shadow: 0 0 10px rgba(255, 23, 68, 0.4); filter: brightness(1); }
    to { box-shadow: 0 0 25px rgba(255, 23, 68, 0.8); filter: brightness(1.3); }
}

.cooldown-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: conic-gradient(rgba(0, 0, 0, 0.3) 0deg, transparent 0deg);
    pointer-events: none; z-index: 5;
}