/* Lokal gehostete Schriften (vorher Google Fonts CDN) - DSGVO: kein
   externer Font-Request mehr, der die Besucher-IP an Google sendet. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Redesign Phase 3 (17.07.): diese Tokens waren bisher die einzige Quelle
   der Wahrheit (rohe Hex-/rgba-Werte direkt hier). Jetzt zeigen sie auf
   design-tokens.css (siehe dort) - das eigentliche "Umschalten" (Dunkel/
   Hell, spaeter .zone-site/.zone-game) passiert nur noch dort, EINMAL.
   Diese Namen (--ink, --gold, --paper, ...) bleiben unveraendert bestehen,
   weil ueber 600 Stellen in dieser Datei sie bereits per var() referenzieren
   - so erben alle automatisch die neuen Tokens, ohne dass jede einzelne
   Stelle angefasst werden muss. Werte sind absichtlich IDENTISCH zu vorher,
   das hier ist reines Verkabeln, keine Design-Aenderung. */
:root {
  --ink: var(--color-ink);
  --paper: var(--color-bg);
  --paper-2: var(--color-surface);
  --paper-3: var(--color-surface-2);
  --gold: var(--color-accent);
  /* Fest, NICHT vom Akzentfarben-Regler ueberschreibbar - fuer Stellen wie
     die Bestenliste, die Infos ueber ANDERE Spieler zeigen. Dort soll die
     persoenliche Akzentfarbe des Betrachters nicht mit reinfaerben (sonst
     wirkt es so, als haette der jeweilige Spieler diese Farbe). */
  --gold-fixed: var(--color-accent-fixed);
  --purple: var(--color-accent-2);
  --line: var(--color-line);
  --muted: var(--color-muted);
  --pos: var(--color-positive);
  --neg: var(--color-negative);
  /* NEU: bisher als rohes #0A0A0F an 11 Stellen hartkodiert (Text auf
     goldenem/hellem Untergrund) - siehe design-tokens.css. */
  --accent-ink: var(--color-accent-ink);
  /* NEU (Audit-Fund: kein echter Danger-Button im ganzen Projekt) - noch
     nirgends benutzt, steht ab jetzt bereit fuer Phase 4/5. */
  --danger: var(--color-danger);
  --danger-ink: var(--color-danger-ink);
}

html[data-theme="light"] {
  --ink: var(--color-ink);
  --paper: var(--color-bg);
  --paper-2: var(--color-surface);
  --paper-3: var(--color-surface-2);
  --gold: var(--color-accent);
  --gold-fixed: var(--color-accent-fixed);
  --purple: var(--color-accent-2);
  --line: var(--color-line);
  --muted: var(--color-muted);
  --pos: var(--color-positive);
  --neg: var(--color-negative);
  --danger: var(--color-danger);
  --danger-ink: var(--color-danger-ink);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

/* Duenne, themenfarbene Scrollbar site-weit statt der breiten nativen
   Browser-Scrollbar mit Pfeil-Buttons (Windows-Standard) - die wirkte in
   jedem scrollbaren Bereich (Idle-Dorf-Fenster, Listen, Seite selbst) wie
   ein Fremdkoerper im sonst komplett durchgestylten Dark-/Light-Theme. Gilt
   automatisch fuer JEDES scrollende Element, nicht nur einzelne Container. */
* { scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--gold); }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}

html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
  animation-play-state: paused !important;
}

/* Hintergrund bewusst schlicht gehalten, keine Streifen mehr */

a { color: inherit; text-decoration: none; }

/* ---------- Durchgehende Kopfleiste hinter den fixen Buttons ----------
   .top-actions/.top-actions-left waren schon immer position:fixed (blieben
   also technisch schon beim Scrollen stehen) - zwischen den beiden
   Button-Gruppen war aber kein durchgehender Hintergrund, nur die
   einzelnen Pillen hatten eine eigene Farbe. Beim Scrollen rutschte der
   Seiteninhalt dadurch sichtbar in die Luecke zwischen den Buttons - genau
   das erzeugte den "verschmilzt mit dem Inhalt"-Eindruck. Dieser reine
   Hintergrund-Balken (niedrigerer z-index als die Buttons, aber hoeher als
   der normale Seiteninhalt) loest das, ohne die bestehende Button-Logik
   anzufassen. */
.site-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;
  z-index: 15;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 97%, transparent), color-mix(in srgb, var(--paper) 90%, transparent));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
@media (max-width: 640px) {
  .site-top-bar { height: 72px; }
}

/* ---------- Top-rechts: Theme-Toggle + Login ---------- */
.top-actions {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.top-actions-left {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.feedback-btn { padding: 0.5rem 1.1rem 0.5rem 0.9rem; background: var(--paper); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16); }
.bonk-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-2);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.bonk-button:hover { transform: translateY(-2px) scale(1.05); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.bonk-button:active { transform: scale(0.94); }
.bonk-button img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; user-select: none; pointer-events: none; }
.bonk-count {
  position: absolute;
  bottom: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold-fixed);
  color: #111018;
  font-size: 0.68rem;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.bonk-count.visible { display: flex; }
@media (max-width: 640px) {
  .top-actions-left { top: 1rem; left: 1rem; gap: 0.45rem; }
  .bonk-button { width: 46px; height: 46px; }
  .feedback-btn { padding: 0.42rem; border-radius: 50%; }
  .feedback-btn-label { display: none; }
  /* .top-actions ist fixed + rechts verankert und waechst per Flex nach
     links, ohne Breitenbegrenzung - bei 4 Buttons mit Textlabel (~470px
     Inhalt) reichte auf Telefonbreiten (<640px, ~375px verfuegbar) der
     Platz nicht, die linken Buttons wurden dadurch bisher unsichtbar/
     unklickbar aus dem Bildschirm gedrueckt. flex-wrap bleibt als
     Sicherheitsnetz stehen, greift aber dank der Textlabel-Kuerzung unten
     im Normalfall nicht mehr. */
  .top-actions {
    top: 1rem; right: 1rem;
    max-width: calc(100vw - 2rem);
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  /* Nur-Icon-Darstellung fuer Idle-Dorf-Button + Hell/Dunkel-Umschalter:
     mit ausgeschriebenem Text plus dem (variabel langen: Name + Titel +
     Erfolgszahl) Profil-Badge passten alle drei Pillen auf schmalen
     Handybreiten nicht in eine Zeile, .top-actions brach dadurch in eine
     zweite Zeile um - die aber nicht genug zusaetzliche Kopfbereich-Hoehe
     eingeplant bekam und dadurch sichtbar in die Twitch-Creator-Leiste
     darunter hineinragte. Icon-only haelt hier zuverlaessig eine Zeile. */
  .idle-dorf-btn-label, #themeLabel { display: none; }
  .idle-dorf-btn, #themeToggle { padding: 0.5rem; border-radius: 50%; }
  /* Das Profil-Badge (Name + aktiver Titel + Erfolgszahl) ist die einzige
     Pille mit wirklich variabler, potenziell langer Textlaenge - hart
     begrenzen + abschneiden statt umbrechen zu lassen, aus demselben Grund. */
  #mcNameBadgeText { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Sehr schmale Handybreiten (320-360px): reicht der Platz selbst im
   Icon-only-Modus knapp nicht, sobald zusaetzlich der Raid-Countdown
   ("🔥 4:29") neben dem Idle-Dorf-Icon eingeblendet ist - enger fassen
   statt umbrechen zu lassen. */
@media (max-width: 380px) {
  .top-actions { gap: 0.35rem; }
  .raid-btn-countdown { font-size: 0.7rem; margin-left: 0.2rem; }
  #mcNameBadgeText { max-width: 20vw; }
}

.pill-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.9rem 0.45rem 0.45rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  transition: background 0.3s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Eigene Akzentfarbe waehlen (Spieler-Idee, siehe bkmpInitAccentColor in
   app.js) - dezente Pille im selben Stil wie die anderen Header-Buttons,
   der native Color-Picker wird auf einen runden Farb-Swatch zurechtgestutzt
   (Browser-Standardrahmen/-Padding sind sonst uneinheitlich). */
.accent-color-picker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem;
  cursor: pointer;
}
.accent-color-picker input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: none;
}
.accent-color-picker input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.accent-color-picker input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.accent-color-picker input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.accent-color-reset {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem;
  transition: color 0.2s ease, transform 0.2s ease;
}
.accent-color-reset:hover { color: var(--gold); transform: rotate(-45deg); }
@media (max-width: 640px) {
  .accent-color-picker { padding: 0.32rem; gap: 0.3rem; }
  .accent-color-picker input[type="color"] { width: 18px; height: 18px; }
}

.pill-btn:hover { border-color: var(--gold); color: var(--ink); }
.pill-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

#mcNameBadge { padding: 0.5rem 1.15rem 0.5rem 0.5rem; gap: 0.65rem; }
/* Nur der Name-Text, nicht alle .pill-btn-Buttons site-weit - etwas
   kraeftiger als das geerbte font-weight:500, damit Name + Level/Titel
   gut lesbar bleiben. */
#mcNameBadgeText { font-weight: 700; }
.mc-name-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: 1.3rem;
  line-height: 1;
}
.mc-name-badge-plushie {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
  object-position: center;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 60%, var(--line)), 0 0 12px color-mix(in srgb, var(--gold) 35%, transparent);
}
@media (max-width: 640px) {
  #mcNameBadge { padding: 0.4rem 0.9rem 0.4rem 0.4rem; gap: 0.5rem; }
  .mc-name-badge-icon, .mc-name-badge-plushie { width: 32px; height: 32px; }
  .mc-name-badge-icon { font-size: 1.1rem; }
}
#mcNameBadge.tier-1 { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
#mcNameBadge.tier-2 {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 35%, transparent);
}
#mcNameBadge.tier-3 {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(120deg, var(--gold), rgba(56, 189, 248, 0.85), var(--gold)) border-box;
  border: 1px solid transparent;
  background-size: 100% 100%, 220% 220%;
  animation: bkmpTierGlow 3.5s ease infinite;
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 45%, transparent);
}
#mcNameBadge.tier-3 #mcNameBadgeText {
  background: linear-gradient(120deg, var(--gold), rgba(56, 189, 248, 0.9), var(--gold));
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bkmpTierGlow 3.5s ease infinite;
}
@keyframes bkmpTierGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  #mcNameBadge.tier-3, #mcNameBadge.tier-3 #mcNameBadgeText { animation: none; }
}

.toggle-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.toggle-icon svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 1.8; }
.icon-moon { display: none; }
html[data-theme="light"] .icon-sun { display: none; }
html[data-theme="light"] .icon-moon { display: block; }

/* ---------- Popup (Hell-Modus Joke) ---------- */
.joke-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 7, 10, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.joke-overlay.visible { opacity: 1; pointer-events: auto; }
/* NACHBESSERUNG (Spieler-Meldung: "kann immernoch scrollen im Hintergrund
   wenn ich im Popup scrolle"): body.modal-open wurde bisher nur genutzt, um
   Marquee/Easter-Egg-Animationen zu pausieren - die Seite dahinter blieb
   aber weiterhin scrollbar. Sobald der sichtbare Inhalt EINES Popups nicht
   selbst randvoll genug ist, um jeden Mausrad-Tick zu "verbrauchen" (oder
   der Scroll-Container am Anfang/Ende ankommt), laeuft das Wheel-Event
   einfach durch die fixed .joke-overlay-Flaeche weiter zur echten Seite
   durch - overflow:hidden auf body ist der eigentliche, robuste Fix dafuer,
   nicht bloss overflow-y:auto auf der Karte selbst. */
body.modal-open {
  overflow: hidden;
}
/* NACHTRAG (06.08.2026, Spieler-Screenshot: sichtbarer Scrollbalken trotz
   offenem Vollbild-Idle-Dorf-Fenster auf dem Handy): "overflow:hidden" nur
   auf body reicht nicht IMMER aus - body bekommt hier zwar durch
   "html,body{height:100%}" (Basisregel weiter oben) eine echte, auf den
   Viewport begrenzte Boxhoehe, aber <html> selbst behaelt "overflow:
   visible" (Standard) und blieb dadurch der eigentliche Scroll-Container
   fuer die dahinterliegende, oft deutlich hoehere normale Website
   (per direktem Test bestaetigt: document.documentElement.scrollHeight
   zeigte 2512px bei einem 844px hohen Viewport, obwohl body selbst korrekt
   auf 844px begrenzt war - "overflow:hidden" testweise auf <html> gesetzt
   hat den Balken sofort verschwinden lassen). Betrifft NICHT nur Mobil
   (keine Breiten-Bedingung noetig, gleiche Ursache bei jeder Fenstergroesse
   mit hohem Hintergrundinhalt) - deshalb hier direkt neben der bestehenden
   body-Regel ergaenzt statt in den mobilen Redesign-Block verschoben.
   ":has(body.modal-open)" statt einer eigenen "html.modal-open"-Klasse:
   "modal-open" wird an ueber 20 Stellen quer durchs Projekt (idledorf.js,
   app.js, bkmp-prestige.js, bkmp-runes.js, bkmp-skilltree.js, bkmp-
   cosmetics.js, bkmp-breeding.js, bkmp-changelog.js, bkmp-feedback-
   board.js, bkmp-reward-presenter.js, bkmp-site.js) ausschliesslich auf
   BODY gesetzt/entfernt - all diese Stellen zusaetzlich auf <html> zu
   spiegeln waere eine riskante, ueber ein Dutzend Dateien verstreute
   Aenderung fuer eine reine CSS-Randbedingung. :has() (in allen
   evergreen Browsern seit 2022/2023 unterstuetzt, wird im Projekt bereits
   an anderer Stelle wie color-mix()/dvh vorausgesetzt) bildet dieselbe
   Bedingung rein deklarativ ab, ohne eine einzige JS-Datei anzufassen. */
html:has(body.modal-open) {
  overflow: hidden;
}
body.modal-open .streamer-marquee-track,
body.modal-open .bkmp-easter > span {
  animation-play-state: paused !important;
}

.joke-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem 2.2rem 1.7rem;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(14px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.joke-overlay.visible .joke-card { transform: translateY(0) scale(1); }
.joke-card p { font-size: 1.05rem; margin-bottom: 1.4rem; }
.joke-buttons { display: flex; gap: 0.7rem; justify-content: center; }

.joke-buttons button {
  font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500;
  padding: 0.55rem 1.2rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.joke-buttons button:hover { transform: translateY(-1px); }
/* .btn-ja/.btn-nein selbststaendig stylen (nicht nur ueber den
   .joke-buttons-Elternselektor), sonst faellt jeder Button dieser Klassen
   ausserhalb von .joke-buttons (z. B. die Idle-Dorf-Stufenleiste) auf den
   ungestylten Browser-Standard zurueck (grauer Kasten, harte Kanten,
   outset-Rahmen) statt die Pill-Optik der restlichen Seite zu bekommen. */
.btn-ja, .btn-nein {
  font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500;
  padding: 0.55rem 1.2rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.btn-ja:hover, .btn-nein:hover { transform: translateY(-1px); }
.btn-ja { border-color: var(--gold) !important; background: var(--gold) !important; color: var(--accent-ink) !important; }
.btn-nein:hover { border-color: var(--gold); }

/* ---------- "Wer bist du?" Login/Registrieren ---------- */
.auth-card { max-width: 380px; text-align: left; }
.auth-card h3 { text-align: center; }
#mcAuthSubtitle { font-size: 0.92rem; color: var(--muted); text-align: center; }
.auth-field { margin-bottom: 0; }
.auth-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-bottom: 0.35rem; }
.rename-hint { font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; }
.auth-password-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; }
.auth-password-row input { margin-bottom: 0; flex: 1; min-width: 0; }
.auth-password-toggle {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.auth-password-toggle:hover { border-color: var(--gold); transform: translateY(-1px); }
#mcAuthError { color: #ff6b6b; font-size: 0.85rem; text-align: center; margin: 0 0 0.9rem; }
.auth-switch { text-align: center; margin: 0.9rem 0 0; }
.auth-switch-link {
  background: none; border: none; padding: 0; color: var(--gold); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.85rem; text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-switch-link:hover { opacity: 0.85; }
.auth-switch-link-danger { color: var(--neg); }
.delete-account-warning { color: var(--neg); font-size: 0.9rem; line-height: 1.5; }

/* ---------- Hero ---------- */
.hero {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 7vh; padding-bottom: 3rem;
  position: relative; z-index: 1;
}

.hero-banner-wrap {
  padding: 5.5rem 0.9rem 2.2rem;
}
.streamer-strip {
  display: none;
  align-items: center;
  gap: 0.75rem;
  width: min(1760px, calc(100vw - 1.8rem));
  min-height: 42px;
  margin-bottom: 0.45rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(10, 10, 15, 0.96), rgba(23, 18, 34, 0.92));
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.28);
  contain: layout paint;
}
.streamer-strip-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: stretch;
  padding: 0 0.85rem;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.streamer-strip-title svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.streamer-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 0.28rem 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  contain: paint;
}
.streamer-marquee-track {
  display: flex;
  width: max-content;
  animation: streamerScroll 145s linear infinite;
  animation-play-state: paused;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
body.page-loaded .streamer-marquee-track {
  animation-play-state: running;
}
.page-hidden .streamer-marquee-track {
  animation-play-state: paused !important;
}
.streamer-marquee:hover .streamer-marquee-track {
  animation-play-state: paused;
}
.streamer-marquee-group {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding-right: 0.7rem;
}
.streamer-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.28rem 0.78rem;
  color: #0a0a0f;
  background: rgba(10, 10, 15, 0.72);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.streamer-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(10, 10, 15, 0.34);
  box-shadow: inset 0 0 0 1px rgba(10, 10, 15, 0.22);
  flex-shrink: 0;
}
.streamer-live-label {
  display: none;
  border-radius: 999px;
  padding: 0.11rem 0.36rem;
  color: #fff;
  background: #ef4444;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.45);
}
.streamer-pill.is-live {
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24), 0 0 24px rgba(239, 68, 68, 0.24);
}
.streamer-pill.is-live .streamer-live-dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18), 0 0 14px rgba(239, 68, 68, 0.72);
}
.streamer-pill.is-live .streamer-live-label {
  display: inline-flex;
}
.live-toast {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 45;
  width: min(310px, calc(100vw - 2rem));
  padding: 1rem 1.05rem;
  border: 1px solid rgba(239, 68, 68, 0.38);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--paper-2), var(--paper));
  color: var(--ink);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.38), 0 0 34px rgba(239, 68, 68, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 18px, 0) scale(0.96);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.live-toast.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}
.live-toast-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-bottom: 0.35rem;
  color: #fca5a5;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.live-toast-kicker span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18), 0 0 16px rgba(239, 68, 68, 0.7);
}
.live-toast strong {
  display: block;
  margin-bottom: 0.65rem;
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
}
.live-toast a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 0.42rem 0.78rem;
  background: linear-gradient(135deg, #8b5cf6, #ef4444);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}
.live-toast a:hover {
  filter: brightness(1.08);
}
.streamer-purple { background: #a78bfa; }
/* --gold-fixed statt --gold: das ist die zugewiesene Markenfarbe EINES
   Streamers, nicht der Viewer soll sie mit der eigenen Akzentfarbe
   ueberschreiben (gleiches Prinzip wie bei der Bestenliste, siehe
   --gold-fixed-Definition weiter oben). */
.streamer-gold { background: var(--gold-fixed); }
.streamer-green { background: #4ade80; }
.streamer-blue { background: #38bdf8; }
.streamer-red { background: #f87171; }
.streamer-pink { background: #f472b6; }
.streamer-cyan { background: #22d3ee; }
.streamer-orange { background: #fb923c; }
.streamer-lime { background: #a3e635; }
.streamer-rose { background: #fb7185; }
.streamer-indigo { background: #818cf8; }
.streamer-emerald { background: #34d399; }
.streamer-violet { background: #c084fc; }
.streamer-white { background: #f8fafc; }
.streamer-rainbow { background: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f472b6); }

/* ---------- Weitere kosmetische Prefix-Farben (mit Effekten) ---------- */
.streamer-herzschlag { background: linear-gradient(135deg, #f43f5e, #fb7185); animation: streamerHeartbeat 1.15s ease-in-out infinite; }
.streamer-gruenrot { background: linear-gradient(90deg, #4ade80, #f87171); }
.streamer-feuer { background: linear-gradient(90deg, #fde047, #fb923c, #ef4444); }
.streamer-eis { background: linear-gradient(90deg, #e0f2fe, #7dd3fc, #38bdf8); }
.streamer-galaxy { background: linear-gradient(120deg, #7c3aed, #a78bfa, #f472b6, #7c3aed); background-size: 300% 100%; animation: streamerShimmer 6s linear infinite; }
.streamer-sonnenuntergang { background: linear-gradient(90deg, #fb923c, #f472b6, #a78bfa); }
.streamer-goldglut { background: var(--gold-fixed); animation: streamerGlowPulseGold 2s ease-in-out infinite; }
.streamer-toxic { background: #a3e635; animation: streamerGlowPulseToxic 2s ease-in-out infinite; }
.streamer-mitternacht { background: linear-gradient(135deg, #1e1b4b, #4c1d95, #1e3a8a); color: #e0e7ff; }
.streamer-neonpink { background: #ec4899; animation: streamerGlowPulsePink 1.8s ease-in-out infinite; }
.streamer-regenbogenpuls { background: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f472b6, #f87171); background-size: 300% 100%; animation: streamerShimmer 4s linear infinite; }

@keyframes streamerHeartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}
@keyframes streamerShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes streamerGlowPulseGold {
  0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 0 6px color-mix(in srgb, var(--gold) 40%, transparent); }
  50% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 0 20px color-mix(in srgb, var(--gold) 85%, transparent); }
}
@keyframes streamerGlowPulseToxic {
  0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 0 6px rgba(163, 230, 53, 0.4); }
  50% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 0 20px rgba(163, 230, 53, 0.85); }
}
@keyframes streamerGlowPulsePink {
  0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 0 6px rgba(236, 72, 153, 0.45); }
  50% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 0 22px rgba(236, 72, 153, 0.9); }
}

.streamer-pill:hover { border-color: var(--gold); transform: translateY(-1px); }
@keyframes streamerScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.hero-banner {
  display: block;
  width: min(1760px, calc(100vw - 1.8rem));
  /* WICHTIG: height:auto explizit noetig - das <img> traegt zusaetzlich
     width="1983" height="527" als HTML-Attribute (fuer CLS/Ladeverhalten
     vor dem CSS-Laden gedacht). Ohne dieses height:auto gewinnt das
     height="527"-Attribut als "gesetzte" (nicht-auto) Boxhoehe gegen
     aspect-ratio, wodurch der Banner auf schmalen Bildschirmen viel zu
     schmal skaliert, aber die volle Pixelhoehe (527px) behaelt - er wirkt
     dadurch riesig eingezoomt und der Text im Bild wird beidseitig
     abgeschnitten, statt als schlanker breiter Streifen zu erscheinen. */
  height: auto;
  aspect-ratio: 1983 / 527;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
  user-select: none;
  -webkit-user-select: none;
}
/* .hero-banner-picture hat exakt dieselbe Box wie das <img> selbst (kein
   eigenes Padding) - dadurch koennen Kinder wie das Schaf-Easter-Egg per
   Prozent-Position exakt auf einen Bildpunkt zeigen und bleiben bei jeder
   Bannerbreite (min(1760px, 100vw-1.8rem)) an der richtigen Stelle. */
.hero-banner-picture { position: relative; display: block; }
.bkmp-sheep-easter-egg {
  position: absolute;
  left: 13.5%;
  bottom: 0%;
  transform: translateX(-50%);
  height: 28%;
  aspect-ratio: 16 / 15;
  background-image: url('assets/sheep-sprite.webp');
  background-repeat: no-repeat;
  /* background-size 1000% (= 10 Frames * 100%, jeder Frame = genau 1x
     Elementbreite). Das Keyframe-Ziel unten ist bewusst 111.111% statt
     100%: bei Prozent-basiertem background-position gilt
     offset = (Elementbreite - Hintergrundbreite) * Prozent/100. Mit
     Hintergrundbreite = 10x Elementbreite ergibt ein glattes 0%->100%
     ueber steps(10) NUR Bruchteile von Frame-Breiten (offset landet bei
     -0.9x, -1.8x, -2.7x ... statt bei ganzen Vielfachen von 1x) - das
     Schaf wirkte dadurch wie ein durchgehend gleitendes/laufendes Bild
     statt eines Gehzyklus, selbst wenn jeder einzelne Frame korrekt
     ausgeschnitten ist. 111.111% (= 10/9 * 100%) ist genau der Wert,
     bei dem die 10 Sprungpositionen von steps(10) (0%, 11.111%, ...,
     100%) exakt auf die 10 ganzen Frame-Grenzen treffen. */
  background-size: 1000% 100%;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  animation: bkmpSheepFrames 3.24s steps(10) infinite;
  transition: filter 0.15s ease;
}
.bkmp-sheep-easter-egg:hover,
.bkmp-sheep-easter-egg:focus-visible {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)) brightness(1.12);
}
@keyframes bkmpSheepFrames {
  from { background-position-x: 0%; }
  to { background-position-x: 111.111%; }
}
@media (prefers-reduced-motion: reduce) {
  .bkmp-sheep-easter-egg { animation-duration: 10.8s; }
}

/* NUR im Hellmodus sichtbar (Nutzerwunsch 14.07.: "vielleicht irgendwo
   auf der 'hellen' Seite nur sehbar.. wo es weiss ist.. weil schnee und
   so") - --paper ist im Light-Theme ein warmer Cremeton statt reinem
   Weiss, aber immer noch hell genug fuer einen "im Schnee versteckten"
   Pinguin.
   Nachbesserung (16.07., Screenshot mit rot markierter Ecke): sass
   urspruenglich oben rechts in der Kopfzeile (absolut, an
   .hero-banner-picture gebunden) - "das ist doof", stattdessen jetzt
   GANZ UNTEN RECHTS als fest positioniertes Element (wie .login-btn-corner
   unten links, siehe dort), bleibt beim Scrollen sichtbar und ist damit auf
   jedem Tab (auch Kartenauftraege) an derselben Stelle zu finden statt nur
   ganz oben auf der Seite. */
.bkmp-penguin-easter-egg {
  display: none;
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  width: 52px;
  aspect-ratio: 307 / 512;
  background-image: url('assets/penguin-sprite.png');
  background-repeat: no-repeat;
  background-size: 1000% 100%;
  cursor: pointer;
  z-index: 15;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
  animation: bkmpPenguinFrames 3.24s steps(10) infinite;
  transition: filter 0.15s ease, transform 0.15s ease;
}
html[data-theme="light"] .bkmp-penguin-easter-egg { display: block; }
.bkmp-penguin-easter-egg:hover,
.bkmp-penguin-easter-egg:focus-visible {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) brightness(1.08);
  transform: scale(1.08);
}
/* Korrektur (16.07., zweiter Spieler-Report "isst nicht mehr"): der
   Kuerzungs-Versuch von eben (4 statt 10 Frames) war ein Fehlschluss - die
   Pixelvermessung hatte den Sprung im Alpha-Bounding-Box-Mittelpunkt als
   "Fehlausrichtung" gedeutet, dabei ist es die ECHTE, gewollte Bewegung
   einer durchgehenden Fressanimation (Pinguin beugt sich runter, schnappt
   sich einen Fisch, isst ihn, richtet sich wieder auf - Frame 0-4 =
   Runterbeugen+Fisch schnappen, Frame 5-9 = Kauen+Aufrichten). Zurueck auf
   alle 10 Original-Frames (Backup war ohnehin unter
   assets/penguin-sprite-original-10frame.png.bak erhalten). Gleiche
   Herleitung wie bei .bkmp-sheep-easter-egg (bkmpSheepFrames) fuer die
   steps()-Zielprozent-Mathematik: 10/9*100% = 111.111%. */
@keyframes bkmpPenguinFrames {
  from { background-position-x: 0%; }
  to { background-position-x: 111.111%; }
}
@media (prefers-reduced-motion: reduce) {
  .bkmp-penguin-easter-egg { animation-duration: 10.8s; }
}
@media (max-width: 720px) {
  .bkmp-penguin-easter-egg { width: 38px; bottom: 0.7rem; right: 0.7rem; }
}

.bkmp-sheep-bubble {
  position: absolute;
  left: 13.5%;
  bottom: calc(28% + 1.2rem);
  transform: translate(-50%, 8px);
  max-width: min(280px, 46%);
  background: #fff;
  color: #1a1620;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 2;
}
.bkmp-sheep-bubble::after {
  content: '';
  position: absolute;
  left: 22px;
  bottom: -8px;
  border: 8px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}
.bkmp-sheep-bubble.visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
@media (max-width: 720px) {
  .bkmp-sheep-bubble { font-size: 0.72rem; max-width: min(220px, 60%); }
}
@media (max-width: 720px) {
  /* Etwas mehr Puffer als die reine Kopfzeilen-Hoehe (~46-56px bei
     top:1rem) - schuetzt gegen knappe Randfaelle, auch wenn .top-actions
     dank der Icon-only-Regeln oben im Normalfall einzeilig bleibt. */
  .hero-banner-wrap { padding: 5.6rem 0.7rem 1.8rem; }
  .hero-banner { width: calc(100vw - 1.4rem); border-radius: 10px; box-shadow: 0 16px 42px rgba(0, 0, 0, 0.3); }
  .streamer-strip { width: calc(100vw - 1.4rem); gap: 0.45rem; min-height: 38px; }
  .streamer-strip-title { padding: 0 0.62rem; font-size: 0.66rem; }
  .streamer-pill { font-size: 0.76rem; }
  /* Live-Toast ("Gerade live auf Twitch"): rechts-fixiert wie auf Desktop,
     aber schmaler und mit mehr Abstand nach unten - auf Handybreiten
     reichte der Platz nicht, ohne die unten LINKS fixierten Ecken-Links
     (Admin-Login, Geheimnisse-Hinweis) zu ueberdecken (beide ragten unter
     der vorher zu breiten/zu tief sitzenden Karte hervor). */
  .live-toast { right: 0.7rem; bottom: 5.2rem; width: min(240px, calc(100vw - 3.4rem)); padding: 0.85rem 0.95rem; }
}


/* ---------- Topbar / Tabs ---------- */
/* ---------- Umfrage-Banner (oben mittig) ---------- */
/* Dauerhaftes OPSUCHT-Logo direkt neben dem Feedback-Button (oben links) -
   ein fixer Platz oben mittig kollidierte optisch mit dem Idle-Dorf-Button
   dort. Als normales Flex-Kind von .top-actions-left braucht es keine
   eigene Positionierung, nur eine kleine, zur Zeile passende Hoehe. */
.opsucht-logo {
  height: 40px;
  width: auto;
  pointer-events: none;
}
@media (max-width: 640px) {
  .opsucht-logo { height: 30px; }
}

.poll-banner {
  position: fixed;
  top: 0.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  width: min(420px, calc(100vw - 1.6rem));
  padding: 0.9rem 2.2rem 0.9rem 1.1rem;
  border-radius: 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.3);
  animation: bkmpPollBannerIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bkmpPollBannerIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.poll-banner.poll-banner-voted { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.poll-banner-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.poll-banner-close:hover { color: var(--ink); background: color-mix(in srgb, var(--line) 60%, transparent); }
.poll-banner-question {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.7rem;
  line-height: 1.35;
  padding-right: 0.4rem;
}
.poll-banner-actions { display: flex; gap: 0.6rem; }
.poll-banner-btn {
  flex: 1;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.poll-banner-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--gold); }
.poll-banner-btn:disabled { cursor: default; opacity: 0.5; }
.poll-banner-btn.poll-banner-btn-selected {
  opacity: 1;
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 16%, var(--paper));
  color: var(--gold);
}
.poll-banner-results { display: flex; flex-direction: column; gap: 0.45rem; }
.poll-banner-result-row {
  display: grid;
  grid-template-columns: 1.4rem 1fr 2.6rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.poll-banner-result-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}
.poll-banner-result-fill { height: 100%; border-radius: 999px; }
.poll-banner-result-fill-yes { background: linear-gradient(90deg, #4ade80, #16a34a); }
.poll-banner-result-fill-no { background: linear-gradient(90deg, #f87171, #dc2626); }
@media (max-width: 640px) {
  .poll-banner { top: 0.5rem; padding: 0.8rem 2rem 0.8rem 0.9rem; }
  .poll-banner-question { font-size: 0.88rem; }
}

.topbar-wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 1760px; margin: 0 auto; padding: 0 0.9rem;
}

.topbar {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.9rem;
}
.topbar, .topbar * { user-select: none; -webkit-user-select: none; }

.tab-arrow {
  background: none; border: none; cursor: pointer; user-select: none;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.tab-arrow:hover { background: var(--paper-2); color: var(--ink); }
.tab-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

.tabs {
  display: flex;
  gap: 0;
  flex: 1;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 126px;
  position: relative;
  font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 500;
  color: var(--muted); background: color-mix(in srgb, var(--paper-2) 62%, transparent);
  border: 1px solid transparent; cursor: pointer;
  user-select: none; -webkit-user-select: none;
  padding: 0.55rem 1.25rem; border-radius: 999px; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tab-btn:hover { color: var(--ink); background: var(--paper-3); border-color: var(--line); }
.tab-btn, .tab-btn::before, .tab-btn::after, .tab-btn * { cursor: pointer !important; }
.tab-btn { -webkit-tap-highlight-color: transparent; }
.tab-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.tab-btn.active { color: var(--ink); background: var(--paper-2); border-color: var(--line); }
.tab-btn.active { position: relative; }

.tab-news-dot {
  display: none;
  position: absolute;
  top: 5px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--paper-2) 62%, transparent);
}
.tab-news-dot.visible { display: block; }

/* ---------- Swipe-Bereich ---------- */
.panels-viewport { overflow: hidden; width: 100%; max-width: 1760px; margin: 0 auto; position: relative; z-index: 1; touch-action: pan-y; }
.panels-track {
  display: flex;
  /* Ohne align-items:flex-start streckt Flexbox per Default (align-items:
     stretch) ALLE Panels nebeneinander auf die Hoehe des hoechsten - die
     Kartendatenbank (viele Karten, ~14500px) machte dadurch JEDE andere,
     eigentlich kurze Seite genauso hoch scrollbar (Spieler-Meldung: "auf
     allen Seiten endlos scrollen"). Betrifft nur die Kreuzachse (vertikal) -
     die horizontale Wisch-Animation (transform/translate3d) bleibt
     unveraendert. */
  align-items: flex-start;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}
.panel {
  min-width: 100%;
  padding: 2.4rem 0.9rem 5rem;
  content-visibility: auto;
  contain-intrinsic-size: 900px;
  contain: layout paint style;
}
.panel.active-panel {
  content-visibility: visible;
}

/* Redesign Phase 4 (17.07.): "professionelle Stimmung" - .panel-title ist
   DIE eine gemeinsame Ueberschriften-Komponente aller 10 Marketing-
   Abschnitte (jeder <section class="panel"> beginnt damit), deshalb wirkt
   eine einzige Verbesserung hier sofort auf die ganze Seite. Groesse jetzt
   auf der Typo-Skala (--font-size-2xl statt dem alten 1.6rem-Alleingang),
   text-wrap:balance verhindert haessliche Ein-Wort-Zeilen bei laengeren
   Titeln, ein schmaler Akzentstrich darunter gibt jedem Abschnitt einen
   klaren visuellen Anker statt reinem Fliesstext-Uebergang. */
.panel-title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--font-size-2xl);
  line-height: 1.25; margin-bottom: var(--space-4); text-align: center; text-wrap: balance;
  position: relative; padding-bottom: var(--space-3);
}
.panel-title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 44px; height: 3px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--gold) calc(55% * var(--mood-gradient-intensity, 1)), transparent);
}

/* ---------- Hauptseite: Stat-Balken ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); }
@media (max-width: 720px) { .stat-row { grid-template-columns: 1fr; } .topbar-wrap, .panel { padding-left: 0.7rem; padding-right: 0.7rem; } }

.stat-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--mood-radius-panel, 16px);
  padding: 1.6rem 1.5rem; text-align: center;
  cursor: default; user-select: none;
  box-shadow: var(--shadow-1);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--gold) 30%, var(--line)); }
@media (prefers-reduced-motion: reduce) { .stat-card { transition: none; } .stat-card:hover { transform: none; } }
.stat-label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.7rem; }
.stat-value { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.9rem; }
.stat-value.positive { color: var(--pos); }
.stat-value.negative { color: var(--neg); }
.stat-value.neutral { color: var(--gold); }
.stat-label, .stat-value { cursor: default; user-select: none; }

/* ---------- Donut-Chart ---------- */
.chart-block {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr);
  gap: 1.2rem;
  align-items: stretch;
  width: 100%;
}
.chart-summary {
  display: flex; gap: 2rem; align-items: center; justify-content: center; flex-wrap: wrap;
  min-width: 0;
  width: 100%;
}
.donut {
  width: 220px; height: 220px; border-radius: 50%; flex-shrink: 0; position: relative; cursor: pointer;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.donut::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#ff5e5e, #ffd166, #4ade80, #38bdf8, #a78bfa, #ff5e5e);
  opacity: 0;
  pointer-events: none;
}
.donut.bkmp-donut-mixing::before {
  opacity: var(--bkmp-rainbow-mix, 0);
  transition: opacity 0.25s ease;
}
.donut.bkmp-donut-firework {
  box-shadow: 0 0 50px 12px rgba(255, 255, 255, 0.65), 0 0 90px 30px rgba(167, 139, 250, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .donut { transition: none !important; }
  .donut.bkmp-donut-mixing::before { transition: none; }
}
.donut::after {
  content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--paper);
}

/* ---------- Regenbogen-Feuerwerk (Donut-Easter-Egg Finale) ---------- */
.bkmp-firework {
  position: fixed;
  z-index: 99;
  width: 0;
  height: 0;
  pointer-events: none;
}
.bkmp-firework span {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);
  box-shadow: 0 0 10px currentColor;
  animation: bkmpFireworkBurst 1s cubic-bezier(0.15, 0.6, 0.4, 1) forwards;
}
@keyframes bkmpFireworkBurst {
  0% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bkmp-firework span { animation: none; opacity: 0; }
}
.donut-center {
  position: absolute; inset: 22%; display: flex; align-items: center; justify-content: center;
  flex-direction: column; text-align: center;
}
.donut-center span { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.donut-center strong { font-family: 'Fraunces', serif; font-size: 1.1rem; }

.legend { display: flex; flex-direction: column; gap: 0.65rem; min-width: 200px; }
.legend-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.legend-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.legend-item .amt { margin-left: auto; color: var(--muted); }

.legend-item { position: relative; min-height: 30px; padding: 0.2rem 0.35rem; border-radius: 8px; outline: none; cursor: default; user-select: none; }
.legend-item:hover, .legend-item:focus-visible { background: var(--paper-2); }
.legend-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 6px) scale(0.96);
  min-width: max-content;
  max-width: 260px;
  padding: 0.65rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line));
  border-radius: 10px;
  background: var(--paper-3);
  color: var(--ink);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 30;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.legend-item::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: 10px;
  height: 10px;
  background: var(--paper-3);
  border-right: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line));
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  pointer-events: none;
  z-index: 31;
  transition: opacity 0.16s ease;
}
.legend-item:hover::after, .legend-item:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.legend-item:hover::before, .legend-item:focus-visible::before { opacity: 1; }
@media (max-width: 520px) {
  .legend-item::after { left: auto; right: 0; transform: translate(0, 6px) scale(0.96); white-space: normal; min-width: 190px; }
  .legend-item:hover::after, .legend-item:focus-visible::after { transform: translate(0, 0) scale(1); }
  .legend-item::before { left: auto; right: 1.2rem; }
}



.line-card {
  max-width: none;
  min-width: 0;
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.05rem 0.95rem;
}
.line-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}
.line-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
}
.line-head h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.line-head p, .line-head span {
  color: var(--muted);
  font-size: 0.74rem;
}
.line-head > div:first-child + .line-head-right > span {
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
}
.line-mode-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.22rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.line-mode-tabs button {
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.36rem 0.7rem;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.line-mode-tabs button:hover { color: var(--ink); background: var(--paper-2); }
.line-mode-tabs button.active {
  color: #fff;
  background: var(--purple);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--purple) 38%, transparent);
}
.mini-line-chart {
  position: relative;
  height: 205px;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 25% 100%,
    var(--paper);
}
.mini-line-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: visible;
}
.line-area { fill: color-mix(in srgb, #3b82f6 24%, transparent); }
.line-stroke { fill: none; stroke: #3b82f6; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.line-axis {
  position: absolute;
  left: 0.65rem;
  z-index: 2;
  color: var(--muted);
  font-size: 0.68rem;
  pointer-events: none;
}
.line-axis.max { top: 0.55rem; }
.line-axis.zero { bottom: 2.15rem; }
.line-point {
  position: absolute;
  z-index: 3;
  width: 13px;
  height: 13px;
  border: 2px solid var(--paper-2);
  border-radius: 50%;
  background: var(--point-color, #3b82f6);
  transform: translate(-50%, -50%);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, #3b82f6 24%, transparent);
}
.line-date-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 1rem;
  z-index: 2;
  pointer-events: none;
}
.line-date-label {
  position: absolute;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 0.64rem;
  white-space: nowrap;
}
.line-point span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 6px) scale(0.96);
  min-width: max-content;
  max-width: 240px;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line));
  border-radius: 9px;
  background: var(--paper-3);
  color: var(--ink);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.line-point small {
  display: block;
  margin-top: 0.22rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 500;
}
.line-point:hover span, .line-point:focus-visible span {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
@media (max-width: 980px) {
  .chart-block { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .line-card { max-width: 100%; }
  .line-head { flex-direction: column; }
  .line-head-right { align-items: flex-start; width: 100%; }
  .mini-line-chart { height: 190px; }
}

.empty-hint {
  text-align: center; color: var(--muted); font-size: 0.9rem; padding: 2rem 1rem;
  border: 1px dashed var(--line); border-radius: 14px;
}

/* ---------- Alle-Einträge-Liste (Hauptseite unten) ---------- */
.ledger-list {
  max-width: none; width: 100%; margin: 0 auto; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-1);
}
.ledger-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 1.1rem; border-bottom: 1px solid var(--line);
  background: var(--paper-2); font-size: 0.85rem;
}
.ledger-row:nth-child(even) { background: var(--paper); }
.ledger-row:last-child { border-bottom: none; }
.ledger-row .l-left { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.ledger-row .ledger-date { color: var(--muted); font-size: 0.75rem; }
.ledger-tag {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.22rem 0.7rem; border-radius: 999px; font-weight: 700; flex-shrink: 0;
  min-width: 78px; text-align: center;
}
.ledger-tag.in { color: var(--pos); background: color-mix(in srgb, var(--pos) 16%, transparent); }
.ledger-tag.out { color: var(--neg); background: color-mix(in srgb, var(--neg) 16%, transparent); }
.ledger-row .amount { font-weight: 600; }
.ledger-row .amount.in { color: var(--pos); }
.ledger-row .amount.out { color: var(--neg); }

/* ---------- Kartenideen ---------- */
.wish-cta {
  display: block;
  width: min(720px, 100%);
  margin: 0 auto var(--space-6);
  text-align: center;
  color: #111018;
  background:
    linear-gradient(135deg, #f7d678 0%, #ffb02e 48%, #f472b6 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  padding: 2rem clamp(1.4rem, 4vw, 3rem);
  cursor: pointer;
  /* --mood-glow-strength daempft die Leucht-Intensitaet auf der ruhigeren
     Marketing-Seite (0.35) gegenueber dem vollen Wert im Idle-Dorf (1) -
     derselbe CTA-Farbverlauf bleibt erkennbar, wirkt hier aber zurueck-
     haltender statt wie ein Spiel-Belohnungs-Knopf. */
  box-shadow: 0 22px 65px rgba(245, 171, 42, calc(0.22 * var(--mood-glow-strength, 0.6) / 0.6)), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.wish-cta:hover { transform: translateY(-3px); filter: saturate(1.08); box-shadow: 0 28px 80px rgba(245, 171, 42, calc(0.28 * var(--mood-glow-strength, 0.6) / 0.6)); }
@media (prefers-reduced-motion: reduce) { .wish-cta { transition: none; } .wish-cta:hover { transform: none; } }
.wish-cta-kicker {
  display: inline-flex;
  margin-bottom: 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wish-cta strong { display: block; font-family: 'Fraunces', serif; font-size: clamp(1.6rem, 3vw, 2.35rem); margin-bottom: 0.4rem; }
.wish-cta span { color: rgba(17, 16, 24, 0.78); font-size: 0.98rem; font-weight: 600; }
/* .wish-cta-kicker ist selbst ein <span> - ohne diese hoehere Spezifitaet
   (.wish-cta .wish-cta-kicker statt nur .wish-cta-kicker) gewinnt die
   allgemeine .wish-cta span-Regel darueber und macht den Kicker-Pill
   (dunkler Text auf dunkel-transparentem Pill-Hintergrund) fast unlesbar. */
.wish-cta .wish-cta-kicker { color: #fff; }

.wish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; align-items: start; }
.wish-card {
  background: linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper) 82%, transparent));
  border: 1px solid var(--line);
  border-radius: var(--mood-radius-panel, 16px);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.wish-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.wish-image-btn {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--paper-3);
  cursor: zoom-in;
}
.wish-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--paper); }
.wish-image-empty {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--paper-3);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wish-card-body { padding: 0.85rem; }
.wish-card .wish-name { margin-bottom: 0.75rem; font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.wish-card-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.wish-vote, .wish-mini-download, .wish-download {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.45rem 0.65rem;
  text-decoration: none;
}
.wish-like { color: var(--pos); }
.wish-dislike { color: var(--neg); }
.wish-mini-download:hover, .wish-vote:hover, .wish-download:hover { border-color: var(--gold); color: var(--gold); }
.wish-vote:disabled { cursor: default; opacity: 0.55; }
.wish-vote:disabled:hover { border-color: var(--line); }
.wish-vote.is-voted { opacity: 1; border-color: currentColor; background: color-mix(in srgb, currentColor 12%, var(--paper)); }

.wish-overlay .joke-card { max-width: 460px; text-align: left; border-radius: 22px; }
.wish-overlay .joke-card h3 { font-family: 'Fraunces', serif; font-size: 1.25rem; margin-bottom: 1.2rem; text-align: center; }
.wish-overlay .joke-buttons { margin-top: 1rem; justify-content: flex-end; }

/* NACHBESSERUNG (Spieler-Meldung 14.07.: "PC Nachricht optisch schoener
   machen? Kompakter? mehr in die Breite anstatt Laenge") - bkmpConfirmDialog
   (Prestige-Bestaetigung, Account loeschen usw.) nutzte bisher den
   Basis-.joke-card-Wert (max-width 320px, zentrierter Text) - fuer die
   deutlich laengeren, mehrzeiligen Bestaetigungstexte fuehrte das auf dem
   Desktop zu einer sehr schmalen, hohen Saeule mit haesslichen 2-3-Wort-
   Zeilenumbruechen. Gleiches Muster wie bei den anderen Overlays oben:
   breiter, linksbuendiger Flietext statt zentriert. */
#bkmpConfirmOverlay .joke-card { max-width: 480px; text-align: left; border-radius: 22px; }
#bkmpConfirmOverlay .joke-card h3 { font-family: 'Fraunces', serif; font-size: 1.25rem; margin-bottom: 1rem; text-align: center; }
#bkmpConfirmOverlay .joke-buttons { margin-top: 1.2rem; justify-content: flex-end; }

.investor-request-cta { margin-bottom: 2rem; }
.investor-request-overlay .joke-card { max-width: 460px; text-align: left; border-radius: 22px; }
.investor-request-overlay .joke-card h3 { font-family: 'Fraunces', serif; font-size: 1.25rem; margin-bottom: 1.2rem; text-align: center; }
.investor-request-overlay .joke-buttons { margin-top: 1rem; justify-content: flex-end; }
.investor-request-overlay #investorRequestSuccessView p { color: var(--muted); line-height: 1.5; margin-bottom: 0.4rem; }
.investor-request-hint {
  margin: -0.4rem 0 0.9rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}
.investor-request-hint strong { color: var(--gold); font-family: 'Fraunces', serif; }
.investor-request-visibility {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: -0.2rem 0 0.9rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.investor-request-visibility input {
  width: auto;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--gold);
}
.feedback-overlay .joke-card { max-width: 460px; text-align: left; border-radius: 22px; }
.feedback-overlay .joke-card h3 { font-family: 'Fraunces', serif; font-size: 1.25rem; margin-bottom: 1.1rem; text-align: center; }
.feedback-overlay .joke-buttons { margin-top: 1rem; justify-content: flex-end; }
.feedback-overlay #feedbackSuccessView h3 { margin-bottom: 0.6rem; }
.feedback-name-toggle {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.feedback-radio {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: var(--muted);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.feedback-radio input { width: auto; margin: 0; flex-shrink: 0; accent-color: var(--gold); }
.feedback-radio:has(input:checked) { color: var(--ink); }
.wish-detail-card {
  position: relative;
  width: min(920px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper-2);
  box-shadow: 0 32px 120px rgba(0, 0, 0, 0.58);
}
.wish-detail-card img {
  width: 100%;
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  display: block;
  background: #050506;
}
.wish-detail-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 800;
}
.wish-detail-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem;
}
.wish-detail-footer span { display: block; color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }
.wish-detail-footer strong { display: block; margin-top: 0.15rem; font-size: 1.05rem; }
.wish-download { background: linear-gradient(135deg, #f5d58a, var(--gold)); color: #111018; border: 0; padding: 0.65rem 0.95rem; }

/* ---------- Wer sind wir ---------- */
.about-page {
  width: min(1080px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  align-items: start;
}
.about-block {
  grid-column: span 2;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper) 86%, transparent));
  padding: clamp(1.2rem, 2.3vw, 2rem);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.about-block.about-block-half { grid-column: span 1; }
@media (max-width: 760px) {
  .about-block.about-block-half { grid-column: span 2; }
}
.about-block h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.35rem, 2.6vw, 2.4rem);
  margin-bottom: 0.65rem;
}
.about-block p {
  color: var(--muted);
  line-height: 1.7;
}
.about-block img {
  width: 100%;
  display: block;
  border-radius: 14px;
  object-fit: cover;
  background: var(--paper);
}
.about-heading {
  text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 18%, var(--paper-2)), var(--paper-2));
}
.about-image {
  padding: 0;
}
.about-image h3 {
  padding: 1rem 1.2rem 1.2rem;
  margin: 0;
}
.about-split {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) 1fr;
  gap: 1.2rem;
  align-items: center;
}
.about-split img {
  aspect-ratio: 16 / 10;
}
.about-team-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  align-items: center;
}
.about-team-card img {
  width: 120px;
  height: 120px;
}
.about-gallery div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.7rem;
}
.about-gallery img {
  aspect-ratio: 1 / 1;
}
@media (max-width: 760px) {
  .about-split,
  .about-team-card { grid-template-columns: 1fr; }
  .about-team-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* ---------- Wer sind wir: Editor mit Live-Vorschau ---------- */
.about-editor {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr);
  gap: 1.4rem;
  align-items: start;
  margin-top: 1.4rem;
}
.about-editor-form textarea { min-height: 120px; }
.about-editor-preview {
  position: sticky;
  top: 1rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper-3) 40%, transparent), color-mix(in srgb, var(--paper-2) 88%, transparent));
  padding: 1rem;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.about-editor-preview-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
}
.about-editor-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos) 22%, transparent);
  animation: bkmpAuraPulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
.about-editor-preview-hint {
  margin-left: auto;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: color-mix(in srgb, var(--gold) 85%, var(--muted));
  font-size: 0.68rem;
}
.about-editor-preview-frame {
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  padding: 1.1rem;
  min-height: 140px;
  max-height: 74vh;
  overflow-y: auto;
  display: grid;
  gap: 0.8rem;
}
.about-editor-preview-frame .about-block {
  box-shadow: none;
  padding: 1.1rem;
}
.about-editor-preview-frame .empty-hint { margin: 0; }
.about-preview-block {
  position: relative;
  cursor: grab;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.about-preview-block.dragging { opacity: 0.4; cursor: grabbing; }
.about-preview-block.drag-over-before { box-shadow: inset 0 3px 0 var(--gold); }
.about-preview-block.drag-over-after { box-shadow: inset 0 -3px 0 var(--gold); }
.about-preview-block.is-draft {
  cursor: default;
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent);
}
.about-preview-draft-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: linear-gradient(135deg, #f5d58a, var(--gold));
}
@media (max-width: 900px) {
  .about-editor { grid-template-columns: 1fr; }
  .about-editor-preview { position: static; }
  .about-editor-preview-frame { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .about-editor-preview-dot { animation: none; }
  .about-preview-block { transition: none; }
}

/* ---------- Investoren ---------- */
.investor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); gap: var(--space-3); }
.investor-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--mood-radius-panel, 16px); padding: 1.5rem;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.investor-card:hover { box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--gold) 24%, var(--line)); }
@media (prefers-reduced-motion: reduce) { .investor-card { transition: none; } }
.investor-card-rich {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  min-height: 280px;
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  width: 100%;
}
.investor-head { display: flex; align-items: center; gap: 0.9rem; }
.investor-avatar {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  image-rendering: pixelated;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  flex-shrink: 0;
}
.investor-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: 'Fraunces', serif;
  font-size: 1.35rem;
  font-weight: 600;
}
.investor-name { font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 600; }
.investor-mc { color: var(--muted); font-size: 0.78rem; margin-top: 0.18rem; }
.investor-period {
  width: fit-content;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 600;
}
.investor-highlight {
  margin-top: 0.2rem;
  padding: 1rem;
  border-radius: 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.investor-highlight span { display: block; color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem; }
.investor-highlight strong { color: var(--pos); font-family: 'Fraunces', serif; font-size: 1.65rem; }
.investor-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-top: auto; }
.investor-metrics div { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 0.65rem; background: var(--paper-2); overflow: hidden; }
.investor-metrics span { display: block; color: var(--muted); font-size: clamp(0.58rem, 0.7vw, 0.68rem); margin-bottom: 0.25rem; white-space: normal; line-height: 1.2; }
.investor-metrics strong { display: block; font-size: clamp(0.78rem, 0.9vw, 0.9rem); line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.investor-metrics .pos { color: var(--pos); }
.investor-metrics .neg { color: var(--neg); }
/* Abgeschlossene Investition (28.07.2026, "Ausgezahlt"-Status) - ersetzt
   Aktueller-Anteil-Kachel + Metriken-Grid durch einen kurzen, in
   Vergangenheitsform formulierten Zusammenfassungssatz (siehe
   js/core/bkmp-site.js). Gruener Akzent statt der neutralen/goldenen
   Farben oben, signalisiert "abgeschlossen/erfolgreich" statt "laeuft". */
.investor-card-concluded { border-color: color-mix(in srgb, var(--pos) 30%, var(--line)); }
.investor-concluded-summary {
  margin-top: 0.2rem;
  padding: 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pos) 8%, var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--pos) 25%, var(--line));
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}
.investor-concluded-summary strong { color: var(--pos); font-weight: 700; }
.investor-thankyou-note {
  margin-top: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 8%, var(--paper-2));
  border: 1px dashed color-mix(in srgb, var(--gold) 35%, var(--line));
  font-size: 0.84rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
}
@media (max-width: 560px) { .investor-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .investor-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .investor-metrics div:last-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .investor-metrics { grid-template-columns: 1fr; } .investor-metrics div:last-child { grid-column: auto; } }
.investor-row { display: flex; justify-content: space-between; font-size: 0.86rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.investor-row:last-child { border-bottom: none; }
.investor-row .k { color: var(--muted); }
.investor-row .v { font-weight: 500; }
.investor-row .v.gold { color: var(--gold); }
.investor-row .v.pos { color: var(--pos); }

/* ---------- News ---------- */
.news-feed { display: flex; flex-direction: column; gap: var(--space-4); max-width: 980px; margin: 0 auto; }
.news-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-1);
}
.news-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.45rem;
  background: var(--paper);
}
.news-images img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
  background: var(--paper);
}
.news-images.count-1 { display: block; }
.news-images.count-1 img { height: 380px; }
.news-body { padding: 1.45rem 1.7rem 1.7rem; }
.news-date { font-size: 0.74rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.55rem; }
.news-title { font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 600; margin-bottom: 0.65rem; }
.news-text { font-size: 1.02rem; color: var(--muted); line-height: 1.65; white-space: pre-wrap; }
@media (max-width: 720px) {
  .news-feed { max-width: 100%; }
  .news-images img, .news-images.count-1 img { height: 240px; }
  .news-title { font-size: 1.2rem; }
  .news-text { font-size: 0.96rem; }
}

/* ---------- Admin-Panel (admin.html) ---------- */
.admin-wrap { max-width: 1040px; margin: 0 auto; padding: 6vh 1.5rem 6rem; position: relative; z-index: 1; }

/* ---------- Impressum / Datenschutz ---------- */
.legal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 780px; margin: 0 auto; padding: 1.4rem 1.2rem 0;
}
.legal-back { color: var(--muted); font-size: 0.85rem; transition: color 0.2s ease; }
.legal-back:hover, .legal-back:focus-visible { color: var(--gold); }
.legal-wrap { max-width: 780px; margin: 0 auto; padding: 1.6rem 1.2rem 5rem; position: relative; z-index: 1; }
.legal-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px;
  padding: 2.2rem 2rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.legal-card h1 { font-family: 'Fraunces', serif; font-size: 1.8rem; margin-bottom: 0.3rem; }
.legal-card .legal-updated { color: var(--muted); font-size: 0.8rem; margin-bottom: 1.8rem; }
.legal-card h2 { font-family: 'Fraunces', serif; font-size: 1.15rem; margin: 1.8rem 0 0.6rem; }
.legal-card h2:first-of-type { margin-top: 0; }
.legal-card h3 { font-size: 0.95rem; margin: 1.1rem 0 0.4rem; color: var(--ink); }
.legal-card p { margin: 0 0 0.7rem; line-height: 1.65; color: var(--ink); font-size: 0.92rem; }
.legal-card ul { margin: 0 0 0.9rem; padding-left: 1.3rem; line-height: 1.65; font-size: 0.92rem; }
.legal-card li { margin-bottom: 0.3rem; }
.legal-card a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.legal-card strong { color: var(--ink); }
.legal-card .legal-muted { color: var(--muted); font-size: 0.85rem; }
.legal-card table { width: 100%; border-collapse: collapse; margin: 0.6rem 0 1rem; font-size: 0.88rem; }
.legal-card table th, .legal-card table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-card table th { color: var(--muted); font-weight: 500; }
.admin-title { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 600; margin-bottom: 0.4rem; text-align: center; }
.admin-sub { text-align: center; color: var(--muted); font-size: 0.9rem; margin-bottom: 2.5rem; }

.login-card {
  max-width: 380px; margin: 10vh auto 0; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 18px; padding: 2.2rem;
  text-align: center; position: relative; z-index: 1;
}
.login-card h1 { font-family: 'Fraunces', serif; font-size: 1.5rem; margin-bottom: 0.4rem; }
.login-card p { color: var(--muted); font-size: 0.85rem; margin-bottom: 1.6rem; }

input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="file"], input[type="date"], textarea, select {
  width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.7rem 0.9rem; color: var(--ink); font-family: 'Inter', sans-serif; font-size: 0.9rem;
  margin-bottom: 0.9rem; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
input[type="search"] { appearance: none; -webkit-appearance: none; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
select { cursor: pointer; }
input[type="date"] {
  cursor: pointer;
  color-scheme: dark;
  padding-right: 0.65rem;
}
html[data-theme="light"] input[type="date"] { color-scheme: light; }
input[type="date"]:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); background: var(--paper-2); }
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  width: 18px;
  height: 18px;
  padding: 0.28rem;
  border-radius: 8px;
  background-color: var(--gold);
  filter: brightness(1.06);
  opacity: 0.95;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { filter: brightness(1.14); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent); }
textarea { resize: vertical; min-height: 90px; }
label { display: block; font-size: 0.76rem; color: var(--muted); margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.06em; }

.btn {
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.88rem;
  padding: 0.65rem 1.3rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); cursor: pointer;
  /* Hover-Audit-Fix (26.07.2026): "transition: all" auf die tatsaechlich von
     .btn/.btn-primary/.btn-danger :hover genutzten Eigenschaften verengt. */
  transition: border-color 0.2s ease, filter 0.2s ease;
}
.btn:hover { border-color: var(--gold); }
.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger { color: var(--neg); }
.btn-danger:hover { border-color: var(--neg); }
.btn-block { width: 100%; }

.admin-section {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.6rem; margin-bottom: 1.6rem;
}
.admin-section h2 { font-family: 'Fraunces', serif; font-size: 1.15rem; margin-bottom: 1rem; }

.entry-list { display: flex; flex-direction: column; margin-bottom: 1rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.entry-table-wrapper {
  max-height: 460px; overflow-y: auto; margin-bottom: 0.2rem;
  border-radius: 10px;
}

.entry-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  background: var(--paper); padding: 0.5rem 0.85rem;
  font-size: 0.82rem; border-bottom: 1px solid var(--line);
  transition: background 0.15s ease;
}
.entry-row:last-child { border-bottom: none; }
.entry-row:nth-child(even) { background: var(--paper-2); }
.entry-row:hover { background: var(--paper-3); }
.entry-row .desc { display: flex; align-items: baseline; gap: 0.55rem; overflow: hidden; }
.entry-row .desc .name { font-weight: 600; white-space: nowrap; }
.entry-row .desc .meta { color: var(--muted); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-row .del-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.entry-row .del-btn:hover { background: color-mix(in srgb, var(--neg) 16%, transparent); color: var(--neg); }
.entry-row .del-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.entry-row.is-unread { background: color-mix(in srgb, var(--gold) 7%, var(--paper)); border-left: 3px solid var(--gold); padding-left: calc(0.85rem - 3px); }
.entry-row.is-unread:nth-child(even) { background: color-mix(in srgb, var(--gold) 10%, var(--paper-2)); }
.entry-row-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid-4 { grid-template-columns: 1.2fr 1fr 0.8fr 1fr; }
@media (max-width: 860px) { .form-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .form-grid, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; } }
.income-calc-hint {
  min-height: 1.2rem;
  margin: -0.15rem 0 1rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.back-link { font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; }
.back-link:hover { color: var(--ink); }

/* ---------- Admin-Layout mit Sidebar ---------- */
.admin-layout { display: flex; gap: 2rem; align-items: flex-start; }

.admin-sidebar {
  width: 210px; flex-shrink: 0; position: sticky; top: 2rem;
  display: flex; flex-direction: column; gap: 0.3rem;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 0.6rem;
}
.admin-nav-btn {
  display: flex; align-items: center; gap: 0.65rem;
  font-family: 'Inter', sans-serif; font-size: 0.87rem; font-weight: 500;
  color: var(--muted); background: none; border: none; text-align: left;
  padding: 0.65rem 0.8rem; border-radius: 9px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-nav-btn:hover { background: var(--paper-3); color: var(--ink); }
.admin-nav-btn.active { background: var(--gold); color: var(--accent-ink); font-weight: 600; }
.admin-nav-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }
.admin-nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #E5484D;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-nav-badge.visible { display: flex; }
.admin-nav-btn.active .admin-nav-badge { background: var(--accent-ink); }

.admin-main { flex: 1; min-width: 0; }
.admin-page { display: none; }
.admin-page.active { display: block; animation: bkmpAdminFadeIn 0.28s ease; }
@keyframes bkmpAdminFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .admin-page.active { animation: none; }
}

@media (max-width: 760px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar {
    width: 100%; flex-direction: row; overflow-x: auto; position: static;
  }
  .admin-nav-btn { white-space: nowrap; }
}

.investor-form-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.entry-actions { display: flex; gap: 0.45rem; align-items: center; flex-shrink: 0; }
.edit-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.38rem 0.7rem;
}
.edit-btn:hover { border-color: var(--gold); color: var(--gold); }

#page-income .entry-table-wrapper {
  height: 430px;
  max-height: 430px;
  overflow-y: auto;
}
#page-income .entry-list { margin-bottom: 0; }


/* ---------- Admin Refresh ---------- */
body:has(.admin-wrap), body:has(.login-card) {
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 28rem),
    radial-gradient(circle at 84% 8%, rgba(56, 189, 248, 0.12), transparent 24rem),
    linear-gradient(180deg, #07070b 0%, var(--paper) 62%, #050506 100%);
}
.admin-wrap {
  max-width: 1220px;
  padding-top: 4.5rem;
}
.admin-top-actions {
  position: sticky;
  top: 1rem;
  z-index: 15;
  padding: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper-2) 78%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
}
.admin-title {
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: 0;
  margin-top: 1.7rem;
}
.admin-sub {
  color: var(--muted);
  margin-bottom: 2rem;
}
.admin-layout {
  gap: 1.2rem;
}
.admin-sidebar {
  width: 235px;
  padding: 0.72rem;
  border-radius: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper-3) 72%, transparent), color-mix(in srgb, var(--paper-2) 92%, transparent));
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
}
.admin-nav-btn {
  min-height: 46px;
  padding: 0.78rem 0.88rem;
  border: 1px solid transparent;
}
.admin-nav-btn:hover {
  border-color: color-mix(in srgb, var(--gold) 22%, transparent);
}
.admin-nav-btn.active {
  color: var(--accent-ink);
  background: linear-gradient(135deg, #f5d58a, var(--gold));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--gold) 20%, transparent);
}
.admin-main {
  min-height: 520px;
}
.admin-section {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper-3) 46%, transparent), color-mix(in srgb, var(--paper-2) 92%, transparent));
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.24);
}
.admin-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), rgba(56, 189, 248, 0.7), transparent);
  opacity: 0.8;
}
.admin-section h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
}
.admin-section h2::after {
  content: "Live Sync";
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pos);
  border: 1px solid color-mix(in srgb, var(--pos) 28%, transparent);
  background: color-mix(in srgb, var(--pos) 10%, transparent);
  border-radius: 999px;
  padding: 0.32rem 0.62rem;
}
.admin-help-text {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 0.7rem 0 1rem;
}

/* ---------- Uebersicht (Dashboard) ---------- */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.overview-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.3rem 1.4rem;
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper-3) 46%, transparent), color-mix(in srgb, var(--paper-2) 92%, transparent));
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.overview-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--gold) 35%, var(--line));
}
.overview-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 13px;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.overview-card-icon svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.overview-card.pos .overview-card-icon { background: color-mix(in srgb, var(--pos) 16%, transparent); }
.overview-card.pos .overview-card-icon svg { stroke: var(--pos); }
.overview-card.neg .overview-card-icon { background: color-mix(in srgb, var(--neg) 16%, transparent); }
.overview-card.neg .overview-card-icon svg { stroke: var(--neg); }
.overview-card-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.overview-card-value {
  font-family: 'Fraunces', serif;
  font-size: 1.45rem;
  font-weight: 600;
}
.overview-card-sub {
  margin-top: 0.2rem;
  font-size: 0.74rem;
  color: var(--muted);
}
.overview-activity {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.overview-activity-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.9rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
}
.overview-activity-row:last-child { border-bottom: none; }
.overview-activity-row:nth-child(even) { background: var(--paper-2); }
.overview-activity-type {
  flex-shrink: 0;
  min-width: 84px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
}
.overview-activity-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.overview-activity-amount { flex-shrink: 0; font-weight: 700; }
.overview-activity-amount.pos { color: var(--pos); }
.overview-activity-amount.neg { color: var(--neg); }
.overview-activity-date { flex-shrink: 0; color: var(--muted); font-size: 0.76rem; }

/* ---------- Toast-Benachrichtigungen ---------- */
.admin-toasts {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 80;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.6rem;
  width: min(360px, calc(100vw - 2.4rem));
  pointer-events: none;
}
.admin-toast {
  pointer-events: auto;
  cursor: pointer;
  border-radius: 14px;
  padding: 0.85rem 1.05rem;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
  white-space: pre-line;
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.97);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.admin-toast.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.admin-toast-success {
  border-color: color-mix(in srgb, var(--pos) 45%, var(--line));
  color: var(--ink);
}
.admin-toast-success::before { content: "✓  "; color: var(--pos); font-weight: 900; }
.admin-toast-error {
  border-color: color-mix(in srgb, var(--neg) 45%, var(--line));
  color: var(--ink);
}
.admin-toast-error::before { content: "✕  "; color: var(--neg); font-weight: 900; }
.admin-toast-info {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
  color: var(--ink);
}
.admin-toast-info::before { content: "i  "; color: var(--gold); font-weight: 900; font-style: italic; }
@media (prefers-reduced-motion: reduce) {
  .admin-toast { transition: opacity 0.15s ease; transform: none; }
}

.backup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.backup-box {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  padding: 1rem;
}
.backup-box h3 {
  font-size: 1rem;
  margin-bottom: 0.45rem;
}
.backup-box p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
  margin-bottom: 0.9rem;
}
@media (max-width: 760px) {
  .backup-grid { grid-template-columns: 1fr; }
}
.entry-table-wrapper {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper) 62%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.entry-list {
  border: 0;
  border-radius: 16px;
  margin-bottom: 0;
}
.entry-row {
  padding: 0.78rem 0.95rem;
  background: color-mix(in srgb, var(--paper-2) 78%, transparent);
}
.entry-row:nth-child(even) {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
}
.entry-row .name {
  font-size: 0.94rem;
}
.entry-row .meta {
  margin-top: 0.18rem;
}
input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="file"], input[type="date"], textarea, select {
  min-height: 44px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
}
input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="file"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
  transform: translateY(-1px);
}
label {
  color: color-mix(in srgb, var(--muted) 86%, var(--ink));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.btn {
  min-height: 43px;
  border-radius: 13px;
}
.btn-primary {
  background: linear-gradient(135deg, #f4d188, var(--gold));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--gold) 18%, transparent);
}
.login-card {
  max-width: 430px;
  margin-top: 12vh;
  border-radius: 24px;
  padding: 2.6rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper-3) 52%, transparent), var(--paper-2));
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.28);
}
.login-card h1 {
  font-size: 1.9rem;
}
@media (max-width: 760px) {
  .admin-wrap { padding-top: 5.2rem; }
  .admin-sidebar { width: 100%; border-radius: 18px; }
  .admin-nav-btn { flex: 1 0 auto; }
  .admin-top-actions { position: static; }
}


/* ---------- Update Editor ---------- */
.format-toolbar { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: -0.2rem 0 0.7rem; }
.format-btn { min-height: 34px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); padding: 0.35rem 0.7rem; cursor: pointer; font: inherit; font-size: 0.78rem; transition: border-color 0.2s ease, transform 0.15s ease, background 0.2s ease; }
.format-btn:hover { border-color: var(--gold); transform: translateY(-1px); background: var(--paper-2); }
.format-btn.color-red { color: #F87171; }
.format-btn.color-green { color: #4ADE80; }
.format-btn.color-gold { color: var(--gold); }
.format-btn.color-blue { color: #38BDF8; }
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.news-text strong { color: var(--ink); font-weight: 800; }
.news-text em { color: color-mix(in srgb, var(--ink) 80%, var(--gold)); }

.wish-admin-list .entry-row {
  align-items: center;
}
.wish-admin-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0;
}
.wish-admin-thumb-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* ---------- PartnerShops ---------- */
.partner-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 auto 1.5rem;
}
.partner-filter button {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  color: var(--muted);
  min-height: 36px;
  padding: 0.42rem 0.9rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.partner-filter button:hover,
.partner-filter button.active {
  color: var(--accent-ink);
  border-color: transparent;
  background: linear-gradient(135deg, #f5d58a, var(--gold));
}
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}
.partner-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  box-shadow: var(--shadow-2);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.partner-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
@media (prefers-reduced-motion: reduce) { .partner-card, .partner-filter button { transition: none; } .partner-card:hover { transform: none; } }
.partner-image-frame,
.partner-image-empty {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: var(--paper-3);
}
.partner-image-frame {
  position: relative;
  overflow: hidden;
}
.partner-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.partner-image-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
}
.partner-body {
  padding: 1rem;
}
.partner-category {
  display: inline-flex;
  margin-bottom: 0.65rem;
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.partner-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}
.partner-location {
  color: var(--ink);
  font-weight: 800;
  margin-bottom: 0.6rem;
}
.partner-card p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0.15rem 0 0.9rem;
}
.partner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.partner-actions a,
.partner-actions span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  color: var(--ink);
  background: var(--paper-2);
  font-size: 0.78rem;
  font-weight: 700;
}
.partner-actions a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ---------- Karten Verkaufen ---------- */
.cardsale-banner {
  width: min(880px, 100%);
  margin: 0 auto var(--space-6);
  text-align: center;
  color: #111018;
  background: linear-gradient(135deg, #f7d678 0%, #ffb02e 48%, #f472b6 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  padding: 2rem clamp(1.4rem, 4vw, 3rem);
  box-shadow: 0 22px 65px rgba(245, 171, 42, calc(0.22 * var(--mood-glow-strength, 0.6) / 0.6)), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.cardsale-banner-kicker {
  display: inline-flex;
  margin-bottom: 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cardsale-banner strong { display: block; font-family: 'Fraunces', serif; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.55rem; }
.cardsale-banner p { color: rgba(17, 16, 24, 0.82); font-size: 0.94rem; font-weight: 600; line-height: 1.55; max-width: 60ch; margin: 0 auto; }
.cardsale-banner p b { font-weight: 900; }
.cardsale-request-cta { margin-top: 1.1rem; }

.cardsale-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
.cardsale-card {
  background: linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper) 82%, transparent));
  border: 1px solid var(--line);
  border-radius: var(--mood-radius-panel, 16px);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.cardsale-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
@media (prefers-reduced-motion: reduce) { .cardsale-card { transition: none; } .cardsale-card:hover { transform: none; } }
.cardsale-image-frame, .cardsale-image-empty {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  background: var(--paper-3);
}
.cardsale-image-frame { position: relative; overflow: hidden; }
.cardsale-image-frame img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--paper-3); }
.cardsale-image-empty { display: grid; place-items: center; color: var(--muted); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; }
.cardsale-body { padding: 0.9rem 1rem 1.1rem; }
.cardsale-body h3 { font-family: 'Fraunces', serif; font-size: 1.05rem; margin-bottom: 0.7rem; }
.cardsale-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.cardsale-stats div { border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.6rem; background: var(--paper-2); }
.cardsale-stats span { display: block; color: var(--muted); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; }
.cardsale-stats strong { font-family: 'Fraunces', serif; font-size: 1rem; }
.cardsale-stats strong.gold { color: var(--gold); }

.cardsale-admin-row { align-items: center; }
.cardsale-counter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0 0.6rem;
}
.cardsale-count-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
}
.cardsale-count-btn:hover { border-color: var(--gold); color: var(--gold); }
.cardsale-count-value { min-width: 34px; text-align: center; font-weight: 700; font-size: 0.85rem; }

/* ---------- Kartendatenbank ---------- */
.cardcatalog-intro {
  max-width: 68ch;
  margin: 0 auto 1.6rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}
.cardcatalog-cta { margin-bottom: 2rem; }
.cardcatalog-search-wrap {
  position: relative;
  width: min(420px, 100%);
  margin: 0 auto 1.2rem;
}
.cardcatalog-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
  transition: stroke 0.2s ease;
}
input.cardcatalog-search {
  width: 100%;
  margin: 0;
  padding: 0.75rem 1.1rem 0.75rem 2.7rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
input.cardcatalog-search::placeholder { color: var(--muted); }
input.cardcatalog-search:focus {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);
}
@media (prefers-reduced-motion: reduce) { input.cardcatalog-search { transition: none; } }
.cardcatalog-search-wrap:focus-within .cardcatalog-search-icon { stroke: var(--gold); }
.cardcatalog-filters {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.8rem;
}
.cardcatalog-filter-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
}
.cardcatalog-filter-label {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cardcatalog-filter-row .partner-filter { margin: 0; }

.cardcatalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }

/* ---------- Bestenliste ---------- */
.leaderboard-intro {
  max-width: 68ch;
  margin: 0 auto 1.6rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}
.leaderboard-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}
.leaderboard-tab {
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .leaderboard-tab { transition: none; } }
.leaderboard-tab:hover { border-color: var(--gold); color: var(--ink); }
.leaderboard-tab.active {
  background: linear-gradient(135deg, #f5d58a, var(--gold));
  color: var(--accent-ink);
  border-color: transparent;
}
.leaderboard-list { max-width: 640px; margin: 0 auto; display: grid; gap: 0.6rem; }
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper) 84%, transparent));
}
.leaderboard-row.is-me {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 25%, transparent);
}
.leaderboard-rank { flex-shrink: 0; width: 2.2rem; text-align: center; font-weight: 800; font-size: 1.05rem; }
.leaderboard-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 0.4rem; }
.leaderboard-name-clickable { cursor: pointer; border-radius: 8px; transition: background 0.15s ease; }
.leaderboard-name-clickable:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.leaderboard-plushie { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--gold) 45%, var(--line)); }
.leaderboard-value { flex-shrink: 0; color: var(--gold-fixed); font-weight: 700; font-size: 0.88rem; }
.leaderboard-title {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold-fixed);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.leaderboard-row.rank-1 {
  border-color: color-mix(in srgb, #ffd166 55%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, #ffd166 14%, var(--paper-2)), color-mix(in srgb, var(--paper) 84%, transparent));
  box-shadow: 0 0 20px rgba(255, 209, 102, 0.22);
}
.leaderboard-row.rank-1 .leaderboard-rank { font-size: 1.4rem; }
.leaderboard-row.rank-2 {
  border-color: color-mix(in srgb, #cbd5e1 55%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, #cbd5e1 12%, var(--paper-2)), color-mix(in srgb, var(--paper) 84%, transparent));
}
.leaderboard-row.rank-2 .leaderboard-rank { font-size: 1.25rem; }
.leaderboard-row.rank-3 {
  border-color: color-mix(in srgb, #d3915b 55%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, #d3915b 12%, var(--paper-2)), color-mix(in srgb, var(--paper) 84%, transparent));
}
.leaderboard-row.rank-3 .leaderboard-rank { font-size: 1.15rem; }
.cardcatalog-card {
  background: linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper) 82%, transparent));
  border: 1px solid var(--line);
  border-radius: var(--mood-radius-panel, 16px);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.cardcatalog-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
@media (prefers-reduced-motion: reduce) { .cardcatalog-card { transition: none; } .cardcatalog-card:hover { transform: none; } }
.cardcatalog-image-frame, .cardcatalog-image-empty {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  background: var(--paper-3);
}
.cardcatalog-image-frame { position: relative; overflow: hidden; }
.cardcatalog-image-frame img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--paper-3); }
.cardcatalog-image-empty { display: grid; place-items: center; color: var(--muted); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; }
.cardcatalog-body { padding: 0.9rem 1rem 1.1rem; }
.cardcatalog-category {
  display: inline-flex;
  margin-bottom: 0.55rem;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cardcatalog-body h3 { font-family: 'Fraunces', serif; font-size: 1.05rem; margin-bottom: 0.35rem; }
.cardcatalog-shop { color: var(--ink); font-weight: 700; font-size: 0.82rem; margin-bottom: 0.5rem; }
.cardcatalog-body p { color: var(--muted); font-size: 0.86rem; line-height: 1.5; margin-bottom: 0.5rem; }
.cardcatalog-submitter { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Kartendatenbank: Bestaetigungs-Popup ---------- */
.cardcatalog-overlay .joke-card { max-width: 420px; text-align: left; border-radius: 22px; }
.cardcatalog-overlay .joke-card h3 { font-family: 'Fraunces', serif; font-size: 1.25rem; margin-bottom: 0.6rem; text-align: center; }
.cardcatalog-overlay .joke-buttons { margin-top: 1rem; justify-content: flex-end; }
.cardcatalog-overlay #cardCatalogSuccessView p { color: var(--muted); line-height: 1.5; margin: 0 0 0.4rem; }
.cardcatalog-confirm-hint {
  margin: -0.2rem 0 0.9rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}
.cardcatalog-confirm-summary {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  padding: 0.9rem;
  margin-bottom: 0.4rem;
}
.cardcatalog-confirm-image {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 0.8rem;
  display: block;
  background: var(--paper);
}
.cardcatalog-confirm-summary dl { display: grid; gap: 0.45rem; }
.cardcatalog-confirm-summary dl div { display: flex; gap: 0.5rem; justify-content: space-between; }
.cardcatalog-confirm-summary dt { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; }
.cardcatalog-confirm-summary dd {
  margin: 0;
  font-size: 0.86rem;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ---------- Investoren-Anfragen ---------- */
.investor-request-status {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--line);
}
.investor-request-status.status-pending {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-color: color-mix(in srgb, var(--gold) 30%, transparent);
}
.investor-request-status.status-confirmed {
  color: var(--pos);
  background: color-mix(in srgb, var(--pos) 14%, transparent);
  border-color: color-mix(in srgb, var(--pos) 30%, transparent);
}
.investor-request-status.status-rejected {
  color: var(--neg);
  background: color-mix(in srgb, var(--neg) 14%, transparent);
  border-color: color-mix(in srgb, var(--neg) 30%, transparent);
}
.investor-request-row { flex-wrap: wrap; gap: 0.6rem; }
.investor-anonymous-badge {
  display: inline-flex;
  margin-left: 0.4rem;
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: color-mix(in srgb, var(--line) 60%, transparent);
  border: 1px solid var(--line);
  vertical-align: middle;
}
/* Admin-Panel: "Ausgezahlt"-Status (28.07.2026) - gruener Akzent statt der
   neutralen Standardfarbe von .investor-anonymous-badge, sonst identisch. */
.investor-paidout-badge { color: #22c55e; background: color-mix(in srgb, #22c55e 16%, transparent); border-color: color-mix(in srgb, #22c55e 40%, var(--line)); }

/* Auszahlungsbeweis-Foto (28.07.2026): kleines, anklickbares Vorschau-
   Quadrat rechts in der Investor-Kopfzeile (siehe .investor-head oben,
   margin-left:auto schiebt es an den rechten Kartenrand), vergroesserbar
   ueber #investorPayoutViewerOverlay (js/core/bkmp-site.js). */
.investor-payout-thumb {
  flex: 1 1 140px; min-width: 90px; max-width: 260px; height: 46px; margin-left: 0.75rem;
  border-radius: 8px; object-fit: cover; cursor: zoom-in;
  border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.investor-payout-thumb:hover { transform: scale(1.08); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.investor-payout-viewer-card { max-width: min(1100px, 96vw); text-align: center; }
.investor-payout-viewer-img { max-width: 100%; max-height: 80vh; width: 100%; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); margin: 0.6rem 0; }

.feedback-list { display: flex; flex-direction: column; gap: 0.75rem; }
.feedback-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  padding: 1rem 1.1rem;
  position: relative;
}
.feedback-card.is-unread { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); background: color-mix(in srgb, var(--gold) 5%, var(--paper)); }
.feedback-card.is-archived { opacity: 0.65; }
.feedback-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.feedback-card-name { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.feedback-card-date { color: var(--muted); font-size: 0.76rem; }
.feedback-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--line) 40%, transparent);
}
.feedback-category-tag.cat-lob { color: #F87171; border-color: color-mix(in srgb, #F87171 40%, var(--line)); background: color-mix(in srgb, #F87171 12%, transparent); }
.feedback-category-tag.cat-idee { color: #FBBF24; border-color: color-mix(in srgb, #FBBF24 40%, var(--line)); background: color-mix(in srgb, #FBBF24 12%, transparent); }
.feedback-category-tag.cat-kritik { color: #F59E0B; border-color: color-mix(in srgb, #F59E0B 45%, var(--line)); background: color-mix(in srgb, #F59E0B 14%, transparent); }
.feedback-category-tag.cat-bug { color: #EF4444; border-color: color-mix(in srgb, #EF4444 45%, var(--line)); background: color-mix(in srgb, #EF4444 14%, transparent); }
.feedback-card-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.feedback-card-message { font-size: 0.87rem; color: var(--ink); line-height: 1.55; white-space: pre-wrap; margin-bottom: 0.7rem; }
.feedback-card-image { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; border: 1px solid var(--line); object-fit: cover; margin-bottom: 0.7rem; cursor: pointer; }
.feedback-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.feedback-card-actions .edit-btn { font-size: 0.78rem; padding: 0.4rem 0.85rem; }
.feedback-card-actions .del-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.feedback-card-actions .del-btn:hover { background: color-mix(in srgb, var(--neg) 16%, transparent); color: var(--neg); }
.feedback-card-actions .del-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

.partner-admin-row {
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.partner-admin-thumb {
  width: 58px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0;
}
.partner-admin-thumb-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* ---------- Kartendatenbank: Admin-Moderation ---------- */
.cardcatalog-admin-search {
  margin: 0 0 1.2rem;
}
.cardcatalog-admin-group { margin-bottom: 1.4rem; }
.cardcatalog-admin-group h3 {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  margin-bottom: 0.6rem;
}
.cardcatalog-admin-count { color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.cardcatalog-edit-form {
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line));
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.4rem;
  background: color-mix(in srgb, var(--gold) 6%, transparent);
}
.cardcatalog-edit-form h3 { font-family: 'Fraunces', serif; font-size: 1rem; margin-bottom: 0.8rem; }
.cardcatalog-merge-tool {
  border-top: 1px solid var(--line);
  padding-top: 1.3rem;
  margin-top: 0.6rem;
}
.cardcatalog-merge-tool h3 { font-family: 'Fraunces', serif; font-size: 1rem; margin-bottom: 0.4rem; }
.cardcatalog-merge-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: 0.8rem 0 1rem;
}
.cardcatalog-merge-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  color: var(--ink);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}
.cardcatalog-merge-item input { width: auto; accent-color: var(--gold); }

.admin-pending-popup-card { max-width: 380px; }
.admin-pending-popup-card h3 { font-family: 'Fraunces', serif; font-size: 1.3rem; }
.admin-pending-popup-card p { color: var(--muted); font-size: 0.94rem; }
.admin-pending-popup-card a.btn-ja { text-decoration: none; display: inline-flex; align-items: center; }

img[data-bkmp-img] {
  transition: opacity 0.18s ease, filter 0.18s ease;
}
img[data-bkmp-img].bkmp-image-loading {
  opacity: 0.88;
}
img[data-bkmp-img].bkmp-image-missing {
  opacity: 0.35;
  filter: grayscale(1);
}
[data-bkmp-image-wrap] img[data-bkmp-img].bkmp-image-missing {
  opacity: 0;
  filter: none;
}
[data-bkmp-image-wrap]::after {
  content: attr(data-empty-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--paper-3) 92%, transparent), var(--paper-2));
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
[data-bkmp-image-wrap].bkmp-image-missing::after {
  opacity: 1;
}
.partner-admin-thumb-wrap,
.wish-admin-thumb-wrap {
  position: relative;
  display: block;
  width: 58px;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--paper-3);
}
.wish-admin-thumb-wrap {
  width: 56px;
  height: 56px;
}
.partner-admin-thumb-wrap .partner-admin-thumb,
.wish-admin-thumb-wrap .wish-admin-thumb {
  width: 100%;
  height: 100%;
}

/* ---------- Performance + Easter Egg ---------- */
.stat-card,
.news-card,
.wish-card,
.partner-card,
.investor-card,
.about-block {
  transform: translateZ(0);
}

.bkmp-easter {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(circle at center, rgba(201, 165, 106, 0.18), rgba(8, 7, 10, 0.1) 42%, transparent 68%);
}
.bkmp-easter.visible { opacity: 1; }
.bkmp-easter-card {
  width: min(380px, calc(100vw - 2rem));
  border: 1px solid rgba(201, 165, 106, 0.45);
  border-radius: 22px;
  padding: 1.4rem 1.5rem;
  text-align: center;
  background: linear-gradient(145deg, rgba(18, 16, 22, 0.94), rgba(8, 7, 10, 0.9));
  /* Hintergrund ist absichtlich IMMER dunkel (Easter-Egg-"Geheimnis"-Look,
     unabhaengig vom Hell/Dunkel-Modus) - ohne feste Textfarbe erbt der
     Inhalt sonst var(--ink)/var(--muted) der GLOBALEN Seiten-Theme (im
     Hellmodus fast schwarz), was auf diesem dunklen Hintergrund unlesbar
     wird. Gleicher Bug/Fix wie beim Golden-Hour-Popup (Spieler-Meldung
     17.07., diesmal am Dungeon-Ergebnis entdeckt, betrifft aber jede
     Karte mit dieser Klasse). */
  color: #f3ecff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42), 0 0 42px rgba(201, 165, 106, 0.2);
  transform: translateY(18px) scale(0.94);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.bkmp-easter.visible .bkmp-easter-card {
  transform: translateY(0) scale(1);
}
.bkmp-easter-card small {
  display: inline-flex;
  margin-bottom: 0.45rem;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  background: rgba(201, 165, 106, 0.18);
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bkmp-easter-card strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  line-height: 1;
}
.bkmp-easter-card p {
  margin-top: 0.7rem;
  color: #c9c2dd;
  line-height: 1.5;
}
.bkmp-easter > span {
  position: absolute;
  left: calc(50% + (var(--i) - 9) * 38px);
  top: calc(50% + ((var(--i) % 5) - 2) * 32px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 16px rgba(201, 165, 106, 0.75);
  animation: bkmpSpark 1.45s ease-out infinite;
  animation-delay: calc(var(--i) * -0.08s);
}
body.bkmp-boost .hero-banner {
  filter: saturate(1.12) brightness(1.05);
}

/* ---------- Dauerhafte Aura (Easter Egg Toggle) ---------- */
body.bkmp-aura-active::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  box-shadow:
    inset 0 0 60px 8px color-mix(in srgb, var(--gold) 55%, transparent),
    inset 0 0 160px 40px color-mix(in srgb, var(--purple) 35%, transparent);
  animation: bkmpAuraPulse 4.5s ease-in-out infinite;
}
@keyframes bkmpAuraPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.bkmp-aura-active::after { animation: none; opacity: 0.75; }
}

@keyframes bkmpSpark {
  0% { transform: translate3d(0, 0, 0) scale(0.3); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate3d(calc((var(--i) - 9) * 5px), -90px, 0) scale(1); opacity: 0; }
}

/* ---------- Maus-Schuettel-Funke (Easter Egg: Maus schnell hin und her) ---------- */
.bkmp-mouseshake-burst {
  position: fixed;
  z-index: 96;
  pointer-events: none;
  width: 0;
  height: 0;
}
.bkmp-mouseshake-burst > span {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(201, 165, 106, 0.8);
  transform: rotate(calc(var(--i) * 25.7deg));
  animation: bkmpMouseShakeSpark 0.75s ease-out forwards;
}
@keyframes bkmpMouseShakeSpark {
  0% { opacity: 1; transform: rotate(calc(var(--i) * 25.7deg)) translateX(0) scale(1); }
  100% { opacity: 0; transform: rotate(calc(var(--i) * 25.7deg)) translateX(46px) scale(0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .bkmp-mouseshake-burst > span { animation: none; opacity: 0; }
}

/* ---------- Loot-Regen (Konami-Code Easter Egg) ---------- */
.bkmp-loot-rain {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  overflow: hidden;
}
.bkmp-loot-rain span {
  position: absolute;
  top: -10%;
  animation-name: bkmpLootFall;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
@keyframes bkmpLootFall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translate3d(0, 115vh, 0) rotate(320deg); opacity: 0.85; }
}
.bkmp-loot-rain-banner {
  position: absolute;
  top: 1.4rem;
  left: 50%;
  transform: translate(-50%, -12px);
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f7d678, var(--gold));
  color: #111018;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 0.94rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.bkmp-loot-rain-banner.visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .bkmp-loot-rain span { animation: none; opacity: 0; }
  .bkmp-loot-rain-banner { transition: opacity 0.15s ease; }
}

/* ---------- Drachenfeuer (Easter Egg: "drache" tippen) ---------- */
.bkmp-fire {
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.bkmp-fire.fading { opacity: 0; }
.bkmp-fire span {
  position: absolute;
  bottom: -10%;
  animation-name: bkmpFireRise;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  filter: drop-shadow(0 0 12px rgba(255, 120, 30, 0.75));
}
@keyframes bkmpFireRise {
  0% { transform: translate3d(0, 0, 0) scale(0.7) rotate(0deg); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate3d(0, -115vh, 0) scale(1.1) rotate(-8deg); opacity: 0; }
}
body.bkmp-burning {
  animation: bkmpBurningShake 0.35s ease-in-out 4;
}
body.bkmp-burning::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 94;
  pointer-events: none;
  background: radial-gradient(circle at 50% 100%, rgba(255, 100, 20, 0.55), rgba(255, 40, 0, 0.25) 45%, transparent 75%);
  animation: bkmpFireFlicker 0.5s ease-in-out infinite alternate;
}
@keyframes bkmpFireFlicker {
  0% { opacity: 0.65; }
  100% { opacity: 1; }
}
@keyframes bkmpBurningShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-2px, 1px, 0); }
  50% { transform: translate3d(2px, -1px, 0); }
  75% { transform: translate3d(-1px, 2px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bkmp-fire span { animation: none; opacity: 0; }
  body.bkmp-burning { animation: none; }
  body.bkmp-burning::before { animation: none; opacity: 0.5; }
}

/* ---------- Creeper (Easter Egg: "creeper" tippen) ---------- */
body.bkmp-creeper-shake { animation: bkmpBurningShake 0.12s ease-in-out 9; }
.bkmp-creeper-flash {
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(74, 222, 128, 0.55), rgba(20, 60, 30, 0.25) 55%, transparent 80%);
  animation: bkmpCreeperPulse 0.35s ease-in-out infinite;
}
.bkmp-creeper-flash.bkmp-creeper-defused {
  animation: none;
  background: transparent;
  display: grid;
  place-items: center;
  transition: opacity 0.4s ease;
}
.bkmp-creeper-message {
  background: color-mix(in srgb, var(--paper-2) 92%, transparent);
  border: 1px solid color-mix(in srgb, #4ade80 45%, var(--line));
  color: #4ade80;
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
@keyframes bkmpCreeperPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.bkmp-creeper-shake { animation: none; }
  .bkmp-creeper-flash { animation: none; opacity: 0.7; }
}

/* ---------- Zerathor-Erwachen (Easter Egg: "zerathor" tippen) ---------- */
body.bkmp-zerathor-shake { animation: bkmpBurningShake 0.15s ease-in-out 7; }
.bkmp-zerathor-flash {
  position: fixed;
  inset: 0;
  z-index: 98;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(180, 20, 20, 0.4), rgba(8, 0, 0, 0.8) 75%);
  opacity: 0;
  animation: bkmpZerathorFlashIn 0.25s ease-out forwards;
}
.bkmp-zerathor-flash.bkmp-zerathor-fading {
  animation: bkmpZerathorFlashOut 0.65s ease-in forwards;
}
.bkmp-zerathor-message {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 4.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ff6b5b;
  text-shadow: 0 0 18px rgba(255, 70, 50, 0.85), 0 0 42px rgba(200, 0, 0, 0.5);
  text-transform: uppercase;
  text-align: center;
  padding: 0 1rem;
  opacity: 0;
  transform: scale(0.85);
  animation: bkmpZerathorMessageIn 0.4s ease-out 0.15s forwards;
}
@keyframes bkmpZerathorFlashIn { to { opacity: 1; } }
@keyframes bkmpZerathorFlashOut { to { opacity: 0; } }
@keyframes bkmpZerathorMessageIn { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  body.bkmp-zerathor-shake { animation: none; }
  .bkmp-zerathor-flash, .bkmp-zerathor-message { animation: none; opacity: 1; transform: none; }
}

/* ---------- Matrix-Regen (Easter Egg: "matrix" tippen) ---------- */
.bkmp-matrix-overlay {
  position: fixed;
  inset: 0;
  z-index: 97;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.bkmp-matrix-overlay.fading { opacity: 0; }

/* ---------- DerLiber-Easter-Egg: versteckte Strichmaennchen ---------- */
.bkmp-derliber {
  position: absolute;
  z-index: 5;
  background: none;
  border: none;
  display: flex;
  cursor: pointer;
  padding: 0.2rem;
  color: var(--muted);
  opacity: 0.6;
  animation: bkmpDerLiberPeek 2.6s ease-in-out infinite;
  transition: transform 0.2s ease, opacity 0.3s ease, color 0.2s ease;
}
.bkmp-derliber svg { width: 22px; height: 22px; }
.bkmp-derliber:hover { opacity: 1; color: var(--gold); transform: scale(1.3) rotate(-6deg); }
.bkmp-derliber.found { animation: none; transform: scale(1.8); opacity: 0; }
.bkmp-derliber-fixed { position: fixed; left: 0.4rem; bottom: 4.2rem; z-index: 21; }
@keyframes bkmpDerLiberPeek {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .bkmp-derliber { animation: none; }
}

/* ---------- Idle-Easter-Egg: Zzz-Blase ---------- */
.bkmp-zzz-bubble {
  position: fixed;
  z-index: 98;
  transform: translate(-50%, -120%);
  font-size: 1.8rem;
  pointer-events: none;
  animation: bkmpZzzFloat 2.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}
@keyframes bkmpZzzFloat {
  0%, 100% { transform: translate(-50%, -120%) translateY(0); opacity: 0.85; }
  50% { transform: translate(-50%, -120%) translateY(-10px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bkmp-zzz-bubble { animation: none; }
}

/* ---------- Footer + Easter Egg: "Jannik der Hase" ---------- */
.bkmp-footer {
  padding: 2.4rem 1rem 3rem;
  text-align: center;
}
.bkmp-footer-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

/* Dezente Impressum/Datenschutz-Links, an eine untere Ecke des Footers
   gesetzt statt zentriert - sollen auffindbar, aber nicht dominant sein. */
.bkmp-footer-legal {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  max-width: 1760px;
  margin: 0.9rem auto 0;
  padding: 0 0.6rem;
}
.bkmp-footer-legal a {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.bkmp-footer-legal a:hover,
.bkmp-footer-legal a:focus-visible {
  opacity: 1;
  color: var(--gold);
}
@media (max-width: 560px) {
  .bkmp-footer-legal { justify-content: center; }
}
.bkmp-secret-zone {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 44px;
  margin: 0.4rem auto 0;
}
.bkmp-secret-hint {
  display: block;
  margin: 0.5rem auto 0;
  padding: 0.2rem;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  color: var(--gold);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  cursor: default;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.bkmp-secret-hint.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  cursor: pointer;
}
.bkmp-secret-hint.visible:hover,
.bkmp-secret-hint.visible:focus-visible {
  filter: brightness(1.2);
}

.bkmp-jannik-bunny {
  position: fixed;
  bottom: 8vh;
  left: -14vw;
  width: 80px;
  height: 85px;
  z-index: 97;
  pointer-events: none;
  background-image: url('assets/jannik-sprite.png');
  background-repeat: no-repeat;
  background-size: 880px 85px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35));
  animation: bkmpJannikHop 6s ease-in-out forwards, bkmpJannikBounce 1.4s ease-in-out infinite, bkmpJannikSpriteFrames 1.4s steps(11) infinite;
}
@keyframes bkmpJannikHop {
  0% { left: 108vw; }
  100% { left: -14vw; }
}
@keyframes bkmpJannikBounce {
  0% { transform: translateY(0); }
  27% { transform: translateY(-2px); }
  45% { transform: translateY(-24px); }
  64% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
@keyframes bkmpJannikSpriteFrames {
  from { background-position-x: 0; }
  to { background-position-x: -880px; }
}

.bkmp-jannik-toast {
  position: fixed;
  top: 5.5rem;
  left: 50%;
  transform: translate(-50%, -10px);
  z-index: 98;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f7d678, var(--gold));
  color: #111018;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  text-align: center;
  max-width: min(90vw, 360px);
}
.bkmp-jannik-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* Generisches Achievement-Freischalt-Popup - unten links (unten rechts ist
   schon das Live-Streamer-Popup belegt). Wird fuer JEDEN Erfolg benutzt,
   nicht nur fuer Jannik. */
.bkmp-achievement-popup {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 98;
  width: min(300px, calc(100vw - 2rem));
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  border-radius: 16px;
  background: linear-gradient(145deg, var(--paper-2), var(--paper));
  color: var(--ink);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.38), 0 0 34px rgba(201, 165, 106, 0.18);
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.97);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.bkmp-achievement-popup.visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.bkmp-achievement-popup-title { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 0.35rem; }
.bkmp-achievement-popup-desc { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.6rem; }
.bkmp-achievement-popup-unlock { font-size: 0.78rem; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 0.03em; }
.bkmp-achievement-popup-unlock strong { display: block; color: var(--ink); font-size: 0.92rem; text-transform: none; letter-spacing: 0; margin-top: 0.15rem; font-family: 'Fraunces', serif; }

.bkmp-achievement-confetti {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  width: min(300px, calc(100vw - 2rem));
  height: 0;
  z-index: 99;
  pointer-events: none;
}
.bkmp-achievement-confetti > span {
  position: absolute;
  bottom: 0;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  opacity: 0;
  animation: bkmpConfettiBurst ease-out forwards;
}
@keyframes bkmpConfettiBurst {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-95px) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce) {
  .bkmp-achievement-confetti { display: none; }
}

/* ============================================================
   Phase 5.5 (19.07.): gemeinsames Reward-Presentation-System, siehe
   js/ui/bkmp-reward-presenter.js. Drei Stufen, dieselbe Rahmensprache wie
   die bereits bestehenden .bkmp-jannik-toast/.bkmp-achievement-popup/
   -confetti oben - hier verallgemeinert um --reward-color (gespeist aus
   den --rarity-*-Tokens in design-tokens.css) statt fest verdrahtetem Gold.
   ============================================================ */

/* ---- Stufe 1: stapelbarer Reward-Toast ---- */
.bkmp-reward-toast-stack {
  position: fixed;
  top: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 98;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 2rem));
}
.bkmp-reward-toast {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--reward-color, var(--gold)) 70%, #f7d678), var(--reward-color, var(--gold)));
  color: #111018;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  text-align: center;
}
.bkmp-reward-toast.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 640px) {
  .bkmp-reward-toast-stack { top: 4.4rem; }
  .bkmp-reward-toast { font-size: 0.78rem; padding: 0.5rem 0.9rem; }
}

/* ---- Stufe 2: Reward-Karte (verallgemeinert .bkmp-achievement-popup) ---- */
.bkmp-reward-card {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 98;
  width: min(320px, calc(100vw - 2rem));
  display: flex;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--reward-color, var(--gold)) 45%, var(--line));
  border-radius: 16px;
  background: linear-gradient(145deg, var(--paper-2), var(--paper));
  color: var(--ink);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.38), 0 0 34px color-mix(in srgb, var(--reward-color, var(--gold)) 18%, transparent);
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.97);
  transition: opacity 0.35s ease, transform 0.35s ease;
  flex-wrap: wrap;
}
.bkmp-reward-card.visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.bkmp-reward-card-icon { flex: none; font-size: 2rem; line-height: 1; }
/* Phase 5.5 (19.07.): Dragon-Thumbnails (bkmpDragonThumbHtml) statt Emoji fuer
   Ei-/Schluepf-/Entwicklungs-Karten - .idle-dragon-thumb bringt bereits die
   96px-Begrenzung mit, hier nur der Seltenheits-Glow-Rahmen dazu. */
.bkmp-reward-card-thumb { border-radius: 12px; box-shadow: 0 0 16px color-mix(in srgb, var(--reward-color, var(--gold)) 35%, transparent); }
.bkmp-reward-ceremony-thumb { max-width: 128px !important; border-radius: 14px; box-shadow: 0 0 26px color-mix(in srgb, var(--reward-color, var(--gold)) 45%, transparent); }
.bkmp-reward-card-body { flex: 1 1 160px; min-width: 0; }
.bkmp-reward-card-rarity { font-size: 0.68rem; font-weight: 800; color: var(--reward-color, var(--gold)); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.2rem; }
.bkmp-reward-card-title { font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 700; overflow-wrap: break-word; }
.bkmp-reward-card-desc { font-size: 0.78rem; color: var(--muted); margin: 0.3rem 0 0; }
.bkmp-reward-card-source { font-size: 0.7rem; color: var(--muted); margin-top: 0.3rem; }
.bkmp-reward-card-actions { flex: 1 0 100%; display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.bkmp-reward-card-actions button { flex: 1; padding: 0.4rem 0.6rem; font-size: 0.76rem; }
@media (prefers-reduced-motion: reduce) {
  .bkmp-reward-card { transition: opacity 0.2s linear; transform: none !important; }
}

/* ---- Stufe 3: Zeremonie ---- */
.bkmp-reward-ceremony-overlay { z-index: 97; }
.bkmp-reward-ceremony-card {
  max-width: 420px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--reward-color, var(--gold)) 55%, var(--line));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 60px color-mix(in srgb, var(--reward-color, var(--gold)) 25%, transparent);
}
.bkmp-reward-ceremony-icon { font-size: 3rem; margin-bottom: 0.4rem; }
.bkmp-reward-ceremony-rarity { font-size: 0.78rem; font-weight: 800; color: var(--reward-color, var(--gold)); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
.bkmp-reward-ceremony-desc { color: var(--muted); font-size: 0.9rem; margin: 0.4rem 0; }
.bkmp-reward-ceremony-source { color: var(--muted); font-size: 0.78rem; }

.bkmp-reward-burst {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  width: min(320px, calc(100vw - 2rem));
  height: 0;
  z-index: 99;
  pointer-events: none;
}
.bkmp-reward-burst > span {
  position: absolute;
  bottom: 0;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  opacity: 0;
  animation: bkmpConfettiBurst ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .bkmp-reward-burst { display: none; }
}

.bkmp-jannik-carrot {
  position: fixed;
  top: -8vh;
  z-index: 97;
  font-size: 2.2rem;
  pointer-events: none;
  animation: bkmpCarrotFall 1s cubic-bezier(.5, 0, .9, .4) forwards;
}
@keyframes bkmpCarrotFall {
  0% { top: -8vh; transform: rotate(0deg); }
  100% { top: var(--bkmp-carrot-land, 60vh); transform: rotate(200deg); }
}

/* ---------- Admin-Login (dezent, unten links) ---------- */
/* Bewusst nicht mehr in .top-actions oben rechts (dort ist Admin-Login fuer
   normale Besucher irrelevant und beansprucht unnoetig Platz) - stattdessen
   ein dezenter Fixed-Link unten links. */
.login-btn-corner {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 20;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-2) 80%, transparent);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.login-btn-corner:hover { opacity: 1; color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
@media (max-width: 640px) {
  .login-btn-corner { left: 0.7rem; bottom: 0.7rem; padding: 0.4rem 0.7rem; font-size: 0.68rem; }
}

/* ---------- Erfolge-Panel ---------- */
/* Bewusst KEIN eigenes Scrollen mehr auf der Karte selbst (frueher
   overflow-y:auto) - verschachtelt mit dem Scrollen der Liste darunter
   (.achievements-list/.cosmetics-list) fuehrte zu zwei unabhaengigen
   Scrollbalken uebereinander: man landete beim Scrollen haeufig im
   inneren (grossen) statt im aeusseren (kleinen, kaum greifbaren)
   Scrollbereich und kam so kaum an "Schliessen" unten vorbei. Stattdessen
   jetzt dasselbe Muster wie beim Idle-Dorf-Kampf-Tab: die Karte ist eine
   Flexbox-Spalte, Kopf/Tabs/Login-Links/Buttons bleiben fix (flex-shrink:0),
   nur der jeweils sichtbare Listenbereich waechst/scrollt im verbleibenden
   Platz - ein einziger, klar erreichbarer Scrollbereich. */
.achievements-card {
  max-width: 760px; width: 92vw; max-height: 88vh;
  display: flex; flex-direction: column; overflow-y: hidden;
  text-align: left; border-radius: 22px;
}
.achievements-card > h3,
.achievements-card > .achievements-summary,
.achievements-card > .achievements-subtabs,
.achievements-card > .auth-switch,
.achievements-card > .joke-buttons {
  flex-shrink: 0;
}
.achievements-card h3 { font-family: 'Fraunces', serif; font-size: 1.25rem; margin-bottom: 0.5rem; text-align: center; }
.achievements-summary { color: var(--muted); font-size: 0.85rem; text-align: center; margin-bottom: 1rem; }
.plushie-panel-hint { color: var(--muted); font-size: 0.82rem; text-align: center; margin: 0 0 0.6rem; }
.achievements-list {
  /* Bewusst display:flex statt display:grid: als Grid-Container INNERHALB
     eines flex:1 1 auto-Elements mit min-height:0 hat der Browser die
     scrollbare Ueberlauf-Hoehe faelschlich auf die eigene (verfuegbare)
     Hoehe begrenzt statt auf die tatsaechliche Inhaltshoehe - scrollHeight
     war identisch zu clientHeight, obwohl aufgeklappte Kategorien weit
     darueber hinausragten. Ergebnis: kein Scrollen moeglich, nur die erste
     Zeile einer aufgeklappten Kategorie war sichtbar. Da hier ohnehin nur
     eine einzelne Spalte (.achievement-category pro Kategorie) gebraucht
     wird, behebt eine simple Flex-Spalte das Problem vollstaendig. */
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  margin-bottom: 0.4rem;
  padding-right: 0.2rem;
}
.achievement-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
}
.achievement-row.unlocked { border-color: color-mix(in srgb, var(--pos) 35%, var(--line)); }
.achievement-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.4; }
.achievement-row.locked .achievement-title,
.achievement-row.locked .achievement-desc { color: var(--muted); }
.achievement-title { font-weight: 700; font-size: 0.9rem; }
.achievement-desc { font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; line-height: 1.4; }
.achievement-unlocked-at { font-size: 0.7rem; color: var(--muted); opacity: 0.75; margin-top: 0.25rem; }
/* Bugfix 25.07.2026 (Nutzerbericht "Gildenboss-Bezwinger" zeigt keinen
   Vorteil) - macht den echten, bereits vorhandenen Titel-Bonus (siehe
   bkmpAchievementLinkedTitleBonus in js/core/bkmp-site.js) auf der
   Erfolgs-Karte sichtbar. Gesperrt-Zustand bewusst gedaempft (opacity),
   nicht wie .achievement-desc komplett ausgegraut - der Bonuswert selbst
   bleibt lesbar, auch wenn er noch nicht aktiv ist. */
.achievement-bonus { font-size: 0.75rem; color: var(--gold); margin-top: 0.2rem; font-weight: 600; }
.achievement-row.locked .achievement-bonus { opacity: 0.65; }
.achievement-progress {
  margin-top: 0.4rem;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  display: inline-block;
  width: calc(100% - 3.2rem);
  vertical-align: middle;
}
.achievement-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 60%, #38bdf8));
  border-radius: 999px;
}
.achievement-progress-label { font-size: 0.68rem; color: var(--muted); margin-left: 0.4rem; }

/* Titel-Bonusanzeige im Idle-Dorf-Sammlung-Tab - bewusst NUR hier sichtbar,
   nicht im allgemeinen Kosmetik-/Erfolge-Profil (dort bleiben Titel rein
   kosmetisch). */
.idle-sammlung-subheading { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-family: 'Fraunces', serif; font-size: 1rem; margin: 1.2rem 0 0.3rem; }
.idle-runen-inventory-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.idle-runen-inventory-header .idle-sammlung-subheading { margin: 0; }
.idle-runen-inventory-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
/* Bug-Fix 19.07. (Spieler-Meldung: "Alle Button im Runen Fenster wackeln
   komisch immer wenn 1 Drache besiegt wird"): bkmpIdleRenderRunenPanel()
   laeuft bei jedem Drachen-Kill neu (siehe Kommentar bei drawerContent
   weiter unten) - die "(N)"-Zahl in diesen 3 Buttons erschien/verschwand
   bisher komplett je nach Zaehlerstand (0 vs. >0), wodurch sich die
   Button-Breite bei jedem Runenfund/-verbrauch sichtbar sprunghaft
   aenderte und alle Buttons in der Zeile mitverschob. Jetzt steht die Zahl
   IMMER da (auch "(0)"), nur noch Ziffernanzahl-Wechsel (z.B. 9->10)
   aendert minimal die Breite - tabular-nums haelt auch das stabil. */
.idle-runen-sell-all-btn, .idle-runen-autofuse-btn, .idle-runen-autoascend-btn, .idle-runen-maximize-legi-btn { font-size: 0.76rem; padding: 0.4rem 0.7rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.idle-runen-sell-all-btn:disabled, .idle-runen-autofuse-btn:disabled, .idle-runen-maximize-legi-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Bugfix 25.07.2026 (Spieler-Meldung "meine Runen sind komplett weg" -
   siehe idledorf.js/bkmp-runes.js Kommentare): Hinweis-Banner, wenn das
   Laden (teilweise) fehlgeschlagen ist.
   Nachtrag (04.08.2026): umbenannt von .idle-runen-cap-banner - der frueher
   zusaetzliche "Lager ist gekappt"-Zweig samt der slot-uebergreifenden
   Rarität-Verkaufsleiste (.idle-runen-rarity-cleanup-row/-label/
   -sell-btn) ist komplett entfallen, siehe supabase.js's
   loadUnequippedPlayerRunes()-Kommentar. */
.idle-runen-error-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  flex-wrap: wrap; font-size: 0.78rem; color: var(--muted);
  background: rgba(249, 115, 22, 0.12); border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: 10px; padding: 0.5rem 0.7rem; margin: 0.4rem 0 0.6rem;
}
.idle-runen-error-banner .idle-runen-retry-btn { font-size: 0.74rem; padding: 0.3rem 0.6rem; white-space: nowrap; }
.idle-sammlung-count { font-size: 0.75rem; font-weight: 400; color: var(--muted); font-family: 'Inter', sans-serif; }
.idle-title-bonus-list { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.idle-title-bonus-list .achievement-row { align-items: center; }
.idle-title-bonus {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
}
.idle-title-bonus-hidden { background: transparent; color: var(--muted); border-color: var(--line); }
.achievements-card .joke-buttons { margin-top: 1rem; justify-content: space-between; }

/* ---------------- Runen-Tab (siehe idledorf.js) ---------------- */
.idle-runen-header-row { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; margin-bottom: 0.7rem; }
/* Hintergrund-Automatik-Schalter (27.07.2026, siehe bkmp-runes.js
   BKMP_RUNE_BACKGROUND_TOGGLE_META) - drei kompakte Checkboxen nebeneinander,
   wiederverwendet .idle-autobuy-toggle als Basis (siehe dort), hier nur
   dichter gepackt fuer eine Zeile statt volle Breite. */
.idle-runen-bgauto-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.idle-runen-bgauto-toggle { margin-bottom: 0; padding: 0.4rem 0.7rem; font-size: 0.74rem; flex: 0 0 auto; }
.idle-runen-help-btn { padding: 0.4rem 0.8rem; font-size: 0.76rem; white-space: nowrap; }
.idle-runen-loadout-btn { padding: 0.4rem 0.7rem; font-size: 0.72rem; white-space: nowrap; }
.idle-runen-loadout-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Hauptzeile im Runen-Tab: Kreis links, Detail-/Aktionsbox rechts daneben
   (Nutzer-Wunsch, 15.07.: "links das Runenkreis, rechts daneben die Stats
   der Rune"). Das Lager selbst sitzt NICHT mehr hier, sondern im
   ausklappbaren Balken am Bildschirmrand (.idle-runen-drawer weiter
   unten) - dadurch bleibt diese Zeile kurz und erfordert praktisch nie
   eigenes Scrollen. */
/* Spieler-Idee (OPShadowWolf, 30.07.2026): --rune-drawer-overlap wird live
   von bkmpRuneSyncDrawerPosition() (js/systems/bkmp-runes.js) gesetzt, sobald
   der geoeffnete Lager-Balken auf schmalen Fenstern in die Karte hinein
   geklemmt werden muss - schiebt die Hauptzeile (inkl. .idle-runen-equip-btn,
   das per margin-left:auto ganz rechts sitzt) exakt so weit nach links, wie
   ueberlappt wuerde, damit der Button immer erreichbar bleibt. 0px per
   Default (Var. noch nie gesetzt bzw. Balken geschlossen), transition synchron
   zur 0.25s-Breiten-Animation des Balkens selbst. */
.idle-runen-main-row { display: flex; gap: 1.6rem; align-items: flex-start; padding-right: var(--rune-drawer-overlap, 0px); transition: padding-right 0.25s ease; }
.idle-runen-detail-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.idle-runen-detail-col .idle-runen-circle-wrap { flex-shrink: 0; margin-bottom: 0; }
.idle-runen-detail-col .idle-runen-stat-box { flex: 1; min-width: 0; margin-bottom: 0; }
/* Ziel-Container fuer das eingebettete Runenlager (Redesign 06.08.2026,
   siehe bkmpRuneSyncDrawerEmbedMode() in js/systems/bkmp-runes.js) - unter
   1000px bleibt er immer leer (der Balken schwebt dort weiterhin klassisch
   ausserhalb, siehe .idle-runen-drawer weiter unten), deshalb hier
   bewusst width:0 als Default, damit er dort keinen unsichtbaren Leerraum
   reserviert. */
.idle-runen-lager-slot { flex: 0 0 0; width: 0; min-width: 0; }
@media (max-width: 720px) {
  .idle-runen-main-row { flex-direction: column; align-items: stretch; }
}
/* Redesign 06.08.2026 (Nutzerauftrag "Runenlager aus schmaler rechter
   Sidebar in den grossen mittleren Hauptbereich integrieren" - Zitat:
   "GENAU DIESE LEERE MITTLERE FLAECHE soll jetzt sinnvoll genutzt werden"):
   ab 1000px (identischer Schwellwert wie das bestehende zweispaltige
   Desktop-Kartenlayout) wird .idle-runen-main-row zu einer echten
   Zwei-Spalten-Komposition - links eine schlanke, feste Detailspalte
   (Runenkreis + ausgewaehlte Rune), rechts/mittig das grosse Lager als
   Herzstueck. Unter 1000px bleibt die bisherige, bereits mehrfach
   getestete Darstellung (Detailbereich allein im normalen Fluss, Lager
   als schwebender Balken) komplett unangetastet. */
@media (min-width: 1000px) {
  .idle-runen-main-row { align-items: flex-start; padding-right: 0 !important; }
  .idle-runen-detail-col { flex: 0 0 min(340px, 32vw); max-width: 340px; }
  .idle-runen-lager-slot { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* Ausklappbarer Lager-Balken (Nutzer-Wunsch, 15.07.: "direkt daneben extra
   Balken fuer das Lager was mit einen Pfeil in der Mitte ausklappbar ist")
   - haengt fest am rechten VIEWPORT-Rand statt im normalen Kartenfluss, denn
   genau dort blieb bei breiten Fenstern ohnehin ungenutzter Platz neben der
   max. 1200px breiten Karte sichtbar (siehe Spieler-Screenshot). Bewusst
   position:fixed relativ zum Viewport statt zur Karte - vermeidet jede
   Breiten-/Zentrierungs-Rechnerei, die Karte bleibt komplett unangetastet.
   Nur sichtbar, wenn das Idle-Dorf-Fenster offen UND der Runen-Tab aktiv
   ist (siehe bkmpRuneSyncDrawerVisibility in idledorf.js). */
.idle-runen-drawer {
  position: fixed;
  top: 50%;
  /* "left" wird von bkmpRuneSyncDrawerPosition() (idledorf.js) live auf die
     rechte Kante der .idle-dorf-card gesetzt - NACHBESSERUNG (Nutzerwunsch,
     15.07.: "lieber an unser Fenster mit ran"): vorher haing der Balken fest
     am Bildschirmrand, wodurch bei breiten Fenstern eine sichtbare Luecke
     zwischen Karte und Balken entstand (Spieler-Screenshot). Kein festes
     "right:0" mehr, sonst wuerde beides gleichzeitig gelten und sich
     widersprechen. Der Pfeil-Tab selbst bleibt weiterhin 0px an der Karte
     ("left" trifft exakt die Kartenkante) - nur ZWISCHEN Tab und Lager-Box
     liegt per "gap" eine kleine Luft, siehe NACHBESSERUNG unten. */
  transform: translateY(-50%);
  z-index: 56;
  display: none;
  align-items: center;
  gap: 10px;
}
.idle-runen-drawer.visible { display: flex; }
.idle-runen-drawer-toggle {
  flex-shrink: 0;
  width: 30px;
  height: 68px;
  border-radius: 0 14px 14px 0;
  border: 1px solid var(--line);
  border-left: none;
  background: linear-gradient(160deg, var(--paper-2), var(--paper));
  color: var(--gold);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 6px 0 22px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, color 0.15s ease;
}
.idle-runen-drawer-toggle:hover { color: var(--ink); }
.idle-runen-drawer.open .idle-runen-drawer-toggle { transform: scaleX(-1); }
/* NACHBESSERUNG (Nutzerwunsch, 15.07.: "geht das jetzt optisch auch
   huebsch? Spiegeln z.b." - der Balken war bisher nur eine flache,
   unverzierte Box ohne jede Anlehnung an den Look des Hauptfensters).
   Spiegelt jetzt bewusst 1:1 den Verlaufsrahmen + Glow von
   .idle-dorf-overlay .idle-dorf-card (gleiche Gradient-Border-Technik,
   gleiche bkmpTierGlow-Animation) - liest sich dadurch wie ein kleiner
   Zwillings-Kartenausschnitt statt einer separaten, unpassenden Flaeche. */
/* NACHBESSERUNG (Spieler-Meldung, 15.07.: "wenn ich den Balken zumache
   bleibt die Rune kurz ne Sekunde länger da"): Hintergrund/Rahmen/Glow
   standen vorher NUR in der ".open"-Regel - beim Schliessen verschwanden
   sie dadurch SOFORT (Hintergrundbilder/Boxschatten lassen sich nicht
   ueberblenden), waehrend "width" noch 250ms lang von 320px auf 0
   schrumpft. In dieser Zeitspanne stand die Box ohne jeden Hintergrund/
   Rahmen da, aber der fix 320px breite Inhalt (.idle-runen-drawer-panel-
   inner) war weiterhin voll da und dadurch frei ueber der Seite sichtbar -
   genau der gemeldete Rune-Geist-Effekt. Fix: Hintergrund/Rahmen/Glow/
   Animation gehoeren in die GRUNDREGEL (immer aktiv), nur noch "width"
   unterscheidet offen/zu - bei width:0 + overflow:hidden ist ohnehin
   nichts sichtbar, ganz gleich ob mit oder ohne Verlauf. */
.idle-runen-drawer-panel {
  width: 0;
  min-width: 0;
  height: 74vh;
  max-height: 640px;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 138, 76, 0.10), transparent 55%),
    radial-gradient(circle at 85% 100%, rgba(167, 139, 250, 0.10), transparent 50%),
    linear-gradient(180deg, var(--paper-2), var(--paper)) padding-box,
    linear-gradient(160deg, var(--gold), rgba(167, 139, 250, 0.55) 45%, var(--gold)) border-box;
  border: 1.5px solid transparent;
  background-size: 100% 100%, 100% 100%, 100% 100%, 220% 220%;
  animation: bkmpTierGlow 7s ease infinite;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 40px color-mix(in srgb, var(--gold) 18%, transparent);
  transition: width 0.25s ease;
}
.idle-runen-drawer.open .idle-runen-drawer-panel {
  width: min(320px, 84vw);
}
@media (prefers-reduced-motion: reduce) {
  .idle-runen-drawer-panel { animation: none; }
}
.idle-runen-drawer-panel-inner {
  width: 320px;
  max-width: 84vw;
  height: 100%;
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
}
.idle-runen-drawer-panel-inner .idle-sammlung-subheading { margin-top: 0; }
.idle-runen-inventory-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.4rem;
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .idle-runen-drawer-panel, .idle-runen-drawer-panel-inner { max-width: 78vw; }
  .idle-runen-drawer.open .idle-runen-drawer-panel { width: 78vw; }
}
/* Eingebetteter Zustand (Redesign 06.08.2026, ab 1000px - siehe
   bkmpRuneSyncDrawerEmbedMode() in js/systems/bkmp-runes.js): der Balken
   sitzt als echtes Kind von #idleRuneLagerSlot im normalen Dokumentfluss
   der Mitte statt als schwebender position:fixed-Streifen. Rahmen/Glow/
   Farbverlauf (.idle-runen-drawer-panel-Grundregel oben) bleiben komplett
   unveraendert - nur Position/Breite/Hoehe werden hier gezielt aufgehoben,
   damit es sich weiterhin wie derselbe "Zwillings-Kartenausschnitt"
   anfuehlt, nur eben gross und mittig statt schmal und schwebend. Eine
   grosszuegige, von der (variablen) Hoehe der linken Detailspalte bewusst
   UNABHAENGIGE Zielhoehe (statt align-items:stretch) - das Lager bleibt
   dadurch immer gross+gut lesbar, auch wenn die gerade ausgewaehlte Rune
   wenig Text hat und die Detailspalte selbst kurz ausfaellt. */
.idle-runen-drawer.embedded {
  position: static;
  top: auto; left: auto; transform: none;
  z-index: auto;
  width: 100%;
  gap: 0;
}
.idle-runen-drawer.embedded .idle-runen-drawer-toggle { display: none; }
.idle-runen-drawer.embedded .idle-runen-drawer-panel {
  width: 100% !important;
  min-width: 0;
  height: min(66vh, 660px);
  max-height: none;
}
.idle-runen-drawer.embedded .idle-runen-drawer-panel-inner {
  width: 100%;
  max-width: none;
  padding: 1.1rem 1.3rem 1.3rem;
}
/* Etwas grosszuegigere Kartengroesse im grossen eingebetteten Lager (der
   bestehende Grid-Mechanismus - repeat(auto-fill, minmax(...)) - passt die
   Spaltenzahl dadurch automatisch an die jetzt deutlich groessere
   verfuegbare Breite an, keine eigene Spaltenzahl-Berechnung noetig). */
.idle-runen-drawer.embedded .idle-runen-inventory { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 0.7rem; }
.idle-runen-circle-wrap { display: flex; justify-content: center; margin-bottom: 1.2rem; }
.idle-runen-circle-inner { position: relative; display: inline-block; }
.idle-runen-circle-img {
  display: block;
  width: min(340px, 60vw);
  max-width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
/* Eingesetzte Rune direkt auf einem der 6 Hex-Rahmen, siehe
   BKMP_RUNE_SLOT_POSITIONS in idledorf.js.
   KRITISCHER FUND (Spieler-Screenshot: "Rune viel zu klein"): die 6
   Slot-Positionen sind bewusst klein bemessen (~16.5-18.6% der
   Kreisbreite - passend zur GENAUEN Position/Groesse der gemalten
   Hex-Aussparung auf circle-full.png/circle-empty.png), das vorhandene
   Runen-PNG (enthaelt Hex-Rahmen+Symbol+Glow+Badge-Flaeche in einer
   Datei, ~386x479px, deutlich hochkant) wurde bisher aber per
   "width/height:100%" exakt auf diese kleine Slot-Box gezwungen -
   dadurch wirkte die vollstaendige Rune wie ein kleines Icon.
   "object-fit:fill" verzerrte das Bild zusaetzlich (die Slot-Box hat
   nicht exakt dasselbe Seitenverhaeltnis wie das PNG). Jetzt: die
   Slot-Position (top/left, weiterhin exakt auf der gemalten Hex-
   Aussparung) bleibt unveraendert der Klick-Anker, das <img> selbst
   wird per position:absolute+translate(-50%,-50%) UNABHAENGIG groesser
   dargestellt und darf ueber die kleine Slot-Box hinausragen
   (overflow:visible) - "object-fit:contain" verhindert dabei jede
   Verzerrung. Ein Klick auf den ueberstehenden Bildbereich funktioniert
   weiterhin (Event-Bubbling vom <img> zum umschliessenden <button>,
   unabhaengig von CSS-Ueberlauf). */
.idle-runen-equip-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  overflow: visible;
}
.idle-runen-equip-slot img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rune-color) 65%, transparent));
  transition: transform 0.15s ease;
}
.idle-runen-equip-slot:hover img, .idle-runen-equip-slot:focus-visible img { transform: translate(-50%, -50%) scale(1.08); }
/* Prozent-Werte statt fixer Pixel, damit der Level-Badge weiterhin am
   sichtbaren (jetzt groesseren) Bildrand sitzt statt an der Ecke der
   unveraendert kleinen Slot-Hitbox - Prozentangaben bei position:absolute
   loesen relativ zur eigenen Elterngroesse auf (hier: die Slot-Box, siehe
   BKMP_RUNE_SLOT_POSITIONS), skaliert dadurch automatisch pro Slot mit. */
.idle-runen-slot-level {
  position: absolute;
  bottom: -18%;
  right: -14%;
  background: color-mix(in srgb, black 45%, var(--paper));
  border: 1px solid var(--rune-color);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0 4px;
  border-radius: 999px;
  line-height: 16px;
  z-index: 1;
}
/* Pro-Slot-Inventarfenster: 6 Reiter (einer je Runen-Typ), zeigen nur die
   Runen des jeweils aktiven Slots statt eines gemeinsamen 30er-Rasters -
   noetig geworden, weil Instanzen jetzt durch Stufe/Sub-Stats individuell
   unterschiedlich sind und ein reines Slot+Seltenheit-Raster das nicht mehr
   abbilden kann. */
.idle-runen-slot-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.idle-runen-slot-tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.idle-runen-slot-tab-icon { font-size: 0.95rem; }
.idle-runen-slot-tab-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 25%, transparent);
  color: var(--gold);
  font-size: 0.62rem;
  line-height: 16px;
  text-align: center;
}
.idle-runen-slot-tab:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
.idle-runen-slot-tab.active {
  color: var(--gold);
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, var(--paper));
}
@media (max-width: 640px) {
  .idle-runen-slot-tab-name { display: none; }
  .idle-runen-slot-tab { padding: 0.4rem 0.55rem; }
}
.idle-runen-stat-box {
  min-height: 4.2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  padding: 0.85rem 1rem;
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.idle-runen-stat-placeholder { color: var(--muted); font-size: 0.85rem; margin: 0; text-align: center; width: 100%; }
/* Leer-Zustand innerhalb des .idle-runen-inventory-Rasters: ohne
   grid-column: 1 / -1 landet der einzelne <p> als normales Grid-Element in
   der ERSTEN Spalte (minmax(64px,1fr)) statt ueber die volle Breite - der
   Text quetscht sich dann in eine ~60px-Spalte und faellt Wort fuer Wort
   untereinander (siehe Spieler-Meldung/Screenshot). */
.idle-runen-inventory .idle-runen-stat-placeholder {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.6rem 1rem;
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}
.idle-runen-inventory .idle-runen-stat-placeholder::before {
  content: '🔍';
  font-size: 1.4rem;
  filter: grayscale(0.4);
  opacity: 0.7;
}
.idle-runen-stat-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.idle-runen-stat-head img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rune-color) 55%, transparent)); }
.idle-runen-equip-btn { margin-left: auto; flex-shrink: 0; padding: 0.45rem 0.9rem; font-size: 0.8rem; }
.idle-runen-stat-name { font-weight: 700; font-size: 0.92rem; }
.idle-runen-stat-level { color: var(--gold); font-weight: 800; font-size: 0.8rem; margin-left: 0.2rem; }
.idle-runen-stat-rarity { font-size: 0.76rem; font-weight: 700; color: var(--rune-color); }
.idle-runen-stat-line { margin: 0; font-size: 0.88rem; }
.idle-runen-stat-primary { font-weight: 700; }
.idle-runen-stat-note { color: var(--muted); font-size: 0.74rem; margin: 0.3rem 0 0; }
.idle-runen-substat-list {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8rem;
  color: var(--muted);
}
/* Bug-Fix (Nutzer-Screenshot 19.07.): .idle-runen-reroll-btn hatte nie eine
   eigene Regel (weder hier noch in .btn-ja/.btn-nein aufgenommen) und fiel
   dadurch auf den ungestylten grauen Browser-Standard-Button zurueck -
   siehe Kommentar oben bei .btn-ja, .btn-nein, exakt derselbe Fehlerfall.
   Bewusst eigene, kleinere Pille statt .btn-nein: sitzt inline direkt
   hinter dem Sub-Stat-Text, .btn-nein-Standardgroesse waere hier zu
   dominant fuer eine haeufig wiederholte Nebenaktion (bis zu 4x pro Rune). */
.idle-runen-reroll-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 0.35rem;
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.idle-runen-reroll-btn:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-1px); }
.idle-runen-reroll-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Nachbesserung 07.08.2026 (Nutzerwunsch, Screenshot 2560x1440: die vorher
   permanent sichtbare "Spanne ..."-Zeile - siehe Kommentar 19.07. oben,
   Klasse entfernt - kostete zu viel Hoehe, eigener Scrollbalken im
   Runenfenster war die Folge): die Info steckt jetzt ausschliesslich im
   title-Tooltip des Wuerfel-Buttons (Hover) + einem per Tastatur-Fokus
   erscheinenden .bkmp-ui-tooltip (siehe rerollTipHtml in bkmp-runes.js) -
   braucht dafuer einen positionierten Vorfahren als Anker. */
.idle-runen-substat-list li { position: relative; }
/* flex:1 statt width:100% (Nutzerwunsch 19.07.: Instant-Aufwerten-Button
   daneben) - .idle-runen-stat-actions ist bereits display:flex, dadurch
   teilen sich beide Buttons die Zeile automatisch je zur Haelfte. */
.idle-runen-upgrade-btn { flex: 1; min-width: 0; font-size: 0.82rem; }
.idle-runen-upgrade-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.idle-runen-instant-btn { flex: 1; min-width: 0; font-size: 0.82rem; }
.idle-runen-instant-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Aufstieg (ueberwindet den normalen +15-Cap fuer Legendaere, siehe
   bkmpRuneAscend) - eigene, auffaelligere Gold-Verlauf-Optik statt der
   normalen .btn-ja-Farbe, damit sich dieser seltene Endgame-Schritt
   sichtbar vom Alltags-Aufwerten abhebt. */
.idle-runen-ascend-btn {
  width: 100%; font-size: 0.82rem;
  background: linear-gradient(135deg, #facc15, #f59e0b) !important;
  color: #1a1200 !important;
  border-color: #f59e0b !important;
}
.idle-runen-ascend-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.idle-runen-inventory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 0.55rem;
  margin-top: 0.6rem;
}
.idle-runen-item {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--rune-color) 45%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--rune-color) 10%, var(--paper));
  padding: 0.4rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.idle-runen-item img { width: 100%; height: 100%; object-fit: contain; }
.idle-runen-item.is-equipped {
  border-color: var(--rune-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rune-color) 45%, transparent) inset;
}
.idle-runen-equipped-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rune-color);
  color: #14110c;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px color-mix(in srgb, var(--rune-color) 70%, transparent);
}
.idle-runen-item:hover, .idle-runen-item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--rune-color) 35%, transparent);
  outline: none;
}
.idle-runen-item.is-viewing { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent) inset; }
.idle-runen-count-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: color-mix(in srgb, black 45%, var(--paper));
  border: 1px solid var(--rune-color);
  color: var(--ink);
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}
.idle-runen-level-badge { bottom: auto; top: 3px; left: 3px; right: auto; border-color: var(--gold); color: var(--gold); }
/* Feinschliff 07.08.2026 (Nutzerwunsch, im selben Zug wie die Spanne-Zeilen-
   Entfernung oben): 0.7rem -> 0.55rem, betrifft alle drei gestapelten
   .idle-runen-stat-actions-Bloecke (Aufwerten/Instant, ggf. Aufsteigen,
   Verschmelzen/Verkaufen) gleichermassen - harmonisiert die Abstaende
   zwischen den Aktions-Reihen, ohne sie unangenehm eng wirken zu lassen. */
.idle-runen-stat-actions { display: flex; gap: 0.5rem; margin-top: 0.55rem; }
/* Bugfix (Nutzer-Screenshot 07.08.2026, 2560x1440): seit die Detailspalte im
   Runen-Redesign auf eine feste Breite (min(340px,32vw)) gedeckelt ist, war
   diese Zeile die einzige der drei .idle-runen-stat-actions-Reihen ohne
   min-width:0 (die beiden anderen - .idle-runen-upgrade-btn/-instant-btn -
   hatten es schon) - white-space:nowrap + der fehlende min-width-Reset
   verhinderten das uebliche Flex-Schrumpfen, "✨ Verschmelzen (auswaehlen)
   (N/3)" blieb dadurch auf seiner vollen Wortbreite stehen und schob
   "verkaufen" sichtbar ueber den rechten Rand der Karte hinaus in den
   Lager-Bereich. Fix: schrumpfbar + Text darf bei Bedarf auf eine zweite
   Zeile umbrechen (waechst die Reihe dadurch geringfuegig in der Hoehe,
   bleibt aber immer innerhalb der Kartenbreite). */
.idle-runen-fuse-btn, .idle-runen-sell-btn { flex: 1; min-width: 0; font-size: 0.74rem; padding: 0.45rem 0.5rem; white-space: normal; line-height: 1.25; text-align: center; }
.idle-runen-fuse-btn:disabled, .idle-runen-sell-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Verschmelzen-Auswahlmodus (bkmpRuneFuseSelection) - Spieler waehlt gezielt
   3 Instanzen im Lager aus, statt dass die ersten 3 gefundenen automatisch
   verschmolzen werden (Spieler-Wunsch, "gezielt einstellen welche"). */
.idle-runen-fuse-panel { text-align: center; }
.idle-runen-fuse-title { font-weight: 700; font-size: 0.95rem; color: var(--rune-color); margin-bottom: 0.3rem; }
.idle-runen-fuse-hint { color: var(--muted); font-size: 0.82rem; margin: 0 0 0.6rem; }
/* Direktauswahl-Knoepfe "3/6/9" (Nutzerwunsch: "das man auch direkt 3/6/9
   runen auswählen kann") - fuellen die Auswahl auf einen Schlag statt jede
   Instanz einzeln im Lager anklicken zu muessen. */
.idle-runen-fuse-quick-select { display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 0.6rem; }
.idle-runen-fuse-quick-btn { flex: 1; font-size: 0.72rem; padding: 0.35rem 0.4rem; }
.idle-runen-fuse-quick-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.idle-runen-fuse-progress { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.4rem; }
.idle-runen-fuse-autoconfirm { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.6rem; cursor: pointer; }
.idle-runen-fuse-autoconfirm input { margin: 0; }
.idle-runen-fuse-warn { color: #facc15; font-weight: 700; font-size: 0.78rem; }
.idle-runen-fuse-confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.idle-runen-item.is-fuse-ineligible { opacity: 0.28; filter: grayscale(0.7); cursor: not-allowed; }
.idle-runen-item.is-fuse-ineligible:hover { transform: none; box-shadow: none; }
.idle-runen-item.is-fuse-eligible { border-style: dashed; }
.idle-runen-item.is-fuse-selected {
  border-color: var(--gold);
  border-style: solid;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent) inset;
}
.idle-runen-fuse-check { background: var(--gold); border-color: var(--gold); top: 3px; right: 3px; bottom: auto; }
@media (max-width: 640px) {
  .idle-runen-inventory { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
  .idle-runen-stat-actions { flex-direction: column; }
}

.achievements-subtabs { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
.achievements-subtab {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  /* Hover-Audit-Fix (26.07.2026): "transition: all" auf gezielte Eigenschaften
     verengt - .active toggelt nur background/color/border-color, kein
     Layout-relevantes "all" noetig. */
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.achievements-subtab.active {
  background: linear-gradient(135deg, #f5d58a, var(--gold));
  color: var(--accent-ink);
  border-color: transparent;
}

.achievement-category { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; flex-shrink: 0; }
.achievement-category + .achievement-category { margin-top: 0.5rem; }
.achievement-category-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: color-mix(in srgb, var(--paper-2) 80%, transparent);
  border: 0;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  text-align: left;
}
.achievement-category-toggle { color: var(--gold); flex-shrink: 0; }
.achievement-category-title { font-weight: 700; font-size: 0.88rem; flex: 1; }
.achievement-category-count { font-size: 0.76rem; color: var(--muted); }
.achievement-category-body { display: grid; gap: 0.5rem; padding: 0.6rem; background: color-mix(in srgb, var(--paper) 90%, transparent); }
.achievement-category-body .achievement-row { border-radius: 12px; }

.cosmetics-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  margin-bottom: 0.4rem;
}
/* NACHBESSERUNG (Nutzerwunsch 15.07.: "das der Balken mit Code Einlösen und
   Plüshies zusammen gehört zum scrollen, für mehr Scrollfläche") - vorher
   war die Code-Einloese-Box fix (flex-shrink:0) und NUR die Kachel-Liste
   darunter hatte einen eigenen, kleinen Scrollbereich - der blieb dadurch
   selbst mit einem Mindestwert (190px) recht knapp. Jetzt gehoert die
   GESAMTE Flaeche (Hinweistext + Code-Box + Kacheln) zu EINEM einzigen
   Scrollbereich: #plushiesPanel selbst scrollt, die Kachel-Liste ist darin
   nur noch normaler, nicht selbst scrollender Inhalt. Wer die Kacheln sehen
   will, scrollt die (kurze) Code-Box einfach mit weg - dadurch bleibt bei
   gleicher Fensterhoehe deutlich mehr Platz fuer die Kacheln sichtbar, statt
   ihn fix an die Code-Box abzugeben. */
#plushiesPanel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
}
/* #plushiesList (.cosmetics-list) braucht hier KEIN eigenes Scrollen/
   Wachsen mehr - das uebernimmt jetzt #plushiesPanel selbst (siehe oben).
   Per ID-Selektor gezielt nur fuer die Plüshies ueberschrieben - Kosmetik-/
   Titel-Tab (#cosmeticsList/#titlesList) behalten ihr eigenes, unabhaengiges
   Scrollen, da sie keine vorgeschaltete Code-Box haben. */
#plushiesList {
  flex: none;
  overflow: visible;
  margin-bottom: 0;
}
/* "Neu"-Badge fuer frisch hinzugefuegte Titel/Erfolge/Pluschies/PartnerShops/
   Idle-Dorf-Sammlung (siehe bkmpNewBadgeChecker in index.html) - klein,
   gut sichtbar, aber ohne das Kartenlayout zu stoeren. */
.new-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: linear-gradient(135deg, #f5d58a, var(--gold));
  color: var(--accent-ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.cosmetic-swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.cosmetic-swatch:not(.locked):hover { transform: translateY(-2px); }
.cosmetic-swatch.active { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }
.cosmetic-swatch.locked { cursor: not-allowed; background: color-mix(in srgb, var(--paper-2) 80%, transparent); }
.cosmetic-swatch.locked .cosmetic-swatch-name,
.cosmetic-swatch.locked .cosmetic-swatch-desc { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.cosmetic-swatch-name { font-weight: 700; font-size: 0.85rem; color: var(--gold); }
.cosmetic-swatch-desc { font-size: 0.72rem; color: var(--muted); }

/* ---------- Pluschies ---------- */
.plushie-swatch { align-items: center; text-align: center; }
.plushie-swatch-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  margin-bottom: 0.15rem;
}
.plushie-swatch-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  font-size: 1.4rem;
  margin-bottom: 0.15rem;
}
.plushie-swatch.active { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 40%, transparent), 0 0 18px color-mix(in srgb, var(--gold) 30%, transparent); }

.plushie-redeem-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--paper-2) 92%, transparent), color-mix(in srgb, var(--paper-2) 80%, transparent));
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.5rem;
}
.plushie-redeem-box label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.3rem; }
.plushie-redeem-row { display: flex; gap: 0.5rem; }
.plushie-redeem-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  padding: 0.55rem 0.7rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.plushie-redeem-row input:focus { outline: none; border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.plushie-redeem-msg { min-height: 1.2em; margin: 0.5rem 0 0; font-size: 0.78rem; }
.plushie-redeem-msg.success { color: #4ade80; }
.plushie-redeem-msg.error { color: #f87171; }

/* ---------- Kosmetik: Namens-Effekte ---------- */
/* Diese Klassen werden an drei Stellen benutzt: am echten Namens-Badge
   (#mcNameBadge), an der Auswahl-Kachel im Kosmetik-Tab (.cosmetic-swatch)
   und am Namen in der Bestenliste (.leaderboard-name-wrap) - deshalb sind
   die Selektoren bewusst generisch (keine ID-Bindung). */
.leaderboard-name-wrap[class*="mc-cosmetic-"] {
  display: inline-flex;
  padding: 0.1rem 0.55rem;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
}
.mc-cosmetic-shadow { border-color: rgba(0, 0, 0, 0.5); background: #0d0d10; color: #b8b8c2; }
/* .cosmetic-swatch-name/-desc haben eigene, theme-abhaengige Farbregeln
   (var(--gold)/var(--muted)), die eine geerbte Farbe immer schlagen - im
   Hellmodus wurde dadurch dunkler Text auf dem bewusst dunklen "Schatten"-
   Vorschau-Hintergrund fast unlesbar. Hier fest auf helle Farben gesetzt,
   passend zur fixen dunklen Vorschau (unabhaengig vom Seiten-Theme). */
.mc-cosmetic-shadow .cosmetic-swatch-name { color: #e8e6ea; }
.mc-cosmetic-shadow .cosmetic-swatch-desc { color: #b8b8c2; }
.mc-cosmetic-gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); }
.mc-cosmetic-ice {
  color: #7dd3fc;
  border-color: color-mix(in srgb, #38bdf8 50%, var(--line));
  box-shadow: 0 0 12px color-mix(in srgb, #38bdf8 35%, transparent);
}
.mc-cosmetic-glow {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 45%, transparent);
}
.mc-cosmetic-matrix {
  color: #4ade80;
  border-color: color-mix(in srgb, #4ade80 45%, var(--line));
  background: #05100a;
  box-shadow: 0 0 10px color-mix(in srgb, #4ade80 30%, transparent);
}
/* Gleicher Fix wie .mc-cosmetic-shadow oben - fest dunkler Vorschau-
   Hintergrund, aber .cosmetic-swatch-desc nutzte var(--muted) (dunkel im
   Hellmodus) statt einer eigenen Farbe. */
.mc-cosmetic-matrix .cosmetic-swatch-name { color: #86efac; }
.mc-cosmetic-matrix .cosmetic-swatch-desc { color: #7dd99a; }
.mc-cosmetic-fire {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(120deg, #ff7a1a, #ffd166, #ff2d00) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 16px rgba(255, 100, 20, 0.45);
}
.mc-cosmetic-fire #mcNameBadgeText,
.mc-cosmetic-fire .cosmetic-swatch-name,
.mc-cosmetic-fire .leaderboard-name-text {
  background: linear-gradient(120deg, #ffb703, #ff5400, #ffd166);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bkmpTierGlow 2.2s ease infinite;
}
/* "Geld-Rahmen" (AD-Free-Easter-Egg): gruener Verlauf + Dollar-Emoji als
   dekorativer Rahmen links/rechts vom Namen, via ::before/::after statt
   echtem Text - so bleibt der eigentliche Name unveraendert (z. B. fuer
   Namensvergleiche/Suche) und die Deko verschwindet mit dem Cosmetic. */
.mc-cosmetic-dollar_prefix {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(120deg, #16a34a, #4ade80, #16a34a) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.4);
}
.mc-cosmetic-dollar_prefix #mcNameBadgeText::before,
.mc-cosmetic-dollar_prefix .cosmetic-swatch-name::before,
.mc-cosmetic-dollar_prefix .leaderboard-name-text::before { content: '💵 '; }
.mc-cosmetic-dollar_prefix #mcNameBadgeText::after,
.mc-cosmetic-dollar_prefix .cosmetic-swatch-name::after,
.mc-cosmetic-dollar_prefix .leaderboard-name-text::after { content: ' 💵'; }
.mc-cosmetic-aurora {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(120deg, #38bdf8, #a78bfa, #34d399) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
}
.mc-cosmetic-aurora #mcNameBadgeText,
.mc-cosmetic-aurora .cosmetic-swatch-name,
.mc-cosmetic-aurora .leaderboard-name-text {
  background: linear-gradient(120deg, #38bdf8, #a78bfa, #34d399);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bkmpTierGlow 4s ease infinite;
}
.mc-cosmetic-royal {
  color: #c4b5fd;
  border-color: color-mix(in srgb, #a78bfa 55%, var(--line));
  background: linear-gradient(160deg, #241a3d, var(--paper-2));
  box-shadow: 0 0 16px rgba(167, 139, 250, 0.35);
}
/* Gleicher Fix wie .mc-cosmetic-shadow/-matrix/-mitternacht oben - der
   Verlauf startet oben links (wo Name/Beschreibung sitzen) immer fest
   dunkel (#241a3d), erst der spaetere Verlauf-Anteil wechselt auf
   var(--paper-2). */
.mc-cosmetic-royal .cosmetic-swatch-name { color: #c4b5fd; }
.mc-cosmetic-royal .cosmetic-swatch-desc { color: #b3a6d9; }
.mc-cosmetic-rainbow {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(90deg, #ff5e5e, #ffd166, #4ade80, #38bdf8, #a78bfa, #ff5e5e) border-box;
  background-size: 100% 100%, 300% 100%;
  border: 1px solid transparent;
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.4);
  animation: bkmpRainbowBorder 4s linear infinite;
}
.mc-cosmetic-rainbow #mcNameBadgeText,
.mc-cosmetic-rainbow .cosmetic-swatch-name,
.mc-cosmetic-rainbow .leaderboard-name-text {
  background: linear-gradient(90deg, #ff5e5e, #ffd166, #4ade80, #38bdf8, #a78bfa, #ff5e5e);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bkmpRainbowBorder 4s linear infinite;
}
@keyframes bkmpRainbowBorder {
  0% { background-position: 100% 100%, 0% 50%; }
  100% { background-position: 100% 100%, 300% 50%; }
}

/* ---------- Bonk-Kosmetiken ---------- */
.mc-cosmetic-bonk_bronze {
  color: #cd7f32;
  border-color: color-mix(in srgb, #cd7f32 55%, var(--line));
  box-shadow: 0 0 10px color-mix(in srgb, #cd7f32 30%, transparent);
}
.mc-cosmetic-bonk_silver {
  color: #d6d9dd;
  border-color: color-mix(in srgb, #b7bcc4 55%, var(--line));
  box-shadow: 0 0 12px color-mix(in srgb, #d6d9dd 30%, transparent);
}
.mc-cosmetic-bonk_gold {
  color: #ffcf4d;
  border-color: color-mix(in srgb, #ffcf4d 55%, var(--line));
  box-shadow: 0 0 18px color-mix(in srgb, #ffcf4d 45%, transparent);
  animation: bkmpTierGlow 2.4s ease infinite;
}
.mc-cosmetic-bonk_inferno {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(120deg, #ff2d55, #ff7a1a, #ffce33) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 18px rgba(255, 60, 40, 0.45);
}
.mc-cosmetic-bonk_inferno #mcNameBadgeText,
.mc-cosmetic-bonk_inferno .cosmetic-swatch-name,
.mc-cosmetic-bonk_inferno .leaderboard-name-text {
  background: linear-gradient(120deg, #ff2d55, #ff7a1a, #ffce33);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bkmpTierGlow 2s ease infinite;
}
.mc-cosmetic-bonk_legend {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(90deg, #ff2d55, #ffce33, #7c3aed, #ff2d55) border-box;
  background-size: 100% 100%, 300% 100%;
  border: 1px solid transparent;
  box-shadow: 0 0 22px rgba(124, 58, 237, 0.4);
  animation: bkmpRainbowBorder 3.5s linear infinite;
}
.mc-cosmetic-bonk_legend #mcNameBadgeText,
.mc-cosmetic-bonk_legend .cosmetic-swatch-name,
.mc-cosmetic-bonk_legend .leaderboard-name-text {
  background: linear-gradient(90deg, #ff2d55, #ffce33, #7c3aed, #ff2d55);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bkmpRainbowBorder 3.5s linear infinite;
}

/* ---------- Weitere Namens-Kosmetiken (passend zu den Prefix-Farben) ---------- */
.mc-cosmetic-herzschlag {
  color: #fb7185;
  border-color: color-mix(in srgb, #f43f5e 55%, var(--line));
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.45);
  animation: bkmpHeartbeatGlow 1.15s ease-in-out infinite;
}
/* Bewusst KEIN transform:scale() hier (anders als .streamer-herzschlag) -
   innerhalb scrollbarer Listen (.cosmetics-list/.leaderboard-list) fuehrte
   das in manchen Browsern zu ungewolltem Scroll-Springen. Reiner
   Box-Shadow-Puls erzeugt denselben "Herzschlag"-Effekt ohne Layout-/
   Scroll-Seiteneffekte. */
@keyframes bkmpHeartbeatGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(244, 63, 94, 0.45); }
  14% { box-shadow: 0 0 26px rgba(244, 63, 94, 0.8); }
  28% { box-shadow: 0 0 16px rgba(244, 63, 94, 0.45); }
  42% { box-shadow: 0 0 26px rgba(244, 63, 94, 0.8); }
  70% { box-shadow: 0 0 16px rgba(244, 63, 94, 0.45); }
}
.mc-cosmetic-toxic {
  color: #a3e635;
  border-color: color-mix(in srgb, #a3e635 50%, var(--line));
  box-shadow: 0 0 16px rgba(163, 230, 53, 0.45);
  animation: streamerGlowPulseToxic 2s ease-in-out infinite;
}
.mc-cosmetic-neonpink {
  color: #f9a8d4;
  border-color: color-mix(in srgb, #ec4899 55%, var(--line));
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.5);
  animation: streamerGlowPulsePink 1.8s ease-in-out infinite;
}
.mc-cosmetic-mitternacht {
  color: #c7d2fe;
  border-color: transparent;
  background: linear-gradient(160deg, #1e1b4b, #4c1d95, #1e3a8a);
  box-shadow: 0 0 16px rgba(76, 29, 149, 0.4);
}
/* Gleicher Fix wie .mc-cosmetic-shadow/-matrix oben. */
.mc-cosmetic-mitternacht .cosmetic-swatch-name { color: #e0e7ff; }
.mc-cosmetic-mitternacht .cosmetic-swatch-desc { color: #c7d2fe; }
.mc-cosmetic-gruenrot {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(90deg, #4ade80, #f87171) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.3);
}
.mc-cosmetic-gruenrot #mcNameBadgeText,
.mc-cosmetic-gruenrot .cosmetic-swatch-name,
.mc-cosmetic-gruenrot .leaderboard-name-text {
  background: linear-gradient(90deg, #4ade80, #f87171);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mc-cosmetic-sonnenuntergang {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(90deg, #fb923c, #f472b6, #a78bfa) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 16px rgba(251, 146, 60, 0.3);
}
.mc-cosmetic-sonnenuntergang #mcNameBadgeText,
.mc-cosmetic-sonnenuntergang .cosmetic-swatch-name,
.mc-cosmetic-sonnenuntergang .leaderboard-name-text {
  background: linear-gradient(90deg, #fb923c, #f472b6, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mc-cosmetic-galaxy {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(120deg, #7c3aed, #a78bfa, #f472b6, #7c3aed) border-box;
  background-size: 100% 100%, 300% 100%;
  border: 1px solid transparent;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.35);
  animation: streamerShimmer 6s linear infinite;
}
.mc-cosmetic-galaxy #mcNameBadgeText,
.mc-cosmetic-galaxy .cosmetic-swatch-name,
.mc-cosmetic-galaxy .leaderboard-name-text {
  background: linear-gradient(120deg, #7c3aed, #a78bfa, #f472b6, #7c3aed);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: streamerShimmer 6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mc-cosmetic-fire #mcNameBadgeText, .mc-cosmetic-fire .cosmetic-swatch-name, .mc-cosmetic-fire .leaderboard-name-text,
  .mc-cosmetic-aurora #mcNameBadgeText, .mc-cosmetic-aurora .cosmetic-swatch-name, .mc-cosmetic-aurora .leaderboard-name-text,
  .mc-cosmetic-rainbow,
  .mc-cosmetic-rainbow #mcNameBadgeText, .mc-cosmetic-rainbow .cosmetic-swatch-name, .mc-cosmetic-rainbow .leaderboard-name-text,
  .mc-cosmetic-bonk_gold,
  .mc-cosmetic-bonk_inferno #mcNameBadgeText, .mc-cosmetic-bonk_inferno .cosmetic-swatch-name, .mc-cosmetic-bonk_inferno .leaderboard-name-text,
  .mc-cosmetic-bonk_legend,
  .mc-cosmetic-bonk_legend #mcNameBadgeText, .mc-cosmetic-bonk_legend .cosmetic-swatch-name, .mc-cosmetic-bonk_legend .leaderboard-name-text,
  .mc-cosmetic-herzschlag,
  .mc-cosmetic-toxic,
  .mc-cosmetic-neonpink,
  .mc-cosmetic-galaxy,
  .mc-cosmetic-galaxy #mcNameBadgeText, .mc-cosmetic-galaxy .cosmetic-swatch-name, .mc-cosmetic-galaxy .leaderboard-name-text { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
  .streamer-marquee-track {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 720px) {
  .news-card,
  .wish-card,
  .partner-card,
  .investor-card,
  .admin-section {
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  }
}

/* ---------- Tastatur-Fokus ---------- */
.tab-btn:focus-visible,
.tab-arrow:focus-visible,
.wish-vote:focus-visible,
.wish-mini-download:focus-visible,
.wish-download:focus-visible,
.partner-filter button:focus-visible,
.partner-actions a:focus-visible,
.admin-nav-btn:focus-visible,
.edit-btn:focus-visible,
.del-btn:focus-visible,
.btn:focus-visible,
.format-btn:focus-visible,
.line-mode-tabs button:focus-visible,
.streamer-pill:focus-visible,
.wish-image-btn:focus-visible,
.wish-detail-close:focus-visible,
.wish-cta:focus-visible,
.btn-ja:focus-visible,
.btn-nein:focus-visible,
.cardsale-count-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Daily Code Event / Golden Hour Popup ---------- */
.bkmp-daily-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 4, 8, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.bkmp-daily-popup-backdrop.visible { opacity: 1; pointer-events: auto; }

.bkmp-daily-popup-card {
  position: relative;
  width: min(400px, 100%);
  padding: 1.8rem 1.6rem 1.6rem;
  border-radius: 22px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(160deg, #14101f, #0a0810 60%);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 1.5px rgba(167, 139, 250, 0.55), 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(124, 58, 237, 0.45);
  transform: scale(0.85) translateY(10px);
  transition: transform 0.4s cubic-bezier(.2, 1.4, .4, 1);
  animation: bkmpDailyPulse 2.6s ease-in-out infinite;
}
.bkmp-daily-popup-backdrop.visible .bkmp-daily-popup-card { transform: scale(1) translateY(0); }
@keyframes bkmpDailyPulse {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(167, 139, 250, 0.55), 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 45px rgba(124, 58, 237, 0.35); }
  50% { box-shadow: 0 0 0 1.5px rgba(167, 139, 250, 0.85), 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 75px rgba(124, 58, 237, 0.65); }
}

.bkmp-daily-popup-card.golden-hour {
  box-shadow: 0 0 0 1.5px rgba(255, 206, 51, 0.65), 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 190, 20, 0.5);
  background: linear-gradient(160deg, #241a08, #120d05 60%);
  animation: bkmpDailyPulseGold 2.2s ease-in-out infinite;
}
@keyframes bkmpDailyPulseGold {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(255, 206, 51, 0.6), 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 45px rgba(255, 190, 20, 0.4); }
  50% { box-shadow: 0 0 0 1.5px rgba(255, 206, 51, 0.95), 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 85px rgba(255, 190, 20, 0.75); }
}

.bkmp-daily-popup-ribbon {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(120deg, #ffce33, #ff9d1a);
  color: #1a1206;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  box-shadow: 0 0 18px rgba(255, 190, 20, 0.6);
}

.bkmp-daily-popup-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bkmp-daily-popup-particles span {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c4b5fd;
  box-shadow: 0 0 8px 2px rgba(196, 181, 253, 0.8);
  animation: bkmpDailyParticleRise linear infinite;
}
.golden-hour .bkmp-daily-popup-particles span { background: #ffd873; box-shadow: 0 0 8px 2px rgba(255, 216, 115, 0.85); }
@keyframes bkmpDailyParticleRise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-380px) scale(1.1); opacity: 0; }
}

.bkmp-daily-popup-close {
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  background: none;
  border: none;
  color: #c9c2dd;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.bkmp-daily-popup-close:hover { color: #f3ecff; }

.bkmp-daily-popup-icon { font-size: 2.4rem; margin-bottom: 0.3rem; filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.6)); }
.golden-hour .bkmp-daily-popup-icon { filter: drop-shadow(0 0 14px rgba(255, 190, 20, 0.75)); }

/* Feste helle Textfarben statt var(--ink)/var(--muted): die Karte hat
   IMMER einen fest dunklen Verlauf-Hintergrund (siehe .bkmp-daily-popup-
   card oben, bewusst unabhaengig vom Hell-/Dunkelmodus - mystisches
   Event-Design). --ink/--muted werden im Hellmodus aber dunkel (fuer die
   sonst helle Seite gedacht) - auf diesem immer-dunklen Hintergrund wurde
   der Text dadurch im Hellmodus fast unlesbar (dunkler Text auf dunklem
   Grund). Gleicher Fehlertyp wie bei --gold vs. --gold-fixed. */
.bkmp-daily-popup-card h3 { font-family: 'Fraunces', serif; font-size: 1.25rem; margin: 0 0 0.4rem; color: #f3ecff; }
.bkmp-daily-popup-sub { font-size: 0.85rem; color: #c9c2dd; margin: 0 0 0.9rem; }

.bkmp-daily-popup-plushie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.bkmp-daily-popup-plushie img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--gold) 45%, transparent);
}
.bkmp-daily-popup-plushie span { font-weight: 700; font-size: 0.9rem; }

.bkmp-daily-popup-code {
  font-family: 'Fraunces', serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  margin-bottom: 0.8rem;
  background: linear-gradient(120deg, rgba(167, 139, 250, 0.18), rgba(124, 58, 237, 0.1));
  border: 1px dashed rgba(167, 139, 250, 0.55);
  color: #c4b5fd;
  user-select: all;
}
.golden-hour .bkmp-daily-popup-code {
  background: linear-gradient(120deg, rgba(255, 206, 51, 0.2), rgba(255, 157, 26, 0.12));
  border-color: rgba(255, 206, 51, 0.6);
  color: #ffd873;
}

.bkmp-daily-popup-countdown { font-size: 0.85rem; font-weight: 700; color: var(--gold); margin-bottom: 1rem; }

.bkmp-daily-popup-claim {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.45);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.bkmp-daily-popup-claim:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bkmp-daily-popup-claim:active { transform: scale(0.97); }
.golden-hour .bkmp-daily-popup-claim {
  background: linear-gradient(135deg, #ffd873, #ff9d1a);
  color: #1a1206;
  box-shadow: 0 12px 30px rgba(255, 157, 26, 0.5);
}

/* Fest helle Grundfarbe (nicht var(--muted)) noetig, falls textContent
   OHNE .success/.error gesetzt wird (z.B. Test-Vorschau-Pfad
   ?testDailyPopup=1) - Hintergrund der Karte ist immer dunkel, gleicher
   Bug-Typ wie bei h3/sub oben, hier per Audit am 17.07. gefunden. */
.bkmp-daily-popup-msg { min-height: 1.4em; margin: 0.7rem 0 0; font-size: 0.85rem; font-weight: 700; white-space: pre-line; color: #c9c2dd; }
.bkmp-daily-popup-msg.success { color: #4ade80; }
.bkmp-daily-popup-msg.error { color: #f87171; }

@media (prefers-reduced-motion: reduce) {
  .bkmp-daily-popup-card, .bkmp-daily-popup-card.golden-hour { animation: none; }
  .bkmp-daily-popup-particles span { animation: none; opacity: 0; }
}

/* ---------- Admin: Daily-Events Statistik-Karten ---------- */
.daily-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem;
}
.daily-stat-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  background: var(--paper-2);
}
.daily-stat-card .value { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 700; color: var(--gold); }
.daily-stat-card .label { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }

.admin-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.6rem 0;
  cursor: pointer;
}
.admin-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }

/* ============================================================
   Idle Drachen Dorf
   ============================================================ */
.idle-dorf-btn { position: relative; }
.idle-dorf-btn.idle-dorf-maintenance { opacity: 0.55; filter: grayscale(0.6); }

.idle-dorf-overlay .idle-dorf-card {
  position: relative;
  max-width: 1200px;
  width: 94vw;
  max-height: 95vh;
  /* Etwas knapperes Innenpolster als der generische .joke-card-Wert (fuer
     kleine Bestaetigungsdialoge gedacht) - dieses Fenster ist inhaltlich
     dicht (HUD + Tabs + Kampf-Panel), auf realen Fenstern (Tableiste/
     Lesezeichenleiste/Taskleiste fressen bei "1920x1080" locker 150-250px
     der tatsaechlich nutzbaren Hoehe) reicht sonst selbst 90vh manchmal
     knapp nicht, was eine kaum sichtbare Mini-Scrollbar erzeugt. */
  padding: 1.5rem 2.2rem 1.3rem;
  overflow-y: auto;
  text-align: left;
  border-radius: 24px;
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(120deg, var(--gold), rgba(56, 189, 248, 0.7), #a78bfa, var(--gold)) border-box;
  border: 1.5px solid transparent;
  background-size: 100% 100%, 260% 260%;
  animation: bkmpTierGlow 6s ease infinite;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 40px color-mix(in srgb, var(--gold) 25%, transparent);
}
.idle-dorf-card h3 { font-family: 'Fraunces', serif; font-size: 1.4rem; text-align: center; margin-bottom: 0.9rem; }

/* Bug-Fix (Nutzer-Meldung: "laggt kurz, dann springen Bilder vom Raidboss
   fuer Millisekunden durch"): siehe bkmpIdleOpenModal() in idledorf.js -
   das Fenster wurde bisher sichtbar, WAEHREND im Hintergrund noch Daten
   nachgeladen wurden, wodurch kurz der Stand von der letzten Sitzung (z.B.
   noch der Raid-Kampf-Tab) durchschimmerte, bevor die frischen Daten den
   richtigen Tab zeigten.

   KORREKTUR (Phase 7.3, 23.07., kritischer Repair "Navigations-Buttons
   verschwinden"): urspruenglich blendete diese Klasse HUD/Stufenleiste/
   Tableiste ZUSAETZLICH zu den Panels aus - genau die drei Elemente, die
   der Auftrag als "permanente Huelle" einstuft und die niemals durch einen
   Ladezustand verschwinden duerfen (Video-Beweis: leeres "Laedt..."-Overlay
   ganz ohne HUD/Nav beim Wiederoeffnen). Jetzt bleibt NUR noch der
   tatsaechlich dynamische Inhalt (Panels/Beitritts-Banner/Willkommen-
   zurueck-Karte) waehrend des Ladens verborgen - HUD/Stufenleiste/Tableiste
   bleiben immer sichtbar (zeigen beim Wiederoeffnen kurz den letzten
   bekannten Stand statt zu verschwinden, bei einem echten Erstladen bleiben
   sie einfach leer bis zum ersten Render - beides kein "leerer Overlay-
   Zustand" im vom Auftrag verbotenen Sinne). */
.idle-dorf-card.idle-dorf-loading .idle-dorf-panel,
.idle-dorf-card.idle-dorf-loading .raid-join-banner,
.idle-dorf-card.idle-dorf-loading .idle-dorf-offline-card {
  visibility: hidden;
}
.idle-dorf-card.idle-dorf-loading::after {
  content: '⏳ Lädt…';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--muted);
  opacity: .85;
  pointer-events: none;
}

.idle-dorf-close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.idle-dorf-close:hover { color: var(--ink); border-color: var(--gold); }

/* Bug-Fix 18.07.: zusaetzlicher Feedback-Zugang direkt im Idle-Dorf-Fenster
   (siehe Kommentar bei #idleDorfFeedbackBtn in index.html) - selbe Form/
   Groesse wie .idle-dorf-close, nur eine Position weiter links, damit
   beide Kreise nicht ueberlappen.
   NACHBESSERUNG (06.08.2026, Spieler-Screenshot: Feedback-Kreis ueberlappt
   sichtbar mit dem Schliessen-Kreis): der urspruengliche Abstand der
   beiden "right"-Anker (2.9rem - 0.9rem = 2rem = 32px) war 2px KLEINER
   als die eigene Knopfbreite (34px) - beide 34px breiten Kreise
   ueberlappten sich dadurch rechnerisch immer um genau 2px, unabhaengig
   von der Fensterbreite (kein Breakpoint-Problem, reiner Rechenfehler im
   urspruenglichen Fix). Per getBoundingClientRect bestaetigt (vorher:
   Feedback-Knopf rechter Rand bei 343px, Schliessen-Knopf linker Rand bei
   341px). Fix: "right" auf 3.5rem angehoben - Abstand jetzt 47.6px, also
   13.6px mehr als die Knopfbreite = spuerbarer, aber kompakter Zwischen-
   raum statt eines Ueberlapps. */
.idle-dorf-feedback-btn {
  position: absolute;
  top: 0.8rem;
  right: 3.5rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.idle-dorf-feedback-btn:hover { color: var(--ink); border-color: var(--gold); }

/* Bug-Fix 18.07. (im Zuge der Feedback-Button-Untersuchung entdeckt): die
   generische Regel ".idle-dorf-overlay .idle-dorf-card > *" weiter unten
   in dieser Datei (2 Klassen-Selektoren) hat mehr Spezifitaet als die
   einfachen Ein-Klassen-Selektoren oben und ueberschreibt deren
   position:absolute dadurch IMMER mit position:relative, unabhaengig von
   der Reihenfolge in der Datei - beide Knoepfe rutschten dadurch in den
   normalen Text-/Flex-Fluss der Karte statt oben rechts zu schweben (beim
   Schliessen-Knopf bisher unbemerkt, weil er parallel dazu noch von einer
   zu weit gefassten html.bkmp-app-mode-Regel komplett ausgeblendet war,
   siehe Fix weiter unten). Ein ID-Selektor hat mehr Spezifitaet als jede
   Klassen-Kombination und erzwingt zuverlaessig position:absolute. */
#idleDorfCloseX, #idleDorfFeedbackBtn { position: absolute; }

/* Spieler-Wunsch (14.07.): offizielles Spiel-Banner statt der bisherigen
   kleinen Text-Ueberschrift im Idle-Dorf-Fenster. Gleiches WEBP+PNG-
   Fallback-Muster wie .hero-banner-picture/.hero-banner (Startseite),
   aber ohne dessen viewport-relative Breitenformel - dieses Banner lebt
   innerhalb des bereits begrenzten, gepolsterten .idle-dorf-card.
   NACHBESSERUNG (Spieler-Wunsch 15.07.: "wirkt sehr groß") - volle
   Kartenbreite (bei max-width:1200px auf der .idle-dorf-card) liess das
   Banner durch das feste Seitenverhaeltnis auch sehr hoch werden. Max-
   Breite + Zentrierung statt voller Breite, dadurch schrumpft die Hoehe
   proportional mit (kein Zuschneiden noetig). */
.idle-dorf-banner-picture { position: relative; display: block; max-width: 940px; margin: 0 auto 1rem; }
.idle-dorf-banner-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2141 / 568;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.4);
  user-select: none;
  -webkit-user-select: none;
}

/* MOBILE-REDESIGN (06.08.2026): 640px -> 999px angehoben, siehe
   ausfuehrliche Begruendung bei bkmpProtoChudWantCompact() (bkmp-proto-
   compact-hud.js) - dieselbe "alles unter der 1000px-Desktopgrenze
   bekommt konsequent die Vollbild-Mobilkarte"-Vereinheitlichung, hier fuer
   die Karte selbst statt nur HUD/Nav/Stufenleiste. Vorher lief die Karte
   zwischen 641-999px Breite als kleines, floatendes Modal mit bereits
   kompakter Mobil-Navigation darin - genau die vom Auftrag beschriebene
   "wie eine zusammengedrueckte Desktopseite"-Wirkung. */
@media (max-width: 999px) {
  .idle-dorf-overlay .idle-dorf-card {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    max-width: 100vw;
    /* !important noetig: ".zone-game .joke-card{border-radius:20px}"
       (unconditional, style.css) hat gleiche Spezifitaet wie diese Regel
       (je 2 Klassen) und steht spaeter in der Datei - #idleDorfOverlay
       traegt IMMER die Klasse "zone-game" (Projekt-Konvention, nicht nur
       im echten App-Modus), gewinnt sonst trotz dieser breiten-
       spezifischen Vollbild-Regel hier (per getComputedStyle bestaetigt:
       20px statt 0px bei 768px Breite). */
    border-radius: 0 !important;
    padding: 1.4rem 1rem 1rem;
  }
  /* Spieler-Meldung 20.07. (Screenshot: schwarze Luecke unter dem Fenster
     auf dem Handy) - klassisches Mobil-Browser-"100vh"-Problem: 100vh
     misst je nach Browser/Zeitpunkt die maximale Bildschirmhoehe (Adress-
     leiste ausgeblendet gedacht), waehrend beim ersten Rendern die
     Adressleiste oft noch sichtbar ist - das Fenster faellt dadurch kleiner
     aus als der tatsaechliche Bildschirm, darunter blieb die echte
     Seite/Hintergrundfarbe sichtbar. dvh (dynamic viewport height) verfolgt
     die WIRKLICH sichtbare Hoehe live nach, inkl. ein-/ausblendender
     Adressleiste - eigene Regel NACH der vh-Zeile oben als reines
     Progressive Enhancement (Browser ohne dvh-Unterstuetzung ignorieren
     diese Zeile einfach und bleiben beim vh-Wert, kein Fallback-Risiko). */
  .idle-dorf-overlay .idle-dorf-card {
    height: 100dvh;
    max-height: 100dvh;
  }
  .idle-dorf-banner-img { border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); }
}

.idle-dorf-offline-card {
  position: relative;
  margin-bottom: 1rem;
  padding: 0.8rem 2.4rem 0.8rem 1rem;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(167, 139, 250, 0.16), rgba(56, 189, 248, 0.1));
  border: 1px dashed color-mix(in srgb, var(--gold) 55%, var(--line));
  font-size: 0.85rem;
  /* Perf-Audit 06.08.2026 (INP-Fix #idleOfflineCardClose, siehe
     bkmpIdleCloseOfflineCardAnimated in idledorf.js) - weicher Ausblend-
     statt hartem display:none-Sprung, rein optisch, keine neue Funktion. */
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.idle-dorf-offline-card.idle-offline-card-closing {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}
.idle-dorf-offline-card strong { display: block; margin-bottom: 0.4rem; }
.idle-offline-rewards { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; font-weight: 600; }
.idle-offline-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem;
}
.idle-offline-close:hover { color: var(--ink); }

.idle-dorf-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.idle-dorf-tab {
  flex: 1;
  min-width: 110px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.5rem 0.7rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.idle-dorf-tab:disabled { opacity: 0.45; cursor: not-allowed; }
.idle-dorf-tab:disabled:hover { background: var(--paper); color: var(--muted); }
/* Redesign Phase 5 (17.07., Audit-Fund): hier stand frueher noch eine
   zweite .idle-dorf-tab.active-Regel (Gold-Verlauf-Pille) - durch eine
   SPAETERE, spezifischere Regel weiter unten ("Tableiste: Spielmenue")
   bereits vollstaendig ueberschrieben und deshalb komplett totes CSS.
   Geloescht statt weiter mitgeschleppt; die eine verbleibende
   .active-Definition weiter unten ist ab jetzt die einzige Quelle. */
/* Tab bleibt klickbar (zeigt einen Hinweis-Toast statt sich zu oeffnen,
   siehe idledorf.js bkmpIdleInitTabs) - deshalb dezente Opazitaet statt
   :disabled, damit der Klick weiter ankommt. */
.idle-dorf-tab-locked { opacity: 0.55; cursor: not-allowed; }
.idle-dorf-tab-locked:hover { opacity: 0.7; }
.idle-dorf-tab-locked.active { opacity: 1; }

/* Feste Hoehe statt min-height: Inhalte reichen von ~250px (Erfolge-Hinweis)
   bis ueber 5000px (Skilltree-Grid mit 30 Knoten) - eine gemeinsame
   min-height auf den groessten Wert wuerde die Karte bei kurzen Tabs riesig
   und leer wirken lassen. Stattdessen bekommt jedes Panel dieselbe feste
   Rahmenhoehe mit eigenem Scrollbereich, damit die Karte beim Tab-Wechsel
   nie springt/ihre Groesse aendert - laengere Inhalte scrollen innerhalb
   des Panels statt die ganze Karte zu strecken. */
.idle-dorf-panel { height: min(58vh, 560px); overflow-y: auto; overflow-x: hidden; }
.idle-panel-hint { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.8rem; }
.idle-erfolge-shortcut-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }

/* Kampf-Tab: Stufenleiste + Schlachtfeld (Dorf/Drache) sollen NIE
   mitscrollen - nur der Kampf-Log/Belohnungsverlauf unten soll bei
   Bedarf scrollbar sein. Das generische .idle-dorf-panel-Scrollverhalten
   oben (fuer alle anderen Tabs weiterhin richtig) wird hier per
   ID-Selektor gezielt fuer #idlePanelKampf ueberschrieben: das Panel
   selbst scrollt nicht mehr, stattdessen sind Stufenleiste/Schlachtfeld
   fix (flex-shrink:0) und nur .idle-dorf-log waechst/scrollt im
   verbleibenden Platz. */
#idlePanelKampf {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}
#idlePanelKampf .idle-stage-bar,
#idlePanelKampf .idle-battlefield,
#idlePanelKampf .idle-adfree-btn {
  flex-shrink: 0;
}
#idlePanelKampf .idle-dorf-log {
  flex: 1 1 auto;
  min-height: 0;
}

/* Easter Egg "AD-Free": soll wie ein echter, glaubwuerdiger "Werbung
   entfernen"-Button aus einem Mobile-Game aussehen (deshalb dasselbe
   Gold-Verlauf-Muster wie die anderen "Premium"-Buttons der Seite, z. B.
   .wish-download) - unauffaellig ist nur der PLATZ dafuer, nicht der
   Button selbst. */
.idle-adfree-btn {
  align-self: flex-start;
  margin: 0.5rem 0;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5d58a, var(--gold));
  color: #111018;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(201, 165, 106, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.idle-adfree-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(201, 165, 106, 0.45);
}
.idle-adfree-btn:active { transform: translateY(0); }
/* Die drei AD-Free-Popups koennen ueber dem BEREITS OFFENEN Idle-Dorf-Fenster
   erscheinen - beide teilen sich .joke-overlay mit z-index:50, bei
   Gleichstand gewinnt aber das SPAETER im DOM stehende Element
   (idleDorfOverlay steht hinter diesen Popups im Markup) und lag optisch
   darueber. Deshalb hier ein hoeherer z-index, unabhaengig von der
   DOM-Reihenfolge immer ueber dem Idle-Dorf-Fenster. */
#adFreePopup1, #adFreePopupSure, #adFreePopupCar { z-index: 60; }

/* ---- Stufen-Leiste ---- */
/* Performance-Modus-Umschalter (Nutzer-Auftrag, Section B Prioritaet 7):
   klein und zurueckhaltend statt eine eigene Einstellungsseite zu
   erfordern - direkt im Kampf-Panel, wo die Wirkung sofort sichtbar ist.
   Zyklisch Hoch -> Reduziert -> Aus -> Hoch, siehe bkmpFxCycleMode() in
   idledorf.js. Reine Anzeige-/Komfort-Einstellung, aendert nie Werte. */
.idle-fx-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.6rem auto;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.idle-fx-mode-btn:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
@media (min-width: 481px) { .idle-fx-mode-btn { display: flex; width: fit-content; min-height: auto; padding: 0.35rem 0.7rem; } }

.idle-stage-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  padding: 0.32rem 0.65rem;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.78rem;
}
/* Phase 7.1 (21.07., Nutzer-Auftrag "Stufensteuerung als kompakte Toolbar,
   alles moeglichst in einer Zeile"): zwei Teilprobleme, beide noetig.
   (1) Reines "min-width:0" auf dem Label reicht NICHT, um das Umbrechen
   zu verhindern - Flexbox entscheidet die ZEILEN-Aufteilung anhand der
   HYPOTHETISCHEN (ungeschrumpften, "white-space:nowrap"-breiten)
   Groesse jedes Elements, BEVOR flex-shrink ueberhaupt greift. Bei
   1366px reichte die ungeschrumpfte Label-Breite + Button-Gruppe schon
   ~11px ueber die verfuegbare Breite - flex-wrap hat die Buttons deshalb
   trotz eigentlich erlaubtem Schrumpfen in eine zweite Zeile verschoben
   (das Label allein passte ja bequem in Zeile 1). (2) "text-overflow:
   ellipsis" aendert daran nichts - das wirkt nur auf die RENDERUNG nach
   der Groessenberechnung, nicht auf die hypothetische Breite, die fuer
   die Wrap-Entscheidung zaehlt. Fix fuer beides: flex-wrap hier komplett
   abschalten (erzwingt eine einzige Zeile), das Label darf dafuer
   schrumpfen (flex:1 1 auto;min-width:0) und kuerzt sich bei Bedarf per
   Ellipse - so bleibt es robust bei wachsenden Zahlen (Stufe/Gesamt/
   naechster Boss steigen ueber den Spielverlauf immer weiter), nicht nur
   beim aktuellen Pixel-Budget. Ab 600px (mobil nutzt ohnehin die eigene
   kompakte Stufenleiste, siehe bkmpProtoCompactStageBar) - schmalere
   Faelle behalten den alten Umbruch-Fallback. */
@media (min-width: 600px) {
  .idle-stage-bar { flex-wrap: nowrap; }
}
.idle-stage-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.idle-stage-label strong { color: var(--gold); }
.idle-stage-buttons { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 0.4rem; }
.idle-stage-btn { padding: 0.3rem 0.6rem; font-size: 0.72rem; white-space: nowrap; }
.idle-stage-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

/* ---- Stufenwahl-Popup ---- */
.idle-stage-picker-overlay { z-index: 60; }
.idle-stage-picker-card {
  max-width: 640px;
  width: 92vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  text-align: left;
  border-radius: 22px;
}
.idle-stage-picker-hint { font-size: 0.82rem; color: var(--muted); margin: -0.4rem 0 1rem; text-align: left; }

/* Redesign 18.07. (Sprungleiste + einklappbare Akte) - siehe
   ausfuehrlichen Kommentar bei bkmpIdleRenderStagePickerBody() in
   idledorf.js fuer die Begruendung. */
.idle-stagepicker-jump-row { display: flex; gap: 0.5rem; margin-bottom: 0.3rem; }
.idle-stagepicker-jump-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  font-family: inherit;
}
.idle-stagepicker-jump-input:focus { outline: none; border-color: var(--gold); }
.idle-stagepicker-jump-btn { flex: none; padding: 0.55rem 1.1rem; }
.idle-stage-picker-error { color: #f87171; font-size: 0.78rem; margin: -0.1rem 0 0.7rem; text-align: left; }

.idle-stage-picker-body {
  overflow-y: auto;
  max-height: 55vh;
  padding-right: 0.3rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.idle-stagepicker-showolder-btn {
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  padding: 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  margin-bottom: 0.3rem;
}
.idle-stagepicker-showolder-btn:hover { color: var(--ink); border-color: var(--gold); }

/* Akt-Kopfzeile: immer sichtbar, klickbar zum Auf-/Zuklappen - das
   10er-Stufen-Grid darunter existiert im DOM erst, nachdem der Akt
   mindestens einmal aufgeklappt wurde (siehe bkmpIdleWireStagePicker). */
/* Bug-Fix 18.07. (Spieler-Screenshot: Akt-Zeilen nur noch hauchduenne
   Striche statt lesbarer Kopfzeilen): .idle-stage-picker-body ist
   flex-direction:column - ein Flex-Kind mit overflow:hidden verliert
   dadurch den impliziten min-height:auto-Schutz (der normalerweise
   verhindert, dass Inhalt kleiner gequetscht wird, als er eigentlich
   braucht). Bei vielen Akt-Zeilen auf einmal (mehr als in den 55vh
   Platz passen) hat der Flex-Algorithmus deshalb JEDE Zeile auf quasi 0
   zusammengedrueckt, sichtbar blieb nur noch die 1px-Umrandung. Gleiches
   Muster, gleicher Fix wie zuvor schon bei #idlePanelKampf .idle-dorf-log
   in dieser Datei: flex-shrink:0 verbietet das Zusammendruecken - das
   eigentliche Scrollen uebernimmt weiterhin ganz normal overflow-y:auto
   auf dem umschliessenden .idle-stage-picker-body. */
.idle-stagepicker-act { flex-shrink: 0; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--paper-2) 60%, transparent); overflow: hidden; }
.idle-stagepicker-act.is-open { border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); }
.idle-stagepicker-act-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.8rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.idle-stagepicker-act-header:disabled { cursor: not-allowed; opacity: 0.6; }
.idle-stagepicker-act-chevron { flex: none; color: var(--muted); font-size: 0.8rem; transition: transform 0.15s ease; }
.idle-stagepicker-act-title { flex: none; font-family: 'Fraunces', serif; font-size: 0.95rem; color: var(--gold); }
.idle-stagepicker-act.is-locked .idle-stagepicker-act-title { color: var(--muted); }
.idle-stagepicker-act-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--gold);
}
.idle-stagepicker-act-badge.is-current { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.idle-stagepicker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.45rem; padding: 0 0.8rem 0.8rem; }
.idle-stagepicker-stage {
  padding: 0.4rem 0.3rem;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.idle-stagepicker-stage:hover { transform: translateY(-1px); border-color: var(--gold); }
/* Boss-Stufen (alle 25 Kaempfe) farblich abgesetzt, damit man sie im
   Raster schnell wiederfindet - bewusst Lila statt Gold, damit sie sich
   von der Gold-Markierung fuer "aktuelle/beste Stufe" unterscheiden. Vor
   .is-current/.is-highest in der Kaskade, damit deren Gold-Stil bei
   Ueberschneidung weiterhin gewinnt (die Krone im Text bleibt trotzdem
   sichtbar). */
.idle-stagepicker-stage.is-boss { border-color: var(--purple); color: var(--purple); background: color-mix(in srgb, var(--purple) 10%, var(--paper)); }
.idle-stagepicker-stage.is-current { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.idle-stagepicker-stage.is-highest:not(.is-current) { border-color: var(--gold); color: var(--gold); }
@media (max-width: 640px) {
  .idle-stage-picker-card { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; padding: 1.4rem 1rem 1rem; }
  .idle-stage-picker-body { max-height: 65vh; }
}

/* ---- Event-Drachen-Vorbereitungs-Popup (Shenloss/Ganz Liber Drache) ---- */
.idle-event-dragon-overlay { z-index: 70; }
.idle-event-dragon-card {
  max-width: 380px;
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(135deg, #facc15, #a78bfa, #facc15) border-box;
  border: 2px solid transparent;
  background-size: 100% 100%, 220% 220%;
  animation: bkmpTierGlow 3.5s ease infinite;
}
.idle-event-dragon-card h3 { font-family: 'Fraunces', serif; font-size: 1.3rem; margin-bottom: 0.7rem; color: var(--gold); }
.idle-event-dragon-card p { font-size: 1rem; }

/* Grimbold-Dialogszene ("Meister"-Skilltree-Zweig) */
.idle-meister-dialog-overlay { z-index: 70; }
.idle-meister-dialog-card {
  max-width: 420px;
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(135deg, #ff8a4c, #facc15, #ff8a4c) border-box;
  border: 2px solid transparent;
}
.idle-meister-dialog-face {
  display: block;
  width: 128px;
  height: 128px;
  object-fit: contain;
  margin: 0 auto 0.9rem;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}
.idle-meister-dialog-text { font-size: 1rem; line-height: 1.5; min-height: 4.5rem; }
.idle-meister-dialog-step { display: block; margin-top: 0.5rem; font-size: 0.75rem; color: var(--muted); letter-spacing: 0.05em; }
/* Dezenter goldener Rahmen um den Drachen selbst, waehrend der Kampf
   laeuft - macht die Seltenheit auch nach Bestaetigung des Popups sichtbar. */
.idle-dragon-event .idle-dragon-sprite { filter: drop-shadow(0 0 14px rgba(250, 204, 21, 0.65)); }

/* Phase 7.1 (21.07., Nutzer-Auftrag "Footer maximal ungefaehr 44-56px
   hoch"): scoped auf .idle-dorf-card statt die generische .joke-buttons-
   Basisregel anzufassen - die wird auch von Bestaetigungsdialogen/Feedback-
   Overlay/etc. geteilt, dort soll die normale Groesse bleiben. Der
   dedizierte Schliessen-Button oben rechts (#idleDorfCloseX) bleibt
   ohnehin jederzeit erreichbar - dieser Footer ist die zweite, redundante
   Variante, keine Funktion wird entfernt, nur verkleinert. */
/* Phase 7.1 Stufe 3 (21.07.): App-Install/Streamer sind keine .btn-ja/
   .btn-nein-Pillenbuttons mehr (siehe index.html) - kleine, unauffaellige
   Textlinks statt einer vollen Buttonreihe, minimaler vertikaler Platz
   (Auftrag: "maximal 8-16px Abstand, keine grosse Buttonreihe"). */
.idle-dorf-footer-links { justify-content: center; gap: 1.1rem !important; margin-top: 0.3rem !important; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.idle-dorf-footer-links .idle-app-link-btn,
.idle-dorf-footer-links .idle-stream-help-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  padding: 0.2rem 0.3rem !important;
  min-height: 0 !important;
  text-decoration: none;
  cursor: pointer;
}
.idle-dorf-footer-links .idle-app-link-btn:hover,
.idle-dorf-footer-links .idle-stream-help-btn:hover { color: var(--ink) !important; text-decoration: underline; }
.idle-dorf-card .joke-buttons { gap: 0.5rem; margin-top: 0.4rem; }
/* Nachtrag (21.07., beim eigenen Testen gefunden): "html.bkmp-app-mode
   .joke-card .btn-ja/.btn-nein{min-height:44px;padding:.7rem 1.2rem}"
   (weiter unten in dieser Datei, urspruenglich fuer echte Touch-Ziele im
   App-Modus gedacht) ist wie so oft laengst global aktiv (bkmp-app-mode
   steht auf jeder Seite) und hat wegen der zusaetzlichen .btn-ja/.btn-nein-
   Klasse eine HOEHERE Spezifitaet als die einfache "button/a"-Fassung
   oben - hat die kleinere Footer-Groesse hier komplett ausgehebelt, ohne
   dass es beim ersten Anschauen aufgefallen waere (Groesse sah unveraendert
   aus). Explizit auf .btn-ja/.btn-nein zusaetzlich zu button/a ausgeweitet
   + !important, damit dieser Footer zuverlaessig klein bleibt, unabhaengig
   von der Reihenfolge im Stylesheet. */
.idle-dorf-card .joke-buttons button,
.idle-dorf-card .joke-buttons a,
.idle-dorf-card .joke-buttons .btn-ja,
.idle-dorf-card .joke-buttons .btn-nein {
  padding: 0.4rem 0.85rem !important;
  font-size: 0.78rem !important;
  min-height: 0 !important;
  border-radius: 999px !important;
}

/* ---- HUD ---- */
.idle-dorf-hud { margin-bottom: 1rem; }
.idle-hud-level { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin-bottom: 0.35rem; }
.idle-hud-skillpoints { font-size: 0.78rem; color: var(--gold); font-weight: 700; }
.idle-xp-bar { height: 8px; border-radius: 999px; background: var(--paper); overflow: hidden; border: 1px solid var(--line); }
.idle-xp-fill { height: 100%; background: linear-gradient(90deg, #38bdf8, #818cf8); transition: width 0.3s ease; }
.idle-xp-label { font-size: 0.72rem; color: var(--muted); margin: 0.2rem 0 0.6rem; }
.idle-hud-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.idle-hud-resources { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; }

/* ---- Kampf ---- */
.idle-battlefield {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.2rem;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--gold) 8%, var(--paper)), var(--paper) 70%);
  border: 1px solid var(--line);
  overflow: hidden;
  /* Phase 7.1 (21.07., Nutzer-Auftrag "Kampffeld deutlich kompakter"):
     ersetzt die bisherige feste min-height:220px - wuchs am Ende einfach
     mit dem Karten-Inhalt mit (siehe .idle-village-sprite aspect-ratio),
     ohne selbst auf die verfuegbare Bildschirmhoehe zu reagieren. clamp()
     skaliert jetzt mit der Fensterhoehe (36dvh), bleibt aber innerhalb
     einer sinnvollen Ober-/Untergrenze - auf normalen Laptop-Hoehen
     (768-900px) ergibt das ca. 280-330px statt der vorherigen "wie auch
     immer der Inhalt gerade ausfaellt"-Hoehe. Reine Groessen-Angabe, keine
     Kampfwerte/-logik betroffen. */
  min-height: clamp(240px, 36dvh, 460px);
}
/* Phase 7.1 Stufe 3 (21.07., Nutzer-Auftrag "Height-based Compact Mode",
   Abschnitt 15): ersetzt die beiden einfachen Battlefield-only-Breakpoints
   von Stufe 1 durch ein dreistufiges System (900\780\700px), das bei
   geringer Fensterhoehe zusaetzlich HUD-Chips/Navigation/Stufenleiste
   verdichtet, nicht nur das Kampffeld - genau wie im Auftrag verlangt.
   Kein transform:scale() auf dem Gesamt-Overlay (Auftrag verbietet das
   explizit) - jede Regel skaliert ihr eigenes Element gezielt. */
@media (max-height: 900px) {
  .idle-battlefield { min-height: clamp(230px, 32dvh, 360px); }
  .idle-dorf-tab { min-height: 28px !important; }
}
@media (max-height: 780px) {
  .idle-battlefield { min-height: clamp(210px, 28dvh, 300px); }
  html.bkmp-app-mode .idle-hud-top { padding: .3rem .5rem !important; }
  html.bkmp-app-mode .idle-hud-flow { margin-top: .22rem !important; }
  html.bkmp-app-mode .idle-hud-flow span { padding: .18rem .42rem !important; }
  .idle-stage-bar { padding: 0.24rem 0.55rem !important; margin-bottom: 0.3rem !important; }
  .idle-dorf-tabs { gap: 0.28rem 0.4rem !important; }
}
@media (max-height: 700px) {
  .idle-battlefield { min-height: 200px; }
  html.bkmp-app-mode .idle-hud-level-badge { width: 38px !important; height: 38px !important; }
  .idle-dorf-tab { min-height: 26px !important; padding: 0.2rem 0.5rem !important; }
}
/* Gerahmtes Panel um Dorf-/Drachenbild: statt einer flachen --paper-2-Box
   ein dezenter Gold-Verlaufsrahmen (gleiche Zweischicht-Technik wie
   .idle-dorf-card: innen deckende Flaeche als padding-box, Verlauf als
   border-box), passend zum "Fantasy-Buch"-Look der restlichen Seite -
   ohne die Animation der grossen Modal-Karte, damit es waehrend des
   Kampfes (staendige HP-Updates/Hit-Flashes) nicht unruhig wirkt. */
/* Phase 7.1 Stufe 3 (21.07., Nutzer-Auftrag "Kampfszene nicht mehr wie
   zwei getrennte Screenshots"): der bisherige eigene Goldrahmen +
   --paper-Hintergrund + Schlagschatten JEDES der beiden Container war
   genau der Grund, warum Dorf/Drache wie zwei separate Bildkarten statt
   einer gemeinsamen Szene wirkten - beide sitzen jetzt randlos direkt auf
   dem gemeinsamen Kampffeld-Hintergrund (siehe .idle-battlefield weiter
   unten, hat bereits seinen eigenen radialen Verlauf als Arena-Kulisse).
   Village 46%/Dragon 52% (statt beide 42%) - der Auftrag will das Dorf
   etwas kleiner als den Gegner, siehe Abschnitt 9. */
.idle-village, .idle-dragon {
  position: relative;
  text-align: center;
  padding: 0.4rem 0.3rem;
}
.idle-village { width: 46%; }
.idle-dragon { width: 52%; }

/* ---- Sprite-Grafiken (echte SpriteSheets statt Emoji) ----
   Jedes Sheet ist ein vertikaler Stapel aus 4 gleich hohen Frames
   (Ruhepose / Atem startet / voller Atem / Abklingen). Statt die Sheets
   serverseitig zu zerschneiden, uebernimmt der Browser das per
   background-size 400% Hoehe + animierter background-position-y - eine
   einzige Bilddatei pro Drachenart wird genau einmal geladen und vom
   Browser gecacht, kein Canvas noetig.

   Bei allen 9 Sheets sitzt die kleine "1./2./3./4."-Beschriftung in der
   linken oberen Ecke jedes Frames, das eigentliche Motiv (Dorf-Panorama
   bzw. Drache + Atem-Strahl) nimmt den Rest der sehr breiten Frames ein.
   Statt die Beschriftung mit einem Deckel zu ueberkleben (Kanten passten
   nicht sauber zum Himmel-Farbverlauf), wird sie hier weggeschnitten:
   background-size/-position zoomen minimal in den Frame hinein, sodass
   links exakt der Beschriftungs-Bereich aus dem sichtbaren Fenster faellt.
   aspect-ratio je Sprite entspricht exakt diesem Ausschnitt, damit nichts
   gestaucht/gestreckt wird. */
/* Basiswerte fuer das Standarddorf (1 Frame, kein Sheet) - sobald ein
   Dorf-Skin aktiv ist (siehe bkmpApplyVillageSkin in idledorf.js), werden
   background-image/-size/aspect-ratio/animation per Inline-Style
   ueberschrieben, je nachdem ob der gewaehlte Skin einen animierten
   Mehr-Frame-Sprite-Streifen mitbringt (z.B. "Pilzdorf", 6 Frames) oder
   wie das Standarddorf statisch ist. */
.idle-village-sprite {
  position: relative;
  width: 100%;
  /* Phase 7.1 (21.07., Nutzer-Auftrag "Dorf/Drache groesser innerhalb der
     kleineren Kampfbox"): von 420px auf 520px angehoben - das Dorf-Sprite
     nutzt aspect-ratio (breites Panorama-Bild, 1164:199), Breite bestimmt
     also automatisch die Hoehe mit, ohne zu stauchen/strecken. */
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 1164 / 199;
  background-image: url('assets/dragons/dorf.png?v=20260709-singleframe');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
  border-radius: 10px;
  overflow: hidden;
}
/* Video-Dorf-Skins (z.B. Pinguindorf) werden per JS als Kind-Element
   eingehaengt (idledorf.js bkmpApplyVillageSkin) statt als CSS-Hintergrund -
   fuellt den Sprite-Container exakt aus, der ueber aspect-ratio schon auf
   die echten Video-Massse gesetzt wurde. */
.idle-village-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Gemeinsamer Ausschnitt fuer alle Drachen-Sprites: zeigt die mittleren
   80% der Frame-Breite (5%-85%), das deckt bei allen 9 Sheets sowohl den
   Drachenkoerper als auch den seitlich austretenden Atem-Strahl ab und
   schneidet nur die Beschriftung + etwas leeren Rand weg. */
.idle-dragon-sprite {
  position: relative;
  width: 100%;
  /* Phase 7.1: siehe Kommentar bei .idle-village-sprite oben, gleicher
     Grund - von 260px auf 320px (Boss/Miniboss-Varianten weiter unten
     entsprechend mit angehoben). */
  max-width: 320px;
  margin: 0 auto;
  border-radius: 6px;
  background-repeat: no-repeat;
  background-size: 125% 400%;
  background-position-x: 25%;
  background-position-y: 0%;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
  transition: transform 0.15s ease;
}
.idle-dragon-boss .idle-dragon-sprite { max-width: 400px; }
.idle-dragon-miniboss .idle-dragon-sprite { max-width: 360px; }

/* Kampf-Feinschliff (03.08.2026, Nutzer-Auftrag "Gegnerwechsel weniger
   abrupt"): #idleDragonSprite ist EIN wiederverwendetes Element (siehe
   bkmpIdleApplyDragonSprite in bkmp-hud.js - Hintergrundbild/Video werden
   ausgetauscht, das Element selbst bleibt bestehen). bkmpIdleSpawnDragon()
   fuegt idle-dragon-spawn-in IMMER unmittelbar nach einem etwaigen
   idle-dragon-defeat-out hinzu (gleicher synchroner Aufruf, kein Timeout -
   siehe bkmpIdleHandleDragonDefeated) - beide Klassen koennen dadurch
   gleichzeitig auf demselben Element stehen. Bei gleicher Spezifitaet
   gewinnt in der CSS-Kaskade die SPAETER deklarierte "animation"-Eigenschaft
   komplett (kein Vermischen zweier animation-Werte ueber zwei Klassen) -
   .idle-dragon-spawn-in steht deshalb bewusst NACH .idle-dragon-defeat-out
   in dieser Datei, damit im ueblichen Fall (Kill -> sofort naechster
   Drache) die Einblend-Animation gewinnt, die der Spieler tatsaechlich
   sieht (das neue Sprite-Bild ist zu diesem Zeitpunkt technisch schon
   eingesetzt). idle-dragon-defeat-out bleibt trotzdem als eigene,
   funktionierende Animation stehen - fuer den selteneren Fall, dass ein
   Aufrufer sie ohne unmittelbar folgendes Spawn nutzt, animiert sie
   eigenstaendig korrekt. */
.idle-dragon-defeat-out { animation: idleDragonDefeatOut 0.22s ease; }
@keyframes idleDragonDefeatOut {
  0% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1); }
  100% { opacity: 0.15; transform: scale(0.92) translateY(6px); filter: brightness(0.6) saturate(0.4); }
}
.idle-dragon-spawn-in { animation: idleDragonSpawnIn 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes idleDragonSpawnIn {
  0% { opacity: 0; transform: scale(0.9) translateY(8px); filter: brightness(0.7); }
  55% { opacity: 1; transform: scale(1.035) translateY(-2px); filter: brightness(1.08); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1); }
}

@keyframes idleSpriteAttackFrames {
  from { background-position-y: 0%; }
  to { background-position-y: 100%; }
}
.idle-sprite-attacking { animation: idleSpriteAttackFrames 0.75s steps(3) 1 forwards; }

/* Schrittweiser Umstieg von PNG-Spritesheets auf echte Videos (siehe
   BKMP_IDLE_VIDEO_DRAGON_SPRITES/bkmpIdleApplyDragonSprite in idledorf.js,
   Nutzerwunsch 18.07. "wir wechseln jetzt nach und nach die PNG Frame
   Drachen aus"). Anders als die PNG-Klassen unten braucht das Video keinen
   80%-Kropf-Trick (kein eingebrannter Beschriftungsrand) und keine feste
   aspect-ratio (die echten Video-Massse bestimmen die Groesse von selbst,
   passt sich automatisch an, egal welches Seitenverhaeltnis ein spaeter
   getauschtes Video mitbringt). */
.idle-dragon-sprite-video {
  position: relative;
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  border-radius: 6px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
  transition: transform 0.15s ease;
}
.idle-dragon-boss .idle-dragon-sprite-video { max-width: 340px; }
.idle-dragon-miniboss .idle-dragon-sprite-video { max-width: 300px; }
/* Der Angriffs-Frame-Zyklus (idleSpriteAttackFrames oben) wirkt nur auf
   background-position und haette auf ein <video> keinen Effekt - hier
   stattdessen derselbe Skalier-/Aufhell-Puls, den Weltboss/Gildenboss
   schon fuer ihre Video-Sprites nutzen (raidBossSpriteAttackPulse), nur
   mit den Drachen-eigenen Schattenfarben statt Rot. bkmpIdlePlaySpriteAttack()
   selbst brauchte dafuer keine Aenderung - sie setzt weiterhin nur die
   Klasse .idle-sprite-attacking auf den (jetzt ggf. video-haltigen)
   #idleDragonSprite-Container. */
@keyframes idleDragonVideoAttackPulse {
  0% { filter: brightness(1) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); transform: scale(1); }
  30% { filter: brightness(1.6) drop-shadow(0 6px 18px rgba(249, 115, 22, 0.75)); transform: scale(1.04); }
  100% { filter: brightness(1) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); transform: scale(1); }
}
.idle-sprite-attacking > .idle-dragon-sprite-video { animation: idleDragonVideoAttackPulse 0.75s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .idle-sprite-attacking > .idle-dragon-sprite-video { animation: none; }
}

/* aspect-ratio = 0.8 * (Frame-Breite / Frame-Hoehe) je Sheet - siehe
   Kommentar oben, muss zum 80%-Ausschnitt passen, sonst Verzerrung.
   Alle 8 Sheets (ausser den beiden Event-Drachen unten) wurden neu
   ausgeschnitten: die 4 Frames waren nie exakt in gleich hohe Viertel
   geteilt (die urspruengliche Annahme H/4), sondern echte, ungleich
   hohe Frames mit Luecken dazwischen. Die alte, naive Viertelung liess
   dadurch bei jedem Framewechsel einen duennen Streifen des JEWEILS
   NAECHSTEN Frames am oberen Rand durchscheinen. Jetzt: pro Sheet die
   echten Frame-Graenzen vermessen (Luecken-Erkennung, bei 2 Sheets ohne
   Luecke anhand der Nummer-Beschriftung "1./2./3./4." pro Frame), jeden
   Frame einzeln eng zugeschnitten und untereinander-bodenbuendig (gleiche
   Standflaeche) in ein neues Sheet mit einheitlicher Zeilenhoehe montiert
   - aspect-ratio unten an die jeweils neue Zeilenhoehe angepasst. */
.idle-sprite-feuerdrache { background-image: url('assets/dragons/feuerdrache.png?v=20260713-recrop1'); aspect-ratio: 1373.6 / 232; }
.idle-sprite-blitzdrache { background-image: url('assets/dragons/blitzdrache.png?v=20260713-recrop1'); aspect-ratio: 1337.6 / 242; }
.idle-sprite-erddrache { background-image: url('assets/dragons/erddrache.png?v=20260713-recrop1'); aspect-ratio: 1337.6 / 234; }
.idle-sprite-wasserdrache { background-image: url('assets/dragons/wasserdrache.png?v=20260713-recrop1'); aspect-ratio: 1336.8 / 229; }
.idle-sprite-yakshas-drache { background-image: url('assets/dragons/yakshas-drache.png?v=20260713-recrop1'); aspect-ratio: 1228.8 / 251; }
.idle-sprite-yaksha-boss { background-image: url('assets/dragons/yaksha-boss.png?v=20260715-holefix1'); aspect-ratio: 1228.8 / 273; }
.idle-sprite-schattendrache { background-image: url('assets/dragons/schattendrache.png?v=20260713-recrop1'); aspect-ratio: 1228.8 / 247; }
.idle-sprite-wuffdrache { background-image: url('assets/dragons/wuffdrache.png?v=20260715-holefix1'); aspect-ratio: 1228.8 / 259; }
.idle-sprite-winddrache { background-image: url('assets/dragons/winddrache.png?v=20260716-winddrachecrop1'); aspect-ratio: 1228.8 / 250; }

/* Die beiden seltenen Event-Drachen (Shenloss/Ganz Liber Drache) sind
   FRISCH aus sauber getrennten Einzelframes zusammengesetzt (siehe
   assets/dragons/shenloss.png bzw. liber.png) - anders als bei den 9
   Sheets oben gibt es hier KEINE Beschriftung im Frame, die weggeschnitten
   werden muesste. Deshalb eigene background-size/-position OHNE den 125%/
   25%-Kropf-Trick der anderen Sprites (sonst wuerde hier faelschlich ein
   Teil des Drachen abgeschnitten). aspect-ratio = exakte Frame-Breite/
   -Hoehe des jeweiligen Sheets. */
.idle-sprite-shenloss, .idle-sprite-liber {
  background-size: 100% 400%;
  background-position-x: 0%;
  /* Spieler-Meldung (15.07.): "Der hat transparent Lücken.. bitte
     ordentlich nochmal ausschneiden" - beide Event-Drachen sind (anders
     als die 9 echten Pixel-Art-Sheets oben) glattes Strichzeichnungs-
     Artwork ohne Anti-Aliasing im Alpha-Kanal. Das geerbte
     "image-rendering:pixelated" von .idle-dragon-sprite (fuer die echten
     Pixel-Art-Sprites gedacht) skaliert per Nearest-Neighbor herunter -
     bei duennem Strichwerk werden dabei einzelne Bildzeilen komplett
     uebersprungen, wodurch Konturlinien (v.a. die Bauchstreifen) sichtbar
     aufreissen/Luecken bekommen. Fuer diese beiden zurueck auf normales,
     geglaettetes Skalieren - behebt das Aufreissen komplett (getestet bei
     60px Anzeigegroesse). */
  image-rendering: auto;
}
.idle-sprite-shenloss { background-image: url('assets/dragons/shenloss.png?v=20260710-eventdragons1'); aspect-ratio: 473 / 372; }
.idle-sprite-liber { background-image: url('assets/dragons/liber.png?v=20260718-libercutout2'); aspect-ratio: 419 / 259; }

.idle-dragon-name { margin-top: 0.3rem; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.idle-dragon-boss .idle-dragon-name { color: #facc15; }
.idle-dragon-miniboss .idle-dragon-name { color: #a78bfa; }

@media (prefers-reduced-motion: reduce) {
  .idle-sprite-attacking { animation: none; }
}

/* Nutzerwunsch 19.07.: "Kannst du mal schauen ob du die 2 Fenster Stadt +
   Drachen auf eine Größe haust? Drachen sind ein Stück höher... Pack den
   einfach rechts neben die HP Leiste" - der Drache brauchte bisher unter
   dem HP-Label eine dritte, eigene Zeile fuer seinen Namen, die das
   Dorf-Fenster gar nicht hat (siehe #idleVillage in index.html, hat keine
   .idle-dragon-name-Entsprechung) - dadurch war die Drachen-Box immer eine
   Zeile hoeher. Name steht jetzt in derselben Zeile wie die HP-Leiste
   selbst statt darunter, Dorf-Seite bleibt unveraendert - beide Kaesten
   sind dadurch gleich hoch. */
.idle-hp-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.idle-hp-row .idle-hp-bar { flex: 1; min-width: 0; margin-top: 0; }
.idle-hp-row .idle-dragon-name {
  flex: none; max-width: 45%; margin-top: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.idle-hp-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 12%, var(--paper)); overflow: hidden; border: 1px solid var(--line); margin-top: 0.5rem; }
.idle-hp-fill { height: 100%; transition: width 0.25s ease; }
.idle-hp-fill-village { background: linear-gradient(90deg, #4ade80, #22c55e); }
.idle-hp-fill-dragon { background: linear-gradient(90deg, #f87171, #ef4444); }
.idle-hp-label { font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; }

.idle-hit-flash { animation: idleHitFlash 0.25s ease; }
@keyframes idleHitFlash {
  0% { filter: brightness(1); transform: scale(1); }
  40% { filter: brightness(2) saturate(1.4); transform: scale(1.08); }
  100% { filter: brightness(1); transform: scale(1); }
}

/* Kampf-Feinschliff (03.08.2026, Nutzer-Auftrag "Trefferfeedback fuer die
   Spielerseite"): ergaenzt (nicht ersetzt) das obige idle-hit-flash, das
   weiterhin fuer BEIDE Ziele (Dorf+Drache) unveraendert laeuft, ebenso wie
   der bereits bestehende globale Bildschirm-Wackler
   (html.bkmp-app-mode .idle-battlefield:has(.idle-hit-flash), weiter unten
   in dieser Datei) - der deckt "minimale Erschuetterung" fuer beide Seiten
   bereits ab, hier kommt bewusst KEIN zweiter Wackler dazu (Auftrag: "keine
   dauerhaften Animationen stapeln"). Nur zwei zusaetzliche, rein
   dorf-spezifische Effekte: eine kurze rot/orange Innen-Vignette auf dem
   Dorf-Sprite (dessen overflow:hidden+border-radius sorgt automatisch fuer
   einen sauberen, abgerundeten Rahmen) und ein kurzes Aufleuchten des
   HP-Balken-Wrappers (siehe bkmpIdleSpawnHitFlash in bkmp-hud.js fuer die
   Begruendung, warum der Glow auf dem Wrapper statt dem Fuellstand sitzen
   muss). */
/* !important noetig, da #idleVillageSprite immer ein Inline-"style.animation"
   traegt (bkmpApplyVillageSkinToElement, bkmp-cosmetics.js - "none" fuer
   statische Skins, ein echter Endlos-Loop fuer animierte Mehrfach-Frame-
   Skins) - Inline-Styles schlagen jede Klassenregel ohne !important. Bleibt
   trotzdem sicher: die Klasse wird per eigenem Timer in bkmpIdleSpawnHitFlash
   (bkmp-hud.js) exakt nach Ablauf der 0.4s wieder entfernt, ueberschreibt
   eine echte Skin-Ambiente-Animation also nur fuer den kurzen Puls-Moment,
   nie dauerhaft. */
.idle-village-damage-pulse .idle-village-sprite { animation: idleVillageDamagePulse 0.4s ease !important; }
@keyframes idleVillageDamagePulse {
  0% { box-shadow: inset 0 0 0 rgba(248, 113, 113, 0); }
  25% { box-shadow: inset 0 0 34px rgba(248, 113, 113, 0.55); }
  100% { box-shadow: inset 0 0 0 rgba(248, 113, 113, 0); }
}
.idle-hp-bar-flash { animation: idleHpBarFlash 0.4s ease; }
@keyframes idleHpBarFlash {
  0% { box-shadow: inset 0 0 0 rgba(248, 113, 113, 0); }
  30% { box-shadow: inset 0 0 10px 2px rgba(248, 113, 113, 0.7); }
  100% { box-shadow: inset 0 0 0 rgba(248, 113, 113, 0); }
}

.idle-arrow {
  position: absolute;
  top: 45%;
  left: 40%;
  width: 26px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #f5d58a, var(--gold));
  border-radius: 2px;
  animation: idleArrowFly 0.5s ease forwards;
  pointer-events: none;
}
@keyframes idleArrowFly {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(220px); opacity: 0; }
}
.idle-fire-breath {
  position: absolute;
  top: 45%;
  right: 40%;
  width: 30px;
  height: 14px;
  background: radial-gradient(ellipse at right, #fde68a, #f97316 55%, transparent 80%);
  border-radius: 50%;
  animation: idleFireFly 0.5s ease forwards;
  pointer-events: none;
}
@keyframes idleFireFly {
  from { transform: translateX(0) scale(0.6); opacity: 1; }
  to { transform: translateX(-220px) scale(1.3); opacity: 0; }
}

.idle-dmg-float {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 0.85rem;
  color: #f87171;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  animation: idleDmgFloat 0.8s ease forwards;
  pointer-events: none;
}
/* Kampf-Feinschliff (03.08.2026, Nutzer-Auftrag "Schadenszahlen"): eigenes,
   kraeftigeres Pop-In fuer Kritische Treffer statt des gleichen sanften
   Hochschwebens wie normale Zahlen (Groesse/Farbe waren schon vorher
   unterschiedlich, siehe .idle-dmg-crit oben - der bereits bestehende
   Funken-Ausbruch bei ::after, weiter unten in dieser Datei bei
   html.bkmp-app-mode .idle-dmg-crit::after, deckt den "kurzen Leucht-/
   Wumms-Effekt" bereits ab, unveraendert). Gleiche Spezifitaet wie
   .idle-dmg-float, spaeter in der Kaskade deklariert - ueberschreibt
   dessen "animation" komplett, kein !important noetig. */
.idle-dmg-crit { color: #facc15; font-size: 1.05rem; animation: idleDmgFloatCrit 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes idleDmgFloatCrit {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.5); }
  35% { opacity: 1; transform: translate(-50%, -6px) scale(1.35); }
  55% { transform: translate(-50%, -14px) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(1); }
}
/* Ueberschreitet die Anzahl gleichzeitig aktiver Schadenszahlen pro Ziel
   das Limit (BKMP_DMG_FLOAT_MAX_PER_TARGET, bkmp-hud.js), blendet die
   AELTESTE zuegig aus statt ihre volle 800ms-Laufzeit abzuwarten - gilt
   fuer normale UND kritische Zahlen gleichermassen (!important gewinnt
   gegen beide .idle-dmg-float/.idle-dmg-crit-Animationen). */
.idle-dmg-float-fastout { animation: idleDmgFloatFastOut 0.13s ease forwards !important; }
@keyframes idleDmgFloatFastOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.idle-dmg-click { color: #7dd3fc; left: 65%; }
.idle-dmg-burn { color: #fb923c; left: 35%; text-shadow: 0 0 8px rgba(251, 146, 60, 0.7); }
.idle-dmg-lightning { color: #fef08a; left: 60%; text-shadow: 0 0 8px rgba(250, 204, 21, 0.8); }
/* Ohne user-select loest schnelles Mehrfach-Antippen (Klick-Schaden) auf
   Mobilgeraeten die native Text-Markierung des Drachennamens/HP-Labels aus
   statt nur Klicks zu registrieren (Spieler-Meldung + Screenshot) -
   tap-highlight-color entfernt zusaetzlich das blaue Antipp-Aufblitzen. */
.idle-dragon-clickable {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.idle-dragon-clickable:active .idle-dragon-sprite { transform: scale(0.96); }
@keyframes idleDmgFloat {
  0% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -34px); }
}

.idle-lightning-bolt {
  position: absolute; top: 10%; left: 55%; width: 5px; height: 55%;
  background: linear-gradient(180deg, #fef9c3, #facc15);
  clip-path: polygon(50% 0%, 100% 10%, 60% 45%, 100% 50%, 20% 100%, 40% 55%, 0% 50%);
  filter: drop-shadow(0 0 6px #facc15);
  animation: idleLightningStrike 0.35s ease forwards;
  pointer-events: none;
}
@keyframes idleLightningStrike { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

.idle-ice-block {
  position: absolute; top: 30%; left: 50%; transform: translateX(-50%);
  font-weight: 700; font-size: 0.8rem; color: #7dd3fc;
  text-shadow: 0 0 8px rgba(125, 211, 252, 0.7);
  animation: idleDmgFloat 0.8s ease forwards;
  pointer-events: none; white-space: nowrap;
}

/* Nutzerwunsch (19.07.): "Funktion die unten im Drop-Chat einstellbar ist,
   ob nur Legi-Runen angezeigt werden" - filtert NUR die Textzeilen im Log
   (siehe bkmpIdleLog-Aufruf in bkmpIdleMaybeDropRune, bkmp-runes.js), nicht
   die Belohnungs-Karte/-Zeremonie daneben. Persistiert wie Theme/Effektmodus
   ueber localStorage (siehe bkmpIdleLogLegendaryOnlyInit in idledorf.js). */
.idle-dorf-log-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
  font-size: 0.76rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.idle-dorf-log-filter input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--gold);
  cursor: pointer;
}
.idle-dorf-log {
  margin-top: 0.5rem;
  /* Bug-Fix 18.07. (Spieler-Meldung: Bereich springt bei jedem Drop/Fund
     eine Zeile hoeher): nur max-height reserviert keinen Platz, solange
     das Log leer/kurz ist - der Block wuchs dadurch mit jeder neuen Zeile
     sichtbar mit und verschob alles darunter. min-height=max-height
     reserviert von Anfang an den vollen Platz fuer ~5 Zeilen, der Block
     scrollt intern statt zu wachsen. */
  min-height: 120px;
  max-height: 120px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.idle-dorf-log-line { padding: 0.15rem 0; }

/* Gold/XP-Hochschweb-Anzeige (Nutzerwunsch 15.07.: "wo dieses Geld und XP
   hochploppt gerne auch so Standard mäßig machen, anstatt dadrunter so ein
   Scroll Fenster") - urspruenglich nur idle-stream-mini.html, jetzt
   globaler Standard fuer #idleBattlefield (siehe zentraler Listener in
   idledorf.js). Ersetzt die bisherige "Drache besiegt! +Gold +XP"-Zeile im
   Kampf-Log, das dadurch nur noch fuer seltenere Ereignisse genutzt wird. */
.idle-reward-float {
  position: absolute;
  /* Kampf-Feinschliff (03.08.2026): --rf-stack-offset wird per JS gesetzt
     (siehe bkmpIdleRewardGained-Listener, idledorf.js) - bei schnell
     aufeinanderfolgenden Siegen verschiebt jede noch aktive Anzeige die
     naechste ein Stueck nach oben, statt exakt uebereinander zu liegen. */
  top: calc(10% + var(--rf-stack-offset, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
  pointer-events: none;
  z-index: 6;
  animation: idleRewardFloat 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Ueberschreitet die Anzahl gleichzeitig aktiver Belohnungs-Reihen das
   Limit (BKMP_REWARD_FLOAT_MAX, idledorf.js), blendet die AELTESTE zuegig
   aus statt ihre volle 1.5s-Laufzeit abzuwarten. */
.idle-reward-float-fastout { animation: idleDmgFloatFastOut 0.15s ease forwards !important; }
/* Nutzerwunsch (19.07.): "optisch was einfallen lassen" - vorher reiner
   Text mit Farbe+Schatten, jetzt kleine "Belohnungs-Chips" mit Glas-
   Hintergrund + zur jeweiligen Ressource passendem Rand/Glow (--rf-color
   pro Chip gesetzt, einmal zentral in box-shadow/border/color verwendet
   statt 3x hartkodierter Hex-Werte). Nutzt den echten Marken-Gold-Ton
   (--gold) statt des alten generischen Amber-Tons, der farblich nirgends
   sonst im Spiel vorkam. */
.idle-reward-float .rf-chip {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: 0.92rem;
  white-space: nowrap;
  padding: 0.28rem 0.6rem 0.28rem 0.5rem;
  border-radius: 999px;
  color: var(--rf-color);
  background: linear-gradient(155deg, rgba(10, 8, 16, 0.8), rgba(6, 5, 10, 0.68));
  border: 1px solid color-mix(in srgb, var(--rf-color) 55%, transparent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 14px color-mix(in srgb, var(--rf-color) 45%, transparent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  animation: idleRewardChipIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.idle-reward-float .rf-chip .rf-icon {
  font-size: 0.95em;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.idle-reward-float .rf-gold { --rf-color: var(--gold); }
.idle-reward-float .rf-xp { --rf-color: #7ee0ff; animation-delay: 0.09s; }
/* Kleiner Glanz-Streifen nur ueber den Gold-Chip (Muenzen glaenzen,
   Erfahrung nicht) - reine Deko, laeuft einmal waehrend des Aufploppens
   durch, kein Dauerloop.
   Perf-Fix (Nutzer-Videobericht 19.07., "Fenster flackert 1x komplett" beim
   Drachenwechsel): urspruenglich per "left" animiert - das zwingt den
   Browser bei JEDEM Frame zu einem echten Layout-Reflow statt nur neu zu
   compositen, ausgerechnet genau in dem Moment, in dem ohnehin schon viel
   gleichzeitig passiert (neues Drachen-Video, HP-Sprung, Schadenszahl).
   "transform: translateX()" laeuft dagegen rein auf der GPU-Compositor-
   Ebene, ohne Layout/Paint - gleicher optischer Effekt, ohne die
   zusaetzliche Reflow-Last in diesem kritischen Moment. */
.idle-reward-float .rf-gold::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-250%);
  animation: idleRewardShimmer 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform;
}
@keyframes idleRewardChipIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes idleRewardShimmer {
  0%, 15% { transform: translateX(-250%); }
  32% { transform: translateX(250%); }
  100% { transform: translateX(250%); }
}
@keyframes idleRewardFloat {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, -4px) scale(1.2); }
  30% { transform: translate(-50%, -2px) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -52px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -66px) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .idle-reward-float { animation: none; opacity: 0; }
  .idle-reward-float .rf-chip { animation: none; }
  .idle-reward-float .rf-gold::after { animation: none; }
}
/* Nutzerwunsch (19.07.): "bei den Effekten deaktivieren-Option einbauen,
   das Flackern/Hochploppen vom Fight" - Effektmodus "Aus" haelt jetzt auch
   die Gold/XP-Hochschweb-Chips an. Bewusst NICHT wie beim reinen
   reduced-motion-Fall oben komplett unsichtbar (opacity:0 dort wuerde die
   Zahlen fuer Aus-Spieler ganz verschwinden lassen) - die Chips bleiben
   sichtbar+lesbar, nur ohne Flug-/Pop-/Glanz-Animation, damit in genau dem
   Moment (Drachenwechsel) weniger gleichzeitig animiert werden muss. */
html[data-fx="aus"] .idle-reward-float { animation: none; opacity: 1; }
html[data-fx="aus"] .idle-reward-float .rf-chip { animation: none; }
html[data-fx="aus"] .idle-reward-float .rf-gold::after { animation: none; display: none; }
/* Nutzerwunsch 19.07.: "Zu denn Effekten deaktivieren auch dieses Damage
   hochploppen" - die Schadenszahlen (-1234!, Brand-/Blitz-Tick, Klick-
   Schaden, siehe bkmpIdleSpawnProjectile/-BurnTick/-LightningBolt in
   bkmp-hud.js) werden weiterhin nach 800ms per JS entfernt, animieren beim
   Erscheinen/Verschwinden aber nicht mehr - erscheinen kurz statisch statt
   hochzupoppen und wegzufaden. */
html[data-fx="aus"] .idle-dmg-float { animation: none; opacity: 1; transform: translate(-50%, 0); }

/* Kampf-Status-Banner (03.08.2026, Nutzer-Auftrag "Status-Einblendungen"):
   siehe bkmpIdleShowCombatStatus in bkmp-hud.js fuer die JS-seitige
   Prioritaets-/Ersetzungslogik. Positioniert oberhalb der Belohnungs-
   Hochschweb-Anzeige (die sitzt bei top:10%, siehe .idle-reward-float
   oben) - beide koennen bei einem Bosssieg gleichzeitig ausgeloest werden,
   der kleine vertikale Abstand + der eigene, hoehere z-index verhindern,
   dass sich die Texte gegenseitig unlesbar ueberdecken. clamp() statt
   fester rem-Werte haelt die Schrift auch auf sehr schmalen mobilen
   Kampffeldern lesbar, ohne eine eigene Media-Query zu brauchen. */
.idle-combat-status {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translate(-50%, 0) scale(1);
  z-index: 9;
  max-width: 88%;
  pointer-events: none;
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: clamp(0.95rem, 3.6vw, 1.3rem);
  color: var(--gold);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 0, 0, 0.4);
  background: linear-gradient(155deg, rgba(10, 8, 16, 0.84), rgba(6, 5, 10, 0.7));
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 999px;
  padding: 0.45rem 1.2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  animation: idleCombatStatusIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Bosskampf-Variante (Auftrag: "darf visuell staerker sein, muss aber KEIN
   vollflaechiges Overlay sein und darf den Kampf nicht pausieren") - nur
   groesser/kraeftigerer Glow, exakt derselbe leichte Banner-Mechanismus. */
.idle-combat-status-strong {
  font-size: clamp(1.15rem, 5.2vw, 1.75rem);
  padding: 0.6rem 1.6rem;
  color: #fde68a;
  border-color: color-mix(in srgb, #ef4444 45%, var(--gold) 55%);
  box-shadow: 0 0 26px rgba(239, 68, 68, 0.45), 0 0 16px rgba(250, 204, 21, 0.35), 0 8px 20px rgba(0, 0, 0, 0.45);
}
.idle-combat-status-defeat {
  color: #fca5a5;
  border-color: color-mix(in srgb, #ef4444 60%, transparent);
}
.idle-combat-status-out { animation: idleCombatStatusOut 0.3s ease forwards !important; }
@keyframes idleCombatStatusIn {
  0% { opacity: 0; transform: translate(-50%, -8px) scale(0.85); }
  60% { opacity: 1; transform: translate(-50%, 2px) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes idleCombatStatusOut {
  0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(0.92); }
}
html[data-fx="aus"] .idle-combat-status { animation: none; opacity: 1; transform: translate(-50%, 0) scale(1); }
html[data-fx="aus"] .idle-combat-status-out { animation: none !important; }
/* Die globale reduced-motion-Kollektivregel weiter oben in dieser Datei
   (*, *::before, *::after { animation-duration: 0.001ms !important; ... })
   deckt jede normale, NICHT mit !important markierte "animation"-Angabe
   bereits automatisch ab (Kaskade: gleiche Wichtigkeit, aber die spaeter
   deklarierte, spezifischere Klassenregel gewinnt trotzdem gegen den
   Universalselektor "*" NICHT, wenn beide !important sind UND die Klasse
   eine hoehere Spezifitaet hat als "*" (0 Punkte) - genau das trifft auf
   die drei "aeltestes Element schneller ausblenden"-Klassen hier zu, die
   ihr eigenes "animation: ... !important" tragen. Ohne diese explizite
   Ergaenzung wuerden GENAU diese drei Klassen die globale Kollektivregel
   ueberstimmen und weiterhin mit voller Dauer laufen. */
@media (prefers-reduced-motion: reduce) {
  .idle-dmg-float-fastout,
  .idle-reward-float-fastout,
  .idle-combat-status-out { animation: none !important; opacity: 0 !important; }
}

/* ============================================================
   Granulare Effekt-Einzelschalter (Nutzerwunsch 19.07.: "wirklich alle
   Effekte selbst auswaehlbar", siehe BKMP_FX_TOGGLE_DEFS in idledorf.js) -
   jede Regel hier ist eine gezielte, EIGENSTAENDIGE Ergaenzung zu den
   bestehenden html[data-fx="..."]-Regeln oben (nicht deren Ersatz): ein
   Effekt ist aus, sobald ENTWEDER die Grobstufe "Aus"/"Reduziert" ODER der
   jeweilige html.fx-off-<id>-Einzelschalter aktiv ist. dragonVideo/
   villageSkinAnim sind rein JS-gesteuert (siehe bkmpFxDragonVideoOff/
   bkmpFxVillageSkinAnimOff in idledorf.js), brauchen daher keine eigene
   CSS-Regel hier.
   ============================================================ */
html.fx-off-dmgNumbers .idle-dmg-float { animation: none; opacity: 1; transform: translate(-50%, 0); }
html.fx-off-dmgNumbers .idle-dmg-float-fastout { animation: none !important; opacity: 1; }
html.fx-off-hitShake .idle-battlefield:has(.idle-hit-flash) { animation: none; }
html.fx-off-hitShake .idle-hit-flash { animation: none; }
html.fx-off-hitShake .idle-village-damage-pulse .idle-village-sprite { animation: none !important; }
html.fx-off-hitShake .idle-hp-bar-flash { animation: none; }
html.fx-off-attackAnim .idle-arrow,
html.fx-off-attackAnim .idle-fire-breath { animation: none; opacity: 0; }
html.fx-off-attackAnim .idle-sprite-attacking { animation: none; }
html.fx-off-attackAnim .idle-sprite-attacking > .idle-dragon-sprite-video { animation: none; }
html.fx-off-attackAnim .idle-dragon-spawn-in,
html.fx-off-attackAnim .idle-dragon-defeat-out { animation: none; opacity: 1; }
html.fx-off-rewardPopups .idle-reward-float { animation: none; opacity: 1; }
html.fx-off-rewardPopups .idle-reward-float .rf-chip { animation: none; }
html.fx-off-rewardPopups .idle-reward-float .rf-gold::after { animation: none; display: none; }
html.fx-off-legendaryPulse .idle-runen-item[style*="facc15"] { animation: none !important; }

/* ---- Upgrades ---- */
.idle-autobuy-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.idle-autobuy-toggle input { width: 1.05rem; height: 1.05rem; cursor: pointer; accent-color: var(--gold, #c9a24b); }
/* Spieler-Idee Fightmaria (28.07.2026): Auto-Kauf laesst sich pro
   Ressourcentyp ausschliessen (z.B. "alles ausser Gold", waehrend man
   gezielt darauf spart) - gleiches Chip-Muster wie .idle-runen-bgauto-row. */
.idle-autobuy-resource-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.idle-autobuy-resource-filter-label { font-size: 0.78rem; color: var(--muted); }
.idle-autobuy-resource-chip {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.65rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); font-size: 0.76rem; cursor: pointer; flex: 0 0 auto;
}
.idle-autobuy-resource-chip input { width: 0.9rem; height: 0.9rem; cursor: pointer; accent-color: var(--gold, #c9a24b); }
/* Nutzer-Screenshot 19.07.: unterste Kartenreihe wirkte zu dicht an der
   Button-Leiste (Als App installieren/Für Streamer/Schließen), die IMMER
   unterhalb des scrollenden .idle-dorf-panel sitzt (siehe dort) - etwas
   Luft am Ende des Scrollbereichs, bevor die Leiste beginnt. */
.idle-upgrade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.8rem; padding-bottom: 0.4rem; }
.idle-upgrade-card { border: 1px solid var(--line); border-radius: 14px; padding: 0.85rem; background: var(--paper); text-align: left; display: flex; flex-direction: column; gap: 0.55rem; }
/* Redesign 18.07. (Phase 5.4): Kopfzeile aus Icon + Name/Stufe (statt
   zentriert uebereinander gestapelt) und eine "aktuell → naechste Stufe"-
   Effektzeile ersetzen den bisherigen statischen Fliesstext - liest
   weiterhin nur bestehende Felder (siehe bkmpIdleUpgradeCardHtml in
   idledorf.js), keine neue Berechnung. */
.idle-upgrade-card-head { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.idle-upgrade-icon { flex: none; font-size: 1.4rem; line-height: 1; }
/* Bug-Fix (Phase 5.4, Mobile-Verifikation 375px): Flex-Kinder schrumpfen
   ohne min-width:0 nie unter die Breite ihres eigenen Inhalts - lange
   Upgrade-Namen ("Magierakademie", "Holzfällerlager") liessen dadurch die
   ganze Karte ueber ihren Container hinauswachsen. flex:1 zusaetzlich,
   damit der Titel-Block den verbleibenden Platz neben dem Icon ausfuellt
   statt sich nur an seinem Inhalt zu orientieren. */
.idle-upgrade-card-title { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.idle-upgrade-name { font-weight: 700; font-size: 0.85rem; overflow-wrap: break-word; }
.idle-upgrade-level { font-size: 0.68rem; color: var(--muted); font-weight: 500; }
/* Bug-Fix (Nutzer-Screenshot 19.07., "durch das Wort Verteidigung springt
   das staendig hoch runter"): vorher EINE Flex-Zeile mit flex-wrap - ob
   "aktuell → naechste Stufe" auf eine oder zwei Zeilen passt, hing vom
   exakten Pixel-Wert der Zahl UND der Laenge des Stat-Worts ab
   ("Verteidigung" ist mit Abstand das laengste einzelne Wort ohne
   natuerliche Trennstelle). Bei jeder Stufen-Aenderung (Auto-Kauf!)
   konnte dieselbe Karte dadurch zwischen ein- und zweizeilig hin- und
   herspringen und die ganze Kartenreihe (Grid-Zeilen strecken sich auf
   die hoechste Karte) sichtbar mitreissen. Jetzt IMMER zwei eigene
   Zeilen (aktuell / naechste Stufe) statt einer gemeinsamen, umbrechenden
   Zeile - Hoehe haengt dadurch nie mehr vom exakten Zahlenwert ab. */
.idle-upgrade-effect-row { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.74rem; color: var(--muted); }
.idle-upgrade-effect-line { overflow-wrap: break-word; }
.idle-upgrade-effect-current { color: var(--ink); }
.idle-upgrade-effect-arrow { color: var(--muted); }
.idle-upgrade-effect-next { color: var(--gold); font-weight: 600; }
.idle-upgrade-card.is-maxed .idle-upgrade-effect-current { color: var(--gold); font-weight: 600; }
/* Bugfix (05.08.2026, Nutzer-Screenshot "Sieht schrecklich aus" zum
   Prestige-Baum-Knoten "Weitere Gefaehrten"): .idle-upgrade-desc (nutzt
   ausschliesslich bkmpPrestigeRenderBranchGridHtml() fuer die Prestige-
   Knoten-Beschreibung) hatte bisher UEBERHAUPT KEINE eigene Regel - reiner
   unstyled Browser-Default-Text (falsche Farbe, kein overflow-wrap, keine
   Groessenabstimmung auf den Rest der Karte). Zweiter, unabhaengiger Fund
   an derselben Karte: Icon+Name standen bisher als flache Flex-Kinder
   direkt in der Karte (kein .idle-upgrade-card-head/-card-title-Wrapper
   wie beim bereits redesignten Upgrades-Tab, siehe Kommentar oben bei
   .idle-upgrade-card-head, 18.07.) - das Icon rutschte dadurch als eigene
   grosse Zeile UEBER den Titel statt daneben zu stehen. Beide Bugs waren
   nur in bkmp-prestige.js's Kartenmarkup, jetzt auf dasselbe Muster wie
   idledorf.js's bkmpIdleUpgradeCardHtml() umgestellt. */
.idle-upgrade-desc { font-size: 0.74rem; color: var(--muted); line-height: 1.4; overflow-wrap: break-word; }
/* Progression-Rebalance Phase 3/4 (26.07.2026): Softcap-Zone/Meilenstein-
   Hinweis - bewusst kleiner/gedaempfter als die Effekt-Zeilen (Zusatzinfo,
   nicht der Haupt-Blickfang der Karte). */
.idle-upgrade-zone-note { font-size: 0.68rem; color: var(--muted); overflow-wrap: break-word; }
.idle-upgrade-milestone-note { font-size: 0.68rem; color: var(--gold); overflow-wrap: break-word; }
/* Progression-Rebalance Phase 10 (26.07.2026): Gebaeude-Ueberladung. */
.idle-building-overload-row { margin-bottom: 0.8rem; }
.idle-building-overload-active { font-size: 0.78rem; color: var(--gold); font-weight: 600; margin-bottom: 0.4rem; }
.idle-building-overload-tiers { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.idle-building-overload-btn { padding: 0.35rem 0.6rem; font-size: 0.72rem; }
.idle-building-overload-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.idle-upgrade-buy { width: 100%; padding: 0.4rem 0.6rem; font-size: 0.78rem; margin-top: auto; }
.idle-upgrade-buy:disabled { opacity: 0.5; cursor: not-allowed; }
.idle-upgrade-section-title { font-size: 0.95rem; margin: 1.2rem 0 0.6rem; }
.idle-dragon-building-upgrade { width: 100%; padding: 0.4rem 0.6rem; font-size: 0.78rem; }
.idle-dragon-building-upgrade:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Dorf-Skins ---- */
.idle-skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.8rem; align-items: stretch; }
/* flex-Spalte + margin-top:auto auf Button/Hinweis (statt fixer min-height
   auf der Beschreibung): richtet die Buttons ueber alle Karten einer Reihe
   an der GLEICHEN Unterkante aus, egal wie lang der jeweilige
   Beschreibungstext ist (Nutzerwunsch: Buttons sprangen vorher je nach
   Textlaenge unterschiedlich hoch). */
.idle-skin-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; padding: 0.9rem; background: var(--paper); text-align: center; }
.idle-skin-card-equipped { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
/* Vorschau-Kachel (04.08.2026, Spieler-Idee NikschiOG: "Vorschau bei den
   Dorf-Skins, da man sonst nicht weiß was man kauft") - zeigt ein statisches
   erstes Frame direkt in der Karte (forceStatic:true, siehe
   bkmpApplyVillageSkinToElement in bkmp-cosmetics.js - verhindert, dass alle
   sichtbaren Karten gleichzeitig ihre Videos abspielen), Klick/Enter oeffnet
   die vergroesserte, live animierte Ansicht in #idleSkinPreviewOverlay. */
.idle-skin-preview-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1164 / 199;
  border-radius: 8px;
  overflow: hidden;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  cursor: pointer;
  margin-bottom: 0.55rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.idle-skin-preview-thumb:hover,
.idle-skin-preview-thumb:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 0 0 2px var(--gold);
  outline: none;
}
.idle-skin-preview-card { max-width: min(640px, 92vw); }
.idle-skin-preview-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1164 / 199;
  border-radius: 10px;
  overflow: hidden;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
  margin-bottom: 0.6rem;
}
.idle-skin-icon { font-size: 1.6rem; margin-bottom: 0.3rem; }
.idle-skin-name { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.2rem; }
.idle-skin-desc { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.6rem; }
/* Nutzerwunsch 19.07.: zeigt den eigenen Bestand neben dem Kaufpreis (siehe
   bkmpIdleRenderSkinsPanel in bkmp-cosmetics.js) - dezent, wird erst gruen
   sobald leistbar (is-affordable), damit der Kaufen-Button selbst weiter
   das eigentliche Signal bleibt. */
.idle-skin-afford { font-size: 0.68rem; color: var(--muted); margin-top: auto; padding-top: 0.3rem; font-variant-numeric: tabular-nums; }
.idle-skin-afford.is-affordable { color: var(--positive, #4ade80); }
/* .idle-skin-afford uebernimmt hier bereits das margin-top:auto (druckt sich
   selbst + den Button darunter an die Unterkante) - der Button braucht dann
   nur noch einen kleinen festen Abstand statt selbst nochmal aufzufuellen. */
.idle-skin-afford + .idle-skin-action,
.idle-skin-afford + .idle-skin-locked-hint { margin-top: 0.35rem; }
.idle-skin-action { width: 100%; padding: 0.4rem 0.6rem; font-size: 0.78rem; margin-top: auto; }
.idle-skin-action:disabled { opacity: 0.7; cursor: default; }
.idle-skin-buy:disabled { opacity: 0.5; cursor: not-allowed; }
/* Echtgeld-Artikel (z.B. Steampunk Dorf) - dezent von Gold-Kosmetik
   abgesetzt, damit sofort klar ist "das ist eine andere Waehrung". */
.idle-skin-card-premium { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 6%, var(--paper)), var(--paper)); }
.idle-skin-buy-real-money { background: linear-gradient(135deg, #fbbf24, #b45309); border: none; color: #1a1206; font-weight: 700; }
.idle-skin-buy-real-money-locked { background: var(--paper-2); border: 1px dashed var(--line); color: var(--muted); font-weight: 700; cursor: not-allowed; opacity: 0.85; }
/* Bug-Fix 19.07. (Spieler-Meldung "sieht gequetscht aus", Zerstoertes-Dorf-/
   Yakshas-Heimat-Karte): war reiner Fliesstext ohne die Chip-Optik, die
   .idle-skin-action (Kaufen/Ausruesten-Button) daneben hat - wirkte dadurch
   knapp an die Kartenunterkante gequetscht statt wie ein gleichwertiges
   drittes Element. Jetzt gleiche Flaeche/Rundung wie ein deaktivierter
   Button, nur ohne Klick-Optik. */
.idle-skin-locked-hint {
  width: 100%;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
  padding: 0.45rem 0.6rem;
  margin-top: auto;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-2) 60%, transparent);
}
.idle-skin-empty-hint { color: var(--muted); font-size: 0.85rem; text-align: center; padding: 1.2rem 0.6rem; }

/* ---- Drachenzucht ---- */
/* Raritaets-Farbrahmen ueber --dragon-rarity-color (gleiche color-mix()-
   Technik wie bei Runen, siehe --rune-color) - faellt auf die normale
   Kartenfarbe zurueck, wenn die Variable nicht gesetzt ist. */
.idle-skin-card { border-color: color-mix(in srgb, var(--dragon-rarity-color, var(--line)) 45%, var(--line)); position: relative; }
.idle-dragon-section { margin-bottom: 1.4rem; }
.idle-dragon-section h4 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.idle-dragon-thumb { width: 100%; max-width: 96px; aspect-ratio: 1 / 1; object-fit: contain; margin: 0 auto 0.4rem; display: block; }
.idle-dragon-thumb-unknown { display: flex; align-items: center; justify-content: center; font-size: 2.2rem; background: var(--paper-2); border-radius: 12px; opacity: 0.85; }
.idle-dragon-nest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.7rem; }
.idle-dragon-nest-card { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem; background: var(--paper); text-align: center; }
.idle-dragon-nest-card.is-ready { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; animation: bkmpDragonNestReadyPulse 1.6s ease-in-out infinite; }
@keyframes bkmpDragonNestReadyPulse { 0%, 100% { box-shadow: 0 0 0 1px var(--gold) inset; } 50% { box-shadow: 0 0 0 3px var(--gold) inset; } }
.idle-dragon-nest-empty { opacity: 0.6; }
.idle-dragon-nest-buy { border-style: dashed; opacity: 0.85; }
/* Begleiter-Leiste (05.08.2026, siehe bkmpDragonRenderCompanionSlotBarHtml
   in bkmp-breeding.js fuer die volle Herleitung) - drei feste Plaetze,
   Genre-ueblich (Idle Heroes/AFK-Arena-artige Spiele) als kompakte
   Portrait-Reihe ganz oben im Drachenzucht-Tab. Wiederverwendet dieselben
   Karten-Grundwerte wie .idle-dragon-nest-card (Rahmen/Radius/Padding/
   Hintergrund) fuer optische Konsistenz mit dem Rest des Tabs. */
/* Nachbesserung (05.08.2026): eigene Zeile mit der Begleiter-Leiste LINKS
   und dem neuen Stats-Block RECHTS (Nutzerwunsch: "Links oder rechts 1
   einzelnen Block wo nur die Stats stehen") - bricht auf schmalen Breiten
   sauber um (Stats-Block rutscht unter die Leiste), da beide Kinder ueber
   flex-wrap statt fixer Positionierung angeordnet sind. */
.idle-dragon-companion-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.idle-dragon-companion-bar { display: flex; gap: 1.1rem; flex-wrap: wrap; flex: 1 1 auto; }
/* Kampf-Gruppe (3 Plaetze) + Trainings-Platz (1, per data-picker-stage="teen"
   erkennbar) - eigene verschachtelte Flex-Gruppe statt margin-left auf dem
   4. Slot direkt, damit beim Umbruch auf schmalen Breiten kein unschoener
   einseitiger Einzug entsteht (margin wuerde beim Zeilenumbruch haengen
   bleiben, ein echter Gruppen-Gap nicht).
   Bug-Fix (Nutzer-Screenshot 05.08.2026: Trainings-Platz erschien MITTEN
   zwischen den 3 Kampf-Plaetzen statt sauber daneben/darunter, einer der 3
   Kampf-Plaetze riss dabei auf eine zweite Zeile ab): combat-group hatte
   selbst flex-wrap:wrap - bei knappem Platz liess das den Browser
   combat-group UND teen-wrap gleichzeitig in dieselbe Zeile quetschen,
   wodurch combat-group's EIGENE 3 Kinder unabhaengig von teen-wrap intern
   umbrachen (kein sauberer "als Ganzes umbrechen"-Effekt). Fix:
   flex-wrap:nowrap auf combat-group - seine 3 Kinder bleiben dadurch IMMER
   zusammen in einer Reihe (duerfen bei knappem Platz gemeinsam schrumpfen,
   siehe .idle-dragon-companion-slot's eigenes flex-shrink weiter unten,
   aber nie intern umbrechen). .idle-dragon-companion-bar (die aeussere
   Zeile) entscheidet dadurch sauber binaer: entweder passen beide Gruppen
   nebeneinander, oder teen-wrap rutscht ALS GANZES in die naechste Zeile -
   nie ein einzelner Kampf-Platz allein. */
/* Nachbesserung (05.08.2026, Nutzer-Screenshot des LIVE-Standes: "Wir haben
   sooviel platz. Nutze denn doch mal." - grosse leere Flaeche zwischen dem
   4. Block und dem Stats-Block rechts): combat-group/teen-wrap hatten
   bisher KEIN flex-grow (Standard 0) - .idle-dragon-companion-bar selbst
   ist zwar flex:1 1 auto und beansprucht dadurch den ganzen verfuegbaren
   Platz in der Zeile, gibt ihn aber nie an seine beiden Kind-Gruppen
   weiter, wenn die selbst nicht wachsen duerfen - die Karten blieben immer
   bei ihrer kleinen Basisbreite haengen, der Rest blieb einfach leer.
   Fix: flex-grow im Verhaeltnis 3:1 (combat-group haelt 3 Plaetze,
   teen-wrap nur 1) - beide Gruppen beanspruchen den Freiraum jetzt
   proportional zu ihrer Platzanzahl, ihre einzelnen Slots wachsen ueber
   das eigene flex-grow (siehe .idle-dragon-companion-slot) bis zum
   erhoehten max-width mit. Betrifft NUR das Wachsen bei UEBERSCHUSS-Platz -
   das flex-wrap:nowrap-Verhalten bei KNAPPEM Platz (siehe Fix direkt
   darueber) bleibt unangetastet, da flex-grow nur bei positivem Freiraum
   greift, niemals beim Schrumpfen. */
.idle-dragon-companion-combat-group { display: flex; gap: 0.6rem; flex-wrap: nowrap; flex-grow: 3; }
.idle-dragon-companion-teen-wrap { display: flex; flex-grow: 1; }
.idle-dragon-companion-slot {
  flex: 1 1 110px; max-width: 220px; min-height: 128px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem;
  background: var(--paper); text-align: center; position: relative;
}
.idle-dragon-companion-slot.is-filled { border-color: var(--dragon-rarity-color, var(--gold)); box-shadow: 0 0 0 1px var(--dragon-rarity-color, var(--gold)) inset; }
.idle-dragon-companion-slot.is-empty { border-style: dashed; opacity: 0.85; }
.idle-dragon-companion-slot.is-locked { border-style: dashed; opacity: 0.55; }
.idle-dragon-companion-slot-icon { font-size: 1.9rem; margin-bottom: 0.25rem; }
.idle-dragon-companion-slot-label { font-size: 0.78rem; color: var(--muted); }
.idle-dragon-companion-slot .idle-dragon-thumb { max-width: 78px; margin-bottom: 0.3rem; }
.idle-dragon-companion-slot-name { font-size: 0.88rem; font-weight: 600; line-height: 1.2; }
.idle-dragon-companion-slot-rank { font-size: 0.78rem; color: var(--gold); margin-top: 0.15rem; }
/* Anklickbare Plaetze (05.08.2026, oeffnen bkmpDragonOpenCompanionPicker) -
   dezente Hover-Anhebung, damit die Klickbarkeit spuerbar ist ohne die
   ruhige Kartenoptik zu stoeren. Gesperrte Plaetze bekommen bewusst NICHT
   diese Klasse (siehe bkmp-breeding.js) - bleiben rein informativ. */
.idle-dragon-companion-slot-pickable { cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; }
.idle-dragon-companion-slot-pickable:hover { transform: translateY(-2px); border-color: var(--dragon-rarity-color, var(--gold)); }
/* !important auf Radius/Padding/Mindesthoehe: gleicher Grund wie bei
   .idle-dragon-mini-delete-btn weiter unten - das generische
   "html.bkmp-app-mode .idle-dorf-panel button"-Reset (14px Radius, grosses
   Innenpolster, 46px Mindesthoehe) hat sonst hoehere Spezifitaet. */
.idle-dragon-companion-slot-remove {
  position: absolute; top: 0.3rem; right: 0.4rem; width: 20px; height: 20px; line-height: 18px;
  min-height: 0 !important; padding: 0 !important; border-radius: 50% !important;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--muted);
  font-size: 0.9rem; cursor: pointer;
}
.idle-dragon-companion-slot-remove:hover { color: var(--danger, #e05252); border-color: var(--danger, #e05252); }
/* Rang-Abzeichen auf der Drachenlager-Karte selbst (im Grid weiter unten) -
   zeigt an, MIT WELCHEM Gewicht (100%/50%/25%) ein bereits ausgeruesteter
   erwachsener Begleiter gerade tatsaechlich beitraegt. */
.idle-dragon-companion-rank-badge { font-size: 0.72rem; color: var(--gold); margin: 0.15rem 0; }
.idle-dragon-companion-rank-badge.is-inactive { color: var(--muted); }
/* Stats-Block (05.08.2026, Nutzerwunsch nach einem eigenen "nur Stats"-
   Block neben der Begleiter-Leiste, Vorbild Tactics-RPG-Stat-Panels: Icon +
   Bezeichnung + Wert je Zeile) - schmale Karte, feste Breite auf breiten
   Bildschirmen, volle Breite sobald sie (per .idle-dragon-companion-row
   flex-wrap) unter die Leiste rutscht. */
.idle-dragon-companion-stats-block {
  flex: 0 1 200px; min-width: 168px;
  border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem 0.9rem;
  background: var(--paper);
}
.idle-dragon-companion-stats-title { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.5rem; }
.idle-dragon-companion-stat-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.85rem; }
.idle-dragon-companion-stat-row + .idle-dragon-companion-stat-row { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.idle-dragon-companion-stat-icon { font-size: 1rem; flex-shrink: 0; }
.idle-dragon-companion-stat-label { flex: 1; color: var(--muted); }
.idle-dragon-companion-stat-value { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
/* Vorraete-Hinweis hinter ein "i" versteckt (05.08.2026, Nutzerwunsch: "Diese
   Anleitung kann auch ganz nach unten. Oder irgendwo hinter einen 'I'
   versteckt als Hilfe Anleitung") - vorher permanent sichtbarer Hinweistext
   ("Gebaeude-Upgrades findest du im Tab...") ist jetzt ein Tap-/Hover-
   Tooltip, exakt dasselbe Muster wie .idle-prestige-paragon-info. */
.idle-dragon-vorraete-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; vertical-align: middle;
  border: none; background: transparent; color: var(--muted);
  font-size: 0.9rem; line-height: 1; cursor: help; padding: 0; opacity: 0.75;
}
.idle-dragon-vorraete-info:hover, .idle-dragon-vorraete-info:focus-visible { opacity: 1; }
/* Auswahlfenster (05.08.2026) - wiederverwendet .joke-overlay/.joke-card
   (bkmpUiModalHtml) mit einer breiteren, linksbuendigen Kartenvariante statt
   der schmalen zentrierten Standard-Bestaetigungskarte. Die eigentliche
   Liste bekommt eine eigene Hoehenbegrenzung + eigenes Scrollen - das
   Fenster selbst (und die Seite dahinter) muss dafuer nie scrollen. */
.idle-dragon-companion-picker-card { max-width: 560px; width: 92vw; text-align: left; }
.idle-dragon-companion-picker-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: min(52vh, 420px); overflow-y: auto; margin-top: 0.4rem; }
.idle-dragon-companion-picker-row {
  display: flex; align-items: center; gap: 0.7rem;
  border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem 0.7rem;
  background: var(--paper); cursor: pointer; transition: border-color 0.15s ease;
}
.idle-dragon-companion-picker-row:hover { border-color: var(--dragon-rarity-color, var(--gold)); }
.idle-dragon-companion-picker-row.is-equipped { border-color: var(--dragon-rarity-color, var(--gold)); box-shadow: 0 0 0 1px var(--dragon-rarity-color, var(--gold)) inset; }
.idle-dragon-companion-picker-row .idle-dragon-thumb { max-width: 44px; margin: 0; flex-shrink: 0; }
.idle-dragon-companion-picker-info { flex: 1; min-width: 0; }
.idle-dragon-companion-picker-name { font-size: 0.85rem; font-weight: 600; }
.idle-dragon-companion-picker-stats { font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; }
.idle-dragon-companion-picker-status { font-size: 0.7rem; display: block; margin-top: 0.15rem; }
.idle-dragon-companion-picker-status.is-active { color: var(--gold); }
.idle-dragon-companion-picker-status.is-inactive { color: var(--muted); }
.idle-dragon-baby-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; padding: 0.9rem; background: var(--paper); text-align: center; position: relative; }
/* Bug-Fix 18.07. (Spieler-Screenshot: "Füttern"-Knöpfe außerhalb der
   Karte): dieselbe Ursache wie bei .idle-dragon-actions-row oben - das
   globale 44px-Touch-Target-Mindestmaß (html.bkmp-app-mode .idle-dragon-
   feed-btn, siehe weiter unten) plus groesseres Padding/Schriftgroesse
   liessen "Füttern (+10)" und "Füttern (+100)" nebeneinander nicht mehr
   in eine schmale .idle-skin-grid-Karte (ab 180px) passen. */
.idle-dragon-feed-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.idle-dragon-feed-row .idle-skin-action { margin-top: 0; flex: 1 1 auto; min-width: 100px; }
.idle-dragon-fav-badge { position: absolute; top: 0.5rem; right: 0.6rem; color: var(--gold); font-size: 1.1rem; }
/* Ei/Baby freilassen (Spieler-Wunsch 02.08.2026, "kleiner suesser
   Muelleimer oben rechts") - bewusst NICHT dieselbe Klasse wie
   .idle-dragon-release-btn (dessen html.bkmp-app-mode-Regel erzwingt dort
   44x44px fuer die Zeilen-Optik, siehe weiter unten) - eigene, kleinere
   runde Ecken-Badge-Optik, per eigenem Klick-Handler verdrahtet
   (bkmpDragonReleaseEgg / bkmpDragonConfirmAndRelease). */
/* !important auf Radius/Padding/Mindesthoehe: das generische
   "html.bkmp-app-mode .idle-dorf-panel button"-Reset (14px Radius, grosses
   Innenpolster, 46px Mindesthoehe - fuer normale Text-Buttons gedacht, siehe
   Kommentar dort) hat sonst hoehere Spezifitaet und macht aus der runden
   Ecken-Badge sonst wieder ein eckiges Vollformat-Rechteck. */
.idle-dragon-mini-delete-btn {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  width: 24px;
  height: 24px;
  min-height: 0 !important;
  padding: 0 !important;
  border: none;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--paper-2) 90%, transparent);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.idle-dragon-mini-delete-btn:hover { opacity: 1; background: color-mix(in srgb, var(--paper-2) 55%, #ef4444); color: #ef4444; }
.idle-dragon-stats { font-size: 0.75rem; margin-bottom: 0.5rem; }
.idle-dragon-substats { color: var(--muted); font-size: 0.68rem; margin-top: 0.3rem; display: flex; flex-direction: column; gap: 0.15rem; }
/* Bug-Fix 18.07. (Spieler-Screenshot: Favoriten-/Löschen-Knopf liegt
   außerhalb der Drachen-Karte): .idle-skin-grid erlaubt Karten ab 180px
   Breite (minmax(180px,1fr)) - "Als Begleiter" + die beiden Icon-Knöpfe
   mit dem seit Phase 5 global aktiven 44px-Touch-Target-Minimum
   (html.bkmp-app-mode .idle-dragon-fav-btn/-release-btn, siehe weiter
   unten in dieser Datei) passten dadurch bei schmalen Karten nicht mehr
   in eine Zeile und liefen ueber den Kartenrand hinaus. flex-wrap laesst
   die Icon-Knoepfe bei Bedarf in eine zweite Zeile umbrechen, statt das
   44px-Minimum (wichtig fuer Touch-Bedienung) wieder zu verkleinern. */
/* Bug-Fix 01.08.2026 (Spieler-Screenshot: "Als Begleiter"/Stern/Papierkorb
   sitzen "kreuz und quer" statt auf einer Linie): .idle-skin-card ist
   bereits eine Flex-Spalte, .idle-skin-grid streckt alle Karten einer Reihe
   bereits auf gleiche Hoehe (align-items:stretch) - nur die Aktionszeile
   selbst wanderte bisher NICHT ans untere Kartenende, sondern blieb direkt
   unter dem letzten Inhalt (Substats/Aufsteigen-Knopf), dessen Hoehe von
   Karte zu Karte unterschiedlich ist (mehr/weniger Substats, Aufsteigen-
   Knopf nur bei manchen Drachen). margin-top:auto schluckt in einer
   Flex-Spalte den gesamten uebrigen Platz VOR diesem Element - die Zeile
   landet dadurch bei jeder Karte exakt auf derselben Hoehe am unteren Rand. */
.idle-dragon-actions-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.5rem; align-items: center; }
.idle-dragon-actions-row .idle-skin-action { margin-top: 0; flex: 1 1 auto; min-width: 88px; }
.idle-dragon-fav-btn, .idle-dragon-release-btn { border: 1px solid var(--line); background: var(--paper-2); border-radius: 8px; padding: 0.3rem 0.5rem; cursor: pointer; font-size: 0.9rem; }
.idle-dragon-fav-btn:hover, .idle-dragon-release-btn:hover { border-color: var(--gold); }
.idle-dragon-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.8rem; }
.idle-dragon-filter-fav { display: flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; color: var(--muted); cursor: pointer; }
/* Rarity-Schnellfilter (05.08.2026, Nutzerwunsch: "diese Sortierung
   entfernen. Einfach nur Buttons mit Legendäre/Epische/Seltene... neben
   Favoriten") - ersetzt die vorherigen 3 <select>-Dropdowns (Seltenheit/
   Stufe/Sortierung), gleiches Chip-Muster wie .fbb-filter-chip. Klick auf
   den bereits aktiven Knopf setzt wieder auf "alle" zurueck (kein extra
   "Alle"-Knopf noetig, siehe JS). !important auf Radius/Padding/Mindesthoehe:
   gleicher Grund wie bei .idle-dragon-mini-delete-btn weiter unten - das
   generische "html.bkmp-app-mode .idle-dorf-panel button"-Reset (14px
   Radius, grosses Innenpolster, 46px Mindesthoehe) hat sonst hoehere
   Spezifitaet und wuerde aus der schlanken Pille wieder ein grosses
   eckiges Rechteck machen. */
.idle-dragon-rarity-filter-btn {
  font-size: 0.78rem !important; font-weight: 600;
  padding: 0.38rem 0.85rem !important;
  border-radius: 999px !important;
  min-height: 0 !important;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.idle-dragon-rarity-filter-btn:hover { color: var(--ink); }
.idle-dragon-rarity-filter-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.idle-dragon-rarity-filter-btn.active {
  border-color: color-mix(in srgb, var(--rarity-filter-color, var(--gold)) 55%, var(--line));
  background: color-mix(in srgb, var(--rarity-filter-color, var(--gold)) 16%, var(--paper));
  color: var(--rarity-filter-color, var(--gold));
}
.idle-dragon-lager-card { cursor: pointer; }
.idle-dragon-detail-card { max-width: 360px; text-align: center; }
.idle-dragon-detail-img { width: 100%; max-width: 160px; margin: 0 auto 0.6rem; display: block; }

/* ---- Drachen-Lexikon (Spieler-Wunsch 17.07.) ----
   Raster ueber ALLE bekannten Arten (nicht nur besessene), silhouettiert
   solange nicht entdeckt, in voller Farbe sobald doch (siehe
   bkmpDragonRenderLexikonSection/bkmpDragonReconcileDiscovered). Der
   Silhouetten-Look kommt rein per CSS-Filter (brightness(0) macht jedes
   nicht-transparente Pixel schwarz) - funktioniert nur sauber, weil die
   Drachen-Sprites bereits transparente Hintergruende haben (siehe
   Zucht-SQL-Kommentare "Hintergrund per Flood-Fill transparent gemacht"). */
.idle-dragon-dex-grid { }
.idle-dragon-dex-card { cursor: pointer; transition: transform 0.15s ease; }
.idle-dragon-dex-card:hover { transform: translateY(-2px); }
.idle-dragon-dex-card:active { transform: translateY(0); }
.idle-dragon-dex-card .idle-dragon-thumb { transition: filter 0.3s ease; }
.idle-dragon-dex-card.is-locked { opacity: 0.82; }
.idle-dragon-dex-card.is-locked .idle-dragon-thumb { filter: brightness(0) opacity(0.8); }
.idle-dragon-dex-card.is-locked .idle-skin-name { color: var(--muted); }
.idle-dragon-dex-card.is-discovered { border-color: color-mix(in srgb, var(--dragon-rarity-color, var(--gold)) 55%, var(--line)); }

/* ---- Lexikon-Detailansicht: 4-Seiten-Pager (Ei/Baby/Jugendlich/Erwachsen) ---- */
.idle-dragon-dex-detail-card { max-width: 360px; text-align: center; }
.idle-dragon-dex-pager { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.idle-dragon-dex-img { width: 100%; max-width: 160px; margin: 0; display: block; transition: filter 0.3s ease; }
.idle-dragon-dex-img-locked { filter: brightness(0) opacity(0.85); }
.idle-dragon-dex-nav {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.idle-dragon-dex-nav:hover:not(:disabled) { border-color: var(--gold); }
.idle-dragon-dex-nav:disabled { opacity: 0.3; cursor: default; }
.idle-dragon-dex-dots { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.idle-dragon-dex-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.idle-dragon-dex-dot.is-active { background: var(--gold); transform: scale(1.25); }
.idle-dragon-dex-stage-label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }

/* ---- Prestige ---- */
.idle-prestige-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem;
  padding: 0.8rem 1rem; margin-bottom: 0.9rem; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, #a78bfa 18%, var(--paper)), var(--paper));
  border: 1px solid color-mix(in srgb, #a78bfa 35%, var(--line));
}
.idle-prestige-level { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; color: #c4b5fd; }
.idle-prestige-points { font-size: 0.85rem; color: var(--muted); }
.idle-prestige-bonus-note { flex-basis: 100%; font-size: 0.78rem; color: #a78bfa; font-weight: 600; }
.idle-prestige-progress-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 1rem;
  background: var(--paper); margin-bottom: 1rem; text-align: center;
}
.idle-prestige-progress-label { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.5rem; }
.idle-prestige-progress-hint { display: block; font-size: 0.72rem; opacity: 0.75; margin-top: 0.15rem; }
.idle-prestige-btn {
  margin-top: 0.8rem; background: linear-gradient(135deg, #a78bfa, #7c3aed);
  border: none; font-weight: 700; box-shadow: 0 0 18px rgba(167, 139, 250, 0.4);
}
.idle-prestige-hint { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--muted); }
/* .idle-prestige-buy ist mit .btn-ja kombiniert (fuer Pill-Form/Padding),
   dessen Hintergrund-/Textfarbe aber per !important erzwungen wird - ein
   direktes background/color hier auf :disabled wuerde also nie sichtbar
   werden. Deshalb wie beim (funktionierenden) .idle-upgrade-buy:disabled
   ueber opacity abdunkeln statt Farben zu ueberschreiben. */
.idle-prestige-buy { background: linear-gradient(135deg, #a78bfa, #7c3aed); border: none; color: #fff; }
.idle-prestige-buy:disabled { opacity: 0.45; cursor: not-allowed; }
/* Bug-Fix (Nutzer-Screenshot 19.07.): "Maximal"-Buttons standen je nach
   Laenge des Beschreibungstexts auf unterschiedlicher Hoehe, weil
   .idle-upgrade-card zwar schon Flex-Spalte ist (macht alle Karten pro
   Grid-Zeile automatisch gleich hoch), aber nur .idle-upgrade-buy (die
   normale Upgrades-Tab-Variante) bereits margin-top:auto hatte, um sich
   selbst an den unteren Kartenrand zu schieben - .idle-prestige-buy (der
   Bonusbaum-Zwilling mit eigener Lila-Farbe) hatte dieselbe Regel bisher
   nicht mitbekommen. */
.idle-prestige-buy { width: 100%; margin-top: auto; }

/* ---- Section C (18.07.): Prestige-Panel - neue Uebersichts-Abschnitte
   (Du erhaeltst / Wird zurueckgesetzt / Bleibt erhalten / Naechster
   Durchlauf). Wiederverwendet die bereits vorhandene .idle-upgrade-
   section-title (Phase-2-Klasse, bisher nirgends im Prestige-Panel
   genutzt) statt eine neue Ueberschriften-Klasse zu erfinden. ---- */
.idle-prestige-section { border: 1px solid var(--line); border-radius: var(--mood-radius-panel, 14px); padding: 0.9rem 1rem; background: var(--paper); margin-bottom: 0.9rem; }
.idle-prestige-section-gain { border-color: color-mix(in srgb, #a78bfa 40%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, #a78bfa 12%, var(--paper)), var(--paper)); }
.idle-prestige-gain-highlight { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.15rem; color: #c4b5fd; }
.idle-prestige-gain-highlight .idle-prestige-gain-arrow { display: block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.82rem; color: var(--gold); margin-top: 0.25rem; }
.idle-prestige-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 0.9rem; }
.idle-prestige-section-reset { border-color: color-mix(in srgb, #f87171 30%, var(--line)); }
.idle-prestige-section-keep { border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); }
.idle-upgrade-section-title-reset { color: #f87171; }
.idle-upgrade-section-title-keep { color: var(--gold); }
.idle-prestige-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.idle-prestige-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.idle-prestige-list-icon { flex: none; font-size: 0.9rem; line-height: 1.3; }
.idle-prestige-next-note { font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin: 0; }
@media (max-width: 640px) {
  .idle-prestige-columns { grid-template-columns: 1fr; }
}

/* Progression-Rebalance Phase 5-8/14 (26.07.2026): Zweig-Tabs + Meilenstein-
   Zusammenfassung + Paragon-Reihe im erweiterten Prestige-Baum. */
.idle-prestige-section-milestones { border-color: color-mix(in srgb, #a78bfa 30%, var(--line)); }
.idle-prestige-milestone-summary { font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; }
.idle-prestige-branch-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0.8rem; }
.idle-prestige-branch-tab { padding: 0.4rem 0.7rem; font-size: 0.78rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--muted); cursor: pointer; }
.idle-prestige-branch-tab.active { border-color: var(--gold); color: var(--gold); font-weight: 600; }
.idle-prestige-branch-tab.is-locked { opacity: 0.55; cursor: not-allowed; }
.idle-upgrade-card.idle-prestige-needs-sql { border-color: color-mix(in srgb, #f59e0b 35%, var(--line)); }
.idle-prestige-paragon-row { display: flex; align-items: center; gap: 0.35rem; position: relative; font-size: 0.74rem; color: #c4b5fd; margin: -0.2rem 0 0.1rem; }
.idle-prestige-buy-paragon { width: 100%; padding: 0.35rem 0.6rem; font-size: 0.74rem; }
.idle-prestige-buy-paragon:disabled { opacity: 0.5; cursor: not-allowed; }
/* Paragon-Info-Tooltip (28.07.2026, Spieler-Verwirrung "was ist Paragon,
   wo bekomme ich das her") - kleiner "?"-Ausloeser neben der Paragon-Zeile,
   nutzt bkmpUiTooltipHtml()/-WireTooltipTrigger() (Phase 3, bisher
   ungenutzt). position:relative auf der Zeile oben verankert die
   Tooltip-Bubble (position:absolute, siehe .bkmp-ui-tooltip) korrekt. */
.idle-prestige-paragon-info {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid color-mix(in srgb, #c4b5fd 55%, var(--line));
  background: color-mix(in srgb, #c4b5fd 14%, transparent);
  color: #c4b5fd; font-size: 0.62rem; font-weight: 700; line-height: 1;
  cursor: help; padding: 0;
}
.idle-prestige-paragon-info:hover, .idle-prestige-paragon-info:focus-visible { background: color-mix(in srgb, #c4b5fd 28%, transparent); }
.idle-prestige-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 3px; margin-left: 0.3rem; border-radius: 999px; background: #f87171; color: #1a0a0a; font-size: 0.62rem; font-weight: 800; vertical-align: middle; }
.idle-prestige-allocate-btn { margin: 0.4rem 0 0.8rem; }
/* Spieler-Idee Kaledoss (28.07.2026): Zweig-Reihenfolge fuer "Automatische
   Verteilung" - kompakte Liste mit Auf/Ab-Knoepfen statt Drag&Drop (robuster,
   keine zusaetzliche Bibliothek/Accessibility-Sonderbehandlung noetig). */
.idle-prestige-priority-list { margin: 0.6rem 0; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.idle-prestige-priority-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-bottom: 0.5rem; }
.idle-prestige-priority-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.85rem; }
.idle-prestige-priority-rank { color: var(--muted); width: 1.3rem; flex-shrink: 0; }
.idle-prestige-priority-name { flex: 1; }
.idle-prestige-priority-btn { width: 1.8rem; height: 1.8rem; padding: 0; border-radius: 8px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); cursor: pointer; font-size: 0.7rem; flex-shrink: 0; }
.idle-prestige-priority-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.idle-prestige-priority-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.idle-prestige-section-ascension { border-color: color-mix(in srgb, #facc15 35%, var(--line)); }
.idle-ascension-btn { width: 100%; margin-top: 0.4rem; }

/* Spieler-Beschwerde (30.07.2026): der Punkte-Baum stand hinter acht reinen
   Info-Bloecken versteckt ("30 Meter scrollen"). Die vier Erklaer-Bloecke
   (Du erhaeltst/Reset-Keep/Naechster Durchlauf/Meilensteine) leben jetzt
   standardmaessig eingeklappt in diesem Akkordeon UNTER dem Baum, statt
   permanent davor zu stehen - siehe bkmpPrestigeRenderInfoAccordionHtml(). */
.idle-prestige-info-accordion { padding: 0; overflow: hidden; }
.idle-prestige-info-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0.9rem 1rem; border: none; background: transparent; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.idle-prestige-info-toggle:hover, .idle-prestige-info-toggle:focus-visible { color: var(--gold); }
.idle-prestige-info-toggle-chevron { flex-shrink: 0; opacity: 0.65; font-size: 0.75em; }
.idle-prestige-info-body { padding: 0 1rem 1rem; }
.idle-prestige-info-body .idle-prestige-section:last-child { margin-bottom: 0; }

/* ---- Section C (18.07.): Prestige-Bestaetigungsdialog (2-stufig, siehe
   #idlePrestigeConfirmOverlay in index.html - ein Overlay, zwei per
   [data-step] umgeschaltete .idle-prestige-confirm-step-Bloecke). ---- */
.idle-prestige-confirm-card {
  max-width: 620px; text-align: left; border-radius: 22px;
  background: linear-gradient(165deg, color-mix(in srgb, #a78bfa 10%, var(--paper-2)), var(--paper-2) 60%);
  border: 1px solid color-mix(in srgb, #a78bfa 35%, var(--line));
}
.idle-prestige-confirm-card h3 { font-family: 'Fraunces', serif; font-size: 1.2rem; margin-bottom: 0.7rem; text-align: center; color: #c4b5fd; }
.idle-prestige-confirm-step { display: none; }
.idle-prestige-confirm-overlay[data-step="preview"] .idle-prestige-confirm-step-preview { display: block; }
.idle-prestige-confirm-overlay[data-step="final"] .idle-prestige-confirm-step-final { display: block; }
.idle-prestige-confirm-gain {
  text-align: center; font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.05rem;
  color: var(--gold); margin-bottom: 1rem; padding: 0.6rem; border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.idle-prestige-confirm-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.5rem; }
.idle-prestige-confirm-col-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.idle-prestige-confirm-col-title-reset { color: #f87171; }
.idle-prestige-confirm-col-title-keep { color: var(--gold); }
.idle-prestige-confirm-columns .idle-prestige-list { max-height: 220px; overflow-y: auto; padding-right: 0.3rem; }
.idle-prestige-confirm-next-btn, .idle-prestige-confirm-final-btn { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border: none !important; color: #fff !important; box-shadow: 0 0 18px rgba(167, 139, 250, 0.4); }
.idle-prestige-confirm-final-btn:disabled { opacity: 0.6; cursor: progress; box-shadow: none; }
.idle-prestige-confirm-final-warning { font-size: 0.85rem; color: var(--muted); line-height: 1.5; text-align: center; margin-bottom: 1rem; border: 1px solid color-mix(in srgb, #f87171 35%, var(--line)); border-radius: 12px; padding: 0.7rem 0.9rem; background: color-mix(in srgb, #f87171 8%, transparent); }
.idle-prestige-confirm-final-gain { text-align: center; font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.1rem; color: #c4b5fd; line-height: 1.5; margin-bottom: 1rem; }
.idle-prestige-confirm-error { display: none; font-size: 0.82rem; color: #f87171; line-height: 1.5; text-align: center; margin: 0 0 0.8rem; }
.idle-prestige-confirm-error.visible { display: block; }
@media (max-width: 640px) {
  .idle-prestige-confirm-columns { grid-template-columns: 1fr; }
  .idle-prestige-confirm-columns .idle-prestige-list { max-height: 160px; }
}
@media (max-width: 480px) {
  .idle-prestige-confirm-card .joke-buttons button,
  .idle-prestige-ceremony-continue-btn {
    min-height: 44px;
  }
}

/* ---- Section C (18.07.): Prestige-Zeremonie (siehe
   #idlePrestigeCeremonyOverlay in index.html). Nur transform/opacity-
   Animationen, jede laeuft genau EINMAL pro Zeremonie (keine infinite-
   Loops, kein dauerhaft laufender Effekt) - Phasen werden per
   Klassenwechsel aus bkmpPrestigeShowCeremony()/-CloseCeremony()
   gesteuert (idledorf.js). --mood-glow-strength normiert wie ueberall im
   Redesign gegen die .zone-site-Basis 0.6 (siehe design-tokens.css). ---- */
.idle-prestige-ceremony-overlay { background: rgba(5, 4, 8, 0.88); z-index: 60; }
.idle-prestige-ceremony { position: relative; width: min(420px, 88vw); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.idle-prestige-ceremony-ring {
  position: absolute; inset: 8%; border-radius: 50%;
  background: conic-gradient(from 0deg, #a78bfa, var(--gold), #7c3aed, var(--gold), #a78bfa);
  opacity: 0; transform: scale(0.7) rotate(-90deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.idle-prestige-ceremony-overlay.phase-gather .idle-prestige-ceremony-ring,
.idle-prestige-ceremony-overlay.phase-dissolve .idle-prestige-ceremony-ring,
.idle-prestige-ceremony-overlay.phase-result .idle-prestige-ceremony-ring {
  opacity: calc(0.8 * var(--mood-glow-strength, 0.6) / 0.6); transform: scale(1) rotate(90deg);
}
.idle-prestige-ceremony-seal {
  position: absolute; width: 42%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--gold) 55%, #1a1024), #120b1c 72%);
  border: 2px solid color-mix(in srgb, var(--gold) 70%, transparent);
  opacity: 0; transform: scale(0.55); box-shadow: 0 0 0 rgba(167, 139, 250, 0);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.9s ease;
}
.idle-prestige-ceremony-overlay.phase-gather .idle-prestige-ceremony-seal,
.idle-prestige-ceremony-overlay.phase-dissolve .idle-prestige-ceremony-seal,
.idle-prestige-ceremony-overlay.phase-result .idle-prestige-ceremony-seal {
  opacity: 1; transform: scale(1);
  box-shadow: 0 0 calc(40px * var(--mood-glow-strength, 0.6) / 0.6) rgba(167, 139, 250, 0.55);
}
.idle-prestige-ceremony-overlay.phase-dissolve .idle-prestige-ceremony-seal { transform: scale(1.08); }
.idle-prestige-ceremony-sparks { position: absolute; inset: 0; pointer-events: none; }
.idle-prestige-ceremony-sparks > span {
  position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%;
  opacity: 0; animation: bkmpPrestigeSparkOut 0.9s ease-out forwards;
}
@keyframes bkmpPrestigeSparkOut {
  0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) scale(0.4); }
}
.idle-prestige-ceremony-result {
  position: relative; text-align: center; padding: 1.4rem 1.6rem; border-radius: 20px;
  opacity: 0; transform: translateY(10px) scale(0.96);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.idle-prestige-ceremony-overlay.phase-result .idle-prestige-ceremony-result { opacity: 1; transform: translateY(0) scale(1); }
.idle-prestige-ceremony-level { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.3rem; }
.idle-prestige-ceremony-title { font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 0.6rem; }
.idle-prestige-ceremony-bonus { font-size: 0.95rem; line-height: 1.6; color: #e9e4f7; margin-bottom: 1.1rem; }
.idle-prestige-ceremony-bonus-pct { display: block; color: var(--gold); font-weight: 700; margin-top: 0.2rem; }
.idle-prestige-ceremony-continue-btn { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border: none !important; color: #fff !important; }
.idle-prestige-ceremony-overlay.phase-result .idle-prestige-ceremony-continue-btn { opacity: 1; pointer-events: auto; }

/* Performance-Modus Reduziert/Aus (siehe bkmpFxGetMode, Section B): kein
   rotierender Ring, keine Funken - nur ein einfacher Opacity-Crossfade
   direkt in die Ergebnis-Phase. Wird zusaetzlich JS-seitig gesteuert
   (bkmpPrestigeShowCeremony ueberspringt die Gather-/Dissolve-Phasen
   komplett bei "aus"), diese Regeln sind das CSS-seitige Sicherheitsnetz. */
.idle-prestige-ceremony-overlay.is-simplified .idle-prestige-ceremony-ring,
.idle-prestige-ceremony-overlay.is-simplified .idle-prestige-ceremony-sparks,
.idle-prestige-ceremony-overlay.is-instant .idle-prestige-ceremony-ring,
.idle-prestige-ceremony-overlay.is-instant .idle-prestige-ceremony-sparks {
  display: none;
}
.idle-prestige-ceremony-overlay.is-instant .idle-prestige-ceremony-seal,
.idle-prestige-ceremony-overlay.is-instant .idle-prestige-ceremony-result {
  transition-duration: 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  .idle-prestige-ceremony-ring, .idle-prestige-ceremony-sparks { display: none !important; }
  .idle-prestige-ceremony-seal, .idle-prestige-ceremony-result, .idle-prestige-ceremony-ring { transition-duration: 0.15s !important; }
}

/* ---- Dungeon-Modus ---- */
.idle-dungeon-intro {
  border: 1px solid color-mix(in srgb, #f97316 35%, var(--line));
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(135deg, color-mix(in srgb, #f97316 14%, var(--paper)), var(--paper));
  text-align: center;
}
.idle-dungeon-intro h4 { font-family: 'Fraunces', serif; font-size: 1.15rem; margin-bottom: 0.6rem; color: #fb923c; }
.idle-dungeon-diff-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.idle-dungeon-diff-btn {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.idle-dungeon-diff-btn:hover:not(:disabled) { border-color: color-mix(in srgb, #f97316 45%, var(--line)); }
.idle-dungeon-diff-btn.active {
  background: color-mix(in srgb, #f97316 26%, var(--paper-2));
  border-color: #f97316;
  color: #fb923c;
}
.idle-dungeon-diff-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.idle-dungeon-intro p { font-size: 0.88rem; color: var(--muted); line-height: 1.5; margin-bottom: 0.6rem; }
.idle-dungeon-best { font-weight: 700; color: var(--ink) !important; }
/* .btn-ja erzwingt Hintergrund/Textfarbe per !important (siehe Kommentar
   bei .idle-prestige-buy oben) - ein direkter background hier waere
   unerreichbarer toter Code, deshalb nur der margin/disabled-Zusatz. */
.idle-dungeon-start-btn { margin-top: 0.5rem; }
/* Auto-Lauf (Spieler-Wunsch 15.07.: "10x 20x 30x Auto Run") */
.idle-dungeon-auto-row { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed color-mix(in srgb, #f97316 30%, var(--line)); }
.idle-dungeon-auto-label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.5rem; }
.idle-dungeon-auto-btn { min-width: 3.6rem; }

/* Dungeon-System 2.0 (Spieler-Vorgabe 17.07.): 7 Karten statt einem
   einzigen Panel - Ei-/Runen-Dungeon bekommen eine dezent hervorgehobene
   Optik (Spieler-Vorgabe: "sollte auch optisch etwas besonders/magisch
   wirken"), alle anderen teilen sich den bestehenden .idle-dungeon-diff-*/
   .idle-dungeon-auto-*-Look von oben. */
.idle-dungeon-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
  margin-top: 1.1rem;
}
.idle-dungeon-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  background: var(--paper-2);
}
.idle-dungeon-card-head { display: flex; align-items: center; gap: 0.65rem; }
.idle-dungeon-card-icon { font-size: 1.9rem; line-height: 1; }
.idle-dungeon-card-head strong { display: block; font-size: 1rem; color: var(--ink); }
.idle-dungeon-card-head small { display: block; font-size: 0.78rem; color: var(--muted); }
.idle-dungeon-card-highlight {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  text-align: center;
  background: color-mix(in srgb, #facc15 22%, var(--paper));
  color: #b45309;
}
.idle-dungeon-card-keys { font-size: 0.82rem; color: var(--ink); line-height: 1.55; }
.idle-dungeon-card-bonus { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.idle-dungeon-card-bonus.available { color: #16a34a; }
.idle-dungeon-card-meta { font-size: 0.76rem; color: var(--muted); margin: 0; }
.idle-dungeon-card .idle-dungeon-diff-row { justify-content: flex-start; margin-bottom: 0; }
.idle-dungeon-card .idle-dungeon-auto-row { margin-top: 0.3rem; padding-top: 0.6rem; }
.idle-dungeon-card-special { border-color: color-mix(in srgb, #facc15 45%, var(--line)); }
.idle-dungeon-card-egg {
  background: linear-gradient(135deg, color-mix(in srgb, #fb923c 14%, var(--paper-2)), var(--paper-2));
}
.idle-dungeon-card-rune {
  background: linear-gradient(135deg, color-mix(in srgb, #a78bfa 18%, var(--paper-2)), var(--paper-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #a78bfa 35%, transparent);
}

/* PvP-Arena (siehe supabase-idle-arena.sql) - Gegner-Reihen im gleichen
   Karten-Look wie der Rest des Idle-Dorfs. */
.idle-arena-opponent-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.idle-arena-opponent-name { font-weight: 700; color: var(--ink); flex: 1 1 auto; min-width: 100px; }
/* Clan-Bestenliste (Spieler-Idee Kaledoss, 28.07.2026): hebt die eigene
   Gilde in der Liste optisch hervor, wiederverwendet .idle-arena-opponent-*
   fuer Zeilen-Layout/Typografie. */
.idle-clan-leaderboard-mine { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--paper-2)); }
.idle-arena-opponent-rating { font-weight: 700; color: #fb923c; }
.idle-arena-opponent-record { font-size: 0.8rem; color: var(--muted); }
/* Geschaetzte Gewinnchance (Spieler-Wunsch 21.07., Lilith57 im Minecraft-
   Chat: "ich mag nicht so gern raetselraten") - Farbe ist nur ein
   zusaetzlicher, schnell erfassbarer Hinweis, der Prozentwert selbst
   traegt die eigentliche Information (nie ausschliesslich ueber Farbe). */
.idle-arena-opponent-chance { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.idle-arena-chance-good { color: #4ade80; }
.idle-arena-chance-even { color: #fbbf24; }
.idle-arena-chance-bad { color: #f87171; }
.idle-arena-attack-btn { margin-left: auto; font-size: 0.82rem; padding: 0.35rem 0.8rem; }
.idle-arena-history .idle-dungeon-best { font-weight: 500; font-size: 0.85rem; margin-bottom: 0.3rem; }

/* Gilden: Beitrittsanfragen (siehe supabase-guild-join-requests.sql) -
   .idle-guild-browse-members braucht flex-basis:100%, weil die Karte
   selbst display:flex ist (sonst wuerde die Mitgliederliste einfach als
   weiteres Flex-Item in dieselbe Zeile gequetscht statt darunter
   umzubrechen). */
.idle-guild-request-pending { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.idle-guild-browse-members { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.idle-guild-browse-member-chip {
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--muted);
}

/* Gilden (siehe supabase-idle-guilds.sql) - Gruenden-/Beitrags-Formular. */
.idle-guild-create-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.6rem; }
.idle-guild-create-row input {
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 0.85rem;
  flex: 1 1 160px;
  min-width: 0;
}
.idle-guild-create-row button { flex: 0 0 auto; }
.idle-guild-chat-log {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  margin-bottom: 0.6rem;
}
.idle-guild-chat-msg { font-size: 0.85rem; margin: 0; color: var(--ink); }
.idle-guild-chat-time { float: right; font-size: 0.68rem; color: var(--muted); }

/* Gilden-Level (Spieler-Wunsch 15.07.: "Gildensystem erweitern") - bewusst
   Lila statt des bestehenden Orange-Dungeon/Arena-Tons (var(--purple),
   gleicher Farbwert wie .idle-prestige-buy) - eine zweite, klar
   unterscheidbare "Meta-Fortschritt"-Farbe fuer Gilden-Level getrennt vom
   Kassenstand-Bonus (der bleibt Orange/Gold). */
.idle-guild-level-row { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.6rem; flex-wrap: wrap; }
.idle-guild-level-badge {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.idle-guild-level-xp { font-size: 0.8rem; color: var(--muted); }
.idle-guild-xp-bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--paper);
  overflow: visible;
  border: 1px solid var(--line);
  margin: 0.5rem auto 0;
  max-width: 420px;
}
.idle-guild-xp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
  transition: width 0.4s ease;
}
/* Der kleine Schatz sitzt AUF dem Balkenende (nicht im ueberlaufenden Text),
   deshalb overflow:visible oben + eigene Positionierung statt einfach im
   Fliesstext ans Ende zu haengen. */
.idle-guild-xp-chest {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transition: left 0.4s ease;
}
.idle-guild-xp-pct { text-align: center; font-size: 0.78rem; color: var(--muted); margin: 0.3rem 0 0; }

/* Aktivitätslog + Chat-Systemzeilen (siehe guild_activity_log) - gleiche
   Scroll-Log-Optik wie .idle-guild-chat-log. */
.idle-guild-activity-log {
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.idle-guild-activity-entry { font-size: 0.82rem; margin: 0; color: var(--muted); }
/* Rollenfarbener Namens-Tag im Chat (Spieler-Wunsch: "Spielerfarbe") -
   eine echte pro-Spieler-Farbe gibt es im Spiel nicht, deshalb stattdessen
   nach Rolle gefaerbt (gleiche Farbwerte wie die Rollen-Badges/Boni sonst
   im Spiel: Gold=Anführer, Lila=Stellvertreter/Level-Farbe, Blau=Veteran). */
.idle-guild-chat-role-leader { color: var(--gold); }
.idle-guild-chat-role-officer { color: var(--purple); }
.idle-guild-chat-role-veteran { color: #38bdf8; }
.idle-guild-chat-role-member { color: var(--ink); }

/* Gilden-Technologie v3 (31.07.2026): Baum-System mit Mitglieder-Beitraegen
   (siehe js/systems/bkmp-guild-tech.js), ersetzt das fruehere 9+10-Karten-
   Raster komplett. Gleiche Lila-Akzentfarbe wie vorher (var(--purple)),
   damit "Gilden-Fortschritt" (Level + Technologie) optisch weiterhin als
   zusammengehoerige Familie erkennbar bleibt, getrennt vom orangenen
   Kassenstand-Bonus. */
.idle-guild-tech-attempts { font-size: 0.8rem; color: var(--muted); margin-top: 0.4rem; }
.idle-guild-tech-category-tabs { display: flex; gap: 0.5rem; margin: 0.8rem 0; flex-wrap: wrap; }
.idle-guild-tech-category-tab {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.idle-guild-tech-category-tab.active { background: color-mix(in srgb, var(--purple) 22%, var(--paper-2)); border-color: var(--purple); color: var(--ink); }
.idle-guild-tech-category-tab:hover { color: var(--ink); }
.idle-guild-tech-tree-wrap { overflow: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); padding: 0.6rem; max-height: 420px; }
.bkmp-guild-tech-tree { position: relative; margin: 0 auto; }
.bkmp-guild-tech-svg { position: absolute; top: 0; left: 0; pointer-events: none; }
.bkmp-guild-tech-line { stroke: var(--line); stroke-width: 2.5; }
.bkmp-guild-tech-line.met { stroke: var(--purple); }
.bkmp-guild-tech-node {
  position: absolute;
  width: 128px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.6rem 0.5rem;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--paper-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.bkmp-guild-tech-node:hover:not(:disabled) { transform: translate(-50%, -50%) translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); }
.bkmp-guild-tech-node.state-locked { opacity: 0.5; cursor: not-allowed; }
.bkmp-guild-tech-node.state-available { border-color: var(--purple); }
.bkmp-guild-tech-node.state-maxed { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--paper-2)); }
.bkmp-guild-tech-node-icon { font-size: 1.5rem; line-height: 1; }
.bkmp-guild-tech-node-label { font-weight: 700; font-size: 0.78rem; color: var(--ink); }
.bkmp-guild-tech-node-tier { font-size: 0.72rem; color: var(--muted); }
.bkmp-guild-tech-node-bar { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--paper); overflow: hidden; border: 1px solid var(--line); margin-top: 0.15rem; }
.bkmp-guild-tech-node-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--gold)); transition: width 0.4s ease; }
.idle-guild-tech-modal-progress { font-size: 0.85rem; margin: 0.4rem 0; }
.idle-guild-tech-modal-meta { font-size: 0.75rem; color: var(--muted); margin-top: 0.4rem; }

/* Tägliche Gildenquests - gruene Fortschrittsfarbe (bewusst eine dritte
   Akzentfarbe neben Orange=Kasse und Lila=Level/Technologie, damit alle
   drei Gilden-Fortschrittsarten auf einen Blick unterscheidbar bleiben). */
.idle-guild-quest-card {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
}
.idle-guild-quest-card.is-complete { border-color: color-mix(in srgb, #4ade80 55%, var(--line)); }
.idle-guild-quest-title { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.3rem; }
.idle-guild-quest-bar { height: 8px; border-radius: 999px; background: var(--paper); overflow: hidden; border: 1px solid var(--line); }
.idle-guild-quest-fill { height: 100%; background: linear-gradient(90deg, #4ade80, #22c55e); transition: width 0.4s ease; }
.idle-guild-quest-progress { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; }
.idle-guild-quest-reward { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
/* Loeschen-Knopf fuer Chat-Moderation (Anfuehrer/Stellvertreter/Veteran) -
   bewusst unauffaellig (kleine, transparente Schaltflaeche am Zeilenende),
   erst bei Hover/Fokus deutlicher sichtbar - soll normale Nachrichten
   nicht zumuellen. */
.idle-guild-chat-delete-btn {
  float: right;
  margin-left: 0.4rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.75rem;
  opacity: 0.35;
  transition: opacity 0.15s ease;
}
.idle-guild-chat-delete-btn:hover, .idle-guild-chat-delete-btn:focus-visible { opacity: 1; }
/* Gildenbanner (Baukasten aus kuratierten Presets, siehe bkmpRenderGuildBanner
   in idledorf.js) - an mehreren Stellen wiederverwendet: Gildenkopf,
   Gilden-durchsuchen-Karten, Gildenboss-Ansicht, Einstellungen-Editor. */
.idle-guild-banner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  line-height: 1;
}
.idle-guild-header-row { display: flex; align-items: center; gap: 0.6rem; }
.idle-guild-header-row h4 { margin: 0; }
.idle-arena-opponent-name .idle-guild-banner { vertical-align: middle; margin-right: 0.3rem; }
.idle-guild-banner-picker { margin-top: 0.6rem; }
.idle-guild-banner-preview { display: flex; justify-content: center; margin-bottom: 0.6rem; }
.idle-guild-banner-colors, .idle-guild-banner-symbols {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.idle-guild-banner-color-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 2px solid var(--line);
  cursor: pointer;
  padding: 0;
}
.idle-guild-banner-color-btn.active { border-color: var(--accent, #fbbf24); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #fbbf24) 45%, transparent); }
.idle-guild-banner-symbol-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.idle-guild-banner-symbol-btn.active { border-color: var(--accent, #fbbf24); background: color-mix(in srgb, var(--accent, #fbbf24) 20%, var(--paper-2)); }
.idle-guild-goal-banner { border-left: 3px solid #fbbf24; padding-left: 0.8rem; }
.idle-guild-goal-banner p { margin: 0; }
.idle-dungeon-event-banner {
  border: 1px solid #fbbf24;
  background: color-mix(in srgb, #fbbf24 12%, transparent);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin-bottom: 0.8rem;
}
.idle-dungeon-event-banner p { margin: 0; }
.idle-dungeon-event-banner strong { color: #fbbf24; }
.idle-dungeon-start-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.idle-dungeon-banner {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  margin-bottom: 0.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, #f97316 22%, var(--paper)), var(--paper));
  border: 1px solid color-mix(in srgb, #f97316 45%, var(--line));
  color: #fb923c;
  font-weight: 800;
  font-size: 0.85rem;
  animation: bkmpDungeonBannerPulse 2.4s ease-in-out infinite;
}
@keyframes bkmpDungeonBannerPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(249, 115, 22, 0); }
  50% { box-shadow: 0 0 16px rgba(249, 115, 22, 0.35); }
}
.idle-dungeon-result-card strong { color: #fb923c; }
/* Phase 5.5 (19.07.): Schluessel-/Regen-Zeile im Ergebnis-Popup - dezenter
   als der Haupttext, damit "Belohnung" weiter der Blickfang bleibt. */
.idle-dungeon-result-keys { margin-top: 0.5rem !important; padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.82rem; color: #a89fc7 !important; }
/* Spieler-Vorgabe 16.07.: "feste Popups mit den Belohnungen, die man
   wegklicken kann" - .bkmp-easter hat bewusst pointer-events:none (reine
   Deko-Ebene fuer die spark-Animation, blockiert absichtlich keine Klicks
   auf darunterliegende UI bei den uebrigen Easter-Egg-Popups). Fuer die
   Dungeon-/Turm-Ergebnis-Karten hier gezielt wieder aktiviert, plus ein
   echter Schliessen-Button - vorher verschwanden diese Karten nach 4.8s/
   5.4s von selbst, was bei AFK/nicht-hinschauen genau das Problem war
   ("man weiss nicht, was man bekommen hat"). */
.bkmp-easter-dismissible { pointer-events: auto; cursor: pointer; }
.bkmp-easter-dismissible .bkmp-easter-card { cursor: default; position: relative; }
.idle-result-close-btn {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(201, 165, 106, 0.35);
  background: rgba(255, 255, 255, 0.06);
  color: #f3ecff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.idle-result-close-btn:hover { background: rgba(255, 255, 255, 0.14); }
.idle-dungeon-auto-cancel-btn {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #fb923c 55%, var(--line));
  background: var(--paper);
  color: #fb923c;
  font-weight: 700;
  font-size: 0.72rem;
  cursor: pointer;
}
.idle-dungeon-auto-cancel-btn:hover { background: color-mix(in srgb, #f97316 18%, var(--paper)); }
@media (prefers-reduced-motion: reduce) {
  .idle-dungeon-banner { animation: none; }
}

/* ---- Skilltree ---- */
.idle-skillpoints-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem; }
.idle-skillpoints-hint { margin-bottom: 0; font-size: 0.85rem; }
.idle-skilltree-reset-btn { padding: 0.4rem 0.8rem; font-size: 0.76rem; white-space: nowrap; }
.idle-skilltree-reset-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.idle-skilltree-help-btn { padding: 0.4rem 0.8rem; font-size: 0.76rem; white-space: nowrap; }

/* Skilltree-Hilfe-Fenster: wird von einem Button INNERHALB des schon
   offenen idleDorfOverlay geoeffnet - gleiches Ueberlappungs-Problem wie
   bei den AD-Free-Popups (siehe dort), deshalb hier ebenfalls ein hoeherer
   z-index statt sich auf die DOM-Reihenfolge zu verlassen. */
#idleSkillHelpOverlay { z-index: 60; }
/* bkmpConfirmDialog() wird u.a. aus dem schon offenen idleDorfOverlay
   heraus aufgerufen (Aufstiegs-/Skilltree-Reset-Bestaetigung) - exakt
   dasselbe Ueberlappungs-Problem wie beim Skilltree-Hilfe-Fenster direkt
   drueber: ohne hoeheren z-index landet der Bestaetigungs-Dialog je nach
   DOM-Reihenfolge HINTER statt VOR dem Idle-Dorf-Fenster. */
#bkmpConfirmOverlay { z-index: 65; }
/* Gleiches Ueberlappungs-Problem wie oben bei #idleSkillHelpOverlay - der
   "❓ Hilfe"-Button im Runen-Tab oeffnet dieses Popup ebenfalls aus dem schon
   offenen idleDorfOverlay heraus (Spieler-Meldung: Popup landet dahinter). */
#idleRunenHelpOverlay { z-index: 60; }
/* Gleicher Grund wie bei #idleRunenHelpOverlay - der "Für Streamer"-Button
   oeffnet dieses Popup aus dem schon offenen idleDorfOverlay heraus. */
#idleStreamHelpOverlay { z-index: 60; }
/* Gleicher Grund wie bei #idleSkillHelpOverlay/#idleRunenHelpOverlay - der
   Arena-Angreifen-Button oeffnet dieses Popup aus dem schon offenen
   idleDorfOverlay heraus (Spieler-Meldung 14.07.: "Popup öffnet sich
   hinter dem idle game"). */
#arenaBattleOverlay { z-index: 60; }
/* Gleiches Ueberlappungs-Problem wie oben - der Drachenlager-Karten-Klick
   (bkmpDragonOpenDetail) oeffnet dieses Popup ebenfalls aus dem schon
   offenen idleDorfOverlay heraus (Spieler-Meldung 16.07.: "Fenster oeffnet
   sich dahinter" - nicht ein Schliessen-Problem, sondern fehlender
   z-index beim OEFFNEN). */
#idleDragonDetailOverlay { z-index: 60; }
/* Gleiches z-index-Muster wie #idleDragonDetailOverlay direkt darueber -
   sonst genau derselbe "Fenster oeffnet sich dahinter"-Bug (16.07.), da
   auch das Lexikon aus dem schon offenen idleDorfOverlay heraus oeffnet. */
#idleDragonDexOverlay { z-index: 60; }
/* Gleiches, bereits mehrfach dokumentiertes z-index-Muster (04.08.2026,
   Dorf-Skin-Vorschau-Lightbox) - bkmpIdleOpenSkinPreview() oeffnet ebenfalls
   aus dem schon offenen idleDorfOverlay heraus (Dorf-Skins-Tab), sonst
   identischer "Fenster oeffnet sich dahinter"-Bug - beim eigenen Testen per
   Playwright reproduziert ("idle-skin-card intercepts pointer events"),
   nicht nur vermutet. */
#idleSkinPreviewOverlay { z-index: 60; }
/* NACHBESSERUNG (Nutzerwunsch 15.07.: "Baust du das dann unten ein und im
   gleichen Design overlay wie den Rest?") - vorher ein separater Text-Link
   direkt neben dem Titel oben, der optisch mit dem Live-Sync-Banner
   kollidierte (Spieler-Screenshot). Jetzt ein ganz normaler Button in der
   unteren Button-Leiste neben "Schließen" - gleiche kompakte Groesse wie
   die "❓ Hilfe"-Buttons im Runen-/Skilltree-Tab, statt einer Sonderloesung. */
.idle-stream-help-btn { padding: 0.4rem 0.8rem; font-size: 0.76rem; white-space: nowrap; }
.skillhelp-card { max-width: 720px; }

/* Spieler-Profil-Popup (Community-Feedback "Fightmaria", 14.07.) */
.player-profile-card { max-width: 420px; }
.player-profile-header { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.player-profile-plushie {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  background: var(--paper-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, var(--line));
}
.player-profile-plushie img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.player-profile-name-outer { flex: 1; min-width: 0; }
.player-profile-name-outer h3.leaderboard-name-wrap { margin: 0; font-family: 'Fraunces', serif; font-size: 1.1rem; }
.player-profile-title {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold-fixed);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.player-profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.player-profile-stat {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.player-profile-stat span { font-size: 0.72rem; color: var(--muted); }
.player-profile-stat strong { font-size: 1.05rem; color: var(--ink); }
@media (max-width: 480px) { .player-profile-stats { grid-template-columns: 1fr; } }

/* Arena-Kampfanimation (Spieler-Wunsch 14.07.: "Dorf gegen Dorf?" +
   Nachbesserung: "unser normales Dorf gegen Drache Design nur mit Dorf
   gegen Dorf") - .idle-battlefield/.idle-village/.idle-village-sprite/
   .idle-hp-bar sind bereits rein klassenbasiert (siehe dortige Regeln),
   hier nur noch ein Groessen-Feintuning fuer den kleineren Popup-Rahmen
   plus der neue Namens-Schriftzug unter der HP-Leiste. */
/* NACHBESSERUNG 2 (Spieler-Wunsch 15.07., Screenshot: "Das soll voll in die
   Breite richtig groß!") - die max-width:720px-Erhoehung von eben griff
   praktisch nicht: .joke-card setzt nur max-width, nie eine echte width, ein
   Block mit width:auto in einer flex-zentrierten .joke-overlay schrumpft
   dadurch immer auf seinen Inhalt statt die max-width tatsaechlich
   auszufuellen (im Screenshot dadurch weiterhin nur ~320px breit). Jetzt
   dieselbe width:94vw/max-width-Formel wie .idle-dorf-card (das grosse
   Hauptfenster) - .idle-village nimmt weiterhin 42% der Feldbreite ein
   (siehe dortige Regel), skaliert dadurch automatisch mit hoch. */
.arena-battle-card { width: 94vw; max-width: 1200px; text-align: center; }
.arena-battle-card h3 { font-size: 1.5rem; margin-bottom: 0.3rem; }
.arena-battle-field { margin: 1.2rem 0; min-height: 340px; }
.arena-battle-name { font-weight: 700; font-size: 1.15rem; margin-top: 0.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-battle-result { font-weight: 700; font-size: 1.4rem; min-height: 1.4em; margin-top: 0.6rem; }

/* Clan-Arena-Kampfabzeichen (30.07.2026) - Ersatz fuer .idle-village-sprite
   (Dorf-Skin-Bild) in #clanArenaBattleOverlay: eine Gilde hat kein einzelnes
   Dorf, daher ein rundes Abzeichen mit Tag statt eines Sprites. Sitzt wie
   .idle-village-sprite direkt in .idle-village, teilt sich dieselbe
   Hit-Flash/Schadenszahlen-Logik (bkmpIdleSpawnHitFlash zielt auf den
   .idle-village-Wrapper, nicht auf den Sprite/das Abzeichen selbst). */
.clan-arena-battle-badge {
  width: 100%; max-width: 240px; aspect-ratio: 1 / 1; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  border-radius: 50%; border: 3px solid var(--gold);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--gold) 20%, var(--paper)), var(--paper-2));
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
  padding: 0.8rem;
}
.clan-arena-battle-badge-icon { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1; }
.clan-arena-battle-badge-tag { font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(0.95rem, 2.6vw, 1.3rem); color: var(--gold); text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.skillhelp-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  margin-bottom: 0.4rem;
  padding-right: 0.2rem;
}
.skillhelp-branch-title {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  margin-bottom: 0.6rem;
  color: var(--gold);
}
.skillhelp-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  margin-bottom: 0.5rem;
}
.skillhelp-icon { font-size: 1.05rem; flex-shrink: 0; line-height: 1.4; }
.skillhelp-body { flex: 1 1 auto; min-width: 0; }
.skillhelp-name { font-weight: 700; font-size: 0.87rem; }
.skillhelp-desc { font-size: 0.79rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.4; }
.skillhelp-meta { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.skillhelp-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
  white-space: nowrap;
}
.skillhelp-cost { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.skillhelp-note {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}
@media (max-width: 640px) {
  .skillhelp-row { flex-wrap: wrap; }
  .skillhelp-meta { flex-direction: row; align-items: center; margin-left: auto; }
}
/* Skilltree-Zweige als Akkordeon statt alle 5 Zweige permanent voll
   ausgeklappt untereinander: bei ~6 Knoten pro Zweig wurde das Panel so
   lang, dass Spieler leicht uebersahen, dass in einem weiter unten
   liegenden Zweig noch Punkte ausgebbar waren (gemeldetes Problem). Jeder
   Zweig-Kopf ist jetzt ein Button, der per grid-template-rows 0fr/1fr
   sauber auf- und zuklappt (der modernere Ersatz fuer die alte
   max-height-Hack-Technik - animiert echte "auto"-Hoehe ohne JS-Messung).
   .has-available (mind. 1 sofort ausgebbarer Punkt im Zweig) bekommt einen
   pulsierenden Gold-Punkt am Kopf, damit genau das nicht mehr uebersehen
   werden kann, auch wenn der Zweig zugeklappt ist. */
.idle-skill-branch { margin-bottom: 1rem; }
.idle-skill-branch-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.idle-skill-branch-header:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.idle-skill-branch.expanded .idle-skill-branch-header {
  border-color: var(--gold);
  border-radius: 14px 14px 0 0;
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--gold) 8%, transparent);
}
.idle-skill-branch.has-available .idle-skill-branch-header { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.idle-skill-branch-name { font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--gold); }
.idle-skill-branch-progress {
  margin-left: auto;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.idle-skill-branch-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 60%, transparent);
  animation: idleSkillBranchPulse 1.8s ease-in-out infinite;
}
@keyframes idleSkillBranchPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 0%, transparent); }
}
.idle-skill-branch-chevron {
  font-size: 0.9rem;
  color: var(--muted);
  transition: transform 0.25s ease;
}
.idle-skill-branch.expanded .idle-skill-branch-chevron { transform: rotate(180deg); color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .idle-skill-branch-pulse { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent); }
}

/* "Meister"-Zweig (Grimbold) vor Freischaltung: gedimmter Kartenrahmen +
   Schloss-Symbol statt Fortschrittsanzeige/Pulse-Punkt. */
.idle-skill-branch-locked .idle-skill-branch-header { opacity: 0.72; }
.idle-skill-branch-locked .idle-skill-branch-name { color: var(--muted); }
.idle-skill-branch-lock { margin-left: auto; font-size: 1rem; }
.idle-skill-branch-locked-hint { margin: 0; padding: 0.9rem 1.1rem 1.1rem; }

.idle-skill-branch-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
  border: 1.5px solid transparent;
  border-top: none;
  border-radius: 0 0 14px 14px;
  opacity: 0;
}
.idle-skill-branch.expanded .idle-skill-branch-collapse {
  grid-template-rows: 1fr;
  opacity: 1;
  border-color: var(--gold);
  transition: grid-template-rows 0.32s ease, opacity 0.32s ease 0.05s, border-color 0.32s ease;
}
.idle-skill-branch-collapse-inner { overflow: hidden; }
/* min-width:0 auf den Grid-Items ist hier Pflicht, nicht Kosmetik: ohne das
   verweigern Grid-Items per Spec ein Schrumpfen unter ihre "intrinsische"
   Mindestbreite (das laengste unbrechbare Wort/Element im Kind). Bei
   langen Namen wie "Angriffsgeschwindigkeit" reicht das auf manchen
   Bildschirmbreiten aus, um die ganze Spalte (und damit das Fenster)
   ueber die verfuegbare Breite hinaus zu druecken, obwohl der Text an
   sich brechen koennte - sichtbar als abgeschnittene/nicht passende Karte
   auf schmaleren Screens, obwohl es auf breiteren Screens gut aussieht. */
/* Echter verbundener Baum statt flachem Grid: Reihen = Tiefe in der
   Voraussetzungs-Kette (siehe bkmpIdleSkillNodeDepth), SVG-Overlay zeichnet
   die Verbindungslinien zwischen Eltern-/Kind-Knoten nachtraeglich per
   getBoundingClientRect() ein (siehe bkmpIdleDrawSkillTreeLines).

   Gerahmter "Baum-Kasten" statt frei schwebender Karten - gleiche
   Zweischicht-Verlaufsrahmen-Technik wie .idle-battlefield/.raid-battlefield
   (dezenter Radial-Verlauf + Gold-Rahmen), damit jeder Zweig wie ein
   eigenstaendiges Element wirkt statt in der breiten Modal-Flaeche zu
   "schwimmen". max-width + margin:auto haelt die Karten auch bei sehr
   breiten Fenstern kompakt beieinander statt ueber die volle Breite verteilt. */
.idle-skilltree-tree {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 1.4rem 1rem 1.2rem;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gold) 6%, var(--paper)), var(--paper) 75%);
}
.idle-skilltree-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.idle-skilltree-line { stroke: color-mix(in srgb, var(--muted) 70%, transparent); stroke-width: 2.5; stroke-linecap: round; }
.idle-skilltree-line.unlocked { stroke: var(--gold); stroke-width: 3; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 70%, transparent)); }
.idle-skilltree-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.3rem; margin-bottom: 1.9rem; }
.idle-skilltree-row:last-child { margin-bottom: 0; }

.idle-skill-node {
  position: relative;
  z-index: 1;
  width: 152px;
  min-width: 0;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 0.8rem 0.7rem 0.7rem;
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  opacity: 0.72;
}
.idle-skill-node.is-root { opacity: 1; }
.idle-skill-node.can-allocate { opacity: 1; border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 25%, transparent), 0 4px 10px rgba(0, 0, 0, 0.12); }
.idle-skill-node.ranked {
  opacity: 1;
  border-color: var(--gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 10%, var(--paper-2)), var(--paper));
  box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 35%, transparent), 0 4px 10px rgba(0, 0, 0, 0.12);
}
.idle-skill-node.maxed { border-color: var(--gold); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 20%, var(--paper-2)), var(--paper)); }
.idle-skill-node:hover { transform: translateY(-2px); }

.idle-skill-node-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 12%, var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
}
.idle-skill-node.ranked .idle-skill-node-icon { background: color-mix(in srgb, var(--gold) 28%, var(--paper-2)); border-color: var(--gold); }
.idle-skill-node-name { font-weight: 700; font-size: 0.82rem; margin-top: 0.1rem; overflow-wrap: break-word; }
.idle-skill-node-desc { font-size: 0.68rem; color: var(--muted); margin: 0.3rem 0; min-height: 2.2em; overflow-wrap: break-word; }
.idle-skill-node-requires { font-size: 0.64rem; color: color-mix(in srgb, var(--gold) 65%, var(--muted)); margin-bottom: 0.35rem; overflow-wrap: break-word; }
.idle-skill-node-rank { font-size: 0.7rem; font-weight: 600; color: var(--muted); margin-bottom: 0.45rem; }
.idle-skill-node.ranked .idle-skill-node-rank { color: var(--gold); }
.idle-skill-node-btn { width: 100%; padding: 0.4rem 0.5rem; font-size: 0.72rem; }
.idle-skill-node-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 640px) {
  .idle-skilltree-tree { padding: 1rem 0.5rem 0.9rem; }
  .idle-skill-node { width: 122px; padding: 0.6rem 0.5rem 0.55rem; }
  .idle-skilltree-row { gap: 0.7rem; }
  .idle-skill-node-icon { width: 34px; height: 34px; font-size: 1.15rem; }
}

/* ============================================================
   IDLE-DORF: "DRACHENHOEHLE"-OBERFLAECHE (2026-07-13)
   ------------------------------------------------------------
   Komplettes visuelles Redesign des Idle-Dorf-Fensters, bewusst als
   eigenstaendige "Spielwelt" statt als weiteres Seiten-Popup: ein fester,
   dunkler Drachenhoehlen-Look (Kohle/Amethyst-Hintergrund, gluehende
   Ember-Akzentfarbe statt des Seiten-Golds), UNABHAENGIG vom Hell-/
   Dunkel-Umschalter der restlichen Seite - genau wie ein eigenstaendiges
   Spiel innerhalb der Seite normalerweise nicht mit dem Browser-Theme
   mitschaltet.

   Technik: alle Farb-Variablen (--gold/--paper/--paper-2/--paper-3/--line/
   --ink/--muted) werden hier NUR innerhalb der Idle-Dorf-bezogenen
   .joke-overlay-Elemente ueberschrieben. Da praktisch der gesamte
   Drachen-Kram (Skilltree-Knoten, Upgrade-Karten, Erfolge, Bestenliste,
   Buttons) bereits ausschliesslich ueber diese Variablen eingefaerbt ist,
   faerbt diese eine Stelle automatisch das komplette Innenleben aller
   Tabs im neuen Look ein - kein Antasten der einzelnen Tab-Render-
   Funktionen noetig, kein Risiko fuer die Spiellogik. Nur Kartenrahmen/
   HUD/Tableiste/Schlachtfeld bekommen zusaetzlich eigene, neue Regeln
   fuer eine wirklich andere Silhouette statt nur neuer Farben.
   ============================================================ */
.idle-dorf-overlay,
.idle-stage-picker-overlay,
.idle-event-dragon-overlay,
.idle-meister-dialog-overlay,
#idleSkillHelpOverlay,
#idleMaintenanceOverlay {
  --ink: #f4e9da;
  --paper: #150f22;
  --paper-2: #1c1430;
  --paper-3: #241a3c;
  --gold: #ff8a4c;
  --gold-fixed: #ff8a4c;
  --line: rgba(255, 158, 94, 0.24);
  --muted: #b7a8c4;
  --purple: #a78bfa;
  /* WICHTIG: body { color: var(--ink) } wird nur einmal ganz oben aufgeloest
     (mit der GLOBALEN Theme-Farbe), CSS-Variablen selbst vererben sich zwar
     hierhin neu, die bereits BERECHNETE color-Eigenschaft aber nicht. Ohne
     dieses explizite Redeklarieren erben Elemente ohne eigene Farbangabe
     (z.B. .raid-result-stat-value) im Hellmodus die fast-schwarze globale
     Ink-Farbe auf den hier absichtlich dunklen Hintergruenden - unlesbar.
     Spieler-Meldung 17.07. zum Raid-Ergebnis-Fenster. */
  color: var(--ink);
}

/* Kohle-Vignette hinter dem Fenster statt des generischen Seiten-Dimmers -
   zieht den Blick staerker aufs Fenster, wirkt wie ein abgedunkelter
   Hoehlen-Raum statt einer flachen Ueberlagerung. */
.idle-dorf-overlay.visible {
  background: radial-gradient(circle at 50% 40%, rgba(40, 20, 55, 0.55), rgba(4, 2, 8, 0.88));
}

.idle-dorf-overlay .idle-dorf-card {
  border-radius: 22px;
  border-color: transparent;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 138, 76, 0.10), transparent 55%),
    radial-gradient(circle at 85% 100%, rgba(167, 139, 250, 0.10), transparent 50%),
    linear-gradient(180deg, var(--paper-2), var(--paper)) padding-box,
    linear-gradient(160deg, var(--gold), rgba(167, 139, 250, 0.55) 45%, var(--gold)) border-box;
  border: 1.5px solid transparent;
  background-size: 100% 100%, 100% 100%, 100% 100%, 220% 220%;
  animation: bkmpTierGlow 7s ease infinite;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 50px color-mix(in srgb, var(--gold) 20%, transparent);
  /* NACHBESSERUNG: "overflow: hidden" hat hier ungewollt das vom
     Grund-Regelsatz (weiter oben, gleiche Spezifitaet) gesetzte
     "overflow-y: auto" ueberschrieben, weil diese neuere Design-Regel
     spaeter in der Kaskade steht. Ohne eigenen Scroll-Container hat die
     Maus ueber dem Fenster (z.B. Titel/HUD-Bereich) einfach die Seite
     dahinter durchgescrollt statt des Fensterinhalts (Spieler-Meldung:
     "wenn meine Maus dort im roten Fenster ist.. scrolle ich die
     komplette Seite im Hintergrund"). overflow-x bleibt hidden (rundet
     weiterhin die Ecken sauber ab), nur overflow-y wieder auf auto. */
  overflow-x: hidden;
  overflow-y: auto;
}
/* Treibende Glutfunken: eine einzelne Ebene, kein zusaetzliches DOM/Layout.
   Bug-Report 17.07. (ChronoKora): "wirkt alles minimal laggend", durchgehend
   im Hintergrund, unabhaengig von jeder Interaktion - passt exakt zu diesem
   Element, das die GESAMTE Zeit laeuft, solange das Idle-Dorf-Fenster offen
   ist. Der alte Kommentar hier ("nur transform-artige, GPU-guenstige
   Eigenschaften") war ein Denkfehler: background-position ist KEINE
   Compositor-Eigenschaft wie transform/opacity, sie zwingt den Browser bei
   JEDEM Frame zu einem Repaint der ganzen Ebene (5 Radial-Gradients ueber
   die komplette Fenstergroesse), 9s lang in Dauerschleife, komplett
   unabhaengig vom Kampf-Tick. Jetzt echtes transform/opacity: die Positionen
   der 5 Punkte bleiben fix im Gradient, die ganze Ebene wandert per
   translateY nach oben - optisch nahezu identisch (Funken glimmen auf und
   driften nach oben), aber nur noch Compositor-Arbeit statt Repaint bei
   jedem einzelnen Frame.
   NACHBESSERUNG (Spieler-Report 17.07.): "im Kampf oeffnet sich immer wieder
   ein Scroll-Balken, habe ich normalerweise nicht" - die urspruengliche
   Fassung nutzte "inset: -15% 0", damit beim Hochwandern keine Kante
   sichtbar wird. .idle-dorf-card hat aber "overflow-y: auto" - ein negativer
   inset vergroessert die LAYOUT-Box dieses ::before ueber die Karte hinaus,
   und genau diese vergroesserte Box zaehlt fuer den Scrollbereich des
   Elternelements mit (transform aendert nur die gerenderte Position, nicht
   die Layout-Groesse, die fuer overflow-y:auto zaehlt). Jetzt wieder
   "inset: 0" (exakt kartengross, kein Scroll-Einfluss mehr) und eine
   kleinere translateY-Distanz - die harte Kante am oberen/unteren Rand
   faellt nicht auf, weil die Deckkraft dort ohnehin schon gegen 0 geht. */
.idle-dorf-overlay .idle-dorf-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(2px 2px at 10% 80%, rgba(255, 179, 92, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 88%, rgba(255, 179, 92, 0.7), transparent 60%),
    radial-gradient(2px 2px at 55% 84%, rgba(255, 179, 92, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 75% 90%, rgba(255, 179, 92, 0.65), transparent 60%),
    radial-gradient(2px 2px at 92% 82%, rgba(255, 179, 92, 0.85), transparent 60%);
  background-repeat: no-repeat;
  animation: idleEmbersRise 9s linear infinite;
  will-change: transform;
  z-index: 0;
}
@keyframes idleEmbersRise {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.55; }
  90% { opacity: 0.35; }
  100% { transform: translateY(-115%); opacity: 0; }
}
.idle-dorf-overlay .idle-dorf-card > * { position: relative; z-index: 1; }
/* Hoehere Spezifitaet als die generische Regel direkt darueber noetig
   (3 statt 2 Klassen im Selektor) - der Schliessen-Knopf sitzt in derselben
   Ecke wie das neue Banner (siehe .idle-dorf-banner-picture) und muss trotz
   spaeterer DOM-Position des Banners immer sichtbar obenauf bleiben.
   Bug-Fix 18.07.: #idleDorfFeedbackBtn sitzt direkt daneben in derselben
   Ecke und braucht denselben Schutz - sonst kann z.B. #idleDorfOfflineCard
   (spaeter im DOM, ebenfalls z-index:1 durch die generische Regel) den
   Klick auf den Feedback-Knopf abfangen, sobald dieses Banner sichtbar
   ist (per elementFromPoint() verifiziert). */
.idle-dorf-overlay .idle-dorf-card > .idle-dorf-close,
.idle-dorf-overlay .idle-dorf-card > .idle-dorf-feedback-btn { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .idle-dorf-overlay .idle-dorf-card::before { animation: none; opacity: 0.2; }
}

.idle-dorf-card h3 {
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, var(--ink), var(--gold) 55%, var(--ink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 138, 76, 0.25));
}

/* ---- HUD: Level-Medaillon + XP/Ressourcen-Leiste statt Fliesstext ---- */
.idle-dorf-hud { margin-bottom: 1.1rem; }
.idle-hud-top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.6rem; }
.idle-hud-streak-badge {
  flex-shrink: 0;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, #f97316 20%, var(--paper-2));
  border: 1px solid color-mix(in srgb, #f97316 45%, var(--line));
  color: #fb923c;
  font-weight: 800;
  font-size: 0.85rem;
  white-space: nowrap;
}
.idle-hud-level-badge {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold) 35%, var(--paper-2)), var(--paper-3));
  border: 2px solid var(--gold);
  box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 45%, transparent), inset 0 0 10px rgba(0, 0, 0, 0.35);
}
.idle-hud-level-num { font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 700; line-height: 1; color: var(--ink); }
.idle-hud-level-tag { font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-top: 0.1rem; }
.idle-hud-xp-wrap { flex: 1; min-width: 0; }
.idle-hud-skillpoints { font-size: 0.78rem; color: var(--gold); font-weight: 700; margin-bottom: 0.3rem; }
.idle-xp-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, black 40%, var(--paper)); overflow: hidden; border: 1px solid var(--line); position: relative; }
.idle-xp-fill { height: 100%; background: linear-gradient(90deg, #38bdf8, #a78bfa); position: relative; }
.idle-xp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  width: 40%;
  animation: idleXpShimmer 2.6s ease-in-out infinite;
}
@keyframes idleXpShimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(340%); }
}
@media (prefers-reduced-motion: reduce) { .idle-xp-fill::after { animation: none; display: none; } }
.idle-xp-label { font-size: 0.72rem; color: var(--muted); margin-top: 0.25rem; }

.idle-hud-stats, .idle-hud-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.idle-hud-stats span, .idle-hud-resources span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper-3) 80%, transparent);
  border: 1px solid var(--line);
}
.idle-hud-resources span { color: var(--muted); }
.idle-hud-stats { border-bottom: none; padding-bottom: 0; }

/* ---- Tableiste: Spielmenue statt flacher Pillen ----
   Redesign Phase 5 (17.07.): diese Regel gilt jetzt bei JEDER Breite (auch
   die 44px-Touch-Hoehe unten, frueher app-mode-exklusiv, siehe Audit) - nur
   die eigentliche LAYOUT-Frage (fixierte Mobil-Bottom-Bar vs. gruppierte
   Desktop-Leiste) unterscheidet sich noch per Breakpoint, siehe die beiden
   @media-Bloecke oben (Mobil, aus dem App-Modus befoerdert) und unten
   (Desktop, neu). Gleiche Buttons/IDs/Klick-Listener wie immer. */
/* KRITISCHER FUND (Phase 5.1 Verifikation, zweite Runde, 17.07.): echter
   Nutzer-Screenshot mit vollem Spielstand zeigte die Tab-Leiste auf
   einen schmalen Streifen zusammengequetscht, Panel-Inhalt begann darueber.
   Ursache: .idle-dorf-card ist html.bkmp-app-mode-weit ein
   "display:flex;flex-direction:column"-Container (siehe "Karten-Chrome"-
   Regel weiter unten in dieser Datei), #idlePanelKampf ist darin bewusst
   auf "flex:1 1 auto;min-height:0" gesetzt, um bei Bedarf zu wachsen/zu
   schrumpfen - ist Kampf aber NICHT der aktive Tab (z.B. Erfolge), faellt
   dieser "Platz-Puffer" komplett weg (display:none nimmt nicht am Flex-
   Layout teil), UND eine seither entfernte alte Regel setzte hier
   zusaetzlich "overflow-x:auto" - das zwingt Flexbox-Items laut Spec dazu,
   ihre automatische Mindesthoehe von "auto" auf "0" zu senken, wodurch
   *diese* Tableiste (nicht die Panels) als einziges verbleibendes flexibles
   Element zusammengedrueckt wurde, sobald ein hoher Panel-Inhalt (z.B. eine
   lange Erfolge-Liste bei echtem Spielstand) die max-height der Karte
   ueberschritt. "flex-shrink:0" verhindert das strukturell: die Tableiste
   behaelt IMMER ihre volle, von den echten Buttons benoetigte Hoehe: reicht
   der Platz nicht, scrollt stattdessen die Karte selbst (die schon laenger
   "overflow-y:auto" traegt), nicht die Navigation. */
.idle-dorf-tabs { gap: 0.35rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.idle-dorf-tab {
  border-radius: 12px 12px 6px 6px;
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
  border: 1px solid var(--line);
  position: relative;
  min-height: 44px;
  flex-shrink: 0;
  /* Hover-Performance-Fix (26.07.2026, Spieler-Video-Beweis "Hover ruckelt/
     reagiert verzoegert"): animierte bisher "top" (siehe Kommentar unten) -
     eine LAYOUT-Eigenschaft, die bei jedem Animationsframe einen echten
     Reflow erzwingt, statt nur zu compositen. Auf "transform" umgestellt
     (GPU-komponiert, kein Layout-Neuaufbau) - identisches visuelles
     Ergebnis (-2px nach oben), siehe .active/:hover unten. */
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.idle-dorf-tab:not(:disabled):hover { transform: translateY(-2px); color: var(--ink); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.idle-dorf-tab.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 28%, var(--paper-2)), var(--paper-2));
  color: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.idle-dorf-tab.active::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -0.56rem;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 70%, transparent);
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) { .idle-dorf-tab { transition: none; } }

/* KRITISCHER FUND (Phase 5.1, dritte Runde, echter Nutzer-Screenshot):
   die vorherige Fassung (flex-basis:100% auf einer einzelnen Label-Zeile
   VOR jeder Gruppe) loeste zwar die Ueberlappung, erzwang aber JEDE
   Gruppe auf eine eigene volle Zeile - bei 4 Gruppen also mindestens 5
   Zeilen (Kampf allein + 4x Label+Buttons), extrem viel vertikaler
   Platzverbrauch, Spielinhalt weit nach unten gedrueckt, Gruppen wirkten
   durch die langen Trennlinien optisch nicht zusammengehoerig.
   Jetzt echte Gruppen-Container (index.html: .idle-dorf-tab-group >
   .idle-dorf-tab-group-label + .idle-dorf-tab-group-buttons): jede
   Gruppe ist eine eigene kleine Karte, mehrere Karten stehen nebeneinander
   und brechen nur als GANZES Paket um, wenn der Platz nicht reicht -
   keine erzwungenen Vollzeilen mehr, kein Kampf-Solo-Zeile, keine langen
   Trennlinien zwischen Gruppen (nur noch eine dezente Kartenumrandung).
   Per Default (auch Mobil/Tablet) sind Gruppe/Buttons-Container
   "display:contents" - das nimmt NUR die Box selbst aus dem Layout, die
   echten Kind-Elemente (Label versteckt, einzelne Tab-Buttons) bleiben
   normale, direkte Flex-Kinder von .idle-dorf-tabs, exakt wie vor der
   Gruppierung. Zusaetzliche Absicherung: das mobile Ueberlauf-Skript
   (bkmp-app-mode-bootstrap.js) loest die drei Haupt-Tabs zusaetzlich
   aktiv aus ihren Gruppen und entfernt die dann leeren Gruppen-Huellen
   komplett aus dem DOM, bevor es die restlichen Tabs ins "Mehr"-Menue
   verschiebt - mobile Bottom-Navigation bleibt dadurch unveraendert. */
.idle-dorf-tab-group { display: contents; }
.idle-dorf-tab-group-buttons { display: contents; }
.idle-dorf-tab-group-label { display: none; }

/* Phase 7.1 Stufe 3 (21.07., Nutzer-Auftrag "Navigation von Gruppenkarten
   befreien... keine vier einzelnen Navigationskarten... maximal zwei
   Navigationszeilen"): die vier sichtbaren Gruppenkarten (Basis/Sammlung/
   Herausforderungen/Gilde) sind komplett entfernt - .idle-dorf-tab-group
   bleibt jetzt AUCH auf Desktop-Breite "display:contents" (wie im mobilen
   Grundzustand), .idle-dorf-tabs selbst ist der einzige Flex-Wrap-
   Container fuer alle 15 Tabs. Bewusst OHNE komplett neuen "Mehr"-
   Dropdown-Mechanismus (der Auftrag erlaubt das explizit als Alternative:
   "Alternativ darf eine zweite kompakte Zeile verwendet werden") - ein
   zweiter, von System B (bkmpIdleSetupMobileTabOverflow, siehe bkmp-app-
   mode-bootstrap.js) unabhaengiger DOM-Verschiebe-Mechanismus haette das
   erst in derselben Nacht gefundene "Fenster startet schmal, Buttons
   verschwinden beim Verbreitern"-Bugmuster (siehe Fix 13 oben) erneut
   riskiert. Bei 15 kompakten Tabs (~90px Durchschnittsbreite inkl. Icon+
   Label) passen bei typischer Kartenbreite (~1080px) rechnerisch ~11-12
   pro Zeile - alle 15 bleiben damit zuverlaessig innerhalb von zwei
   Zeilen, ohne Gruppenrahmen/-ueberschriften, klar sichtbar, keine
   Funktion versteckt. */
@media (min-width: 761px) {
  .idle-dorf-tabs { gap: 0.4rem 0.5rem; padding: 0 0.1rem 0.4rem; align-items: flex-start; }
  .idle-dorf-tab-group { display: contents; }
  .idle-dorf-tab-group-buttons { display: contents; }
  .idle-dorf-tab-group-label { display: none; }
  .idle-dorf-tab {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
    min-height: 34px;
  }
}
/* Nachtrag (21.07., Spieler-Wunsch ChronoKora zum gequetschten Kampfbereich
   bei 1920x1080: "Mach doch einfach oben alle Button viel schmaler von der
   Hoehe?"): eigene, dichtere Fassung NUR ab einer echten Desktop-Breite
   (min-width:1000px, bewusst enger als die 761px-Grenze oben - bei knapp
   761px-1000px brechen die 4 Gruppen ohnehin schon in mehrere Zeilen um,
   dort wuerde eine kleinere min-height allein nicht viel bringen, aber
   das Risiko fuer Tablet-Touch-Ziele unnoetig erhoehen). min-height 44px
   war fuer Touch-Ziele gedacht (mobile Basisregel, siehe .idle-dorf-tab
   oben) - auf echtem Desktop mit Maus nicht noetig, hier bewusst kleiner.
   Gibt der Kampfbereich direkt darunter spuerbar mehr Hoehe zurueck, ohne
   die mobile/Tablet-Touch-Groesse anzutasten. */
/* Nachtrag Stufe 3: seit dem Wegfall der Gruppenkarten (siehe oben) sind
   .idle-dorf-tab-group/-buttons/-label hier wirkungslos (display:contents
   traegt kein Padding/Gap) - nur noch die Tabs/Zeilen-Werte selbst
   zusaetzlich verengt. */
@media (min-width: 1000px) {
  .idle-dorf-tabs { gap: 0.35rem 0.5rem; }
  .idle-dorf-tab {
    min-height: 30px;
    padding: 0.26rem 0.6rem;
    font-size: 0.75rem;
    min-width: 0;
  }
}

/* ---- Schlachtfeld: Arena statt Info-Box ---- */
.idle-battlefield {
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 115%, rgba(255, 138, 76, 0.16), transparent 60%),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--purple) 10%, var(--paper)), var(--paper) 75%);
  border: 1px solid var(--line);
}
/* gluehende Mittelachse als "VS"-Trennlinie zwischen Dorf und Drache */
.idle-battlefield::before {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--gold) 55%, transparent), transparent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 45%, transparent));
}
.idle-village, .idle-dragon { position: relative; }
/* Boden-Schattenellipse, damit Dorf/Drache wie in einer Arena "stehen"
   statt frei zu schweben. */
.idle-village::after, .idle-dragon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 62%;
  height: 12px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.4), transparent 72%);
  z-index: -1;
}

.idle-hp-bar { height: 12px; border-radius: 6px; background: color-mix(in srgb, black 45%, var(--paper)); border: 1px solid var(--line); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); }
.idle-hp-fill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.idle-hp-fill-village { background: linear-gradient(180deg, #6ee7a0, #16a34a); }
.idle-hp-fill-dragon { background: linear-gradient(180deg, #fb8a7a, #dc2626); }

/* ---- Bestenliste ---- */
.idle-dorf-leaderboard-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.idle-dorf-leaderboard-tabs .idle-dorf-tab { flex: none; min-width: auto; padding: 0.4rem 0.8rem; }

/* ============================================================
   Weltboss/Raid-Event
   ============================================================ */

/* ---- Idle-Dorf-Button: Feuer/Glow waehrend der Vorbereitungsphase ---- */
.idle-dorf-btn.raid-prep {
  border-color: #f97316;
  color: #fed7aa;
  background: linear-gradient(135deg, #7c2d12, #431407);
  animation: raidBtnPulse 1.4s ease-in-out infinite;
}
.idle-dorf-btn.raid-prep::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.55), transparent 70%);
  animation: raidBtnFlameGlow 1.2s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes raidBtnPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(249, 115, 22, 0.5); }
  50% { box-shadow: 0 0 22px rgba(249, 115, 22, 0.9), 0 0 40px rgba(239, 68, 68, 0.5); }
}
@keyframes raidBtnFlameGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.15); }
}
.raid-btn-countdown { font-weight: 800; font-variant-numeric: tabular-nums; margin-left: 0.3rem; }

/* ---- Beitritts-Banner im Idle-Dorf-Fenster ---- */
.raid-join-banner {
  position: relative;
  margin-bottom: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #431407, #7c2d12 60%, #431407);
  border: 1.5px solid #f97316;
  box-shadow: 0 0 30px rgba(249, 115, 22, 0.35);
  text-align: center;
  color: #fed7aa;
}
.raid-join-banner-title { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 700; color: #fef3c7; margin-bottom: 0.4rem; }
.raid-join-banner-countdown { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #fed7aa; margin: 0.3rem 0 0.7rem; }
.raid-join-banner-btn { background: linear-gradient(135deg, #fbbf24, #ea580c); color: #1c0a00; border: none; font-weight: 800; padding: 0.6rem 1.4rem; }
.raid-join-banner-joined { font-size: 0.85rem; color: #bbf7d0; font-weight: 700; }
.raid-join-banner-participants { font-size: 0.78rem; color: #fed7aa; opacity: 0.85; margin-top: 0.5rem; }

/* ---- Gemeinsame Raid-Kampfansicht ---- */
.raid-combat-view { position: relative; }
.raid-combat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #431407, #1c0a00);
  border: 1px solid #f97316;
  color: #fed7aa;
  font-size: 0.82rem;
  font-weight: 700;
}
.raid-combat-header .raid-timer { font-variant-numeric: tabular-nums; color: #fbbf24; }

.raid-battlefield {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 1.2rem;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 15%, rgba(249, 115, 22, 0.18), var(--paper) 75%);
  border: 2px solid #f97316;
  box-shadow: inset 0 0 60px rgba(249, 115, 22, 0.15), 0 0 40px rgba(249, 115, 22, 0.25);
  overflow: hidden;
  min-height: 260px;
}
.raid-city, .raid-boss {
  position: relative;
  text-align: center;
  width: 44%;
  border-radius: 18px;
  padding: 0.9rem 0.7rem;
  border: 2px solid transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-3)) padding-box,
              linear-gradient(135deg, #fbbf24, #ea580c) border-box;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}
.raid-city-sprite {
  position: relative;
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* Liegt als echtes Video vor (assets/dragons/raid-stadt.mp4) statt eines
     statischen Bildes - aspect-ratio auf die echten Video-Massse gesetzt,
     damit es ohne Zuschneiden/Verzerren exakt in den Container passt. */
  aspect-ratio: 2090 / 992;
  object-fit: cover;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4));
  border-radius: 10px;
  overflow: hidden;
}
.raid-boss-sprite {
  position: relative;
  display: block;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: cover;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 18px rgba(239, 68, 68, 0.4));
  transition: transform 0.15s ease;
}
/* Zerathor liegt als echtes Video vor (assets/dragons/zerathor.mp4) statt
   eines Bild-Sprite-Streifens - aspect-ratio auf die echten Video-Massse
   gesetzt, damit es ohne Zuschneiden/Verzerren exakt in den Container
   passt. (Werte der ueberarbeiteten Fassung vom 16.07., 1012 x 720.) */
.raid-sprite-zerathor {
  aspect-ratio: 1012 / 720;
}
/* Gildenboss "Malthyros, der Weltenverschlinger" - eigenes Video (kein
   Zerathor-Platzhalter mehr), siehe supabase-guild-boss.sql. */
.raid-sprite-malthyros {
  aspect-ratio: 1546 / 1342;
}

/* Die frueheren einzelnen Angriffs-Frames (Ruhepose/Atem-startet/voller
   Atem/Abklingen) stecken jetzt in der Video-Schleife selbst drin - der
   Angriffs-Hinweis beim Klick/Tick (bkmpRaidPlayBossAttackSprite) wird
   deshalb per Aufhellungs-/Skalierungs-Puls statt Frame-Wechsel gezeigt. */
@keyframes raidBossSpriteAttackPulse {
  0% { filter: brightness(1) drop-shadow(0 10px 18px rgba(239, 68, 68, 0.4)); transform: scale(1); }
  30% { filter: brightness(1.6) drop-shadow(0 10px 26px rgba(248, 113, 113, 0.8)); transform: scale(1.04); }
  100% { filter: brightness(1) drop-shadow(0 10px 18px rgba(239, 68, 68, 0.4)); transform: scale(1); }
}
.raid-boss-attacking .raid-boss-sprite { animation: raidBossSpriteAttackPulse 0.75s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .raid-boss-attacking .raid-boss-sprite { animation: none; }
}
.raid-boss-name { margin-top: 0.4rem; font-size: 0.9rem; font-weight: 800; color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.6); }
.raid-boss-level { font-size: 0.7rem; color: var(--muted); }

.raid-hp-bar { height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 14%, var(--paper)); overflow: hidden; border: 1px solid var(--line); margin-top: 0.6rem; }
.raid-hp-fill { height: 100%; transition: width 0.3s ease; }
.raid-hp-fill-city { background: linear-gradient(90deg, #4ade80, #22c55e); }
.raid-hp-fill-boss { background: linear-gradient(90deg, #f87171, #b91c1c); }
.raid-hp-label { font-size: 0.72rem; color: var(--muted); margin-top: 0.25rem; font-weight: 700; }
.raid-city-stats { font-size: 0.7rem; color: var(--muted); margin-top: 0.15rem; }

.raid-clickable { cursor: pointer; }
.raid-clickable:active .raid-boss-sprite { transform: scale(0.95); }

/* .raid-vs-badge / .raid-action-bar / .idle-res-strip sind Teil des
   App-Modus-Redesigns (Phase 15/16, style.css weiter unten) und stehen
   fest im HTML (index.html) - auf der normalen Website standardmaessig
   ausgeblendet, damit dort exakt nichts Neues zu sehen ist ("Website
   bleibt Website"). Erst html.bkmp-app-mode schaltet sie sichtbar. */
.raid-vs-badge,
.raid-action-bar,
.idle-res-strip {
  display: none;
}

/* ---- Epischere Kampf-Animationen ---- */
.raid-fx { position: absolute; pointer-events: none; }
.raid-fx-arrow { top: 45%; left: 42%; width: 30px; height: 4px; background: linear-gradient(90deg, transparent, #f5d58a, var(--gold)); border-radius: 2px; animation: raidArrowFly 0.45s ease forwards; }
.raid-fx-fireball { top: 40%; left: 42%; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #fef3c7, #f97316 55%, transparent 80%); box-shadow: 0 0 18px #f97316; animation: raidFireballFly 0.5s ease forwards; }
.raid-fx-lightning { top: 20%; left: 46%; width: 6px; height: 60%; background: linear-gradient(180deg, #fef9c3, #38bdf8); clip-path: polygon(50% 0%, 100% 10%, 60% 45%, 100% 50%, 20% 100%, 40% 55%, 0% 50%); animation: raidLightningStrike 0.35s ease forwards; }
.raid-fx-magic { top: 45%; left: 42%; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, #e9d5ff, #a78bfa 55%, transparent 80%); box-shadow: 0 0 16px #a78bfa; animation: raidFireballFly 0.55s ease forwards; }
.raid-fx-boss-attack { bottom: 40%; right: 42%; width: 34px; height: 20px; border-radius: 50%; background: radial-gradient(ellipse, #fecaca, #dc2626 55%, transparent 80%); box-shadow: 0 0 24px #dc2626; animation: raidBossAttackFly 0.55s ease forwards; }

@keyframes raidArrowFly { from { transform: translateX(0); opacity: 1; } to { transform: translateX(260px); opacity: 0; } }
@keyframes raidFireballFly { from { transform: translateX(0) scale(0.5); opacity: 1; } to { transform: translateX(260px) scale(1.4); opacity: 0; } }
@keyframes raidLightningStrike { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes raidBossAttackFly { from { transform: translateX(0) scale(0.6); opacity: 1; } to { transform: translateX(-260px) scale(1.5); opacity: 0; } }

.raid-dmg-float { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-weight: 800; font-size: 0.95rem; color: #f87171; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); animation: idleDmgFloat 0.9s ease forwards; pointer-events: none; }
.raid-dmg-crit { color: #fbbf24; font-size: 1.3rem; text-shadow: 0 0 10px rgba(251, 191, 36, 0.8); }
.raid-dmg-click { color: #7dd3fc; left: 65%; }
.raid-hit-flash { animation: idleHitFlash 0.25s ease; }

.raid-participants-list { margin-top: 0.9rem; font-size: 0.78rem; }
.raid-participant-row { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.raid-participant-row.is-me { color: var(--gold); font-weight: 700; }

/* ---- Ergebnis-Screen ---- */
.raid-result-card { text-align: center; padding: 1rem; }
.raid-result-title { font-family: 'Fraunces', serif; font-size: 1.5rem; margin-bottom: 0.6rem; }
.raid-result-title.won { color: #4ade80; }
.raid-result-title.lost { color: #f87171; }
.raid-result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.7rem; margin: 1rem 0; }
.raid-result-stat { padding: 0.7rem; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.raid-result-stat-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.raid-result-stat-value { font-size: 1.1rem; font-weight: 800; margin-top: 0.2rem; }
.raid-result-rewards { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1rem; font-weight: 700; margin-top: 0.8rem; }
.raid-result-flawless { color: #facc15; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.6rem; }
.raid-result-mvp { color: var(--gold); font-size: 0.95rem; }

/* Nutzerwunsch 19.07.: ausklappbare Schadensliste aller Teilnehmer im
   Raid-Ergebnis-Fenster (bkmpRaidResultParticipantsHTML), gleiches
   Auf/Zu-Muster wie .achievement-category-head/-body. */
.raid-result-participants { margin-top: 1rem; text-align: left; }
.raid-result-participants-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.raid-result-participants-toggle:hover { border-color: var(--gold); }
.raid-result-participants-toggle-icon { color: var(--gold); font-size: 0.75rem; }
.raid-result-participants-list {
  margin-top: 0.5rem;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.3rem 0.7rem;
}
.raid-result-participant-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--line);
}
.raid-result-participant-row:last-child { border-bottom: none; }
.raid-result-participant-row.is-me { color: var(--gold); font-weight: 700; }
.raid-result-participant-rank { flex: none; width: 2.2rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.raid-result-participant-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raid-result-participant-damage { flex: none; font-variant-numeric: tabular-nums; }
.raid-result-participant-damage small { color: var(--muted); font-weight: 400; }

.raid-result-zerathor-code {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 2px solid transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box,
              linear-gradient(135deg, #facc15, #a78bfa, #facc15) border-box;
  background-size: 100% 100%, 220% 220%;
  animation: bkmpTierGlow 3.5s ease infinite;
}
.raid-result-zerathor-title { font-weight: 800; color: var(--gold); margin-bottom: 0.5rem; }
.raid-result-zerathor-code-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; }
.raid-result-zerathor-code-value {
  font-family: 'Courier New', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  user-select: all;
}
.raid-result-zerathor-hint { font-size: 0.75rem; color: var(--muted); margin-top: 0.5rem; }

@media (max-width: 640px) {
  .raid-city, .raid-boss { width: 46%; }
  .raid-battlefield { padding: 1rem 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .idle-dorf-btn.raid-prep, .idle-dorf-btn.raid-prep::before { animation: none; }
  .raid-fx-arrow, .raid-fx-fireball, .raid-fx-lightning, .raid-fx-magic, .raid-fx-boss-attack, .raid-dmg-float, .raid-hit-flash { animation: none !important; }
}

/* ---- Admin: Testkampf-Ausgabe ---- */
.idle-admin-test-output {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
  .idle-dorf-overlay .idle-dorf-card { animation: none; }
  .idle-hit-flash, .idle-arrow, .idle-fire-breath, .idle-dmg-float, .idle-lightning-bolt { animation: none !important; }
  /* Kampf-Feinschliff (03.08.2026): dieselbe explizite Abschalt-Liste wie
     oben, erweitert um die neuen Uebergangs-/Feedback-/Status-Klassen -
     die globale Kollektivregel (*, *::before, *::after{animation-duration:
     .001ms!important}, siehe weiter oben in dieser Datei) deckt die
     meisten davon bereits automatisch ab, hier trotzdem explizit gelistet
     (gleiches Muster wie die bestehende Zeile direkt darueber), damit ein
     spaeteres, unbedachtes !important auf einer dieser Klassen nicht
     versehentlich die Kollektivregel aushebeln kann. */
  .idle-dmg-crit,
  .idle-dragon-spawn-in,
  .idle-dragon-defeat-out,
  .idle-village-damage-pulse .idle-village-sprite,
  .idle-hp-bar-flash,
  .idle-combat-status { animation: none !important; }
}

/* ---- 18 neue Kosmetiken (Idle Dorf) ---- */
.mc-cosmetic-rotgruen {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #ef4444, #22c55e, #ef4444) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 220% 220%; animation: bkmpTierGlow 3s ease infinite;
}
.mc-cosmetic-rotgruen #mcNameBadgeText, .mc-cosmetic-rotgruen .cosmetic-swatch-name, .mc-cosmetic-rotgruen .leaderboard-name-text {
  background: linear-gradient(120deg, #ef4444, #22c55e, #ef4444); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 3s ease infinite;
}

.mc-cosmetic-goldweiss {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, var(--gold), #fff, var(--gold)) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 220% 220%; animation: bkmpTierGlow 3s ease infinite;
}
.mc-cosmetic-goldweiss #mcNameBadgeText, .mc-cosmetic-goldweiss .cosmetic-swatch-name, .mc-cosmetic-goldweiss .leaderboard-name-text {
  background: linear-gradient(120deg, var(--gold), #fff, var(--gold)); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 3s ease infinite;
}

.mc-cosmetic-lilapink {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #a78bfa, #f472b6, #a78bfa) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 220% 220%; animation: bkmpTierGlow 3.2s ease infinite;
}
.mc-cosmetic-lilapink #mcNameBadgeText, .mc-cosmetic-lilapink .cosmetic-swatch-name, .mc-cosmetic-lilapink .leaderboard-name-text {
  background: linear-gradient(120deg, #a78bfa, #f472b6, #a78bfa); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 3.2s ease infinite;
}

.mc-cosmetic-tuerkisblau {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #2dd4bf, #38bdf8, #2dd4bf) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 220% 220%; animation: bkmpTierGlow 3.2s ease infinite;
}
.mc-cosmetic-tuerkisblau #mcNameBadgeText, .mc-cosmetic-tuerkisblau .cosmetic-swatch-name, .mc-cosmetic-tuerkisblau .leaderboard-name-text {
  background: linear-gradient(120deg, #2dd4bf, #38bdf8, #2dd4bf); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 3.2s ease infinite;
}

.mc-cosmetic-orangerot {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #f97316, #ef4444, #f97316) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 220% 220%; animation: bkmpTierGlow 2.8s ease infinite;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.35);
}
.mc-cosmetic-orangerot #mcNameBadgeText, .mc-cosmetic-orangerot .cosmetic-swatch-name, .mc-cosmetic-orangerot .leaderboard-name-text {
  background: linear-gradient(120deg, #f97316, #ef4444, #f97316); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 2.8s ease infinite;
}

.mc-cosmetic-regenbogen_idle {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(90deg, #ef4444, #f97316, #facc15, #22c55e, #38bdf8, #a78bfa, #ef4444) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 300% 100%; animation: streamerShimmer 5s linear infinite;
}
.mc-cosmetic-regenbogen_idle #mcNameBadgeText, .mc-cosmetic-regenbogen_idle .cosmetic-swatch-name, .mc-cosmetic-regenbogen_idle .leaderboard-name-text {
  background: linear-gradient(90deg, #ef4444, #f97316, #facc15, #22c55e, #38bdf8, #a78bfa, #ef4444); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: streamerShimmer 5s linear infinite;
}

.mc-cosmetic-amethyst {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #7c3aed, #c4b5fd, #7c3aed) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 220% 220%; animation: bkmpTierGlow 3.4s ease infinite;
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.35);
}
.mc-cosmetic-amethyst #mcNameBadgeText, .mc-cosmetic-amethyst .cosmetic-swatch-name, .mc-cosmetic-amethyst .leaderboard-name-text {
  background: linear-gradient(120deg, #7c3aed, #c4b5fd, #7c3aed); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 3.4s ease infinite;
}

.mc-cosmetic-smaragd {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #059669, #34d399, #059669) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 220% 220%; animation: bkmpTierGlow 3.4s ease infinite;
}
.mc-cosmetic-smaragd #mcNameBadgeText, .mc-cosmetic-smaragd .cosmetic-swatch-name, .mc-cosmetic-smaragd .leaderboard-name-text {
  background: linear-gradient(120deg, #059669, #34d399, #059669); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 3.4s ease infinite;
}

.mc-cosmetic-kosmos {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #1e1b4b, #4c1d95, #6d28d9, #1e1b4b) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 260% 260%; animation: bkmpTierGlow 5s ease infinite;
  box-shadow: 0 0 16px rgba(109, 40, 217, 0.45);
}
.mc-cosmetic-kosmos #mcNameBadgeText, .mc-cosmetic-kosmos .cosmetic-swatch-name, .mc-cosmetic-kosmos .leaderboard-name-text {
  background: linear-gradient(120deg, #a78bfa, #f472b6, #38bdf8, #a78bfa); background-size: 260% 260%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 5s ease infinite;
}

.mc-cosmetic-aurora_himmel {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #34d399, #38bdf8, #a78bfa, #34d399) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 260% 260%; animation: bkmpTierGlow 3.6s ease infinite;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.4);
}
.mc-cosmetic-aurora_himmel #mcNameBadgeText, .mc-cosmetic-aurora_himmel .cosmetic-swatch-name, .mc-cosmetic-aurora_himmel .leaderboard-name-text {
  background: linear-gradient(120deg, #34d399, #38bdf8, #a78bfa, #34d399); background-size: 260% 260%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 3.6s ease infinite;
}

.mc-cosmetic-blutmond {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #7f1d1d, #ef4444, #7f1d1d) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 220% 220%; animation: bkmpTierGlow 4s ease infinite;
  box-shadow: 0 0 16px rgba(127, 29, 29, 0.5);
}
.mc-cosmetic-blutmond #mcNameBadgeText, .mc-cosmetic-blutmond .cosmetic-swatch-name, .mc-cosmetic-blutmond .leaderboard-name-text {
  background: linear-gradient(120deg, #ef4444, #7f1d1d, #ef4444); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 4s ease infinite;
}

.mc-cosmetic-sonnenlicht {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #fde68a, #facc15, #fde68a) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 220% 220%; animation: bkmpTierGlow 3s ease infinite;
}
.mc-cosmetic-sonnenlicht #mcNameBadgeText, .mc-cosmetic-sonnenlicht .cosmetic-swatch-name, .mc-cosmetic-sonnenlicht .leaderboard-name-text {
  background: linear-gradient(120deg, #fde68a, #facc15, #fde68a); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 3s ease infinite;
}

.mc-cosmetic-galaxie_tiefe {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #312e81, #7c3aed, #f472b6, #312e81) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 300% 100%; animation: streamerShimmer 6.5s linear infinite;
  box-shadow: 0 0 16px rgba(49, 46, 129, 0.5);
}
.mc-cosmetic-galaxie_tiefe #mcNameBadgeText, .mc-cosmetic-galaxie_tiefe .cosmetic-swatch-name, .mc-cosmetic-galaxie_tiefe .leaderboard-name-text {
  background: linear-gradient(120deg, #7c3aed, #f472b6, #38bdf8, #7c3aed); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: streamerShimmer 6.5s linear infinite;
}

.mc-cosmetic-mythisch {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, var(--gold), #a78bfa, #38bdf8, #f472b6, var(--gold)) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 320% 320%; animation: bkmpTierGlow 4.5s ease infinite;
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 40%, #a78bfa);
}
.mc-cosmetic-mythisch #mcNameBadgeText, .mc-cosmetic-mythisch .cosmetic-swatch-name, .mc-cosmetic-mythisch .leaderboard-name-text {
  background: linear-gradient(120deg, var(--gold), #a78bfa, #38bdf8, #f472b6, var(--gold)); background-size: 320% 320%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 4.5s ease infinite;
}

/* Prestige-gestaffelte Kosmetiken (16.07., Lategame-Content) - gleiche
   Doppel-Hintergrund-Technik wie die uebrigen .mc-cosmetic-* Klassen oben. */
.mc-cosmetic-portal_wirbel {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #4c1d95, #0891b2, #7e22ce, #4c1d95) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 280% 280%; animation: bkmpTierGlow 4s ease infinite;
  box-shadow: 0 0 20px rgba(8, 145, 178, 0.45);
}
.mc-cosmetic-portal_wirbel #mcNameBadgeText, .mc-cosmetic-portal_wirbel .cosmetic-swatch-name, .mc-cosmetic-portal_wirbel .leaderboard-name-text {
  background: linear-gradient(120deg, #a78bfa, #22d3ee, #c084fc, #a78bfa); background-size: 280% 280%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 4s ease infinite;
}

.mc-cosmetic-ewiger_kreislauf {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, var(--gold), #1e3a8a, #7e22ce, var(--gold)) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 300% 300%; animation: bkmpTierGlow 6s ease infinite;
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 35%, #1e3a8a);
}
.mc-cosmetic-ewiger_kreislauf #mcNameBadgeText, .mc-cosmetic-ewiger_kreislauf .cosmetic-swatch-name, .mc-cosmetic-ewiger_kreislauf .leaderboard-name-text {
  background: linear-gradient(120deg, var(--gold), #60a5fa, #c084fc, var(--gold)); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 6s ease infinite;
}

.mc-cosmetic-jenseits_der_sterne {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #030712, #4c1d95, #f8fafc, #030712) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 320% 320%; animation: bkmpTierGlow 5s ease infinite;
  box-shadow: 0 0 24px rgba(248, 250, 252, 0.35);
}
.mc-cosmetic-jenseits_der_sterne #mcNameBadgeText, .mc-cosmetic-jenseits_der_sterne .cosmetic-swatch-name, .mc-cosmetic-jenseits_der_sterne .leaderboard-name-text {
  background: linear-gradient(120deg, #f8fafc, #a78bfa, #38bdf8, #f8fafc); background-size: 320% 320%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 5s ease infinite;
}

.mc-cosmetic-leuchtendgold {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, var(--gold), #fff7cc, var(--gold)) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 220% 220%; animation: bkmpTierGlow 2.2s ease infinite;
  box-shadow: 0 0 20px color-mix(in srgb, var(--gold) 55%, transparent);
}
.mc-cosmetic-leuchtendgold #mcNameBadgeText, .mc-cosmetic-leuchtendgold .cosmetic-swatch-name, .mc-cosmetic-leuchtendgold .leaderboard-name-text {
  background: linear-gradient(120deg, var(--gold), #fff7cc, var(--gold)); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 2.2s ease infinite;
}

.mc-cosmetic-drachenfeuer {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #7c2d12, #f97316, #facc15, #7c2d12) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 300% 100%; animation: streamerShimmer 4s linear infinite;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.5);
}
.mc-cosmetic-drachenfeuer #mcNameBadgeText, .mc-cosmetic-drachenfeuer .cosmetic-swatch-name, .mc-cosmetic-drachenfeuer .leaderboard-name-text {
  background: linear-gradient(120deg, #facc15, #f97316, #7c2d12, #f97316); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: streamerShimmer 4s linear infinite;
}

.mc-cosmetic-schatten_dunkel {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #0a0a0f, #27272a, #0a0a0f) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 220% 220%; animation: bkmpTierGlow 4s ease infinite;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.6);
}
.mc-cosmetic-schatten_dunkel #mcNameBadgeText, .mc-cosmetic-schatten_dunkel .cosmetic-swatch-name, .mc-cosmetic-schatten_dunkel .leaderboard-name-text {
  background: linear-gradient(120deg, #71717a, #27272a, #71717a); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 4s ease infinite;
}

.mc-cosmetic-sternenstaub {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #e0e7ff, #a78bfa, #38bdf8, #e0e7ff) border-box;
  border: 1px solid transparent; background-size: 100% 100%, 300% 100%; animation: streamerShimmer 7s linear infinite;
  box-shadow: 0 0 18px rgba(199, 210, 254, 0.5);
}
.mc-cosmetic-sternenstaub #mcNameBadgeText, .mc-cosmetic-sternenstaub .cosmetic-swatch-name, .mc-cosmetic-sternenstaub .leaderboard-name-text {
  background: linear-gradient(120deg, #e0e7ff, #a78bfa, #38bdf8, #e0e7ff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: streamerShimmer 7s linear infinite;
}

/* ---- 7 weitere Kosmetiken 16.07. (Gilde/Arena/Weltboss/Drachenzucht/
   Streak/Steampunk) - siehe window.BKMP_IDLE_COSMETICS in idledorf.js. ---- */
.mc-cosmetic-guild_heraldik {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(135deg, #7c2d12, #b45309, #facc15, #7c2d12) border-box;
  border: 1.5px solid transparent; background-size: 100% 100%, 260% 260%;
  box-shadow: 0 0 16px rgba(180, 83, 9, 0.4); animation: bkmpTierGlow 6s ease infinite;
}
.mc-cosmetic-guild_heraldik #mcNameBadgeText, .mc-cosmetic-guild_heraldik .cosmetic-swatch-name, .mc-cosmetic-guild_heraldik .leaderboard-name-text {
  background: linear-gradient(135deg, #fbbf24, #b45309, #fde68a); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 6s ease infinite;
}

.mc-cosmetic-arena_blutrausch {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(120deg, #7f1d1d, #ef4444, #7f1d1d) border-box;
  border: 1.5px solid transparent; background-size: 100% 100%, 220% 220%;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.5); animation: bkmpArenaPulse 1.8s ease-in-out infinite;
}
.mc-cosmetic-arena_blutrausch #mcNameBadgeText, .mc-cosmetic-arena_blutrausch .cosmetic-swatch-name, .mc-cosmetic-arena_blutrausch .leaderboard-name-text {
  background: linear-gradient(120deg, #fca5a5, #ef4444, #7f1d1d, #ef4444, #fca5a5); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpRainbowBorder 2.5s linear infinite;
}
@keyframes bkmpArenaPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.5); }
  50% { box-shadow: 0 0 26px rgba(239, 68, 68, 0.85); }
}

.mc-cosmetic-weltenbezwinger {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(150deg, #2e1065, #7e22ce, #1e0a3c) border-box;
  border: 1.5px solid transparent; background-size: 100% 100%, 220% 220%;
  box-shadow: 0 0 18px rgba(126, 34, 206, 0.5); animation: bkmpTierGlow 5s ease infinite;
}
.mc-cosmetic-weltenbezwinger #mcNameBadgeText, .mc-cosmetic-weltenbezwinger .cosmetic-swatch-name, .mc-cosmetic-weltenbezwinger .leaderboard-name-text {
  background: linear-gradient(150deg, #c4b5fd, #7e22ce, #2e1065, #7e22ce, #c4b5fd); background-size: 260% 260%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpTierGlow 5s ease infinite;
}

.mc-cosmetic-drachenschuppen {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(100deg, #34d399, #38bdf8, #a78bfa, #34d399) border-box;
  border: 1.5px solid transparent; background-size: 100% 100%, 280% 280%;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4); animation: bkmpTierGlow 4.5s ease infinite;
}
.mc-cosmetic-drachenschuppen #mcNameBadgeText, .mc-cosmetic-drachenschuppen .cosmetic-swatch-name, .mc-cosmetic-drachenschuppen .leaderboard-name-text {
  background: linear-gradient(100deg, #6ee7b7, #38bdf8, #c4b5fd, #6ee7b7); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpRainbowBorder 4.5s linear infinite;
}

.mc-cosmetic-legendaerer_hort {
  border-color: transparent;
  background: linear-gradient(180deg, #0d0906, #0d0906) padding-box, linear-gradient(135deg, #facc15, #1a1206, #facc15) border-box;
  border: 1.5px solid transparent; background-size: 100% 100%, 260% 260%;
  box-shadow: 0 0 22px rgba(250, 204, 21, 0.55); animation: bkmpTierGlow 3.5s ease infinite;
}
.mc-cosmetic-legendaerer_hort .cosmetic-swatch-name { color: #fde68a; }
.mc-cosmetic-legendaerer_hort .cosmetic-swatch-desc { color: #eab308; }
.mc-cosmetic-legendaerer_hort #mcNameBadgeText, .mc-cosmetic-legendaerer_hort .leaderboard-name-text {
  background: linear-gradient(135deg, #fde68a, #facc15, #78350f, #facc15, #fde68a); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bkmpRainbowBorder 3.5s linear infinite;
}

.mc-cosmetic-gluetnfeuer {
  border-color: transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-2)) padding-box, linear-gradient(180deg, #fb923c, #ef4444) border-box;
  border: 1.5px solid transparent; box-shadow: 0 0 14px rgba(251, 146, 60, 0.45); animation: bkmpHeartbeatGlow 2.2s ease-in-out infinite;
}
.mc-cosmetic-gluetnfeuer #mcNameBadgeText, .mc-cosmetic-gluetnfeuer .cosmetic-swatch-name, .mc-cosmetic-gluetnfeuer .leaderboard-name-text {
  background: linear-gradient(90deg, #fdba74, #fb923c, #ef4444); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.mc-cosmetic-zahnradglanz {
  border-color: color-mix(in srgb, #b45309 55%, var(--line));
  background: linear-gradient(160deg, #2a1a0d, var(--paper-2));
  box-shadow: 0 0 12px rgba(180, 83, 9, 0.35);
}
.mc-cosmetic-zahnradglanz .cosmetic-swatch-name { color: #fbbf24; }
.mc-cosmetic-zahnradglanz .cosmetic-swatch-desc { color: #d69e5c; }
.mc-cosmetic-zahnradglanz #mcNameBadgeText, .mc-cosmetic-zahnradglanz .leaderboard-name-text {
  background: linear-gradient(90deg, #fbbf24, #92400e); -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .mc-cosmetic-guild_heraldik, .mc-cosmetic-guild_heraldik #mcNameBadgeText, .mc-cosmetic-guild_heraldik .cosmetic-swatch-name, .mc-cosmetic-guild_heraldik .leaderboard-name-text,
  .mc-cosmetic-arena_blutrausch, .mc-cosmetic-arena_blutrausch #mcNameBadgeText, .mc-cosmetic-arena_blutrausch .cosmetic-swatch-name, .mc-cosmetic-arena_blutrausch .leaderboard-name-text,
  .mc-cosmetic-weltenbezwinger, .mc-cosmetic-weltenbezwinger #mcNameBadgeText, .mc-cosmetic-weltenbezwinger .cosmetic-swatch-name, .mc-cosmetic-weltenbezwinger .leaderboard-name-text,
  .mc-cosmetic-drachenschuppen, .mc-cosmetic-drachenschuppen #mcNameBadgeText, .mc-cosmetic-drachenschuppen .cosmetic-swatch-name, .mc-cosmetic-drachenschuppen .leaderboard-name-text,
  .mc-cosmetic-legendaerer_hort, .mc-cosmetic-legendaerer_hort #mcNameBadgeText, .mc-cosmetic-legendaerer_hort .leaderboard-name-text,
  .mc-cosmetic-gluetnfeuer, .mc-cosmetic-gluetnfeuer #mcNameBadgeText, .mc-cosmetic-gluetnfeuer .cosmetic-swatch-name, .mc-cosmetic-gluetnfeuer .leaderboard-name-text { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-cosmetic-rotgruen, .mc-cosmetic-rotgruen #mcNameBadgeText, .mc-cosmetic-rotgruen .cosmetic-swatch-name, .mc-cosmetic-rotgruen .leaderboard-name-text,
  .mc-cosmetic-goldweiss, .mc-cosmetic-goldweiss #mcNameBadgeText, .mc-cosmetic-goldweiss .cosmetic-swatch-name, .mc-cosmetic-goldweiss .leaderboard-name-text,
  .mc-cosmetic-lilapink, .mc-cosmetic-lilapink #mcNameBadgeText, .mc-cosmetic-lilapink .cosmetic-swatch-name, .mc-cosmetic-lilapink .leaderboard-name-text,
  .mc-cosmetic-tuerkisblau, .mc-cosmetic-tuerkisblau #mcNameBadgeText, .mc-cosmetic-tuerkisblau .cosmetic-swatch-name, .mc-cosmetic-tuerkisblau .leaderboard-name-text,
  .mc-cosmetic-orangerot, .mc-cosmetic-orangerot #mcNameBadgeText, .mc-cosmetic-orangerot .cosmetic-swatch-name, .mc-cosmetic-orangerot .leaderboard-name-text,
  .mc-cosmetic-regenbogen_idle, .mc-cosmetic-regenbogen_idle #mcNameBadgeText, .mc-cosmetic-regenbogen_idle .cosmetic-swatch-name, .mc-cosmetic-regenbogen_idle .leaderboard-name-text,
  .mc-cosmetic-amethyst, .mc-cosmetic-amethyst #mcNameBadgeText, .mc-cosmetic-amethyst .cosmetic-swatch-name, .mc-cosmetic-amethyst .leaderboard-name-text,
  .mc-cosmetic-smaragd, .mc-cosmetic-smaragd #mcNameBadgeText, .mc-cosmetic-smaragd .cosmetic-swatch-name, .mc-cosmetic-smaragd .leaderboard-name-text,
  .mc-cosmetic-kosmos, .mc-cosmetic-kosmos #mcNameBadgeText, .mc-cosmetic-kosmos .cosmetic-swatch-name, .mc-cosmetic-kosmos .leaderboard-name-text,
  .mc-cosmetic-aurora_himmel, .mc-cosmetic-aurora_himmel #mcNameBadgeText, .mc-cosmetic-aurora_himmel .cosmetic-swatch-name, .mc-cosmetic-aurora_himmel .leaderboard-name-text,
  .mc-cosmetic-blutmond, .mc-cosmetic-blutmond #mcNameBadgeText, .mc-cosmetic-blutmond .cosmetic-swatch-name, .mc-cosmetic-blutmond .leaderboard-name-text,
  .mc-cosmetic-sonnenlicht, .mc-cosmetic-sonnenlicht #mcNameBadgeText, .mc-cosmetic-sonnenlicht .cosmetic-swatch-name, .mc-cosmetic-sonnenlicht .leaderboard-name-text,
  .mc-cosmetic-galaxie_tiefe, .mc-cosmetic-galaxie_tiefe #mcNameBadgeText, .mc-cosmetic-galaxie_tiefe .cosmetic-swatch-name, .mc-cosmetic-galaxie_tiefe .leaderboard-name-text,
  .mc-cosmetic-mythisch, .mc-cosmetic-mythisch #mcNameBadgeText, .mc-cosmetic-mythisch .cosmetic-swatch-name, .mc-cosmetic-mythisch .leaderboard-name-text,
  .mc-cosmetic-leuchtendgold, .mc-cosmetic-leuchtendgold #mcNameBadgeText, .mc-cosmetic-leuchtendgold .cosmetic-swatch-name, .mc-cosmetic-leuchtendgold .leaderboard-name-text,
  .mc-cosmetic-drachenfeuer, .mc-cosmetic-drachenfeuer #mcNameBadgeText, .mc-cosmetic-drachenfeuer .cosmetic-swatch-name, .mc-cosmetic-drachenfeuer .leaderboard-name-text,
  .mc-cosmetic-schatten_dunkel, .mc-cosmetic-schatten_dunkel #mcNameBadgeText, .mc-cosmetic-schatten_dunkel .cosmetic-swatch-name, .mc-cosmetic-schatten_dunkel .leaderboard-name-text,
  .mc-cosmetic-sternenstaub, .mc-cosmetic-sternenstaub #mcNameBadgeText, .mc-cosmetic-sternenstaub .cosmetic-swatch-name, .mc-cosmetic-sternenstaub .leaderboard-name-text,
  .mc-cosmetic-portal_wirbel, .mc-cosmetic-portal_wirbel #mcNameBadgeText, .mc-cosmetic-portal_wirbel .cosmetic-swatch-name, .mc-cosmetic-portal_wirbel .leaderboard-name-text,
  .mc-cosmetic-ewiger_kreislauf, .mc-cosmetic-ewiger_kreislauf #mcNameBadgeText, .mc-cosmetic-ewiger_kreislauf .cosmetic-swatch-name, .mc-cosmetic-ewiger_kreislauf .leaderboard-name-text,
  .mc-cosmetic-jenseits_der_sterne, .mc-cosmetic-jenseits_der_sterne #mcNameBadgeText, .mc-cosmetic-jenseits_der_sterne .cosmetic-swatch-name, .mc-cosmetic-jenseits_der_sterne .leaderboard-name-text { animation: none; }
}

/* ---- Titel-Farbverlauf (07.08., erster ueberhaupt - Jake's Feldfahrt) ----
   Anders als die .mc-cosmetic-*-Namens-Effekte oben (Klasse sitzt auf einem
   ANCESTOR-Element, z. B. dem Swatch-Button oder #mcNameBadge, und faerbt
   per Nachkommen-Selektor mehrere Kind-Elemente gleichzeitig) sitzt diese
   Klasse DIREKT auf dem Text-Element selbst (siehe renderTitlesPanel()'s
   .cosmetic-swatch-name bzw. die neue <span> im Namens-Badge in
   bkmp-site.js) - einfacher, da hier immer nur genau EIN Titeltext gefaerbt
   werden muss, kein zweites Nachkommen-Muster noetig. Nutzt dieselben
   bereits vorhandenen Keyframes (bkmpTierGlow/streamerShimmer) wie die
   Kosmetik-Verlaeufe oben. */
.title-gradient-farmgreen {
  background: linear-gradient(120deg, #4CAF50, #8BC34A, #4CAF50);
  background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bkmpTierGlow 3s ease infinite;
}
.title-gradient-farmgold {
  background: linear-gradient(120deg, #4CAF50, #E8A93C, #4CAF50);
  background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bkmpTierGlow 3.2s ease infinite;
}
.title-gradient-farmlegend {
  background: linear-gradient(90deg, #4CAF50, #E8A93C, #fff8ea, #E8A93C, #4CAF50);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: streamerShimmer 4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .title-gradient-farmgreen, .title-gradient-farmgold, .title-gradient-farmlegend { animation: none; }
}

/* ============================================================
   MapArt Marketplace ("Kartenaufträge")
   ============================================================ */
.orders-header-row { display: flex; justify-content: flex-end; margin-bottom: 0.8rem; }
.orders-subtabs { max-width: 640px; margin-left: auto; margin-right: auto; }

/* Card-Rahmen ums Formular - vorher schwebten die Felder direkt auf dem
   nackten Seitenhintergrund (kein Rahmen, keine Tiefe), dadurch wirkte es
   wie ein generisches Support-Ticket statt wie der Rest der Seite
   (Gold-Verlaufsrahmen wie beim Idle-Dorf/den grossen Modal-Karten). */
.map-order-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.8rem 1.6rem 2rem;
  border-radius: 22px;
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-3)) padding-box,
              linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 20%, transparent)) border-box;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.map-form-section-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.05rem;
  margin: 1.8rem 0 0.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.map-form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.map-order-form label { display: block; margin: 0.9rem 0 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.map-order-form input[type="text"],
.map-order-form input[type="number"],
.map-order-form input[type="date"],
.map-order-form input[type="file"],
.map-order-form textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.map-order-form input:focus,
.map-order-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent);
}
.map-order-form textarea { resize: vertical; }
.map-order-form .admin-checkbox-label { margin-top: 1rem; }
.map-order-form .btn-ja { margin-top: 1.2rem; width: 100%; }
@media (max-width: 640px) {
  .map-order-form { padding: 1.4rem 1.1rem 1.6rem; border-radius: 18px; }
}

.map-order-total-preview { margin-top: 0.6rem; font-size: 0.85rem; color: var(--gold); font-weight: 700; }
.map-order-submit-msg { margin-top: 0.6rem; font-size: 0.85rem; font-weight: 700; min-height: 1.2em; }

/* ---- Firmenbewerbung ("Bist du eine Kartenbaufirma? Bewirb dich hier") ---- */
.company-apply-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  max-width: 720px; margin: 0 auto 1.6rem;
  padding: 1.3rem 1.6rem;
  border-radius: 18px;
  border: 1.5px solid transparent;
  /* --gold-fixed statt --gold: soll die feste Markenfarbe bleiben und sich
     NICHT mit dem vom Nutzer waehlbaren Akzentfarben-Picker mitfaerben
     (siehe Kommentar bei --gold-fixed weiter oben in dieser Datei).
     Reihenfolge der Layer ist bei diesem Verlauf-Rahmen-Trick wichtig: die
     deckende Karten-Fuellung (padding-box) MUSS zuerst stehen (oben), der
     Gold-Verlauf (border-box) danach (darunter) - sonst ueberdeckt der
     undurchsichtige Gold-Layer die gesamte Karte statt nur den Rand
     (genau dieser vertauschte Reihenfolge-Fehler liess die Karte zuvor
     komplett goldgefuellt statt nur mit Gold-Rand erscheinen). */
  background: linear-gradient(180deg, var(--paper-2), var(--paper-3)) padding-box,
              linear-gradient(135deg, var(--gold-fixed), color-mix(in srgb, var(--gold-fixed) 55%, transparent)) border-box;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
}
.company-apply-cta-text h3 { font-family: 'Fraunces', serif; font-size: 1.15rem; margin: 0 0 0.3rem; }
.company-apply-cta-text p { margin: 0; font-size: 0.85rem; color: var(--muted); }
.company-apply-cta .btn-ja { flex-shrink: 0; }
.company-apply-form { margin-bottom: 1.8rem; }
.company-apply-logo-preview { margin-top: 0.7rem; }
.company-apply-logo-preview img { width: 96px; height: 96px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); padding: 0.4rem; }
@media (max-width: 640px) {
  .company-apply-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---- Admin: Firmenbewerbungen-Review ---- */
.admin-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5em; padding: 0.1em 0.5em;
  border-radius: 999px; background: var(--gold); color: #111018;
  font-size: 0.7rem; font-weight: 800; vertical-align: middle; margin-left: 0.4rem;
}
.company-application-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem;
  background: var(--paper-2); margin-bottom: 0.9rem;
}
.company-application-head { display: flex; align-items: center; gap: 0.8rem; }
.company-application-logo { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); padding: 0.25rem; flex-shrink: 0; }
.company-application-logo-empty { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.company-application-name { font-weight: 700; font-size: 1rem; }
.company-application-meta { font-size: 0.78rem; color: var(--muted); }
.company-application-desc { font-size: 0.85rem; margin: 0.6rem 0; color: var(--ink); }
.company-application-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.6rem; }
.company-application-banner { width: 100%; max-height: 140px; object-fit: cover; border-radius: 10px; margin-bottom: 0.6rem; }
.company-application-card .entry-actions { margin-top: 0.4rem; }
.map-order-submit-msg.error { color: #f87171; }

.map-ref-preview { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.map-ref-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.6rem; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: 0.76rem; color: var(--muted);
}
.map-ref-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.map-ref-remove:hover { color: #f87171; }

.map-order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}
.map-order-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  background: var(--paper-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.map-order-card:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); transform: translateY(-2px); }
.map-order-card-head { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.map-order-badge {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; background: var(--paper); border: 1px solid var(--line); color: var(--muted);
}
.map-order-title { font-family: 'Fraunces', serif; font-size: 1.05rem; margin: 0.2rem 0 0.4rem; }
.map-order-desc { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.7rem; }
.map-order-meta { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.76rem; color: var(--muted); }

.map-order-status { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.68rem; font-weight: 800; }
.map-order-status.status-neu { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; }
.map-order-status.status-offen { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }
.map-order-status.status-angenommen { background: rgba(167, 139, 250, 0.2); color: #a78bfa; }
.map-order-status.status-in_bearbeitung { background: rgba(250, 204, 21, 0.2); color: #facc15; }
.map-order-status.status-rueckfrage { background: rgba(251, 146, 60, 0.2); color: #fb923c; }
.map-order-status.status-wartet_auf_kunde { background: rgba(251, 146, 60, 0.2); color: #fb923c; }
.map-order-status.status-fertig { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.map-order-status.status-abgeschlossen { background: rgba(34, 197, 94, 0.25); color: #22c55e; }
.map-order-status.status-abgebrochen { background: rgba(248, 113, 113, 0.2); color: #f87171; }

.map-company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}
.map-company-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  background: var(--paper-2);
  text-align: center;
}
.map-company-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; background: var(--paper); margin-bottom: 0.5rem; }
/* Fehlt logo_url (Firma hat beim Bewerben kein Logo hochgeladen), zeigte
   die Karte bisher gar nichts an dieser Stelle - dadurch stand sie neben
   Karten MIT Logo sichtbar schief/unausgewogen da. Gleicher Platzhalter
   wie im Admin-Bewerbungs-Review (.company-application-logo-empty). */
.map-company-logo-empty { display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; border: 1px solid var(--line); font-size: 1.6rem; }
.map-company-detail-head .map-company-logo-empty { margin: 0; }
.map-company-desc { font-size: 0.8rem; color: var(--muted); margin: 0.4rem 0; }
.map-company-price { font-size: 0.8rem; color: var(--gold); font-weight: 700; }

.map-code-value {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  margin: 0.8rem 0;
  background: linear-gradient(120deg, rgba(255, 206, 51, 0.18), rgba(255, 157, 26, 0.1));
  border: 1px dashed rgba(255, 206, 51, 0.55);
  color: var(--gold);
  user-select: all;
  text-align: center;
}

@media (max-width: 640px) {
  .orders-header-row { justify-content: center; }
}

/* Firmen-Rolle: reduzierte Admin-Nav. Nur eine optische Sperre - die echte
   Absicherung passiert ueber RLS (is_active_admin() schliesst role='company'
   explizit aus). */
.admin-nav-btn[data-role="company"] { display: none; }
.admin-nav-btn[data-role="sheep_editor"] { display: none; }
body.admin-mode-company .admin-nav-btn:not([data-role="company"]) { display: none; }
body.admin-mode-company .admin-nav-btn[data-role="company"] { display: flex; }
body.admin-mode-sheepeditor .admin-nav-btn:not([data-role="sheep_editor"]) { display: none; }
body.admin-mode-sheepeditor .admin-nav-btn[data-role="sheep_editor"] { display: flex; }

.map-order-card .map-order-claim-btn { width: 100%; margin-top: 0.6rem; }
.map-order-card { cursor: pointer; }

/* ---- Privater Auftragsbereich ---- */
.map-workspace-card { max-width: 820px; }
.map-workspace-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem 1rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  margin-bottom: 1rem;
  font-size: 0.82rem;
}
.map-workspace-info .label { display: block; color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
.map-workspace-info .value { font-weight: 700; }
.map-workspace-status-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.map-workspace-status-row select { padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 0.82rem; }

.map-chat { margin-bottom: 1rem; }
.map-chat-messages {
  max-height: 320px;
  overflow-y: auto;
  overflow-anchor: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  margin-bottom: 0.6rem;
}
.map-chat-msg { max-width: 78%; padding: 0.55rem 0.8rem; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line); }
.map-chat-msg.is-me { align-self: flex-end; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 25%, var(--paper-2)), var(--paper-2)); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
.map-chat-msg-head { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.7rem; color: var(--muted); margin-bottom: 0.25rem; }
.map-chat-msg-sender { font-weight: 700; }
.map-chat-msg-role { padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--paper); font-size: 0.62rem; text-transform: uppercase; }
.map-chat-msg-body { font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; }
.map-chat-msg-attachment { margin-top: 0.4rem; }
.map-chat-msg-attachment img { max-width: 100%; max-height: 220px; border-radius: 8px; display: block; }
.map-chat-msg-attachment a { font-size: 0.78rem; color: var(--gold); }

.map-chat-composer { display: flex; flex-direction: column; gap: 0.5rem; }
.map-chat-composer textarea {
  width: 100%; padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 0.85rem; resize: vertical;
}
.map-chat-composer-actions { display: flex; align-items: center; gap: 0.6rem; }
.map-chat-attach-btn { cursor: pointer; font-size: 1.2rem; padding: 0.3rem; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); }
.map-chat-file-name { font-size: 0.75rem; color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.map-workspace-details { margin-top: 0.8rem; border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.9rem; background: var(--paper); }
.map-workspace-details summary { cursor: pointer; font-weight: 700; font-size: 0.85rem; }
.map-workspace-files-list, .map-workspace-history-list { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.map-workspace-file-row { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.8rem; padding: 0.4rem 0.5rem; border-radius: 8px; background: var(--paper-2); }
.map-workspace-file-row a { color: var(--gold); }
.map-workspace-history-row { font-size: 0.76rem; color: var(--muted); padding: 0.25rem 0; border-bottom: 1px dashed var(--line); }
.map-workspace-history-row:last-child { border-bottom: none; }

/* ---- Firmenprofil-Detail ---- */
.map-company-banner { width: 100%; max-height: 200px; object-fit: cover; border-radius: 14px; margin-bottom: 1rem; }
.map-company-detail-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.map-company-detail-head .map-company-logo { width: 56px; height: 56px; margin-bottom: 0; }
.map-company-detail-head h3 { font-family: 'Fraunces', serif; font-size: 1.3rem; }
.map-company-links { display: flex; gap: 0.8rem; margin: 0.8rem 0; }
.map-company-links a { color: var(--gold); font-weight: 700; font-size: 0.85rem; }
.map-company-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; margin-top: 0.8rem; }
.map-company-showcase img { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; }

/* ---- Admin: Auftrags-Übersicht Aktionen ---- */
.map-order-admin-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.map-order-admin-actions select { flex: 1; min-width: 120px; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 0.76rem; }
.map-order-admin-actions button { font-size: 0.72rem; padding: 0.35rem 0.6rem; }

/* ---- Suche & Filter ---- */
.map-search-row { display: flex; gap: 0.6rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.map-search-row input[type="text"] {
  flex: 1; min-width: 200px; padding: 0.55rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 0.85rem;
}

/* ============================================================
   App-Modus (Play-Store-Verpackung des Idle-Dorfs, /app oder
   ?app=idledorf) - reine Zusatzschicht ueber der bestehenden Seite,
   kein separater Code. html.bkmp-app-mode wird ganz frueh im <head>
   von index.html gesetzt (vor dem ersten Rendern). Blendet die
   Investment-Seite drumherum aus und zeigt nur noch das Idle-Dorf
   (oder den Login, wenn noch nicht eingeloggt) im Vollbild.
   ============================================================ */
/* KRITISCHER FUND (Phase 5.0 Verifikation, 17.07.): dieselbe Klasse wie
   beim Header/Footer-Fund oben - stand auf "html.bkmp-app-mode", das
   seit der globalen Klasse einen z-index:100000-Vollbild-Splash dauerhaft
   ueber die GESAMTE normale Website gelegt hat (nichts dahinter war je
   erreichbar, da "bkmp-app-ready" - einzige Bedingung zum Ausblenden -
   auf der normalen Website nie gesetzt wird, siehe bkmp-app-mode-
   bootstrap.js). Gehoert exklusiv zu echtem /app, siehe html.zone-game-
   Begruendung oben. */
#bkmpAppSplash { display: none; }
html.bkmp-app-mode.zone-game #bkmpAppSplash {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 100000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--gold) 12%, transparent), var(--paper) 65%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
html.bkmp-app-mode.zone-game.bkmp-app-ready #bkmpAppSplash { display: none; }
#bkmpAppSplash img {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}
#bkmpAppSplash p {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}

/* KRITISCHER FUND (Phase 5.0 Verifikation, 17.07.): stand bis eben auf
   "html.bkmp-app-mode" - seit diese Klasse global ist (siehe Kommentar im
   <head>-Script von index.html), hat das gerade JEDEN Besuch der
   normalen Website unsichtbar gemacht (Header/Nav/Footer UND der
   komplette .panels-viewport mit allen 10 Marketing-Sektionen auf
   display:none)! Das war als reine /app-Vollbild-Regel gedacht (die
   installierte App zeigt NUR das Idle-Dorf, keine Website-Chrome) und
   gehoert exakt dorthin zurueck. "html.zone-game" (die Klasse DIREKT auf
   <html>, nicht zu verwechseln mit #idleDorfOverlay, das zone-game IMMER
   traegt) wird im selben synchronen Kopf-Script wie bkmp-app-mode gesetzt,
   aber nur wenn isApp true ist - genau das reicht als Signal, ganz ohne
   Wartezeit auf async Bootstrap (kein Aufblitz-Risiko, siehe Kommentar im
   Kopf-Script "damit kein falscher Stimmungs-Ton kurz aufblitzt"). */
html.bkmp-app-mode.zone-game .site-top-bar,
html.bkmp-app-mode.zone-game .poll-banner,
html.bkmp-app-mode.zone-game .top-actions,
html.bkmp-app-mode.zone-game .top-actions-left,
html.bkmp-app-mode.zone-game header,
html.bkmp-app-mode.zone-game nav.topbar-wrap,
html.bkmp-app-mode.zone-game .panels-viewport,
html.bkmp-app-mode.zone-game footer,
html.bkmp-app-mode.zone-game .bkmp-penguin-easter-egg {
  display: none !important;
}
html.bkmp-app-mode.zone-game body { background: var(--paper); }

/* KRITISCHER FUND (Phase 5.1 Verifikation, 17.07.): stand auf
   "html.bkmp-app-mode" - seit diese Klasse global ist, hat das die
   Idle-Dorf-Karte auch auf der normalen Website in eine randlose
   100vw/100vh-Vollbild-Flaeche verwandelt (statt der gewollten
   zentrierten 94vw/max-1200px-Dialogkarte mit rundem Goldrahmen aus
   Phase 4) - dabei rutschten HUD und Tableiste sichtbar durcheinander,
   weil #idleDorfHuds negative Raender (siehe weiter unten) exakt auf
   DIESES Padding hier kalibriert sind, das Padding aber nur fuer die
   echte /app-Vollbild-Karte gedacht war. Gehoert exklusiv zu echtem
   /app (html.zone-game, siehe Begruendung beim Header/Footer/Splash-
   Fund in Phase 5.0).
   Idle-Dorf-Fenster wird im App-Modus zur eigentlichen Seite statt eines
   Popups darueber - immer die volle-Bildschirm-Darstellung (sonst nur ab
   640px Breite aktiv), plus Sicherheitsabstand fuer Notch/Kamera-Ausschnitt
   und die Android-Gesten-Leiste am unteren Rand. */
html.bkmp-app-mode.zone-game .idle-dorf-overlay .idle-dorf-card {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  max-width: 100vw;
  border-radius: 0;
  padding-top: calc(1.4rem + env(safe-area-inset-top));
  padding-right: calc(1rem + env(safe-area-inset-right));
  /* Unten Platz fuer die fixierte Bottom-Navigation reservieren, damit
     Panel-Inhalte nicht dahinter verschwinden - seit Phase 5.1 in EINER
     gemeinsamen Regel mit dem Website-Pendant zusammengefasst (siehe
     "html.bkmp-app-mode .idle-dorf-overlay .idle-dorf-card" innerhalb
     von @media(max-width:760px) weiter unten in dieser Datei), damit
     nicht zwei verschiedene Werte fuer denselben Zweck an zwei Stellen
     gepflegt werden muessen. */
  padding-left: calc(1rem + env(safe-area-inset-left));
  /* KRITISCH: die Website-Optik setzt hier ein transform (Oeffnen-
     "Pop"-Animation der Karte, .joke-card/.joke-overlay.visible .joke-card
     weiter oben in dieser Datei). Ein transform auf einem Vorfahren macht
     ihn per CSS-Spezifikation zum neuen Bezugsrahmen fuer ALLE
     position:fixed-Kindelemente darin - meine Bottom-Navigation und das
     "Mehr"-Menue haengen dadurch nicht mehr am echten Bildschirmrand,
     sondern am (teils laenger scrollbaren) Kartenrahmen. Auf manchen
     Mobilgeraeten/Browsern drifteten Navigation/Menue dadurch weit vom
     sichtbaren unteren Bildschirmrand weg (Spieler-Videobeweis 16.07.:
     riesige leere Flaeche vor der eigentlich fixierten Leiste). Im
     App-Modus braucht es die Pop-Animation ohnehin nicht (die App-Karte
     OEFFNET SICH NICHT wie ein Popup, sie IST der Bildschirm) - komplett
     deaktivieren behebt das strukturell statt nur das Symptom zu kaschieren. */
  transform: none !important;
  animation: none !important;
}
/* Spieler-Meldung 20.07. (schwarze Luecke unter dem Fenster auf dem Handy) -
   gleicher dvh-Fix wie bei der Website-Vollbild-Karte oben (siehe
   @media(max-width:640px) .idle-dorf-overlay .idle-dorf-card weiter oben in
   dieser Datei fuer die volle Begruendung) - betrifft auch den echten
   App-Modus, da mobile Browser-Adressleisten sich auch innerhalb einer
   installierten PWA je nach Plattform ein-/ausblenden koennen. */
html.bkmp-app-mode.zone-game .idle-dorf-overlay .idle-dorf-card {
  height: 100dvh;
  max-height: 100dvh;
}
/* Kein "Schliessen" und kein Streamer-Hilfe-Link im App-Modus - es gibt
   keine Seite dahinter, zu der man zurueckkehren koennte, die App IST der
   Bildschirm. Verlassen passiert ausschliesslich ueber die Android-
   Zurueck-Geste (siehe Bootstrap-Skript am Seitenende).
   Bug-Fix 18.07. (im Zuge der Feedback-Button-Untersuchung entdeckt,
   siehe idleDorfFeedbackBtn-Kommentar in index.html): stand bisher auf
   dem seit Phase 5 GLOBAL immer aktiven "html.bkmp-app-mode" (siehe
   Kommentar im Kopf-Script von index.html: die Klasse steuert seitdem
   nur noch Optik, nicht mehr Kontext) - dadurch war der Schliessen-Knopf
   im Idle-Dorf-Fenster auch auf der GANZ NORMALEN Website unsichtbar UND
   unklickbar (display:none!important), obwohl dort sehr wohl eine Seite
   dahinter existiert, zu der man zurueckkehren will. ".zone-game" ist
   die tatsaechliche Kontext-Unterscheidung (nur im echten /app gesetzt,
   siehe html.zone-game-Begruendung an anderer Stelle in dieser Datei) -
   exakt derselbe Fund/Fix wie bei den bereits behobenen Header/Footer/
   Splash-Faellen (siehe CLAUDE.md). */
html.bkmp-app-mode.zone-game #idleDorfOverlay > .idle-dorf-card > .idle-dorf-close,
html.bkmp-app-mode.zone-game #idleDorfOverlay > .idle-dorf-card > .joke-buttons {
  display: none !important;
}

/* "Als App installieren"-Link in der normalen Website-Ansicht des
   Idle-Dorfs (nicht im App-Modus selbst - siehe Ausblendregel oben, die
   dort den ganzen .joke-buttons-Block betrifft). */
.idle-dorf-card .joke-buttons a.idle-app-link-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.idle-app-install-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(167, 139, 250, 0.16), rgba(56, 189, 248, 0.1));
  border: 1px dashed color-mix(in srgb, var(--gold) 55%, var(--line));
  font-size: 0.85rem;
}
.idle-app-install-banner.visible { display: flex; }
.idle-app-install-banner button {
  flex: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: none;
  background: var(--gold);
  color: var(--accent-ink);
  cursor: pointer;
}
.map-search-row select { padding: 0.5rem 0.7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 0.82rem; }

/* ============================================================
   APP-MODUS REDESIGN, PHASE 1 (Mobile-Game-Optik)
   ============================================================
   Nutzerwunsch: "Ich will halt das die app komplett neu gemacht wird.
   Website bleibt website." - JEDE Regel hier haengt an html.bkmp-app-mode
   und greift daher NUR im App-Modus (/app bzw. ?app=idledorf). Die
   normale Website-Ansicht des Idle-Dorfs bleibt exakt wie zuvor.

   Baut bewusst NUR auf bestehenden Elementen/IDs/Klassen auf, die
   idledorf.js schon selbst erzeugt/anspricht (siehe Recherche vor diesem
   Umbau: bkmpIdleRenderHud, bkmpIdleInitTabs, bkmpIdleSpawnHitFlash usw.)
   - keine JS-Aenderung noetig, nichts hier kann den Kampf-Loop/die
   Tab-Logik/die Speicherstand-Synchronisation beeinflussen. Phase 1 =
   Optik/Juice auf bestehender Struktur. Bottom-Navigation (echte
   Neuanordnung der Tab-Leiste) und die einzelnen Unter-Panels
   (Skilltree/Dungeon/Gilde/...) im Detail folgen in spaeteren Phasen.
   ============================================================ */

/* Nutzerwunsch: "vergroesser doch mal ALLES" - statt jedes einzelne
   Element weiter einzeln zu jagen, hier der eine grosse Hebel: fast der
   gesamte App-Modus-Umbau (Phasen 1-7) ist bewusst in rem statt px
   geschrieben, also relativ zur Basis-Schriftgroesse von <html>. Diese
   hier um ~18% anzuheben skaliert automatisch JEDEN Text, jedes Padding,
   jeden Abstand im ganzen App-Modus gleichzeitig mit, statt nur einzelne
   Klassen zu treffen. Nur auf echtem /app (html.zone-game, siehe
   Begruendung beim Header/Footer/Splash-Fund oben) - betrifft nie die
   normale Website (dort bleibt die Basis-Schriftgroesse unveraendert).
   KRITISCHER FUND (Phase 5.0 Verifikation, 17.07.): stand vorher auf
   "html.bkmp-app-mode" allein - seit diese Klasse global ist, waere JEDER
   rem-Wert auf der GESAMTEN normalen Website (auch alle Marketing-
   Sektionen aus Phase 4) automatisch ~18% zu gross gerendert. */
html.bkmp-app-mode.zone-game {
  font-size: 18.5px;
}
html.bkmp-app-mode {
  --app-void: #0a0518;
  --app-purple-deep: #170b30;
  --app-purple: #2d1854;
  --app-purple-light: #4a2a7a;
  --app-gold: #ffd76a;
  --app-gold-deep: #e8a93c;
  --app-orange: #ff8c3d;
  --app-red: #ff3b5c;
  --app-blue-deep: #0f1830;
  --app-blue: #2f6fd6;
  --app-cyan: #3ce6e0;
  --app-green: #4ade80;
  --app-ink: #f5f0ff;
  --app-muted: rgba(245, 240, 255, 0.62);
  --app-glow-gold: 0 0 18px rgba(255, 215, 106, 0.55);
  --app-glow-cyan: 0 0 16px rgba(60, 230, 224, 0.5);
  --app-glow-red: 0 0 18px rgba(255, 59, 92, 0.6);
}

/* ---- Karten-Chrome: Kampf-Arena statt Web-Modal ---- */
html.bkmp-app-mode .idle-dorf-overlay .idle-dorf-card {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--app-purple-light) 45%, transparent), transparent 55%),
    linear-gradient(180deg, var(--app-purple-deep) 0%, var(--app-void) 68%);
  /* Flex-Spalte statt normalem Blockfluss: der Kampf-Tab kann sich damit
     ueber den ganzen verbleibenden Platz strecken (siehe Phase 13 weiter
     unten), waehrend alle anderen Panels weiterhin nur so hoch sind wie
     ihr Inhalt (kein display:none-Element nimmt an Flex-Layout teil, also
     stoert das andere, gerade unsichtbare Panels nicht). */
  display: flex;
  flex-direction: column;
}
html.bkmp-app-mode .idle-dorf-overlay .idle-dorf-card::before {
  background:
    linear-gradient(180deg, var(--app-purple-deep), var(--app-void)) padding-box,
    linear-gradient(135deg, var(--app-gold), var(--app-cyan), var(--app-purple-light), var(--app-gold)) border-box;
}
/* Marketing-Banner ergibt innerhalb der App selbst keinen Sinn mehr
   (die App IST das Spiel) - der Platz geht stattdessen an HUD/Kampf. */
html.bkmp-app-mode .idle-dorf-banner-picture { display: none; }

/* ---- Hintergrund-Ambience (Sterne/Nebel/Funken), siehe .app-bg-fx in
   index.html - rein dekorativ, idledorf.js fasst das nie an.
   KRITISCHER FUND (Phase 5.1 Verifikation, 17.07.): stand auf blossem
   "html.bkmp-app-mode" - der Kommentar bei der Markup-Stelle in
   index.html sagt explizit "nur im App-Modus sichtbar... auf der
   normalen Website komplett unsichtbar" - genau das stimmte nicht mehr,
   sobald die Klasse global wurde: 12 dauerhaft laufende Animationen
   (Nebel-Drift 26s, Stern-Flackern 4s, 10x Funken-Aufstieg 8-12s) liefen
   im Hintergrund JEDES Idle-Dorf-Fensters auf der normalen Website mit,
   ohne dass sie dort je sichtbar sein sollten - reine verschwendete
   Bildwiederholungs-Arbeit. ".zone-game" allein reicht hier NICHT (das
   traegt auch #idleDorfOverlay auf der normalen Website automatisch,
   siehe Phase 4) - erst "html.bkmp-app-mode.zone-game" (nur wenn <html>
   SELBST zone-game traegt, siehe Kopf-Script) trifft ausschliesslich
   echtes /app, wie urspruenglich gemeint. ---- */
html.bkmp-app-mode.zone-game .app-bg-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Performance-Modus: die dekorative Ambience (Nebel-Drift + Stern-
   Flackern + 10x Funken-Aufstieg, siehe Kommentar weiter oben bei dieser
   Regel) war beim Profiling die teuerste einzelne Quelle dauerhaft
   laufender Animationen (12 gleichzeitig). "Reduziert" behaelt die
   guenstigen Sterne (reines Opacity-Flackern), schaltet aber Nebel
   (transform+filter:blur kombiniert) und die 10 Funken (individuelle
   transform-Animationen) ab. "Aus" blendet die komplette Ambience-Ebene
   aus. */
html[data-fx="reduziert"].bkmp-app-mode.zone-game .app-bg-fx-nebula,
html[data-fx="aus"].bkmp-app-mode.zone-game .app-bg-fx-nebula,
html[data-fx="reduziert"].bkmp-app-mode.zone-game .app-bg-fx-embers,
html[data-fx="aus"].bkmp-app-mode.zone-game .app-bg-fx-embers {
  display: none;
}
html[data-fx="aus"].bkmp-app-mode.zone-game .app-bg-fx-stars {
  display: none;
}
html.bkmp-app-mode.zone-game .app-bg-fx-nebula {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--app-cyan) 14%, transparent), transparent 45%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--app-orange) 12%, transparent), transparent 50%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--app-purple-light) 22%, transparent), transparent 60%);
  filter: blur(2px);
  animation: appNebulaDrift 26s ease-in-out infinite alternate;
}
@keyframes appNebulaDrift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-3%, -2%) scale(1.08); }
}
html.bkmp-app-mode.zone-game .app-bg-fx-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1.5px 1.5px at 30% 65%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 50% 15%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.5px 1.5px at 70% 45%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1px 1px at 85% 80%, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1.5px 1.5px at 92% 25%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 15% 85%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.5px 1.5px at 45% 92%, rgba(255, 255, 255, .8), transparent);
  opacity: .55;
  animation: appStarTwinkle 4s ease-in-out infinite alternate;
}
@keyframes appStarTwinkle {
  from { opacity: .32; }
  to { opacity: .62; }
}
html.bkmp-app-mode.zone-game .app-bg-fx-embers span {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--app-gold);
  box-shadow: 0 0 6px 2px color-mix(in srgb, var(--app-gold) 70%, transparent);
  opacity: 0;
  animation: appEmberRise 9s linear infinite;
}
html.bkmp-app-mode.zone-game .app-bg-fx-embers span:nth-child(1) { left: 8%;  animation-duration: 8s;   animation-delay: 0s; }
html.bkmp-app-mode.zone-game .app-bg-fx-embers span:nth-child(2) { left: 18%; animation-duration: 11s;  animation-delay: 1.2s; }
html.bkmp-app-mode.zone-game .app-bg-fx-embers span:nth-child(3) { left: 30%; animation-duration: 9.5s;  animation-delay: 2.4s; }
html.bkmp-app-mode.zone-game .app-bg-fx-embers span:nth-child(4) { left: 44%; animation-duration: 12s;  animation-delay: 0.6s; }
html.bkmp-app-mode.zone-game .app-bg-fx-embers span:nth-child(5) { left: 55%; animation-duration: 8.5s;  animation-delay: 3s; }
html.bkmp-app-mode.zone-game .app-bg-fx-embers span:nth-child(6) { left: 65%; animation-duration: 10.5s; animation-delay: 1.8s; }
html.bkmp-app-mode.zone-game .app-bg-fx-embers span:nth-child(7) { left: 74%; animation-duration: 9s;    animation-delay: 4.2s; }
html.bkmp-app-mode.zone-game .app-bg-fx-embers span:nth-child(8) { left: 83%; animation-duration: 11.5s; animation-delay: 2.1s; }
html.bkmp-app-mode.zone-game .app-bg-fx-embers span:nth-child(9) { left: 91%; animation-duration: 8s;    animation-delay: 3.6s; }
html.bkmp-app-mode.zone-game .app-bg-fx-embers span:nth-child(10) { left: 96%; animation-duration: 10s;   animation-delay: 0.9s; }
@keyframes appEmberRise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  10% { opacity: .9; }
  90% { opacity: .5; }
  100% { transform: translateY(-620px) scale(1); opacity: 0; }
}

/* ---- Top-Bar / HUD ---- */
html.bkmp-app-mode #idleDorfHud { margin-bottom: .45rem; }
html.bkmp-app-mode .idle-hud-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .09);
  /* Bug-Fix 06.08.2026 (Nutzer-Screenshot, 2560px-Monitor, zweispaltiges
     Desktop-Grid vom 05.08.2026): #idleFxModeBtn/#idleDorfCloseX/
     #idleDorfFeedbackBtn ueberlappten sich sichtbar (nur "🚫"-Icon +
     abgeschnittenes "...e:" aus "Effekte:" blieben lesbar). Ursache: .idle-
     hud-top spannt seit dem Grid-Redesign ("grid-area:hud" = volle
     Kartenbreite ueber beide Spalten) die GESAMTE Kartenbreite auf - der
     hier hineinportalisierte #idleFxModeBtn (siehe Kommentar unten) landet
     dadurch am rechten Rand GENAU dort, wo Feedback/Schliessen bereits
     position:absolute liegen (right:0.9rem/3.5rem, siehe .idle-dorf-close/
     .idle-dorf-feedback-btn). Live bei 2560px reproduziert+vermessen
     (fxBtn [2133,2243] ueberlappte feedback [2163,2197] UND close
     [2205,2239] vollstaendig). Fix: identisches, bereits bei
     .bkmp-proto-chud-row bewaehrtes Muster - rechter Freiraum reserviert
     exakt den von Feedback+Schliessen belegten Bereich (Feedback-
     Linkskante bei right:3.5rem+34px Breite = 5.625rem vom Kartenrand),
     die flexible .idle-hud-xp-wrap gibt dafuer nach, kein fixes Element
     wird gequetscht. !important noetig, da @media(max-height:780px)
     (Phase 7.1 Stufe 3, 21.07., weiter oben in dieser Datei) .idle-hud-top
     bereits per "padding: .3rem .5rem !important" auf 0.5rem rechts
     zurueckstutzt (bei niedrigen Fensterhoehen, unabhaengig von der
     Breite) - ohne eigenes !important wuerde genau diese Kombination
     (z.B. 1024x768, per Test bestaetigt) die Ueberlappung sofort
     reproduzieren. */
  padding-right: 5.9rem !important;
}
/* Phase 7.1 (21.07.): #idleFxModeBtn wird per Portal (siehe
   bkmpIdleRenderHud in js/ui/bkmp-hud.js) hier hineingehaengt statt eine
   eigene Zeile zwischen Stufenleiste und Schlachtfeld zu belegen -
   flex-shrink:0 verhindert, dass es bei wenig Platz gequetscht wird
   (die flexible .idle-hud-xp-wrap gibt bei Bedarf nach, nicht der Button). */
html.bkmp-app-mode .idle-hud-top .idle-fx-mode-btn { flex-shrink: 0; margin: 0; }
html.bkmp-app-mode .idle-hud-level-badge {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--app-gold), var(--app-gold-deep));
  box-shadow: var(--app-glow-gold), inset 0 -3px 6px rgba(0, 0, 0, .35);
  color: #2b1600;
  /* KEIN appHudPop-Einblend-Effekt (Spieler-Meldung 23.07.: "Level wie auch
     Streak blinken jedes mal auf nach einem Drachen tot") - derselbe, schon
     einmal fuer .idle-res-chip dokumentierte Grund (siehe Kommentar dort):
     bkmpIdleRenderHud() baut #idleDorfHud bei JEDEM Aufruf (Tick, Kill,
     Ressourcen-Aenderung) komplett per innerHTML neu, jedes Badge ist also
     technisch immer ein frisch eingefuegtes Element - eine Animation auf
     Einfuegen spielt dadurch bei JEDEM Render erneut ab, nicht nur bei
     echten Wertaenderungen. War hier (und bei .idle-hud-streak-badge/
     .idle-hud-stats span/.idle-hud-resources span direkt unten) bisher
     uebersehen worden. */
}
html.bkmp-app-mode .idle-hud-level-num { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.05rem; line-height: 1; }
html.bkmp-app-mode .idle-hud-level-tag { font-size: .5rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
html.bkmp-app-mode .idle-hud-streak-badge {
  flex: none;
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--app-orange), var(--app-red));
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  box-shadow: var(--app-glow-red);
  /* KEIN appHudPop - siehe Kommentar bei .idle-hud-level-badge oben. */
}
html.bkmp-app-mode .idle-hud-xp-wrap { flex: 1; min-width: 0; }
html.bkmp-app-mode .idle-hud-skillpoints {
  font-size: .7rem;
  font-weight: 700;
  color: var(--app-cyan);
  margin-bottom: .25rem;
  text-shadow: 0 0 8px color-mix(in srgb, var(--app-cyan) 60%, transparent);
}
html.bkmp-app-mode .idle-xp-bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .09);
}
html.bkmp-app-mode .idle-xp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--app-cyan), var(--app-purple-light), var(--app-gold));
  box-shadow: 0 0 10px color-mix(in srgb, var(--app-cyan) 60%, transparent);
  transition: width .5s cubic-bezier(.3, 1, .4, 1);
}
html.bkmp-app-mode .idle-xp-label { font-size: .62rem; color: var(--app-muted); margin-top: .2rem; font-variant-numeric: tabular-nums; }
html.bkmp-app-mode .idle-hud-stats,
html.bkmp-app-mode .idle-hud-resources {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem;
  margin-top: .32rem;
  padding: 0;
  border: none;
}
html.bkmp-app-mode .idle-hud-stats span,
html.bkmp-app-mode .idle-hud-resources span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .24rem .55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  font-size: .74rem;
  font-weight: 700;
  color: var(--app-ink);
  font-variant-numeric: tabular-nums;
  /* KEIN appHudPop - siehe Kommentar bei .idle-hud-level-badge weiter oben
     (Spieler-Meldung 23.07.: "Level wie auch Streak blinken jedes mal auf
     nach einem Drachen tot" - dieselbe Ursache trifft auch diese Kacheln). */
}
html.bkmp-app-mode .idle-hud-resources span {
  background: linear-gradient(135deg, rgba(255, 215, 106, .16), rgba(255, 140, 61, .08));
  border-color: color-mix(in srgb, var(--app-gold) 40%, transparent);
}
/* Phase 7.1 Stufe 3 (21.07., Nutzer-Auftrag "Kampfwerte und Ressourcen
   gemeinsam, horizontaler kompakter Flow"): ersetzt die bisherigen zwei
   getrennten Zeilen (.idle-hud-stats + .idle-hud-resources, je eigene
   margin-top) durch EINEN gemeinsamen Flow-Container (siehe
   bkmpIdleRenderHud in js/ui/bkmp-hud.js) - spart eine der beiden
   Zeilenabstaende ein, Ressourcen-Chips bleiben optisch leicht abgesetzt
   (Farbverlauf) statt durch eine echte zweite Zeile getrennt zu sein. */
html.bkmp-app-mode .idle-hud-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin-top: .3rem;
}
html.bkmp-app-mode .idle-hud-flow span {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .22rem .5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  font-size: .72rem;
  font-weight: 700;
  color: var(--app-ink);
  font-variant-numeric: tabular-nums;
}
html.bkmp-app-mode .idle-hud-flow span:nth-last-child(-n+6) {
  background: linear-gradient(135deg, rgba(255, 215, 106, .16), rgba(255, 140, 61, .08));
  border-color: color-mix(in srgb, var(--app-gold) 40%, transparent);
}
/* Spezifitaet bewusst hoeher als "html.bkmp-app-mode .idle-hud-flow span"
   oben (zusaetzliche Klasse UND "span" im Selektor) - sonst gewinnt die
   allgemeine Pillen-Optik (Padding/Rahmen/Radius) und der Trenner sieht
   wie ein weiterer Chip statt einer duennen Linie aus. */
html.bkmp-app-mode .idle-hud-flow span.idle-hud-flow-sep {
  width: 1px;
  padding: 0;
  border: none;
  border-radius: 0;
  align-self: stretch;
  background: rgba(255, 255, 255, .16);
  margin: .1rem .05rem;
}
@keyframes appHudPop {
  from { transform: scale(.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* KRITISCHER FUND (Phase 5.1 Verifikation, zweite Runde, 17.07.): dieser
   ganze Block war die urspruengliche "Phase 1"-Tab-Optik aus der /app-
   Entwicklung, laut eigenem Kommentar laengst durch "Phase 3: echte
   Bottom-Navigation" (siehe @media(max-width:760px) weiter unten) UND die
   neue gruppierte Desktop-Tableiste ersetzt - stand aber weiterhin
   unbedingt (kein @media, kein .zone-game) im CSS und war dadurch seit der
   bkmp-app-mode-Globalisierung die tatsaechliche Ursache dafuer, dass die
   Tab-Leiste auf der normalen Website zusammengequetscht wurde ("overflow-
   x:auto" zwingt Flexbox dazu, die Mindesthoehe des Elements auf 0 zu
   setzen, siehe Begruendung bei der echten .idle-dorf-tabs-Regel weiter
   oben). Ersatzlos entfernt statt nur deaktiviert - komplett von neueren
   Phasen abgeloest, keine Funktionalitaet geht verloren. ---- */

/* ---- Kampfbereich: gross, dramatisch, reagiert live auf Treffer ---- */
html.bkmp-app-mode .idle-battlefield {
  min-height: 36vh;
  padding: 1.3rem 1rem;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 6%, color-mix(in srgb, var(--app-red) 12%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .28));
  border: 1px solid rgba(255, 255, 255, .09);
  position: relative;
}
html.bkmp-app-mode .idle-battlefield::before {
  content: '⚔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.7rem;
  color: var(--app-gold);
  text-shadow: var(--app-glow-gold);
  opacity: .85;
  pointer-events: none;
}
html.bkmp-app-mode .idle-village,
html.bkmp-app-mode .idle-dragon {
  width: 44%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .32));
  border: 1.5px solid color-mix(in srgb, var(--app-gold) 45%, transparent);
  border-radius: 18px;
}
html.bkmp-app-mode .idle-village-sprite,
html.bkmp-app-mode .idle-dragon-sprite,
html.bkmp-app-mode .idle-dragon-sprite-video {
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)) drop-shadow(0 0 18px rgba(255, 140, 61, .25));
}
html.bkmp-app-mode .idle-hp-bar {
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .5);
  overflow: hidden;
}
html.bkmp-app-mode .idle-hp-fill-village {
  background: linear-gradient(90deg, var(--app-green), #22c55e);
  box-shadow: 0 0 10px rgba(74, 222, 128, .6);
}
html.bkmp-app-mode .idle-hp-fill-dragon {
  background: linear-gradient(90deg, var(--app-red), var(--app-orange));
  box-shadow: 0 0 10px rgba(255, 59, 92, .6);
}
html.bkmp-app-mode .idle-hp-label { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Bildschirm-Wackler bei Treffer - reine CSS-Reaktion auf die schon
   bestehende idle-hit-flash-Klasse (siehe bkmpIdleSpawnHitFlash in
   idledorf.js), kein zusaetzlicher JS-Hook noetig. */
html.bkmp-app-mode .idle-battlefield:has(.idle-hit-flash) {
  animation: appBattlefieldShake .32s ease;
}
/* Performance-Modus (Nutzer-Auftrag, Section B Prioritaet 7): Screen-Shake
   ist einer der in der Profiling-Runde identifizierten teuersten Effekte
   (Layout-Transform auf dem gesamten Schlachtfeld bei jedem Treffer) -
   in "Reduziert" UND "Aus" abgeschaltet. Siehe html[data-fx]-Sammelblock
   weiter unten in dieser Datei fuer alle Performance-Modus-Regeln
   gebuendelt an einer Stelle. */
html[data-fx="reduziert"].bkmp-app-mode .idle-battlefield:has(.idle-hit-flash),
html[data-fx="aus"].bkmp-app-mode .idle-battlefield:has(.idle-hit-flash) {
  animation: none;
}
@keyframes appBattlefieldShake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* Schadenszahlen: kraeftiger, elementfarbig */
html.bkmp-app-mode .idle-dmg-float {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--app-gold);
  text-shadow: 0 0 10px color-mix(in srgb, var(--app-gold) 70%, transparent), 0 2px 4px rgba(0, 0, 0, .6);
}
html.bkmp-app-mode .idle-dmg-crit {
  font-size: 1.75rem;
  color: var(--app-red);
  text-shadow: 0 0 16px color-mix(in srgb, var(--app-red) 80%, transparent), 0 2px 4px rgba(0, 0, 0, .6);
}
html.bkmp-app-mode .idle-dmg-burn {
  color: var(--app-orange);
  text-shadow: 0 0 12px color-mix(in srgb, var(--app-orange) 75%, transparent);
}
html.bkmp-app-mode .idle-dmg-lightning {
  color: var(--app-cyan);
  text-shadow: 0 0 12px color-mix(in srgb, var(--app-cyan) 75%, transparent);
}

/* AD-Free-Kauf-Button bleibt voll funktionsfaehig (echter Kauf!), nur
   optisch als klare CTA im neuen Look. */
html.bkmp-app-mode .idle-adfree-btn {
  display: block;
  width: 100%;
  margin: .7rem 0;
  padding: .8rem 1rem;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, var(--app-gold), var(--app-orange));
  color: #2b1600;
  font-weight: 800;
  box-shadow: var(--app-glow-gold);
}
html.bkmp-app-mode .idle-dorf-log {
  border-radius: 14px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .08);
}

/* ---- Fenster/Buttons in allen Unter-Panels (Upgrades, Skilltree, Gilde,
   ...) - generische, breite Selektoren statt jedes Panel einzeln
   anzufassen, da deren Inhalt bei jedem Tab-Wechsel per innerHTML komplett
   neu erzeugt wird (siehe Recherche: bkmpIdleRenderUpgradesPanel & Co.).
   Mindestgroesse 44px ist keine geschaetzte Zahl: Apples HIG setzt 44x44pt
   als Minimum, und eine gezielte Studie zu MOBILE GAMES (nicht nur
   allgemeine UI) fand 11mm als Mindestgroesse fuer >95% Treffergenauigkeit
   bei Daumenbedienung - das entspricht ca. 42-44px auf typischen
   Handy-Displays. Alle kleinen Icon-Buttons (Runen-Sockel, Drachen-
   Favorit/Freilassen, Gilden-Chat-Loeschen, ...) sind unten explizit auf
   mindestens 44px gesetzt, nicht nur "optisch groesser". */
html.bkmp-app-mode .idle-dorf-panel button {
  border-radius: 14px;
  font-weight: 700;
  padding: .75rem 1rem;
  font-size: .88rem;
  min-height: 46px;
  transition: transform .15s ease, box-shadow .2s ease;
}
html.bkmp-app-mode .idle-dorf-panel button:active { transform: scale(.95); }
/* Kleine Pillen-Reihen (Dungeon-Schwierigkeit, Auto-Lauf-Anzahl, ...) -
   duerfen etwas kompakter bleiben als grosse Aktions-Buttons, aber immer
   noch deutlich groesser als die urspruengliche 0.4rem-Kernel-Groesse
   (Nutzer-Feedback: "muss ich durch eine Lupe gucken"). flex-wrap auf dem
   Elternelement (schon in der Basis-Seite vorhanden) faengt auf, wenn
   dadurch eine Zeile zu breit wird. */
html.bkmp-app-mode .idle-dungeon-diff-row button {
  flex: 1 1 auto;
  padding: .65rem .7rem;
  font-size: .82rem;
  min-height: 44px;
  min-width: 0;
}
html.bkmp-app-mode .idle-dorf-panel .idle-dungeon-start-btn {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  min-height: 54px;
}
html.bkmp-app-mode .idle-dorf-card .joke-buttons .btn-ja,
html.bkmp-app-mode .idle-dorf-panel .btn-ja {
  background: linear-gradient(135deg, var(--app-gold), var(--app-orange)) !important;
  border: none !important;
  color: #2b1600 !important;
  box-shadow: var(--app-glow-gold);
}
html.bkmp-app-mode .idle-dorf-panel input[type="text"],
html.bkmp-app-mode .idle-dorf-panel input[type="number"],
html.bkmp-app-mode .idle-dorf-panel select,
html.bkmp-app-mode .idle-dorf-panel textarea {
  border-radius: 12px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--app-ink);
}

/* ============================================================
   APP-MODUS REDESIGN, PHASE 2 (Raidboss-Beitritts-Banner)
   ============================================================
   Baut auf #raidJoinBanner / .raid-join-banner-* auf, die idledorf.js
   schon selbst per innerHTML erzeugt (bkmpRaidRenderJoinBanner). Die
   ".raid-urgent"-Klasse fuer den letzten-5-Minuten-Puls wird von einem
   kleinen, separaten Timer im App-Modus-Bootstrap-Skript (index.html)
   gesetzt, der nur bkmpRaidGetPhaseInfo() ausliest (rein lesend, schon
   global vorhanden) - idledorf.js bleibt auch hierfuer unangetastet. */
/* Phase 7.1 Stufe 3 (21.07., Nutzer-Auftrag "Raidboss-Banner drastisch
   verkleinern, eine einzige Zeile"): kompletter Umbau von einem grossen,
   mehrzeiligen Hero-Banner (vorher: eigene Ueberschrift-Zeile + Countdown-
   Zeile + "flex-basis:100%"-erzwungene Teilnehmerzahl-Zeile = 3 Zeilen,
   ~100px) zu einer echten Einzeilen-Leiste. "flex-basis:100%" auf
   .raid-join-banner-participants war der Hauptverursacher der dritten
   Zeile - jetzt Teil desselben Textblocks wie der Titel (siehe
   bkmpRaidRenderJoinBanner in bkmp-raid.js), kein eigenes Flex-Item mehr. */
html.bkmp-app-mode .raid-join-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  padding: .5rem .7rem;
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(74, 42, 122, .35), rgba(60, 230, 224, .12));
  border: 1.5px solid color-mix(in srgb, var(--app-cyan) 40%, transparent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  transition: border-color .3s ease, background .3s ease;
  min-height: 46px;
}
html.bkmp-app-mode .raid-join-banner-icon { flex: none; font-size: 1.1rem; line-height: 1; }
html.bkmp-app-mode .raid-join-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: .82rem;
  color: var(--app-ink);
}
html.bkmp-app-mode .raid-join-banner-participants { font-size: .78rem; color: var(--app-muted); font-weight: 600; }
html.bkmp-app-mode .raid-join-banner-participants:not(:empty)::before { content: ' · '; }
html.bkmp-app-mode .raid-join-banner-countdown {
  flex: none;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--app-cyan);
  text-shadow: var(--app-glow-cyan);
}
html.bkmp-app-mode .raid-join-banner-btn {
  flex: none;
  padding: .35rem .8rem !important;
  font-size: .8rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--app-gold), var(--app-orange)) !important;
  box-shadow: var(--app-glow-gold);
  border: none !important;
  color: #2b1600 !important;
  font-weight: 800 !important;
  min-height: 0 !important;
}
html.bkmp-app-mode .raid-join-banner-joined {
  flex: none;
  font-weight: 700;
  color: var(--app-green);
  font-size: .78rem;
}
html.bkmp-app-mode .raid-join-banner.raid-urgent {
  border-color: var(--app-red);
  background: linear-gradient(120deg, rgba(255, 59, 92, .3), rgba(255, 140, 61, .14));
  animation: appRaidPulse 1.1s ease-in-out infinite;
}
html.bkmp-app-mode .raid-join-banner.raid-urgent .raid-join-banner-countdown {
  color: var(--app-red);
  text-shadow: var(--app-glow-red);
  animation: appRaidBlink 1s steps(2, start) infinite;
}
@keyframes appRaidPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 rgba(255, 59, 92, 0); }
  50% { box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 26px rgba(255, 59, 92, .55); }
}
@keyframes appRaidBlink {
  50% { opacity: .35; }
}

@media (max-width: 760px) {
/* ============================================================
   APP-MODUS REDESIGN, PHASE 3 (echte Bottom Navigation)
   ============================================================
   Dieselben 14 .idle-dorf-tab-Buttons/IDs wie immer (bkmpIdleInitTabs in
   idledorf.js bleibt unangetastet) - nur ans untere Bildschirmende
   geheftet und als Icon-ueber-Label-Kacheln dargestellt. Die Aufteilung
   "Icon oben, Text unten" passiert rein optisch ueber zwei <span>, die
   das App-Modus-Bootstrap-Skript einmalig aus dem bestehenden Button-Text
   baut (siehe index.html) - Button-Element/ID/Klick-Listener unveraendert.
   ============================================================ */
html.bkmp-app-mode .idle-dorf-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  margin: 0;
  padding: .55rem .5rem calc(.55rem + env(safe-area-inset-bottom));
  justify-content: space-between;
  overflow-x: visible;
  background: linear-gradient(180deg, rgba(10, 5, 24, .35), rgba(9, 4, 20, .97) 45%);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
}
/* Performance-Modus: backdrop-filter zwingt den Browser dazu, staendig neu
   zu berechnen, was HINTER dieser (immer sichtbaren) Leiste passiert -
   einer der teuersten identifizierten Effekte auf schwaecheren Geraeten.
   "Reduziert" UND "Aus" ersetzen den Weichzeichner durch einen einfachen,
   blickdichteren Verlauf ohne Echtzeit-Neuberechnung. */
html[data-fx="reduziert"].bkmp-app-mode .idle-dorf-tabs,
html[data-fx="aus"].bkmp-app-mode .idle-dorf-tabs {
  backdrop-filter: none;
  background: linear-gradient(180deg, rgba(10, 5, 24, .75), rgba(9, 4, 20, .99) 35%);
}
/* KRITISCHER FUND (Phase 5.1 Verifikation, 17.07.): die fixierte
   Bottom-Navigation haengt am VIEWPORT, nicht an der Karte - ohne
   reservierten Platz am Kartenende wuerde sie die letzten ~60-80px
   jedes Panel-Inhalts beim Herunterscrollen dauerhaft ueberdecken (auf
   der echten /app-Vollbild-Karte macht das bereits die dortige, davon
   unabhaengige padding-bottom:5.2rem-Reservierung - die zentrierte
   94vw-Dialogkarte der normalen Website kennt diese Reservierung aber
   nicht, da sie nie fuer eine fixierte Navigation gebaut wurde). Nur
   dieser eine Wert wird ergaenzt, alle anderen Seiten/Ecken/Farben der
   Karte bleiben unangetastet (siehe Basis-Regel weiter oben in dieser
   Datei). */
/* NACHTRAG (06.08.2026, Spieler-Screenshot: "Warum haben wir hier so
   einen Scrollbalken? Für gefühlt nichts?"): 6rem (96px) war grosszuegig
   fuer die AELTERE, hoehere Kompakt-Nav-Fassung bemessen - die aktuelle
   Bottom-Navigation (#bkmpProtoCompactNav) ist nur noch 66px hoch (per
   getBoundingClientRect bestaetigt), die 30px Ueberschuss liessen die
   Karte um ebenso viel weiter scrollbar sein, als tatsaechlich noetig -
   sichtbar als Leerlauf-Scrollbalken ohne erkennbaren zusaetzlichen
   Inhalt darunter. Auf 4.5rem (72px, Nav-Hoehe + kleiner Puffer)
   reduziert. */
html.bkmp-app-mode .idle-dorf-overlay .idle-dorf-card {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}
/* KRITISCHER FUND (Phase 5.1 Verifikation, 17.07.): ohne dies bricht die
   fixierte Bottom-Navigation komplett auf der normalen Website bei
   schmaler Breite - die Karte hat eine eigene Oeffnen-"Pop"-Animation
   (transform: translateY/scale, siehe .joke-overlay.visible .joke-card
   weiter oben in dieser Datei), und ein transform auf einem Vorfahren
   macht diesen per CSS-Spezifikation zum neuen Bezugsrahmen fuer ALLE
   position:fixed-Kindelemente darin (dieselbe Ursache, die die echte
   /app-Karte schon laenger mit "transform:none!important" umgeht, siehe
   die zone-game-Regel oben - hier zusaetzlich noetig, weil die
   Vollbild-Karte dort NICHT mehr ausserhalb von /app greift, siehe
   Fund oben, die fixierte Navigation aber sehr wohl schon bei schmaler
   Website-Breite aktiv ist). Ohne diese Regel hing die Navigation (und
   das "Mehr"-Menue) irgendwo an der animierten Kartenposition statt am
   echten Bildschirmrand. */
html.bkmp-app-mode .idle-dorf-overlay .idle-dorf-card {
  transform: none !important;
  animation: none !important;
}
/* Nur noch 6 Buttons stehen hier (5 wichtigste Tabs + "Mehr" - der Rest
   wandert per JS ins Ausklappmenue, siehe index.html setupMoreMenu) -
   jeder bekommt dadurch reichlich Platz, kein Scrollen/Zusammenquetschen
   mehr noetig (Nutzer-Feedback: "muss ich durch eine Lupe gucken"). */
html.bkmp-app-mode .idle-dorf-tab {
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-width: 0;
  padding: .6rem .2rem .55rem;
  border-radius: 16px;
}
/* Nur noch 4 Kacheln (3 Haupt-Tabs + Mehr) statt 6 - jede bekommt dadurch
   automatisch mehr Breite (flex:1 auf .idle-dorf-tab), Schrift/Icon hier
   zusaetzlich vergroessert, damit der gewonnene Platz auch genutzt wird. */
html.bkmp-app-mode .idle-dorf-tab-icon { font-size: 1.9rem; line-height: 1; }
html.bkmp-app-mode .idle-dorf-tab-label {
  font-size: .74rem;
  line-height: 1;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: .01em;
}
html.bkmp-app-mode .idle-dorf-tab.active .idle-dorf-tab-icon { transform: scale(1.2); }
html.bkmp-app-mode .idle-dorf-tab.active { transform: translateY(-3px) scale(1.06); }

} /* Ende @media (max-width:760px) - Redesign Phase 5 (17.07.): die fixierte Bottom-Navigation aus dem App-Modus ist ein reines Mobil-Muster (position:fixed relativ zum GESAMTEN Viewport) - auf breiten Desktop-Screens wuerde sie ueber die volle Fensterbreite gespannt, obwohl das Idle-Dorf-Fenster selbst nur einen Teil davon einnimmt (siehe Analyse). Ab hier deshalb an einen Breakpoint gekoppelt statt bedingungslos; Desktop bekommt direkt im Anschluss eine eigene, gruppierte Tableiste.

/* ---- "Mehr"-Ausklappmenue (die restlichen 9 Tabs) ----
   Bug-Fix 20.07. (Spieler-Foto vom echten Handy, installierte App: die
   ganze Gruppen-Liste - Fortschritt/Kampf & Rang/Gilde/Sammlung - stand
   permanent sichtbar MITTEN im Kampf-Tab statt als versteckte Bottom-
   Sheet). Root Cause per direktem Nachstellen bestaetigt: dieser ganze
   Block stand bisher INNERHALB von @media(max-width:760px) - auf einem
   Geraet mit CSS-Breite >760px (grosses Display/Skalierung) griff die
   gesamte Versteck-/Overlay-Logik (position:fixed, transform:translateY
   (100%), .open-Umschaltung) dadurch gar nicht, der Sheet fiel auf einen
   ganz normalen Block im Dokumentfluss zurueck - voll sichtbar, immer.
   Das JS, das die 9 restlichen Tabs hineinsortiert (bkmpIdleSetupMobile-
   TabOverflow, bkmp-app-mode-bootstrap.js), hat dagegen KEINE Breiten-
   Pruefung und lief so oder so. Jetzt bewusst UNBEDINGT (kein @media
   mehr) - echter App-Modus (html.bkmp-app-mode) bedeutet immer ein
   Telefon/PWA, die urspruengliche Sorge "auf breiten Desktop-Screens
   wuerde die Leiste ueber die volle Fensterbreite gespannt" betrifft nur
   den seltenen Entwickler-/QA-Fall "?app=idledorf manuell auf einem
   breiten Desktop-Browser aufgerufen" - eine kaputte Navigation fuer
   echte Handy-Spieler wiegt schwerer als diese Kante. */
html.bkmp-app-mode .idle-app-more-sheet {
  position: fixed;
  inset: 0;
  z-index: 49;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background .25s ease;
}
html.bkmp-app-mode .idle-app-more-sheet.open {
  background: rgba(0, 0, 0, .55);
  pointer-events: auto;
}
html.bkmp-app-mode .idle-app-more-sheet-card {
  width: 100%;
  max-height: 62vh;
  overflow-y: auto;
  padding: .9rem 1rem calc(5.6rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--app-purple-deep), var(--app-void));
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, .6);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
html.bkmp-app-mode .idle-app-more-sheet.open .idle-app-more-sheet-card {
  transform: translateY(0);
}
html.bkmp-app-mode .idle-app-more-sheet-handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  margin: 0 auto .9rem;
}
html.bkmp-app-mode .idle-app-more-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
html.bkmp-app-mode .idle-app-more-sheet-grid .idle-dorf-tab {
  flex-direction: column;
  display: flex;
  min-width: 0;
  padding: .8rem .4rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
}
html.bkmp-app-mode .idle-app-more-sheet-grid .idle-dorf-tab-icon { font-size: 1.35rem; }
html.bkmp-app-mode .idle-app-more-sheet-grid .idle-dorf-tab-label {
  font-size: .68rem;
  white-space: normal;
  text-align: center;
}
html.bkmp-app-mode .idle-app-more-sheet-grid .idle-dorf-tab.active { transform: none; }
html.bkmp-app-mode #idleAppMoreBtn.active {
  background: linear-gradient(135deg, var(--app-gold), var(--app-orange));
  border-color: transparent;
  box-shadow: var(--app-glow-gold);
  color: #2b1600;
  transform: translateY(-3px) scale(1.06);
}

/* ---- Kampfbereich als eine zusammenhaengende Kampf-Szene statt zwei
   getrennter Kaesten (Phase 4) ---- */
html.bkmp-app-mode .idle-battlefield {
  min-height: 40vh;
  padding: 1.6rem 1rem 1.3rem;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--app-red) 16%, transparent), transparent 50%),
    radial-gradient(circle at 15% 90%, color-mix(in srgb, var(--app-blue) 16%, transparent), transparent 55%),
    radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--app-orange) 14%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .35));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .5);
}
/* Phase 7.1 Stufe 3 (21.07., Nutzer-Auftrag "Dorf 44-48%, Drache 48-56%"):
   diese Regel (nicht die gleichnamige weiter oben in der Datei, die durch
   die spaetere Position hier ueberschrieben wird - verifiziert per
   CSSOM-Rule-Matching) ist die tatsaechlich wirksame Fassung - macht
   beide Container bereits randlos/hintergrundlos (praktisch schon "eine
   gemeinsame Szene" statt zwei Karten). Vorher hier ebenfalls 46%/46%
   (symmetrisch) - jetzt asymmetrisch, Drache als "Gegner" bewusst etwas
   groesser. */
html.bkmp-app-mode .idle-village {
  width: 46%;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
html.bkmp-app-mode .idle-dragon {
  width: 52%;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
html.bkmp-app-mode .idle-village-sprite { max-width: 100%; }
html.bkmp-app-mode .idle-dragon-sprite,
html.bkmp-app-mode .idle-dragon-boss .idle-dragon-sprite,
html.bkmp-app-mode .idle-dragon-miniboss .idle-dragon-sprite,
html.bkmp-app-mode .idle-dragon-sprite-video,
html.bkmp-app-mode .idle-dragon-boss .idle-dragon-sprite-video,
html.bkmp-app-mode .idle-dragon-miniboss .idle-dragon-sprite-video {
  max-width: 100%;
}
html.bkmp-app-mode .idle-dragon-name {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: .85rem;
  color: var(--app-red);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}
html.bkmp-app-mode .idle-battlefield::before {
  font-size: 2rem;
  top: 42%;
}

@media (prefers-reduced-motion: reduce) {
  html.bkmp-app-mode.zone-game .app-bg-fx-nebula,
  html.bkmp-app-mode.zone-game .app-bg-fx-stars,
  html.bkmp-app-mode.zone-game .app-bg-fx-embers span,
  html.bkmp-app-mode .idle-hud-level-badge,
  html.bkmp-app-mode .idle-hud-streak-badge,
  html.bkmp-app-mode .idle-hud-stats span,
  html.bkmp-app-mode .idle-hud-resources span,
  html.bkmp-app-mode .idle-res-chip,
  html.bkmp-app-mode .idle-battlefield,
  html.bkmp-app-mode .raid-join-banner.raid-urgent,
  html.bkmp-app-mode .raid-join-banner.raid-urgent .raid-join-banner-countdown {
    animation: none !important;
  }
  html.bkmp-app-mode .idle-app-more-sheet,
  html.bkmp-app-mode .idle-app-more-sheet-card {
    transition: none !important;
  }
}

/* ============================================================
   APP-MODUS REDESIGN, PHASE 5 (Top-Bar mit Spieler-Portrait)
   ============================================================
   Referenzbild-Wunsch: Portrait+Name+Level oben, Ressourcen als eigene
   Reihe. Passend dazu liefert bkmpIdleRenderHud() in idledorf.js im
   App-Modus jetzt eine eigene Vorlage mit eigenen Klassennamen
   (idle-hud-app-*) - die Website-Vorlage/-Klassen bleiben unveraendert
   bestehen, hier wird nichts von der alten HUD-Optik ueberschrieben. */
html.bkmp-app-mode .idle-hud-app-top {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .6rem;
}
html.bkmp-app-mode .idle-hud-app-portrait {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, var(--app-purple-light), var(--app-purple-deep));
  border: 2px solid var(--app-gold);
  box-shadow: var(--app-glow-gold);
}
html.bkmp-app-mode .idle-hud-app-portrait-icon { font-size: 1.6rem; }
html.bkmp-app-mode .idle-hud-app-portrait-level {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 22px;
  padding: 0 .3rem;
  text-align: center;
  font-size: .68rem;
  font-weight: 800;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--app-gold), var(--app-orange));
  color: #2b1600;
  border: 2px solid var(--app-void);
}
html.bkmp-app-mode .idle-hud-app-identity { flex: 1; min-width: 0; }
html.bkmp-app-mode .idle-hud-app-name {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--app-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.bkmp-app-mode .idle-hud-app-sub {
  font-size: .7rem;
  color: var(--app-cyan);
  font-weight: 600;
  min-height: 1em;
  text-shadow: 0 0 8px color-mix(in srgb, var(--app-cyan) 55%, transparent);
}
html.bkmp-app-mode .idle-hud-app-resources,
html.bkmp-app-mode .idle-hud-app-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .5rem;
}
html.bkmp-app-mode .idle-hud-app-xp { margin-top: .1rem; }

/* ============================================================
   APP-MODUS REDESIGN, PHASE 15 (fest verankerter Top-Bar-Rahmen +
   groesserer Name + hochwertigere Ressourcen-Anzeige)
   ============================================================
   Nutzerwunsch: "Namen größer.. Rohstoffe viel Schöner.. Fest
   eingebauter Rahmen oben?" Recherche (Game UI Database / Page Flows
   Game-HUD-Guide / Sunstrike Studios HUD-Guide, siehe Chat-Quellen)
   liefert dafuer drei uebereinstimmende Prinzipien echter Mobile-RPGs
   (AFK Arena, RAID: Shadow Legends, Summoners War):
   1) Das HUD ist ein "Dashboard": ein konstanter, immer sichtbarer
      Rahmen, in dem sich nur die Werte aendern - kein loser Text auf
      dem Hintergrund. Deshalb bekommt die Leiste jetzt einen eigenen,
      randvollen ("full-bleed") Panel-Hintergrund mit klarer Kante zum
      Schlachtfeld darunter, bleibt beim Scrollen fixiert oben (die
      Karte selbst ist der Scroll-Container, siehe .idle-dorf-card
      "overflow-y:auto" weiter oben in dieser Datei).
   2) Ressourcen brauchen IMMER Icon + Zahl zusammen mit klarer
      Farbcodierung pro Ressourcentyp (nicht nur Emoji im Fliesstext) -
      deshalb jetzt eigene Icon-Kachel je Ressource statt reinem Text.
   3) Kontrast/Lesbarkeit zuerst: dickere Textschatten, klare
      Rahmenfarbe pro Kachel, getestet auf hellstem Hintergrund-Effekt
      (Sternenfeld/Nebel). */
/* KRITISCHER FUND (Phase 5.1 Verifikation, 17.07.): diese negativen
   Raender sind exakt auf das Padding der /app-Vollbild-Karte (siehe
   Fund weiter oben, jetzt html.bkmp-app-mode.zone-game) kalibriert -
   standen aber selbst auf blossem html.bkmp-app-mode. Auf der normalen
   Website (94vw-Dialogkarte mit anderem Padding, siehe Phase 4) zog das
   den HUD zu weit nach oben/aussen und liess ihn mit der direkt
   darunter liegenden Tableiste kollidieren. Gehoert exklusiv zusammen
   mit der Vollbild-Karte zu echtem /app. */
html.bkmp-app-mode.zone-game #idleDorfHud {
  position: sticky;
  top: 0;
  z-index: 6;
  /* Randvoll bis an die wahre Kartenkante ziehen (negative Margins
     heben genau das Karten-Padding von Phase 1 auf), dann innen das
     gleiche Polster wieder aufbauen - Inhalt landet optisch an
     derselben Stelle wie vorher, nur mit eigenem Panel-Hintergrund
     darunter statt direkt auf dem Karten-Hintergrund. */
  margin: calc(-1.4rem - env(safe-area-inset-top)) calc(-1rem - env(safe-area-inset-right)) .7rem calc(-1rem - env(safe-area-inset-left));
  padding: calc(1.1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) .85rem calc(1rem + env(safe-area-inset-left));
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--app-purple-light) 30%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--app-purple-deep) 96%, black) 0%, color-mix(in srgb, var(--app-void) 97%, black) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--app-gold) 30%, transparent);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
}
html.bkmp-app-mode.zone-game #idleDorfHud::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--app-gold), var(--app-cyan), var(--app-gold), transparent);
  opacity: .65;
  pointer-events: none;
}
/* Groesserer, praesenterer Name (Nutzerwunsch), mit Gold-Schimmer
   statt reinem Fliesstext - Namen ist die "Identitaet" oben in jedem
   Referenzspiel, entsprechend darf er mehr Gewicht haben als Level-
   Zahl oder Ressourcen. */
html.bkmp-app-mode .idle-hud-app-name {
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 0 16px color-mix(in srgb, var(--app-gold) 30%, transparent);
}
/* Ressourcen-/Stats-Kacheln: Icon-Chip + fetter Zahlenwert getrennt
   (idledorf.js liefert <i class="idle-res-icon"> + <b class="idle-res-val">
   statt reinem Text), jede Ressource mit eigener Rahmen-/Icon-Farbe -
   macht die Leiste vom "Text mit Emoji davor" zu echten grafischen
   Wert-Kacheln, wie in der Recherche gefordert ("graphic + number"). */
html.bkmp-app-mode .idle-res-chip {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .22rem .62rem .22rem .22rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--app-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .22));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .35);
  /* KEIN appHudPop-Einblend-Effekt hier (Nutzer-Meldung: "alle Buttons
     oben flackern bei jedem Drachen-Tod"): bkmpIdleRenderHud() baut
     #idleDorfHud bei JEDEM Aufruf (Tick, Kill, Ressourcen-Aenderung -
     30+ Stellen in idledorf.js) komplett per innerHTML neu, jede Kachel
     ist also technisch immer ein frisch eingefuegtes Element. Eine
     CSS-Animation auf Einfuegen wuerde deshalb bei JEDEM Render auf
     ALLEN Kacheln neu abspielen, nicht nur bei echten Wertaenderungen -
     genau das erzeugte das gemeldete Flackern. */
}
html.bkmp-app-mode .idle-res-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  font-size: .92em;
  font-style: normal;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
}
html.bkmp-app-mode .idle-res-val { color: var(--app-ink); }
html.bkmp-app-mode .idle-hud-app-stats .idle-res-chip {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
  color: var(--app-muted);
}
html.bkmp-app-mode .idle-hud-app-stats .idle-res-val { color: var(--app-muted); }
/* Farbthemen pro Ressource, angelehnt an bestehende App-Farbtoken -
   Gold=Gold, Holz=Gruen, Stein=Silber/Lavendel, Kristalle=Cyan,
   Essenz=Violett (bewusst anders als Kristall-Cyan, damit beide auf
   einen Blick unterscheidbar bleiben). */
html.bkmp-app-mode .idle-res-gold { border-color: color-mix(in srgb, var(--app-gold) 45%, transparent); }
html.bkmp-app-mode .idle-res-gold .idle-res-icon { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--app-gold) 75%, white), var(--app-gold-deep)); box-shadow: 0 0 7px color-mix(in srgb, var(--app-gold) 65%, transparent), 0 0 0 1px rgba(255, 255, 255, .12) inset; }
html.bkmp-app-mode .idle-res-wood { border-color: color-mix(in srgb, var(--app-green) 45%, transparent); }
html.bkmp-app-mode .idle-res-wood .idle-res-icon { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--app-green) 70%, white), #1e7a44); box-shadow: 0 0 7px color-mix(in srgb, var(--app-green) 55%, transparent), 0 0 0 1px rgba(255, 255, 255, .12) inset; }
html.bkmp-app-mode .idle-res-stone { border-color: rgba(210, 205, 225, .4); }
html.bkmp-app-mode .idle-res-stone .idle-res-icon { background: radial-gradient(circle at 35% 30%, #e8e4f2, #8b84a0); box-shadow: 0 0 6px rgba(210, 205, 225, .4), 0 0 0 1px rgba(255, 255, 255, .12) inset; }
html.bkmp-app-mode .idle-res-crystal { border-color: color-mix(in srgb, var(--app-cyan) 45%, transparent); }
html.bkmp-app-mode .idle-res-crystal .idle-res-icon { background: radial-gradient(circle at 35% 30%, #baf9f6, var(--app-cyan)); box-shadow: 0 0 7px color-mix(in srgb, var(--app-cyan) 60%, transparent), 0 0 0 1px rgba(255, 255, 255, .12) inset; }
html.bkmp-app-mode .idle-res-essence { border-color: rgba(192, 132, 252, .45); }
html.bkmp-app-mode .idle-res-essence .idle-res-icon { background: radial-gradient(circle at 35% 30%, #e4c9ff, #a855f7); box-shadow: 0 0 7px rgba(192, 132, 252, .55), 0 0 0 1px rgba(255, 255, 255, .12) inset; }

/* ============================================================
   APP-MODUS REDESIGN, PHASE 6 (unnoetiges Verschachtel-Scrollen weg)
   ============================================================
   Nutzer-Feedback nach Live-Test: riesige leere schwarze Flaeche unter
   kurzen Panels (z.B. Dungeon) + man musste scrollen, obwohl kaum Inhalt
   da war. Ursache: .idle-dorf-panel bekommt auf der normalen Website
   bewusst eine FESTE Rahmenhoehe (min(58vh,560px)) mit eigenem
   Innen-Scrollbereich, damit die Karte beim Tab-Wechsel nie springt (das
   ist fuer die Website-Ansicht mit Investment-Dashboard drumrum sinnvoll,
   dort bleibt es unveraendert). Im App-Modus gibt es dieses "Nachbar-
   Layout" nicht, und verschachteltes Scrollen (Panel scrollt UND die
   Karte drumrum scrollt) ist ohnehin kein Muster, das handelsuebliche
   Mobile-Games verwenden - ein Panel ist dort immer genau so hoch wie
   sein Inhalt, die Karte selbst scrollt bei Bedarf als Ganzes. */
html.bkmp-app-mode .idle-dorf-panel {
  height: auto;
  max-height: none;
  overflow-y: visible;
  overflow-x: visible;
}

/* ============================================================
   APP-MODUS REDESIGN, PHASE 7 (vollstaendiger Panel-Audit)
   ============================================================
   Nutzer-Feedback: einzelne Nachbesserungen reichten nicht, "alles" wirkt
   noch klein. Diesmal komplett: jede Button-/Text-Klasse aus allen 14
   Panels (Upgrades, Skilltree, Erfolge, Prestige, Runen, Skins, Dungeon,
   Arena, Gilde, Gilden-Tech, Gildenboss, Bestenliste, Drachenzucht)
   einzeln durchgegangen und explizit vergroessert - keine generische
   Sammelregel mehr, die irgendwo von einer spezifischeren alten
   Website-Regel unbemerkt ueberstimmt wird (genau das ist beim Dungeon-
   Start-Button passiert). !important auf den Groessen-Eigenschaften,
   damit das diesmal zuverlaessig gewinnt, unabhaengig von Spezifitaet.
   ============================================================ */

/* ---- Cross-Panel-Grundregeln (Sicherheitsnetz + gemeinsam genutzte
   Klassen, siehe Recherche: dieselben Klassen tauchen in mehreren
   Panels auf, hier je EINMAL gestylt) ---- */
html.bkmp-app-mode .idle-dorf-panel h4,
html.bkmp-app-mode .idle-dorf-panel .idle-upgrade-section-title,
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-section {
  font-size: 1.05rem !important;
  font-family: 'Fraunces', serif;
}
html.bkmp-app-mode .idle-dorf-panel .empty-hint,
html.bkmp-app-mode .idle-dorf-panel .idle-panel-hint {
  font-size: .88rem !important;
  line-height: 1.5;
}

/* Karten-Raster (Upgrades/Prestige, Skins/Drachen) - groessere Karten,
   groesserer Text, breitere Mindestspalten fuer bessere Lesbarkeit. */
html.bkmp-app-mode .idle-dorf-panel .idle-upgrade-grid,
html.bkmp-app-mode .idle-dorf-panel .idle-skin-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: .7rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-upgrade-card,
html.bkmp-app-mode .idle-dorf-panel .idle-skin-card {
  padding: 1rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-upgrade-icon,
html.bkmp-app-mode .idle-dorf-panel .idle-skin-icon {
  font-size: 2rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-upgrade-name,
html.bkmp-app-mode .idle-dorf-panel .idle-skin-name {
  font-size: 1rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-upgrade-level {
  font-size: .8rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-upgrade-effect-row,
html.bkmp-app-mode .idle-dorf-panel .idle-upgrade-desc,
html.bkmp-app-mode .idle-dorf-panel .idle-skin-desc {
  font-size: .84rem !important;
  line-height: 1.4;
}
html.bkmp-app-mode .idle-dorf-panel .idle-upgrade-buy,
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-building-upgrade,
html.bkmp-app-mode .idle-dorf-panel .idle-production-building-buy,
html.bkmp-app-mode .idle-dorf-panel .idle-skin-action {
  width: 100% !important;
  padding: .75rem .8rem !important;
  font-size: .88rem !important;
  min-height: 46px !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-autobuy-toggle {
  padding: .8rem 1rem !important;
  font-size: .95rem !important;
  min-height: 46px;
}
html.bkmp-app-mode .idle-dorf-panel .idle-skin-locked-hint,
html.bkmp-app-mode .idle-dorf-panel .idle-skin-empty-hint,
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-nest-countdown {
  font-size: .82rem !important;
}

/* "Kurzinfo + Liste"-Muster (Dungeon-Intro, Arena, Gilde-Uebersicht,
   Gildenboss) - dieselben Klassen ueberall, einmal gross gemacht. */
html.bkmp-app-mode .idle-dorf-panel .idle-dungeon-intro { padding: 1.2rem 1.3rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-dungeon-intro h4 { font-size: 1.2rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-dungeon-intro p,
html.bkmp-app-mode .idle-dorf-panel .idle-dungeon-best {
  font-size: .92rem !important;
  line-height: 1.5;
}
html.bkmp-app-mode .idle-dorf-panel .idle-arena-opponent-card,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-quest-card,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-activity-log,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-chat-log {
  padding: .9rem 1rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-arena-opponent-name,
html.bkmp-app-mode .idle-dorf-panel .idle-arena-opponent-rating {
  font-size: .95rem !important;
  font-weight: 700;
}
html.bkmp-app-mode .idle-dorf-panel .idle-arena-opponent-record,
html.bkmp-app-mode .idle-dorf-panel .idle-arena-opponent-chance,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-activity-entry,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-chat-msg,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-request-pending,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-browse-members {
  font-size: .86rem !important;
  line-height: 1.5;
}
html.bkmp-app-mode .idle-dorf-panel .idle-arena-attack-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-boss-join-btn {
  width: 100% !important;
  padding: .9rem !important;
  font-size: .95rem !important;
  min-height: 50px !important;
}

/* Erfolge/Sammlung (auch im Runen-Panel-Kopf genutzt) - bewusst auf
   .idle-dorf-panel beschraenkt, damit das Achievement-Popup ausserhalb
   des Idle-Dorfs unangetastet bleibt. */
html.bkmp-app-mode .idle-dorf-panel .idle-sammlung-subheading { font-size: 1.05rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-sammlung-count { font-size: .82rem !important; }
html.bkmp-app-mode .idle-dorf-panel .achievement-row { padding: .8rem .9rem !important; }
html.bkmp-app-mode .idle-dorf-panel .achievement-icon { font-size: 1.3rem !important; }
html.bkmp-app-mode .idle-dorf-panel .achievement-title { font-size: .95rem !important; }
html.bkmp-app-mode .idle-dorf-panel .achievement-desc { font-size: .82rem !important; line-height: 1.4; }
html.bkmp-app-mode .idle-dorf-panel .idle-title-bonus { font-size: .8rem !important; padding: .3rem .7rem !important; }
html.bkmp-app-mode .idle-dorf-panel #idleOpenAchievementsBtn,
html.bkmp-app-mode .idle-dorf-panel #idleOpenCosmeticsBtn {
  padding: .85rem 1.1rem !important;
  font-size: .92rem !important;
  min-height: 48px !important;
}

/* ---- Skilltree ---- */
html.bkmp-app-mode .idle-dorf-panel .idle-skilltree-help-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-skilltree-reset-btn {
  padding: .7rem 1rem !important;
  font-size: .85rem !important;
  min-height: 44px !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-skillpoints-hint { font-size: .95rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-skill-branch-header { padding: 1rem 1.1rem !important; min-height: 52px; }
html.bkmp-app-mode .idle-dorf-panel .idle-skill-branch-name { font-size: 1.15rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-skill-branch-progress { font-size: .84rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-skill-branch-lock,
html.bkmp-app-mode .idle-dorf-panel .idle-skill-branch-chevron {
  font-size: 1.15rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-skill-node {
  width: 168px !important;
  padding: 1rem .9rem .9rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-skill-node-icon { width: 46px !important; height: 46px !important; font-size: 1.5rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-skill-node-name { font-size: .92rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-skill-node-desc { font-size: .78rem !important; line-height: 1.4; }
html.bkmp-app-mode .idle-dorf-panel .idle-skill-node-requires { font-size: .72rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-skill-node-rank { font-size: .78rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-skill-node-btn {
  padding: .6rem .7rem !important;
  font-size: .84rem !important;
  min-height: 44px !important;
}
/* Skill-/Runen-Hilfe-Popup (dasselbe Markup fuer beide) */
html.bkmp-app-mode .skillhelp-name { font-size: .98rem !important; }
html.bkmp-app-mode .skillhelp-desc { font-size: .88rem !important; line-height: 1.5; }
html.bkmp-app-mode .skillhelp-icon { font-size: 1.2rem !important; }
html.bkmp-app-mode .skillhelp-cost { font-size: .8rem !important; }

/* ---- Prestige ---- */
html.bkmp-app-mode .idle-dorf-panel .idle-prestige-summary,
html.bkmp-app-mode .idle-dorf-panel .idle-prestige-progress-card {
  padding: 1.1rem 1.2rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-prestige-level { font-size: 1.2rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-prestige-points { font-size: .95rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-prestige-bonus-note,
html.bkmp-app-mode .idle-dorf-panel .idle-prestige-hint {
  font-size: .86rem !important;
  line-height: 1.5;
}
html.bkmp-app-mode .idle-dorf-panel .idle-prestige-progress-label { font-size: .9rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-prestige-progress-hint { font-size: .78rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-prestige-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-prestige-buy {
  width: 100% !important;
  padding: .9rem !important;
  font-size: .95rem !important;
  min-height: 50px !important;
}

/* ---- Runen (viele kleine Elemente, hier am dringendsten) ---- */
html.bkmp-app-mode .idle-dorf-panel .idle-runen-help-btn { padding: .7rem 1rem !important; font-size: .85rem !important; min-height: 44px !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-runen-slot-tab {
  padding: .65rem .8rem !important;
  font-size: .88rem !important;
  min-height: 44px !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-runen-slot-tab-icon { font-size: 1.15rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-runen-slot-tab-name { font-size: .8rem !important; display: inline !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-runen-slot-tab-count { font-size: .74rem !important; }
/* Ausruestungs-Slots auf dem Runen-Kreis sind auf der Website bewusst
   winzig (Prozent-Positionierung auf einem Bild) - im App-Modus
   trotzdem ein spuerbares Mindestmass, sonst kaum treffbar. */
html.bkmp-app-mode .idle-dorf-panel .idle-runen-equip-slot {
  min-width: 44px !important;
  min-height: 44px !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-runen-slot-level { font-size: .7rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-runen-item {
  min-height: 56px !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-runen-stat-box { padding: 1rem 1.1rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-runen-stat-name { font-size: 1.02rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-runen-stat-level,
html.bkmp-app-mode .idle-dorf-panel .idle-runen-stat-rarity { font-size: .86rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-runen-stat-primary { font-size: .96rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-runen-stat-note { font-size: .8rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-runen-substat-list { font-size: .88rem !important; line-height: 1.6; }
html.bkmp-app-mode .idle-dorf-panel .idle-runen-equip-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-runen-upgrade-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-runen-instant-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-runen-ascend-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-runen-autofuse-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-runen-sell-all-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-runen-autoascend-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-runen-maximize-legi-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-runen-fuse-confirm-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-runen-fuse-cancel-btn {
  padding: .75rem .9rem !important;
  font-size: .88rem !important;
  min-height: 46px !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-runen-fuse-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-runen-sell-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-runen-fuse-quick-btn {
  padding: .55rem .6rem !important;
  font-size: .8rem !important;
  min-height: 44px !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-runen-fuse-panel { padding: 1.1rem 1.2rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-runen-fuse-title { font-size: 1.05rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-runen-fuse-hint,
html.bkmp-app-mode .idle-dorf-panel .idle-runen-fuse-progress { font-size: .9rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-runen-fuse-warn { font-size: .84rem !important; }

/* ---- Gilde / Gilden-Tech / Gildenboss ---- */
html.bkmp-app-mode .idle-dorf-panel .idle-guild-create-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-join-code-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-join-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-cancel-request-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-request-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-toggle-members-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-contribute-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-request-accept-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-request-reject-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-role-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-kick-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-buy-slot-btn,
html.bkmp-app-mode .idle-dorf-panel #idleGuildSettingsToggleBtn,
html.bkmp-app-mode .idle-dorf-panel #idleGuildLeaveBtn,
html.bkmp-app-mode .idle-dorf-panel #idleGuildRegenCodeBtn,
html.bkmp-app-mode .idle-dorf-panel #idleGuildSaveSettingsBtn,
html.bkmp-app-mode .idle-dorf-panel #idleGuildChatSendBtn {
  padding: .8rem 1.1rem !important;
  font-size: .9rem !important;
  min-height: 46px !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-guild-tech-category-tab {
  min-height: 44px !important;
  font-size: .92rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .bkmp-guild-tech-node {
  width: 148px !important;
  padding: .9rem .7rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .bkmp-guild-tech-node-icon { font-size: 1.7rem !important; }
html.bkmp-app-mode .idle-dorf-panel .bkmp-guild-tech-node-label { font-size: .86rem !important; }
html.bkmp-app-mode .idle-dorf-panel .bkmp-guild-tech-node-tier { font-size: .8rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-guild-banner-color-btn {
  width: 40px !important;
  height: 40px !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-guild-banner-symbol-btn {
  width: 46px !important;
  height: 46px !important;
  font-size: 1.3rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-guild-chat-delete-btn {
  font-size: 1.1rem !important;
  min-width: 44px !important;
  min-height: 44px !important;
  opacity: .8 !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-guild-level-badge { font-size: 1rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-guild-level-xp,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-xp-pct { font-size: .84rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-guild-quest-title { font-size: .96rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-guild-quest-progress,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-quest-reward { font-size: .82rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-guild-chat-time { font-size: .74rem !important; }
/* Gildenboss/Weltboss-Kampfergebnis - bewusst auf beide Kontexte
   angewendet (dieselben raid-*-Klassen), damit auch der Weltboss-Kampf
   von der groesseren Optik profitiert statt nur die Gildenboss-Ansicht.
   BEIDE Selektoren an html.bkmp-app-mode gebunden - #raidCombatView lebt
   auch auf der normalen Website (Weltboss-Kampf ausserhalb des Idle-Dorf-
   Kontexts), die soll unangetastet bleiben. */
html.bkmp-app-mode #raidCombatView .raid-result-title,
html.bkmp-app-mode #idlePanelGildeBoss .raid-result-title {
  font-size: 1.7rem !important;
}
html.bkmp-app-mode #raidCombatView .raid-result-stat-label,
html.bkmp-app-mode #idlePanelGildeBoss .raid-result-stat-label { font-size: .8rem !important; }
html.bkmp-app-mode #raidCombatView .raid-result-stat-value,
html.bkmp-app-mode #idlePanelGildeBoss .raid-result-stat-value { font-size: 1.3rem !important; }
html.bkmp-app-mode #raidCombatView .raid-result-mvp,
html.bkmp-app-mode #idlePanelGildeBoss .raid-result-mvp { font-size: 1.05rem !important; }
html.bkmp-app-mode #raidCombatView .raid-boss-name,
html.bkmp-app-mode #idlePanelGildeBoss .raid-boss-name { font-size: 1rem !important; }
html.bkmp-app-mode #raidCombatView .raid-hp-label,
html.bkmp-app-mode #idlePanelGildeBoss .raid-hp-label { font-size: .8rem !important; }
html.bkmp-app-mode #guildBossCreature { min-height: 140px; }

/* ---- Bestenliste ---- */
/* Kritischer Fund im Audit: .idle-dorf-tab wird HIER als reine
   Unterkategorie-Filterleiste wiederverwendet (nicht als Navigation!) -
   ohne diese Ausnahme haette sie faelschlich dieselbe grosse
   Icon-ueber-Text-Kachel-Optik wie die Bottom Navigation bekommen. */
html.bkmp-app-mode .idle-dorf-leaderboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  position: static;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 0 .8rem;
  margin: 0;
}
html.bkmp-app-mode .idle-dorf-leaderboard-tabs .idle-dorf-tab {
  flex: none;
  flex-direction: row;
  min-width: 0;
  padding: .6rem 1rem !important;
  font-size: .85rem !important;
  transform: none !important;
}
html.bkmp-app-mode .idle-dorf-leaderboard-tabs .idle-dorf-tab-icon,
html.bkmp-app-mode .idle-dorf-leaderboard-tabs .idle-dorf-tab-label {
  font-size: .85rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .leaderboard-row { padding: .8rem .9rem !important; }
html.bkmp-app-mode .idle-dorf-panel .leaderboard-rank { font-size: 1.15rem !important; }
html.bkmp-app-mode .idle-dorf-panel .leaderboard-name-text { font-size: .95rem !important; }
html.bkmp-app-mode .idle-dorf-panel .leaderboard-value { font-size: .98rem !important; }

/* ---- Drachenzucht ---- */
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-nest-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-nest-card,
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-baby-card { padding: 1rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-stats { font-size: .86rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-substats { font-size: .78rem !important; line-height: 1.5; }
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-fav-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-release-btn {
  font-size: 1.15rem !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: .4rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-fav-badge { font-size: 1.3rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-mini-delete-btn { width: 30px !important; height: 30px !important; font-size: 0.92rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-filter-fav,
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-rarity-filter-btn {
  font-size: .86rem !important;
  min-height: 44px !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-assign-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-hatch-btn,
html.bkmp-app-mode .idle-dorf-panel #idleDragonBuyNestBtn,
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-evolve-teen-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-feed-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-evolve-adult-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-uncompanion-btn,
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-companion-btn,
html.bkmp-app-mode .idle-dorf-panel #idleDragonExpandStorageBtn {
  padding: .7rem .8rem !important;
  font-size: .86rem !important;
  min-height: 44px !important;
}

/* ---- Statische Nebenfenster, die aus Panels heraus geoeffnet werden
   (Drachen-Detail, Rahmen-Kauf) - eigene Karten in index.html, keine
   .idle-dorf-panel-Vorfahren, deshalb eigene Regeln. ---- */
html.bkmp-app-mode #idleDragonDetailOverlay .idle-dragon-detail-card {
  max-width: 92vw;
}
html.bkmp-app-mode #idleDragonDetailOverlay .idle-skin-desc {
  font-size: .9rem !important;
}
html.bkmp-app-mode #idleDragonDexOverlay .idle-dragon-dex-detail-card {
  max-width: 92vw;
}
html.bkmp-app-mode #idleDragonDexOverlay .idle-skin-desc {
  font-size: .9rem !important;
}
html.bkmp-app-mode #idleDragonDexOverlay .idle-dragon-dex-nav {
  width: 48px !important;
  height: 48px !important;
  font-size: 1.6rem !important;
}
html.bkmp-app-mode #idleDragonDexOverlay .idle-dragon-dex-dot {
  width: 12px !important;
  height: 12px !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-dragon-dex-grid .idle-skin-name { font-size: .92rem !important; }

/* ============================================================
   APP-MODUS REDESIGN, PHASE 10 (Recherche-Runde: Fenster + Top-Bar)
   ============================================================
   Nutzerwunsch: "hol dir noch mehr Tipps, auch fuer die Top-Bar" - Recherche
   zu echten Mobile-Game-Referenzen ergab zwei konkret umsetzbare Punkte:
   1) Zonen-Modell (Ecken=Dauerinfo, Mitte=Kampf-Feedback, unten=Daumenzone)
      bestaetigt die bestehende Struktur, kein Neubau noetig.
   2) Fenster/Popups in guten Mobile-RPGs nutzen durchgehend einen
      Gold-Verlaufsrahmen-Look statt schlichter Rechtecke (Technik: zwei
      Hintergrundebenen, eine deckende als padding-box, eine als
      Farbverlauf als border-box - dieselbe Technik wie die grosse
      Idle-Dorf-Karte selbst, jetzt konsistent auf ALLE Popups uebertragen,
      die im App-Modus ueberhaupt erreichbar sind (Login, Bestaetigungen,
      Skill-/Runen-Hilfe, Event-Popups, Account-Einstellungen, ...).
   ============================================================ */

/* ---- Alle Popup-Fenster (.joke-card) im Idle-Dorf-Kontext einheitlich im
   Fantasy-Look, nicht nur die grosse Idle-Dorf-Karte.
   Redesign Phase 5 (17.07.): war "html.bkmp-app-mode .joke-card" - seit
   .bkmp-app-mode global (nicht mehr /app-exklusiv) ist, haette das JEDES
   .joke-card auf der ganzen Seite erfasst, auch die professionellen
   Marketing-Popups (Wunsch-CTA, Feedback, Investoren-Anfrage,
   Kartendatenbank-Einreichung, ...) - das widerspraeche "ein Designsystem,
   zwei Stimmungen". Jetzt auf .zone-game beschraenkt: alle Spiel-/Account-
   bezogenen Overlays (Login, Erfolge, Name/Passwort/Account, Dorf-Skin-Kauf,
   Drachen-Lexikon, Wartung, Skilltree-/Runen-Hilfe, Spielerprofil,
   Arena-Kampf, Stream-Hilfe) tragen dafuer jetzt explizit zone-game im
   Markup (siehe index.html), analog zu #idleDorfOverlay. Generische/
   Website-Popups (bkmpConfirmOverlay, Wunsch/Feedback/Investoren/
   Kartendatenbank/PartnerShop-Formulare) bleiben bewusst unverändert bei
   zone-site. */
.zone-game .joke-card {
  position: relative;
  border-radius: 20px;
  border-color: transparent;
  background:
    linear-gradient(180deg, var(--app-purple-deep), var(--app-void)) padding-box,
    linear-gradient(135deg, var(--app-gold), var(--app-cyan), var(--app-purple-light), var(--app-gold)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 40px color-mix(in srgb, var(--app-gold) 18%, transparent);
  color: var(--app-ink);
}
.zone-game .joke-card h3 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  color: var(--app-gold);
  text-shadow: 0 0 12px color-mix(in srgb, var(--app-gold) 45%, transparent);
}
.zone-game .joke-card p,
.zone-game .joke-card label {
  color: var(--app-muted);
}
.zone-game .joke-card input[type="text"],
.zone-game .joke-card input[type="password"],
.zone-game .joke-card input[type="number"],
.zone-game .joke-card select,
.zone-game .joke-card textarea {
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--app-ink);
  border-radius: 12px;
  min-height: 44px;
}
html.bkmp-app-mode .joke-card .btn-ja,
html.bkmp-app-mode .joke-card .btn-nein {
  min-height: 44px;
  padding: .7rem 1.2rem;
  border-radius: 12px;
  font-weight: 700;
}
.zone-game .joke-card .btn-ja {
  background: linear-gradient(135deg, var(--app-gold), var(--app-orange)) !important;
  border: none !important;
  color: #2b1600 !important;
  box-shadow: var(--app-glow-gold);
}
.zone-game .joke-card .btn-nein {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}

/* ---- Top-Bar-Feinschliff: Ressourcen-Kacheln fuehren jetzt direkt zum
   passenden Bereich (Gold/Holz/Stein/Kristalle -> Upgrades, Kills ->
   Drachenzucht) - nutzt ausschliesslich die schon vorhandenen, echten
   Tab-Buttons (per .click()), keine neue Navigation/Logik noetig. Macht
   die Leiste vom reinen Anzeige-Streifen zu einem echten Shortcut, wie es
   in guten Mobile-RPGs ueblich ist (Ressource antippen = direkt zur
   Ausgabe-Moeglichkeit). */
html.bkmp-app-mode .idle-hud-app-resources .idle-res-chip {
  cursor: pointer;
  transition: transform .12s ease;
}
html.bkmp-app-mode .idle-hud-app-resources .idle-res-chip:active { transform: scale(.93); }
/* Chamfered-Ecken-Look (angeschraegte Ecken statt rund) fuer das
   Portrait-Level-Abzeichen - typisches "Gaming-HUD"-Detail statt eines
   reinen Kreises, siehe Recherche zu Chamfer-Corner-HUD-Rahmen. */
html.bkmp-app-mode .idle-hud-app-portrait {
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  border-radius: 0;
}

/* ---- Weitere Kampf-"Juice" (Nutzerwunsch: Partikel/Funken/Explosion bei
   Kritischen Treffern) - reiner CSS-Funkenausbruch, gekoppelt an die
   schon bestehende .idle-dmg-crit-Klasse aus idledorf.js, kein neuer
   JS-Hook noetig. */
html.bkmp-app-mode .idle-dmg-crit::after {
  content: '';
  position: absolute;
  inset: -30px;
  background:
    radial-gradient(circle, var(--app-gold) 0%, transparent 8%) 20% 30%,
    radial-gradient(circle, var(--app-orange) 0%, transparent 8%) 75% 20%,
    radial-gradient(circle, var(--app-gold) 0%, transparent 8%) 60% 75%,
    radial-gradient(circle, var(--app-orange) 0%, transparent 8%) 15% 70%,
    radial-gradient(circle, var(--app-red) 0%, transparent 8%) 85% 65%;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  opacity: 0;
  animation: appCritBurst .5s ease-out;
  pointer-events: none;
}
@keyframes appCritBurst {
  0% { opacity: 1; transform: scale(.3); }
  100% { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  html.bkmp-app-mode .idle-dmg-crit::after { animation: none !important; display: none; }
}

/* ---- Weltboss-Raid-Kampfansicht (#raidCombatView) - dieselbe
   Arena-Optik wie der Haupt-Kampf-Tab, konsistent statt eine zweite,
   unbehandelte Kampfansicht im alten Look zu lassen. ---- */
html.bkmp-app-mode .raid-combat-header {
  padding: .8rem 1rem !important;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(255, 59, 92, .18), rgba(74, 42, 122, .18));
  border: 1px solid color-mix(in srgb, var(--app-red) 40%, transparent);
}
html.bkmp-app-mode .raid-combat-header span:first-child {
  font-size: 1rem !important;
  font-weight: 800;
}
html.bkmp-app-mode .raid-timer {
  font-size: 1.1rem !important;
  color: var(--app-gold) !important;
  text-shadow: var(--app-glow-gold);
}
html.bkmp-app-mode .raid-battlefield {
  min-height: 38vh;
  padding: 1.4rem 1rem;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--app-red) 18%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .3));
  border: 1px solid rgba(255, 255, 255, .1);
}
html.bkmp-app-mode .raid-city,
html.bkmp-app-mode .raid-boss {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .32));
  border: 1.5px solid color-mix(in srgb, var(--app-gold) 45%, transparent);
  border-radius: 18px;
}
html.bkmp-app-mode .raid-boss-name {
  font-size: 1.02rem !important;
  color: var(--app-gold) !important;
  text-shadow: var(--app-glow-gold) !important;
}
html.bkmp-app-mode .raid-city-stats { font-size: .82rem !important; }
html.bkmp-app-mode .raid-participants-list { font-size: .88rem !important; line-height: 1.6; }

/* ============================================================
   APP-MODUS REDESIGN, PHASE 16 (Raid-Kampfansicht nach Referenzbild)
   ============================================================
   Nutzer schickte ein Referenzbild mit Wunsch-Optik fuer die
   Raid-Ansicht (VS-Badge, Icon-Rahmen an HP-Balken, Belohnungs-Leiste,
   grosser Angriff-Button, Auto-Status, Tap-Schaden-Zaehler). Zwei
   Elemente darin gibt es im echten Spiel nicht (Boss-Faehigkeits-
   Cooldown-Leiste, Fantasie-Belohnungs-Icons wie Fleisch/Apfel/Ei) -
   nach Rueckfrage im Chat bewusst NICHT nachgebaut. Alles andere hier
   ist derselbe Look, aber mit echten Daten/echter Mechanik dahinter
   (siehe bkmpRaidRenderCombat/bkmpRaidHandleBossClick in idledorf.js):
   der Angriff-Button loest denselben bestehenden Klick-Handler aus wie
   ein Tipp auf den Boss selbst, "Auto-Kampf aktiv" stimmt immer
   waehrend die Ansicht sichtbar ist (die passive Tick-Schaden-Runde
   laeuft waehrend eines Kampfes ohnehin durch), der Tap-Schaden-Wert
   ist die echte Summe der eigenen Tipp-Treffer, die Ressourcen-Leiste
   zeigt die echten 5 Ressourcen statt erfundener Icons. */
html.bkmp-app-mode .raid-vs-badge {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: .78rem;
  color: var(--app-void);
  background: radial-gradient(circle at 35% 30%, #fff6d8, var(--app-gold));
  border: 2px solid var(--app-void);
  box-shadow: var(--app-glow-gold), 0 4px 10px rgba(0, 0, 0, .5);
}
/* Schild-/Kronen-Abzeichen ueber den HP-Balken wie im Referenzbild -
   reines CSS-Generated-Content, kein neues Bild-Asset, keine
   JS-Aenderung noetig. */
html.bkmp-app-mode .raid-city,
html.bkmp-app-mode .raid-boss {
  position: relative;
  overflow: visible;
}
html.bkmp-app-mode .raid-city::before,
html.bkmp-app-mode .raid-boss::before {
  content: '🛡️';
  position: absolute;
  top: -.65rem;
  left: .6rem;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--app-purple-light), var(--app-purple-deep));
  border: 2px solid var(--app-gold);
  box-shadow: var(--app-glow-gold);
  z-index: 2;
}
html.bkmp-app-mode .raid-boss::before { content: '👑'; }
html.bkmp-app-mode .raid-hp-bar {
  height: 10px !important;
  border-radius: 999px;
  background: rgba(0, 0, 0, .4) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  overflow: hidden;
}
html.bkmp-app-mode .raid-hp-fill-city { background: linear-gradient(90deg, var(--app-green), #22c55e) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--app-green) 60%, transparent); }
html.bkmp-app-mode .raid-hp-fill-boss { background: linear-gradient(90deg, var(--app-red), #b91c1c) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--app-red) 60%, transparent); }
html.bkmp-app-mode .raid-hp-label { color: var(--app-ink) !important; font-weight: 700; }

/* Ressourcen-Leiste unter dem Schlachtfeld: gleicher "Belohnungen"-Look
   wie im Referenzbild, aber mit den echten 5 Ressourcen-Kacheln aus
   Phase 15 (idle-res-chip) statt erfundener Icons. */
html.bkmp-app-mode .idle-res-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin: .7rem 0;
  padding: .6rem .5rem .5rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .22));
  border: 1px dashed color-mix(in srgb, var(--app-gold) 45%, transparent);
}

/* Action-Bar: Auto-Status (links, echte automatische Tick-Schadenszufuegung,
   siehe bkmpRaidOwnTick in bkmp-raid.js) + Klick-Zaehler (rechts, echte
   Anzahl) - je Haelfte der Zeile.
   Spieler-Feedback (04.08.2026, ChronoKora): der frueher mittig sitzende
   grosse "⚔️ Angreifen"-Knopf (.raid-attack-btn) rief ohnehin nur denselben
   Klick-Handler wie ein Tipp auf den (deutlich groesseren) Boss-Sprite
   selbst oder die Leertaste auf - komplett entfernt (index.html/idledorf.js),
   diese Regeln damit ersatzlos weg. Beide verbliebenen Kinder haben bereits
   flex:1 1 0 - ohne den Knopf dazwischen teilen sie sich die Zeile jetzt
   automatisch haelftig, keine Breiten-/Abstands-Anpassung noetig. */
html.bkmp-app-mode .raid-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .8rem;
}
html.bkmp-app-mode .raid-auto-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .5rem .5rem;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  text-align: center;
  color: var(--app-green);
  background: rgba(74, 222, 128, .12);
  border: 1px solid color-mix(in srgb, var(--app-green) 45%, transparent);
  flex: 1 1 0;
  min-width: 0;
}
html.bkmp-app-mode .idle-res-tap {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  border-color: color-mix(in srgb, var(--app-blue) 45%, transparent);
}
html.bkmp-app-mode .idle-res-tap .idle-res-icon {
  background: radial-gradient(circle at 35% 30%, #bcd7ff, var(--app-blue));
  box-shadow: 0 0 7px color-mix(in srgb, var(--app-blue) 55%, transparent), 0 0 0 1px rgba(255, 255, 255, .12) inset;
}

/* ============================================================
   APP-MODUS REDESIGN, PHASE 17 (Ornate-Fantasy-HUD-Sprache, rein CSS)
   ============================================================
   Nutzer schickte ein KI-generiertes Referenzbild eines premium
   Fantasy-HUD-Rahmens (Chamfer-/Oktagon-Icon-Slots, Gold-Eckornamente,
   Diamant-Akzente, umrandete Namensplatte). Auf Nachfrage bestaetigt:
   kein lizenziertes Asset, nur Stil-Inspiration - deshalb HIER kein
   Bild eingebunden, sondern dieselbe Bildsprache rein per CSS
   (clip-path/Gradienten) weitergebaut, die schon beim Portrait-Level-
   Abzeichen begonnen wurde (Chamfer-Ecken statt Kreis). Kein neues
   Bild-Asset = keine zusaetzliche Ladezeit/App-Groesse, skaliert mit
   der rem-Basis wie der Rest des Redesigns. */
/* Oktagon- statt Kreis-Icon-Slots (identisches Chamfer-Polygon wie das
   Portrait-Level-Abzeichen, Phase 10) - deckt sich mit der "Icon +
   Zahl in klarer Kachel"-Empfehlung aus Phase 15 und wirkt naeher am
   Referenzbild als runde Icons. */
html.bkmp-app-mode .idle-res-icon {
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  border-radius: 0;
}
/* (Gold-Eckabschnitte am HUD-Rahmen selbst per clip-path wurden hier
   probiert, dann wieder verworfen: clip-path haette auch den
   Drop-Shadow und die Gold/Cyan-Trennlinie der Leiste aus Phase 15
   mit weggeschnitten - Regression zugunsten einer kleinen Deko-Ecke
   waere ein schlechter Tausch. Bewusst weggelassen statt fehlerhaft
   gebaut.) */
/* Namensplatte: der Name bekommt jetzt einen eigenen umrandeten
   "Schild" statt lose auf dem Hintergrund zu stehen, wie die leere
   Namens-Plakette im Referenzbild. */
html.bkmp-app-mode .idle-hud-app-name {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .25));
  border: 1px solid color-mix(in srgb, var(--app-gold) 35%, transparent);
  max-width: 100%;
}
/* Diamant-Kappe am linken Ende der XP-Leiste - kleines, um 45 Grad
   gedrehtes Gold-Quadrat, ueberlappt den Balkenanfang. Rein dekorativ,
   keine neue Information. Sitzt bewusst auf dem Wrapper
   (.idle-hud-app-xp), NICHT auf .idle-xp-bar selbst: die Leiste hat
   "overflow:hidden" (noetig, damit die Fuellung nie ueber die runden
   Ecken hinaussteht) und wuerde die Kappe sonst genauso abschneiden
   wie das Portrait-clip-path oben die Ring-Diamanten. */
html.bkmp-app-mode .idle-hud-app-xp { position: relative; }
html.bkmp-app-mode .idle-xp-bar { margin-left: .35rem; }
html.bkmp-app-mode .idle-hud-app-xp::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: .55rem;
  height: .55rem;
  transform: translateY(-50%) rotate(45deg);
  background: radial-gradient(circle at 35% 30%, #fff6d8, var(--app-gold));
  border: 1px solid var(--app-void);
  box-shadow: var(--app-glow-gold);
  z-index: 1;
}
/* Portrait-Ring-Akzente: zwei kleine Gold-Diamanten links/rechts am
   Portrait-Rahmen, wie die Kristall-Zacken im Referenzbild - nutzt die
   zwei verfuegbaren Pseudo-Elemente des Portraits (::before/::after),
   die bisher dort ungenutzt waren. Bewusst INNERHALB der eigenen Box
   positioniert (nicht per negativem Versatz herausragend): das
   Portrait selbst hat ein Oktagon-clip-path (Phase 10) - das schneidet
   auch ueberstehende Pseudo-Elemente ab, ein negativer Versatz waere
   also unsichtbar gewesen. */
html.bkmp-app-mode .idle-hud-app-portrait::before,
html.bkmp-app-mode .idle-hud-app-portrait::after {
  content: '';
  position: absolute;
  top: 50%;
  width: .4rem;
  height: .4rem;
  transform: translateY(-50%) rotate(45deg);
  background: radial-gradient(circle at 35% 30%, #fff6d8, var(--app-gold));
  border: 1px solid var(--app-void);
  box-shadow: var(--app-glow-gold);
  z-index: 1;
}
html.bkmp-app-mode .idle-hud-app-portrait::before { left: 2px; }
html.bkmp-app-mode .idle-hud-app-portrait::after { right: 2px; }

/* ============================================================
   APP-MODUS REDESIGN, PHASE 11 (weitere Recherche-Runde: Game-Feel/Juice,
   Karten-Rarity-Glow, Dungeon-Karten-Chrome)
   ============================================================
   Recherche zu "Game Juice"-Prinzipien (Disneys 12-Animationsprinzipien
   als Basis fast aller Spiel-"Juice"): Screen-Shake + Partikel allein
   reichen nicht, Bildschirm-Aufblitzen bei starken Treffern ist die
   dritte uebliche Schicht (kurzer heller Flash = zusaetzliches Gewicht).
   Rarity-Farbcodierung (Bronze/Silber/Gold-Prinzip aus Sammelkarten-UI)
   ist im Spiel ueber --rune-color schon vorhanden - hier nur fuer die
   hoechste Stufe (Gold/Legendaer) im App-Modus verstaerkt (Puls-Glow),
   statt ein Farbsystem neu zu erfinden. */
html.bkmp-app-mode .idle-battlefield:has(.idle-dmg-crit)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--app-gold) 35%, transparent);
  animation: appCritFlash .28s ease-out;
  pointer-events: none;
}
/* Performance-Modus: Krit-Flash ist ein einzelner, kurzer Opacity-Uebergang
   auf einer bereits vorhandenen Ebene (guenstig) - bleibt deshalb in
   "Reduziert" erhalten, nur "Aus" schaltet ihn ab. */
html[data-fx="aus"].bkmp-app-mode .idle-battlefield:has(.idle-dmg-crit)::before {
  display: none;
}
@keyframes appCritFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.bkmp-app-mode .idle-battlefield:has(.idle-dmg-crit)::before { animation: none !important; display: none; }
}

/* Legendaere Runen (--rune-color: #facc15, Gold-Rarity) pulsieren leicht
   im Lager - hebt die seltenste Stufe zusaetzlich zur schon vorhandenen
   Farbe/Glow-Kante hervor, ohne das bestehende Rarity-Farbsystem
   anzufassen. */
html.bkmp-app-mode .idle-runen-item[style*="facc15"] {
  animation: appLegendaryPulse 2.2s ease-in-out infinite;
}
@keyframes appLegendaryPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(250, 204, 21, 0); }
  50% { box-shadow: 0 0 16px 2px rgba(250, 204, 21, .55); }
}
@media (prefers-reduced-motion: reduce) {
  html.bkmp-app-mode .idle-runen-item[style*="facc15"] { animation: none !important; }
}
/* Spieler-Meldung 19.07. ("Die Runen rechts leuchten immer wieder auf"):
   appLegendaryPulse ist eine bewusste, dauerhafte 2,2s-Endlosschleife fuer
   JEDE legendaere Rune im Lager (kein Drachentod-Trigger, faellt bei
   entsprechendem Kampf-Tempo aber leicht damit zusammen) - fuer Spieler,
   die genau das als staendiges Aufblitzen stoerend empfinden, jetzt
   zusaetzlich ueber den bestehenden Effektmodus-Schalter abschaltbar,
   gleiches Prinzip wie bei den anderen html[data-fx="aus"]-Regeln. */
html[data-fx="aus"].bkmp-app-mode .idle-runen-item[style*="facc15"] { animation: none !important; }

/* ---- Dungeon-Karten bekamen in Phase 6 nur groessere Buttons - jetzt
   auch die Karten-Umrandung selbst im einheitlichen Fantasy-Look. ---- */
html.bkmp-app-mode .idle-dorf-panel .idle-dungeon-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .28)) !important;
  border: 1.5px solid color-mix(in srgb, var(--app-gold) 40%, transparent) !important;
  border-radius: 18px !important;
  padding: 1.1rem !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-dungeon-card-icon { font-size: 2.1rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-dungeon-card-head strong { font-size: 1.02rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-dungeon-card-head small { font-size: .8rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-dungeon-card-keys,
html.bkmp-app-mode .idle-dorf-panel .idle-dungeon-card-bonus { font-size: .84rem !important; }
html.bkmp-app-mode .idle-dorf-panel .idle-dungeon-card-meta { font-size: .78rem !important; }

/* ---- Erfolge-Popup (#achievementsOverlay, eigene Unter-Tabs Erfolge/
   Kosmetik/Titel/Pluschies) - Fenster-Chrome kommt schon von der
   .joke-card-Regel oben, hier nur die Innenliste/Tabs vergroessert. ---- */
html.bkmp-app-mode #achievementsOverlay .achievements-list { font-size: .88rem !important; }
/* Bug-Fix 19.07. (Spieler-Meldung: Kosmetik-/Titel-Kacheln ueberlappen sich):
   ":not(.cosmetic-swatch)" noetig, weil .cosmetic-swatch (Kosmetik- UND
   Titel-Tab) mehrzeiligen Inhalt (Name + Raritaets-Badge + Beschreibung)
   hat - ein hartes min-height:44px!important entfernt dabei den Browser-
   eigenen "min-height:auto"-Content-Schutz von Grid-/Flex-Items, wodurch
   laengere Karten die 44px-Zeile sprengen und sichtbar in die naechste
   Grid-Zeile ueberlaufen (bestaetigt per Live-Test: offsetHeight blieb bei
   44px, obwohl scrollHeight bis zu 96px brauchte). Einfache Buttons (Tabs,
   Schliessen, Namen-aendern-Links) behalten das groessere Touch-Target. */
html.bkmp-app-mode #achievementsOverlay button:not(.cosmetic-swatch) {
  min-height: 44px !important;
  padding: .6rem 1rem !important;
}

/* ============================================================
   APP-MODUS REDESIGN, PHASE 12 (restliche Karten-Chromes)
   ============================================================
   Phase 7 hat bei vielen Karten (Skilltree-Zweig-Kopf, Arena-Gegner,
   Gilde-Quest, Bestenliste-Zeile) nur Schrift/Abstand vergroessert, aber
   keine eigene Hintergrund/Rahmen-Optik gegeben - dadurch wirkten sie
   trotz groesserer Schrift noch wie flache Website-Listenzeilen statt
   Karten. Gleiche Zwei-Ebenen-Verlaufstechnik wie ueberall sonst. */
html.bkmp-app-mode .idle-dorf-panel .idle-skill-branch-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .25)) !important;
  border: 1.5px solid color-mix(in srgb, var(--app-purple-light) 55%, transparent) !important;
  border-radius: 16px !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-arena-opponent-card,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-quest-card,
html.bkmp-app-mode .idle-dorf-panel .bkmp-guild-tech-node,
html.bkmp-app-mode .idle-dorf-panel .leaderboard-row {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .25)) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 16px !important;
}
html.bkmp-app-mode .idle-dorf-panel .leaderboard-row:nth-child(1) {
  border-color: color-mix(in srgb, var(--app-gold) 55%, transparent) !important;
  background: linear-gradient(180deg, rgba(255, 215, 106, .12), rgba(0, 0, 0, .25)) !important;
}
html.bkmp-app-mode .idle-dorf-panel .idle-guild-activity-entry,
html.bkmp-app-mode .idle-dorf-panel .idle-guild-chat-msg {
  padding: .5rem .3rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* Erfolge/Kosmetik/Titel/Pluschies-Unterreiter im Erfolge-Popup - eigene
   Klasse (.achievements-subtab), nicht .idle-dorf-tab, also kein
   Ueberschneidungs-Risiko mit der Bottom-Navigation, aber trotzdem noch
   auf Website-Groesse (0.45rem/0.8rem). */
html.bkmp-app-mode .achievements-subtab {
  padding: .7rem .9rem !important;
  font-size: .88rem !important;
  min-height: 44px !important;
}

/* ============================================================
   APP-MODUS REDESIGN, PHASE 13 (echte Ursache der Leerflaeche)
   ============================================================
   Nutzer-Video/-Bild zeigte eine riesige leere Flaeche unter der
   Kampf-Szene. Ursache gefunden: die Website-Grundregel
   (#idlePanelKampf, siehe weiter oben in dieser Datei) laesst bewusst
   NICHT das Schlachtfeld wachsen, sondern .idle-dorf-log (Kampf-Log) -
   das Log war zu diesem Zeitpunkt aber leer, wodurch der gesamte
   gewonnene Platz einfach als schwarze Flaeche wirkte. Im App-Modus wird
   das umgedreht: das Schlachtfeld waechst (passend zum urspruenglichen
   Wunsch "Kampf soll mindestens 70% der Bildschirmhoehe einnehmen"), das
   Log wird zu einem kleinen, fest begrenzten Streifen am unteren Rand. */
/* Nachtrag (21.07., Spieler-Meldung ChronoKora bei 1920x1080: Kampfbereich
   gequetscht): dieser ganze Block setzte "flex:1 1 auto" + "min-height:0",
   damit das Schlachtfeld den UeBRIGEN Platz der Karte fuellt - das
   funktioniert aber NUR, wenn die Karte (.idle-dorf-card) selbst eine
   ECHTE, von aussen vorgegebene Hoehe hat (sonst gibt es keinen "uebrigen
   Platz" zu verteilen, die Karte schrumpft stattdessen einfach auf ihren
   Inhalt und das Schlachtfeld bekommt nur sein eigenes Minimum). Das ist
   nur in zwei Faellen gegeben: echter Vollbild-App-Modus (html.bkmp-app-
   mode.zone-game, siehe eigene .idle-dorf-card-Regel weiter oben, IMMER
   100vh unabhaengig von der Breite) ODER die mobile Karten-Regel
   @media(max-width:640px) (ebenfalls explizit height:100dvh). Auf der
   normalen Website in normaler Fensterbreite (html.bkmp-app-mode OHNE
   zone-game, wie hier) hat die Karte dagegen nur ein max-height:95vh
   (Inhalts-Hoehe mit Deckel) - "min-height:0!important" hat dort also
   nicht "wachsen lassen" bewirkt, sondern schlicht die alte, verlaessliche
   .idle-battlefield{min-height:220px}-Untergrenze (Basisregel weiter oben
   in dieser Datei) ausgehebelt, ohne dass echter Wachstumsraum da war -
   das Schlachtfeld fiel auf sein reines Inhalts-Minimum zurueck (~150px
   bei 1920x1080). Fix: auf ".zone-game" verengt (echter App-Modus, hat
   immer echte Hoehe) + eigene Kopie fuer die mobile Kartenbreite ergaenzt -
   auf normaler Desktop-Website-Breite greift jetzt wieder die alte
   220px-Untergrenze der Basisregel, kein Quetschen mehr. */
html.bkmp-app-mode.zone-game #idlePanelKampf {
  /* Nur DIESES Panel darf im Flex-Layout der Karte (siehe oben)
     wachsen - alle anderen Panels bleiben bei ihrer Phase-6-Regel
     (Hoehe = Inhalt, kein Wachsen), damit deren Leerflaechen-Fix nicht
     wieder rueckgaengig gemacht wird. */
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
html.bkmp-app-mode.zone-game .idle-dorf-panel:not(#idlePanelKampf) {
  flex: 0 0 auto !important;
}
html.bkmp-app-mode.zone-game #idlePanelKampf .idle-battlefield {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
html.bkmp-app-mode.zone-game #idlePanelKampf .idle-dorf-log {
  flex: 0 0 auto !important;
  /* Bug-Fix 18.07.: siehe Kommentar bei der Basis-Regel .idle-dorf-log -
     dieselbe Wachsen-bei-neuer-Zeile-Ursache, hier per !important auf
     max-height ueberschrieben, daher auch hier min-height ergaenzt. */
  min-height: 13vh;
  max-height: 13vh;
  margin-top: .6rem;
}
/* MOBILE-REDESIGN (06.08.2026): 640px -> 999px, synchron mit der Karten-
   Vollbild-Regel weiter oben (dieselbe @media(max-width:640px)-Bindung,
   die im Kommentar direkt darunter erwaehnt wird, ist selbst auf 999px
   angehoben - ohne diese Anpassung haette die Karte zwischen 641-999px
   bereits height:100dvh bekommen, aber DIESE Flex-Wachsen-Mechanik waere
   dort nicht mitgelaufen, wodurch das Schlachtfeld die neu gewonnene Hoehe
   nicht gefuellt haette). */
@media (max-width: 999px) {
  /* Mobile Website-Ansicht (Modal ueber der normalen Seite, kein echter
     App-Modus): .idle-dorf-card bekommt hier ueber die eigene, jetzt
     ebenfalls auf 999px angehobene Vollbild-Regel weiter oben in dieser
     Datei explizit height:100dvh - dieselbe Wachsen-Logik wie oben greift
     hier also genauso korrekt, nur eben an die Breite statt an .zone-game
     gebunden. */
  html.bkmp-app-mode #idlePanelKampf {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  html.bkmp-app-mode .idle-dorf-panel:not(#idlePanelKampf) {
    flex: 0 0 auto !important;
  }
  html.bkmp-app-mode #idlePanelKampf .idle-battlefield {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  html.bkmp-app-mode #idlePanelKampf .idle-dorf-log {
    flex: 0 0 auto !important;
    min-height: 13vh;
    max-height: 13vh;
    margin-top: .6rem;
  }
}


/* Bottom-Navigation auf 3 Haupt-Tabs + Mehr reduziert (Nutzer-Wunsch) -
   automatisch breitere Kacheln durch flex:1, hier die Ziffer explizit
   erwaehnt fuer Wartbarkeit: PRIMARY_TAB_IDS in index.html hat jetzt nur
   noch 3 Eintraege statt 5. */

/* ============================================================
   APP-MODUS REDESIGN, PHASE 14 (weitere Recherche-Runde)
   ============================================================
   1) "Welcome back"-Screens sind in etablierten Idle-Games (Cookie
      Clicker, Melvor Idle) ein zentrales, eigens gestaltetes Element -
      unsere Variante (#idleDorfOfflineCard) gab es schon (guter Fund:
      Bug-Report von dir "Offline-Fortschritt konnte nicht abgerufen
      werden" zeigte sie schon fruehen im Video), war aber optisch noch
      nicht an den neuen Look angepasst.
   2) "Prioritaet+"-Muster (wenige Haupt-Punkte + Rest gruppiert) ist
      offizielle UX-Praxis ab 5-6 Elementen - bestaetigt den 3+Mehr-Umbau.
      Ergaenzung: Elemente INNERHALB von "Mehr" sollen nach Kategorie
      gruppiert werden statt als eine flache Liste (Quelle: NN/g-Muster).
      Umgesetzt in index.html (setupMoreMenu erzeugt jetzt 4 Gruppen statt
      eines flachen Rasters), hier nur die Gruppen-Kopfzeilen gestylt.
   ============================================================ */
html.bkmp-app-mode .idle-dorf-offline-card {
  background: linear-gradient(120deg, rgba(255, 215, 106, .16), rgba(56, 189, 248, .1)) !important;
  border: 1px dashed color-mix(in srgb, var(--app-gold) 60%, transparent) !important;
  border-radius: 16px !important;
  padding: .9rem 1.1rem !important;
}
html.bkmp-app-mode .idle-dorf-offline-card strong {
  font-family: 'Fraunces', serif;
  font-size: 1rem !important;
  color: var(--app-gold);
}
html.bkmp-app-mode .idle-offline-rewards span {
  display: inline-flex;
  align-items: center;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .25);
  font-size: .84rem !important;
  font-variant-numeric: tabular-nums;
}
html.bkmp-app-mode .idle-offline-close {
  width: 32px !important;
  height: 32px !important;
  font-size: 1.1rem !important;
}

/* "Mehr"-Menue-Gruppen (siehe setupMoreMenu in index.html) */
html.bkmp-app-mode .idle-app-more-sheet-group-title {
  grid-column: 1 / -1;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--app-muted);
  margin: .7rem 0 -.1rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
html.bkmp-app-mode .idle-app-more-sheet-group-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ============================================================
   Redesign Phase 3 (17.07.): Styles fuer js/ui/bkmp-ui-components.js.
   Nutzt ausschliesslich design-tokens.css-Variablen. .bkmp-ui-card und
   .bkmp-ui-modal-overlay brauchen bewusst keine eigenen Regeln - sie sind
   zusaetzlich zu .idle-skin-card/.joke-overlay geklebt und erben deren
   bestehende Optik vollstaendig.
   ============================================================ */
.bkmp-ui-rarity-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.14rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--badge-color, var(--color-muted));
  color: var(--badge-color, var(--color-muted));
  background: color-mix(in srgb, var(--badge-color, var(--color-muted)) 16%, transparent);
  vertical-align: middle;
  margin-left: 0.4rem;
}
.idle-skin-card.has-rarity { border-color: color-mix(in srgb, var(--badge-color) 45%, var(--line)); }

.bkmp-ui-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-surface-2);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  font-size: var(--font-size-xs);
  /* Bugfix (Spieler-Meldung 30.07.2026, Screenshot: "sieht dumm aus") - ohne
     eine echte width schrumpft ein position:absolute-Element per "shrink-
     to-fit" auf die Breite seines laengsten WORTES statt vernuenftig
     umzubrechen (jedes Wort landete in einer eigenen Zeile). width:max-
     content + max-width sorgt fuer eine natuerliche Breite bis zur Grenze,
     erst danach wird normal umgebrochen. */
  width: max-content;
  max-width: 240px;
  white-space: normal;
  text-align: center;
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  z-index: var(--z-toast);
}
.bkmp-ui-tooltip.visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .bkmp-ui-tooltip { transition: opacity var(--duration-base) linear; } }

.bkmp-ui-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  background: var(--color-surface-2);
  border: 1px solid var(--toast-color, var(--color-line));
  border-left-width: 4px;
  color: var(--color-ink);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-3);
  font-size: var(--font-size-sm);
  opacity: 0;
  z-index: var(--z-toast);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  max-width: min(360px, 86vw);
}
.bkmp-ui-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .bkmp-ui-toast { transition: opacity var(--duration-base) linear; } }

/* ============================================================
   PROTOTYP 2 (18.07., ISOLIERT & VOLLSTAENDIG ENTFERNBAR) - kompaktes
   HUD/Nav/Stufenleiste-Layout. Ziel: Abstand vom Kartenrand bis zum
   Kampffeld auf ~180-220px bei 1638x900 senken (vorher gemessen: 611px).
   Entfernen: dieser Block + js/prototype/bkmp-proto-compact-hud.js +
   dessen <script>-Tag + der HTML-Block in index.html - die bestehenden
   #idleDorfHud/#idleDorfTabs/#idleStageBar/#idleFxModeBtn-Regeln weiter
   oben in dieser Datei sind davon unberuehrt und bleiben der garantierte
   Fallback. Bewusst wenige Rahmen/Karten (Nutzer-Vorgabe "weniger
   Verwaltungsoberflaeche") - Trennung ueber Abstand/dezente Hintergrund-
   tönung statt harter Border-Linien. ============ */
.bkmp-proto-chud {
  margin-bottom: 0.5rem;
}
.bkmp-proto-chud-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  /* Bug-Fix 18.07. (Spieler-Screenshot: Feedback-Button überlappt mit
     Effektmodus-Icon): #idleDorfCloseX/#idleDorfFeedbackBtn schweben
     position:absolute in genau der Ecke, in der diese Flex-Zeile (normaler
     Dokumentfluss, direkt am Kartenanfang) ihre eigenen ⓘ/FX-Icons
     rechtsbündig platziert - beide Ebenen kollidierten sichtbar. Rechter
     Freiraum reserviert exakt den von beiden Knöpfen belegten Bereich
     (je 34px breit, right:0.9rem/2.9rem => bis ~80px vom Kartenrand). */
  padding-right: 5.3rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper-2) 55%, transparent);
}
.bkmp-proto-chud-level {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(145deg, var(--gold), color-mix(in srgb, var(--gold) 55%, #7c3aed));
  color: var(--accent-ink); font-weight: 800; font-size: 0.82rem;
}
.bkmp-proto-chud-xp { flex: 1 1 160px; min-width: 90px; }
.bkmp-proto-chud-xp .idle-xp-bar { height: 7px; }
.bkmp-proto-chud-xp-label { font-size: 0.66rem; color: var(--muted); margin-top: 0.15rem; }
.bkmp-proto-chud-resources { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.bkmp-proto-chud-res { display: flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.bkmp-proto-chud-res-icon { font-size: 0.85rem; line-height: 1; }
.bkmp-proto-chud-icon-btn {
  flex: none; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper);
  color: var(--muted); font-size: 0.9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
  position: relative;
}
.bkmp-proto-chud-icon-btn:hover, .bkmp-proto-chud-icon-btn[aria-expanded="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.bkmp-proto-chud-details {
  margin-top: 0.4rem; padding: 0.5rem 0.7rem; border-radius: 10px;
  background: color-mix(in srgb, var(--paper-2) 45%, transparent);
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem;
  font-size: 0.76rem; color: var(--muted);
}
.bkmp-proto-chud-fx-menu {
  /* FIX (Nutzer-Screenshot 18.07., root-caused nach mehreren Fehlversuchen):
     ein hoeherer z-index allein reichte nicht. Ursache liegt eine Ebene
     hoeher: .idle-dorf-card (der Elternrahmen dieses Dropdowns) hat
     position:relative aber z-index:auto - und z-index wirkt NUR zwischen
     Geschwistern im SELBEN Stacking-Context. .idle-runen-drawer ist ein
     GESCHWISTER von .idle-dorf-card (beide direkte Kinder von
     #idleDorfOverlay), aber mit explizitem z-index:56 - explizite
     z-index-Werte malen laut CSS-Spezifikation IMMER ueber z-index:auto-
     Geschwister, unabhaengig davon, welchen z-index ein NACHFAHRE (wie
     dieses Dropdown) intern hat. Die ganze Karte blieb dadurch als
     Einheit hinter dem Lager-Balken haengen, egal wie hoch der z-index
     hier gesetzt wurde. Fix: position:fixed statt position:absolute -
     entkommt damit dem lokalen Stacking-Context der Karte komplett und
     wird (wie .idle-runen-drawer selbst) ein echtes Geschwister auf
     #idleDorfOverlay-Ebene, wo der eigene z-index (62) wieder normal
     zaehlt. Position wird beim Oeffnen per JS (bkmpProtoChudOpenFxMenu)
     anhand der echten Button-Position gesetzt, da fixed nicht mehr an
     einem position:relative-Elternteil verankern kann. */
  position: fixed; z-index: 62;
  width: 260px; max-height: 80vh; overflow-y: auto;
  border-radius: 10px; padding: 0.5rem;
  background: var(--paper-2); border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
/* Nutzerwunsch 19.07.: Presets jetzt als Reihe statt gestapelt (spart
   vertikalen Platz fuer die neue Checkbox-Liste darunter). */
.bkmp-proto-chud-fx-presets { display: flex; gap: 0.3rem; }
.bkmp-proto-chud-fx-option {
  flex: 1; min-width: 0; text-align: center; padding: 0.4rem 0.3rem;
  border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: 0.72rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.bkmp-proto-chud-fx-option:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.bkmp-proto-chud-fx-option.active { color: var(--gold); font-weight: 700; border-color: var(--gold); }
.bkmp-proto-chud-fx-divider { height: 1px; background: var(--line); margin: 0.5rem 0; }
.bkmp-proto-chud-fx-title { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.35rem; }
.bkmp-proto-chud-fx-toggles { display: flex; flex-direction: column; gap: 0.1rem; }
.bkmp-proto-chud-fx-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.3rem; border-radius: 7px; cursor: pointer;
  font-size: 0.78rem; color: var(--ink); line-height: 1.25;
}
.bkmp-proto-chud-fx-toggle:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.bkmp-proto-chud-fx-toggle input { flex: none; width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--gold, #c9a24b); }

.bkmp-proto-nav {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; position: relative;
}
.bkmp-proto-nav-primary { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.bkmp-proto-nav-btn {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.42rem 0.75rem; border-radius: 9px;
  border: 1px solid transparent; background: transparent;
  color: var(--muted); font-size: 0.8rem; font-weight: 700; cursor: pointer;
  min-height: 38px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bkmp-proto-nav-btn svg { width: 16px; height: 16px; flex: none; }
.bkmp-proto-nav-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.bkmp-proto-nav-btn.active {
  color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
}
.bkmp-proto-nav-more-wrap { position: relative; margin-left: auto; }
.bkmp-proto-nav-more-btn {
  padding: 0.42rem 0.85rem; border-radius: 9px; min-height: 38px;
  border: 1px solid var(--line); background: var(--paper); color: var(--muted);
  font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.bkmp-proto-nav-more-btn:hover, .bkmp-proto-nav-more-btn[aria-expanded="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.bkmp-proto-nav-more-menu {
  /* FIX (Nutzer-Screenshot 18.07.): siehe ausfuehrlichen Kommentar bei
     .bkmp-proto-chud-fx-menu oben - identische Ursache (Stacking-Context
     der Karte, nicht nur ein zu niedriger z-index) und identischer Fix
     (position:fixed, Koordinaten per JS in bkmpProtoChudOpenMoreMenu). */
  position: fixed; z-index: 62;
  width: 200px; max-height: 60vh; overflow-y: auto;
  border-radius: 12px; padding: 0.4rem;
  background: var(--paper-2); border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem;
}
.bkmp-proto-nav-more-item {
  display: flex; align-items: center; gap: 0.4rem; text-align: left;
  padding: 0.5rem 0.6rem; border-radius: 8px; min-height: 40px;
  border: none; background: transparent; color: var(--ink); font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.bkmp-proto-nav-more-item:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.bkmp-proto-nav-more-item.active { color: var(--gold); }
.bkmp-proto-nav-more-item[disabled] { opacity: 0.5; cursor: not-allowed; }

.bkmp-proto-stagebar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.35rem 0.7rem; margin-bottom: 0.5rem; border-radius: 10px;
  background: color-mix(in srgb, var(--paper-2) 40%, transparent);
  font-size: 0.78rem; color: var(--muted);
}
.bkmp-proto-stagebar strong { color: var(--ink); }
.bkmp-proto-stagebar-btn {
  padding: 0.3rem 0.65rem; border-radius: 999px; min-height: 32px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-size: 0.74rem; font-weight: 700; cursor: pointer; margin-left: auto;
}
.bkmp-proto-stagebar-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.bkmp-proto-stagebar-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bkmp-proto-stagebar-icon-btn {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.bkmp-proto-stagebar-icon-btn.is-on { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }

/* Phase 7.0 Nachbesserung (20.07., beim eigenen Testen bei 800x369
   gefunden): reines max-width erreicht viele quer gehaltene
   Telefone nicht (haeufig 700-950px breit) - ohne die Landscape-
   Bedingung blieb u.a. die fixierte Bottom-Nav (#bkmpProtoCompactNav
   weiter unten in diesem Block) im Querformat wirkungslos und fiel in
   den normalen Dokumentfluss zurueck. Komma = ODER-Verknuepfung.
   MOBILE-REDESIGN (06.08.2026): 760px -> 999px, siehe Begruendung bei
   bkmpProtoChudWantCompact() (bkmp-proto-compact-hud.js). */
@media (max-width: 999px), (max-height: 500px) and (orientation: landscape) {
  .bkmp-proto-chud-row { flex-wrap: wrap; }
  .bkmp-proto-chud-xp { flex-basis: 100%; order: 3; }
  /* FIX (18.07., beim Testen gefunden): "left:0" drehte den Anker auf die
     LINKE Seite um - der "Mehr"-Button sitzt aber (per margin-left:auto
     in .bkmp-proto-nav-more-wrap) immer am RECHTEN Rand der Nav-Zeile.
     Bei schmalem Fenster wuchs das Menue dadurch von dort aus nach
     RECHTS weiter ueber die Kartenkante hinaus, statt nach links in den
     vorhandenen Platz hinein. right:0 (aus der Basisregel geerbt) ist
     die richtige Ankerseite fuer JEDE Fensterbreite - hier nur noch die
     Spaltenzahl/Breite fuer schmale Bildschirme anpassen. Gilt nur noch
     als Desktop-Fallback-Dropdown (siehe bkmpProtoChudBuildNav) - auf
     schmalen Bildschirmen mit echtem App-Modus-Setup wird stattdessen
     #idleAppMoreSheet geoeffnet, diese Regeln hier greifen dann gar nicht. */
  .bkmp-proto-nav-more-menu { grid-template-columns: 1fr; width: min(200px, calc(100vw - 2rem)); }
  .bkmp-proto-stagebar-btn { font-size: 0.7rem; padding: 0.3rem 0.5rem; min-height: 44px; }
  /* a11y: 44x44px Mindest-Touch-Ziel (gleiche Konvention wie Section B/C) */
  .bkmp-proto-chud-icon-btn, .bkmp-proto-nav-more-btn, .bkmp-proto-stagebar-icon-btn { min-width: 44px; min-height: 44px; }

  /* Phase 7.0 (20.07., Mobile-First-Redesign, Section 15/18): echte
     fixierte Bottom-Navigation statt einer im Dokumentfluss mitscrollenden
     Zeile - vorher hatte .bkmp-proto-nav ueberhaupt kein position:fixed,
     obwohl der Auftrag genau das explizit verlangt ("fixe mobile Bottom-
     Navigation"). Gleiches Muster wie die bereits bestehende App-Modus-
     Bottom-Leiste (html.bkmp-app-mode .idle-dorf-tabs, siehe weiter oben
     in dieser Datei) - dieselbe Karte hat dort bereits transform:none!
     important erzwungen (".idle-dorf-overlay .idle-dorf-card" im selben
     @media-Block), sonst wuerde die eigene Oeffnen-Animation der Karte
     "position:fixed" hier in "relativ zur Karte" statt "relativ zum
     Viewport" verwandeln (CSS containing-block-Regel bei transform auf
     einem Vorfahren) - kein zusaetzlicher Fix noetig, gilt automatisch
     auch fuer dieses neue fixierte Element, weil es im selben Karten-
     Teilbaum haengt.
     ZWEITE Spezifitaets-Falle (beim Testen per getComputedStyle
     gefunden): ".idle-dorf-overlay .idle-dorf-card > *" (Spezifitaet
     0,0,2,0, siehe weiter oben in dieser Datei) erzwingt position:relative
     auf JEDES direkte Kind der Karte, darunter auch dieses Nav-Element -
     schlaegt eine reine ".bkmp-proto-nav"-Klassenregel (0,0,1,0) unabhaengig
     von der Position im Stylesheet. Deshalb hier zusaetzlich per ID
     (#bkmpProtoCompactNav, Spezifitaet 0,1,1,0) angesprochen. */
  #bkmpProtoCompactNav.bkmp-proto-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    margin-bottom: 0;
    gap: 0.3rem;
    padding: 0.4rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, rgba(10, 8, 20, .55) 25%, rgba(10, 8, 20, .92));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .bkmp-proto-nav-primary { flex: 1; justify-content: space-around; gap: 0.1rem; min-width: 0; }
  .bkmp-proto-nav-btn {
    flex: 1 1 0; min-width: 0;
    flex-direction: column; justify-content: center; gap: 0.1rem;
    padding: 0.3rem 0.1rem; min-height: 52px;
  }
  /* Nachbesserung (20.07., Nutzerwunsch "6 Buttons total"): bei 6 Haupt-
     Tabs + Mehr (7 Elemente) reicht der Platz auf schmalen Handys nicht
     mehr fuer 8 Buchstaben ohne Kuerzung ("Skilltree" wurde vorher NICHT
     abgeschnitten, sondern lief einfach ueber die Nachbar-Buttons hinweg -
     white-space:nowrap allein clippt nicht, dafuer braucht es zusaetzlich
     overflow+text-overflow). Lange Labels kuerzen jetzt sauber mit "…"
     statt in den Nachbar-Button hineinzulaufen. */
  .bkmp-proto-nav-btn span.bkmp-proto-nav-label {
    font-size: 0.58rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .bkmp-proto-nav-more-wrap { flex: 1 1 0; min-width: 0; margin-left: 0; }
  .bkmp-proto-nav-more-btn {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.15rem;
    padding: 0.3rem 0.2rem; min-height: 52px;
    background: transparent; border-color: transparent;
    font-size: 0.62rem;
  }
  .bkmp-proto-nav-more-btn.active { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
  /* Content darf nicht hinter der jetzt fixierten Leiste enden - dieselbe
     Reservierung wie html.bkmp-app-mode .idle-dorf-overlay .idle-dorf-card
     (padding-bottom: calc(6rem + safe-area)) im selben Block weiter oben
     deckt diese ~60-70px hohe Leiste bereits mit ab, kein weiterer Wert
     noetig. */
}
@media (prefers-reduced-motion: reduce) {
  .bkmp-proto-chud-icon-btn, .bkmp-proto-nav-btn, .bkmp-proto-nav-more-btn { transition: none; }
}

/* ============================================================
   PHASE 7.0 (20.07.) - Mobile-First-Redesign, erste Abnahmestufe
   (Auftrag Abschnitt 38): Schlachtfeld/Dorf/Drache/HP-Leisten/
   Schadenszahlen/Kampf-Log-Sheet. Alle anderen Tabs folgen erst nach
   Freigabe (Abschnitt 39). Reine Darstellung, keine Spielwerte/Formeln
   geaendert (Abschnitt 40). Bewusst als eigener, klar markierter Block
   ans Dateiende angehaengt (gleiches Isolations-Muster wie "Prototyp 2"
   oben) - Quellreihenfolge gibt ihm automatisch Vorrang vor den
   aelteren, bereits bestehenden .idle-battlefield/.idle-village/
   .idle-dragon/.idle-dmg-float-Regeln weiter oben in dieser Datei, ohne
   dass eine einzige davon angefasst/geloescht werden musste (geringstes
   Risiko fuer Desktop-Regressionen). Die vorbestehenden zwei sich
   teilweise ueberschneidenden html.bkmp-app-mode .idle-battlefield-
   Bloecke (~Zeile 9033 und ~9467, letzterer gewinnt schon heute in der
   Kaskade) wurden bewusst NICHT konsolidiert - beide sind unconditional
   (kein @media), ein Fehler beim blinden Zusammenfuehren haette sofort
   Desktop-Optik veraendert. Bleibt als dokumentiertes Aufraeum-Follow-up
   fuer Phase 7 (siehe CLAUDE.md-Backlog), nicht Teil dieser Stufe. */

.idle-combat-log-toggle {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
}
.idle-combat-log-badge {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold, #c9a24b);
}
/* Bug-Fix (beim eigenen Testen bei 1920px gefunden, noch nicht deployed):
   .idle-combat-log-sheet-handle/-header (Griff-Balken + "Kampf-Log"-Titel-
   zeile mit Schliessen-Button) hatten bisher GAR KEINE Basis-Regel - ohne
   das @media(max-width:768px) weiter unten (das erst position:fixed +
   Sheet-Optik daraus macht) rendern sie einfach als normale, IMMER
   sichtbare Bloecke im Dokumentfluss. Auf Desktop soll die Umhuellung
   komplett wirkungslos bleiben (nur Checkbox+Log wie vor Phase 7.0) - die
   beiden neuen Kindelemente muessen dafuer explizit ausgeblendet werden,
   nicht nur der Umschalt-Button (der hat diese Basis-Regel bereits oben). */
/* Nachtrag (21.07., Spieler-Meldung ChronoKora: Kampfbereich bei 1920x1080
   gequetscht): der obige Fix deckte nur die beiden Kindelemente ab, aber
   #idleCombatLogSheet SELBST (der Wrapper) hatte ebenfalls keine
   Basis-Regel - rendert dadurch auf jeder Breite als normaler, 171px hoher
   Block mitten im Kampf-Tab statt unsichtbar zu bleiben, bis die mobile
   Media Query weiter unten ihn zu position:fixed macht. Frisst dabei dem
   per Flexbox wachsenden .idle-battlefield (Phase 13) genau den Platz weg,
   den es eigentlich bekommen sollte. */
.idle-combat-log-sheet, .idle-combat-log-sheet-handle, .idle-combat-log-sheet-header { display: none; }

/* Portrait ODER Querformat-Telefon (Abschnitt 29): reines max-width
   greift bei einem quer gehaltenen Telefon oft NICHT (viele Telefone sind
   im Querformat 700-950px breit, z.B. 932px bei einem grossen iPhone) -
   beim eigenen Testen bei 800x369 gefunden: ohne die Breiten-Bedingung
   blieb die fixierte Bottom-Nav aus und fiel zurueck in den normalen
   Dokumentfluss, obwohl das Schlachtfeld selbst (siehe eigene
   @media(max-height:500px)-Regel weiter unten) schon korrekt kompakter
   wurde - halbe Umstellung, HUD/Nav sahen weiterhin nach Desktop aus.
   Komma-getrennt = ODER-Verknuepfung zwischen den beiden Bedingungen.
   MOBILE-REDESIGN (06.08.2026): 768px -> 999px, siehe Begruendung bei
   bkmpProtoChudWantCompact() (bkmp-proto-compact-hud.js) - vereinheitlicht
   mit den beiden anderen Mobil-Breakpoints (Karte/Kompakt-HUD) auf exakt
   die 1000px-Desktopgrenze. */
@media (max-width: 999px), (max-height: 500px) and (orientation: landscape) {
  /* ---- Schlachtfeld: Untergrenze/Obergrenze fuer die schon bestehende
     Flex-Wachsen-Groesse (Abschnitt 6). WICHTIG (beim Testen per
     getComputedStyle gefunden): html.bkmp-app-mode #idlePanelKampf
     .idle-battlefield setzt bereits "flex:1 1 auto!important;min-height:
     0!important" (Kommentar dort: "APP-MODUS REDESIGN PHASE 13", loest
     bewusst den alten Bug "riesige leere Flaeche unters Schlachtfeld" -
     das Feld waechst seitdem per Flexbox, um genau den nach HUD/Nav/
     Aktionsleiste uebrigen Platz zu fuellen, KEIN fester height-Wert.
     Ein einfaches height:clamp(...) waere von diesem !important
     ignoriert worden UND haette den Bug wieder reaktiviert. Deshalb hier
     bewusst dieselbe Selektor-Spezifitaet (html.bkmp-app-mode
     #idlePanelKampf .idle-battlefield) + eigenes !important, aber nur als
     Ober-/Untergrenze um das bestehende Wachsen herum - kein height,
     das Wachsen bleibt erhalten. */
  html.bkmp-app-mode #idlePanelKampf .idle-battlefield {
    min-height: clamp(340px, 54dvh, 620px) !important;
    max-height: 620px !important;
    width: 100%;
  }
  /* ---- Dorf/Drache-Breite (Abschnitt 7/8): Drache als "Gegner" bewusst
     sichtbar groesser als das Dorf, beide innerhalb der vorgegebenen
     Bandbreite (Dorf 38-48%, Drache 45-65%). */
  html.bkmp-app-mode .idle-village { width: 42%; }
  html.bkmp-app-mode .idle-dragon { width: 50%; }

  /* ---- HP-Leisten (Abschnitt 9/10): Mindestschriftgroesse fuer die
     Zahlenanzeige (vorher 0.7rem/11.2px, am unteren Rand der Vorgabe). */
  .idle-hp-label { font-size: 0.75rem; }

  /* ---- Schadenszahlen (Abschnitt 11): responsiv statt fixer rem-Werte,
     exakte Bandbreite aus dem Auftrag. Bleiben weiterhin Kinder von
     #idleDragon/#idleVillage (siehe bkmpIdleSpawnProjectile/
     bkmpIdleSpawnClickDamage in js/ui/bkmp-hud.js) - spawnen also bereits
     am Drachen/Dorf selbst, nicht frei schwebend irgendwo im Fenster. */
  html.bkmp-app-mode .idle-dmg-float { font-size: clamp(16px, 5vw, 28px); }
  html.bkmp-app-mode .idle-dmg-crit { font-size: clamp(20px, 6vw, 34px); }

  /* Bug-Fix (Spieler-Meldung ChronoKora, 20.07.: "Damage-Zahlen hängen
     beim Dungeon unter dem Balken halb"): Schadenszahlen starten bei
     top:-6px und schweben ueber ihre Animation (idleDmgFloat, siehe
     Basis-Regel weiter oben in dieser Datei) bis zu weitere 34px nach
     oben - im Dungeon nimmt der Banner (#idleDungeonBanner) zusaetzlichen
     Platz oberhalb des Schlachtfelds weg, wodurch auf schmalen Bildschirmen
     weniger Luft ueber dem mittig ausgerichteten Dorf/Drachen bleibt, bevor
     .idle-battlefields eigenes overflow:hidden die Zahl oben abschneidet.
     Bewusst nur hier (mobil) statt an der globalen Animation geaendert -
     Konnte das exakte Zusammenspiel ohne echten Spieler-Account/-Geraet
     nicht 1:1 nachstellen, dies reduziert das Risiko unabhaengig von der
     genauen Ursache, ohne die Desktop-Optik anzutasten (dort nicht
     gemeldet). Kuerzerer Schwebeweg (-34px -> -20px) + kleiner positiver
     Start-Versatz statt des leicht negativen halten die Zahl zuverlaessig
     innerhalb des Schlachtfelds. */
  .idle-dmg-float { top: 4px; }
  @keyframes idleDmgFloat {
    0% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -20px); }
  }

  /* ---- Kampf-Log als Bottom-Sheet (Abschnitt 14): Inhalt/Filter-Logik
     unveraendert (siehe bkmpIdleLog in idledorf.js), nur die Verpackung
     ist neu. Gleiches Sheet-Muster wie #idleAppMoreSheet (fixed inset,
     Backdrop, translateY-Animation, safe-area-Padding). */
  .idle-combat-log-toggle { display: flex; }
  .idle-combat-log-sheet {
    position: fixed; inset: 0; z-index: 49;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    transition: background .25s ease;
  }
  .idle-combat-log-sheet.open { background: rgba(0, 0, 0, .55); pointer-events: auto; }
  .idle-combat-log-sheet-card {
    width: 100%;
    max-height: 58dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .4);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
  }
  .idle-combat-log-sheet.open .idle-combat-log-sheet-card { transform: translateY(0); }
  .idle-combat-log-sheet-handle {
    display: block;
    width: 42px; height: 4px; border-radius: 999px;
    background: var(--line); margin: 0 auto .8rem;
  }
  .idle-combat-log-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .6rem; font-weight: 800; font-size: .95rem;
  }
  .idle-combat-log-close {
    width: 36px; height: 36px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--paper-2); color: var(--muted);
    font-size: 1rem; cursor: pointer;
  }
}

/* ---- Querformat (Abschnitt 29): kompakteres, breiteres Schlachtfeld auf
   kurzen Bildschirmen (Telefon quer) statt der hohen Portrait-Bandbreite
   von oben - eigene, engere @media-Bedingung (max-height statt Breite),
   greift nur bei tatsaechlich flachen Viewports, nicht auf Tablet-
   Querformat (das bleibt bei der Portrait-Bandbreite, ausreichend Platz
   vorhanden). */
@media (max-height: 500px) and (orientation: landscape) {
  /* Gleiche Spezifitaets-/!important-Ueberlegung wie beim Portrait-Block
     oben (html.bkmp-app-mode #idlePanelKampf .idle-battlefield). */
  html.bkmp-app-mode #idlePanelKampf .idle-battlefield {
    min-height: clamp(200px, 62dvh, 360px) !important;
    max-height: 360px !important;
  }
}

/* ============================================================
   Oeffentliches Feedback-, Bug- und Entwicklungsboard (Stufe 1, 20.07.2026)
   Reiner UI-Prototyp, siehe js/ui/bkmp-feedback-board.js. Eigener
   .fbb-Praefix (statt .joke-card), weil der Inhalt (Filter, Suche,
   scrollbare Liste vieler Karten) mit der kleinen, zentrierten
   Bestaetigungs-Popup-Groesse von .joke-card nicht auskommt.
   ============================================================ */
.feedback-btn-group { display: flex; align-items: center; gap: 0.45rem; }
.feedback-status-btn { padding: 0.5rem 1.05rem 0.5rem 0.9rem; background: var(--paper); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16); }
@media (max-width: 640px) {
  .feedback-btn-group { gap: 0.35rem; }
  .feedback-status-btn { padding: 0.42rem; border-radius: 50%; }
}

/* Ungelesen-Punkt am Changelog-Knopf (01.08.2026, Nutzerwunsch: "kleiner
   roter Punkt wenn was Neues gibt") - #changelogButton braucht dafuer
   position:relative als Bezugsrahmen (kein bestehender .pill-btn/
   .feedback-status-btn-Wert gesetzt). Erster echter Einsatz von
   --color-danger (design-tokens.css, Phase 3 vorbereitet, bis jetzt an
   keinem Button angeschlossen). js/ui/bkmp-changelog.js schaltet die
   Klasse "has-unread" am Knopf selbst um, hier nur reine Optik. */
#changelogButton { position: relative; }
.chl-unread-dot {
  display: none;
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-danger);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-danger) 55%, transparent);
}
#changelogButton.has-unread .chl-unread-dot { display: block; }

/* ---- Duplikat-Vermeidung im bestehenden #feedbackOverlay-Formular
   (Auftrag Abschnitt 12) ---- */
.feedback-duplicate-hint {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 6%, var(--paper));
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.9rem;
  text-align: left;
}
.feedback-duplicate-hint-btn {
  flex-shrink: 0;
  font-size: 0.78rem; font-weight: 700;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  background: transparent; color: var(--gold);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.feedback-duplicate-hint-btn:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); transform: translateY(-1px); }

/* ---- Panel: zentriert auf Desktop, Bottom-Sheet auf Mobile ---- */
.fbb-panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  width: min(680px, 92vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(14px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  text-align: left;
}
.feedback-status-overlay.visible .fbb-panel { transform: translateY(0) scale(1); }
.fbb-panel-handle { display: none; }
.fbb-header { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 1.3rem 1.5rem 0.9rem; flex-shrink: 0; }
.fbb-header h3 { margin: 0; font-size: 1.25rem; }
.fbb-close {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--paper);
  color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.fbb-close:hover { color: var(--ink); border-color: var(--gold); }
.fbb-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.fbb-summary { display: flex; gap: 0.8rem; padding: 0 1.5rem 1rem; flex-shrink: 0; }
.fbb-summary-item {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  text-align: center;
}
.fbb-summary-item strong { font-size: 1.3rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.fbb-summary-item span { font-size: 0.68rem; color: var(--muted); }

.fbb-controls { padding: 0 1.5rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.fbb-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fbb-filter-chip {
  font-size: 0.78rem; font-weight: 600;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.fbb-filter-chip:hover { color: var(--ink); }
.fbb-filter-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fbb-filter-chip.active {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  background: color-mix(in srgb, var(--gold) 14%, var(--paper));
  color: var(--gold);
}
.fbb-search {
  width: 100%; padding: 0.6rem 0.85rem;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
  font-size: 0.88rem; font-family: inherit;
}
.fbb-search:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.fbb-scroll { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1.4rem; }
.fbb-footnote { flex-shrink: 0; margin: 0; padding: 0.8rem 1.5rem; border-top: 1px solid var(--line); font-size: 0.74rem; color: var(--muted); text-align: center; }

/* Oeffentliches Changelog (26.07.2026, js/ui/bkmp-changelog.js) - reuses
   .fbb-panel/.fbb-header/.fbb-close/.fbb-controls/.fbb-filters/
   .fbb-filter-chip/.fbb-scroll/.fbb-footnote/.fbb-status/.fbb-tone-* aus
   dem Feedback-Board oben (identisches Grundgeruest) - hier nur die
   Bausteine, die dort keine Entsprechung haben: die vertikale Zeitleiste
   je Eintrag (Datum links, Inhalt rechts). */
.chl-timeline { display: flex; flex-direction: column; gap: 1.1rem; }
.chl-entry { display: grid; grid-template-columns: 84px 1fr; gap: 0.9rem; align-items: start; }
.chl-entry-date { font-size: 0.74rem; font-weight: 700; color: var(--muted); padding-top: 0.2rem; white-space: nowrap; }
.chl-entry-body { border-left: 2px solid var(--line); padding-left: 0.9rem; }
.chl-entry-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.chl-entry-title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.chl-entry-desc { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.chl-empty { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 1.5rem 0; }
@media (max-width: 640px) {
  .chl-entry { grid-template-columns: 1fr; gap: 0.3rem; }
  .chl-entry-date { padding-top: 0; }
  .chl-entry-body { border-left: none; padding-left: 0; }
}

.fbb-section-title { margin: 0 0 0.7rem; font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.fbb-flat-list { display: flex; flex-direction: column; gap: 0.7rem; }
.fbb-empty { color: var(--muted); font-size: 0.85rem; margin: 0; }

.fbb-card { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow: hidden; transition: border-color 0.15s ease; }
.fbb-card.is-open { border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); }
.fbb-card-head {
  width: 100%; display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.85rem 1rem;
  background: none; border: none; cursor: pointer;
  text-align: left; font-family: inherit; color: inherit;
}
.fbb-card-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.fbb-card-head-top { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.fbb-card-title { font-size: 0.95rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.fbb-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; color: var(--muted); }
.fbb-chevron { color: var(--muted); transition: transform 0.2s ease; flex-shrink: 0; }
.fbb-card.is-open .fbb-chevron { transform: rotate(180deg); }

/* [hidden] muss explizit erzwungen werden - die eigene "display:flex"-Regel
   direkt darunter wuerde sonst die UA-Standardregel [hidden]{display:none}
   in der Kaskade schlagen (Autor-Styles gewinnen immer gegen UA-Styles,
   auch bei gleicher Spezifitaet) und JEDE Karte wuerde ihren Inhalt IMMER
   zeigen, unabhaengig vom hidden-Attribut/aria-expanded-Zustand. Beim
   eigenen Testen im Browser gefunden (Karte zeigte Inhalt, obwohl
   bkmpFeedbackBoardOpenIds leer war). */
.fbb-card-body[hidden] { display: none; }
.fbb-card-body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.fbb-desc { margin: 0; font-size: 0.87rem; color: var(--ink); line-height: 1.55; }
.fbb-duplicate-note { margin: 0; font-size: 0.82rem; color: var(--muted); padding: 0.55rem 0.75rem; border-radius: 8px; background: color-mix(in srgb, var(--line) 50%, transparent); }
.fbb-impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; padding: 0.75rem; border-radius: 10px; background: color-mix(in srgb, var(--line) 35%, transparent); }
.fbb-impact-grid > div { display: flex; flex-direction: column; gap: 0.15rem; }
.fbb-impact-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.fbb-impact-grid > div span:last-child { font-size: 0.84rem; color: var(--ink); }

.fbb-response { padding: 0.75rem 0.85rem; border-radius: 10px; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--paper-2)); }
.fbb-response-label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); margin-bottom: 0.3rem; }
.fbb-response p { margin: 0; font-size: 0.86rem; color: var(--ink); line-height: 1.55; }
.fbb-history .fbb-response-label { color: var(--muted); }

.fbb-planned { margin: 0; font-size: 0.8rem; color: var(--muted); }

.fbb-history ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.fbb-history li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.8rem; color: var(--ink); padding-left: 0.9rem; position: relative; }
.fbb-history li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.fbb-history-date { flex-shrink: 0; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.75rem; }

/* ---- Statusfarben: Icon + Farbe zusammen (Abschnitt 17 - Status nie nur
   ueber Farbe kennzeichnen). ---- */
.fbb-status { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.24rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; border: 1px solid var(--line); white-space: nowrap; }
.fbb-tone-muted { color: var(--muted); background: color-mix(in srgb, var(--line) 45%, transparent); }
.fbb-tone-blue { color: #38BDF8; border-color: color-mix(in srgb, #38BDF8 40%, var(--line)); background: color-mix(in srgb, #38BDF8 12%, transparent); }
.fbb-tone-orange { color: #F59E0B; border-color: color-mix(in srgb, #F59E0B 42%, var(--line)); background: color-mix(in srgb, #F59E0B 13%, transparent); }
.fbb-tone-violet { color: #A78BFA; border-color: color-mix(in srgb, #A78BFA 42%, var(--line)); background: color-mix(in srgb, #A78BFA 13%, transparent); }
.fbb-tone-gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.fbb-tone-cyan { color: #67E8F9; border-color: color-mix(in srgb, #67E8F9 38%, var(--line)); background: color-mix(in srgb, #67E8F9 11%, transparent); }
.fbb-tone-green { color: #4ADE80; border-color: color-mix(in srgb, #4ADE80 42%, var(--line)); background: color-mix(in srgb, #4ADE80 13%, transparent); }
.fbb-tone-red { color: #F87171; border-color: color-mix(in srgb, #F87171 42%, var(--line)); background: color-mix(in srgb, #F87171 13%, transparent); }
.fbb-tone-dim { color: var(--muted); background: color-mix(in srgb, var(--line) 30%, transparent); opacity: 0.75; }
.fbb-tone-muted-warm { color: #E8A93C; border-color: color-mix(in srgb, #E8A93C 35%, var(--line)); background: color-mix(in srgb, #E8A93C 10%, transparent); }

.fbb-category { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.24rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); background: var(--paper-2); white-space: nowrap; }

/* ---- Mobile: Bottom-Sheet statt zentriertem Panel (max. 90dvh, Auftrag
   Abschnitt 1) ---- */
@media (max-width: 760px) {
  .feedback-status-overlay { align-items: flex-end; }
  .fbb-panel {
    width: 100%; max-width: none; max-height: 90dvh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .feedback-status-overlay.visible .fbb-panel { transform: translateY(0); }
  .fbb-panel-handle { display: block; width: 42px; height: 4px; border-radius: 999px; background: var(--line); margin: 0.7rem auto 0; flex-shrink: 0; }
  .fbb-header { padding: 0.7rem 1.1rem 0.6rem; }
  .fbb-close { width: 44px; height: 44px; }
  .fbb-summary { padding: 0 1.1rem 0.8rem; gap: 0.5rem; }
  .fbb-summary-item strong { font-size: 1.1rem; }
  .fbb-controls { padding: 0 1.1rem 0.9rem; }
  .fbb-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.15rem; -webkit-overflow-scrolling: touch; }
  .fbb-filter-chip { padding: 0.5rem 0.9rem; }
  .fbb-scroll { padding: 0.8rem 1.1rem; }
  .fbb-footnote { padding: 0.7rem 1.1rem; }
}

/* ---- Admin-Workflow-Vorschau (Auftrag Abschnitt 5, nur admin.html) ---- */
.fbb-admin-banner {
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 8%, var(--paper));
  color: var(--ink);
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
}
.fbb-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.fbb-admin-form { display: flex; flex-direction: column; gap: 0.5rem; }
.fbb-admin-form label { font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-top: 0.5rem; }
.fbb-admin-form input[type="text"], .fbb-admin-form input[type="date"], .fbb-admin-form select, .fbb-admin-form textarea {
  width: 100%; padding: 0.55rem 0.75rem;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
  font-size: 0.87rem; font-family: inherit; resize: vertical;
}
.fbb-admin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fbb-admin-publish-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--ink); flex-direction: row; margin-top: 0; }
.fbb-admin-history-list { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.5rem; }
.fbb-admin-history-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; padding: 0.4rem 0.6rem; border-radius: 6px; background: color-mix(in srgb, var(--line) 40%, transparent); }
.fbb-admin-history-row span:first-child { color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.fbb-admin-history-row span:nth-child(2) { flex: 1; }
.fbb-admin-progress-del { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: none; background: none; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; }
.fbb-admin-progress-del:hover { color: var(--color-negative, #F87171); }
.fbb-admin-history-add { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.fbb-admin-history-add input { flex: 1; }
.fbb-admin-author-modes { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; font-weight: 400; color: var(--ink); }
.fbb-admin-author-modes label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 400; color: var(--ink); margin-top: 0; }
.fbb-admin-preview-pane { position: sticky; top: 1rem; }
.fbb-admin-preview-label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-bottom: 0.6rem; }
.fbb-admin-source-ref {
  margin-bottom: 1.2rem; padding: 0.75rem 1rem;
  border: 1px dashed var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--line) 30%, transparent);
}
.fbb-admin-source-ref p { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--ink); line-height: 1.5; }
.fbb-admin-form-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; }
.fbb-admin-published-list { display: flex; flex-direction: column; gap: 0.7rem; }
@media (max-width: 860px) {
  .fbb-admin-grid { grid-template-columns: 1fr; }
  .fbb-admin-preview-pane { position: static; }
}

/* ============================================================
   Redesign 05.08.2026 - grosses episches Desktop-Kampffenster
   (Nutzer-Auftrag mit Referenzbild: linke Navigation, grosse zentrale
   Arena, rechte Boss-/Stufen-/Belohnungs-Spalte, obere kompakte
   Ressourcenleiste, untere Bonus-/Kampfwerte-Leiste).

   Scope-Entscheidungen (bewusst, siehe Analyse-Chat):
   - Nur ab min-width:1000px aktiv - darunter (Mobil/Tablet, bereits
     ausfuehrlich in Phase 7.0/7.1 getunt) bleibt ALLES exakt wie zuvor.
   - :not(.zone-game) - der echte /app-Vollbild-Modus (installierte PWA)
     behaelt sein bestehendes, separates 100vw/100vh-Layout unangetastet;
     dieser Auftrag betrifft explizit "mein Kampffenster im Spiel" auf der
     normalen Website/einem grossen Desktop-Monitor.
   - #idleDorfTabs/#idleStageBar wurden dafuer im Markup umsortiert
     (index.html) - beide Render-/Klick-Funktionen (bkmpIdleInitTabs,
     bkmpIdleBuildMobileTabOverflowUi, bkmpIdleRenderStageBar) arbeiten
     nachweislich ausschliesslich per getElementById, komplett
     positionsunabhaengig (siehe Analyse-Chat) - reine Umsortierung, keine
     JS-Aenderung noetig, um sie hierher zu verschieben.
   ============================================================ */

/* ---- Basis-Zustand (< 1000px, unveraendertes Mobil-/Tablet-Verhalten):
   die drei neuen Wrapper werden zu reinen "display:contents"-Passthroughs,
   damit ihre echten Kind-Elemente exakt wie VOR diesem Redesign in
   #idlePanelKampf's bereits bestehendem Flex-Column-Kontext (siehe
   "#idlePanelKampf{display:flex;flex-direction:column}" weiter oben in
   dieser Datei) auftauchen. #idleStageBar bekommt "order:-1", um trotz
   seiner neuen DOM-Position (jetzt in #idleKampfRightCol, NACH der Arena-
   Spalte) visuell weiterhin ALS ERSTES zu erscheinen - identisch zur
   urspruenglichen Reihenfolge vor dieser Umsortierung. Die drei komplett
   neuen Inhalte (Bonusleiste/Boss-Karte/Belohnungen/Statistiken) sind auf
   diesen Breiten bewusst unsichtbar - reines Zusatzangebot fuer die neue
   grosse Desktop-Ansicht, kein bestehendes Mobil-Element wird entfernt. */
#idleKampfLayout, #idleKampfArenaCol, #idleKampfRightCol {
  display: contents;
}
#idleStageBar {
  order: -1;
}
#idleKampfBonusBar, #idleCombatBossCard, #idleCombatRewards, #idleCombatStats {
  display: none;
}

@media (min-width: 1000px) {
  /* ---- Aeussere Fensterhuelle: gross, Grid-Schale ----
     NACHTRAG (06.08.2026, Spieler-Screenshots 2560x1440 + 1920x1080):
     "height:min(92vh,1120px)" zwang die Karte auf JEDEM breiten Bildschirm
     auf eine FESTE Hoehe, unabhaengig vom tatsaechlichen Inhalt - die
     Grid-Zeile "body" (1fr) musste diese Hoehe dann komplett ausfuellen,
     auch wenn Sidebar/Arena-Spalte/Info-Spalte viel weniger Platz
     brauchten. Zwei reale, per getComputedStyle/getBoundingClientRect
     bewiesene Folgen:
     1) Auf sehr hohen Viewports (>=~1217px, wo 92vh>=1120px und die Karte
        dauerhaft am 1120px-Deckel klebt) blieb unterhalb der kuerzeren
        Spalten (v.a. der rechten Info-Spalte, gemessen ~296px Leerraum
        bei 2560x1440) und unterhalb der Bonusleiste in der Arena-Spalte
        (~146px) reiner Leerraum stehen - der Footer wurde dadurch an den
        weit entfernten unteren Kartenrand gedrueckt.
     2) Auf einem NIEDRIGEREN echten Browser-Viewport (ein nominelles
        1920x1080-Display liefert wegen Tab-/Adressleiste/Lesezeichen-
        leiste/OS-Taskleiste selten eine tatsaechliche CSS-Viewporthoehe
        von 1080px - bei einer simulierten effektiven Hoehe von 860px
        reproduziert) schrumpfte die per 92vh berechnete Kartenhoehe (und
        damit die "1fr"-Koerperzeile) STAERKER, als es der WIRKLICHE
        Inhalt der linken Navigation (~808px fuer 16 Tab-Buttons, fast
        breitenunabhaengig fest) und der rechten Info-Spalte (~626px)
        erlaubten - beide bekamen dadurch unabhaengig voneinander einen
        eigenen internen Scrollbalken (bewiesen: navOverflow.scrollHeight
        808 > clientHeight 637, rightColOverflow.scrollHeight 626 >
        clientHeight 594), obwohl die Karte selbst noch in den Viewport
        gepasst haette.
     Fix: "height:auto" + "max-height" als reine Obergrenze statt eines
     erzwungenen Fixwerts - die bereits bestehende Kette aus
     "flex:1 1 auto; min-height:0" (Body/Panel/Layout/Arena-Spalte/Info-
     Spalte, alle weiter unten in diesem Block) passt sich dadurch
     automatisch an: ohne freien Platz von aussen verteilt "flex-grow"
     nichts mehr, jede Spalte wird stattdessen so hoch wie ihr eigener
     Inhalt (die schon bestehenden Untergrenzen wie ".idle-battlefield"s
     eigenes min-height:36vh/40vh bleiben unveraendert die Design-
     Untergrenze fuer die Kampfszene selbst). Erst wenn der Inhalt
     tatsaechlich die neue "calc(100dvh - 24px)"-Obergrenze uebersteigt,
     greift die bereits vorhandene "overflow-y:auto" der Karte als EIN
     gemeinsamer Scrollbalken - keine Aenderung an Kampfmechanik/Medien/
     Werten, reine Groessen-/Grid-Korrektur. */
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-dorf-card {
    width: min(94vw, 2000px);
    max-width: min(94vw, 2000px);
    height: auto;
    max-height: calc(100dvh - 24px);
    display: grid;
    grid-template-columns: 214px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "hud hud" "nav body";
    column-gap: 1.2rem;
    row-gap: .65rem;
    padding: 1.35rem 1.6rem 1.15rem;
  }
  /* Verteidigung in der Tiefe (siehe Kommentar bei ".idle-dorf-overlay
     .idle-dorf-card > *{position:relative;z-index:1}" weiter oben in
     dieser Datei): rein dekorative/schwebende Direkt-Kinder bekommen
     hier explizit den vollen Grid-Bereich zugewiesen, damit sie bei
     "position:absolute" weiterhin relativ zur GESAMTEN Karte (nicht nur
     einer einzelnen Grid-Zelle) positioniert bleiben. */
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-dorf-card > .app-bg-fx,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-dorf-card > #idleDorfCloseX,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-dorf-card > #idleDorfFeedbackBtn {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }

  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfHud {
    grid-area: hud;
    margin-bottom: 0;
  }

  /* ---- Linke Navigation: echte vertikale Sidebar statt horizontaler
     Tab-Zeile - #idleDorfTabs bleibt dieselbe ID/Klasse, nur die
     Flex-Richtung/Buttonform aendert sich. Icon/Label-Spans existieren
     bereits fuer JEDEN Tab-Button (bkmpIdleBuildMobileTabOverflowUi()
     baut sie unbedingt beim Laden, siehe Analyse-Chat) - keine neue
     HTML-Struktur noetig. ---- */
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs {
    grid-area: nav;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: .3rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .2rem .3rem .2rem 0;
    border-bottom: none;
    margin-bottom: 0;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs .idle-dorf-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .65rem;
    width: 100%;
    flex: 0 0 auto;
    min-height: 46px;
    min-width: 0;
    padding: .55rem .75rem;
    font-size: .82rem;
    border-radius: 12px;
    text-align: left;
    border-left: 3px solid transparent;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs .idle-dorf-tab-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    width: 1.5em;
    text-align: center;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs .idle-dorf-tab-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Der horizontale Unterstrich-Glow (::after) aus der Tab-Leisten-
     Basisregel ist fuer eine liegende Zeile gedacht - in der Sidebar
     ersetzt ein linker Akzentrand (border-left oben) dieselbe Funktion. */
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs .idle-dorf-tab.active::after {
    display: none;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs .idle-dorf-tab:not(:disabled):hover {
    transform: none;
    background: color-mix(in srgb, var(--app-gold) 10%, transparent);
    border-left-color: color-mix(in srgb, var(--app-gold) 55%, transparent);
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs .idle-dorf-tab.active {
    transform: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--app-gold) 22%, transparent), transparent);
    border-left-color: var(--app-gold);
    color: var(--app-gold);
    box-shadow: none;
  }

  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfBody {
    grid-area: body;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ---- Kampf-Tab: zweispaltige Innenaufteilung (Arena links, Info-
     Spalte rechts). #idlePanelKampf ist bereits (unconditional, siehe
     Basisregel weiter oben in dieser Datei) eine Flex-Spalte - das neue
     Layout haengt sich nur als zusaetzlicher, waachsender Bereich daran. ---- */
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idlePanelKampf {
    flex: 1 1 auto;
    min-height: 0;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfLayout {
    display: grid;
    grid-template-columns: 1fr 336px;
    column-gap: 1.1rem;
    flex: 1 1 auto;
    min-height: 0;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfArenaCol {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-height: 0;
    min-width: 0;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfArenaCol .idle-battlefield {
    flex: 1 1 auto;
    min-height: 0;
    /* NACHTRAG (06.08.2026, Spieler-Screenshot: grosse leere Flaeche
       zwischen Kampfszene und der Bonusleiste darunter): vorher
       "max-height:none!important" liess das Feld bei viel verfuegbarer
       Hoehe (grosse/hohe Fenster) unbegrenzt wachsen - .idle-battlefield
       ist aber selbst nur ein Flex-Rahmen mit align-items:center, der die
       eigentlichen Dorf-/Drachenbilder (#idleVillage/#idleDragon, beide
       behalten ihr eigenes, meist recht breites/flaches Seitenverhaeltnis)
       nur MITTIG zentriert statt zu strecken - je hoeher der Rahmen ueber
       das von den Bildern tatsaechlich benoetigte Mass hinaus waechst,
       desto groesser die dadurch entstehende leere Flaeche ueber+unter den
       Bildern (per getComputedStyle/getBoundingClientRect am eigenen
       QA-Testkonto bestaetigt: Dorf/Drache randferner als noetig zentriert,
       Bonusleiste direkt danach mit nur ~11px echtem Abstand - die "leere
       Flaeche" liegt strukturell INNERHALB des Kampffelds, nicht dazwischen).
       Deckel begrenzt das ungebremste Wachstum, ohne die urspruengliche
       Mindesthoehe (siehe Basisregel weiter oben in dieser Datei) zu
       unterschreiten. */
    max-height: min(620px, 60dvh) !important;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    padding-right: .15rem;
  }

  /* NEU: untere "Globale Kampf-Boni"-Leiste (JS: bkmpIdleRenderCombatBonusBar
     in idledorf.js) - liest ausschliesslich bereits bestehende Felder aus
     bkmpIdleEffectiveStats, keine neue Berechnung. */
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfBonusBar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .55rem;
    flex-shrink: 0;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-kampf-bonus-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .55rem .35rem .5rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .26));
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    text-align: center;
    min-width: 0;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-kampf-bonus-icon { font-size: 1.15rem; }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-kampf-bonus-value {
    font-size: .92rem;
    font-weight: 800;
    color: var(--app-gold);
    font-variant-numeric: tabular-nums;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-kampf-bonus-label {
    font-size: .6rem;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* NEU: rechte Info-Spalte - gemeinsamer Karten-Look fuer Stufenleiste
     (wiederverwendet, siehe Markup-Kommentar in index.html)/Boss-Karte/
     Belohnungen/Statistiken. */
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol .idle-stage-bar,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-boss-card,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-rewards,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-stats {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .28));
    padding: .8rem .9rem;
    margin-bottom: 0;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol .idle-stage-bar {
    gap: .55rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol .idle-stage-label {
    font-size: .92rem;
    text-align: center;
    white-space: normal;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol .idle-stage-buttons {
    flex-direction: column;
    gap: .45rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol .idle-stage-btn {
    width: 100%;
    padding: .6rem .8rem;
    font-size: .82rem;
    font-weight: 700;
    border-radius: 10px;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol #idleStageJumpBtn {
    background: linear-gradient(180deg, var(--app-gold), var(--app-gold-deep));
    color: #241708;
    border: none;
  }

  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-boss-icon {
    font-size: 2.1rem;
    text-align: center;
    line-height: 1.1;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-boss-name {
    font-family: 'Fraunces', serif;
    font-size: 1.02rem;
    font-weight: 700;
    text-align: center;
    color: var(--app-gold);
    margin-top: .2rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-boss-stage {
    font-size: .74rem;
    color: var(--app-muted);
    text-align: center;
    margin-bottom: .5rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-boss-hp {
    height: 12px;
  }

  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-rewards-title,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-stats-title {
    font-size: .78rem;
    font-weight: 700;
    color: var(--app-ink);
    margin-bottom: .5rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-rewards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-reward-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    border-radius: 999px;
    background: rgba(255, 215, 106, .12);
    border: 1px solid rgba(255, 215, 106, .3);
    font-size: .78rem;
    font-weight: 700;
    color: var(--app-gold);
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    padding: .32rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-stat-row:last-child { border-bottom: none; }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-stat-row span { color: var(--app-muted); }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-stat-row b {
    color: var(--app-ink);
    font-variant-numeric: tabular-nums;
  }
}

/* NACHTRAG (06.08.2026): ergaenzt die obige "Aeussere Fensterhuelle nicht
   mehr strecken"-Korrektur (height:auto statt min(92vh,1120px)) - dadurch
   allein bleiben bei den vom Auftrag genannten Ziel-Aufloesungen 1600x900
   und 1366x768 (per getBoundingClientRect/scrollHeight-vs-clientHeight
   bewiesen, nicht nur vermutet) noch zwei eigene interne Scrollbalken
   uebrig: die linke Sidebar (#idleDorfTabs, 17 Tab-Buttons a 46px Mindest-
   hoehe = ~808px, praktisch fensterhoehen-unabhaengig fest) und in
   geringerem Mass die rechte Info-Spalte (Stufenleiste/Boss-Karte/
   Belohnungen/Statistik-Karten, ~613-660px) - beide passen bei diesen
   Aufloesungen nicht mehr in die durch "max-height:calc(100dvh-24px)"
   geschrumpfte Koerperzeile. Bei 2560x1440/1920x1080 (echter Viewport,
   ohne Browser-Chrome-Abzug) tritt das NICHT auf - dort bleibt genug
   Hoehe, diese Regeln greifen dort also gar nicht (max-height-Bedingung
   trifft nicht zu). Gleiches, bereits etabliertes Stufen-Prinzip wie die
   alte Phase-7.1-Kompaktregel bei ".idle-battlefield" (siehe
   "@media(max-height:900px)" weiter oben in dieser Datei) - hier bewusst
   zusaetzlich an "min-width:1000px" gebunden, damit die mobile/kompakte
   Navigation (voellig andere Struktur, siehe #bkmpProtoCompactNav) nicht
   beruehrt wird. Reine Groessen-/Abstands-Verdichtung (Mindesthoehe/
   Innenabstand/Schriftgroesse/Zeilenabstand der ohnehin schon vorhandenen
   Buttons/Karten) - kein Tab entfernt, keine Funktion/kein Wert geaendert. */
@media (min-width: 1000px) and (max-height: 960px) {
  /* !important auf gap/padding/min-height: die aeltere, breitenunabhaengige
     Phase-7.1-Kompaktregel (siehe ".idle-dorf-tabs"/"​.idle-dorf-tab" in
     "@media(max-height:900px/780px/700px)" weiter oben in dieser Datei,
     urspruenglich fuer die flache horizontale Tab-Zeile gebaut) traegt an
     denselben Eigenschaften bereits eigene !important-Werte und ueberlappt
     bei diesen Hoehen - ohne eigenes !important wuerde sie hier gewinnen
     und die neue Sidebar kaum verdichten (per getComputedStyle bestaetigt:
     "gap:4.48px 6.4px" statt der hier beabsichtigten .18rem). */
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs {
    gap: .18rem !important;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs .idle-dorf-tab {
    min-height: 34px !important;
    padding: .3rem .6rem !important;
    font-size: .76rem;
    gap: .55rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs .idle-dorf-tab-icon {
    font-size: 1rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol {
    gap: .45rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol .idle-stage-bar,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-boss-card,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-rewards,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-stats {
    padding: .55rem .7rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol .idle-stage-buttons {
    gap: .3rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol .idle-stage-btn {
    padding: .42rem .7rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-rewards-title,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-stats-title {
    margin-bottom: .3rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-boss-stage {
    margin-bottom: .3rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-stat-row {
    padding: .2rem 0;
  }
}

/* Zweite, tiefere Verdichtungsstufe fuer kleine Desktopfenster knapp ueber
   der 1000px-Breitengrenze in Kombination mit geringer Hoehe (z.B.
   1024x700 - per getBoundingClientRect/scrollHeight bewiesen: selbst nach
   der Stufe oben blieben dort noch ~45px/~76px Ueberlauf in Sidebar/
   Info-Spalte uebrig). Gleiches Prinzip wie oben, nur ein Stueck weiter -
   greift NUR zusaetzlich zur ersten Stufe (beide Bedingungen ueberlappen
   bei kleinen Werten), keine neuen Selektoren/Funktionen. */
@media (min-width: 1000px) and (max-height: 740px) {
  /* !important aus demselben Grund wie in der ersten Verdichtungsstufe
     weiter oben (Konflikt mit der aelteren, breitenunabhaengigen
     Phase-7.1-Kompaktregel bei "max-height:700px"). */
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs {
    gap: .12rem !important;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs .idle-dorf-tab {
    min-height: 26px !important;
    padding: .22rem .55rem !important;
    font-size: .72rem;
    gap: .45rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs .idle-dorf-tab-icon {
    font-size: .9rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol {
    gap: .22rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol .idle-stage-bar,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-boss-card,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-rewards,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-stats {
    padding: .34rem .5rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol .idle-stage-bar {
    gap: .24rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol .idle-stage-buttons {
    gap: .18rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleKampfRightCol .idle-stage-btn {
    padding: .26rem .55rem;
    font-size: .74rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-boss-icon {
    font-size: 1.3rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-boss-name {
    margin-top: .05rem;
    font-size: .92rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-boss-stage {
    margin-bottom: .15rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-rewards-title,
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-stats-title {
    margin-bottom: .15rem;
  }
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay .idle-combat-stat-row {
    padding: .08rem 0;
  }
}

@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
  html.bkmp-app-mode:not(.zone-game) #idleDorfOverlay #idleDorfTabs .idle-dorf-tab { transition: none; }
}

/* ============================================================
   MOBILE-REDESIGN (06.08.2026) - eigenstaendiges Mobile-Game-Layout
   ============================================================
   Nutzer-Auftrag (28-Abschnitte-Brief, nicht 1:1 hier dupliziert): "Die
   Handysicht darf nicht länger nur eine verkleinerte beziehungsweise
   zusammengedrückte Desktopansicht sein." Screenshot-Beweis bei ~390px
   Breite zeigte u.a.: riesige runde Niederlagen-Blase (Ursache+Fix siehe
   bkmpIdleHandleDefeat() in idledorf.js), doppelte Niederlagen-Anzeige
   (dieselbe Ursache), abgeschnittener Gegnername "Schwa…" (Ursache: siehe
   ".idle-hp-row .idle-dragon-name" Basisregel weiter oben, feste
   max-width:45% + nowrap+ellipsis), 6+Mehr ueberfuellte Bottom-Navigation
   (Ursache+Fix siehe BKMP_PROTO_NAV_PRIMARY/BKMP_TAB_OVERFLOW_PRIMARY_IDS),
   dominanter AD-Free-Button, hoher Kampf-Log-Leerblock, drei inkonsistente
   Mobil-Breakpoints (640/760/768px, jetzt auf 999px vereinheitlicht, siehe
   die drei @media-Kopfzeilen weiter oben in dieser Datei). Reine
   Darstellungsschicht - keine Spielwerte/Formeln/Medien/DB-Aenderung, alle
   bestehenden IDs/Event-Hooks unangetastet. Bewusst als eigener, klar
   markierter Block ans Ende der bestehenden Mobil-Bloecke angehaengt
   (gleiches Isolations-Muster wie "PROTOTYP 2"/"PHASE 7.0" oben) - hat
   automatisch Vorrang durch Quellreihenfolge bei gleicher Spezifitaet,
   ohne eine der aelteren Regeln anfassen zu muessen. */
@media (max-width: 999px), (max-height: 500px) and (orientation: landscape) {

  /* ---- 1) Kopfzeile: klare 3-Zeilen-Gruppierung statt einer einzigen,
     je nach Inhaltsmenge unvorhersehbar umbrechenden Flex-Zeile (Auftrag
     Abschnitt 3: "Erste Zeile: Level/Skillpunkte/EXP/Effekte/Nachrichten/
     Schliessen", "Zweite Zeile: Ressourcen als kompakte Chips", "keine
     mehrzeilige chaotische Chip-Wolke"). Level-Badge+Info/Fx-Icons bleiben
     auf Zeile 1 (order:1/2), EXP-Leiste bekommt weiterhin ihre eigene volle
     Zeile (order:3, bereits bestehende Regel oben in diesem Block - hier
     nur um Ressourcen ERGAENZT, die vorher ohne festen "order" mal mit
     Zeile 1, mal mit der EXP-Zeile kollidieren konnten, je nach Textlaenge/
     Geraet), Ressourcen-Chips bekommen jetzt zusaetzlich ihre eigene dritte
     Zeile (order:4) statt unvorhersehbar mit umzubrechen. */
  .bkmp-proto-chud-row {
    padding: .4rem .6rem;
    padding-right: 5.3rem;
    gap: .35rem;
    row-gap: .3rem;
  }
  .bkmp-proto-chud-level { order: 1; }
  .bkmp-proto-chud-icon-btn { order: 2; }
  .bkmp-proto-chud-xp { order: 3; }
  .bkmp-proto-chud-resources {
    order: 4;
    flex-basis: 100%;
    gap: .5rem;
    padding-top: .1rem;
  }
  .bkmp-proto-chud-res { font-size: .74rem; }

  /* ---- 2) Stufenkarte (Auftrag Abschnitt 4): eigene, klar begrenzte
     Kompakt-Karte statt einer schmalen, im Dokumentfluss haengenden Zeile -
     dieselben drei bereits vorhandenen Aktionen (Auto-Umschalten/Stufe-
     waehlen/Beste-Stufe-springen, siehe bkmpProtoChudRenderStageBar in
     bkmp-proto-compact-hud.js), nur klarer angeordnet: Status-Text oben,
     die beiden Icon-Knoepfe + der "Beste Stufe"-Knopf (falls vorhanden) in
     einer zweiten Zeile darunter statt alle drei nebeneinander in einer
     einzigen, bei langen Zahlen schnell zu schmal werdenden Reihe. */
  .bkmp-proto-stagebar {
    flex-wrap: wrap;
    row-gap: .45rem;
    padding: .55rem .7rem;
  }
  /* Nur der Status-Text (erstes Kind, reiner Text ohne eigene Klasse)
     bekommt eine eigene volle Zeile - die Icon-/Aktions-Knoepfe danach
     bleiben bewusst eine gemeinsame Reihe darunter (flex-wrap erledigt das
     automatisch, sobald der Text durch flex-basis:100% umgebrochen ist). */
  .bkmp-proto-stagebar > span:first-child {
    flex-basis: 100%;
    text-align: center;
    font-size: .82rem;
  }
  .bkmp-proto-stagebar-icon-btn,
  .bkmp-proto-stagebar-btn {
    margin-left: 0;
  }
  .bkmp-proto-stagebar-icon-btn { width: 40px; height: 40px; font-size: 1rem; }
  .bkmp-proto-stagebar-btn { flex: 1 1 auto; min-height: 44px; }

  /* ---- 3) Niederlagen-/Status-Banner (Auftrag Abschnitt 5): die
     Basisregel (".idle-combat-status" weiter oben in dieser Datei) nutzt
     border-radius:999px + white-space:nowrap+ellipsis - fuer die auf Mobil
     jetzt LAENGERE, zweizeilige Niederlagen-Meldung (siehe bkmpIdleHandle
     Defeat() in idledorf.js, dort ausdruecklich nur fuer den kompakten
     Mobil-/Tablet-Zustand aktiviert) waere eine Pillenform mit umbrechendem
     Text praktisch ein Kreis - genau der im Auftrag gezeigte Fehler. Auf
     Mobil deshalb ein echtes rechteckiges Banner mit weicheren Ecken,
     voller nutzbarer Breite und echtem Zeilenumbruch (white-space:pre-line
     interpretiert das \n aus dem JS-Text als Zeilenumbruch, textContent
     bleibt dabei unveraendert XSS-sicher gesetzt). Andere Status-Typen
     (Sieg/Bosskampf/Naechste Stufe) bleiben bei ihrem kurzen, einzeiligen
     Text und damit optisch bei der kompakteren Pillenform. */
  .idle-combat-status-defeat {
    top: 4%;
    max-width: 92%;
    width: max-content;
    white-space: pre-line;
    overflow: visible;
    text-overflow: clip;
    border-radius: 14px;
    font-size: clamp(.85rem, 3.6vw, 1.05rem);
    line-height: 1.35;
    padding: .55rem 1rem;
    max-height: 110px;
    background: linear-gradient(155deg, rgba(30, 8, 10, .88), rgba(20, 5, 8, .78));
  }

  /* ---- 4) Kampfkarte: Dorf/Gegner-Name (Auftrag Abschnitt 6, Beweis-
     Screenshot "Schwa…"): die Basisregel (".idle-hp-row .idle-dragon-name"
     weiter oben in dieser Datei) zwingt den Namen auf max-width:45% der
     HP-Zeile mit hartem nowrap+ellipsis - bei kurzen Kampfkarten-Breiten
     auf dem Handy reichen 45% oft fuer keinen einzigen vollstaendigen
     Drachennamen. Name bekommt auf Mobil seine EIGENE Zeile UEBER der
     HP-Leiste (volle Breite, echter Umbruch statt Ellipse) statt sich mit
     ihr eine Zeile zu teilen - identisches Prinzip wie beim Kopfzeilen-
     Umbau oben (eigene Zeile statt erzwungener Kuerzung). */
  /* Bug-Fix beim eigenen mobilen Testen gefunden: eine erste Fassung setzte
     hier "order:-1" (Name UEBER die HP-Leiste) - kollidierte sichtbar mit
     den dort ueber #idleDragon/#idleVillage schwebenden Schadenszahlen
     (siehe bkmpIdleSpawnProjectile/-ClickDamage in bkmp-hud.js, positioniert
     relativ zum Sprite, nicht zur HP-Zeile). Name bleibt jetzt in der
     urspruenglichen DOM-Reihenfolge NACH der HP-Leiste (eigene Zeile
     darunter statt darueber) - keine Ueberlappung mehr moeglich, echter
     Zeilenumbruch statt Ellipse bleibt erhalten. */
  .idle-hp-row { flex-wrap: wrap; row-gap: .2rem; }
  .idle-hp-row .idle-dragon-name {
    flex: 1 1 100%;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: center;
  }
  html.bkmp-app-mode .idle-dragon-name { font-size: .82rem; }

  /* ---- 5) AD-Free-Kauf-Button (Auftrag Abschnitt 8): bleibt ein ECHTER,
     funktionsfaehiger Kauf-Button (siehe Kommentar bei der App-Modus-
     Basisregel weiter oben in dieser Datei) - "99$" ist laut dortiger
     Beschriftung/Funktion der tatsaechlich hinterlegte, bewusste Preis
     dieses Easter-Egg-Kaufs, keine erkennbare Test-/Platzhalter-Notation
     (kein "TODO"/"XX"/offensichtlicher Lorem-Wert) - deshalb hier
     ausdruecklich NICHT geaendert, nur seine optische Dominanz reduziert:
     kleiner, weniger flaechige Farbe, mehr Abstand, damit er neben dem
     Kampf nicht mehr wie das wichtigste Element der Seite wirkt.
     !important noetig (per getComputedStyle bestaetigt, nicht nur
     vermutet): der generische "html.bkmp-app-mode .idle-dorf-panel
     button"-Reset (Padding-Vorgabe fuer normale Text-Buttons, seit Phase 5
     praktisch immer aktiv, mehrfach in diesem Projekt dokumentiert) hat
     durch seinen zusaetzlichen Typ-Selektor "button" HOEHERE Spezifitaet
     als eine einzelne Klassen-Kombination wie hier - gewinnt sonst trotz
     spaeterer Position im Quelltext. */
  html.bkmp-app-mode .idle-adfree-btn {
    padding: .55rem .8rem !important;
    margin: .5rem 0;
    border-radius: 10px;
    font-size: .76rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-gold) 55%, var(--paper-2)), color-mix(in srgb, var(--app-gold) 70%, var(--paper-2)));
    box-shadow: none;
  }

  /* ---- 6) Kampf-Log-Kopfzeile (Auftrag Abschnitt 9): bereits ein
     kompakter Umschalt-Knopf (siehe Basisregel ".idle-combat-log-toggle"
     weiter oben, ~44px), wirkte im Screenshot durch die volle Kartenbreite
     + fehlenden visuellen Aufklapp-Hinweis trotzdem wie ein grosser,
     leerer Button. Chevron-Pfeil rein dekorativ per ::after (kein neuer
     JS-Text-Hook noetig, ".open"-Klasse existiert bereits am Sheet, siehe
     bkmpIdleCombatLogOpen in bkmp-hud.js). !important auf padding aus
     demselben Grund wie beim AD-Free-Knopf oben (generischer "html.bkmp-
     app-mode .idle-dorf-panel button"-Reset hat durch den Typ-Selektor
     "button" hoehere Spezifitaet). */
  .idle-combat-log-toggle {
    justify-content: space-between;
    min-height: 46px;
    padding: .5rem .9rem !important;
    margin: .4rem 0;
  }
  .idle-combat-log-toggle::after {
    content: '▾';
    margin-left: auto;
    color: var(--muted);
    transition: transform .2s ease;
  }
  .idle-combat-log-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  /* ---- 7) Footer (Auftrag Abschnitt 10): "Als App installieren"/"Für
     Streamer" sollen nicht mit der fixierten Bottom-Navigation kollidieren
     und wenig Raum einnehmen - die Karte reserviert bereits Platz fuer die
     Navigation (padding-bottom weiter oben in dieser Datei), hier nur
     Schriftgroesse/Abstand der Links selbst verdichtet. */
  .idle-dorf-footer-links {
    gap: .8rem !important;
    margin-top: .5rem !important;
    padding-top: .4rem;
    font-size: .78rem;
  }
  /* Nutzerwunsch (06.08.2026): "Für Streamer" auf der Handyansicht optisch
     entfernen - das dahinterliegende OBS-Overlay-Setup (idle-stream-
     mini.html) ist ein reines Desktop-/PC-Feature, auf dem Handy nicht
     sinnvoll nutzbar. Nur auf Mobil (<1000px) ausgeblendet, Desktop
     unveraendert - reine Anzeige, Link/Funktion selbst bleiben bestehen
     (nichts geloescht, jederzeit reversibel). */
  .idle-stream-help-btn { display: none; }

  /* ---- 8) Bottom-Navigation (Auftrag Abschnitt 11): jetzt 4 Haupt-Tabs +
     "Mehr" statt vorher 6 + "Mehr" (siehe BKMP_PROTO_NAV_PRIMARY in
     bkmp-proto-compact-hud.js). Echter Bug beim eigenen mobilen Testen
     gefunden (per getBoundingClientRect bewiesen, nicht nur vermutet):
     ".bkmp-proto-nav-primary"(enthaelt ALLE Haupt-Tabs) und ".bkmp-proto-
     nav-more-wrap"(enthaelt nur den EINEN "Mehr"-Knopf) haben in der
     Basisregel weiter oben in dieser Datei BEIDE "flex:1" - die Nav-Zeile
     teilte sich dadurch faktisch in zwei GLEICH GROSSE Haelften: die 4
     Haupt-Tabs mussten sich eine Haelfte teilen (gemessen nur 45px pro
     Knopf bei 390px Breite, "Upgrades" dadurch abgeschnitten), waehrend
     der einzelne "Mehr"-Knopf die GESAMTE andere Haelfte (185px) fuer sich
     allein bekam - weit mehr, als ein Wort braucht. Fix: "Mehr" bekommt
     nur noch den Anteil EINES einzelnen Haupt-Tabs (Verhaeltnis 4:1 exakt
     zur jetzigen Tab-Anzahl), die 4 Haupt-Tabs teilen sich den dadurch neu
     gewonnenen Platz. !important als Absicherung: dieser gesamte Mobile-
     Redesign-Block steht bewusst ganz am Dateiende (gewinnt dadurch
     ohnehin per Quellreihenfolge gegen die bestehende, gleich spezifische
     Basisregel ".bkmp-proto-nav-primary{flex:1;...}" weiter oben in
     dieser Datei) - !important haelt das auch robust, falls jemals eine
     weitere gleich spezifische Regel NACH diesem Block ergaenzt wird. */
  .bkmp-proto-nav-primary { flex: 4 1 0 !important; }
  .bkmp-proto-nav-more-wrap { flex: 1 1 0 !important; }
  .bkmp-proto-nav-btn svg { width: 20px; height: 20px; }
  .bkmp-proto-nav-btn span.bkmp-proto-nav-label { font-size: .68rem; }
  .bkmp-proto-nav-more-btn { font-size: .68rem; }
}

/* Querformat (Auftrag Abschnitt 15, engerer @media(max-height:500px)-
   Zusatz zum obigen Block, greift nur bei tatsaechlich flachen Viewports):
   Kopfzeile/Stufenkarte weiter verdichten, Niederlagen-Banner bleibt eine
   kleine Toast-Leiste statt der vollen Zwei-Zeilen-Version - genug Hoehe
   fuer Kampfkarte/Navigation bleibt Prioritaet (Abschnitt 15: "Kampfkarte
   sichtbar, Stufensteuerung erreichbar, Bottom-Navigation erreichbar,
   keine komplette Bildschirmblockade durch Meldungen"). */
@media (max-height: 500px) and (orientation: landscape) {
  .bkmp-proto-chud-row { padding: .3rem .5rem; padding-right: 5.3rem; row-gap: .15rem; }
  .bkmp-proto-stagebar { padding: .35rem .55rem; gap: .3rem; }
  .idle-combat-status-defeat {
    max-height: 60px;
    font-size: clamp(.72rem, 3.2vw, .88rem);
    padding: .35rem .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 999px;
  }
}

/* NACHTRAG (06.08.2026, beim eigenen mobilen Testen gefunden): die
   bestehende Schlachtfeld-Untergrenze ("min-height:clamp(340px,54dvh,
   620px)!important", siehe Kommentar bei der Basisregel weiter oben in
   dieser Datei) stammt aus einer Zeit, in der HUD/Navigation/Stufenleiste
   noch mehr Chrome ausserhalb des Schlachtfelds brauchten. Nach dem
   Mobile-Redesign oben (kompaktere 3-Zeilen-Kopfzeile, eigene Stufenkarte)
   bleibt bei 54dvh spuerbar mehr Leerraum UM die kleinen, breiten-
   begrenzten Dorf-/Drachenbilder herum stehen, als die Bilder selbst
   brauchen (per getBoundingClientRect bestaetigt: Schlachtfeld 456px hoch
   bei 844px Bildschirmhoehe, Dorf-/Drachenbild selbst nur 59-102px) - die
   Karte ist als Ganzes SCROLLBAR (#idleDorfBody, overflow-y:auto), ein
   kuerzeres Schlachtfeld erzeugt hier also (anders als beim vorher
   behobenen Desktop-Fall mit fester Kartenhoehe) keine neue "Leerflaeche
   im Nichts", sondern macht die Seite insgesamt kompakter. 54dvh -> 44dvh
   (Unter-/Obergrenze 340-620px bleiben unveraendert). */
@media (max-width: 999px), (max-height: 500px) and (orientation: landscape) {
  html.bkmp-app-mode #idlePanelKampf .idle-battlefield {
    min-height: clamp(340px, 44dvh, 620px) !important;
  }
}