/* app/decor/holo.css — décor « Arène néon » (app/decor/holo.js). Le sol, les blocs et les
   lumières sont dessinés sur Canvas (app/decor/peinture.js) ; ici : les couches, ce qui tourne
   (pales, anneaux) et l'orbe (nid), aux couleurs de la palette tirée (classe variante-<nom>). */

.terrain.decor-holo{background:#07060f;--n1:#7fd2ff;--n2:#9a8cff;}
.terrain.variante-braise{background:#0d0605;--n1:#ff5a1e;--n2:#ffbe3c;}
.terrain.variante-toxique{background:#040b06;--n1:#78ff3c;--n2:#00ffaa;}
.terrain.variante-glace{background:#050913;--n1:#78d2ff;--n2:#e6f5ff;}
.terrain.variante-or{background:#0b0614;--n1:#ffc83c;--n2:#ff8214;}
.terrain.variante-ocean{background:#030d16;--n1:#00ffc8;--n2:#0096ff;}

/* Les couches : le sol, puis les blocs (leur canevas remplit le bloc ; les trous des tirs le
   découpent avec lui), puis les lumières par-dessus (sans mode de fusion : trop coûteux sur
   téléphone, les halos sont déjà additionnés dans le canevas). */
.terrain-sol,.terrain-lumieres{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.terrain-sol[hidden]{display:none;}
.terrain-accessoires{position:absolute;inset:0;pointer-events:none;}

.bloc-peint{position:absolute;inset:0;width:100%;height:100%;}

/* Pales des ventilateurs et anneaux des réacteurs (vitesse et sens posés par holo.js). */
.holo-tourne{position:absolute;animation:holoTourne 3s linear infinite;}
@keyframes holoTourne{to{rotate:1turn;}}

/* Nid : orbe d'énergie (il tremble juste avant qu'une bestiole en jaillisse). Sa lueur qui
   palpite est peinte dans la couche des lumières (holo.js) : aucune animation CSS par orbe, donc
   aucune couche de plus à composer à chaque image. */
.nid-orbe{
 position:absolute;z-index:1;
 width:calc(18px * var(--z));height:calc(18px * var(--z));
 margin:calc(-9px * var(--z)) 0 0 calc(-9px * var(--z));
 border-radius:50%;
 background:radial-gradient(circle at 40% 35%,#fff 0 18%,var(--n2) 38%,var(--n1) 62%,rgba(0,0,0,.6) 100%);
 box-shadow:0 0 calc(8px * var(--z)) var(--n1),0 0 0 calc(2px * var(--z)) rgba(255,255,255,.18);
}
@media (prefers-reduced-motion:reduce){.holo-tourne{animation:none;}}
/* Mode économie (app/decor/peinture.js) : plus rien ne bouge dans le décor. */
html.econome .holo-tourne{animation:none;}