/* Browser-responsive overrides for the web build. Loaded AFTER style.css so it
   wins. Keeps the TV design language (colors, cards, sidebar) but lets the layout
   fill the browser and scale the poster grid to the window instead of the fixed
   1920px, 10-foot TV layout. */

html, body { width: 100%; min-width: 320px; }
#app { width: 100%; }

/* During playback the player covers the whole window (no sidebar gap on the
   left); the fullscreen button then requests true browser fullscreen. */
.player-screen { left: 0 !important; }
:fullscreen .player-screen, :-webkit-full-screen .player-screen { left: 0 !important; }

/* Centered loading spinner shown while the catalog grid is empty (loading),
   instead of a "Загрузка…" text label. */
@keyframes sav-spin { to { transform: rotate(360deg); } }
#movie-grid { position: relative; min-height: 60vh; }
#movie-grid:empty::after {
  content: "";
  position: absolute; left: 50%; top: 34vh;
  width: 58px; height: 58px; margin-left: -29px;
  border: 5px solid rgba(255,255,255,.14);
  border-top-color: #FFC24A;
  border-radius: 50%;
  animation: sav-spin .8s linear infinite;
}

/* Inline spinner used for detail loading (озвучки) instead of a text label. */
.selection-loading { padding: 6px 2px; }
.sav-spinner {
  display: inline-block; width: 34px; height: 34px;
  border: 4px solid rgba(255,255,255,.14);
  border-top-color: #FFC24A;
  border-radius: 50%;
  animation: sav-spin .8s linear infinite;
}

/* Player "preparing" overlay: just a spinner (no box / progress bar). */
.player-prepare { background: transparent !important; box-shadow: none !important; padding: 0 !important; }

/* Poster grid scales to the available width (posters keep their 2:3 ratio via
   padding-bottom:150%). More columns on wide screens, fewer on narrow ones. */
.movie-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 26px 22px;
}

/* Slightly tighten the TV-sized page padding on smaller desktop windows. */
@media (max-width: 1400px) {
  .home-page { padding: 34px 40px 100px; }
  .detail-hero { padding: 44px 40px 20px; }
  .detail-selects { padding: 0 40px 48px; gap: 40px; }
  .home-heading { font-size: 38px; }
}
@media (max-width: 1000px) {
  #sidebar { width: 92px; }
  #sidebar .nav-label, #sidebar .logo-text { display: none; }
  #content { margin-left: 92px; }
  .movie-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
  .home-page { padding: 26px 24px 90px; }
  .detail-hero { flex-direction: column; gap: 20px; padding: 28px 24px 16px; }
  .detail-poster { width: 160px; height: 240px; }
  .detail-selects { padding: 0 24px 40px; gap: 28px; }
}