/* ==========================================================================
   Jogo do Stop - Estilos Customizados
   Compatível com Bootstrap 5 & Identidade Visual Novo SGA
   ========================================================================== */

:root {
    --primary-color: #0d6efd;
    --primary-hover: #0b5ed7;
    --stop-color: #dc3545;
    --stop-glow: rgba(220, 53, 69, 0.45);
    --card-bg: #ffffff;
    --card-border: rgba(0, 0, 0, 0.08);
    --text-main: #212529;
    --text-muted: #6c757d;
    --body-bg: #f4f6f9;
    --letter-bg: linear-gradient(135deg, #0d6efd, #0dcaf0);
    --letter-shadow: rgba(13, 110, 253, 0.35);
    --badge-available-bg: #e9ecef;
    --badge-available-color: #495057;
    --badge-drawn-bg: #ced4da;
    --badge-drawn-color: #adb5bd;
}

[data-bs-theme="dark"] {
    --primary-color: #3d8bfd;
    --primary-hover: #0d6efd;
    --stop-color: #e35d6a;
    --stop-glow: rgba(227, 93, 106, 0.5);
    --card-bg: #1e2430;
    --card-border: rgba(255, 255, 255, 0.08);
    --text-main: #f8f9fa;
    --text-muted: #9ba7b6;
    --body-bg: #11151c;
    --letter-bg: linear-gradient(135deg, #0d6efd, #6610f2);
    --letter-shadow: rgba(13, 110, 253, 0.5);
    --badge-available-bg: #2d3748;
    --badge-available-color: #e2e8f0;
    --badge-drawn-bg: #1a202c;
    --badge-drawn-color: #4a5568;
}

body {
    background-color: var(--body-bg);
    color: var(--text-main);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header & Navbar */
.game-header {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
}

.game-title {
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* Card padrão com sombras suaves */
.game-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1.25rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sorteador de Letra (Display Gigante) */
.letter-box {
    width: 170px;
    height: 170px;
    margin: 0 auto;
    border-radius: 1.5rem;
    background: var(--letter-bg);
    box-shadow: 0 12px 30px var(--letter-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    user-select: none;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.letter-box.spinning {
    animation: rouletteBounce 0.12s infinite alternate ease-in-out;
    filter: brightness(1.1);
}

@keyframes rouletteBounce {
    0% { transform: scale(0.96) rotate(-2deg); }
    100% { transform: scale(1.04) rotate(2deg); }
}

.letter-box.revealed {
    animation: popLetter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popLetter {
    0% { transform: scale(0.6); opacity: 0.5; }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* Cronômetro Display */
.timer-display {
    font-family: "Courier New", Courier, monospace, monospace;
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.1;
    transition: color 0.3s ease;
}

.timer-warning {
    color: #ffc107 !important;
    animation: pulseWarning 1s infinite;
}

.timer-danger {
    color: #dc3545 !important;
    animation: pulseDanger 0.5s infinite;
}

@keyframes pulseWarning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes pulseDanger {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* Barra de Progresso Circular/Linear */
.progress-timer {
    height: 14px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

[data-bs-theme="dark"] .progress-timer {
    background-color: rgba(255, 255, 255, 0.08);
}

.progress-timer .progress-bar {
    transition: width 1s linear, background-color 0.5s ease;
}

/* Botão STOP! Especial */
.btn-stop {
    background: linear-gradient(135deg, #e63946, #d90429);
    color: #ffffff;
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: 2px;
    padding: 1rem 2.5rem;
    border-radius: 50rem;
    border: none;
    box-shadow: 0 10px 25px var(--stop-glow);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-stop:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 15px 35px var(--stop-glow);
    color: #ffffff;
}

.btn-stop:active:not(:disabled) {
    transform: translateY(2px) scale(0.98);
}

.btn-stop.active-pulse {
    animation: stopPulse 1.5s infinite;
}

@keyframes stopPulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* Grade do Alfabeto / Histórico */
.alphabet-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.letter-badge {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    background-color: var(--badge-available-bg);
    color: var(--badge-available-color);
    transition: all 0.2s ease;
    user-select: none;
}

.letter-badge.current {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    transform: scale(1.15);
    box-shadow: 0 4px 10px var(--letter-shadow);
    z-index: 2;
}

.letter-badge.drawn {
    background-color: var(--badge-drawn-bg) !important;
    color: var(--badge-drawn-color) !important;
    text-decoration: line-through;
    opacity: 0.55;
}

.letter-badge.disabled {
    opacity: 0.25;
    background-color: transparent;
    border: 1px dashed var(--badge-drawn-color);
}

/* Modal / Overlay STOP! */
.stop-banner {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.stop-banner-content {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 1.5rem;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 500px;
    width: 90%;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Responsividade e Atalhos */
.shortcut-badge {
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--text-muted);
}

[data-bs-theme="dark"] .shortcut-badge {
    background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .timer-display {
        font-size: 3.8rem;
    }
    .letter-box {
        width: 130px;
        height: 130px;
        font-size: 4.5rem;
    }
    .btn-stop {
        font-size: 1.75rem;
        padding: 0.75rem 2rem;
    }
}