/* ============================================================ v101-premium-graphics.css (claude-premium-1) [2026-07-26] ------------------------------------------------------------ Demande user : « monte les graphismes TOTAL — tout plus beau, boutons plus qualitatifs, cadres mieux faits, plus de particules partout » (réf. photo du panneau fitness). Les couches v99-button-polish/ui-premium gèrent déjà HOVER/PRESS. Cette couche ajoute la PROFONDEUR PREMIUM AU REPOS + particules. 100% ADDITIVE & SÛRE : - que du box-shadow / overlays ::after translucides pointer-events:none + border-radius → ne peut PAS casser une mise en page, seulement enrichir. Les box-shadow inline (glows voulus) restent prioritaires là où ils existent (règles sans !important) ; là où on force (!important) c'est sur des sélecteurs ciblés dont on maîtrise la struct. - GPU only. Respecte le mode fluidité (les anims sont exemptées). Chargée EN DERNIER (après v100-nav-fluid.css). Réversible : retirer le lien. ============================================================ */ /* ============================================================ 1) BOUTONS — relief "verre" AU REPOS Sans !important → n'upgrade QUE les boutons plats (ceux sans box-shadow inline gardent leur style voulu). Bevel = liseré clair en haut + ombre douce = sensation premium sans toucher le texte. ============================================================ */ .action-btn, .buy-btn, .mode-btn, .btn-gold, .btn-purple, .btn-orange, .defi-luxe-btn, .lang-btn, .mx-set-action, .tab-btn, .mx-btn, .pill { box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(0,0,0,.22), 0 3px 11px rgba(0,0,0,.30); } /* ============================================================ 2) CARTES — profondeur + liseré interne + ombre portée (partout) box-shadow + radius uniquement → ne touche NI le fond (raretés inline préservées) NI le contenu. inset top = highlight, inset ring = liseré. ============================================================ */ .equip-slot, .gem-pack, .market-item, .inv-item, .invp-card, .mode-card, .mx-aui-mode, .coopb-mode-card, .stat-card-2026, #market-screen .grid-3 > div, #gemshop-screen [onclick] { box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(201,180,255,.10), 0 8px 22px rgba(0,0,0,.50) !important; border-radius: 15px !important; } /* ============================================================ 3) BARRES DE VIE (combat) — gravé + gloss premium ============================================================ */ #mx-combat-hud .mxh-bar { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.30)) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.07), 0 0 10px rgba(0,0,0,.4) !important; } #mx-combat-hud .mxh-fill { box-shadow: inset 0 1px 0 rgba(255,255,255,.30) !important; } /* reflet (gloss) sur la moitié haute du remplissage */ #mx-combat-hud .mxh-fill::after { content: ''; position: absolute; inset: 0 0 52% 0; background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0)); border-radius: 9px 9px 0 0; pointer-events: none; } /* barres de vie génériques (autres écrans) : gravé léger */ #game-hp, .hp-bar, .health-bar, #enemy-hp-container .hp-bar { box-shadow: inset 0 1px 3px rgba(0,0,0,.5) !important; } /* ============================================================ 4) TITRES DE SECTION — dorés, enrichis (le ::after 64px existe déjà en polish-pass → on l'agrandit + halo + on ajoute une lueur au texte) ============================================================ */ .section-luxe-title { text-shadow: 0 2px 12px rgba(255,215,0,.16), 0 1px 2px rgba(0,0,0,.65) !important; letter-spacing: .035em; } .section-luxe-title::after { width: 98px !important; height: 2.5px !important; background: linear-gradient(90deg, transparent, #ffd700 24%, #ff6bd0 58%, #7fe9ff 82%, transparent) !important; box-shadow: 0 0 8px rgba(255,180,60,.45) !important; opacity: .95 !important; } /* ============================================================ 5) CONTOUR D'AVATAR PROPRE — anneau or + halo (profil / header) ============================================================ */ #profile-avatar-frame, #profile-avatar-display, #header-avatar, .mx-profile-avatar, #profile-avatar { box-shadow: 0 0 0 2px rgba(255,215,128,.5), 0 0 0 4px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.5), 0 0 22px -6px rgba(129,236,255,.45) !important; } /* ============================================================ 6) PANNEAU FITNESS (la photo) — cadre premium + cartes d'exo vivantes ============================================================ */ #fitness-quest-panel { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(201,180,255,.12), 0 14px 44px rgba(0,0,0,.6) !important; border-radius: 18px !important; } #fitness-quest-panel div[onclick*="toggleFitnessQuest"] { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 13px rgba(0,0,0,.4) !important; transition: transform .15s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease !important; } #fitness-quest-panel div[onclick*="toggleFitnessQuest"]:active { transform: scale(.98) !important; } /* ============================================================ 7) TUTORIEL — carte + popups plus propres (CSS-in-JS surchargé ici) ============================================================ */ #mx-tutocard, #mx-tuto-pop { box-shadow: 0 24px 70px rgba(0,0,0,.78), 0 0 0 1px rgba(255,215,128,.28), inset 0 1px 0 rgba(255,255,255,.09), 0 0 46px -12px rgba(129,236,255,.5) !important; border-radius: 20px !important; } #mx-tuto-arrow { filter: drop-shadow(0 0 8px rgba(255,215,0,.6)) drop-shadow(0 3px 6px rgba(0,0,0,.5)) !important; } /* ============================================================ 8) MODALES premium (récompense/coffre/quêtes) — ombre + liseré doux ============================================================ */ .mxsl-done, #mx-reward-choice .mxrc-card, .mx-questreward-card, #mx-completion-chest .mxcc-card { box-shadow: 0 26px 74px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.06) !important; } /* ============================================================ 9) PARTICULES AMBIANTES — braises dorées qui montent lentement (couche #mx-ambient-fx créée par js/v101-ambient-particles.js). GPU only (transform/opacity). Exemptées du mode fluidité. Coupées si "réduire les animations". Peu nombreuses → cheap sur mobile. ============================================================ */ #mx-ambient-fx { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } #mx-ambient-fx .mx-mote { position: absolute; bottom: -24px; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, rgba(255,224,150,.95), rgba(255,190,80,.30) 55%, transparent 72%); opacity: 0; animation: mxMoteRise var(--mx-dur, 12s) linear infinite; animation-delay: var(--mx-delay, 0s); } @keyframes mxMoteRise { 0% { transform: translate3d(0,0,0) scale(.55); opacity: 0; } 12% { opacity: .72; } 84% { opacity: .5; } 100% { transform: translate3d(var(--mx-drift, 24px), -104vh, 0) scale(1.05); opacity: 0; } } /* exemption fluidité : les braises DOIVENT boucler même en mode fluide (la durée variée reste lue depuis la custom-prop inline posée par le JS) */ body.mx-fluid #mx-ambient-fx .mx-mote { animation-name: mxMoteRise !important; animation-duration: var(--mx-dur, 12s) !important; animation-delay: var(--mx-delay, 0s) !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; } @media (prefers-reduced-motion: reduce) { #mx-ambient-fx { display: none !important; } } /* ============================================================ PASSE #2 [2026-07-26] — couverture premium de TOUS les onglets (demande user : « comme les photos, super quali, tout tout tout »). Que du box-shadow / ::after gloss / border-radius → additif & sûr. ============================================================ */ /* --- Panneau joueur du haut (accueil) : barre XP glossy + chips ressources + orbe --- */ .psp-xp-bar-bg { box-shadow: inset 0 2px 4px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05) !important; } .psp-xp-bar-fill { position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important; } .psp-xp-bar-fill::after { content: ''; position: absolute; inset: 0 0 52% 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)); pointer-events: none; } .psp-res-chip { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 9px rgba(0,0,0,.4) !important; border-radius: 11px !important; transition: transform .15s ease, box-shadow .18s ease; } .psp-res-chip:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 5px 14px rgba(0,0,0,.5) !important; } .psp-gold .psp-res-num { text-shadow: 0 0 8px rgba(255,215,0,.4); } .psp-gem .psp-res-num { text-shadow: 0 0 8px rgba(129,236,255,.4); } .psp-orb-ring { filter: drop-shadow(0 5px 16px rgba(0,0,0,.55)); } /* --- Boutons de nav (partout) : relief verre au repos + coins nets --- */ .nav-btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.2), 0 3px 10px rgba(0,0,0,.32); border-radius: 12px; } /* --- Réglages : lignes & actions premium --- */ .mx-set-action, .mx-set-row { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 10px rgba(0,0,0,.32) !important; border-radius: 12px !important; } /* --- Onglet Fitness Pass : conteneur + bouton d'amélioration Premium --- */ #battlepass-content { padding-bottom: 6px; } #battlepass-content button[onclick*="upgradeBattlePass"] { box-shadow: 0 6px 22px rgba(170,68,255,.45), inset 0 1px 0 rgba(255,255,255,.2) !important; } /* --- En-têtes d'écran (h2/h3 dans les écrans) : lueur discrète + espacement --- */ .screen h2, .screen h3 { text-shadow: 0 2px 8px rgba(0,0,0,.55); letter-spacing: .02em; } /* --- Panneau de combat VS : cadre doré premium --- */ #combat-vs-screen { box-shadow: inset 0 0 0 1px rgba(255,215,128,.18), 0 12px 36px rgba(0,0,0,.55) !important; border-radius: 16px !important; }