/* =========================================================
   ANIME NEURIX · mobile.css
   ---------------------------------------------------------
   Dedicated mobile-first responsive layer. Loaded LAST on
   every page (after style.css, animations.css, responsive.css,
   premium.css, and any page-specific sheet like genre.css /
   watch.css) so it can safely refine mobile/tablet presentation
   without ever editing those files.

   HARD RULES THIS FILE FOLLOWS:
   1. Every rule in here lives inside a max-width (or a
      768–991px tablet) media query. Nothing in this file is
      allowed to apply at 992px+ — desktop must stay pixel
      identical. Search this file for "992px" and you will not
      find a single unguarded selector above it.
   2. Nothing here shrinks/scales the desktop layout down for
      small screens — every rule is a purpose-built mobile
      layout (new grid columns, new flex direction, new
      component, etc.), never a blanket transform/zoom.
   3. New custom properties are additive (prefixed --m-) so
      they can never collide with or override style.css tokens.

   Breakpoints used throughout the mobile layer (see also
   BREAKPOINTS note in each phase):
     Mobile  : max-width 767px
     Tablet  : 768px – 991px
     Desktop : 992px+  (untouched, ever)
   ========================================================= */

/* ---------- 0. MOBILE-ONLY DESIGN TOKENS ----------
   Purely additive custom properties. Declaring these at :root
   has zero effect on any existing desktop selector — nothing
   in style.css/premium.css/etc. reads a variable named --m-*.
*/
:root {
  --m-header-h: 64px;
  --m-bottom-nav-h: 64px;
  --m-pad: 16px;
  --m-gap-card: 16px;
  --m-gap-section: 32px;
  --m-radius: 16px;
  --m-radius-sm: 12px;
  --m-btn-h: 52px;
  --m-touch-min: 44px;

  --m-font-h1: 32px;
  --m-font-section-title: 24px;
  --m-font-card-title: 18px;
  --m-font-body: 16px;
  --m-font-meta: 13px;

  /* Safe-area insets fall back to 0 on devices/browsers without notch support */
  --m-safe-top: env(safe-area-inset-top, 0px);
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m-safe-left: env(safe-area-inset-left, 0px);
  --m-safe-right: env(safe-area-inset-right, 0px);
}

/* =========================================================
   1. SHARED MOBILE FRAMEWORK (≤767px)
   ========================================================= */
@media (max-width: 767px) {

  /* ---- 1.1 Base page scaffolding ---- */
  html, body { overflow-x: hidden; }
  .container { padding-inline: var(--m-pad); }

  /* Reserve room so fixed bottom nav never covers the last
     row of content on any page. Footer still renders fully
     above the nav — this only pads the space below it. */
  body { padding-bottom: calc(var(--m-bottom-nav-h) + var(--m-safe-bottom)); }

  /* Back-to-top button: sit above the bottom nav instead of
     the page edge, same size logic as its existing rule. */
  #back-to-top {
    bottom: calc(var(--m-bottom-nav-h) + var(--m-safe-bottom) + 14px);
    right: 14px;
  }

  /* ---- 1.2 Section / spacing rhythm (framework only —
     actual homepage row redesign happens in Phase 2) ---- */
  .section-head { padding-inline: var(--m-pad); }
  .section-title { font-size: var(--m-font-section-title); }

  /* ---- 1.3 Typography baseline ---- */
  body { font-size: var(--m-font-body); }
}

/* =========================================================
   2. MOBILE HEADER (≤767px)
   No new HTML — restyles the existing .navbar / .nav-left /
   .nav-right / .brand / .icon-btn / .nav-toggle elements that
   are already present, unchanged, on every page.
   ========================================================= */
@media (max-width: 767px) {
  .navbar {
    height: var(--m-header-h);
    padding-top: var(--m-safe-top);
    background: rgba(8, 6, 16, 0.72);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--glass-border);
  }
  /* .navbar.scrolled already darkens further via script.js's scroll
     listener — its existing rule still applies fine on top of this. */
  .navbar .container { padding-inline: var(--m-pad); gap: 12px; }

  .nav-left { gap: 12px; }
  .brand img { height: 24px; }

  /* Primary link list is already hidden ≤980px by responsive.css;
     this just tightens the remaining right-side cluster. */
  .nav-right { gap: 4px; }
  .icon-btn {
    width: var(--m-touch-min);
    height: var(--m-touch-min);
  }
  .icon-btn svg { width: 19px; height: 19px; }
  .nav-right .icon-btn.hide-xs { display: none; } /* favorites already hidden via existing rule; kept explicit here for the new bottom nav's sake */

  .nav-toggle {
    width: var(--m-touch-min);
    height: var(--m-touch-min);
  }

  /* Mobile nav drawer + search overlay: purely spacing polish,
     the open/close/focus-trap JS is untouched. */
  .mobile-nav { padding-top: calc(64px + var(--m-safe-top)); }
  .search-overlay { padding-top: calc(var(--m-header-h) + var(--m-safe-top) + 14px); }
}

/* =========================================================
   3. BOTTOM NAVIGATION (≤767px)
   Markup is injected by js/bottom-nav.js into an empty
   <div id="bottom-nav-mount"></div> placeholder already added
   to every page (same pattern the site already uses for
   #site-footer). Styled here; hidden entirely at ≥768px so it
   can never appear on tablet or desktop.
   ========================================================= */
.bottom-nav { display: none; } /* default: hidden until the mobile media query re-enables it */

/* Mobile-only season selector (bar + full-screen picker sheet), built by
   script.js's initMobileSeasonSelector(). Hidden by default so desktop's
   existing season accordion is completely unaffected; the ≤767px query
   below reveals them and hides the desktop accordion's toggle rows instead. */
.season-select-bar { display: none; }
.season-modal { display: none; }

@media (max-width: 767px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 480; /* below mobile-nav(498)/scrim(497)/search-overlay(z-overlay=800)/modals, above page content */
    align-items: stretch;
    justify-content: space-around;
    height: calc(var(--m-bottom-nav-h) + var(--m-safe-bottom));
    padding-bottom: var(--m-safe-bottom);
    padding-left: var(--m-safe-left);
    padding-right: var(--m-safe-right);
    background: rgba(8, 6, 16, 0.86);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid var(--glass-border-strong);
  }

  .bn-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative;
    min-width: var(--m-touch-min);
    color: var(--text-muted);
    transition: color var(--fast) var(--ease);
  }
  .bn-item svg {
    width: 22px;
    height: 22px;
    transition: transform var(--fast) var(--ease);
  }
  .bn-item span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
  }
  .bn-item.active { color: var(--text-primary); }
  .bn-item.active svg { transform: translateY(-1px); filter: drop-shadow(0 0 8px var(--purple-glow-soft)); }
  .bn-item.active::before {
    content: "";
    position: absolute;
    top: 2px;
    width: 18px; height: 3px;
    border-radius: var(--r-pill);
    background: var(--grad-brand);
    box-shadow: 0 0 8px var(--purple-glow);
  }
  .bn-item:active { color: var(--purple-soft); }

  .bn-badge {
    position: absolute;
    top: 0; right: calc(50% - 18px);
    min-width: 15px; height: 15px; padding: 0 3px;
    background: var(--red-accent);
    color: #fff;
    font-size: .6rem; font-weight: 700;
    border-radius: var(--r-pill);
    display: grid; place-items: center;
    box-shadow: 0 0 6px var(--red-glow);
  }
}

/* Bottom nav must never render at tablet/desktop widths even if
   the injected markup is present in the DOM before this stylesheet
   finishes parsing — explicit re-assertion for safety. */
@media (min-width: 768px) {
  .bottom-nav { display: none !important; }
}

/* =========================================================
   4. TABLET (768px – 991px) — light-touch pass for Phase 1
   Full tablet optimization continues through later phases;
   this only ensures the header/framework doesn't look broken
   at tablet widths introduced by the rules above.
   ========================================================= */
@media (min-width: 768px) and (max-width: 991px) {
  .container { padding-inline: clamp(20px, 4vw, 40px); }

  /* Stable 4-column catalog grid on tablet (genre/search/favorites/
     watchlist pages + any future grid use of .anime-grid). Row carousels
     on the homepage are untouched — they keep their own fixed card width
     and horizontal scroll behaviour. */
  .anime-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
}

/* =========================================================
   5. CARD GRID — STABLE 3-COLUMN MOBILE CATALOG (≤767px)
   ---------------------------------------------------------
   Replaces the old auto-fill(minmax(112–132px,1fr)) behaviour from
   responsive.css, which could silently drift between 2, 3 or 4 columns
   depending on exact viewport width. Locking to an explicit 3-column
   grid keeps the layout identical and stable across the full 360–430px
   mobile range the design must support, and it lets each .anime-card
   fill its column at 100% width instead of carrying a fixed px width
   that could overflow a narrow column.

   Only .anime-grid (used on Home's "Browse Genres" section is a
   different grid, Genre/Search/Favorites/Watchlist results) is affected.
   .row-scroller carousels (Home's "Most-Watched"/"Latest Episodes"/etc.
   rows) are NOT touched here — they intentionally keep a fixed card
   width and scroll horizontally, which is a separate, correct pattern.
   ========================================================= */
@media (max-width: 767px) {
  .anime-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding-inline: var(--m-pad);
  }
  /* Overrides responsive.css's fixed 152px/132px .anime-card width so
     cards fill their grid column exactly instead of overflowing it. */
  .anime-grid .anime-card { width: 100%; }

  /* Slightly smaller type for the narrower 3-up card width — still
     comfortably readable, still capped at 2 lines by premium.css. */
  .anime-grid .card-title { font-size: .78rem; }
  .anime-grid .card-meta { font-size: .64rem; }

  /* At ~110px-wide 3-column cards there isn't room for the rating pill
     AND the SERIES/MOVIE pill side-by-side without them colliding.
     Per the redesign brief, drop the decorative type pill here and
     keep only the rating — the metadata line below the poster (which
     already shows episode count or runtime) makes series-vs-movie
     clear without it. Prevents the exact "badges overlapping" bug
     this whole redesign exists to fix. */
  .anime-grid .card-type-tag { display: none; }
  .anime-grid .card-rating { font-size: .66rem; padding: 3px 7px; }

  /* Horizontal rails (row-scroller) get a comfortable fixed card size
     distinct from the 3-column grid, matching the reference catalog's
     poster-forward "Most-Watched"-style rows. */
  .row-scroller .anime-card { width: 122px; }
  .row-scroller .cw-card { width: 200px; }
  .row-scroller { gap: 12px; }
}

/* Extra-narrow phones: tighten the grid gap so 3 columns of a 2:3
   poster never feel cramped or risk overflow at the smallest supported
   widths (360px–390px). */
@media (max-width: 390px) {
  .anime-grid { gap: 12px; }
}

/* =========================================================
   6. HOMEPAGE HERO — MOBILE (Problem #2)
   ---------------------------------------------------------
   The site's key art is composed ultra-wide (~2.5:1) for the
   desktop hero. On a 360–430px phone, forcing that same art
   through object-fit:cover into a much narrower box crops out
   roughly two-thirds of the composition — that's the "too
   zoomed in" bug. Fixing the crop with object-position alone is
   impossible; the mismatch is horizontal, and no vertical bias
   addresses that.

   Instead, mobile uses a two-layer treatment (the standard
   Netflix/Disney+ pattern for wide key art in a portrait frame):
     1. A blurred, darkened copy of the SAME banner (::before,
        using the --hero-img custom property set inline by
        slider.js) fills the entire tall box edge-to-edge via
        background-size:cover, so the hero still reads as a
        full-bleed cinematic frame with zero empty space.
     2. The real <img>, switched to object-fit:contain, sits on
        top showing the ENTIRE original composition uncropped,
        unstretched, and at full quality — just scaled down to
        fit, never cut off on the sides.
   Desktop is untouched: it still uses the plain <img> with
   object-fit:cover exactly as before, and --hero-img is simply
   unused there.
   ========================================================= */
@media (max-width: 767px) {
  .hero {
    height: 58vh; min-height: 380px; max-height: 560px;
    height: 58dvh; /* dynamic viewport height: avoids the "too tall behind the address bar" jump vh causes on mobile Safari/Chrome; ignored by browsers that don't support dvh, so vh above still applies there */
  }

  .hero-slide::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 0;
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center;
    filter: blur(30px) brightness(.55) saturate(1.15);
    transform: scale(1.15); /* scaled up so the blur's soft edge never peeks in at the box boundary */
  }

  .hero-slide img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 1;
    object-fit: contain; /* shows the full banner composition, never crops the sides */
    object-position: center 20%; /* biases the framed art toward the upper portion, leaving room below for hero-content */
    transform: none; /* the desktop Ken Burns scale doesn't apply to a contained/letterboxed image on mobile */
    transition: none;
  }
  .hero-slide.active img { transform: none; }

  .hero-shade { z-index: 2; }
  .hero-content { z-index: 3; max-width: 100%; bottom: 10%; padding-inline: var(--m-pad); }
  .hero-badge { font-size: .68rem; padding: 5px 11px; margin-bottom: 12px; }
  .hero-title { font-size: clamp(1.5rem, 7vw, 2.1rem); margin-bottom: 10px; line-height: 1.15; }
  .hero-meta { font-size: .78rem; gap: 8px; margin-bottom: 12px; }
  .hero-meta .dot::before { margin-right: 8px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { padding: 10px 18px; font-size: .82rem; }
}
/* Very short/narrow phones: same two-layer treatment, slightly shorter
   banner so it never eats the whole first screen on compact devices. */
@media (max-width: 390px) {
  .hero { height: 52vh; height: 52dvh; min-height: 340px; }
}

/* =========================================================
   7. ANIME DETAILS PAGE BANNER — MOBILE (Problem #3)
   ---------------------------------------------------------
   Same principle as the hero: a 64vh banner is desktop-scaled
   and ends up dominating the whole first screen on a phone while
   still cropping the art badly. Shrink it and bias the crop
   toward the upper portion of the image, independent of watch.css
   (.watch-hero) and style.css's desktop .details-hero rule.
   ========================================================= */
@media (max-width: 767px) {
  .details-hero { height: 26vh; min-height: 190px; max-height: 300px; }
  .details-hero img { object-position: center 22%; }

  /* .details-body-grid / .details-poster / .details-title positioning now
     lives entirely in section 14 (PROBLEM #10 + #3 fix below) — kept here
     as a single source of truth instead of two competing rules. */
  .details-meta-row { font-size: .78rem; gap: 10px; margin-bottom: 12px; }
  .details-meta-row .pill { padding: 4px 10px; }
  .details-desc { font-size: .85rem; line-height: 1.6; margin-bottom: 18px; }
  .details-actions { gap: 10px; }
  .details-actions .btn { padding: 10px 16px; font-size: .82rem; }

  .details-tabs-anchor { padding: 26px var(--m-pad) 0; }
  .subsection-title { font-size: 1.02rem; margin-bottom: 12px; }
}

/* =========================================================
   8. EPISODE LIST — MOBILE COMPACT (Problem #4)
   ---------------------------------------------------------
   Drops the description entirely on mobile (still shown on the
   Watch page — see section 10) and tightens the row down to
   thumbnail + title + duration + a single icon action, matching
   the reference apps. The episode thumbnail is already a real
   link into watch.html (epThumbHtml in script.js), so the
   redundant text "Watch" pill is hidden here rather than
   duplicated — tapping anywhere on the row still plays the
   episode. Nothing here is anime-specific: it reads the same
   .episode-row markup script.js already generates for every title.
   ========================================================= */
@media (max-width: 767px) {
  .seasons-wrap { padding-inline: var(--m-pad); gap: 10px; }
  .episode-row { padding: 10px 12px; gap: 10px; flex-wrap: nowrap; }
  .ep-thumb { width: 92px; aspect-ratio: 16/9; }
  .ep-info { min-width: 0; }
  .ep-title {
    font-size: .82rem;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ep-duration { display: block; margin-left: 0; margin-top: 3px; font-size: .72rem; }
  .ep-desc { display: none; } /* moved to the Watch page — see section 10 */

  .episode-actions { gap: 4px; flex-shrink: 0; }
  /* The Watch pill duplicates the thumbnail's own link — hide it here.
     Matched by href rather than class since both buttons share
     .download-btn; nothing in script.js needs to change. */
  .episode-actions .download-btn[href*="watch.html"] { display: none; }
  .episode-actions .download-btn[href*="download.html"] {
    padding: 9px;
    border-radius: 50%;
  }
  .episode-actions .download-btn[href*="download.html"] span { display: none; }
  .episode-actions .download-btn[href*="download.html"] svg { width: 16px; height: 16px; }
}

/* =========================================================
   9. SEASON SELECTOR — MOBILE (Problem #7)
   ---------------------------------------------------------
   Desktop keeps its existing full accordion untouched (every
   season is its own toggle row — see style.css .season-toggle).
   On mobile that list wastes vertical space once a title has
   more than 2–3 seasons, so this replaces the visible header
   rows with one compact "Season N · X Episodes ⌄" bar; tapping
   it opens a full-screen picker built from the same item.seasons
   data (see initMobileSeasonSelector in script.js). Only the
   selected season's episodes are ever shown.
   ========================================================= */
@media (max-width: 767px) {
  .season-select-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 10px;
    padding: 14px 16px;
    border-radius: var(--m-radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-weight: 600;
    font-size: .9rem;
    text-align: left;
  }
  .season-select-bar.is-static { cursor: default; } /* single-season titles: informational only, no picker */
  .ssb-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-weight: 500; font-size: .8rem; }
  .ssb-chev { font-size: .9em; }

  /* Hide the desktop accordion header row and collapse every season
     block except the currently-selected one — the compact bar above
     is the only season control visible on mobile. */
  .seasons-wrap .season-toggle { display: none; }
  .seasons-wrap .season-block:not(.open) { display: none; }
  .seasons-wrap .season-block.open {
    border: 0;
    background: none;
    border-radius: 0;
  }
  .seasons-wrap .season-block.open .season-episodes { max-height: none; }

  .season-modal {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 950;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .season-modal.open { opacity: 1; visibility: visible; }
  .season-modal-backdrop { position: absolute; inset: 0; background: rgba(3,2,7,.72); backdrop-filter: blur(2px); }
  .season-modal-sheet {
    position: relative;
    width: 100%;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-elevated);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid var(--glass-border-strong);
    transform: translateY(100%);
    transition: transform .35s var(--ease);
  }
  .season-modal.open .season-modal-sheet { transform: translateY(0); }
  .season-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
  }
  .season-modal-head h3 { font-size: 1.05rem; }
  .season-modal-list { overflow-y: auto; padding: 6px 10px 14px; -webkit-overflow-scrolling: touch; }
  .season-modal-row {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 15px 14px; border-radius: 12px; font-weight: 600; font-size: .92rem;
    color: var(--text-primary); text-align: left;
  }
  .season-modal-row.active { color: var(--purple-soft); background: var(--glass-bg-strong); }
  .smr-count { font-size: .8rem; color: var(--text-secondary); font-weight: 500; }
}

/* =========================================================
   10. WATCH PAGE — MOBILE (Problems #5 & #6)
   ---------------------------------------------------------
   Re-proportions the existing DOM (banner → title/meta/desc →
   player → controls → episode list — the order is already
   correct in watch.html) instead of introducing new sections.
   The oversized desktop hero + side poster are what create the
   "too much empty space" feeling on a phone, so both shrink
   here; the description gets a clamp + "Read more" toggle
   (see initDescReadMore in watch-loader.js) instead of running
   on indefinitely.
   ========================================================= */
@media (max-width: 767px) {
  .watch-hero { height: 20vh; min-height: 130px; }
  .watch-back-btn { top: calc(var(--nav-h, 64px) + 8px); padding: 6px 12px; font-size: .78rem; }

  .watch-meta-grid { margin-top: -36px; padding-inline: var(--m-pad); }
  .watch-poster { display: none; } /* redundant with the banner right above it — reclaims space per Problem #6 */
  .watch-info { padding-top: 10px; grid-column: 1 / -1; }
  .watch-eyebrow { font-size: .74rem; }
  .watch-title { font-size: clamp(1.05rem, 5.5vw, 1.3rem); margin-bottom: 2px; }
  .watch-ep-title { font-size: .86rem; margin-bottom: 8px; }
  #w-meta-row { font-size: .76rem; margin-bottom: 8px; }
  #w-meta-row .pill { padding: 4px 9px; }

  .watch-player-section { padding: 16px var(--m-pad) 8px; }

  .watch-player-controls { margin-top: 12px; gap: 8px; }
  .watch-player-controls .btn { padding: 9px 12px; font-size: .78rem; }

  .watch-episode-list { padding-inline: var(--m-pad); }
}

/* Episode description: shown here on the Watch page (not in the mobile
   episode list — see section 8), clamped with a "Read more" toggle so a
   long synopsis never dominates the screen on a phone. */
@media (max-width: 767px) {
  .watch-info .details-desc,
  #w-ep-desc {
    font-size: .85rem;
    line-height: 1.6;
    max-width: 100%;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #w-ep-desc.is-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .w-desc-toggle {
    display: none; /* JS reveals this only when the description actually overflows 3 lines */
    background: none;
    border: 0;
    padding: 0 0 14px;
    color: var(--purple-soft);
    font-weight: 600;
    font-size: .82rem;
  }
}

/* =========================================================
   11. TYPOGRAPHY SCALE — MOBILE (Problem #8)
   ---------------------------------------------------------
   Section/subsection headings still used their desktop clamp()
   minimums, which read as oversized on a 360–390px phone. These
   don't touch anything above 767px, so desktop typography is
   completely unaffected.
   ========================================================= */
@media (max-width: 767px) {
  .section { padding: 30px 0; }
  .section-head { margin-bottom: 16px; }
  .section-title { font-size: 1.02rem; }
  .genre-name { font-size: clamp(1.5rem, 8vw, 2.1rem); }
  .genre-eyebrow { font-size: .72rem; margin-bottom: 6px; }
}

/* Problem #2: consistent, adequate spacing between homepage sections.
   .section's 30px top+bottom padding above already gives 60px between two
   adjacent sections' content, but the very first section directly under
   the full-bleed hero had nothing extra to separate it from the hero's
   hard edge — add a touch more breathing room there specifically. */
@media (max-width: 767px) {
  .hero + .section,
  .hero-wrap + .section {
    padding-top: 38px;
  }
}

/* =========================================================
   12. FOOTER — MOBILE (Problem #11)
   ---------------------------------------------------------
   Desktop spacing (60px margin, 70px top padding) was carried
   straight through to mobile. Bottom-nav clearance is already
   handled by section 1's body padding-bottom, so this only
   tightens the footer's own rhythm.
   ========================================================= */
@media (max-width: 767px) {
  .site-footer { margin-top: 24px; padding-top: 6px; }
  .social-hub { padding: 26px 0; flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-bottom-compact { justify-content: center; padding: 14px 0 20px; }
}


/* =========================================================
   13. PROBLEM #9 — CONTINUE WATCHING: compact horizontal card
   ---------------------------------------------------------
   Same .cw-card markup as before (poster-wrap + card-body),
   just reflowed from a tall vertical poster card into a short
   horizontal row — thumbnail stays a small fixed size instead
   of dominating the screen. Still scrolls horizontally inside
   .row-scroller, per the brief ("scroll horizontally if
   appropriate") — only the card's own shape changes.
   ========================================================= */
@media (max-width: 767px) {
  .row-scroller .cw-card {
    width: 268px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--m-radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
  }
  .cw-card .poster-wrap { width: 96px; aspect-ratio: 16/9; flex-shrink: 0; border-radius: 8px; box-shadow: none; }
  .cw-card .card-body { padding: 0; flex: 1; min-width: 0; }
  .cw-card .card-title {
    font-size: .8rem; margin-bottom: 3px; min-height: 0;
    -webkit-line-clamp: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cw-card .card-meta { font-size: .68rem; }
  .cw-progress-label { font-size: .66rem; margin-top: 3px; }
}

/* =========================================================
   14. PROBLEM #10 — ANIME DETAILS: poster LEFT, info beside it
   ---------------------------------------------------------
   Uses CSS Grid + display:contents so the exact same DOM/IDs
   script.js already fills (details-poster, details-title,
   details-meta-row, details-genre-row, details-desc,
   details-actions) can be freely re-arranged per breakpoint
   without touching the HTML or JS: poster + compact info sit
   side by side, then description and buttons span full width
   underneath — matching the desktop hierarchy instead of the
   old fully-stacked/centered mobile layout.
   ========================================================= */
@media (max-width: 991px) {
  .details-body-grid {
    display: grid;
    grid-template-columns: 104px 1fr;
    grid-template-areas:
      "poster title"
      "poster meta"
      "poster genres"
      "desc   desc"
      "actions actions";
    column-gap: 14px;
    row-gap: 6px;
    margin-top: -64px;
    padding-inline: var(--m-pad, 16px);
    align-items: start;
  }
  .details-info { display: contents; }
  .details-poster { grid-area: poster; width: auto; margin: 0; }
  /* Problem #3 fix: .details-body-grid's negative margin-top above exists so
     the POSTER overlaps the banner bottom edge (matching the desktop
     treatment, where .details-info's padding-top:160px cancels the same
     shift for the text — see style.css). display:contents on .details-info
     drops that compensating padding, so the title/meta/genre block was
     also getting pulled up onto the banner. Restoring an equivalent
     (slightly larger, for breathing room) padding-top here — on the title
     only — cancels the shift for text while leaving the poster's position
     untouched, since the grid row it shares with the poster grows to fit. */
  .details-title { grid-area: title; font-size: clamp(1.05rem, 5vw, 1.35rem); margin-bottom: 2px; text-align: left; padding-top: 80px; }
  .details-meta-row { grid-area: meta; justify-content: flex-start; font-size: .68rem; gap: 6px; }
  .details-meta-row .pill { padding: 3px 8px; }
  .details-genre-row { grid-area: genres; justify-content: flex-start; gap: 6px; }
  .details-genre-row .search-chip { font-size: .68rem; padding: 3px 9px; }
  .details-desc { grid-area: desc; margin-top: 14px; margin-bottom: 0; font-size: .85rem; line-height: 1.6; text-align: left; }
  .details-actions { grid-area: actions; margin-top: 12px; justify-content: flex-start; }
}
@media (max-width: 767px) {
  .details-body-grid { grid-template-columns: 88px 1fr; margin-top: -56px; }
  .details-title { font-size: clamp(1rem, 6vw, 1.25rem); padding-top: 70px; }
  .details-meta-row .pill:nth-child(n+5) { display: none; } /* keep the top row from wrapping into a wall of pills on narrow phones */
}

/* =========================================================
   15. PROBLEM #12 — CHARACTERS & VOICE ACTORS: compact grid
   ========================================================= */
@media (max-width: 767px) {
  .character-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; padding-inline: var(--m-pad); }
  .character-card { padding: 10px 4px; }
  .character-card img { width: 48px; height: 48px; margin-bottom: 6px; border-width: 1.5px; }
  .character-name { font-size: .7rem; margin-bottom: 1px; }
  .character-role { font-size: .62rem; }
  .character-va { font-size: .6rem; }
}

/* =========================================================
   16. PROBLEM #11 — SCREENSHOTS: preview + dedicated gallery
   ========================================================= */
@media (max-width: 767px) {
  .screenshot-preview-link { margin-inline: var(--m-pad); }
  .view-all-link { margin-inline: var(--m-pad); }
  .shots-header { padding: 18px var(--m-pad) 14px; gap: 12px; }
  .shots-title { font-size: 1.1rem; }
  .shots-gallery { grid-template-columns: 1fr; gap: 12px; padding: 0 var(--m-pad) 40px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .shots-gallery { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   17. PROBLEM #13 — WATCHED EPISODES PAGE — mobile spacing
   ========================================================= */
@media (max-width: 767px) {
  .watched-groups { padding: 14px var(--m-pad) 40px; gap: 14px; }
  .watched-anime-group { padding: 12px; }
  .watched-ep-chip { font-size: .74rem; padding: 5px 7px 5px 10px; }
}

/* =========================================================
   18. PROBLEM #8 — WATCH PAGE ACTION ROW + NEXT EPISODE — mobile
   ========================================================= */
@media (max-width: 767px) {
  .watch-actions-row { margin: 2px 0 14px; }
  .watch-vote-btn { padding: 7px 11px; font-size: .76rem; }
  .watch-vote-btn svg { width: 14px; height: 14px; }
  .watch-icon-btn { width: 34px; height: 34px; }
  .watch-icon-btn svg { width: 15px; height: 15px; }

  .watch-next-ep-section { padding: 4px var(--m-pad) 0; }
  .watch-next-ep-section .subsection-title { font-size: .95rem; margin-bottom: 10px; }
  .wnec-thumb { width: 96px; }
  .wnec-title { font-size: .82rem; }
  .wnec-duration { font-size: .72rem; }

  #w-episodes-section { padding-inline: var(--m-pad); }
  .watch-all-episodes-toggle { font-size: 1rem; padding: 12px 2px; }
}

/* =========================================================
   19. PROBLEM #14 — COMMENTS — mobile compacting
   ========================================================= */
@media (max-width: 767px) {
  #comments-section { padding-top: 20px; }
  #comments-section .subsection-title { font-size: .95rem; margin-bottom: 10px; }
  .comments-wrap { padding-inline: var(--m-pad); }
  .comments-head { margin-bottom: 12px; }
  .comment-form { margin-bottom: 16px; padding: 6px 6px 6px 14px; }
  .comment-form textarea { font-size: .82rem; }
  .comment-form .btn { padding: 8px 14px; font-size: .8rem; }
  .comment-list { gap: 10px; }
  .comment-item { padding: 12px 14px; gap: 10px; }
  .comment-avatar { width: 32px; height: 32px; font-size: .76rem; }
  .comment-name { font-size: .82rem; }
  .comment-text { font-size: .82rem; }
}