/* D6 is intentionally loaded after the historical phase cascades in draft.css. */
.mapwaehler { z-index: 110; overflow: visible; }
.mapwaehler-kasten {
  overflow: hidden;
  border-color: rgba(54, 139, 192, .78);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .62), 0 0 24px rgba(39, 155, 225, .13);
}
.mapwaehler-liste { overscroll-behavior: contain; }
.mapzeile-name {
  max-width: 100%; overflow: visible; text-overflow: clip;
  white-space: normal; overflow-wrap: anywhere;
}

.drafter-raster > .aktionsleiste .mapvorschau {
  min-height: 223px; padding: 0; overflow: visible;
  background: transparent; border: 0; border-radius: 8px; box-shadow: none;
}
.drafter-raster > .aktionsleiste .mapvorschau:hover:not(:disabled) {
  background: transparent; border: 0; box-shadow: none; transform: none;
}
.drafter-raster > .aktionsleiste .mapvorschau-bild {
  min-height: 213px; height: 213px; border: 0; border-radius: 8px;
  background: transparent; box-shadow: none;
}
.drafter-raster > .aktionsleiste .mapvorschau-medium { height: 213px; }
.mapvorschau-bild::after { display: none; }

.firstpick > .steuer-etikett { font-size: 13px; color: #e3f4ff; }
.firstpick .firstpick-schilde button { opacity: .64; filter: saturate(.78) brightness(.84); }
.firstpick .firstpick-schilde button:hover { opacity: .88; filter: saturate(1) brightness(.96); }
.firstpick .firstpick-schilde button.ist-aktiv {
  opacity: 1; filter: saturate(1.16) brightness(1.06); transform: scale(1.03);
}

.auswahl-kopf { margin-bottom: 4px; }
.filter-zuruecksetzen {
  display: grid; place-items: center; width: 34px; min-width: 34px;
  height: 34px; min-height: 34px; padding: 0;
  color: #8db7d1; background: var(--bg-3);
  border: 1px solid var(--rand); border-radius: 6px;
  transition: color .12s, border-color .12s, background .12s, transform .12s;
}
.filter-zuruecksetzen span[aria-hidden] { font-size: 17px; line-height: 1; }
.filter-zuruecksetzen:hover {
  color: #fff; border-color: var(--wir); background: rgba(25, 92, 132, .38);
  transform: rotate(-16deg);
}
.filter-zuruecksetzen:focus-visible { outline: 2px solid #8dd7ff; outline-offset: 2px; }
.gitter { padding-top: 11px; scroll-padding-top: 11px; }

/* Rarity is only a restrained visual undertone; cards never print its name. */
.kachel, .kachel.ist-limited { border-style: solid; }
.kachel[data-rarity="common"] { border-color: rgba(85, 130, 158, .48); }
.kachel[data-rarity="rare"] { border-color: rgba(52, 137, 232, .54); }
.kachel[data-rarity="super_rare"] { border-color: rgba(38, 177, 216, .52); }
.kachel[data-rarity="epic"] { border-color: rgba(156, 93, 218, .53); }
.kachel[data-rarity="mythic"] { border-color: rgba(206, 67, 126, .51); }
.kachel[data-rarity="legendary"] { border-color: rgba(217, 165, 48, .55); }
.kachel[data-rarity="ultra_legendary"] { border-color: rgba(238, 181, 47, .67); }
.kachel[data-rarity="rare"] > .kachel-klasse { background: rgba(20, 57, 101, .78); }
.kachel[data-rarity="super_rare"] > .kachel-klasse { background: rgba(13, 67, 86, .76); }
.kachel[data-rarity="epic"] > .kachel-klasse { background: rgba(67, 38, 91, .76); }
.kachel[data-rarity="mythic"] > .kachel-klasse { background: rgba(82, 28, 54, .76); }
.kachel[data-rarity="legendary"] > .kachel-klasse,
.kachel[data-rarity="ultra_legendary"] > .kachel-klasse { background: rgba(83, 62, 21, .74); }

/* Functional state priority: selected > banned > recommended > disabled > hover > rarity. */
.gitter .kachel:hover:not(.ist-gesperrt) {
  border-color: #69c8ff;
  box-shadow: 0 0 0 1px rgba(87, 191, 255, .24), 0 0 17px rgba(40, 165, 237, .22);
}
.gitter .kachel:focus-visible { outline: 2px solid #b4e6ff; outline-offset: 3px; z-index: 3; }
.gitter .kachel.ist-gesperrt { opacity: .42; }
.gitter .kachel.ist-empfohlen:not(.ist-gesperrt) {
  border-color: #44baff;
  box-shadow: 0 0 0 1px rgba(68, 186, 255, .3), 0 0 20px rgba(35, 153, 231, .25);
}
.gitter.ist-banmodus .kachel.ist-empfohlen:not(.ist-gesperrt) {
  border-color: #c0c8d1; box-shadow: 0 0 15px rgba(188, 199, 211, .15);
}
.gitter .kachel.ist-gebannt {
  opacity: .62; border-color: #ff5269; filter: grayscale(.72) saturate(.62);
  box-shadow: inset 0 0 0 1px rgba(255, 82, 105, .24);
}
.gitter .kachel.ist-ausgewaehlt { opacity: .84; filter: saturate(.78); }
.gitter .kachel.ist-ausgewaehlt.ist-eigener-pick {
  border-color: #38c7ff;
  box-shadow: 0 0 0 1px rgba(56, 199, 255, .36), 0 0 20px rgba(38, 174, 235, .28);
}
.gitter .kachel.ist-ausgewaehlt.ist-gegner-pick {
  border-color: #ff5d75;
  box-shadow: 0 0 0 1px rgba(255, 93, 117, .32), 0 0 18px rgba(233, 52, 82, .24);
}

body.ist-draftseite .aktionsleiste,
body.ist-draftseite .gitter,
body.ist-draftseite .brett,
body.ist-draftseite .panel,
body.ist-draftseite .mapwaehler-liste {
  scrollbar-width: thin;
  scrollbar-color: rgba(65, 117, 151, .52) rgba(3, 15, 25, .32);
}
body.ist-draftseite :is(.aktionsleiste, .gitter, .brett, .panel, .mapwaehler-liste)::-webkit-scrollbar {
  width: 6px; height: 6px;
}
body.ist-draftseite :is(.aktionsleiste, .gitter, .brett, .panel, .mapwaehler-liste)::-webkit-scrollbar-track {
  background: rgba(3, 15, 25, .32); border-radius: 99px;
}
body.ist-draftseite :is(.aktionsleiste, .gitter, .brett, .panel, .mapwaehler-liste)::-webkit-scrollbar-thumb {
  background: rgba(65, 117, 151, .52); border-radius: 99px;
}

@media (max-width: 1100px) {
  .mapwaehler { display: flex; align-items: center; justify-content: center; padding: 12px; }
  .mapwaehler-kasten {
    position: static; width: min(460px, calc(100vw - 24px)); max-height: min(78dvh, 650px);
  }
  .drafter-raster > .aktionsleiste .mapvorschau { min-height: 202px; }
  .drafter-raster > .aktionsleiste .mapvorschau-bild,
  .drafter-raster > .aktionsleiste .mapvorschau-medium { min-height: 196px; height: 196px; }
}
@media (max-width: 680px) {
  .filter-zuruecksetzen { flex: 0 0 34px; }
  .drafter-raster > .aktionsleiste .mapvorschau { min-height: 226px; }
  .drafter-raster > .aktionsleiste .mapvorschau-bild,
  .drafter-raster > .aktionsleiste .mapvorschau-medium { min-height: 220px; height: 220px; }
}