/* assets/mc.css */

/* Brand colors (keep using Tailwind for layout; this is just brand glue) */
:root {
    --mc-pink: #ff3b8d;
    --mc-hot: #ff1f6a;
    --mc-ink: #000000;
    --mc-ink-2: #0a0a0a;
    --mc-border: rgba(255, 255, 255, .10);
    --mc-border-2: rgba(255, 255, 255, .16);
    --mc-text-dim: rgba(255, 255, 255, .72);
}

/* Global base */
body {
    background: #000;
    color: #fff;
}

/* Spinning ring logo */
.spin-slow {
    animation: spin 6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Striped placeholder panels */
.stripe {
    background: repeating-linear-gradient(135deg,
            rgba(255, 255, 255, .06) 0 10px,
            rgba(255, 59, 141, .12) 10px 20px);
}

/* Card surface */
.card {
    border: 1px solid var(--mc-border);
    background: rgba(255, 255, 255, .03);
    border-radius: 0.75rem;
}

/* Section highlight blocks (headers, edit sections, modals) */
.section {
    border: 1px solid var(--mc-border);
    background: rgba(255, 255, 255, .035);
    border-radius: 1rem;
}

/* Online presence — pink pulse */
.presence-dot {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background: var(--mc-pink);
    box-shadow: 0 0 0 0 rgba(255, 59, 141, .7);
    animation: pulse 1.8s infinite;
}

.presence-dot.offline {
    background: rgba(255, 255, 255, .3);
    box-shadow: none;
    animation: none;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 59, 141, .7);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(255, 59, 141, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 59, 141, 0);
    }
}

/* Avatar fallback + small round images */
.avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    object-fit: cover;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 10px, rgba(255, 59, 141, 0.12) 10px 20px);
}

/* Close button in modals */
.btn-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: var(--mc-pink);
    color: #000;
    font-weight: 700;
    border-radius: .5rem;
    padding: .4rem .7rem;
    border: 1px solid transparent;
}

.btn-close:hover {
    filter: brightness(1.05);
}

/* Badges (kinks/ethnicity on grid cards) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .45rem;
    border-radius: 9999px;
    font-size: .70rem;
    color: var(--mc-text-dim);
    border: 1px solid var(--mc-border-2);
    background: rgba(255, 255, 255, .05);
}

/* Small utility to keep image tiles consistent */
.tile-img {
    width: 100%;
    height: 7rem;
    object-fit: cover;
    border-radius: 0.75rem;
}

.tile-img.tall {
    height: 8rem;
}