/* SKYMATE_MOON_FULL_V2 — monochrome "observatory" redesign (test copy).
   References: NOVA dashboard, GALAXY moon page, Moon landing. Same ids and scripts as the live page.
   Performance rules: no backdrop blur, no filters, no big animated layers. Phones animate only once on
   open (opacity/transform); small looping details run on desktop only and pause when off-screen. */

:root{
  --ink:#050507;--night:#0b0c10;--dusk:#14151b;
  --glass:rgba(255,255,255,.035);--glass-2:rgba(255,255,255,.025);
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.16);
  --text:#f1f2f4;--muted:#a0a2ab;--dim:#6a6c76;
  --sun:#cdeeb4;--ok:#a9e6b9;--sky:#d6dbe6;--lav:#c9cbd6;
  --sunset:linear-gradient(180deg,#ffffff,#d7dae1);
  --card:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016));
  --pad:clamp(16px,4.6vw,64px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
html{scroll-padding-top:84px;background:var(--ink)}
html body{background:var(--ink)!important;color:var(--text);line-height:1.75}
html #skyGalaxy{background:radial-gradient(55% 45% at 30% 16%,rgba(255,255,255,.045),transparent 70%),radial-gradient(60% 50% at 80% 92%,rgba(255,255,255,.025),transparent 70%),var(--ink)!important}
html #skyGalaxy canvas{opacity:.5}
.app{padding:0!important}
.shell{width:auto!important;margin:0!important}
a:hover{text-decoration:none}
::selection{background:rgba(205,238,180,.28)}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}

/* ---------- header: brand · pill nav · actions ---------- */
.topbar{position:fixed!important;inset:0 0 auto 0!important;margin:0!important;z-index:40;display:flex!important;align-items:center;gap:16px!important;
  padding:calc(14px + var(--safe-t)) var(--pad) 14px!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  background:linear-gradient(180deg,rgba(5,5,7,.75),rgba(5,5,7,0))!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:background .35s}
.topbar.solid{background:rgba(5,5,7,.92)!important;box-shadow:0 1px 0 var(--line)!important}
.brand{gap:10px}
.brand-mark{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);box-shadow:none;background:none}
.brand-name{display:flex;align-items:baseline;gap:10px;font:600 20px/1 var(--f-head)}
.brand-name small{font:500 10px/1 var(--f-num);letter-spacing:.42em;color:var(--muted);margin:0}
.brand-sub,.topbar .pill{display:none!important}
.top-nav{display:flex;gap:2px;margin-inline:auto;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);white-space:nowrap}
.top-nav a{padding:7px 16px;border-radius:999px;font-size:13.5px;color:var(--muted);transition:color .2s,background .2s}
.top-nav a:hover{color:var(--text)}
.top-nav a[aria-current]{color:var(--text);background:rgba(255,255,255,.09)}
.now-chip{margin:0!important;max-width:250px;background:rgba(255,255,255,.03)!important;border:1px solid var(--line)!important}
.now-chip b{color:var(--sun)!important;font-weight:600}
.now-chip .pulse{background:var(--sun);box-shadow:none;animation:none}
.lang-btn,.topbar .icon-btn{height:40px;background:rgba(255,255,255,.03)!important;border:1px solid var(--line)!important;color:var(--text)!important;border-radius:999px!important;box-shadow:none!important}
.topbar .icon-btn{width:40px}
@media (max-width:1180px){.top-nav a{padding:7px 12px}}
@media (max-width:1100px){.top-nav{display:none}.now-chip{margin-inline-start:auto!important}}

/* ---------- hero ---------- */
.hero{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) 116px;grid-template-areas:"main moon stats" "cards cards cards";
  column-gap:clamp(20px,3vw,48px);row-gap:clamp(24px,3.4vw,44px);align-items:center;min-height:0;margin:0!important;overflow:visible;
  padding:calc(96px + var(--safe-t)) var(--pad) 0!important}
.hero-main{grid-area:main;position:relative;z-index:2;max-width:620px}
.status-chip{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;padding:6px 14px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.03);font-size:12px;color:var(--muted)}
.status-chip i{width:6px;height:6px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 3px rgba(205,238,180,.14)}
.hero h1{font:300 clamp(40px,4.6vw,76px)/1.1 var(--f-head)!important;letter-spacing:-.02em!important;margin:0 0 22px!important;color:var(--text);text-shadow:none}
.hero h1 span{display:block;font-weight:300;color:var(--sun)!important;background:none!important;-webkit-text-fill-color:currentColor!important;animation:none!important}
.hero-main>p{max-width:44ch!important;margin:0 0 28px!important;color:var(--muted)!important;font-size:clamp(14px,1.1vw,16px)!important;line-height:1.9!important}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.cta a{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px;border-radius:14px;font:500 14px var(--f-head);transition:transform .25s var(--ease),background .25s,border-color .25s}
.cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cta-solid{background:#f3f4f6;color:#0b0c10}
.cta-solid:hover{background:#fff;transform:translateY(-1px)}
.cta-line{border:1px solid var(--line-2);background:rgba(255,255,255,.02);color:var(--text)}
.cta-line:hover{border-color:rgba(255,255,255,.34);transform:translateY(-1px)}
.hero-actions{margin-top:18px;gap:6px!important}
.hero-actions .button{flex:0 0 auto!important;height:36px;min-height:0!important;padding:0 13px!important;border-radius:999px!important;font:500 12px var(--f-body)!important;
  background:transparent!important;border:1px solid var(--line)!important;color:var(--muted)!important;box-shadow:none!important;transform:none!important}
.hero-actions .button:hover{color:var(--text)!important;border-color:var(--line-2)!important}
.hero-actions .button[aria-pressed="true"]{background:var(--sun)!important;color:#0b0c10!important;border-color:transparent!important}
.social-btn svg{filter:none!important;transform:none!important}

/* moon with orbit lines (all static; only the small dot moves, desktop only) */
.hero-moon{grid-area:moon;position:relative;justify-self:center;width:100%;max-width:min(560px,62vh);aspect-ratio:1;pointer-events:none}
.moon-orb{position:absolute;inset:16%;border-radius:50%;overflow:hidden;background:#111215;box-shadow:0 0 120px -24px rgba(255,255,255,.2)}
.moon-orb img{width:100%;height:100%;object-fit:cover;object-position:54% 50%;transform:scale(1.17)}
.moon-orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 70% 28%,transparent 40%,rgba(5,5,7,.45) 60%,rgba(5,5,7,.95) 80%)}
.orbits{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbits circle,.orbits ellipse{fill:none;stroke:rgba(255,255,255,.17);stroke-width:1.6}
.orbits .o2{stroke:rgba(255,255,255,.11)}
.orbit-run{position:absolute;inset:10%;border-radius:50%;pointer-events:none}
.orbit-run i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 12px 2px rgba(255,255,255,.55)}
.sat{position:absolute;left:5%;top:58%;width:7%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 65% 35%,#d9dade,#6e7078 45%,#18191d 76%)}
.moon-tag{position:absolute;right:-2%;top:8%;display:grid;gap:1px;min-width:150px;padding:10px 14px;border:1px solid var(--line-2);border-radius:12px;background:rgba(10,11,14,.78);text-align:start}
.moon-tag small{font-size:11px;color:var(--dim)}
.moon-tag b{font:500 15px/1.4 var(--f-head)}
.moon-tag span{font-size:12px;color:var(--muted)}

/* stats column (like the NOVA side rail) */
.hero-stats{grid-area:stats;align-self:center;display:grid;gap:34px;justify-items:center;text-align:center;padding-inline-start:22px;border-inline-start:1px solid var(--line)}
.hero-stats div{display:grid;justify-items:center;gap:6px}
.hero-stats svg{width:18px;height:18px;padding:9px;box-sizing:content-box;border:1px solid var(--line-2);border-radius:50%;fill:none;stroke:var(--text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-stats b{font:300 26px/1 var(--f-num)}
.hero-stats small{max-width:12ch;font-size:11.5px;line-height:1.45;color:var(--dim)}

/* dashboard cards */
.hero-cards{grid-area:cards;display:grid;grid-template-columns:1.15fr 1fr 1fr 1.25fr;gap:14px}
html .hcard{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;min-height:214px;padding:18px 20px!important;overflow:hidden;color:var(--text);
  border:1px solid var(--line)!important;border-radius:22px!important;background:var(--card)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;backdrop-filter:none!important;
  transition:border-color .25s,transform .25s var(--ease)}
a.hcard:hover{border-color:var(--line-2)!important;transform:translateY(-2px)}
.hc-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:10px}
.hc-label,.spot-tag{font:500 12.5px var(--f-body)!important;color:var(--muted)!important}
.hc-tag{white-space:nowrap;padding:2px 9px;border:1px solid rgba(205,238,180,.25);border-radius:999px;font:500 11px var(--f-num);color:var(--sun)}
.hc-foot{position:relative;margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;color:var(--muted)}
a.hcard .hc-foot{padding-inline-end:46px}
.hc-foot b{font-weight:500;color:var(--text)}
.hc-go{position:absolute;bottom:16px;inset-inline-end:16px;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:10px}
.hc-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.spot::before{display:none!important}
.spot-icon{display:none!important}
.spot-main{display:block}
.spot-live{background:var(--sun)!important;color:#0b0c10!important}
.spot-live::before{background:#0b0c10!important;animation:none!important}
.spot-name{font:400 20px/1.3 var(--f-head)!important}
.spot-desc{font-size:12px!important;color:var(--dim)!important}
.spot-count{margin:auto 0 0!important;font:200 clamp(38px,3.4vw,52px)/1 var(--f-num)!important;letter-spacing:.01em!important;color:var(--text);background:none!important;-webkit-text-fill-color:currentColor!important;filter:none!important}
html[dir="rtl"] .spot-count{text-align:right!important}
html[dir="ltr"] .spot-count{text-align:left!important}
.spot-bar{height:2px!important;border-radius:2px!important;background:var(--line)!important}
.spot-bar i{background:var(--sun)!important;box-shadow:none!important}
.spot-foot{margin:0!important;font-size:12px!important}
.spot[data-active="1"]{border-color:rgba(205,238,180,.35)!important}
.spot[data-active="1"] .spot-count{color:var(--sun)}

.hc-shard .radar{position:absolute;top:28px;inset-inline-end:-34px;width:190px;height:190px}
.radar circle,.radar .cross{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1}
.radar .sweep{transform-box:view-box;transform-origin:50% 50%}
.radar .sweep path{fill:rgba(205,238,180,.07)}
.radar .blip{fill:var(--sun);stroke:none}
.hc-body{position:relative;margin-top:auto;display:grid;gap:2px}
.hc-big{font:400 22px/1.3 var(--f-head)}
.hc-body small{font-size:12.5px;color:var(--dim)}
.hc-shard .hc-foot b{color:var(--sun)}

.hc-ring{--p:0;position:relative;width:118px;height:118px;margin:2px auto 0}
.hc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.hc-ring circle{fill:none;stroke-width:5}
.hc-ring .trk{stroke:rgba(255,255,255,.07)}
.hc-ring .val{stroke:var(--sun);stroke-linecap:round;stroke-dasharray:calc(var(--p) * 1) 100;transition:stroke-dasharray .6s var(--ease)}
.hc-ring b{position:absolute;inset:0;display:grid;place-items:center;font:300 26px var(--f-num)}

.hc-time{gap:8px!important}
.trow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.trow>i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--dim)}
.trow b{display:block;font:500 13px/1.4 var(--f-head)}
.trow small{display:block;overflow:hidden;font-size:11px;line-height:1.4;color:var(--dim);white-space:nowrap;text-overflow:ellipsis}
.trow .num{font:500 15px var(--f-num);color:var(--text)}
.trow.now{border-color:rgba(205,238,180,.3);background:rgba(205,238,180,.05)}
.trow.now>i{background:var(--sun);border-color:var(--sun)}
.trow.now .num{color:var(--sun)}

/* ---------- tools index ---------- */
.sm-index{margin:0!important;padding:clamp(56px,7vw,96px) var(--pad) 0}
.sm-index-grid{gap:10px}
.sm-tool{padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.sm-tool:hover{border-color:var(--line-2)}
.sm-tool svg{stroke:var(--text)}

/* ---------- sections ---------- */
section.block{position:relative;padding:clamp(80px,10vw,136px) var(--pad) 0}
.block>.head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px 40px;align-items:end;margin-bottom:34px}
.block>.head::before{content:var(--k,"");grid-column:1/-1;justify-self:start;direction:ltr;unicode-bidi:isolate;font:600 11px/1 var(--f-num);letter-spacing:.28em;color:var(--dim)}
#today{--k:"01 · DAILY GUIDE"}#shard{--k:"02 · SHARD ERUPTION"}#events{--k:"03 · SCHEDULE"}#spirit{--k:"04 · TRAVELLING SPIRIT"}
#tools{--k:"05 · TOOLS"}#timeline{--k:"06 · SEASONS & EVENTS"}#calendar{--k:"07 · CALENDAR"}#reads{--k:"08 · NEWS & LEAKS"}
.block>.head h2{margin:0;font:300 clamp(32px,4vw,60px)/1.1 var(--f-head);letter-spacing:-.015em}
.block>.head p{justify-self:end;max-width:46ch;margin:0;color:var(--muted);font-size:14.5px;line-height:1.85}
.block>.head .meta{display:block;margin-top:10px}
.date-tag{display:inline-block!important;background:transparent!important;border:1px solid var(--line)!important;border-radius:999px!important;color:var(--muted)!important}
.card{position:relative;min-width:0;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.card.pad,.quests-card{padding:clamp(18px,2vw,24px)}
.sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px;font:500 17px/1.3 var(--f-head)}
.sub svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sub .date-tag{margin-inline-start:auto;font:400 11.5px var(--f-body)}
.sub-note{margin:0 0 16px;font-size:13px;color:var(--dim)}
.notice,.hint{color:var(--dim)!important}

/* inner pieces: one neutral surface everywhere (overrides older navy mobile rules) */
html .quest,html .candle-card,html .cost-card,html .wish-item,html .shard-cell,html .spirit-location,html .nest-item{background:rgba(255,255,255,.025)!important;border:1px solid var(--line)!important}
html .timeline-card,html .news-card,html .event-card,html .events-grid .event-card{background:var(--card)!important;border:1px solid var(--line)!important;box-shadow:none!important;backdrop-filter:none!important}
html .spirit-banner{background:rgba(255,255,255,.03)!important;border:1px solid var(--line)!important}
.spirit-art-wrap{background:#0a0b0e;border-color:var(--line)}
.spirit-art-placeholder,.spirit-art-img{background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.06),#0a0b0e 66%)!important;color:var(--muted)}
.calculator-result>div,.shard-timer{background:rgba(255,255,255,.03)!important;border:1px solid var(--line)!important}
.calculator-fields input,.wish-form input{background:rgba(0,0,0,.35)!important;border-color:var(--line-2)!important}
.calculator-fields input:focus,.wish-form input:focus{border-color:var(--sun)!important;box-shadow:0 0 0 3px rgba(205,238,180,.12)!important}
#shardCountdownTime,.spirit-time,.calculator-result strong,.cost-num{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--text)}
#shardCountdownTime{font-weight:200!important;font-size:clamp(36px,4vw,52px)!important}
.spirit-time,.spirit-overline,.spirit-location strong,.shard-timer .hint{color:var(--sun)!important}
.spirit-name,.cost-num,.calculator-result strong{font-weight:400!important}
.button.primary,.quest-guide-btn{background:#f3f4f6!important;color:#0b0c10!important;border-color:transparent!important;box-shadow:none!important;filter:none!important}
.hero-actions .button.primary:not([aria-pressed="true"]){background:transparent!important;color:var(--muted)!important;border-color:var(--line)!important}
.quest-guide-btn{border-radius:999px!important;font-weight:500!important}
.progress{height:3px!important;background:var(--line)!important}
.progress-bar{background:var(--sun)!important;box-shadow:none!important}
.ring{background:conic-gradient(var(--sun) calc(var(--p)*1%),rgba(255,255,255,.08) 0)!important}
.ring::before{background:#0c0d10!important}
.quest input:checked{background:var(--sun)!important;box-shadow:none!important}
.quest input:checked::after{color:#0b0c10!important}
.event-icon{background:rgba(255,255,255,.04)!important;border:1px solid var(--line)!important;border-radius:12px!important}
.event-card h3{font-weight:500}
.event-count{color:var(--text)!important;font-weight:300!important;text-shadow:none!important}
.event-status.active{background:var(--sun)!important;color:#0b0c10!important;box-shadow:none!important}
.event-card:has(.event-status.active){border-color:rgba(205,238,180,.35)!important}
.event-card:has(.event-status.active) .event-count{color:var(--sun)!important}
.timeline-card{border-inline-start:2px solid rgba(205,238,180,.4)!important}
.candle-realm{color:var(--text)}
.candle-realm .num,.nest-price{background:rgba(255,255,255,.05)!important;color:var(--sun)!important;border-color:var(--line)!important}
.news-toggle,.news-card summary{color:var(--sun)!important}

/* today: quests + stack */
.today{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
.stack{display:grid;gap:20px;align-content:start;min-width:0}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.card-top .sub{margin:0}
#questList{gap:0}
html #questList .quest{padding:14px 0!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:none!important}
#questList .quest:last-child{border-bottom:0!important}
#questList .quest-thumbnail{flex-basis:58px;width:58px;height:58px}
#questList .quest-copy strong{font-size:15.5px;font-weight:500}
.quest-footer{margin-top:8px}
.candles-grid{justify-content:flex-start}
.stack .candle-card{width:100%}

/* shard */
#shard[data-state]{background:none!important}
.shard-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:start}
.shard-cell div:last-child{font-weight:500}
.shard-timer{margin-top:0}
#shard[data-state="red"] .shard-card{border-color:rgba(255,143,156,.45)}

.events-grid{gap:14px}
.block .grid-2{margin-top:0;gap:20px}
.reads-part+.reads-part{margin-top:48px}
#news .status-strip{border-top:0}
.cal-card .sm-cal-top{margin-top:0}
.cal-card .sm-legend{margin-bottom:12px}

/* leak posts: images as a thumbnail grid (one post has 16 images) */
#tgLeaksContent{align-items:flex-start;padding:4px 0 10px!important}
#tgLeaksContent>article{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-content:start;white-space:normal;background:var(--card)!important;border-radius:18px!important}
#tgLeaksContent>article>:not(a){grid-column:1/-1}
#tgLeaksContent>article>a{display:block;aspect-ratio:1;overflow:hidden;border-radius:10px}
#tgLeaksContent>article>a img{width:100%!important;height:100%!important;object-fit:cover;border-radius:0!important}
#tgLeaksContent>article:not(:has(>a:nth-of-type(2)))>a{grid-column:1/-1;aspect-ratio:auto}
#tgLeaksContent>article:not(:has(>a:nth-of-type(2)))>a img{height:auto!important}

/* image-heavy sections are not laid out until they come near the screen */
/* (content-visibility removed in V3: it made the page jump while scrolling/zooming) */

/* footer */
.footer{margin-top:clamp(80px,10vw,130px)!important;padding:32px var(--pad) calc(44px + var(--safe-b))!important;border-top:1px solid var(--line)}
.footer-meta{padding:0!important;color:var(--dim)}
.moon-credit{flex-basis:100%;margin:6px 0 0;font-size:12px;color:var(--dim)}
.moon-credit a,.footer-meta a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-2)}

/* toast: hidden fully when idle (it used to peek over the phone bottom bar) */
.toast{opacity:0;visibility:hidden;background:#0d0e12!important;border-color:var(--line-2)!important;box-shadow:0 20px 50px -10px rgba(0,0,0,.8)!important;transition:transform .35s var(--ease),opacity .25s,visibility 0s .35s}
.toast.show{opacity:1;visibility:visible;transition:transform .35s var(--ease),opacity .25s}

/* navigation: pill nav on wide screens, bottom bar on phones */
.dock{background:rgba(9,10,13,.97)!important;border-color:var(--line-2)!important}
.dock a.active{background:#f3f4f6!important;color:#0b0c10!important;box-shadow:none!important}
@media (min-width:761px){
  .dock{display:none!important}
  #smcBtn{bottom:calc(24px + var(--safe-b,0px))!important}
  #smcPanel{bottom:calc(96px + var(--safe-b,0px))!important}
}

/* ---------- motion ---------- */
/* once, on open: transform + opacity only */
@keyframes smUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes smMoonIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes smDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes smFade{from{opacity:0}to{opacity:1}}
.hero-main>*{animation:smUp .9s var(--ease) both}
.hero-main>:nth-child(2){animation-delay:.07s}.hero-main>:nth-child(3){animation-delay:.14s}
.hero-main>:nth-child(4){animation-delay:.21s}.hero-main>:nth-child(5){animation-delay:.28s}
.moon-orb{animation:smMoonIn 1.6s var(--ease) both .1s}
.orbits circle,.orbits ellipse{stroke-dasharray:100;animation:smDraw 2.2s var(--ease) both .35s}
.orbits ellipse{animation-delay:.6s}
.sat,.moon-tag{animation:smFade 1s ease both 1.2s}
.hero-stats{animation:smUp 1s var(--ease) both .45s}
.hero-cards>*{animation:smUp .9s var(--ease) both}
.hero-cards>:nth-child(1){animation-delay:.35s}.hero-cards>:nth-child(2){animation-delay:.42s}
.hero-cards>:nth-child(3){animation-delay:.49s}.hero-cards>:nth-child(4){animation-delay:.56s}
/* sections fade up once as they scroll in (class added by full.js only below the first screen) */
.rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* small loops: desktop with a mouse only; paused when the hero is off-screen or the tab is hidden */
@keyframes smSpin{to{transform:rotate(360deg)}}
@keyframes smBlip{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes smPulse{50%{opacity:.35}}
@keyframes smBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:no-preference){
  /* moon turns slowly and floats; its orbit rings turn; a small planet and a light travel around it.
     Every loop is transform-only on one small layer, and pauses when the hero is off-screen. */
  .moon-orb{animation:smMoonIn 1.6s var(--ease) both .1s,smBob 11s ease-in-out 1.8s infinite}
  .moon-orb img{animation:smSpin 420s linear infinite}
  .orbits{animation:smSpin 160s linear infinite}
  .orbit-run{animation:smSpin 36s linear infinite}
  .orbit-sat{animation:smSpin 70s linear infinite reverse}
  .radar .sweep{animation:smSpin 6s linear infinite}
  .radar .blip{animation:smBlip 6s ease-in-out infinite}
  .radar .b2{animation-delay:3s}
}
@media (min-width:1025px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .status-chip i{animation:smPulse 2.6s ease-in-out infinite}
}
.orbit-sat{position:absolute;inset:8%;border-radius:50%;pointer-events:none}
.orbit-sat .sat{left:-3.5%;top:50%;width:9%;margin-top:-4.5%}
html.sm-still .moon-orb,html.sm-still .moon-orb img,html.sm-still .orbits,html.sm-still .orbit-sat{animation-play-state:paused!important}
/* shard picture (the page's own copy of the map is replaced by .shard-media) */
#shardMapImage{display:none!important}
.shard-media{display:block;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#0a0b0e}
.shard-media[hidden]{display:none}
.shard-media img{display:block;width:100%;height:auto}
.shard-layout.has-media{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"media grid" "media side"}
.shard-layout.has-media .shard-media{grid-area:media}
.shard-layout.has-media .shard-grid{grid-area:grid}
.shard-layout.has-media .shard-side{grid-area:side}
@media (max-width:760px){.shard-layout.has-media{grid-template-columns:1fr;grid-template-areas:"media" "grid" "side"}}
.candle-img-wrap{border-radius:14px}
/* chat button ring pulsed forever on every device; keep it for desktop only */
@media (max-width:1024px),(pointer:coarse){#smcBtn::before{animation:none!important;opacity:0!important}}
#smcBtn{background:#f3f4f6!important;color:#0b0c10;box-shadow:0 10px 30px -10px rgba(0,0,0,.8)!important}
html.sm-still .orbit-run,html.sm-still .radar *,html.sm-still .status-chip i{animation-play-state:paused!important}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"main moon" "stats stats" "cards cards"}
  .hero-stats{grid-template-columns:repeat(3,1fr);padding:18px 0;border:0;border-block:1px solid var(--line)}
  .hero-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .today{grid-template-columns:1fr}
}

/* ---------- phone ---------- */
@media (max-width:760px){
  .topbar{padding:calc(10px + var(--safe-t)) 14px 10px!important;gap:8px!important}
  .now-chip{display:none!important}
  .brand-name{font-size:19px}
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "moon" "stats" "cards";row-gap:22px;padding-top:calc(84px + var(--safe-t))!important}
  .status-chip{margin-bottom:18px}
  .hero h1{font-size:clamp(36px,10.5vw,48px)!important;line-height:1.15!important}
  .hero-main>p{margin-bottom:22px!important}
  .cta a{flex:1 1 0;justify-content:center;padding:0 14px}
  .hero-actions .button{height:40px}
  .hero-moon{width:min(94vw,430px);margin:-8px auto -14px}
  .orbits circle,.orbits ellipse{stroke-width:2.6}
  .moon-tag{right:0;top:2%;min-width:0;padding:8px 11px}
  .moon-tag b{font-size:13.5px}
  .hero-stats{gap:6px;padding:14px 0}
  .hero-stats svg{width:15px;height:15px;padding:7px}
  .hero-stats b{font-size:22px}
  .hero-cards{gap:10px}
  .hcard{min-height:0;padding:16px!important;border-radius:18px!important}
  .hcard.spot,.hc-time{grid-column:1/-1}
  .hc-shard .radar{top:30px;inset-inline-end:-40px;width:130px;height:130px;opacity:.6}
  .hc-big{font-size:18px}
  .hc-ring{width:92px;height:92px}
  .hc-ring b{font-size:21px}
  a.hcard .hc-foot{flex-direction:column;gap:0;padding-inline-end:40px}
  .hc-go{width:30px;height:30px;bottom:14px;inset-inline-end:14px}
  section.block{padding-top:76px}
  .block>.head{grid-template-columns:1fr;gap:10px;margin-bottom:22px}
  .block>.head p{justify-self:start}
  .shard-layout{grid-template-columns:1fr}
  .card.pad,.quests-card{padding:16px}
  .footer{padding-bottom:calc(110px + var(--safe-b))!important}
  .dock{inset-inline:12px;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
  .hero-main>*,.moon-orb,.orbits circle,.orbits ellipse,.sat,.moon-tag,.hero-stats,.hero-cards>*{animation:none!important}
  .rv{opacity:1;transform:none}
}

/* ---------- SKYMATE_MOON_FULL_V3: phone smoothness fixes ---------- */
/* 1) Nothing may stick out sideways (rotating orbit layers used to poke past the screen edge,
      and phones let you pan into that space). clip, unlike hidden, does not break sticky/fixed. */
html,html body{overflow-x:clip!important;max-width:100%}
.hero{overflow-x:clip}
@supports not (overflow:clip){html,html body,.hero{overflow-x:hidden!important}}

/* 2) An older rule gave every property on every element a 0.12s transition on touch screens, so on
      load ~1,700 elements animated their sizes, fonts and spacing into place (the "slow slide").
      Only cheap, intentional transitions stay. */
@media (max-width:1024px),(pointer:coarse){
  html *,html *::before,html *::after{transition:none!important}
  html .rv.in{transition:opacity .7s var(--ease),transform .7s var(--ease)!important}
  html .toast{transition:transform .3s var(--ease),opacity .2s!important}
  html .progress-bar{transition:width .4s var(--ease)!important}
  html .hc-ring .val{transition:stroke-dasharray .5s var(--ease)!important}
  html .topbar{transition:background .25s!important}
}

/* 3) While the page is zoomed in or being pinched, every loop stops (full.js sets the classes),
      so the phone does not redraw the spinning moon at the zoomed size every frame. */
html.sm-zoomed *,html.sm-zoomed *::before,html.sm-zoomed *::after,
html.sky-pinch-active *,html.sky-pinch-active *::before,html.sky-pinch-active *::after{animation-play-state:paused!important}
html.sm-zoomed .topbar{position:absolute!important}
/* ---------- SKYMATE_MOON_FULL_V4: realistic spinning moon, orbiting Jupiter and Mars, live tags ---------- */
.hero-moon{container-type:inline-size}
.orbits{animation:none!important} /* rings stay put; the planets travel along them */
.orbits .o3{stroke:rgba(255,255,255,.09)}
.globe{position:absolute;overflow:hidden;border-radius:50%;background:#0c0c0e;isolation:isolate}
.globe .strip{position:absolute;top:0;left:0;display:flex;width:400%;height:100%}
.globe .strip img{display:block;flex:0 0 50%;width:50%!important;height:100%!important;object-fit:fill;transform:none!important;animation:none!important}
.globe::after{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 64% 30%,rgba(255,255,255,.12),transparent 32%),
             radial-gradient(circle at 60% 34%,transparent 44%,rgba(0,0,0,.5) 64%,rgba(0,0,0,.97) 84%);
  box-shadow:inset -12px -10px 30px rgba(0,0,0,.75),inset 4px 3px 14px rgba(255,255,255,.06)}
.moon-orb.globe{inset:16%;box-shadow:0 0 110px -24px rgba(255,255,255,.22)}
.moon-orb::after{background:none} /* replaced by .globe::after */
.moon-orb.globe::after{background:radial-gradient(circle at 64% 30%,rgba(255,255,255,.10),transparent 34%),radial-gradient(circle at 60% 34%,transparent 44%,rgba(5,5,7,.5) 64%,rgba(5,5,7,.97) 84%)}

/* each planet: a tilted, flattened ring (po) that spins (po-spin); po-fix spins back and fades/scales
   with depth, and the planet undoes the flattening so it stays round and upright */
.po{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none}
.po-a{width:98.4%;height:98.4%;margin:-49.2% 0 0 -49.2%;transform:rotate(-16deg) scaleY(.2805)}
.po-b{width:91.2%;height:91.2%;margin:-45.6% 0 0 -45.6%;transform:rotate(22deg) scaleY(.386)}
.po-spin{position:absolute;inset:0;border-radius:50%}
.po-fix{position:absolute;left:50%;top:0;width:0;height:0}
.planet.globe{left:0;top:0}
.jupiter{width:12cqw;height:12cqw;margin:-6cqw 0 0 -6cqw;transform:scaleY(3.565) rotate(16deg)}
.mars{width:6.4cqw;height:6.4cqw;margin:-3.2cqw 0 0 -3.2cqw;transform:scaleY(2.591) rotate(-22deg)}
.jupiter::after{box-shadow:inset -8px -6px 18px rgba(0,0,0,.75),0 0 0 1px rgba(255,236,210,.04)}
.mars::after{box-shadow:inset -5px -4px 12px rgba(0,0,0,.75)}
/* still positions (also used when the visitor prefers less motion) */
.po-a .po-spin{transform:rotate(128deg)}.po-a .po-fix{transform:rotate(-128deg)}
.po-b .po-spin{transform:rotate(232deg)}.po-b .po-fix{transform:rotate(-232deg)}

@keyframes smRoll{to{transform:translateX(-50%)}}
@keyframes smOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* angle = -3.6deg per 1%; hidden while it passes behind the moon (top of the ring) */
@keyframes smFixA{
  0%{transform:rotate(0deg) scale(.7);opacity:0}
  10%{transform:rotate(-36deg) scale(.74);opacity:0}
  13%{transform:rotate(-46.8deg) scale(.78);opacity:1}
  25%{transform:rotate(-90deg) scale(.9);opacity:1}
  50%{transform:rotate(-180deg) scale(1.12);opacity:1}
  75%{transform:rotate(-270deg) scale(.9);opacity:1}
  87%{transform:rotate(-313.2deg) scale(.78);opacity:1}
  90%{transform:rotate(-324deg) scale(.74);opacity:0}
  100%{transform:rotate(-360deg) scale(.7);opacity:0}}
@keyframes smFixB{
  0%{transform:rotate(0deg) scale(.72);opacity:0}
  11%{transform:rotate(-39.6deg) scale(.76);opacity:0}
  14%{transform:rotate(-50.4deg) scale(.8);opacity:1}
  25%{transform:rotate(-90deg) scale(.92);opacity:1}
  50%{transform:rotate(-180deg) scale(1.1);opacity:1}
  75%{transform:rotate(-270deg) scale(.92);opacity:1}
  86%{transform:rotate(-309.6deg) scale(.8);opacity:1}
  89%{transform:rotate(-320.4deg) scale(.76);opacity:0}
  100%{transform:rotate(-360deg) scale(.72);opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .moon-orb.globe .strip{animation:smRoll 150s linear infinite}
  .jupiter .strip{animation:smRoll 24s linear infinite}
  .mars .strip{animation:smRoll 34s linear infinite}
  .po-a .po-spin{animation:smOrbit 38s linear infinite}
  .po-a .po-fix{animation:smFixA 38s linear infinite}
  .po-b .po-spin{animation:smOrbit 26s linear infinite}
  .po-b .po-fix{animation:smFixB 26s linear infinite}
}
html.sm-still .hero-moon,html.sm-still .hero-moon *{animation-play-state:paused!important}

/* season / event tags around the moon (filled by full.js from the site data) */
.moon-tag{display:none!important}
.moon-tags{position:absolute;inset:0;z-index:4;pointer-events:none}
.mtag{position:absolute;display:grid;gap:1px;min-width:138px;max-width:210px;padding:9px 13px;border:1px solid var(--line-2);border-radius:12px;background:rgba(10,11,14,.82);text-align:start;animation:smFade .9s ease both}
.mtag small{font-size:11px;color:var(--dim)}
.mtag small i{display:inline-block;width:6px;height:6px;margin-inline-end:6px;border-radius:50%;background:var(--sun);vertical-align:1px}
.mtag.soon small i{background:#9aa0ad}
.mtag b{font:500 14.5px/1.4 var(--f-head)}
.mtag span{font-size:12px;color:var(--muted)}
.mtag.t1{right:-3%;top:5%}
.mtag.t2{left:-6%;bottom:12%}
.mtag.t3{right:2%;bottom:0}
@media (max-width:760px){
  .mtag{min-width:0;max-width:46%;padding:7px 10px}
  .mtag b{font-size:13px}.mtag span,.mtag small{font-size:10.5px}
  .mtag.t1{right:0;top:0}.mtag.t2{left:0;bottom:4%}.mtag.t3{right:0;bottom:-6%}
}

/* ---------- SKYMATE_MOON_FULL_V5: smooth, sharper, sunlit moon ---------- */
/* no bobbing: up/down float on top of the spin read as "jumping" */
.moon-orb,.moon-orb.globe{animation:smMoonIn 1.6s var(--ease) both .1s!important}
/* each spinning surface keeps one steady GPU layer, so it glides instead of stepping */
.globe .strip{will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
@keyframes smRoll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:no-preference){
  .moon-orb.globe .strip{animation:smRoll 120s linear infinite}
}
.moon-orb.globe .strip img{filter:contrast(1.18) brightness(1.06)}
/* sunlight from the upper right: bright limb, soft terminator, dark night side, faint earthshine */
.moon-orb.globe::after{
  background:
    radial-gradient(circle at 70% 26%,rgba(255,255,255,.16),transparent 30%),
    linear-gradient(250deg,transparent 44%,rgba(5,5,7,.5) 64%,rgba(5,5,7,.9) 84%),
    radial-gradient(circle at 58% 40%,transparent 50%,rgba(5,5,7,.55) 72%,rgba(5,5,7,.95) 88%)!important;
  box-shadow:inset 18px -14px 40px rgba(0,0,0,.8),inset -8px 6px 22px rgba(255,255,255,.08)}
.moon-orb.globe{box-shadow:12px -10px 90px -30px rgba(255,255,255,.28)}
/* planets fade out and back in gently when they pass behind the moon (no pop) */
@keyframes smFixA{
  0%{transform:rotate(0deg) scale(.7);opacity:0}
  8%{transform:rotate(-28.8deg) scale(.72);opacity:0}
  15%{transform:rotate(-54deg) scale(.8);opacity:1}
  25%{transform:rotate(-90deg) scale(.9);opacity:1}
  50%{transform:rotate(-180deg) scale(1.12);opacity:1}
  75%{transform:rotate(-270deg) scale(.9);opacity:1}
  85%{transform:rotate(-306deg) scale(.8);opacity:1}
  92%{transform:rotate(-331.2deg) scale(.72);opacity:0}
  100%{transform:rotate(-360deg) scale(.7);opacity:0}}
@keyframes smFixB{
  0%{transform:rotate(0deg) scale(.72);opacity:0}
  9%{transform:rotate(-32.4deg) scale(.74);opacity:0}
  16%{transform:rotate(-57.6deg) scale(.82);opacity:1}
  25%{transform:rotate(-90deg) scale(.92);opacity:1}
  50%{transform:rotate(-180deg) scale(1.1);opacity:1}
  75%{transform:rotate(-270deg) scale(.92);opacity:1}
  84%{transform:rotate(-302.4deg) scale(.82);opacity:1}
  91%{transform:rotate(-327.6deg) scale(.74);opacity:0}
  100%{transform:rotate(-360deg) scale(.72);opacity:0}}
.po-spin,.po-fix{will-change:transform}
.footer-links .img-credit{color:var(--dim);text-decoration:none;font-size:11.5px}
.footer-links .img-credit:hover{color:var(--muted)}

/* footer brand, same as the header: سماء + spaced SKY MATE */
.foot-brand{display:inline-flex;align-items:baseline;gap:10px;margin-bottom:4px;font:600 18px/1.2 var(--f-head);color:var(--text)}
.foot-brand small{font:500 10px/1 var(--f-num);letter-spacing:.42em;color:var(--muted)}
.foot-copy{color:var(--muted)}

/* V6: next Geyser / Grandma tag beside the moon */
.next-ev{z-index:5;pointer-events:none}
.next-ev[hidden]{display:none!important}
.mtag.t4{left:-4%;top:4%;border-color:rgba(205,238,180,.32)}
.next-ev .num{font:500 14px var(--f-num);color:var(--sun)}
.next-ev em{font-style:normal;font-size:11px;color:var(--dim)}
.next-ev.live{background:rgba(205,238,180,.09)}
.next-ev.live small i{animation:smPulse 1.6s ease-in-out infinite}
@media (max-width:760px){.mtag.t4{left:0;top:0}}