/* GameDraft — styles/header.css
   Header & Toolbar/Menü (aus legacy.css extrahiert). Reine Header-Regeln, zuletzt vor polish.css geladen. */

@media (max-width: 960px) {
      header { display:block; }
      .brandBlock { gap:12px; }
      .brandIcon { width:58px; height:58px; flex-basis:58px; border-radius:17px; }
      .brandName { font-size: clamp(42px, 12vw, 66px); }
      .toolbar { margin-top:14px; display:flex !important; flex-wrap:nowrap !important; justify-content:flex-start !important; overflow-x:auto; max-width:none; padding-bottom:4px; }
}

    @media (max-width: 960px) {
      .toolbar {
        gap:10px !important;
      }
      .toolbar > button,
      .toolbar > label.fileBtn,
      .toolbar > .languageShell {
        flex:0 0 146px !important;
        width:146px !important;
        min-width:146px !important;
        max-width:146px !important;
      }
}
    @media (max-width: 960px) {
      .brandCopy {
        margin-left:0;
      }
}
    @media (max-width: 900px) {
      .brandCopy {
        margin-left: 0 !important;
      }
}

    @media (max-width: 1180px) {
      header {
        align-items: stretch !important;
      }
      .toolbar {
        justify-content: start !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        grid-template-columns: repeat(5, minmax(118px, 1fr)) !important;
        overflow-x: auto !important;
        padding-bottom: 4px;
      }
}

    @media (max-width: 760px) {
      .toolbar {
        grid-template-columns: repeat(5, 132px) !important;
      }
}

    @media (max-width: 1180px) {
      .toolbar {
        margin-top: 2px !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        grid-template-columns: repeat(5, minmax(118px, 1fr)) !important;
        justify-content: start !important;
        overflow-x: auto !important;
        padding-bottom: 4px;
      }
      .brandCopy {
        max-width: 520px !important;
      }
}

    @media (max-width: 760px) {
      .toolbar {
        grid-template-columns: repeat(5, 132px) !important;
      }
      .brandCopy {
        max-width: 100% !important;
      }
}

    @media (max-width: 1180px) {
      .toolbar {
        margin-top: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        grid-template-columns: repeat(5, minmax(122px, 1fr)) !important;
        justify-content: start !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
      }
}

    @media (max-width: 760px) {
      .toolbar {
        grid-template-columns: repeat(5, 136px) !important;
      }
}
    @media (max-width: 1180px){
      header{ flex-direction:column !important; }
      .brandBlock{ max-width:none !important; flex-basis:auto !important; }
      .brandCopy{ max-width:480px !important; }
      .headerRight{ width:100% !important; margin-top:8px !important; }
}
    @media (max-width: 820px){
      .headerTopActions,
      .toolbarButtons{ grid-template-columns:1fr !important; }
}
    @media (max-width:1180px){
      header{ flex-direction:column !important; align-items:stretch !important; }
      .brandBlock{ max-width:none !important; flex-basis:auto !important; }
      .brandCopy{ max-width:480px !important; }
      .headerRight.toolbar{ width:100% !important; margin-top:8px !important; }
}
    @media (max-width:820px){
      .headerTopActions,
      .toolbarButtons{ grid-template-columns:1fr !important; }
}

    @media (max-width:820px){
      .headerRight.toolbar{ grid-template-rows:auto auto auto !important; }
      .headerRight.toolbar .headerTopActions,
      .headerRight.toolbar .toolbarButtons{ grid-template-columns:1fr !important; }
}

    @media (max-width: 1180px) {
      header {
        flex-direction: column !important;
        align-items: stretch !important;
      }

      .brandBlock {
        max-width: 720px !important;
      }

      .headerRight.toolbar {
        width: 100% !important;
        max-width: none !important;
        flex-basis: auto !important;
        margin-top: 8px !important;
      }
}

    @media (max-width: 820px) {

      .brandBlock {
        align-items: flex-start !important;
      }

      .brandName {
        font-size: clamp(44px, 12vw, 66px) !important;
      }

      .headerRight.toolbar {
        grid-template-rows: auto auto auto !important;
      }

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

      #profileMenuBtn,
      #rankingViewBtn {
        grid-column: 1 / -1 !important;
      }
}

    @media (max-width: 720px) {

      .brandBlock {
        gap: 10px !important;
      }

      .brandCopy {
        max-width: 100% !important;
      }
}

    @media (max-width: 540px) {
      .brandBlock {
        display: grid !important;
        grid-template-columns: clamp(48px, 14vw, 58px) minmax(0, 1fr) !important;
      }

      .brandCopy {
        grid-column: 1 / -1 !important;
      }

      .headerRight.toolbar .headerTopActions,
      .headerRight.toolbar .toolbarButtons {
        grid-template-columns: 1fr !important;
      }

      #profileMenuBtn,
      #rankingViewBtn {
        grid-column: auto !important;
      }
}

    @media (max-width: 380px) {
      .brandName {
        font-size: clamp(38px, 14vw, 48px) !important;
      }

      .headerRight.toolbar .headerTopActions > button,
      .headerRight.toolbar .headerTopActions > label,
      .headerRight.toolbar .toolbarButtons > button {
        font-size: 12px !important;
      }
}



    /* v0.23.0.4 desktop header correction
       Restore the v0.21-like desktop proportions while keeping the new responsive system for tablet/mobile. */
    @media (min-width: 1181px) {
      header {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 40px !important;
        margin-bottom: 20px !important;
      }

      .brandBlock {
        flex: 0 0 430px !important;
        width: 430px !important;
        max-width: 430px !important;
        min-width: 430px !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 18px !important;
      }

      .brandBlock > div:last-child {
        min-width: 0 !important;
        flex: 1 1 auto !important;
      }

      .brandIcon {
        width: 74px !important;
        height: 74px !important;
        flex: 0 0 74px !important;
        border-radius: 22px !important;
      }

      .brandName {
        font-size: 76px !important;
        line-height: .92 !important;
        letter-spacing: -.055em !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        max-width: none !important;
      }

      .brandCopy {
        max-width: 380px !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
        margin-top: 12px !important;
      }

      .headerRight.toolbar {
        flex: 1 1 820px !important;
        width: min(100%, 820px) !important;
        max-width: 820px !important;
        min-width: 720px !important;
        grid-template-rows: 46px 46px 46px !important;
        gap: 10px !important;
        margin-top: 36px !important;
        justify-self: end !important;
        align-self: flex-start !important;
      }

      .headerRight.toolbar .headerTopActions,
      .headerRight.toolbar .toolbarButtons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }

      .headerRight.toolbar .headerTopActions > button,
      .headerRight.toolbar .headerTopActions > label,
      .headerRight.toolbar .toolbarButtons > button,
      .headerRight.toolbar .publicListSearch {
        height: 46px !important;
        min-height: 46px !important;
      }
}

    @media (min-width: 1320px) {
      .brandBlock {
        flex-basis: 450px !important;
        width: 450px !important;
        max-width: 450px !important;
        min-width: 450px !important;
      }

      .brandName {
        font-size: 80px !important;
      }

      .brandCopy {
        max-width: 400px !important;
      }

      .headerRight.toolbar {
        max-width: 820px !important;
        margin-top: 36px !important;
      }
}
    /* === Audit #3: Header entrümpelt ====================================== */
    /* Settings (Sound/Sprache/Profil) als kompakter, sekundärer Cluster oben
       rechts; primäre Navigation (Bibliothek/Listen/Rangliste) bleibt prominent.
       Public-Listen-Suche wurde entfernt → Toolbar hat nur noch zwei Reihen. */
    .headerRight.toolbar {
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: auto auto !important;
      overflow: visible !important;
      gap: 10px !important;
    }
    .headerRight.toolbar .headerTopActions {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: flex-end !important;
      gap: 8px !important;
      grid-template-columns: none !important;
    }
    .headerRight.toolbar .headerTopActions > button,
    .headerRight.toolbar .headerTopActions > label,
    .headerRight.toolbar .headerTopActions > .languageShell {
      height: 36px !important;
      min-height: 36px !important;
      flex: 0 0 auto !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      padding: 0 12px !important;
      font-size: 12.5px !important;
      background: #12151d !important;
      color: var(--muted) !important;
      border-radius: 12px !important;
    }
    .headerRight.toolbar .headerTopActions > button:hover,
    .headerRight.toolbar .headerTopActions > .languageShell:hover {
      color: var(--text) !important;
      transform: none !important;
    }
    /* Settings-Icons dezenter (kleiner, ohne kräftige Gradient-Box) */
    .headerRight.toolbar .headerTopActions .navIcon,
    .headerRight.toolbar .headerTopActions .languageIcon {
      width: 18px !important; height: 18px !important; flex-basis: 18px !important;
      background: none !important; box-shadow: none !important;
    }
    .headerRight.toolbar .headerTopActions .navIcon svg,
    .headerRight.toolbar .headerTopActions .languageIcon svg {
      width: 16px !important; height: 16px !important;
    }
    /* Primär-Nav: einheitliche Control-Höhe */
    .headerRight.toolbar .toolbarButtons > button {
      height: 44px !important;
      min-height: 44px !important;
    }

    /* Audit #3: Settings-Buttons gegen nukleare Legacy-Spezifität kompakt halten.
       (legacy hat `body .headerRight.toolbar .headerTopActions > #id.iconButton{width:100%}`) */
    body .headerRight.toolbar .headerTopActions > #soundToggleBtn.iconButton,
    body .headerRight.toolbar .headerTopActions > #profileMenuBtn.iconButton,
    body .headerRight.toolbar .headerTopActions > .languageShell {
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 36px !important;
      min-height: 36px !important;
      flex: 0 0 auto !important;
      background: #12151d !important;
      color: var(--muted) !important;
      border-radius: 12px !important;
      padding: 0 12px !important;
      font-size: 12.5px !important;
    }
    body .headerRight.toolbar .headerTopActions > #soundToggleBtn.iconButton > span:last-child,
    body .headerRight.toolbar .headerTopActions > #profileMenuBtn.iconButton > span:last-child {
      font-size: 12.5px !important;
    }

    /* Audit #3: im kompakten Settings-Cluster Icon NICHT absolut (sonst Overlap
       mit dem zentrierten Label in schmalen Buttons) → inline mit Gap. */
    body .headerRight.toolbar .headerTopActions > #soundToggleBtn.iconButton,
    body .headerRight.toolbar .headerTopActions > #profileMenuBtn.iconButton,
    body .headerRight.toolbar .headerTopActions > .languageShell {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
    }
    body .headerRight.toolbar .headerTopActions .navIcon,
    body .headerRight.toolbar .headerTopActions .languageIcon {
      position: static !important;
      left: auto !important;
      transform: none !important;
    }

    /* Audit follow-up: Settings-Cluster icon-only (Sound/Profil nur Icon, Sprache Icon+Code). */
    .headerRight.toolbar .headerTopActions .iconBtnLabel { display: none !important; }
    .headerRight.toolbar .headerTopActions .langCode {
      font-weight: 800 !important; font-size: 12px !important;
      color: var(--muted) !important; letter-spacing: .03em !important;
    }
    body .headerRight.toolbar .headerTopActions > #soundToggleBtn.iconButton,
    body .headerRight.toolbar .headerTopActions > #profileMenuBtn.iconButton,
    body .headerRight.toolbar .headerTopActions > #languageCycleBtn.iconButton {
      height: 36px !important; min-height: 36px !important;
      background: #12151d !important; color: var(--muted) !important;
      border-radius: 12px !important; flex: 0 0 auto !important;
      display: inline-flex !important; align-items: center !important; justify-content: center !important;
    }
    body .headerRight.toolbar .headerTopActions > #soundToggleBtn.iconButton,
    body .headerRight.toolbar .headerTopActions > #profileMenuBtn.iconButton {
      width: 38px !important; min-width: 38px !important; padding: 0 !important; gap: 0 !important;
    }
    body .headerRight.toolbar .headerTopActions > #languageCycleBtn.iconButton {
      width: auto !important; min-width: 0 !important; padding: 0 11px !important; gap: 5px !important;
    }
    body .headerRight.toolbar .headerTopActions > #soundToggleBtn.iconButton:hover,
    body .headerRight.toolbar .headerTopActions > #profileMenuBtn.iconButton:hover,
    body .headerRight.toolbar .headerTopActions > #languageCycleBtn.iconButton:hover {
      color: var(--text) !important;
    }