:root{
  --bg:#05060f;
  --ink:#eaf0ff;
  --muted:#9aa6c8;
  --accent:#6db0ff;
  --gold:#ffd479;
  --panel:rgba(10,14,30,.82);
  --line:rgba(150,180,255,.55);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);
  color:var(--ink);
  font-family:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
  overscroll-behavior:none;}
#sky{position:fixed;inset:0;display:block;touch-action:none;}

/* Top status bar */
#topbar{
  position:fixed;top:0;left:0;right:0;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(to bottom, rgba(5,6,15,.85), rgba(5,6,15,0));
  pointer-events:none;z-index:5;
}
#titlewrap{flex:1 1 auto;min-width:0;}
#title{font-weight:700;font-size:15px;letter-spacing:.2px;}
#place{font-size:11px;color:var(--muted);margin-top:1px;
  display:flex;align-items:center;gap:3px;max-width:190px;background:none;border:0;padding:0;font-family:inherit;text-align:start;
  cursor:pointer;pointer-events:auto;}
#place #placeText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
#place:active{opacity:.7;}
.loc-pin{flex:0 0 auto;width:11px;height:12px;transform:translateY(-1px);}

/* Time control: clock (top bar) + right-edge scrub timeline */
#clock{
  pointer-events:auto;flex:0 0 auto;margin-inline-end:8px;
  display:flex;flex-direction:column;align-items:center;line-height:1.12;
  padding:5px 10px;border-radius:12px;cursor:pointer;font-family:inherit;color:var(--ink);
  background:rgba(10,14,30,.7);border:1px solid rgba(120,150,230,.3);backdrop-filter:blur(6px);
}
#clock:active{transform:scale(.96);}
#clockTime{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;}
#clockDate{font-size:10px;color:var(--muted);}
#clockDate:empty{display:none;}
#clock.scrubbed{color:var(--gold);border-color:rgba(255,212,121,.55);}
#clock.scrubbed #clockDate{color:var(--gold);}

#timeline{
  /* stop above the bottom-right meta buttons (layers/settings/share/help) so it never covers them */
  position:fixed;inset-inline-end:0;top:64px;bottom:calc(env(safe-area-inset-bottom) + 188px);width:52px;z-index:6;
  pointer-events:auto;touch-action:none;background:none;
}
#timeline[hidden]{display:none;}
/* Fixed stack of lines; the thickness "bulge" travels to the scrubbed time
   (set per-tick in JS), instead of a handle moving up/down. */
#tlTicks{position:absolute;inset:14px 0;display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;pointer-events:none;}
#tlTicks .tk{width:5px;height:2px;border-radius:1px;background:var(--gold);opacity:.12;
  box-shadow:0 0 6px rgba(255,212,121,.5);transition:width .09s linear,opacity .09s linear;}
.tl-cap{position:absolute;left:0;right:0;text-align:center;font-size:10px;color:var(--muted);
  font-variant-numeric:tabular-nums;pointer-events:none;}
.tl-top{top:4px;} .tl-mid{top:50%;transform:translateY(-50%);opacity:.4;} .tl-bot{bottom:4px;}
#tlNow{
  flex:0 0 auto;pointer-events:auto;cursor:pointer;font-family:inherit;margin-inline-end:8px;
  background:rgba(255,212,121,.18);color:var(--gold);border:1px solid rgba(255,212,121,.55);
  border-radius:12px;padding:6px 12px;font-size:12px;font-weight:700;
}
#tlNow[hidden]{display:none;}

/* "Compass inaccurate" hint (auto-finder): shown only when the heading is unreliable */
#calHint{
  position:fixed;top:calc(env(safe-area-inset-top) + 60px);left:50%;transform:translateX(-50%);
  z-index:7;max-width:min(92vw,420px);box-sizing:border-box;
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:12px;font-size:12.5px;line-height:1.35;
  color:#ffe2a8;background:rgba(58,40,8,.94);border:1px solid rgba(255,200,110,.5);
  box-shadow:0 6px 20px rgba(0,0,0,.45);backdrop-filter:blur(6px);
}
#calHint[hidden]{display:none;}
#calHintText{flex:1 1 auto;}
#calHintClose{flex:0 0 auto;cursor:pointer;background:none;border:none;color:inherit;
  font:inherit;font-size:14px;line-height:1;padding:2px 4px;opacity:.8;}
#calHintClose:active{transform:scale(.9);}

/* Diagnostics overlay (dev only; ?debug=1 or long-press the compass) */
#diag{
  position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:8px;z-index:9;
  max-width:min(96vw,340px);pointer-events:none;
  background:rgba(0,0,0,.72);border:1px solid rgba(120,255,180,.35);
  border-radius:8px;padding:6px 8px;direction:ltr;text-align:left;
}
#diag[hidden]{display:none;}
#diagText{
  margin:0;white-space:pre;
  font:11px/1.45 ui-monospace,Menlo,Consolas,monospace;color:#8effc0;
}
#diagReset{
  pointer-events:auto;margin-top:6px;width:100%;cursor:pointer;
  font:11px/1 ui-monospace,Menlo,Consolas,monospace;
  color:#ffe2a8;background:rgba(58,40,8,.9);border:1px solid rgba(255,200,110,.5);
  border-radius:6px;padding:6px 8px;
}
#diagReset:active{transform:scale(.97);}

/* Compass toggle (auto vs. manual) */
#compass{
  pointer-events:auto;flex:0 0 auto;
  width:46px;height:46px;padding:0;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(10,14,30,.7);border:1px solid rgba(120,150,230,.3);
  backdrop-filter:blur(6px);transition:border-color .2s, opacity .2s;
}
#compass:active{transform:scale(.95);}
#compass svg{display:block;}
#compass .ring{fill:none;stroke:rgba(190,210,255,.30);stroke-width:1.4;}
#compass .tickc{stroke:rgba(190,210,255,.45);stroke-width:1.2;stroke-linecap:round;}
#compass .lubber{fill:var(--accent);}
#compass .north{fill:#ff5d5d;}
#compass .south{fill:rgba(190,205,240,.45);}
#compass .hub{fill:#eaf0ff;}
#compass .lbl{fill:rgba(205,220,255,.7);font:600 8px Vazirmatn,sans-serif;}
#compass .lbl-n{fill:#ff8080;font:700 8.5px Vazirmatn,sans-serif;}
#compass .slash{stroke:var(--accent);stroke-width:2;stroke-linecap:round;display:none;}
/* Disabled (manual): small, subtle button showing only one narrow slash. */
#compass.manual{width:30px;height:30px;border-color:rgba(109,176,255,.55);}
#compass.manual svg{width:24px;height:24px;}
#compass.manual .ring,
#compass.manual .needle,
#compass.manual .lubber,
#compass.manual .hub{display:none;}
#compass.manual .slash{display:block;}

/* Action box for the object under the reticle (name + ⓘ/➤), just below centre */
#reticleCard{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:10px;max-width:80vw;
  padding:6px 8px 6px 14px;border-radius:14px;
  background:var(--panel);border:1px solid rgba(120,150,230,.35);backdrop-filter:blur(8px);
  pointer-events:auto;
}
#reticleCard[hidden]{display:none;}
.rc-name{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rc-actions{display:flex;flex:0 0 auto;}

/* Night mode — a red multiply film over everything (UI + sky canvas) to
   preserve dark-adapted vision. Toggled via the `night` class on <html>. */
#nightFilter{
  position:fixed;inset:0;z-index:9999;pointer-events:none;display:none;
  background:#e60000;mix-blend-mode:multiply;
}
html.night #nightFilter{display:block;}

/* Bottom bar */
#bottombar{
  position:fixed;left:0;right:0;bottom:0;
  padding:14px 16px calc(env(safe-area-inset-bottom) + 16px);
  background:linear-gradient(to top, rgba(5,6,15,.92), rgba(5,6,15,0));
  z-index:5;display:flex;flex-direction:column;gap:8px;
  pointer-events:none;   /* let drags pass through the empty bar area to the sky */
}
#bottombar button{pointer-events:auto;}   /* …but keep the buttons tappable */
/* direction:ltr pins the two clusters to fixed physical sides (view left, meta right)
   in every language — they must not mirror when the app switches to RTL/Persian. */
.bottomrow{display:flex;direction:ltr;align-items:flex-end;justify-content:space-between;gap:10px;}
#pickerBtn{
  flex:0 0 auto;width:48px;height:48px;padding:0;cursor:pointer;
  display:grid;place-items:center;border-radius:14px;
  background:var(--panel);color:var(--ink);
  border:1px solid rgba(120,150,230,.35);backdrop-filter:blur(8px);
}
#pickerBtn:active{transform:scale(.96);}
#pickerBtn .gridicon rect{fill:var(--accent);}
#calibBtn{
  background:rgba(109,176,255,.16);color:var(--ink);
  border:1px solid rgba(120,150,230,.4);border-radius:14px;
  padding:10px 14px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;
  backdrop-filter:blur(8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#calibBtn[hidden]{display:none;}
#calibBtn:active{transform:scale(.97);}
#calibBtn.done{background:rgba(120,210,150,.22);border-color:rgba(120,210,150,.55);}

/* Popups (bottom sheets) */
#pickerModal, #aboutModal, #infoModal, #moonModal, #settingsModal, #tonightModal, #layersModal, #meteorModal, #locationModal, #threeDModal{
  position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(3,4,12,.6);backdrop-filter:blur(4px);
}
#pickerModal[hidden], #aboutModal[hidden], #infoModal[hidden], #moonModal[hidden], #settingsModal[hidden], #tonightModal[hidden], #layersModal[hidden], #meteorModal[hidden], #locationModal[hidden], #threeDModal[hidden]{display:none;}
#infoModal, #locationModal, #threeDModal{z-index:31;}   /* sit above any popup they were opened from */
#td-body{display:flex;flex-direction:column;}
#td-canvas{width:min(100%,58vh);aspect-ratio:1/1;margin:0 auto;display:block;touch-action:none;cursor:grab;}
#td-canvas:active{cursor:grabbing;}
.td-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin-top:8px;}
#td-legendwrap{display:inline-flex;align-items:center;gap:14px;}
#td-legendwrap[hidden]{display:none;}
.td-legend{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.td-legend .sw{width:10px;height:10px;border-radius:50%;display:inline-block;}
.td-legend .sw-mg{background:#eaf1ff;box-shadow:0 0 5px rgba(200,222,255,.9);}
.td-legend .sw-out{background:#ffc27a;box-shadow:0 0 5px rgba(255,178,110,.9);}
.td-check{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);cursor:pointer;}
.td-check input{accent-color:var(--accent);cursor:pointer;}
#td-reset{font:inherit;font-size:13px;color:var(--fg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 16px;cursor:pointer;}
#td-reset:hover{background:rgba(255,255,255,.12);}
#td-time{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:4px;}
#td-time[hidden]{display:none;}
#td-year{width:min(92%,360px);accent-color:var(--accent);cursor:pointer;}
#td-yearlbl{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.td-cap{font-size:12.5px;color:var(--muted);line-height:1.45;margin:10px 2px 2px;}
.modal-card{
  width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;
  background:rgba(11,16,34,.97);border:1px solid rgba(120,150,230,.25);
  border-radius:22px 22px 0 0;padding:8px 16px calc(env(safe-area-inset-bottom) + 16px);
  box-shadow:0 -10px 50px rgba(0,0,0,.6);
  animation:sheetUp .22s ease;
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.4;}to{transform:none;opacity:1;}}
.modal-grab{width:44px;height:5px;border-radius:3px;background:rgba(160,180,230,.35);margin:8px auto 6px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 12px;}
.modal-head span{font-weight:700;font-size:17px;}
#closeModal, #closeAbout, #closeInfo, #closeMoon, #closeSettings, #closeTonight, #closeLayers, #closeMeteor, #closeLocation, #closeThreeD{
  background:rgba(255,255,255,.08);border:none;color:var(--ink);
  width:34px;height:34px;border-radius:50%;font-size:16px;cursor:pointer;font-family:inherit;
}
/* Layers popup — toggle rows */
#layersBody{padding:4px 2px 8px;display:flex;flex-direction:column;overflow-y:auto;flex:1 1 auto;min-height:0;}
.layer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:13px 8px;background:none;border:none;border-bottom:1px solid rgba(120,150,230,.12);
  color:var(--ink);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:start;}
.layer-row:last-child{border-bottom:none;}
.layer-sw{flex:0 0 auto;width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.14);
  position:relative;transition:background .15s;}
.layer-sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:inset-inline-start .15s;}
.layer-row.on .layer-sw{background:var(--accent);}
.layer-row.on .layer-sw::after{inset-inline-start:21px;}
/* Tonight-at-a-glance digest */
#tonightBody{overflow-y:auto;padding:2px 4px 10px;}
.tn-section{font-size:13px;color:var(--muted);font-weight:600;margin:16px 2px 4px;}
.tn-section:first-child{margin-top:4px;}
.tn-note{padding:8px 2px 6px;border-top:1px solid rgba(120,150,230,.10);}
.tn-row{display:flex;align-items:center;gap:12px;padding:8px 2px;border-top:1px solid rgba(120,150,230,.10);}
.tn-row .icon{flex:0 0 auto;width:40px;height:40px;border-radius:8px;}
.tn-txt{flex:1 1 auto;min-width:0;}
.tn-line{font-size:15px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tn-sub{font-size:12.5px;color:var(--muted);margin-top:2px;}
/* Settings popup */
#settingsBody{padding:6px 4px 10px;}
.set-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid rgba(120,150,230,.12);}
.set-row:last-child{border-bottom:none;}
.set-label{font-size:15px;font-weight:600;color:var(--ink);padding-top:7px;flex:0 0 auto;}
.seg{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
.set-select{
  max-width:60%;background:rgba(255,255,255,.05);color:var(--ink);
  border:1px solid rgba(120,150,230,.3);border-radius:10px;
  font-family:inherit;font-size:13px;font-weight:600;padding:8px 10px;cursor:pointer;
}
.set-select option{background:#0b1024;color:var(--ink);}
button.set-select{max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;}

/* Location picker (searchable city list) */
#locBody{display:flex;flex-direction:column;min-height:0;overflow:hidden;}
#locSearch{width:100%;box-sizing:border-box;background:rgba(255,255,255,.06);color:var(--ink);
  border:1px solid rgba(120,150,230,.3);border-radius:12px;font-family:inherit;font-size:15px;
  padding:10px 12px;margin:2px 0 8px;}
#locSearch::placeholder{color:var(--muted);}
.loc-note{font-size:11.5px;color:var(--muted);margin:0 2px 10px;line-height:1.4;}
#locList{overflow-y:auto;display:flex;flex-direction:column;}
.loc-head{font-size:11px;font-weight:700;color:var(--accent);opacity:.8;margin:10px 4px 4px;}
.loc-row{display:flex;align-items:baseline;gap:8px;width:100%;text-align:start;
  background:none;border:0;border-radius:10px;font-family:inherit;color:var(--ink);padding:9px 10px;cursor:pointer;}
.loc-row:active{background:rgba(255,255,255,.06);}
.loc-row.on{background:rgba(120,150,230,.18);}
.loc-gps{font-weight:700;color:var(--accent);margin-bottom:2px;align-items:center;}
.loc-ico{flex:0 0 auto;width:16px;height:16px;opacity:.7;transform:translateY(-1px);}
.loc-gps .loc-ico{opacity:.95;}
.loc-city{font-size:15px;font-weight:600;}
.loc-country{font-size:12px;color:var(--muted);}
.loc-none{font-size:13px;color:var(--muted);padding:12px 4px;}

/* Analytics consent banner (GDPR / ePrivacy) */
#consent{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:10px 16px;
  align-items:center;justify-content:center;flex-wrap:wrap;padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);
  background:rgba(8,11,26,.97);border-top:1px solid rgba(120,150,230,.25);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
#consent[hidden]{display:none;}
#consent p{margin:0;font-size:12.5px;color:var(--muted);max-width:52ch;line-height:1.5;}
#consent .consent-btns{display:flex;gap:8px;flex:0 0 auto;}
#consent button{font-family:inherit;font-size:13px;font-weight:600;border-radius:10px;padding:8px 16px;cursor:pointer;border:1px solid rgba(120,150,230,.3);}
#consentNo{background:rgba(255,255,255,.06);color:var(--ink);}
#consentYes{background:var(--accent);color:#06223f;border-color:transparent;}
.seg button{
  background:rgba(255,255,255,.05);border:1px solid rgba(120,150,230,.25);border-radius:10px;
  color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;
  padding:8px 12px;cursor:pointer;white-space:nowrap;
}
.seg button.active{background:rgba(109,176,255,.22);color:var(--ink);border-color:var(--accent);}
/* Moon phases popup */
#moonBody{overflow-y:auto;padding:2px 4px 8px;}
.moon-tonight{display:flex;align-items:center;gap:16px;margin:6px 4px 18px;}
#moonTonightIcon{width:92px;height:92px;flex:0 0 auto;}
.moon-tonight-info{flex:1 1 auto;min-width:0;}
.mt-name{font-size:20px;font-weight:700;color:var(--ink);}
.mt-en{font-size:13px;color:var(--muted);margin-top:1px;}
.mt-illum{font-size:13px;color:var(--accent);margin-top:8px;}
.mt-phase-pill{display:inline-block;margin-inline-start:8px;vertical-align:middle;
  font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:rgba(120,150,230,.18);color:var(--accent);}
.mt-rs{font-size:13px;color:var(--muted);margin-top:4px;}
.mt-dist{margin-top:8px;font-size:13px;color:var(--accent);}
.mt-dist .md-bar{position:relative;height:12px;border-radius:6px;margin-top:6px;max-width:240px;
  background:linear-gradient(90deg, rgba(120,160,255,.5), rgba(255,210,140,.5));}
.mt-dist .md-band{position:absolute;top:0;bottom:0;border-radius:6px;background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);}
.mt-dist .md-fm-disc{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 38% 35%, #fff8ec, #f0e2c0 70%, #d9c79e);border:1px solid rgba(0,0,0,.4);
  box-shadow:0 0 5px rgba(255,243,214,.7);}
.mt-dist .md-now{position:absolute;top:-2px;height:16px;width:2px;border-radius:1px;background:#dff0ff;
  transform:translateX(-50%);box-shadow:0 0 4px rgba(150,200,255,.9);}
.mt-dist .md-ends{display:flex;justify-content:space-between;max-width:240px;margin-top:4px;
  font-size:10px;color:var(--muted);}
.mt-dist .md-end{display:flex;flex-direction:column;line-height:1.25;}
.mt-dist .md-end:last-child{align-items:flex-end;text-align:right;}
.mt-dist .md-end-lbl{font-size:9px;opacity:.6;}
.mt-dist .md-top{position:relative;height:12px;max-width:240px;margin-top:2px;font-size:9px;color:var(--accent);opacity:.85;}
.mt-dist .md-pk{position:absolute;top:0;white-space:nowrap;}
.mt-dist .md-legend{display:flex;gap:14px;margin-top:6px;font-size:10px;color:var(--muted);}
.mt-dist .md-leg{display:inline-flex;align-items:center;gap:5px;}
.mt-dist .sw-now{display:inline-block;width:2px;height:11px;border-radius:1px;background:#dff0ff;box-shadow:0 0 3px rgba(150,200,255,.9);}
.mt-dist .sw-fm{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.4);
  background:radial-gradient(circle at 38% 35%, #fff8ec, #f0e2c0 70%, #d9c79e);}
.moon-facts{display:flex;flex-direction:column;gap:7px;margin:0 2px 18px;padding:12px 14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(120,150,230,.15);border-radius:14px;}
.moon-facts .fact{display:flex;justify-content:space-between;gap:12px;font-size:13px;}
.moon-facts .fk{color:var(--muted);}
.moon-facts .fv{color:var(--ink);font-weight:600;text-align:left;}
.moon-facts .fact-link{background:none;border:none;font-family:inherit;font-size:13px;
  color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0;}
.moon-facts .fact-link:active{opacity:.7;}
.moon-section-title{font-size:13px;color:var(--muted);margin:0 2px 10px;}
.moon-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 8px;padding:2px 2px 8px;}
/* Upcoming full moons (names + super/micro/blue/harvest) */
.moon-special{display:flex;flex-direction:column;}
.ms-row{display:flex;align-items:center;gap:12px;padding:8px 2px;border-top:1px solid rgba(120,150,230,.10);}
.ms-ico{width:42px;height:42px;flex:0 0 auto;position:relative;border-radius:50%;}
.ms-glyph{position:absolute;inset:0;background-image:url(../img/moon-icons.png);
  background-repeat:no-repeat;background-size:252px 84px;}    /* 6×2 cells of 42px, full-color artistic discs */
.ms-tx{flex:1 1 auto;min-width:0;}
.ms-name{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ms-date{font-size:12px;color:var(--accent);margin-top:1px;}
.ms-desc{font-size:11.5px;color:var(--muted);margin-top:1px;}
.ms-badge{font-size:10px;font-weight:700;border-radius:6px;padding:1px 6px;letter-spacing:.02em;}
.ms-super{background:rgba(255,212,121,.2);color:var(--gold);}
.ms-micro{background:rgba(150,170,210,.18);color:#aab8d8;}
.ms-blue{background:rgba(109,176,255,.2);color:var(--accent);}
.ms-harvest{background:rgba(255,150,90,.2);color:#ffae7a;}
.mphase{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;}
.mphase canvas{width:46px;height:46px;}
.mphase .mp-date{font-size:11px;color:var(--accent);font-weight:600;}
.mphase .mp-in{font-size:10px;color:var(--muted);}
.mphase .mp-fa{font-size:11px;color:var(--ink);line-height:1.3;}
.mphase .mp-en{font-size:9.5px;color:var(--muted);line-height:1.2;}
/* Moon button (above the picker) */
.rightstack{display:flex;flex-direction:column;gap:8px;align-items:center;}
#moonBtn, #tonightBtn, #meteorBtn, #quizBtn{
  flex:0 0 auto;width:48px;height:48px;padding:0;cursor:pointer;
  display:grid;place-items:center;border-radius:14px;color:var(--accent);
  background:var(--panel);border:1px solid rgba(120,150,230,.35);backdrop-filter:blur(8px);
}
#moonBtn:active, #tonightBtn:active, #meteorBtn:active, #quizBtn:active{transform:scale(.96);}
#quizBtn.on{color:var(--gold);border-color:rgba(255,212,121,.6);}
/* Next-meteor-shower popup */
#meteorBody{overflow-y:auto;padding:2px 4px 12px;}
.mt-head{padding:6px 2px 12px;}
.mt-name{font-size:20px;font-weight:700;color:var(--ink);}
.mt-sub{font-size:13px;color:var(--gold);font-weight:600;margin-top:3px;}
.mt-row{display:flex;align-items:center;gap:10px;padding:11px 2px;border-top:1px solid rgba(120,150,230,.12);}
.mt-lbl{flex:0 0 34%;font-size:12.5px;color:var(--muted);font-weight:600;}
.mt-val{flex:1 1 auto;min-width:0;font-size:14.5px;color:var(--ink);font-weight:600;}
.mt-tip{margin-top:12px;padding:11px 12px;border-radius:12px;font-size:13px;line-height:1.45;
  color:var(--ink);background:rgba(109,176,255,.10);border:1px solid rgba(120,150,230,.2);}
/* Info popup (tap a selected object) */
#infoBody{overflow-y:auto;padding:2px 4px 8px;}
#infoNames{text-align:center;margin:2px 0 16px;}
.info-title-row{display:flex;align-items:baseline;justify-content:center;gap:7px;flex-wrap:wrap;}
.info-type{font-size:13px;font-weight:700;color:var(--accent);}
.info-type:empty{display:none;}
.info-type:not(:empty)::after{content:"·";margin-inline-start:7px;color:var(--muted);font-weight:400;}
.info-fa{font-size:22px;font-weight:700;color:var(--ink);}
.info-en{font-size:14px;color:var(--muted);margin-top:2px;}
.info-section-title{font-size:13px;color:var(--muted);margin:0 2px 8px;}
#infoLore{display:flex;flex-direction:column;gap:10px;margin:4px 2px 14px;padding-top:10px;border-top:1px solid rgba(120,150,230,.15);}
#infoLore[hidden]{display:none;}
.lore-h{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--accent);margin-bottom:2px;}
.lore-p{font-size:13.5px;line-height:1.55;color:var(--ink);}
#infoChart{width:100%;height:176px;display:block;}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12px;color:var(--muted);}
.legend .item{display:flex;align-items:center;gap:6px;}
.legend .sw{width:14px;height:10px;border-radius:2px;display:inline-block;}
/* About popup */
#aboutBody{overflow-y:auto;padding:4px 4px 8px;line-height:1.9;color:var(--ink);}
#aboutBody p{margin:0 0 12px;font-size:14px;color:var(--muted);}
#aboutVersion{
  margin-top:8px;padding-top:14px;border-top:1px solid rgba(120,150,230,.18);
  font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;
}
#aboutVersion b{color:var(--ink);font-weight:600;}
#aboutVersion .bld{direction:ltr;}
.about-credit{margin-top:12px;font-size:12.5px;color:var(--muted);text-align:left;direction:ltr;}
/* Help (?) button */
#helpBtn{
  pointer-events:auto;flex:0 0 auto;
  width:34px;height:34px;padding:0;cursor:pointer;font-family:inherit;
  display:grid;place-items:center;border-radius:50%;font-size:17px;font-weight:700;
  background:rgba(10,14,30,.7);border:1px solid rgba(120,150,230,.3);color:var(--accent);
  backdrop-filter:blur(6px);
}
#helpBtn:active{transform:scale(.95);}
/* Meta stack — Help (?), Settings (gear), Layers — stacked vertically */
.leftgroup{display:flex;flex-direction:column;align-items:center;gap:8px;}
#settingsBtn, #layersBtn, #shareBtn{
  pointer-events:auto;flex:0 0 auto;
  width:34px;height:34px;padding:0;cursor:pointer;font-family:inherit;
  display:grid;place-items:center;border-radius:50%;color:var(--accent);
  background:rgba(10,14,30,.7);border:1px solid rgba(120,150,230,.3);backdrop-filter:blur(6px);
}
#settingsBtn:active, #layersBtn:active, #shareBtn:active{transform:scale(.95);}

/* Find-it quiz banner (top-center, over the live sky) + share toast */
#quizBar{
  position:fixed;top:calc(env(safe-area-inset-top) + 58px);left:50%;transform:translateX(-50%);
  z-index:7;width:min(92vw,420px);box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-radius:14px;
  background:var(--panel);border:1px solid rgba(120,150,230,.4);backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
#quizBar[hidden]{display:none;}
#quizTop{min-width:0;}
#quizPrompt{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#quizPrompt .qz-obj{color:var(--gold);}
#quizPrompt.qz-correct{color:#7ee0a0;}
#quizScore{font-size:12px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;}
#quizBtns{flex:0 0 auto;display:flex;gap:8px;}
#quizBtns button{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(120,150,230,.3);border-radius:999px;padding:6px 12px;}
#quizBtns button:active{transform:scale(.96);}
#toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 96px);transform:translateX(-50%);
  z-index:20;max-width:88vw;padding:9px 16px;border-radius:12px;font-size:13px;font-weight:600;
  color:var(--ink);background:rgba(10,14,30,.95);border:1px solid rgba(120,150,230,.4);
  box-shadow:0 6px 24px rgba(0,0,0,.5);pointer-events:none;text-align:center;
}
#toast[hidden]{display:none;}
.vis-toggle{
  align-self:flex-start;margin:0 2px 10px;flex-shrink:0;
  background:rgba(255,255,255,.05);color:var(--muted);
  border:1px solid rgba(120,150,230,.3);border-radius:999px;
  padding:7px 14px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;
}
.vis-toggle.on{background:rgba(109,176,255,.22);color:var(--ink);border-color:var(--accent);}
.vis-toggle::before{content:"○ ";}
.vis-toggle.on::before{content:"● ";}
#grid{
  overflow-y:auto;padding:4px 2px 2px;display:flex;flex-direction:column;gap:14px;
  flex:1 1 auto;min-height:0;                 /* the scroll region absorbs the height, so header rows keep theirs */
}
/* Picker category tabs (one shown at a time) */
#pickerTabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch;flex-shrink:0;}
.ptab{flex:0 0 auto;appearance:none;-webkit-appearance:none;font-family:inherit;font-size:13px;
  font-weight:600;line-height:1.2;cursor:pointer;padding:7px 14px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.05);border:1px solid rgba(120,150,230,.22);color:var(--muted);}
.ptab.on{background:rgba(109,176,255,.16);border-color:var(--accent);color:var(--ink);}
.grid-section{display:flex;flex-direction:column;gap:9px;}
.grid-head{font-size:12px;font-weight:700;color:var(--muted);padding:0 2px 5px;
  border-bottom:1px solid rgba(120,150,230,.15);}
.grid-head.toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
  appearance:none;-webkit-appearance:none;border:0;border-bottom:1px solid rgba(120,150,230,.15);
  border-radius:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--muted);
  cursor:pointer;text-align:start;padding:2px 2px 6px;}
.grid-head .chev{font-size:11px;opacity:.7;}
.grid-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:10px;}
.cell{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:rgba(255,255,255,.04);border:1px solid rgba(120,150,230,.15);
  border-radius:14px;padding:10px 6px;font-family:inherit;color:var(--ink);
}
.cell.sel{border-color:var(--accent);background:rgba(109,176,255,.16);}
.cell .icon{width:64px;height:64px;}
.cellname{font-size:12px;font-weight:500;text-align:center;line-height:1.3;}
.cellen{font-size:10px;font-weight:400;color:var(--muted);text-align:center;line-height:1.2;}
/* Uniform object actions: eye (details) + pointer (guide) */
.obj-actions{display:inline-flex;gap:8px;}
.cell .obj-actions{margin-top:6px;}
.act-btn{
  background:rgba(255,255,255,.06);border:1px solid rgba(120,150,230,.28);border-radius:8px;
  width:32px;height:27px;display:grid;place-items:center;cursor:pointer;color:var(--accent);padding:0;
}
.act-btn:active{transform:scale(.9);}
.act-btn svg{width:16px;height:16px;display:block;}
.const-val{display:inline-flex;align-items:center;gap:10px;}

/* Intro / permission overlay */
#overlay{
  position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 10%, #0b1230 0%, #05060f 70%);
  padding:28px;text-align:center;
}
#overlay .card{max-width:420px;}
#overlay h1{font-size:24px;margin:0 0 6px;}
#overlay .sub{color:var(--muted);font-size:15px;line-height:1.9;margin:0 0 22px;}
#overlay ul{list-style:none;padding:0;margin:0 0 24px;text-align:left;}
#overlay li{font-size:14px;color:var(--ink);margin:10px 0;display:flex;gap:10px;align-items:flex-start;}
#overlay li b{color:var(--accent);}
#startBtn{
  background:linear-gradient(180deg,#6db0ff,#3d7ee0);color:#04122c;border:none;
  border-radius:16px;padding:16px 26px;font-size:18px;font-weight:700;font-family:inherit;
  width:100%;cursor:pointer;box-shadow:0 8px 30px rgba(80,140,255,.35);
}
#startBtn:active{transform:scale(.98);}
#overlay .note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.8;}
.star-emoji{font-size:34px;}