/* ============================================================
 * responsive-enhancements.css
 *
 * Pure ADDITIVE overlay loaded AFTER the original VNG stylesheets
 * by serve.mjs middleware when serving the /clone/ route.
 *
 * RULE: only @media rules that activate under specific user-agent
 * conditions the original VNG CSS doesn't cover. Never override
 * layout / color / spacing / typography of the original markup.
 *
 * Active surfaces:
 *   - prefers-reduced-motion   (accessibility — pause video, halt animations)
 *   - prefers-contrast: more   (accessibility — sprite contrast bump)
 *   - pointer: coarse          (touch — boost hit-target via padding)
 *   - hover: none              (touch — suppress hover-stuck transforms)
 *   - min-resolution: 2dppx    (hi-DPI — image-rendering hint)
 *   - print                    (hide decor on print)
 *   - container-type setup     (#blockNews — future-proof, no visual change)
 * ============================================================ */

/* === Container query type setup (no visual effect — only enables querying) === */
#blockNews {
  container-type: inline-size;
  container-name: news-block;
}

/* === Touch hit-target boost (mobile only) === */
@media (pointer: coarse) {
  /* Critical download CTAs need 44×44 minimum */
  #ios_link,
  #android_link,
  #nativepc_link,
  a.MS__sprite-btn-appstore,
  a.MS__sprite-btn-ggplay,
  a.MS__sprite-btn-apk,
  a.MS__sprite-btn-taigamepc,
  a.MS__sprite-btn-napthe,
  a.MS__sprite-btn-nhapcode {
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: 4px;
  }
}

/* === Hover: none — disable hover-stuck transforms on touch === */
@media (hover: none) {
  .MS__hover:hover {
    transform: none;
  }
}

/* === Reduced motion (user preference) — pause video + halt animations === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  video[autoplay] {
    display: none !important;
  }
}

/* === Increased contrast (user preference) === */
@media (prefers-contrast: more) {
  .MS__sprite-icon-up,
  .MS__sprite-icon-down,
  .MS__sprite-icon-dot {
    filter: contrast(1.3);
  }
}

/* === Hi-DPI rendering hint === */
@media (min-resolution: 2dppx) {
  img,
  picture > img {
    image-rendering: auto;
  }
}

/* === Print — hide decorative chrome === */
@media print {
  #libraryMainsite-t-float_left,
  #vxphl-ld-25-a-navigation,
  .float-list-btns,
  .layer-rotate,
  .MS__layer-loading {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
}

/* === Smooth scroll for in-page anchors (respects reduced-motion above) === */
html {
  scroll-behavior: smooth;
}

/* ============================================================
 * MOBILE UX ENHANCEMENTS (≤ 768px)
 *
 * Strict additive — no element is hidden, no layout altered.
 * Only:
 *   - Boost interactive hit-targets to ≥ 44×44 (Apple HIG)
 *   - Add visual tap-feedback
 *   - Improve text rendering
 *   - Add tap-area padding via inline-flex without changing layout
 *
 * PC (≥ 1024px) NEVER touched — every rule guarded by max-width media.
 * ============================================================ */

@media (max-width: 768px) {

  /* --- News block: category tabs (.news-tabs) parent + children ---
   * VNG sets fixed height on parent flex container — must unlock parent
   * before children can grow. Mobile-only scope. */
  #blockNews .news-tabs {
    height: auto !important;
    min-height: 44px !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 4px;
    row-gap: 6px;
  }
  #blockNews .news-tabs > a,
  #blockNews .arr-more-news {
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
  }

  /* --- News list article titles --- */
  #blockNews .news-list ul li a {
    min-height: 44px !important;
    padding-block: 8px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* --- Feature carousel video play buttons --- */
  .swiper-slide .btn-video {
    min-block-size: 44px !important;
    min-inline-size: 44px !important;
  }

  /* --- Ranking pagination buttons --- */
  ul#pagination li a {
    min-block-size: 44px !important;
    min-inline-size: 44px !important;
    padding: 8px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- Mobile footer legal text links (terms, license, etc) --- */
  section#nth-ld-25-ld-socials .footer-mb a {
    min-block-size: 44px !important;
    padding-block: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* --- News-banner slide anchors: wide decorative banner (779×22).
   * Don't resize the visual; extend invisible tap area via pseudo-element. */
  .news-banner .swiper-slide a {
    position: relative;
  }
  .news-banner .swiper-slide a::after {
    content: '';
    position: absolute;
    inset-block: -12px;
    inset-inline: 0;
    z-index: 1;
    pointer-events: auto;
  }

  /* --- Character showcase: thumbnail nav buttons --- */
  /* VNG uses sprite-positioned buttons that may be too small */
  #nth-ld-25-ld-characters .swiper-characters-thumb a,
  #nth-ld-25-ld-characters .swiper-characters-thumb button,
  #nth-ld-25-ld-characters [data-character-id] {
    min-block-size: 44px;
    min-inline-size: 44px;
  }

  /* --- Footer + legal links --- */
  #nth-ld-25-ld-footer a,
  #vxphl-ld-25-a-navigation a {
    min-block-size: 44px;
    padding-block: 8px;
    display: inline-flex;
    align-items: center;
  }

  /* --- Social icons row — make tappable --- */
  #nth-ld-25-ld-socials a {
    min-block-size: 44px;
    min-inline-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Visual tap feedback (mobile only) --- */
  a:active,
  button:active,
  [role="button"]:active {
    opacity: 0.65;
    transition: opacity 0.1s ease-out;
  }

  /* --- Improve text rendering on mobile --- */
  body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(208, 170, 101, 0.25);
  }

  /* --- Allow long Vietnamese text to break gracefully --- */
  #blockNews h2,
  #blockNews h3,
  #blockNews .news-title,
  #vxphl-ld-25-a-header .content p {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* === Very narrow phones (≤ 414px) — extra breathing room === */
@media (max-width: 414px) {
  /* Header download tile buttons could feel cramped */
  #vxphl-ld-25-a-header .new-icons {
    gap: 4px;
  }
}

/* === Landscape phone — special handling === */
/* Hero on landscape mobile reports 347vh in audit — slide system pushes
 * content off-screen. We cannot resize hero (would break swiper logic), but we
 * can give visual hint that content continues to the side via swipe. */
@media (max-width: 47.999em) and (orientation: landscape) {
  /* No structural changes (avoid breaking swiper).
   * Just ensure swiper-main is scroll-snap-friendly if browser supports. */
  .swiper-wrapper {
    scroll-snap-type: x mandatory;
  }
  .swiper-slide {
    scroll-snap-align: start;
  }
}