/* PolyPulse — Custom styles on top of Tailwind */

/* Lobby war bar */
.lobby-bar {
    display: flex;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.lobby-bar .camp {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    transition: width 0.5s ease;
    min-width: 40px;
}

.camp-yes { background: linear-gradient(135deg, #10b981, #059669); }
.camp-no { background: linear-gradient(135deg, #ef4444, #dc2626); }
.camp-0 { background: linear-gradient(135deg, #10b981, #059669); }
.camp-1 { background: linear-gradient(135deg, #ef4444, #dc2626); }
.camp-2 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.camp-3 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

/* Tier badges */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.tier-whale { background: #dbeafe; color: #1e40af; }
.tier-shark { background: #e0e7ff; color: #3730a3; }
.tier-dolphin { background: #d1fae5; color: #065f46; }
.tier-fish { background: #fef3c7; color: #92400e; }
.tier-plankton { background: #f3f4f6; color: #6b7280; }

/* Manipulation warning */
.manip-flag {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.7rem;
    color: #991b1b;
}

/* Quality indicator */
.quality-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.quality-high { background: #10b981; }
.quality-mid { background: #f59e0b; }
.quality-low { background: #ef4444; }

/* Insight card */
.insight-card {
    border-left: 3px solid #e5e7eb;
    transition: border-color 0.2s;
}
.insight-card:hover {
    border-left-color: #6366f1;
}
.insight-card.camp-yes-border { border-left-color: #10b981; }
.insight-card.camp-no-border { border-left-color: #ef4444; }

/* Pulsing live dot */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.live-dot {
    animation: pulse 2s ease-in-out infinite;
}

/* Vote buttons */
.vote-btn {
    transition: all 0.15s;
}
.vote-btn:hover {
    transform: scale(1.15);
}