/* ARES / first settlement. Presentation only; the simulation keeps its IDs. */
:root {
  --land:#ad624b;
  --paper:rgba(19,33,41,.93);
  --paper-solid:#14252e;
  --paper-2:#213842;
  --ink:#ecf2ef;
  --ink-soft:#a2b8bc;
  --barn:#f39c78;
  --meadow:#84d9c4;
  --line:rgba(160,217,217,.19);
  --display:'Segoe UI Variable Display','Segoe UI',system-ui,sans-serif;
  --body:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  --mars-cyan:#a3e8df;
  --mars-coral:#f6a281;
  color-scheme:dark;
}
body.mars { font-weight:500; font-size:14px; }
body.mars .tilt { display:none; }
body.mars #grain { display:none; }
body.mars #vig { background:radial-gradient(ellipse at 50% 45%,transparent 62%,rgba(35,25,30,.26) 100%); }
body.mars button,body.mars input,body.mars select,body.mars textarea { font-family:var(--body); }
body.mars button { transition:background .16s,border-color .16s,transform .16s; }
body.mars button:focus-visible,body.mars a:focus-visible,body.mars input:focus-visible,body.mars select:focus-visible {
  outline:2px solid var(--mars-cyan); outline-offset:3px;
}
body.mars :disabled { cursor:not-allowed; }
body.mars .card,body.mars .dlg .box,body.mars .wcard,body.mars .sl {
  background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 32px -16px rgba(6,13,19,.55),inset 0 1px 0 rgba(209,246,236,.04);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
/* These panels sit over the moving canvas even when no menu is open. */
body.mars #hud .card,body.mars #lpill,body.mars #lfind,body.mars #lmap {
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
body.mars #hud { top:calc(17px + env(safe-area-inset-top,0px)); padding-top:0; }
body.mars .hudC { gap:9px; }
body.mars .stat { min-width:274px; padding:11px 22px 12px; border-top:2px solid rgba(163,232,223,.75); }
body.mars .brand { font-size:10px; font-weight:700; letter-spacing:.22em; color:var(--mars-cyan); margin-bottom:4px; }
body.mars .statrow { gap:16px; }
body.mars .clock { font-size:12px; font-weight:600; line-height:1.5; }
body.mars .clock .wx { color:var(--ink); }
body.mars .clock svg { opacity:.9; }
body.mars .money { font-size:23px; font-weight:650; }
body.mars .coin { background:linear-gradient(135deg,#f9d7aa,#e8996c); width:12px; height:12px; border-radius:3px; transform:rotate(45deg); }
body.mars .hudrow { gap:5px; }
body.mars .hbtns { gap:5px; }
body.mars .hudrow .iconbtn { width:39px; height:39px; border-radius:11px; color:#d3e4e4; }
body.mars .hudrow .iconbtn:hover,body.mars .lx:hover { background:#29454e; color:#b9f4e9; }
body.mars .iconbtn svg { width:18px; height:18px; }
body.mars .seg button.on,body.mars .mtabs button.on,body.mars .pfil button.on {
  background:var(--mars-cyan); color:#163439;
}
body.mars .seg button { border-radius:8px; }
body.mars #lpill { top:calc(20px + env(safe-area-inset-top,0px)); left:24px; padding:12px 15px; border:1px solid var(--line); font-size:11px; letter-spacing:.14em; border-radius:12px; }
body.mars #lpill .dot { width:7px; height:7px; background:var(--mars-coral); animation:none; box-shadow:0 0 0 4px rgba(246,162,129,.11); }
body.mars #lpill #lres { font-size:12px; font-weight:600; color:#d1dedc; }
body.mars #lcoord { top:calc(74px + env(safe-area-inset-top,0px)); left:24px; color:#dbcbc3; background:rgba(35,33,35,.58); border:1px solid rgba(255,225,205,.14); padding:6px 10px; font-size:10px; font-weight:600; letter-spacing:.12em; }
body.mars #lpeople { left:24px; top:calc(78px + env(safe-area-inset-top,0px)); }
body.mars #lfind { width:min(510px,calc(100% - 32px)); bottom:calc(24px + env(safe-area-inset-bottom,0px)); padding:9px 9px 9px 18px; border-radius:15px; }
body.mars #lfind input { font-size:14px; font-weight:500; letter-spacing:.01em; background:transparent!important; border:0!important; }
body.mars #lfind input::placeholder { color:#a9bdbe; opacity:1; }
body.mars #lfind .lbtn { min-width:86px; height:40px; }
body.mars #lsugg { background:var(--paper-solid); border-radius:13px; }
body.mars #lcard { top:calc(150px + env(safe-area-inset-top,0px)); right:24px; max-height:calc(100vh - 252px); padding:20px; background:rgba(18,34,43,.97); }
body.mars .ln,body.mars .dlg h3 { font-weight:650; }
body.mars .ln { font-size:20px; letter-spacing:-.02em; }
body.mars .lr { padding:10px 0; font-size:13px; }
body.mars .lr b { font-weight:600; }
body.mars .lr span,body.mars .lnote,body.mars .ls { font-weight:500; }
body.mars .lr a,body.mars .lneigh a,body.mars .lb a,body.mars a[data-r],body.mars a[data-hn] { color:var(--mars-cyan); }
body.mars .lbtn,body.mars .btn.go { background:var(--mars-cyan); color:#112c32; border:1px solid transparent; border-radius:9px; font-weight:650; }
body.mars .lbtn:hover,body.mars .btn.go:hover { background:#c4fff1; }
body.mars .lbtn.ghost,body.mars .btn.ghost,body.mars .chip,body.mars .back {
  background:#223b45; color:#dfedeb; border:1px solid var(--line); border-radius:9px;
}
body.mars .lbtn.ghost:hover,body.mars .btn.ghost:hover { background:#2c4b55; }
body.mars .lbtn.on { background:#7acbb9; color:#12302e; }
body.mars .lform input,body.mars .lform textarea,body.mars .lsel,body.mars .mrow input,
body.mars .mrow select,body.mars .znm input,body.mars #lzone input,body.mars #lpq,
body.mars #lpin,body.mars #lkey,body.mars #lnames,body.mars .pnl input,
body.mars .dlg input,body.mars .dlg select,body.mars .dlg textarea {
  background:#0e2028; border:1px solid rgba(163,232,223,.25); color:var(--ink); border-radius:9px;
}
body.mars input::placeholder,body.mars textarea::placeholder { color:#90abad; }
body.mars .pic { background:#243d45; color:#abc4c8; }
body.mars .pic.on { background:#285349; color:#b1ead3; }
body.mars .chip2 { font-weight:600; }
body.mars .lmsg,body.mars #lpend { color:#91d4be; }
body.mars .fold { border-color:var(--line); }
body.mars .fold summary { color:var(--ink); }
body.mars .dlg { background:rgba(5,14,21,.5); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
body.mars .dlg p,body.mars .wcard .desc { color:#a9bec2; }
body.mars #lmap { background:var(--paper-solid); border-color:var(--line); border-radius:14px; box-shadow:0 12px 32px -16px #06131d; }
body.mars #lmap .mlg { font-size:10px; font-weight:500; color:var(--ink-soft); }
body.mars #lmap .mt,body.mars #lmap button { background:var(--paper-solid); color:var(--ink); }
body.mars #lmap canvas { border-radius:8px; }
body.mars #hint { color:#c2d4d5; background:rgba(17,34,43,.9); border-radius:8px; font-size:11px; font-weight:500; }
body.mars #dock { bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
body.mars .dockcard { padding:10px; gap:10px; }
body.mars .cats,body.mars .sidecol .tool.util { background:#1b3039; }
body.mars .tool { background:#223942; border-radius:9px; }
body.mars .tool:hover { background:#2c4851; }
body.mars .tool.on { border-color:var(--mars-cyan); background:#2a484f; }
body.mars .tool .nm { font-size:11px; font-weight:600; }
body.mars .tool .cs { font-size:10px; font-weight:500; }
body.mars .subs button.on { color:var(--mars-cyan); background:#2a414b; border-color:var(--line); }
body.mars .subs button,body.mars .cats button { font-weight:600; }
body.mars .tool .leaf { background:#1f4941; box-shadow:none; }
body.mars .wxgrid button { background:#20363f; }
body.mars .wxgrid button.on { border-color:var(--mars-cyan); background:#29474d; }
body.mars #toast { color:#dcf8ee; background:#193b43; border:1px solid var(--line); box-shadow:0 8px 24px -10px #06131d; }
body.mars #scr-menu,body.mars #scr-build { background:linear-gradient(0deg,rgba(10,24,32,.98),rgba(15,29,37,.68) 37%,rgba(21,28,35,.08) 77%)!important; }
body.mars #scr-menu .menu-col,body.mars #scr-build .menu-col { width:min(430px,100%); gap:20px; }
body.mars .logo .mark { width:70px; height:70px; margin-bottom:9px; filter:none; }
body.mars .logo h1,body.mars #scr-build .logo h1 { font-weight:600; font-size:clamp(54px,8vw,76px); letter-spacing:.15em; line-height:1.1; text-shadow:none!important; }
body.mars .logo p { max-width:340px; font-size:13px; font-weight:500; letter-spacing:.03em; color:#b7c8ca!important; }
body.mars .logo .mars-eyebrow { color:var(--mars-coral); font-size:10px; text-transform:uppercase; letter-spacing:.22em; margin-bottom:-2px; }
body.mars .mb { border:1px solid var(--line); border-radius:12px; padding:15px 20px; background:rgba(23,44,54,.96); box-shadow:none; }
body.mars .mb:hover { background:#294753; }
body.mars .mb .t { font-size:17px; font-weight:600; }
body.mars .mb .s { font-size:11px; font-weight:500; margin-top:2px; color:#a4bbc0; }
body.mars .mb.primary { background:#a5e3d6; border-color:#c1f3e6; }
body.mars .mb.primary .t { color:#16373a; }
body.mars .mb.primary .s { color:#345d60; }
body.mars .mb.primary:hover { background:#c1f5e8; }
body.mars .panel { background:rgba(15,30,39,.94); }
body.mars .wcard .badge { background:#183942; color:#cee9e5; }
body.mars .wcard .badge.real { background:#9ed7ce; color:#163b40; }
body.mars .wcard h3,body.mars .phead h2 { font-weight:600; }
body.mars #scr-load { background:radial-gradient(ellipse at 50% 37%,#293a42,#10232d 65%); gap:24px; }
body.mars #scr-load .diorama { display:none; }
body.mars #scr-load .mars-loader { width:160px; height:160px; margin-bottom:20px; position:relative; }
body.mars .mars-loader::before,body.mars .mars-loader::after { content:''; position:absolute; border-radius:50%; }
body.mars .mars-loader::before { inset:27px; background:radial-gradient(circle at 32% 27%,#ffc292,#d1805d 40%,#9c5547 68%,#573d42); box-shadow:inset -10px -10px 16px #402f3b55,0 0 45px #e7955c25; }
body.mars .mars-loader::after { inset:0; border:1px solid #a4d8d52a; border-top-color:#a4e9df; transform:rotate(-25deg); animation:mars-orbit 10s linear infinite; }
body.mars .ltitle { font-size:29px; font-weight:600; letter-spacing:.12em; }
body.mars #scr-load .lsub { font-size:13px; color:#aec5c8; font-weight:500; margin:0; }
body.mars .lbar { width:min(260px,74vw); height:3px; background:#314650; }
body.mars .lbar i { background:linear-gradient(90deg,#efb78e,#a3e8df); }
body.mars .ltip { color:#8fadb4; font-weight:400; font-size:12px; }
body.mars .mars-signature { position:fixed; top:23px; right:26px; z-index:5; pointer-events:none; display:flex; align-items:center; gap:11px; color:#f7ede4; text-shadow:0 1px 8px #432e2b66; }
body.mars .mars-signature svg { width:35px; height:35px; }
body.mars .mars-signature b { display:block; font-size:18px; font-weight:600; letter-spacing:.25em; }
body.mars .mars-signature small { display:block; font-size:8px; letter-spacing:.17em; margin-top:4px; color:#f1d7c8; }
body.mars .mars-nav { position:fixed; z-index:6; right:24px; bottom:calc(120px + env(safe-area-inset-bottom,0px)); display:grid; gap:7px; }
body.mars .mars-nav button { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:rgba(19,36,45,.94); border:1px solid var(--line); color:#cee5e2; box-shadow:0 7px 22px -12px #06131d; }
body.mars .mars-nav button:hover { color:#d4fff3; background:#2d4b56; }
body.mars .mars-nav button svg { width:18px; height:18px; }
body.mars .mars-nav button[data-mars-home] { margin-top:5px; }
body.mars .mars-sectors { position:absolute; bottom:0; right:51px; width:216px; max-height:min(65vh,470px); overflow-y:auto; padding:8px; border-radius:12px; background:rgba(18,34,43,.98); border:1px solid var(--line); box-shadow:0 12px 32px -16px #06131d; }
body.mars .mars-arrival-toast { position:fixed; z-index:18; top:150px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px; width:max-content; max-width:calc(100vw - 32px); box-sizing:border-box; padding:17px 18px; border:1px solid #8acbc180; border-radius:17px; background:rgba(19,36,45,.97); color:#e8f4ed; box-shadow:0 15px 55px #12232f50; }
body.mars .mars-arrival-toast[hidden] { display:none; }
body.mars:has(.mars-arrival-toast:not([hidden])) #legg { visibility:hidden; }
body.mars .mars-arrival-toast b { font-size:16px; }
body.mars .mars-arrival-toast p { color:#a8c7c5; font-size:11px; margin:5px 0 0; }
body.mars .mars-arrival-icon { display:grid; place-items:center; font-size:28px; color:#b0efe0; width:40px; height:40px; border-radius:50%; background:#315450; flex-shrink:0; }
body.mars .mars-arrival-toast button { border:0; background:transparent; color:#bad5d2; font-size:22px; padding:5px; }
body.mars .mars-flight-status { position:fixed; left:25px; top:117px; z-index:7; padding:10px 13px; border:1px solid #91c7bd66; border-radius:10px; background:#152a33ef; color:#bdeadd; font-size:11px; box-shadow:0 5px 20px #13252d22; }
body.mars .mars-flight-status[hidden] { display:none; }
body.mars .mars-sectors>span { display:block; color:var(--ink-soft); font-size:9px; letter-spacing:.12em; padding:7px 8px 11px; }
body.mars .mars-sectors button { width:100%; height:auto; padding:12px 8px; display:flex; justify-content:space-between; gap:15px; background:transparent; box-shadow:none; border:0; font-size:12px; border-radius:6px; }
body.mars .mars-sectors small { font-size:10px; color:#f0b391; }
body.mars .mars-sectors .mars-subscriber-jump { background:rgba(163,232,223,.08); border:1px solid rgba(163,232,223,.16); margin-bottom:4px; }
body.mars .mars-sectors .mars-subscriber-jump>span { text-align:left; }
body.mars .mars-sectors em { display:block; font-size:9px; font-style:normal; font-weight:400; color:#a9c8c5; margin-top:4px; }
body.mars .mars-map-note { position:fixed; left:26px; bottom:calc(28px + env(safe-area-inset-bottom,0px)); pointer-events:none; z-index:4; color:#f4dfd1; text-shadow:0 1px 7px #413027; font-size:9px; letter-spacing:.12em; font-weight:500; }
body.mars.in-menu .mars-nav,body.mars.in-load .mars-nav,body.mars.in-menu .mars-signature,body.mars.in-load .mars-signature,
body.mars.in-menu .mars-map-note,body.mars.in-load .mars-map-note,body.mars.builder .mars-map-note { display:none; }
body.mars:has(#lmap:not([hidden])) .mars-map-note { display:none; }
body.mars:has(#lcard:not([hidden])) .mars-nav { right:408px; }
body.mars .gcs,body.mars .gctask,body.mars .gcm,body.mars .luxi,body.mars .rwd,
body.mars .gcempty,body.mars .jrow.cur,body.mars .lifeb button,body.mars .lplot { background:#213842; border-color:var(--line); }
body.mars .gctask.bonus,body.mars .gcs.streak { background:#294248; }
body.mars .gcm.ready,body.mars .luxi.own,body.mars .rwd.today { background:#284941; border-color:#80c2b0; }
body.mars .gchd,body.mars .gct,body.mars .hh { border-color:var(--line); }
body.mars .lnwarn { background:#493b33; color:#f5c4a4; }
body.mars .jfind,body.mars .psrch input,body.mars #lpw input { background:#0e2028; border-color:var(--line); color:var(--ink); }
body.mars .bankc i,body.mars #lpw .lerr { color:#f3ab96; }
body.mars .tfind,body.mars details.fold>summary:hover { color:#b6e9df; }
body.mars .rwbox,body.mars .gcpnl { border:1px solid var(--line); border-radius:16px; }
body.mars .gcstreak,body.mars .hrow.me,body.mars .kp3 .gold { background:#2b4146; }
body.mars .kp3 .gold b,body.mars .rwd.big b,body.mars .gcm small,body.mars .rk-c,body.mars .rwgot { color:#f1c48e; }
body.mars .kp3 i { color:#9adbbf; }
body.mars .rwd.cur { background:#36564f; box-shadow:0 0 0 1px #85c9b9; animation:none; }
body.mars .rwd.big { background:#4b4838; }
body.mars .rwnote { background:#233e4a; color:#bbdce3; }
body.mars .rwst { background:#4a3a34; color:#f0c1a7; }
body.mars .lpi { background:#2d554c; color:#ade9d2; }
body.mars .lpi.b { background:#514834; color:#f5d59d; }
body.mars .pstat.open { background:#484537; color:#f1d6a7; }
body.mars .pic,body.mars .lpi { border-radius:8px; }
body.mars ::-webkit-scrollbar { width:6px; height:6px; }
body.mars ::-webkit-scrollbar-thumb { background:#45616b; border-radius:8px; }
body.mars ::-webkit-scrollbar-track { background:transparent; }
@keyframes mars-orbit { to { transform:rotate(335deg); } }
@media (max-width:1100px) {
  body.mars #lmap { width:180px; top:auto; bottom:calc(144px + env(safe-area-inset-bottom,0px)); left:16px; padding:5px; }
  body.mars #lmap canvas { height:110px; }
  body.mars #lmap .mlg { font-size:8px; gap:3px 7px; padding:4px 2px 1px; }
  body.mars #lmap .mlg i { width:6px; height:6px; margin-right:3px; }
  body.mars #lmap .mz { font-size:9px; height:21px; padding:0 7px; }
  body.mars #lmap .mx { width:22px; height:22px; }
  body.mars .mars-signature { right:18px; }
  body.mars .mars-signature small { display:none; }
  body.mars .mars-signature b { font-size:14px; }
  body.mars .mars-signature svg { width:28px; height:28px; }
  body.mars #lpill { left:16px; }
  body.mars #lcoord { left:16px; }
}
@media (max-width:820px) {
  body.mars .mars-signature { display:none; }
  body.mars #lpill { top:auto; bottom:calc(96px + env(safe-area-inset-bottom,0px)); left:16px; padding:9px 12px; }
  body.mars #lcoord { top:calc(20px + env(safe-area-inset-top,0px)); padding:5px 7px; font-size:9px; }
  body.mars #lpeople { top:auto; bottom:calc(144px + env(safe-area-inset-bottom,0px)); }
  body.mars .mars-map-note { display:none; }
  body.mars #lcard { right:16px; }
}
@media (max-width:640px) {
  body.mars .mars-flight-status { left:16px; top:auto; bottom:136px; font-size:10px; max-width:calc(100vw - 78px); }
  body.mars #lmap { top:calc(137px + env(safe-area-inset-top,0px)); bottom:auto; width:160px; }
  body.mars #lmap canvas { height:100px; }
  body.mars:has(#lcard:not([hidden])) #lmap { display:none!important; }
  body.mars #hud { top:calc(12px + env(safe-area-inset-top,0px)); }
  body.mars .stat { min-width:230px; padding:8px 13px; }
  body.mars .brand { display:block; font-size:8px; letter-spacing:.16em; margin-bottom:2px; }
  body.mars .clock { font-size:10px; }
  body.mars .statrow { gap:10px; }
  body.mars .hudrow .iconbtn { width:33px; height:33px; border-radius:9px; }
  body.mars .iconbtn svg { width:16px; height:16px; }
  body.mars .hudC { gap:7px; }
  body.mars #lcoord { display:none!important; }
  body.mars #lfind { width:calc(100% - 32px); box-sizing:border-box; bottom:calc(16px + env(safe-area-inset-bottom,0px)); padding:7px 7px 7px 12px; }
  body.mars #lfind input { font-size:12px; }
  body.mars #lfind .lbtn { min-width:65px; padding:0 12px; height:38px; font-size:12px; }
  body.mars #lpill { bottom:calc(83px + env(safe-area-inset-bottom,0px)); max-width:calc(100% - 100px); }
  body.mars #lpill #lres { font-size:11px; }
  body.mars #lcard { left:16px; right:16px; width:auto; top:auto; bottom:calc(83px + env(safe-area-inset-bottom,0px)); max-height:53vh; padding:16px; }
  body.mars #lpeople { left:16px; right:16px; width:auto; bottom:calc(129px + env(safe-area-inset-bottom,0px)); max-height:52vh; }
  body.mars .mars-nav { right:16px; bottom:calc(92px + env(safe-area-inset-bottom,0px)); }
  body.mars .mars-nav button { width:34px; height:34px; }
  body.mars .mars-nav button svg { width:16px; height:16px; }
  body.mars:has(#lcard:not([hidden])) .mars-nav { display:none; }
  body.mars:has(#lcard:not([hidden])) #lpill { visibility:hidden; }
  body.mars .dockcard { padding:7px; }
  body.mars #dock { bottom:calc(10px + env(safe-area-inset-bottom,0px)); }
  body.mars #scr-menu .menu-col { gap:15px; }
  body.mars .logo h1 { font-size:52px; }
  body.mars .logo .mark { width:55px; height:55px; }
  body.mars #lmap { max-width:calc(100vw - 32px); }
}
@media (max-width:440px) {
  body.mars .stat .hs { display:flex; }
  body.mars .stat .clock.hs { display:grid; }
  body.mars .stat .hs svg { width:13px; height:13px; }
  body.mars .clock { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  body.mars .mars-loader::after { animation:none; }
  body.mars button { transition:none; }
}
body.mars #hud .stat { position:relative; }
body.mars .mars-fps {
  position:absolute;
  top:11px;
  right:14px;
  font-size:10px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}
@media (max-width:640px) {
  body.mars .mars-fps { top:8px; right:10px; font-size:9px; }
}