/* ============================================================================
   MusLux Player — phone / PWA layout (web build only).
   Everything here is scoped to small screens, so the TV/desktop layout in
   style.css is never affected. Loaded AFTER style.css so these win.
   ============================================================================ */
@media (max-width: 820px) {
  :root { --topbar-h: 54px; }

  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; overscroll-behavior-y: contain; }
  .stage { width: 100%; overflow-x: hidden; }

  /* D-pad legend is meaningless on a phone */
  .hint { display: none !important; }

  /* ---------- top bar (slim, fixed) ---------- */
  .topbar { height: var(--topbar-h); padding: 0 12px; gap: 8px; justify-content: space-between; }
  .topbar .nav { display: none; }                 /* main navigation lives in the bottom bar */
  .brand { font-size: 17px; }
  .topmeta { gap: 8px; }
  .topmeta .clock { display: none; }
  .icon-btn, .avatar { width: 40px; height: 40px; }
  .backchip { top: calc(var(--topbar-h) + 8px); left: 10px; }

  /* ---------- bottom navigation ---------- */
  .mobnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex;
    background: #0b0f1a; border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .mobtab { flex: 1 1 0; appearance: none; border: 0; background: transparent; color: var(--dim);
    font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .2px; cursor: pointer;
    padding: 7px 2px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .mobtab .mi { font-size: 19px; line-height: 1; }
  /* No D-pad focus box on the bottom tabs — touch users tap directly; just tint the active one. */
  .mobnav .mobtab, .mobnav .mobtab.is-focused, .mobnav .mobtab.active {
    background: transparent !important; box-shadow: none !important; transform: none !important; border-radius: 0; color: var(--dim); }
  .mobnav .mobtab.active, .mobnav .mobtab.is-focused { color: var(--accent) !important; }

  /* ---------- generic view padding (top bar + bottom bar) ---------- */
  .view { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  #view-player { padding: 0; }
  .shelves { padding-top: calc(var(--topbar-h) + 12px); gap: 2px; }

  /* ---------- shelves / rows ---------- */
  .shelf-head { padding: 10px 14px 0; }
  .shelf-title { font-size: 16px; }
  .see-all { font-size: 13px; }
  .row { padding: 10px 14px 6px; gap: 12px; -webkit-overflow-scrolling: touch; }

  /* ---------- cards (rows) ---------- */
  .card.poster { width: 33vw; max-width: 150px; }
  .poster .tile { width: 33vw; max-width: 150px; height: auto; aspect-ratio: 2 / 3; }
  .card.cont, .card.channel { width: 74vw; max-width: 300px; }
  .cont .tile, .channel .tile { width: 74vw; max-width: 300px; height: auto; aspect-ratio: 16 / 9; }
  .card.cat { width: 46vw; max-width: 220px; }
  .cat .tile { width: 46vw; max-width: 220px; height: auto; aspect-ratio: 2 / 1; }
  .cap { min-height: 0; padding: 8px 2px 0; }
  .cap b { font-size: 13px; }
  .cap small { font-size: 11px; }
  .poster .ptitle { font-size: 14px; }
  .poster .genre { font-size: 11px; }

  /* ---------- grids (Films / Séries / TV / Catégories) ---------- */
  .grid { gap: 12px; grid-gap: 12px; padding: 12px 14px calc(70px + env(safe-area-inset-bottom, 0px)); }
  .grid.posters { grid-template-columns: repeat(3, 1fr); }
  .grid.posters .card.poster, .grid.posters .poster .tile { width: 100%; max-width: none; }
  .grid.wide, .grid.cats { grid-template-columns: repeat(2, 1fr); }
  .grid.wide .card.channel, .grid.wide .channel .tile,
  .grid.cats .card.cat, .grid.cats .cat .tile { width: 100%; max-width: none; }
  .grid-top { padding: calc(var(--topbar-h) + 10px) 14px 4px; }
  .grid-title { font-size: 22px; }
  .grid-sub { font-size: 12px; }
  .chips { padding: 8px 14px; gap: 8px; flex-wrap: nowrap; }
  .chip { white-space: nowrap; flex: 0 0 auto; }
  .flagrow { padding-top: 8px !important; }
  .fav-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px 14px; }

  /* ---------- detail (film / série) ---------- */
  .detail { min-height: auto; }
  .detail-hero { position: relative; height: 52vw; }
  .detail-content { padding: 14px 14px calc(70px + env(safe-area-inset-bottom, 0px)); }
  .detail-title { font-size: 26px; letter-spacing: -.6px; margin: 8px 0 10px; max-width: none; }
  .detail-desc { font-size: 14px; line-height: 1.45; }
  .detail-actions { gap: 10px; }
  .detail-actions .btn { flex: 1 1 44%; justify-content: center; }
  .detail-rail { margin-top: 16px !important; }
  .detail-rail.film-rail { margin-top: 16px !important; }
  .eps { padding: 8px 14px 12px; }
  .ep { width: 74vw; max-width: 300px; }
  .ep .tile { width: 74vw; max-width: 300px; height: auto; aspect-ratio: 16 / 9; }
  .block-title { font-size: 18px; }

  /* ---------- login ---------- */
  .login-card { padding: 24px 18px 22px; border-radius: 20px; }
  .login-brand .wm { font-size: 30px; }

  /* ---------- profiles ---------- */
  .pf-grid { gap: 20px; }
  .pf-tile .pf-av, .pf-tile.add { width: 96px; height: 96px; }

  /* ---------- settings ---------- */
  #view-settings { padding: calc(var(--topbar-h) + 8px) 12px calc(70px + env(safe-area-inset-bottom,0px)); }

  /* ---------- player (full-screen, touch controls) ---------- */
  #html5-player { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
  .player-ui { padding: 16px 14px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .pbar { height: 22px; }
  .pcontrols { gap: 12px; margin-top: 16px; }
  .pt-poster { display: none; }
}

/* Phones in landscape (short height): hide the bottom bar to reclaim space during playback */
@media (max-width: 920px) and (orientation: landscape) {
  #view-player.active ~ .mobnav, body:has(#view-player.active) .mobnav { display: none; }
}