/* PATROL - Base: variáveis, reset, tipografia, botões, animações */

:root {
    --prf-blue: #003366;
    --prf-dark-blue: #002244;
    --prf-yellow: #FFCC00;
    --prf-gold: #E6B800;
    --prf-text: #333;
    --correct-green: #28a745;
    --wrong-red: #dc3545;
    --border-radius: 12px;
    --shadow: 0 4px 15px rgba(0,0,0,0.15);
    --shadow-hover: 0 8px 25px rgba(0,0,0,0.25);
    --transition: 0.3s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #002244 0%, #003366);
    color: var(--prf-text);
    min-height: 100vh;
    overflow-x: hidden;
}

.screen { display: none !important; }
.screen.active { display: block !important; }

/* CABEÇALHO */
h1 {
    font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
    font-size: 2em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--prf-yellow);
    text-shadow: 2px 2px 0 var(--prf-blue), 4px 4px 0 rgba(0,0,0,0.3), 0 0 15px rgba(255,204,0,0.5);
    margin: 15px 0;
    text-align: center;
    position: relative;
    padding: 10px 0;
}
h1::before, h1::after {
    content: "";
    position: absolute;
    left: 30%; right: 30%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--prf-yellow), #fff, var(--prf-yellow), transparent);
    border-radius: 2px;
}
h1::before { top: 0; }
h1::after  { bottom: 0; }

/* BOTÕES */
button {
    background: linear-gradient(145deg, var(--prf-blue), var(--prf-dark-blue));
    color: var(--prf-yellow) !important;
    border: 3px solid var(--prf-yellow);
    padding: 14px 28px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    margin: 8px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    transition: all var(--transition);
    text-transform: uppercase;
    letter-spacing: 1px;
}
button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    background: linear-gradient(145deg, var(--prf-dark-blue), #001933);
}
button:disabled {
    background: #666;
    border-color: #999;
    color: #ccc !important;
    cursor: not-allowed;
}
/* ══ BOTÃO AMARELO — padrão visual ═════════════════════════════
   Fundo amarelo + texto azul. Hover: fundo azul + texto amarelo.
   ══════════════════════════════════════════════════════════════ */
.btn-amarelo {
    background: linear-gradient(145deg, var(--prf-yellow), var(--prf-gold)) !important;
    color: var(--prf-blue) !important;
    border: 2px solid var(--prf-blue) !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: background 0.3s, color 0.3s, border-color 0.3s !important;
}
.btn-amarelo:hover:not(:disabled) {
    background: linear-gradient(145deg, var(--prf-blue), var(--prf-dark-blue)) !important;
    color: var(--prf-yellow) !important;
    border-color: var(--prf-yellow) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.35) !important;
}


/* INPUTS */
input, textarea, select {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    padding: 12px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    transition: all var(--transition);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--prf-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,51,102,0.2);
}

/* NOTIFICAÇÕES */
@keyframes slideIn  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
@keyframes fadeIn   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse    { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes spin     { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes victoryPulse {
    0%,100% { transform: scale(1);    box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
    50%     { transform: scale(1.05); box-shadow: 0 15px 50px rgba(102,126,234,0.5); }
}

/* UTILITÁRIOS */
.room-code-header { display: none !important; }
#victory-container { animation: victoryPulse 2s infinite; }

/* ── MOBILE: header com menus fixed no canto direito ──────── */
@media (max-width: 768px) {

    /* TODAS as telas mobile: logo centralizado, fonte menor */
    h1 {
        text-align: center;
        font-size: 1.35em;
        letter-spacing: 2px;
        padding: 6px 0;
        margin: 0 0 8px 0;
    }

    /* Traços mais curtos e simétricos — encaixam com o texto curto "PATROL" */
    h1::before, h1::after {
        left: 20%;
        right: 20%;
    }

    /* Landing screen: logo maior */
    #landing-screen h1 {
        font-size: 2em;
        padding: 10px 0;
        margin: 15px 0;
        letter-spacing: 3px;
    }

    #landing-screen h1::before,
    #landing-screen h1::after {
        left: 10%;
        right: 10%;
    }
}