/* ==========================================================================
   mobile.css — Codex: Eternal Eclipse
   Load AFTER styles.css. Every rule in this file lives inside a
   @media (max-width: 700px) block, so DESKTOP IS NEVER TOUCHED.

   Blocks are numbered and independent. If you dislike one, comment it out
   and nothing else breaks.

   1. Performance
   2. Nav + language switcher (overlap fix)
   3. Hero
   4. Sculptures / trailer band
   5. Section rhythm + typography
   6. Features
   7. Gallery (swipe carousel)
   8. Characters
   9. Newsletter form
  10. Bottom bar + safe area
  11. Footer
  ========================================================================== */


/* ==========================================================================
   1. PERFORMANCE
   These are the expensive things, roughly in order of how much they cost.
   ========================================================================== */
@media (max-width: 700px) {

  /* 1a. The animated SVG filter (#heat-wave) is feTurbulence + feDisplacementMap
     with an <animate> running forever. SVG filters are rasterised on the CPU,
     not the GPU, and this one covers an image 250% of the viewport width.
     This is the single most expensive thing on the page on a phone. */
  .esc2-mirror,
  .hero-cloud img {
    filter: none !important;
  }
  /* The mirrored reflection is also the layer most likely to look wrong at
     phone widths. Comment this out if you want it back. */
  #artEsculturas2-static .esc2-mirror {
    display: none;
  }

  /* 1b. body::before is a fixed, full-viewport grain layer at z-index 9999
     with mix-blend-mode: overlay. That forces a whole-screen blend pass on
     every single frame while scrolling. Grain is basically invisible at
     phone pixel density anyway. */
  body::before {
    display: none;
  }
  /* Want to keep some texture? Delete the rule above and use this instead —
     it stops the layer being fixed, which is the part that costs:
     body::before { position: absolute; height: 100%; mix-blend-mode: normal; opacity: 0.18; }
  */

  /* 1c. will-change permanently promotes an element to its own GPU layer.
     On desktop that's fine. On a phone .art-layer holds images at 280–300%
     of viewport width (x4), .cloud-layer is 500vh tall, and there are 9
     gallery thumbs — that is far more texture memory than a mid-range
     Android will give you, and the browser starts evicting layers. */
  .art-layer,
  .cloud-layer,
  .gallery-thumb img {
    will-change: auto;
  }

  /* 1d. backdrop-filter on a *fixed* element re-composites everything behind
     it on every scroll frame. Solid colour reads the same at this size. */
  #bottom-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(6, 4, 8, 0.88);
  }
  #lang-current {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .char-panel--locked::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* 1e. The section backdrops are large PNGs at 18% opacity with a 6px blur
     on top. The blur costs paint time for something you can barely see. */
  .features-bg,
  .gallery-bg {
    filter: none;
    transform: none;
    opacity: 0.12;
  }

  /* 1f. The eclipse curtain ring animates box-shadow with 80px spread,
     forever — including while it is sitting at opacity 0 between page
     transitions. Only run it when the curtain is actually up. */
  .eclipse-curtain-inner:not(.eclipse-in) .eclipse-ring,
  .eclipse-curtain-inner:not(.eclipse-in) .eclipse-asset {
    animation: none;
  }

  /* 1g. Decorative clouds are four more composited layers for very little
     payoff on a 390px screen. The CTA ones sit behind text. */
  #cta .section-cloud {
    display: none;
  }
  #about .section-cloud {
    opacity: 0.3;
  }

  /* 1h. Hover transitions never fire on touch but still keep the elements
     on the compositor's watch list. */
  .gallery-thumb img,
  .feature-preview img,
  .char-sketch-img {
    transition: none;
  }
}


/* ==========================================================================
   2. NAV + LANGUAGE SWITCHER
   styles.css pins #lang-switcher to top:0 left:0 on mobile — directly on top
   of the 58px Mogu logo in the nav. Move it above the music bar instead,
   which mirrors where it lives on desktop.
   ========================================================================== */
@media (max-width: 700px) {

  nav {
    padding: 0 0.75rem;
    height: 56px;
  }
  .nav-logo img.nav-mogu-logo {
    height: 38px;
  }
  .nav-links {
    gap: 1rem;
  }
  .nav-links a {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    /* 44px tap target without changing the visual size of the text */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  #lang-switcher {
    top: auto;
    left: 0.75rem;
    right: auto;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    height: auto;
  }
  #lang-current {
    border-radius: 3px;
    padding: 0.45rem 0.7rem;
    background: rgba(8, 4, 10, 0.94);
    border: 1px solid rgba(154, 141, 89, 0.3);
    min-height: 34px;
  }
  #lang-dropdown {
    top: auto !important;
    bottom: 100% !important;
    left: 0;
    right: auto;
    margin-bottom: 4px;
    border-radius: 3px !important;
  }
}


/* ==========================================================================
   3. HERO
   ========================================================================== */
@media (max-width: 700px) {

  /* 100vh on mobile means "viewport with the URL bar hidden", so the hero is
     taller than the screen on first paint and the logo sits too low.
     svh = the small viewport, which is what you actually see. */
  #hero,
  #hero-sticky {
    height: 100svh;
  }

  /* Was white-space: nowrap with 0.4em letter-spacing — it ran off the edge
     of the screen and got clipped by body's overflow-x: hidden. */
  .hero-eyebrow {
    white-space: normal;
    top: 4.2rem;
    padding: 0 1.5rem;
    font-size: 0.5rem;
    letter-spacing: 0.26em;
    line-height: 2;
  }
  .hero-eyebrow::before,
  .hero-eyebrow::after {
    margin: 0 0.5em;
  }

  /* clamp(0.45rem, 0.90vw, 0.60rem) bottoms out at 0.45rem ≈ 7px on a phone.
     Not readable. */
  .hero-subtitle {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    line-height: 1.65;
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
  }

  .hero-game-logo {
    width: min(720px, 82vw) !important;
    margin-bottom: 0.9rem;
  }

  .hero-actions {
    margin-top: 1.6rem;
  }
  .btn-wishlist {
    min-height: 46px;
  }
}


/* ==========================================================================
   4. SCULPTURES / TRAILER BAND
   On mobile the trailer was absolutely positioned at 28% of a container whose
   height is set by a 280%-wide image, and the tagline was pushed to
   top: -8rem — i.e. outside the container, over the awards strip.
   Put all three in normal flow instead: sculptures, then trailer, then line.
   This is the block most likely to need your eye — it is also the easiest
   to revert (just delete it).
   ========================================================================== */
@media (max-width: 700px) {

  #artEsculturas2-static {
    padding-bottom: 2.5rem;
    margin-top: 0.5rem;
  }
  #artEsculturas2-static img {
    width: 190% !important;
  }

  .esc2-video-wrap {
    position: static;
    transform: none;
    width: 100%;
    max-width: 520px;
    margin: 1.25rem auto 0;
    padding: 0 1.25rem;
  }
  .esc2-video-inner {
    border-radius: 3px;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.65);
  }

  .esc2-tagline {
    position: static;
    transform: none;
    top: auto;
    width: 100%;
    max-width: 36ch;
    margin: 1.5rem auto 0;
    padding: 0 1.5rem;
  }
  .esc2-tagline p {
    font-size: 0.92rem;
    line-height: 1.65;
  }
}


/* ==========================================================================
   5. SECTION RHYTHM + TYPOGRAPHY
   Desktop uses 8rem vertical padding and 2rem side padding. On a phone that
   is a lot of empty space between things, which is a big part of why it
   reads as "scattered" — you never see a whole idea at once.
   ========================================================================== */
@media (max-width: 700px) {

  #about,
  #features,
  #gallery,
  #cta {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  #about   { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  #features { padding-top: 4rem;  padding-bottom: 4.5rem; }
  #gallery { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  #cta     { padding-top: 4.5rem; padding-bottom: 5rem; }

  .section-title {
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-wrap: balance;
  }
  .section-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.6rem;
  }

  .about-inner {
    gap: 2.25rem;
  }
  .about-text p {
    font-size: 0.98rem;
    line-height: 1.75;
    margin-bottom: 0.9rem;
  }
  .about-art-img {
    max-width: 250px;
    margin: 0 auto;
  }

  .accolades-track img {
    width: 108px;
    height: 54px;
  }
}


/* ==========================================================================
   6. FEATURES
   ========================================================================== */
@media (max-width: 700px) {

  .features-header {
    margin-bottom: 2rem;
  }
  .features-grid {
    gap: 10px;
  }
  .feature-text {
    padding: 1.25rem 1.25rem 1.5rem;
    gap: 0.5rem;
  }
  .feature-card h3 {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
  }
  .feature-card p {
    font-size: 0.92rem;
    line-height: 1.7;
  }
}


/* ==========================================================================
   7. GALLERY
   Nine 16:9 thumbs in 2 columns = ~170x96px each on a 390px screen — too
   small to read as screenshots, and the zoom overlay is hover-only so there
   is no affordance on touch. A swipe carousel shows one at a real size.

   To go back to the 2-column grid, delete this whole block.
   ========================================================================== */
@media (max-width: 700px) {

  .gallery-header {
    padding-bottom: 2rem;
  }

  .gallery-grid {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed to the screen edges so the next card peeks in */
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0 1.25rem 0.5rem;
  }
  .gallery-grid::-webkit-scrollbar {
    display: none;
  }
  .gallery-thumb {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
  .gallery-thumb--wide {
    grid-column: auto;
  }
  /* No hover on touch, so show the zoom hint permanently but faint */
  .gallery-thumb-overlay span {
    opacity: 0.55;
    transform: scale(1);
    font-size: 1.2rem;
  }

  #lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
  }
}


/* ==========================================================================
   8. CHARACTERS
   .char-panel.active carries margin-top: -60px so it tucks under the tab
   strip on desktop. On mobile the tab strip becomes position: relative, so
   that -60px drags the panel up over the tabs.
   ========================================================================== */
@media (max-width: 700px) {

  .characters-header {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .char-panel.active {
    margin-top: 0;
    min-height: 0;
  }
  .char-panel--locked {
    min-height: 340px;
  }

  .char-selector {
    gap: 0.35rem;
    padding: 1rem 0.5rem;
    flex-wrap: nowrap;
  }
  .char-portraits {
    gap: 0.3rem;
  }
  .char-portrait {
    width: 58px;
  }
  .char-portrait-img,
  .char-portrait-lock {
    width: 38px;
    height: 50px;
  }
  .char-arrow {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    font-size: 1.2rem;
  }

  .char-art-col {
    min-height: 300px;
  }
  .char-info-col {
    padding: 1.75rem 1.25rem 2.5rem;
  }
  .char-display-name {
    font-size: 2rem;
  }
  .char-display-role {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    margin-bottom: 1.2rem;
  }
  .char-display-desc {
    font-size: 0.92rem;
    line-height: 1.75;
    /* justified text on a narrow column creates rivers of white space */
    text-align: left;
  }
}


/* ==========================================================================
   9. NEWSLETTER
   ========================================================================== */
@media (max-width: 700px) {

  .cta-newsletter-label {
    font-size: 0.88rem;
    margin-bottom: 1rem;
  }

  /* Input + button side by side leaves ~150px for the email field. Stack. */
  .newsletter-form {
    flex-direction: column;
    gap: 0.5rem;
    border: none;
    overflow: visible;
    max-width: 100%;
  }
  .newsletter-input {
    border: 1.5px solid rgba(154, 141, 89, 0.45);
    border-radius: 2px;
    padding: 0.9em 1em;
    /* iOS zooms the whole page when you focus an input under 16px */
    font-size: 16px;
  }
  .newsletter-btn {
    width: 100%;
    border-radius: 2px;
    padding: 0.95em 1.6em;
    min-height: 46px;
  }
  .newsletter-note {
    font-size: 0.62rem;
    line-height: 1.6;
  }
  .newsletter-privacy {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .btn-wishlist--lg {
    margin-bottom: 2rem;
    min-height: 48px;
  }
}


/* ==========================================================================
   10. BOTTOM BAR + SAFE AREA
   Keeps the bar clear of the iPhone home indicator and stops the footer
   sitting underneath it.
   ========================================================================== */
@media (max-width: 700px) {

  body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  #bottom-bar {
    height: 64px;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 1rem);
  }
  #music-btn {
    width: 34px;
    height: 34px;
  }
  .bar-social-btn {
    min-width: 52px;
  }
  .bar-social-btn svg {
    width: 20px;
    height: 20px;
  }
}


/* ==========================================================================
   11. FOOTER
   ========================================================================== */
@media (max-width: 700px) {

  footer {
    padding: 2.5rem 1.25rem;
    gap: 1rem;
  }
  .footer-copy {
    font-size: 0.72rem;
    line-height: 1.7;
  }
}


/* ==========================================================================
   12. VERY SMALL SCREENS (iPhone SE, 360px Androids)
   ========================================================================== */
@media (max-width: 380px) {

  .nav-links {
    gap: 0.7rem;
  }
  .nav-links a {
    font-size: 0.55rem;
  }
  .hero-game-logo {
    width: 88vw !important;
  }
  .char-portrait {
    width: 50px;
  }
  .char-portrait-img,
  .char-portrait-lock {
    width: 34px;
    height: 45px;
  }
  .section-title {
    font-size: 1.6rem;
  }
  .gallery-thumb {
    flex: 0 0 88%;
  }
}