/* YumeStudio — mobile only (edit this for phone layout) */
@media (max-width: 900px) {
  :root { --ys-page-pad: 16px; }
  .container {
    padding-left: var(--ys-page-pad) !important;
    padding-right: var(--ys-page-pad) !important;
  }
  .main-content > .section,
  .main-content > section,
  .home-section,
  .schedule-section,
  .news-section {
    padding-left: var(--ys-page-pad);
    padding-right: var(--ys-page-pad);
  }
  /* Hero: stay inside gutters, no negative margins */
  .main-content > .hero-slider,
  .hero-slider {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 14px !important;
    aspect-ratio: 16 / 10;
    min-height: 220px;
    max-height: 380px;
    overflow: hidden;
  }
  /* Кадр: персонаж/лицо выше центра — на телефоне cover иначе «уезжает» вниз */
    .hero-slide-bg {
    background-position: var(--hero-pos-x, 50%) var(--hero-pos-y-m, 22%) !important;
    background-size: var(--hero-size, cover) !important;
  }
  .hero-slide-overlay {
    background: linear-gradient(
      180deg,
      rgba(10,10,12,.20) 0%,
      rgba(10,10,12,.45) 40%,
      rgba(10,10,12,.88) 100%
    ) !important;
  }
  .hero-slide-content {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 14px 48px 78px !important;
    gap: 8px;
    box-sizing: border-box;
    z-index: 3;
  }
  .hero-slide-badges { gap: 6px; flex-wrap: wrap; }
  .hero-slide-title {
    font-size: clamp(1.15rem, 5.2vw, 1.55rem) !important;
    line-height: 1.2 !important;
    margin: 6px 0 !important;
    word-break: break-word;
  }
  .hero-slide-description {
    display: none !important; /* less crush on small screens */
  }
  .hero-slide-meta, .hero-slide-sub {
    font-size: 12px !important;
    opacity: .9;
  }
  .hero-slide-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .hero-slide-actions .btn {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .hero-slider-prev, .hero-slider-next {
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
    opacity: .9;
    z-index: 5 !important;
  }
  .hero-slide-badges, .hero-slide-title, .hero-slide-actions, .hero-slide-meta, .hero-slide-sub {
    max-width: 100%;
    position: relative;
    z-index: 3;
  }
  .hero-slider-prev { left: 8px !important; }
  .hero-slider-next { right: 8px !important; }
  .hero-slider-dots {
    bottom: 10px !important;
    gap: 6px;
  }

  /* hero-thumbs: pin to bottom edge (desktop intent), clear action buttons */
  .hero-thumbs {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 6px !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
    gap: 6px !important;
    max-width: min(920px, 94%) !important;
    padding: 2px !important;
    margin: 0 !important;
    pointer-events: auto;
  }
  .hero-thumb {
    width: 52px !important;
    height: 34px !important;
  }

  /* Schedule: scroll pills with side pad, no squash */
  .schedule-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 4px 2px 10px !important;
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
  }
  .schedule-day {
    flex: 0 0 auto !important;
    min-width: 56px !important;
    width: auto !important;
    max-width: none !important;
    padding: 9px 14px !important;
    scroll-snap-align: start;
  }
  .schedule-day-name { font-size: 13px !important; }
  .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }
  .section-header h2 { font-size: 1.2rem; }
  /* Team centered on mobile */
  .team-grid {
    grid-template-columns: 1fr !important;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .dabber-card { align-items: center !important; text-align: center !important; }
}

@media (max-width: 420px) {
  :root { --ys-page-pad: 12px; }
  .hero-slider { min-height: 200px; aspect-ratio: 16 / 11; }
  .hero-slide-content { padding: 12px 44px 74px !important; }
  .schedule-day { min-width: 52px !important; padding: 8px 12px !important; }
}

/* Schedule: never overflow viewport */
@media (max-width: 900px) {
  .schedule-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-left: var(--ys-page-pad, 16px);
    padding-right: var(--ys-page-pad, 16px);
  }
  .schedule-section-head,
  .schedule-section .section-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .schedule-section-head h2,
  .schedule-section .section-header h2 {
    font-size: clamp(1.05rem, 4.5vw, 1.25rem) !important;
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
  }
  .schedule-section-head a,
  .schedule-section .section-header a {
    font-size: 13px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .schedule-grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px !important;
    margin: 0 !important;
  }
  .schedule-day {
    flex: 0 0 auto !important;
    min-width: 44px !important;
    padding: 8px 10px !important;
  }
}
@media (max-width: 360px) {
  .schedule-day { min-width: 40px !important; padding: 7px 8px !important; }
  .schedule-day-name { font-size: 12px !important; }
}


/* ===== Phone polish 360–430px (public pages + player) ===== */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .main-content { padding: 6px 0 28px; }

  /* Header density (nav drawer already in main.css via .nav.show) */
  .header-inner { gap: 8px; min-height: 56px; }
  .logo { font-size: 1.1rem; }

  /* Catalog / grids */
  .anime-grid,
  .ys-now-grid,
  .ys-pick-grid,
  .ys-continue-grid,
  .recommend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .anime-card-title { font-size: 13px; line-height: 1.25; }
  .anime-card-meta { font-size: 11px; gap: 6px; flex-wrap: wrap; }
  .section-title { font-size: 1.25rem; margin-bottom: 12px; }

  /* Catalog filters */
  .ys-catalog-filters .ys-cf-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .ys-cf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .ys-cf-count { width: 100%; font-size: 12px; }

  /* Detail header */
  .anime-detail {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 12px 0 8px !important;
  }
  .anime-detail .anime-card-poster,
  .anime-detail .anime-card-placeholder {
    width: min(180px, 46vw) !important;
    margin: 0 auto;
  }
  .anime-info h1 {
    font-size: clamp(1.15rem, 5.5vw, 1.45rem);
    line-height: 1.25;
    word-break: break-word;
  }
  .anime-meta-list p { font-size: 13px; line-height: 1.45; }
  .ys-breadcrumbs {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 2px 4px;
    overflow-wrap: anywhere;
  }

  /* Library status — match anime, wrap cleanly */
  .library-panel {
    margin-top: 12px;
    padding: 12px;
    gap: 10px;
  }
  .library-status-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }
  .library-status-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .library-status-btns .btn,
  .library-status-btns .btn-sm {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    text-align: center;
    padding: 8px 6px;
    font-size: 12px;
  }
  .library-rating-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .star-rating { flex-wrap: wrap; }
  .star-btn { font-size: 16px; padding: 1px; }

  /* Player — мобильная раскладка: прогресс у низа, центр.play отдельно, ряд кнопок без наложений */
  .ys-player-card {
    border-radius: 12px;
    overflow: hidden;
    margin-top: 10px;
  }
  .ys-player-stage { border-radius: 12px 12px 0 0; }
  .ys-player-media {
    /* стабильная высота кадра на телефоне (~390×220) */
    aspect-ratio: 16 / 9;
    min-height: 180px;
  }
  .ys-player-titlebar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px !important;
  }
  .ys-player-titlebar-name { font-size: 13px; }
  .ys-player-eps-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .ys-ep-tab { min-width: 40px; padding: 8px 10px; font-size: 12px; }

  /* Comments */
  .ys-comments { margin-top: 16px; }
  .ys-comment-form textarea { font-size: 14px; }
  .ys-comment-submit { width: 100%; }
  .team-chat-form-meta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* Profile */
  .ys-prof-tiles,
  .profile-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .ys-prof-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .ys-prof-tab { flex: 0 0 auto; white-space: nowrap; font-size: 13px; }

  /* Team / schedule extras */
  .team-grid { max-width: 100% !important; }
  .ys-modal, .ys-modal-backdrop .ys-modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
  }
  .ys-toasts {
    top: 10px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
  }

  /* Desc / blocks */
  .ys-desc-block, .ys-block-title { margin-top: 14px; }
  .ys-desc-body { font-size: 14px; }
}

@media (max-width: 430px) {
  .anime-grid,
  .ys-now-grid,
  .ys-pick-grid,
  .ys-continue-grid,
  .recommend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .library-status-btns .btn,
  .library-status-btns .btn-sm {
    flex: 1 1 calc(50% - 6px);
    font-size: 11.5px;
    padding: 7px 4px;
  }
  .anime-detail .anime-card-poster,
  .anime-detail .anime-card-placeholder {
    width: min(160px, 52vw) !important;
  }
}

@media (max-width: 360px) {
  .anime-grid,
  .ys-now-grid,
  .ys-pick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .library-status-btns .btn,
  .library-status-btns .btn-sm {
    flex: 1 1 100%;
  }
}


/* Sticky header shrink on phone scroll */
@media (max-width: 900px) {
  .header {
    transition: padding .22s ease, box-shadow .22s ease, background .22s ease;
  }
  .header .header-inner {
    transition: min-height .22s ease, padding .22s ease, gap .22s ease;
    min-height: 56px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .header .logo { transition: font-size .22s ease; font-size: 1.15rem; }
  .header.is-compact .header-inner {
    min-height: 42px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    gap: 6px !important;
  }
  .header.is-compact .logo { font-size: 1.02rem !important; }
  .header.is-compact .user-menu-username { display: none; }
  .header.is-compact .title-badge--sm { display: none; }
  .header.is-compact .icon-btn,
  .header.is-compact .notif-btn,
  .header.is-compact .mobile-menu-btn {
    width: 34px; height: 34px;
  }
  .header.is-compact .user-menu-avatar,
  .header.is-compact .user-menu-avatar-img {
    width: 24px !important; height: 24px !important;
  }
}

/* === Плеер (20261005playerux1): телефон — компактная панель, настройки от шестерёнки, шторка серий слева === */
html.ys-vp-lock,
html.ys-vp-lock body { overflow: hidden; }
@media (max-width: 640px) {
  .ys-player-media { min-height: 200px; }
  .ys-player-play { width: 52px; height: 52px; border-radius: 14px; top: 42%; z-index: 4; }
  .ys-player-play-ico { border-width: 10px 0 10px 16px; }
  /* при видимой панели центр не дублирует нижний play */
  .ys-player-media.ys-vp-show-ui .ys-player-play { opacity: 0; pointer-events: none; }
  .ys-vp-top { padding: 8px 10px 26px; }
  .ys-vp-top-title { font-size: 12.5px; max-width: 72%; }
  .ys-vp-controls { padding: 26px 8px 4px; }
  .ys-vp-meta { font-size: 12px; margin: 0 2px 5px; }
  .ys-vp-time { font-size: 11.5px; }
  .ys-vp-progress { height: 5px; margin: 0 2px 4px; }
  .ys-vp-progress::before {
    /* увеличенная зона касания */
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -12px; bottom: -8px;
  }
  .ys-vp-progress-knob { opacity: 1; width: 12px; height: 12px; margin: -6px 0 0 -6px; }
  /* телефон: кластеры по краям, транспорт между ними без наложений */
  .ys-vp-bar { display: flex; justify-content: space-between; gap: 2px; }
  .ys-vp-cluster--left,
  .ys-vp-cluster--right { flex: 0 0 auto; }
  .ys-vp-cluster--center { flex: 0 1 auto; }
  #ysVpPip { display: none !important; }
  .ys-vp-cluster { gap: 0; }
  .ys-vp-cluster--center { gap: 2px; }
  .ys-vp-bar .ys-vp-btn { width: 34px; height: 34px; border-radius: 9px; }
  .ys-vp-bar .ys-vp-btn .ys-ico { width: 19px; height: 19px; }
  .ys-vp-bar .ys-vp-btn--play { width: 40px; height: 40px; border-radius: 50%; }
  .ys-vp-bar .ys-vp-btn--play .ys-ico { width: 22px; height: 22px; }
  /* ±10 сек на телефоне — в настройках */
  .ys-vp-cluster--center .ys-vp-seek { display: none; }
  .ys-vp-latest { width: 32px; height: 34px; padding: 0; justify-content: center; background: transparent; }
  .ys-vp-latest-txt,
  .ys-vp-release-title { display: none; }
  .ys-vp-release { padding: 3px; }
  .ys-vp-release-thumb { width: 20px; height: 28px; }
  .ys-vp-vol-range { display: none; }
  .ys-vp-skip { right: 8px; bottom: 84px; font-size: 12px; padding: 7px 10px; }
  .ys-vp-settings { width: min(260px, calc(100vw - 16px)); }
  .ys-vp-set-row, .ys-vp-set-opt, .ys-vp-set-head { padding: 10px; }
  /* шторка серий: поверх страницы, слева */
  .ys-vp-eps {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(78vw, 320px);
    max-width: none;
    z-index: 12100;
    border-radius: 0 14px 14px 0;
    box-shadow: 12px 0 40px rgba(0,0,0,.5);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ys-vp-eps-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 12090;
    background: rgba(0,0,0,.5);
  }
  .ys-vp-eps-backdrop[hidden] { display: none; }
  .ys-vp-eps-item { padding: 10px; }
}
@media (max-width: 380px) {
  /* узкий телефон: громкость кнопками телефона */
  .ys-vp-vol { display: none; }
  .ys-vp-bar .ys-vp-btn { width: 33px; height: 34px; }
  .ys-vp-bar .ys-vp-btn--play { width: 38px; height: 38px; }
}
/* Альбомная ориентация телефона: ниже кадр, компактные подписи */
@media (max-width: 900px) and (orientation: landscape) {
  .ys-player-media { aspect-ratio: 16 / 9; max-height: min(70vh, 360px); min-height: 160px; }
  .ys-player-play { width: 44px; height: 44px; top: 40%; }
  .ys-vp-controls { padding: 20px 10px 4px; }
  .ys-vp-bar .ys-vp-btn { width: 36px; height: 36px; }
  .ys-vp-bar .ys-vp-btn--play { width: 44px; height: 44px; }
  .ys-vp-skip { bottom: 84px; }
}