/* GameDraft — styles/polish.css
   Professionalisierungs-Layer (zuletzt geladen). Hier liegen gezielte
   Verfeinerungen des bestehenden Looks: Header-Layout, Such-Icon, Konsistenz.
   Bewusst als eigener Layer, damit der freigegebene Basis-Look unangetastet bleibt. */

/* Such-Icon-Ausrichtung — ersetzt den früheren JS-Hack (forceSearchIconVisualAlignment). */
.publicListSearchIcon {
  position: relative !important;
  left: 5px !important;
  transform: none !important;
}

/* Header-Leerraum-Fix:
   Ab ≤1180px schaltet der Header auf flex-direction:column. Dadurch wirkt die
   für das Row-Layout gedachte Breitenangabe .brandBlock{flex:0 0 430px} plötzlich
   als feste HÖHE und erzeugt ~240px Phantom-Leerraum unter dem Brand-Text.
   Hier wird der Brand-Block auf seine natürliche Höhe zurückgesetzt. */
@media (max-width: 1180px) {
  header { justify-content: flex-start !important; }
  .brandBlock { flex: 0 0 auto !important; }
}

/* Zustands-Umschaltung des Duell-Bereichs: einige Container haben in legacy.css
   ein `display: … !important`, das die generische .hidden-Regel aushebelt.
   Höhere Spezifität stellt sicher, dass versteckte Bereiche wirklich verschwinden. */
.duel.hidden,
.gameActions.hidden,
.startPanel.hidden,
.mainMenu.hidden,
.below.hidden,
.duelMenuBtn.hidden,
.finishedPanel.hidden,
.stats.hidden,
.duelProgress.hidden { display: none !important; }

/* === Audit-Konsistenz ==================================================== */

/* A1: „Kleine" Dialoge wieder kompakt (eine späte legacy .modal{width:1220px}
   schlug die schmale .onboardingModal-Breite). Höhere Spezifität gewinnt. */
.modalBackdrop .modal.onboardingModal {
  width: min(560px, 100%) !important;
  height: auto !important;
  max-height: min(90vh, 960px) !important;
}

/* Casing vereinheitlichen: Action- & Ranking-Panel-Buttons auf Title Case
   (statt GROSSBUCHSTABEN) — passend zu den Header-Buttons. */
#listsGameBtn, #undoGameBtn, #skipGameBtn, #resetBtn,
#rankingViewPanelBtn, #toggleRankingBtn,
.gameActionButton, .rankingPanelActions .compactPanelButton,
#listsGameBtn .sharedActionLabel,
#undoGameBtn .sharedActionLabel,
#skipGameBtn .sharedActionLabel,
#resetBtn .sharedActionLabel,
#rankingViewPanelBtn .sharedActionLabel,
#toggleRankingBtn .sharedActionLabel,
#rankingViewPanelBtn .rankingPanelButtonText,
#toggleRankingBtn .rankingPanelButtonText {
  text-transform: none !important;
  letter-spacing: .01em !important;
}

/* Ranking-Panel-Labels: gegen eine höher-spezifische Legacy-Uppercase-Regel
   am Span. Maximale Spezifität erzwingt Title Case. */
body .below .panel .rankingPanelActions #rankingViewPanelBtn .rankingPanelButtonText,
body .below .panel .rankingPanelActions #toggleRankingBtn .rankingPanelButtonText,
body .below .panel .rankingPanelActions #rankingViewPanelBtn .sharedActionLabel,
body .below .panel .rankingPanelActions #toggleRankingBtn .sharedActionLabel {
  text-transform: none !important;
}

/* Reset destruktiv kennzeichnen (war optisch wie eine normale Aktion).
   Auch das SVG-Icon: gegen die nukleare Legacy-currentColor=weiß-Regel rot erzwingen. */
#resetBtn .sharedActionIcon { color: var(--danger); }
body #resetBtn.gameActionButton .sharedActionIcon,
body #resetBtn.gameActionButton .sharedActionIcon svg,
body #resetBtn.gameActionButton .sharedActionIcon svg path {
  color: var(--danger) !important;
  stroke: var(--danger) !important;
}
#resetBtn:hover { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)) !important; }

/* Mobile: Duell-Karten kompakter (stapeln sich vertikal → kürzer = beide besser sichtbar). */
@media (max-width: 640px) {
  .duelZone .duel { gap: 12px !important; min-height: 0 !important; }
  .duelZone .card { min-height: 248px !important; padding: 16px !important; }
  .duelZone .card .poster { flex: 0 0 96px !important; }
  .duelZone .card .gameTitle { font-size: clamp(22px, 7vw, 32px) !important; }
  .duelZone .card .choiceBody { min-height: 0 !important; gap: 14px !important; }
}

/* === Header: Settings-Cluster (Sound · Sprache · Profil) ================= */
/* Der „Menü"-Button ist ins Spiel-UI gewandert (kleiner „Zum Menü"-Button
   beim Duell + Button im Abschluss-Panel). Der Header trägt nur noch den
   Settings-Cluster — Buttons größer & einheitlich, Profil zeigt den Namen.
   Hohe (id-)Spezifität schlägt die nukleare Legacy-/header.css-Logik. */
body .headerRight.toolbar .headerTopActions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  grid-template-columns: none !important;
}
body .headerRight.toolbar .headerTopActions > #soundToggleBtn.iconButton,
body .headerRight.toolbar .headerTopActions > #languageCycleBtn.iconButton,
body .headerRight.toolbar .headerTopActions > #profileMenuBtn.iconButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 13px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  background: color-mix(in srgb, #5b7cff 7%, #11141c) !important;
  border: 1px solid var(--border) !important;
  transition: border-color .15s ease, background .15s ease, transform .1s ease !important;
}
body .headerRight.toolbar .headerTopActions > #soundToggleBtn.iconButton:hover,
body .headerRight.toolbar .headerTopActions > #languageCycleBtn.iconButton:hover,
body .headerRight.toolbar .headerTopActions > #profileMenuBtn.iconButton:hover {
  border-color: color-mix(in srgb, #6f86ff 50%, var(--border)) !important;
  background: color-mix(in srgb, #5b7cff 14%, #11141c) !important;
  transform: translateY(-1px) !important;
}
/* Icons inline statt absolut, etwas größer (legacy erzwingt 16px/absolute) */
body .headerRight.toolbar .headerTopActions .navIcon,
body .headerRight.toolbar .headerTopActions .languageIcon {
  position: static !important;
  left: auto !important;
  transform: none !important;
  width: 18px !important; height: 18px !important; flex-basis: 18px !important;
  background: none !important; box-shadow: none !important;
}
body .headerRight.toolbar .headerTopActions .navIcon svg,
body .headerRight.toolbar .headerTopActions .languageIcon svg {
  width: 18px !important; height: 18px !important;
}
/* Sprach-Code lesbar */
body .headerRight.toolbar .headerTopActions #languageCycleBtn .langCode {
  font-size: 13px !important; font-weight: 800 !important;
  color: var(--text) !important; letter-spacing: .03em !important;
}
/* Profilname wieder sichtbar (war im kompakten Icon-only-Cluster versteckt) */
body .headerRight.toolbar .headerTopActions #profileMenuBtn .iconBtnLabel {
  display: inline-block !important;
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}
/* Sound bleibt Icon-only (reiner Toggle) */
body .headerRight.toolbar .headerTopActions #soundToggleBtn .iconBtnLabel {
  display: none !important;
}

/* === Spiel-UI: kleiner „Zum Menü"-Zurück-Button ========================= */
/* Sitzt oben links im Duell-Bereich (während des Duells und im Abschluss);
   im Hauptmenü selbst ausgeblendet (.duelMenuBtn.hidden, s. o.). */
.duelMenuBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin: 0 0 14px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(17,19,25,.7);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .1s ease;
}
.duelMenuBtn:hover {
  color: var(--text);
  border-color: color-mix(in srgb, #5b7cff 45%, var(--border));
  background: rgba(20,23,32,.92);
  transform: translateX(-2px);
}
.duelMenuBtn:focus-visible { outline: 3px solid color-mix(in srgb, #5b7cff 55%, transparent); outline-offset: 2px; }
.duelMenuBtn .duelMenuBtnIcon { font-size: 17px; line-height: 1; margin-top: -1px; }