/**
 * Mafia Legend - Modern Panel UI v1.0
 * Minimal glassmorphism design for player & moderator panels
 */

:root {
    --mafia-bg: #06080f;
    --mafia-surface: rgba(14, 18, 32, 0.85);
    --mafia-glass: rgba(255, 255, 255, 0.04);
    --mafia-border: rgba(255, 255, 255, 0.08);
    --mafia-accent: #e50914;
    --mafia-gold: #f1c40f;
    --mafia-text: #f5f5f5;
    --mafia-muted: #8b95a8;
    --mafia-radius: 16px;
    --mafia-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

body {
    background: radial-gradient(ellipse at 20% 0%, #12182e 0%, var(--mafia-bg) 55%) !important;
}

.day-player-panel-root,
.night-welcome-stage,
.night-waiting-stage {
    animation: panelFadeIn 0.35s ease-out;
}

@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-button {
    background: var(--mafia-glass) !important;
    border: 1px solid var(--mafia-border) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(12px);
    transition: all 0.25s ease !important;
}

.tab-button.active {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.25), rgba(241, 196, 15, 0.15)) !important;
    border-color: rgba(229, 9, 20, 0.5) !important;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.2);
}

.tab-content, .tab-pane {
    background: var(--mafia-surface) !important;
    border: 1px solid var(--mafia-border) !important;
    border-radius: var(--mafia-radius) !important;
    backdrop-filter: blur(16px);
    box-shadow: var(--mafia-shadow);
}

#chat-messages-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(241, 196, 15, 0.3) transparent;
}

.chat-bubble {
    backdrop-filter: blur(8px);
    border: 1px solid var(--mafia-border);
}

.chat-msg-row.sent .chat-bubble {
    background: linear-gradient(135deg, #e50914, #b20710) !important;
}

.player-card-mini,
.carousel-slide-item .player-card-mini {
    background: var(--mafia-glass) !important;
    border: 1px solid var(--mafia-border) !important;
    border-radius: 14px !important;
    transition: transform 0.2s, box-shadow 0.2s;
}

.player-card-mini:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.btn-main, .btn-ready-submit, .custom-modal-btn-primary {
    background: linear-gradient(135deg, #e50914, #b20710) !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 20px rgba(229, 9, 20, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-main:hover, .btn-ready-submit:hover, .custom-modal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(229, 9, 20, 0.45);
}

.custom-modal-btn-danger, .btn-modal-cancel {
    background: rgba(231, 76, 60, 0.15) !important;
    border: 1px solid rgba(231, 76, 60, 0.4) !important;
    border-radius: 999px !important;
    color: #e74c3c !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.2);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.custom-modal-btn-danger:hover, .btn-modal-cancel:hover {
    background: rgba(231, 76, 60, 0.25) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(231, 76, 60, 0.3);
}

.btn-modal-close {
    background: linear-gradient(135deg, #f1c40f, #e67e22) !important;
    border: none !important;
    border-radius: 999px !important;
    color: #000 !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 20px rgba(241, 196, 15, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-modal-close:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(241, 196, 15, 0.45);
}

.loading-state, .waiting-screen {
    background: var(--mafia-surface) !important;
    border: 1px solid var(--mafia-border) !important;
    border-radius: var(--mafia-radius) !important;
    backdrop-filter: blur(12px);
}

#player-sidebar-overlay {
    background: linear-gradient(145deg, rgba(14, 18, 32, 0.98), rgba(6, 8, 15, 0.99)) !important;
    border-left: 2px solid rgba(229, 9, 20, 0.4) !important;
}

.voting-panel, .defense-cinematic {
    animation: panelFadeIn 0.4s ease-out;
}