/* ==========================================================
   Player Interface Stylesheet
   Brainfall - Player View (countdown, questions, timer,
   results chart, winner, webcam, carousel)
   ========================================================== */

/* --- Custom Properties (Theme) --------------------------- */
:root {
    --color-primary: #6c5ce7;
    --color-primary-light: #a29bfe;
    --color-secondary: #00b894;
    --color-accent: #fd79a8;
    --color-danger: #e17055;
    --color-warning: #fdcb6e;
    --color-success: #55efc4;
    --color-bg: #0a0a23;
    --color-bg-card: #1a1a40;
    --color-text: #ffffff;
    --color-text-muted: #b0b0c8;
    --color-border: #2d2d5e;
    --color-overlay: rgba(0, 0, 0, 0.7);
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --transition-speed: 0.3s;
    --radius: 12px;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* --- Reset & Base ---------------------------------------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    min-height: 100vh;
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
}

/* --- Player Screen Layout -------------------------------- */
.player-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    position: relative;
    width: 100%;
}

/* --- Countdown ------------------------------------------- */
.countdown-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    position: relative;
    margin-bottom: 30px;
}

.countdown-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid var(--color-primary-light);
    border-top-color: var(--color-primary);
    animation: spin 1s linear infinite;
}

.countdown-number {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-primary-light);
    z-index: 2;
    line-height: 1;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.countdown--hidden {
    display: none;
}

/* --- Question Container ---------------------------------- */
.question-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.question-text {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 30px;
    line-height: 1.4;
    padding: 0 10px;
}

/* --- Options Grid (cards) -------------------------------- */
.options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 600px;
    margin: 0 auto;
}

.option-card {
    background: var(--color-bg-card);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: 18px 12px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all var(--transition-speed);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    text-align: center;
    word-break: break-word;
}

.option-card:hover {
    border-color: var(--color-primary-light);
    background: #252550;
    transform: scale(1.02);
}

.option-card--selected {
    border-color: var(--color-primary);
    background: #2a2a5a;
}

.option-card--correct {
    border-color: var(--color-success);
    background: #0f3f2a;
}

.option-card--wrong {
    border-color: var(--color-danger);
    background: #3d1f1a;
}

.option-card--disabled {
    pointer-events: none;
    opacity: 0.6;
}

/* --- Timer Bar ------------------------------------------- */
.timer-bar {
    width: 100%;
    max-width: 600px;
    height: 10px;
    background: var(--color-border);
    border-radius: 5px;
    overflow: hidden;
    margin: 20px auto;
}

.timer-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
    border-radius: 5px;
    transition: width 0.1s linear;
}

.timer-fill--warning {
    background: linear-gradient(90deg, var(--color-warning), var(--color-accent));
}

.timer-fill--danger {
    background: var(--color-danger);
    animation: pulse 0.5s ease-in-out infinite alternate;
}

@keyframes pulse {
    from { opacity: 1; }
    to { opacity: 0.6; }
}

/* --- Results / Bar Chart --------------------------------- */
.results-chart {
    width: 100%;
    max-width: 600px;
    margin: 30px auto;
}

.chart-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    color: var(--color-text-muted);
}

.bar-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bar-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bar-label {
    min-width: 120px;
    font-size: 1rem;
    text-align: right;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-track {
    flex: 1;
    height: 24px;
    background: var(--color-bg-card);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    height: 100%;
    border-radius: 12px;
    transition: width 0.5s ease-out;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.bar-fill--leader {
    background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
}

.bar-score {
    min-width: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: left;
}

/* --- Winner Screen --------------------------------------- */
.winner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.5s ease-out;
}

.winner-content {
    background: var(--color-bg-card);
    border: 2px solid var(--color-secondary);
    border-radius: var(--radius);
    padding: 40px 30px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 0 40px rgba(0, 184, 148, 0.3);
}

.winner-content h2 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    background: linear-gradient(45deg, var(--color-secondary), var(--color-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.winner-content p {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 25px;
}

.winner-content .btn {
    display: inline-block;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.winner-content .btn:hover {
    background: var(--color-primary-light);
}

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

/* --- Webcam with Silhouette ------------------------------ */
.webcam-container {
    position: relative;
    width: 100%;
    max-width: 480px;
    border-radius: var(--radius);
    overflow: hidden;
    margin: 20px auto;
    background: #111;
}

.webcam-video {
    width: 100%;
    display: block;
    border-radius: var(--radius);
    transform: scaleX(-1); /* mirror effect */
}

.webcam-silhouette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(108, 92, 231, 0.3);
    border-radius: var(--radius);
    pointer-events: none;
    /* silhouette mask – simplified as a gradient overlay */
    background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(108, 92, 231, 0.4) 60%);
}

/* --- Carousel (optional) --------------------------------- */
.carousel {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 20px auto;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.4s ease;
}

.carousel-slide {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--color-bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.carousel-slide img {
    max-width: 100%;
    border-radius: 8px;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-border);
    border: none;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.carousel-dot--active {
    background: var(--color-primary);
}

.carousel-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.carousel-btn {
    padding: 8px 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 30px;
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition-speed);
}

.carousel-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* --- Utility --------------------------------------------- */
.text-center { text-align: center; }

/* --- Visibilità sezioni ----------------------------------- */
/* CRITICA: senza questa regola, ogni <section class="player-section
   hidden"> resta comunque visibile (la classe "hidden" da sola non fa
   nulla, va detto esplicitamente al motore di rendering). Tutte le
   schermate del gioco (registrazione, attesa, domanda, risultati,
   vincitore, eliminato) sarebbero visibili insieme fin dal
   caricamento della pagina, sovrapposte in ordine di apparizione nel
   markup. !important perché è una direttiva di visibilità di stato
   applicativo (mostrato/nascosto), non un dettaglio estetico: nessuna
   altra regola più specifica deve poterla scavalcare per errore. */
.hidden {
    display: none !important;
}

/* --- Layout sezioni di stato ------------------------------ */
.player-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 20px;
}

.player-container {
    width: 100%;
    max-width: 480px;
    text-align: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px 24px;
    box-shadow: var(--shadow);
}

.player-container h2 {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.player-container h3 {
    font-size: 1.3rem;
    margin-bottom: 16px;
    color: var(--color-text-muted);
}

.player-container p {
    color: var(--color-text-muted);
    margin-bottom: 18px;
}

/* --- Form di registrazione --------------------------------- */
.player-form {
    text-align: left;
    margin-top: 20px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.form-group input[type="text"],
.form-group input[type="email"] {
    width: 100%;
    padding: 10px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 1rem;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus {
    outline: none;
    border-color: var(--color-primary-light);
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.error-message {
    color: var(--color-danger);
    font-size: 0.9rem;
    margin-top: 12px;
}

/* --- Bottoni generici --------------------------------------- */
.btn {
    display: inline-block;
    width: 100%;
    padding: 12px 24px;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background var(--transition-speed), transform var(--transition-speed);
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    margin-top: 8px;
}

.btn-primary:hover {
    background: var(--color-primary-light);
}

.btn-google {
    background: #fff;
    color: #1a1a40;
    margin-bottom: 18px;
}

.btn-google:hover {
    transform: scale(1.02);
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.results-table th,
.results-table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.results-table th {
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.9rem;
}

/* --- Responsive ------------------------------------------ */
@media (max-width: 768px) {
    .player-screen {
        padding: 15px;
    }

    .countdown-container {
        width: 150px;
        height: 150px;
    }

    .countdown-number {
        font-size: 3rem;
    }

    .question-text {
        font-size: 1.2rem;
    }

    .options-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .option-card {
        min-height: 60px;
        font-size: 1rem;
    }

    .timer-bar {
        max-width: 100%;
    }

    .bar-label {
        min-width: 80px;
        font-size: 0.9rem;
    }

    .winner-content {
        padding: 30px 20px;
    }

    .winner-content h2 {
        font-size: 1.8rem;
    }

    .webcam-container {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .countdown-container {
        width: 120px;
        height: 120px;
    }

    .countdown-number {
        font-size: 2.5rem;
    }

    .question-text {
        font-size: 1rem;
    }

    .option-card {
        font-size: 0.95rem;
        min-height: 50px;
    }

    .bar-label {
        min-width: 60px;
        font-size: 0.8rem;
    }

    .bar-score {
        font-size: 0.8rem;
    }

    .winner-content {
        padding: 20px 15px;
    }

    .winner-content h2 {
        font-size: 1.5rem;
    }
}