/* Stile personalizzato per il font e le transizioni */
body {
    font-family: 'Source Code Pro', monospace;
    transition: background-color 0.3s, color 0.3s;
    overflow: hidden; /* Nasconde le scrollbar */
}

/* Stili per l'interruttore del tema "Box Logo" */
.theme-switcher {
    padding: 8px 16px;
    cursor: pointer;
    background-color: #e53e3e; /* Rosso */
    transition: background-color 0.3s ease-in-out;
    user-select: none;
    -webkit-user-select: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .theme-switcher {
    background-color: #000000; /* Nero */
    border: 1px solid rgba(255, 0, 0, 0.5);
}

/* Stili per l'overlay della transizione */
#theme-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999;
    clip-path: circle(0% at var(--x) var(--y));
    transition: clip-path 0.8s ease-in-out;
}

/* Stili per il gioco */
.game-start-btn {
    background: none;
    border: 1px solid #ef4444;
    color: #ef4444;
    padding: 8px 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}
.game-start-btn:hover {
    background-color: #ef4444;
    color: white;
    box-shadow: 0 0 15px #ef4444;
}

#game-area {
    cursor: none;
    transition: background-color 0.3s ease;
}

/* Keyframes per l'animazione del countdown */
@keyframes pop-in {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

#countdown-timer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Source Code Pro', monospace; /* Stesso font del sito */
    font-size: 9rem;      /* Dimensione aumentata */
    font-weight: 900;     /* Più "grassetto" */
    color: #ef4444;       /* Colore rosso del sito */
    text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: none;        /* Nascosto di default */
    animation: pop-in 0.3s ease-out forwards; /* Applica l'animazione */
}

.player {
    position: absolute;
    bottom: 10px;
    width: 100px;
    height: 35px;
    background-color: #e53e3e; /* Rosso */
    color: #ffffff; /* Bianco di default per il testo "Supreorder" */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transizione fluida del colore */
    border: 2px solid #000000; /* Contorno nero di default per il logo, per visibilità dimensione */
}

.obstacle {
    position: absolute;
    top: -20px;
    width: 20px;
    height: 20px;
    background-color: #ef4444;
    border-radius: 50%;
    transition: background-color 0.3s ease; /* Transizione fluida del colore */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7); /* Ombra più marcata per contrasto */
}

.tech-box {
    border: 1px solid;
    background-color: rgba(128, 128, 128, 0.05);
    backdrop-filter: blur(10px);
}
.dark .tech-box {
    background-color: rgba(255, 255, 255, 0.02);
}

/* --- TEMI SPECIALI --- */
/* Tema Blu */
.special-theme.theme-blue body { background-color: #0a192f !important; color: #ccd6f6 !important; }
.special-theme.theme-blue .text-red-500, .special-theme.theme-blue .game-start-btn, .special-theme.theme-blue #countdown-timer { color: #64ffda; border-color: #64ffda; }
.special-theme.theme-blue .game-start-btn:hover { background-color: #64ffda; color: #0a192f; box-shadow: 0 0 15px #64ffda; }
.special-theme.theme-blue .theme-switcher { background-color: #64ffda; }
.special-theme.theme-blue .theme-switcher span { color: #0a192f; }

/* Tema Verde */
.special-theme.theme-green body { background-color: #0f172a !important; color: #a7f3d0 !important; }
.special-theme.theme-green .text-red-500, .special-theme.theme-green .game-start-btn, .special-theme.theme-green #countdown-timer { color: #34d399; border-color: #34d399; }
.special-theme.theme-green .game-start-btn:hover { background-color: #34d399; color: #0f172a; box-shadow: 0 0 15px #34d399; }
.special-theme.theme-green .theme-switcher { background-color: #34d399; }
.special-theme.theme-green .theme-switcher span { color: #0f172a; }

/* Tema Rosa */
.special-theme.theme-pink body { background-color: #2e1065 !important; color: #fbcfe8 !important; }
.special-theme.theme-pink .text-red-500, .special-theme.theme-pink .game-start-btn, .special-theme.theme-pink #countdown-timer { color: #f472b6; border-color: #f472b6; }
.special-theme.theme-pink .game-start-btn:hover { background-color: #f472b6; color: #2e1065; box-shadow: 0 0 15px #f472b6; }
.special-theme.theme-pink .theme-switcher { background-color: #f472b6; }
.special-theme.theme-pink .theme-switcher span { color: #2e1065; }


/* Override per dark mode */
.dark .player {
    background-color: #000000; /* Nero per dark */
    color: #ffffff; /* Bianco per testo */
    border-color: #ffffff; /* Contorno bianco per visibilità */
}

.dark .obstacle {
    background-color: #4b5563; /* Grigio scuro per la pallina */
}

.dark #game-area {
    background-color: #111827; /* Sfondo dark */
}

/* Override per temi speciali */
.special-theme.theme-blue .player {
    background-color: #64ffda; /* Verde acqua, coerente col tema */
    color: #0a192f; /* Colore testo coerente */
    border-color: #ccd6f6; /* Contorno per visibilità */
}

.special-theme.theme-blue .obstacle {
    background-color: #38bdf8; /* Blu chiaro per la pallina */
}

.special-theme.theme-blue #game-area {
    background-color: #0a192f;
}

.special-theme.theme-green .player {
    background-color: #34d399; /* Verde, coerente */
    color: #0f172a;
    border-color: #a7f3d0;
}

.special-theme.theme-green .obstacle {
    background-color: #10b981; /* Verde scuro per la pallina */
}

.special-theme.theme-green #game-area {
    background-color: #0f172a;
}

.special-theme.theme-pink .player {
    background-color: #f472b6; /* Rosa, coerente */
    color: #2e1065;
    border-color: #fbcfe8;
}

.special-theme.theme-pink .obstacle {
    background-color: #db2777; /* Rosa scuro per la pallina */
}

.special-theme.theme-pink #game-area {
    background-color: #2e1065;
}

/* Stili per difficoltà del gioco */
/* Easy: Scala di grigi con transizione smooth (da nero a grigio medio a grigio chiaro) */
.difficulty-easy body {
    animation: grayTransitionBody 10s ease-in-out infinite alternate;
}

.difficulty-easy #game-area {
    animation: grayTransitionBody 10s ease-in-out infinite alternate;
}

.difficulty-easy .player {
    animation: grayTransitionPlayer 10s ease-in-out infinite alternate;
    border: 2px solid; /* Contorno sempre presente */
    border-color: inherit; /* Usa il colore del testo per il contorno, per contrasto */
}

.difficulty-easy .obstacle {
    animation: grayTransitionObstacle 10s ease-in-out infinite alternate;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7); /* Ombra più marcata per contrasto */
}

@keyframes grayTransitionBody {
    0% { background-color: #000000; }
    50% { background-color: #808080; }
    100% { background-color: #d3d3d3; } /* Grigio chiaro invece di bianco */
}

@keyframes grayTransitionPlayer {
    0% { background-color: #d3d3d3; color: #000000; border-color: #000000; } /* Inverso per contrasto: sfondo chiaro, testo/border scuro */
    50% { background-color: #000000; color: #d3d3d3; border-color: #d3d3d3; } /* Sfondo scuro, testo/border chiaro */
    100% { background-color: #808080; color: #ffffff; border-color: #ffffff; } /* Sfondo medio, testo/border bianco */
}

@keyframes grayTransitionObstacle {
    0% { background-color: #333333; } /* Grigio più scuro rispetto allo sfondo (0: #000000) */
    50% { background-color: #4b4b4b; } /* Grigio scuro rispetto a sfondo medio (#808080) */
    100% { background-color: #666666; } /* Grigio medio rispetto a sfondo chiaro (#d3d3d3) */
}

/* Medium: Colori "normali" che cambiano in un ciclo (es. blu, verde, rosso) con transizione smooth */
.difficulty-medium body {
    animation: normalTransitionBody 10s ease-in-out infinite;
}

.difficulty-medium #game-area {
    animation: normalTransitionBody 10s ease-in-out infinite;
}

.difficulty-medium .player {
    animation: normalTransitionPlayer 10s ease-in-out infinite;
    border: 2px solid; /* Contorno sempre presente */
    border-color: inherit; /* Usa il colore del testo per il contorno, per contrasto */
}

.difficulty-medium .obstacle {
    animation: normalTransitionObstacle 10s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7); /* Ombra più marcata per contrasto */
}

@keyframes normalTransitionBody {
    0% { background-color: #3498db; } /* Blu normale */
    33% { background-color: #2ecc71; } /* Verde normale */
    66% { background-color: #e74c3c; } /* Rosso normale */
    100% { background-color: #3498db; } /* Torna al blu */
}

@keyframes normalTransitionPlayer {
    0% { background-color: #2980b9; color: #ffffff; border-color: #ffffff; } /* Blu scuro, testo/border bianco per contrasto */
    33% { background-color: #27ae60; color: #ffffff; border-color: #ffffff; } /* Verde scuro */
    66% { background-color: #c0392b; color: #ffffff; border-color: #ffffff; } /* Rosso scuro */
    100% { background-color: #2980b9; color: #ffffff; border-color: #ffffff; }
}

@keyframes normalTransitionObstacle {
    0% { background-color: #1f618d; } /* Blu molto scuro rispetto a sfondo (#3498db) */
    33% { background-color: #219653; } /* Verde molto scuro rispetto a sfondo (#2ecc71) */
    66% { background-color: #a93226; } /* Rosso molto scuro rispetto a sfondo (#e74c3c) */
    100% { background-color: #1f618d; }
}

/* Hard: Colori accesi (eye-catching) che cambiano in un ciclo (es. magenta, ciano, giallo) con transizione smooth */
.difficulty-hard body {
    animation: hardTransitionBody 10s ease-in-out infinite;
}

.difficulty-hard #game-area {
    animation: hardTransitionBody 10s ease-in-out infinite;
}

.difficulty-hard .player {
    animation: hardTransitionPlayer 10s ease-in-out infinite;
    border: 2px solid; /* Contorno sempre presente */
    border-color: inherit; /* Usa il colore del testo per il contorno, per contrasto */
}

.difficulty-hard .obstacle {
    animation: hardTransitionObstacle 10s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7); /* Ombra più marcata per contrasto */
}

@keyframes hardTransitionBody {
    0% { background-color: #ff00ff; } /* Magenta acceso */
    33% { background-color: #00ffff; } /* Ciano acceso */
    66% { background-color: #ffff00; } /* Giallo acceso */
    100% { background-color: #ff00ff; } /* Torna al magenta */
}

@keyframes hardTransitionPlayer {
    0% { background-color: #cc00cc; color: #ffffff; border-color: #ffffff; } /* Magenta scuro, testo/border bianco per contrasto */
    33% { background-color: #00cccc; color: #000000; border-color: #000000; } /* Ciano scuro, testo/border nero */
    66% { background-color: #cccc00; color: #000000; border-color: #000000; } /* Giallo scuro, testo/border nero */
    100% { background-color: #cc00cc; color: #ffffff; border-color: #ffffff; }
}

@keyframes hardTransitionObstacle {
    0% { background-color: #990099; } /* Magenta molto scuro rispetto a sfondo (#ff00ff) */
    33% { background-color: #009999; } /* Ciano molto scuro rispetto a sfondo (#00ffff) */
    66% { background-color: #999900; } /* Giallo molto scuro rispetto a sfondo (#ffff00) */
    100% { background-color: #990099; }
}