/* PATROL - Pódio e Vitória (merge de podium.css + victory-styles.css) */

/* ── MENSAGEM DE VITÓRIA ──────────────────────── */
.victory-message {
    text-align: center; padding: 40px 20px;
    animation: victoryFadeIn 0.6s ease-out;
}
.victory-message h1 {
    font-size: 3em; color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    margin-bottom: 20px;
    animation: victoryBounce 1s ease-in-out infinite;
}
.victory-message h2 { font-size: 2.2em; color: #333; margin-bottom: 15px; }
.victory-score { font-size: 1.8em; font-weight: bold; color: var(--correct-green); }

@keyframes victoryFadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes victoryBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes podiumPulse {
    0%,100% { box-shadow: 0 4px 6px rgba(0,0,0,0.2), 0 0 0 0 rgba(255,215,0,0.7); }
    50%      { box-shadow: 0 4px 6px rgba(0,0,0,0.2), 0 0 0 10px rgba(255,215,0,0); }
}
@keyframes podiumSlideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rankSlideIn   { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }

.btn-podium {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: white; font-size: 1.2em;
    padding: 15px 30px; border: none; border-radius: 8px;
    cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: all 0.3s; animation: podiumPulse 2s ease-in-out infinite;
}
.btn-podium:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.3); }

/* Rankings (usado por victory-styles) */
.podium-rankings { max-width: 600px; margin: 0 auto 40px; }
.podium-rank {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px; margin-bottom: 15px;
    background: white; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s; animation: rankSlideIn 0.5s ease-out backwards;
}
.podium-rank:hover { transform: translateX(5px); }
.podium-rank.rank-1 { background: linear-gradient(135deg, #FFD700, #FFF8DC); border: 3px solid #FFD700; animation-delay: 0.1s; }
.podium-rank.rank-2 { background: linear-gradient(135deg, #C0C0C0, #F5F5F5); border: 3px solid #C0C0C0; animation-delay: 0.2s; }
.podium-rank.rank-3 { background: linear-gradient(135deg, #CD7F32, #FFE4B5); border: 3px solid #CD7F32; animation-delay: 0.3s; }
.medal { font-size: 2.5em; margin-right: 15px; }
.podium-rank .team-score { font-size: 1.8em; font-weight: bold; color: var(--correct-green); }

/* ── TELA DE PÓDIO ────────────────────────────── */
.podium-screen {
    text-align: center;
    background: rgba(255,255,255,0.95);
    padding: 20px; border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    max-width: 800px; margin: 0 auto;
    animation: podiumSlideIn 0.5s ease-out;
}

.podium-title {
    color: var(--prf-blue); font-size: 1.8em;
    margin-bottom: 18px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    text-align: center;
}

.podium-container {
    display: flex; justify-content: center;
    align-items: flex-start; gap: 20px; margin: 10px 0 0;
}

.podium-place { display: flex; flex-direction: column; align-items: center; }

.podium-avatar {
    border: 2px solid; border-radius: 10px;
    padding: 6px; background: rgba(255,255,255,0.9);
    margin-bottom: 6px;
    width: 140px; height: 140px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}

.podium-1st { order: 2; transform: scale(1.1); margin-top: 50px; }
.podium-1st .podium-avatar { border-color: #FFD700; background: linear-gradient(145deg, #fff9c4, #fff59d); }
.podium-2nd { order: 1; margin-top: 80px; }
.podium-2nd .podium-avatar { border-color: #C0C0C0; background: linear-gradient(145deg, #f5f5f5, #e0e0e0); }
.podium-3rd { order: 3; margin-top: 80px; }
.podium-3rd .podium-avatar { border-color: #CD7F32; background: linear-gradient(145deg, #ffe0b2, #ffcc80); }

.podium-name  { font-weight: 700; font-size: 1em; margin: 5px 0; color: var(--prf-blue); }
.podium-score { font-size: 0.95em; color: var(--prf-dark-blue); font-weight: 700; margin: 3px 0; }
.podium-players { font-size: 0.9em; color: #555; margin: 3px 0; font-style: italic; max-width: 200px; line-height: 1.3; }

.podium-badge           { font-size: 1.5em; margin-bottom: 6px; }
.podium-1st .podium-badge { color: #FFD700; }
.podium-2nd .podium-badge { color: #C0C0C0; }
.podium-3rd .podium-badge { color: #CD7F32; }

/* Botões do pódio */
.podium-buttons { margin-top: 16px; display: flex; flex-direction: row; gap: 10px; justify-content: center; flex-wrap: nowrap; max-width: 460px; margin-left: auto; margin-right: auto; }
.podium-buttons-container { margin-top: 0; display: flex; flex-direction: row; gap: 10px; justify-content: center; flex-wrap: nowrap; max-width: 460px; margin-left: auto; margin-right: auto; }

.podium-restart-btn {
    background: linear-gradient(145deg,var(--prf-yellow,#FFCC00),var(--prf-gold,#E6B800)) !important;
    border: 2px solid var(--prf-blue,#003366) !important; color: var(--prf-blue,#003366) !important;
    padding: 4px 24px !important; font-size: .78em !important; line-height: 2 !important;
    font-weight: 800 !important; min-width: 0; flex: 1; max-width: 180px;
    white-space: nowrap !important; border-radius: 6px !important; cursor: pointer !important;
    transition: background .3s, color .3s, border-color .3s !important;
}
.podium-restart-btn:hover { background: linear-gradient(145deg,var(--prf-blue,#003366),var(--prf-dark-blue,#002244)) !important; color: var(--prf-yellow,#FFCC00) !important; border-color: var(--prf-yellow,#FFCC00) !important; transform: translateY(-1px) !important; }

.podium-config-btn {
    background: linear-gradient(145deg,var(--prf-yellow,#FFCC00),var(--prf-gold,#E6B800)) !important;
    border: 2px solid var(--prf-blue,#003366) !important; color: var(--prf-blue,#003366) !important;
    padding: 4px 24px !important; font-size: .78em !important; line-height: 2 !important;
    font-weight: 800 !important; min-width: 0; flex: 1; max-width: 180px;
    white-space: nowrap !important; border-radius: 6px !important; cursor: pointer !important;
    transition: background .3s, color .3s, border-color .3s !important;
}
.podium-config-btn:hover { background: linear-gradient(145deg,var(--prf-blue,#003366),var(--prf-dark-blue,#002244)) !important; color: var(--prf-yellow,#FFCC00) !important; border-color: var(--prf-yellow,#FFCC00) !important; transform: translateY(-1px) !important; }

/* ── RESPONSIVO ───────────────────────────────── */
@media (max-width: 768px) {
    /* Retrato: avatares lado a lado (2º à esquerda, 1º à direita — igual paisagem) */
    .podium-container {
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        gap: 12px;
    }

    /* Manter ordem visual: 2º esquerda, 1º centro/direita */
    .podium-1st { order: 2; transform: scale(1.05); margin-top: 0; margin-bottom: 0; }
    .podium-2nd { order: 1; transform: scale(0.9);  margin-top: 0; margin-bottom: 0; }
    .podium-3rd { order: 3; transform: scale(0.85); margin-top: 0; margin-bottom: 0; }

    .podium-title  { font-size: 1.4em; }
    .podium-avatar { width: 110px; height: 110px; }
    .victory-message h1 { font-size: 2em; }

    /* Botões do pódio em coluna no mobile */
    .podium-buttons,
    .podium-buttons-container {
        flex-direction: column;
        align-items: center;
        max-width: 280px;
    }
    .podium-restart-btn,
    .podium-config-btn {
        max-width: 100% !important;
        width: 100% !important;
    }
}

.podium-scoreboard{margin-top:28px !important;width:240px;margin-bottom:20px !important;}
.podium-restart-btn,.podium-config-btn{padding:3px 16px !important;font-size:.72em !important;line-height:1.9 !important;}

/* Pódio: sem back-btn, garantir h1 centralizado */
#podium-screen .screen-top-bar {
    justify-content: center;
}
#podium-screen .screen-top-bar .user-menu-slot {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}
#podium-screen .screen-top-bar {
    position: relative;
}