/* Responsive layout: all touch actions keep a reserved target and layout space. */
@media(min-width:1600px) {
  .anime-rail {
    grid-auto-columns:calc((100% - 100px)/6)
  }

}

@media(max-width:1200px) {
  :root {
    --sidebar-width:200px
  }

  .app-sidebar {
    padding-inline:14px
  }

  .app-sidebar .brand {
    font-size:.8rem
  }

  .app-header {
    padding-inline:24px
  }

  #main-content {
    padding:24px
  }

  .hero-content {
    padding:30px
  }

  .hero {
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)
  }

  .anime-rail {
    grid-auto-columns:calc((100% - 48px)/4);
    gap:16px
  }

  .filter-panel {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .player-controls {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

  .player-controls>button {
    margin:0
  }

  .player-controls #player-prev {
    grid-column:1/3;
    grid-row:2
  }

  .player-controls #player-next {
    grid-column:3/5;
    grid-row:2
  }

}

@media(max-width:900px) {
  :root {
    --sidebar-width:0px;
    --header-height:74px
  }

  .app-sidebar {
    display:none
  }

  .app-header {
    padding:12px 20px;
    gap:12px
  }

  #main-content {
    padding:24px 20px calc(32px + var(--mobile-nav-height) + env(safe-area-inset-bottom))
  }

  .workspace-heading h1 {
    font-size:1.25rem
  }

  .workspace-heading .section-kicker {
    font-size:.55rem
  }

  .topbar-actions {
    gap:8px
  }

  .profile-trigger {
    padding:4px;
    border-radius:50%
  }

  #profile-name {
    display:none
  }

  .pwa-install {
    display:none
  }

  .download-drawer-toggle {
    padding:9px;
    min-width:44px
  }

  .download-drawer-toggle>span {
    display:none
  }

  .hero {
    min-height:320px
  }

  .hero-content h2 {
    font-size:2.25rem
  }

  .anime-rail {
    grid-auto-columns:calc((100% - 48px)/4)
  }

  .mobile-nav {
    position:fixed;
    inset:auto 0 0;
    z-index:50;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:var(--mobile-nav-height);
    padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    border-top:1px solid var(--line);
    background:#141419f5;
    backdrop-filter:blur(16px)
  }

  .mobile-nav a {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
    gap:3px;
    min-height:56px;
    font-size:.67rem;
    color:var(--muted);
    border-radius:9px
  }

  .mobile-nav a span {
    font-size:1.35rem;
    line-height:1.2
  }

  .mobile-nav a.is-active {
    background:var(--accent-soft);
    color:var(--accent)
  }

  .toast {
    bottom:calc(var(--mobile-nav-height) + 16px + env(safe-area-inset-bottom))
  }

  .download-drawer {
    padding-bottom:env(safe-area-inset-bottom)
  }

  .dialog-shell {
    grid-template-columns:180px minmax(0,1fr);
    gap:22px;
    padding:24px
  }

  .hero-actions {
    gap:8px
  }

  .hero-actions>* {
    font-size:.78rem;
    padding-inline:14px
  }

  .workspace-tools {
    grid-template-columns:minmax(180px,.8fr) minmax(240px,1.2fr);
    gap:10px 16px
  }

  .source-picker {
    gap:8px
  }

  .source-picker>span {
    display:none
  }

}

@media(max-width:600px) {
  body {
    font-size:14px
  }

  .app-header {
    padding:12px 16px
  }

  .workspace-heading .section-kicker {
    letter-spacing:.1em
  }

  .workspace-heading h1 {
    font-size:1.2rem
  }

  #main-content {
    padding:20px 16px calc(26px + var(--mobile-nav-height) + env(safe-area-inset-bottom))
  }

  .workspace-tools {
    grid-template-columns:1fr;
    gap:12px;
    margin-bottom:24px
  }

  .source-picker {
    display:grid;
    grid-template-columns:auto minmax(0,1fr)
  }

  .source-picker>span {
    display:block
  }

  .source-picker select {
    min-height:44px;
    font-size:16px
  }

  .search-box {
    grid-row:1
  }

  .search-box input {
    font-size:16px
  }

  .search-hint {
    display:none
  }

  .search-box button {
    min-height:36px
  }

  .hero {
    grid-template-columns:1fr;
    min-height:0;
    margin-bottom:30px
  }

  .hero-content {
    padding:28px 24px
  }

  .hero-content h2 {
    font-size:2rem;
    max-width:15ch
  }

  .hero-label {
    font-size:.61rem
  }

  .hero-backdrop {
    width:70%;
    opacity:.25
  }

  .hero-backdrop::after {
    background:linear-gradient(90deg,#321c27,transparent)
  }

  .hero-copy {
    font-size:.86rem
  }

  .hero-actions {
    margin-top:20px
  }

  .hero-actions>* {
    flex:1;
    padding-inline:10px;
    font-size:.75rem
  }

  .hero-feature-meta {
    font-size:.75rem
  }

  .section-heading {
    gap:12px;
    margin-bottom:20px
  }

  .section-heading h2 {
    font-size:1.6rem
  }

  .section-heading .result-count {
    width:100%
  }

  .shelf-heading {
    gap:8px;
    align-items:flex-start
  }

  .shelf-heading>div {
    flex:1
  }

  .shelf-heading h3 {
    font-size:1rem;
    line-height:1.4
  }

  .shelf-more {
    font-size:.73rem;
    min-height:32px;
    padding-top:0;
    white-space:nowrap
  }

  .anime-rail {
    grid-auto-columns:calc((100% - 24px)/2.25);
    gap:12px
  }

  .anime-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
  }

  .card-body {
    padding:12px 10px 6px
  }

  .card-body strong {
    font-size:.83rem
  }

  .card-actions {
    padding:4px 8px 8px
  }

  .card-heart,.card-watchlist {
    width:44px;
    min-height:44px
  }

  .anime-card-meta {
    font-size:.68rem
  }

  .filter-panel {
    padding:16px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
  }

  .filter-search {
    grid-column:1/-1
  }

  .filter-panel input,.filter-panel select {
    font-size:16px
  }

  .filter-actions {
    display:grid;
    grid-template-columns:1fr 1fr
  }

  .catalog-pagination {
    gap:10px;
    font-size:.75rem
  }

  .catalog-pagination button {
    padding:8px;
    font-size:.72rem
  }

  .download-filter {
    width:100%
  }

  .job-card {
    padding:18px
  }

  dialog {
    max-width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    border-radius:16px
  }

  .dialog-toolbar,.settings-header {
    padding:12px 16px
  }

  .dialog-shell {
    display:block;
    padding:20px;
    min-height:0
  }

  .dialog-poster-wrap {
    width:120px;
    aspect-ratio:2/3;
    margin-bottom:22px
  }

  .dialog-content h2 {
    font-size:1.7rem
  }

  .dialog-summary {
    font-size:1rem;
    line-height:1.8
  }

  .dialog-story {
    margin:20px 0
  }

  .dialog-content input,.dialog-content select,.account-card input,.settings-form input,.settings-form select {
    font-size:16px
  }

  .library-actions>* {
    flex:1;
    padding-inline:10px
  }

  .anime-actions {
    display:grid;
    grid-template-columns:1fr;
    width:100%
  }

  .monitor-anime {
    padding:16px
  }

  .monitor-anime button {
    width:100%;
    padding-inline:10px
  }

  .settings-shell {
    max-height:calc(100dvh - 22px)
  }

  .settings-scroll {
    padding:16px;
    gap:16px
  }

  .settings-section {
    padding:18px
  }

  .profile-editor {
    align-items:flex-start;
    gap:14px
  }

  .settings-avatar {
    width:46px;
    height:46px
  }

  .inline-actions {
    gap:8px
  }

  .inline-actions>* {
    max-width:100%
  }

  .account-card,.adult-card {
    padding:26px
  }

  .adult-actions {
    flex-direction:column
  }

  .monitor-schedule {
    grid-template-columns:1fr;
    padding:18px;
    gap:18px
  }

  .monitor-schedule .inline-actions {
    display:grid;
    grid-template-columns:1fr 1fr
  }

  .monitor-schedule .inline-actions button {
    padding-inline:8px
  }

  .feature-badge {
    font-size:.7rem
  }

  .monitor-settings>p {
    font-size:.88rem
  }

  .player-dialog {
    max-width:100vw;
    max-height:100dvh;
    border-radius:0
  }

  .player-shell {
    height:auto;
    min-height:100%;
    grid-template-rows:auto minmax(290px,1fr) auto
  }

  .player-header {
    padding:12px 16px;
    gap:12px
  }

  .player-header h2 {
    font-size:.95rem
  }

  .player-header .section-kicker {
    display:none
  }

  .player-meta {
    font-size:.7rem
  }

  .player-stage {
    min-height:290px
  }

  .player-stage video,.player-stage canvas {
    min-height:170px
  }

  .video-controls {
    padding:10px 12px
  }

  .video-buttons {
    gap:4px
  }

  .video-buttons button {
    min-width:40px;
    padding:6px;
    font-size:.75rem
  }

  .volume-control {
    width:60px
  }

  .speed-control {
    font-size:0;
    gap:0
  }

  .speed-control select {
    font-size:.8rem;
    width:65px
  }

  .video-spacer {
    display:none
  }

  .player-controls {
    padding:16px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }

  .player-controls #player-prev {
    grid-column:1;
    grid-row:3
  }

  .player-controls #player-next {
    grid-column:2;
    grid-row:3
  }

  .player-controls label {
    font-size:.7rem
  }

  .player-controls select {
    font-size:16px
  }

  .upscale-status {
    font-size:.63rem
  }

  .player-mode {
    overflow-wrap:anywhere
  }

}

@media(max-height:540px) and (orientation:landscape) {
  .player-shell {
    height:auto;
    min-height:100%;
    grid-template-rows:auto minmax(260px,1fr) auto
  }

  .player-stage {
    min-height:260px
  }

  .player-stage video,.player-stage canvas {
    min-height:160px
  }

}