/* GameDraft — styles/brand.css
   Marken-Kohäsions-Layer (ZULETZT geladen). Zieht die Logo-Identität
   (Cyan→Blau→Violett) konsistent durch: Primär-Buttons, Fokus-Ringe,
   Eyebrows/Akzente, Auswahl-Status und die Menü-/Spiel-Buttons.
   Bewusst eigener Layer, damit die Basis-Komponenten unangetastet bleiben. */

/* === Primär-Aktion: einheitlicher Marken-Verlauf in JEDEM Pop-up =========
   Ersetzt den früheren weißen .primary-Button. Hohe Spezifität + load-order
   schlagen base.css/legacy. */
.modalBackdrop .primary,
.below .primary,
.duelZone .primary,
button.primary {
  background: var(--brand-grad-btn) !important;
  color: #fff !important;
  border: 1px solid color-mix(in srgb, var(--brand-purple) 55%, transparent) !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 22px rgba(96,77,255,.30) !important;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease !important;
}
.modalBackdrop .primary:hover,
.below .primary:hover,
.duelZone .primary:hover,
button.primary:hover {
  filter: brightness(1.07) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px rgba(96,77,255,.42) !important;
  background: var(--brand-grad-btn) !important;
}
button.primary:disabled {
  filter: none !important;
  opacity: .45 !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Destruktive Bestätigung (openConfirmModal({danger:true})) klar rot statt
   Marken-Verlauf — Usability-Konvention, trotzdem im Stil konsistent. */
.modalBackdrop button.primary.dangerConfirm,
button.primary.dangerConfirm {
  background: linear-gradient(135deg, #ff6168, #cf2b2b) !important;
  border-color: color-mix(in srgb, #cf2b2b 60%, transparent) !important;
  box-shadow: 0 8px 22px rgba(207,43,43,.32) !important;
}
.modalBackdrop button.primary.dangerConfirm:hover,
button.primary.dangerConfirm:hover {
  box-shadow: 0 12px 28px rgba(207,43,43,.45) !important;
}

/* === Header-Menü… der Menü-Button im Spiel-UI auf exakt den Marken-Verlauf ===
   (duelMenuBtn bleibt dezent; nur die Akzentlinie/Hover tragen Marke.) */
body .duelMenuBtn:hover {
  border-color: color-mix(in srgb, var(--brand-accent) 55%, var(--border));
}

/* === Fokus: ein einheitlicher Marken-Ring überall ======================== */
button:focus-visible,
.menuTile:focus-visible,
.presetCard:focus-visible,
.libraryTile:focus-visible,
.profileChip:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--brand-ring) !important;
  outline-offset: 2px !important;
}
input:focus, select:focus, textarea:focus,
.communityImportRow input:focus-visible {
  border-color: var(--brand-accent) !important;
  box-shadow: 0 0 0 3px rgba(91,140,255,.16) !important;
}
.card:focus, .card:focus-visible {
  outline: 3px solid var(--brand-ring) !important;
  outline-offset: 3px !important;
}

/* === Eyebrows / Marken-Kleinschrift in Modals & Header an die Marke binden = */
.eyebrow,
.modalHead .eyebrow {
  color: color-mix(in srgb, var(--brand-accent) 78%, #aeb8ca) !important;
}

/* === Auswahl-Status (Bibliothek): von Grün auf Marken-Blau =============== */
.libraryTile.selected {
  border-color: var(--brand-accent) !important;
  box-shadow: 0 0 0 3px rgba(91,140,255,.18) !important;
}
.libraryTile.selected .checkBadge {
  background: var(--brand-grad-btn) !important;
  color: #fff !important;
  border-color: color-mix(in srgb, var(--brand-purple) 50%, transparent) !important;
}

/* === Aktive Liste / aktives Profil = Marken-Akzent ======================= */
.profileCard.active {
  border-color: var(--brand-accent-soft) !important;
}
.profileChip.active {
  border-color: var(--brand-accent) !important;
  background: color-mix(in srgb, var(--brand-accent) 16%, #12151d) !important;
}

/* === Modal-Rahmen: dezenter Marken-Schimmer am oberen Rand =============== */
.modalBackdrop .modal .modalHead {
  border-bottom-color: color-mix(in srgb, var(--brand-accent) 22%, var(--border)) !important;
}

/* === Schließen-(✕) & Zurück-(‹) Buttons: perfekt zentrierte SVG-Icons =====
   Ersetzt die Glyphen, deren Font-Metrik nie sauber mittig saß. */
.modalBackdrop button[id^="close"],
.menuBackBtn {
  display: grid !important;
  place-items: center !important;
  line-height: 0 !important;
  padding: 0 !important;
}
.btnGlyphIcon {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}
.modalBackdrop button[id^="close"] .btnGlyphIcon { width: 15px; height: 15px; }
.menuBackBtn .btnGlyphIcon { width: 22px; height: 22px; }
.duelMenuBtn .duelMenuBtnIcon {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.duelMenuBtn .duelMenuBtnIcon .btnGlyphIcon { width: 16px; height: 16px; }

/* === Header-Cluster: Sprach-Dropdown · Ton-Toggle · Profil =============== */
/* Sprach-Dropdown (Flagge + Name + Caret) */
body .headerRight.toolbar .headerTopActions .langDropdown {
  position: relative;
  flex: 0 0 auto !important;
  width: auto !important;
  align-self: center !important;
}
body .headerRight.toolbar .headerTopActions .langDropdownBtn {
  display: inline-flex !important; align-items: center !important; gap: 9px !important;
  height: 44px !important; min-height: 44px !important;
  /* gegen Legacy `.toolbar button{width:132px!important}` → auf Inhalt schrumpfen */
  width: auto !important; min-width: 0 !important; max-width: none !important;
  padding: 0 13px !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--brand-accent) 7%, #11141c) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 13.5px !important; font-weight: 700 !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background .15s ease, transform .1s ease !important;
}
body .headerRight.toolbar .headerTopActions .langDropdownBtn:hover {
  border-color: color-mix(in srgb, var(--brand-accent) 50%, var(--border)) !important;
  background: color-mix(in srgb, var(--brand-accent) 14%, #11141c) !important;
  transform: translateY(-1px) !important;
}
.langCurrentName { white-space: nowrap; }
.langCaret { display: inline-flex; }
.langCaret svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .15s ease; }
.langDropdownBtn[aria-expanded="true"] .langCaret svg { transform: rotate(180deg); }

/* Flaggen-Chip */
.flag {
  display: inline-block; width: 22px; height: 15px; flex: 0 0 auto;
  border-radius: 3px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.flag svg { width: 100%; height: 100%; display: block; }

/* Sprach-Menü: KEINE umschließende Kachel (transparent). Jede Option ist eine
   eigene Pille in exakt der Breite/Höhe des Auswahl-Buttons. */
.langMenu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  width: auto; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 0;
  background: none; border: none; box-shadow: none;
}
.langMenu[hidden] { display: none; }
.langOption {
  display: flex !important; align-items: center !important; gap: 9px !important;
  width: 100% !important; box-sizing: border-box !important; text-align: left;
  height: 44px !important;
  padding: 0 13px !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--brand-accent) 7%, #11141c) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important; font-size: 13.5px !important; font-weight: 700 !important;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
}
.langOption .langOptionName { white-space: nowrap; }
.langOption:hover {
  background: color-mix(in srgb, var(--brand-accent) 14%, #11141c) !important;
  border-color: color-mix(in srgb, var(--brand-accent) 50%, var(--border)) !important;
  transform: none !important;
}
.langOption.isActive {
  background: color-mix(in srgb, var(--brand-accent) 18%, #11141c) !important;
  border-color: color-mix(in srgb, var(--brand-accent) 55%, transparent) !important;
}

/* Ton-Toggle: Icon + Label + Switch */
/* Ton = kompakter quadratischer Icon-Button (nur Lautsprecher, Mute via ×) */
body .headerRight.toolbar .headerTopActions #soundToggleBtn.soundToggleBtn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 44px !important; min-width: 44px !important; max-width: 44px !important;
  padding: 0 !important; gap: 0 !important;
}
#soundToggleBtn.isMuted .navIcon svg { color: var(--muted) !important; }
/* Einheitlicher, zusammengehöriger Look der drei Kopf-Buttons (Ton/Sprache/Konto) */
body .headerRight.toolbar .headerTopActions #soundToggleBtn,
body .headerRight.toolbar .headerTopActions .langDropdownBtn,
body .headerRight.toolbar .headerTopActions #authBtn {
  height: 44px !important; min-height: 44px !important; box-sizing: border-box !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--brand-accent) 7%, #11141c) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important; font-size: 13.5px !important; font-weight: 700 !important;
  transition: border-color .15s ease, background .15s ease, transform .1s ease !important;
}
body .headerRight.toolbar .headerTopActions #soundToggleBtn:hover,
body .headerRight.toolbar .headerTopActions .langDropdownBtn:hover,
body .headerRight.toolbar .headerTopActions #authBtn:hover {
  border-color: color-mix(in srgb, var(--brand-accent) 50%, var(--border)) !important;
  background: color-mix(in srgb, var(--brand-accent) 14%, #11141c) !important;
  transform: translateY(-1px) !important;
}
body .headerRight.toolbar .headerTopActions { gap: 9px !important; align-items: center !important; }
.soundToggleBtn .soundLabel { font-size: 13.5px; font-weight: 700; }
.soundSwitch {
  position: relative; flex: 0 0 auto;
  width: 34px; height: 20px; border-radius: 999px;
  background: #2a2f3a; border: 1px solid var(--border);
  transition: background .15s ease, border-color .15s ease;
}
.soundSwitch .soundKnob {
  position: absolute; top: 1.5px; left: 1.5px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #cfd6e4;
  transition: transform .15s ease, background .15s ease;
}
.soundSwitch.isOn { background: var(--brand-grad-btn); border-color: transparent; }
.soundSwitch.isOn .soundKnob { transform: translateX(14px); background: #fff; }
/* Ton-Icon: Lautsprecher gefüllt, Wellen/Mute-X gestrichelt (überschreibt Legacy-Fill) */
body .headerRight.toolbar .headerTopActions #soundToggleBtn .navIcon svg { color: var(--brand-accent); }
body .headerRight.toolbar .headerTopActions #soundToggleBtn .navIcon svg .sndBody { fill: currentColor !important; stroke: none !important; }
body .headerRight.toolbar .headerTopActions #soundToggleBtn .navIcon svg .sndWave { fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }

/* Header kompakt: Settings-Cluster fix oben rechts an die Seite pinnen (aus
   dem Fluss genommen), damit Brand + restlicher Inhalt nach oben nachrücken
   und kein reservierter Leerraum bleibt. top/right:0 = obere rechte Ecke des
   Wrap-Content-Bereichs (padding-agnostisch). */
body header { align-items: flex-start !important; }
.brandText { min-width: 0; }
.brandText .brandName { margin-top: 0 !important; }

/* Blaue Eyebrow nicht zu nah an der weißen Überschrift (überall in Modals) */
.modalBackdrop .modalHead .eyebrow { margin-bottom: 5px !important; }

/* Inhalt näher an den Header rücken (weniger Leerraum oben) */
body header { margin-bottom: 12px !important; }
body .duelZone { margin-top: 32px !important; }
body .below { margin-top: 14px !important; }
body .wrap { position: relative; }
body .headerRight.toolbar {
  position: absolute !important;
  /* Offsets = Wrap-Innenabstand → gleicher Seitenrand wie das Logo (oben & rechts). */
  top: var(--gd-page-pad, 28px) !important;
  right: var(--gd-page-pad, 28px) !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  grid-template-rows: auto !important;
  z-index: 30 !important;
}
/* Auf schmalen Screens engerer Seitenrand (wie .wrap) + Brand unter den
   gepinnten Cluster rücken, damit nichts überlappt. */
@media (max-width: 720px) {
  body .headerRight.toolbar {
    top: clamp(10px, 3.2vw, 16px) !important;
    right: clamp(10px, 3.2vw, 16px) !important;
  }
  body .brandBlock { padding-top: 60px !important; }
}
/* Sehr schmal: Cluster kompakt (Icon-only), damit er in EINE Reihe passt und
   nicht umbricht (sonst überlappt er den Brand-Block). */
@media (max-width: 540px) {
  body .headerRight.toolbar .headerTopActions { flex-wrap: nowrap !important; }
  .langDropdownBtn .langCurrentName,
  .soundToggleBtn .soundLabel,
  body .headerRight.toolbar .headerTopActions #profileMenuBtn .iconBtnLabel { display: none !important; }
  body .headerRight.toolbar .headerTopActions .langDropdownBtn,
  body .headerRight.toolbar .headerTopActions #soundToggleBtn.soundToggleBtn,
  body .headerRight.toolbar .headerTopActions #profileMenuBtn.iconButton { padding: 0 11px !important; gap: 7px !important; }
}
/* Mobile/Tablet: Sprach-Button zeigt NUR die Flagge (Sprachname würde im engen
   Header abgeschnitten). Die Dropdown-Einträge behalten ihre Namen. */
@media (max-width: 768px) {
  .langDropdownBtn .langCurrentName { display: none !important; }
  body .headerRight.toolbar .headerTopActions .langDropdownBtn { padding: 0 10px !important; gap: 6px !important; }
}

/* === Spiel-Aktions-Buttons: Beschriftung größer & lesbarer (war 11px) ==== */
body #listsGameBtn .sharedActionLabel,
body #undoGameBtn .sharedActionLabel,
body #skipGameBtn .sharedActionLabel,
body #resetBtn .sharedActionLabel {
  font-size: 14px !important;
  font-weight: 750 !important;
  letter-spacing: .005em !important;
}

/* === Rangliste-Panel-Buttons (Rangliste · Alle): ruhiger, einheitlicher
   Look passend zum restlichen Design (statt abgesetztem Sonder-Stil). ====== */
body .below .rankingPanelActions #rankingViewPanelBtn,
body .below .rankingPanelActions #toggleRankingBtn {
  height: 40px !important; min-height: 40px !important;
  width: auto !important; min-width: 0 !important; max-width: none !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  background: color-mix(in srgb, var(--brand-accent) 6%, #12151d) !important;
  border: 1px solid var(--border) !important;
  transition: border-color .15s ease, background .15s ease, transform .1s ease !important;
}
body .below .rankingPanelActions #rankingViewPanelBtn:hover,
body .below .rankingPanelActions #toggleRankingBtn:hover {
  border-color: color-mix(in srgb, var(--brand-accent) 50%, var(--border)) !important;
  background: color-mix(in srgb, var(--brand-accent) 13%, #12151d) !important;
  transform: translateY(-1px) !important;
}
body .below .rankingPanelActions #rankingViewPanelBtn .rankingPanelButtonText,
body .below .rankingPanelActions #toggleRankingBtn .rankingPanelButtonText {
  font-size: 12.5px !important; font-weight: 500 !important; color: #dbe3f2 !important;
  letter-spacing: .01em !important;
}
body .below .rankingPanelActions #rankingViewPanelBtn .sharedActionIcon svg,
body .below .rankingPanelActions #toggleRankingBtn .sharedActionIcon svg {
  width: 16px !important; height: 16px !important; stroke: #fff !important;
}
body .below .rankingPanelActions #toggleRankingBtn .sharedActionIcon { font-size: 15px !important; color: #fff !important; }

/* === Bibliothek: Filter-/Auswahl-Leiste aufgeräumt & klarer ============== */
/* Auswahl-Zähler als klarer Status (sah aus wie ein Button) */
body #libraryCounter.pill {
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  padding: 0 2px !important;
  justify-self: end;
}
/* Bulk-Aktionen als kompakte, dezente Utility-Chips (statt 6 großer Buttons) */
body .libraryActions { gap: 8px !important; align-items: center !important; }
body .libraryActions button {
  height: 36px !important; min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important; font-weight: 700 !important;
  background: #12151d !important; border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
body .libraryActions button:hover {
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--border)) !important;
  background: #161a24 !important; transform: none !important;
}
/* „+ Eigenes Spiel" als eigene, hervorgehobene Aktion ganz rechts */
body .libraryActions #toggleAddGameBtn {
  margin-left: auto !important;
  color: #fff !important;
  background: color-mix(in srgb, var(--brand-accent) 20%, #12151d) !important;
  border-color: color-mix(in srgb, var(--brand-accent) 48%, transparent) !important;
}
body .libraryActions #toggleAddGameBtn:hover {
  background: color-mix(in srgb, var(--brand-accent) 30%, #12151d) !important;
}

/* --- Mehrfach-Filter-Dropdowns (Genre/Kategorie/Plattform) --------------- */
.filterDropdown { position: relative; min-width: 0; }
.filterBtn {
  width: 100%;
  height: 44px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #0b0d12;
  color: var(--text);
  font-size: 13.5px; font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.filterBtn:hover { border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--border)); }
.filterBtn.hasActive { border-color: color-mix(in srgb, var(--brand-accent) 55%, var(--border)); background: color-mix(in srgb, var(--brand-accent) 8%, #0b0d12); }
.filterBtnLabel { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filterCount {
  flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center;
  border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff;
  background: var(--brand-grad-btn);
}
.filterCount[hidden] { display: none !important; }
.filterCaret { flex: 0 0 auto; display: inline-flex; }
.filterCaret svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .65; transition: transform .15s ease; }
.filterBtn[aria-expanded="true"] .filterCaret svg { transform: rotate(180deg); }

.filterMenu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  min-width: 200px;
  max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(20,24,33,.99), rgba(11,13,19,.99));
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.filterMenu[hidden] { display: none; }
.filterOption {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 8px 10px;
  border-radius: 9px;
  background: transparent; border: 1px solid transparent;
  color: var(--text); font-size: 13px; font-weight: 650;
  cursor: pointer; transition: background .12s ease;
}
.filterOption:hover { background: rgba(255,255,255,.05); }
.filterOptName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filterCheck {
  flex: 0 0 auto; width: 17px; height: 17px;
  border-radius: 5px; border: 1.6px solid var(--border);
  display: grid; place-items: center;
  transition: background .12s ease, border-color .12s ease;
}
.filterOption.isOn { color: #fff; font-weight: 750; }
.filterOption.isOn .filterCheck { background: var(--brand-grad-btn); border-color: transparent; }
.filterOption.isOn .filterCheck::after {
  content: ""; width: 5px; height: 9px;
  border: 2px solid #fff; border-top: 0; border-left: 0;
  transform: rotate(45deg) translate(-0.5px, -1px);
}

/* --- Aktive Filter als entfernbare Chips -------------------------------- */
.activeFilters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.activeFilters[hidden] { display: none; }
.filterChip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 10px 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 45%, var(--border));
  background: color-mix(in srgb, var(--brand-accent) 16%, #12151d);
  color: #eaf0ff; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.filterChip:hover { background: color-mix(in srgb, var(--brand-accent) 26%, #12151d); }
.filterChipX { font-size: 12px; opacity: .8; }
.filterChip:hover .filterChipX { opacity: 1; }

/* === „Meine Listen": kompakte Karten (≥4/Reihe) + frischeres Design ====== */
body #listsGrid.profileGrid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 12px !important;
  align-content: start !important;
}
body #listsGrid .profileCard {
  min-height: 0 !important;
  padding: 14px !important;
  gap: 12px !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.16)), #12151d !important;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease !important;
}
body #listsGrid .profileCard:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--border)) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.32) !important;
}
body #listsGrid .profileCard.active {
  border-color: color-mix(in srgb, var(--brand-accent) 60%, var(--border)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-accent) 35%, transparent) !important;
}
body #listsGrid .profileCard h3 { font-size: 15.5px !important; line-height: 1.2 !important; margin: 0 !important; }
.profileCardInfo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.profileCardInfo h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Auto-Cover-Collage aus den Top-Spielen der Liste (Roadmap 7) */
.profileCardCovers { display: flex; gap: 5px; margin-bottom: 2px; }
.profileCardCover { flex: 1 1 0; height: 58px; min-width: 0; border-radius: 8px; background-size: cover; background-position: center; background-color: #15171f; border: 1px solid rgba(255,255,255,.10); }
.profileCardMeta { color: var(--muted); font-size: 12px; line-height: 1.3; }
.profileCardDate { opacity: .75; }
body #listsGrid .profileCardActions { display: flex !important; flex-direction: column !important; gap: 8px !important; flex-wrap: nowrap !important; }
body #listsGrid .listActionBtn.isPrimary {
  width: 100% !important;
  background: var(--brand-grad-btn) !important; color: #fff !important;
  border: 1px solid color-mix(in srgb, var(--brand-purple) 50%, transparent) !important;
  border-radius: 11px !important; padding: 8px 10px !important; font-size: 13px !important; font-weight: 750 !important;
}
body #listsGrid .listActionBtn.isDisabled,
body #listsGrid .listActionBtn:disabled {
  background: #1b1f29 !important; color: var(--muted) !important; border-color: var(--border) !important;
}
.listIconActions { display: flex; gap: 6px; }
.listIconBtn {
  flex: 1 1 0; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0e1119;
  color: #cfd6e4;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.listIconBtn:hover { color: #fff; border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--border)); background: #161a24; }
.listIconBtn.isDanger:hover { color: #fff; border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); background: color-mix(in srgb, var(--danger) 16%, #161a24); }
.listIconBtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* === Modus-Auswahl: Genau vs. Schnellrunde ============================== */
.rankingModeBody { gap: 4px !important; }
.modeOptions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.modeOption {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  text-align: left;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.16)), #12151d;
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.modeOption:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand-accent) 55%, var(--border));
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
}
.modeOption:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; }
.modeOptionIcon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--brand-accent) 16%, #0c0f16);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, transparent);
  color: color-mix(in srgb, var(--brand-accent) 80%, #fff);
}
.modeOption.isFast .modeOptionIcon {
  background: color-mix(in srgb, var(--brand-cyan) 16%, #0c0f16);
  border-color: color-mix(in srgb, var(--brand-cyan) 38%, transparent);
  color: color-mix(in srgb, var(--brand-cyan) 75%, #fff);
}
.modeOptionIcon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.modeOptionTitle { font-size: 16px; font-weight: 850; letter-spacing: -.01em; }
.modeOptionDesc { color: var(--muted); font-size: 12.5px; line-height: 1.35; flex: 1 1 auto; }
.modeOptionMatches {
  font-size: 12px; font-weight: 800;
  color: color-mix(in srgb, var(--brand-accent) 88%, #fff);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
  background: rgba(0,0,0,.28);
}
.modeOption.isFast .modeOptionMatches { color: color-mix(in srgb, var(--brand-cyan) 85%, #fff); }
@media (max-width: 520px) { .modeOptions { grid-template-columns: 1fr; } }

/* === Game-Detail: Status-Icons sauber zentriert (SVG statt Glyph) ======== */
body .gameDetailStatusBtn .gameDetailStatusBtnIcon {
  display: grid !important;
  place-items: center !important;
  line-height: 0 !important;
}
.gameDetailStatusBtnIcon .statusGlyph {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; display: block;
}

/* === Meine Bibliothek (profilweiter Manager) ============================= */
.modalBackdrop .modal.myLibraryModalSurface { width: min(980px, 100%) !important; height: min(88vh, 880px) !important; }
.myLibraryBody { display: flex !important; flex-direction: column; min-height: 0; gap: 0; }
#myLibrarySearch { flex: 0 0 auto; }
.myLibAddResults { flex: 0 0 auto; margin-top: 12px; border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: rgba(0,0,0,.22); }
.myLibAddResults[hidden] { display: none; }
.myLibAddTitleRow { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.myLibAddGrid { display: flex; flex-wrap: wrap; gap: 8px; }
.myLibAddCard {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  border: 1px solid var(--border); background: #12151d; color: var(--text);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.myLibAddCard:hover { border-color: color-mix(in srgb, var(--brand-accent) 50%, var(--border)); background: #161a24; transform: none; }
.myLibAddCover { width: 24px; height: 32px; border-radius: 5px; background-size: cover; background-position: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.12); }
.myLibAddName { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myLibAddPlus { font-size: 16px; font-weight: 800; color: var(--brand-accent); }

.myLibFilters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; flex: 0 0 auto; }
.myLibPill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border); background: #12151d; color: var(--muted);
  font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.myLibPill:hover { color: var(--text); transform: none; }
.myLibPill.active { color: #fff; border-color: color-mix(in srgb, var(--brand-accent) 55%, transparent); background: color-mix(in srgb, var(--brand-accent) 16%, #12151d); }
.myLibPillCount { font-size: 11px; font-weight: 800; opacity: .8; border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; }
.myLibPill.active .myLibPillCount { border-color: color-mix(in srgb, var(--brand-accent) 45%, transparent); }

.myLibraryGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-content: start; overflow: auto; min-height: 0; flex: 1; padding-right: 4px; }
.myLibEmpty { grid-column: 1 / -1; color: var(--muted); font-size: 14px; line-height: 1.5; padding: 24px 8px; text-align: center; }
.myLibCard {
  position: relative; display: flex; gap: 13px; padding: 13px 40px 13px 13px;
  border: 1px solid var(--border); border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.16)), #12151d;
  transition: border-color .15s ease;
}
.myLibCard:hover { border-color: color-mix(in srgb, var(--brand-accent) 40%, var(--border)); }
.myLibCover { width: 58px; height: 80px; flex: 0 0 auto; border-radius: 10px; background-size: cover; background-position: center; background-color: #15171f; border: 1px solid rgba(255,255,255,.12); padding: 0; cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.myLibCover:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand-accent) 50%, var(--border)); }
.myLibBody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.myLibTitle { display: block; background: none; border: none; padding: 0; text-align: left; cursor: pointer; font-size: 14.5px; font-weight: 800; line-height: 1.2; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myLibTitle:hover { color: var(--brand-accent); }
.myLibStatusRow { display: flex; gap: 5px; }
.myLibStatusBtn {
  width: 30px; height: 30px; flex: 1 1 0; max-width: 36px; display: grid; place-items: center;
  border-radius: 9px; border: 1px solid var(--border); background: #0e1119; color: var(--muted);
  cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.myLibStatusBtn:hover { color: var(--text); border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--border)); }
.myLibStatusBtn.active { color: #fff; border-color: color-mix(in srgb, var(--brand-accent) 55%, transparent); background: color-mix(in srgb, var(--brand-accent) 22%, #0e1119); }
.myLibStatusBtn .statusGlyph { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
/* Meta-Reihe: Priorität (kompakte Buchstaben-Chips) + Bewertungs-Chip */
.myLibMetaRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.myLibPrioRow { display: flex; align-items: center; gap: 4px; }
.myLibPrioBtn {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: #0e1119; color: var(--muted);
  font-size: 11px; font-weight: 800; transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.myLibPrioBtn:hover { color: var(--text); }
.myLibPrioBtn.prio-high.active { color: #fff; background: color-mix(in srgb, #ff5a6a 30%, #0e1119); border-color: color-mix(in srgb, #ff5a6a 60%, transparent); }
.myLibPrioBtn.prio-med.active  { color: #fff; background: color-mix(in srgb, #f5a623 30%, #0e1119); border-color: color-mix(in srgb, #f5a623 60%, transparent); }
.myLibPrioBtn.prio-low.active  { color: #fff; background: color-mix(in srgb, #5aa9ff 28%, #0e1119); border-color: color-mix(in srgb, #5aa9ff 55%, transparent); }
/* Kompakter Bewertungs-Chip (klappt das 1-10-Raster nur bei Bedarf aus) */
.myLibRateArea { display: flex; align-items: center; min-width: 0; }
.myLibRateChip {
  display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: #0e1119; color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.myLibRateChip:hover { color: var(--text); border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--border)); }
.myLibRateChip.rated { color: #f6d585; border-color: color-mix(in srgb, #f3c55a 45%, var(--border)); background: color-mix(in srgb, #f3c55a 12%, #0e1119); }
.myLibRateChip .myLibRateStar { color: #f3c55a; font-size: 12px; }
.myLibRateChip .myLibRateMax { opacity: .65; font-weight: 700; }
.myLibRateArea .myLibRateOpen { flex: 1 1 100%; }
.myLibMetaRow:has(.myLibRateOpen) { flex-direction: column; align-items: stretch; }
.myLibRateOpen .scoreSelector { display: flex; flex-wrap: wrap; gap: 3px; }
.myLibRateOpen .gameDetailScoreButton { width: 24px !important; height: 24px !important; min-width: 0 !important; padding: 0 !important; font-size: 11px !important; border-radius: 6px !important; }

/* Batch-Rating: „Noch nicht bewertete Spiele bewerten" (#84) */
.myLibRateAllBtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; margin: 2px 0; border-radius: 12px; cursor: pointer; border: 1px solid color-mix(in srgb, #f3c55a 50%, var(--border)); background: color-mix(in srgb, #f3c55a 14%, #12151d); color: #f6d585; font-weight: 800; font-size: 13.5px; transition: background .12s ease; }
.myLibRateAllBtn:hover { background: color-mix(in srgb, #f3c55a 22%, #12151d); }
.myLibRateAllIcon { color: #f3c55a; font-size: 15px; }
.rateQueueGame { display: flex; gap: 16px; align-items: center; }
.rateQueueCover { width: 72px; height: 96px; flex: 0 0 auto; border-radius: 10px; background-size: cover; background-position: center; background-color: #15171f; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.rateQueueName { font-size: 18px; font-weight: 900; line-height: 1.15; }
.rateQueueGenres { color: var(--muted); margin-top: 4px; }
.rateQueueBody { display: grid; gap: 16px; }
.rateQueueField { display: flex; flex-direction: column; gap: 8px; }
.rateQueueFieldLabel { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rateQueueStatusRow { display: flex; gap: 8px; flex-wrap: wrap; }
.rateQueueStatusRow .myLibStatusBtn { width: 42px; height: 42px; flex: 0 0 auto; max-width: none; }
.rateQueueStars.gameDetailScoreSelector { display: flex; flex-wrap: wrap; gap: 6px; }
.rateQueueStars .gameDetailScoreButton { width: 38px !important; height: 38px !important; min-width: 0 !important; flex: 0 0 auto !important; padding: 0 !important; border-radius: 8px !important; font-weight: 800; }
.rateQueueFooter { display: flex; gap: 10px; justify-content: flex-end; }
.rateQueueFooter .accountBackupBtn, .rateQueueFooter .primary { width: auto; padding: 0 18px; }

/* Bibliotheks-Insights (Roadmap 6) */
.myLibInsights { flex: 0 0 auto; margin: 12px 0 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--brand-accent) 6%, #12151d); display: flex; flex-direction: column; gap: 9px; }
.myLibInsStats { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; }
.myLibInsStat { font-size: 13px; color: var(--muted); }
.myLibInsStat b { font-size: 18px; font-weight: 900; color: var(--text); margin-right: 3px; }
.myLibInsPlat { font-weight: 600; }
.myLibInsGenres { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.myLibInsLabel { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.myLibInsGenre { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border); background: #0e1119; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease; }
.myLibInsGenre:hover { color: var(--text); }
.myLibInsGenre.active { color: #fff; border-color: color-mix(in srgb, var(--brand-accent) 55%, transparent); background: color-mix(in srgb, var(--brand-accent) 18%, #0e1119); }
.myLibInsCount { font-size: 10.5px; font-weight: 800; opacity: .8; }

/* Play-Next-Vitrine (Roadmap 6) */
.myLibPlayNext { flex: 0 0 auto; margin: 12px 0 2px; }
.myLibPnHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.myLibPnTitle { font-size: 14px; font-weight: 800; }
.myLibPnDuelBtn { height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--brand-accent) 55%, var(--border)); background: color-mix(in srgb, var(--brand-accent) 18%, #12151d); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.myLibPnDuelBtn:hover { background: color-mix(in srgb, var(--brand-accent) 28%, #12151d); }
.myLibPnStrip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.myLibPnCard { position: relative; flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; gap: 5px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.myLibPnCover { width: 92px; height: 122px; border-radius: 9px; background-size: cover; background-position: center; background-color: #15171f; border: 1px solid rgba(255,255,255,.12); transition: transform .12s ease, border-color .12s ease; }
.myLibPnCard:hover .myLibPnCover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--border)); }
.myLibPnName { font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.myLibPnPrio { position: absolute; top: 5px; left: 5px; font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; color: #fff; }
.myLibPnPrio.prio-high { background: #e0455a; }
.myLibPnPrio.prio-med { background: #d8901f; }
.myLibPnPrio.prio-low { background: #4a86d0; }
.myLibRemove {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.myLibRemove:hover { color: #fff; background: color-mix(in srgb, var(--danger) 18%, #161a24); border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); }
.myLibRemove svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* Sterne-Widget (Halbschritte) */
.starRating { position: relative; display: inline-block; line-height: 0; }
.starRow { display: flex; gap: 3px; }
.starWrap { position: relative; width: 18px; height: 18px; display: block; }
.starWrap .starBg, .starWrap .starFg { position: absolute; top: 0; left: 0; height: 18px; }
.starWrap .starBg { width: 18px; }
.starWrap .starFg { width: 0; overflow: hidden; }
.starWrap.full .starFg { width: 18px; }
.starWrap.half .starFg { width: 9px; }
.starWrap svg { width: 18px; height: 18px; display: block; }
.starWrap .starBg svg path { fill: none; stroke: color-mix(in srgb, var(--muted) 70%, transparent); stroke-width: 1.5; }
.starWrap .starFg svg path { fill: #ffce4a; stroke: none; }
.starZones { position: absolute; inset: 0; display: flex; }
.starZone { flex: 1 1 0; padding: 0; margin: 0; background: transparent; border: 0; cursor: pointer; }
.starZone:hover { background: transparent; transform: none; }
@media (max-width: 560px) { .myLibraryGrid { grid-template-columns: 1fr; } }

/* === Community-Listen (#5) ============================================== */
/* Veröffentlichen-Panel im Teilen-Modal */
.communityPublishPanel { margin-top: 18px; }
.communityPublishDivider { height: 1px; background: var(--border); margin: 4px 0 16px; }
.communityPublishPanel h3 { margin: 0 0 4px; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.communityPublishPanel #communityPublishSub { margin: 0 0 14px; }
.communityPublishField { display: block; margin-bottom: 14px; }
.communityPublishField > span { display: block; margin-bottom: 6px; }
#communityPublishName { width: 100%; }
.communityIconPicker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.communityIconOption {
  aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 0;
  border-radius: 12px; border: 1px solid var(--border); background: #0e1119;
  color: var(--muted); cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease, transform .12s ease;
}
.communityIconOption:hover { color: var(--text); border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--border)); transform: translateY(-1px); }
.communityIconOption.isOn { color: #fff; border-color: color-mix(in srgb, var(--brand-accent) 60%, transparent); background: color-mix(in srgb, var(--brand-accent) 22%, #0e1119); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-accent) 40%, transparent) inset; }
.communityIconOption svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.communityPublishNote { margin-top: 12px; font-size: 13px; }
.communityPublishNote.isOk { color: #7ee0a8; }
.communityPublishNote.isError { color: color-mix(in srgb, var(--danger) 80%, #fff 20%); }

/* Community-Tab: Status + Karten */
.communityListsStatus { margin: 2px 0 12px; color: var(--muted); }
.communityCard {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  padding: 14px 14px 13px; border-radius: 16px; border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #2fb6d6) 9%, #0e1119), #0d1018);
  cursor: pointer; transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.communityCard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent, #2fb6d6) 55%, var(--border)); box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--accent, #2fb6d6) 80%, transparent); }
.communityCardHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.communityCardIcon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--accent, #2fb6d6) 18%, #0e1119); color: color-mix(in srgb, var(--accent, #2fb6d6) 75%, #fff); }
.communityCardIcon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.communityCardRating { display: flex; align-items: center; gap: 8px; }
.communityRatingNum { font-size: 12.5px; color: var(--muted); }
.communityStarsStatic .starRow { gap: 2px; }
.communityStarsStatic .starWrap, .communityStarsStatic .starWrap .starBg, .communityStarsStatic .starWrap .starFg, .communityStarsStatic .starWrap svg { width: 14px; height: 14px; }
.communityStarsStatic .starWrap.full .starFg { width: 14px; }
.communityStarsStatic .starWrap.half .starFg { width: 7px; }

/* Bewertung im Abschluss-Modal */
.completionRating { margin: 6px auto 4px; padding: 16px; max-width: 460px; text-align: center; border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--brand-accent) 7%, #0d1018); }
.completionRatingHead { margin-bottom: 12px; }
#rankingCompleteRatingTitle { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 3px; }
#rankingCompleteRatingWidget { display: flex; justify-content: center; }
.completionRating .starRow { gap: 6px; }
.completionRating .starWrap, .completionRating .starWrap .starBg, .completionRating .starWrap .starFg, .completionRating .starWrap svg { width: 30px; height: 30px; }
.completionRating .starWrap.full .starFg { width: 30px; }
.completionRating .starWrap.half .starFg { width: 15px; }
.completionRatingThanks { margin-top: 10px; color: #7ee0a8; }

/* Community-Listen-Detailansicht (Vorschau vor dem Ranking) */
.modalBackdrop .modal.communityListModalSurface { width: min(1040px, 100%) !important; height: min(88vh, 900px) !important; }
.communityListBody { display: flex !important; flex-direction: column; min-height: 0; }
#communityPublishNotes { width: 100%; resize: vertical; min-height: 52px; font: inherit; }
.communityListHero { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.communityListHeroIcon { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--brand-accent) 20%, #0e1119); color: color-mix(in srgb, var(--brand-accent) 78%, #fff); }
.communityListHeroIcon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.communityListRating { display: flex; align-items: center; gap: 8px; }
.communityListRating .communityRatingNum { font-size: 13px; }
.communityListNotes { flex: 0 0 auto; margin: 14px 0 0; line-height: 1.5; color: var(--text); }
.communityListNotes.isMuted { color: var(--muted); font-style: italic; }
.communityListGamesHead { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.communityListGamesHead .menuSectionTitle { margin: 0; }
.communityListGames { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 12px; padding: 2px 2px 4px; }
.communityListGameCard { position: relative; display: flex; flex-direction: column; gap: 6px; }
.communityListCover { aspect-ratio: 3 / 4; border-radius: 10px; border: 1px solid var(--border); background-size: cover; background-position: center; background-color: #0e1119; }
.communityListRank { position: absolute; top: 6px; left: 6px; z-index: 1; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 7px; font-size: 11.5px; font-weight: 800; color: #fff; background: rgba(8,10,16,.78); border: 1px solid rgba(255,255,255,.14); }
.communityListGameTitle { font-size: 12px; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) { .communityListGames { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; } }
.communityDeleteBtn { margin-right: auto; color: color-mix(in srgb, var(--danger) 82%, #fff 18%); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.communityDeleteBtn:hover { background: color-mix(in srgb, var(--danger) 16%, #161a24); border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); color: #fff; }
.communityDeleteBtn[hidden] { display: none; }

/* Community-Listen: Kategorien (Veröffentlichen-Auswahl, Filter-Pills, Karten-Badge) */
#communityPublishCategory { width: 100%; font: inherit; }
.communityCategoryFilters { margin: 4px 0 14px; }
.communityCategoryFilters:empty { display: none; }
.communityCardCat {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 700;
  color: color-mix(in srgb, var(--brand-accent) 80%, #fff);
  background: color-mix(in srgb, var(--brand-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, var(--border));
}

/* === Auth / Konto (Login-System) ======================================= */
/* Über allen anderen Modals (Completion 120 / TextInput 130), damit der
   Gate-Dialog auch aus Abschluss-/Ranglisten-Ansicht sichtbar oben liegt. */
#authChoiceModal, #authRegisterModal, #authVerifyModal, #authLoginModal, #authResetModal { z-index: 200 !important; }
#authResetStep2[hidden] { display: none; }
body .headerRight.toolbar .headerTopActions .authControl { position: relative; flex: 0 0 auto !important; width: auto !important; align-self: center !important; }
.authControl { position: relative; }
/* Konto-Button zeigt Name + Pfeil (legacy macht .iconButton sonst icon-only/132px/46px) */
.authControl #authBtn { width: auto !important; min-width: 0 !important; max-width: none !important; height: 44px !important; min-height: 44px !important; box-sizing: border-box !important; gap: 7px; }
.authControl #authBtn .iconBtnLabel { display: inline-block !important; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authControl #authBtn #authBtnIcon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px; height: 18px; flex: 0 0 auto; }
.authControl #authBtn #authBtnIcon svg { display: block; width: 18px !important; height: 18px !important; }
.authModal .onboardingBody > button { width: 100%; }
/* Auth-Felder liegen jetzt in <form> (Audit 4.7) → Grid-Layout + Button-Breite übernehmen. */
.authModal .onboardingBody > form { display: grid; gap: 14px; margin: 0; }
.authModal .onboardingBody > form > button { width: 100%; }
.authModal label { display: block; margin-bottom: 12px; }
.authModal label > .small { display: block; margin-bottom: 6px; }
.authModal input[type="text"], .authModal input[type="email"], .authModal input[type="password"] { width: 100%; }
.authFieldHint { display: block; margin-top: 6px; min-height: 16px; color: var(--muted); }
.authFieldHint.isGood { color: #7ee0a8; }
.authFieldHint.isBad { color: color-mix(in srgb, var(--danger) 80%, #fff 20%); }
.authError { margin: 2px 0 10px; color: color-mix(in srgb, var(--danger) 82%, #fff 18%); }
.authError.isOk { color: #7ee0a8; }
.authSwitchRow { margin-top: 12px; color: var(--muted); text-align: center; }
.linkBtn { background: none; border: 0; padding: 0; color: var(--brand-accent); cursor: pointer; font: inherit; text-decoration: underline; }
.linkBtn:hover { color: color-mix(in srgb, var(--brand-accent) 80%, #fff); background: none; transform: none; }
/* Konto-Popover */
/* Konto-Menü: keine umschließende Kachel (transparent), jede Aktion eine eigene
   Pille in exakt Breite/Höhe des Konto-Buttons — analog zum Sprach-Menü. */
.authMenu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  padding: 0; background: none; border: none; box-shadow: none;
}
.authMenu[hidden] { display: none; }
.authMenuItem {
  display: flex !important; align-items: center !important; justify-content: center;
  width: 100% !important; box-sizing: border-box !important;
  height: 44px !important; padding: 0 13px !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--brand-accent) 7%, #11141c) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important; font-size: 13.5px !important; font-weight: 700 !important;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
}
.authMenuItem:hover {
  background: color-mix(in srgb, var(--brand-accent) 14%, #11141c) !important;
  border-color: color-mix(in srgb, var(--brand-accent) 50%, var(--border)) !important;
  transform: none !important;
}
/* Hohe Spezifität (schlägt Legacy `.toolbar button{width:132px!important}`):
   Dropdown-Optionen exakt so breit/hoch wie der Auswahl-Button (Sprache + Konto). */
body .headerRight.toolbar .headerTopActions .langMenu .langOption,
body .headerRight.toolbar .headerTopActions .authMenu .authMenuItem {
  width: 100% !important; min-width: 0 !important; max-width: none !important;
  box-sizing: border-box !important;
  height: 44px !important; min-height: 44px !important;
  padding: 0 13px !important; gap: 9px !important;
}
/* Sprach-Optionen linksbündig wie der Button (Legacy `.toolbar button` zentriert sonst) */
body .headerRight.toolbar .headerTopActions .langMenu .langOption { justify-content: flex-start !important; }
body .headerRight.toolbar .headerTopActions .langDropdownBtn { justify-content: flex-start !important; }

/* === Header-Dropdowns klar abheben (Seite abdunkeln + Pillen-Schatten) ==== */
/* Scrim UNTER die Kopf-Leiste (z-index:30), aber ÜBER den Hauptinhalt → Dropdown
   bleibt klickbar, nur der Inhalt dahinter wird abgedunkelt. */
.headerScrim { position: fixed; inset: 0; z-index: 20; background: rgba(6,8,13,.5); display: none; }
/* Schleier zeigen, sobald ein Header-Dropdown offen ist (hidden-Attribut weg) */
body:has(#langMenu:not([hidden])) .headerScrim,
body:has(#authMenu:not([hidden])) .headerScrim { display: block; }
/* Pillen deutlich abheben + kräftigerer Schatten */
body .headerRight.toolbar .headerTopActions .langMenu .langOption,
body .headerRight.toolbar .headerTopActions .authMenu .authMenuItem {
  background: color-mix(in srgb, var(--brand-accent) 10%, #161b26) !important;
  box-shadow: 0 16px 34px -10px rgba(0,0,0,.65) !important;
}
.authCaret { display: inline-flex; align-items: center; margin-left: 2px; }
.authCaret svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.authPremiumBadge { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; background: linear-gradient(135deg, #ffd76a, #f5a623); color: #1a1205; vertical-align: middle; }
/* Konto-Beschriftung: Name kürzt sich (Ellipsis), Badge bleibt immer voll sichtbar */
.authControl #authBtn #authBtnLabel { display: inline-flex !important; align-items: center; gap: 5px; max-width: 180px !important; min-width: 0; overflow: hidden !important; }
.authControl #authBtn #authBtnLabel .authName { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authControl #authBtn #authBtnLabel .authPremiumBadge { flex: 0 0 auto; white-space: nowrap; margin-left: 0; }
/* Premium-User: kein Badge — goldenes, edles User-Icon + leicht goldener Name */
.authControl #authBtn.authPremium #authBtnIcon { color: #f3c55a; }
.authControl #authBtn.authPremium #authBtnIcon svg { filter: drop-shadow(0 0 4px color-mix(in srgb, #f3c55a 55%, transparent)); }
.authControl #authBtn.authPremium .authName { color: color-mix(in srgb, #f6d585 72%, #fff); }
/* Gesperrte Menü-Kacheln (Gast) */
.menuTile.menuTileLocked { opacity: .82; }
.menuTileLock { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.menuTileLock svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menuTile.menuTileLocked:hover .menuTileLock svg { stroke: var(--brand-accent); }
.accountInfo { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; background: rgba(0,0,0,.18); }
.accountInfo[hidden] { display: none; }
.accountRow { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.accountRow > span { color: var(--muted); flex: 0 0 auto; }
.accountRow > strong { word-break: break-all; text-align: right; }
/* Konto & Profil — entzerrte Sektionen (Profilname zuoberst, klare Abstände) */
.accountBody { gap: 0 !important; }
.accountBody .accountSection { padding: 16px 0; border-top: 1px solid var(--border); margin: 0 !important; }
.accountBody .accountSection:first-child { padding-top: 2px; border-top: none; }
.accountBody .accountSection .accountInfo { margin-bottom: 12px; }
.accountSectionTitle { display: block; font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; letter-spacing: .01em; }
.accountNameRow { display: flex; gap: 10px; align-items: center; }
.accountNameRow input { flex: 1 1 auto; min-width: 0; margin: 0; }
.authModal .accountBody .accountNameRow .primary { flex: 0 0 auto; width: auto !important; padding: 0 20px; white-space: nowrap; }
@media (max-width: 480px) { .accountNameRow { flex-direction: column; align-items: stretch; } .authModal .accountBody .accountNameRow .primary { width: 100% !important; } }

/* „Liste teilen"-Modal: Body scrollbar (kein Bottom-Cutoff), Roh-Code ausklappbar unten */
#shareCodeModal .onboardingBody.shareCodeBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.shareCodeToggle { align-self: flex-start; height: 34px; padding: 0 14px; font-size: 12.5px !important; color: var(--muted); }
.shareCodeBlock { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--border); }
#shareCodeModal[data-mode="share"] .communityPublishPanel { margin-top: 0; }

/* Community-Listen: Such-Zeile + Vorschau-Cover auf den Karten (#86) */
.communityListsHeadRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.communityListsHeadRow .menuSectionTitle { margin: 0; }
.communitySearchInput { flex: 0 1 260px; min-width: 160px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: rgba(5,7,12,.76); color: var(--text); padding: 0 14px; font-size: 14px; }
.communitySearchInput:focus { outline: none; border-color: color-mix(in srgb, var(--brand-accent) 60%, var(--border)); }
.communityCard .communityCardCovers { margin-top: 10px; min-height: 0; }
.communityCard .communityCardCovers:empty { display: none; }

/* „Zum Menü"-Button präsenter ins UI holen (#89) */
body .duelMenuBtn {
  color: #d3e2ff !important; font-weight: 800 !important; padding: 9px 16px 9px 13px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent, #3d7bff) 24%, #11141d), #11141d) !important;
  border-color: color-mix(in srgb, var(--brand-accent, #3d7bff) 50%, var(--border)) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
body .duelMenuBtn:hover { color: #fff !important; border-color: var(--brand-accent, #3d7bff) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent, #3d7bff) 34%, #11141d), #11141d) !important; }

/* Spiele/Listen-Tabs: aktives Tab farblich hervorheben (#89) */
.collTab.active { color: #fff; border-bottom-width: 3px; border-bottom-color: var(--brand-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--brand-accent) 15%, transparent), transparent); }

/* === Öffentliches Profil (#profileViewModal / #profileEditModal) ========= */
.modalBackdrop .modal.profileModalSurface { position: relative !important; width: min(940px, 96vw) !important; height: auto !important; max-height: min(92vh, 920px) !important; }
.profileBanner { flex: 0 0 auto; height: 200px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; background-color: #0b0e15; }
.profileBanner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,16,0) 30%, rgba(10,11,16,.55) 100%); pointer-events: none; }
.profileBannerClose { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; background: rgba(8,10,15,.55); border: 1px solid rgba(255,255,255,.14); color: #fff; cursor: pointer; }
.profileBannerClose:hover { background: rgba(8,10,15,.85); }
.profileBannerClose svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.profileViewBody { padding: 4px 26px 24px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.profileHead { position: relative; z-index: 1; flex: 0 0 auto; display: flex; align-items: flex-end; gap: 18px; margin-top: -56px; padding: 0 26px; }
.profileAvatarWrap { flex: 0 0 auto; }
.profAvatar { display: grid; place-items: center; overflow: hidden; background-size: cover; background-position: center; background-color: #0b0e15; border-radius: 18px; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.profAvatarLg { width: 120px; height: 120px; border: 4px solid #12151d; border-radius: 26px; }
.profAvatarMd { width: 64px; height: 64px; border: 3px solid #12151d; }
.profAvatarMono { color: #fff; font-weight: 800; }
.profAvatarLg.profAvatarMono { font-size: 48px; }
.profAvatarMd.profAvatarMono { font-size: 26px; }
.profAvatarIcon svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.profileHeadText { flex: 1 1 auto; min-width: 0; padding-bottom: 6px; }
.profileHeadText .eyebrow { margin-bottom: 2px; }
.profileNameRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profileHeadText h2 { margin: 0; font-size: 30px; font-weight: 900; line-height: 1.1; word-break: break-word; }
.profileTitleChip { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--prof-accent, #3d7bff); background: color-mix(in srgb, var(--prof-accent, #3d7bff) 16%, transparent); border: 1px solid color-mix(in srgb, var(--prof-accent, #3d7bff) 42%, var(--border)); }
.profileStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px; margin: 18px 0 4px; }
.profStatTile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.16)), #12151d; }
.profStatTile strong { font-size: 22px; font-weight: 900; color: var(--text); line-height: 1; }
.profStatTile span { font-size: 11px; color: var(--muted); text-align: center; }
.profileEditOpenBtn { flex: 0 0 auto; align-self: flex-end; }
.profileBio { margin: 16px 0 4px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.profileBio.isMuted { color: var(--muted); font-style: italic; }
.profileSection { margin-top: 20px; }
.profileSection .menuSectionTitle { margin-bottom: 10px; }
.profileFavs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.profileGenres { display: flex; flex-wrap: wrap; gap: 8px; }
.profileGenrePill { padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text); background: rgba(255,255,255,.05); border: 1px solid var(--border); }
.profFavCard { position: relative; display: flex; flex-direction: column; gap: 6px; }
.profFavCover { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; background-size: cover; background-position: center; background-color: #0b0e15; border: 1px solid var(--border); }
.profFavName { font-size: 12px; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.profFavRank { position: absolute; top: 6px; left: 6px; z-index: 1; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: color-mix(in srgb, var(--prof-accent, #3d7bff) 82%, #000); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
/* Editor */
.profileEditBody { gap: 16px; overflow: auto; }
.profileField { display: flex; flex-direction: column; gap: 8px; }
.profileField > span.small { color: var(--muted); }
.profileEditPreview { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #0b0e15; }
.profEditPrevBanner { height: 84px; background-size: cover; background-position: center; background-color: #0b0e15; }
.profEditPrevHead { display: flex; align-items: center; gap: 12px; padding: 0 14px 14px; margin-top: -26px; position: relative; }
.profEditPrevName { font-weight: 800; font-size: 16px; padding-bottom: 2px; }
.profileBioInput { width: 100%; resize: vertical; min-height: 64px; font: inherit; }
.profileAccentRow { display: flex; flex-wrap: wrap; gap: 10px; }
.profSwatch { width: 30px; height: 30px; border-radius: 999px; background: var(--sw); border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; cursor: pointer; }
.profSwatch.isActive { border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw) 50%, transparent); }
.profileFavSearchInput { width: 100%; }
.profileFavAddResults { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.profFavAddCard { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.03); text-align: left; cursor: pointer; }
.profFavAddCard:hover { border-color: var(--prof-accent, #3d7bff); }
.profFavAddCover { flex: 0 0 auto; width: 28px; height: 38px; border-radius: 5px; background-size: cover; background-position: center; background-color: #0b0e15; }
.profFavAddName { flex: 1 1 auto; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profFavEditList { display: flex; flex-direction: column; gap: 8px; }
.profFavEditRow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.03); }
.profFavEditRow .profFavRank { position: static; }
.profFavEditRow .profFavCover { width: 30px; height: 40px; aspect-ratio: auto; border-radius: 6px; flex: 0 0 auto; }
.profFavEditRow .profFavName { flex: 1 1 auto; -webkit-line-clamp: 1; }
.profFavRemove { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; }
.profFavRemove:hover { color: #fff; border-color: #e2536a; }
.profFavRemove svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.profilePicker { display: flex; flex-wrap: wrap; gap: 8px; }
.profPickOpt { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; border: 2px solid var(--border); background: #0b0e15; cursor: pointer; padding: 0; display: grid; place-items: center; }
.profPickOpt.isActive { border-color: var(--prof-accent, #3d7bff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--prof-accent, #3d7bff) 45%, transparent); }
.profPickOpt .profAvatar { width: 100%; height: 100%; border-radius: 0; box-shadow: none; border: none; }
.profPickOpt .profAvatarMono { font-size: 22px; }
.profPickCover { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; }
.profPickIcon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* Eigenes-Bild-Upload-Option im Avatar-Picker */
.profPickUpload { border-style: dashed; color: var(--muted); }
.profPickUpload:hover { color: var(--text); border-color: color-mix(in srgb, var(--prof-accent, #3d7bff) 55%, var(--border)); }
.profPickUploadIcon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.profAvatarImg { background-size: cover; background-position: center; }
.profPickWide { width: 88px; }
.profileAuthorLink { background: none; border: none; padding: 0; color: var(--brand-accent, #3d7bff); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.profileAuthorLink:hover { color: #fff; }
@media (max-width: 560px) {
  .profileHead { flex-wrap: wrap; margin-top: -40px; padding: 0 16px; gap: 12px; }
  .profileEditOpenBtn { width: 100%; }
  .profileFavs { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .profileBanner { height: 130px; }
  .profAvatarLg { width: 84px; height: 84px; border-radius: 20px; }
  .profAvatarLg.profAvatarMono { font-size: 34px; }
  .profileHeadText h2 { font-size: 24px; }
  .profileViewBody { padding: 4px 16px 20px; }
  .profileStats { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
  .profStatTile strong { font-size: 19px; }
}

/* === Audit-Fixes (0.27.0.x) ============================================= */
/* Kleine Icon-/Toggle-/Close-Buttons nicht durch globale Hover/Active-Transforms
   bewegen — wirkte unruhig (Audit 4.6 & 5.7). */
#soundToggleBtn:hover, #soundToggleBtn:active, #soundToggleBtn:focus-visible,
.headerTopActions button:hover, .headerTopActions button:active,
.menuHelpBtn:hover, .menuHelpBtn:active,
.modalHead > button:hover, .modalHead > button:active,
.profileBannerClose:hover, .profileBannerClose:active { transform: none !important; }
/* Scrollbare Spiele-Grids: letzte Kartenreihe nicht direkt an den Footer kleben (Audit 5.6). */
.libraryGrid { padding-bottom: 16px; }
@media (max-width: 720px) {
  .libraryFooter { padding-top: 18px !important; row-gap: 10px !important; }
}
/* Versions-Badge konsistent (kein versehentliches Lowercasing auf Mobile, Audit 5.8). */
.versionBadge { text-transform: none !important; }
/* Versions-Badge immer fix unten rechts mit Randabstand (auflösungsunabhängig).
   Niedriger z-index → Modal-Backdrops (hoher z-index) verdecken es korrekt. */
.versionFooter #footerHelp { position: fixed !important; right: 14px; bottom: 12px; margin: 0 !important; z-index: 20; pointer-events: none; }
.versionFooter #footerHelp .versionBadge { opacity: .82; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
/* Mobile-Header kompakter (Audit 5.3): Untertitel ausblenden + Titel/Logo kleiner,
   damit der Inhalt früher beginnt. Desktop unverändert. */
@media (max-width: 600px) {
  #brandCopy.brandCopy { display: none !important; }
  .brandName { font-size: clamp(34px, 11vw, 46px) !important; }
  .brandIcon { width: 50px !important; height: 50px !important; flex-basis: 50px !important; border-radius: 15px !important; }
  header { margin-bottom: 12px !important; }
  .headerRight.toolbar { margin-top: 6px !important; }
}
/* Touch-Zielgrößen ≥44px auf Touch-/Coarse-Pointer-Geräten (Audit 7 P2). */
@media (pointer: coarse) {
  .headerTopActions > button, .headerTopActions > .languageShell,
  .modalHead > button, .profileBannerClose, .menuHelpBtn,
  button[id^="close"] { min-width: 44px !important; min-height: 44px !important; }
}

/* === 0-10-Bewertung + Absprünge ========================================= */
/* Wiederverwendeter 0-10-Widget außerhalb des Spiel-Details */
.gameDetailScoreSelector { display: grid; }
.scoreSelector { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.myLibCard .scoreSelector .gameDetailScoreButton { height: 30px !important; }
.myLibCard .scoreSelector .gameDetailScoreButton span { font-size: 11px; }
/* Community-Listen-Bewertung als Zahl (statt Sterne) */
.communityScoreBadge { font-weight: 900; color: var(--text); font-size: 15px; }
.communityScoreMax { font-weight: 700; color: var(--muted); font-size: 12px; }
.communityNoRating { color: var(--muted); }
/* Absprung A: Listen-Spiel-Karte ist jetzt ein <button> */
.communityListGameCard { width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.communityListGameCard:hover .communityListCover { outline: 2px solid color-mix(in srgb, var(--brand-accent, #3d7bff) 70%, transparent); outline-offset: 1px; }
.communityListGameCard:hover .communityListGameTitle { color: #fff; }
/* Absprung B: Profil-Top-5 ist jetzt ein <button> */
.profFavCard { width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.profFavCard:hover .profFavCover { outline: 2px solid color-mix(in srgb, var(--prof-accent, #3d7bff) 70%, transparent); outline-offset: 1px; }
/* Absprung C: Community-Karte ist div[role=button] → Tastatur-Fokusring + Autor-Link */
.communityCard:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent, #2fb6d6) 70%, transparent); outline-offset: 2px; }
.communityCardAuthor { font-weight: 700; }
/* Absprung E: „Details"-Option auf der Duell-Karte (oben; „Nicht gespielt" bleibt unten) */
.cardDetailButton { position: absolute; top: 22px; z-index: 4; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(8,11,17,.62); color: #eaf2ff; cursor: pointer; }
.cardDetailButton.leftSide { left: 22px; }
.cardDetailButton.rightSide { right: 22px; }
.cardDetailButton:hover { background: rgba(8,11,17,.85); transform: translateY(-1px); }
.cardDetailButton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Absprung D: enthaltende Community-Listen im Spiel-Detail */
#gameDetailListsBlock .gameDetailLists { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }

/* === Nachaudit 0.28.0.0 ================================================ */
/* A1-07: Mobile-Spieleauswahl — Grid nicht kollabieren lassen; ganzer Body scrollt;
   Controls kompakt (Suche voll, 3 Filter nebeneinander, Aktionen umbrechen) →
   mind. eine Spielkarte beim Öffnen sichtbar. */
@media (max-width: 640px) {
  #libraryModal .modalBody { overflow-y: auto; }
  #libraryModal .libraryGrid { flex: none !important; overflow: visible !important; min-height: 56vh; }
  /* Kopf kompakt: Untertitel weg, weniger Padding */
  #libraryModal .modalHead .sub { display: none !important; }
  #libraryModal .modalHead { padding-bottom: 12px !important; }
  /* Suche voll, 3 Filter nebeneinander, Zähler darunter */
  #libraryModal .libraryControls { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; margin-bottom: 8px !important; }
  #libraryModal .libraryControls > #librarySearch { grid-column: 1 / -1 !important; }
  /* Filter mobil kompakter, damit Labels „Kategorien"/„Plattformen" nicht abschneiden (Design-Audit P1) */
  #libraryModal .filterBtn { font-size: 11.5px !important; padding: 0 8px !important; gap: 4px !important; }
  #libraryModal .filterCaret svg { width: 15px; height: 15px; }
  #libraryModal .libraryControls > #libraryCounter { grid-column: 1 / -1 !important; justify-self: start; }
  /* Spiele zuerst (Design-Audit P1): Grid direkt nach Suche/Filter; Bulk-Aktionen +
     Eigenes-Spiel wandern UNTER die Spieleliste (näher zum Aktions-Footer). */
  #libraryModal .libraryControls { order: 1; }
  #libraryModal #activeFilters { order: 2; }
  #libraryModal .libraryGrid { order: 3 !important; }
  #libraryModal .libraryActions { order: 4; }
  #libraryModal #addGameBox { order: 5; }
  /* Sekundäre Aktionen kompakt (kleinere Buttons, mehrere pro Reihe) */
  #libraryModal .libraryActions { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 12px 0 8px !important; }
  #libraryModal .libraryActions button { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; font-size: 12px !important; padding: 7px 10px !important; }
  /* Footer schlank: Hint klein, Buttons in einer Reihe */
  #libraryModal .libraryFooter { padding: 12px 16px !important; }
  #libraryModal .libraryFooter > .small { display: none !important; }
  #libraryModal .libraryFooter > div:last-child { margin-top: 0 !important; flex-wrap: nowrap !important; }
  #libraryModal .libraryFooter > div:last-child button { flex: 1 1 auto; }
}
/* A2-16 / 4.3: Close-X auf Mobile oben rechts statt unter dem Titel */
@media (max-width: 820px) {
  .modalHead { position: relative; }
  .modalHead > div:first-child { padding-right: 46px; }
  .modalHead > button, .modalHead button[id^="close"] { position: absolute !important; top: 14px !important; right: 14px !important; align-self: auto !important; margin: 0 !important; }
}
/* A2-14: Fokusring auf Close-Buttons dezenter (sichtbar, aber harmonisch) */
.modalHead > button:focus-visible, button[id^="close"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand-accent, #3d7bff) 60%, transparent) !important; outline-offset: 2px !important; }
/* A2-17: iOS-sichere Modal-Höhe (dvh statt vh, mit vh-Fallback) */
@supports (height: 100dvh) { .modalBackdrop .modal { height: min(90dvh, 960px); } }
/* A1-18: Sentinel der virtualisierten Spieleauswahl (spannt alle Grid-Spalten). */
.librarySentinel { grid-column: 1 / -1; height: 1px; }

/* === Spiel-Detail-Layout v2 ============================================= */
/* Cover ↔ (Bibliotheksstatus+Meine Bewertung) und Bibliothek ↔ Notizen auf
   geteilten Grid-Reihen → aligniert; „In Community-Listen" entfernt. */
.modalBackdrop .modal.gameDetailModal .gameDetailBody.gameDetailBodyV2 {
  grid-template-columns: 220px minmax(0, 1fr) !important;
  grid-template-areas:
    "title title"
    "cover blocks"
    "biblio notes"
    "rank rank"
    "act act" !important;
  align-items: start;
  gap: 18px 22px !important;
}
.gameDetailBodyV2 > .gdTitle { grid-area: title; }
.gameDetailBodyV2 > .gdCover { grid-area: cover; align-self: start; }
.gameDetailBodyV2 > .gdBlocks { grid-area: blocks; display: grid; gap: 16px; align-content: start; min-width: 0; }
/* Bibliotheksstatus + Meine Bewertung nebeneinander (ältere Version, #87) */
@media (min-width: 760px) {
  .gameDetailBodyV2 > .gdBlocks { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
  .gameDetailBodyV2 > .gdBlocks .gameDetailStatusGrid { grid-template-columns: 1fr !important; }
}
.gameDetailBodyV2 > .gdBiblio { grid-area: biblio; align-self: start; }
/* „Bibliothek"-Box sauberer ausrichten (#87) */
body .gameDetailSummaryRow { display: grid !important; grid-template-columns: 96px 1fr; gap: 10px; align-items: baseline; padding: 6px 0 !important; }
body .gameDetailSummaryRow .gameDetailSummaryLabel { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
body .gameDetailSummaryRow .gameDetailSummaryValue { text-align: left !important; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gameDetailBodyV2 > .gdNotes { grid-area: notes; display: grid; }
.gameDetailBodyV2 > .gameDetailRankingBlock { grid-area: rank; }
.gameDetailBodyV2 > .gdActions { grid-area: act; }
.gameDetailBodyV2 .gdNotes .gameDetailNotesBlock { display: flex; flex-direction: column; height: 100%; }
.gameDetailBodyV2 .gdNotes .gameDetailNotes { flex: 1; min-height: 150px; }
@media (max-width: 900px) {
  .modalBackdrop .modal.gameDetailModal .gameDetailBody.gameDetailBodyV2 {
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" "cover" "blocks" "biblio" "notes" "rank" "act" !important;
  }
  .gameDetailBodyV2 > .gdCover { max-width: 220px; }
}
/* Phone: Cover NICHT dominant — kompakt neben dem Titel, Rest full-width (Design-Audit P1). */
@media (max-width: 560px) {
  .modalBackdrop .modal.gameDetailModal .gameDetailBody.gameDetailBodyV2 {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    grid-template-areas: "cover title" "blocks blocks" "biblio biblio" "notes notes" "rank rank" "act act" !important;
    gap: 12px 14px !important;
  }
  .gameDetailBodyV2 > .gdCover { max-width: 96px !important; align-self: center; }
  .gameDetailBodyV2 > .gdTitle { align-self: center; }
}
/* Missing-Cover-Placeholder: nie flache schwarze Fläche, sondern dezenter Verlauf + Rahmen. */
.gameDetailBodyV2 > .gdCover { border: 1px solid var(--border); background-color: #12151d; }

/* #4: Info-Icon auf den Library-Kacheln (→ Spiel-Detail; öffnet kein Toggle). */
.libInfoBtn { position: absolute; top: 8px; right: 8px; z-index: 3; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(8,11,17,.6); border: 1px solid rgba(255,255,255,.18); color: #eaf2ff; cursor: pointer; opacity: 0; transition: opacity .12s ease, background .12s ease; }
.libraryTile:hover .libInfoBtn, .libInfoBtn:focus-visible { opacity: 1; }
.libInfoBtn:hover { background: rgba(8,11,17,.88); }
.libInfoBtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse) { .libInfoBtn { opacity: 1; } }   /* Touch: immer sichtbar */

/* #2: Brand-Block ohne Untertitel → Logo + Name vertikal zentriert. */
.brandBlock { align-items: center !important; }

/* #5: Footer-„Fertig" als richtiger Button (die id beginnt mit „close" und erbt
   sonst die X-Button-Regel mit padding:0 → wirkte wie Text). */
#closeMyLibraryFooterBtn, #closeListsFooterBtn { padding: 11px 22px !important; line-height: normal !important; min-height: 44px; width: auto !important; }

/* === Spiele entdecken (Discover) + Paywall =============================== */
.discoverWrap { display: flex; flex-direction: column; gap: 22px; }
/* Discover-Wizard (#82) */
.discoverWizardIntro {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, #7c4dff 22%, #11141d), color-mix(in srgb, #19c8e6 12%, #11141d));
  border: 1px solid color-mix(in srgb, #7c4dff 45%, var(--border)); box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.dwIntroIcon { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.1); color: #ffe48a; }
.dwIntroIcon svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.dwIntroText { flex: 1 1 auto; min-width: 180px; }
.dwIntroTitle { font-size: 17px; font-weight: 900; }
.dwIntroSub { font-size: 13px; color: color-mix(in srgb, #fff 78%, transparent); margin-top: 3px; }
.dwStartBtn { flex: 0 0 auto; }
.discoverWizardCard { padding: 18px 20px; border-radius: 18px; background: #12151d; border: 1px solid var(--border); }
.dwProgress { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-accent); }
.dwQuestion { font-size: 18px; font-weight: 900; margin: 6px 0 14px; }
.dwOptions { display: flex; flex-wrap: wrap; gap: 9px; }
.dwOpt {
  padding: 10px 16px; border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 700;
  border: 1px solid var(--border); background: #0e1119; color: var(--text); transition: border-color .12s ease, background .12s ease;
}
.dwOpt:hover { border-color: color-mix(in srgb, var(--brand-accent) 50%, var(--border)); }
.dwOpt.sel { color: #fff; border-color: color-mix(in srgb, var(--brand-accent) 70%, transparent); background: color-mix(in srgb, var(--brand-accent) 26%, #0e1119); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-accent) 40%, transparent); }
.dwNav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.dwBack { background: none; border: 1px solid var(--border); color: var(--muted); height: 38px; padding: 0 16px; border-radius: 999px; cursor: pointer; font-weight: 700; }
.dwBack:hover { color: var(--text); }
.dwNav .primary { padding: 0 20px; }
.discoverWizardResults .dwResultsHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.discoverSection .menuSectionTitle { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.premiumBadge { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; color: #1a1205; background: linear-gradient(135deg, #ffd76a, #f5a623); }
.discoverGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.discoverCard { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.discoverCardMain { display: flex; flex-direction: column; gap: 6px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; min-width: 0; }
.discoverCover { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; background-size: cover; background-position: center; background-color: #0b0e15; border: 1px solid var(--border); }
.discoverCardMain:hover .discoverCover { outline: 2px solid color-mix(in srgb, var(--brand-accent, #3d7bff) 65%, transparent); outline-offset: 1px; }
.discoverCardBody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.discoverCardTitle { font-size: 13px; font-weight: 800; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.discoverWhy { font-size: 11px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.discoverAddBtn { align-self: flex-start; font-size: 11px !important; padding: 5px 10px !important; border-radius: 999px !important; }
.discoverDuelSuggest { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12)); }
.discoverDuelCover { width: 54px; height: 72px; flex: 0 0 auto; border-radius: 8px; background-size: cover; background-position: center; background-color: #0b0e15; border: 1px solid var(--border); }
.discoverVs { font-weight: 900; color: var(--muted); font-size: 13px; }
.discoverDuelMeta { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.discoverDuelTitles { font-weight: 700; font-size: 13px; }
.discoverDuelBtns { display: flex; gap: 8px; flex-wrap: wrap; }
.discoverLock { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, #f5a623 35%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, #f5a623 12%, #11141c), #0e1118); }
.discoverLockIcon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, #f5a623 22%, #11141c); color: #ffd76a; }
.discoverLockIcon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.discoverLockText { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.discoverLockText strong { color: var(--text); }
.discoverLockText span { color: var(--muted); font-size: 13px; }
.modalBackdrop .modal.upgradeModalSurface { width: min(480px, 96vw) !important; height: auto !important; max-height: min(92vh, 760px) !important; }
.upgradeFeatures { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.upgradeFeatures li { position: relative; padding-left: 26px; color: var(--text); }
.upgradeFeatures li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #ffd76a; font-weight: 900; }
.upgradeNote { display: none; color: var(--muted); margin: 4px 0 0; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.upgradeNote.upgradeNoteShown { display: block; }
.upgradeSecondaryRow { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.upgradeDevToggle { opacity: .6; font-size: 12px; }
.upgradeContext { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #f5a623 12%, #11141c); border: 1px solid color-mix(in srgb, #f5a623 30%, var(--border)); color: var(--text); font-weight: 700; }
.upgradeContext[hidden] { display: none; }

/* Phase 3: Tarif-Auswahl (monatlich / jährlich) */
.upgradePlans { display: flex; gap: 10px; margin: 6px 0 2px; }
.modalBackdrop .modal .upgradePlans .upgradePlanBtn {
  position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 0; height: auto !important; padding: 14px 12px !important; border-radius: 14px; text-transform: none;
}
.upgradePlanBtn .upgradePlanName { font-size: 13px; font-weight: 800; letter-spacing: .01em; }
.upgradePlanBtn .upgradePlanPrice { font-size: 12px; font-weight: 600; opacity: .92; }
.upgradePlanBtn .upgradePlanBadge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px;
  color: #1a1205; background: linear-gradient(135deg, #ffd76a, #f5a623); box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
/* Jährlich als empfohlene Option hervorheben (passend zum „Bestes Angebot"-Badge) */
.modalBackdrop .modal .upgradePlans #upgradeYearlyBtn { box-shadow: 0 0 0 2px #ffd76a, 0 8px 22px rgba(245,166,35,.22); }
/* Mobil gestapelt: genug Abstand, damit das Badge nicht in die Monats-Karte ragt. */
@media (max-width: 480px) { .upgradePlans { flex-direction: column; gap: 22px; margin-top: 12px; } }

/* Phase 3: Premium-Aktion im Konto-Modal */
.accountPremiumBtn {
  width: 100%; margin-top: 4px; padding: 11px 16px; border-radius: 12px; cursor: pointer; font-weight: 800; font-size: 13px;
  color: #1a1205; border: none; background: linear-gradient(135deg, #ffd76a, #f5a623); transition: filter .15s ease, transform .05s ease;
}
.accountPremiumBtn:hover { filter: brightness(1.05); }
.accountPremiumBtn:active { transform: translateY(1px); }
.accountPremiumBtn[hidden] { display: none; }

/* --- Statistiken (Premium-Mehrwert) -------------------------------------- */
.statsWrap { display: flex; flex-direction: column; gap: 18px; }
/* Basiswert-Karten mit Icon-Chip + Akzentfarbe */
.statsCards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.statsCard {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc, #3d7bff) 12%, #12151d), #12151d);
  border: 1px solid color-mix(in srgb, var(--sc, #3d7bff) 30%, var(--border)); border-radius: 16px; padding: 14px 15px;
}
.statsCardIcon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--sc, #3d7bff) 24%, transparent); color: color-mix(in srgb, var(--sc, #3d7bff) 88%, #fff); }
.statsCardIcon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.statsCard:nth-child(3) .statsCardIcon svg { fill: currentColor; stroke: none; }
.statsCardText { min-width: 0; }
.statsCardValue { font-size: 26px; font-weight: 900; line-height: 1; color: var(--text); }
.statsCardLabel { margin-top: 4px; font-size: 12px; color: var(--muted); }
/* Top-Spiel als Hero mit Hintergrundbild */
.statsTopGame { display: flex; align-items: center; gap: 16px; background: linear-gradient(90deg, #11141c, #161a24); border: 1px solid color-mix(in srgb, #f5b94a 30%, var(--border)); border-radius: 16px; padding: 16px 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.statsTopGameCover { width: 64px; height: 86px; flex: 0 0 auto; border-radius: 10px; background-size: cover; background-position: center; box-shadow: 0 6px 18px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14); }
.statsTopGameMeta { min-width: 0; }
.statsTopGameLabel { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: #f5d488; }
.statsTopGameMedal { font-size: 13px; }
.statsTopGameName { display: block; background: none; border: none; padding: 3px 0 0; color: #fff; font-size: 19px; font-weight: 900; cursor: pointer; text-align: left; line-height: 1.1; }
.statsTopGameName:hover { color: var(--brand-accent); }
.statsTopGameScore { margin-top: 4px; font-size: 14px; font-weight: 800; color: #7fe3f0; }
.statsBlock { background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 16px; padding: 15px 17px; }
.statsBlockTitle { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 12px; letter-spacing: .01em; }
.statsBars { display: flex; flex-direction: column; gap: 9px; }
.statsBarRow { display: grid; grid-template-columns: 100px 1fr 32px; align-items: center; gap: 10px; }
.statsBarLabel { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statsBarTrack { height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.statsBarFill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #19c8e6, #3d7bff 60%, #7c4dff); }
.statsBarVal { font-size: 12px; font-weight: 800; color: var(--text); text-align: right; }
.statsTop { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.statsTopItem { display: flex; align-items: center; gap: 10px; }
.statsTopRank { flex: 0 0 22px; text-align: center; font-weight: 900; color: var(--muted); font-size: 13px; }
.statsTopCover { width: 30px; height: 40px; flex: 0 0 auto; border-radius: 5px; background-size: cover; background-position: center; }
.statsTopName { flex: 1 1 auto; min-width: 0; background: none; border: none; padding: 0; text-align: left; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statsTopName:hover { color: var(--brand-accent); }
.statsTopScore { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #7fe3f0; }
@media (max-width: 640px) {
  .statsCards { grid-template-columns: repeat(2, 1fr); }
  .statsBarRow { grid-template-columns: 78px 1fr 26px; }
}

/* --- Backup & Export (Konto-Modal) -------------------------------------- */
.accountBackup { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.accountBackupHead { display: flex; align-items: center; gap: 8px; }
.accountBackupHead #accountBackupTitle { font-weight: 800; color: var(--text); }
.accountBackupDesc { margin: 4px 0 9px; }
.accountBackupBtns { display: flex; gap: 8px; flex-wrap: wrap; }
.accountBackupBtn {
  flex: 1 1 0; min-width: 130px; padding: 9px 12px; border-radius: 11px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--text);
  background: rgba(255,255,255,.05); border: 1px solid var(--border); transition: border-color .15s ease, background .15s ease;
}
.accountBackupBtn:hover { background: rgba(255,255,255,.09); border-color: var(--brand-ring); }

/* --- Steam (Account-Sektion + Import-Vorschau) ------------------------ */
.accountSteam { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.accountSteam #steamSectionTitle { font-weight: 800; color: var(--text); }
.steamConnRow { display: flex; align-items: center; gap: 12px; margin: 9px 0; }
.steamAvatar { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; background-size: cover; background-position: center; background-color: #15171f; border: 1px solid rgba(255,255,255,.12); }
.steamConnInfo { min-width: 0; flex: 1 1 auto; }
.steamPersona { font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steamActions { display: flex; gap: 8px; flex-wrap: wrap; }
.steamDanger { color: var(--danger, #e5707a); }
.steamDanger:hover { border-color: var(--danger, #e5707a); }
#steamPrivacyNote { margin-top: 8px; }
.steamImportBody { display: flex; flex-direction: column; gap: 10px; }
.steamBanner { font-weight: 700; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.steamUpsell { font-size: 13px; color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, var(--border)); border-radius: 11px; padding: 8px 11px; }
.steamImportList { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.steamRow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 11px; background: #12151d; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.steamRow:hover { border-color: var(--brand-ring); }
.steamRow.sel { border-color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 10%, #12151d); }
.steamRowCb { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--brand-accent); }
.steamRowCover { width: 34px; height: 46px; flex: 0 0 auto; border-radius: 6px; background-size: cover; background-position: center; background-color: #15171f; border: 1px solid rgba(255,255,255,.12); }
.steamRowMain { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.steamRowName { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steamRowMeta { font-size: 12px; color: var(--muted); }
.steamFooterBtns { display: flex; gap: 8px; align-items: center; }
.myLibSteamBtn {
  width: 100%; padding: 10px 12px; border-radius: 11px; cursor: pointer; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  color: var(--text); background: color-mix(in srgb, var(--brand-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 40%, var(--border)); transition: border-color .15s ease, background .15s ease;
}
.myLibSteamBtn:hover { background: color-mix(in srgb, var(--brand-accent) 22%, transparent); border-color: var(--brand-accent); }
.myLibSteamBtn .steamGlyph { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- „Meine Sammlung"-Tabs (Spiele | Listen) -------------------------- */
.collTabs { display: flex; gap: 4px; margin: 4px 0 0; border-bottom: 1px solid var(--border); }
.collTab {
  flex: 1 1 0; padding: 11px 12px; cursor: pointer; font-size: 14px; font-weight: 800; line-height: 1;
  color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.collTab:hover { color: var(--text); }
.collTab.active { color: var(--text); border-bottom-color: var(--brand-accent); }
.collPanel[hidden] { display: none !important; }   /* schlägt .modalBody-Anzeigeregeln */
.steamLoading { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: rgba(6,8,12,.72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.steamLoading[hidden] { display: none; }
.steamLoadingCard { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 30px; border-radius: 16px; background: #12151d; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.steamSpinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--brand-accent) 30%, var(--border)); border-top-color: var(--brand-accent); animation: steamSpin .8s linear infinite; }
.steamLoadingText { font-weight: 700; color: var(--text); font-size: 14px; }
@keyframes steamSpin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .steamImportList { max-height: 46vh; }
  .steamActions .accountBackupBtn { min-width: 0; }
}

/* --- Rechtliches (Footer-Links + Legal-Modal) -------------------------- */
.footerLegal { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.legalLink { background: none; border: none; padding: 0; color: var(--muted); font-size: 12px; cursor: pointer; }
.legalLink:hover { color: var(--brand-accent); text-decoration: underline; }
.legalSep { color: var(--muted); opacity: .5; font-size: 12px; }
.modalBackdrop .modal.legalModalSurface { width: min(680px, 96vw) !important; height: auto !important; max-height: min(88vh, 820px) !important; }
.legalModalSurface .modalBody { overflow-y: auto; }
.legalDisclaimer { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, #f5a623 12%, #11141c); border: 1px solid color-mix(in srgb, #f5a623 30%, var(--border)); color: var(--text); }
.legalBody { color: var(--text); font-size: 14px; line-height: 1.55; }
.legalBody h3 { margin: 0 0 10px; font-size: 18px; }
.legalBody h4 { margin: 16px 0 4px; font-size: 14px; font-weight: 800; }
.legalBody p { margin: 6px 0; color: var(--muted); }
.legalBody ul { margin: 6px 0; padding-left: 18px; }
.legalBody li { margin: 4px 0; color: var(--muted); }
.legalBody strong { color: var(--text); }
.legalBody .legalNote { margin-top: 14px; font-size: 12px; color: var(--muted); font-style: italic; }

/* --- Wiederverwendbarer Leerzustand (Design-Audit P2) ----------------- */
.emptyState { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 34px 18px; }
.emptyStateIcon { width: 56px; height: 56px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--brand-accent); }
.emptyStateIcon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.emptyStateTitle { font-size: 17px; font-weight: 800; color: var(--text); }
.emptyStateText { font-size: 14px; color: var(--muted); max-width: 400px; line-height: 1.5; }
.emptyStateActions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.emptyStateBtn { padding: 10px 16px; border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 800; color: var(--text); background: rgba(255,255,255,.05); border: 1px solid var(--border); transition: border-color .15s ease, background .15s ease; }
.emptyStateBtn:hover { background: rgba(255,255,255,.09); border-color: var(--brand-ring); }
.emptyStateBtn.isPrimary { color: #fff; background: linear-gradient(135deg, #4f7cff, #7c4dff); border-color: transparent; }
.emptyStateBtn.isPrimary:hover { filter: brightness(1.06); }

/* --- Modal-Typografie-Tokens (Design-Audit P2) ------------------------ */
/* Konsistente Zeilenhöhe; lange Titel (z. B. „Spiele / Liste definieren",
   „Passwort zurücksetzen") brechen mobil nicht mehr übergroß um. */
.modalBackdrop .modalHead h2 { line-height: 1.18; }
@media (max-width: 560px) {
  .modalBackdrop .modalHead h2 { font-size: 22px !important; line-height: 1.22; }
  .modalBackdrop .modalHead .sub { font-size: 13.5px; }
}

/* Sehr kleine Screens: Library-Filter umbrechen statt Labels abzuschneiden (Design-Audit P1).
   Volle Labels „Kategorien"/„Plattformen" sichtbar; wrappt bei Bedarf in eine zweite Zeile. */
@media (max-width: 380px) {
  #libraryModal .libraryControls { display: flex !important; flex-wrap: wrap !important; align-items: stretch; }
  #libraryModal .libraryControls > #librarySearch,
  #libraryModal .libraryControls > #libraryCounter { flex: 1 1 100% !important; }
  #libraryModal .filterDropdown { flex: 1 0 auto !important; min-width: max-content !important; }
  #libraryModal .filterBtnLabel { overflow: visible !important; text-overflow: clip !important; }
}

/* --- Dynamische Startkarte (Roadmap 3.1) ------------------------------ */
.startCard {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  margin: 0 0 14px; padding: 16px 18px; border-radius: 16px; color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #3d7bff) 22%, #11141d), #11141d);
  border: 1px solid color-mix(in srgb, var(--accent, #3d7bff) 50%, var(--border));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent, #3d7bff) 16%, transparent);
  transition: border-color .15s ease, transform .12s ease;
}
.startCard:hover { border-color: var(--accent, #3d7bff); transform: translateY(-1px); }
.startCard .startCardIcon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent, #3d7bff) 24%, transparent); color: var(--accent, #3d7bff); }
.startCard .startCardIcon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.startCard .startCardText { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.startCard .startCardTitle { font-size: 16px; font-weight: 800; }
.startCard .startCardDesc { font-size: 13px; color: var(--muted); }
.startCard .startCardGo { flex: 0 0 auto; color: color-mix(in srgb, var(--accent, #3d7bff) 80%, #fff); }
.startCard .startCardGo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* PWA-Install-Hinweis (Roadmap 11) */
.pwaInstallHint {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1200;
  width: min(440px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 15px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent, #3d7bff) 26%, #11141d), #11141d);
  border: 1px solid color-mix(in srgb, var(--brand-accent, #3d7bff) 50%, var(--border));
  box-shadow: 0 18px 40px rgba(0,0,0,.45); color: var(--text);
  animation: pwaHintIn .25s ease;
}
@keyframes pwaHintIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pwaInstallIcon { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--brand-accent, #3d7bff) 24%, transparent); color: color-mix(in srgb, var(--brand-accent, #3d7bff) 88%, #fff); }
.pwaInstallIcon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pwaInstallText { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pwaInstallTitle { font-size: 14px; font-weight: 800; }
.pwaInstallDesc { font-size: 12px; color: var(--muted); }
.pwaInstallBtn { flex: 0 0 auto; height: 34px; padding: 0 15px; border-radius: 999px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--brand-accent, #3d7bff) 55%, var(--border)); background: color-mix(in srgb, var(--brand-accent, #3d7bff) 32%, #12151d); color: #fff; font-weight: 800; font-size: 13px; }
.pwaInstallBtn:hover { background: color-mix(in srgb, var(--brand-accent, #3d7bff) 44%, #12151d); }
.pwaInstallClose { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }
.pwaInstallClose:hover { color: var(--text); }

/* Steam-Upsell als Conversion-CTA (Roadmap 9.1) */
.steamUpsell { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.steamUpsell .steamUpsellText { flex: 1 1 240px; min-width: 0; }
.steamUpsell .steamUpsellBtn { flex: 0 0 auto; height: 34px; padding: 0 16px; }

/* Conversion-Nudge im Abschluss-Panel (Roadmap 9.1) */
.finishedNudge {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin: 12px auto 0; max-width: 540px; padding: 11px 16px; border-radius: 13px;
  border: 1px dashed color-mix(in srgb, var(--brand-accent, #3d7bff) 45%, var(--border));
  background: color-mix(in srgb, var(--brand-accent, #3d7bff) 8%, transparent);
}
.finishedNudge .finishedNudgeText { font-size: 13.5px; color: var(--text); }
.finishedNudge .finishedNudgeBtn {
  flex: 0 0 auto; height: 34px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--brand-accent, #3d7bff) 55%, var(--border));
  background: color-mix(in srgb, var(--brand-accent, #3d7bff) 20%, #12151d); color: #fff; font-weight: 700; font-size: 13px;
}
.finishedNudge .finishedNudgeBtn:hover { background: color-mix(in srgb, var(--brand-accent, #3d7bff) 30%, #12151d); }

/* Plattform-Duell-Chips (Roadmap 4) */
.modePlatforms { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.modePlatformChip {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border); background: #12151d; color: var(--text);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.modePlatformChip:hover { border-color: color-mix(in srgb, var(--brand-accent) 55%, var(--border)); background: color-mix(in srgb, var(--brand-accent) 12%, #12151d); }
.modePlatformCount { font-size: 11px; font-weight: 800; opacity: .75; border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; }

/* Sekundärer Demo-Einstieg unter der Startkarte (Roadmap 2.1) */
.startDemoBtn {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  margin: -6px 0 16px; padding: 11px 14px; border-radius: 13px; color: var(--text);
  background: color-mix(in srgb, var(--brand-accent, #3d7bff) 7%, transparent);
  border: 1px dashed color-mix(in srgb, var(--brand-accent, #3d7bff) 42%, var(--border));
  transition: border-color .15s ease, background .15s ease;
}
.startDemoBtn:hover { border-color: var(--brand-accent, #3d7bff); background: color-mix(in srgb, var(--brand-accent, #3d7bff) 12%, transparent); }
.startDemoBtn .startDemoIcon { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--brand-accent, #3d7bff) 18%, transparent); color: color-mix(in srgb, var(--brand-accent, #3d7bff) 85%, #fff); }
.startDemoBtn .startDemoIcon svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.startDemoBtn .startDemoText { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.startDemoBtn .startDemoTitle { font-size: 14px; font-weight: 700; }
.startDemoBtn .startDemoDesc { font-size: 12px; color: var(--muted); }

/* --- Geschmacks-Erklärung im Abschluss-Panel (Roadmap 4.1) ------------ */
.finishedTaste {
  margin: 4px auto 2px; max-width: 460px; padding: 9px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--text);
  background: color-mix(in srgb, var(--brand-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 36%, var(--border));
}
.finishedTaste[hidden] { display: none; }