/**

 * Hulyx RPG HUD Styling

 * Version: 3.5.0 - Centralized Color Variables

 * Constraints: z-index [15-20]

 */



:root {

    /* --- LAYOUT VARIABLES --- */

    --h-video-width: 100vw;

    --h-timeline-height: 4px;

    --h-timeline-bg-height: 40px; 

    --h-xp-height: 6px;

    --h-knob-size: 14px;

    --h-badge-size: 15px;

    /* --- COLOR VARIABLES --- */

    --h-accent-blue: #00eaff;

    --h-accent-gold: #f4c025;

    --h-accent-red: #ff3b30;

    --h-accent-blue-glow: rgba(0, 234, 255, 0.1);

    --h-bg-main: #000000;

    --h-bg-surface: rgba(10, 10, 10, 0.9);

    --h-bg-card: #111111;

    --h-bg-overlay: rgba(0, 0, 0, 0.9);

    --h-text-primary: #ffffff;

}



@media (min-width: 768px) {

    :root { --h-video-width: calc(100vh * 9 / 16); }

}



/* =============================================

   ARCHITECTURE & Z-INDEX (STRICT 15-20)

   ============================================= */



#hulyx-strobe-container    { z-index: 13 !important; }

#hulyx-timeline-wrapper    { z-index: 12 !important; }

#hulyx-rpg-hud-container   { z-index: 16 !important; }

#rpg-popup                 { z-index: 18 !important; }

#hulyx-rpg-hud-container-top { z-index: 16 !important; }

#hulyx-hold-loader         { z-index: 19 !important; }

#hulyx-radial-menu         { z-index: 20 !important; }

#hulyx-word-strobe-overlay { z-index: 20 !important; }



/* =============================================

   TIMELINE CONTROLS ANIMATIONS

   ============================================= */



#hulyx-timeline-controls {

    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    will-change: transform;

}

#hulyx-timeline-controls:active {

    transform: scale(0.65) !important;

}



.h-icon-wrapper {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

}



.h-icon-wrapper svg,

.h-icon-wrapper img {

    display: block;

}



.h-icon-wrapper.pop-anim {

    animation: hulyxPopIcon 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

}



@keyframes hulyxPopIcon {

    0%   { transform: scale(0.3) rotate(-15deg); opacity: 0; }

    50%  { transform: scale(1.15) rotate(0deg); opacity: 1; }

    100% { transform: scale(1) rotate(0deg); opacity: 1; }

}



/* =============================================

   HOLD LOADER (ANIMATION CIRCULAIRE)

   ============================================= */



#hulyx-hold-loader {

    position: fixed;

    width: 90px;

    height: 90px;

    left: 0;

    top: 0;

    margin: 0;

    transform: translate(-50%, -50%);

    pointer-events: none;

    opacity: 0;

    transition: opacity 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



#hulyx-hold-loader.is-visible { opacity: 1; }



#hulyx-hold-loader svg {

    transform: rotate(-90deg);

    filter: drop-shadow(0 0 10px var(--h-accent-blue));

}



#hulyx-hold-loader circle {

    fill: none;

    stroke-width: 6;

    stroke-linecap: round;

}



#hulyx-hold-loader .track {

    stroke: var(--h-accent-blue-glow);

}



#hulyx-hold-loader .fill {

    stroke: var(--h-accent-blue);

    stroke-dasharray: 226;

    stroke-dashoffset: 226;

    transition: none;

}



#hulyx-hold-loader.is-charging .fill {

    transition: stroke-dashoffset 0.5s linear;

    stroke-dashoffset: 0;

}



/* =============================================

   MENU RADIAL RPG

   ============================================= */



#hulyx-radial-menu {

    position: fixed;

    width: 200px;

    height: 200px;

    pointer-events: none;

    visibility: hidden;

    opacity: 0;

    transform: translate(-50%, -50%) scale(0.4);

    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.3s;

}



#hulyx-radial-menu.is-visible {

    visibility: visible;

    opacity: 1;

    transform: translate(-50%, -50%) scale(1);

    pointer-events: auto;

}



.radial-item {

    position: absolute;

    width: 55px;

    height: 55px;

    background: var(--h-bg-overlay);

    border: 2px solid var(--h-accent-blue);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--h-accent-blue);

    font-size: 9px;

    font-weight: bold;

    left: 50%;

    top: 50%;

    margin: -27.5px 0 0 -27.5px;

    transition: all 0.25s ease;

    text-transform: uppercase;

    letter-spacing: 1px;

}



#hulyx-radial-menu.is-visible .item-top    { transform: translateY(-65px); }

#hulyx-radial-menu.is-visible .item-bottom { transform: translateY(65px); }

#hulyx-radial-menu.is-visible .item-right  { transform: translateX(65px); }

#hulyx-radial-menu.is-visible .item-left   { transform: translateX(-65px); }



.radial-item.is-selected {

    background: var(--h-accent-blue);

    color: var(--h-bg-main);

    box-shadow: none!important;

    transform: scale(1.2);

}



#hulyx-radial-menu.is-focus-strobe .radial-item:not(.item-top) {

    opacity: 0;

    visibility: hidden;

    transform: translate(0, 0) scale(0.5);

}



/* =============================================

   ZONE HAUTE : BARRE XP

   ============================================= */



#hulyx-rpg-hud-container {

    min-height: 30px !important;

    position: fixed !important;

    left: 50% !important;

    width: var(--h-video-width) !important;

    display: flex;

    align-items: center;

    background: rgba(0, 0, 0, 0.9) !important;

    padding: 6px 15px;

    pointer-events: none !important;

    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;

}



@media (min-width: 768px) {

    #hulyx-rpg-hud-container {

        bottom: 0;

        transform: translateX(-50%) translateY(100%);

    }

    #hulyx-rpg-hud-container.hud-booting {

        animation: hud-boot-bottom-xp 5s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    }

    @keyframes hud-boot-bottom-xp {

        0%   { transform: translateX(-50%) translateY(100%); }

        30%  { transform: translateX(-50%) translateY(0%); }

        80%  { transform: translateX(-50%) translateY(0%); }

        100% { transform: translateX(-50%) translateY(100%); }

    }

}



@media (max-width: 767px) {

    #hulyx-rpg-hud-container {

        bottom: 55px;

        transform: translateX(-50%) translateY(110%);

    }

    #hulyx-rpg-hud-container.hud-booting {

        animation: hud-boot-xp-mobile 5s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    }

    @keyframes hud-boot-xp-mobile {

        0%   { transform: translateX(-50%) translateY(110%); }

        30%  { transform: translateX(-50%) translateY(0%); }

        80%  { transform: translateX(-50%) translateY(0%); }

        100% { transform: translateX(-50%) translateY(110%); }

    }

}



#hulyx-rpg-hud-container.hud-visible {

    animation: none !important;

    transform: translateX(-50%) translateY(0%) !important;

}







#hulyx-rpg-bars {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 8px;

    justify-content: center;

}

#hulyx-rpg-rhythm {

    position: relative;

    width: 100%;

    height: 4px;

    display: flex;

    gap: 8px;

    background: transparent;

    z-index: 16;

}

#hulyx-rpg-xp {

    z-index: 16;

    position: relative;

    width: 100%;

    height: var(--h-xp-height);

    background: transparent;

    display: flex;

    gap: 4px;

    overflow: visible;

    padding-right: 42px;

}

/* ── Session Level Badge ───────────────────────────── */
#hulyx-session-level-badge {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.7);
    border: none;
    border-left: 1px solid rgba(255,255,255,0.3);
    padding: 2px 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #ffffff;
    white-space: nowrap;
    display: none;
    align-items: center;
    gap: 3px;
    z-index: 17;
    pointer-events: none;
    transition: opacity 0.3s;
}

#hulyx-session-level-badge::before {
    content: 'LV';
    font-size: 8px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.05em;
}

body.hulyx-session-active #hulyx-session-level-badge {
    display: flex;
}

#hulyx-session-level-badge.hslv-pop {
    animation: hslvPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hslvPop {
    0%   { transform: translateY(-50%) scale(1); }
    30%  { transform: translateY(-50%) scale(1.6); filter: brightness(1.5); }
    60%  { transform: translateY(-50%) scale(0.9); }
    100% { transform: translateY(-50%) scale(1); }
}

.xp-segment {

    flex: 1;

    height: 100%;

    background: rgba(0, 0, 0, 0.6);

    transform: skewX(-20deg);

    overflow: hidden;

    border-radius: 1px;

}



.xp-segment-fill {

    height: 100%;

    width: 0%;

    background: #fff;

    transition: width 0.1s linear;

    /* will-change omitted — width triggers layout, not composited */

}

.xp-segment-fill.is-overload {

    background: #ffd700 !important;

    box-shadow: 0 0 15px rgba(255,215,0,0.8), 0 0 30px rgba(255,0,0,0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;

    animation: hulyx-rainbow-classic 1.5s linear infinite !important;

}

.rhythm-segment.is-overload {

    background: #ffd700 !important;

    box-shadow: 0 0 15px rgba(255,215,0,0.8), 0 0 30px rgba(255,0,0,0.6) !important;

    animation: hulyx-rainbow-classic 1.5s linear infinite !important;

    /* will-change omitted — browser promotes on demand */

}

.rhythm-segment.is-red-locked {

    background: #ff2d2d !important;

    box-shadow: 0 0 15px #ff2d2d, inset 0 0 5px rgba(255, 255, 255, 0.8) !important;

    animation: none !important;

}






.rhythm-segment {

    flex: 1;

    height: 100%;

    background: var(--h-bg-card);

    border-radius: 6px;

    /* will-change deliberately omitted — browser promotes on demand */

}



@keyframes hulyx-juicy-flash {

    0% {

        background: var(--flash-color);

        box-shadow: 0 0 15px var(--flash-color), inset 0 0 10px #fff;

    }

    30% {

        background: var(--flash-color);

        box-shadow: 0 0 10px var(--flash-color);

    }

    100% {

        background: var(--h-bg-card);

        box-shadow: none;

    }

}



.rhythm-segment.is-flashing {

    animation: hulyx-juicy-flash 1.5s ease-out forwards;

}



@keyframes hulyx-badge-flash {

    0% {

        background: var(--flash-color);

        box-shadow: 0 0 30px var(--flash-color), inset 0 0 15px rgba(255,255,255,0.8);

        transform: scale(1);

    }

    10% {

        transform: scale(1.4);

    }

    30% {

        background: var(--flash-color);

        box-shadow: 0 0 20px var(--flash-color);

        transform: scale(1.05);

    }

    100% {

        background: var(--h-bg-card);

        box-shadow: none;

        transform: scale(1);

    }

}







/* ── Overload rainbow — segments ───────────────────────────────── */

.rhythm-segment.is-overload {

    background: #ffd700 !important;

    animation: hulyx-rainbow-classic 1.5s linear infinite !important;

    /* will-change omitted — browser promotes on demand */

    box-shadow: 0 0 15px rgba(255,215,0,0.8), 0 0 30px rgba(255,0,0,0.6) !important;

    filter: brightness(1.3) !important;

}



/* ── Red light locked state for segments ── */

.rhythm-segment.is-red-locked {

    background: #ff2d2d !important;

    box-shadow: 0 0 15px #ff2d2d, inset 0 0 5px rgba(255, 255, 255, 0.8) !important;

    animation: none !important;

}


/* ── Progressive overload flash for segments ── */

.rhythm-segment.is-overload-flashing {

    animation: hulyx-rainbow-flash 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;

}



@keyframes hulyx-rainbow-flash {

    0% {

        background: #ffd700;

        box-shadow: 0 0 25px rgba(255, 255, 255, 0.8), 0 0 15px #ffd700, inset 0 0 5px rgba(255, 255, 255, 0.8);

        transform: scaleY(1.2);

        filter: hue-rotate(0deg) brightness(1.5);

    }

    40% {

        background: #ffd700;

        box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 8px #ffd700;

        transform: scaleY(1.05);

        filter: hue-rotate(180deg) brightness(1.2);

    }

    100% {

        background: var(--h-bg-card);

        box-shadow: none;

        transform: scaleY(1);

    }

}



@keyframes hulyx-rainbow-classic {

    0%   { filter: hue-rotate(0deg); }

    100% { filter: hue-rotate(360deg); }

}



/* =============================================

   ZONE BASSE : TIMELINE

   ============================================= */



#hulyx-timeline-wrapper {

    position: fixed !important;

    left: 50% !important;

    width: var(--h-video-width) !important;

    height: var(--h-timeline-bg-height);

    background: var(--h-bg-surface);

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 15px;

    pointer-events: auto;

    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;

}



@media (min-width: 768px) {

    #hulyx-timeline-wrapper {

        bottom: 0;

        transform: translateX(-50%) translateY(100%);

    }

    #hulyx-timeline-wrapper.hud-booting {

        animation: hud-boot-bottom-pc 5s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    }

    @keyframes hud-boot-bottom-pc {

        0%   { transform: translateX(-50%) translateY(100%); }

        30%  { transform: translateX(-50%) translateY(0%); }

        80%  { transform: translateX(-50%) translateY(0%); }

        100% { transform: translateX(-50%) translateY(100%); }

    }

}



@media (max-width: 767px) {

    #hulyx-timeline-wrapper {

        bottom: 60px;

        transform: translateX(-50%) translateY(110%);

    }

    #hulyx-timeline-wrapper.hud-booting {

        animation: hud-boot-bottom-mobile 5s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    }

    @keyframes hud-boot-bottom-mobile {

        0%   { transform: translateX(-50%) translateY(110%); }

        30%  { transform: translateX(-50%) translateY(0%); }

        80%  { transform: translateX(-50%) translateY(0%); }

        100% { transform: translateX(-50%) translateY(110%); }

    }

}



#hulyx-timeline-wrapper.hud-visible {

    animation: none !important;

    transform: translateX(-50%) translateY(0%) !important;

}



#hulyx-rpg-bottom {

    position: relative;

    width: 100%;

    height: var(--h-timeline-height);

    background: rgba(255, 255, 255, 0.15);

    cursor: grab;

}



/* Timeline Vidéo */

#rpg-fill-red {

    width: 0%;

    background: var(--h-accent-red);

    z-index: 1;

    transition: none; 

    box-shadow: none;

    /* will-change omitted — width triggers layout, not composited */

}

body.hulyx-overload-active #rpg-fill-red {

    background: var(--h-accent-red);

}

#rpg-fill-red::after {

    content: "";

    position: absolute;

    right: -7px;

    top: 50%;

    transform: translateY(-50%);

    width: 14px;

    height: 14px;

    background: #ffd700;

    border-radius: 50%;

    box-shadow: 0 0 10px rgba(255,215,0,0.8);

}




/* =============================================

   ZONE BASSE : TENSION (placeholder)

   ============================================= */



#hulyx-tension-wrapper {

    position: fixed !important;

    bottom: 60px;

    left: 50% !important;

    width: var(--h-video-width) !important;

    height: 40px;

    background: rgba(0, 0, 0, 0.6);

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;

    will-change: transform;

    transform: translateX(-50%) translateY(110%);

    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

    z-index: 14;

}



@media (min-width: 768px) {

    #hulyx-tension-wrapper {

        bottom: 0;

        transform: translateX(-50%) translateY(100%);

    }

}



#hulyx-tension-wrapper.hud-visible {

    transform: translateX(-50%) translateY(0%) !important;

}



#hulyx-tension-bar {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

}



/* ── Energy Bar ─────────────────────────────── */

.energy-bar {

    width: 100%;

    height: 100%;

    background-color: #000;

    border: none;

    position: relative;

    overflow: hidden;

    filter: contrast(120%) brightness(250%);

}



.energy-bar__fill {

    position: absolute;

    top: 0; left: 0;

    height: 100%;

    width: 0%;

    background-color: #fff;

    transition: width 0.5s linear;

    transform-origin: left center;

}



.energy-bar__gradient {

    position: absolute;

    inset: 0;

    z-index: 10;

    pointer-events: none;

    mix-blend-mode: multiply;

    transition: background 0.4s ease;

}



/* Bleu : phase tension */

#rpg-fill-tension.phase-tension .energy-bar__gradient {

    background: linear-gradient(90deg, #007ffe, #001c3d);

}



/* Rouge : phase integration */

#rpg-fill-tension.phase-integration .energy-bar__gradient {

    background: linear-gradient(90deg, #cc0000, #3d0000);

}



/* Arc en ciel : overload */

#rpg-fill-tension.phase-overload .energy-bar__gradient {

    background: linear-gradient(90deg, #ff0000, #00f3ff, #ff00cc, #ff0000) !important;

    background-size: 200% 100% !important;

    animation: hulyx-rainbow-classic 1.5s linear infinite !important;

}



.energy-bar__spotlight {

    position: absolute;

    top: -100%;

    left: -100%;

    bottom: 0; right: 0;

    z-index: 11;

    pointer-events: none;

    background:

        radial-gradient(circle, #fff, transparent 25%) 0 0 / 25% 25%,

        radial-gradient(circle, #fff, #000 25%) 50% 50% / 12.5% 12.5%;

    mix-blend-mode: color-dodge;

    will-change: transform;

    animation: energy-spotlight 5s infinite linear;

}



@keyframes energy-spotlight {

    0%   { transform: translate3d(0, 0, 0); }

    100% { transform: translate3d(50%, 50%, 0); }

}



/* Overload : fill pleine largeur */

#rpg-fill-tension.phase-overload .energy-bar__fill {

    width: 100% !important;

}



/* =============================================

   NOTIFICATIONS & POPUPS

   ============================================= */



#rpg-popup {

    position: fixed;

    left: 50%;

    top: 50%;

    transform: translateX(-50%) translateY(0px);

    background: var(--h-bg-surface);

    color: var(--h-text-primary);

    padding: 6px 14px;

    border-radius: 5px;

    font-size: 16px;

    font-weight: 900;

    opacity: 0;

    border: 1px solid rgba(255, 255, 255, 0.2);

    transition: opacity 0.2s ease, transform 0.2s ease;

    pointer-events: none;

}



#rpg-popup.is-visible {

    opacity: 1;

    transform: translateX(-50%) translateY(-20px);

}