/* Shared responsive overrides, loaded after component styles. Desktop is unchanged. */
@media (max-width: 900px) {
  .hub .topbar {height:auto;min-height:0;display:flex;flex-wrap:wrap;gap:10px;padding:14px 4% 0}
  .hub.home .topbar {position:relative;background:#101113}
  .hub .topbar>.brand {font-size:20px;flex:none}
  .hub .topbar>.tools {margin-left:auto;gap:8px}
  .hub .topbar>nav {order:3;flex:0 0 100%;width:100%;height:48px;margin:0;gap:22px;overflow-x:auto;justify-content:flex-start}
  .hub .topbar>nav button {font-size:14px;min-height:44px}
  .hub .topbar .profile-name {display:none}
  .hub .search-panel,.home .search-panel {position:relative;top:auto}
  .hub-content,.search-page .hub-content {min-width:0;padding-left:4%;padding-right:4%}
  .hub-hero {height:min(620px,78svh);min-height:420px}
  .hero-content {width:90%;left:5%;top:auto;bottom:65px}
  .hero-content h1 {font-size:clamp(30px,6vw,48px)}
  .hero-meta {flex-wrap:wrap;gap:8px 14px}
  .hero-switcher {bottom:35px}
  .hero-shade {background:linear-gradient(0deg,#101113 0%,#101113b0 50%,#10111320 90%)}
  .hero-art {inset:0}
  .hero-actions {flex-wrap:wrap}
  .browse-filters {flex-wrap:wrap}
  .browse-filters label {flex:1 1 130px;min-width:0}
  .browse-filters select {width:100%;max-width:100%}
  .mission-heading {flex-wrap:wrap;gap:12px}
  .mission-heading>div {flex:1 1 100%;min-width:0}
  .mission-heading h2 {overflow-wrap:anywhere;font-size:clamp(23px,4vw,32px)}
  .mission-heading>button {white-space:normal;min-height:44px;text-align:left}
  .mission-stages {overflow-x:auto;grid-template-columns:repeat(8,minmax(78px,1fr));padding-bottom:10px}
  .mission-stages>div {font-size:11px;gap:5px}
  .source-map {display:block;padding:16px;min-height:0}
  .source-map>.map-core,.source-map>.map-destination,.source-map:before {display:none}
  .mission-choice-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .mission-choices header {flex-wrap:wrap}
  .mission-choices nav {order:initial;width:auto;height:44px;flex:none;margin:0;gap:12px}
  .mission-choices nav button {width:44px;height:44px;padding:0}
  .mission-choice {aspect-ratio:auto;min-height:300px;padding:18px}
  .choice-quality {font-size:36px}
  .choice-source,.choice-eta,.choice-action,.choice-language,.choice-subtitles {font-size:13px;overflow-wrap:anywhere}
  .choice-speed,.choice-size {font-size:16px}
  .choice-label {font-size:10px}
  .choice-disclaimer,.choice-details {font-size:12px}
  .mission-center,.release-options,.release-main,.download-job {min-width:0;overflow-wrap:anywhere}
  .normalized-release>button {max-width:100%;margin-left:0}
  .mission-bottom {grid-template-columns:minmax(0,1fr)}
  .mission-bottom aside {padding:16px 0;border-left:0;border-top:1px solid var(--line)}
  .download-title {flex-wrap:wrap;gap:10px}
  .download-title>div {min-width:0}
  .settings-content,.dialog-body,.detail-text {min-width:0;overflow-wrap:anywhere}
  .settings-layout {grid-template-columns:minmax(0,1fr)}
  .settings-nav {display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px;gap:4px}
  .settings-nav button {flex:none;width:auto;white-space:nowrap;min-height:44px}
  .organized-settings .settings-content {padding:20px}
  .editor-tabs {overflow-x:auto}
  .editor-tabs button {flex:none;white-space:nowrap}
}
@media (max-width: 600px) {
  html {scrollbar-gutter:auto}
  .shell {padding-left:16px;padding-right:16px}
  .shell.hub {padding:0}
  input,select,textarea,.vault-search-field input {font-size:16px}
  .auth-wrap {padding:24px 20px;min-height:100svh}
  .auth .brand {margin-bottom:36px}
  .primary,.secondary,.icon {min-height:44px}
  .hub .topbar .watchlist-link {display:none}
  .hub .hub-row {margin-bottom:22px}
  .row-heading h2 {font-size:19px;line-height:1.3}
  .hub.landscape-rails .hub-rail>.home-card {flex:0 0 calc((100% - 12px)/2);width:calc((100% - 12px)/2);min-width:0}
  .hub .hub-rail {gap:12px;overscroll-behavior-x:contain}
  .shelf-frame>.row-arrows {display:none}
  .hub .movie-grid,.movie-grid:not(.list) {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .hub-footer {flex-wrap:wrap;gap:10px;margin-top:24px}
  .browse-heading,.section-head,.chart-context {flex-wrap:wrap;gap:10px}
  .browse-title,.page-heading {font-size:30px;margin:24px 0 16px}
  .filters {flex-wrap:wrap}
  .loading {padding:40px 16px}
  dialog:not(#player) {width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);margin:auto;border-radius:12px;overflow:auto;overscroll-behavior:contain}
  .dialog-top {padding:16px;gap:12px}
  .dialog-top h2 {font-size:21px;min-width:0;overflow-wrap:anywhere}
  .dialog-top .icon {flex:none}
  .dialog-body {padding:18px 16px}
  #detail.film-panel.cinematic {width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  #detail.film-panel.cinematic .detail-art {height:270px}
  #detail.film-panel.cinematic .detail-content {margin-top:-85px;padding:0 16px}
  #detail.film-panel.cinematic .detail-text h1 {font-size:clamp(28px,8vw,40px);height:auto;min-height:52px;max-width:100%;margin-bottom:14px;overflow-wrap:anywhere}
  #detail.film-panel.cinematic .detail-text h1 .title-art-logo {max-width:100%!important;max-height:72px!important}
  #detail.film-panel.cinematic .actions {flex-wrap:wrap;gap:10px;min-height:0}
  #detail.film-panel.cinematic #detail-play {flex:1 1 100%;width:100%;height:48px}
  #detail.film-panel.cinematic .film-round {width:44px;height:44px;flex:0 0 44px}
  #detail.cinematic .cinematic-party {margin-left:0;min-height:44px}
  #detail.cinematic .film-more {margin-left:0}
  #detail.cinematic .cinematic-action-label {display:none}
  #detail.cinematic .cinematic-description {display:block;margin-bottom:16px}
  #detail.cinematic .cinematic-match[open] .metadata-confidence {position:static;width:auto;max-width:100%;margin:10px 0}
  #detail.cinematic .cinematic-tabs {flex-wrap:wrap;gap:4px 12px}
  #detail.cinematic .cinematic-tabs>[role=tab] {min-height:44px;font-size:13px}
  #detail.cinematic .cinematic-tabs>.cinematic-admin {margin-left:0;min-height:44px;display:grid;align-items:center}
  #detail.cinematic .cinematic-admin[open] .cinematic-admin-content {width:100%;max-width:100%;top:100%}
  #detail.cinematic .cinematic-panes {padding:16px}
  #detail.cinematic .cinematic-overview {grid-template-columns:minmax(0,1fr)}
  #detail.cinematic .cinematic-preview-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible}
  #detail .episode-row {display:grid;grid-template-columns:20px 84px minmax(0,1fr);gap:8px;contain-intrinsic-size:auto 100px}
  #detail .episode-row .art {width:84px}
  #detail .episode-row>* {min-width:0;overflow-wrap:anywhere}
  .film-credits {grid-template-columns:minmax(0,1fr)}
  .mission-choice-grid {grid-template-columns:minmax(0,1fr);gap:14px}
  .mission-choice {min-height:0;gap:4px;padding:20px}
  .mission-choices .choice-action {margin-top:20px;min-height:40px;align-items:center}
  .mission-choices {padding:0}
  .source-map {padding:14px}
  .mission-transfer {padding:16px}
  .mission-transfer .download-title strong {font-size:20px}
  .release-specs {grid-template-columns:minmax(0,1fr)}
  .normalized-release {gap:12px}
  .normalized-release .release-main {flex-basis:100%}
  .normalized-release .release-resolution {flex-basis:auto;text-align:left}
  .request-history-panel {width:min(360px,calc(100vw - 32px))}
  .search-request {padding:16px}
  .search-request>button {white-space:normal;min-height:44px}
  .catalog-card {gap:12px;padding:12px}
  .catalog-art {width:66px}
  .catalog-copy h3 {font-size:17px;overflow-wrap:anywhere}
  .catalog-actions {flex-direction:column}
  .cinemas-filters {flex-wrap:wrap}
  .cinemas-filters label {flex:1 1 150px;min-width:0}
  .chart-details {padding:20px 16px}
  .status-line,.user-row,.admin-row-head {flex-wrap:wrap;gap:10px;overflow-wrap:anywhere}
  .admin-row-head {display:flex;align-items:flex-start}
  .admin-row-head .secondary {white-space:normal;max-width:100%}
  .settings-content .actions>* {max-width:100%;white-space:normal}
  .editor-row,.artwork-edit-grid {grid-template-columns:minmax(0,1fr)}
  .match-search,.match-result {flex-wrap:wrap;gap:10px}
  .history-list article {gap:10px}
  .history-list article>div {min-width:0}
  .quality-task-centre {right:8px;bottom:max(8px,env(safe-area-inset-bottom));width:min(340px,calc(100vw - 16px))}
  .quality-task-stack {max-height:35dvh}
  #player .cinema-header {height:auto;min-height:85px;padding:12px max(12px,env(safe-area-inset-right)) 30px max(12px,env(safe-area-inset-left));flex-wrap:wrap;gap:8px}
  #player .cinema-title {flex:1;min-width:0}
  #player .cinema-title h2 {font-size:15px;max-height:40px;overflow:hidden}
  #player .party-ribbon {flex:1 1 100%;margin:0;justify-content:flex-end}
  #player .party-ribbon .party-live {width:auto;flex:1;text-align:left}
  #player .cinema-controls {padding:32px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  #player .control-row {flex-wrap:wrap;gap:4px;margin-top:8px}
  #player .cinema-button,#player .playback-options>summary {width:40px;height:44px;padding:7px}
  #player .cinema-button svg {width:24px;height:24px}
  #player .volume-group {display:none}
  #player .control-spacer {flex:1;min-width:0}
  #player .playback-options>div,#player .playback-options>div.player-menu {position:fixed;left:12px;right:12px;bottom:max(100px,env(safe-area-inset-bottom));width:auto;max-height:calc(100dvh - 200px);overflow:auto}
  #player .timeline input {height:8px}
  #player .cinema-paused {left:16px;bottom:160px;max-width:calc(100% - 32px)}
  #player .cinema-paused h3 {font-size:21px}
  #up-next {width:calc(100% - 32px);right:16px;padding:16px}
  .party-lobby {margin:5svh auto;padding:20px}
  .party-lobby h1 {font-size:34px}
}
/* Phone composition: visible navigation, two readable cards and separate overlays. */
@media (max-width:600px) {
  .hub .topbar>nav {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:auto;gap:4px;margin:0 0 10px;overflow:visible}
  .hub .topbar>nav button {height:44px;min-width:0;padding:6px;font-size:13px;border-radius:8px;text-align:center;color:#b7bac2}
  .hub .topbar>nav button.active {color:#f2cf91;background:#e2bc781c;box-shadow:inset 0 0 0 1px #e2bc7850}
  .hub.home .hub-content {margin-top:0;padding-top:18px}
  .hub-hero {height:auto;min-height:0;padding:150px 0 16px}
  .hero-content {position:relative;left:auto;top:auto;bottom:auto;margin:0 5%;width:90%}
  .hero-content h1 {margin:12px 0}
  .hero-content h1 img {max-height:100px;max-width:100%;object-fit:contain;object-position:left}
  .hero-content p {font-size:13px;margin:12px 0 16px;-webkit-line-clamp:2}
  .hero-actions .primary,.hero-actions .secondary {font-size:14px;padding:12px 18px}
  .hero-switcher {position:relative;right:auto;bottom:auto;justify-content:center;margin:18px 0 0}
  .hero-switcher button {height:6px}
  .hub .hub-row {margin-bottom:18px}
  .row-heading {margin-bottom:9px}
  .row-heading h2 {font-size:17px}
  .shelf-note {font-size:12px;line-height:1.4}
  .home-card-title {left:9px;right:9px;bottom:8px;font-size:13px}
  .home-card-title.has-title-art {width:80%;height:44%}
  .home-card-remaining {font-size:11px}
  .hub-content {padding-bottom:90px}
  .quality-task-centre:has(.quality-task-heading[aria-expanded="false"]) {width:auto;max-width:calc(100vw - 24px);border-radius:24px}
  .quality-task-heading {padding:10px 14px;min-height:44px;font-size:12px;gap:12px}
  .quality-task-centre {right:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-height:55dvh}
  #toast {top:calc(12px + env(safe-area-inset-top));bottom:auto;width:calc(100% - 24px);max-width:400px;padding:12px 16px;font-size:13px;transform:translateX(-50%);z-index:100}
  #toast.visible {transform:translateX(-50%)}
}
@media (max-height:500px) and (orientation:landscape) {
  #player .cinema-header {height:auto;min-height:0;padding-top:8px;padding-bottom:20px}
  #player .cinema-controls {padding-top:20px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  #player .control-row {gap:6px;margin-top:4px}
  #player .playback-options>div,#player .playback-options>div.player-menu {max-height:calc(100dvh - 120px);bottom:80px}
  #player .cinema-paused {display:none}
}

/* Native touch scrolling owns both axes, including momentum and pinch zoom. */
.hub .hub-rail {touch-action:auto}
@media (hover:none) and (pointer:coarse) {
 .home-card-art {clip-path:none;isolation:auto;transition:none}
 .home-card:hover .home-card-art {filter:none}
}