/* GameDraft — styles/modals.css
   Modale Dialoge & Overlays (aus legacy.css extrahiert): Bibliothek, Listen, Teilen, Onboarding, Bestätigung, Ranglisten-Ansicht, Completion. */

@media (max-width: 960px) {
      .modalBackdrop { padding:10px; }
      .libraryGrid { grid-template-columns:repeat(auto-fill, minmax(126px, 1fr)); }
      .rankingModalToolbar { grid-template-columns:1fr; }
}

    @media (max-width: 1100px) {
      .profileCardActions {
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
      }
}
    @media (max-width: 960px) {
      .profileGrid {
        grid-template-columns:1fr;
      }
      .profileCardActions {
        grid-template-columns:1fr 1fr !important;
      }
      .listsTopActions {
        grid-template-columns:1fr;
      }
}

    @media (max-width: 980px) {

      .libraryControls {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .libraryControls > :first-child {
        grid-column: 1 / -1 !important;
      }

      .addGameBox {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .rankingModalToolbar {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
      }

      .rankingModalActions {
        justify-content: stretch !important;
      }

      .rankingModalActions button {
        flex: 1 1 130px !important;
      }
}

    @media (max-width: 820px) {

      .modalHead {
        flex-direction: column !important;
        align-items: stretch !important;
      }

      .modalHead > button,
      .modalHead button[id^="close"] {
        align-self: flex-end !important;
      }
}

    @media (max-width: 720px) {

      .libraryControls,
      .addGameBox {
        grid-template-columns: 1fr !important;
      }

      .libraryActions,
      .libraryFooter {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }

      .libraryActions button,
      .libraryFooter button,
      .libraryFooter label {
        width: 100% !important;
      }

      .profileCardActions {
        grid-template-columns: 1fr !important;
      }
}

    @media (max-width: 540px) {

      .modalBackdrop {
        padding: 8px !important;
      }

      .modal,
      .rankingModal {
        width: calc(100vw - 16px) !important;
        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 18px !important;
      }
}
    @media (max-width: 900px) {
      .rankingModalToolbar { grid-template-columns:1fr; }
      #rankingModalHint { grid-column:auto; margin-top:0; }
      .rankingModalActions { justify-content:flex-start; }
}
    @media (pointer:coarse) {
      .rankingModal .cardIconAction {
        opacity:1;
        pointer-events:auto;
        transform:none;
      }
}
    @media (pointer:coarse) {
      .rankingModal .cardIconAction { opacity:1; transform:none; }
}
    @media (max-width: 1180px) {
      .rankingModal .rankingSectionGrid.activeRankingGrid,
      .rankingModal .rankingSectionGrid.unplayedSectionGrid { grid-template-columns:repeat(8, minmax(0, 1fr)) !important; }
}
    @media (max-width: 900px) {
      .rankingModal .rankingSectionGrid.activeRankingGrid,
      .rankingModal .rankingSectionGrid.unplayedSectionGrid { grid-template-columns:repeat(5, minmax(0, 1fr)) !important; }
}
    @media (max-width: 620px) {
      .rankingModal .rankingSectionGrid.activeRankingGrid,
      .rankingModal .rankingSectionGrid.unplayedSectionGrid { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
      .rankingModal .rankingCard.compactRankCard { min-height:158px !important; }
}
    @media (max-width:720px) {
      .rankingModalFooter { padding:12px 16px 16px; }
      .rankingModalActions { width:100%; justify-content:stretch; }
      .rankingModalActions button { flex:1 1 auto; }
}
    @media (min-width: 1320px) {
      .rankingModal .rankingSectionGrid.activeRankingGrid { grid-template-columns:repeat(8, minmax(0, 1fr)) !important; }
}
    @media (max-width: 1180px) {
      .rankingModal .rankingSectionGrid.activeRankingGrid { grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)) !important; }
}
    @media (max-width: 900px) {
      .rankingModal .modalHead { padding:12px 16px 10px !important; }
      .rankingModalToolbar { padding:10px 16px !important; }
}
    @media (max-width: 1280px) {
      .rankingModal .rankingSectionGrid.unplayedSectionGrid { grid-template-columns:repeat(8, minmax(0, 1fr)) !important; }
}
    @media (max-width: 980px) {
      .rankingModal .rankingSectionGrid.unplayedSectionGrid { grid-template-columns:repeat(5, minmax(0, 1fr)) !important; }
}
    @media (max-width: 700px) {
      .rankingModal .rankingSectionGrid.unplayedSectionGrid { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
      .rankingModal .unplayedRankingSection .compactRankCard { min-height:158px !important; }
}
    @media (pointer:fine) {
      .rankingModal .unplayedSectionGrid .cardIconAction.restoreRankingButton::after {
        content: attr(data-tooltip);
      }
}
/* --- Game-Detail-Modal-Overrides (aus legacy.css) --- */
@media (max-width: 860px) {
      .gameDetailBody { grid-template-columns:1fr; }
      .gameDetailCoverPanel { grid-template-columns:150px 1fr; align-items:start; }
      .gameDetailStatusGrid, .gameDetailStatsGrid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
    @media (max-width: 560px) {
      .gameDetailCoverPanel { grid-template-columns:1fr; }
      .gameDetailStatusGrid { grid-template-columns:1fr; }
      .gameDetailStatsGrid { grid-template-columns:1fr 1fr; }
}
    @media (max-width: 720px) {
      .gameDetailScoreSelector { grid-template-columns:repeat(5, minmax(0, 1fr)); }
      .gameDetailStatusGrid { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
    @media (max-width: 860px) {
      .gameDetailBody { gap:18px; padding:18px !important; }
}
    @media (max-width: 980px) {
      .gameDetailModal { width:calc(100vw - 24px) !important; height:calc(100dvh - 24px) !important; }
      .gameDetailBody { grid-template-columns:1fr !important; }
      .gameDetailCoverPanel { grid-template-columns:160px 1fr !important; }
      .gameDetailContent { grid-template-columns:1fr !important; }
      .gameDetailTitleRow, .gameDetailNotesBlock, .gameDetailFooterActions { grid-column:auto !important; }
      .gameDetailStatusGrid { grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
    @media (max-width: 620px) {
      .gameDetailCoverPanel { grid-template-columns:1fr !important; }
      .gameDetailStatusGrid { grid-template-columns:1fr !important; }
      .gameDetailScoreSelector { grid-template-columns:repeat(5, minmax(0,1fr)) !important; }
}
    @media (max-width:980px) {
      .gameDetailModal { width:calc(100vw - 24px) !important; height:calc(100dvh - 24px) !important; }
      .gameDetailContent { grid-template-columns:1fr !important; }
}