/* Theme Name: Hulyx Template: tikswipe Version: 2.8.9 Description: Version Native MP4 - GPU Optimized (Color Variables Centralized) */ :root { color-scheme: light; /* --- ACCENTS (HIGHLIGHTS) --- */ --h-accent-2: #ff3b30; --h-accent-main: #00eaff; --h-accent-gold: #f4c025; --h-accent-green: #00ff88; --h-accent-3: #ff4fa3; --h-accent-red: #ff3b30; /* --- TYPOGRAPHY --- */ --h-font-global: 'Montserrat', sans-serif; /* Variantes avec opacité */ --h-accent-main-glow: rgba(0, 234, 255, 0.3); --h-accent-gold-glow: rgba(244, 192, 37, 0.25); /* --- FONDS & SURFACES --- */ --h-bg-main: #000000; --h-bg-surface: #0a0a0a; --h-bg-card: #111111; --h-bg-overlay: rgba(0, 0, 0, 0.7); --h-bg-elevated: rgba(255, 255, 255, 0.06); --h-bg-inset: rgba(255, 255, 255, 0.04); /* --- BORDURES & LIGNES --- */ --h-border-subtle: rgba(255, 255, 255, 0.05); --h-border-active: rgba(255, 255, 255, 0.1); --h-border-medium: rgba(255, 255, 255, 0.15); /* --- TEXTE --- */ --h-text-primary: #ffffff; --h-text-secondary: rgba(255, 255, 255, 0.7); --h-text-muted: rgba(255, 255, 255, 0.4); --h-text-dim: #666666; --h-text-placeholder: rgba(255, 255, 255, 0.3); --h-footer-height: 60px; /* --- Z-INDEX MAP --- */ --z-footer: 19; --z-overlay: calc(var(--z-hud) + 1); --z-tutorial: 20; --z-video-shell: 1; --z-hud: 15; --z-modal: 100; --z-popup: var(--z-modal); } :focus-visible { outline: 2px solid var(--h-accent, #00eaff); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } body.hulyx-color-active #hulyx-video-viewport video, body.hulyx-color-active .swiper-slide video, body.hulyx-color-active .tikswipe-video-container video { filter: grayscale(0%) saturate(120%) hue-rotate(9deg) contrast(120%) brightness(110%) !important; transition: filter 0.4s ease-in-out; } *::-webkit-scrollbar { display: none !important; } * { scrollbar-width: none !important; } /** * HULYX UI NORMALIZATION & VIEWPORT */ .swiper.hulyx-main-swiper { position: relative; overflow: hidden; } /** * Hulyx Scroll UI CSS * Version: 1.1.1 - GPU Optimization */ .hulyx-nav-btn { pointer-events: auto !important; background: var(--h-bg-overlay); border: 1px solid var(--h-border-active); border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s, border-color 0.2s; padding: 12px; outline: none; } .hulyx-nav-btn:hover { background: var(--h-accent-main-glow); border-color: var(--h-accent-main); transform: scale(1.15) translateZ(0); } .hulyx-nav-btn:active { transform: scale(0.95); } @media (max-width: 767.98px) { } /* 1. Base & Shells */ body.hulyx-locked { overflow: hidden !important; touch-action: none; } .hulyx-video-shell video { width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); } /* 2. Navigation & Footer Sync (Z-index Fix) */ #tikswipe-footer-nav, .tikswipe-footer-nav, #hulyx-footer-nav { z-index: 17 !important; position: fixed !important; pointer-events: auto !important; } /* 3. Mobile Viewport Normalization (60px Footer) */ @media (max-width: 767.98px) { .swiper, .swiper-container, .tikswipe-video-container, #hulyx-video-viewport { height: calc(100svh - var(--h-footer-height)) !important; max-height: calc(100svh - var(--h-footer-height)) !important; } .swiper-slide { height: 100% !important; } } /* --- QUALITY TOGGLE SD/HD --- */ .h-menu-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px solid var(--h-border-subtle); padding-bottom: 8px; } .h-quality-btn { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 9px; font-weight: 900; padding: 3px 6px; background: var(--h-border-subtle); border-radius: 12px; user-select: none; transition: opacity 0.3s, transform 0.3s 0.3s ease; } .h-quality-btn .toggle-track { width: 22px; height: 12px; background: var(--h-bg-card); border-radius: 10px; position: relative; border: 1px solid var(--h-border-active); } .h-quality-btn .toggle-knob { width: 8px; height: 8px; background: var(--h-text-dim); border-radius: 50%; position: absolute; top: 1px; left: 1px; transition: opacity 0.3s, transform 0.3s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .h-quality-btn.is-hd .toggle-track { background: var(--h-accent-2); border-color: var(--h-accent-2); } .h-quality-btn.is-hd .toggle-knob { left: 11px; background: var(--h-text-primary); box-shadow: none !important; } .h-quality-btn.is-hd .label-hd { color: var(--h-text-primary); } .h-quality-btn:not(.is-hd) .label-sd { color: var(--h-text-primary); } .h-quality-btn span { color: var(--h-text-muted); transition: color 0.2s; } /** * Hulyx RPG HUD - Low Z Architecture (Max 20) */ #menu-header-navigation, #menu-mobile-icon { display: none !important; } .swiper-slide { position: relative !important; display: flex !important; justify-content: center !important; align-items: flex-start !important; width: 100% !important; height: 100% !important; overflow: hidden !important; background: transparent !important; } .hulyx-video-shell { position: relative !important; background: var(--h-bg-main); display: flex; justify-content: center; align-items: center; overflow: hidden; z-index: var(--z-video-shell); width: 100%; height: 100%; flex-shrink: 0; } @media (min-width: 768px) { #hulyx-tutorial-overlay, .h-auth-overlay-system { z-index: var(--z-hud) !important; } } @media (max-width: 767.98px) { #hulyx-tutorial-overlay, .h-auth-overlay-system { z-index: var(--z-hud) !important; } } .hulyx-native-video { width: 100%; height: 100%; object-fit: contain; display: block; } /* PC : Viewport 9:16 Centré */ @media (min-width: 768px) { .hulyx-video-shell { height: 100% !important; aspect-ratio: 9 / 16 !important; box-shadow: none; } .hulyx-native-video { object-fit: contain !important; } } /* MOBILE : Full Screen Crop */ @media (max-width: 767.98px) { .hulyx-video-shell { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; position: relative; overflow: hidden; background: #000; } .hulyx-native-video { object-fit: cover !important; } } /* v4.80e: LANDSCAPE AUTO-ROTATION (correct full-visible size, no crop). UNIVERSAL — applies to BOTH desktop (9:16 rail) and mobile (full-screen portrait). Slide[data-ratio] + --rot-w/--rot-h are computed in JS (_tagAspectRatio) during the preload of adjacent slides. The rotated 16:9/4:3 is sized so the WHOLE source stays visible (max-contain + light crop ~6% tolerance): on the 9:16 rail it fills height exactly (desktop), on mobile it fills width and is centered. A real-oriented landscape therefore has NO crop and NO letterbox bar (or only a thin one). v4.80j: when contain leaves real side bars (source NOT exactly 16:9, beyond the ~6% crop tolerance), the bars are filled with the video's own blurred thumbnail (see .hsp-video-backdrop below) — the standard no-black-bars look. object-fit: cover !important beats the desktop contain !important. */ .swiper-slide[data-ratio="landscape"] .hulyx-native-video { position: absolute; left: 50%; top: 50%; width: var(--rot-w, 100%) !important; height: var(--rot-h, 100%) !important; object-fit: cover !important; transform: translate(-50%, -50%) rotate(90deg); z-index: 1; } /* v4.80j: blurred-thumbnail backdrop filling the side bars of a landscape source that isn't exactly 16:9 (contain kept beyond crop tolerance). Injected by _tagAspectRatio/_setBackdrop (hulyx-scroll-manager.js) as the first child of the shell, behind the rotated video (z-index 0 < video 1). object-fit:cover + heavy blur gives the classic no-black-bars look; scale avoids blur-edge vignetting. */ .hsp-video-backdrop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px); transform: scale(1.1); z-index: 0; opacity: 0.5; } /* --- LOGO & HEADER VISIBILITY --- */ .site-header { position: fixed !important; top: 0px !important; left: 50% !important; width: 90% !important; max-width: min(100vw, calc(100vh * 9 / 16)) !important; height: 90px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px !important; background: transparent !important; z-index: calc(var(--z-hud) + 3) !important; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-100%); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .site-header.header-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%) !important; } @media (max-width: 767.98px) { .site-header { width: 100% !important; max-width: none !important; left: 0 !important; transform: translateY(-100%) !important; } .site-header.header-visible { transform: translateY(0) !important; } } .logo, .custom-logo, .custom-logo-link { display: inline-block; visibility: visible !important; opacity: 1 !important; width: auto !important; } /* --- GESTION OPACITÉ FOOTER (Gris à Blanc) --- */ #hulyx-footer-nav .hulyx-nav-item .hulyx-icon-wrap { opacity: 0.6; transition: opacity 0.3s ease; } #hulyx-footer-nav .hulyx-nav-item.active .hulyx-icon-wrap, .is-active .hulyx-icon-wrap { opacity: 1 !important; } .custom-logo { padding: 10px !important; margin-top: 40px !important; } #menu-mobile-icon, .h-nav-tutorial-item, .hulyx-arrows-stack { display: none !important; } @media (max-width: 767.98px) { .custom-logo { display:none !important; } } /* --- CONFIGURATION FOOTER PC --- */ @media (min-width: 768px) { #hulyx-footer-nav { position: fixed !important; top: 50% !important; bottom: auto !important; left: calc(50% + (100dvh * 9 / 16 / 2) + 40px) !important; transform: translateY(-50%) !important; width: 70px !important; height: auto !important; flex-direction: column !important; justify-content: center !important; gap: 30px !important; background: transparent !important; border: none !important; box-shadow: none !important; z-index: 17 !important; } .h-nav-tutorial-item { display: flex !important; order: -1 !important; } #hulyx-footer-nav .hulyx-nav-item { width: 50px !important; height: 50px !important; display: flex; justify-content: center; align-items: center; } #hulyx-footer-nav .hulyx-icon-wrap { transform: rotate(0deg) !important; } } .h-nav-item-wrapper:hover, .hulyx-nav-item:hover { background-color: transparent !important; } /* --- TIK SWIPE UI CLEANUP --- */ #switch-to-grid, .nav-item, .enlight-content, .swiper-button-next, .swiper-button-prev, .swiper-button-disabled, .single-content-infos, .copy-link, .comment-icon, .comment-closed, .add-to-fav, .add-fav { display: none !important; } /* --- UI COMPONENTS --- */ .slide-bg { background-color: rgba(0, 0, 0, 0) !important; } .video-item video, .video-player { opacity: 0 !important; pointer-events: none !important; } /* --- GESTION DES FILTRES COULEUR / B&W --- */ /* État par défaut : Couleur naturelle (grayscale désactivé) */ .swiper-slide video, #hulyx-video-viewport video, .hulyx-video-shell video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0%); transform: translateZ(0); will-change: opacity; transition: filter 0.5s ease-in-out, opacity 0.4s ease; } .hulyx-native-video { filter: grayscale(0%); transform: translateZ(0); will-change: opacity; transition: filter 0.5s ease-in-out, opacity 0.4s ease; } /* État activé par le bouton : Noir et Blanc (B&W) */ body.hulyx-color-active .swiper-slide video, body.hulyx-color-active #hulyx-video-viewport video, body.hulyx-color-active .tikswipe-video-container video, body.hulyx-color-active .hulyx-native-video { filter: grayscale(0%) saturate(130%) hue-rotate(6deg) contrast(125%) brightness(105%) !important; } #hulyx-video-viewport { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: -2 !important; background: var(--h-bg-main); overflow: hidden; } /** * Swiper Viewport Constraint */ .swiper { width: 100vw; height: 100svh; margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } @media (min-width: 768px) { .swiper { width: calc(100dvh * 9 / 16) !important; margin: 0 auto !important; left: 0 !important; right: 0 !important; transform: none !important; box-shadow: none; } } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; box-sizing: content-box; } .site-header .custom-logo { display: none !important; } /* Hide timeline bar completely */ #hulyx-timeline-wrapper { display: none !important; } /* Black & White filter */ body.hulyx-bw-active #hulyx-video-viewport video, body.hulyx-bw-active .swiper-slide video, body.hulyx-bw-active .tikswipe-video-container video, body.hulyx-bw-active .hulyx-native-video { filter: grayscale(100%) !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @keyframes goonit-particle-drift { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(5px, -8px); } 50% { transform: translate(-3px, 5px); } 75% { transform: translate(7px, 3px); } } /* === MENU BG LOCK: physical event-absorbing barrier === */ /* When ANY footer menu overlay is open, a full-screen transparent layer (z-index:10, above the video feed at z:-2, below all menu shells at z:14+) intercepts EVERY wheel/touch/pointer event so the background feed can NEVER scroll. Menu cards (z >= 14) sit above and work normally. */ /* ============================================= HULYX TOP NOTIFICATION Style: minimalist dark — X/Twitter inspired Version: 1.1.0 - Header Sync (20px + 10px offset) ============================================= */ #hulyx-top-notif-wrapper { /* Fixed wrapper to isolate stacking context — no transform, no will-change */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-tutorial); } #hulyx-top-notif { /* Position */ position: absolute; top: 60px; left: 50%; transform: translateX(-50%) translateY(-150%); z-index: 1; /* Size — matches video width on all screens */ width: calc(var(--h-video-width, 90vw) - 24px); max-width: min(90vw, calc(90vh * 9 / 16)); min-width: 280px; /* Layout */ display: flex; align-items: center; gap: 14px; padding: 14px 16px; box-sizing: border-box; /* Visual */ background: var(--h-bg-surface); border: 1px solid var(--h-bg-card); border-radius: 14px; overflow: visible; /* allow dot to overflow border */ box-shadow: 0 10px 30px var(--h-bg-overlay); /* Transition — slow smooth slide from top */ transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; pointer-events: auto !important; /* override wrapper pointer-events:none */ cursor: pointer; } /* Visible state */ #hulyx-top-notif.htn-show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } /* Exit state */ #hulyx-top-notif.htn-hide { transform: translateX(-50%) translateY(-150%); opacity: 0; pointer-events: none; } /* --- Avatar --- */ .htn-avatar { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--h-bg-card); border: 1px solid var(--h-bg-card); display: flex; align-items: center; justify-content: center; } .htn-avatar img, .htn-avatar svg, .htn-avatar dotlottie-player { width: 100%; height: 100%; object-fit: cover; display: block; } .htn-avatar svg { padding: 6px; box-sizing: border-box; } /* --- Content --- */ .htn-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .htn-title { font-size: 11px; font-weight: 900; color: var(--h-text-primary); text-transform: uppercase; letter-spacing: 1.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .htn-body { font-size: 12px; font-weight: 500; color: var(--h-text-dim); line-height: 1.5; word-break: break-word; } /* Typewriter cursor — hidden, logic kept in JS */ .htn-cursor { display: none; } /* --- HUD status dot — top LEFT corner --- */ .htn-dot { position: absolute; top: 9px; left: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--h-accent-main); opacity: 0; flex-shrink: 0; transition: opacity 0.4s ease; pointer-events: none; box-shadow: 0 0 0 0 var(--h-accent-2); } #hulyx-top-notif.htn-show .htn-dot { opacity: 1; animation: htn-dot-pulse 1.8s ease-in-out infinite; } @keyframes htn-dot-pulse { 0% { opacity: 1; box-shadow: 0 0 0 0 var(--h-accent-2); } 50% { opacity: 0.4; box-shadow: 0 0 0 6px rgba(255, 0, 0, 0); } 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); } } /* --- Close button — top right --- */ .htn-close { flex-shrink: 0; background: none; border: none; color: var(--h-text-dim); font-size: clamp(11px, 2vw, 14px); line-height: 1; padding: 4px; cursor: pointer; border-radius: 4px; transition: color 0.2s, background 0.2s; align-self: flex-start; } .htn-close:hover { color: var(--h-text-primary); background: var(--h-border-active); } /* --- Link cursor when notif has a link --- */ #hulyx-top-notif.htn-has-link { cursor: pointer; } #hulyx-top-notif.htn-has-link:hover { border-color: var(--h-text-dim); } /* --- Hover feedback --- */ #hulyx-top-notif.htn-show:hover { border-color: var(--h-bg-card); background: var(--h-bg-card); } /* --- Mobile adjustments --- */ @media (max-width: 480px) { #hulyx-top-notif { /* On garde top: 30px ici aussi pour respecter la règle du header de 20px */ top: 60px; padding: 12px 14px; gap: 12px; /* Sur mobile, on peut élargir un peu pour utiliser l'espace */ width: calc(100% - 20px); } .htn-avatar { width: 36px; height: 36px; } .htn-title { font-size: 10px; } .htn-body { font-size: 11px; } } /* ============================================= LEVEL-UP PILL — glass-morphism, scrolling text ============================================= */ #hulyx-lvlup-pill { position: fixed; left: 50%; transform: translateX(-50%) translateY(-20px); z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; width: 92%; max-width: 512px; box-sizing: border-box; background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(12px); border: 0.5px solid rgba(255, 255, 255, 0.2); border-radius: 999px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); pointer-events: auto; opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; } #hulyx-lvlup-pill.is-top { top: 15px; } #hulyx-lvlup-pill.is-bottom { top: auto; bottom: 15px; } #hulyx-lvlup-pill.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } #hulyx-lvlup-pill.is-hidden { opacity: 0; transform: translateX(-50%) translateY(-20px); } .hulyx-pill-avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .hulyx-pill-avatar img, .hulyx-pill-avatar svg, .hulyx-pill-avatar dotlottie-player { width: 100%; height: 100%; object-fit: cover; display: block; } .hulyx-pill-avatar svg { padding: 4px; box-sizing: border-box; } .hulyx-pill-scroll { flex: 1; overflow: hidden; position: relative; height: 1.4em; } .hulyx-pill-text { display: inline-block; white-space: nowrap; position: absolute; left: 100%; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.7); animation: hulyxPillScroll var(--scroll-duration, 12s) linear forwards; } @keyframes hulyxPillScroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% - 100vw)); } } .hulyx-pill-level { flex-shrink: 0; font-weight: 900; font-size: 13px; color: #ff2e82; text-shadow: 0 0 10px rgba(255, 46, 130, 0.5); } /* --- HULYX AUTH SYSTEM (Viewport Masking Logic) --- */ .h-auth-overlay-system { /* Le conteneur devient centré et fait la hauteur de la vidéo */ position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: var(--h-video-width); height: 100%; z-index: var(--z-tutorial); pointer-events: none; display: flex; align-items: center; justify-content: center; /* On gère l'opacité et le flou de fond */ background: rgba(0, 0, 0, 0); transition: background 0.4s ease, visibility 0.4s; visibility: hidden; } .h-auth-overlay-system.visible { visibility: visible; pointer-events: auto; background: var(--h-bg-overlay); /* Voile noir flouté limité à la zone vidéo */ } /* Le Layer de flou */ .h-auth-overlay-system::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s; z-index: -1; } .h-auth-overlay-system.visible::before { opacity: 1; } .h-auth-content { width: 90%; max-width: min(90vw, calc(90vh * 9 / 16)); height: auto; max-height: 80vh; background: var(--h-bg-surface); border: 1px solid var(--h-border-active); border-radius: 25px; padding: 30px 30px 30px; box-sizing: border-box; overflow-y: auto; /* ÉTAT INITIAL */ transform: scale(0.88) translateY(16px); opacity: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; will-change: transform, opacity; box-shadow: 0 12px 40px var(--h-bg-overlay); } .h-auth-overlay-system.visible .h-auth-content { /* ÉTAT ACTIF */ transform: scale(1) translateY(0); opacity: 1; } /* --- ELEMENTS INTERNES --- */ .h-auth-logo { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 10; margin: 0 !important; } .h-auth-logo img { width: 90px; height: 90px; display: block; } .h-auth-box { background: transparent; padding: 0; position: relative; padding-top: 90px; /* Espace réservé pour le logo absolu */ } /* VIEW STATES */ .h-dash-view { display: none; opacity: 1 !important; visibility: visible !important; } .h-dash-view.is-active { display: block !important; } /* PROFILE ELEMENTS */ .h-auth-status { color: var(--h-accent-main); text-align: center; font-weight: 900; font-size: clamp(8px, 1.5vw, 10px); letter-spacing: 3px; margin-bottom: 20px; } .h-profile-display { text-align: center; margin-bottom: 20px; } .h-avatar-circle { width: 90px; height: 90px; border-radius: 50%; border: 2px solid var(--h-accent-main); margin: 0 auto 15px; overflow: hidden; } .h-avatar-circle img { width: 100%; height: 100%; object-fit: cover; } .h-user-tier { display: inline-block; padding: 4px 10px; border-radius: 4px; background: var(--h-accent-main-glow); color: var(--h-accent-main); font-size: clamp(7px, 1.2vw, 9px); font-weight: 900; letter-spacing: 1px; margin-bottom: 10px; } .h-user-name { font-size: 20px; color: var(--h-text-primary); font-weight: 700; margin-bottom: 15px; } /* UPGRADE BOX */ .h-upgrade-box { padding: 0px 15px; text-align: center; } .h-up-title { color: var(--h-accent-main); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 15px 0; } .h-up-limits { list-style: none; padding: 0; margin: 0 0 20px 0; text-align: left; } .h-up-limits li { font-size: clamp(9px, 1.5vw, 11px); color: var(--h-text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; } .h-up-limits li span { color: var(--h-accent-main); font-weight: bold; } .h-btn-premium { display: block; background-color: var(--h-accent-main) !important; color: var(--h-bg-main); padding: 14px; border-radius: 8px; font-weight: 900; font-size: clamp(9px, 1.5vw, 11px); text-decoration: none; text-transform: uppercase; border: none; position: relative; overflow: hidden; animation: hspBtnPulse 2s ease-in-out infinite; } .h-btn-premium:hover { background-color: var(--h-my-buttonhover) !important; } .h-btn-premium.is-ready { animation: hspBtnReadyPulse 0.8s ease-out 3; } /* ACTIONS & FORMS */ .h-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; } .h-auth-btn { width: 100%; padding: 14px; border-radius: 8px; border: none; font-weight: 800; cursor: pointer; text-transform: uppercase; font-size: clamp(8px, 1.5vw, 10px); } .h-auth-btn.primary { background: var(--h-accent-main); color: var(--h-text-primary); } .h-auth-btn.secondary { background: var(--h-bg-card); color: var(--h-text-primary); border: 1px solid var(--h-border-active); } .h-auth-divider { text-align: center; margin: 30px 0; border-bottom: 1px solid var(--h-border-subtle); line-height: 0.1em; } .h-auth-divider span { background: var(--h-bg-surface); padding:0 15px; color: var(--h-text-dim); font-size: clamp(7px, 1.2vw, 9px); letter-spacing: 1px; } .h-btn-social { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background: var(--h-bg-card); border: 1px solid var(--h-border-active); border-radius: 8px; color: var(--h-text-primary); font-size: clamp(9px, 1.5vw, 11px); font-weight: 800; text-decoration: none; transition: background 0.2s, border-color 0.2s; } .h-btn-social:hover { background: var(--h-border-active); border-color: var(--h-accent-main); } .h-social-wrap { display: flex; flex-direction: column; gap: 8px; } .h-btn-social svg { flex-shrink: 0; } .h-btn-social-text { font-size: clamp(9px, 1.5vw, 11px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px; } .h-social-wrap-logo-only { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 8px; } .h-social-wrap-logo-only .h-btn-social-logo { width: auto; padding: 10px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; } .h-social-wrap-logo-only .h-btn-social-logo svg { display: block; } .h-switch-link { text-align: center; font-size: clamp(8px, 1.5vw, 10px); font-weight: 800; color: var(--h-text-muted); margin-top: 35px; cursor: pointer; text-transform: uppercase; transition: color 0.2s; } .h-switch-link:hover { color: var(--h-text-primary); } .h-exit-label { text-align: center; font-size: clamp(7px, 1.2vw, 9px); font-weight: 900; color: var(--h-text-muted); margin-top: 30px; cursor: pointer; letter-spacing: 2px; text-transform: uppercase; transition: color 0.2s; } .h-exit-label:hover { color: var(--h-text-primary); } .h-auth-box input { width: 100%; background: var(--h-bg-card); border: 1px solid var(--h-border-active); color: var(--h-bg-main); padding: 14px; margin-bottom: 12px; border-radius: 8px; outline: none; box-sizing: border-box; } .h-msg-box { text-align: center; font-size: clamp(9px, 1.5vw, 11px); margin-bottom: 15px; min-height: 15px; } .h-msg-box.err { color: var(--h-accent-main); } .h-msg-box.ok { color: var(--h-accent-main); } .h-avatar-upload { text-align: center; margin-bottom: 20px; } #h-avatar-preview { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--h-accent-main); object-fit: cover; cursor: pointer; } .h-upload-label { display: block; font-size: clamp(8px, 1.5vw, 10px); margin-top: 8px; color: var(--h-text-dim); } /* --- NAV HEADER --- */ .h-trigger-tutorial { display: inline-flex; align-items: center; cursor: pointer; color: var(--h-text-primary); font-weight: 800; text-transform: uppercase; font-size: 13px; } .h-trigger-tutorial > span { margin-right: 10px; } .h-nav-auth-trigger { cursor: pointer; display: inline-block; vertical-align: middle; } .hulyx-nav-profile-group { display: inline-block; white-space: nowrap; } .hulyx-nav-img { width: 40px; height: 40px; border-radius: 55px; margin-right: 12px; border: 1px solid var(--h-border-active); vertical-align: middle; } .hulyx-arrows-stack { width: 28px; height: 38px; position: relative; display: inline-block; vertical-align: middle; } .hulyx-chevron-group svg:last-child { margin-top: -10px; } /* --- RHYTHM / XP BAR --- */ .rhythm-combined { display: flex; align-items: center; gap: 20px; padding: 0 12px; width: 100%; } #hulyx-rpg-rhythm.rhythm-bar { display: flex; gap: 6px; align-items: center; width: auto; } /* --- ICON RENDERING (from PHP render_icon closures) --- */ .h-icon-render { width: var(--icon-size); height: var(--icon-size); object-fit: contain; } .h-icon-render--block { display: block; } .h-icon-render--inline { display: inline-block; vertical-align: middle; } .h-icon-render--pointer { pointer-events: none; } .h-icon-render--fill { fill: currentColor; } /** * Hulyx UI - Audio Matrix Styles */ /* --- BILATERAL FLOW BTN --- */ .h-flow-btn { grid-column: span 2; background: linear-gradient(90deg, var(--h-accent-main-glow), var(--h-accent-main-glow)); border: 1px solid var(--h-accent-main-glow) !important; color: var(--h-accent-main) !important; font-weight: 900 !important; } .h-flow-btn.active { background: var(--h-accent-main) !important; color: var(--h-bg-main) !important; box-shadow: 0 0 20px var(--h-accent-main-glow); } /* Feedback Master OFF */ .h-shake { animation: h-audio-shake 0.4s ease-in-out; } @keyframes h-audio-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .h-audio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .h-audio-toggle { background: var(--h-border-subtle); border: 1px solid var(--h-border-active); color: var(--h-text-primary); padding: 12px; border-radius: 12px; font-size: clamp(9px, 1.5vw, 11px); font-weight: 500; cursor: pointer; text-align: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); outline: none; } .h-audio-toggle:hover { background: var(--h-border-active); } /* État Actif */ .h-audio-toggle.active { background: var(--h-text-primary) !important; color: var(--h-bg-main) !important; font-weight: 700; border-color: transparent !important; box-shadow: 0 0 15px var(--h-border-active); } .h-audio-toggle.active:hover { background: var(--h-text-primary) !important; } .h-audio-toggle:active { transform: scale(0.95); } /* --- MATRIX ENGINE CORE --- */ .hulyx-audio-menu { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); background: var(--h-bg-surface); padding: 20px; border-radius: 15px; /* backdrop-filter removed — bg 0.98 opacity, blur invisible */ border: 1px solid var(--h-border-active); opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); width: 260px; z-index: var(--z-popup); box-shadow: 0 20px 50px var(--h-bg-overlay); } .hulyx-audio-menu.is-open { opacity: 1; pointer-events: auto; right: 80px; } .h-audio-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--h-border-active); } .h-audio-header span { color: var(--h-text-primary); font-size: clamp(9px, 1.5vw, 11px); font-weight: 900; letter-spacing: 2px; } /* --- MATRIX GRID --- */ .h-audio-matrix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; } .h-matrix-btn { background: var(--h-border-subtle); border: 1px solid var(--h-border-active); color: var(--h-text-dim); padding: 12px 5px; border-radius: 8px; font-size: clamp(7px, 1.2vw, 9px); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: 0.3s; } .h-matrix-btn.active { background: var(--h-accent-main-glow); border-color: var(--h-accent-main); color: var(--h-accent-main); box-shadow: 0 0 15px var(--h-accent-main-glow); } .h-matrix-btn:disabled { opacity: 0.3; cursor: not-allowed; } /* --- MUSIC PLAYER --- */ .h-music-main-btn { width: 100%; background: var(--h-border-subtle); border: 1px dashed var(--h-border-active); color: var(--h-text-primary); padding: 14px; border-radius: 10px; font-size: clamp(8px, 1.5vw, 10px); font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: 0.3s; margin-bottom: 10px; } .h-music-main-btn.active { border-style: solid; border-color: var(--h-accent-main); color: var(--h-accent-main); } .h-player-box { background: var(--h-border-subtle); border-radius: 12px; padding: 15px; display: none; border: 1px solid var(--h-border-subtle); margin-top: 10px; } .h-player-info { text-align: center; margin-bottom: 15px; } .h-player-status { display: block; font-size: clamp(8px, 1.5vw, 10px); color: var(--h-accent-main); letter-spacing: 0.05em; font-weight: 700; margin-bottom: 5px; } .h-player-title { color: var(--h-text-primary); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .h-player-controls { display: flex; justify-content: center; align-items: center; gap: 20px; } .h-player-btn { background: none; border: none; color: var(--h-text-primary); opacity: 0.5; cursor: pointer; transition: 0.2s; padding: 5px; } .h-player-btn:hover { opacity: 1; transform: scale(1.1); } .h-player-btn svg { width: 18px; height: 18px; fill: currentColor; } .h-player-btn.play-main svg { width: 30px; height: 30px; color: var(--h-accent-main); } /* --- SLIDERS & SWITCHES --- */ #h-master-volume { width: 100%; margin-bottom: 15px; height: 4px; accent-color: var(--h-accent-main); } .h-switch { position: relative; display: inline-block; width: 34px; height: 18px; } .h-switch input { opacity: 0; width: 0; height: 0; } .h-slider { position: absolute; cursor: pointer; inset: 0; background: var(--h-border-active); transition: .4s; border-radius: 20px; } .h-slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background: var(--h-text-primary); transition: .4s; border-radius: 50%; } input:checked + .h-slider { background: var(--h-accent-main); } input:checked + .h-slider:before { transform: translateX(16px); } /* Animation pour le rappel d'activation Master */ .h-shake { animation: h-shake 0.4s ease-in-out; } @keyframes h-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* ============================================= HULYX TUTORIAL (Viewport Masking Logic) ============================================= */ @media (max-width: 767.98px) { .h-tutorial-body { flex: 1; overflow-y: auto; padding: 20px; padding-bottom: 80px; } } @media (min-width: 768px) { .h-tutorial-body { flex: 1; overflow-y: auto; padding: 20px; padding-bottom: 30px!important;} } #hulyx-tutorial-overlay { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: var(--h-video-width); height: 100%; z-index: var(--z-tutorial); pointer-events: none; overflow: hidden; background: transparent; transition: background 0.4s ease, visibility 0.4s; visibility: hidden; } #hulyx-tutorial-overlay.is-visible { visibility: visible; pointer-events: auto; background: var(--h-bg-overlay); /* Fond sombre centralisé */ } #hulyx-tutorial-overlay .h-tutorial-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--h-bg-main); /* Fond principal noir */ box-sizing: border-box; display: flex; flex-direction: column; overflow-y: hidden; transform: translateZ(0); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* --- MOBILE LOGIC (DEFAULT): Slide from LEFT --- */ transform: translateX(-100%); } /* --- PC LOGIC (min-width: 768px): Slide from RIGHT --- */ @media (min-width: 768px) { #hulyx-tutorial-overlay .h-tutorial-content { transform: translateX(100%); border-right: none; } } #hulyx-tutorial-overlay.is-visible .h-tutorial-content { /* ACTIVE STATE: Always centered in mask regardless of origin */ transform: translateX(0) !important; } /* --- HULYX TUTORIAL OVERLAY (ICONS FIXED) --- */ .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; } .h-tutorial-container { background: var(--h-bg-surface); /* Fond de surface */ border-radius: 0; overflow: hidden; height: 100%; width: 100%; display: flex; flex-direction: column; position: relative; } /* HEADER */ .h-tutorial-header { padding: 20px; border-bottom: 1px solid var(--h-border-subtle); display: flex; justify-content: center; align-items: center; } /* TABS NAV */ .h-tutorial-tabs-nav { display: flex; background: var(--h-bg-card); border-bottom: 1px solid var(--h-border-subtle); overflow-x: auto; scrollbar-width: none; } .h-tutorial-tabs-nav::-webkit-scrollbar { display: none; } .h-tab-trigger { background: none; border: none; color: var(--h-text-muted); padding: 15px 20px; font-size: clamp(8px, 1.5vw, 10px); font-weight: 800; cursor: pointer; border-bottom: 2px solid transparent; text-transform: uppercase; } .h-tab-trigger.is-active { color: var(--h-accent-main); border-bottom-color: var(--h-accent-main); background: var(--h-border-subtle); } /* BODY */ .h-tutorial-body::-webkit-scrollbar { width: 4px; } .h-tutorial-body::-webkit-scrollbar-thumb { background: var(--h-border-active); border-radius: 10px; } .h-tab-content { display: none; } .h-tab-content.is-active { display: block; animation: hFadeSlide 0.4s ease forwards; } @keyframes hFadeSlide { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } /* ACCORDIONS */ .h-accordion-list { display: flex; flex-direction: column; gap: 10px; } .h-acc-item { border: 1px solid var(--h-border-subtle); border-radius: 6px; background: var(--h-bg-card); overflow: hidden; transition: all 0.3s; } .h-acc-header { padding: 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: clamp(9px, 1.5vw, 11px); font-weight: 800; color: var(--h-text-primary); text-transform: uppercase; letter-spacing: 1px; transition: background 0.3s; } .h-acc-item:hover .h-acc-header { background: var(--h-bg-surface); color: var(--h-text-primary); } /* ICON STYLING */ .h-acc-icon-box { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; background: var(--h-border-subtle); border-radius: 4px; } .h-acc-icon-box .material-icons { font-size: 18px !important; color: var(--h-text-muted); transition: color 0.3s; } .h-acc-chevron { color: var(--h-text-dim); font-size: 18px !important; transition: transform 0.3s; } .h-acc-item.is-open { border-color: var(--h-accent-main); } .h-acc-item.is-open .h-acc-header { background: var(--h-border-subtle); color: var(--h-accent-main); } .h-acc-item.is-open .h-acc-icon-box .material-icons { color: var(--h-accent-main); } .h-acc-item.is-open .h-acc-chevron { transform: rotate(180deg); color: var(--h-accent-main); } .h-acc-content { background: var(--h-bg-main); display: none; } .h-acc-inner { padding: 20px 25px; font-size: 12px; color: var(--h-text-muted); line-height: 1.6; border-top: 1px solid var(--h-border-subtle); } .h-acc-inner img { max-width: 100%; border-radius: 4px; margin: 10px 0; border: 1px solid var(--h-border-active); } /* CALL TO ACTION */ .h-tutorial-cta { margin-top: 30px; width: 100%; padding: 18px; background: transparent; border: 1px solid var(--h-accent-main); display: flex; justify-content: center; align-items: center; gap: 10px; border-radius: 6px; cursor: pointer; transition: all 0.3s; color: var(--h-accent-main); text-transform: uppercase; font-weight: 800; font-size: clamp(9px, 1.5vw, 11px); letter-spacing: 2px; } .h-tutorial-cta .material-icons { font-size: 16px !important; } .h-tutorial-cta:hover { background: var(--h-accent-main); color: var(--h-bg-main); box-shadow: 0 0 15px var(--h-accent-2); } /* --- INLINE STYLE REPLACEMENTS --- */ #player-mascot, dotlottie-player { width: 100%; height: 100%; object-fit: cover; } .h-auth-logo { display: flex; align-items: center; justify-content: center; width: 100%; } .h-auth-logo a { display: inline-block; } .h-auth-logo img { width: 90px; display: block; } .h-acc-header > div { display: flex; align-items: center; gap: 15px; } .h-acc-content.is-open, .h-acc-content[style*="display:block"] { display: block; } #xp-bar-identity { width: var(--xp-pct); } /* ================================================ HULYX RPG HUD — Component Styles Sections: Hold Loader, Radial Menu, XP Bar, Timeline, Light Indicator, Tension Bar, Energy Bar, RPG Popup ================================================ */ :root { /* --- LAYOUT VARIABLES --- */ --h-video-width: 90vw; --h-timeline-height: 4px; --h-timeline-bg-height: 40px; --h-xp-height: 6px; --h-knob-size: 14px; --h-badge-size: 15px; } /* ============================================= ARCHITECTURE & Z-INDEX (STRICT 15-20) ============================================= */ #hulyx-strobe-container { z-index: 16 !important; } #hulyx-timeline-wrapper { z-index: 12 !important; } body.hulyx-radial-disabled #hulyx-radial-menu, body.hulyx-radial-disabled #hulyx-hold-loader { display: none !important; } #hulyx-hold-loader { z-index: var(--z-footer) !important; } #hulyx-radial-menu { z-index: var(--z-tutorial) !important; } #hulyx-word-strobe-overlay { z-index: var(--z-tutorial) !important; } /* ============================================= TIMELINE CONTROLS ANIMATIONS ============================================= */ #hulyx-timeline-controls { transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); transform: translateZ(0); } #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 ================================================ */ #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-main)); } #hulyx-hold-loader circle { fill: none; stroke-width: 6; stroke-linecap: round; } #hulyx-hold-loader .track { stroke: var(--h-accent-main-glow); } #hulyx-hold-loader .fill { stroke: var(--h-accent-main); stroke-dasharray: 226; stroke-dashoffset: 226; transition: none; } #hulyx-hold-loader.is-charging .fill { transition: stroke-dashoffset 0.5s linear; stroke-dashoffset: 0; } /* ================================================ RADIAL MENU ================================================ */ #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-main); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--h-accent-main); font-size: 9px; font-weight: bold; left: 50%; top: 50%; margin: -27.5px 0 0 -27.5px; transition: opacity 0.3s, transform 0.3s 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-main); 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); } /* ================================================ XP BAR ================================================ */ #hulyx-rpg-rhythm { display: flex; gap: 6px; align-items: center; width: auto; flex: none; align-self: center; height: 10px; z-index: 16; } /* ── XP Level Bar (bottom, next level progress) ── */ #hulyx-xp-level-bar { position: fixed !important; left: 50%; transform: translateX(-50%) translateY(100%); width: 90%; gap: 10px; max-width: min(100vw, calc(100vh * 9 / 16)); z-index: 16; display: flex; align-items: center; padding: 6px 15px; background: var(--h-bg-surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgb(65 65 65 / 20%); pointer-events: none; min-height: 30px; bottom: 0; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } #hulyx-xp-level-bar.hud-visible { transform: translateX(-50%) translateY(0%) !important; } /* v4.37: Hide XP bar when any overlay/menu is open */ body:has(#hsp-overlay.is-visible) #hulyx-xp-level-bar, body:has(#hsp-hp-overlay.is-open) #hulyx-xp-level-bar, body:has(#hsp-menu-overlay.is-open) #hulyx-xp-level-bar, body:has(.hulyx-locked) #hulyx-xp-level-bar { transform: translateX(-50%) translateY(100%) !important; } @media (max-width: 767.98px) { #hulyx-xp-level-bar { width: 100% !important; max-width: none !important; bottom: var(--h-footer-height); transform: translateX(-50%) translateY(110%); } #hulyx-xp-level-bar.hud-visible { transform: translateX(-50%) translateY(0%) !important; } } #hulyx-xp-level-track { flex: 1 1 0; height: 7px; background: #fff3; border-radius: 4px; overflow: hidden; min-width: 0; } #hulyx-xp-level-fill { width: 0%; height: 100%; max-width: 100%; border-radius: 0; position: relative; overflow: hidden; transition: width 0.3s ease-out, background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s ease; --xp-bar-color: #00ff88; --xp-bar-shine: #b0ffcc; } #hulyx-xp-level-fill::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, transparent 0%, var(--xp-bar-shine) 5%, transparent 10%, transparent 45%, var(--xp-bar-shine) 50%, transparent 55%, transparent 100%); background-size: 800px 100%; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } #hulyx-xp-level-fill.is-overload { background: var(--h-accent-gold) !important; box-shadow: 0 0 15px var(--h-accent-gold-glow), 0 0 30px var(--h-accent-2), inset 0 1px 2px var(--h-text-secondary) !important; animation: hulyx-rainbow-classic 1.5s linear infinite !important; } #hulyx-xp-level-fill.is-red { background: #ff2e82 !important; box-shadow: 0 0 12px rgba(255, 46, 130, 0.6), 0 0 24px rgba(255, 46, 130, 0.3) !important; } #hulyx-xp-level-fill.is-shine::after { opacity: 1; animation: xpShine 1.4s linear infinite; } #hulyx-xp-level-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--h-text-primary); white-space: nowrap; flex: none; opacity: 0.8; } #hulyx-xp-level-num { color: var(--h-text-primary); } .rhythm-segment { width: 10px; height: 10px; flex: none; background: var(--h-bg-card); border-radius: 50%; } @keyframes hulyx-juicy-flash { 0% { background: var(--flash-color); box-shadow: 0 0 15px var(--flash-color), inset 0 0 10px var(--h-text-primary); } 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; } /* ── Overload rainbow — segments ───────────────────────────────── */ .rhythm-segment.is-overload { background: var(--h-accent-gold) !important; animation: hulyx-rainbow-classic 1.5s linear infinite !important; /* will-change omitted — browser promotes on demand */ box-shadow: 0 0 15px var(--h-accent-gold-glow), 0 0 30px var(--h-accent-2) !important; filter: brightness(1.3) !important; } /* ── Red light locked state for segments ── */ .rhythm-segment.is-red-locked { background: #ff2e82 !important; box-shadow: 0 0 15px #ff2e82, inset 0 0 5px var(--h-text-secondary) !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: var(--h-accent-gold); box-shadow: 0 0 25px var(--h-text-secondary), 0 0 15px var(--h-accent-gold), inset 0 0 5px var(--h-text-secondary); transform: scaleY(1.2); filter: hue-rotate(0deg) brightness(1.5); } 40% { background: var(--h-accent-gold); box-shadow: 0 0 15px var(--h-text-muted), 0 0 8px var(--h-accent-gold); 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); } } /* ================================================ TIMELINE WRAPPER ================================================ */ #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); 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); transform: translateZ(0); } @media (min-width: 768px) { /* ================================================ TIMELINE WRAPPER ================================================ */ #hulyx-timeline-wrapper { bottom: 0; transform: translateX(-50%) translateY(100%); } /* ================================================ TIMELINE WRAPPER ================================================ */ #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: 767.98px) { /* ================================================ TIMELINE WRAPPER ================================================ */ #hulyx-timeline-wrapper { bottom: var(--h-footer-height); transform: translateX(-50%) translateY(110%); } /* ================================================ TIMELINE WRAPPER ================================================ */ #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%); } } } /* ================================================ TIMELINE WRAPPER ================================================ */ #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: var(--h-border-medium); cursor: grab; } /* Timeline Vidéo */ #rpg-fill-red { width: 0%; background: var(--h-accent-main); 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-main); } #rpg-fill-red::after { content: ""; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: var(--h-accent-gold); border-radius: 50%; box-shadow: 0 0 10px var(--h-accent-gold-glow); } /* ============================================= HULYX STROBE ENGINE Version: 1.2.1 - Strict Viewport Clipping ============================================= */ #hulyx-strobe-container { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100svh; z-index: var(--z-hud) !important; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.9s ease; overflow: hidden; } /* Strobe video overlay */ #hulyx-strobe-container video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0; transition: opacity 0.6s ease; } /* Desktop */ @media (min-width: 768px) { #hulyx-strobe-container { width: 100% !important; max-width: min(100vw, calc(100dvh * 9 / 16)) !important; } } #hulyx-strobe-container.is-visible { opacity: 1; pointer-events: auto; } .hulyx-strobe-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.7 !important; object-fit: cover; z-index: 1; /* Fond du container */ pointer-events: none; transform: translateZ(0); } #hulyx-word-strobe-overlay { position: fixed; inset: 0; display: none; justify-content: center; align-items: center; z-index: 11; pointer-events: none; } #hulyx-strobe-text { font-weight: 900; text-transform: uppercase; text-align: center; font-size: clamp(30px, 12vmin, 160px); color: var(--h-text-primary); -webkit-text-stroke: 15px var(--h-bg-main); paint-order: stroke fill; text-shadow: 0 0 30px var(--h-bg-main); } /* --- RETENTION CHALLENGE : RPG GRID SYSTEM --- */ :root { /* Utilisation des variables globales injectées par style.css */ --h-red-glow: var(--h-accent-2); --h-red-solid: var(--h-accent-main); --h-gold-milestone: var(--h-accent-gold); --h-hold-duration: 1.333s; } .h-retention-wrapper { padding: 10px 5px; display: flex; flex-direction: column; gap: 25px; } /* ─── CINEMATIC RESET — variante couleur ────────────────────────────────────── */ .h-cinematic-overlay { position: absolute; inset: 0; z-index: var(--z-modal); background: var(--h-bg-surface); /* Fond de surface */ display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.55s ease; border-radius: 12px; } #retention-view-intro, #retention-view-confirm { position: relative; } .h-cinematic-reset .h-cin-l1, .h-cinematic-reset .h-cin-l2 { color: var(--h-text-primary); text-shadow: none; } .h-cinematic-reset .h-cin-l3 { color: var(--h-red-solid); text-shadow: 0 0 30px var(--h-red-glow); } .h-cinematic-reset .h-cin-bar { background: var(--h-red-solid); box-shadow: 0 0 6px var(--h-red-glow); } /* ─── MISSED DAY BANNER ─────────────────────────────────────────────────────── */ .h-missed-banner { display: flex; align-items: center; gap: 10px; background: var(--h-accent-2); /* Opacité spécifique rouge */ border: 1px solid var(--h-accent-2); border-radius: 8px; padding: 12px 15px; font-size: 12px; color: var(--h-text-muted); line-height: 1.4; } .h-missed-banner .material-icons { color: var(--h-red-solid); font-size: 18px !important; flex-shrink: 0; } .h-missed-banner strong { color: var(--h-red-solid); } /* ─── HEADER & STATS ────────────────────────────────────────────────────────── */ .h-retention-header { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px; } .h-rank-label { font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--h-text-dim); display: block; margin-bottom: 5px; } .h-retention-stats { display: flex; gap: 20px; } .h-stat-item { text-align: right; } .h-stat-item .val { display: block; font-size: 18px; font-weight: 800; color: var(--h-text-primary); } .h-stat-item .lbl { font-size: 8px; text-transform: uppercase; color: var(--h-text-dim); letter-spacing: 1px; } #h-current-rank-title { font-size: 24px; font-weight: 900; color: var(--h-red-solid); text-transform: uppercase; margin: 0; text-shadow: 0 0 15px var(--h-red-glow); } /* ─── VIEW MANAGEMENT ───────────────────────────────────────────────────────── */ .h-retention-view { display: none; animation: fadeIn 0.4s ease forwards; } .h-retention-view.is-active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* ─── INTRO VIEW ────────────────────────────────────────────────────────────── */ .h-intro-content { text-align: center; padding: 40px 20px; } .h-intro-icon-wrap { position: relative; margin-bottom: 30px; } .h-big-icon { font-size: 60px !important; color: var(--h-accent-gold); z-index: 2; position: relative; } .h-icon-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: var(--h-accent-gold-glow); border-radius: 50%; animation: pulseGlow 2s infinite; } @keyframes pulseGlow { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } .h-intro-title { font-size: 28px; font-weight: 900; color: var(--h-text-primary); margin-bottom: 15px; text-transform: uppercase; letter-spacing: -1px; } .h-intro-text { color: var(--h-text-muted); line-height: 1.6; font-size: 14px; margin-bottom: 25px; } .h-intro-benefits { list-style: none; padding: 0; margin-bottom: 20px; text-align: left; display: inline-block; } .h-intro-benefits li { color: var(--h-text-muted); font-size: 12px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .h-intro-benefits li span { color: var(--h-accent-gold); font-size: 18px !important; } .h-best-streak-intro { font-size: 11px; color: var(--h-text-dim); margin-bottom: 30px; letter-spacing: 1px; } .h-best-streak-intro strong { color: var(--h-gold-milestone); } /* ─── CONFIRM VIEW ──────────────────────────────────────────────────────────── */ .h-confirm-content { text-align: center; padding: 50px 20px; } .h-warn-icon { font-size: 50px !important; color: var(--h-accent-main); margin-bottom: 20px; } .h-confirm-h1 { font-size: 22px; font-weight: 900; color: var(--h-text-primary); margin-bottom: 15px; text-transform: uppercase; } .h-confirm-text { color: var(--h-text-dim); font-size: 13px; line-height: 1.5; margin-bottom: 40px; } .h-confirm-actions { display: grid; gap: 15px; } /* ─── HOLD BUTTON ───────────────────────────────────────────────────────────── */ .h-hold-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 22px 48px; background: var(--h-bg-card); /* Fond de bouton centralisé */ border: 1px solid var(--h-accent-2); color: var(--h-red-solid); border-radius: 10px; font-weight: 900; font-size: clamp(10px, 2vw, 12px); text-transform: uppercase; letter-spacing: 2px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; box-shadow: none; outline: none; transition: background 0.2s ease, border-color 0.25s ease, transform 0.15s ease; overflow: hidden; } .h-hold-btn:focus:not(:focus-visible) { outline: none; } .h-hold-btn:hover { background: var(--h-bg-surface); border-color: var(--h-accent-2); } .h-hold-hint { font-size: clamp(7px, 1.2vw, 9px); font-weight: 400; letter-spacing: 1.5px; color: var(--h-red-glow); text-transform: lowercase; transition: opacity 0.3s ease; } /* ── Anneau SVG ── */ .h-hold-ring { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; pointer-events: none; } .h-hold-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .h-ring-track { fill: none; stroke: var(--h-accent-2); stroke-width: 2; } .h-ring-fill { fill: none; stroke: var(--h-red-solid); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 119.38; stroke-dashoffset: 119.38; transition: none; } /* ── Sweep fond ── */ .h-hold-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--h-accent-2) 0%, rgba(255,59,48,0.03) 100%); transform: scaleX(0); transform-origin: left center; pointer-events: none; transition: none; } /* ── Holding ── */ .h-hold-btn.is-holding { background: var(--h-bg-surface); border-color: var(--h-accent-2); transform: scale(0.98); } .h-hold-btn.is-holding .h-hold-hint { opacity: 0; } .h-hold-btn.is-holding::before { animation: h-hold-sweep var(--h-hold-duration) linear forwards; } @keyframes h-hold-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ── Release spring-back ── */ .h-hold-btn.is-releasing { border-color: var(--h-accent-2); transform: scale(1); } .h-hold-btn.is-releasing .h-ring-fill { transition: stroke-dashoffset 0.45s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Complete flash ── */ .h-hold-btn.is-complete { animation: h-hold-complete-flash 0.35s ease forwards; } @keyframes h-hold-complete-flash { 0% { border-color: var(--h-accent-2); background: var(--h-bg-card); } 40% { border-color: var(--h-accent-main); background: var(--h-accent-2); } 100% { border-color: var(--h-accent-2); background: var(--h-bg-card); } } /* ─── CINEMATIC — dans .h-tutorial-body ────────────────────────────────────── */ .h-tutorial-body { overflow-y: auto; position: relative; } .h-retention-wrapper { position: relative; } .h-cinematic-overlay.is-visible { opacity: 1; pointer-events: all; } .h-cinematic-overlay.is-leaving { opacity: 0; pointer-events: none; transition: opacity 0.85s ease; } .h-cinematic-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; } .h-cin-line { display: block; font-size: clamp(22px, 6vw, 42px); font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: var(--h-text-primary); opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .h-cinematic-overlay.is-visible .h-cin-l1 { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } .h-cinematic-overlay.is-visible .h-cin-l2 { opacity: 1; transform: translateY(0); transition-delay: 0.4s; } .h-cinematic-overlay.is-visible .h-cin-l3 { opacity: 1; transform: translateY(0); transition-delay: 0.75s; color: var(--h-red-solid); text-shadow: 0 0 30px var(--h-red-glow); } .h-cin-bar-wrap { margin-top: 24px; width: 100px; height: 1px; background: var(--h-border-subtle); border-radius: 1px; overflow: hidden; opacity: 0; transition: opacity 0.4s ease 0.9s; } .h-cinematic-overlay.is-visible .h-cin-bar-wrap { opacity: 1; } .h-cin-bar { height: 100%; width: 0%; background: var(--h-red-solid); box-shadow: 0 0 6px var(--h-red-glow); border-radius: 1px; } .h-cinematic-overlay.is-visible .h-cin-bar { animation: h-cin-bar-fill 2s linear 1s forwards; } @keyframes h-cin-bar-fill { from { width: 0%; } to { width: 100%; } } /* ─── THE 7×7 GRID ──────────────────────────────────────────────────────────── */ .h-retention-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding: 15px; background: var(--h-border-subtle); border-radius: 12px; border: 1px solid var(--h-border-subtle); } .h-grid-cell { position: relative; aspect-ratio: 1/1; background: var(--h-bg-main); border: 1px solid var(--h-border-subtle); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .cell-number { position: absolute; top: 4px; left: 5px; font-size: 11px; font-weight: 800; color: var(--h-text-dim); line-height: 1; } .cell-date { position: absolute; bottom: 3px; right: 3px; font-size: 7px; font-weight: 600; color: var(--h-red-glow); line-height: 1; } /* COMPLETED */ .h-grid-cell.is-completed { border-color: var(--h-red-solid); background: var(--h-accent-2); } .h-grid-cell.is-completed .cell-number { color: var(--h-red-solid); } .h-grid-cell.is-completed .cell-glow { position: absolute; inset: 0; box-shadow: inset 0 0 12px var(--h-red-glow); border-radius: 5px; } /* NEXT / TODAY */ .h-grid-cell.is-next { border-color: var(--h-text-primary); background: var(--h-bg-card); animation: h-pulse-cell 2s infinite; } @keyframes h-pulse-cell { 0% { box-shadow: inset 0 0 0 0px rgba(255,255,255,0); } 50% { box-shadow: inset 0 0 0 2px var(--h-border-active); } 100% { box-shadow: inset 0 0 0 0px rgba(255,255,255,0); } } /* MILESTONE — pending */ .h-grid-cell.is-milestone { border: 1px solid var(--h-accent-gold-glow); background: var(--h-accent-gold-glow); border-radius: 8px; } .h-grid-cell.is-milestone .cell-icon { color: var(--h-accent-gold-glow); font-size: 18px !important; } .h-grid-cell.is-milestone .cell-number { color: var(--h-accent-gold-glow); } .h-grid-cell.is-milestone:not(.is-completed):not(.is-locked) { animation: h-milestone-idle 3s ease-in-out infinite; } @keyframes h-milestone-idle { 0%, 100% { box-shadow: 0 0 0px rgba(244,192,37,0); } 50% { box-shadow: 0 0 8px var(--h-accent-gold-glow); } } /* MILESTONE — completed */ .h-grid-cell.is-milestone.is-completed { border: 2px solid var(--h-gold-milestone); background: var(--h-accent-gold-glow); box-shadow: 0 0 14px var(--h-accent-gold-glow), inset 0 0 10px var(--h-accent-gold-glow); } .h-grid-cell.is-milestone.is-completed .cell-number { color: var(--h-gold-milestone); font-size: 12px; } .h-grid-cell.is-milestone.is-completed .cell-icon { color: var(--h-gold-milestone); font-size: 20px !important; text-shadow: 0 0 12px var(--h-accent-gold-glow); filter: drop-shadow(0 0 4px var(--h-accent-gold-glow)); } .h-grid-cell.is-milestone.is-completed .cell-date { color: var(--h-accent-gold-glow); } .cell-icon { font-size: 16px !important; color: var(--h-bg-surface); } .h-grid-cell.is-locked { opacity: 0.2; background: transparent; } /* ─── JUST VALIDATED ────────────────────────────────────────────────────────── */ .h-grid-cell.is-just-validated { animation: h-validate-pulse 2s ease forwards; z-index: 5; } @keyframes h-validate-pulse { 0% { transform: scale(1); box-shadow: 0 0 0px rgba(255,59,48,0); } 15% { transform: scale(1.25); box-shadow: 0 0 20px var(--h-accent-2); } 40% { transform: scale(1.1); box-shadow: 0 0 30px var(--h-accent-2); } 70% { transform: scale(1.05); box-shadow: 0 0 15px var(--h-accent-2); } 100% { transform: scale(1); box-shadow: 0 0 8px var(--h-accent-2); } } .h-grid-cell.is-milestone.is-just-validated { animation: h-validate-pulse-gold 2s ease forwards; } @keyframes h-validate-pulse-gold { 0% { transform: scale(1); box-shadow: 0 0 0px rgba(244,192,37,0); } 15% { transform: scale(1.3); box-shadow: 0 0 25px var(--h-accent-gold); } 40% { transform: scale(1.1); box-shadow: 0 0 35px var(--h-accent-gold-glow); } 70% { transform: scale(1.05); box-shadow: 0 0 15px var(--h-accent-gold-glow); } 100% { transform: scale(1); box-shadow: 0 0 10px var(--h-accent-gold-glow); } } /* ─── PARTICLES ─────────────────────────────────────────────────────────────── */ .h-cell-particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--h-red-solid); pointer-events: none; top: 50%; left: 50%; animation: h-particle-burst 0.8s ease forwards; } .h-grid-cell.is-milestone .h-cell-particle { background: var(--h-gold-milestone); } @keyframes h-particle-burst { 0% { transform: translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(1); opacity: 1; } 100% { transform: translate(-50%,-50%) rotate(var(--angle)) translateY(18px) scale(0); opacity: 0; } } /* ─── COUNTDOWN ─────────────────────────────────────────────────────────────── */ .h-countdown-wrap { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--h-text-dim); letter-spacing: 1px; margin-top: 10px; } .h-countdown-wrap.is-hidden { display: none; } .h-countdown-wrap .material-icons { font-size: 14px !important; color: var(--h-text-dim); } .h-countdown-wrap strong { color: var(--h-text-muted); font-variant-numeric: tabular-nums; letter-spacing: 2px; } /* ─── FOOTER & BUTTONS ──────────────────────────────────────────────────────── */ .h-retention-footer { margin-top: 10px; padding: 0 10px; } .h-retention-btn { width: 100%; padding: 18px; border-radius: 8px; border: none; font-weight: 900; font-size: clamp(9px, 1.5vw, 11px); text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; } .h-retention-btn.primary { background: var(--h-text-primary); color: var(--h-bg-main); } .h-retention-btn.success { background: var(--h-red-solid); color: var(--h-text-primary); box-shadow: 0 0 20px var(--h-red-glow); } .h-retention-btn.success.is-done { background: var(--h-bg-card); color: var(--h-text-dim); box-shadow: none; cursor: default; } .h-retention-btn.secondary { background: var(--h-bg-card); color: var(--h-text-muted); border: 1px solid var(--h-border-active); } .h-retention-btn.red-link { background: none; border: none; color: var(--h-red-solid); font-size: clamp(8px, 1.5vw, 10px); letter-spacing: 1px; margin-top: 20px; opacity: 0.6; text-decoration: underline; box-shadow: none; } .h-retention-btn.red-link:hover { opacity: 1; } .h-retention-btn:active { transform: scale(0.96); } /* ─── MILESTONE TOOLTIP ─────────────────────────────────────────────────────── */ .h-grid-cell.is-milestone:hover::after { content: attr(data-label); position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: var(--h-gold-milestone); color: var(--h-bg-main); padding: 4px 8px; font-size: 9px; border-radius: 4px; font-weight: 800; white-space: nowrap; z-index: 10; } /* ─── VARIABLES ─────────────────────────────────────────────────────────────── */ :root { /* Identité utilise principalement l'accent Gold et les surfaces sombres */ --h-font: 'Space Grotesk', sans-serif; } #h-tab-identity { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ─── MASCOT FLOAT ──────────────────────────────────────────────────────────── */ #player-mascot { animation: updown 4s ease infinite; } @keyframes updown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ─── WRAPPER ───────────────────────────────────────────────────────────────── */ #hulyx-tutorial-overlay .identity-wrapper { font-family: var(--h-font); display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px 20px 30px; position: relative; } /* ─── MASCOT VIEWPORT ───────────────────────────────────────────────────────── */ #hulyx-tutorial-overlay .h-mascot-viewport { position: relative; width: clamp(160px, 40vw, 240px); height: clamp(160px, 40vw, 240px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; } #hulyx-tutorial-overlay .h-mascot-ring { position: absolute; inset: 0; border-radius: 50%; } #hulyx-tutorial-overlay .h-mascot-ring.inner { border: 1px solid var(--h-border-subtle); transform: scale(0.87); } #hulyx-tutorial-overlay .h-mascot-ring.outer { border: 1px solid var(--h-border-active); transform: scale(1.13); } #hulyx-tutorial-overlay .h-mascot-ring.strobe { border: 1px dashed var(--h-accent-gold-glow); animation: h-spin 60s linear infinite; } @keyframes h-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ─── MASCOT FRAME ──────────────────────────────────────────────────────────── */ #hulyx-tutorial-overlay .h-mascot-frame { width: 80%; height: 80%; max-width: 180px; max-height: 180px; border-radius: 1rem; overflow: hidden; position: relative; background: var(--h-bg-card); border: 1px solid var(--h-border-active); box-shadow: none!important; z-index: 5; } #hulyx-tutorial-overlay .h-mascot-frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: opacity 0.5s; } #hulyx-tutorial-overlay .h-mascot-gradient { position: absolute; inset: 0; /* Dégradé basé sur la couleur de fond principale */ background: linear-gradient(to top, var(--h-bg-surface) 0%, transparent 55%); pointer-events: none; } #hulyx-tutorial-overlay .h-tag-active { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: var(--h-accent-gold); color: var(--h-bg-main); padding: 3px clamp(8px, 2vw, 12px); border-radius: 9999px; font-size: clamp(8px, 1.8vw, 10px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } /* ─── INFO GROUP ────────────────────────────────────────────────────────────── */ #hulyx-tutorial-overlay .h-info-group { text-align: center; z-index: 1; } #hulyx-tutorial-overlay .h-player-lvl { font-size: 3.2rem; font-weight: 800; color: var(--h-text-primary); margin: 0; line-height: 1; letter-spacing: -0.04em; text-shadow: 0 0 40px var(--h-accent-gold-glow); } #hulyx-tutorial-overlay .h-player-rank { color: var(--h-accent-gold); font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; margin-top: 8px; opacity: 0.85; } /* ─── STATS GRID ────────────────────────────────────────────────────────────── */ #hulyx-tutorial-overlay .h-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: min(90vw, calc(90vh * 9 / 16)); z-index: 1; } #hulyx-tutorial-overlay .h-stat-card { position: relative; background: var(--h-bg-surface); border: 1px solid var(--h-border-subtle); border-radius: 0.85rem; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: border-color 0.2s ease; } #hulyx-tutorial-overlay .h-stat-card .material-symbols-outlined { color: var(--h-accent-gold); font-size: 20px; } #hulyx-tutorial-overlay .h-stat-card .val { font-weight: 700; font-size: 1.15rem; color: var(--h-text-primary); line-height: 1; } #hulyx-tutorial-overlay .h-stat-card .lbl { font-size: 8px; color: var(--h-text-muted); text-transform: uppercase; letter-spacing: 0.08em; } /* ─── STREAK CARD ───────────────────────────────────────────────────────────── */ #hulyx-tutorial-overlay .h-stat-streak { cursor: pointer; border-color: var(--h-accent-2); } #hulyx-tutorial-overlay .h-stat-streak .material-symbols-outlined { color: var(--h-accent-main); } #hulyx-tutorial-overlay .h-stat-streak .val { color: var(--h-accent-main); } #hulyx-tutorial-overlay .h-stat-streak .lbl { color: var(--h-accent-2); } #hulyx-tutorial-overlay .h-stat-streak:hover, #hulyx-tutorial-overlay .h-stat-streak:focus { border-color: var(--h-accent-main); box-shadow: none!important; outline: none; } #hulyx-tutorial-overlay .h-streak-arrow { position: absolute; top: 6px; right: 6px; font-size: 11px !important; color: var(--h-accent-2); transition: color 0.2s, transform 0.2s; } #hulyx-tutorial-overlay .h-stat-streak:hover .h-streak-arrow, #hulyx-tutorial-overlay .h-stat-streak:focus .h-streak-arrow { color: var(--h-accent-main); transform: translateX(2px); } /* ─── XP SECTION ────────────────────────────────────────────────────────────── */ #hulyx-tutorial-overlay .h-xp-section { width: 100%; max-width: min(90vw, calc(90vh * 9 / 16)); z-index: 1; } #hulyx-tutorial-overlay .h-xp-labels { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; font-size: 11px; font-weight: 600; color: var(--h-text-primary); } #hulyx-tutorial-overlay .h-xp-ratio { color: var(--h-accent-gold); font-family: monospace; font-size: 11px; } #hulyx-tutorial-overlay .h-xp-track { width: 100%; height: 7px; background: var(--h-bg-card); border-radius: 9999px; overflow: hidden; border: 1px solid var(--h-border-subtle); position: relative; } #hulyx-tutorial-overlay .h-xp-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--h-accent-gold); box-shadow: none!important; border-radius: 9999px; transition: width 0.7s ease-out; } /** * Hulyx Session Engine - Integration Overlay v1.0 + Light System v1.0 */ /* ══════════════════════════════════════════════════════════════════════ GPU COMPOSITING — force video layers onto GPU for smooth playback ══════════════════════════════════════════════════════════════════════ */ #hulyx-video-viewport, #hulyx-video-viewport video, #hulyx-strobe-container, #hulyx-strobe-container video { will-change: opacity; transform: translateZ(0); } /* ══════════════════════════════════════════════════════════════════════ LIGHT SYSTEM STYLES ══════════════════════════════════════════════════════════════════════ */ /* ── Full-page border indicator (replaces tension bar) ─────────────── */ #hulyx-light-indicator { position: fixed; inset: 0; z-index: 11; border: none; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-radius: 0; background: transparent; box-shadow: none; opacity: 0; transition: opacity 0.3s ease, border-color 0.4s ease, box-shadow 0.4s ease; pointer-events: none; } #hulyx-light-indicator.active { opacity: 1; } /* ── Heartbeat animation ────────────────────────────────────────────── */ @keyframes hulyx-heartbeat { 0% { opacity: 0.55; } 12% { opacity: 1; } 22% { opacity: 0.75; } 34% { opacity: 1; } 60% { opacity: 0.55; } 100% { opacity: 0.55; } } /* ── Edge vignette (subtle glow) ───────────────────────────────────── */ #hulyx-light-vignette { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; background: linear-gradient(to bottom, var(--hulyx-glow-color, transparent) 0%, transparent 4%), linear-gradient(to top, var(--hulyx-glow-color, transparent) 0%, transparent 4%); } #hulyx-light-vignette.active { animation: hulyx-heartbeat 2.2s ease-in-out infinite; } /* ── Label toast ───────────────────────────────────────────────────── */ #hulyx-light-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); z-index: 12; pointer-events: none; font-weight: 900; font-size: 22px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0; white-space: nowrap; } #hulyx-light-toast.show { animation: toast-heartbeat var(--toast-beat-dur, 1.3s) ease-in-out infinite, toast-fade 6s ease-in-out infinite; } #hulyx-light-toast.show[data-beat="none"] { animation: toast-fade 6s ease-in-out infinite; transform: translate(-50%, -50%) scale(1); } @keyframes toast-heartbeat { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.15); } 60% { transform: translate(-50%, -50%) scale(1.15); } 100% { transform: translate(-50%, -50%) scale(1); } } @keyframes toast-fade { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } } /* Tension bar CSS removed — hulyx-light-indicator border frame is the new indicator */ /* ══════════════════════════════════════════════════════════════════════ GPU COMPOSITING — force video layers onto GPU for smooth playback ══════════════════════════════════════════════════════════════════════ */ #hulyx-video-viewport, #hulyx-video-viewport video, #hulyx-strobe-container, #hulyx-strobe-container video { will-change: opacity; transform: translateZ(0); } /* ══════════════════════════════════════════════════════════════════════ ORIGINAL SESSION ENGINE STYLES (UNTOUCHED) ══════════════════════════════════════════════════════════════════════ */ /* ── Overlay plein écran ─────────────────────────────────────── */ #hulyx-integration-overlay { position: fixed; inset: 0; z-index: var(--z-hud); display: flex; align-items: center; justify-content: center; background: transparent; opacity: 0; pointer-events: none; transform: scale(0.97); transition: opacity 0.4s ease, transform 0.4s ease; } #hulyx-integration-overlay.is-visible { opacity: 1; pointer-events: auto; transform: scale(1); } .hi-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 40px 32px; max-width: min(90vw, calc(90vh * 9 / 16)); width: 100%; } .hi-title { font-weight: 900; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--h-text-muted); } .hi-timer { font-weight: 900; font-size: 64px; color: var(--h-text-primary); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .hi-sub { font-size: 13px; color: var(--h-text-muted); font-weight: 500; } .hi-skip-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; } .hi-skip-btn { background: var(--h-border-active); border: 1px solid var(--h-border-medium); border-radius: 8px; padding: 10px 20px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 160px; touch-action: none; user-select: none; -webkit-user-select: none; } .hi-skip-label { font-weight: 700; font-size: clamp(11px, 2vw, 13px); color: var(--h-text-secondary); text-transform: uppercase; letter-spacing: 0.1em; } .hi-skip-bar { width: 100%; height: 3px; background: var(--h-border-active); border-radius: 2px; overflow: hidden; } .hi-skip-fill { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--h-text-primary) 0%, rgba(255,255,255,0.6) 100%); transform: scaleX(0); transform-origin: left center; transition: none; will-change: transform; } .hi-skip-note { font-size: 10px; color: var(--h-text-placeholder); text-align: center; } /* ── Integration slide ───────────────────────────────────────── */ .hulyx-integration-slide { position: relative; width: 100%; height: 100%; background: var(--h-bg-main); overflow: hidden; } .hulyx-integ-container { position: absolute; inset: 0; overflow: hidden; background: var(--h-bg-main); } .hulyx-integ-container video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Force all videos to cover their container (no black bars) */ #hulyx-video-viewport video, .hulyx-video-shell video, .swiper-slide video, .hulyx-native-video { width: 100%; height: 100%; object-fit: cover !important; min-width: 100%; min-height: 100%; transition: filter .4s ease; } body:not(.user-logged-in):has(#hsp-overlay.hsp-box-open) .hulyx-native-video, body:not(.user-logged-in):has(#hsp-overlay.hsp-box-open) .swiper-slide video { filter: blur(10px); } /* ── Scroll lock message — HUD rouge centré ──────────────────── */ #hulyx-session-scroll-msg { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.88); z-index: 13; pointer-events: none; opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; } #hulyx-session-scroll-msg.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Giggle — only on .hssm-inner so transform base stays intact */ #hulyx-session-scroll-msg.is-giggle .hssm-inner { animation: hssm-giggle 0.4s ease; } @keyframes hssm-giggle { 0% { transform: rotate(0) scale(1); } 20% { transform: rotate(-3deg) scale(1.05); } 40% { transform: rotate(3deg) scale(1.07); } 60% { transform: rotate(-2deg) scale(1.05); } 80% { transform: rotate(1deg) scale(1.02); } 100% { transform: rotate(0) scale(1); } } .hssm-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 32px 16px; background: var(--h-bg-overlay); border: 1px solid var(--h-accent-2); border-radius: 6px; box-shadow: 0 0 0 1px var(--h-accent-2), 0 0 28px var(--h-accent-2), inset 0 0 20px var(--h-accent-2); /* backdrop-filter removed — perf */ white-space: nowrap; } .hssm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--h-accent-main); box-shadow: 0 0 8px var(--h-accent-main), 0 0 16px var(--h-accent-2); animation: hssm-pulse 0.8s ease-in-out infinite alternate; margin-bottom: 6px; } @keyframes hssm-pulse { from { opacity: 1; } to { opacity: 0.5; } } .hssm-line1 { font-size: 11px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; color: var(--h-accent-main); text-shadow: 0 0 10px var(--h-accent-2); } .hssm-sep { font-size: 10px; color: var(--h-accent-2); letter-spacing: 0.15em; } .hssm-line2 { font-size: 9px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--h-text-muted); } /* ── Desktop: light indicator + vignette constrained to 9/16 column ── */ /* ── Scroll lock CSS fallback ────────────────────────────────── */ body.hulyx-scroll-locked { -webkit-touch-callout: none; overflow: hidden; overscroll-behavior: none; } @media (min-width: 768px) { #hulyx-light-indicator, #hulyx-light-vignette { width: calc(100dvh * 9 / 16) !important; left: 0 !important; right: 0 !important; bottom: 40px !important; margin: 0 auto !important; } } /* ── Cursor auto-hide after 3s inactivity ──────────────────────────── */ body.hulyx-cursor-hidden, body.hulyx-cursor-hidden #hulyx-footer-nav, body.hulyx-cursor-hidden .swiper-slide, body.hulyx-cursor-hidden .hulyx-video-shell, body.hulyx-cursor-hidden #hulyx-tutorial-overlay, body.hulyx-cursor-hidden #hulyx-auth-overlay, body.hulyx-cursor-hidden #hsp-overlay, body.hulyx-cursor-hidden .hulyx-overlay-menu { cursor: none !important; } body.hulyx-cursor-hidden a, body.hulyx-cursor-hidden button, body.hulyx-cursor-hidden input, body.hulyx-cursor-hidden select, body.hulyx-cursor-hidden [tabindex] { cursor: auto !important; } /* ── Tier CTA Button ──────────────────────────────────────────────── */ #hsp-tier-cta { color: var(--h-bg-main); background-color: var(--h-accent-main); } #hsp-tier-cta:hover { color: var(--h-accent-main); } /* HULYX FOOTER NAV */ body.hulyx-overload-active #hulyx-footer-nav { pointer-events: none !important; } body.hulyx-overload-active #hulyx-strobe-trigger { pointer-events: auto !important; } #hulyx-footer-nav { z-index: var(--z-footer) !important; position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; display: flex; justify-content: space-around; align-items: center; background: var(--h-bg-card); } /* Strobe / Scroll Controls */ #h-word-strobe-ctrl, #h-scroll-durations { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.4s; margin-bottom: 0; border: none !important; display: block !important; padding: 0 5px; } #h-word-strobe-ctrl.is-visible { max-height: 160px; opacity: 1; margin-bottom: 15px; padding-top: 10px; } #h-scroll-durations.is-visible { max-height: 100px; opacity: 1; margin-bottom: 15px; padding-top: 10px; } /* Sliders */ .h-slider-row { margin-bottom: 12px; } .h-slider-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .h-sl-title { font-size: 9px; color: var(--h-text-dim); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .h-sl-val { color: var(--h-accent-main); font-size: 10px; font-weight: 800; } .h-slider-range { -webkit-appearance: none; width: 100%; background: transparent; margin: 0; border: none !important; display: block; } .h-slider-range::-webkit-slider-thumb { -webkit-appearance: none; height: 14px; width: 14px; border-radius: 50%; background: var(--h-accent-main); margin-top: -6px; box-shadow: 0 0 10px var(--h-accent-main-glow); } /* Red Strobe */ .h-red-strobe-container { display: flex; gap: 10px; margin-top: 0; padding-top: 0; border: none; } .h-red-strobe-btn { flex: 1; background: var(--h-bg-surface); color: var(--h-accent-main); border: 1px solid var(--h-accent-2); padding: 10px; text-transform: uppercase; font-size: clamp(8px, 1.5vw, 10px); font-weight: 800; display: flex; justify-content: center; align-items: center; gap: 6px; cursor: pointer; } .h-red-strobe-btn.active { background: var(--h-accent-main); color: var(--h-bg-main); box-shadow: 0 0 15px var(--h-accent-2); } /* Nav Items */ .h-nav-item-wrapper { position: relative; display: flex; align-items: center; justify-content: center; } .hulyx-nav-item { background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hulyx-nav-label { font-size: 9px; font-weight: 700; color: var(--h-text-dim); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; } @media (min-width: 768px) { #hulyx-footer-nav .hulyx-nav-item { width: 40px !important; height: 40px !important; display: flex; justify-content: center; align-items: center; } } /* Toggle Pill */ .hpg-wrap { display: inline-block; user-select: none; padding: 4px; } .hpg-checkbox { display: none; } .hpg-btn { display: block; position: relative; width: 52px; height: 32px; background-color: var(--h-accent-main); border-radius: 8px; cursor: pointer; transition: all 150ms ease-in; } .hpg-btn .hpg-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--h-text-dim); transition: transform 0.25s ease, background 0.25s ease; } .hpg-checkbox:checked + .hpg-btn .hpg-knob { transform: translateX(20px); } *::-webkit-scrollbar { display: none !important; } * { scrollbar-width: none !important; } /** * Hulyx Session Popup v2.0 *//* -- Preloader ----------------------------------------------- */#hsp-preloader { position: fixed; inset: 0; z-index: 9999; background: #000000; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease, visibility 0.5s ease; pointer-events: none;}#hsp-preloader.is-hidden { opacity: 0; visibility: hidden;}#hsp-preloader.hsp-preloader-hidden { opacity: 0; visibility: hidden;}#hsp-preloader .hsp-preloader-inner { width: 100%; max-width: min(90vw, calc(90vh * 9 / 16)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; text-align: center;}#hsp-preloader .hsp-preloader-logo { font-family: var(--h-font-global, system-ui, sans-serif); font-weight: 700; font-size: clamp(28px, 6vw, 48px); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; white-space: nowrap; color: #ffffff;}#hsp-preloader .hsp-preloader-logo span { display: inline-block; opacity: 0; transform: translateY(20px) scale(0.9); animation: hspPreloaderWave 1.2s ease-out forwards;}#hsp-preloader .hsp-preloader-logo span:nth-child(1) { animation-delay: 0.00s; }#hsp-preloader .hsp-preloader-logo span:nth-child(2) { animation-delay: 0.06s; }#hsp-preloader .hsp-preloader-logo span:nth-child(3) { animation-delay: 0.12s; }#hsp-preloader .hsp-preloader-logo span:nth-child(4) { animation-delay: 0.18s; }#hsp-preloader .hsp-preloader-logo span:nth-child(5) { animation-delay: 0.24s; }#hsp-preloader .hsp-preloader-logo span:nth-child(6) { animation-delay: 0.30s; }#hsp-preloader .hsp-preloader-logo span:nth-child(7) { animation-delay: 0.36s; }#hsp-preloader .hsp-preloader-logo span:nth-child(8) { animation-delay: 0.42s; }#hsp-preloader .hsp-preloader-logo span:nth-child(9) { animation-delay: 0.48s; }#hsp-preloader .hsp-preloader-logo span:nth-child(10) { animation-delay: 0.54s; }#hsp-preloader .hsp-preloader-logo span:nth-child(11) { animation-delay: 0.60s; }#hsp-preloader .hsp-preloader-logo span:nth-child(12) { animation-delay: 0.66s; }#hsp-preloader .hsp-preloader-logo span:nth-child(13) { animation-delay: 0.72s; }#hsp-preloader .hsp-preloader-logo span:nth-child(14) { animation-delay: 0.78s; }#hsp-preloader .hsp-preloader-logo span:nth-child(15) { animation-delay: 0.84s; }#hsp-preloader .hsp-preloader-logo span:nth-child(16) { animation-delay: 0.90s; }#hsp-preloader .hsp-preloader-logo span:nth-child(17) { animation-delay: 0.96s; }#hsp-preloader .hsp-preloader-logo span:nth-child(18) { animation-delay: 1.02s; }#hsp-preloader .hsp-preloader-logo span:nth-child(19) { animation-delay: 1.08s; }#hsp-preloader .hsp-preloader-logo span:nth-child(20) { animation-delay: 1.14s; }@keyframes hspPreloaderWave { 0% { opacity: 0; transform: translateY(20px) scale(0.9); } 50% { opacity: 1; transform: translateY(-5px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); }}#hsp-preloader @keyframes hspPreloaderSpin { to { transform: rotate(360deg); }} /** * Hulyx Session Popup v2.0 *//* -- Overlay --------------------------------------------------- */#hsp-overlay { position: fixed; top: 0; bottom: var(--h-footer-height); /* au-dessus footer mobile */ left: 0; right: 0; margin: 0 auto; width: 100%; max-width: min(100vw, calc(100vh * 9 / 16)); z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; background: transparent; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;} /* PC : pas de footer fixe en bas */@media (min-width: 768px) { #hsp-overlay { bottom: 0; top: 0; } } #hsp-overlay.is-visible { opacity: 1; pointer-events: auto;} /* Idle mode: overlay captures events but video feed should still scroll. Set pointer-events:none on overlay, auto on interactive elements only. */ #hsp-overlay.is-visible.hsp-idle { pointer-events: none;} #hsp-overlay.is-visible.hsp-idle .hsp-btn-start, #hsp-overlay.is-visible.hsp-idle .hsp-trainer-toggle-btn, #hsp-overlay.is-visible.hsp-idle .hsp-intensity-btn, #hsp-overlay.is-visible.hsp-idle .hsp-duration-track, #hsp-overlay.is-visible.hsp-idle .hsp-duration-dot, #hsp-overlay.is-visible.hsp-idle .hsp-duration-segment, #hsp-overlay.is-visible.hsp-idle .hsp-chrono-toggle, #hsp-overlay.is-visible.hsp-idle .hsp-nav-btn, #hsp-overlay.is-visible.hsp-idle .hsp-effects-btn, #hsp-overlay.is-visible.hsp-idle .hsp-speed-option, #hsp-overlay.is-visible.hsp-idle .hsp-trainer-filter-btn, #hsp-overlay.is-visible.hsp-idle input, #hsp-overlay.is-visible.hsp-idle button, #hsp-overlay.is-visible.hsp-idle a { pointer-events: auto; } /* -- Red Phase UI — centered level-up + circular countdown -- */ #hsp-red-info { position: fixed; inset: 0; z-index: calc(var(--z-hud) + 5); display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } #hsp-red-info.is-visible { opacity: 1; } .hsp-red-wrap { display: flex; flex-direction: column; align-items: center; position: relative; } .hsp-red-phase { position: relative; display: flex; align-items: center; justify-content: center; } .hsp-red-ring { width: clamp(260px, 60vmin, 380px); height: clamp(260px, 60vmin, 380px); transform: rotate(-90deg); } .hsp-red-ring-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 5; } .hsp-red-ring-fill { fill: none; stroke: var(--h-accent-main); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray 0.15s linear; filter: drop-shadow(0 0 8px var(--h-accent-main-glow, rgba(255,46,130,0.4))); animation: hspRedPulse 1s ease-in-out infinite; } .hsp-red-timer { position: absolute; font-size: clamp(36px, 8vw, 48px); font-weight: 900; color: var(--h-accent-main); line-height: 1; filter: drop-shadow(0 0 40px var(--h-accent-main-glow, rgba(255,46,130,0.5))); font-variant-numeric: tabular-nums; letter-spacing: 2px; } .hsp-red-level { display: flex; flex-direction: column; align-items: center; opacity: 0; transform: scale(0.7); } .hsp-red-level.is-visible { opacity: 1; transform: scale(1); } .hsp-red-level.is-fading { opacity: 0; transform: scale(0.9); transition: opacity 2s ease, transform 2s ease; } .hsp-red-lvl-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 4px; } .hsp-red-lvl-num { font-size: clamp(56px, 14vw, 80px); font-weight: 900; color: var(--h-accent-main); line-height: 1; filter: drop-shadow(0 0 40px var(--h-accent-main-glow, rgba(255,46,130,0.5))); animation: hspRedLvlPop 1s cubic-bezier(0.22,1,0.36,1) both; } @keyframes hspRedPulse { 0%,100% { filter: drop-shadow(0 0 8px var(--h-accent-main-glow, rgba(255,46,130,0.4))); } 50% { filter: drop-shadow(0 0 16px rgba(255,255,255,0.6)) brightness(1.4); } } @keyframes hspRedLvlPop { 0% { opacity:0; transform:scale(0.2) rotate(-5deg); } 50% { opacity:1; transform:scale(1.12) rotate(2deg); } 75% { transform:scale(0.95) rotate(-1deg); } 100% { opacity:1; transform:scale(1) rotate(0deg); } } 50% { filter: drop-shadow(0 0 16px rgba(255,255,255,0.6)) brightness(1.4); } } @keyframes hspRedLvlPop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } } @media (max-width: 767.98px) { #hsp-overlay { width: 100% !important; max-width: none !important; }} body:has(#hsp-hp-overlay.is-open) .hulyx-video-shell video, body:has(#hsp-hp-overlay.is-open) .swiper-slide video, body:has(#hsp-hp-overlay.is-open) .hulyx-native-video, body:has(#hsp-menu-overlay.is-open) .hulyx-video-shell video, body:has(#hsp-menu-overlay.is-open) .swiper-slide video, body:has(#hsp-menu-overlay.is-open) .hulyx-native-video { opacity: 0.18 !important; } body:has(#hsp-overlay.is-visible) .hulyx-video-shell video, body:has(#hsp-overlay.is-visible) .swiper-slide video, body:has(#hsp-overlay.is-visible) .hulyx-native-video { opacity: 0.15 !important; } body:has(#hsp-overlay.trainer-active) .hulyx-video-shell video, body:has(#hsp-overlay.trainer-active) .swiper-slide video, body:has(#hsp-overlay.trainer-active) .hulyx-native-video { opacity: 1 !important; } body:has(#hsp-overlay.trainer-active.hsp-box-open) .hulyx-video-shell video, body:has(#hsp-overlay.trainer-active.hsp-box-open) .swiper-slide video, body:has(#hsp-overlay.trainer-active.hsp-box-open) .hulyx-native-video { opacity: 0.15 !important; } body.hulyx-red-phase-active .hulyx-video-shell video, body.hulyx-red-phase-active .swiper-slide video, body.hulyx-red-phase-active .hulyx-native-video { opacity: 0.18 !important; } /* v4.75: Hide bottom bar when idle session box is open — slide out smoothly */ .hsp-selection-bar[data-bar-hidden] { transform: translateY(calc(100% + 20px)) !important; pointer-events: none !important; } /* v4.3: Disable scroll on background videos when footer menus are open (NOT in idle mode). The session popup overlay (#hsp-overlay) does NOT block scroll — it's the idle feed. */ body:has(#hsp-hp-overlay.is-open) .swiper, body:has(#hsp-hp-overlay.is-open) .swiper-slide, body:has(#hsp-menu-overlay.is-open) .swiper, body:has(#hsp-menu-overlay.is-open) .swiper-slide { overflow: hidden !important; touch-action: none !important; } /* Full-screen event-absorbing barrier: when ANY footer menu is open, a transparent overlay (z-index 10, between the video feed at z:-2 and all menu shells at z:14+) intercepts EVERY wheel/touch/pointer event so the background feed can never scroll. Menu cards (z >= 14) sit above and remain interactive. */ body:has(#hsp-hp-overlay.is-open)::after,body:has(#hsp-menu-overlay.is-open)::after { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; pointer-events: auto; background: transparent; touch-action: none;} /* -- Card base ------------------------------------------------- */.hsp-card { border-radius: 35px; width: 90%; max-width: min(90vw, calc(90vh * 9 / 16)); display: flex; flex-direction: column; gap: 0; animation: hspCardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;} @keyframes hspCardIn { from { transform: scale(0.88) translateY(16px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } /* Full-viewport 9:16 overlays -- cover video entirely */ #hsp-view-login, #hsp-view-register, #hsp-view-edit, #hsp-view-effects, #hsp-view-settings, #hsp-view-trainers { width: 100%; max-width: none; height: 100%; max-height: none; border: none; border-radius: 0; padding: 30px 30px 0px !important; animation: none; background: var(--h-bg-surface); overflow-y: auto; justify-content: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Active card � border follows current light (50% alpha via color-mix) */.hsp-card-active { transition: box-shadow 0.5s ease;} @keyframes hspRainbowBorder { 0% { border-color: var(--h-accent-2); box-shadow: 0 0 18px var(--h-accent-2); } 20% { border-color: rgba(255,214,0,0.5); box-shadow: 0 0 18px rgba(255,214,0,0.13); } 40% { border-color: rgba(0,255,136,0.5); box-shadow: 0 0 18px rgba(0,255,136,0.13); } 60% { border-color: rgba(180,77,255,0.5); box-shadow: 0 0 18px rgba(180,77,255,0.13); } 80% { border-color: rgba(255,102,0,0.5); box-shadow: 0 0 18px rgba(255,102,0,0.13); } 100% { border-color: var(--h-accent-2); box-shadow: 0 0 18px var(--h-accent-2); } } /* -- Header ---------------------------------------------------- */.hsp-header { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 10px; } .hsp-nav-btn { position: absolute; background: var(--h-bg-elevated); border: 1px solid var(--h-border-active); border-radius: 10px; width: 36px; height: 36px; padding: 0; color: var(--h-text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; transition: background 0.2s; } .hsp-nav-btn-left { left: 0; top: 50%; transform: translateY(-50%); } .hsp-nav-btn-right { right: 0; top: 50%; transform: translateY(-50%); } .hsp-nav-btn:hover { background: var(--h-border-active); } .hsp-nav-btn:active { opacity: 0.7; } /* -- Shared Box Design ---------------------------------------- */ .hsp-box { display: flex; flex-direction: column; gap: 14px; padding: 30px 0px; width: 100%; box-sizing: border-box; overflow: visible; position: relative; } /* v4.75: Menu central boxes only — same style as bottom bar */ .hsp-box-idle .hsp-box, .hsp-box-paused, #hsp-view-confirm, #hsp-view-xp-gain { background: var(--h-bg-surface); border: 1px solid rgb(65 65 65 / 20%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 35px; } /* -- Edit Profile Form ---------------------------------------- */ .hsp-edit-fields { margin-top: 15px; } .hsp-edit-group { display: flex; flex-direction: column; gap: 4px; } .edit-pp { margin-top: 15px; margin-bottom: 15px; } .hsp-edit-input { background: var(--h-bg-elevated); border: 1px solid var(--h-border-active); border-radius: 55px; padding: 10px 12px; color: var(--h-text-primary); font-size: 13px; outline: none; transition: border-color 0.2s; } .hsp-edit-input:focus { border-color: var(--h-accent-main); } .hsp-edit-input::placeholder { color: var(--h-text-placeholder); } .hsp-edit-avatar-row { display: flex; align-items: center; gap: 12px; } .hsp-edit-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--h-bg-elevated); border: 1px solid var(--h-border-active); display: flex; align-items: center; justify-content: center; } .hsp-edit-avatar-btn { background: var(--h-bg-elevated); border: 1px solid var(--h-border-active); border-radius: 8px; padding: 8px 14px; color: var(--h-text-secondary); font-size: clamp(10px, 2vw, 12px); font-weight: 600; cursor: pointer; transition: background 0.2s; } .hsp-edit-avatar-btn:hover { background: var(--h-border-active); color: var(--h-text-primary); } .hsp-edit-msg { margin-top: 8px; } .hsp-edit-msg.ok { color: var(--h-accent-green); } .hsp-edit-msg.err { color: #ff4444; } .hsp-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.3em; color: var(--h-text-placeholder); text-transform: uppercase;}#hsp-xp-climbing-fill { width: 0%; height: 100%; background: var(--h-accent-main); border-radius: 4px; box-shadow: 0 0 10px rgba(0,255,136,0.5); transition: width 0.05s linear;} @keyframes hspPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .hsp-title { font-size: clamp(20px, 2.5vw, 33px) !important; font-weight: 900; color: var(--h-text-primary); letter-spacing: 0.1em; text-transform: uppercase;} .hsp-sub { font-size: 12px; color: var(--h-text-muted); text-transform: uppercase; margin-bottom: 10px;} /* -- Stats ----------------------------------------------------- */.hsp-stats { display: flex; align-items: center; justify-content: center; background: var(--h-bg-inset); border-radius: 12px;} .hsp-stat-divider { width: 1px; height: 40px; background: var(--h-border-active);} /* -- Actions --------------------------------------------------- */.hsp-actions { display: flex; flex-direction: row; gap: 10px; margin-top: 20px;} .hsp-actions-row { margin-bottom: 15px; } .hsp-btn-start { width: 70%; margin: 0 auto; padding: 0px 0px; min-height: 50px; background: var(--h-accent-main); color: var(--h-bg-main); font-size: clamp(14px, 2vw, 20px); font-weight: 900; text-transform: uppercase; letter-spacing: 2px; white-space: nowrap; border-radius: 60px; cursor: pointer; position: relative; overflow: hidden; animation: hspBtnPulse 5s ease-in-out infinite;} @keyframes hspBtnPulse { 0% { transform: scale(1); } 20% { transform: scale(1.03); } 40% { transform: scale(1); } 100% { transform: scale(1); } } .hsp-btn-start:active { transform: scale(0.98);} .experience-btn { background-color: var(--h-accent-main); color: var(--h-text-primary);} .hsp-btn-start.is-disabled { background: #555 !important; color: #999 !important; cursor: not-allowed !important; animation: none !important; opacity: 0.6; box-shadow: none !important; pointer-events: none; } .hsp-btn-start.is-ready { animation: hspBtnReadyPulse 0.8s ease-out 3; } .hsp-btn-shine { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(100deg, transparent 0%, transparent 28%, rgba(255,255,255,0.23) 38%, rgba(255,255,255,0.63) 50%, rgba(255,255,255,0.23) 62%, transparent 72%, transparent 100%); animation: btn-shine 11.5s ease-in-out infinite; pointer-events: none; z-index: 2; } .hsp-btn-shine.no-anim { animation: none !important; } @keyframes btn-shine { 0% { transform: translateX(-150%); } 20% { transform: translateX(150%); } 100% { transform: translateX(150%); } } @keyframes hspBtnReadyPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--h-accent-2) 50%, transparent); } 50% { transform: scale(1.05); box-shadow: 0 0 20px 10px color-mix(in srgb, var(--h-accent-2) 0%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--h-accent-2) 0%, transparent); } } .experience-btn:hover, .hsp-btn-play:hover, .hsp-crop-btn:hover, .hsp-tut-btn:hover { background: var(--h-bg-inset); color: var(--h-text-primary); } .hsp-btn-play:active { transform: scale(0.97); } /* -- Session Effects Buttons ----------------------------------- */ .hsp-effects-content { display: flex; justify-content: center; align-items: center; flex: 1; height: 100%; width: 100%; box-sizing: border-box; } .hsp-effects-inner { flex: 0 0 auto; align-self: center; max-height: 80vh; overflow-y: auto; } .hsp-effects-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: var(--h-bg-elevated); border-radius: 12px; cursor: pointer; color: var(--h-text-primary); transition: border-color 0.2s, background 0.2s, transform 0.15s; } .hsp-effects-btn:hover { border-color: var(--h-accent-main); background: var(--h-bg-hover, rgba(255,255,255,0.04)); } .hsp-effects-btn:active { transform: scale(0.98); } .hsp-effects-btn-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--h-border-medium); flex-shrink: 0; color: var(--h-text-primary); transition: color 0.3s; } .hsp-effects-btn.is-open .hsp-effects-btn-icon { color: var(--h-accent-main); } .hsp-effects-btn-text { text-align: left; } .hsp-effects-btn-title { font-size: clamp(11px, 2vw, 14px); font-weight: 700; } .hsp-effects-btn-desc { font-size: clamp(9px, 1.5vw, 11px); color: var(--h-text-secondary); margin-top: 2px; } .hsp-effects-expand { padding: 0 16px; } .hsp-vol-row { display: none; } .hsp-effects-volume { padding: 12px 0; } .hsp-effects-volume .hsp-player__vol-row { display: flex; align-items: center; gap: 10px; } .hsp-effects-volume .hsp-player__vol-row:last-child { margin-bottom: 0; } .hsp-effects-video-filters { padding: 12px 0; } .hsp-effects-icon-grid { display: flex; gap: 12px; padding: 8px 0; } .hsp-effects-icon-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px; border: 1px solid var(--h-border-subtle, #333); border-radius: 12px; background: var(--h-bg-surface, #1a1a1a); cursor: pointer; transition: border-color 0.2s, background 0.2s; flex: 1; min-width: 0; position: relative; } .hsp-effects-icon-btn:hover { border-color: var(--h-accent-main, #00aa66); background: var(--h-bg-hover, rgba(255,255,255,0.04)); } .hsp-effects-icon-btn[data-active="true"] { border-color: var(--h-accent-main, #00aa66); background: var(--h-bg-elevated); } .hsp-effects-icon-img { display: flex; align-items: center; justify-content: center; height: 32px; color: var(--h-text-secondary, #999); } .hsp-effects-icon-btn[data-active="true"] .hsp-effects-icon-img { color: var(--h-accent-main, #00aa66); } .hsp-effects-icon-img img { display: block; } .hsp-effects-icon-label { font-size: clamp(9px, 1.5vw, 11px); font-weight: 600; color: var(--h-text-secondary, #999); text-transform: uppercase; letter-spacing: 0.05em; } .hsp-effects-icon-btn[data-active="true"] .hsp-effects-icon-label { color: var(--h-accent-main, #00aa66); } .hsp-effects-icon-check { display: none; width: 16px; height: 16px; border-radius: 50%; background: var(--h-accent-main, #00aa66); position: absolute; top: 12px; right: 12px; } .hsp-effects-icon-check::after { content: ''; display: block; width: 5px; height: 8px; border: solid var(--h-bg-main); border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; top: 2px; left: 6px; } .hsp-effects-icon-btn[data-active="true"] .hsp-effects-icon-check { display: block; } .hsp-tension-row { display:flex; flex-direction:column; gap:6px; position:relative; z-index:1; } .hsp-tension-label-row { display:flex; align-items:center; gap:8px; justify-content:space-between; width:100%; margin-bottom:10px; } .hsp-tension-title { font-size:clamp(11px, 2vw, 14px); font-weight:999; color:var(--h-text-secondary, #aaa); text-transform:uppercase; letter-spacing:0.08em; } .hsp-fire-icon { font-size:18px; line-height:1; filter:grayscale(1) brightness(0.3); opacity:0.3; transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1); will-change:transform, filter; } .hsp-fire-icon.is-active { filter:none; opacity:1; animation:fire-dance 1.6s ease-in-out infinite; text-shadow:0 0 12px rgba(255,46,130,0.9), 0 0 30px rgba(255,46,130,0.5), 0 0 60px rgba(255,46,130,0.2); } .hsp-fire-icon.is-active:nth-child(2) { animation-delay:-0.5s; } .hsp-fire-icon.is-active:nth-child(3) { animation-delay:-1s; } .hsp-fire-icon:not(.is-active) { animation:fire-locked 2.5s ease-in-out infinite; } .hsp-fire-icon.is-popping.is-active { animation:fire-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; } .hsp-tension-tick { cursor:pointer; transition:color 0.2s, transform 0.2s; user-select:none; } .hsp-tension-tick:hover { color:var(--h-accent-main, #ff2e82); transform:scale(1.2); } @keyframes fire-pop { 0% { transform:scale(0.3) rotate(-8deg); opacity:0; filter:none; } 50% { transform:scale(1.25) rotate(3deg); opacity:1; } 100% { transform:scale(1) rotate(0deg); opacity:1; } } @keyframes fire-dance { 0%,100% { transform:rotate(-3deg) scale(1) translateY(0); text-shadow:0 0 12px rgba(255,46,130,0.9), 0 0 30px rgba(255,46,130,0.5), 0 0 60px rgba(255,46,130,0.2); } 15% { transform:rotate(2deg) scale(1.08) translateY(-2px); } 30% { transform:rotate(-1deg) scale(0.95) translateY(1px); text-shadow:0 0 16px rgba(255,46,130,1), 0 0 40px rgba(255,46,130,0.6), 0 0 80px rgba(255,46,130,0.3); } 50% { transform:rotate(1deg) scale(1.04) translateY(-1px); } 70% { transform:rotate(-2deg) scale(0.98) translateY(1px); } 85% { transform:rotate(3deg) scale(1.06) translateY(-2px); } } @keyframes fire-locked { 0%,100% { filter:grayscale(1) brightness(0.3); opacity:0.3; transform:scale(1); } 50% { filter:grayscale(0.8) brightness(0.45); opacity:0.45; transform:scale(1.04); } } .hsp-tension-slider { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:4px; background:linear-gradient(90deg, rgba(255,46,130,0.15), rgba(255,46,130,0.35)); outline:none; border:none; cursor:pointer; transition:background 0.3s; } .hsp-tension-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #ff6b9d, #ff2e82); border:2px solid rgba(255,255,255,0.3); box-shadow:0 0 16px rgba(255,46,130,0.6), 0 0 40px rgba(255,46,130,0.2); cursor:grab; transition:transform 0.2s, box-shadow 0.2s; } .hsp-tension-slider::-webkit-slider-thumb:hover { cursor:grab; transform:scale(1.15); box-shadow:0 0 20px rgba(255,46,130,0.8), 0 0 60px rgba(255,46,130,0.3); } .hsp-tension-slider::-webkit-slider-thumb:active { cursor:grabbing; } .hsp-tension-slider::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #ff6b9d, #ff2e82); border:2px solid rgba(255,255,255,0.3); box-shadow:0 0 16px rgba(255,46,130,0.6); cursor:grab; } .hsp-tension-slider::-moz-range-thumb:active { cursor:grabbing; } .hsp-tension-tickmarks { display:flex; justify-content:space-between; font-size:9px; color:var(--h-text-dim, #666); padding:1px 2px 0; } /* -- Aurora Nebula (cinematic overlay) ------------------------- */ .aurora-nebula { position: relative; overflow: hidden; } .aurora-nebula::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: overlay; background-size: 300% 300%; } .aurora-nebula::before { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: multiply; } .hulyx-dv-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; } .hulyx-dv-overlay.is-active { opacity: 1; } @keyframes aurora-flow { 0% { background-position: 0% 20%; } 25% { background-position: 80% 60%; } 50% { background-position: 40% 90%; } 75% { background-position: 100% 30%; } 100% { background-position: 0% 20%; } } /* -- Crop Modal ------------------------------------------------ */ .hsp-crop-overlay { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .hsp-crop-overlay.is-visible { opacity: 1; } .hsp-crop-modal { background: rgb(0 0 0); border: 1px solid var(--h-border-subtle); border-radius: 25px; padding: 30px 30px; width: 90%; max-width: calc(min(90vw, calc(90vh * 9 / 16)) - 80px); box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; } @media (max-width: 767.98px) { .hsp-crop-modal { width: 100% !important; max-width: none !important; padding: 30px 30px 20px !important; border-radius: 25px !important; box-sizing: border-box !important; } } .hsp-crop-header { text-align: center; } #hsp-crop-canvas { background: rgb(0 0 0); } .hsp-crop-title { font-size: 16px; font-weight: 700; color: var(--h-text-primary); text-transform: uppercase; letter-spacing: 0.05em; } .hsp-crop-viewport { position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #111; cursor: grab; touch-action: none; user-select: none; } .hsp-crop-viewport:active { cursor: grabbing; } .hsp-crop-controls { display: flex; align-items: center; gap: 10px; } .hsp-crop-label { font-size: 12px; color: var(--h-text-secondary); font-weight: 600; flex-shrink: 0; } .hsp-crop-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; background: var(--h-border-medium); border-radius: 2px; outline: none; } .hsp-crop-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--h-accent-main); cursor: pointer; } .hsp-crop-actions { display: flex; gap: 10px; } #hsp-xp-encouraging-msg { color: var(--h-text-primary) !important;} .hsp-crop-btn { flex: 1; padding: 10px 0; border: none; border-radius: 10px; font-size: clamp(11px, 2vw, 13px); font-weight: 700; cursor: pointer; transition: opacity 0.2s; color: var(--h-bg-main); } .hsp-crop-btn.cancel { background: var(--h-border-medium); color: var(--h-text-secondary); } .hsp-crop-btn.confirm { background: var(--h-accent-main); color: var(--h-bg-main); } .hsp-crop-btn.confirm:hover { color: var(--h-accent-main); } .hsp-crop-btn:active { opacity: 0.8; } /* -- Avatar Delete Button ------------------------------------ */ .hsp-avatar-delete { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background-color: transparent; color: #fff; border: 2px solid var(--h-bg-surface); font-size: 20px; font-weight: 700; line-height: 18px; text-align: center; cursor: pointer; opacity: 0; transition: opacity 0.2s; z-index: 2; } .hsp-edit-avatar:hover .hsp-avatar-delete { opacity: 1; } #hsp-play.hsp-overload { color: var(--h-bg-main) !important; } .hsp-btn-play.hsp-overload { background: linear-gradient(90deg,var(--h-accent-main),#ffd600,var(--h-accent-green),#b44dff,#ff6600,var(--h-accent-main)); background-size: 300% 100%; animation: hspRainbowBtn 1.2s linear infinite; color: var(--h-bg-main);} @keyframes hspRainbowBtn { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* -- Options card ---------------------------------------------- .hsp-btn-back { position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--h-text-primary); font-size: clamp(18px, 3.5vw, 24px); cursor: pointer; padding: 4px 8px; line-height: 1;} /* -- Audio row ------------------------------------------------- /* -- Slider ---------------------------------------------------- */.hsp-slider-wrap { background: var(--h-bg-inset); border-radius: 10px; padding: 12px 14px;} .hsp-slider-label span:last-child { color: var(--h-accent-main);} /* -- Settings button ------------------------------------------- */ /* -- Settings view --------------------------------------------- */.hsp-card-settings { max-height: 80vh; overflow-y: auto; } /* v4.55: Removed #hsp-view-settings background override — inherits from full-viewport rule */ /* -- Tutorial Section ------------------------------------------- */ #hsp-tutorial-section { display: flex; justify-content: center; width: 100%; } .hsp-tut-container { max-width: none; color: var(--h-text-primary); position: relative; overflow: hidden; } .hsp-tut-header { text-align: center; margin-bottom: 24px; position: relative; z-index: 1; } .hsp-tut-title { font-size: 32px; font-weight: 800; margin: 0 0 4px; } .hsp-tut-subtitle { font-size: clamp(20px, 3.5vw, 25px); font-weight: 900; letter-spacing: 0.5px; color: #ffffff; text-transform: uppercase; text-align: center; line-height: 1.2; margin: 0 0 1.75rem; white-space: nowrap; } .hsp-tut-steps { display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; margin-bottom: 25px; } .hsp-tut-step { display: flex; gap: 16px; padding: 12px; border-radius: 12px; background: var(--h-bg-elevated); } .hsp-tut-step-num { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--h-text-primary); background: var(--h-text-placeholder); border: 1px solid var(--h-text-placeholder); } .hsp-tut-step-text { display: flex; flex-direction: column; justify-content: center; } .hsp-tut-step-title { margin: 0 0 4px; font-weight: 600; } .hsp-tut-step-desc { margin: 0; line-height: 1.5; } .hsp-tut-btn { width: 100%; padding: 16px; border: none; border-radius: 12px; font-size: clamp(11px, 2vw, 14px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; color: var(--h-bg-main); } /* Audio buttons row: 3 equal buttons */ .hsp-settings-audio-row { display: flex; gap: 10px;} /* Slider panel */.hsp-slider-panel { background: var(--h-bg-inset); border-radius: 8px; padding: 12px 14px; margin: -2px 0 6px;} .hsp-slider-row { display: flex; align-items: center; gap: 10px;} .hsp-slider-label { font-size: 10px; font-weight: 700; color: var(--h-text-muted); text-transform: uppercase; letter-spacing: 0.1em; min-width: 120px;} .hsp-slider { flex: 1; -webkit-appearance: none; height: 3px; border-radius: 2px; background: var(--h-border-medium); outline: none; border: none;} .hsp-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--h-accent-main); box-shadow: 0 0 8px var(--h-accent-main-glow);} .hsp-slider-val { font-size: 10px; font-weight: 800; color: var(--h-accent-main); min-width: 36px; text-align: right;} .hsp-btn-stop-active { flex: 1 !important; background: var(--h-bg-elevated) !important; color: var(--h-text-primary) !important; border: 1px solid var(--h-border-active) !important; border-radius: 10px !important; padding: 12px !important; !important; font-weight: 900 !important; font-size: clamp(11px, 2vw, 13px) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; cursor: pointer !important; transition: background 0.2s !important;} /* -- Login Dashboard ------------------------------------------ */.hsp-login-dash { display: flex; flex-direction: column; align-items: center; } .hsp-ld-profile { display: flex; flex-direction: column; align-items: center; gap: 8px;} .hsp-ld-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid var(--h-border-medium);} .hsp-ld-avatar img { width: 100%; height: 100%; object-fit: cover;} .hsp-ld-tier { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25rem 1.1rem; border-radius: 9999px; border: 1px solid var(--h-accent-green); color: var(--h-accent-green); background: color-mix(in srgb, var(--h-accent-green) 15%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--h-accent-green) 30%, transparent); transition: all 0.3s ease; } .hsp-ld-tier.hsp-tier-free { border-color: var(--h-accent-green); color: var(--h-accent-green); background: color-mix(in srgb, var(--h-accent-green) 15%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--h-accent-green) 30%, transparent); } .hsp-ld-tier.hsp-tier-premium { border-color: var(--h-accent-gold); color: var(--h-accent-gold); background: color-mix(in srgb, var(--h-accent-gold) 15%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--h-accent-gold) 30%, transparent); } .hsp-ld-tier.hsp-tier-ultra { border-color: var(--h-accent-3); color: var(--h-accent-3); background: color-mix(in srgb, var(--h-accent-3) 15%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--h-accent-3) 30%, transparent); } .hsp-ld-name { font-size: clamp(20px, 2.5vw, 33px); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--h-text-primary);} .hsp-ld-actions { display: flex; gap: 10px; margin-top: 0px; } .hsp-ld-btn { font-size: clamp(11px, 2vw, 13px); font-weight: 900; padding: 12px; border-radius: 10px; border: none; cursor: pointer; text-decoration: none; text-align: center; text-transform: uppercase; letter-spacing: 0.05em; transition: opacity 0.3s, transform 0.3s 0.2s; color: var(--h-text-primary);} .hsp-ld-btn.primary { background: var(--h-accent-main); color: var(--h-bg-main);} .hsp-ld-btn.primary:hover { color: var(--h-accent-main);} .hsp-ld-btn.secondary { color: var(--h-text-secondary);} .hsp-ld-btn.secondary:hover { background-color: transparent; color: var(--h-accent-main) !important; color: var(--h-accent-main) !important; } /* -- Login Form ----------------------------------------------- */ .hsp-login-form input[type="text"],.hsp-login-form input[type="email"],.hsp-login-form input[type="password"] { width: 100%; padding: 12px 14px; background: var(--h-bg-inset); border: 1px solid var(--h-border-active); border-radius: 8px; color: var(--h-text-primary); font-size: 13px; outline: none; transition: border-color 0.2s; box-sizing: border-box; margin-bottom: 0px; margin-top: 10px; height: 45px;} .hsp-login-form input:focus { border-color: var(--h-accent-main);} .hsp-login-form input::placeholder { color: var(--h-text-placeholder);} .hsp-login-logo { display: block; margin: 0 auto 8px; max-width: 80%; height: auto; } .hsp-login-desc { font-size: 14px; font-weight: 500; color: var(--h-text-secondary); text-align: center; margin: 0 0 1rem; opacity: 0.9; letter-spacing: 0.05em; padding: 0px 35px; } @media (max-width: 480px) { .hsp-login-logo { max-width: 60%; } .hsp-login-desc { font-size: 12px !important; } } .hsp-login-title { font-weight: 900; color: var(--h-text-primary); text-transform: uppercase; letter-spacing: 0.05em;} .hsp-login-title-big { font-size: 20px; text-align: center; margin-bottom: 4px;} .hsp-login-msg { font-size: 11px; font-weight: 600; text-align: center; display: none; color: var(--h-accent-3);} .hsp-login-msg.ok { display: block; color: var(--h-accent-green);} .hsp-login-msg.err { display: block;} .hsp-access-btn { width: 100%; margin-top: 4px;} .hsp-login-social { display: flex; flex-direction: column; gap: 8px;} .hsp-btn-social { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 8px; font-size: clamp(10px, 2vw, 12px); font-weight: 700; text-decoration: none; color: var(--h-text-primary); transition: opacity 0.3s, transform 0.3s 0.2s;} .hsp-btn-social:hover { opacity: 0.85;} .hsp-btn-social svg { flex-shrink: 0;} .hsp-login-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0;} .hsp-login-divider::before,.hsp-login-divider::after { content: ''; flex: 1; height: 1px; background: var(--h-border-active);} .hsp-login-divider span { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--h-text-placeholder); text-transform: uppercase; white-space: nowrap;} .hsp-login-switch { font-size: clamp(11px, 2vw, 13px); font-weight: 900; color: var(--h-text-secondary); text-align: center; cursor: pointer; padding: 12px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.05em; transition: opacity 0.3s, transform 0.3s 0.2s;} .hsp-login-switch:hover { color: var(--h-text-primary);} .hsp-card-login { max-height: 80vh; overflow-y: auto;} /* -- Card Logo & Top Buttons ----------------------------------- */.hsp-card-logo-link { display: block; text-align: center; margin-bottom: 0; z-index: 2;} .hsp-card-logo { max-height: 90px; height: auto; opacity: 1; transition: opacity 0.2s; vertical-align: middle;} .hsp-card-logo:hover { opacity: 1;} .hsp-login-back-btn { position: absolute; top: 20px; right: 14px; background: var(--h-bg-inset); border: 1px solid var(--h-border-active); border-radius: 10px; padding: 12px; color: var(--h-text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background 0.2s;} .hsp-login-back-btn:hover { } /* -- Duration Panel -------------------------------------------- /* -- Custom Thermostat-Style Slider --------------------------- @keyframes hspPulseElectric { 0% { opacity: 0.15; transform: scaleY(1); } 100% { opacity: 0.35; transform: scaleY(1.05); } } /* Step markers .hsp-dur-step { width: 4px; height: 4px; border-radius: 50%; background: var(--h-border-active); transition: background 0.2s, box-shadow 0.2s, transform 0.2s;} .hsp-dur-step.active { background: var(--hsp-dur-color, var(--h-accent-green)); transform: scale(1.4);} /* Ticks .hsp-dur-tick { font-size: 11px; font-weight: 700; color: var(--h-text-placeholder); cursor: pointer; transition: color 0.2s; user-select: none;} .hsp-dur-tick.active { color: var(--hsp-dur-color, var(--h-accent-green));} /* Tier label /* -- Stats ----------------------------------------------------- */.hsp-stats-best { display: flex; justify-content: center; gap: 20px; max-height: 0; opacity: 0; overflow: hidden; margin: 0; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, margin 0.35s ease;} .hsp-stats-best.is-visible { max-height: 80px; opacity: 1; margin: 8px 0; padding: 16px 0;} .hsp-stat { text-align: center;} .hsp-stat-label { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--h-text-placeholder); text-transform: uppercase; margin-bottom: 4px;} .hsp-stat-value { font-size: 16px; font-weight: 900; color: var(--h-text-primary);} /* -- Card Active (Session Running) ----------------------------- */.hsp-card-active { position: relative;} /* -- Active Session Progress Ring ----------------------------- */ .hsp-active-ring-wrap { position: relative; width: 288px; height: 288px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; } .hsp-active-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 30px rgba(255, 75, 139, 0.15)); } .hsp-active-ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 8px; } .hsp-active-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.3em; color: #ff4b8b; text-transform: uppercase; border: 1px solid rgba(255, 75, 139, 0.4); border-radius: 55px; padding: 4px 14px; margin-bottom: 8px; animation: hspBadgePulse 2s ease-in-out infinite; } .hsp-active-badge::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff4b8b; margin-right: 7px; animation: hspBadgePulse 2s ease-in-out infinite; vertical-align: middle; } @keyframes hspBadgePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hsp-active-timer { font-size: clamp(40px, 10vw, 51px); font-weight: 900; color: var(--h-text-primary); letter-spacing: 5px !important; line-height: 1; } .hsp-active-timer-label { font-size: 15px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--h-text-secondary); margin-top: 4px; } @media (max-width: 767.98px) { .hsp-active-ring-wrap { width: 220px; height: 220px; } .hsp-active-timer { font-size: clamp(24px, 5vw, 36px); } } .hsp-card-active .hsp-header { padding-top: 10px;} .hsp-tag-live { color: var(--h-accent-main);} .hsp-title-timer { font-size: clamp(28px, 6vw, 40px); font-weight: 900; color: var(--h-text-primary); letter-spacing: -0.02em; line-height: 1; margin-top: 15px; margin-bottom: 10px; animation: timerPulse 2s ease-in-out infinite;} @keyframes timerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); }} .hsp-btn-cancel { padding: 12px; background: var(--h-bg-inset); color: var(--h-text-primary); font-size: clamp(11px, 2vw, 13px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--h-border-active); border-radius: 10px; cursor: pointer; transition: opacity 0.3s, transform 0.3s 0.2s;} .hsp-btn-cancel:hover { } .hsp-btn-play { padding: 12px; background: var(--h-bg-inset); color: var(--h-text-primary); font-size: clamp(11px, 2vw, 13px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--h-border-active); border-radius: 10px; cursor: pointer; transition: opacity 0.3s, transform 0.3s 0.2s;} .hsp-btn-red { color: var(--h-bg-main); background-color: var(--h-accent-main) !important;} .hsp-btn-red:hover { } .hsp-countdown { position: absolute; inset: 0; width: 100%; height: 100%; border: none; z-index: var(--z-modal); pointer-events: none; background: transparent; transition: opacity 0.4s ease;} .hsp-mission-label { position: fixed; top: 14vh; left: 50%; transform: translateX(-50%); font-size: clamp(10px, 1.8vw, 14px); font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; background: var(--h-accent-main); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 14px var(--h-accent-main)); border: 1px solid var(--h-border-active); border-radius: 6px; padding: 6px 16px; white-space: nowrap; z-index: calc(var(--z-modal) + 1); pointer-events: none; opacity: 0; animation: hspMissionIn 0.4s 0.1s ease forwards;} @keyframes hspMissionIn { 0% { opacity: 0; transform: translateX(-50%) translateY(6px); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); }} @media (max-width: 767.98px) { .hsp-mission-label { top: 12vh; font-size: 8px; padding: 5px 12px; }} /* -- Social Button Variants ------------------------------------ */.hsp-btn-social-text { justify-content: flex-start;} .hsp-btn-social-logo { padding: 10px;} .hsp-login-social-logo-only { flex-direction: row; flex-wrap: wrap; justify-content: center;} /* -- Upgrade Box: defined in hulyx-auth.css --------------------- */ /* -- Mobile responsive overrides ------------------------------ */ @media (max-width: 480px) { .hsp-box { padding: 20px 15px; } #hsp-view-login, #hsp-view-register, #hsp-view-edit, #hsp-view-effects, #hsp-view-settings, #hsp-view-trainers { padding: 20px 15px 0px !important; } #hsp-view-xp-gain { width: 90% !important; } .hsp-title { font-size: clamp(14px, 4vw, 20px) !important; } .hsp-stat-value { font-size: clamp(16px, 4vw, 22px); } .h-mascot-viewport { width: 120px; height: 120px; } .hsp-dur-tick { font-size: clamp(9px, 2.5vw, 11px); } .hsp-ld-name { font-size: clamp(24px, 4vw, 30px); } } /* -- Mode Selector Buttons ------------------------------------ */.mode-selector { display: flex; padding: 4px; border-radius: 55px; border: 1px solid var(--h-border-subtle); gap: 4px; margin-top: 20px !important; margin-bottom: 20px; position: relative;}.mode-slider { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: var(--h-border-medium); border-radius: 55px; border: 1px solid var(--h-border-active); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 0;}.mode-slider[data-pos="1"] { transform: translateX(calc(100% + 0px)); }.mode-btn { flex: 1; padding: clamp(8px, 2vw, 12px) clamp(10px, 2.5vw, 16px); border: none; border-radius: 8px; background: transparent; color: var(--h-text-secondary); font-size: clamp(10px, 2.5vw, 14px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: opacity 0.3s, transform 0.3s 0.2s ease; position: relative; z-index: 1;}.mode-btn:hover { color: var(--h-text-primary); border-radius: 55px;}.mode-btn.active { background: transparent; border-radius: 55px; border: 1px solid transparent; color: var(--h-text-primary);} /* -- Best Practices Button ---------------------------------- */ /* -- Identity Content (in login box) ----------------------------- */#hsp-identity-content .identity-wrapper,#hsp-identity-content { display: flex; flex-direction: column; align-items: center; gap: 0px; padding: 0px 0; position: relative;}.h-mascot-viewport { position: relative; width: clamp(120px, 35vw, 180px); height: clamp(120px, 35vw, 180px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1;}.h-ring { position: absolute; inset: 0; border-radius: 50%;}.h-ring.inner { border: 1px solid var(--h-border-active); transform: scale(0.87); }.h-ring.outer { border: 1px solid var(--h-border-medium); transform: scale(1.13); }.h-ring.strobe { border: 1px dashed rgba(255,200,100,0.3); animation: h-spin 60s linear infinite; }.h-mascot-frame { width: 80%; height: 80%; max-width: 140px; max-height: 140px; border-radius: 16px; overflow: hidden; position: relative; background: var(--h-bg-surface); border: 1px solid var(--h-border-active); z-index: 5;}.h-mascot-frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92;}.h-mascot-gradient { position: absolute; inset: 0; background: linear-gradient(to top, var(--h-bg-surface) 0%, transparent 55%); pointer-events: none;}.h-tag-active { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: var(--h-accent-main); color: var(--h-bg-main); padding: 2px clamp(6px, 2vw, 10px); border-radius: 9999px; font-size: clamp(7px, 1.8vw, 9px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;}.h-info-group { text-align: center; z-index: 1;}.h-player-lvl { font-size: 2rem; font-weight: 800; color: var(--h-text-primary); margin: 0; line-height: 1; letter-spacing: -0.04em; text-shadow: 0 0 40px var(--h-accent-main-glow);}.h-player-rank { color: var(--h-text-secondary); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; line-height: 0.22em; margin-top: 6px; opacity: 0.85;}.h-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 380px; z-index: 1;}.h-stat-card { position: relative; background: var(--h-bg-surface); border: 1px solid var(--h-border-active); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px;}.h-stat-card .material-symbols-outlined { color: var(--h-accent-main); font-size: 18px;}.h-stat-card .val { font-weight: 700; font-size: 1rem; color: var(--h-text-primary); line-height: 1;}.h-stat-card .lbl { font-size: 8px; color: var(--h-text-muted); text-transform: uppercase; letter-spacing: 0.08em;}.h-stat-streak { cursor: pointer; border-color: var(--h-accent-2);}.h-stat-streak .material-symbols-outlined { color: var(--h-accent-main); }.h-stat-streak .val { color: var(--h-accent-main); }.h-stat-streak .lbl { color: var(--h-accent-2); }.h-xp-wrapper { width: 100%; max-width: 380px; z-index: 1;}.h-xp-labels { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 6px; font-size: 11px; font-weight: 600; color: var(--h-text-primary);}.h-xp-ratio { color: var(--h-text-primary); font-family: monospace; font-size: 11px;}.h-xp-bar-bg { width: 100%; height: 6px; background: var(--h-border-active); border-radius: 9999px; overflow: hidden; border: 1px solid var(--h-bg-elevated); position: relative;}.h-xp-bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--h-accent-main); border-radius: 9999px; transition: width 0.7s ease-out;} /* -- Tier Upgrade Popup ----------------------------------------- */ .hsp-tier-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); } .hsp-tier-box { background: var(--h-bg-surface); border: 1px solid var(--h-border-active); border-radius: 25px; padding: 32px; width: 90%; max-width: min(90vw, calc(90vh * 9 / 16)); text-align: center; color: var(--h-text-primary); animation: hspTierGiggle 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hsp-tier-icon-wrap { margin-bottom: 16px; } .hsp-tier-icon { font-size: 48px; } .hsp-tier-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; } .hsp-tier-content { margin: 0 0 20px; font-size: 13px; color: var(--h-text-secondary); line-height: 1.5; } .hsp-tier-content strong { color: var(--h-accent-main); } .hsp-tier-btn { width: 100%; padding: 14px; border: none; border-radius: 12px; font-size: clamp(11px, 2vw, 14px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; } .hsp-tier-close { width: 100%; padding: 10px; border: none; background: transparent; color: var(--h-text-muted); font-size: clamp(10px, 2vw, 12px); cursor: pointer; margin-top: 8px; } /* ============================================================ NEW START VIEW (Retention Trainer) ============================================================ */ .hsp-card-start { position: relative; animation: hspBoxIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes hspBoxIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .hsp-view-enter { animation: hspBoxIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .hsp-start-inner { display: flex; flex-direction: column; gap: 0; } /* v4.45: Start inner visible by default (session box always shown). When trainer-active, keep visible (unchanged). */ #hsp-overlay:not(.trainer-active) .hsp-start-inner { display: flex !important; } #hsp-overlay.trainer-active .hsp-start-inner { display: flex !important; animation: hspBoxPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes hspBoxPop { 0% { opacity: 0; transform: scale(0.92) translateY(14px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* Start Header — fits on one line */ .hsp-start-header { text-align: center; } .hsp-start-title { font-size: clamp(20px, 3.5vw, 25px); font-weight: 900; letter-spacing: 0.5px; color: #ffffff; text-transform: uppercase; text-align: center; line-height: 1.2; margin: 0 0 0.75rem; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 767.98px) { .hsp-start-title { font-size: clamp(14px, 4vw, 20px); margin-bottom: 0.4rem; } .hsp-start-header { } } .hsp-start-sub { font-size: 14px; font-weight: 500; color: var(--h-text-secondary); text-align: center; margin: 0 0 1rem; opacity: 0.9; letter-spacing: 0.05em; padding: 0px 35px; } .hsp-start-sub.is-visible { opacity: 0.9; margin: 0 0 1rem; display: block !important; } @media (max-width: 767.98px) { .hsp-start-sub { margin-bottom: 0.6rem; padding: 0px 16px; font-size: 12px; } } /* Intensity Panel */ .hsp-intensity-panel { flex: 1; display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 14px 16px; background: var(--h-bg-elevated); border-radius: 15px; cursor: pointer; transition: all 0.2s ease; } .hsp-intensity-panel:hover { background: rgba(255,255,255,0.05); border-color: var(--h-accent-main); } @media (max-width: 767.98px) { .hsp-start-row-choices { flex-direction: column; gap: 8px; } } .hsp-intensity-label, .hsp-intensity-name, .hsp-duration-label, .hsp-trainer-toggle-btn { font-size: 13px; line-height: normal; } .hsp-intensity-label { font-weight: 600; color: var(--h-accent-main); margin: 0; } /* Difficulty Badge */ .hsp-difficulty-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25rem 1.1rem; border-radius: 9999px; border: 1px solid var(--h-accent-red); color: var(--h-accent-red); transition: all 0.3s ease; margin-bottom: 10px; align-self: center; } .hsp-difficulty-dot { width: 5px; height: 5px; border-radius: 50%; animation: pulse 2s ease-in-out infinite; position: relative; } .hsp-difficulty-duration { font-size: inherit; font-weight: inherit; color: inherit; display: inline-flex; align-items: center; } @media (max-width: 767.98px) { .hsp-difficulty-badge { font-size: 0.6rem; padding: 0.2rem 0.7rem; gap: 0.3rem; } .hsp-difficulty-dot { width: 4px; height: 4px; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .hsp-difficulty-badge.easy { background: color-mix(in srgb, var(--h-accent-green) 15%, transparent); border: 1px solid var(--h-accent-green); color: var(--h-accent-green); box-shadow: 0 0 10px color-mix(in srgb, var(--h-accent-green) 30%, transparent); } .hsp-difficulty-badge.easy .hsp-difficulty-dot { background: var(--h-accent-green); } .hsp-difficulty-badge.moderate { background: rgba(253, 231, 122, 0.15); border: 1px solid #fde74c; color: #fde74c; box-shadow: 0 0 10px rgba(253, 231, 122, 0.3); } .hsp-difficulty-badge.moderate .hsp-difficulty-dot { background: #fde74c; } .hsp-difficulty-badge.difficult { background: rgba(255, 59, 48, 0.15); border: 1px solid var(--h-accent-red); color: var(--h-accent-red); box-shadow: 0 0 10px rgba(255, 59, 48, 0.3); } .hsp-difficulty-badge.difficult .hsp-difficulty-dot { background: var(--h-accent-red); } /* Intensity Grid — EXACT match to design */ .hsp-intensity-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; } @media (max-width: 767.98px) { .hsp-intensity-grid { gap: 8px; } } .hsp-intensity-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 1rem; border-radius: 1.25rem; cursor: pointer; transition: all 0.2s ease; background: transparent !important; border: 2px solid transparent !important; } @media (max-width: 767.98px) { .hsp-intensity-btn { padding: 0.6rem; gap: 0.25rem; } } .hsp-intensity-btn:active { transform: scale(0.98); } #hsp-intensity-grid .active { background: var(--h-bg-inset); border: 2px solid var(--h-accent-main) !important; } #hsp-intensity-grid .active .hsp-intensity-name { color: var(--h-accent-main); } .hsp-intensity-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 28px; line-height: 1; transition: color 0.2s; color: var(--h-accent-main); } @media (max-width: 767.98px) { .hsp-intensity-icon { width: 22px; height: 22px; font-size: 22px; } } .hsp-intensity-icon img { width: 100%; height: 100%; object-fit: contain; } .hsp-intensity-icon .material-symbols-outlined { font-size: 25px !important; } @media (max-width: 767.98px) { .hsp-intensity-icon .material-symbols-outlined { font-size: 25px !important; } } .hsp-intensity-name { font-weight: 700; letter-spacing: 0.05em; text-transform: capitalize; color: var(--h-text-primary); } /* Duration Panel */ .hsp-duration-panel { margin-top: 1.5rem; } .hsp-duration-panel .hsp-duration-value { font-weight: 900; color: var(--h-accent-main); letter-spacing: 3px; } @media (max-width: 767.98px) { .hsp-duration-panel { margin-bottom: 1rem; } } .hsp-duration-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; } .hsp-duration-label { font-weight: 700; letter-spacing: 0.1em; color: var(--h-text-secondary); text-transform: uppercase; margin: 0; } } .hsp-duration-value { font-size: 0.875rem; font-weight: 700; color: var(--h-accent-main); text-transform: uppercase; } /* Duration Slider — EXACT match to design */ .hsp-duration-slider-wrap { position: relative; width: 100%; height: 25px; margin: 0 0 0px; cursor: grab; } .hsp-duration-track { position: absolute; top: 50%; left: 0; right: 0; cursor: grab; background: linear-gradient(to right, rgb(30 30 30 / 22%) 0%, rgb(255 255 255 / 24%) 100% 100%) !important; border: 1px solid #ffffff0f; height: 8px; transform: translateY(-50%); border-radius: 9999px; overflow: visible; cursor: pointer; z-index: 1; } .hsp-duration-fill { position: absolute; top: 0; left: 0; height: 100%; width: 60%; background: var(--h-accent-main); transition: width 0.15s ease; pointer-events: none; border-radius: 9999px; } .hsp-duration-knob { position: absolute; top: 50%; left: 60%; width: 25px; height: 25px; border-radius: 50%; background: #ffffff; transform: translate(-50%, -50%); pointer-events: none; transition: left 0.15s ease; z-index: 2; } .hsp-duration-segment, .hsp-difficulty-duration, #hsp-duration-value { text-transform: lowercase; } /* Duration Segments (bottom) — positioned to match slider */ .hsp-duration-segments { position: relative; height: 24px; margin-top: 12px; padding: 0 4px; color: var(--h-bg-inset); } .hsp-duration-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); } .hsp-duration-dot[data-i="1"] { left: 25%; } .hsp-duration-dot[data-i="2"] { left: 50%; } .hsp-duration-dot[data-i="3"] { left: 75%; } .hsp-duration-segment[data-i="0"] { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .hsp-duration-segment[data-i="4"] { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .hsp-duration-segment { font-size: 0.875rem; font-weight: 700; color: var(--h-text-secondary); cursor: pointer; transition: color 0.2s; user-select: none; line-height: 1; } .hsp-duration-segment.active { color: var(--h-accent-main); font-weight: 900; } .hsp-duration-segment.infinity { color: var(--h-accent-main); } /* Duration dots (middle segments) — segment-dot style from design */ .hsp-duration-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); transition: all 0.3s ease; cursor: pointer; } .hsp-duration-dot.filled { background: var(--h-accent-main); } .hsp-duration-dot.active { background: var(--h-accent-main); } /* Start Button */ .hsp-btn-start { width: 100%; min-height: 60px; padding: 20px 20px; background: var(--h-accent-main); color: var(--h-bg-main); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; border-radius: 55px; cursor: pointer; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px; transition: all 0.2s ease; } .hsp-btn-start:hover:not(.is-disabled) { transform: scale(1.02); background: var(--h-bg-inset); } .hsp-btn-start:active:not(.is-disabled) { transform: scale(0.98); } .hsp-btn-start.is-disabled { background: #555 !important; color: #999 !important; cursor: not-allowed !important; animation: none !important; opacity: 0.6; box-shadow: none !important; pointer-events: none; } .hsp-btn-start--circle { border-radius: 50% !important; aspect-ratio: 1; min-height: unset !important; padding: 0 !important; gap: 0; } .hsp-btn-start--circle .hsp-start-icon { font-size: 1.5em; } .hsp-btn-start--circle:hover:not(.is-disabled) { transform: scale(1.05); } .hsp-btn-start--circle:active:not(.is-disabled) { transform: scale(0.95); } .hsp-start-icon { display: flex; align-items: center; justify-content: center; font-size: clamp(0.9rem, 1.8vw, 1.4rem); line-height: 1; color: var(--h-bg-main); } .hsp-start-icon img { object-fit: contain; filter: invert(1); } #hsp-start:hover .hsp-start-icon img { filter: invert(0) !important; } .hsp-start-icon .material-symbols-outlined { font-size: inherit; color: inherit; } .hsp-start-text { line-height: 1; } #hsp-start:hover .hsp-start-text, #hsp-start:hover .material-symbols-outlined { color: var(--h-accent-main); } /* v4.51: Start row — toggle button + Start Session */ .hsp-start-row { display: flex; flex-direction: column; gap: 8px; width: 100%; } .hsp-start-row-choices { display: flex; flex-direction: row; gap: 8px; width: 100%; } .hsp-trainer-toggle-btn { flex: 1; min-height: 60px; background: var(--h-bg-elevated); color: var(--h-accent-main); border-radius: 15px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; transition: all 0.2s ease; font-weight: 600; text-align: left; } .hsp-trainer-toggle-btn:hover { background: rgba(255,255,255,0.05); border-color: var(--h-accent-main); } .hsp-trainer-toggle-btn .material-symbols-outlined { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--h-border-subtle); background: var(--h-bg-inset); color: var(--h-text-primary); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .hsp-start-row .hsp-btn-start { width: 100%; min-height: 60px; flex: none; } /* v4.48: Double-tap hint toast */ /* v4.72: Unified toast notification system */ @keyframes hulyxToastIn { 0% { max-height: 0; opacity: 0; transform: translateY(-20px); } 100% { max-height: 5rem; opacity: 1; transform: translateY(0); } } @keyframes hulyxToastOut { 0% { max-height: 5rem; opacity: 1; transform: translateY(0); } 100% { max-height: 0; opacity: 0; transform: translateY(-20px); } } .hulyx-toast-panel { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: fixed; top: 0; left: 0; right: 0; padding: calc(1rem + 30px) 1rem 0; pointer-events: none; z-index: var(--z-hud); } .hulyx-toast-item { overflow: hidden; max-height: 0; opacity: 0; width: 100%; display: flex; justify-content: center; transform: translateY(-20px); } .hulyx-toast-item.is-visible { animation: hulyxToastIn 0.4s ease forwards; } .hulyx-toast-item.is-hiding { animation: hulyxToastOut 0.4s ease forwards; } .hulyx-toast { background: #22232b; color: #f5f5f5; padding: 0.65rem 1.5rem 0.65rem 4rem; text-align: left; border-radius: 55px; position: relative; font-weight: 300; font-size: 13px; font-family: system-ui, -apple-system, sans-serif; margin: 0.4rem 0; min-width: 10rem; max-width: 22rem; width: auto; border: 0.15rem solid #fff2; box-shadow: inset 0 0 0.5rem 0 #1d1e26; display: flex; align-items: center; gap: 0.5rem; } .hulyx-toast-icon { position: absolute; width: 2.25rem; height: 2.25rem; top: 50%; left: 0.75rem; transform: translateY(-50%); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; flex-shrink: 0; } .hulyx-toast-icon .material-symbols-outlined { font-size: 1.15rem; color: #fff; position: relative; z-index: 1; } .hulyx-toast-text { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Toast type — icon circle colors */ .hulyx-toast.hint { --clr: #0070e0; --brd: #0070e040; } .hulyx-toast.hint .hulyx-toast-icon { background: radial-gradient(circle at 50% 50%, var(--clr) 0.7rem, var(--brd) calc(0.7rem + 1px) 100%); } .hulyx-toast.success { --clr: #03a65a; --brd: #03a65a40; } .hulyx-toast.success .hulyx-toast-icon { background: radial-gradient(circle at 50% 50%, var(--clr) 0.7rem, var(--brd) calc(0.7rem + 1px) 100%); } .hulyx-toast.warning { --clr: #fc8621; --brd: #fc862140; } .hulyx-toast.warning .hulyx-toast-icon { background: radial-gradient(circle at 50% 50%, var(--clr) 0.7rem, var(--brd) calc(0.7rem + 1px) 100%); } /* "+" button pop animation */ @keyframes hspBtnPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } } /* ===== Height-constrained screens (landscape / wide but short) ===== */ /* ===== Height-constrained screens (landscape / wide but short) ===== */ .hsp-controls-panel { padding: 30px 30px; border-radius: 35px !important; } @media (max-height: 850px) and (min-width: 1000px) { .hsp-title { font-size: clamp(14px, 2.2vw, 22px) !important; } .hsp-start-title { font-size: clamp(14px, 2.2vw, 20px); } .hsp-start-sub { font-size: 12px; margin-bottom: 0.5rem; padding: 0 20px; } .hsp-btn-start { min-height: 44px; padding: 12px 16px; font-size: clamp(12px, 1.6vw, 17px); } .hsp-trainer-toggle-btn { min-height: 44px; } .hsp-controls-panel { padding: 24px 30px; } .hsp-intensity-btn { border-radius: 1rem; } .hsp-intensity-btn .hsp-intensity-icon { font-size: 20px; } .hsp-ld-name { font-size: clamp(20px, 2.5vw, 26px); } .hsp-duration-segments { margin-top: 6px; } .hsp-header { gap: 4px; } .hsp-card { gap: 0 !important; } .hsp-start-header { } .hsp-duration-panel { margin-top: 0.5rem; } } @media (max-height: 650px) and (min-width: 1000px) { .hsp-title { font-size: clamp(12px, 1.8vw, 18px) !important; } .hsp-start-title { font-size: clamp(12px, 1.8vw, 16px); } .hsp-start-sub { font-size: 10px; margin-bottom: 0.3rem; padding: 0 12px; } .hsp-btn-start { min-height: 36px; padding: 8px 12px; font-size: clamp(10px, 1.2vw, 14px); letter-spacing: 1px; } .hsp-trainer-toggle-btn { min-height: 36px; } .hsp-controls-panel { padding: 16px 20px; } .hsp-intensity-btn { padding: 0.5rem; border-radius: 0.8rem; gap: 0.1rem; } .hsp-intensity-btn .hsp-intensity-icon { font-size: 16px; } .hsp-intensity-btn .hsp-intensity-name { font-size: 0.6rem; } .hsp-ld-name { font-size: clamp(16px, 2vw, 20px); } .hsp-duration-panel { margin-top: 0.3rem; } .hsp-start-header { } .hsp-card { gap: 0 !important; } .hsp-header { gap: 2px; } .hsp-duration-segments { margin-top: 4px; } .hsp-duration-track { height: 4px; } .hsp-difficulty-badge { font-size: 0.55rem; padding: 2px 6px; } } @media (max-height: 500px) and (min-width: 1000px) { .hsp-title { font-size: clamp(10px, 1.4vw, 14px) !important; } .hsp-start-title { font-size: clamp(10px, 1.4vw, 14px); margin-bottom: 0.2rem; } .hsp-start-sub { font-size: 9px; margin-bottom: 0.2rem; padding: 0 8px; } .hsp-btn-start { min-height: 30px; padding: 6px 10px; font-size: clamp(9px, 1vw, 12px); letter-spacing: 0.5px; } .hsp-trainer-toggle-btn { min-height: 30px; } .hsp-controls-panel { padding: 10px 14px; } .hsp-intensity-label, .hsp-duration-label, .hsp-duration-value { font-size: 10px; } .hsp-intensity-btn { padding: 0.35rem; border-radius: 0.6rem; gap: 0.15rem; } .hsp-intensity-btn .hsp-intensity-icon { font-size: 13px; } .hsp-intensity-btn .hsp-intensity-name { font-size: 0.5rem; } .hsp-ld-name { font-size: clamp(13px, 1.6vw, 16px); } .hsp-duration-panel { margin-top: 0.2rem; } .hsp-start-header { } .hsp-card { gap: 0 !important; } .hsp-header { gap: 1px; } .hsp-duration-segments { margin-top: 2px; } .hsp-duration-track { height: 3px; } .hsp-difficulty-badge { font-size: 0.5rem; padding: 1px 4px; } } /* -- Full-viewport non-start cards: header at top, content centered */ /* Login header: nav buttons at top, not centered vertically */ /* Nav buttons: vertically centered in all cards */ /* Content wrappers: fill card width, vertically center inner content */ #hsp-view-login .hsp-card-body, #hsp-view-edit .hsp-card-body, #hsp-register-content, #hsp-tutorial-section { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; width: 100% !important; } /* Override login-dash align-items:center so children fill width */ #hsp-view-login .hsp-login-dash { align-items: stretch !important; width: 100% !important; } /* Force all edit fields children to full width */ #hsp-view-edit .hsp-edit-fields, #hsp-view-edit .hsp-edit-group, #hsp-view-edit .hsp-edit-input, #hsp-view-edit #hsp-edit-save, #hsp-view-edit .hsp-ld-actions { width: 100% !important; box-sizing: border-box !important; } /* Force login dash inner elements to full width */ #hsp-view-login .hsp-ld-name, #hsp-view-login .hsp-ld-tier, #hsp-view-login .hsp-ld-actions, #hsp-view-login .h-upgrade-box, #hsp-view-login .hsp-tut-btn, #hsp-view-login .hsp-ld-btn { width: 100% !important; box-sizing: border-box !important; } /* -- Chrono Toggle & Settings Collapse -------------------------- */ .hsp-settings-container { max-height: 0; overflow: hidden; opacity: 0; margin-bottom: 0; transition: max-height 0.35s ease, opacity 0.3s ease, margin-bottom 0.3s ease; pointer-events: none; } .hsp-settings-container.is-open { max-height: 250px; opacity: 1; pointer-events: auto; margin-bottom: 0.5rem; } .hsp-chrono-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--h-border-subtle); background: var(--h-bg-inset); color: var(--h-text-primary); cursor: pointer; transition: background 0.2s, border-color 0.2s; flex-shrink: 0; } .hsp-chrono-toggle:hover { background: var(--h-border-subtle); border-color: var(--h-accent-main); } .hsp-chrono-toggle .material-symbols-outlined { font-size: 20px; } @media (max-width: 767.98px) { .hsp-chrono-toggle { width: 30px; height: 30px; padding: 0; } .hsp-chrono-toggle .material-symbols-outlined { font-size: 15px; } .hsp-trainer-toggle-btn .material-symbols-outlined { width: 30px; height: 30px; font-size: 15px; padding: 0; } } .hsp-pre-start { display: none; } /* Trainer filter buttons (trending / shuffle / new) */ .hsp-trainers-filters { display: flex; gap: 8px; margin-top: 5px; margin-bottom: 10px; flex-shrink: 0; } .hsp-trainer-filter-btn { display: flex; align-items: center; justify-content: center; gap: 5px; flex: 1; padding: 7px 0; background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .hsp-trainer-filter-btn:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); } .hsp-trainer-filter-btn.active { background: var(--h-accent-main); border-color: var(--h-accent-main); color: #000; } .hsp-trainer-filter-btn:active:not(.active) { transform: scale(0.95); opacity: 0.7; } .hsp-trainer-filter-btn svg { flex-shrink: 0; } #hsp-view-trainers.hsp-trainers-trainer-view .hsp-trainers-filters { display: none; } #hulyx-strobe-trigger { -webkit-user-select: none; user-select: none; } /* Scroll Speed Slider */ .hsp-speed-section { .hsp-speed-section { padding: 14px 0; } .hsp-speed-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .hsp-speed-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--h-bg-inset); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--h-text-secondary); } .hsp-speed-text { flex: 1; } .hsp-speed-title { font-size: 13px; font-weight: 700; color: var(--h-text-primary); } .hsp-speed-desc { font-size: 11px; color: var(--h-text-secondary); margin-top: 1px; } .hsp-speed-slider-wrap { display: flex; gap: 6px; background: var(--h-bg-inset); border-radius: 10px; padding: 3px; } .hsp-speed-option { flex: 1; padding: 7px 0; border: none; border-radius: 8px; background: transparent; color: var(--h-text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .hsp-speed-option:hover { color: var(--h-text-primary); } .hsp-speed-option.active { background: var(--h-bg-inset); color: var(--h-accent-main); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }