body {
    margin: 0;
    overflow: hidden;
    background: #111;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

/* Haut : Phase */
#ui-top {
    position: absolute;
    top: 20px;
    text-align: center;
    width: 100%;
    pointer-events: none;
}
#ui-top h1 { margin: 0; }

/* Bas : Vie */
#ui-bottom {
    position: absolute;
    bottom: 30px;
    text-align: center;
    width: 100%;
    pointer-events: none;
}
#hp-bar-container {
    width: 320px;
    height: 18px;
    background: #252525;
    border-radius: 9px;
    overflow: hidden;
    margin: 8px auto;
    border: 1px solid #444;
}
#hp-bar {
    width: 100%;
    height: 100%;
    background: #ff4757;
    transition: width 0.1s linear;
}

/* Scène 3D */
#scene-container {
    width: 200px;
    height: 200px;
    perspective: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-100px);
    animation: rotateCube 12s infinite linear;
    cursor: pointer;
    user-select: none;
}

.face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 71, 87, 0.85);
    border: 2px solid #ffffff;
    box-sizing: border-box;
    /* Cache l'arrière des faces : plus de face fantôme vue à travers la face avant */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.front  { transform: rotateY(  0deg) translateZ(100px); }
.right  { transform: rotateY( 90deg) translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX( 90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

@keyframes rotateCube {
    0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg); }
    100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg); }
}

/* Textes flottants */
.warning-text, .damage-text {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
}

.warning-text {
    background: #ff4757;
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
    animation: floatWarning 2s ease-out forwards;
}

.damage-text {
    color: #ff4757;
    font-weight: 900;
    font-size: 26px;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
    animation: floatDmg 0.9s ease-out forwards;
}

@keyframes floatDmg {
    0% { opacity: 1; transform: translate(-50%, 0) scale(0.9); }
    100% { opacity: 0; transform: translate(-50%, -40px) scale(1.3); }
}

@keyframes floatWarning {
    0% { opacity: 0; transform: translate(-50%, 0) scale(0.85); }
    15% { opacity: 1; transform: translate(-50%, -10px) scale(1); }
    80% { opacity: 1; transform: translate(-50%, -25px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -40px) scale(1.05); }
}

/* Responsivité Mobile (Cube uniquement) */
@media screen and (max-width: 600px) {
    #scene-container { width: 150px; height: 150px; }
    .cube, .face { width: 150px; height: 150px; }
    
    /* CORRECTION : Ajustement du centre de gravité et des faces pour la nouvelle taille */
    .cube { transform: translateZ(-75px); }
    .front  { transform: rotateY(  0deg) translateZ(75px); }
    .right  { transform: rotateY( 90deg) translateZ(75px); }
    .back   { transform: rotateY(180deg) translateZ(75px); }
    .left   { transform: rotateY(-90deg) translateZ(75px); }
    .top    { transform: rotateX( 90deg) translateZ(75px); }
    .bottom { transform: rotateX(-90deg) translateZ(75px); }

    /* Correction des animations de base et de combo pour le mobile (translateZ à -75px) */
    @keyframes rotateCube {
        0% { transform: translateZ(-75px) rotateX(0deg) rotateY(0deg); }
        100% { transform: translateZ(-75px) rotateX(360deg) rotateY(360deg); }
    }
    @keyframes rotateCubeFast {
        0% { transform: translateZ(-75px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
        100% { transform: translateZ(-75px) rotateX(360deg) rotateY(720deg) rotateZ(360deg); }
    }
    @keyframes rotateCubeSuperFast {
        0% { transform: translateZ(-75px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
        100% { transform: translateZ(-75px) rotateX(720deg) rotateY(1080deg) rotateZ(720deg); }
    }
    @keyframes rotateCubeInsane {
        0% { transform: translateZ(-75px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
        100% { transform: translateZ(-75px) rotateX(1080deg) rotateY(1440deg) rotateZ(1080deg); }
    }
}

/* =========================================
   PALIERS DE COMBO (Rotation & Couleurs)
   ========================================= */

/* Combo 100 : Ça tourne vite et dans plusieurs sens */
@keyframes rotateCubeFast {
    0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: translateZ(-100px) rotateX(360deg) rotateY(720deg) rotateZ(360deg); }
}

/* Combo 500 : Ça tourne hyper vite */
@keyframes rotateCubeSuperFast {
    0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: translateZ(-100px) rotateX(720deg) rotateY(1080deg) rotateZ(720deg); }
}

/* Combo 1000 : Vitesse absurde + Changement de couleurs arc-en-ciel */
@keyframes rotateCubeInsane {
    0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: translateZ(-100px) rotateX(1080deg) rotateY(1440deg) rotateZ(1080deg); }
}
@keyframes rainbowGlow {
    0% { filter: hue-rotate(0deg) brightness(1.5); }
    100% { filter: hue-rotate(360deg) brightness(1.5); }
}

/* On force ces animations depuis le JS selon le combo */
body.combo-100 .cube { animation: rotateCubeFast 4s infinite linear !important; }
body.combo-500 .cube { animation: rotateCubeSuperFast 1.5s infinite linear !important; }
/* Pas de "filter" sur le cube : il aplatit la 3D (une seule face visible) */
body.combo-1000 .cube { animation: rotateCubeInsane 0.5s infinite linear !important; }