/* Mythica Stars & Soil — the vertical Sight (v3, inject not iframe).
   Native scroll panes (no iframe → no double-bounce). Each field paints its
   post's own background; a centred dark column holds the content, so the bg
   shows on the margins like the live theme. */

#mss-root {
  position: fixed; inset: 0; z-index: 99990; overflow: hidden; background: #05060d;
  color: #e9edf9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* lock the host page behind the switch — only a pane's own scroller moves */
html.mss-active, html.mss-active body { overflow: hidden !important; height: 100%; }

/* THE WHOLE FIELD FLIPS in place (cross-fade), not a slide. */
.mss-field {
  position: absolute; inset: 0; overflow: hidden;
  background-color: #05060d; background-size: cover; background-position: center;
  opacity: 0; pointer-events: none; transition: opacity 620ms ease;
}
#mss-root[data-view="stars"] .mss-stars,
#mss-root[data-view="soil"]  .mss-soil { opacity: 1; pointer-events: auto; }

/* the native scroller — smooth, contained, no chaining to the page */
.mss-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 84px 20px 120px;
}
.mss-scroll::-webkit-scrollbar { width: 8px; }
.mss-scroll::-webkit-scrollbar-thumb { background: rgba(240,212,147,.28); border-radius: 4px; }

/* the centred dark column — content readable, background on the margins */
.mss-col {
  max-width: 760px; margin: 0 auto; padding: 34px 32px 44px;
  background: rgba(14,17,26,.9); border-radius: 16px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

.mss-eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; margin: 0 0 12px; }
.mss-star-eb { color: #9db6ff; } .mss-soil-eb { color: #e6b978; }
.mss-date { display: inline-flex; gap: 8px; align-items: center; margin: 0 0 16px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #f0d9a6;
  border: 1px solid rgba(240,212,147,.34); border-radius: 999px; padding: 6px 12px; }
.mss-date b { color: #fff; text-transform: none; font-size: 13px; }
.mss-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600;
  font-size: clamp(32px, 6vw, 48px); line-height: 1.05; margin: 0 0 6px; }
.mss-stars .mss-title { color: #eef2ff; } .mss-soil .mss-title { color: #f6ead2; }
.mss-sub { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: 18px; opacity: .9; margin: 0 0 22px; }
.mss-stars .mss-sub { color: #b9c6f2; } .mss-soil .mss-sub { color: #d8c39c; }
.mss-content { font-size: 16px; line-height: 1.72; color: #dbe2f2; }
.mss-content img { max-width: 100%; height: auto; border-radius: 10px; }
.mss-content a { color: #f2d79a; }
.mss-loading { opacity: .5; }

/* the vertical SIGHT switch — where Mundus/Mythica used to sit, top-right */
#mss-switch {
  position: fixed; top: 84px; right: 20px; z-index: 99992;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px;
  border-radius: 16px; background: rgba(10,13,26,.62); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
#mss-switch .s-cap { font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: #7f8dba; text-align: center; margin: 1px 0 3px; }
#mss-switch button {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 12px; border-radius: 11px; color: #aeb9de;
  font-size: 13px; font-weight: 600; transition: all .25s;
}
#mss-switch button .g { width: 16px; text-align: center; }
#mss-root[data-view="stars"] #mss-switch .b-stars { color: #eaf1ff; background: linear-gradient(120deg, rgba(120,150,255,.32), rgba(90,110,220,.2)); box-shadow: 0 0 16px rgba(120,150,255,.35); }
#mss-root[data-view="soil"]  #mss-switch .b-soil  { color: #fff1d8; background: linear-gradient(120deg, rgba(240,190,120,.32), rgba(200,150,70,.2)); box-shadow: 0 0 16px rgba(240,200,130,.32); }
#mss-switch button:hover { color: #fff; }

/* the orienting card — names where you are, then fades */
#mss-card { position: fixed; inset: 0; z-index: 99993; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity .5s ease; }
#mss-card.show { opacity: 1; }
#mss-card .cb { text-align: center; padding: 20px 40px; border-radius: 16px; background: rgba(6,8,16,.34);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#mss-card .cw { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(42px,10vw,58px);
  font-weight: 600; color: #fff; line-height: 1; text-shadow: 0 2px 40px rgba(0,0,0,.7); }
#mss-card .cn { margin-top: 9px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.72); }
#mss-root[data-view="stars"] #mss-card .cw { color: #eaf1ff; text-shadow: 0 0 44px rgba(120,150,255,.5); }
#mss-root[data-view="soil"]  #mss-card .cw { color: #f6ead2; text-shadow: 0 0 44px rgba(240,190,120,.4); }

@media (max-width: 640px) {
  #mss-switch { top: 66px; right: 12px; }
  .mss-scroll { padding: 74px 12px 110px; }
  .mss-col { padding: 26px 20px 34px; }
}