/* ============================================================
   Responsive layer — phones & tablets. Loaded after each page's
   inline <style>, so these rules win on the cascade. Desktop is
   untouched (everything is inside media / coarse-pointer queries).
   ============================================================ */

/* never allow sideways scrolling on small screens */
html, body { max-width: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; }

/* ---- touch / no-hover devices: drop the custom cursor, restore normal tapping ---- */
@media (hover: none), (pointer: coarse) {
  * { cursor: auto !important; }
  #cur, #cur-f { display: none !important; }
  a, button, .magnetic, .btn-gold, .btn-outline, .btn-ghost,
  input, select, textarea, [role="button"] { cursor: pointer !important; }
}

/* ---- mobile navigation (hamburger) — injected button + slide-down panel ---- */
.mnav-toggle { display: none; }                 /* hidden on desktop */
body.mnav-lock { overflow: hidden; }

@media (max-width: 860px) {
  /* hamburger button (injected by mobile-nav.js) */
  .mnav-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; width: 44px; height: 44px; flex-shrink: 0;
    background: rgba(10,10,10,.55); border: 1px solid rgba(216,180,120,.32);
    border-radius: 8px; cursor: pointer; z-index: 1300; position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-toggle span {
    display: block; width: 20px; height: 2px; background: var(--gold-mid,#D8B478);
    border-radius: 2px; transition: transform .3s, opacity .3s;
  }
  nav.mnav-open .mnav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.mnav-open .mnav-toggle span:nth-child(2) { opacity: 0; }
  nav.mnav-open .mnav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* full-screen slide-down menu — overrides the inline `display:none` */
  nav .nav-links {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px; position: fixed; inset: 0; margin: 0; padding: 90px 24px 40px;
    background: rgba(8,8,11,.98); backdrop-filter: blur(16px);
    transform: translateY(-100%); transition: transform .42s cubic-bezier(.4,0,.2,1);
    z-index: 1250; overflow-y: auto; list-style: none;
  }
  nav.mnav-open .nav-links { transform: translateY(0); }
  nav .nav-links > li { width: auto; text-align: center; }
  nav .nav-links a { font-size: 19px !important; color: #fff !important; padding: 8px 4px; letter-spacing: .04em; }
  nav .nav-links a.nav-cta { color: var(--gold-mid,#D8B478) !important; border: 1px solid rgba(216,180,120,.4); padding: 12px 30px; border-radius: 6px; }

  /* expand the "Experiences" dropdown inline (no hover on touch) */
  nav .nav-dropdown { position: static; }
  nav .nav-dropdown::after { display: none !important; }
  nav .nav-dropdown > a { pointer-events: none; opacity: .55; font-size: 12px !important;
    letter-spacing: .25em; text-transform: uppercase; }
  nav .drop-menu {
    position: static !important; opacity: 1 !important; pointer-events: all !important;
    transform: none !important; display: flex !important; flex-direction: column; gap: 14px;
    background: transparent !important; border: 0 !important; min-width: 0; padding: 12px 0 4px;
    backdrop-filter: none !important;
  }
  nav .drop-menu a { font-size: 15px !important; color: var(--gold-mid,#D8B478) !important; white-space: normal; padding: 4px; }
}

/* ---- general small-screen polish ---- */
@media (max-width: 768px) {
  /* keep the floating controls from colliding at the bottom edge */
  #langWrap { bottom: 18px !important; right: 14px !important; }
  .back-warp { bottom: 18px !important; left: 14px !important; }
  /* tables that are too wide become horizontally scrollable instead of breaking layout */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* comfortable tap targets for inline demo buttons */
  button, .btn-gold, .btn-outline, .btn-ghost, .ap-btn, .ad-sugg, .cs-btn { min-height: 40px; }
}

/* very small phones — keep headlines from overflowing */
@media (max-width: 380px) {
  .hero-title, .hero-title .tl span { letter-spacing: -.02em; }
}

/* ---- homepage planet/moon labels: flip to the open side so they stay on a phone screen ---- */
/* planet HUD readout mirrored to the LEFT when the planet is on the right half */
.planet-label.lf .pl-line { left: auto; right: 50%; transform-origin: right center;
  background: linear-gradient(to left, var(--planet-c, var(--gold-mid)), transparent); }
.planet-label.lf .pl-line::after { right: auto; left: 0; }
.planet-label.lf .pl-box { left: auto; right: calc(50% + 70px); text-align: right;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.planet-label.lf:hover .pl-box { transform: translateY(-50%) translateX(-3px); }
.planet-label.lf .pl-id { flex-direction: row-reverse; justify-content: flex-end; }
/* moon label mirrored (the JS adds translateX(-100%) so it grows leftward) */
.moon-label.ml-lf { flex-direction: row-reverse; }

/* compact labels on phones so they fit comfortably either side */
@media (max-width: 768px) {
  .pl-line { width: 30px; }
  .pl-box { left: calc(50% + 38px); padding: 8px 11px 9px; }
  .planet-label.lf .pl-box { right: calc(50% + 38px); left: auto; }
  .pl-name { font-size: 10px; }
  .pl-type, .pl-id { font-size: 7.5px; }
  .moon-label { font-size: 8px; }
}