/* ════════════════════════════════════════════════════════════════════ arena.css — fond commun "Arène médiévale fantastique" Style : sol de pierre en perspective, torches qui flickent, lumière chaude de cathédrale, glows mystiques magenta/violet. Appliqué via sur : - duels.html (la page Arène) - tous les jeux marqués `duel_recommended` (express games) ════════════════════════════════════════════════════════════════════ */ body.fv-arena { font-family: system-ui, Arial, sans-serif; color: #f4ead5; min-height: 100vh; position: relative; overflow-x: hidden; /* Gradient de base : ténèbres chaudes, ambiance donjon ─────────────────── */ background: /* Lueur de brasier au sol (centre-bas) */ radial-gradient(ellipse 60% 28% at 50% 100%, rgba(255, 110, 35, 0.28), transparent 60%), /* Gradient principal : noir-cuivre → bordeaux → noir */ linear-gradient(180deg, #1d0a05 0%, #14070a 30%, #0a0405 65%, #050203 100%); } /* ════════════════════════════════════════════════════════════════════ COUCHE 1 — Ciel d'arène : torches latérales + rais de cathédrale Animation flicker pour donner vie aux flammes ════════════════════════════════════════════════════════════════════ */ body.fv-arena::before { content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: /* Rai de lumière dorée descendant du haut (vitrail / oculus) */ conic-gradient(from 195deg at 50% -8%, transparent 0deg, rgba(255, 195, 95, 0.13) 22deg, transparent 50deg, rgba(255, 165, 60, 0.10) 90deg, transparent 125deg, rgba(255, 215, 110, 0.13) 165deg, transparent 200deg ), /* Torche de gauche : flamme orange-ambré */ radial-gradient(ellipse 22% 55% at -2% 35%, rgba(255, 130, 35, 0.34), transparent 55%), /* Torche de droite : flamme orange-ambré */ radial-gradient(ellipse 22% 55% at 102% 35%, rgba(255, 130, 35, 0.34), transparent 55%), /* Halo mystique en haut : violet ésotérique (incantation) */ radial-gradient(ellipse 70% 35% at 50% -10%, rgba(140, 60, 220, 0.22), transparent 65%), /* Aura magenta haut-gauche : magie offensive */ radial-gradient(ellipse 45% 35% at 20% 5%, rgba(220, 70, 160, 0.14), transparent 70%), /* Aura bleu nuit haut-droite : magie de l'arcane */ radial-gradient(ellipse 45% 35% at 80% 5%, rgba(80, 60, 200, 0.14), transparent 70%); animation: fvArenaTorchFlicker 5s ease-in-out infinite; } @keyframes fvArenaTorchFlicker { /* Flicker irrégulier — simule des flammes qui dansent */ 0% { opacity: 0.92; filter: brightness(1) saturate(1); } 18% { opacity: 1; filter: brightness(1.10) saturate(1.08); } 32% { opacity: 0.86; filter: brightness(0.94) saturate(0.96); } 47% { opacity: 0.98; filter: brightness(1.05) saturate(1.05); } 63% { opacity: 0.90; filter: brightness(0.97) saturate(1); } 78% { opacity: 1; filter: brightness(1.08) saturate(1.10); } 92% { opacity: 0.94; filter: brightness(1) saturate(1); } 100% { opacity: 0.92; filter: brightness(1) saturate(1); } } /* ════════════════════════════════════════════════════════════════════ COUCHE 2 — Sol de pierre en perspective Dalles ~100×100 avec joints sombres et alternance de teintes pour imiter une mosaïque de pierre. Légère lueur chaude (reflet du brasier). ════════════════════════════════════════════════════════════════════ */ body.fv-arena::after { content: ''; position: fixed; bottom: -10vh; left: -50%; width: 200%; height: 80vh; z-index: -2; pointer-events: none; transform-origin: bottom center; transform: perspective(900px) rotateX(62deg); background-color: rgba(50, 30, 18, 0.55); background-image: /* Joints horizontaux des dalles */ linear-gradient(rgba(0, 0, 0, 0.55) 2px, transparent 2px), /* Joints verticaux des dalles */ linear-gradient(90deg, rgba(0, 0, 0, 0.55) 2px, transparent 2px), /* Alternance de teintes (effet damier subtil de pierres) */ repeating-linear-gradient( 0deg, rgba(95, 65, 40, 0.18) 0, rgba(95, 65, 40, 0.18) 100px, rgba(70, 45, 25, 0.18) 100px, rgba(70, 45, 25, 0.18) 200px ), repeating-linear-gradient( 90deg, rgba(80, 55, 32, 0.10) 0, rgba(80, 55, 32, 0.10) 100px, rgba(60, 38, 22, 0.10) 100px, rgba(60, 38, 22, 0.10) 200px ); background-size: 100px 100px, 100px 100px, auto, auto; background-position: 0 0; -webkit-mask-image: linear-gradient(to top, black 0%, rgba(0,0,0,0.92) 22%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.20) 80%, transparent 100%); mask-image: linear-gradient(to top, black 0%, rgba(0,0,0,0.92) 22%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.20) 80%, transparent 100%); filter: drop-shadow(0 -8px 30px rgba(255, 130, 35, 0.30)); animation: fvArenaFloorEmber 7s ease-in-out infinite; } @keyframes fvArenaFloorEmber { /* Le sol "respire" comme s'il était illuminé par les braises */ 0%, 100% { filter: drop-shadow(0 -8px 24px rgba(255, 110, 25, 0.22)) brightness(0.96); } 50% { filter: drop-shadow(0 -10px 36px rgba(255, 150, 50, 0.45)) brightness(1.08); } } /* ════════════════════════════════════════════════════════════════════ VIGNETTE — assombrit fortement les bords (ambiance donjon) ════════════════════════════════════════════════════════════════════ */ body.fv-arena .arena-vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 100% 90% at 50% 48%, transparent 38%, rgba(0, 0, 0, 0.65) 100%); } /* ════════════════════════════════════════════════════════════════════ HORIZON — fine ligne d'or qui marque la séparation sol/ciel Élément optionnel :

════════════════════════════════════════════════════════════════════ */ body.fv-arena .arena-horizon { position: fixed; left: 0; right: 0; bottom: 38vh; height: 1px; z-index: -1; pointer-events: none; background: linear-gradient( 90deg, transparent 0%, rgba(255, 200, 90, 0.35) 30%, rgba(255, 240, 180, 0.55) 50%, rgba(255, 200, 90, 0.35) 70%, transparent 100% ); box-shadow: 0 0 24px rgba(255, 160, 40, 0.45), 0 0 48px rgba(255, 110, 25, 0.30); animation: fvArenaHorizonGlow 6s ease-in-out infinite; } @keyframes fvArenaHorizonGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* Padding pour pages avec header fixe (ajout par défaut) ─────────────── */ body.fv-arena.fv-with-header { padding-top: 70px; } /* Accessibilité : respecte la préférence "réduire les animations" ────── */ @media (prefers-reduced-motion: reduce) { body.fv-arena::before, body.fv-arena::after, body.fv-arena .arena-horizon { animation: none; } } /* Optimisation GPU ──────────────────────────────────────────────────── */ body.fv-arena::before, body.fv-arena::after { will-change: opacity, filter; }