/* Bro Rogue — Title Screen: Save Profile Card (2026-08)
   Sits between the title h1 and the menu when a saved run exists.
   Three signal pills (run #, money, bro count, last saved) and a
   compact top-bro summary. Empty state falls back to a dashed hint
   pill. Lives in its own file so the per-file token budget stays
   tractable when more polish lands. */

.saveProfileCard {
    margin: 0 auto 1.5rem;
    padding: 0.85rem 1.2rem;
    background: linear-gradient(135deg, rgb(255 107 107 / 14%), rgb(78 205 196 / 14%));
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--shadow-2);
    max-width: 28rem;
    animation: saveProfileFadeIn var(--dur-med) var(--ease-spring);
}

.saveProfileCard[data-empty='true'] {
    background: rgb(0 0 0 / 35%);
    border-style: dashed;
    color: rgb(255 255 255 / 75%);
    box-shadow: none;
}

.saveProfileEmpty {
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.saveProfileEmpty strong {
    color: var(--secondary-color);
}

@keyframes saveProfileFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.saveProfileMeta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 0.85rem;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.saveProfilePill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    background: rgb(0 0 0 / 55%);
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: var(--radius-pill);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 70%);
}

.saveProfilePill strong {
    color: var(--secondary-color);
}

.saveProfilePill.muted {
    color: rgb(255 255 255 / 70%);
    font-weight: 400;
}

.saveProfileTopBro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgb(255 255 255 / 10%);
    font-size: 0.95rem;
}

.saveProfileTopBro .topBroLabel {
    color: rgb(255 255 255 / 60%);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.saveProfileTopBro .topBroName {
    font-weight: 800;
    color: var(--primary-color);
    text-shadow: 0 0 8px rgb(255 107 107 / 35%);
}

.saveProfileTopBro .topBroLevel {
    background: linear-gradient(135deg, var(--secondary-color), #2bb1a8);
    color: #001f1d;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 700;
}

.saveProfileTopBro .topBroHint {
    color: rgb(255 255 255 / 70%);
    font-size: 0.8rem;
    margin-left: 0.4rem;
}