/* ============================================================================
 * RetroGame Hub — mobile.css
 * --------------------------------------------------------------------------
 * Single file for ALL responsive / mobile CSS.
 * Extracted from main.css and player.css; loaded LAST so it wins the cascade.
 *
 * Contents:
 *   A. Breakpoints — layout (from main.css)
 *   B. Accessibility — reduced-motion / high-contrast (from main.css)
 *   C. Theme-switcher responsive (from main.css)
 *   D. Detail panel responsive (from main.css)
 *   E. Auth / modal responsive (from main.css)
 *   F. Mobile navigation bar — sidebar → horizontal topbar
 *   G. Content area — title wrap, header stack, game grid 2-col
 *   H. Touch targets (>= 44 px on coarse-pointer devices)
 *   I. iOS safe-area insets + misc phone tweaks
 *   J. Player page responsive (from player.css)
 * ========================================================================= */

/* ==========================================================================
 * A. Breakpoints – layout
 * ========================================================================= */

@media (max-width: 1280px) {
  :root {
    --sidebar-width: var(--sidebar-width-md);
    --grid-card-min: 170px;
  }
  .content__header,
  .content__body {
    padding-inline: var(--space-6);
  }
}

@media (max-width: 960px) {
  :root {
    --sidebar-width: var(--sidebar-width-sm);
    --grid-card-min: 150px;
  }
}

@media (max-width: 720px) {
  body { overflow: auto; }
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .console-list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--space-2);
  }
  .console-item {
    flex-shrink: 0;
  }
  .content__body {
    overflow: visible;
  }
}

/* ==========================================================================
 * B. Accessibility — prefers-reduced-motion / prefers-contrast
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body::before { transform: none !important; }
  body::after  { animation: none !important; }
}

@media (prefers-contrast: more) {
  :root {
    --color-border:        rgba(255, 255, 255, 0.30);
    --color-border-strong: rgba(255, 255, 255, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .sidebar,
  .content,
  .content__header,
  .console-item,
  .game-card,
  .btn,
  .badge,
  .theme-switcher__panel {
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
 * C. Theme-switcher responsive
 * ========================================================================= */

@media (max-width: 720px) {
  .theme-switcher--floating {
    top: var(--space-3);
    right: var(--space-3);
  }
  .theme-switcher__panel {
    min-width: 220px;
    right: 0;
  }
}

/* ==========================================================================
 * D. Detail panel responsive
 * ========================================================================= */

@media (max-width: 720px) {
  .detail-panel {
    padding: var(--space-3);
  }
  .detail-panel__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-5);
    max-height: 92vh;
    overflow-y: auto;
  }
  .detail-panel__cover {
    max-width: 220px;
    margin: 0 auto;
  }
}

/* ==========================================================================
 * E. Auth modals responsive
 * ========================================================================= */

@media (max-width: 520px) {
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .content__header {
    flex-direction: column;
    align-items: stretch;
  }
  .content__toolbar {
    justify-content: flex-end;
  }
  .search {
    flex: 1;
    width: auto;
  }
}

/* ==========================================================================
 * F. Mobile navigation bar — sidebar becomes a horizontal topbar
 * --------------------------------------------------------------------------
 * Brand (logo only) is pinned on the left.
 * Console-list fills the remaining width and scrolls horizontally on touch.
 * ========================================================================= */

/* --- CRITICAL: fix app-shell grid so content is naturally sized --- */
/*
 * At desktop app-shell has grid-template-rows: 100dvh (single row = full vp).
 * At ≤720px the original breakpoint changes it to "auto 1fr"; since body has
 * min-height:100vh the content row ends up ~viewport-height tall → the header
 * (flex-direction:column + justify-content:space-between) pushes the search
 * bar to the very bottom. Fix: both rows natural-height, body scrolls.
 */
@media (max-width: 720px) {
  .app-shell {
    grid-template-rows: auto auto;
    min-height: 100dvh;
  }
  .content { overflow: visible; }
}

/* --- Sidebar → topbar (flex row) --- */
@media (max-width: 720px) {
  .sidebar {
    flex-direction: row;
    align-items: center;
    height: 52px;                 /* fixed topbar height */
    padding: 0 12px;
    padding-left:  max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    gap: 10px;
    overflow: hidden;             /* clip to topbar height */
  }

  /* Brand: compact icon, never shrinks */
  .sidebar__brand {
    flex-shrink: 0;
    border-bottom: none;
    padding: 0;
    margin-bottom: 0;
    gap: 8px;
  }
  .sidebar__brand-mark  { width: 28px; height: 28px; font-size: 0.78rem; }
  .sidebar__brand-name  { display: none; }
  .sidebar__brand-sub   { display: none; }
  .sidebar__section-title { display: none; }
  .sidebar__footer        { display: none; }

  /* Console-list: fills remaining width, horizontal touch scroll */
  .console-list {
    flex: 1 1 0;
    width: 0;                     /* allow flex to allocate width from flex-grow */
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;           /* always show scroll container */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 4px;
    padding: 4px 8px;
    align-items: center;
  }
  .console-list::-webkit-scrollbar { display: none; }

  /* Items: must NOT shrink so they overflow the list → triggers scroll */
  .console-item {
    flex-shrink: 0;
    flex-grow: 0;
    white-space: nowrap;
    min-height: 40px;
    padding: 6px 12px;
    font-size: 0.78rem;
  }
  .console-item:hover  { transform: none; }
  /* Active left-bar indicator makes no sense in a horizontal list */
  .console-item.is-active::before { display: none; }
}

/* ==========================================================================
 * G. Content area — title, header, game grid
 * ========================================================================= */
@media (max-width: 720px) {
  /* Prevent title overflowing to the right */
  .content__title {
    font-size: clamp(1.1rem, 5.5vw, 1.4rem);
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
  }

  /* Header: stack heading + toolbar vertically; no space-between pushing
     search bar to the bottom of the now-tall .content container */
  .content__header {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px 16px 14px;
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* Toolbar: search fills row, auth+theme buttons at right */
  .content__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .search       { flex: 1; min-width: 0; width: auto; }
  /* Prevent iOS zoom on input focus */
  .search__input { font-size: 16px; }

  /* Content body */
  .content__body {
    overflow: visible;
    padding: 16px 16px 40px;
    padding-left:   max(16px, env(safe-area-inset-left));
    padding-right:  max(16px, env(safe-area-inset-right));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }

  /* Game grid: always 2 columns on phones */
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .game-card__body  { padding: 8px 10px 10px; }
  .game-card__title { font-size: 0.8rem; }
  .game-card:hover  { transform: none; }
}

/* Prevent iOS auto-zoom on ALL form inputs */
@media (max-width: 720px) {
  input[type='text'],
  input[type='search'],
  input[type='email'],
  input[type='password'],
  input[type='number'],
  textarea,
  select { font-size: 16px; }
}

/* Tiny phones */
@media (max-width: 400px) {
  .content__header { padding-inline: 12px; }
  .content__body   { padding-inline: 12px; }
  .game-grid       { gap: 8px; }
  .game-card__title{ font-size: 0.76rem; }
}

/* ==========================================================================
 * H. Touch targets — min 44 × 44 px on coarse-pointer devices
 * ========================================================================= */
@media (hover: none) and (pointer: coarse) {
  .btn--icon,
  .auth-btn,
  .theme-switcher__trigger { min-width: 44px; min-height: 44px; }
  .btn          { min-height: 44px; }
  .console-item { min-height: 40px; }
  .user-menu__item { min-height: 44px; }
  /* No hover transforms on touch */
  .game-card:hover   { transform: none; }
  .console-item:hover{ transform: none; }
}

/* ==========================================================================
 * I. iOS safe-area / misc phone tweaks
 * ========================================================================= */

/* Detail panel → full-height bottom sheet on small phones */
@media (max-width: 520px) {
  .detail-panel { padding: 0; }
  .detail-panel__inner {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: 16px;
    padding-top:    max(16px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .detail-panel__cover  { max-width: 180px; }
  .detail-panel__title  { font-size: 1.2rem; }
  .detail-panel__close  { width: 44px; height: 44px; top: 12px; right: 12px; font-size: 1.5rem; }
  .detail-panel__actions {
    position: sticky; bottom: 0;
    padding-top: 12px;
    background: linear-gradient(180deg, transparent 0%, var(--color-surface-2) 30%);
  }
  .detail-panel__actions .btn { width: 100%; justify-content: center; }
}

/* Modals → full-screen on small phones */
@media (max-width: 520px) {
  .modal-overlay { padding: 0; }
  .modal,
  .modal:has(.auth-form--wide) {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .modal__header {
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
  }
  .modal__body   { padding: 16px; }
  .modal__footer {
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    flex-wrap: wrap;
  }
  .modal__footer .btn { flex: 1; min-width: 0; justify-content: center; }
  .modal__close  { width: 44px; height: 44px; }
}

/* Theme-switcher dropdown: clamp to viewport on very narrow phones */
@media (max-width: 380px) {
  .theme-switcher__panel {
    position: fixed;
    top: 60px;
    left: 12px;
    right: 12px;
    min-width: 0;
    width: auto;
  }
}

/* ==========================================================================
 * J. Player page responsive
 * ========================================================================= */

@media (max-width: 720px) {
  :root { --player-frame-pad: var(--space-2); }

  .player-header { padding: 0 var(--space-3); gap: var(--space-2); }
  .player-header__brand-name { display: none; }       /* keep mark only */
  .player-header__sep        { display: none; }
  .player-header__game-title { font-size: var(--fs-sm); }

  .player-main {
    padding: var(--space-3);
    gap: var(--space-4);
  }
  .player-frame {
    border-radius: var(--radius-md);
    padding: var(--space-1);
    border: 0;
    background: #000;
  }
  .player-frame__inner { border-radius: var(--radius-sm); }

  .info-grid {
    grid-template-columns: 1fr;
    padding: var(--space-4);
  }
  .info-grid__cover {
    width: 50%;
    max-width: 200px;
    margin: 0 auto;
  }
  .controls-section { padding: var(--space-4); }
}

@media (max-width: 720px) {
  .player-header {
    padding-left:  max(var(--space-3), env(safe-area-inset-left));
    padding-right: max(var(--space-3), env(safe-area-inset-right));
  }
  .player-main {
    padding-left:  max(var(--space-3), env(safe-area-inset-left));
    padding-right: max(var(--space-3), env(safe-area-inset-right));
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  }
  .player-frame { max-width: 100%; }

  /* Touch-friendly action buttons in the info panel */
  .controls-section__actions { gap: var(--space-2); }
  .controls-section__actions .btn {
    flex: 1 1 calc(50% - var(--space-2));
    min-height: 44px;
    justify-content: center;
  }

  /* The "Torna alla libreria" button is wide; trim the label */
  .player-header__back { padding-left: var(--space-3); padding-right: var(--space-3); }
}

@media (max-width: 480px) {
  /* Collapse the back button to icon-only on narrow screens */
  .player-header__back > span:last-child { display: none; }
  .player-header__back {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-md);
  }
  .player-header__back > span:first-child { font-size: 1.1rem; }

  .player-header__game-title { font-size: var(--fs-sm); }
  .info-grid__title { font-size: var(--fs-lg); }
  .controls-grid { grid-template-columns: 1fr; }
  .controls-section__actions .btn { flex-basis: 100%; }
}

@media (max-width: 932px) and (orientation: landscape) and (max-height: 500px) {
  .player-page { overflow: hidden; }

  .player-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 36px;
    padding: 0 var(--space-2);
    background: rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateY(-100%);
    transition: transform var(--duration-base) var(--easing-emphasis);
  }
  .player-header:hover,
  .player-header:focus-within { transform: translateY(0); }

  .player-main {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    gap: 0;
  }
  .player-frame {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .player-frame__inner {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .info-panel { display: none; }
}