/* ── MOBILE UI COMPONENTS ── */
.cover-zoom-controls { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.cover-zoom-controls button { min-width: 44px; min-height: 44px; }
.cover-zoom-controls input { flex: 1; min-width: 0; height: 44px; accent-color: var(--accent); }
.mobile-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 150; display: none; opacity: 0; transition: opacity 0.3s;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.mobile-overlay.show { display: block; opacity: 1; }

.mobile-menu-btn {
  display: none; background: #18181f; border: 1px solid var(--border);
  color: var(--text); width: 38px; height: 38px; padding: 0; border-radius: 8px; cursor: pointer;
  transition: background 0.2s; align-items: center; justify-content: center; font-size: 18px;
}
.mobile-menu-btn:hover { background: var(--border); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  html:has(.sidebar.open), body:has(.sidebar.open),
  html:has(#modal-settings.open), body:has(#modal-settings.open) {
    overflow: hidden;
  }
  .label-short, .chip-short { display: inline !important; }
  .label-full, .chip-full { display: none !important; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .main, .content { min-width: 0; max-width: 100%; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: -280px; width: 260px;
    height: 100vh; height: 100dvh; max-height: none;
    border-bottom-right-radius: 0;
    overscroll-behavior-y: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 200; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.8);
  }
  .sidebar .nav { flex: 1 0 auto; overflow-y: visible; }
  .sidebar.open { left: 0; }
  .sidebar.open .sidebar-logo { width: 100%; margin: 0 auto; }
  .sidebar.open .nav { padding: 10px 12px; }
  .sidebar.open .nav-section { margin-bottom: 10px; }
  .sidebar.open .nav-label { margin-bottom: 2px; }
  .sidebar.open .nav-item { padding: 7px 12px; }
  .sidebar.open .sidebar-footer { padding: 12px; }
  .sidebar.open .stat-pill { padding: 6px; }
  .sidebar.open .stat-pill .val { font-size: 15px; }
  .sidebar.open .stat-pill .lbl { margin-top: 1px; font-size: 9px; }
  .sidebar.open #sidebar-actions { margin-top: 8px !important; }
  .sidebar-ad-container { display: none !important; }
  
  .topbar {
    padding: 16px; display: grid; grid-template-columns: auto auto 1fr auto auto;
    grid-template-areas:
      "menu comm . . avatar"
      "edit . . notif logout";
    align-items: center; min-height: auto; gap: 12px 8px;
  }
  .topbar::before { background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, #111118 100%); }
  
  .mobile-menu-btn { display: flex !important; margin: 0; grid-area: menu; }

  /* Ordem visual no mobile: Topbar -> Title Bar -> Botão de Filtros -> Barra de Filtros -> Conteúdo */
  .topbar { order: 1; }

  .title-bar {
    order: 2;
    padding: 12px 16px;
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .title-bar-right {
    display: contents !important;
  }
  #topbar-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  #view-toggle {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    height: 40px;
    padding: 3px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px;
    box-sizing: border-box;
    justify-self: stretch;
    margin: 0 !important;
  }
  #view-toggle .view-toggle-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 100%;
    padding: 0 4px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
  }
  #view-toggle .view-toggle-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
  #view-toggle .view-toggle-label {
    display: inline-block;
    font-size: clamp(9px, 2.7vw, 11.5px);
    font-family: 'DM Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.3px;
  }
  #topbar-add-btn {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0 16px !important;
    font-size: 13px;
    font-weight: 700;
    justify-content: center;
    margin: 0;
    display: flex !important;
    box-sizing: border-box;
  }

  #community-btn { width: auto; height: auto; padding: 6px 10px; margin: 0; grid-area: comm; }
  #community-btn .community-img { width: 42px; height: 42px; }
  #community-btn .community-text { font-size: 10px; letter-spacing: 0px; }

  #notification-btn { width: 38px; height: 38px; margin: 0; grid-area: notif; }
  #profile-widget, #profile-widget .profile-widget-top { display: contents !important; }
  .profile-info, .profile-gamertags { display: none !important; }
  .profile-avatar { width: 42px; height: 42px; grid-area: avatar; justify-self: flex-end; margin: 0; }
  .profile-logout-btn { width: 38px; height: 38px; padding: 0; font-size: 0; display: flex; align-items: center; justify-content: center; grid-area: logout; margin: 0 0 0 4px; }
  .profile-logout-btn .logout-icon { height: 18px; margin: 0; }
  
  #topbar-update-btn { display: none !important; }
  .btn-edit-cover { grid-area: edit; position: static !important; margin: 0; padding: 8px 12px; font-size: 11px; white-space: nowrap; }

  #sort-wrap { width: 100%; flex-direction: column; }
  #sort-pill { width: 100%; justify-content: space-between; }
  /* In-flow menu: the animated filters container must not clip its options. */
  .sort-menu { position: static; width: 100%; min-width: 0; box-sizing: border-box; margin-top: 6px; }
  .sort-menu[hidden] { display: none; }
  .sort-menu-item, .sort-dir-toggle { min-height: 44px; }
  .filters-bar:not(.collapsed) { max-height: none; }
  
  #filter-content-group {
    order: 3;
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 8px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #filter-content-group::-webkit-scrollbar {
    display: none;
  }
  #filter-content-group #filter-tipo-label {
    display: none !important;
  }
  #filter-content-group #chip-all {
    display: none !important;
  }
  #filter-content-group .filter-chip {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    height: 34px !important;
    padding: 0 4px !important;
    font-size: clamp(10px, 2.7vw, 11.5px) !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
    border-radius: 8px !important;
    border: 1px solid var(--accent) !important;
    background: #14141b !important;
    color: var(--text2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
  }
  #filter-content-group .filter-chip:hover:not(.active) {
    background: color-mix(in srgb, var(--accent) 10%, #1c1c24) !important;
    border-color: var(--accent) !important;
    color: var(--text) !important;
  }
  #filter-content-group .filter-chip.active {
    background: color-mix(in srgb, var(--accent) 22%, #14141b) !important;
    border-color: var(--accent) !important;
    color: var(--accent-contrast, #ffffff) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 8px color-mix(in srgb, var(--accent) 30%, transparent) !important;
  }

  .filters-toggle-btn { 
    order: 4;
    display: flex !important; 
    background: var(--surface2);
    margin: 0;
    border-radius: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
    font-size: 13px;
    height: 40px;
    padding: 0 16px;
  }

  .filters-bar { 
    order: 5;
    padding: 16px 12px; 
    gap: 10px; 
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .filters-bar.collapsed {
    padding: 0 12px;
    border-bottom: none;
  }
  .filters-bar .filter-sep {
    display: none !important;
  }

  .search-box {
    order: 6;
    flex: none !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 40px !important;
    min-height: 40px !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin: 10px 16px 6px 16px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    background: color-mix(in srgb, var(--accent) 8%, #18181f) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
  }
  .search-box #search-box-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    color: var(--accent2) !important;
  }
  .search-box #search-box-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  .search-box input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 0 !important;
    color: var(--text) !important;
    font-family: 'DM Mono', monospace !important;
    font-size: 14px !important;
    line-height: normal !important;
    padding: 0 !important;
  }
  .search-box input::placeholder {
    color: var(--text3) !important;
    font-size: 13px !important;
  }
  .search-box:focus-within {
    border-color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 14%, #18181f) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent), 0 2px 8px color-mix(in srgb, var(--accent) 20%, transparent) !important;
  }

  .content { order: 7; padding: 16px; }
  
  .filter-chip { 
    padding: 8px 14px; 
    font-size: 12px; 
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
  
  .filter-select { 
    width: 100% !important; 
    padding: 10px 12px; 
    font-size: 14px; 
    height: 42px;
    margin-bottom: 4px;
  }
  
  .filter-sep {
    width: 100%;
    height: 1px;
    margin: 4px 0;
  }
  
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .game-card, .franchise-folder { height: 190px; padding: 10px; }
  .game-stack-wrapper { height: 190px; }
  .card-header { height: 52px; margin-bottom: 8px; }
  .franchise-folder .card-header { height: auto; margin-bottom: 0; }
  .franchise-mini-grid { margin-bottom: 8px; }
  .game-name { font-size: 12px; }
  .game-card > .status-badges {
    margin-top: auto;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .card-meta { display: none; } /* Oculta a área do Console/DLC */
  .card-footer { height: 44px; margin-top: 0; }
  .nota-val { font-size: 26px; }
  .horas-tag { font-size: 10px; }
  .date-tag { font-size: 9px; }
  .status-badge { font-size: 9px; padding: 3px 6px; }
  .grid-platina-icon { width: 70px; height: 70px; top: auto; bottom: 8px; right: 8px; }
  .game-card.is-platinado .footer-info { padding-right: 70px; }
  .coop-avatar-wrapper { bottom: 12px; right: 10px; }
  
  /* ── TIMELINE MOBILE ── */
  #view-timeline .timeline-container {
    background: transparent;
    border: none;
    padding: 0;
    overflow-x: visible;
    min-height: auto;
  }
  .timeline-vertical-list {
    position: relative;
    padding: 24px 0 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .timeline-vertical-list::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 32px;
    width: 3px;
    background: var(--border);
    border-radius: 3px;
  }
  .timeline-item-mobile {
    position: relative;
    padding-left: 56px;
    cursor: pointer;
  }
  .timeline-dot-mobile {
    content: '';
    position: absolute;
    left: 17.5px;
    top: 24px;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #111118;
    border: 3px solid var(--accent);
    z-index: 2;
  }
  .timeline-mobile-separator {
    position: relative;
    margin-left: 56px;
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent2);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 4px;
    margin-bottom: -8px;
    display: flex;
    align-items: center;
  }
  .timeline-mobile-separator::before {
    content: '';
    position: absolute;
    left: -38.5px;
    transform: translateX(-50%);
    width: 9px;
    height: 9px;
    background: #111118;
    border: 2px solid var(--accent2);
    border-radius: 50%;
    z-index: 2;
  }
  .timeline-card-mobile { background: #111118; border: 1px solid var(--border); border-radius: var(--r2); padding: 12px; display: flex; align-items: center; gap: 12px; transition: border-color 0.2s, transform 0.2s; }
  .timeline-item-mobile:hover .timeline-card-mobile { border-color: var(--accent); transform: translateX(4px); }
  .timeline-card-cover { width: 54px; height: 72px; flex-shrink: 0; }
  .timeline-card-cover img, .timeline-card-cover .cover-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background: #18181f; display: flex; align-items: center; justify-content: center; font-size: 24px; }
  .timeline-card-info { flex: 1; min-width: 0; }
  .timeline-card-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .timeline-card-date { font-size: 11px; color: var(--text2); }

  .modal { max-height: 90vh; border-radius: 20px 20px 0 0; margin-top: auto; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  
  #modal-settings.modal-overlay,
  #modal-notifications.modal-overlay,
  #modal-steam-import.modal-overlay,
  #modal-steam-conflicts.modal-overlay,
  #modal-steam-progress.modal-overlay,
  .modal-overlay.modal-centered-mobile { align-items: center; justify-content: center; padding: 16px; }
  #modal-steam-import .modal,
  #modal-steam-conflicts .modal,
  #modal-steam-progress .modal,
  .modal-overlay.modal-centered-mobile .modal,
  #modal-settings .modal,
  #modal-notifications .modal { margin-top: 0; border-radius: 20px; }
  #modal-settings.modal-overlay {
    height: 100vh; height: 100dvh;
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  }
  #modal-settings .modal {
    display: flex; flex-direction: column;
    max-height: 100%; overflow: hidden;
  }
  #modal-settings .modal-header { flex-shrink: 0; padding: 16px 20px; align-items: center; }
  #modal-settings .modal-close { width: 44px; height: 44px; }
  #modal-settings .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
  #modal-settings .settings-footer { flex-shrink: 0; padding: 12px 20px; }
  #modal-settings #settings-save-btn { min-height: 44px; width: 100%; }
  #notifications-list .notification-item { flex-wrap: wrap; }
  #notifications-list .notification-item > div { min-width: 0; overflow-wrap: anywhere; }
  #notifications-list .notification-item > div > div { flex-wrap: wrap; }
  #notifications-list .notification-item .btn { min-height: 44px; white-space: normal; }

  .modal-header { padding: 20px 20px 0; }
  .modal-body { padding: 16px 20px 20px; }
  
  .form-grid { grid-template-columns: 1fr; }
  .game-info-block { grid-template-columns: 1fr; gap: 10px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-header { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 20px; }
  .detail-header-inner { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .detail-nota { width: 100%; flex-direction: row; height: auto; padding: 12px; gap: 16px; }
  
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .charts-row { grid-template-columns: 1fr; }
  
  .game-table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Dropdown IGDB no mobile: 3 jogos por linha e rolagem vertical */
  .igdb-ac-dropdown {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    gap: 8px !important;
    padding: 8px !important;
    max-height: 400px !important;
    max-height: min(400px, 55dvh) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .igdb-ac-dropdown .igdb-autocomplete-item {
    min-width: 0;
    box-sizing: border-box;
    padding: 4px !important;
    gap: 5px !important;
    border-radius: 6px !important;
  }
  .igdb-ac-dropdown .igdb-autocomplete-item .igdb-item-cover {
    border-radius: 5px !important;
  }
  .igdb-ac-dropdown .igdb-autocomplete-item .igdb-item-title,
  .igdb-ac-dropdown .igdb-autocomplete-item span:first-of-type {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  .igdb-ac-dropdown .igdb-autocomplete-item .igdb-item-sub,
  .igdb-ac-dropdown .igdb-autocomplete-item span:last-of-type {
    font-size: 9px !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
  }
}

/* ── EXTRA MOBILE (< 480px) ── */
@media (max-width: 480px) {
  #filter-content-group { padding: 8px 12px !important; gap: 3px !important; }
  #filter-content-group .filter-chip { padding: 0 3px !important; font-size: 10px !important; height: 32px !important; }
  .topbar {
    padding: 16px 12px 20px 12px; gap: 10px 6px;
  }
  .title-bar { padding: 10px 12px; gap: 8px 8px; }
  #topbar-title { font-size: 13px; }
  .search-box { margin: 8px 12px 4px 12px !important; width: calc(100% - 24px) !important; padding: 0 12px !important; }
  .mobile-menu-btn { width: 34px; height: 34px; font-size: 16px; }
  .profile-avatar { width: 38px; height: 38px; }
.profile-logout-btn, #notification-btn { width: 34px; height: 34px; }
  #community-btn { width: auto !important; height: auto !important; padding: 6px 9px !important; }
  #community-btn .community-img { width: 38px !important; height: 38px !important; }
  #community-btn .community-text { display: block; font-size: 9px; letter-spacing: 0px; }
  #topbar-add-btn { height: 36px; padding: 0 12px !important; font-size: 12px; }
  .btn-edit-cover { padding: 6px 10px; font-size: 10px; }
  
  .filters-bar { padding: 12px 10px; gap: 6px; }
  .filter-chip { padding: 6px 10px; font-size: 11px; }
  .filter-select { padding: 8px 10px; font-size: 13px; height: 38px; }
  .filter-sep { width: 100%; height: 1px; margin: 4px 0; }
  
  .content { padding: 12px; }
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .game-card, .franchise-folder { height: 160px; padding: 8px; }
  .game-stack-wrapper { height: 160px; }
  .card-header { height: 44px; margin-bottom: 4px; }
  .franchise-folder .card-header { height: auto; margin-bottom: 0; }
  .franchise-mini-grid { margin-bottom: 6px; }
  .game-name { font-size: 11px; }
  .nota-val { font-size: 22px; }
  .card-footer { height: 38px; margin-top: auto; }
  .horas-tag { font-size: 9px; }
  .date-tag { font-size: 8px; }
  .status-badge { font-size: 8px; padding: 2px 5px; }
  .grid-platina-icon { width: 55px; height: 55px; top: auto; bottom: 6px; right: 6px; }
  .game-card.is-platinado .footer-info { padding-right: 56px; }
  .coop-avatar-wrapper { bottom: 8px; right: 8px; }
  .igdb-ac-dropdown { gap: 4px !important; padding: 4px !important; }
  .igdb-ac-dropdown .igdb-autocomplete-item { padding: 2px !important; gap: 3px !important; }
  .igdb-ac-dropdown .igdb-autocomplete-item .igdb-item-title,
  .igdb-ac-dropdown .igdb-autocomplete-item span:first-of-type { font-size: 10px !important; }
  .igdb-ac-dropdown .igdb-autocomplete-item .igdb-item-sub,
  .igdb-ac-dropdown .igdb-autocomplete-item span:last-of-type { font-size: 8px !important; }
  .igdb-ac-dropdown .igdb-autocomplete-item { padding: 3px !important; gap: 4px !important; }
  .igdb-ac-dropdown .igdb-autocomplete-item .igdb-item-title,
  .igdb-ac-dropdown .igdb-autocomplete-item span:first-of-type { font-size: 10.5px !important; }
  .igdb-ac-dropdown .igdb-autocomplete-item .igdb-item-sub,
  .igdb-ac-dropdown .igdb-autocomplete-item span:last-of-type { font-size: 8.5px !important; }
}

/* ── ULTRA MOBILE (< 375px) ── */
@media (max-width: 375px) {
  .topbar {
    padding: 12px 10px 16px 10px; gap: 10px 4px;
  }
  .title-bar { padding: 8px 10px; gap: 6px 6px; }
  #topbar-title { font-size: 12px; }
  #view-toggle { width: 100%; height: 36px; padding: 2px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 2px; }
  #view-toggle .view-toggle-btn { flex: 1 1 0; min-width: 0; width: auto; height: 100%; padding: 0 2px; gap: 3px; }
  #view-toggle .view-toggle-label { display: inline-block; font-size: 8.5px; letter-spacing: -0.4px; }
  #view-toggle .view-toggle-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
  .search-box { margin: 8px 10px 4px 10px !important; width: calc(100% - 20px) !important; padding: 0 10px !important; }
  .mobile-menu-btn { width: 30px; height: 30px; font-size: 14px; }
  .profile-avatar { width: 34px; height: 34px; }
.profile-logout-btn, #notification-btn { width: 30px; height: 30px; }
  #community-btn { width: auto !important; height: auto !important; padding: 5px 7px !important; }
  #community-btn .community-img { width: 32px !important; height: 32px !important; }
  #community-btn .community-text { display: block; font-size: 8px; letter-spacing: 0px; }
  #topbar-add-btn { height: 34px; padding: 0 10px !important; font-size: 11px; }
  .btn-edit-cover { padding: 6px 8px; font-size: 9px; }
  
  .filters-bar { padding: 10px 8px; }
  .filter-chip { padding: 5px 8px; font-size: 10px; }
  .igdb-ac-dropdown { gap: 6px !important; padding: 6px !important; }
}

/* Informational toasts contain no actions and must not intercept underlying controls. */
.toast { pointer-events: none; }

/* Mobile density matrix: one column below 376px, then cards at least 170px wide.
   The saved preference is shared with desktop; denser modes reduce height/detail. */
@media (max-width: 900px) {
  body { --text3: #a5a5bc; --mobile-card-height: 350px; }
  body .game-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 12px !important; }
  body .game-grid .game-card, body .game-grid .franchise-folder {
    height: var(--mobile-card-height) !important; min-width: 0;
    padding: 52px 12px 12px !important;
  }
  body .game-grid .franchise-folder { padding: 12px !important; }
  body .game-grid .game-stack-wrapper { height: auto; min-width: 0; }
  body .game-grid .game-card .card-header { height: 44px !important; margin: 0 0 8px !important; }
  body .game-grid .game-card .game-name { font-size: 14px !important; margin-top: 0 !important; overflow-wrap: anywhere; }
  body .game-grid .game-card .status-badges { gap: 4px; padding: 0; margin: 0 0 8px; }
  body .game-grid .game-card .status-badge { font-size: 11px !important; padding: 3px 5px !important; letter-spacing: 0; }
  body .game-grid .game-card .card-meta { display: flex; height: auto !important; gap: 4px; }
  body .game-grid .meta-tag-console-wrap { min-width: 0; max-width: 100%; }
  body .game-grid .game-card .meta-tag { font-size: 11px !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body .game-grid .game-card .card-footer { height: auto !important; min-height: 54px; margin-top: auto !important; gap: 6px; }
  body .game-grid .game-card .nota-val { font-size: 28px !important; margin: 0 !important; }
  body .game-grid .game-card .footer-info { min-width: 0; padding: 0 !important; }
  body .game-grid .game-card .horas-tag, body .game-grid .game-card .date-tag { font-size: 12px; color: #eeeef5; }
  body .game-grid .grid-platina-icon { width: 36px; height: 36px; top: 10px; right: 10px; bottom: auto; }
  body .game-grid .coop-avatar-wrapper { top: 10px; left: 10px; right: auto !important; bottom: auto !important; }
  body .game-grid .game-card.needs-review .review-badge {
    top: 6px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: calc(100% - 12px) !important;
    font-size: 8px !important;
    padding: 1.5px 5px !important;
    border-radius: 4px !important;
    letter-spacing: 0px !important;
  }

  /* Compact (Mobile) */
  body.mobile-density-compact {
    --mobile-card-height: 290px;
  }
  body.mobile-density-compact .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body.mobile-density-compact .game-grid .game-card {
    padding: 44px 10px 10px !important;
  }
  body.mobile-density-compact .game-grid .game-card .card-header {
    height: 38px !important;
    margin: 0 0 6px !important;
  }
  body.mobile-density-compact .game-grid .game-card .game-name {
    font-size: 13px !important;
  }
  body.mobile-density-compact .game-grid .game-card .nota-val {
    font-size: 24px !important;
  }
  body.mobile-density-compact .game-grid .grid-platina-icon {
    width: 30px !important;
    height: 30px !important;
    top: 8px !important;
    right: 8px !important;
  }
  body.mobile-density-compact .game-grid .coop-avatar-wrapper {
    top: 8px !important;
    left: 8px !important;
    width: 28px !important;
    height: 28px !important;
  }
  body.mobile-density-compact .game-grid .coop-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  /* Super Compact (Mobile) */
  body.mobile-density-super-compact {
    --mobile-card-height: 230px;
  }
  body.mobile-density-super-compact .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body.mobile-density-super-compact .game-grid .game-card {
    padding: 38px 8px 8px !important;
  }
  body.mobile-density-super-compact .game-grid .game-card .card-header {
    height: auto !important;
    margin: 0 0 4px !important;
  }
  body.mobile-density-super-compact .game-grid .game-card .game-name {
    font-size: 12px !important;
    -webkit-line-clamp: 2 !important;
  }
  body.mobile-density-super-compact .game-grid .game-card .card-meta,
  body.mobile-density-super-compact .game-grid .game-card .horas-tag,
  body.mobile-density-super-compact .game-grid .game-card .date-tag {
    display: none !important;
  }
  body.mobile-density-super-compact .game-grid .game-card .card-footer {
    min-height: 28px !important;
  }
  body.mobile-density-super-compact .game-grid .game-card .nota-val {
    font-size: 20px !important;
  }
  body.mobile-density-super-compact .game-grid .grid-platina-icon {
    width: 26px !important;
    height: 26px !important;
    top: 6px !important;
    right: 6px !important;
  }
  body.mobile-density-super-compact .game-grid .coop-avatar-wrapper {
    top: 6px !important;
    left: 6px !important;
    width: 24px !important;
    height: 24px !important;
  }
  body.mobile-density-super-compact .game-grid .coop-avatar {
    width: 24px !important;
    height: 24px !important;
  }

  /* Ultra Compact: 3 jogos lado a lado no mobile */
  body.mobile-density-ultra-compact {
    --mobile-card-height: 170px;
  }
  body.mobile-density-ultra-compact .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body.mobile-density-ultra-compact .game-grid .game-card,
  body.mobile-density-ultra-compact .game-grid .franchise-folder {
    height: 170px !important;
    min-height: 170px !important;
    padding: 32px 6px 6px !important;
    border-radius: 8px !important;
  }
  body.mobile-density-ultra-compact .game-grid .franchise-folder {
    padding: 6px !important;
  }
  body.mobile-density-ultra-compact .game-grid .game-stack-wrapper {
    height: 170px !important;
  }
  body.mobile-density-ultra-compact .game-grid .game-card .card-header {
    height: auto !important;
    margin: 0 0 2px !important;
  }
  body.mobile-density-ultra-compact .game-grid .game-card .game-name {
    font-size: 11px !important;
    line-height: 1.25 !important;
    max-height: 28px !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
  body.mobile-density-ultra-compact .game-grid .game-card .grid-platina-icon {
    width: 22px !important;
    height: 22px !important;
    top: 5px !important;
    right: 5px !important;
  }
  body.mobile-density-ultra-compact .game-grid .game-card .coop-avatar-wrapper {
    top: 5px !important;
    left: 5px !important;
    width: 20px !important;
    height: 20px !important;
  }
  body.mobile-density-ultra-compact .game-grid .game-card.needs-review .review-badge {
    top: 4px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: calc(100% - 8px) !important;
    font-size: 7px !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    letter-spacing: 0px !important;
  }
  body.mobile-density-ultra-compact .game-grid .game-card .coop-avatar {
    width: 20px !important;
    height: 20px !important;
  }
  body.mobile-density-ultra-compact .game-grid .game-card .card-meta,
  body.mobile-density-ultra-compact .game-grid .game-card .status-badges,
  body.mobile-density-ultra-compact .game-grid .game-card .horas-tag,
  body.mobile-density-ultra-compact .game-grid .game-card .date-tag {
    display: none !important;
  }
  body.mobile-density-ultra-compact .game-grid .game-card .card-footer {
    min-height: 22px !important;
    height: auto !important;
    margin-top: auto !important;
    gap: 4px !important;
  }
  body.mobile-density-ultra-compact .game-grid .game-card .nota-val {
    font-size: 16px !important;
    margin: 0 !important;
  }
  body.mobile-density-ultra-compact .franchise-mini-grid {
    gap: 2px !important;
    margin-bottom: 2px !important;
  }

  .status-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .status-btn { min-height: 48px; padding: 8px; font-size: 13px; word-break: normal; overflow-wrap: normal; }
  .form-label { font-size: 12px; color: var(--text3); }
  .form-input, .filter-select, .search-box input { font-size: 16px !important; }
  .form-input { min-height: 44px; }
  .date-field-wrap .form-input { padding-right: 48px; }
  .dp-icon-btn { right: 0; width: 44px; height: 44px; }
  .dp-icon-btn svg { width: 20px; height: 20px; }
  .mobile-menu-btn, #notification-btn, .profile-logout-btn { width: 44px; height: 44px; }
  .btn, .filter-chip, .filter-select, .sort-pill, .dp-footer button { min-height: 44px; }
  .filter-chip { display: inline-flex; align-items: center; }
  .title-bar { grid-template-columns: minmax(0, 1fr) auto; }
  #topbar-title { grid-column: 1 / -1; grid-row: 1; }
  #view-toggle { grid-column: 1 / -1; grid-row: 2; height: 50px; justify-self: start; }
  #view-toggle .view-toggle-btn { width: 44px; height: 44px; }
  .search-box { grid-column: 1 / -1; grid-row: 3; height: 44px; }
  #topbar-add-btn { grid-column: 1 / -1; grid-row: 4; height: auto; min-height: 44px; }
}

/* Intermediate desktop widths retain a bounded profile and wrap toolbar actions. */
@media (min-width: 901px) and (max-width: 1200px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 20px; }
  #profile-widget { min-width: 0; max-width: 100%; flex: 1 1 220px; }
  .profile-widget-top, .profile-info { min-width: 0; }
  .profile-name, .profile-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-gamertags { display: flex; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
  .title-bar, .title-bar-right { flex-wrap: wrap; min-width: 0; }
  .title-bar-right { flex: 1 1 100%; }
  .search-box { min-width: 0; }
  .search-box input { min-width: 0; width: 100%; }
}

/* hidden must override the mobile display rules for contextual controls. */
#topbar-add-btn[hidden], #view-toggle[hidden], .search-box[hidden],
#filters-toggle-btn[hidden], #filters-bar[hidden], #filter-content-group[hidden] { display: none !important; }