/* ══════════════════════════════════════════════
   COMPONENTS — panels and widgets that appear and
   disappear: info card, toolbar, time pill, tour
   card, HUD, chat, editor, login, toasts.

   Every panel here is dismissible. That's a rule,
   not a detail: anything that can cover the scene
   must have a visible ✕ and respond to Escape.
   ══════════════════════════════════════════════ */

/* ── Icon toolbar (right edge, above the chat button) ── */
#toolbar{
  position:absolute;right:24px;bottom:88px;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:all;z-index:55;
}
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,0.05);
  border:0.5px solid rgba(150,200,255,0.22);
  color:rgba(190,220,255,0.8);font-size:14px;
  display:flex;align-items:center;justify-content:center;
  cursor:none;backdrop-filter:blur(6px);transition:all .3s;
}
.icon-btn:hover{
  background:rgba(255,255,255,0.12);transform:scale(1.08);
  box-shadow:0 0 14px rgba(120,180,255,.25);
}
.icon-btn:active{transform:scale(0.94)}
.icon-btn.active{
  background:rgba(120,190,255,0.22);
  border-color:rgba(160,215,255,.6);color:#fff;
}

/* ── Planet info card ── */
#info-card{
  position:absolute;right:78px;top:50%;
  transform:translateY(-50%) translateX(16px);
  width:252px;max-height:72vh;overflow-y:auto;
  pointer-events:all;opacity:0;visibility:hidden;
  transition:opacity .45s ease,transform .45s ease,visibility .45s;
  background:linear-gradient(160deg,rgba(8,12,26,.93),rgba(6,10,20,.9));
  backdrop-filter:blur(16px);
  border:0.5px solid rgba(150,190,255,.2);border-radius:18px;
  padding:18px;z-index:40;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
#info-card.show{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
#info-close{
  position:absolute;top:10px;right:12px;
  background:rgba(255,255,255,0.06);
  border:0.5px solid rgba(150,190,255,0.18);
  color:rgba(180,205,245,0.7);
  width:22px;height:22px;border-radius:50%;
  font-size:11px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;
}
#info-close:hover{background:rgba(255,255,255,0.14);color:#fff}
#info-card h2{
  color:rgba(220,235,255,.95);font-size:17px;font-weight:400;
  letter-spacing:.1em;margin-bottom:3px;padding-right:26px;
}
#info-card .sub{
  color:rgba(140,180,235,.55);font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;
}
#info-card .row{
  display:flex;justify-content:space-between;gap:10px;
  font-size:10.5px;padding:4px 0;
  border-bottom:0.5px solid rgba(150,190,255,.07);
  color:rgba(185,210,245,.78);
}
#info-card .row span:first-child{color:rgba(130,165,220,.5);letter-spacing:.06em}
#info-card .blurb{
  color:rgba(175,200,240,.62);font-size:10.5px;line-height:1.6;
  margin-top:12px;font-style:italic;
}
#info-card .missions{
  margin-top:12px;font-size:9.5px;
  color:rgba(150,190,240,.55);line-height:1.75;
}
#info-card .you{
  margin-top:12px;padding:9px 11px;border-radius:11px;
  background:rgba(120,190,255,.08);
  border:0.5px solid rgba(140,200,255,.18);
  font-size:10px;color:rgba(190,220,255,.82);line-height:1.7;
}

/* ── Live HUD readout ── */
#hud-readout{
  position:absolute;left:24px;bottom:44px;pointer-events:none;
  font-size:9px;letter-spacing:.1em;
  color:rgba(140,175,225,.42);line-height:1.75;
  font-family:'Space Mono',monospace;white-space:pre-line;
}

/* ── Time-control pill ── */
#time-pill{
  position:absolute;left:50%;bottom:62px;transform:translateX(-50%);
  pointer-events:all;display:none;align-items:center;gap:10px;
  background:rgba(6,10,22,.82);backdrop-filter:blur(10px);
  border:0.5px solid rgba(150,190,255,.18);
  border-radius:20px;padding:6px 14px;z-index:40;
}
#time-pill button{
  background:none;border:none;color:rgba(180,215,255,.75);
  font-size:12px;cursor:pointer;padding:2px 4px;
}
#time-pill button:hover{color:#fff}
#time-pill span{
  color:rgba(150,190,240,.62);font-size:9.5px;letter-spacing:.12em;
  min-width:66px;text-align:center;font-family:'Space Mono',monospace;
}

/* ── Guided-tour narration card ── */
#tour-card{
  position:fixed;left:50%;bottom:98px;
  transform:translateX(-50%) translateY(14px);
  max-width:420px;width:max-content;text-align:center;
  background:rgba(6,10,22,.9);backdrop-filter:blur(14px);
  border:0.5px solid rgba(150,190,255,.2);border-radius:16px;
  padding:14px 34px 14px 24px;z-index:58;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .8s ease,transform .8s ease,visibility .8s;
}
#tour-card.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:all}
#tour-close{
  position:absolute;top:8px;right:10px;
  background:none;border:none;color:rgba(150,180,225,0.5);
  font-size:12px;cursor:pointer;padding:2px 4px;
}
#tour-close:hover{color:#fff}
#tour-card .t{
  color:rgba(220,235,255,.92);font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;
}
#tour-card .d{color:rgba(175,205,245,.7);font-size:11px;line-height:1.6;font-style:italic}

/* ── Photo mode: hide ALL chrome, leave only the scene ── */
#photo-hint{
  position:fixed;bottom:34px;left:50%;transform:translateX(-50%);z-index:70;
  color:rgba(200,225,255,.5);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;
  pointer-events:none;opacity:0;transition:opacity 1.2s;
}
body.photo-mode #ui,
body.photo-mode #chat-toggle,
body.photo-mode #chat-window,
body.photo-mode #toolbar,
body.photo-mode #info-card,
body.photo-mode #hud-readout,
body.photo-mode #tour-card,
body.photo-mode #time-pill{opacity:0!important;pointer-events:none!important}

/* ── Location toast ── */
#location-toast{
  position:fixed;bottom:70px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:linear-gradient(135deg,rgba(8,14,28,0.94),rgba(6,20,16,0.92));
  backdrop-filter:blur(14px);
  border:0.5px solid rgba(120,220,160,0.28);border-radius:16px;
  padding:13px 22px;color:rgba(200,220,255,0.85);
  text-align:center;line-height:1.5;font-size:11.5px;
  opacity:0;pointer-events:none;
  transition:opacity 0.6s ease,transform 0.6s ease;
  z-index:50;white-space:nowrap;
  box-shadow:0 10px 40px rgba(0,0,0,0.5),0 0 24px rgba(80,220,140,0.12);
}
#location-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Chat widget ── */
#chat-toggle{
  position:absolute;bottom:24px;right:24px;pointer-events:all;
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:0.5px solid rgba(150,200,255,0.28);
  color:rgba(190,220,255,0.9);font-size:20px;cursor:none;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.35s;backdrop-filter:blur(8px);z-index:60;
}
#chat-toggle:hover{background:rgba(255,255,255,0.13);transform:scale(1.06)}
#chat-window{
  position:fixed;bottom:88px;right:24px;width:300px;height:400px;
  background:rgba(6,9,20,0.92);backdrop-filter:blur(18px);
  border:0.5px solid rgba(150,190,255,0.2);border-radius:18px;
  display:none;flex-direction:column;overflow:hidden;z-index:60;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
#chat-header{
  padding:14px 18px;border-bottom:0.5px solid rgba(150,190,255,0.12);
  display:flex;align-items:center;justify-content:space-between;
}
#chat-header-title{
  color:rgba(210,228,255,0.9);font-size:12px;
  letter-spacing:0.1em;text-transform:uppercase;font-weight:400;
}
#chat-header-sub{color:rgba(120,220,150,0.6);font-size:9px;margin-top:2px}
#chat-close{background:none;border:none;color:rgba(150,170,210,0.5);cursor:pointer;font-size:16px;padding:0}
#chat-close:hover{color:#fff}
#chat-messages{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:85%;padding:9px 13px;border-radius:12px;font-size:12px;line-height:1.5}
.chat-msg.bot{
  background:rgba(100,150,255,0.12);color:rgba(210,225,255,0.9);
  align-self:flex-start;border-bottom-left-radius:3px;
}
.chat-msg.user{
  background:rgba(255,255,255,0.08);color:rgba(220,230,245,0.85);
  align-self:flex-end;border-bottom-right-radius:3px;
}
#chat-input-wrap{padding:12px;border-top:0.5px solid rgba(150,190,255,0.12);display:flex;gap:8px}
#chat-input{
  flex:1;background:rgba(255,255,255,0.05);
  border:0.5px solid rgba(150,190,255,0.15);border-radius:20px;
  color:rgba(210,225,255,0.9);font-size:11.5px;padding:9px 14px;
  font-family:inherit;outline:none;cursor:text;
}
#chat-input:focus{border-color:rgba(150,200,255,0.4)}
#chat-send{
  background:rgba(100,150,255,0.2);
  border:0.5px solid rgba(120,170,255,0.4);
  border-radius:50%;width:34px;height:34px;
  color:rgba(200,225,255,0.9);cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
#chat-send:hover{background:rgba(100,150,255,0.35)}
.chat-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
.chat-quick-btn{
  background:rgba(255,255,255,0.05);
  border:0.5px solid rgba(150,190,255,0.18);
  border-radius:12px;padding:5px 10px;font-size:9.5px;
  color:rgba(170,200,240,0.75);cursor:pointer;font-family:inherit;
}
.chat-quick-btn:hover{background:rgba(255,255,255,0.1)}

/* ── Moon message editor ── */
#moon-editor{
  position:absolute;top:50%;right:28px;transform:translateY(-50%);
  pointer-events:all;background:rgba(4,7,18,0.88);backdrop-filter:blur(16px);
  border:0.5px solid rgba(150,190,255,0.18);border-radius:18px;
  padding:22px;width:220px;display:none;z-index:45;
}
#moon-editor h3{
  color:rgba(200,220,255,0.8);font-size:11px;
  letter-spacing:0.2em;text-transform:uppercase;
  font-weight:300;margin-bottom:18px;
}
.editor-field{margin-bottom:14px}
.editor-field label{
  display:block;color:rgba(150,180,230,0.55);font-size:9.5px;
  letter-spacing:0.14em;text-transform:uppercase;margin-bottom:6px;
}
.editor-field input,.editor-field textarea{
  width:100%;background:rgba(255,255,255,0.05);
  border:0.5px solid rgba(150,190,255,0.18);border-radius:8px;
  color:rgba(200,220,255,0.85);font-size:11.5px;padding:8px 10px;
  font-family:inherit;outline:none;resize:none;cursor:text;
}
.editor-field input:focus,.editor-field textarea:focus{border-color:rgba(150,200,255,0.4)}
.editor-field input[type=file]{padding:6px;font-size:10px}
.editor-inline-note{color:rgba(150,180,230,0.55);font-size:10px;margin-left:6px}
#editor-save{
  width:100%;padding:9px;background:rgba(60,120,255,0.2);
  border:0.5px solid rgba(100,170,255,0.35);border-radius:10px;
  color:rgba(180,220,255,0.9);font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;
  cursor:pointer;transition:all 0.3s;margin-top:4px;font-family:inherit;
}
#editor-save:hover{background:rgba(60,120,255,0.38);border-color:rgba(100,170,255,0.6)}
#editor-status{
  color:rgba(140,170,220,0.5);font-size:9.5px;text-align:center;
  margin-top:6px;min-height:13px;
}
#logout-btn{
  width:100%;padding:8px;background:rgba(255,255,255,0.04);
  border:0.5px solid rgba(150,190,255,0.15);border-radius:8px;
  color:rgba(170,190,230,0.6);font-size:9.5px;
  letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;margin-top:10px;font-family:inherit;
}
#logout-btn:hover{background:rgba(255,255,255,0.08)}

/* ── Archive + command deck ───────────────────────────────────────────── */
#editor-toggle{display:none!important}
#admin-toggle{position:absolute;top:22px;left:28px;z-index:24;display:flex;align-items:center;gap:8px;pointer-events:all;padding:10px 14px;border:1px solid rgba(145,202,255,.28);border-radius:6px;background:rgba(5,12,29,.7);box-shadow:0 10px 30px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(12px);color:rgba(207,233,255,.86);font:9px 'Space Mono',monospace;letter-spacing:.13em;cursor:pointer;transition:.25s}
.admin-toggle-dot{width:6px;height:6px;border-radius:50%;background:#8deac9;box-shadow:0 0 12px #55dcb4}#admin-toggle:hover{border-color:rgba(171,219,255,.6);background:rgba(22,49,84,.82);transform:translateY(-2px)}
#articles-toggle{position:absolute;right:336px;top:22px;bottom:auto;z-index:23;pointer-events:all;padding:10px 14px;border:1px solid rgba(145,202,255,.28);border-radius:6px;background:rgba(5,12,29,.68);box-shadow:0 10px 30px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(12px);color:rgba(207,233,255,.86);font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;cursor:pointer;transition:.25s}
#articles-toggle span{color:#87c9ff;font-size:13px;margin-left:5px}#articles-toggle:hover{transform:translateY(-2px);border-color:rgba(171,219,255,.6);background:rgba(22,49,84,.82)}
#article-overlay,#admin-console{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:26px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;background:rgba(1,4,13,.6);backdrop-filter:blur(0)}
#article-overlay.is-open,#admin-console.is-open{opacity:1;visibility:visible;pointer-events:all;backdrop-filter:blur(14px)}
.archive-noise{position:absolute;inset:0;opacity:.17;background-image:radial-gradient(circle at 20% 12%,rgba(87,171,255,.25),transparent 24%),radial-gradient(circle at 80% 90%,rgba(102,65,255,.2),transparent 34%),linear-gradient(115deg,transparent 49.8%,rgba(136,202,255,.12) 50%,transparent 50.2%);pointer-events:none}
.archive-shell,.admin-shell{position:relative;width:min(1050px,100%);max-height:min(780px,calc(100vh - 52px));overflow:auto;border:1px solid rgba(151,207,255,.24);border-radius:20px;background:linear-gradient(145deg,rgba(10,21,45,.95),rgba(4,8,22,.97));box-shadow:0 30px 100px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.08);scrollbar-color:rgba(127,194,255,.5) transparent}
.archive-shell{padding:34px;transform:translateY(18px) scale(.985);transition:transform .4s cubic-bezier(.2,.8,.2,1)}#article-overlay.is-open .archive-shell{transform:none}
.archive-header,.admin-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:25px;border-bottom:1px solid rgba(150,204,255,.17)}
.archive-eyebrow,.admin-header span{display:block;margin-bottom:7px;color:rgba(147,204,255,.67);font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.18em}.archive-header h2,.admin-header h2{margin:0;color:#dceeff;font-weight:300;font-size:clamp(26px,4vw,42px);letter-spacing:.04em}.overlay-close{width:38px;height:38px;border:1px solid rgba(155,205,255,.22);border-radius:50%;background:rgba(141,194,255,.06);color:#d7edff;font-size:25px;font-weight:200;line-height:1;cursor:pointer;transition:.2s}.overlay-close:hover{background:rgba(140,197,255,.2);transform:rotate(90deg)}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:26px}.article-card{position:relative;min-height:220px;padding:22px;border:1px solid rgba(150,204,255,.16);border-radius:12px;overflow:hidden;background:linear-gradient(150deg,rgba(125,184,255,.1),rgba(16,26,57,.35));transition:transform .25s,border-color .25s,background .25s}.article-card::before{content:'';position:absolute;right:-34px;top:-44px;width:130px;height:130px;border:1px solid rgba(154,211,255,.18);border-radius:50%;box-shadow:0 0 35px rgba(69,146,255,.15)}.article-card:hover{transform:translateY(-5px);border-color:rgba(161,215,255,.46);background:linear-gradient(150deg,rgba(125,184,255,.17),rgba(16,26,57,.56))}.article-tag,.article-date{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.13em}.article-tag{color:#8ed4ff}.article-date{display:block;margin-top:6px;color:rgba(178,211,255,.47)}.article-card h3{position:relative;margin:36px 0 10px;color:#e2f0ff;font-size:19px;font-weight:400;line-height:1.25}.article-card p{margin:0;color:rgba(203,224,250,.66);font-size:13px;line-height:1.65}.article-card .article-index{position:absolute;bottom:17px;right:19px;color:rgba(162,207,255,.34);font-family:'Space Mono',monospace;font-size:9px}
.admin-shell{width:min(760px,100%);padding:28px;transform:translateY(12px);transition:transform .35s}.is-open .admin-shell{transform:none}.admin-header h2{font-size:27px}.admin-tabs{display:flex;gap:8px;margin:23px 0 18px;padding:5px;border:1px solid rgba(150,204,255,.14);border-radius:10px;background:rgba(3,8,21,.52)}.admin-tab{flex:1;padding:9px 8px;border:0;border-radius:7px;background:transparent;color:rgba(186,216,248,.58);font:10px 'Space Mono',monospace;letter-spacing:.06em;cursor:pointer}.admin-tab.active{background:rgba(91,155,241,.2);color:#d9eeff;box-shadow:inset 0 0 0 1px rgba(157,210,255,.16)}.admin-panel{display:none}.admin-panel.active{display:block}.admin-intro{margin:0 0 18px;color:rgba(197,221,250,.64);font-size:13px;line-height:1.6}.admin-panel label{display:block;margin-bottom:13px;color:rgba(159,202,245,.72);font:9px 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase}.admin-panel input,.admin-panel textarea{display:block;width:100%;margin-top:7px;padding:10px 11px;border:1px solid rgba(150,204,255,.19);border-radius:8px;background:rgba(255,255,255,.055);color:#dceeff;font:13px 'Space Grotesk',sans-serif;letter-spacing:normal;text-transform:none;outline:none}.admin-panel input:focus,.admin-panel textarea:focus{border-color:rgba(150,210,255,.58);box-shadow:0 0 0 3px rgba(84,163,255,.1)}.admin-panel textarea{resize:vertical;min-height:78px}.admin-panel input[type=file]{font-size:11px;cursor:pointer}.admin-check{display:flex!important;align-items:center;gap:9px;font:12px 'Space Grotesk',sans-serif!important;letter-spacing:0!important;text-transform:none!important}.admin-check input{display:inline!important;width:auto!important;margin:0!important}.admin-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.admin-primary{width:100%;margin-top:3px;padding:12px;border:1px solid rgba(119,195,255,.42);border-radius:9px;background:linear-gradient(90deg,rgba(61,132,240,.34),rgba(95,83,231,.27));color:#e1f2ff;font:10px 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.2s}.admin-primary:hover{filter:brightness(1.25);box-shadow:0 8px 24px rgba(60,134,255,.18)}.admin-list{display:grid;gap:8px;margin-top:17px}.admin-list-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border:1px solid rgba(150,204,255,.13);border-radius:8px;background:rgba(255,255,255,.035);color:rgba(206,230,255,.76);font-size:12px}.admin-list-item small{display:block;margin-top:3px;color:rgba(163,203,246,.46);font:8px 'Space Mono',monospace}.admin-list-item button{border:0;background:none;color:#ff9eae;font:9px 'Space Mono',monospace;cursor:pointer}.admin-console-status{min-height:15px;margin-top:14px;color:#92e8d1;text-align:center;font:10px 'Space Mono',monospace}
@media(max-width:700px){#admin-toggle{left:10px;top:12px;font-size:8px}#articles-toggle{right:12px;top:auto;bottom:84px;font-size:8px}.article-grid{grid-template-columns:1fr}.archive-shell,.admin-shell{padding:20px;border-radius:15px}.archive-header h2{font-size:28px}.admin-date-grid{grid-template-columns:1fr}.admin-tabs{overflow:auto}.admin-tab{min-width:105px}.admin-panel input,.admin-panel textarea{font-size:14px}}

/* ── Admin login modal ── */
#login-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);
  z-index:200;display:none;align-items:center;justify-content:center;
}
#login-modal{
  position:relative;background:rgba(6,9,20,0.95);
  border:0.5px solid rgba(150,190,255,0.2);border-radius:18px;
  padding:30px 28px;width:280px;max-width:calc(100vw - 40px);
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
}
#login-modal h3{
  color:rgba(210,225,255,0.85);font-size:13px;
  letter-spacing:0.16em;text-transform:uppercase;
  font-weight:300;margin-bottom:20px;text-align:center;
}
#login-modal input{
  width:100%;background:rgba(255,255,255,0.05);
  border:0.5px solid rgba(150,190,255,0.18);border-radius:8px;
  color:rgba(210,225,255,0.9);font-size:12px;padding:10px 12px;
  font-family:inherit;outline:none;margin-bottom:12px;cursor:text;
}
#login-modal input:focus{border-color:rgba(150,200,255,0.45)}
#login-submit{
  width:100%;padding:10px;background:rgba(60,120,255,0.22);
  border:0.5px solid rgba(100,170,255,0.4);border-radius:9px;
  color:rgba(190,225,255,0.95);font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;
  cursor:pointer;transition:all 0.3s;margin-top:4px;font-family:inherit;
}
#login-submit:hover{background:rgba(60,120,255,0.4)}
#login-error{
  color:rgba(255,130,130,0.85);font-size:10.5px;
  text-align:center;margin-top:10px;min-height:14px;
}
#login-close{
  position:absolute;top:14px;right:18px;
  color:rgba(150,170,210,0.5);cursor:pointer;
  font-size:18px;background:none;border:none;
}
#login-close:hover{color:#fff}

/* ══════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════ */
@media(max-width:700px){
  #toolbar{right:10px;bottom:62px;gap:6px}
  .icon-btn{width:32px;height:32px;font-size:12px}

  /* Info card becomes a bottom sheet so it never covers the planet */
  #info-card{
    right:auto;left:10px;width:calc(100vw - 62px);
    max-height:38vh;top:auto;bottom:104px;
    transform:translateY(12px);padding:14px;
  }
  #info-card.show{transform:translateY(0)}

  #hud-readout{display:none}
  #tour-card{bottom:112px;max-width:calc(100vw - 28px);padding:11px 30px 11px 16px}
  #tour-card .t{font-size:11px}
  #tour-card .d{font-size:10px}
  #time-pill{bottom:52px;padding:5px 10px}

  #chat-toggle{right:10px;bottom:12px;width:44px;height:44px;font-size:17px}
  #chat-window{width:calc(100vw - 20px);right:10px;bottom:64px;height:56vh}

  #moon-editor{
    right:0;left:0;width:auto;margin:0 10px;
    top:auto;bottom:64px;transform:none;
    max-height:50vh;overflow-y:auto;
  }

  #location-toast{
    font-size:9.5px;padding:9px 16px;
    white-space:normal;max-width:85vw;text-align:center;
  }
}