.characters-section {
  position: relative;
  z-index: 1; /* content above background */
}

.characters-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* semi-transparent dark overlay */
  z-index: -1; /* place behind the content */
}

.characters-section .container {
  position: relative;
  z-index: 2; /* ensure text stays above overlay */
}

.characters-section {
    position: relative;
    background: linear-gradient(to top, rgba(255, 165, 0, 0.5), rgba(255, 255, 255, 0.1)),
                url('../images/character-bg.png') center/cover no-repeat;
    overflow: hidden; /* hide overflow from SVG wind */
}

/* Windy Night SVG overlay */
.windy-night {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* clicks pass through */
    z-index: 1; /* Behind characters */
}

.wind-streak {
    animation: windMove 8s linear infinite;
}

@keyframes windMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(1920px); }
}

/* Character cards above storm */
.container {
    position: relative;
    z-index: 2;
}





.character-card {
    background: #A76D3C;
    border: 2px solid black; 
    border-radius: 15px;
    padding: 15px;
    /* box-shadow: 0 5px 15px rgba(0,0,0,0.2); */
    position: relative;
}

.character-img {
    max-width: 120px;
    margin-top: 25px;
}

.speech-bubble {
    background:#3b1f0e;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
}

.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}


@media (max-width:768px){
    .characters-section {
    position: relative;
    background: linear-gradient(to top, rgba(255, 165, 0, 0.5), rgba(255, 255, 255, 0.1)),
                url('../images/character-mb-bg.png') center/cover no-repeat;
    overflow: hidden; /* hide overflow from SVG wind */
}
}