#hero-announcement-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1900; /* Below coin flip, above game */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none; /* Allow clicks through when hidden */
}

#hero-announcement-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto; /* Block clicks when visible */
}

.announcement-hero-display {
    width: 250px; /* Adjust size as needed */
    height: 250px;
    border: 5px solid gold;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.6);
    background-color: #222; /* Fallback background */
    margin: 20px 0;
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease-out;
    transition-delay: 0.3s; /* Delay entry animation slightly */
}

#hero-announcement-overlay:not(.hidden) .announcement-hero-display {
    transform: scale(1);
    opacity: 1;
}


.announcement-hero-display img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, might crop */
}

#announcement-vs-text {
    font-size: 4em;
    font-weight: bold;
    color: red;
    text-shadow: 2px 2px 5px black;
    margin: 10px 0;
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.5s ease-out, opacity 0.4s ease-out;
    transition-delay: 0.6s; /* Appear after portraits start animating */
}

#hero-announcement-overlay:not(.hidden) #announcement-vs-text {
    transform: scale(1);
    opacity: 1;
}

/* Specific positioning if needed (default is centered column) */
#announcement-opponent-hero {
    /* Positioned top by flexbox */
    transition-delay: 0.3s; /* Opponent appears first */
}

#announcement-player-hero {
     /* Positioned bottom by flexbox */
     transition-delay: 0.4s; /* Player appears slightly after */
}
