/* ============================================================
   SANCTUARY — mobile layer
   Loaded LAST on every page. Everything here is inside a
   max-width media query (or targets injected mobile-only
   elements), so the desktop experience is never changed.
   ============================================================ */

/* injected mobile-only elements are hidden by default (desktop unaffected) */
.nav__burger { display: none; }
.mobilemenu { display: none; }

/* ============================================================
   <= 860px  (phones & small tablets)
   ============================================================ */
@media (max-width: 860px) {

  /* clip any full-bleed fixed atmosphere layers (glows, grain) so phones
     never get a sideways wobble; body-only clip doesn't catch fixed els */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* ---------- hamburger ---------- */
  .nav { padding-left: clamp(1rem, 5vw, 2rem); padding-right: clamp(1rem, 5vw, 2rem); }
  .nav__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 9px; cursor: none;
    background: rgba(7,6,10,.4); border: 1px solid rgba(255,90,31,.3); border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__burger span { display: block; height: 2px; width: 100%; background: var(--ember); border-radius: 2px;
    transition: transform .3s var(--ease), opacity .3s; transform-origin: center; }
  .nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger.is-open span:nth-child(2) { opacity: 0; }
  .nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---------- slide-in menu ---------- */
  .mobilemenu {
    display: block; position: fixed; inset: 0; z-index: 300;
    background: rgba(5,3,6,0); backdrop-filter: blur(0);
    opacity: 0; visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s, background .4s, backdrop-filter .4s;
  }
  .mobilemenu.is-open { opacity: 1; visibility: visible; background: rgba(5,3,6,.9); backdrop-filter: blur(10px); }
  .mobilemenu__inner {
    position: absolute; top: 0; right: 0; height: 100%; width: min(82vw, 340px);
    display: flex; flex-direction: column; gap: .4rem;
    padding: clamp(5rem,14vh,8rem) clamp(1.6rem,7vw,2.4rem) 2rem;
    background: linear-gradient(200deg, #170c0c, #0a0608);
    border-left: 1px solid rgba(255,90,31,.25);
    box-shadow: -30px 0 80px rgba(0,0,0,.7);
    transform: translateX(100%); transition: transform .45s var(--ease);
  }
  .mobilemenu.is-open .mobilemenu__inner { transform: none; }
  .mobilemenu__cap { font-family: var(--decor); font-weight: 900; letter-spacing: .25em; font-size: .8rem;
    color: var(--ember); margin-bottom: 1.4rem; }
  .mobilemenu__link {
    font-family: var(--decor); font-weight: 700; font-size: 1.7rem; line-height: 1.1;
    color: var(--bone); text-decoration: none; padding: .55rem 0; cursor: none;
    border-bottom: 1px solid rgba(216,203,184,.08); transition: color .25s, padding-left .25s;
  }
  .mobilemenu__link:hover, .mobilemenu__link.is-here { color: var(--ember); padding-left: .5rem; }
  .mobilemenu__link.is-here { border-left: 2px solid var(--ember); padding-left: .7rem; }
  .mobilemenu__search {
    margin-top: 1.4rem; align-self: flex-start; cursor: none; background: none;
    border: 1px solid rgba(255,90,31,.4); border-radius: 999px; padding: .7rem 1.2rem;
    font-family: var(--display); letter-spacing: .2em; font-size: .72rem; text-transform: uppercase; color: var(--bone);
  }

  /* keep the scry trigger clear of the hero scroll cue */
  .hero__scroll { left: 50%; transform: translateX(-50%); bottom: 5.5rem; }
  .scry-trigger { bottom: 1rem; left: 1rem; }
  .soundtoggle { bottom: 1rem; right: 1rem; }
  .hero__year { display: none; }

  /* slightly larger tap targets across interactive chips */
  .gamebar__btn { padding-top: 1rem; padding-bottom: 1.3rem; }
}

/* ============================================================
   <= 560px  (phones)
   ============================================================ */
@media (max-width: 560px) {
  /* tame the giant bleeding numerals so nothing causes side-scroll */
  .game__numeral, .stratum__num, .gnum, .stage2__ghost, .saga__bigword { opacity: .5; }
  .game__numeral { font-size: clamp(7rem, 30vw, 12rem); }

  /* hero meta wraps cleanly */
  .hero__meta { gap: .4rem .8rem; }

  /* descent: keep depth gauge from crowding text */
  .gauge { right: .5rem; }
  .gauge__fathoms { font-size: .85rem; }

  /* game chapter pages: comfortable single column already; tighten facts */
  .gfacts { gap: 1.4rem 2rem; }

  /* the Scrying box uses more of the screen */
  .scry { padding-top: 8vh; }
  .scry__input { font-size: 1rem; }

  /* sound toggle + scry trigger: compact so they don't collide on tiny screens */
  .soundtoggle, .scry-trigger { font-size: .54rem; padding: .55rem .8rem; }
}

/* ============================================================
   very small ( <= 380px )
   ============================================================ */
@media (max-width: 380px) {
  .scry-trigger kbd { display: none; }       /* save room on the tiniest phones */
  .mobilemenu__link { font-size: 1.5rem; }
}

/* taller phones in landscape: let the tome book breathe */
@media (max-width: 860px) and (orientation: landscape) {
  .page--index { max-height: 50vh; }
}