/* Dessins 2D : vaisseaux, planètes, station (télé + téléphones) */
.ship2d { display: block; width: 100%; height: 100%; overflow: visible; }
.ship-flame { transform-box: fill-box; transform-origin: 100% 50%; animation: flame 0.18s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scaleX(0.75); opacity: 0.8; } to { transform: scaleX(1.15); opacity: 1; } }

/* planète : --size = diamètre */
.p2 { --size: 300px; position: relative; width: var(--size); height: var(--size); flex: none; }
.p2-ball { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 2;
  box-shadow: 0 0 calc(var(--size) * 0.08) var(--atmo), 0 0 calc(var(--size) * 0.12) var(--glow); }
.p2-surf { position: absolute; left: 0; top: 0; width: 200%; height: 100%; background-size: 50% 100% !important; background-repeat: repeat-x !important;
  animation: p2-spin var(--spin, 90s) linear infinite; will-change: transform; }
@keyframes p2-spin { to { transform: translateX(-50%); } }
.p2-spot { position: absolute; left: 30%; top: 58%; width: 9%; height: 6%; border-radius: 50%; filter: blur(1px); opacity: 0.85; }
/* ombre : lumière en haut à gauche, terminateur en bas à droite */
.p2-shade { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 26% 24%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.9) 78%, #000 92%);
  box-shadow: inset -6px -6px 18px rgba(0, 0, 0, 0.5); }
.p2-ring { position: absolute; left: -62%; top: -62%; width: 224%; height: 224%; overflow: visible; pointer-events: none; transform: rotate(-16deg); }
.p2-ring.back { z-index: 1; filter: brightness(0.6); }
.p2-ring.front { z-index: 3; }
.p2.big .p2-ring { left: -75%; top: -75%; width: 250%; height: 250%; }

/* station */
.station2d { display: block; width: 100%; height: 100%; }
.st-light { animation: st-blink 1.6s steps(2) infinite; }
.st-light.b { animation-delay: 0.8s; }
@keyframes st-blink { 50% { opacity: 0.15; } }
.ship-flame.down { transform-origin: 50% 0; }
.ship-light { animation: st-blink 1.2s steps(2) infinite; }
.ship2d { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }

/* vaisseaux (images) */
.ship-img { position: relative; width: 100%; height: 100%; filter: none; }
.ship-img img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.ship-flame2 { position: absolute; z-index: 0; right: 88%; top: 50%; width: 34%; height: 26%; translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(ellipse at 100% 50%, #fff 0%, var(--c) 30%, transparent 72%); filter: blur(1px); transform-origin: 100% 50%; animation: flame 0.16s ease-in-out infinite alternate; }
.boosting .ship-flame2, .ship-img.boost .ship-flame2 { width: 70%; height: 34%; }

/* planètes BD (images) : la boule garde la taille prévue, les anneaux débordent */
.p2.p2img { position: relative; overflow: visible; background: none !important; box-shadow: none !important; }
.p2.p2img img { position: absolute; left: 50%; top: 50%; width: calc(var(--k, 1) * 100%); height: auto; transform: translate(-50%, -50%); pointer-events: none; user-select: none; }
.p2.p2img::before, .p2.p2img::after { display: none !important; }

/* vaisseau : boîte aux proportions de l'image, centrée ; flammes posées sur chaque réacteur */
.ship-img { display: flex; align-items: center; justify-content: center; }
.ship-img .si-box { position: relative; flex: none; width: 100%; aspect-ratio: var(--ar); }
.ship-img .si-box img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: fill !important; z-index: 1; }
.ship-img .ship-flame2 { right: auto !important; translate: none !important; position: absolute; z-index: 0; width: 26%; height: calc(var(--fh) * 0.9);
  transform: translate(-96%, -50%); transform-origin: 100% 50%; margin: 0; }
.boosting .ship-img .ship-flame2, .ship-img.boost .ship-flame2 { width: 50%; }
.ship-img .ship-flame2 { animation: si-flame 0.16s ease-in-out infinite alternate !important; }
@keyframes si-flame { from { transform: translate(-96%, -50%) scaleX(0.75); opacity: 0.8; } to { transform: translate(-96%, -50%) scaleX(1.15); opacity: 1; } }
