/* ============================================================
   Swipe Labyrinth - game.css
   Styles du gameplay, animations, transitions, effets
   ============================================================ */

/* ------------------------------------------------------------
   CANVAS DU JEU
------------------------------------------------------------ */

#gameCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    touch-action: none;
}

/* ------------------------------------------------------------
   ANIMATIONS DE ROTATION DU LABYRINTHE
------------------------------------------------------------ */

.rotate-left {
    animation: rotateLeft 0.35s ease-out forwards;
}

.rotate-right {
    animation: rotateRight 0.35s ease-out forwards;
}

@keyframes rotateLeft {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-90deg); }
}

@keyframes rotateRight {
    from { transform: rotate(0deg); }
    to   { transform: rotate(90deg); }
}

/* ------------------------------------------------------------
   TRANSITION DE NIVEAU
------------------------------------------------------------ */

.level-transition {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    z-index: 60;
    pointer-events: none;
    animation: levelFade 0.8s ease-out forwards;
}

@keyframes levelFade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ------------------------------------------------------------
   EFFET DE VICTOIRE
------------------------------------------------------------ */

#victory-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
    z-index: 70;
}

.victory-flash {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    animation: victoryFlash 0.4s ease-out forwards;
}

@keyframes victoryFlash {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ------------------------------------------------------------
   PARTICULES DE VICTOIRE
------------------------------------------------------------ */

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    animation: particleFly 0.8s ease-out forwards;
}

@keyframes particleFly {
    from {
        transform: translate(0,0) scale(1);
        opacity: 1;
    }
    to {
        transform: translate(var(--dx), var(--dy)) scale(0);
        opacity: 0;
    }
}

/* ------------------------------------------------------------
   OVERLAY DE DÉFAITE
------------------------------------------------------------ */

#defeat-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,0,0,0.15);
    display: none;
    z-index: 65;
    animation: defeatFlash 0.4s ease-out forwards;
}

@keyframes defeatFlash {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ------------------------------------------------------------
   BOUTONS DE CONTROLE (OPTIONNEL)
------------------------------------------------------------ */

#controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex