/* ══════════════════════════════════════════════════════
   mobile.css  —  touch & responsive overrides
   Loaded after style.css — only activates at ≤640px
   or on touch devices. Zero changes to desktop layout.
   ══════════════════════════════════════════════════════ */

/* ── Touch hit areas for stars ───────────────────────
   Each .star gets an invisible 44×44px tap target
   centred on it. The visual dot stays unchanged.      */
.star::after {
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:44px; height:44px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  /* Uncomment to debug hit areas: background:rgba(255,0,0,.15); */
}

/* ── Hamburger button ────────────────────────────────*/
#hamburger {
  display:none;
  flex-direction:column; justify-content:center; align-items:center;
  gap:5px;
  width:36px; height:36px;
  background:transparent; border:.5px solid var(--tbor); border-radius:50%;
  cursor:pointer; padding:0; color:var(--tmut); font-size:16px;
  transition:border-color .2s, color .2s;
}
#hamburger:hover { border-color:var(--gold); color:var(--gsoft); }
#hamburger span {
  display:block; width:14px; height:.5px;
  background:currentColor; border-radius:1px;
  transition:transform .25s, opacity .25s;
}

/* Menu overlay (closes nav on tap outside) */
#menu-overlay {
  display:none; position:fixed; inset:0; z-index:195;
}
#menu-overlay.show { display:block; }

/* ── Mobile breakpoint ───────────────────────────────*/
@media (max-width:640px) {

  /* Show hamburger, hide nav links by default */
  #hamburger { display:flex; }

  #nav-links-mobile {
    /* Hidden off-screen by default */
    position:fixed; top:0; right:0; bottom:0; width:min(280px,80vw);
    background:rgba(9,10,19,0.98); border-left:.5px solid var(--tbor);
    backdrop-filter:blur(28px);
    flex-direction:column; align-items:flex-start;
    padding:72px 28px 40px;
    gap:8px;
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.16,1,.3,1);
    z-index:196; pointer-events:none;
  }
  #nav-links-mobile.mobile-open {
    transform:translateX(0);
    pointer-events:all;
  }

  /* Nav tabs full-width in menu */
  #nav-links-mobile .nav-tab,
  #nav-links-mobile .nav-cta {
    width:100%; text-align:left; padding:12px 16px;
    font-size:13px; border-radius:8px;
  }
  #nav-links-mobile .nav-sep   { display:none; }
  /* Hide the search button inside the hamburger menu —
     it lives outside the menu as #mobile-search-btn instead */
  #nav-links-mobile .nav-search { display:none; }

  /* Standalone search + hamburger buttons in nav */
  #mobile-search-btn {
    display:flex;   /* always visible on mobile */
  }
  /* Space between search and hamburger */
  nav > #mobile-search-btn { margin-left:auto; margin-right:6px; }

  /* Nav left: logo stays, planets stay, less padding */
  nav { padding:16px 20px; }
  .nav-left { gap:14px; }
  .logo { font-size:17px; }

  /* Hero text: smaller, more compact */
  #hero-text { left:20px; bottom:80px; }
  #hero-text h1 { font-size:clamp(28px,7vw,40px); }

  /* Star badge: tighter */
  #star-badge { font-size:9px; top:62px; }

  /* Coords HUD: bottom-left, doesn't clash with zoom controls */
  #coords-hud { left:20px; bottom:20px; font-size:10px; }

  /* Zoom controls: smaller, less intrusive */
  #zoom-controls { right:20px; bottom:20px; }
  .zoom-btn { width:28px; height:28px; font-size:15px; }

  /* ── Panel: full-width bottom sheet on mobile ── */
  #panel {
    width:100vw;
    border-radius:var(--r) var(--r) 0 0;
    padding:22px 20px 28px;
    /* Extra bottom padding for home indicator on iOS */
    padding-bottom:max(28px, env(safe-area-inset-bottom, 28px));
    /* Transition managed by visualViewport in mobile.js */
    transition:transform .5s cubic-bezier(.16,1,.3,1), bottom .15s ease;
  }

  /* Tier cards: slightly tighter on small screens */
  .tname  { font-size:10px; }
  .tprice { font-size:16px; }
  .tdot   { width:7px; height:7px; }

  /* Fields: larger touch targets */
  .field input, .field textarea {
    font-size:16px; /* prevents iOS auto-zoom on focus */
    padding:13px 14px;
  }

  /* Success overlay: tighter on small screens */
  .succ-title { font-size:28px; }
  .succ-actions { flex-direction:column; align-items:center; width:100%; max-width:280px; }
  .btn-cert, .btn-close-succ { width:100%; text-align:center; }

  /* Search bar: full width */
  #search-bar { width:100vw; border-radius:0 0 var(--r) var(--r); }

  /* Info page: full width on mobile */
  #info-page { width:100vw; }

  /* Last-100 badge: above zoom controls */
  #last100-badge { bottom:70px; }

  /* Tooltip: fixed readable size regardless of page zoom level */
  .star-tip {
    max-width:min(260px, calc(100vw - 32px));
    white-space:normal;
  }
  .stt-name { font-size:16px; }
  .stt-to   { font-size:12px; }
  .stt-msg  { font-size:13px; max-width:none; }

  /* Panel handle: much taller invisible tap zone */
  .ph {
    width:44px; height:5px;
    padding-top:18px; margin-bottom:14px;
    background-clip:content-box;
    cursor:grab;
  }
}

/* ── Safe area insets for notched phones ─────────────*/
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  nav {
    padding-top:max(16px, env(safe-area-inset-top, 16px));
  }
  #panel.open {
    padding-bottom:max(28px, env(safe-area-inset-bottom, 28px));
  }
}