/* projectile_motion.css — the launch scene for viz/projectile_motion.js (pure DOM). */

.pj { display: flex; flex-direction: column; gap: 0.85rem; }
.pj-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 230px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem;
  background: radial-gradient(120% 90% at 18% 8%, rgba(56, 130, 246, 0.22), transparent 60%), linear-gradient(180deg, #0b1424, #070b13);
}
.pj-ground { position: absolute; left: 0; right: 0; top: 90%; bottom: 0; background: linear-gradient(180deg, rgba(52, 211, 153, 0.18), rgba(52, 211, 153, 0.04)); border-top: 1.5px solid rgba(110, 231, 183, 0.55); }
.pj-axis { position: absolute; left: 0; right: 0; top: 90%; height: 1.2rem; pointer-events: none; }
.pj-tick { position: absolute; top: 0; width: 1px; height: 5px; background: rgba(203, 213, 225, 0.4); transform: translateX(-0.5px); }
.pj-ticklab { position: absolute; top: 5px; font-size: 8px; color: #7f93a8; transform: translateX(-50%); }
.pj-axisunit { position: absolute; right: 4px; top: 5px; font-size: 8px; color: #6b8097; font-style: italic; }

.pj-cannon { position: absolute; left: 7%; top: 90%; width: 8%; height: 4px; transform-origin: 6% 50%; transform: translate(-1px, -50%) rotate(-45deg); }
.pj-cannon i { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, #475569, #94a3b8); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.pj-cannon::after { content: ""; position: absolute; left: -3px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #334155; border: 1.5px solid #64748b; transform: translate(-50%, -50%); }

.pj-ball { position: absolute; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 3;
  background: radial-gradient(circle at 34% 30%, #fde68a, #f59e0b 60%, #b45309); box-shadow: 0 0 8px rgba(245, 158, 11, 0.65); }

.pj-trail { position: absolute; inset: 0; pointer-events: none; }
.pj-pre { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(148, 163, 184, 0.4); transform: translate(-50%, -50%); }
.pj-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(251, 191, 36, 0.8); transform: translate(-50%, -50%); }

.pj-apex { position: absolute; transform: translate(-50%, -135%); font-size: 9px; font-weight: 700; color: #a7f3d0; padding: 1px 4px; border-radius: 4px; background: rgba(6, 12, 20, 0.7); white-space: nowrap; }
.pj-apexline { position: absolute; width: 0; border-left: 1px dashed rgba(167, 243, 208, 0.5); transform: translateX(-0.5px); }
.pj-land { position: absolute; top: 90%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(251, 113, 133, 0.85); box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.2); }

.pj-phase { position: absolute; left: 8px; bottom: 6px; font-size: 0.78rem; font-weight: 600; color: #aebdce; background: rgba(6, 10, 18, 0.6); padding: 2px 7px; border-radius: 5px; }

.pj-planets { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.pj-plabel { font-size: 0.85rem; color: #9fb0c3; font-weight: 600; margin-right: 0.2rem; }
.pj-planet { cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600; color: #cbd5e1; padding: 0.28rem 0.7rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.12s ease; }
.pj-planet:hover { background: rgba(255, 255, 255, 0.09); }
.pj-planet.pj-on { color: #07121d; background: #38bdf8; border-color: #38bdf8; }