:root {
  --pad-x: clamp(0.85rem, 2.8vw, 1.75rem);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --touch-min: 44px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  touch-action: manipulation;
}

body {
  padding-bottom: var(--safe-bottom);
  overflow-x: clip;
  touch-action: manipulation;
  overscroll-behavior-y: contain;
}

.page-wrap {
  padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px));
}

button,
a,
.chip,
.btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}


@media (pointer: coarse) {
  .anime-card:hover .anime-card__media {
    transform: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  }

  .anime-card:hover .anime-card__media img {
    transform: none;
  }

  .btn,
  .chip,
  .anime-page__tab,
  .anime-page__cinema,
  .anime-page__vote,
  .player__dd-btn,
  .kage-video__btn,
  .lists__tab,
  .catalog__menu-btn {
    min-height: var(--touch-min);
  }
}


@media (max-width: 1024px) {
  :root {
    --radius: 12px;
    --radius-sm: 9px;
  }

  .page {
    padding-bottom: calc(2.25rem + var(--safe-bottom));
  }
}


@media (max-width: 820px) {
  .site-bg__blur {
    display: none;
  }

  .site-bg__grid {
    display: none;
  }

  .header,
  .kage-video__bar,
  .kage-video__menu,
  .kage-video__vol-hud,
  .kage-video__tap-hint,
  .player-prefs,
  .player__dd-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-bg__grid {
    opacity: 0.35;
    background-size: 48px 48px;
  }

  .anime-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 0.75rem;
  }

  .anime-card {
    gap: 0.5rem;
    animation: none;
    min-width: 0;
  }

  .anime-card__title {
    font-size: 0.86rem;
  }

  .anime-card__info {
    font-size: 0.72rem;
  }

  .anime-card__media {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  }

  .footer__inner {
    padding-top: 1.75rem;
    padding-bottom: calc(1.15rem + var(--safe-bottom));
  }

  .catalog__panel {
    padding: 0.85rem;
  }

  .catalog__quick {
    gap: 0.4rem;
  }

  .chip {
    padding: 0.45rem 0.75rem;
  }

  .anime-page {
    padding-top: 0.75rem;
    padding-bottom: calc(1.75rem + var(--safe-bottom));
  }

  .anime-page__crumbs {
    margin-bottom: 0.75rem;
  }


  .anime-page__watch {
    margin: 1rem calc(-1 * var(--pad-x)) 0.85rem;
    max-width: none;
    width: calc(100% + 2 * var(--pad-x));
  }

  .anime-page.is-minimal .anime-page__watch {
    margin-top: 0.55rem;
  }

  .anime-page__tab {
    min-height: 2.15rem;
    padding: 0.35rem 0.45rem;
    font-size: 0.7rem;
  }

  .anime-page__sources .anime-page__tab {
    min-height: 2.1rem;
    padding: 0.3rem 0.25rem;
  }

  .anime-page__watch-bar {
    margin-top: 0.55rem;
    padding: 0 var(--pad-x);
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .anime-page__cinema,
  .anime-page__vote {
    min-height: 2.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
  }

  .anime-page__votes {
    gap: 0.35rem;
  }

  .anime-page__order-list {
    grid-template-columns: 1fr;
  }

  .player {
    border-radius: 0;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.06);
    max-width: 100%;
  }

  .player__viewport,
  .player__stage {
    max-width: 100%;
  }

  .player__top {
    padding: 0.45rem max(0.75rem, var(--pad-x, 0.85rem)) 1.4rem;
    max-width: 100%;
  }

  .player__selects {
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.3rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .player.is-menu .player__selects {
    overflow: visible !important;
  }

  .player.is-menu {
    overflow: visible;
  }

  .player.is-menu .player__dd-menu {
    z-index: 30;
    max-height: min(62dvh, 420px);
  }

  .player.is-menu .player__dd-scroll {
    max-height: min(58dvh, 390px);
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .player.is-menu .player__dd-scroll .player__dd-item {
    touch-action: pan-y;
  }

  .player__selects::-webkit-scrollbar {
    display: none;
  }

  .player__dd-btn {
    min-height: 2.35rem;
    padding: 0.38rem 0.5rem 0.38rem 0.6rem;
    font-size: 0.72rem;
    max-width: min(9rem, 42vw);
  }

  .player__side,
  .player__side--prev,
  .player__side--next {
    display: none !important;
  }

  .player__age {
    font-size: 0.68rem;
    padding: 0.28rem 0.45rem;
  }

  .kage-video__dock {
    bottom: 0 !important;
    padding: 1.75rem 0.5rem 0.4rem !important;
    transform: none !important;
  }

  .kage-video.is-ui .kage-video__dock {
    transform: none !important;
  }

  .kage-video__bar {
    gap: 0.05rem;
    min-height: 2.4rem;
    flex-wrap: nowrap;
    max-width: 100%;
  }

  .kage-video__btn {
    width: 2.45rem;
    height: 2.45rem;
    flex-shrink: 0;
  }

  .kage-video__time {
    font-size: 0.7rem;
    letter-spacing: -0.01em;
    flex-shrink: 1;
    min-width: 0;
  }

  .kage-video__title {
    display: none;
  }

  .kage-video__vol .kage-video__range {
    display: none !important;
  }

  .kage-video__seek {
    height: 22px;
    margin-bottom: 0.1rem;
  }

  .kage-video__seek:hover {
    height: 22px;
  }

  .kage-video__track {
    height: 3px;
  }

  .kage-video__thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .player:fullscreen .kage-video__dock,
  .player:-webkit-full-screen .kage-video__dock {
    padding-bottom: max(0.4rem, var(--safe-bottom)) !important;
  }

  .kage-video__bigplay {
    width: 3.5rem;
    height: 3.5rem;
    box-shadow:
      0 0 0 5px rgba(204, 28, 57, 0.14),
      0 10px 22px rgba(0, 0, 0, 0.4);
  }

  .kage-video__tip-video,
  .kage-video__tip-time {
    display: none !important;
  }

  .lists__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem 0.6rem;
  }

  .history__row,
  .history__meta,
  .history__link {
    min-width: 0;
  }

  .settings-head,
  .account-layout,
  .auth-card,
  .auth-shell,
  .profile-page,
  .profile-hero {
    min-width: 0;
    max-width: 100%;
  }
}


@media (max-width: 640px) {
  .anime-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem 0.65rem;
  }

  .lists__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lists__tabs {
    gap: 0.35rem;
  }

  .lists__tab {
    font-size: 0.8rem;
    padding: 0.4rem 0.7rem;
  }

  .catalog__pager {
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .catalog__panel-actions {
    width: 100%;
  }

  .catalog__panel-actions .btn {
    flex: 1 1 calc(50% - 0.35rem);
    min-width: 0;
  }

  .home__links {
    gap: 0.4rem;
  }

  .section__link {
    font-size: 0.76rem;
    padding: 0.38rem 0.7rem 0.38rem 0.8rem;
  }

  .search__suggest {
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
  }
}


@media (max-width: 480px) {
  .anime-grid {
    gap: 0.85rem 0.55rem;
  }

  .anime-page__fav .btn,
  .btn--fav {
    font-size: 0.82rem;
    padding: 0.55rem 0.65rem;
  }

  .player__dd-btn {
    max-width: min(6.6rem, 38vw);
  }

  .kage-video__vol .kage-video__range {
    display: none !important;
  }

  .footer__cols {
    grid-template-columns: 1fr 1fr;
  }

  .minimal-fab--float .minimal-fab__text {
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .page__lead {
    max-width: none;
  }
}


@media (max-width: 374px) {
  .anime-grid {
    gap: 0.75rem 0.45rem;
  }

  .anime-card__title {
    font-size: 0.8rem;
  }

  .anime-card__rating,
  .anime-card__score {
    font-size: 0.62rem;
    padding: 0.15rem 0.32rem;
  }

  .player__dd-btn {
    max-width: min(5.5rem, 34vw);
    font-size: 0.68rem;
    padding: 0.32rem 0.4rem;
  }

  .kage-video__btn {
    width: 2.2rem;
    height: 2.2rem;
  }

  .kage-video__time {
    font-size: 0.64rem;
  }

  .section__head {
    gap: 0.5rem;
  }

  .footer__cols {
    grid-template-columns: 1fr;
  }

  .footer__col--info {
    grid-column: auto;
  }

  .anime-page__layout {
    grid-template-columns: 100px minmax(0, 1fr) !important;
    gap: 0.75rem 0.65rem !important;
  }
}


@media (max-width: 900px) and (orientation: landscape) {
  .header__inner {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .anime-page__watch {
    margin-top: 0.85rem;
  }

  .kage-video__dock {
    padding-bottom: 0.4rem;
  }

  .anime-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}


/* Phone landscape: short height, often width > 720px — use max-height */
@media (orientation: landscape) and (max-height: 540px) {
  :root {
    --pad-x: 0.65rem;
  }

  .header__inner {
    min-height: 2.35rem;
    padding-top: max(0.25rem, env(safe-area-inset-top, 0px));
    padding-bottom: 0.25rem;
    gap: 0.45rem;
  }

  .header__name {
    font-size: 0.95rem;
  }

  .header__mark {
    width: 1.35rem;
    height: 1.35rem;
  }

  .header__tools {
    gap: 0.35rem;
  }

  .header__account-trigger,
  .header__burger {
    width: 2.15rem;
    height: 2.15rem;
  }

  /* Dock eats vertical space — hide; header burger covers nav */
  .mobile-dock {
    display: none !important;
  }

  .app-main {
    padding-bottom: 0.75rem !important;
  }

  .footer {
    display: none !important;
  }

  .page {
    padding-bottom: 0.75rem;
  }

  .anime-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.65rem 0.55rem;
  }

  /* Compact anime page — keep scrollable, do not lock viewport */
  html[data-page='anime'] .header {
    position: sticky;
    top: 0;
    z-index: 90;
  }

  html[data-page='anime'] .site-bg {
    opacity: 0.25;
  }

  html[data-page='anime'] .anime-page {
    padding-top: 0.35rem;
    padding-bottom: 1rem;
  }

  html[data-page='anime'] .anime-page__crumbs {
    display: none !important;
  }

  html[data-page='anime'] .anime-page__layout,
  html[data-page='anime'] .anime-page__minimal-cover {
    display: none !important;
  }

  html[data-page='anime'] .anime-page__watch {
    margin: 0.35rem 0 0.65rem !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Player fits short landscape height; page below stays reachable by scroll */
  html[data-page='anime'] .player {
    max-height: min(72dvh, calc(100dvh - 3.2rem));
    max-height: min(72vh, calc(100vh - 3.2rem));
  }

  html[data-page='anime'] .player__viewport {
    aspect-ratio: 16 / 9;
    max-height: min(72dvh, calc(100dvh - 3.2rem));
    max-height: min(72vh, calc(100vh - 3.2rem));
    height: auto;
    width: 100%;
  }

  html[data-page='anime'] .player__stage,
  html[data-page='anime'] .kage-video {
    width: 100%;
    height: 100%;
  }

  html[data-page='anime'] .anime-page__player-loading {
    min-height: min(52dvh, 240px);
  }

  html[data-page='anime'] .anime-page__toolbar {
    margin-bottom: 0.35rem;
    gap: 0.35rem;
  }

  html[data-page='anime'] .anime-page__watch-bar {
    margin-top: 0.4rem;
    gap: 0.4rem;
  }

  html[data-page='anime'] .countdown {
    margin: 0.25rem auto 0.45rem;
    gap: 0.3rem;
  }

  html[data-page='anime'] .countdown__label {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  html[data-page='anime'] .countdown__digits {
    gap: 0.45rem 0.75rem;
  }

  html[data-page='anime'] .countdown__digits div {
    min-width: 2.4rem;
  }

  html[data-page='anime'] .countdown__digits strong {
    font-size: 1.15rem;
  }

  html[data-page='anime'] .player__top {
    padding: 0.35rem 0.55rem 1.1rem;
    gap: 0.35rem;
  }

  html[data-page='anime'] .player__dd-btn {
    min-height: 2rem;
    max-width: min(8.5rem, 28vw);
    font-size: 0.7rem;
    padding: 0.28rem 0.45rem 0.28rem 0.55rem;
  }

  html[data-page='anime'] .player__speed-btn {
    min-height: 2rem;
    min-width: 2.2rem;
    font-size: 0.72rem;
  }

  html[data-page='anime'] .player__side {
    display: none !important;
  }

  html[data-page='anime'] .player__play-btn {
    width: 3.5rem;
    height: 3.5rem;
  }

  html[data-page='anime'] .player__resume {
    max-width: min(22rem, 70vw);
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem;
  }

  html[data-page='anime'] .kage-video__dock {
    padding: 1.6rem 0.65rem max(0.35rem, env(safe-area-inset-bottom, 0px));
  }

  html[data-page='anime'] .kage-video__btn {
    width: 2.15rem;
    height: 2.15rem;
  }

  /* Episode / season / dub: wide panels */
  html[data-page='anime'] .player.is-menu .player__dd-menu {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 720px);
    max-width: min(92vw, 720px);
    min-width: min(92vw, 720px);
    max-height: min(82dvh, 360px);
    z-index: 120;
    animation: none;
  }

  html[data-page='anime'] .player.is-menu .player__dd-menu--list .player__dd-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr));
    gap: 0.3rem;
    padding: 0.45rem;
    max-height: min(74dvh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  html[data-page='anime'] .player.is-menu .player__dd-menu--list .player__dd-item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 2.55rem;
    padding: 0.4rem 0.35rem;
    border-radius: 10px;
    text-align: center;
  }

  html[data-page='anime'] .player.is-menu .player__dd-menu--list .player__dd-item-main {
    align-items: center;
  }

  html[data-page='anime'] .player.is-menu .player__dd-menu--list .player__ep-word,
  html[data-page='anime'] .player.is-menu .player__dd-menu--list .player__ep-done {
    display: none;
  }

  html[data-page='anime'] .player.is-menu .player__dd-menu--list .player__ep-num {
    font-size: 0.95rem;
    font-weight: 800;
  }

  html[data-page='anime'] .player.is-menu .player__dd-menu--wide .player__dd-scroll,
  html[data-page='anime'] .player.is-menu .player__dd-menu:not(.player__dd-menu--list) .player__dd-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.3rem;
    padding: 0.45rem;
    max-height: min(74dvh, 320px);
  }

  html[data-page='anime'] .player.is-menu::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
  }
}


@media (min-width: 1280px) {
  .anime-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (min-width: 1440px) {
  :root {
    --max: min(1120px, 100%);
  }
}

@media (min-width: 1920px) {
  :root {
    --max: min(1200px, 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .anime-card,
  .player,
  .site-bg__blur {
    animation: none !important;
  }
}

@media (update: slow) {
  .site-bg,
  .anime-card__media img {
    filter: none !important;
  }

  .header {
    backdrop-filter: none;
    background: rgba(24, 24, 27, 0.97);
  }
}