/* UAKino mobile fidelity v6.2.0
 * Final responsive layer. Keep this file loaded after module/plugin styles.
 * The base theme already contains the original UAKino breakpoints; this layer
 * only neutralizes late DLE/plugin overrides that can widen a mobile page.
 */

@media screen and (max-width: 760px) {
  /* Never let an embedded/player block turn the whole document into a
     horizontally scrollable canvas. The original mobile layout is centered. */
  html,
  body {
    overflow-x: hidden;
  }

  /* DLE content can contain raw images/tables/iframes from xfields or stories. */
  #dle-content,
  .content-box,
  .full-text,
  .full-text p,
  .full-text div {
    min-width: 0;
    max-width: 100%;
  }

  #dle-content img,
  #dle-content video,
  #dle-content iframe,
  #dle-content object,
  #dle-content embed,
  .full-text img,
  .full-text video,
  .full-text iframe,
  .full-text object,
  .full-text embed {
    max-width: 100% !important;
  }

  .full-text,
  .full-text a,
  .full-text p,
  .fi-desc,
  .movie-title,
  .alltitle h1 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .full-text pre,
  .full-text code {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .full-text table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- Season fullstory ----------
     smart-player.css used nowrap for screenshots. At <=760px that makes the
     four 47%-wide screenshots one ~190%-wide line and shifts the entire page. */
  .season-page--snapshot,
  .season-page--snapshot .movie-wrap,
  .season-page--snapshot .movie-left,
  .season-page--snapshot .movie-right,
  .season-page--snapshot .film-top-info,
  .season-page--snapshot .film-poster-serial,
  .season-page--snapshot .film-info-serial,
  .season-page--snapshot .film-info,
  .season-page--snapshot .full-text,
  .season-page--snapshot .season-screens,
  .season-page--snapshot .season-players,
  .season-page--snapshot .season-player-box,
  .season-page--snapshot .ashdi-smart,
  .season-page--snapshot .ashdi-smart .playlists-player,
  .season-page--snapshot .uakino-embed,
  .season-page--snapshot .uakino-embed__mount,
  .season-page--snapshot .season-links {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .season-page--snapshot {
    width: 100%;
  }

  .season-page--snapshot .movie-wrap {
    width: 100%;
  }

  .season-page--snapshot .movie-left,
  .season-page--snapshot .movie-right {
    width: 100% !important;
  }

  .season-page--snapshot .season-sidebar {
    width: 300px;
    max-width: 100%;
  }

  .season-page--snapshot .season-screens {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin: 15px 0 18px;
    white-space: normal !important;
    overflow: hidden;
    text-align: left;
  }

  .season-page--snapshot .season-screens > .scr-img,
  .season-page--snapshot .season-screens > img {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .season-page--snapshot .season-screens > .scr-img img,
  .season-page--snapshot .season-screens > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: 100% !important;
    object-fit: cover;
  }

  /* Player tabs stay in one 50px row, but scroll inside themselves if a
     third-party player adds an extra tab. They no longer widen the page. */
  .season-page--snapshot .season-players > .tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    height: 50px;
    min-height: 50px;
    padding-right: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .season-page--snapshot .season-players > .tabs::-webkit-scrollbar {
    display: none;
  }

  .season-page--snapshot .season-players > .tabs > li {
    flex: 0 0 auto;
    float: none;
    min-width: 0;
    margin: 0;
  }

  .season-page--snapshot .season-player-box,
  .season-page--snapshot .ashdi-smart,
  .season-page--snapshot .ashdi-smart__ratio,
  .season-page--snapshot .ashdi-smart__iframe,
  .season-page--snapshot .ashdi-smart .playlists-iframe,
  .season-page--snapshot .uakino-embed,
  .season-page--snapshot .uakino-embed__mount,
  .season-page--snapshot .uakino-embed__ratio,
  .season-page--snapshot .uakino-embed__iframe {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .season-page--snapshot .ashdi-smart .playlists-items ul,
  .season-page--snapshot ul.seasons {
    width: 100% !important;
    max-width: 100% !important;
  }

  .season-page--snapshot .ashdi-smart .playlists-items li,
  .season-page--snapshot ul.seasons li {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Custom collection pages also live inside the legacy 320/640px shell. */
  .uc-page-shell,
  .collections-page,
  .collections-news-grid,
  .collections-original-grid,
  .favoritepro-page-shell {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 590px) {
  /* styles.css intentionally uses a centered 320px mobile shell, just like the
     reference UAKino snapshot. uakino-modules.css had later !important catalog
     rules that expanded it back to full viewport width. */
  .cat-wr {
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .uakino-catalog-module,
  .uakino-catalog-module .cat-filter,
  .uakino-catalog-module .filter-box,
  .uakino-catalog-results {
    max-width: 100% !important;
  }

  .season-page--snapshot .film-top-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
  }

  .season-page--snapshot .film-poster-serial,
  .season-page--snapshot .film-info-serial {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .season-page--snapshot .fi-item-s {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    padding: 12px 10px;
  }

  .season-page--snapshot .season-players > .tabs > li {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
  }

  .season-page--snapshot .ashdi-smart .playlists-items li {
    width: calc(50% - 2px) !important;
    max-width: calc(50% - 2px) !important;
  }

  .season-page--snapshot ul.seasons li {
    width: 50% !important;
  }

  /* Keep modals inside the device viewport without changing desktop geometry. */
  #fav-create-list.favoritepro-modal,
  .collections-user-modal {
    width: calc(100vw - 24px);
    max-width: 320px;
  }
}

@media screen and (max-width: 380px) {
  .season-page--snapshot .season-screens {
    gap: 4px;
  }

  .season-page--snapshot .season-players > .tabs > li {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
  }
}

/* Header fidelity v6.3.0
 * Keep the mobile header in the same order/geometry as the reference site:
 * logo -> menu -> emoji rating -> search -> favorites/play -> account.
 * reset-settings.css applies horizontal padding to every <button>; without an
 * explicit reset that turns .show-menu into a ~57px content button and makes
 * it overlap the emoji item.
 */
@media screen and (max-width: 590px) {
  .head-fixed-inner {
    height: 50px;
  }

  .head-fixed-inner > nav {
    height: 50px;
  }

  .head-fixed-inner .show-menu {
    display: block !important;
    box-sizing: border-box !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    background: #ca563f !important;
    color: #fff !important;
    line-height: 50px !important;
    text-align: center !important;
    cursor: pointer;
    overflow: hidden;
    vertical-align: top;
    appearance: none;
    -webkit-appearance: none;
  }

  .head-fixed-inner .show-menu i,
  .head-fixed-inner .show-menu .fa {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 50px !important;
    font-size: 18px !important;
    text-align: center;
  }

  /* Four 50px actions on the right. Keeping the legacy right floats preserves
     the visual order of the original header: popcorn, search, play, account. */
  .head-right {
    width: 200px;
    height: 50px;
    right: 10px;
    top: 0;
    white-space: nowrap;
  }

  .head-right > a,
  .head-right > .show-search,
  .head-right > .show-login {
    box-sizing: border-box;
    width: 50px !important;
    min-width: 50px;
    max-width: 50px;
    height: 50px !important;
    margin: 0 !important;
  }

  .head-right > .show-login {
    line-height: 50px;
  }

  .head-right > .show-login i {
    top: 0 !important;
    left: 0 !important;
    width: 50px;
    height: 50px;
    line-height: 50px !important;
    text-align: center;
  }
}