/* ============================================================
   FANWARD MOBILE LAYER  (mobile.css)
   Every visual rule is gated to max-width:767px, so DESKTOP IS
   NEVER AFFECTED. The only ungated rule hides two brand-new
   elements the hamburger script injects (no desktop impact).
   ============================================================ */

/* new injected elements — hidden until the mobile query shows them */
.m-nav-toggle, .m-nav-panel, .m-subnav-toggle { display: none; }

@media (max-width: 1280px), (orientation: portrait) {

  /* ---- 1. kill horizontal overflow site-wide ---- */
  html, body { overflow-x: hidden !important; max-width: 100vw; }
  img, svg, video, iframe, canvas { max-width: 100%; }

  /* ---- 1b. ANIMATIONS OFF on mobile (per user). Motion is disabled but end-states
           are preserved — animations complete instantly instead of being removed, so
           elements that fade/slide IN (opacity:0 → 1) still end up visible. ---- */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* exception: the homepage comic-strip image bar keeps auto-scrolling on mobile */
  .comic-track { animation-duration: 90s !important; animation-iteration-count: infinite !important; }

  /* ---- 2. NAV → hamburger ---- */
  nav { grid-template-columns: auto 1fr auto !important; padding: 0 1rem !important; }
  nav > .nav-links, nav > .nav-actions { display: none !important; }
  nav .nav-logo img { height: 34px; }

  .m-nav-toggle {
    display: flex !important; flex-direction: column; justify-content: center; gap: 5px;
    position: absolute; right: 1rem; top: 0; height: 64px; width: 44px; padding: 10px 0;
    background: none; border: none; cursor: pointer; z-index: 1003;
  }
  .m-nav-toggle span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease; }
  .m-nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .m-nav-toggle.active span:nth-child(2) { opacity: 0; }
  .m-nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .m-nav-panel {
    display: block !important; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 1001;
    background: rgba(6,6,16,.98); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    padding: .8rem 1.2rem 2.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform .28s ease; visibility: hidden;
  }
  body.m-nav-open .m-nav-panel { transform: translateX(0); visibility: visible; }
  body.m-nav-open { overflow: hidden; }

  .m-nav-panel .nav-links { display: flex !important; flex-direction: column; align-items: stretch;
    gap: 0; list-style: none; margin: 0; padding: 0; }
  .m-nav-panel .nav-links li { width: 100%; position: static; }
  .m-nav-panel .nav-links li a, .m-nav-panel .nav-more-btn {
    display: block; width: 100%; text-align: left; padding: .95rem .3rem !important;
    font-size: 1.02rem !important; letter-spacing: .1em !important; border-bottom: 1px solid rgba(255,255,255,.08);
    background: none; }
  .m-nav-panel .nav-more { position: static; }
  .m-nav-panel .nav-more::after { display: none; }
  .m-nav-panel .nav-dropdown { display: block !important; position: static !important; opacity: 1 !important;
    border: none !important; background: transparent !important; min-width: 0; padding: 0 0 .4rem .9rem; }
  .m-nav-panel .nav-dropdown a { padding: .7rem .3rem !important; font-size: .9rem !important; opacity: .8;
    border-bottom: 1px solid rgba(255,255,255,.05); }
  .m-nav-panel .nav-links li a::after { display: none !important; }
  .m-nav-panel .nav-actions { display: flex !important; flex-direction: column; gap: .6rem; margin-top: 1.3rem; }
  .m-nav-panel .nav-actions a { width: 100%; text-align: center; padding: .8rem 1rem !important; clip-path: none; }

  /* ---- 3. HERO scenes: don't force full desktop height, clip stray figures ---- */
  #scene { height: auto !important; min-height: 74vh !important; }
  .hero { min-height: auto !important; }

  /* hero title CONTAINERS: strip the big desktop side-padding so text has room */
  .calder-title, .au-title, .pp-title, .hero-content, .calder-frame,
  .au-frame, .pp-frame, .calder-inner, .au-inner, .pp-inner { padding-left: .7rem !important; padding-right: .7rem !important; }
  .calder-title::before, .pp-title::before, .au-title::before { left: 0 !important; right: 0 !important; }

  /* headings that overflow — shrink for phones */
  .hero-title      { font-size: clamp(1.9rem, 9.5vw, 2.7rem) !important; }
  .calder-heading  { font-size: clamp(1.7rem, 9vw, 2.6rem) !important; line-height: 1.04 !important; }
  .au-heading, .au-name { font-size: clamp(1.8rem, 9.5vw, 2.8rem) !important; }
  .pp-heading      { font-size: clamp(2rem, 11vw, 3.1rem) !important; }
  .ph-heading      { font-size: clamp(1.7rem, 8vw, 2.5rem) !important; }
  .cta-title, .q-title, .fv-title { font-size: clamp(1.7rem, 8vw, 2.4rem) !important; }
  .calder-h2, .au-h2, .pp-h2, .myth-h2, .section-title { font-size: clamp(1.5rem, 6.5vw, 2.1rem) !important; }
  .calder-heading, .au-heading, .au-name, .pp-heading, .hero-title, .ph-heading, .cta-title,
  .calder-h2, .au-h2, .pp-h2 { word-break: break-word; overflow-wrap: anywhere; }

  /* ---- 4. HUB HEROES on mobile → clean poster: hide the floating character(s)
           for simplicity (per user: characters stay on the experience page, but come
           off the hub heroes on mobile). Background scene + title + CTA remain. ---- */
  #scene { min-height: 80vh !important; }
  /* floating hero CHARACTERS — removed on mobile (scenery like bg/ship/grass stays) */
  .au-figure, .au-sec-figure,
  .calder-wolf, .plx-wolf, .calder-characters, .calder-standee,
  .nl-pan, .nl-hook, .nl-tink,
  .pan-swing, .pan-hook-sway,
  /* + ambient clutter (fog, sparks, crest, stray floaters) */
  .au-speedlines, .au-notes, .au-note, .au-ember, .au-embers, .au-dino, .au-bushido,
  .calder-fog, .calder-midfog, .calder-botfog, .scene-tree,
  .game-stamp, .coffee-scrawl, .coffee-wrap .coffee-scrawl,
  .pp-dust, .pp-swing, .pp-hook-sway,
  /* sub-page hero characters — removed on mobile/portrait only, kept on desktop:
     story (his/her story) · bushido · positive-energy · bestiary · no-off-season · PP story */
  .story-fig, .bushido-fig, .noff-fig, .pp-pan {
    display: none !important;
  }
  /* even, readable overlay — no figure needs to show through now */
  .au-overlay, .calder-overlay, .pp-overlay {
    background: linear-gradient(180deg, rgba(4,4,12,.5) 0%, rgba(4,4,12,.42) 40%, rgba(4,4,12,.8) 100%) !important;
  }

  /* ---- 5. sub-nav pill bars → each collapses into its OWN hamburger dropdown.
           mobile.js injects a `.m-subnav-toggle` bar; the pill bar becomes the panel
           that drops down below it. ---- */
  .m-subnav-toggle {
    display: flex !important; align-items: center; justify-content: center; gap: .5rem;
    position: absolute !important; top: 64px !important; left: 0 !important; right: 0 !important;
    height: 44px !important; z-index: 21 !important; border: none !important; cursor: pointer;
    background: rgba(8,4,12,.85) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff !important; font-family: 'Rajdhani', sans-serif; font-weight: 700;
    font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
    border-bottom: 1px solid rgba(147,51,234,.4) !important;
  }
  .m-subnav-toggle .m-sub-ico { display: inline-flex; flex-direction: column; gap: 3px; }
  .m-subnav-toggle .m-sub-ico i { display: block; width: 17px; height: 2px; background: #fff; border-radius: 2px; }

  .calder-btns, .au-btns, .nl-btns {
    top: 108px !important;                 /* sit just under the injected toggle bar */
    flex-direction: column !important; align-items: stretch !important;
    flex-wrap: nowrap !important; justify-content: flex-start !important;
    gap: 0 !important; padding: 0 !important;
    max-height: 0 !important; overflow: hidden !important;
    background: rgba(6,6,16,.98) !important; z-index: 20 !important;
  }
  .au-btns.m-subnav-open, .calder-btns.m-subnav-open, .nl-btns.m-subnav-open {
    max-height: 74vh !important; overflow-y: auto !important;
    padding: .3rem 0 !important; border-bottom: 2px solid rgba(147,51,234,.45) !important;
  }
  /* pills → full-width rows inside the dropdown */
  .au-btn, .c-btn, .pp-btn, .pan-btn {
    width: 100% !important; margin: 0 !important; text-align: center !important;
    clip-path: none !important; border-radius: 0 !important; white-space: nowrap;
    padding: .82rem 1rem !important;
  }

  /* ---- 6. grids ---- */
  /* content/feature grids → one column */
  .features-grid, .feature-grid, .tier-grid, .benefits-grid, .team-grid,
  .video-grid, .myth-portal-grid, .cards-grid {
    grid-template-columns: 1fr !important;
  }
  /* character rosters → TWO per row (galleries too); keep the single faction-lead card */
  .calder-cards, .char-cards, .chars-grid:not(.faction-lead), .cast-grid,
  .gal-grid {
    grid-template-columns: repeat(2, 1fr) !important; gap: .6rem !important;
  }
  .chars-grid.faction-lead { grid-template-columns: minmax(0,340px) !important; }

  /* result cards / two-col splits → stack */
  .r-main.r-split { flex-direction: column !important; }
  .r-img { align-self: center !important; height: auto !important; max-height: 46vh; width: auto; }
  .char-modal-panel, .game-modal-panel, .gate-panel { flex-direction: column !important; max-height: 92vh; }

  /* free-videos section not full-height on mobile */
  .free-videos { min-height: auto !important; padding: 1.4rem 1rem 2.5rem !important; }
  .fv-frame { height: auto !important; }

  /* ---- 7. general containers: pad in, prevent wide children ---- */
  .calder-inner, .au-inner, .pp-inner, .myth-inner, .free-videos-inner,
  section > .inner, .container { max-width: 100% !important; }
  .calder-section, .au-section, .pp-section, .myth-section { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }

  /* floated story figures → full width block on mobile */
  .pp-figure.fig-left, .pp-figure.fig-right,
  .calder-figure.fig-left, .calder-figure.fig-right,
  .myth-fig.fig-left, .myth-fig.fig-right { float: none !important; width: 100% !important; margin: 1.4rem auto !important; }

  /* ---- 8. footer: keep it compact — logo on top, the two store badges side-by-side ---- */
  .footer-top {
    flex-wrap: wrap !important; align-items: center !important;
    gap: .5rem 1rem !important; margin-bottom: 1.1rem !important;
  }
  .footer-logo { order: -1; flex-basis: 100% !important; height: 38px !important; width: auto !important; object-fit: contain !important; }
  .footer-badge-side { flex: 0 0 auto !important; }
  .footer-store-apple  { height: 38px !important; }
  .footer-store-google { height: 54px !important; margin-left: 0 !important; }
  .footer-links { gap: 0 !important; margin-bottom: .9rem !important; }
  .footer-links a { padding: .25rem .6rem !important; }

  /* ---- 9. EXPERIENCES page (mobile): the preview "hero" only works on hover, which
           touch devices don't have — so drop it and let the character grid fill the
           whole frame. Multiple rows, vertical page-scroll, tap a card to open. ---- */
  /* let the screen grow with the grid and the page scroll normally */
  .select-screen { height: auto !important; min-height: calc(100svh - 64px) !important; overflow: visible !important; display: block !important; }
  /* the select page pins html{overflow:hidden} for its fixed full-screen desktop layout;
     on mobile the character grid runs past the viewport, so re-enable vertical scrolling */
  html { overflow-y: auto !important; }

  /* preview panel → collapse to just its title bar; hide all the hover-only hero bits */
  .preview-panel {
    height: auto !important; min-height: 0 !important; flex: none !important;
    overflow: visible !important; border-bottom: none !important; background: transparent !important;
    padding: 1.3rem 1rem .3rem !important;
  }
  .preview-panel::before, .preview-panel::after { display: none !important; }
  .hit-effects, .char-img-wrap, .char-img, .preview-glow,
  .preview-name-wrap, .preview-name, .select-prompt, .bio-box { display: none !important; }
  .select-header { position: static !important; animation: none !important; padding: 0 !important; }

  /* character select → full-frame 2-column grid, vertical scroll */
  .char-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: .55rem !important;
    height: auto !important;
    padding: .8rem .8rem 2rem !important;
    overflow: visible !important;
    background: var(--bg-2) !important;
  }
  .char-row > * {
    width: auto !important; height: auto !important;
    aspect-ratio: 3 / 4 !important;
    min-width: 0;
  }
  /* portrait art anchored to the top so faces read first */
  .char-slot img { object-position: top center !important; }
  .char-slot .slot-tag { font-size: .82rem !important; }
  .char-slot .slot-placeholder { font-size: .95rem !important; }

  /* ---- 10. CONTACT widget → a single chat bubble on mobile (no FAQ / faniac / collapse).
           The bubble reuses #cw-toggle, so it opens the same contact form. ---- */
  #cw-faniac, #cw-faq, #cw-collapse, #cw-bubble-row { display: none !important; }
  #cw-btn-row { gap: 0 !important; }
  #cw-toggle {
    width: 58px !important; height: 58px !important; min-width: 0 !important;
    padding: 0 !important; border-radius: 50% !important;
    justify-content: center !important; gap: 0 !important; clip-path: none !important;
  }
  #cw-toggle-label { display: none !important; }
  #cw-toggle .cw-toggle-icon { width: 26px !important; height: 26px !important; }
  #cw-panel { width: min(320px, calc(100vw - 2rem)) !important; }

  /* ---- 11. PETER PAN hero scenery — small mobile-only position nudges (transform is
           owned by the pop-up animation, so we shift via `bottom`). ---- */
  .nl-rbush   { bottom: 0vh !important; }   /* red flower bush → lower ~5% */
  .nl-palm-l1 { bottom: -3vh !important; }  /* far-left tree → lower ~2% */

  /* ---- 12. STORYBOOK reader → bigger book on mobile ---- */
  .book-wrap { padding: 54px .3rem 54px !important; }
  .book { height: min(82vh, 760px) !important; max-width: 96vw !important; }

  /* ---- 13. Character pages (mobile): cards show PORTRAIT + NAME only; a tap opens the
           bio modal (already wired to .char-card, so nothing else to add). ---- */
  .char-card .char-role, .char-card .char-desc { display: none !important; }
  .char-card .char-name { margin: 0 !important; text-align: center !important; }
  .char-card .char-info { padding: .5rem .4rem .7rem !important; }

  /* ---- 14b. index: drop the floating Faniac mascots on mobile ---- */
  .faniac-col, .faniac2-col { display: none !important; }

  /* ---- 14. index "Our Artists" portrait cards → clean 2×2 on mobile ---- */
  .portraits-grid { gap: .8rem !important; }
  .portraits-grid .portrait-card {
    flex: 0 0 calc(50% - .6rem) !important;
    width: calc(50% - .6rem) !important; max-width: calc(50% - .6rem) !important;
  }

}

/* ── Non-widescreen LANDSCAPE only (resized / split-screen desktop windows: 768–1280px
      wide AND wider than tall). These use the mobile layout above, but the hero content
      is absolutely positioned (title vertically centered, CTA pinned near the bottom) and
      collides at short heights — the pill-on-quote overlap. Flow it into one centered
      column so nothing can overlap. Portrait phones & vertical monitors are excluded, so
      their tall, already-perfect hero is untouched. ── */
@media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
  #scene {
    height: auto !important; min-height: 84vh !important; max-height: none !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    padding: 122px 1.2rem 3rem !important; transform: none !important;
  }
  .au-frame, .calder-frame, .nl-frame {
    position: static !important; inset: auto !important; padding: 0 !important; width: 100%;
  }
  .au-title, .calder-title, .nl-title { padding: 0 1rem !important; }
  .au-enter, .calder-enter, .nl-enter {
    position: static !important; bottom: auto !important; left: auto !important; right: auto !important;
    margin-top: 2rem !important; width: 100%;
  }
  .au-sub, .calder-sub, .nl-sub { margin-bottom: .2rem !important; }
  /* decorative side wordmark scatters once the column narrows → drop it here */
  .au-bushido { display: none !important; }
}