/* --- BARRE DE FEVER (Tout en bas) --- */
#fever-bar-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1000;
}

#fever-bar {
    width: 0%;
    height: 100%;
    background: #ff9a9e;
    box-shadow: 0 0 15px #ff9a9e;
    transition: width 0.1s linear;
}

/* --- EFFETS DE NIVEAUX SUR LE CUBE --- */
.fever-level-1 .face {
    background: rgba(255, 150, 50, 0.9) !important;
    box-shadow: 0 0 20px rgba(255, 150, 50, 0.8);
}

.fever-level-2 .face {
    background: rgba(238, 82, 83, 0.9) !important;
    box-shadow: 0 0 40px rgba(238, 82, 83, 0.8);
}
.fever-level-2 body { animation: shake 0.4s infinite alternate; }

.fever-level-3 .face {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #00d2d3;
    box-shadow: 0 0 60px #00d2d3, inset 0 0 20px #00d2d3;
}
.fever-level-3 body { animation: hardShake 0.15s infinite alternate; }
.fever-level-3 .cube { animation: rotateCube 12s infinite linear, hyperPulse 0.1s infinite alternate; }

@keyframes hyperPulse {
    from { transform: scale(0.95); }
    to { transform: scale(1.05); }
}
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    100% { transform: translate(-1px, -2px) rotate(-1deg); }
}
@keyframes hardShake {
    0% { transform: translate(3px, 3px) rotate(0deg); }
    100% { transform: translate(-3px, -3px) rotate(-2deg); }
}

/* =========================================
   COMPTEUR DE COMBO
   ========================================= */
#combo-display {
    --x: 50%;
    --y: 25%;
    --scale: 0.35;
    --rot: 0deg;
    --txt: #ff9a9e; /* couleur du texte, change avec la barre */

    position: fixed;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%) rotate(var(--rot)) scale(var(--scale));
    font-size: 4rem;
    font-weight: 900;
    color: var(--txt);

    /* Contour blanc délicat + ombre sombre pour toujours bien le voir */
    -webkit-text-stroke: 3px #ffffff;
    paint-order: stroke fill;
    text-shadow: 0 0 14px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.4);

    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.2s, color 0.3s, left 0.12s ease-out, top 0.12s ease-out, transform 0.25s ease-out;
}

.combo-active { opacity: 1 !important; }

/* Petit "pop" à chaque hit */
.combo-hit {
    animation: comboHit 0.15s ease-out;
}
@keyframes comboHit {
    0%   { transform: translate(-50%, -50%) rotate(var(--rot)) scale(calc(var(--scale) * 1.25)); }
    100% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(var(--scale)); }
}

/* L'explosion niveau max (500) */
.max-explosion {
    opacity: 1 !important;
    animation: ultimatePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}
@keyframes ultimatePop {
    0%   { transform: translate(-50%, -50%) rotate(var(--rot)) scale(calc(var(--scale) * 1.5)); filter: brightness(2); }
    50%  { transform: translate(-50%, -50%) rotate(var(--rot)) scale(calc(var(--scale) * 2.2)); filter: brightness(3); }
    100% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(var(--scale)); filter: brightness(1); }
}

/* =========================================
   TRAITS DE VITESSE (s'ajoutent à chaque palier de 50)
   ========================================= */
#streaks {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

.streak {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22vmax;
    height: 3px;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95));
    border-radius: 3px;
    opacity: 0;
    animation: streakFly 0.5s linear infinite;
}

/* À 500 : les traits deviennent bleus, brillants et plus longs */
#streaks.streaks-max .streak {
    width: 30vmax;
    background: linear-gradient(90deg, transparent, #7df9ff 60%, #ffffff);
    box-shadow: 0 0 10px #00d2d3, 0 0 20px rgba(0, 210, 211, 0.6);
}

@keyframes streakFly {
    0%   { transform: rotate(var(--a)) translateX(18vmax) scaleX(0.2); opacity: 0; }
    30%  { opacity: 0.9; }
    100% { transform: rotate(var(--a)) translateX(65vmax) scaleX(1); opacity: 0; }
}