.inf-form-container {
    width: 100%;
}

/* Animation for the new form section */
.character-action-animate {
    animation: bbnFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bbnFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation for the removed form section */
.character-action-fade-out {
    animation: bbnFadeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bbnFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
        margin-top: -100px; /* Helps the below rows slide up */
    }
}

/* Ensure the container is ready for absolute positioning of children if needed */
#influence-form {
    transition: all 0.5s ease;
}

/* Influence dashboard */
.card-heater-shield {
    /* Define the Heater Shield shape */
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
    
    aspect-ratio: 4 / 5; 
    width: 115px;
    height: 150px;

    /* Top rounding - makes it look more authentic than a flat top */
    border-radius: 50% 50% 0 0 / 10% 10% 0 0;

    /* Keeps the rest of your established styling */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.5rem;
    /* background: linear-gradient(145deg, #2c2c2c, #1a1a1a); */
    /* Originate from the end of the top-right curve (approx 80% width, 10% height) */
    background: radial-gradient(circle at 80% 10%, #2c2c2c 0%, #1a1a1a 80%);
    position: relative;
    border: round;
    transition: transform 0.3s ease;
}

/* Update the border pseudo-element to match the new shape */
.card-heater-shield::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
    background: transparent;
    /* border: 3px solid maroon; */
    pointer-events: none;
}

.card-heater-shield::before {
    content: "";
    position: absolute;

    /* Use the same clip-path so the light physically CANNOT exist outside the shield bounds */
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
    inset: 0;
    border: round;
    
    /* Narrower beam angled to match the heater curve (approx 120deg) */
    background: linear-gradient(
        120deg, 
        rgba(255, 255, 255, 0) 30%, 
        rgba(255, 255, 255, 0.15) 50%, 
        rgba(255, 255, 255, 0) 70%
    );
    
    /* Start the beam 'parked' up at the top-right curve */
    transform: translateX(100%) translateY(-100%);
    opacity: 0;
    
    transition: transform 0.6s ease-in-out, opacity 0.3s ease;
    z-index: 1;
}

/* Hover state logic */
.card-heater-shield:hover {
    /* Lift and Tilt: Creates a subtle 3D effect */
    transform: translateY(-10px) rotateX(5deg) scale(1.02);
    
    /* Using spread to simulate light hitting the edges */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 
                0 0 15px var(--bbn-primary);
    
    /* Bring back full color */
    filter: grayscale(0%);
}

.card-heater-shield:hover::before {
    /*left: 100%;  Moves the shine across the card */
    opacity: 1;
    transform: translateX(-100%) translateY(100%);
}

/* Animate the crest separately for extra depth */
.card-heater-shield:hover .heraldry-crest {
    transform: scale(1.1);
    transition: transform 0.3s ease-out;
}

.heraldry-crest {
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 2; /* Ensures it stays above the border pseudo-element */
    top: -25%;

    /* Center the icon inside the circle */
    display: inline-flex;
    justify-content: center;
    align-items: center;

}

/* TARGET: The span directly following the badge */
.heraldry-crest + span {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    
    /* Compensate for the badge's 'top' shift to keep them together */
    margin-top: -15px; 
    
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #bbb;
}

.heraldry-crest span {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #1a1a1a;
    /* This adds a slight "inset" look */
    box-shadow: inset 0 0 10px #000, 0 4px 8px rgba(0,0,0,0.5);
}

.use-list {
    list-style-type: none;
    padding-left: 0 !important;
}

/* Add this to your site.css or a <style> block */
.aug-char-search-results {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #444; /* Matches your dark theme */
}

/* Hover effect for results */
.search-result-item {
    cursor: pointer;
    background-color: #212529; /* Dark bg */
    color: #fff;
    border-bottom: 1px solid #333;
}

.search-result-item:hover {
    background-color: var(--bbn-secondary);
    color: white;
}
/* End Influence dashboard */