/* ─────────────────────────────────────────────────────────────────────────
   A turma na calçada (components/crowd_scene.html): skin de corpo inteiro
   e a plaquinha do SA-MP em cima da cabeça. Só o visual mora aqui — onde a
   turma fica na tela e quantos cabem é decisão de cada página
   (login-scene.css, landing.css).
   ───────────────────────────────────────────────────────────────────────── */

.crowd {
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.crowd__list {
    align-items: flex-end;
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0 0.5rem 1rem;
}

.crowd__char {
    --shift: 0px;
    --stance: rotate(0deg);
    align-items: center;
    animation: crowd-chega 0.6s ease-out both;
    animation-delay: calc(var(--i, 0) * 90ms);
    display: flex;
    flex: 0 1 25%;
    flex-direction: column;
    max-width: 120px;
    min-width: 0;
    pointer-events: auto;
    position: relative;
}

/* Sombra no chão, para ninguém flutuar sobre a calçada. */
.crowd__char::after {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
    bottom: -6px;
    content: "";
    height: 14px;
    left: 15%;
    position: absolute;
    width: 70%;
    z-index: -1;
}

.crowd__skin {
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)) sepia(0.12) saturate(1.05);
    height: clamp(150px, 26vh, 210px);
    max-width: 100%;
    object-fit: contain;
    transform: var(--stance);
    transform-origin: bottom center;
    transition: transform 0.2s ease;
}

.crowd__char:hover .crowd__skin {
    transform: translateY(-6px) var(--stance);
}

/* Plaquinha do SA-MP: nick com contorno, barra de vida embaixo. */
.crowd__tag {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-family: Arial, "Helvetica Neue", sans-serif;
    gap: 2px;
    margin-bottom: 6px;
    max-width: 140%;
    text-align: center;
    white-space: nowrap;
}

.crowd__selo,
.crowd__nick {
    text-shadow:
        -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
        0 0 3px rgba(0, 0, 0, 0.8);
}

.crowd__selo {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.crowd__nick {
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crowd__char--eterno .crowd__selo,
.crowd__char--eterno .crowd__nick {
    color: #f5c542;
}

.crowd__char--obrigado .crowd__selo,
.crowd__char--obrigado .crowd__nick {
    color: #7dd3fc;
}

.crowd__hp {
    background: #4a0b0b;
    border: 1px solid #000;
    display: block;
    height: 6px;
    width: 52px;
}

.crowd__hp span {
    background: #b4191d;
    display: block;
    height: 100%;
    width: 100%;
}

@keyframes crowd-chega {
    from { opacity: 0; translate: 0 calc(12px + var(--shift, 0px)); }
    to { opacity: 1; translate: 0 var(--shift, 0px); }
}

@media (prefers-reduced-motion: reduce) {
    .crowd__char {
        animation: none;
        translate: 0 var(--shift, 0px);
    }
}

/* ── Foto da casa ───────────────────────────────────────────────────────
   Duas fileiras, ombro a ombro, todo mundo em pé no quadro.
   Quem vem primeiro no HTML fica na fileira da frente.
   A pose é o recorte (agachado, aceno, apontando): o CSS não gira ninguém. */

.crowd--foto .crowd__list {
    flex-wrap: wrap-reverse;
    margin-inline: auto;
    padding: 0.2rem 0.7rem 0.85rem;
    width: min(100%, 19.4rem);
}

.crowd--foto .crowd__char {
    flex: 0 0 25%;
    margin: 0 -2px;
    max-width: none;
    width: 25%;
    z-index: calc(30 - var(--i, 0));
}

/* A fileira de trás desce um pouco e fica atrás da da frente. */
.crowd--foto .crowd__list:has(.crowd__char:nth-child(5)) .crowd__char:nth-child(n + 5) {
    margin-bottom: -1.35rem;
}

.crowd--foto .crowd__char:hover {
    z-index: 40;
}

/* --altura vem da pose (vitrine.py): agachado ~0,76, e a cabeça fica abaixo
   de quem está em pé. A pose gerada pelo Eterno traz a altura medida no 3D. */
.crowd--foto .crowd__skin {
    height: calc(132px * var(--altura, 1));
    max-width: none;
    width: auto;
}

.crowd--foto .crowd__tag {
    max-width: 132%;
}

.crowd--foto .crowd__selo {
    font-size: 0.52rem;
}

.crowd--foto .crowd__nick {
    font-size: 0.64rem;
}

/* Plaquinhas em duas alturas, para o nick não sentar no do vizinho. */
.crowd--foto .crowd__char:nth-child(odd) .crowd__tag {
    margin-bottom: 0.2rem;
}

.crowd--foto .crowd__char:nth-child(8n + 1) { --shift: 0px; }
.crowd--foto .crowd__char:nth-child(8n + 2) { --shift: 4px; }
.crowd--foto .crowd__char:nth-child(8n + 3) { --shift: 1px; }
.crowd--foto .crowd__char:nth-child(8n + 4) { --shift: 5px; }
.crowd--foto .crowd__char:nth-child(8n + 5) { --shift: 2px; }
.crowd--foto .crowd__char:nth-child(8n + 6) { --shift: 0px; }
.crowd--foto .crowd__char:nth-child(8n + 7) { --shift: 4px; }
.crowd--foto .crowd__char:nth-child(8n + 8) { --shift: 1px; }

@media (min-width: 768px) {
    .crowd--foto .crowd__list {
        width: min(100%, 30rem);
    }

    .crowd--foto .crowd__char {
        flex-basis: 25%;
        width: 25%;
    }

    .crowd--foto .crowd__skin {
        height: calc(clamp(168px, 24vh, 220px) * var(--altura, 1));
    }

}