/* F4IOZ — Jeux: the orbital mechanics games, « Mise en orbite » (.mo-…) and « L'empreinte » (.em-…), on the
   satellite games' arena (jeux.css: .dx-…, .jsat-…, .pa-…). Their own pictures and commands only. */

/* ------------------------------------------------------------ « Mise en orbite » */
/* The scene: space is dark whatever the theme (the flight is drawn on it). */
.mo-scene { position: relative; height: clamp(340px, 60vh, 640px); border-radius: var(--r-l); overflow: hidden; background: #02040c;
  border: 1px solid color-mix(in srgb, var(--info) 35%, var(--border)); box-shadow: inset 0 0 40px rgba(0, 0, 0, .6); }
.mo-scene canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.mo-scene.secoue { animation: jsat-secoue .4s; }
.mo-tableau { position: absolute; left: 10px; top: 10px; margin: 0; display: grid; gap: 2px; padding: 6px 10px; border-radius: var(--r-m); pointer-events: none;
  background: rgba(4, 10, 24, .62); border: 1px solid rgba(120, 170, 255, .25); color: #e8f0ff; font-size: 12.5px; backdrop-filter: blur(3px); }
.mo-tableau:empty { display: none; }
.mo-tableau div { display: flex; justify-content: space-between; gap: 14px; }
.mo-tableau dt { color: #9fb4d8; }
.mo-tableau dd { margin: 0; font-weight: 700; color: #fff; }
.mo-phase { position: absolute; left: 12px; right: 36px; bottom: 12px; width: fit-content; margin: 0 auto; padding: 6px 14px; border-radius: 999px; text-align: center;
  font-size: 13.5px; font-weight: 600; color: #fff; background: rgba(4, 10, 24, .7); border: 1px solid rgba(255, 209, 102, .55); }
.mo-phase:empty { display: none; }
/* The tanks: a gauge on the right, amber when low. */
.mo-reservoir { position: absolute; right: 12px; top: 12px; bottom: 56px; width: 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25);
  display: flex; align-items: flex-end; overflow: hidden; }
.mo-reservoir i { display: block; width: 100%; height: 100%; border-radius: 999px; background: linear-gradient(0deg, #5BD68A, #3FE0C8 60%, #6F8CFF); transition: height .2s; }
.mo-reservoir.bas i { background: linear-gradient(0deg, #E5484D, #FFB454); }
.mo-commandes { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: stretch; }
.mo-curseurs { flex: 1 1 280px; display: grid; gap: 8px; min-width: 0; }
.mo-curseurs[hidden] { display: none; }
.mo-curseur { display: grid; gap: 2px; padding: 6px 10px; border-radius: var(--r-m); background: var(--well); border: 1px solid var(--border); }
.mo-curseur > span { font-size: 13.5px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.mo-curseur b { color: var(--amber); font-size: 15px; }
.mo-curseur input { width: 100%; height: 30px; accent-color: var(--amber); }
.mo-curseur small { display: flex; justify-content: space-between; color: var(--text-dim); font-size: 11.5px; }
.mo-boutons { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.btn.mo-gros { flex: 1 1 160px; min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 0; font-size: 22px; font-weight: 900; letter-spacing: .06em;
  background: linear-gradient(135deg, #ff7a3c, #ffb547); border-color: #ff9a45; color: #241000; box-shadow: 0 6px 18px rgba(255, 122, 60, .35); touch-action: none; user-select: none; -webkit-user-select: none; }
.btn.mo-gros small { font-size: 11.5px; font-weight: 600; letter-spacing: 0; opacity: .85; }
.btn.mo-gros:active { transform: scale(.97); }
.btn.mo-gros[hidden] { display: none; }
.btn.mo-coupe { background: linear-gradient(135deg, #E5484D, #ff7a7f); border-color: #E5484D; color: #fff; box-shadow: 0 6px 18px rgba(229, 72, 77, .35); }
.btn.mo-pousse { background: linear-gradient(135deg, #6F8CFF, #3FE0C8); border-color: #6F8CFF; color: #04121c; box-shadow: 0 6px 18px rgba(111, 140, 255, .35); }
.btn.mo-pousse.allume { background: linear-gradient(135deg, #ffd166, #ff7a3c); border-color: #ffb547; color: #241000; box-shadow: 0 0 24px rgba(255, 181, 71, .7); animation: mo-vibre .12s infinite alternate; }
.mo-valide { align-self: center; }
@keyframes mo-vibre { from { transform: translate(-1px, 0); } to { transform: translate(1px, 0); } }
/* A try's end, under the scene. */
.mo-bilan { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.mo-bilan h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; font-size: 19px; }
.mo-bilan h2 small { color: var(--amber); font-size: 15px; }
.mo-bilan p { margin: 6px 0; color: var(--text-dim); line-height: 1.5; }
.mo-bilan .pa-note { font-size: 12px; }
.mo-chiffres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.mo-chiffres li { display: flex; flex-direction: column; padding: 6px 10px; border-radius: var(--r-m); background: var(--well); border: 1px solid var(--border); }
.mo-chiffres span { font-size: 11.5px; color: var(--text-dim); }
.mo-chiffres b { font-size: 16px; }
.mo-essais li b { font-size: 12px; color: var(--amber); }
/* The pictures. */
.mo-il-cible { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 3 6; }
.mo-il-fusee { transform: translate(108px, 104px) rotate(18deg); }
.mo-il-corps { fill: var(--text); } .mo-il-aileron { fill: var(--red); } .mo-il-flamme { fill: var(--amber); transform-box: fill-box; transform-origin: 50% 0; animation: mo-flamme .18s infinite alternate; }
@keyframes mo-flamme { from { transform: scaleY(.8); } to { transform: scaleY(1.15); } }

/* ------------------------------------------------------------ « L'empreinte » */
.em-scene canvas { touch-action: none; cursor: crosshair; }
.em-scene .pa-phase { left: 10px; right: 10px; width: fit-content; max-width: none; margin: 0 auto; transform: none; }
@media (max-width: 560px) { .em-scene .pa-phase { font-size: 12.5px; padding: 4px 10px; bottom: 8px; left: 60px; } }
.em-outils { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.em-outils[hidden] { display: none; }
.btn.em-outil { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.btn.em-outil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn.em-outil[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #241000; font-weight: 700; box-shadow: 0 0 12px color-mix(in srgb, var(--amber) 45%, transparent); }
.em-taille { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); flex: 1 1 140px; max-width: 240px; }
.em-taille input { flex: 1; min-width: 60px; accent-color: var(--amber); }
.em-qso { display: flex; gap: 10px; }
.em-qso[hidden] { display: none; }
.btn.em-oui { background: linear-gradient(135deg, #5BD68A, #3FE0C8); border-color: #5BD68A; color: #04200f; box-shadow: 0 6px 18px rgba(91, 214, 138, .35); }
.btn.em-non { background: linear-gradient(135deg, #E5484D, #ff7a7f); border-color: #E5484D; color: #fff; box-shadow: 0 6px 18px rgba(229, 72, 77, .35); }
.em-page .pa-bas .btn.pa-top:disabled { opacity: .5; }
.em-il-peint { fill: color-mix(in srgb, var(--amber) 35%, transparent); stroke: var(--amber); stroke-width: 2; }
.em-il-cone { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 4; fill: none; }

@media (max-width: 560px) {
  .mo-scene { height: 56vh; min-height: 300px; }
  .btn.mo-gros { min-height: 58px; font-size: 19px; }
  .mo-tableau { font-size: 11.5px; padding: 4px 8px; }
  .em-outils .btn.em-outil { flex: 1 1 0; justify-content: center; padding-left: 6px; padding-right: 6px; }
  .em-taille { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-scene.secoue, .btn.mo-pousse.allume, .mo-il-flamme { animation: none; }
  .btn.mo-gros:active { transform: none; }
}