/* Mars page layout and the pieces that are its own. Panels, dialogs, tables and the profile card come from ui.css. */
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#27333f 0%,#1b242e 55%,#131a22 100%)}
main{position:relative;width:100%;height:100%;height:100dvh}
#world{position:relative;display:block;width:100%;height:100%;touch-action:manipulation}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
button{font:inherit}
.fatal{position:fixed;inset:auto 16px 16px;padding:12px 16px;background:#7a1f1f;border-radius:12px;color:#fff}
/* far background: stars (painted by main.mjs) and two dim planets that barely drift */
#sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.planet{position:absolute;aspect-ratio:1;filter:brightness(.72) saturate(.85);opacity:.85;animation:drift 26s ease-in-out infinite alternate}
.p2{width:17vmin;right:7vw;top:24vh;animation-duration:34s;animation-delay:-9s}
.p3{width:8vmin;left:8vw;top:29vh;animation-duration:21s;animation-delay:-4s;opacity:.7}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(1.2vmin,-1.6vmin)}}
@media (prefers-reduced-motion:reduce){.planet{animation:none}}
.meteor{position:absolute;width:150px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(210,230,255,.55) 70%,#fff);transform-origin:right center;opacity:0;filter:drop-shadow(0 0 5px rgba(170,210,255,.9));animation:shoot var(--d) ease-out forwards}
@keyframes shoot{0%{transform:translate(0,0) rotate(var(--a));opacity:0}12%{opacity:1}65%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--a));opacity:0}}
.logo{margin:0 0 6px 2px;width:250px;transform:rotate(-3deg);transform-origin:left center;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}
.logo svg{display:block;width:100%;overflow:visible}
.logo text{stroke-linejoin:round;stroke-linecap:round}
.logo-side{fill:#17121f;stroke:#17121f;stroke-width:17}
.logo-edge{fill:#17121f;stroke:#17121f;stroke-width:17}
/* the face's gradient fill is set in the markup: a url(#id) written in this file would point at style.css, not at the page */

.header-left{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.count-pill{pointer-events:auto;display:flex;align-items:center;gap:8px;margin:0;padding:10px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.count-pill b{color:var(--ink-2)}
.site-links{pointer-events:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chip{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:12px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);color:var(--ink);font:600 13px/1 var(--sans);text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.18);cursor:pointer}
.chip:hover{background:var(--glass-strong)}
.chip .k{font-size:10px;letter-spacing:.14em;color:var(--ink-3)}
.chip code{font:600 12px/1 var(--sans);max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip[hidden]{display:none}

/* Smaller menu than the shared default */
.header-actions{gap:2px;padding:4px;border-radius:14px}
.nav-btn{height:32px;padding:0 10px;gap:6px;border-radius:10px;font-size:12.5px}
.nav-btn svg.i{width:14px;height:14px}
.nav-btn b{font-size:11px;padding:4px 6px;border-radius:6px}
.nav-spawn::after{left:10px;right:10px;bottom:3px}

.pos{color:var(--up)}.neg{color:var(--down)}
.profit dd.neg{color:var(--down)}

#toast{top:76px}
#credit{position:absolute;z-index:2;right:14px;bottom:6px;margin:0;font:500 10px/1 var(--sans);color:rgba(255,255,255,.55)}

@media (max-width:760px){
  .header-left{align-items:center}
  .logo{margin:0 auto;transform-origin:center;width:170px}
  .chip{height:32px}
  #credit{right:auto;left:12px;bottom:92px}
}