/* The real planet around the colony. Same cards, line and mint accent as the rest of ARES. */
#mars-planet { position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; display:block; }
#mars-planet[hidden] { display:none; }
body.mars-orbit #mars-planet { pointer-events:auto; touch-action:none; cursor:grab; }
body.mars-orbit #mars-planet:active { cursor:grabbing; }
body.mars .mars-planet-places { position:fixed; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
body.mars .mars-planet-place { position:absolute; left:0; top:0; padding:1px 7px 2px; border-radius:7px; background:rgba(19,33,41,.72); color:var(--ink); font-size:12px; font-weight:600; white-space:nowrap; will-change:transform; }
body.mars .mars-planet-place.is-moon { background:none; color:#a3e8df; padding:0; font-weight:650; }
body.mars .mars-planet-place[hidden],body.mars .mars-planet-pin[hidden],body.mars .mars-planet-legend[hidden] { display:none; }
body.mars .mars-planet-pin { position:fixed; left:0; top:0; z-index:3; display:flex; align-items:center; gap:8px; margin:-8px 0 0 -8px; padding:0; background:none; border:0; color:var(--ink); text-align:left; cursor:pointer; touch-action:manipulation; will-change:transform; }
body.mars .mars-planet-pin i { position:relative; flex:none; display:block; width:16px; height:16px; border-radius:50%; background:#112c32; border:2px solid #a3e8df; }
body.mars .mars-planet-pin i::before { content:""; position:absolute; inset:3px; border-radius:50%; background:#a3e8df; }
body.mars .mars-planet-pin i::after { content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid #a3e8df; animation:mars-planet-ping 2.8s ease-out infinite; }
@keyframes mars-planet-ping { from { transform:scale(1); opacity:.8; } 70%,to { transform:scale(3); opacity:0; } }
body.mars .mars-planet-pin span { display:block; padding:5px 11px 6px; border-radius:10px; background:var(--paper); border:1px solid var(--line); }
body.mars .mars-planet-pin:hover span { background:#29454e; }
body.mars .mars-planet-pin:focus-visible { outline:none; }
body.mars .mars-planet-pin:focus-visible span { outline:2px solid #a3e8df; outline-offset:2px; }
body.mars .mars-planet-pin b { display:block; font-size:13.5px; font-weight:650; line-height:1.2; }
body.mars .mars-planet-pin small { display:block; font-size:12px; line-height:1.25; color:var(--ink-soft); white-space:nowrap; }
body.mars .mars-planet-legend { position:fixed; box-sizing:border-box; left:26px; bottom:calc(28px + env(safe-area-inset-bottom,0px)); z-index:4; max-width:290px; padding:8px 12px 9px; border-radius:14px; background:var(--paper); border:1px solid var(--line); color:var(--ink); pointer-events:none; box-shadow:0 12px 32px -16px #06131d; }
body.mars .mars-planet-legend div { display:flex; flex-direction:column; gap:3px; font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; }
body.mars .mars-planet-legend i { display:block; height:6px; border:1.5px solid var(--ink); border-top:0; }
body.mars .mars-planet-legend p { margin:5px 0 0; font-size:11.5px; line-height:1.3; color:var(--ink-soft); }
body.mars.mars-orbit .mars-map-note,body.mars.mars-orbit #lmap,body.mars.mars-orbit #mapb { display:none; }
body.mars.in-menu .mars-planet-legend,body.mars.in-load .mars-planet-legend { display:none; }
@media (max-width:820px) {
  body.mars .mars-planet-legend { left:16px; bottom:calc(142px + env(safe-area-inset-bottom,0px)); max-width:min(290px,calc(100vw - 92px)); }
}
@media (prefers-reduced-motion:reduce) {
  body.mars .mars-planet-pin i::after { animation:none; opacity:0; }
}