/* Dedicated mobile shell
   This file owns the mobile layout. Desktop stays in /styles/desktop.css.
   The JS moves shared controls into these mobile slots, so mobile is no longer
   a compressed desktop layout. */

@media (max-width: 820px) {
  :root {
    --radius: 22px;
    --radius-sm: 16px;
    --radius-pill: 999px;
    --m-edge: clamp(8px, 2.4vw, 14px);
    --m-gap: clamp(7px, 1.6vh, 10px);
    --m-topbar: clamp(56px, 7.6vh, 70px);
    --m-actions: clamp(84px, 12vh, 104px);
    --m-input: clamp(54px, 7.2vh, 62px);
    --cell: clamp(17px, 2.45dvh, 25px);
    --col: clamp(24px, 3.15dvh, 34px);
    --gap: 4px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  body {
    margin: 0 !important;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  /* Mobile performance: keep the glass look without expensive blur layers. */
  .glass-section,
  .liquid-panel,
  button,
  .profile-badge,
  .icon-fab,
  .home-card,
  .end-card,
  .library-menu,
  .settings-menu,
  .profile-menu,
  .autocomplete {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.12) !important;
  }
  button, .quiz-tab, .icon-fab, .profile-badge { transition: transform .12s ease, opacity .12s ease, background .12s ease !important; }
  .cell, .poster, .home-card, .end-card { animation-duration: .12s !important; }

  /* The desktop shell is not used on mobile. The shared elements are moved into #mobileShell. */
  body.mobile-shell-active > .app-shell { display: none !important; }
  body.mobile-shell-active > .app-topbar { display: none !important; }

  #mobileShell {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    height: 100dvh;
    padding: var(--m-edge);
    display: grid;
    grid-template-rows: var(--m-topbar) minmax(120px, 25dvh) minmax(0, 1fr) var(--m-actions) var(--m-input);
    gap: var(--m-gap);
    overflow: hidden;
  }
  #mobileShell[hidden] { display: none !important; }

  .mobile-top-slot,
  .mobile-home-slot,
  .mobile-info-card,
  .mobile-quiz-surface,
  .mobile-actions-slot,
  .mobile-guess-slot {
    min-width: 0;
    min-height: 0;
  }

  .mobile-top-slot { display: flex; }
  .mobile-top-slot .app-topbar {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px !important;
    display: grid !important;
    grid-template-columns: minmax(132px, auto) minmax(0, 1fr) 46px !important;
    grid-template-areas: "logo tabs profile" !important;
    align-items: center !important;
    gap: 7px !important;
    overflow: hidden !important;
    border-radius: var(--radius) !important;
  }
  .website-logo {
    grid-area: logo !important;
    height: 100% !important;
    max-height: 48px !important;
    max-width: 158px !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(14px, 3.7vw, 18px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: var(--radius) !important;
  }
  .quiz-switcher {
    grid-area: tabs !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 48px !important;
    padding: 3px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    overflow: hidden !important;
    border-radius: var(--radius-pill) !important;
  }
  .quiz-tab {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 7px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0 !important;
    border-radius: var(--radius-pill) !important;
  }
  #ratingsQuizTab::after,
  #openingsQuizTab::after { font-size: clamp(11px, 3.2vw, 13px); font-weight: 900; }
  #ratingsQuizTab::after { content: "▦ Ratings"; }
  #openingsQuizTab::after { content: "♪ Openings"; }
  .profile-badge {
    grid-area: profile !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    padding: 4px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }
  .profile-badge-avatar { width: 36px !important; height: 36px !important; border-radius: 50% !important; }
  .profile-badge-name { display: none !important; }

  /* Home route: real splash only. */
  body[data-route="home"] #mobileShell {
    grid-template-rows: var(--m-topbar) minmax(0, 1fr);
  }
  body[data-route="home"] .mobile-top-slot .app-topbar {
    grid-template-columns: minmax(150px, auto) 1fr 46px !important;
    grid-template-areas: "logo spacer profile" !important;
  }
  body[data-route="home"] .quiz-switcher { display: none !important; }
  body[data-route="home"] .mobile-home-slot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(12px, 3vw, 18px) !important;
    overflow: hidden !important;
    border-radius: var(--radius) !important;
  }
  body[data-route="home"] .mobile-info-card,
  body[data-route="home"] .mobile-quiz-surface,
  body[data-route="home"] .mobile-actions-slot,
  body[data-route="home"] .mobile-guess-slot,
  body[data-route="home"] .mobile-volume-slot { display: none !important; }
  body:not([data-route="home"]) .mobile-home-slot { display: none !important; }
  .home-card, .end-card {
    width: 100% !important;
    max-width: 560px !important;
    max-height: 100% !important;
    padding: clamp(20px, 5.6dvh, 34px) clamp(16px, 5vw, 28px) !important;
    overflow: hidden !important;
    border-radius: var(--radius) !important;
  }
  .home-card h2, .end-card h2 {
    font-size: clamp(38px, 11vw, 62px) !important;
    line-height: .95 !important;
    margin: 8px 0 14px !important;
  }
  .home-card p, .end-card p { font-size: clamp(13px, 3.8vw, 16px) !important; line-height: 1.35 !important; }
  .home-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; margin-top: 18px !important; }
  .home-actions button, .end-card button { width: 100% !important; height: 46px !important; min-width: 0 !important; }

  /* Quiz info panel: naturally in flow, above the quiz surface. */
  .mobile-info-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
    overflow: hidden;
    border-radius: var(--radius);
  }
  .mobile-mode-slot .mode-card {
    min-height: 0 !important;
    padding: 7px 9px !important;
    overflow: hidden !important;
    border-radius: var(--radius) !important;
  }
  .progress { font-size: clamp(11px, 3vw, 13px) !important; line-height: 1.16 !important; max-height: 2.35em !important; overflow: hidden !important; }
  .score, .timer-display { font-size: 11px !important; line-height: 1.1 !important; margin-top: 3px !important; min-height: 0 !important; }
  .mobile-info-row {
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
  }
  .mobile-poster-slot {
    height: 100%;
    min-height: 0;
    aspect-ratio: 2 / 3;
    align-self: stretch;
  }
  .poster-wrap {
    width: auto !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 2 / 3 !important;
    overflow: hidden !important;
  }
  .poster {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 2 / 3 !important;
    border-radius: var(--radius) !important;
    background-size: cover !important;
    background-position: center !important;
    font-size: clamp(36px, 9dvh, 64px) !important;
  }
  .favorite-cover-btn { width: 34px !important; height: 34px !important; left: 6px !important; bottom: 6px !important; }
  .mobile-meta-slot {
    min-height: 0;
    align-self: end;
    overflow: hidden;
  }
  .meta {
    min-height: 0 !important;
    display: grid !important;
    gap: 3px !important;
    overflow: hidden !important;
  }
  .rating { font-size: 13px !important; line-height: 1.05 !important; margin: 0 !important; }
  .meta h1 { font-size: clamp(18px, 5.1vw, 24px) !important; line-height: 1.02 !important; margin: 0 !important; max-height: 2.1em !important; overflow: hidden !important; }
  .meta p { font-size: 12px !important; line-height: 1.1 !important; margin: 0 !important; }

  /* Quiz surface: clue/heatmap/video in its own section, no controls inside. */
  .mobile-quiz-surface {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 10px;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius);
  }
  .mobile-legend-slot { min-height: 0; }
  .legend {
    max-height: 36px !important;
    overflow: hidden !important;
    gap: 5px 8px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }
  .legend i { width: 9px !important; height: 9px !important; margin-right: 3px !important; }
  body[data-route="openings"] .mobile-legend-slot { display: none !important; }
  .mobile-main-slot {
    min-height: 0;
    display: grid;
    align-items: stretch;
  }
  .heatmap, .opening-video-panel, .opening-clue {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .heatmap.empty { display: flex !important; }
  .season-group { max-height: 100% !important; }
  .opening-video-card { height: 100% !important; min-height: 0 !important; grid-template-columns: 1fr !important; overflow: hidden !important; }
  .video-frame-wrap { height: 100% !important; max-height: 100% !important; aspect-ratio: 16 / 9 !important; }
  .mobile-feedback-slot { min-height: 0; display: grid; gap: 4px; }
  .message { min-height: 18px !important; margin: 0 !important; font-size: 13px !important; line-height: 1.15 !important; }
  .hints { max-height: 48px !important; overflow: hidden !important; gap: 4px !important; }
  .hint { font-size: 12px !important; padding: 5px 7px !important; }
  .guesses { max-height: 30px !important; overflow: hidden !important; font-size: 12px !important; }

  /* Buttons and input: bottom of the shell, but still in flow so nothing overlaps. */
  .mobile-actions-slot {
    display: grid;
    min-height: 0;
  }
  .mobile-actions-slot .actions {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 8px !important;
  }
  .actions button {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    font-size: 14px !important;
    line-height: 1.05 !important;
    border-radius: var(--radius) !important;
  }
  .mobile-guess-slot { display: grid; align-items: stretch; }
  .guessbar {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 84px !important;
    gap: 8px !important;
    background: transparent !important;
  }
  .guessbar input, .guessbar button { height: 100% !important; min-height: 0 !important; border-radius: var(--radius) !important; }
  .guessbar input { font-size: 16px !important; }
  .guessbar button { min-width: 0 !important; font-size: 14px !important; }

  .mobile-volume-slot {
    position: fixed;
    z-index: 82;
    left: var(--m-edge);
    bottom: calc(var(--m-edge) + var(--m-input) + var(--m-actions) + 12px);
    width: 44px;
    height: 44px;
    pointer-events: auto;
  }
  .volume-dock {
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    transform: none !important;
  }
  .volume-dock:hover, .volume-dock:focus-within { width: min(218px, calc(100vw - 20px)) !important; }
  .volume-icon { width: 44px !important; height: 44px !important; }

  /* Floating tools: one overlay layer, not inside the quiz card. */
  .mobile-rail-slot {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
  }
  .mobile-rail-slot .right-rail {
    position: static !important;
    display: contents !important;
    pointer-events: none !important;
  }
  .mobile-rail-slot .icon-fab {
    position: fixed !important;
    right: var(--m-edge) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    pointer-events: auto !important;
  }
  #libraryToggle { top: 50dvh !important; transform: translateY(-50%) !important; }
  #settingsToggle { bottom: calc(var(--m-edge) + var(--m-input) + 6px) !important; }
  .bespoke-icon { width: 24px !important; height: 24px !important; }

  /* Full-screen panels on mobile. */
  .settings-backdrop, .library-backdrop, .profile-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(5, 4, 12, .55) !important;
  }
  .settings-backdrop.open, .library-backdrop.open, .profile-backdrop.open { z-index: 110 !important; }
  .settings-menu, .library-menu, .profile-menu {
    position: fixed !important;
    z-index: 120 !important;
    inset: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
    border-radius: var(--radius) !important;
    padding: 14px !important;
  }
  .settings-head, .library-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    padding-bottom: 10px !important;
    background: linear-gradient(180deg, rgba(22,20,32,.96), rgba(22,20,32,.78)) !important;
    border-radius: var(--radius) !important;
  }
  #profileClose, #settingsClose, #libraryClose, .library-close {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 26px !important;
    line-height: 1 !important;
    z-index: 4 !important;
  }

  .settings-tabs { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .tall-library-grid, .import-layout { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .manager-list, .import-queue { max-height: 38dvh !important; overflow: auto !important; }

  body.app-loading #mobileShell,
  body.app-loading .library-backdrop,
  body.app-loading .settings-backdrop,
  body.app-loading .profile-backdrop,
  body.app-loading .library-menu,
  body.app-loading .settings-menu,
  body.app-loading .profile-menu { visibility: hidden !important; }
}

@media (max-width: 390px) {
  :root { --m-edge: 8px; --m-topbar: 58px; --m-input: 54px; --m-actions: 92px; }
  .mobile-top-slot .app-topbar { padding: 6px !important; grid-template-columns: 116px minmax(0,1fr) 42px !important; gap: 5px !important; }
  .website-logo { max-width: 116px !important; padding: 0 8px !important; font-size: 13px !important; }
  .quiz-switcher { gap: 4px !important; }
  #ratingsQuizTab::after, #openingsQuizTab::after { font-size: 10px !important; }
  .profile-badge { width: 42px !important; height: 42px !important; min-width: 42px !important; }
  .profile-badge-avatar { width: 32px !important; height: 32px !important; }
  .mobile-info-card { padding: 8px !important; gap: 7px !important; }
  .mobile-info-row { gap: 8px !important; }
  .meta h1 { font-size: clamp(16px, 5vw, 20px) !important; }
  .actions button { font-size: 12px !important; }
  .mobile-rail-slot .icon-fab { width: 44px !important; height: 44px !important; min-width: 44px !important; }
}

@media (max-height: 700px) and (max-width: 820px) {
  :root { --m-topbar: 56px; --m-input: 52px; --m-actions: 86px; --m-gap: 6px; }
  #mobileShell { grid-template-rows: var(--m-topbar) minmax(104px, 23dvh) minmax(0, 1fr) var(--m-actions) var(--m-input); }
  .mobile-info-card { padding: 7px !important; gap: 6px !important; }
  .mobile-mode-slot .mode-card { padding: 6px 8px !important; }
  .legend { max-height: 28px !important; }
  .message { font-size: 12px !important; }
  .hints, .guesses { display: none !important; }
}

/* Mobile modal/panel overhaul: settings, library and profile use their own
   mobile-safe layouts instead of squeezed desktop drawers. Keep this block last. */
@media (max-width: 820px) {
  body { overflow: hidden !important; }
  body[data-overlay="settings"],
  body[data-overlay="library"],
  body[data-overlay="profile"] { touch-action: none; }

  .settings-backdrop,
  .library-backdrop,
  .profile-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 300 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: rgba(5, 4, 12, .68) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .settings-backdrop.open,
  .library-backdrop.open,
  .profile-backdrop.open {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Closed desktop drawers must not remain as visible side strips on mobile. */
  .settings-menu:not(.open),
  .library-menu:not(.open),
  .profile-menu:not(.open) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .settings-menu.open,
  .library-menu.open,
  .profile-menu.open {
    display: flex !important;
    position: fixed !important;
    z-index: 320 !important;
    inset: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
    translate: none !important;
    overflow: hidden !important;
    flex-direction: column !important;
    padding: 12px !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(39,45,58,.96), rgba(13,16,24,.98)) !important;
    box-shadow: 0 22px 54px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.16) !important;
    contain: layout paint !important;
  }

  .settings-menu.open *,
  .library-menu.open *,
  .profile-menu.open * { max-width: 100%; }

  .settings-head,
  .library-head,
  .profile-menu .settings-head {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 14px !important;
    margin: 0 0 10px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: rgba(6, 7, 13, .58) !important;
    overflow: hidden !important;
  }
  .settings-head h2,
  .library-head h2,
  .profile-menu .settings-head h2 {
    font-size: clamp(24px, 7.5vw, 34px) !important;
    line-height: 1.02 !important;
    margin: 2px 0 4px !important;
    white-space: normal !important;
  }
  .settings-config,
  .library-head p,
  .profile-menu .settings-config {
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #profileClose,
  #settingsClose,
  #libraryClose,
  .library-close {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 30px !important;
    line-height: 1 !important;
  }

  /* Settings pages behave like mobile pages, not mini desktop dashboards. */
  .settings-tabs {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 0 10px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
  }
  .settings-tab {
    min-height: 48px !important;
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: clamp(13px, 3.6vw, 16px) !important;
    border-radius: 20px !important;
  }
  .settings-page {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 12px 2px 2px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .settings-page:not(.active) { display: none !important; }
  .settings-page.active { display: block !important; }
  .settings-page > *,
  .profile-menu > .plain-card,
  .library-menu > * { min-width: 0 !important; }

  .plain-card,
  .import-panel,
  .import-queue-card,
  .library-column,
  .revamped-editor,
  .collapse-card,
  .manager-card {
    border-radius: 22px !important;
    padding: 14px !important;
  }
  .card-title-row,
  .library-tools-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .library-tools-actions,
  .roomy-toolbar,
  .editor-actions-row,
  .search-row,
  .queue-actions,
  .bulk-library-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .library-tools-actions button,
  .roomy-toolbar button,
  .editor-actions-row button,
  .search-row button,
  .queue-actions button,
  .bulk-library-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }
  .search-row input,
  .library-filter-toolbar input { grid-column: 1 / -1 !important; }

  /* Anime Library: list and editor get genuine mobile scroll areas. */
  .manager-grid.revamped-grid.tall-library-grid,
  .tall-library-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(280px, 42vh) minmax(420px, auto) !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .library-column {
    display: flex !important;
    flex-direction: column !important;
    min-height: 280px !important;
    overflow: hidden !important;
  }
  .library-column .manager-list,
  #managerList {
    flex: 1 1 auto !important;
    min-height: 190px !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px !important;
    margin: 0 !important;
  }
  .manager-list-item {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 58px !important;
    overflow: hidden !important;
  }
  .manager-row-open,
  .manager-list-item strong,
  .manager-list-item span { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .revamped-editor {
    min-height: 420px !important;
    overflow: visible !important;
  }
  .library-editor-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }
  .library-load-status { min-height: 20px !important; }
  .two-col,
  .four-col { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Import Queue: no overlap; checklist and results scroll inside their cards. */
  .import-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .import-main-column { display: grid !important; gap: 14px !important; }
  .import-queue-card {
    position: relative !important;
    top: auto !important;
    min-height: 420px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .queue-actions { grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin: 8px 0 10px !important; }
  #stageTransferBtn,
  #stageClearBtn { grid-column: 1 / -1 !important; }
  #importQueue,
  .import-queue {
    flex: 1 1 auto !important;
    min-height: 220px !important;
    max-height: 42vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 2px 8px 0 !important;
  }
  .import-results { max-height: 44vh !important; overflow-y: auto !important; overflow-x: hidden !important; }
  .queue-card,
  .selectable-results .result-card,
  .result-card {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .queue-card img,
  .result-card img { display: none !important; }
  .queue-card button,
  .result-card button { grid-column: 1 / -1 !important; width: 100% !important; }

  /* Library data browser. */
  .library-menu.open {
    gap: 10px !important;
  }
  .library-search,
  .library-search-label,
  .library-count { flex: 0 0 auto !important; }
  .library-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 4px !important;
  }
  .library-item.with-thumb {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  .library-copy { min-width: 0 !important; }
  .library-copy strong,
  .library-copy small { display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

  /* Profile: center/fill viewport, no horizontal overflow. */
  .profile-menu.open {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .profile-menu .plain-card {
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .profile-editor-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    justify-items: center !important;
    text-align: center !important;
  }
  .profile-picture-preview {
    width: min(34vw, 128px) !important;
    height: min(34vw, 128px) !important;
    border-radius: 50% !important;
  }
  .profile-picture-actions {
    width: 100% !important;
    display: grid !important;
    gap: 10px !important;
  }
  .profile-picture-actions .upload-button,
  .profile-picture-actions button { width: 100% !important; min-height: 44px !important; }
  .avatar-preset-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .avatar-preset { width: 100% !important; min-width: 0 !important; }
  .profile-bg-picker {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* Keep the page underneath stable and non-interactive while a panel is open. */
  body[data-overlay="settings"] #mobileShell,
  body[data-overlay="library"] #mobileShell,
  body[data-overlay="profile"] #mobileShell {
    pointer-events: none !important;
    transform: none !important;
    filter: brightness(.62) saturate(.9) !important;
  }
}

@media (max-width: 380px) {
  .settings-menu.open,
  .library-menu.open,
  .profile-menu.open { inset: 6px !important; padding: 10px !important; border-radius: 20px !important; }
  .settings-tabs { gap: 6px !important; }
  .settings-tab { min-height: 44px !important; font-size: 12px !important; }
  .settings-head h2,
  .library-head h2,
  .profile-menu .settings-head h2 { font-size: 24px !important; }
  .plain-card,
  .import-panel,
  .import-queue-card,
  .library-column,
  .revamped-editor,
  .collapse-card { padding: 12px !important; }
}

/* --- Mobile layout hardening + utility placement + bespoke volume icon --- */
@media (max-width: 820px) {
  /* Route-level shell: prevent the guess form from expanding into the whole viewport. */
  body:not([data-route="home"]) #mobileShell {
    grid-template-rows: var(--m-topbar) minmax(112px, 24dvh) minmax(150px, 1fr) var(--m-actions) var(--m-input) !important;
  }
  body:not([data-route="home"]) .mobile-guess-slot {
    display: block !important;
    height: var(--m-input) !important;
    min-height: var(--m-input) !important;
    max-height: var(--m-input) !important;
    overflow: visible !important;
  }
  body:not([data-route="home"]) .mobile-guess-slot .guessbar {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: var(--m-input) !important;
    min-height: var(--m-input) !important;
    max-height: var(--m-input) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(76px, 22vw) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }
  body:not([data-route="home"]) .mobile-guess-slot .input-wrap,
  body:not([data-route="home"]) .mobile-guess-slot .guessbar input,
  body:not([data-route="home"]) .mobile-guess-slot .guessbar button {
    height: var(--m-input) !important;
    min-height: 0 !important;
    max-height: var(--m-input) !important;
  }
  body:not([data-route="home"]) .mobile-guess-slot .guessbar input {
    display: block !important;
    padding: 0 14px !important;
    line-height: var(--m-input) !important;
  }

  /* Homepage keeps both floating utility buttons, positioned on the right. */
  body.mobile-shell-active[data-route="home"] .mobile-rail-slot,
  body.mobile-shell-active[data-route="home"] .mobile-rail-slot .right-rail {
    display: contents !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
  body.mobile-shell-active[data-route="home"] .mobile-rail-slot .icon-fab {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
  }
  body.mobile-shell-active[data-route="home"] #libraryToggle {
    right: var(--m-edge) !important;
    top: 50dvh !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
  body.mobile-shell-active[data-route="home"] #settingsToggle {
    right: var(--m-edge) !important;
    top: auto !important;
    bottom: var(--m-edge) !important;
    transform: none !important;
  }

  /* Keep the volume control visually circular when collapsed. */
  .mobile-volume-slot {
    width: 46px !important;
    height: 46px !important;
    overflow: visible !important;
  }
  .mobile-volume-slot .volume-dock {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    padding: 5px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .mobile-volume-slot .volume-dock:hover,
  .mobile-volume-slot .volume-dock:focus-within {
    width: min(218px, calc(100vw - 20px)) !important;
    border-radius: 999px !important;
  }
  .volume-icon {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }
  .volume-svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    pointer-events: none !important;
  }
  .volume-mute-x { opacity: 0; transition: opacity .12s ease; }
  .volume-icon.is-muted .volume-wave { opacity: 0; }
  .volume-icon.is-muted .volume-mute-x { opacity: 1; }
}

/* Final mobile shell stabilization: dedicated tools drawer, fixed quiz flow,
   horizontal rating scrolling, and animation polish. Keep this block last. */
@media (max-width: 820px) {
  :root {
    --m-topbar: clamp(58px, 7.4dvh, 70px);
    --m-info: clamp(124px, 21dvh, 172px);
    --m-actions: clamp(92px, 12dvh, 108px);
    --m-input: clamp(58px, 7.2dvh, 66px);
    --m-gap: clamp(7px, 1.35dvh, 10px);
  }

  body.mobile-shell-active {
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  #mobileShell {
    grid-template-rows: var(--m-topbar) var(--m-info) minmax(0, 1fr) var(--m-actions) var(--m-input) !important;
    gap: var(--m-gap) !important;
    animation: mobilePageIn .22s ease both;
  }

  body[data-content-route="home"] #mobileShell,
  body[data-route="home"] #mobileShell {
    grid-template-rows: var(--m-topbar) minmax(0, 1fr) !important;
  }

  body[data-content-route="home"] .mobile-info-card,
  body[data-content-route="home"] .mobile-quiz-surface,
  body[data-content-route="home"] .mobile-actions-slot,
  body[data-content-route="home"] .mobile-guess-slot,
  body[data-content-route="home"] .mobile-volume-slot,
  body[data-content-route="home"] .mobile-rail-slot,
  body[data-route="home"] .mobile-info-card,
  body[data-route="home"] .mobile-quiz-surface,
  body[data-route="home"] .mobile-actions-slot,
  body[data-route="home"] .mobile-guess-slot,
  body[data-route="home"] .mobile-volume-slot,
  body[data-route="home"] .mobile-rail-slot {
    display: none !important;
  }

  body[data-content-route="home"] .mobile-home-slot,
  body[data-route="home"] .mobile-home-slot {
    display: flex !important;
  }

  body:not([data-content-route="home"]) .mobile-home-slot {
    display: none !important;
  }

  body[data-route="home"] .mobile-top-slot .app-topbar,
  body[data-content-route="home"] .mobile-top-slot .app-topbar {
    grid-template-columns: minmax(150px, auto) minmax(0, 1fr) 46px !important;
    grid-template-areas: "logo spacer profile" !important;
  }

  body[data-route="home"] .quiz-switcher,
  body[data-content-route="home"] .quiz-switcher {
    display: none !important;
  }

  .mobile-info-card,
  .mobile-quiz-surface,
  .mobile-actions-slot,
  .mobile-guess-slot,
  .home-card,
  .end-card {
    animation: mobileCardIn .24s ease both;
  }

  .mobile-info-card {
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding: clamp(8px, 1.6dvh, 12px) !important;
  }

  .mobile-quiz-surface {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    padding: clamp(9px, 1.6dvh, 12px) !important;
    overflow: hidden !important;
  }

  body[data-content-route="openings"] .mobile-quiz-surface,
  body[data-route="openings"] .mobile-quiz-surface {
    grid-template-rows: minmax(0, 1fr) auto !important;
  }

  .mobile-main-slot {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }

  .heatmap {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 10px 8px 14px !important;
    gap: clamp(14px, 4vw, 24px) !important;
    touch-action: pan-x !important;
    scrollbar-width: thin !important;
  }

  .heatmap.empty,
  .heatmap.end-screen,
  .heatmap.opening-clue {
    overflow: hidden !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .season-group {
    flex: 0 0 auto !important;
    max-height: 100% !important;
  }

  .season-columns {
    max-height: 100% !important;
  }

  .opening-clue-card,
  .opening-video-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opening-video-panel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .video-card.opening-video-card {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .video-copy { min-height: 0 !important; }
  .video-copy h3 { font-size: clamp(16px, 5vw, 22px) !important; margin: 0 !important; }
  .video-copy p { margin: 0 !important; }

  .video-frame-wrap {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: var(--radius) !important;
  }

  .opening-video-frame {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: var(--radius) !important;
  }

  .opening-video-missing {
    display: grid !important;
    place-items: center !important;
    gap: 10px !important;
    text-align: center !important;
    color: rgba(255,255,255,.78) !important;
    padding: 18px !important;
  }

  .opening-video-missing a {
    color: #bdefff !important;
    font-weight: 900 !important;
  }

  .mobile-actions-slot {
    height: var(--m-actions) !important;
    min-height: var(--m-actions) !important;
  }

  .mobile-actions-slot .actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 8px !important;
    height: 100% !important;
  }

  .mobile-guess-slot {
    height: var(--m-input) !important;
    min-height: var(--m-input) !important;
    max-height: var(--m-input) !important;
    overflow: visible !important;
  }

  .guessbar {
    height: var(--m-input) !important;
    max-height: var(--m-input) !important;
    grid-template-columns: minmax(0, 1fr) minmax(80px, 22vw) !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  .guessbar input,
  .guessbar button {
    height: var(--m-input) !important;
    max-height: var(--m-input) !important;
  }

  /* Mobile tools live in the profile drawer, not as floating clutter. */
  .mobile-rail-slot,
  .mobile-volume-slot {
    display: none !important;
  }

  .mobile-tools-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 340 !important;
    display: none !important;
    background: rgba(5,4,12,.58) !important;
  }

  .mobile-tools-backdrop.open { display: block !important; }

  .mobile-tools-drawer {
    position: fixed !important;
    z-index: 350 !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: min(330px, calc(100vw - 24px)) !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    border-radius: 24px !important;
    transform: translateX(calc(100% + 20px)) !important;
    transition: transform .22s ease !important;
    background: linear-gradient(145deg, rgba(45,50,64,.97), rgba(14,15,24,.98)) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16) !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .mobile-tools-drawer.open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  .mobile-tools-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    background: rgba(5,6,12,.45) !important;
  }

  .mobile-tools-head h2 { margin: 0 !important; font-size: 28px !important; }
  .mobile-tools-close { width: 44px !important; height: 44px !important; border-radius: 50% !important; padding: 0 !important; font-size: 28px !important; }

  .mobile-tool-button {
    width: 100% !important;
    min-height: 54px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 12px !important;
    text-align: left !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
  }

  .mobile-tool-button .bespoke-icon { width: 24px !important; height: 24px !important; }
  .mobile-tool-icon { width: 24px !important; height: 24px !important; display: grid !important; place-items: center !important; color: #83f4ff !important; }

  .mobile-tools-volume {
    margin-top: auto !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
  }

  .mobile-tools-volume p { margin: 0 0 10px !important; font-weight: 900 !important; color: rgba(255,255,255,.8) !important; }

  .mobile-tools-volume .volume-dock {
    position: static !important;
    width: 100% !important;
    height: 48px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    transform: none !important;
    overflow: visible !important;
  }

  .mobile-tools-volume .volume-dock:hover,
  .mobile-tools-volume .volume-dock:focus-within { width: 100% !important; }

  .mobile-tools-volume .volume-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }

  .mobile-tools-volume #volumeSlider {
    display: block !important;
    width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body.mobile-tools-open #mobileShell { filter: brightness(.78) !important; }

  @keyframes mobilePageIn { from { opacity: .6; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes mobileCardIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
}

@media (max-height: 740px) and (max-width: 820px) {
  :root {
    --m-info: clamp(112px, 19dvh, 148px);
    --m-actions: clamp(84px, 11dvh, 96px);
    --m-input: clamp(54px, 7dvh, 60px);
    --cell: clamp(16px, 2.25dvh, 22px);
    --col: clamp(23px, 3dvh, 30px);
  }
  .mobile-quiz-surface { padding: 8px !important; }
  .mobile-info-card { padding: 8px !important; }
}

/* Final mobile quick-menu and media fixes */
@media (max-width: 820px) {
  :root { --ease-soft: cubic-bezier(.2,.85,.22,1); --ease-pop: cubic-bezier(.16,1.25,.34,1); }

  /* Mobile utilities live in the profile menu only. Hide the standalone rail everywhere. */
  .mobile-rail-slot,
  .mobile-rail-slot .right-rail,
  .right-rail,
  #libraryToggle,
  #settingsToggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Quick menu: lighter translucent panel and smoother motion. */
  .mobile-tools-backdrop {
    background: rgba(4, 4, 12, .38) !important;
    transition: opacity .28s var(--ease-soft) !important;
  }
  .mobile-tools-drawer {
    background:
      radial-gradient(circle at 25% 0%, rgba(151, 238, 255, .16), transparent 34%),
      linear-gradient(145deg, rgba(47, 54, 70, .74), rgba(13, 15, 25, .82)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.2) !important;
    transition: transform .34s var(--ease-pop), opacity .24s var(--ease-soft) !important;
  }
  .mobile-tool-button { transition: transform .22s var(--ease-pop), background .22s var(--ease-soft), border-color .22s var(--ease-soft) !important; }
  .mobile-tool-button:active { transform: scale(.985) !important; }

  /* Profile item uses the active profile avatar, not a dot. */
  .mobile-tool-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: rgba(126, 232, 246, .16) !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    color: #fff !important;
    font-weight: 950 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;
  }

  /* Volume block alignment inside the quick menu. */
  .mobile-tools-volume {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.15) !important;
  }
  .mobile-tools-volume .volume-dock {
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: stretch !important;
    column-gap: 12px !important;
    padding: 4px 12px 4px 4px !important;
    background: rgba(255,255,255,.075) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }
  .mobile-tools-volume .volume-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    justify-self: center !important;
    align-self: center !important;
    border-radius: 50% !important;
  }
  .mobile-tools-volume #volumeSlider {
    width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    margin: 0 !important;
    align-self: center !important;
  }

  /* Favorite is attached to the title block on mobile. */
  .mobile-meta-slot { position: relative !important; padding-right: 44px !important; }
  .mobile-title-favorite {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    font-size: 20px !important;
    z-index: 3 !important;
  }
  .mobile-title-favorite:disabled { opacity: 0 !important; pointer-events: none !important; }
  .mobile-poster-slot .favorite-cover-btn:not(.mobile-title-favorite) { display: none !important; }

  /* Remove the square backing that was visible behind mobile poster art. */
  .mobile-poster-slot,
  .mobile-poster-slot .poster-wrap {
    background: transparent !important;
    box-shadow: none !important;
  }
  .mobile-poster-slot .poster-wrap::before,
  .mobile-poster-slot .poster-wrap::after { content: none !important; display: none !important; }
  .mobile-poster-slot .poster { overflow: hidden !important; clip-path: inset(0 round var(--radius)) !important; }

  /* Video reveal: the video panel replaces the clue instead of sitting below it. */
  .opening-video-panel:not([hidden]) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  .opening-video-panel:not([hidden]) + .guessbar { display: none !important; }
  .opening-video-frame {
    background: #05050a !important;
    object-fit: contain !important;
  }
  .opening-video-frame.video-audio-only {
    min-height: 100% !important;
  }

  /* Less stiff transitions. */
  .mobile-info-card,
  .mobile-quiz-surface,
  .mobile-actions-slot,
  .mobile-guess-slot,
  .home-card,
  .end-card {
    animation: mobileCardIn .42s var(--ease-pop) both !important;
  }
  #mobileShell { animation: mobilePageIn .38s var(--ease-soft) both !important; }
  button, .quiz-tab, .profile-badge, .volume-icon, .home-actions button {
    transition: transform .22s var(--ease-pop), background .22s var(--ease-soft), border-color .22s var(--ease-soft), box-shadow .22s var(--ease-soft), opacity .18s var(--ease-soft) !important;
  }
  button:active, .quiz-tab:active, .profile-badge:active { transform: scale(.985) !important; }

  @keyframes mobilePageIn { from { opacity: .25; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
  @keyframes mobileCardIn { from { opacity: 0; transform: translateY(18px) scale(.975); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
}

/* Patch: dedicated mobile opening video slot and clearer top tabs */
@media (max-width: 820px) {
  .mobile-quiz-surface {
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  }
  body[data-content-route="openings"] .mobile-quiz-surface,
  body[data-route="openings"] .mobile-quiz-surface {
    grid-template-rows: minmax(0, 1fr) minmax(118px, 28dvh) auto !important;
  }
  .mobile-video-slot {
    min-width: 0 !important;
    min-height: 0 !important;
    display: none !important;
    overflow: hidden !important;
  }
  .mobile-video-slot:has(.opening-video-panel:not([hidden])) {
    display: block !important;
  }
  .mobile-video-slot .opening-video-panel:not([hidden]) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  .mobile-video-slot .video-card.opening-video-card {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding: 9px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  .mobile-video-slot .video-frame-wrap {
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(0,0,0,.34) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
  }
  .mobile-video-slot .opening-video-frame {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    background: #05050a !important;
  }
  .mobile-video-slot .video-copy { display: none !important; }

  .quiz-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    padding: 0 6px !important;
  }
  #ratingsQuizTab::after,
  #openingsQuizTab::after {
    display: block !important;
    width: 100% !important;
    line-height: 1 !important;
    transform: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    color: currentColor !important;
    text-align: center !important;
  }

  .mobile-meta-slot { padding-right: 44px !important; }
  .opening-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  .opening-title-row h2,
  .opening-title-row h3 {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }
  .opening-favorite-btn {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    background: linear-gradient(145deg,rgba(220,38,74,.84),rgba(138,16,43,.68)) !important;
    color: #fff !important;
  }
  .opening-favorite-btn.active {
    background: linear-gradient(145deg,rgba(255,43,91,.96),rgba(172,25,58,.86)) !important;
    box-shadow: 0 0 24px rgba(255,58,111,.22), inset 0 1px 0 rgba(255,255,255,.28) !important;
  }
}

/* Patch: blur the page behind the mobile Quick Tools menu. */
@media (max-width: 820px) {
  body.mobile-tools-open {
    overflow: hidden !important;
  }

  .mobile-tools-backdrop,
  .mobile-tools-backdrop.open {
    background: rgba(5, 4, 12, .42) !important;
    backdrop-filter: blur(18px) saturate(1.12) brightness(.78) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) brightness(.78) !important;
  }

  .mobile-tools-drawer {
    backdrop-filter: blur(24px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
  }

  .mobile-tools-drawer.open {
    background:
      radial-gradient(circle at 24% 0%, rgba(151, 238, 255, .18), transparent 36%),
      linear-gradient(145deg, rgba(46, 54, 70, .62), rgba(12, 14, 24, .76)) !important;
  }

  body.mobile-tools-open #mobileShell,
  body.mobile-tools-open .app-shell {
    filter: none !important;
  }
}

/* Patch: mobile opening video reveal should use the dedicated video slot, not overlap the clue. */
@media (max-width: 820px) {
  body.opening-video-visible .mobile-video-slot {
    display: block !important;
    min-height: clamp(150px, 28dvh, 260px) !important;
  }

  body.opening-video-visible .mobile-main-slot {
    display: none !important;
  }

  .opening-clue-card .opening-favorite-btn {
    display: none !important;
  }

  .mobile-video-slot .opening-video-panel:not([hidden]),
  body.opening-video-visible .mobile-video-slot .opening-video-panel {
    display: block !important;
    height: 100% !important;
    width: 100% !important;
  }

  .mobile-video-slot .video-frame-wrap {
    min-height: clamp(138px, 26dvh, 240px) !important;
    aspect-ratio: 16 / 9 !important;
  }

  .mobile-video-slot .opening-video-frame {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: clamp(138px, 26dvh, 240px) !important;
    object-fit: contain !important;
    background: #05050a !important;
  }

  .mobile-video-slot .audio-only-media {
    height: 100% !important;
    min-height: clamp(138px, 26dvh, 240px) !important;
  }

  .mobile-video-slot .opening-audio-frame {
    width: min(100%, 520px) !important;
  }
}

/* Fix: mobile tab labels must sit in the center of their pill buttons. */
@media (max-width: 820px) {
  .mobile-top-slot .quiz-switcher {
    align-items: center !important;
  }
  .mobile-top-slot .quiz-tab {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    text-align: center !important;
    overflow: hidden !important;
  }
  .mobile-top-slot #ratingsQuizTab::after,
  .mobile-top-slot #openingsQuizTab::after {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(0) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Fix: the opening clue should be fully visible before reveal. */
  body[data-route="openings"] .mobile-main-slot {
    align-items: stretch !important;
    overflow: hidden !important;
  }
  body[data-route="openings"] .heatmap.opening-clue {
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: clamp(12px, 3vw, 18px) !important;
    overflow: hidden !important;
  }
  body[data-route="openings"] .opening-clue-card {
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: clamp(8px, 1.6vh, 14px) !important;
    padding: clamp(16px, 4vw, 24px) !important;
    overflow: hidden !important;
  }
  body[data-route="openings"] .opening-clue-card .eyebrow {
    margin: 0 !important;
    line-height: 1 !important;
  }
  body[data-route="openings"] .opening-title-row {
    width: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  body[data-route="openings"] .opening-clue-card h2 {
    margin: 0 !important;
    line-height: 1.08 !important;
    font-size: clamp(24px, 7vw, 40px) !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  body[data-route="openings"] .opening-clue-card p,
  body[data-route="openings"] .opening-clue-card small {
    margin: 0 !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
  }

  /* Fix: the reveal video slot owns the video and should not overlap the clue. */
  body.opening-video-visible .mobile-main-slot { display: none !important; }
  body.opening-video-visible .mobile-video-slot {
    display: block !important;
    min-height: clamp(160px, 30dvh, 280px) !important;
    overflow: hidden !important;
  }
  .mobile-video-slot .opening-video-panel:not([hidden]) {
    height: 100% !important;
    min-height: clamp(160px, 30dvh, 280px) !important;
  }
  .mobile-video-slot .opening-video-card {
    height: 100% !important;
    min-height: inherit !important;
  }
  .mobile-video-slot .video-frame-wrap {
    min-height: clamp(150px, 28dvh, 260px) !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
  .mobile-video-slot .opening-video-frame {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: clamp(150px, 28dvh, 260px) !important;
    object-fit: contain !important;
  }
}

/* Patch: mobile opening layout polish after video support.
   Keeps the clue, video, answer badge, and top tabs in their own stable rows. */
@media (max-width: 820px) {
  /* The pill labels were inheriting line-height/inner layout from earlier button styles.
     Render the mobile label as an absolutely centered pseudo-element instead. */
  .mobile-top-slot .quiz-tab {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .mobile-top-slot .quiz-tab > * {
    opacity: 0 !important;
  }
  .mobile-top-slot #ratingsQuizTab::after,
  .mobile-top-slot #openingsQuizTab::after {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 6px !important;
    transform: none !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: clamp(11px, 3.15vw, 13px) !important;
    font-weight: 900 !important;
    color: currentColor !important;
  }

  /* The openings route uses one large surface. The clue/video should own the
     space; the answer badge is a compact row below, never an overlay. */
  body[data-route="openings"] .mobile-quiz-surface,
  body[data-content-route="openings"] .mobile-quiz-surface {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  body[data-route="openings"] .mobile-main-slot,
  body[data-content-route="openings"] .mobile-main-slot {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  body[data-route="openings"] .heatmap.opening-clue,
  body[data-content-route="openings"] .heatmap.opening-clue {
    height: 100% !important;
    min-height: 0 !important;
    padding: clamp(10px, 2.8vw, 16px) !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: stretch !important;
  }
  body[data-route="openings"] .opening-clue-card,
  body[data-content-route="openings"] .opening-clue-card {
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto 1fr !important;
    align-content: start !important;
    justify-items: start !important;
    gap: clamp(8px, 1.5dvh, 12px) !important;
    padding: clamp(14px, 4vw, 22px) !important;
    overflow: hidden !important;
  }
  body[data-route="openings"] .opening-clue-card .eyebrow,
  body[data-content-route="openings"] .opening-clue-card .eyebrow {
    margin: 0 !important;
    line-height: 1 !important;
  }
  body[data-route="openings"] .opening-clue-card h2,
  body[data-content-route="openings"] .opening-clue-card h2 {
    margin: 0 !important;
    line-height: 1.04 !important;
    font-size: clamp(21px, 6vw, 32px) !important;
    letter-spacing: .02em !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  body[data-route="openings"] .opening-clue-card p,
  body[data-route="openings"] .opening-clue-card small,
  body[data-content-route="openings"] .opening-clue-card p,
  body[data-content-route="openings"] .opening-clue-card small {
    margin: 0 !important;
    line-height: 1.18 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Revealed opening video: fill the available quiz surface, but do not intrude
     into the answer row or controls. */
  body.opening-video-visible[data-route="openings"] .mobile-quiz-surface,
  body.opening-video-visible[data-content-route="openings"] .mobile-quiz-surface {
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }
  body.opening-video-visible .mobile-main-slot {
    display: none !important;
  }
  body.opening-video-visible .mobile-video-slot {
    display: grid !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  body.opening-video-visible .mobile-video-slot .opening-video-panel:not([hidden]) {
    display: grid !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  body.opening-video-visible .mobile-video-slot .video-card.opening-video-card,
  body.opening-video-visible .mobile-video-slot .opening-video-card {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: clamp(8px, 2vw, 12px) !important;
    overflow: hidden !important;
  }
  body.opening-video-visible .mobile-video-slot .video-copy {
    display: none !important;
  }
  body.opening-video-visible .mobile-video-slot .video-frame-wrap {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
  }
  body.opening-video-visible .mobile-video-slot .opening-video-frame {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Answer / hint area: keep it compact under the clue/video. */
  .mobile-feedback-slot {
    position: static !important;
    z-index: 0 !important;
    display: grid !important;
    gap: 4px !important;
    min-height: 0 !important;
    max-height: clamp(34px, 7dvh, 58px) !important;
    overflow: hidden !important;
  }
  .mobile-feedback-slot .message {
    margin: 0 !important;
    padding: 7px 10px !important;
    min-height: 0 !important;
    max-height: clamp(32px, 6.4dvh, 50px) !important;
    overflow: hidden !important;
    font-size: clamp(11px, 3.15vw, 13px) !important;
    line-height: 1.15 !important;
    display: flex !important;
    align-items: center !important;
  }
  .mobile-feedback-slot .message:empty {
    display: none !important;
  }
  body.opening-video-visible .mobile-feedback-slot .message:not(:empty) {
    border-color: rgba(255, 124, 112, .26) !important;
    background: linear-gradient(180deg, rgba(94, 52, 55, .62), rgba(38, 24, 35, .46)) !important;
  }
}

/* Final mobile opening video overlay fix: full-width video card with title/artist/like. */
@media (max-width: 820px) {
  body.opening-video-visible[data-route="openings"] .mobile-quiz-surface,
  body.opening-video-visible[data-content-route="openings"] .mobile-quiz-surface {
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: clamp(7px, 1.2dvh, 10px) !important;
    overflow: visible !important;
  }

  body.opening-video-visible .mobile-main-slot {
    display: none !important;
  }

  body.opening-video-visible .mobile-video-slot {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.opening-video-visible .mobile-video-slot .opening-video-panel:not([hidden]) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.opening-video-visible .mobile-video-slot .video-card.opening-video-card,
  body.opening-video-visible .mobile-video-slot .opening-video-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
    gap: clamp(8px, 1.35dvh, 12px) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(10px, 2.5vw, 14px) !important;
    overflow: visible !important;
  }

  body.opening-video-visible .mobile-video-slot .video-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 4px 10px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  body.opening-video-visible .mobile-video-slot .video-copy .video-kicker {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    font-size: clamp(9px, 2.6vw, 11px) !important;
    line-height: 1 !important;
    letter-spacing: .14em !important;
  }

  body.opening-video-visible .mobile-video-slot .video-copy .video-title-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.opening-video-visible .mobile-video-slot .video-copy h3 {
    margin: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(16px, 4.9vw, 23px) !important;
    line-height: 1.08 !important;
  }

  body.opening-video-visible .mobile-video-slot .video-copy p:not(.video-kicker) {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.16 !important;
    color: rgba(232, 238, 255, .78) !important;
  }

  body.opening-video-visible .mobile-video-slot .opening-favorite-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 20px !important;
  }

  body.opening-video-visible .mobile-video-slot .video-frame-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: var(--radius) !important;
  }

  body.opening-video-visible .mobile-video-slot .opening-video-frame {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    background: #05050a !important;
  }

  body.opening-video-visible .mobile-video-slot .audio-only-media {
    min-height: clamp(150px, 25dvh, 220px) !important;
  }

  body.opening-video-visible .mobile-feedback-slot {
    max-height: clamp(34px, 6.8dvh, 52px) !important;
    overflow: hidden !important;
  }
}

/* Mobile-only: the opening reveal already shows the anime title and opening
   metadata inside the video card, so the separate answer bar is redundant. */
@media (max-width: 820px) {
  body.opening-video-visible[data-route="openings"] .mobile-feedback-slot,
  body.opening-video-visible[data-content-route="openings"] .mobile-feedback-slot {
    display: none !important;
  }
}
/* Anidle mobile */
.quiz-switcher{grid-template-columns:repeat(3,minmax(0,1fr))}.quiz-tab{font-size:12px;line-height:1.1;padding-inline:6px}.anidle-board{overflow:auto;padding:12px;min-height:42dvh}.anidle-wrap{min-width:760px}.anidle-row{grid-template-columns:150px repeat(8,92px);gap:6px}.anidle-character,.anidle-cell{min-height:60px;padding:7px;border-radius:14px}.anidle-character img{width:42px;height:42px}.anidle-head h2{font-size:24px}.anidle-head p{font-size:13px}.anidle-result-card{margin:0;max-width:none;padding:18px}.anidle-result-card img{width:90px;height:90px}.anidle-result-card h2{font-size:28px}.anidle-result-actions{display:grid;grid-template-columns:1fr;gap:8px}.autocomplete-thumb{width:32px;height:32px;border-radius:9px}.character-import-layout{display:grid;grid-template-columns:1fr!important}.character-grid{display:grid;grid-template-columns:1fr!important}.settings-page[data-settings-page="characters"] .manager-list{max-height:34dvh;overflow:auto}

/* Character Library mobile staging */
@media (max-width: 760px){
  .character-import-stage-layout{display:grid!important;grid-template-columns:1fr!important;gap:14px!important}.character-search-results{display:grid;gap:10px;max-height:34dvh;overflow:auto;padding-right:2px}.character-result-card{display:grid;grid-template-columns:auto 42px minmax(0,1fr);gap:10px;align-items:center;padding:10px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07)}.character-result-card .compact-button{grid-column:1/-1;width:100%;min-height:42px}.character-result-thumb{width:42px;height:42px;border-radius:12px;object-fit:cover;background:rgba(255,255,255,.10)}.character-result-copy{min-width:0;display:grid;gap:2px}.character-result-copy strong,.character-result-copy span,.character-result-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.character-import-queue{max-height:36dvh;overflow:auto;display:grid;gap:10px}.character-queue-item{grid-template-columns:auto 42px minmax(0,1fr)!important;gap:10px}.character-queue-item .compact-button{grid-column:1/-1;width:100%}.character-entry-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px}.settings-page[data-settings-page="characters"] .manager-list{max-height:40dvh!important;overflow:auto}.character-entry{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}.result-check span,.row-check span{width:22px;height:22px;border-radius:8px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.16)}.result-check input:checked+span,.row-check input:checked+span{background:linear-gradient(135deg,#8c7bff,#5ce0d3)}

  body[data-content-route="anidle"] .mobile-info-card{display:none!important}body[data-content-route="anidle"] .mobile-legend-slot{display:none!important}body[data-content-route="anidle"] .mobile-quiz-surface{min-height:52dvh}.anidle-board{overflow:hidden!important;padding:0!important}.anidle-stage{height:100%;min-height:48dvh;padding:12px;display:grid;grid-template-rows:auto 1fr;gap:12px}.anidle-hero{display:grid;gap:10px;border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:14px;background:linear-gradient(135deg,rgba(116,96,255,.16),rgba(92,224,211,.08))}.anidle-hero h2{font-size:34px;line-height:.95;margin:0}.anidle-hero p:not(.eyebrow){font-size:13px;margin:4px 0 0}.anidle-trait-key{display:flex;gap:6px;flex-wrap:wrap}.anidle-trait-key span{font-size:11px;padding:6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}.anidle-trait-key i{width:10px;height:10px;border-radius:50%;display:inline-block}.anidle-grid-wrap{overflow:auto;min-height:0}.anidle-grid{display:grid;gap:7px;min-width:940px}.anidle-row{display:grid;grid-template-columns:170px repeat(8,88px);gap:7px}.anidle-labels>div,.anidle-trait-label{font-size:10px;line-height:1.1;text-transform:uppercase;letter-spacing:.06em}.anidle-character,.anidle-cell{min-height:58px;border-radius:14px;padding:7px}.anidle-character{display:flex;gap:7px;align-items:center;text-align:left}.anidle-character img{width:38px;height:38px;border-radius:10px}.anidle-guess-no{width:24px;height:24px;font-size:12px}.anidle-character strong{font-size:13px}.anidle-character small{font-size:11px}.anidle-cell{font-size:12px}.anidle-cell b{font-size:18px}.anidle-empty{grid-column:1/-1;text-align:center;padding:24px;border-radius:18px;border:1px dashed rgba(255,255,255,.18)}
}

/* Menu parity refactor: keep Anime List floating on mobile and separate Settings/Data. */
@media (max-width: 820px) {
  .app-settings-page { display: none !important; overflow: auto !important; padding: 12px !important; }
  .app-settings-page.active { display: block !important; }
  .app-settings-tab { min-height: 44px !important; border-radius: 999px !important; background: rgba(255,255,255,.07) !important; }
  .app-settings-tab.active { background: linear-gradient(135deg,rgba(128,96,226,.72),rgba(77,201,153,.42)) !important; }
  .app-settings-menu .settings-tabs { grid-template-columns: 1fr !important; }
  .three-col, .sound-settings-grid { grid-template-columns: 1fr !important; }
  .mobile-rail-slot {
    display: block !important;
    position: fixed !important;
    top: 50% !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    transform: translateY(-50%) !important;
    z-index: 120 !important;
    width: auto !important;
    pointer-events: none !important;
  }
  .mobile-rail-slot .right-rail,
  body:not([data-route="home"]) .right-rail {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: static !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
  }
  #libraryToggle {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 50% !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.2) !important;
  }
  #settingsToggle { display: none !important; }
  body[data-content-route="anidle"] .mobile-quiz-surface { align-items: stretch !important; }
  .anidle-start { display: grid !important; place-items: center !important; min-height: 48dvh !important; }
  .anidle-start-card { width: 100% !important; text-align: center !important; padding: 22px !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 24px !important; background: linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025)) !important; }
  .anidle-start-card h2 { font-size: 42px !important; line-height: .9 !important; margin: 0 0 10px !important; }
  .anidle-start-card p:not(.eyebrow) { margin: 0 0 18px !important; color: rgba(235,242,255,.76) !important; }
  .anidle-start-card .anidle-trait-key { justify-content: center !important; }
}

/* --- Mobile settings + character import refinement --- */
.settings-section-stack{display:grid;gap:14px;width:100%}
.character-import-layout.import-layout{grid-template-columns:1fr!important}
.character-import-layout .character-queue-card{height:auto!important;min-height:0!important}
.character-import-layout .character-import-queue{max-height:36dvh!important;overflow:auto!important}
.sound-settings-grid input[type="range"]{width:100%}

/* --- Anidle mobile unified layout --- */
@media (max-width: 820px){
  body[data-content-route="anidle"] .mobile-quiz-surface{
    width:min(80vw,520px)!important;
    margin-inline:auto!important;
    min-height:58dvh!important;
    align-items:stretch!important;
  }
  body[data-content-route="anidle"] .mobile-guess-slot,
  body[data-content-route="anidle"] .mobile-feedback-slot{
    width:min(80vw,520px)!important;
    margin-inline:auto!important;
  }
  body[data-content-route="anidle"] .mobile-info-card,
  body[data-content-route="anidle"] .mobile-legend-slot{display:none!important;}
  .anidle-board{overflow:hidden!important;padding:0!important;min-height:0!important;}
  .anidle-stage{height:100%!important;min-height:0!important;padding:0!important;display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;gap:10px!important;}
  .compact-anidle-hero{display:grid!important;align-items:start!important;gap:10px!important;padding:12px!important;border-radius:20px!important;}
  .compact-anidle-hero h2{font-size:30px!important;line-height:1!important;margin:0 0 3px!important;}
  .compact-anidle-hero p:not(.eyebrow){font-size:12px!important;line-height:1.3!important;margin:0!important;}
  .anidle-hero-tools{display:grid!important;gap:8px!important;justify-items:start!important;min-width:0!important;}
  .compact-anidle-hero .anidle-trait-key{justify-content:flex-start!important;gap:5px!important;}
  .compact-anidle-hero .anidle-trait-key span{font-size:10px!important;padding:5px 7px!important;}
  .anidle-mode-current{min-height:36px!important;padding:7px 12px!important;border-radius:999px!important;}
  .anidle-mode-dropdown{right:auto!important;left:0!important;width:min(300px,82vw)!important;}
  .anidle-countdown{font-size:11px!important;}
  .anidle-content{min-height:0!important;display:grid!important;}
  .anidle-mode-select{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:100%!important;margin:auto!important;}
  .anidle-start-mode-card{min-height:132px!important;padding:18px!important;border-radius:22px!important;display:grid!important;gap:8px!important;align-content:center!important;text-align:left!important;}
  .anidle-start-mode-card strong{font-size:24px!important;}
  .anidle-start-mode-card small{font-size:13px!important;line-height:1.35!important;color:rgba(236,240,255,.72)!important;}
  .anidle-grid-wrap{overflow:auto!important;min-height:0!important;border-radius:18px!important;}
  .anidle-grid{min-width:940px!important;margin-top:0!important;}
  .anidle-character img{width:38px!important;height:38px!important;aspect-ratio:1/1!important;object-fit:cover!important;border-radius:10px!important;}
  .anidle-result-card{align-self:center!important;justify-self:center!important;margin:0!important;width:100%!important;max-width:100%!important;padding:18px!important;border-radius:22px!important;}
  .anidle-result-card img{width:92px!important;height:92px!important;aspect-ratio:1/1!important;object-fit:cover!important;border-radius:20px!important;}
  .anidle-result-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
}

/* Mobile Anidle completion/gameplay view refinements */
@media (max-width: 820px) {
  body[data-content-route="anidle"] .mobile-quiz-surface{
    overflow:visible!important;
  }
  body[data-content-route="anidle"] .anidle-board{
    overflow:visible!important;
  }
  body[data-content-route="anidle"] .anidle-stage{
    height:auto!important;
    min-height:48dvh!important;
  }
  body[data-content-route="anidle"] .anidle-gameplay .anidle-content{
    overflow:hidden!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:10px!important;
  }
  body[data-content-route="anidle"] .anidle-complete .anidle-content,
  body[data-content-route="anidle"] .anidle-revealed-board .anidle-content{
    overflow:visible!important;
  }
  body[data-content-route="anidle"] .anidle-grid-wrap{
    max-height:56dvh!important;
    overflow:auto!important;
    scrollbar-gutter:stable both-edges;
  }
  body[data-content-route="anidle"] .anidle-labels{
    position:sticky!important;
    top:0!important;
    z-index:8!important;
    padding-bottom:6px!important;
    background:linear-gradient(180deg,rgba(22,17,34,.98),rgba(22,17,34,.9))!important;
    backdrop-filter:blur(14px) saturate(1.2);
  }
  body[data-content-route="anidle"] .anidle-result-card{
    align-self:start!important;
    margin:8px 0 16px!important;
  }
  .anidle-board-actions{
    display:flex;
    justify-content:center;
    padding:2px 0 4px;
  }
  .anidle-board-actions button{width:100%;min-height:42px!important;}
}

/* --- Mobile navigation + Anidle full-screen board refactor --- */
@media (max-width: 820px){
  .mobile-top-slot .app-topbar{
    grid-template-columns:minmax(0,1fr) 46px!important;
    grid-template-areas:"logo profile"!important;
  }
  .mobile-top-slot .quiz-switcher,
  .quiz-switcher{display:none!important;}
  .website-logo{max-width:none!important;justify-content:flex-start!important;padding-inline:14px!important;}
  .site-nav-menu{
    inset:var(--m-edge)!important;
    width:auto!important;
    max-width:none!important;
    border-radius:24px!important;
    padding:14px!important;
    z-index:190!important;
  }
  .site-nav-backdrop{z-index:189!important;}
  .site-nav-list button{min-height:72px!important;}

  body[data-content-route="anidle"] #mobileShell{
    grid-template-rows:var(--m-topbar) minmax(0,1fr) var(--m-input)!important;
    gap:var(--m-gap)!important;
    padding:var(--m-edge)!important;
    overflow:hidden!important;
  }
  body[data-content-route="anidle"] .mobile-home-slot,
  body[data-content-route="anidle"] .mobile-info-card,
  body[data-content-route="anidle"] .mobile-actions-slot,
  body[data-content-route="anidle"] .mobile-legend-slot{display:none!important;}
  body[data-content-route="anidle"] .mobile-quiz-surface{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:8px!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr)!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }
  body[data-content-route="anidle"] .mobile-main-slot{
    min-height:0!important;
    height:100%!important;
    display:grid!important;
    overflow:hidden!important;
  }
  body[data-content-route="anidle"] .mobile-video-slot{display:none!important;}
  body[data-content-route="anidle"] .mobile-feedback-slot{
    position:absolute!important;
    left:14px!important;
    right:14px!important;
    bottom:14px!important;
    z-index:12!important;
    pointer-events:none!important;
    display:block!important;
  }
  body[data-content-route="anidle"] .mobile-feedback-slot .message:not(:empty){
    display:block!important;
    padding:9px 12px!important;
    border-radius:16px!important;
    background:rgba(5,12,14,.88)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.35)!important;
  }
  body[data-content-route="anidle"] .mobile-feedback-slot .hints,
  body[data-content-route="anidle"] .mobile-feedback-slot .guesses{display:none!important;}
  body[data-content-route="anidle"] .mobile-guess-slot{
    width:100%!important;
    height:var(--m-input)!important;
    min-height:var(--m-input)!important;
    max-height:var(--m-input)!important;
    margin:0!important;
    display:block!important;
    overflow:visible!important;
  }
  body[data-content-route="anidle"] .mobile-guess-slot .guessbar{
    position:static!important;
    height:var(--m-input)!important;
    min-height:var(--m-input)!important;
    max-height:var(--m-input)!important;
    width:100%!important;
    grid-template-columns:minmax(0,1fr) minmax(76px,22vw)!important;
    margin:0!important;
    padding:0!important;
  }
  body[data-content-route="anidle"] .heatmap.anidle-board{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    padding:0!important;
  }
  body[data-content-route="anidle"] .anidle-stage{
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:8px!important;
    padding:0!important;
  }
  body[data-content-route="anidle"] .compact-anidle-hero{
    position:relative!important;
    top:0!important;
    z-index:10!important;
    padding:9px 10px!important;
    border-radius:18px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
  }
  body[data-content-route="anidle"] .compact-anidle-hero .eyebrow{font-size:10px!important;margin:0 0 2px!important;}
  body[data-content-route="anidle"] .compact-anidle-hero h2{font-size:24px!important;line-height:1!important;margin:0!important;}
  body[data-content-route="anidle"] .compact-anidle-hero p:not(.eyebrow){font-size:11px!important;line-height:1.25!important;margin:0!important;}
  body[data-content-route="anidle"] .anidle-hero-tools{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px!important;justify-items:start!important;min-width:0!important;}
  body[data-content-route="anidle"] .compact-anidle-hero .anidle-trait-key{gap:4px!important;}
  body[data-content-route="anidle"] .compact-anidle-hero .anidle-trait-key span{font-size:9px!important;padding:4px 6px!important;}
  body[data-content-route="anidle"] .anidle-mode-control{justify-items:start!important;}
  body[data-content-route="anidle"] .anidle-mode-current{min-height:32px!important;padding:6px 10px!important;font-size:12px!important;}
  body[data-content-route="anidle"] .anidle-countdown{font-size:10px!important;}
  body[data-content-route="anidle"] .anidle-content{
    min-height:0!important;
    height:100%!important;
    display:grid!important;
    overflow:hidden!important;
  }
  body[data-content-route="anidle"] .anidle-gameplay .anidle-content,
  body[data-content-route="anidle"] .anidle-revealed-board .anidle-content{
    grid-template-rows:minmax(0,1fr) auto!important;
  }
  body[data-content-route="anidle"] .anidle-grid-wrap{
    height:100%!important;
    max-height:none!important;
    min-height:0!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
    border-radius:16px!important;
  }
  body[data-content-route="anidle"] .anidle-grid{min-width:900px!important;margin:0!important;}
  body[data-content-route="anidle"] .anidle-labels{
    position:sticky!important;
    top:0!important;
    z-index:9!important;
    padding-bottom:6px!important;
    background:linear-gradient(180deg,rgba(22,17,34,.98),rgba(22,17,34,.9))!important;
    box-shadow:0 10px 22px rgba(0,0,0,.24)!important;
  }
  body[data-content-route="anidle"] .anidle-character img{
    width:38px!important;
    height:38px!important;
    aspect-ratio:1/1!important;
    object-fit:cover!important;
  }
  body[data-content-route="anidle"] .anidle-complete .anidle-stage{
    height:100%!important;
    min-height:0!important;
  }
  body[data-content-route="anidle"] .anidle-complete .anidle-content{
    overflow:auto!important;
    align-items:start!important;
  }
  body[data-content-route="anidle"] .anidle-result-card{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 12px!important;
  }
}
@media (max-width: 820px){
  body[data-content-route="anidle"] .mobile-quiz-surface{position:relative!important;}
}

/* Patch: Character Import checklist parity on mobile. */
@media (max-width: 820px) {
  .character-row,
  .character-stage-row {
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
  }
  .character-entry-thumb,
  .character-stage-row .character-entry-thumb {
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:12px!important;
    object-fit:cover!important;
  }
  .character-entry-copy {
    display:grid!important;
    gap:2px!important;
    min-width:0!important;
  }
  .character-entry-copy strong,
  .character-entry-copy small {
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .character-stage-entry.character-queue-item {
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
  }
  .character-stage-entry .compact-button {
    grid-column:1 / -1!important;
    width:100%!important;
  }
}

/* Patch: mobile menu-local blur only. Quick Tools no longer applies a
   full-screen background blur; menu panels remain glassy where they cover UI. */
@media (max-width: 820px){
  .mobile-tools-backdrop,
  .mobile-tools-backdrop.open{
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .site-nav-backdrop,
  .site-nav-backdrop.open,
  .library-backdrop,
  .library-backdrop.open{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .site-nav-menu,
  .site-nav-menu.open,
  .mobile-tools-drawer,
  .mobile-tools-drawer.open,
  .library-menu,
  .library-menu.open{
    backdrop-filter:blur(28px) saturate(1.28)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.28)!important;
  }
  body.mobile-tools-open #mobileShell,
  body.mobile-tools-open .app-shell{
    filter:none!important;
  }
}

/* Data Settings session lock */
.data-tool-button{grid-template-columns:30px minmax(0,1fr) auto!important;}
.data-lock-icon{width:26px!important;height:26px!important;font-size:14px!important;justify-self:end!important;}
.data-settings-title-row{display:flex;align-items:center;gap:10px;}
.data-settings-lock-icon{width:30px!important;height:30px!important;font-size:16px!important;}
.data-lock-panel{margin:14px!important;width:auto!important;max-width:none!important;align-self:stretch!important;}
.data-lock-panel-copy{grid-template-columns:1fr!important;text-align:left!important;gap:10px!important;}
.data-lock-panel-icon{width:52px!important;height:52px!important;border-radius:18px!important;font-size:25px!important;}
.data-unlock-row{grid-template-columns:1fr!important;}
.data-unlock-row button{width:100%!important;}

/* Patch: Character Import duplicate warnings. */
.character-stage-entry.already-in-library{
  border-color:rgba(255,95,95,.62)!important;
  background:linear-gradient(135deg,rgba(255,70,70,.13),rgba(255,255,255,.055))!important;
  box-shadow:0 0 0 1px rgba(255,95,95,.16),0 12px 28px rgba(70,0,0,.22)!important;
}
.character-stage-entry .duplicate-icon{
  background:rgba(255,70,70,.18)!important;
  border-color:rgba(255,120,120,.48)!important;
  color:#ffb0b0!important;
}
.character-duplicate-warning{
  color:#ffb0b0!important;
  font-weight:800!important;
}

/* Patch: stabilize Temporary character checklist interactions on mobile. */
.character-import-layout .character-queue-card{
  overflow:hidden!important;
  contain:layout paint;
}
.character-import-layout .character-queue-card .manager-status{
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
}
.character-import-queue{
  scrollbar-gutter:stable both-edges;
  overscroll-behavior:contain;
}
.character-import-queue.is-rendering{
  pointer-events:none;
}
.character-stage-entry{
  min-height:70px;
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* Data browser: Character list mobile */
.character-library-menu .library-thumb,
.character-library-menu .character-library-thumb{
  width:48px!important;
  height:48px!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
}
.character-library-menu .library-detail .library-thumb,
.character-library-menu .library-detail .character-library-thumb{
  width:66px!important;
  height:66px!important;
  aspect-ratio:1/1!important;
}
.character-library-detail-head{
  grid-template-columns:66px minmax(0,1fr)!important;
}
.character-library-traits{
  grid-template-columns:1fr!important;
}

/* Character data browser lock */
.library-head-actions,
.character-library-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.library-lock-button{
  width:38px;
  height:38px;
  padding:0;
  border-radius:12px;
  font-size:17px;
  line-height:1;
}

/* Mobile profile picture and favourites menus */
@media (max-width: 820px){
  .profile-picture-button{width:min(44vw,150px)!important;}
  .profile-picture-menu{width:100%!important;padding:12px!important;}
  .profile-favorites-menu{inset:10px!important;padding:12px!important;}
  .profile-favorites-list .favorite-row{grid-template-columns:48px minmax(0,1fr)!important;grid-template-areas:"icon title" "icon remove";}
  .profile-favorites-list .favorite-row .favorite-thumb{grid-area:icon;width:48px;height:48px;}
  .profile-favorites-list .favorite-row span{grid-area:title;white-space:normal!important;}
  .profile-favorites-list .favorite-row button{grid-area:remove;width:100%;}
  .profile-favorites-detail{max-height:44%;}
  .favorite-detail-head{grid-template-columns:54px minmax(0,1fr)!important;}
  .favorite-detail-head .favorite-thumb{width:54px;height:54px;}
}

/* Patch: profile header identity and detached favourites on mobile. */
@media (max-width:820px){
  .profile-menu .settings-head .eyebrow,
  .profile-menu .settings-head .settings-config,
  .profile-picture-copy,
  .profile-picture-caption{display:none!important;}
  .profile-editor-head{grid-template-columns:auto minmax(0,1fr)!important;gap:12px!important;align-items:center!important;}
  .profile-picture-button{width:auto!important;min-width:0!important;padding:6px!important;border-radius:50%!important;}
  .profile-editor-identity h3{margin:0;color:#fff;font-size:clamp(24px,8vw,34px);line-height:1.06;font-weight:950;letter-spacing:-.035em;overflow-wrap:anywhere;}
  .profile-favorites-menu{position:fixed!important;z-index:122!important;inset:10px!important;display:flex!important;flex-direction:column!important;min-height:0!important;padding:12px!important;}
  .login-save-prompt{width:100%!important;min-width:0!important;margin-top:10px!important;font-size:13px!important;}
}

/* --- Anidle mobile visual/background bugfix --- */
@media (max-width: 820px){
  body[data-content-route="anidle"] .mobile-quiz-surface,
  body[data-content-route="anidle"] .mobile-main-slot,
  body[data-content-route="anidle"] .heatmap.anidle-board{
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  body[data-content-route="anidle"] .mobile-top-slot{
    background:transparent!important;
  }
}

/* --- Admin debug mode + Anidle guess counter circle fix --- */
.anidle-guess-no{
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  flex:0 0 24px!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  display:inline-grid!important;
  place-items:center!important;
  line-height:1!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.debug-answer-floating{
  top:72px!important;
  right:12px!important;
  width:min(260px,calc(100vw - 24px))!important;
  padding:10px!important;
  border-radius:18px!important;
  z-index:96!important;
}
.debug-answer-floating strong{font-size:17px!important;}
.debug-answer-floating small{font-size:12px!important;}