* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: "Segoe UI", Arial, sans-serif; }

body {
  background-color: #0b0707;
  background-image:
    radial-gradient(ellipse 480px 320px at 50% -8%, rgba(255,122,60,0.16), transparent 60%),
    radial-gradient(ellipse 400px 400px at 100% 100%, rgba(155,61,219,0.10), transparent 65%),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><path d='M0 100 L20 92 L30 112 L52 102 L65 124 L90 110 L107 132 L134 116 L155 136 L180 122' stroke='%23ff7a3c' stroke-width='1' fill='none' opacity='0.09'/><path d='M45 0 L38 25 L57 34 L48 62 L70 72 L61 100' stroke='%23ff7a3c' stroke-width='1' fill='none' opacity='0.06'/><path d='M135 0 L144 20 L126 31 L132 53' stroke='%239b3ddb' stroke-width='1' fill='none' opacity='0.07'/><circle cx='30' cy='112' r='1.5' fill='%23ff7a3c' opacity='0.3'/><circle cx='134' cy='116' r='1.1' fill='%239b3ddb' opacity='0.25'/><circle cx='168' cy='35' r='1' fill='%23ff7a3c' opacity='0.18'/></svg>");
  background-repeat: no-repeat, no-repeat, repeat;
  color: #f5ece6;
  -webkit-app-region: drag;
}

#app { display: flex; flex-direction: column; height: 100vh; padding: 10px; }

header {
  display: flex; align-items: center; justify-content: space-between;
  -webkit-app-region: drag;
}
header h1 { font-size: 16px; margin: 4px 0; color: #ffb37a; }
#settingsToggle {
  -webkit-app-region: no-drag;
  background: none; border: none; color: #b3a39c; font-size: 18px; cursor: pointer;
}

#settingsPanel {
  -webkit-app-region: no-drag;
  background: linear-gradient(180deg, #221715, #1a1212);
  border: 1px solid #3a2620;
  box-shadow: inset 0 1px 0 rgba(255,200,170,0.07);
  border-radius: 8px; padding: 10px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
#settingsPanel.hidden { display: none; }
#settingsPanel label { font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
#settingsPanel input, #settingsPanel select {
  background: #16100d; border: 1px solid #3a2620; color: #fff;
  padding: 5px 7px; border-radius: 5px; font-size: 13px;
}
.settingsActions { display: flex; gap: 8px; margin-top: 4px; }
#settingsPanel .hint { font-size: 11px; color: #9c8882; margin: 4px 0 0; }

.seasonStartRow { display: flex; gap: 6px; }
.seasonStartRow input { flex: 1; }
#resetSeasonStart {
  flex-shrink: 0; font-size: 11px; padding: 5px 8px;
  background: #2a1c17; color: #ccc;
}
#resetSeasonStart:hover { background: #3a2620; }

button {
  -webkit-app-region: no-drag;
  background: #ff7a3c; color: #1f0e04; border: none; padding: 6px 10px;
  border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 600;
}
button:hover { background: #ff9159; }
button.danger { background: #9c2330; color: #fff; }
button.danger:hover { background: #c43b4a; }

#statusBar {
  -webkit-app-region: no-drag;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #b3a39c; margin-bottom: 8px;
}

#summary {
  -webkit-app-region: no-drag;
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
#summaryText { font-size: 12px; color: #ffb37a; font-weight: 600; }
#overallStatsText { font-size: 11px; color: #a89690; }

/* ---------- Tages-Meta: Trio-Combos & Augment-Synergien ---------- */

#metaSection {
  -webkit-app-region: no-drag;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid #2a1c17;
}
#metaSection.hidden { display: none; }
.metaTitle { font-size: 13px; color: #ffb37a; margin: 0 0 8px; }
.metaColumns { display: flex; gap: 8px; }
.metaCol {
  flex: 1; min-width: 0; background: rgba(255,122,60,0.035);
  border: 1px solid #2a1c17; border-radius: 6px; padding: 6px 8px;
  max-height: 160px; overflow-y: auto;
}
.metaCol h3 { font-size: 11px; color: #a89690; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.metaItem { font-size: 10px; line-height: 1.4; padding: 4px 0; border-bottom: 1px solid rgba(255,122,60,0.07); }
.metaItem:last-child { border-bottom: none; }
.metaTier { color: #ffb37a; font-weight: 700; margin-right: 4px; }
.metaName { color: #f5ece6; font-weight: 600; }
.metaPartners { color: #a89690; display: block; }
.metaUpdated { font-size: 10px; color: #8a766f; margin: 6px 0 0; text-align: right; }
.metaCol::-webkit-scrollbar { width: 4px; }
.metaCol::-webkit-scrollbar-thumb { background: #4a3a34; border-radius: 2px; }
#filterInput {
  flex: 1; background: #16100d; border: 1px solid #3a2620; color: #fff;
  padding: 4px 7px; border-radius: 5px; font-size: 12px;
}
.checkboxLabel { font-size: 11px; color: #b3a39c; display: flex; align-items: center; gap: 4px; }
#sortMode {
  background: #16100d; border: 1px solid #3a2620; color: #fff;
  padding: 4px 6px; border-radius: 5px; font-size: 11px;
}

/* ---------- Header: mehrere Buttons rechts ---------- */
.headerBtns { display: flex; gap: 4px; -webkit-app-region: no-drag; }

/* ---------- Freunde-Panel ---------- */
#friendsPanel {
  -webkit-app-region: no-drag;
  background: linear-gradient(180deg, #221715, #1a1212);
  border: 1px solid #3a2620;
  box-shadow: inset 0 1px 0 rgba(255,200,170,0.07);
  border-radius: 8px; padding: 10px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
#friendsPanel.hidden { display: none; }
#friendsPanel label { font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
#friendsPanel input {
  background: #16100d; border: 1px solid #3a2620; color: #fff;
  padding: 5px 7px; border-radius: 5px; font-size: 13px;
}
#friendsList { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#friendsList li {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,122,60,0.05); border-radius: 5px; padding: 5px 8px; font-size: 12px;
}
#friendsList .removeFriendBtn {
  background: none; border: none; color: #f87171; cursor: pointer; font-size: 13px; padding: 0 4px;
}
#friendsList .friendEmpty { color: #9c8882; font-size: 12px; padding: 4px 0; }

.suggestList { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 120px; overflow-y: auto; }
.suggestList li {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,122,60,0.07); border: 1px solid #2a1c17;
  border-radius: 5px; padding: 5px 8px; font-size: 12px; cursor: pointer;
}
.suggestList li:hover { background: rgba(255,122,60,0.18); }
.suggestList .suggestAdd { color: #ffb37a; font-weight: 700; font-size: 13px; }
.suggestList .suggestEmpty { color: #9c8882; cursor: default; }
.suggestList .suggestEmpty:hover { background: rgba(255,122,60,0.07); }
.suggestList::-webkit-scrollbar { width: 4px; }
.suggestList::-webkit-scrollbar-thumb { background: #4a3a34; border-radius: 2px; }

/* ---------- Sprachumschalter: fest oben rechts ---------- */
#langPanel {
  position: fixed; top: 12px; right: 12px; z-index: 50;
}
#langToggle {
  background: #221715; color: #ffb37a; border: 1px solid #3a2620;
  border-radius: 16px; width: auto; min-width: 40px; height: 32px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
#langToggle:hover { background: #2a1c17; }

/* ---------- Ranking-Panel: jetzt feste linke Spalte in #mainRow ---------- */
#rankingPanel {
  background: rgba(20, 13, 11, 0.97); border: 1px solid #3a2620;
  border-radius: 10px; padding: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; min-width: 0;
}
#rankingPanel.hidden { display: none; }
.rankingTabs { display: flex; gap: 6px; margin-bottom: 10px; }
.rankingTab {
  flex: 1; background: #221715; color: #b3a39c; border: 1px solid #3a2620;
  padding: 8px 10px; border-radius: 6px; font-size: 13.5px; cursor: pointer;
}
.rankingTab.active { background: #ff7a3c; color: #1f0e04; border-color: #ff7a3c; }

.rankingCategoryTabs { display: flex; gap: 4px; margin-bottom: 10px; }
.rankCatTab {
  flex: 1; background: #16100d; color: #9c8882; border: 1px solid #2a1c17;
  padding: 5px 4px; border-radius: 5px; font-size: 11px; cursor: pointer;
}
.rankCatTab.active { background: #2a1c17; color: #ffb37a; border-color: #ff7a3c; }

#rankingList {
  list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 5px;
}
#rankingList li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; padding: 7px 9px; border-radius: 6px;
  background: rgba(255,122,60,0.035);
}
#rankingList li.me { background: rgba(255,122,60,0.22); border: 1px solid #ff7a3c; }
#rankingList .rankNum { width: 22px; flex-shrink: 0; color: #a89690; font-weight: 700; text-align: right; }
.rankBestChampIcon {
  width: 22px; height: 22px; border-radius: 4px; border: 1px solid #4a3a34;
  flex-shrink: 0; margin-left: auto;
}

/* Podium-Faerbung nach Platzierung - Rahmen + Nummer in der jeweiligen
   Farbe, mit sanft pulsierendem Funkel-Glow (analog zu den Champion-
   Tier-Raendern), damit Platz 1-3 wirklich auffallen statt nur grau/
   blass zu wirken. */
@keyframes rankGlowGold {
  0%, 100% { box-shadow: inset 0 0 0 1px #ffcc33, 0 0 4px rgba(255, 204, 51, 0.5); }
  50%      { box-shadow: inset 0 0 0 1px #fff066, 0 0 11px rgba(255, 204, 51, 1); }
}
@keyframes rankGlowSilver {
  0%, 100% { box-shadow: inset 0 0 0 1px #cfe3ff, 0 0 3px rgba(207, 227, 255, 0.5); }
  50%      { box-shadow: inset 0 0 0 1px #eaf3ff, 0 0 9px rgba(207, 227, 255, 0.95); }
}
@keyframes rankGlowBronze {
  0%, 100% { box-shadow: inset 0 0 0 1px #e08a3f, 0 0 3px rgba(224, 138, 63, 0.45); }
  50%      { box-shadow: inset 0 0 0 1px #f0a85c, 0 0 8px rgba(224, 138, 63, 0.85); }
}

#rankingList li.rank-gold {
  background: rgba(255, 204, 51, 0.12); border: 1px solid #ffcc33;
  animation: rankGlowGold 2s ease-in-out infinite;
  position: relative;
}
#rankingList li.rank-gold .rankNum, #rankingList li.rank-gold .rankName { color: #ffcc33; }
#rankingList li.rank-gold::after {
  content: "✦";
  position: absolute; top: -5px; right: 4px;
  font-size: 9px; color: #fff066; text-shadow: 0 0 5px #ffcc33;
  animation: tierSparkleSpin 2.6s linear infinite;
  pointer-events: none;
}

#rankingList li.rank-silver {
  background: rgba(207, 227, 255, 0.12); border: 1px solid #cfe3ff;
  animation: rankGlowSilver 2.3s ease-in-out infinite;
}
#rankingList li.rank-silver .rankNum, #rankingList li.rank-silver .rankName { color: #dfeaff; }

#rankingList li.rank-bronze {
  background: rgba(224, 138, 63, 0.12); border: 1px solid #e08a3f;
  animation: rankGlowBronze 2.6s ease-in-out infinite;
}
#rankingList li.rank-bronze .rankNum, #rankingList li.rank-bronze .rankName { color: #e08a3f; }

@media (prefers-reduced-motion: reduce) {
  #rankingList li.rank-gold, #rankingList li.rank-silver, #rankingList li.rank-bronze { animation: none; }
  #rankingList li.rank-gold::after { animation: none; }
}

/* Running Gag: schlechte Holz-/Schlamm-Farbe, solange dieser Account
   nicht selbst auf dem Podium steht (siehe app.js RUNNING_GAG_RIOTID). */
#rankingList li.rank-lizard {
  background: rgba(92, 64, 27, 0.25); border: 1px solid #5c401b;
}
#rankingList li.rank-lizard .rankNum, #rankingList li.rank-lizard .rankName { color: #8a6a3a; }
#rankingList .rankName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f5ece6; }
#rankingList .rankWins { color: #4ade80; font-weight: 700; flex-shrink: 0; }
#rankingList .rankEmpty { color: #9c8882; padding: 6px 2px; font-size: 11px; }
#rankingList::-webkit-scrollbar { width: 4px; }
#rankingList::-webkit-scrollbar-thumb { background: #4a3a34; border-radius: 2px; }
#rankingList li.clickable { cursor: pointer; }
#rankingList li.clickable:hover { background: rgba(255,122,60,0.16); }
.opggLink {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1px solid #3a2620; border-radius: 4px; padding: 2px;
  background: #16100d;
}
.opggLink img { width: 16px; height: 16px; object-fit: contain; display: block; }
.opggLink:hover { border-color: #ff7a3c; }
.rankingUpdateNote { font-size: 12px; color: #9c8882; margin: 10px 0 0; }

/* ---------- Spieler-Fortschritts-Modal (Klick auf Ranking-Eintrag) ---------- */
#playerViewOverlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 5, 4, 0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#playerViewOverlay.hidden { display: none; }
#playerViewBox {
  background: #1a1212; border: 1px solid #3a2620; border-radius: 10px;
  width: 100%; max-width: 480px; max-height: 85vh;
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
#playerViewHeader { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.playerViewHeaderBtns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
#playerViewAddFriend {
  font-size: 11px; padding: 5px 9px;
}
#playerViewAddFriend.hidden { display: none; }
#playerViewAddFriend.already {
  background: #2a1c17; color: #9c8882; cursor: default;
}
#playerViewAddFriend.already:hover { background: #2a1c17; }
#playerViewName { font-size: 16px; margin: 0; color: #ffb37a; }
#playerViewClose {
  background: none; border: none; color: #b3a39c; font-size: 16px; cursor: pointer;
  padding: 2px 6px;
}
#playerViewClose:hover { color: #fff; }
#playerViewSummary { font-size: 12px; color: #a89690; margin: 0; }
#playerViewFilter {
  background: #16100d; border: 1px solid #3a2620; color: #fff;
  padding: 5px 7px; border-radius: 5px; font-size: 12px;
}
#playerViewGrid {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px; padding-right: 2px;
}
#playerViewGrid::-webkit-scrollbar { width: 6px; }
#playerViewGrid::-webkit-scrollbar-thumb { background: #4a3a34; border-radius: 3px; }

#grid {
  -webkit-app-region: no-drag;
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px; padding-right: 2px;
}
#grid.hidden { display: none; }

/* ---------- Hauptzeile: Leaderboard | Grid/Detailansicht | Top-30-Trios ---------- */
#mainRow {
  flex: 1; min-height: 0; display: flex; gap: 10px;
}
#rankingPanel { flex: 0 0 17.85%; }
#mainRow #grid, #mainRow #champDetail { flex: 1 1 auto; min-width: 0; }
#top30Trio { flex: 0 0 8%; }

/* ---------- Top-30-Trio-Section (immer sichtbar, ausser bei offener Champion-Detailansicht) ---------- */
#top30Trio {
  -webkit-app-region: no-drag;
  background: linear-gradient(180deg, #1a1212, #150f0d);
  border: 1px solid #3a2620; border-radius: 6px;
  padding: 8px 10px;
  max-height: none; overflow: visible; /* komplett sichtbar, kein internes Scrollen */
}
#top30Trio.hidden { display: none; }
#top30Trio h3 {
  font-size: 13px; color: #ff7a3c; margin: 0 0 8px;
  text-transform: uppercase; letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  #mainRow { flex-direction: column; }
  #rankingPanel, #top30Trio { flex: 1 1 auto; }
}

.champ {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px; border-radius: 6px; background: rgba(255,122,60,0.035);
  position: relative;
}
.champ img {
  width: 48px; height: 48px; border-radius: 6px; border: 2px solid #4a3a34;
}
.champ.won img { border-color: #22c55e; }
.champ.lost img { border-color: #ef4444; opacity: 0.9; }
.champ.missing img { border-color: #555; opacity: 0.7; }
.champ span { font-size: 10px; text-align: center; line-height: 1.1; }
.champ.won span { color: #4ade80; }
.champ.lost span { color: #f87171; }
.champ.missing span { color: #9c8882; }

/* Win-Counter-Badge oben rechts auf dem Champion-Icon */
.winBadge {
  position: absolute; top: 1px; right: 1px;
  background: rgba(20, 13, 11, 0.92);
  color: #fff; font-size: 9px; font-weight: 700;
  min-width: 16px; height: 16px; line-height: 16px;
  text-align: center; border-radius: 8px; padding: 0 3px;
  border: 1px solid rgba(255,255,255,0.25);
}

/* Rahmen-Stufen ab bestimmter Win-Anzahl - der Aussenrahmen bleibt
   IMMER gruen (won), die Tier-Farbe wird als Innenlinie (inset
   box-shadow) hinzugefuegt, ueberlagert sich also nicht. Zusaetzlich
   pulsiert der Glow sanft (Funkel-Effekt). */
@keyframes tierGlowBronze {
  0%, 100% { box-shadow: inset 0 0 0 2px #cd7f32, 0 0 3px rgba(205, 127, 50, 0.45); }
  50%      { box-shadow: inset 0 0 0 2px #e29347, 0 0 8px rgba(205, 127, 50, 0.9); }
}
@keyframes tierGlowSilver {
  0%, 100% { box-shadow: inset 0 0 0 2px #c0c0c0, 0 0 4px rgba(192, 192, 192, 0.55); }
  50%      { box-shadow: inset 0 0 0 2px #e8e8e8, 0 0 10px rgba(220, 220, 220, 1); }
}
@keyframes tierGlowGold {
  0%, 100% { box-shadow: inset 0 0 0 2px #ffd700, 0 0 5px rgba(255, 215, 0, 0.65); }
  50%      { box-shadow: inset 0 0 0 2px #fff066, 0 0 12px rgba(255, 215, 0, 1); }
}

.champ.tier-bronze img {
  border-color: #22c55e;
  animation: tierGlowBronze 2.4s ease-in-out infinite;
}
.champ.tier-bronze .winBadge { background: #cd7f32; border-color: #a9682a; }

.champ.tier-silver img {
  border-color: #22c55e;
  animation: tierGlowSilver 2.1s ease-in-out infinite;
}
.champ.tier-silver .winBadge { background: #c0c0c0; color: #16100d; border-color: #9a9a9a; }

.champ.tier-gold img {
  border-color: #22c55e;
  animation: tierGlowGold 1.8s ease-in-out infinite;
}
.champ.tier-gold .winBadge { background: #ffd700; color: #16100d; border-color: #cca700; }

/* Zusaetzliches Funkel-Glitzern auf dem Gold-Tier - kleiner rotierender
   Lichtpunkt am Rand, fuer den hoechsten Status nochmal etwas Extra. */
@keyframes tierSparkleSpin {
  0%   { transform: rotate(0deg); opacity: 0.9; }
  50%  { opacity: 0.3; }
  100% { transform: rotate(360deg); opacity: 0.9; }
}
.champ.tier-gold {
  position: relative;
}
.champ.tier-gold::after {
  content: "✦";
  position: absolute;
  top: -3px; left: -3px;
  font-size: 9px;
  color: #fff066;
  text-shadow: 0 0 4px #ffd700;
  animation: tierSparkleSpin 2.6s linear infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .champ.tier-bronze img, .champ.tier-silver img, .champ.tier-gold img { animation: none; }
  .champ.tier-gold::after { animation: none; }
}

#grid::-webkit-scrollbar { width: 6px; }
#grid::-webkit-scrollbar-thumb { background: #4a3a34; border-radius: 3px; }

/* ---------- Diagnose ---------- */

.diagBox h3 { font-size: 13px; color: #ffb37a; margin: 0 0 6px; }
.diagHighlight { font-size: 12px; color: #4ade80; margin: 0 0 8px; }
.diagTable { width: 100%; border-collapse: collapse; font-size: 11px; }
.diagTable th, .diagTable td {
  border: 1px solid #3a2620; padding: 4px 6px; text-align: left;
}
.diagTable th { background: rgba(255,122,60,0.06); }
.diagRowArena { background: rgba(255,122,60,0.13); }

/* ---------- Champion Hover-Tooltip ---------- */

#champTooltip {
  position: fixed;
  z-index: 1000;
  background: rgba(20, 13, 11, 0.97);
  border: 1px solid #ff7a3c;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  max-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
#champTooltip.hidden { display: none; }
.tooltipTitle { font-weight: 700; color: #ffb37a; margin-bottom: 4px; font-size: 12px; }
.tooltipCount { color: #a89690; margin-bottom: 6px; }
.tooltipEmpty { color: #9c8882; }
.tooltipList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tooltipList li { padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.tooltipList li:last-child { border-bottom: none; padding-bottom: 0; }
.tooltipDate { color: #f5ece6; }
.tooltipList li.tooltipWin .tooltipDate { color: #f5ece6; font-weight: 600; }
.tooltipList li.tooltipLose .tooltipDate { color: #f5ece6; }
.placementBadge { font-weight: 700; margin-left: 4px; }
.placementWin {
  color: #4ade80; text-shadow: 0 0 6px rgba(74, 222, 128, 0.85);
}
.placementLose { color: #f87171; }
.tooltipMates { color: #a89690; font-size: 10px; margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tooltipMate { display: inline-flex; align-items: center; gap: 3px; }
.tooltipMate img {
  width: 16px; height: 16px; border-radius: 3px; border: 1px solid #4a3a34;
  flex-shrink: 0;
}
#champTooltip::-webkit-scrollbar { width: 4px; }
#champTooltip::-webkit-scrollbar-thumb { background: #555; border-radius: 2px; }



/* ---------- Champion-Detailansicht (Klick auf Champion-Kachel) ---------- */

#champDetail {
  -webkit-app-region: no-drag;
  flex: 1; overflow-y: auto; padding-right: 2px;
}
#champDetail.hidden { display: none; }
#champDetail::-webkit-scrollbar { width: 6px; }
#champDetail::-webkit-scrollbar-thumb { background: #4a3a34; border-radius: 3px; }

.detailGrid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  align-items: start;
}
.detailColMiddle { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 640px) {
  .detailGrid3 { grid-template-columns: 1fr; }
}

.detailHeader {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid #3a2620;
}
.detailHeader img {
  width: 40px; height: 40px; border-radius: 6px; border: 2px solid #ff7a3c;
}
.detailHeader h2 { flex: 1; font-size: 15px; margin: 0; color: #ffb37a; }

.backArrowBtn {
  width: 28px; height: 28px; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; border-radius: 50%;
}

.detailSection {
  background: linear-gradient(180deg, #1a1212, #150f0d);
  border: 1px solid #3a2620; border-radius: 6px; padding: 8px 10px;
}
.detailSection h3 {
  font-size: 11px; color: #ff7a3c; margin: 0 0 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.detailEmpty { font-size: 11px; color: #9c8882; margin: 0; }

.detailPartnerList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.detailPartnerList li {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,122,60,0.04); border-radius: 5px; padding: 4px 6px; font-size: 11px;
}
.detailPartnerGroup { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detailPartner { display: inline-flex; align-items: center; gap: 4px; color: #f5ece6; }
.detailPartner img { width: 18px; height: 18px; border-radius: 3px; border: 1px solid #4a3a34; flex-shrink: 0; }
.detailWinRate { color: #22c55e; font-weight: 700; flex-shrink: 0; }

.detailTagList {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.detailTagList li {
  background: rgba(255,122,60,0.08); border: 1px solid #3a2620;
  border-radius: 5px; padding: 3px 8px; font-size: 11px; color: #f5ece6;
}
.detailTagList li.clickableTag {
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.detailTagList li.clickableTag:hover {
  background: rgba(255,122,60,0.18); border-color: #ff7a3c;
}
.detailTagList li img {
  width: 28px; height: 28px; border-radius: 4px; display: block;
}
.detailTagList li:has(img) {
  padding: 3px; background: rgba(255,122,60,0.06);
}

.detailTrioList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.detailTrioList li {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,122,60,0.04); border-radius: 5px; padding: 5px 8px; font-size: 12.5px;
}
.detailTrioRank { width: 20px; flex-shrink: 0; color: #9c8882; font-weight: 700; text-align: right; font-size: 12.5px; }
.detailTrioNames { flex: 1; min-width: 0; color: #f5ece6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.detailTrioRank { width: 16px; flex-shrink: 0; color: #9c8882; font-weight: 700; text-align: right; }
.detailTrioNames { flex: 1; min-width: 0; color: #f5ece6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.detailStatCheck {
  background: rgba(34,197,94,0.10); border: 1px solid #22c55e;
  border-radius: 6px; padding: 7px 10px; font-size: 11px; color: #4ade80;
}

.detailSkillOrder {
  background: linear-gradient(180deg, #1a1212, #150f0d);
  border: 1px solid #3a2620; border-radius: 6px;
  padding: 7px 10px; font-size: 12px; color: #f5ece6;
}
.detailSkillOrderLabel {
  color: #ff7a3c; font-weight: 700; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: 0.04em; margin-right: 6px;
}
.detailEmptyInline { color: #9c8882; font-weight: 400; text-transform: none; }

.detailTactics { }
.detailTacticsList {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px;
}
.detailTacticsList li {
  position: relative; padding-left: 14px; font-size: 11.5px; color: #f5ece6; line-height: 1.4;
}
.detailTacticsList li::before {
  content: "•"; position: absolute; left: 0; color: #ff7a3c; font-weight: 700;
}