/* D7 final polish. Loaded last so historical phase cascades cannot override it. */
body.ist-draftseite { overflow-x: hidden; }

/* One continuous setup rail: map selector -> map -> first pick -> draft type. */
.drafter-raster > .aktionsleiste {
  gap: 0; padding: 11px 12px;
  background: linear-gradient(165deg, rgba(8, 29, 44, .96), rgba(3, 17, 29, .98));
  border-color: rgba(48, 111, 149, .58);
}
.aktionsleiste > .mapkontext,
.aktionsleiste > .mapvorschau,
.aktionsleiste > .firstpick,
.aktionsleiste > .drafttyp {
  border: 0; border-radius: 0; box-shadow: none;
  background: transparent;
}
.aktionsleiste > .mapkontext,
.aktionsleiste > .mapvorschau,
.aktionsleiste > .firstpick {
  border-bottom: 1px solid rgba(47, 104, 139, .38);
}
.aktionsleiste > .mapkontext { padding: 9px 4px 12px; }
.aktionsleiste > .mapkontext .steuer-etikett {
  margin-bottom: 7px; color: #8abbd7; text-align: center;
}

/* Primary map control: centered, roomy and hierarchy-led. */
.aktionsleiste .mapknopf {
  width: calc(100% - 4px); min-height: 68px; margin: 0 auto; padding: 9px 11px;
  grid-template-columns: 48px minmax(0, 1fr) 22px; gap: 9px;
  background: linear-gradient(145deg, rgba(10, 39, 61, .96), rgba(5, 25, 42, .96));
  border: 1px solid rgba(58, 143, 194, .72); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 9px 24px rgba(0, 0, 0, .14);
}
.aktionsleiste .mapknopf:hover,
.aktionsleiste .mapknopf[aria-expanded="true"] {
  border-color: #54bdf4; background: linear-gradient(145deg, rgba(13, 55, 84, .98), rgba(6, 29, 48, .98));
  box-shadow: 0 0 0 1px rgba(71, 181, 239, .16), 0 0 22px rgba(38, 155, 218, .15);
}
.aktionsleiste .mapknopf-icon,
.aktionsleiste .mapknopf-icon .modus-icon { width: 43px; height: 43px; }
.aktionsleiste .mapknopf-zeile {
  align-items: center; overflow: visible; text-align: center;
}
.aktionsleiste .mapknopf-modus {
  color: #75b8dc; font: 600 9px/1.15 var(--mono); letter-spacing: .12em;
  text-transform: uppercase;
}
.aktionsleiste .mapknopf-name {
  max-width: 100%; overflow: visible; color: #e4f4ff;
  font: 22px/1.1 var(--display); letter-spacing: .035em;
  text-overflow: clip; white-space: normal; overflow-wrap: anywhere;
}
.aktionsleiste .mapknopf-pfeil { color: #80cdf7; font-size: 24px; }

/* Anchored overlay with a real dialog header and internally scrolling content. */
.mapwaehler {
  z-index: 120; overflow: hidden;
  background: rgba(0, 8, 16, .72); backdrop-filter: blur(5px);
}
.mapwaehler-kasten {
  width: min(580px, calc(100vw - 32px)); max-height: min(76dvh, 620px);
  overflow: hidden; border: 1px solid rgba(73, 161, 214, .82); border-radius: 10px;
  background: linear-gradient(155deg, rgba(8, 31, 50, .99), rgba(3, 18, 31, .995));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .7), 0 0 32px rgba(41, 159, 224, .14);
}
.mapwaehler-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: stretch;
  border-bottom: 1px solid rgba(48, 111, 149, .54); background: rgba(7, 27, 44, .96);
}
.mapwaehler-suche {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 0; border-radius: 0;
  background: transparent; font-size: 13px;
}
.mapwaehler-suche:focus { outline: 2px solid rgba(104, 201, 255, .82); outline-offset: -3px; }
.mapwaehler-schliessen {
  display: grid; place-items: center; color: #89b7d1; background: rgba(10, 38, 59, .72);
  border: 0; border-left: 1px solid rgba(48, 111, 149, .5); font-size: 22px;
}
.mapwaehler-schliessen:hover { color: #fff; background: rgba(28, 91, 127, .48); }
.mapwaehler-schliessen:focus-visible { outline: 2px solid #9bddff; outline-offset: -3px; }
.mapwaehler-liste { padding: 8px 10px 12px; overscroll-behavior: contain; }
.mapwaehler-gruppe {
  margin: 0; padding: 7px 0 9px; border-bottom: 1px solid rgba(36, 82, 111, .38);
}
.mapwaehler-gruppe:last-child { border-bottom: 0; }
.mapwaehler-gruppentitel {
  display: flex; align-items: center; gap: 7px; margin: 0; padding: 4px 7px 6px;
  color: #7eabc6; font: 600 9px/1.2 var(--mono); letter-spacing: .12em;
  text-transform: uppercase;
}
.mapwaehler-gruppentitel .modus-icon { width: 18px; height: 18px; }
.mapzeile { min-height: 47px; padding: 6px 8px; border: 1px solid transparent; }
.mapzeile:hover, .mapzeile.ist-markiert {
  background: rgba(23, 78, 111, .42); border-color: rgba(67, 148, 195, .38);
}
.mapzeile.ist-markiert { outline: 1px solid rgba(88, 194, 250, .72); outline-offset: -1px; }
.mapzeile-bild { width: 36px; height: 36px; flex: 0 0 36px; background: transparent; }
.mapzeile-bild .modus-icon { width: 31px; height: 31px; }
.mapzeile-text { flex: 1; overflow: visible; }
.mapzeile-name {
  overflow: visible; color: #def2ff; font-size: 14px; line-height: 1.25;
  text-overflow: clip; white-space: normal; overflow-wrap: anywhere;
}
.mapzeile-modus {
  margin-top: 2px; color: #6f99b3; font: 8px/1.2 var(--mono);
  letter-spacing: .09em; text-transform: uppercase;
}

/* The verified map sits directly in the rail, without a second rectangle. */
.drafter-raster > .aktionsleiste .mapvorschau {
  min-height: 226px; padding: 10px 2px 12px; overflow: visible;
  background: transparent; border: 0; box-shadow: none;
}
.drafter-raster > .aktionsleiste .mapvorschau:hover:not(:disabled) {
  background: transparent; border: 0; box-shadow: none; transform: none;
}
.drafter-raster > .aktionsleiste .mapvorschau-bild,
.drafter-raster > .aktionsleiste .mapvorschau-medium {
  min-height: 210px; height: 210px; overflow: visible;
  background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none;
}
.mapvorschau-medium img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .36));
}
.mapvorschau-bild::after { display: none; }

/* First-pick is a strong blue/red binary control, led by the original shields. */
.aktionsleiste > .firstpick { padding: 12px 3px 13px; }
.firstpick > .steuer-etikett {
  display: block; width: 100%; margin: 0 0 8px; color: #dcefff;
  font: 13px/1 var(--display); letter-spacing: .16em; text-align: center;
}
.firstpick .firstpick-schilde { gap: 10px; padding: 0 2px; }
.firstpick .firstpick-schilde button {
  width: 104px; height: 82px; min-height: 82px; padding: 4px;
  opacity: .74; filter: saturate(.88) brightness(.9); transform: scale(.96);
  border-width: 1px; border-style: solid; border-radius: 10px;
}
.firstpick .firstpick-schilde button[data-firstpick="wir"] {
  border-color: rgba(61, 171, 238, .7);
  background: radial-gradient(circle at 50% 46%, rgba(42, 164, 239, .3), rgba(7, 43, 70, .82));
  box-shadow: inset 0 0 18px rgba(30, 147, 221, .13), 0 0 10px rgba(34, 142, 213, .1);
}
.firstpick .firstpick-schilde button[data-firstpick="gegner"] {
  border-color: rgba(243, 71, 100, .68);
  background: radial-gradient(circle at 50% 46%, rgba(235, 55, 91, .27), rgba(63, 12, 28, .82));
  box-shadow: inset 0 0 18px rgba(225, 47, 83, .12), 0 0 10px rgba(211, 40, 73, .1);
}
.firstpick .firstpick-schilde button img { width: 72px; height: 72px; }
.firstpick .firstpick-schilde button:hover {
  opacity: .94; filter: saturate(1.08) brightness(1.02); transform: translateY(-2px) scale(1);
}
.firstpick .firstpick-schilde button[data-firstpick="wir"].ist-aktiv {
  opacity: 1; filter: saturate(1.2) brightness(1.08); transform: scale(1.035);
  border-color: #7bd4ff; background: radial-gradient(circle, rgba(47, 179, 255, .44), rgba(8, 58, 94, .94));
  box-shadow: 0 0 0 2px rgba(72, 185, 246, .3), 0 0 27px rgba(41, 166, 235, .52);
}
.firstpick .firstpick-schilde button[data-firstpick="gegner"].ist-aktiv {
  opacity: 1; filter: saturate(1.2) brightness(1.08); transform: scale(1.035);
  border-color: #ff8295; background: radial-gradient(circle, rgba(255, 70, 105, .42), rgba(89, 15, 37, .94));
  box-shadow: 0 0 0 2px rgba(255, 83, 110, .28), 0 0 27px rgba(238, 50, 86, .48);
}
.aktionsleiste > .drafttyp { padding: 12px 3px 3px; }

/* Compact discovery toolbar and enough headroom for the first card row. */
.auswahl-kopf { flex-wrap: nowrap; gap: 5px; margin-bottom: 0; }
.auswahl-kopf .suchfeld { min-width: 128px; }
.auswahl-kopf #suche,
.auswahl-kopf .sortierung select,
.auswahl-kopf #rollenfilter,
.auswahl-kopf #seltenheitsfilter,
.auswahl-kopf .filter-zuruecksetzen,
.auswahl-kopf .analyseschalter { height: 32px; min-height: 32px; }
.auswahl-kopf #suche { padding-top: 6px; padding-bottom: 6px; }
.auswahl-kopf .sortierung select { max-width: 68px; }
.auswahl-kopf #rollenfilter { max-width: 118px; }
.auswahl-kopf #seltenheitsfilter { max-width: 120px; }
.auswahl-kopf .filter-zuruecksetzen { width: 32px; min-width: 32px; }
.gitter { padding-top: 15px; scroll-padding-top: 15px; }

/* Rarity remains below every functional interaction state. */
.kachel, .kachel.ist-limited { border-style: solid; }
.gitter .kachel:hover:not(.ist-gesperrt) {
  border-color: #69c8ff; transform: translateY(-2px);
  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; border-style: solid; }
.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 .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: .88; filter: saturate(.82); }
.gitter .kachel.ist-ausgewaehlt.ist-eigener-pick {
  border-color: #38c7ff; box-shadow: 0 0 0 1px rgba(56, 199, 255, .38), 0 0 22px rgba(38, 174, 235, .3);
}
.gitter .kachel.ist-ausgewaehlt.ist-gegner-pick {
  border-color: #ff5d75; box-shadow: 0 0 0 1px rgba(255, 93, 117, .34), 0 0 20px rgba(233, 52, 82, .26);
}

/* Visible, quiet scrollbars with a brighter hover state. */
body.ist-draftseite :is(.aktionsleiste, .gitter, .mapwaehler-liste) {
  scrollbar-width: thin;
  scrollbar-color: rgba(72, 129, 164, .62) rgba(2, 13, 23, .28);
}
body.ist-draftseite :is(.aktionsleiste, .gitter, .mapwaehler-liste)::-webkit-scrollbar { width: 6px; height: 6px; }
body.ist-draftseite :is(.aktionsleiste, .gitter, .mapwaehler-liste)::-webkit-scrollbar-track {
  background: rgba(2, 13, 23, .28); border-radius: 99px;
}
body.ist-draftseite :is(.aktionsleiste, .gitter, .mapwaehler-liste)::-webkit-scrollbar-thumb {
  background: rgba(72, 129, 164, .62); border-radius: 99px;
}
body.ist-draftseite :is(.aktionsleiste, .gitter, .mapwaehler-liste)::-webkit-scrollbar-thumb:hover {
  background: rgba(84, 176, 224, .82);
}

@media (max-width: 1100px) {
  .drafter-raster > .aktionsleiste { gap: 8px; padding: 10px; }
  .aktionsleiste > .mapkontext,
  .aktionsleiste > .mapvorschau,
  .aktionsleiste > .firstpick,
  .aktionsleiste > .drafttyp {
    padding: 10px; border: 1px solid rgba(44, 102, 138, .52); border-radius: 8px;
    background: rgba(5, 23, 38, .68);
  }
  .mapwaehler { display: flex; align-items: center; justify-content: center; padding: 14px; }
  .mapwaehler-kasten {
    position: static; width: min(580px, calc(100vw - 28px)); max-height: min(82dvh, 680px);
  }
  .drafter-raster > .aktionsleiste .mapvorschau { min-height: 214px; }
  .drafter-raster > .aktionsleiste .mapvorschau-bild,
  .drafter-raster > .aktionsleiste .mapvorschau-medium { min-height: 194px; height: 194px; }
  .auswahl-kopf { flex-wrap: wrap; }
  .auswahl-kopf .suchfeld { flex: 1 1 100%; }
}

@media (max-width: 680px) {
  .aktionsleiste .mapknopf-name { font-size: 19px; }
  .firstpick .firstpick-schilde button { width: min(104px, 42vw); }
  .auswahl-kopf .sortierung,
  .auswahl-kopf .rollenfilter,
  .auswahl-kopf .seltenheitsfilter { flex: 1 1 calc(33.333% - 5px); }
  .auswahl-kopf .sortierung select,
  .auswahl-kopf #rollenfilter,
  .auswahl-kopf #seltenheitsfilter { width: 100%; max-width: none; }
  .drafter-raster > .aktionsleiste .mapvorschau { min-height: 232px; }
  .drafter-raster > .aktionsleiste .mapvorschau-bild,
  .drafter-raster > .aktionsleiste .mapvorschau-medium { min-height: 212px; height: 212px; }
}