/* Bro Rogue — Battle: Status Pip Stack (2026-08)
   Compact icon-only status row above each character portrait during
   battle. Player/enemy tints disambiguate sides. Lives in its own file
   so the per-file token budget stays tractable. */

/* ── Stack container ────────────────────────────────────── */
.statusPipStack {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -1.05rem);
    display: inline-flex;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    background: rgb(0 0 0 / 55%);
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-1);
    pointer-events: none;
    z-index: var(--z-overlay);
}

/* Side-specific tints */
.characterPosition.playerCharacter .statusPipStack {
    background: linear-gradient(180deg, rgb(78 205 196 / 22%), rgb(0 0 0 / 55%));
    border-color: rgb(78 205 196 / 35%);
}

.characterPosition.enemyCharacter .statusPipStack {
    background: linear-gradient(180deg, rgb(255 107 107 / 22%), rgb(0 0 0 / 55%));
    border-color: rgb(255 107 107 / 35%);
}

.statusPipStack:empty {
    display: none;
}

/* ── Individual pip ─────────────────────────────────────── */
.statusPip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    font-size: 0.85rem;
    line-height: 1;
    background: rgb(0 0 0 / 65%);
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 80%);
    transition: transform var(--dur-fast) var(--ease-spring);
}

.statusPip.fresh {
    animation: pipPop var(--dur-med) var(--ease-spring);
}

@keyframes pipPop {
    0% {
        transform: scale(0.4) rotate(-6deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.18) rotate(2deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Ailment colors — kept in sync with the verbose badge tray via
   _updateStatusBadges so the two views can never drift apart. */
.statusPip.paralyzed {
    background: #f5d342;
    color: #2b2400;
}

.statusPip.infatuated {
    background: #ff7eb6;
    color: #5a0030;
}

.statusPip.defense-lowered {
    background: #6e7bff;
    color: #fff;
}

.statusPip.poison {
    background: #b06bff;
    color: #fff;
}

.statusPip.burn {
    background: #ff7a2a;
    color: #2b1400;
}

.statusPip.freeze {
    background: #7fd0ff;
    color: #00263a;
}

.statusPip.confuse {
    background: #ffe24a;
    color: #2b2400;
}