/**
 * 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: 28px;

    /* --- COLOR HIGHLIGHTS (Accents) --- */
    --h-accent-blue:      #00eaff; /* Cyan HUD */
    --h-accent-gold:      #f4c025; /* Gold XP */
    --h-accent-red:       #ff3b30; /* Red Timeline */
    --h-accent-blue-glow: rgba(0, 234, 255, 0.1);

    /* --- COLOR FONDS (Surfaces) --- */
    --h-bg-main:          #000000; /* Pure Black */
    --h-bg-surface:       rgba(10, 10, 10, 0.9); /* HUD Panels */
    --h-bg-card:          #111111; /* Bar background */
    --h-bg-overlay:       rgba(0, 0, 0, 0.9); /* Radial menu items */
    --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: 18 !important; }
#rpg-popup                 { z-index: 18 !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: 40px !important;
    position: fixed !important;
    left: 50% !important;
    width: var(--h-video-width) !important;
    height: var(--h-badge-size);
    display: flex;
    align-items: center;
    background: var(--h-bg-surface) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0 10px;
    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: 60px;
        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;
}

#rpg-level-badge {
    width: var(--h-badge-size);
    height: var(--h-badge-size);
    background: var(--h-bg-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--h-text-primary);
    font-weight: 900;
    font-size: 12px;
    margin-right: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
}

#hulyx-rpg-xp {
    position: relative;
    flex: 1;
    height: var(--h-xp-height);
    background: var(--h-bg-card);
    overflow: hidden;
    z-index: 1;
}

/* --- OPTIMISATION GPU DES BARRES DE PROGRESSION --- */

#rpg-fill-xp, #rpg-fill-latent, #rpg-fill-red {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateZ(0); 
    border-radius: inherit;
}

#rpg-fill-latent {
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background: rgba(255, 255, 255, 0.4);
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
}

#rpg-fill-xp {
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, #fceabb 0%, var(--h-accent-gold) 100%);
    box-shadow: none;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 2;
}

#rpg-fill-xp.is-rainbow {
    background: linear-gradient(90deg, #ff0000, #00f3ff, #ff00cc, #ff0000) !important;
    background-size: 200% 100% !important;
    animation: hulyx-rainbow-classic 1.5s linear infinite !important;
    will-change: filter; 
}

@keyframes hulyx-rainbow-classic {
    0%   { filter: hue-rotate(0deg) brightness(1.2); }
    100% { filter: hue-rotate(360deg) brightness(1.2); }
}

#hulyx-rpg-xp::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image: linear-gradient(115deg, 
        transparent 11.11%, #000 11.11%, #000 12.5%, 
        transparent 12.5%, transparent 22.22%, #000 22.22%, #000 23.5%,
        transparent 23.5%, transparent 33.33%, #000 33.33%, #000 34.5%,
        transparent 34.5%, transparent 44.44%, #000 44.44%, #000 45.5%,
        transparent 45.5%, transparent 55.55%, #000 55.55%, #000 56.5%,
        transparent 56.5%, transparent 66.66%, #000 66.66%, #000 67.5%,
        transparent 67.5%, transparent 77.77%, #000 77.77%, #000 78.5%,
        transparent 78.5%, transparent 88.88%, #000 88.88%, #000 89.5%,
        transparent 89.5%
    );
}

/* =============================================
   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: width;
}

#rpg-fill-red::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: var(--h-accent-red);
    border-radius: 50%;
    box-shadow: none;
}


/* =============================================
   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);
}