/* Eclipse · cenários do campo (arenas.js, 05/10/2026). Copyright (c) Eclipse. Todos os direitos reservados.
   Pintura 3D (Blender) + camada viva em canvas + sombra que protege a leitura das cartas no centro. */
#arena { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background: #07050a; }
body:not([data-screen=game]) #arena { display: none; }
#arena .arenaImg { position: absolute; inset: -3%; background: #07050a center 38% / cover no-repeat; filter: brightness(1.45) saturate(1.2) contrast(1.05); animation: arenaDrift 48s ease-in-out infinite alternate; }
#arena[data-a=catedral] .arenaImg { background-image: url(assets/arenas/catedral.webp); }
#arena[data-a=mare] .arenaImg { background-image: url(assets/arenas/mare.webp); background-position: center 46%; filter: brightness(1.2) saturate(1.15); }
#arena[data-a=bosque] .arenaImg { background-image: url(assets/arenas/bosque.webp); filter: brightness(1.7) saturate(1.3) contrast(1.08); }
#arena .arenaFx { position: absolute; inset: 0; width: 100%; height: 100%; }
#arena .arenaFlash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 80% 60% at 50% 30%, #ffd9d0, #ff6a5a55 50%, transparent 80%); mix-blend-mode: screen; }
/* sombra: escurece o meio (onde ficam as cartas) e as bordas; cada cenário com sua cor */
#arena .arenaShade { position: absolute; inset: 0;
  background: radial-gradient(ellipse 34% 46% at 50% 52%, rgba(6, 4, 9, .45), rgba(6, 4, 9, .12) 75%, transparent 100%),
              linear-gradient(180deg, rgba(5, 3, 8, .4), transparent 18%, transparent 78%, rgba(5, 3, 8, .6)),
              radial-gradient(ellipse 130% 100% at 50% 45%, transparent 62%, rgba(3, 2, 5, .6)); }
#arena[data-a=mare] .arenaShade { background-color: rgba(30, 0, 4, .12); }
#arena[data-a=bosque] .arenaShade { background-color: rgba(0, 18, 16, .12); }
/* tela de fundo: o céu antigo em CSS some quando há cenário */
body[data-arena][data-screen=game]::before, body[data-arena][data-screen=game]::after { display: none; }
/* nome do cenário: aparece no começo do duelo, embaixo à esquerda, e some */
#arena .arenaName { position: absolute; left: 22px; bottom: 16px; margin: 0; opacity: 0; font: 600 12px/1 'Spline Sans Mono', ui-monospace, monospace; letter-spacing: .28em; text-transform: uppercase; color: #e8c98b; text-shadow: 0 2px 8px #000; }
#arena .arenaName::before { content: 'CAMPO · '; color: #9f8dab; }
#arena .arenaName.show { animation: arenaName 4.2s ease forwards; }
@keyframes arenaName { 0% { opacity: 0; translate: -8px 0; } 15%, 75% { opacity: .9; translate: 0 0; } 100% { opacity: 0; } }
@keyframes arenaDrift { from { transform: scale(1.02) translate(-.6%, .3%); } to { transform: scale(1.07) translate(.6%, -.4%); } }
@media (prefers-reduced-motion: reduce) { #arena .arenaImg { animation: none; } }
.reduced #arena .arenaImg, html.lite #arena .arenaImg, html.away #arena .arenaImg { animation: none; }