/*
 * Deck Builder — mobile / tablette
 * Un seul flux vertical scrollable (pas de grille 1fr ni cadres imbriqués).
 */

@media (max-width: 960px) {
  body.deckbuilder-mode {
    min-height: 100dvh;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.deckbuilder-mode .brand-lockup {
    display: none;
  }

  body.deckbuilder-mode .app-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: calc(6px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px
      max(10px, env(safe-area-inset-left));
    max-width: 100vw;
  }

  body.deckbuilder-mode .header-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.deckbuilder-mode .nav-actions {
    flex: 0 0 auto;
  }

  body.deckbuilder-mode .account-button {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    max-width: 100%;
  }

  body.deckbuilder-mode #deckBuilderButton,
  body.deckbuilder-mode #headerCollectionButton,
  body.deckbuilder-mode #newMatchButton {
    display: none;
  }

  body.deckbuilder-mode .app-shell {
    display: block;
    width: 100%;
    max-width: 100vw;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 8px max(10px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  /* —— Conteneur Deck Builder : colonne, hauteur naturelle —— */
  body.deckbuilder-mode .deckbuilder-view {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto !important;
    overflow: visible !important;
  }

  body.deckbuilder-mode .deckbuilder-view > .is-hidden {
    display: none !important;
  }

  /* —— Barre d’outils —— */
  body.deckbuilder-mode .deckbuilder-head,
  body.deckbuilder-mode .deckbuilder-head--compact {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.deckbuilder-mode .deckbuilder-head__brand {
    display: none;
  }

  body.deckbuilder-mode .deckbuilder-head__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  body.deckbuilder-mode .deckbuilder-head-chip,
  body.deckbuilder-mode .deckbuilder-head__actions > button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    justify-content: center;
    padding-inline: 8px;
    font-size: 0.74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.deckbuilder-mode .deckbuilder-head-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.deckbuilder-mode #saveDecklistButton {
    grid-column: 1 / -1;
    min-height: 44px;
    font-weight: 800;
  }

  /* —— Panneaux : pas de flex-grow, pas de min-height piège —— */
  body.deckbuilder-mode .deckbuilder-start,
  body.deckbuilder-mode .deckbuilder-eval-compare,
  body.deckbuilder-mode .deckbuilder-collection-full,
  body.deckbuilder-mode #deckBuilderEditor.deckbuilder-layout {
    flex: 0 0 auto;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  /* —— Bibliothèque —— */
  body.deckbuilder-mode .decklist-lib-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
  }

  body.deckbuilder-mode .decklist-lib-title {
    display: none;
  }

  body.deckbuilder-mode .decklist-lib-bar {
    width: 100%;
  }

  body.deckbuilder-mode .decklist-lib-bar--title {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  body.deckbuilder-mode .decklist-lib-bar__right {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
  }

  body.deckbuilder-mode .decklist-lib-bar__right .decklist-lib-btn-compact {
    min-height: 44px;
  }

  body.deckbuilder-mode .decklist-lib-bar--filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: end;
  }

  body.deckbuilder-mode .decklist-lib-field--search {
    grid-column: 1 / -1;
  }

  body.deckbuilder-mode .decklist-lib-field input,
  body.deckbuilder-mode .decklist-lib-field select {
    min-height: 44px;
    font-size: 16px;
    width: 100%;
    max-width: 100%;
  }

  body.deckbuilder-mode .decklist-lib-field__label {
    font-size: 0.68rem;
  }

  body.deckbuilder-mode .decklist-library-pager--toolbar {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    justify-content: center;
  }

  body.deckbuilder-mode .saved-decklist-library {
    display: grid;
    gap: 8px;
    width: 100%;
  }

  /* —— Comparaison D20 —— */
  body.deckbuilder-mode .deckbuilder-eval-compare {
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
  }

  body.deckbuilder-mode .deck-eval-compare-lead {
    margin: 0 0 8px;
    font-size: 0.78rem;
    line-height: 1.4;
  }

  body.deckbuilder-mode #deckEvalCompareTableMount {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* —— Éditeur : pile verticale unique —— */
  body.deckbuilder-mode #deckBuilderEditor.deckbuilder-layout {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }

  body.deckbuilder-mode .deckbuilder-layout > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    max-height: none !important;
    overflow: visible !important;
  }

  body.deckbuilder-mode .card-search-panel,
  body.deckbuilder-mode .decklist-panel,
  body.deckbuilder-mode #cardPreview {
    padding: 10px;
    border-radius: 12px;
  }

  body.deckbuilder-mode .card-search-panel {
    display: grid;
    gap: 8px;
  }

  body.deckbuilder-mode .card-search-panel label input,
  body.deckbuilder-mode .card-search-panel label select {
    min-height: 44px;
    font-size: 16px;
  }

  body.deckbuilder-mode .deck-public-label-detail {
    display: none;
  }

  body.deckbuilder-mode .deck-builder-public-hint {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
  }

  body.deckbuilder-mode .deck-builder-public-actions button {
    width: 100%;
    min-height: 44px;
  }

  body.deckbuilder-mode .card-search-results {
    max-height: min(200px, 35vh);
    overflow-y: auto;
    overflow-x: hidden;
  }

  body.deckbuilder-mode .deckbuilder-status {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  body.deckbuilder-mode .deck-search-filters {
    grid-template-columns: 1fr;
  }

  body.deckbuilder-mode #cardPreview[data-preview-mode="dashboard"] {
    display: none !important;
  }

  body.deckbuilder-mode .decklist-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
  }

  body.deckbuilder-mode .decklist-summary--compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    width: 100%;
  }

  body.deckbuilder-mode .decklist-collection-filter {
    grid-column: 1 / -1;
    font-size: 0.74rem;
    line-height: 1.35;
  }

  body.deckbuilder-mode .decklist-actions-menu {
    position: relative;
    margin-left: 0;
    justify-self: end;
  }

  body.deckbuilder-mode .decklist-actions-menu__panel {
    position: fixed;
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    z-index: 600;
  }

  body.deckbuilder-mode .deck-editor-tabbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  body.deckbuilder-mode .deck-editor-tab {
    min-height: 42px;
    padding-inline: 4px;
    font-size: 0.68rem;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }

  body.deckbuilder-mode .deck-editor-tab-panel:not(.is-hidden) {
    overflow: visible;
    max-height: none;
  }

  body.deckbuilder-mode .deck-zone-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  body.deckbuilder-mode .deck-zone-own-batch {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  body.deckbuilder-mode .deck-zone-section.is-empty .deck-zone-toolbar {
    display: none;
  }

  body.deckbuilder-mode .deck-card-list {
    max-height: none;
  }

  body.deckbuilder-mode .card-preview-compact-head--hero {
    grid-template-columns: minmax(72px, 96px) minmax(0, 1fr);
    gap: 8px;
  }

  body.deckbuilder-mode .card-preview-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  body.deckbuilder-mode .preview-zone-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  body.deckbuilder-mode .deck-dashboard-recent {
    display: none;
  }

  /* Collection intégrée */
  body.deckbuilder-mode .deckbuilder-collection-top {
    flex-wrap: wrap;
    gap: 8px;
  }

  body.deckbuilder-mode .collection-internal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  body.deckbuilder-mode .collection-internal-nav > button {
    flex: 1 1 auto;
    min-height: 40px;
    font-size: 0.78rem;
  }
}

@media (min-width: 961px) {
  .deck-public-label-detail {
    font-weight: 600;
  }
}