:root {
  --bg: #0b0e18;
  --panel: rgba(18, 22, 38, 0.92);
  --panel-border: rgba(120, 170, 255, 0.35);
  --accent: #4aa8ff;
  --accent2: #9b7bff;
  --gold: #ffd35b;
  --hp: #ff5470;
  --xp: #49d0ff;
  --text: #e8ecff;
  --muted: #8b93b8;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Basis-Schriftgroesse: alle rem-Werte skalieren mit */
  font-size: 17px;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

#stage {
  position: fixed;
  inset: 0;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  background: #10141f;
  cursor: crosshair;
  touch-action: none;
}

.hidden {
  display: none !important;
}

/* ------------------------------------------------------ Portal-Sprung
   Der Start eines Runs ist ein Ortswechsel, kein Menue-Schliessen. Die Leinwand
   liegt ueber allem und zeichnet den Sog; das Menue selbst wird per Animation in
   dieselbe Mitte gezogen, damit beides als eine Bewegung liest. */
.portal-fx {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 900;
  pointer-events: none;
}

/* Die Ebene faellt in den Trichter: sie schrumpft zur Bildmitte, dreht sich mit
   dem Wirbel und verliert dabei Schaerfe und Licht. Gilt fuer das Menue beim
   Start und fuer das Game-Over beim "Nochmal". */
.overlay.warp-suck {
  transform-origin: 50% 50%;
  pointer-events: none;
  animation: warp-suck 620ms cubic-bezier(0.5, 0, 0.9, 0.35) forwards;
}
@keyframes warp-suck {
  0% { transform: scale(1) rotate(0deg); filter: blur(0) brightness(1); opacity: 1; }
  55% { transform: scale(0.56) rotate(34deg); filter: blur(3px) brightness(0.66); opacity: 0.9; }
  100% { transform: scale(0.02) rotate(148deg); filter: blur(11px) brightness(0.2); opacity: 0; }
}

/* Wer Bewegung reduziert haben moechte, bekommt den Sprung gar nicht erst zu
   sehen - der Run startet dann sofort (js/game.js prueft dieselbe Abfrage). */
@media (prefers-reduced-motion: reduce) {
  .overlay.warp-suck { animation: none; opacity: 0; }
}

/* ------------------------------------------------------ Overlays / Panels */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(30, 40, 80, 0.55), rgba(5, 7, 14, 0.9));
  backdrop-filter: blur(3px);
  z-index: 20;
  padding: 20px;
}

/* Pause: Statistik (📊) und Debug-Panel (F3) sollen in Ruhe lesbar bleiben ->
   kein Weichzeichner, HUD liegt über dem Overlay. */
#pause {
  background: radial-gradient(circle at 50% 30%, rgba(20, 28, 56, 0.42), rgba(5, 7, 14, 0.68));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#stage:has(#pause:not(.hidden)) #hud { z-index: 30; }
/* ... aber Waffenreihe und Rang-Wappen sitzen mittig und wuerden sonst quer
   durch das Pause-Panel scheinen -> waehrend der Pause hinter das Overlay. */
#stage:has(#pause:not(.hidden)) #weaponRow,
#stage:has(#pause:not(.hidden)) .vitals-rank { opacity: 0; pointer-events: none; }
#stage:has(#pause:not(.hidden)) .stats-panel {
  background: rgba(8, 11, 24, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(160, 190, 255, 0.35);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.66);
}
/* Pause-Panel nach unten links: Statistik (rechts) und Debug (oben links) bleiben frei. */
#pause { align-items: flex-end; justify-content: flex-start; padding: 18px; }
#pause .panel { width: min(320px, 50vw); padding: 18px 20px; }
.pause-hint {
  margin: 2px 0 14px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}
.pause-hint kbd {
  padding: 1px 5px;
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.74rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 28px 30px;
  width: min(460px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  animation: pop 0.28s cubic-bezier(0.2, 1.3, 0.5, 1);
}

@keyframes pop {
  from {
    transform: scale(0.9) translateY(10px);
    opacity: 0;
  }
}

.game-title {
  font-size: 2.5rem;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #7fd6ff, #b79bff, #ffd35b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(120, 160, 255, 0.4));
}

.subtitle {
  color: var(--muted);
  margin: 8px 0 22px;
  font-size: 0.98rem;
}

/* ------------------------------------------------------ Name / Buttons */
.name-box {
  text-align: left;
  margin-bottom: 16px;
}

.name-box label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#nameInput {
  width: 100%;
  padding: 13px 15px;
  font-size: 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: rgba(10, 14, 28, 0.85);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#nameInput:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(74, 168, 255, 0.25);
}

.btn-primary {
  width: 100%;
  padding: 14px;
  margin-top: 4px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #06101f;
  background: linear-gradient(90deg, #58c6ff, #8f9bff);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(80, 150, 255, 0.4);
  transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 10px 26px rgba(80, 150, 255, 0.55);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-ghost {
  width: 100%;
  padding: 11px;
  margin-top: 10px;
  font-size: 1rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--accent);
}

.controls-hint {
  margin: 18px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.85rem;
  color: var(--muted);
}

.controls-hint b {
  color: var(--accent);
}

/* ------------------------------------------------------ Bestenliste */
.board {
  margin-top: 22px;
  border-top: 1px solid rgba(120, 170, 255, 0.18);
  padding-top: 14px;
}

.board h2 {
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: var(--gold);
  letter-spacing: 0.5px;
}

.score-list {
  list-style: none;
  text-align: left;
  max-height: 230px;
  overflow-y: auto;
}

.score-list li {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.95rem;
}

.score-list li:nth-child(odd) {
  background: rgba(120, 170, 255, 0.06);
}

/* --------------------------------------------------------------------------
   NACHLADEN (Top 1000)
   Die Bestenlisten zeigen erst die vorderen Plaetze und holen den Rest in
   100er-Schritten nach (js/game.js boardPageFoot). Diese Zeile ist Fussbereich
   und Melder zugleich: sobald sie in den Scrollbereich der Liste rutscht,
   laedt die naechste Seite von allein. Der Knopf bleibt fuer Tastatur und
   Browser ohne IntersectionObserver.
   -------------------------------------------------------------------------- */
.score-list li.board-more {
  display: block;
  padding: 6px 4px 2px;
  background: none;
}

.score-list li.board-more .board-more-btn {
  width: 100%;
  padding: 8px 10px;
  border: 1px dashed rgba(120, 170, 255, 0.35);
  border-radius: 8px;
  background: rgba(120, 170, 255, 0.05);
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.score-list li.board-more .board-more-btn:hover:not(:disabled),
.score-list li.board-more .board-more-btn:focus-visible {
  background: rgba(120, 170, 255, 0.14);
  border-color: rgba(120, 170, 255, 0.6);
  color: var(--text, #eaf0ff);
}

.score-list li.board-more .board-more-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.score-list li .rank {
  font-weight: bold;
  color: var(--muted);
  text-align: center;
}

.score-list li.top1 .rank { color: var(--gold); }
.score-list li.top2 .rank { color: #cfd6e6; }
.score-list li.top3 .rank { color: #e29a52; }

/* ==========================================================================
   PODIUM: PLATZ 1-3
   Die Spitze der Bestenliste ist der Grund, warum jemand nochmal spielt –
   also bekommt sie eine eigene Buehne statt nur einer anderen Zahlenfarbe.
   Alles haengt an --pc (podium colour), die Platzregeln setzen nur die Farbe.
   ========================================================================== */
.score-list li.podium-row {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pc) 34%, transparent);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--pc) 22%, transparent),
      color-mix(in srgb, var(--pc) 6%, transparent) 52%,
      transparent 88%);
}
/* Kantenlicht links: macht das Treppchen auch beim Ueberfliegen sichtbar. */
.score-list li.podium-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--pc), color-mix(in srgb, var(--pc) 30%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 70%, transparent);
}
.score-list li.top1 { --pc: #ffd45e; }
.score-list li.top2 { --pc: #d6dcec; }
.score-list li.top3 { --pc: #e8934a; }

/* Platz 1 bekommt zusaetzlich Tiefe und einen Hauch Aura. */
.score-list li.top1 {
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.09),
    0 0 22px color-mix(in srgb, var(--pc) 16%, transparent);
}

/* Rangfeld: Krone bzw. Lorbeer gross, Platzzahl klein darunter. */
.score-list li.podium-row .rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  color: var(--pc);
}
.score-list li.podium-row .podium-icon {
  font-style: normal;
  font-size: 0.95rem;
  color: var(--pc);
  text-shadow: 0 0 9px color-mix(in srgb, var(--pc) 65%, transparent);
}
.score-list li.top1 .podium-icon {
  font-size: 1.05rem;
  /* Nur die Krone atmet – bei allen dreien waere es Unruhe. */
  animation: podiumCrown 2.8s ease-in-out infinite;
}
.score-list li.podium-row .podium-num {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

/* Name und Punktzahl uebernehmen die Podiumsfarbe. */
.score-list li.podium-row .pscore {
  color: var(--pc);
  font-weight: 900;
  text-shadow: 0 0 10px color-mix(in srgb, var(--pc) 40%, transparent);
}
.score-list li.top1 .pl-name { text-shadow: 0 0 10px color-mix(in srgb, var(--pc) 35%, transparent); }

/* Lichtstreifen, der einmal ueber die Zeile laeuft. Platz 1 am haeufigsten. */
.score-list li.podium-row .row-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    color-mix(in srgb, var(--pc) 26%, transparent) 50%,
    transparent 62%);
  transform: translateX(-100%);
  animation: podiumShine 7s ease-in-out infinite;
}
.score-list li.top2 .row-shine { animation-duration: 11s; animation-delay: 1.6s; }
.score-list li.top3 .row-shine { animation-duration: 13s; animation-delay: 3.2s; }

@keyframes podiumShine {
  0%, 62% { transform: translateX(-100%); }
  86%, 100% { transform: translateX(100%); }
}
@keyframes podiumCrown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .score-list li.podium-row .row-shine { display: none; }
  .score-list li.top1 .podium-icon { animation: none; }
}

.score-list li .pname {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Zweite Zeile je Eintrag: erreichte Welle + gespielter Held */
/* Rangtitel unter dem Spielernamen in der Bestenliste. */
.score-list .pl-ranktitle {
  overflow: hidden;
  color: var(--rk, #9aa0ae);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-list li .pmeta {
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--muted);
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-list li .pscore {
  font-weight: bold;
  color: var(--xp);
  font-variant-numeric: tabular-nums;
}

/* Punktzahl mit Pokal-Vorschau: der Chip steht LINKS neben der Zahl.
   Der Chip sagt, WAS dieser Platz beim Saisonende einbraechte (js/game.js
   seasonTrophyChip) – er ist noch nichts Gewonnenes und bleibt deshalb
   zurueckhaltender als das Emblem hinter dem Namen (.pl-trophy). */
.score-list li .pscore.has-season {
  /* Feste Spalten statt Fluss: so stehen die Embleme aller Zeilen
     untereinander auf derselben Kante – auch bei sechsstelligen Punktzahlen.
     Die Mindestbreite haelt die Score-Spalte ueber alle Zeilen gleich breit. */
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 8px;
  min-width: 184px;
  text-align: right;
}
.score-list li .pscore.has-season .ps-num { justify-self: end; }
.score-list li .pscore .ps-num { font: inherit; color: inherit; }
.score-list li .pl-season {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
/* Das Emblem steht FREI links neben der Beschriftung – kein Rahmen drumherum,
   damit es gross genug bleibt, um die Stufe am Bild zu erkennen. */
.score-list li .pl-season i {
  display: inline-flex;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tg, #fff) 45%, transparent));
}
.score-list li .pl-season i svg { width: 100%; height: 100%; }
/* Nur der Text traegt die Pille. */
.score-list li .pl-season em {
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--tc, #9fb4d8) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tc, #9fb4d8) 12%, transparent);
  color: var(--tg, #dce7ff);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
}
/* Ab Pokalrang (Platz 1-3) darf die Vorschau leuchten. */
.score-list li .pl-season.tr-p10 em,
.score-list li .pl-season.tr-p9 em,
.score-list li .pl-season.tr-p8 em {
  border-color: color-mix(in srgb, var(--tc) 65%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--tc) 25%, transparent);
}
/* Grosse Vorschau beim Zeigen auf einen Pokal-Chip (js/game.js trophyPeekShow).
   Liegt an <body>, nicht in der Zeile: die Liste scrollt in einem eigenen
   Kasten und wuerde die Karte am Rand abschneiden. */
.trophy-peek {
  position: fixed;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 300px;
  padding: 12px 16px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--tc, #9fb4d8) 55%, transparent);
  border-radius: 14px;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--tc, #9fb4d8) 16%, rgba(9, 13, 24, 0.96)),
    rgba(9, 13, 24, 0.96));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55),
              0 0 22px color-mix(in srgb, var(--tc, #9fb4d8) 22%, transparent);
  opacity: 0;
  transform: scale(0.94);
  transform-origin: center right;
  transition: opacity 0.13s ease, transform 0.13s ease;
  pointer-events: none;   /* die Karte darf den Zeiger nie abfangen */
}
.trophy-peek.is-on { opacity: 1; transform: scale(1); }
.trophy-peek i {
  display: block;
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--tg, #fff) 45%, transparent));
}
.trophy-peek i svg { width: 100%; height: 100%; }
.trophy-peek .tp-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trophy-peek small {
  color: var(--muted, #9fb0cc);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.trophy-peek b {
  color: var(--tg, #fff);
  font-size: 1rem;
  line-height: 1.2;
  text-shadow: 0 0 12px color-mix(in srgb, var(--tc, #9fb4d8) 45%, transparent);
}
.trophy-peek em { color: #c8d6ef; font-size: 0.78rem; font-style: normal; }

/* Der Chip selbst hebt sich beim Zeigen leicht an – die Zeile soll sagen,
   dass da mehr zu sehen ist. */
.score-list li .pl-season i { transition: transform 0.14s ease; }
.score-list li .pl-season:hover i { transform: scale(1.14); }

/* Wer Bewegung abgestellt hat, bekommt die Karte ohne Ein- und Aufblenden.
   Die SMIL-Animation im Emblem selbst laesst sich hier nicht abschalten –
   dafuer zeigt die Liste weiterhin das ruhige, kleine Emblem. */
@media (prefers-reduced-motion: reduce) {
  .trophy-peek { transition: none; transform: none; }
  .trophy-peek.is-on { transform: none; }
  .score-list li .pl-season:hover i { transform: none; }
}

/* Schmale Anzeigen: die Score-Spalte darf schrumpfen, das Emblem bleibt. */
@media (max-width: 560px) {
  .score-list li .pscore.has-season { grid-template-columns: 28px 1fr; min-width: 112px; gap: 6px; }
  .score-list li .pl-season em { display: none; }
}

.score-list li.me {
  background: rgba(255, 211, 91, 0.16);
  outline: 1px solid rgba(255, 211, 91, 0.5);
}

.score-list .loading,
.score-list .empty {
  display: block;
  text-align: center;
  color: var(--muted);
  padding: 12px;
}

/* ====================================================== Startmenü (Hauptbildschirm) */
#menu.menu-screen {
  display: block;               /* eigener Scroll-Container statt Flex-Zentrierung */
  overflow-y: auto;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: #0a0c16;
  background-image:
    radial-gradient(125% 92% at 50% 36%, rgba(6, 8, 18, 0) 42%, rgba(6, 8, 18, 0.62) 100%),
    linear-gradient(180deg, rgba(6, 8, 18, 0.5) 0%, rgba(6, 8, 18, 0.12) 30%, rgba(6, 8, 18, 0.72) 100%),
    url("assets/bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.menu-content {
  position: relative;
  z-index: 1;
  min-height: 100%;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(18px, 3.2vh, 44px) clamp(16px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2.6vh, 28px);
  animation: menuFade 0.5s ease both;
}
@keyframes menuFade { from { opacity: 0; transform: translateY(10px); } }

.menu-header { text-align: center; }
.menu-header .game-title {
  font-size: clamp(2.4rem, 6.2vw, 4.1rem);
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.05;
  filter: drop-shadow(0 3px 12px rgba(120, 160, 255, 0.5)) drop-shadow(0 0 30px rgba(160, 110, 255, 0.4));
}
.menu-header .subtitle {
  margin: 8px 0 0;
  font-size: clamp(0.82rem, 1.7vw, 1.02rem);
  color: #c7cdf0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* Nachricht des Tages aus dem Admin-Panel. Der Text wird ausschließlich per
   textContent gesetzt; diese Karte bleibt bei fehlender/abgeschalteter MOTD weg. */
.motd-notice {
  max-width: 660px;
  margin: 14px auto 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 211, 91, 0.48);
  border-radius: 12px;
  color: #fff3c5;
  background: rgba(73, 52, 16, 0.48);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.24);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: left;
}

.menu-cols {
  display: flex;
  gap: clamp(12px, 2vw, 22px);
  align-items: stretch;
}
.play-card { flex: 1.4 1 0; min-width: 0; }
.board-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }

.menu-card {
  background: rgba(11, 14, 26, 0.72);
  border: 1px solid rgba(146, 132, 255, 0.38);
  border-radius: 18px;
  padding: clamp(16px, 2.4vw, 26px);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(180, 180, 255, 0.09);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.play-card .name-box,
.play-card .hero-select { margin-bottom: 16px; }

.btn-play {
  font-size: 1.32rem;
  padding: 16px;
  margin-top: 4px;
  color: #fff;
  background: linear-gradient(95deg, #7b5cff 0%, #c85cff 55%, #ff6bd0 100%);
  box-shadow: 0 10px 28px rgba(150, 90, 255, 0.5);
  letter-spacing: 0.5px;
  animation: playGlow 2.6s ease-in-out infinite;
}
.btn-play:hover { filter: brightness(1.08); box-shadow: 0 14px 36px rgba(185, 95, 255, 0.7); }
@keyframes playGlow {
  50% { box-shadow: 0 10px 34px rgba(200, 110, 255, 0.72); }
}

.menu-secondary { display: flex; gap: 10px; margin-top: 12px; }
.menu-secondary .btn-ghost {
  flex: 1;
  width: auto;
  margin-top: 0;
  background: rgba(10, 14, 28, 0.5);
}

.board-card .board-title {
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
/* Die Liste bekommt den freien Platz der Karte: flex:1 fuellt nach unten, der
   Deckel greift erst, wenn wirklich kein Platz mehr da ist. */
/* Die Rangkarte ist aus der Bestenliste ausgezogen (sie sitzt jetzt im
   Kopfzeilen-Knopf) – der frei gewordene Platz gehoert der Liste. */
.board-card .score-list { flex: 1 1 auto; min-height: 180px; max-height: min(76vh, 760px); }
.board-card .score-list li:nth-child(odd) { background: rgba(120, 170, 255, 0.09); }

.menu-controls {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 18px;
  margin: 0;
  font-size: 0.82rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}
.menu-controls span { white-space: nowrap; }

.go-actions { display: flex; gap: 10px; margin-top: 14px; }
.go-actions button { flex: 1; margin-top: 0; }

@media (max-width: 860px) {
  .menu-content { justify-content: flex-start; }
  .menu-cols { flex-direction: column; }
  .board-card .score-list { max-height: 50vh; }
}

/* ------------------------------------------------------ HUD */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Minimal-HUD (Taste X): alles ausblenden außer der Lebensanzeige */
#hud.hud-min .hud-top,
#hud.hud-min .hud-ghost,
#hud.hud-min .hud-watermark,
#hud.hud-min .xp-row,
#hud.hud-min .weapon-row,
#hud.hud-min .synergy-row,
#hud.hud-min .stats-panel,
#hud.hud-min .ach-nudge {
  display: none !important;
}

/* ---------- „Fast geschafft": Erfolgs-Hinweis im Spiel ----------
   Oben links, wo im Kampf nichts liegt. Bewusst schmal und ohne Klickflaeche:
   der Hinweis informiert und motiviert, er soll den Blick nicht wegziehen. */
.hud-left-stack {
  position: absolute;
  top: 62px;
  left: 14px;
  z-index: 14;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  /* Nach unten begrenzt, damit der Stapel nicht in Synergien-Dock und
     Minimap laeuft. Das DPS-Meter darf schrumpfen (min-height:0). */
  max-height: calc(100% - 260px);
  pointer-events: none;
}
.ach-nudge {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 6px;
  width: min(238px, calc(100vw - 32px));
  pointer-events: none;
}
.ach-nudge-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 213, 104, 0.34);
  border-radius: 11px;
  background: linear-gradient(150deg, rgba(46, 34, 12, 0.9), rgba(9, 12, 25, 0.9));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 16px rgba(255, 211, 91, 0.08);
  backdrop-filter: blur(4px);
  animation: achNudgeIn 0.4s cubic-bezier(0.16, 1.2, 0.3, 1) both;
}
.ach-nudge-row .anx-ic { font-size: 1.1rem; line-height: 1.2; flex: 0 0 auto; }
.ach-nudge-row .anx-body { min-width: 0; flex: 1; }
.ach-nudge-row .anx-top { display: flex; align-items: baseline; gap: 6px; }
.ach-nudge-row .anx-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #f1ecdf; font-size: 0.74rem; font-weight: 800;
}
.ach-nudge-row .anx-left { color: var(--gold); font-size: 0.71rem; font-weight: 900; white-space: nowrap; }
.ach-nudge-row .anx-bar {
  height: 4px; margin: 4px 0 3px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); overflow: hidden;
}
.ach-nudge-row .anx-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ffb545, #ffe27a);
  box-shadow: 0 0 8px rgba(255, 211, 91, 0.5);
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ach-nudge-row .anx-goal { color: #a79f92; font-size: 0.71rem; line-height: 1.3; }
.ach-nudge-row .anx-reward { margin-top: 3px; color: #ffe17b; font-size: 0.71rem; font-weight: 800; }
@keyframes achNudgeIn {
  from { opacity: 0; transform: translateX(-14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
  .hud-left-stack { top: 54px; left: 10px; max-height: calc(100% - 300px); }
  .ach-nudge { width: min(190px, calc(100vw - 20px)); }
  .ach-nudge-row .anx-goal { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ach-nudge-row { animation: none; }
  .ach-nudge-row .anx-bar span { transition: none; }
}

.hud-top {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 26px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.hud-timer {
  font-size: 2.1rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

.hud-score,
.hud-kills,
.hud-wave {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  padding-top: 6px;
}

.hud-score span:last-child,
.hud-kills span:last-child,
.hud-wave span:last-child {
  font-size: 1.4rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.hud-wave span:last-child {
  color: var(--accent2);
}

.hud-score .lbl,
.hud-kills .lbl,
.lbl {
  font-size: 0.71rem;
  letter-spacing: 1.5px;
  color: var(--muted);
}

.hud-score span:last-child { color: var(--xp); }
.hud-kills span:last-child { color: var(--gold); }

.hud-multiplayer-score {
  min-width: 74px;
  margin-top: -1px;
  padding: 6px 9px 5px;
  border: 1px solid rgba(190, 116, 255, 0.34);
  border-radius: 10px;
  background: rgba(28, 14, 57, 0.62);
  box-shadow: 0 5px 18px rgba(17, 7, 38, 0.28);
}

.hud-multiplayer-score .lbl { color: #d6adff; }
.hud-multiplayer-score #mpScoreValue { color: #ff7bd1; }

/* ===== Team-Leiste im Run: wer lebt, wer waehlt gerade, wie laeuft die Verbindung =====
   Links unten ueber der Minimap, bewusst schmal und nicht anklickbar. */
.mp-team {
  position: absolute;
  top: 96px;
  left: 14px;
  z-index: 4;
  width: 178px;
  padding: 8px 9px 7px;
  border: 1px solid rgba(190, 116, 255, 0.28);
  border-radius: 11px;
  background: rgba(10, 8, 24, 0.72);
  box-shadow: 0 6px 20px rgba(6, 4, 18, 0.45);
  pointer-events: none;
  font-size: 0.71rem;
}

.mp-team.hidden { display: none; }

.mp-team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.mp-team-title {
  color: #d6adff;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mp-team-link {
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #8fa0bd;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.mp-team-link[data-mode="p2p"] { color: #7ee879; background: rgba(60, 160, 80, 0.16); }
.mp-team-link[data-mode="mixed"] { color: #ffd35b; background: rgba(170, 130, 40, 0.16); }
.mp-team-link[data-mode="relay"] { color: #ff9ab4; background: rgba(160, 50, 80, 0.16); }

.mp-team-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }

.mp-team-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 6px;
  align-items: center;
}

.mp-team-name {
  overflow: hidden;
  color: #eef2ff;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-team-lvl { color: #9fb2d0; font-size: 0.7rem; font-weight: 800; }

/* Rang im Team-Panel: Wappen links neben dem Namen, Titel als eigene Zeile
   darunter – im Getuemmel liest man den Titel, nicht das Symbol. */
.mp-team-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.mp-team-rank { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; }
.mp-team-rank .rank-svg { width: 100%; height: 100%; }
.mp-team-title-rank {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--rk, #9fb2d0);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Rang in der Lobby-Aufstellung */
.mp-player-rank {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  color: var(--rk, #9fb2d0);
  font-size: 0.71rem;
  font-weight: 800;
}
.mp-player-rank .rank-svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Der Titel darf den Zustand rechts nie herausdruecken – lieber gekuerzt als
   umgebrochen (der Slot ist eine Zeile hoch). */
.mp-player-rank b { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Eigener Rang im HUD. Er hat keine eigene Pille mehr: der Titel steht als
   schmale Zeile ueber der Lebensleiste, das Wappen umkraenzt das Stufen-
   Medaillon (.vl-crest) und der Fortschritt laeuft als Linie an der Unterkante
   der Vitals-Karte (.vitals::after). Siehe „Vitals unten mittig". */
.vitals-rank {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-left: 2px;
  min-width: 0;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}
.vitals-rank.hidden { display: none; }
.vitals-rank .hr-lvl {
  flex: none;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--rk, #9aa3b8);
  text-transform: uppercase;
}
/* Der Titel ist der Festtagsgast: dauerhaft steht dort nur die Stufe, beim
   Aufstieg faehrt der Name fuer ein paar Sekunden aus und wieder ein. Ein HUD,
   das jede Sekunde „Gravewarden" ruft, sagt beim Aufstieg nichts mehr. */
.vitals-rank .hr-name {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #dfe6f5;
  transition: max-width 0.5s ease, opacity 0.35s ease;
}
.vitals-rank.show-title .hr-name { max-width: 16ch; opacity: 1; }
.vitals-rank .rk-prestige { margin-left: 4px; }
#hud.hud-min .vitals-rank { display: none; }

/* Aufstieg: Medaillon und Rangzeile blitzen kurz auf. */
.vitals-rank.is-up .hr-lvl { animation: hudRankUp 1s ease-out; }
.vitals-level.is-up { animation: hudRankUp 1s ease-out; }
@keyframes hudRankUp {
  0%   { transform: scale(1);    filter: brightness(1); }
  18%  { transform: scale(1.14); filter: brightness(2.2) drop-shadow(0 0 12px var(--rk-glow, #fff)); }
  100% { transform: scale(1);    filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .vitals-rank.is-up .hr-lvl,
  .vitals-level.is-up { animation-duration: 0.01ms; }
  .vitals-rank .hr-name { transition-duration: 0.01ms; }
}

/* Der alte, kleine Aufblitzer beim Rangaufstieg ist entfallen - an seiner
   Stelle steht die Zeremonie weiter unten (.rank-cer). Geblieben ist nur
   das kurze Aufleuchten am Stufen-Medaillon (.vitals-level.is-up). */

/* ------------------------------------------------------- Rangaufstieg-Zeremonie
   Vier Sekunden, in denen nichts anderes zaehlt. Solo steht die Welt dabei
   still (game.js: rankCeremonyFreeze) - deshalb darf der Schleier hier dicht
   sein. Im Koop laeuft das Gefecht weiter, dort greift `.is-live`: derselbe
   Ablauf, aber transparent genug, um weiter ausweichen zu koennen.

   Der Ablauf steckt komplett in animation-delay. Keine Zwischenschritte per
   JavaScript: die Zeremonie soll auch dann sauber laufen, wenn der Hauptthread
   gerade an einer dichten Welle kaut. */
.rank-cer {
  position: fixed; inset: 0; z-index: 78; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  --rk: #ffd76a; --rk-glow: #fff3c4; --rk-old: #7c8394;
  animation: rcIn 0.28s ease-out both;
}
.rank-cer.is-out { animation: rcOut 0.34s ease-in forwards; }

.rank-cer .rc-veil {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 46%, rgba(6, 8, 16, 0.74) 0%, rgba(3, 4, 10, 0.94) 58%, rgba(1, 2, 6, 0.99) 100%);
  animation: rcVeil 0.5s ease-out both;
}
.rank-cer.is-live .rc-veil {
  background: radial-gradient(ellipse at 50% 46%, rgba(6, 8, 16, 0.16) 0%, rgba(3, 4, 10, 0.6) 62%, rgba(1, 2, 6, 0.82) 100%);
}

/* Lichtstrahlen hinter dem neuen Wappen. Sie starten erst mit dem Einschlag -
   vorher gehoert das Bild noch dem alten Rang. */
.rank-cer .rc-rays {
  position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax;
  margin: -75vmax 0 0 -75vmax; opacity: 0;
  background: conic-gradient(from 0deg,
    transparent 0deg, var(--rk-glow) 2deg, transparent 6deg,
    transparent 24deg, var(--rk-glow) 26deg, transparent 31deg,
    transparent 52deg, var(--rk-glow) 54deg, transparent 58deg,
    transparent 80deg, var(--rk-glow) 82deg, transparent 87deg,
    transparent 112deg, var(--rk-glow) 114deg, transparent 119deg,
    transparent 148deg, var(--rk-glow) 150deg, transparent 155deg,
    transparent 186deg, var(--rk-glow) 188deg, transparent 193deg,
    transparent 224deg, var(--rk-glow) 226deg, transparent 231deg,
    transparent 262deg, var(--rk-glow) 264deg, transparent 269deg,
    transparent 300deg, var(--rk-glow) 302deg, transparent 307deg,
    transparent 336deg, var(--rk-glow) 338deg, transparent 343deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 3%, rgba(0, 0, 0, 0.3) 13%, transparent 30%);
  mask-image: radial-gradient(circle, #000 3%, rgba(0, 0, 0, 0.3) 13%, transparent 30%);
  animation: rcRays 2.6s linear 1.2s both;
}
.rank-cer.is-live .rc-rays { animation-name: rcRaysLive; }

.rank-cer .rc-stage {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center; padding: 0 16px; max-width: min(96vw, 760px);
}

.rank-cer .rc-kicker {
  font-size: 0.78rem; font-weight: 900; letter-spacing: 0.34em; text-transform: uppercase;
  color: #cfd7e8; text-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
  animation: rcKicker 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.rank-cer.is-prestige .rc-kicker { color: var(--rk-glow); }

.rank-cer .rc-duo {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 5vw, 54px); margin: 16px 0 10px;
}
.rank-cer .rc-side {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 124px;
}
.rank-cer .rc-ic { display: block; line-height: 0; }
.rank-cer .rc-lv {
  font-size: 0.7rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase;
  color: #99a1b3;
}
.rank-cer .rc-nm { font-size: 0.95rem; font-weight: 800; color: #e6ecf8; }

/* Das ALTE Wappen: kommt zuerst, bleibt kurz stehen, weicht beim Einschlag
   zurueck und entsaettigt - man soll sehen, dass man es hinter sich laesst. */
.rank-cer .rc-old { animation: rcOld 4s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.rank-cer .rc-old .rc-ic { filter: drop-shadow(0 0 10px var(--rk-old)); }

/* Der Pfeil ist drei Federn, die nacheinander anspringen: eine Bewegung nach
   rechts, ohne dass ein Bild dafuer noetig waere. */
.rank-cer .rc-arrow { display: flex; gap: 4px; align-items: center; }
.rank-cer .rc-arrow span {
  width: 9px; height: 9px; opacity: 0;
  border-right: 2.5px solid var(--rk); border-top: 2.5px solid var(--rk);
  transform: rotate(45deg);
  animation: rcFeather 1.4s ease-out both;
}
.rank-cer .rc-arrow span:nth-child(1) { animation-delay: 0.72s; }
.rank-cer .rc-arrow span:nth-child(2) { animation-delay: 0.84s; }
.rank-cer .rc-arrow span:nth-child(3) { animation-delay: 0.96s; }

.rank-cer .rc-newwrap { position: relative; display: flex; align-items: center; justify-content: center; }
.rank-cer .rc-new { animation: rcNew 4s cubic-bezier(0.14, 1.4, 0.3, 1) 1.2s both; }
.rank-cer .rc-new .rc-ic { filter: drop-shadow(0 0 26px var(--rk-glow)); }
.rank-cer .rc-new .rc-lv { color: var(--rk); }
.rank-cer .rc-new .rc-nm { color: #ffffff; text-shadow: 0 0 16px var(--rk-glow); }

/* Zwei Ringe, leicht versetzt: der Einschlag des neuen Wappens. */
.rank-cer .rc-burst {
  position: absolute; left: 50%; top: 46px; width: 110px; height: 110px;
  margin: -55px 0 0 -55px; border-radius: 50%;
  border: 2.5px solid var(--rk-glow); opacity: 0;
  animation: rcBurst 1.1s cubic-bezier(0.1, 0.8, 0.3, 1) 1.2s both;
}
.rank-cer .rc-burst2 { border-width: 1.5px; animation-delay: 1.34s; animation-duration: 1.3s; }

.rank-cer .rc-title {
  font-size: clamp(1.7rem, 6vw, 2.9rem); font-weight: 900; letter-spacing: 0.01em;
  color: #ffffff; text-shadow: 0 0 26px var(--rk-glow), 0 2px 0 rgba(0, 0, 0, 0.5);
  animation: rcTitle 4s cubic-bezier(0.16, 1, 0.3, 1) 1.32s both;
}
.rank-cer .rc-title em { font-style: normal; color: var(--rk); }
.rank-cer .rc-sub {
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.06em; color: #b9c2d4;
  animation: rcTitle 4s cubic-bezier(0.16, 1, 0.3, 1) 1.46s both;
}
.rank-cer .rc-hint {
  margin-top: 12px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #6d7588; animation: rcHint 4s ease-out 2.1s both;
}

@keyframes rcIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rcOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes rcVeil { from { opacity: 0; } to { opacity: 1; } }
@keyframes rcKicker {
  0% { opacity: 0; transform: translateY(-10px); letter-spacing: 0.6em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 0.34em; }
}
@keyframes rcOld {
  0%   { opacity: 0; transform: translateX(24px) scale(0.86); }
  9%   { opacity: 1; transform: translateX(0) scale(1); }
  28%  { opacity: 1; transform: translateX(0) scale(1); }
  33%  { opacity: 0.85; transform: translateX(-6px) scale(0.97); }
  46%  { opacity: 0.62; transform: translateX(-10px) scale(0.9); filter: grayscale(0.75) brightness(0.9); }
  88%  { opacity: 0.62; transform: translateX(-10px) scale(0.9); filter: grayscale(0.75) brightness(0.9); }
  100% { opacity: 0; transform: translateX(-10px) scale(0.88); filter: grayscale(0.75) brightness(0.9); }
}
@keyframes rcNew {
  0%   { opacity: 0; transform: scale(2.6) rotate(-8deg); }
  6%   { opacity: 1; transform: scale(0.94) rotate(0deg); }
  10%  { transform: scale(1.08); }
  15%  { transform: scale(1); }
  88%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes rcBurst {
  0%   { opacity: 0; transform: scale(0.25); }
  12%  { opacity: 0.95; }
  100% { opacity: 0; transform: scale(3.4); }
}
@keyframes rcFeather {
  0%   { opacity: 0; transform: translateX(-8px) rotate(45deg); }
  22%  { opacity: 1; transform: translateX(0) rotate(45deg); }
  60%  { opacity: 1; }
  100% { opacity: 0.25; transform: translateX(4px) rotate(45deg); }
}
@keyframes rcTitle {
  0%   { opacity: 0; transform: translateY(14px) scale(0.96); }
  8%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rcHint { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; } }
@keyframes rcRays {
  0%   { opacity: 0; transform: rotate(0deg) scale(0.6); }
  10%  { opacity: 0.5; }
  100% { opacity: 0.20; transform: rotate(34deg) scale(1); }
}
@keyframes rcRaysLive {
  0%   { opacity: 0; transform: rotate(0deg) scale(0.6); }
  10%  { opacity: 0.24; }
  100% { opacity: 0.07; transform: rotate(34deg) scale(1); }
}

/* Auf schmalen Bildschirmen stehen alter und neuer Rang enger und kleiner -
   untereinander waere der Uebergang nicht mehr als solcher zu lesen. */
@media (max-width: 560px) {
  .rank-cer .rc-side { min-width: 76px; }
  .rank-cer .rc-ic svg { width: 70px; height: 70px; }
  .rank-cer .rc-burst { width: 84px; height: 84px; margin: -42px 0 0 -42px; top: 35px; }
  .rank-cer .rc-nm { font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rank-cer, .rank-cer * { animation-duration: 0.01ms !important; animation-delay: 0s !important; }
  .rank-cer .rc-old { opacity: 0.34; }
  .rank-cer .rc-rays { opacity: 0.12; }
}

.mp-team-bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.mp-team-bar i { display: block; height: 100%; border-radius: 999px; background: #7ee879; }

.mp-team-row.self .mp-team-name { color: #ffe36b; }
.mp-team-row.picking .mp-team-name::after { content: ' ⬆'; color: #ffe36b; }
.mp-team-row.down { opacity: 0.45; }
.mp-team-row.down .mp-team-bar i { background: #6d7488; }
.mp-team-row.offline .mp-team-name { color: #8d93a5; font-style: italic; }

.mp-team-note {
  margin: 7px 0 0;
  color: #ffb3c6;
  font-size: 0.7rem;
  line-height: 1.35;
}

.mp-team-note.hidden { display: none; }

@media (max-width: 720px) {
  .mp-team { top: 84px; width: 138px; padding: 6px 7px 5px; font-size: 0.7rem; }
  .mp-team-note { display: none; }
}

.hud-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 520px;
  /* margin-top:auto haelt die Leisten am unteren Rand – unabhaengig davon,
     wie viele Elemente sonst noch im #hud-Flexcontainer liegen. */
  margin: auto auto 0;
  width: 100%;
}

.bar {
  position: relative;
  height: 18px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
}

.bar-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  transform-origin: left;
  transition: width 0.12s linear;
  border-radius: 20px;
}

.bar.hp .bar-fill {
  background: linear-gradient(90deg, #ff3b5c, #ff8087);
}

/* Heldenfähigkeit: der eigentliche Grund, einen Helden zu wählen.
   Steht als eigener, farbig abgesetzter Block über der Kurzbeschreibung. */
.hero-power {
  margin: 8px 0 8px;
  padding: 8px 11px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--hero-color, #8ab4ff) 45%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hero-color, #8ab4ff) 16%, transparent),
    rgba(8, 10, 20, 0.35));
}
/* Zweite Fähigkeit: gleicher Bau, ruhigerer Rahmen. Zwei gleich laute Kästen
   übereinander lesen sich als Wand – der zweite tritt deshalb einen Schritt
   zurück, ohne dadurch nebensächlich zu wirken. */
.hero-power.is-second {
  margin-top: -2px;
  border-color: color-mix(in srgb, var(--hero-color, #8ab4ff) 26%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hero-color, #8ab4ff) 8%, transparent),
    rgba(8, 10, 20, 0.35));
}
/* Fähigkeit des angelegten Skins. Sie gehört nicht dem Helden, sondern der
   Variante – deshalb violett abgesetzt statt in der Heldenfarbe. */
.hero-power.is-trait {
  margin-top: -2px;
  border-color: rgba(200, 168, 255, 0.4);
  background: linear-gradient(180deg, rgba(200, 168, 255, 0.12), rgba(8, 10, 20, 0.35));
}
.hero-power.is-trait .hp-label { color: #d9c2ff; opacity: 0.85; }
.hero-power .hp-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.hero-power .hp-label {
  font-size: 0.71rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.7;
}
.hero-power .hp-name {
  font-size: 0.98rem;
  font-weight: 800;
}
/* Voller Text: der Block ist selbst schon hinter dem Aufklapp-Knopf in
   .hero-info-top versteckt, ein zweites „Mehr lesen" waere ein Klick zu viel. */
.hero-power .hp-desc {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  opacity: 0.92;
}

/* Schadensrest: liegt hinter der Fuellung, bleibt nach einem Treffer kurz
   stehen und laeuft dann nach. Macht die Wucht eines Treffers ablesbar. */
.bar-chip {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, #ffe9a8, #fff6dc);
  opacity: 0;
  transition: opacity 0.18s linear;
  pointer-events: none;
}

/* Lebensgefahr: ab einem Drittel der LP schlaegt die Leiste rot Alarm
   (passend zur roten Warn-Vignette auf dem Spielfeld). */
.bar.hp.low {
  border-color: rgba(255, 59, 92, 0.85);
  animation: hpDangerPulse 0.9s ease-in-out infinite;
}

.bar.hp.low .bar-fill {
  background: linear-gradient(90deg, #ff0f33, #ff6b7a);
}

.bar.hp.low .bar-text {
  color: #ffd7dd;
}

@keyframes hpDangerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 40, 70, 0); }
  50% { box-shadow: 0 0 14px 3px rgba(255, 40, 70, 0.55); }
}

.bar.xp {
  height: 12px;
  flex: 1;
}

.bar.xp .bar-fill {
  background: linear-gradient(90deg, #29b6ff, #7ee8ff);
}

.bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: bold;
  text-shadow: 0 1px 3px #000;
  font-variant-numeric: tabular-nums;
}

.xp-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lvl-badge {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--gold);
  white-space: nowrap;
  text-shadow: 0 2px 4px #000;
}

.mute-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(10, 14, 28, 0.7);
  border: 1px solid var(--panel-border);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s, border-color 0.15s;
}
.mute-btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

/* ===== Lautstärke-Panel (Klick auf den Ton-Knopf im HUD) ===== */
.audio-panel {
  position: absolute;
  top: 60px;
  right: 14px;
  z-index: 6;
  width: 214px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(10, 14, 28, 0.94);
  border: 1px solid var(--panel-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
.audio-panel.hidden { display: none; }
.audio-mute {
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.audio-mute:hover { border-color: var(--accent); }
.audio-mute.on { background: rgba(255, 110, 110, 0.18); border-color: rgba(255, 110, 110, 0.55); }
.audio-row {
  display: grid;
  grid-template-columns: auto 1fr 2.1em;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text);
}
.audio-row b { font-variant-numeric: tabular-nums; text-align: right; color: var(--muted, #8b93b8); font-weight: 600; }
.audio-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
}
.audio-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}
.audio-row input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

.weapon-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 4px;
}

.weapon-chip {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(10, 14, 28, 0.7);
  border: 1px solid var(--panel-border);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

.weapon-chip img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(120, 180, 255, 0.6));
}

.weapon-chip .wlvl {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: var(--accent2);
  color: #fff;
  font-size: 0.71rem;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ------------------------------------------------------ Synergien (HUD) */
.synergy-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 2px;
  margin-top: 2px;
}

.syn-chip {
  --sc: #ffd35b;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: bold;
  color: var(--sc);
  background: rgba(10, 14, 28, 0.72);
  border: 1px solid color-mix(in srgb, var(--sc) 55%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sc) 35%, transparent), 0 2px 6px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 3px #000;
  animation: synPop 0.35s cubic-bezier(0.2, 1.4, 0.5, 1);
}

.syn-chip .syn-ic { font-size: 0.95rem; filter: drop-shadow(0 0 4px var(--sc)); }
.syn-chip .syn-t {
  font-size: 0.71rem;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--sc);
  color: #06101f;
}

@keyframes synPop {
  from { transform: scale(0.6); opacity: 0; }
}

/* ------------------------------------------------------ Statistik-Panel */
/* Oben rechts stehen nur noch vier Knoepfe: Ton, Anzeige, Grafik, Feedback.
   Alles Ein-/Ausblendbare liegt im Anzeige-Menue darunter. */
.hud-view-btn {
  right: 64px; /* links neben dem Mute-Button */
}
.gfx-btn {
  right: 116px; /* links neben dem Anzeige-Knopf */
}
.fb-toggle {
  right: 168px; /* links neben dem Grafik-Knopf */
}
.hero-btn {
  right: 220px; /* links neben dem Feedback-Knopf */
}

/* ===== Helden-Nachschlagewerk (Knopf 🦸 / Taste H) =====
   Baut auf denselben Bausteinen wie die Heldenkarte im Menue (.hero-power),
   die global definiert sind. Neu ist nur der Rahmen drumherum und die
   Werte-Zeile am Fuss, die es im Menue nicht geben kann. */
.hero-codex-panel { max-width: 620px; text-align: left; }
.hero-codex-body { --hero-color: #8ab4ff; }
.hero-codex-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.hero-codex-head .hck-name { font-size: 1.25rem; font-weight: 900; }
.hero-codex-head .hck-tag {
  padding: 1px 8px;
  border-radius: 999px;
  color: #0b0e18;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-codex-head .hck-style {
  color: #8f8aa1;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.hero-codex-lead { margin: 0 0 6px; color: #c9c4dc; font-size: 0.83rem; line-height: 1.5; }
.hero-codex-body .hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
  margin-top: 9px;
}
.hero-codex-body .hero-stat { min-width: 0; padding-top: 6px; border-top: 1px solid rgba(178, 166, 222, 0.13); }
.hero-codex-body .hero-stat span { display: block; color: #6f6b80; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.hero-codex-body .hero-stat strong { display: block; overflow: hidden; margin-top: 2px; color: #e8e5f1; font-size: 0.82rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

/* Der laufende Stand. Bewusst eine schmale Zeile: die grosse Aufschluesselung
   steht im Statistik-Panel, hier geht es nur um „so steht er gerade da". */
.hero-codex-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(178, 166, 222, 0.18);
  font-size: 0.82rem;
}
.hero-codex-now .hcn-label { color: #6f6b80; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-codex-now .hcn-val { color: #e8e5f1; font-weight: 700; font-variant-numeric: tabular-nums; }

.hud-view-panel {
  position: absolute;
  top: 60px;
  right: 60px;
  z-index: 30;
  width: 232px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: auto;
  border: 1px solid var(--panel-border);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(16, 18, 34, 0.95), rgba(8, 10, 22, 0.96));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}
.hud-view-panel.hidden { display: none !important; }
.hvp-head {
  padding: 3px 6px 5px;
  color: #8f95ad;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.16em;
}
.hvp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: #c9cee0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.hvp-row:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.hvp-row i { flex: 0 0 18px; font-style: normal; font-size: 0.95rem; text-align: center; }
.hvp-row > span { flex: 1; min-width: 0; }
.hvp-key {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  color: #7d849b;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
}
/* Schalter: aus = grauer Punkt links, an = goldener Punkt rechts. */
.hvp-sw {
  position: relative;
  flex: 0 0 30px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.15s;
}
.hvp-sw::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #7f869c;
  transition: transform 0.15s, background 0.15s;
}
.hvp-row.active { color: #fff; }
.hvp-row.active .hvp-sw { background: rgba(255, 211, 91, 0.32); }
.hvp-row.active .hvp-sw::after {
  transform: translateX(14px);
  background: var(--gold);
  box-shadow: 0 0 8px rgba(255, 211, 91, 0.6);
}
.hvp-sep { height: 1px; margin: 4px 6px; background: rgba(255, 255, 255, 0.1); }
.hvp-link .hvp-go { color: #7d849b; font-style: normal; font-weight: 900; }
.hvp-link:hover .hvp-go { color: var(--gold); }

/* ------------------------------------------------------ Grafik-Menue
   Gleiche Bauform wie das Anzeige-Menue, aber eine Auswahl aus dreien statt
   einzelner Schalter: deshalb ein Punkt (Radio) rechts, kein Kippschalter. */
.gfx-panel { width: 258px; }
.gfx-opt { align-items: flex-start; }
.gfx-opt i { margin-top: 1px; }
.gfx-opt > span { display: flex; flex-direction: column; gap: 1px; }
.gfx-opt strong { font-size: 0.78rem; font-weight: 900; }
.gfx-opt small {
  color: #8f95ad;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.25;
}
.gfx-dot {
  flex: 0 0 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.gfx-opt.active { color: #fff; background: rgba(255, 211, 91, 0.09); }
.gfx-opt.active small { color: #b6bcd0; }
.gfx-opt.active .gfx-dot {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: 0 0 8px rgba(255, 211, 91, 0.6);
}
.gfx-foot {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 2px 8px 4px;
  color: #7d849b;
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.3;
}
.gfx-foot > span { flex: 1; min-width: 0; }
.gfx-fps {
  flex: 0 0 auto;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  color: #c9cee0;
}

/* Vom Anzeige-Menue ausgeblendete HUD-Inseln. Eigene Klasse, damit die
   normale Fuell-Logik (leeres Dock, kein Erfolg in Reichweite) weiter
   ihre eigenen Klassen setzen darf. */
.hud-off { display: none !important; }

.stats-hint {
  position: absolute;
  top: 62px;
  right: 58px;
  z-index: 15;
  display: flex;
  align-items: stretch;
  width: min(310px, calc(100vw - 28px));
  border: 1px solid rgba(255, 211, 91, 0.52);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(54, 38, 15, 0.96), rgba(13, 16, 31, 0.97));
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.58), 0 0 22px rgba(255, 211, 91, 0.12);
  pointer-events: auto;
  animation: statsHintIn 0.42s cubic-bezier(0.16, 1.25, 0.3, 1) both;
}
.stats-hint::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 25px;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(255, 211, 91, 0.52);
  border-left: 1px solid rgba(255, 211, 91, 0.52);
  background: rgba(43, 31, 18, 0.98);
  transform: rotate(45deg);
}
.stats-hint-main {
  display: grid;
  flex: 1;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 9px;
  padding: 10px 8px 10px 11px;
  border: 0;
  color: #f6f0df;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.stats-hint-main strong { display: block; color: #ffe58a; font-size: 0.76rem; }
.stats-hint-main small { display: block; margin-top: 2px; color: #aaa3b5; font-size: 0.72rem; line-height: 1.35; }
.stats-hint-icon { display: grid; width: 32px; aspect-ratio: 1; place-items: center; border-radius: 9px; background: rgba(255, 211, 91, 0.12); font-size: 1.05rem; }
.stats-hint-close { width: 34px; border: 0; border-left: 1px solid rgba(255,255,255,.07); color: #8f8999; background: transparent; cursor: pointer; font-size: 1rem; }
.stats-hint-close:hover { color: #fff; background: rgba(255,255,255,.05); }
#hud.hud-min .stats-hint { display: none !important; }
@keyframes statsHintIn { from { opacity: 0; transform: translateY(-8px) scale(.94); } }

.stats-panel {
  position: absolute;
  top: 92px;
  right: 10px;
  width: min(248px, 46vw);
  max-height: calc(100% - 180px);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background: rgba(10, 14, 28, 0.82);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  overflow: hidden;
  z-index: 12;
  font-size: 0.8rem;
  animation: statsIn 0.22s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.stats-panel.hidden { display: none !important; }

@keyframes statsIn {
  from { opacity: 0; transform: translateX(18px); }
}

.stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(120, 170, 255, 0.18);
  flex: 0 0 auto;
}
.stats-title {
  font-weight: bold;
  letter-spacing: 0.3px;
  color: var(--text);
  text-shadow: 0 1px 3px #000;
}
.stats-close {
  pointer-events: auto;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.stats-close:hover { color: var(--text); background: rgba(120, 170, 255, 0.14); }

.stats-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 5px 8px 8px;
}

.stat-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 9px 4px 3px;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px;
  border-radius: 7px;
  line-height: 1.25;
}
.stat-row:nth-child(even) { background: rgba(120, 170, 255, 0.05); }
.stat-row .st-ic { width: 17px; text-align: center; flex: 0 0 auto; }
.stat-row .st-lbl {
  flex: 1 1 auto;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-row .st-val {
  flex: 0 0 auto;
  font-weight: bold;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-row.buff .st-val { color: #7ee879; }
.stat-row.special .st-lbl { color: #d8c48a; }
.stat-row.special .st-val { color: var(--gold); }

.stats-rank {
  flex: 0 0 auto;
  text-align: center;
  padding: 9px 12px 11px;
  border-top: 1px solid rgba(255, 211, 91, 0.28);
  background: linear-gradient(180deg, rgba(255, 211, 91, 0.05), rgba(255, 211, 91, 0.13));
}
.sr-label {
  display: block;
  font-size: 0.71rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.sr-rank {
  display: inline-block;
  font-size: 1.55rem;
  font-weight: bold;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(255, 200, 80, 0.45);
}
.sr-rank.bump { animation: srBump 0.4s ease; }
@keyframes srBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.sr-sub {
  display: block;
  font-size: 0.73rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stats-rank.rank1 {
  background: linear-gradient(180deg, rgba(255, 211, 91, 0.12), rgba(255, 160, 60, 0.2));
}
.stats-rank.rank1 .sr-rank { color: #ffe58a; }
.stats-rank.offline .sr-rank { color: var(--muted); text-shadow: none; }

@media (max-width: 560px) {
  .stats-panel { top: 84px; font-size: 0.75rem; max-height: calc(100% - 150px); }
  .sr-rank { font-size: 1.3rem; }
}

/* ------------------------------------------------------ Level-Up Karten */
.levelup-panel {
  width: min(1420px, 94vw);
  max-height: 92vh;
  padding: 34px 38px 30px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(111, 76, 220, 0.12), transparent 35%),
    rgba(10, 13, 29, 0.96);
}

.levelup-title {
  margin: 0;
  font-size: 2.25rem;
  color: var(--gold);
  text-shadow:
    0 0 18px rgba(255, 200, 80, 0.28),
    0 2px 12px rgba(255, 200, 80, 0.4);
}

.levelup-sub {
  color: var(--muted);
  margin: 7px 0 28px;
  font-size: 1rem;
}

/* ------------------------------------------------------ Boss-Relikt: Fund -> Öffnung -> Wahl */
#bossReward {
  --boss-red: #ff315f;
  --boss-pink: #ff54c8;
  --boss-violet: #9b66ff;
  --boss-gold: #ffd96a;
  z-index: 44;
  overflow: hidden;
  padding: clamp(10px, 2.5vh, 24px);
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 43, 119, 0.23) 0, rgba(80, 20, 91, 0.32) 30%, transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(12, 7, 28, 0.3), rgba(3, 4, 12, 0.96) 76%);
  backdrop-filter: blur(9px) saturate(1.25);
  -webkit-backdrop-filter: blur(9px) saturate(1.25);
  animation: bossVeilIn 0.5s ease-out both;
}

#bossReward::before,
#bossReward::after {
  content: "";
  position: absolute;
  inset: -35vmax;
  pointer-events: none;
}

#bossReward::before {
  opacity: 0.36;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 12deg, rgba(255, 85, 195, 0.075) 13deg 14deg, transparent 15deg 28deg);
  animation: bossSkyTurn 42s linear infinite;
}

#bossReward::after {
  inset: 0;
  opacity: 0;
  background: #fff3d2;
}

#bossReward.is-opening::after { animation: bossWhiteFlash 1.25s ease-out both; }

.boss-reward-scene {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(780px, 96vw);
  max-height: 96vh;
  text-align: center;
  perspective: 1000px;
  animation: bossSceneArrive 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.boss-reward-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px;
  border: 1px solid rgba(255, 102, 190, 0.52);
  border-radius: 999px;
  color: #ffd8ee;
  background: rgba(58, 10, 43, 0.72);
  box-shadow: 0 0 24px rgba(255, 55, 155, 0.2), inset 0 0 18px rgba(255, 107, 202, 0.08);
  font-size: clamp(0.73rem, 1.4vw, 0.78rem);
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  animation: bossKickerPulse 1.6s ease-in-out infinite;
}

.boss-reward-kicker span { color: var(--boss-gold); text-shadow: 0 0 11px var(--boss-gold); }

.boss-reward-scene h2 {
  margin: 8px 0 0;
  font-size: clamp(1.75rem, 5vw, 3.2rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.035em;
  background: linear-gradient(102deg, #fff6dc 8%, #ffd76f 34%, #ff76c7 59%, #fff3dc 82%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 5px 18px rgba(255, 37, 123, 0.46));
  animation: bossTitleShimmer 2.8s linear infinite;
}

.boss-reward-copy {
  margin: 7px 0 0;
  color: #c8b8d4;
  font-size: clamp(0.8rem, 1.8vw, 0.98rem);
  letter-spacing: 0.03em;
}

.boss-chest-altar {
  position: relative;
  width: min(590px, 92vw);
  height: clamp(285px, 49vh, 440px);
  flex: 0 1 auto;
  margin: -2px 0 -2px;
}

.boss-chest-altar::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 70%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 55, 125, 0.52), rgba(130, 45, 255, 0.14) 46%, transparent 72%);
  filter: blur(14px);
  transform: translateX(-50%);
  animation: bossGroundGlow 1.6s ease-in-out infinite;
}

.boss-ritual {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 49%;
  width: min(72vmin, 650px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ritual-ring,
.ritual-core {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(255, 91, 177, 0.17);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(255, 44, 135, 0.08), inset 0 0 60px rgba(149, 69, 255, 0.06);
}

.ritual-ring::before,
.ritual-ring::after {
  content: "◆";
  position: absolute;
  left: 50%;
  color: rgba(255, 190, 228, 0.48);
  font-size: 14px;
  text-shadow: 0 0 12px currentColor;
}
.ritual-ring::before { top: -9px; }
.ritual-ring::after { bottom: -9px; transform: rotate(180deg); }
.ritual-ring-a { animation: bossRingSpin 18s linear infinite; }
.ritual-ring-b { inset: 20%; border-style: dashed; animation: bossRingSpin 12s linear infinite reverse; }
.ritual-core {
  inset: 31%;
  border: 0;
  background: radial-gradient(circle, rgba(255, 59, 131, 0.28), rgba(137, 67, 255, 0.08) 52%, transparent 70%);
  filter: blur(8px);
  animation: bossCoreBeat 1.35s ease-in-out infinite;
}

.boss-light-rays {
  position: absolute;
  left: 50%;
  top: -2%;
  width: 92%;
  height: 100%;
  opacity: 0.34;
  transform: translateX(-50%);
  background: conic-gradient(from 244deg at 50% 100%, transparent 0 5deg, rgba(255, 84, 177, 0.18) 7deg 13deg, transparent 15deg 23deg, rgba(255, 217, 106, 0.13) 26deg 31deg, transparent 34deg 50deg);
  filter: blur(4px);
  clip-path: polygon(2% 0, 98% 0, 70% 100%, 30% 100%);
  animation: bossRayBreathe 2.4s ease-in-out infinite;
}

.boss-chest-orbit {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 64%;
  aspect-ratio: 1;
  border: 1px dashed rgba(255, 98, 184, 0.38);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(67deg);
  box-shadow: 0 0 26px rgba(255, 63, 155, 0.12);
}
.orbit-one { animation: bossOrbitOne 8s linear infinite; }
.orbit-two {
  width: 48%;
  border-color: rgba(255, 220, 125, 0.35);
  animation: bossOrbitTwo 5.5s linear infinite reverse;
}

.boss-chest-image-wrap {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: clamp(225px, 41vh, 370px);
  height: clamp(270px, 48vh, 445px);
  transform: translateX(-50%);
  transform-origin: 50% 83%;
  animation: bossChestHover 2s ease-in-out infinite;
}

.boss-chest-image {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 22px 22px rgba(0, 0, 0, 0.76))
    drop-shadow(0 0 19px rgba(255, 39, 124, 0.5))
    drop-shadow(0 0 48px rgba(143, 67, 255, 0.28));
}

.boss-chest-image.is-opening { animation: bossChestUnlock 0.52s cubic-bezier(0.36, 0, 0.66, -0.56) both; }
.boss-chest-image.is-open {
  animation: bossChestOpenReveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  filter:
    drop-shadow(0 24px 23px rgba(0, 0, 0, 0.8))
    drop-shadow(0 0 26px rgba(255, 61, 143, 0.88))
    drop-shadow(0 0 78px rgba(255, 215, 105, 0.62));
}

.boss-chest-shadow {
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  bottom: 6%;
  height: 13%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.78);
  filter: blur(12px);
  transform: scaleX(1.1);
}

.boss-chest-aura {
  position: absolute;
  z-index: 1;
  inset: 13% 3% 5%;
  border-radius: 46%;
  background: radial-gradient(circle at 50% 48%, rgba(255, 224, 131, 0.25), rgba(255, 42, 123, 0.24) 35%, rgba(130, 53, 255, 0.08) 62%, transparent 74%);
  filter: blur(18px);
  animation: bossAuraBeat 1.12s ease-in-out infinite;
}

.boss-latch-flare {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 61%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff8c9;
  box-shadow: 0 0 8px #fff, 0 0 18px #ffd767, 0 0 45px #ff386f;
  transform: translate(-50%, -50%);
  animation: bossLatch 0.9s ease-in-out infinite;
}

.boss-reward.is-opening .boss-latch-flare { animation: bossLatchBreak 0.7s ease-out both; }

.boss-spark-field { position: absolute; inset: 5% 6% 9%; pointer-events: none; }
.boss-spark-field span {
  --spark-size: 5px;
  position: absolute;
  left: var(--spark-x);
  top: var(--spark-y);
  width: var(--spark-size);
  height: var(--spark-size);
  opacity: 0;
  background: var(--spark-color, #ffd76a);
  box-shadow: 0 0 8px currentColor, 0 0 18px currentColor;
  transform: rotate(45deg);
  animation: bossSparkFloat var(--spark-speed) ease-in-out var(--spark-delay) infinite;
}

.boss-power-word {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 7;
  width: max-content;
  padding: 5px 13px;
  border-radius: 999px;
  color: rgba(255, 226, 195, 0.76);
  background: rgba(18, 5, 26, 0.7);
  box-shadow: 0 0 18px rgba(255, 64, 157, 0.14);
  transform: translateX(-50%);
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.23em;
}

.boss-chest-open-btn {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  width: min(490px, 90vw);
  min-height: 68px;
  padding: 9px 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 230, 151, 0.7);
  border-radius: 16px;
  color: #fff8df;
  background:
    linear-gradient(115deg, rgba(255, 50, 102, 0.92), rgba(179, 43, 174, 0.95) 52%, rgba(117, 58, 224, 0.95));
  box-shadow: 0 10px 34px rgba(255, 39, 115, 0.32), 0 0 0 1px rgba(255, 126, 188, 0.2), inset 0 1px 0 rgba(255,255,255,0.24);
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
  animation: bossButtonCall 1.35s ease-in-out infinite;
}

.boss-chest-open-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -70% -35%;
  background: linear-gradient(100deg, transparent 36%, rgba(255,255,255,0.34) 47%, rgba(255,255,255,0.06) 55%, transparent 65%);
  transform: translateX(-45%);
  animation: bossButtonSheen 2.3s ease-in-out infinite;
}

.boss-chest-open-btn:hover {
  filter: brightness(1.14) saturate(1.12);
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 16px 45px rgba(255, 39, 115, 0.48), 0 0 30px rgba(255, 207, 109, 0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}
.boss-chest-open-btn:active { transform: translateY(1px) scale(0.985); }
.boss-chest-open-btn:focus-visible { outline: 3px solid #fff1a8; outline-offset: 4px; }
.boss-chest-open-btn:disabled { cursor: default; animation: none; }

.boss-open-icon {
  display: grid;
  width: 35px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 10px;
  color: #4b102d;
  background: linear-gradient(145deg, #fff6bd, #ffbd5d);
  box-shadow: 0 0 16px rgba(255, 222, 112, 0.66);
  font-size: 0.95rem;
}
.boss-open-copy { display: flex; flex-direction: column; min-width: 0; text-align: left; padding-left: 12px; }
.boss-open-copy strong { font-size: 1.08rem; letter-spacing: 0.13em; }
.boss-open-copy small { margin-top: 2px; color: rgba(255,255,255,0.72); font-size: 0.74rem; }
.boss-open-key {
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 7px;
  color: rgba(255,255,255,0.82);
  background: rgba(20, 3, 30, 0.26);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.boss-reward.is-opening .boss-chest-open-btn {
  animation: bossButtonVanish 0.28s ease-in both;
  pointer-events: none;
}

.boss-reward-status {
  min-height: 18px;
  margin: 7px 0 0;
  color: #997f9f;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.boss-reward.is-opening .boss-reward-status { color: #ffe28c; text-shadow: 0 0 12px rgba(255, 217, 106, 0.62); }

.boss-glitter-rain { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.boss-glitter-rain span {
  position: absolute;
  top: -8%;
  left: var(--rain-x);
  width: var(--rain-size);
  height: calc(var(--rain-size) * 1.7);
  opacity: 0;
  border-radius: 50% 0 50% 0;
  background: var(--rain-color);
  box-shadow: 0 0 8px var(--rain-color), 0 0 18px var(--rain-color);
  transform: rotate(45deg);
}
.boss-reward.is-opening .boss-glitter-rain span {
  animation: bossGlitterFall var(--rain-speed) cubic-bezier(0.1, 0.55, 0.5, 1) var(--rain-delay) both;
}

.loot-origin-badge { display: none; }
#levelup.boss-loot {
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 50, 129, 0.19), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(41, 18, 79, 0.58), rgba(5, 7, 14, 0.94));
}
#levelup.boss-loot .levelup-panel {
  border: 1px solid rgba(255, 96, 182, 0.53);
  background:
    linear-gradient(135deg, rgba(255, 59, 139, 0.08), transparent 34%),
    radial-gradient(circle at 50% 0%, rgba(255, 211, 91, 0.13), transparent 30%),
    rgba(10, 8, 25, 0.97);
  box-shadow: 0 24px 80px rgba(0,0,0,0.72), 0 0 55px rgba(255, 50, 139, 0.16), inset 0 1px 0 rgba(255,255,255,0.06);
}
#levelup.boss-loot .loot-origin-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: -18px auto 8px;
  padding: 5px 12px 5px 5px;
  border: 1px solid rgba(255, 203, 111, 0.42);
  border-radius: 999px;
  color: #ffe8ba;
  background: rgba(51, 13, 48, 0.82);
  box-shadow: 0 0 22px rgba(255, 65, 156, 0.18);
  text-align: left;
  animation: lootBadgeIn 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
#levelup.boss-loot .loot-origin-badge img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255, 78, 163, 0.66)); }
/* Nur der UMSCHLIESSENDE span wird zur Spalte. Ohne das `>` traf die Regel
   auch die Sprach-spans darin und setzte sie auf display:flex - staerker als
   das `[data-l] { display: none }` der Sprachumschaltung. Ergebnis waere
   "BOSS RELIC BOSS-RELIKT" untereinander in EINEM Abzeichen. */
#levelup.boss-loot .loot-origin-badge > span { display: flex; flex-direction: column; }
#levelup.boss-loot .loot-origin-badge b { font-size: 0.74rem; letter-spacing: 0.16em; }
#levelup.boss-loot .loot-origin-badge small { margin-top: 1px; color: #b89cac; font-size: 0.71rem; }
#levelup.boss-loot .levelup-title {
  background: linear-gradient(90deg, #fff1bb, #ff6bb8, #d5a0ff, #fff1bb);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bossTitleShimmer 2.5s linear infinite;
}

/* Die Karten werden von links nach rechts umgedreht. Das ist nicht nur Schau:
   Der Ablauf dauert rund eine Sekunde, in der keine Karte klickbar ist – sonst
   trifft ein bereits gedrückter Mausklick blind die Karte unter dem Zeiger. */
#choices.choice-deal .choice {
  animation: choiceFlip 0.52s cubic-bezier(0.22, 0.9, 0.28, 1) calc(var(--choice-index, 0) * 170ms) both;
  pointer-events: none;
}
/* Vorderseite bleibt unsichtbar, solange die Karte weggedreht ist, die
   Rueckseite verschwindet in derselben Sekunde. Der harte Wechsel liegt genau
   bei 50 % - dort steht die Karte hochkant und niemand sieht den Schnitt.
   (backface-visibility waere der elegantere Weg, greift hier aber nicht
   zuverlaessig, weil die Kinder selbst nicht im 3D-Raum gedreht sind.) */
#choices.choice-deal .choice > *:not(.choice-back) {
  animation: choiceFaceIn 0.52s cubic-bezier(0.22, 0.9, 0.28, 1) calc(var(--choice-index, 0) * 170ms) both;
}
#choices.choice-deal .choice-back {
  animation: choiceBackOut 0.52s cubic-bezier(0.22, 0.9, 0.28, 1) calc(var(--choice-index, 0) * 170ms) both;
}

.choice-back {
  position: absolute;
  inset: 0;
  z-index: 5;

  border-radius: 20px;
  border: 1px solid rgba(135, 150, 210, 0.34);

  background:
    radial-gradient(circle at 50% 42%, rgba(150, 120, 255, 0.26), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, #1b1f3c, #0b0e1d);

  /* Nur waehrend der Drehung sichtbar: danach zeigt sie vom Betrachter weg. */
  transform: rotateY(180deg);
  opacity: 0;
  pointer-events: none;
}
.choice-back::after {
  content: "✦";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(190, 165, 255, 0.5);
  font-size: 2.6rem;
  text-shadow: 0 0 22px rgba(150, 120, 255, 0.55);
}
.choice::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -60% -90%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.11) 49%, transparent 57%);
  transform: translateX(-28%) rotate(8deg);
  transition: transform 0.55s ease;
}
.choice:hover::before { transform: translateX(35%) rotate(8deg); }
.choice > * { position: relative; z-index: 1; }
.choice.is-picked { animation: choicePicked 0.24s cubic-bezier(0.2, 1.5, 0.4, 1) both !important; }

/* Kleine, günstige Erfolgssignale für HUD und Klicks. */
.weapon-chip:nth-child(3n + 1) { animation: hudChipBreathe 3.2s ease-in-out infinite; }
.weapon-chip:nth-child(3n + 2) { animation: hudChipBreathe 3.2s ease-in-out 0.6s infinite; }
.weapon-chip:nth-child(3n) { animation: hudChipBreathe 3.2s ease-in-out 1.2s infinite; }
.hud-pop { display: inline-block; animation: hudValuePop 0.34s cubic-bezier(0.2, 1.5, 0.4, 1); }
.bar-fill { overflow: hidden; transition: width 0.16s ease-out; }
.bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(102deg, transparent 25%, rgba(255,255,255,0.42) 48%, transparent 72%);
  transform: translateX(-115%);
  animation: barEnergySweep 2.4s ease-in-out infinite;
}
.gs-pressable { isolation: isolate; }
.gs-click-ripple {
  position: absolute;
  z-index: 9;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,0.54);
  box-shadow: 0 0 20px rgba(255,255,255,0.4);
  animation: gsClickRipple 0.56s ease-out both;
}

@keyframes bossVeilIn { from { opacity: 0; } }
@keyframes bossSkyTurn { to { transform: rotate(360deg); } }
@keyframes bossSceneArrive { from { opacity: 0; transform: translateY(28px) scale(0.93); } }
@keyframes bossKickerPulse { 50% { border-color: rgba(255, 218, 112, 0.75); box-shadow: 0 0 30px rgba(255, 55, 155, 0.34); } }
@keyframes bossTitleShimmer { to { background-position: -220% 0; } }
@keyframes bossGroundGlow { 50% { opacity: 0.63; transform: translateX(-50%) scale(1.12); } }
@keyframes bossRingSpin { to { transform: rotateX(67deg) rotateZ(360deg); } }
@keyframes bossCoreBeat { 50% { opacity: 0.58; transform: scale(1.16); } }
@keyframes bossRayBreathe { 50% { opacity: 0.56; transform: translateX(-50%) scaleX(1.07); } }
@keyframes bossOrbitOne { to { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(360deg); } }
@keyframes bossOrbitTwo { to { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(360deg); } }
@keyframes bossChestHover {
  0%, 100% { transform: translateX(-50%) translateY(2px) rotateZ(-0.5deg); }
  50% { transform: translateX(-50%) translateY(-8px) rotateZ(0.7deg); }
}
@keyframes bossAuraBeat { 50% { opacity: 0.7; transform: scale(1.1); } }
@keyframes bossLatch { 50% { opacity: 0.48; transform: translate(-50%, -50%) scale(0.62); } }
@keyframes bossLatchBreak { 55% { transform: translate(-50%, -50%) scale(6); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(12); opacity: 0; } }
@keyframes bossChestUnlock {
  0% { transform: translateX(0) rotate(0); }
  18% { transform: translateX(-6px) rotate(-1.5deg); }
  36% { transform: translateX(7px) rotate(1.7deg); }
  54% { transform: translateX(-5px) rotate(-1deg); }
  72% { transform: translateX(4px) rotate(0.8deg); }
  100% { transform: translateX(0) scale(0.96); filter: brightness(1.8) drop-shadow(0 0 35px #fff0a8); }
}
@keyframes bossChestOpenReveal {
  0% { opacity: 0; transform: scale(0.82) translateY(18px); filter: brightness(3.2) drop-shadow(0 0 60px #fff); }
  48% { opacity: 1; transform: scale(1.09) translateY(-7px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes bossSparkFloat {
  0%, 100% { opacity: 0; transform: translateY(12px) rotate(45deg) scale(0.3); }
  32%, 72% { opacity: 0.9; }
  55% { transform: translateY(-18px) rotate(160deg) scale(1); }
}
@keyframes bossButtonCall { 50% { box-shadow: 0 13px 42px rgba(255, 39, 115, 0.48), 0 0 25px rgba(255, 207, 109, 0.14); } }
@keyframes bossButtonSheen { 0%, 35% { transform: translateX(-55%); } 72%, 100% { transform: translateX(55%); } }
@keyframes bossButtonVanish { to { opacity: 0; transform: scale(0.8); } }
@keyframes bossWhiteFlash { 0%, 28% { opacity: 0; } 38% { opacity: 0.68; } 100% { opacity: 0; } }
@keyframes bossGlitterFall {
  0% { opacity: 0; transform: translate3d(0, -5vh, 0) rotate(0deg) scale(0.4); }
  12% { opacity: 1; }
  78% { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(var(--rain-drift), 112vh, 0) rotate(620deg) scale(1); }
}
@keyframes lootBadgeIn { from { opacity: 0; transform: translateY(-12px) scale(0.7); } }
@keyframes choiceDeal { from { opacity: 0; transform: translateY(42px) scale(0.86) rotateX(12deg); filter: brightness(1.9); } }
/* Keine Einblendung: Die Karte liegt von Anfang an sichtbar mit der Rueckseite
   nach oben und dreht sich erst, wenn sie an der Reihe ist. */
@keyframes choiceFaceIn { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes choiceBackOut { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes choiceFlip {
  0%   { transform: perspective(1100px) rotateY(180deg) scale(0.94); }
  100% { transform: perspective(1100px) rotateY(0deg) scale(1); }
}
@keyframes choicePicked { 50% { transform: translateY(-12px) scale(1.045); filter: brightness(1.35); } 100% { transform: scale(0.94); opacity: 0.35; } }
@keyframes hudChipBreathe { 50% { transform: translateY(-2px); filter: brightness(1.13); } }
@keyframes hudValuePop { 50% { transform: scale(1.24); color: #fff2a8; text-shadow: 0 0 16px #ffd35b; } }
@keyframes barEnergySweep { 0%, 38% { transform: translateX(-115%); } 76%, 100% { transform: translateX(115%); } }
@keyframes gsClickRipple { to { opacity: 0; transform: scale(14); } }

@media (max-width: 620px) {
  .boss-reward-scene h2 { margin-top: 6px; }
  .boss-reward-copy { max-width: 86vw; }
  .boss-chest-altar { height: clamp(260px, 48vh, 360px); }
  .boss-chest-image-wrap { width: clamp(205px, 38vh, 290px); height: clamp(246px, 45vh, 350px); }
  .boss-open-key { display: none; }
  .boss-chest-open-btn { grid-template-columns: 36px 1fr; }
  .boss-power-word { font-size: 0.7rem; letter-spacing: 0.14em; }
  #levelup.boss-loot .loot-origin-badge { margin-top: -12px; }
}

@media (max-height: 650px) {
  .boss-reward-copy { display: none; }
  .boss-chest-altar { height: 300px; }
  .boss-chest-image-wrap { width: 230px; height: 292px; }
  .boss-reward-status { display: none; }
  .boss-chest-open-btn { min-height: 58px; }
}

.reroll-btn {
  margin-top: 26px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: bold;
  color: var(--text);
  background: rgba(155, 123, 255, 0.18);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s, opacity 0.15s, border-color 0.15s;
}
.reroll-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.12);
  border-color: var(--accent2);
}
.reroll-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.choice {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Karten sind gleich hoch, ihr Inhalt aber verschieden lang: Attributkarten
     haetten sonst oben einen Block und darunter ein leeres Drittel. */
  justify-content: center;

  min-height: 390px;
  padding: 34px 22px 28px;

  gap: 11px;

  cursor: pointer;

  border: 1px solid rgba(135, 150, 210, 0.34);
  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      rgba(25, 29, 52, 0.96) 0%,
      rgba(11, 14, 29, 0.97) 58%,
      rgba(8, 11, 24, 0.99) 100%
    );

  box-shadow:
    0 16px 35px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  overflow: hidden;
  transform-style: preserve-3d;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.choice:hover,
.choice.focus {
  transform: perspective(900px) translateY(-8px) scale(1.015) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));

  border-color: rgba(111, 181, 255, 0.82);

  background:
    linear-gradient(
      180deg,
      rgba(37, 44, 78, 0.98),
      rgba(13, 17, 35, 0.99)
    );

  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.46),
    0 0 30px rgba(74, 168, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Kopfzeile der Karte: Zahl + Raritaet links, Element rechts. Als Flex-Reihe,
   damit sich die drei bei engen Karten den Platz teilen statt zu ueberlappen. */
.choice-top {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 3;

  display: flex;
  align-items: center;
  gap: 6px;
}

.choice .key {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(120, 170, 255, 0.2);
  border: 1px solid var(--panel-border);
  font-size: 0.75rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.choice .icon {
  width: 118px;
  height: 118px;

  margin: 6px 0 3px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 4.3rem;

  flex: 0 0 auto;
}

.choice .icon img {
  width: 108px;
  height: 108px;

  object-fit: contain;

  filter:
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 14px rgba(120, 180, 255, 0.38));

  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.choice:hover .icon img {
  transform: scale(1.08);

  filter:
    drop-shadow(0 10px 13px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 20px rgba(120, 180, 255, 0.58));
}

.choice .cname {
  margin-top: 2px;

  font-size: 1.22rem;
  font-weight: 850;
  line-height: 1.15;

  color: #f4f6ff;

  text-align: center;

  text-shadow: 0 2px 9px rgba(0, 0, 0, 0.6);
}

.choice .ctag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 25px;

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 0.74rem;
  font-weight: 800;

  letter-spacing: 0.65px;
  text-transform: uppercase;
}

.choice .ctag.new {
  background: rgba(126, 232, 121, 0.18);
  color: #7ee879;
}

.choice .ctag.up {
  background: rgba(155, 123, 255, 0.2);
  color: #b79bff;
}

.choice .ctag.passive {
  background: rgba(255, 211, 91, 0.18);
  color: var(--gold);
}

.choice .ctag.item {
  background: rgba(95, 208, 255, 0.18);
  color: #5fd0ff;
}

/* Ab Lvl 5 empfohlene (bereits vorhandene) Aufwertungen hervorheben */
.choice.rec {
  border-color: rgba(255, 211, 91, 0.7);
  box-shadow: 0 0 0 1px rgba(255, 211, 91, 0.35), 0 6px 18px rgba(0, 0, 0, 0.5);
}

.choice .rec-badge {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.71rem;
  letter-spacing: 0.5px;
  color: var(--gold);
  background: rgba(255, 211, 91, 0.16);
  padding: 2px 7px;
  border-radius: 10px;
}

.choice .rec-badge.route-build {
  color: #d8c6ff;
  background: rgba(155, 123, 255, 0.2);
}

.choice .rec-badge.route-explore {
  color: #9fe8ff;
  background: rgba(95, 208, 255, 0.16);
}

.choice .rec-badge.route-elem {
  color: var(--ec, #d8c6ff);
  background: color-mix(in srgb, var(--ec, #9b7bff) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ec, #9b7bff) 45%, transparent);
}

/* Das Element steht oben rechts anstelle der Route: Icon, Name, Stufe und der
   Fortschritt zur naechsten Stufe in einer Zeile. */
.choice .rec-badge.is-elem {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 8px;
  white-space: nowrap;
}
.choice .rec-badge.is-elem .ce-ic { filter: drop-shadow(0 0 5px var(--ec)); }
.choice .rec-badge.is-elem .ce-nm { color: var(--ec); font-weight: 900; }
.choice .rec-badge.is-elem .ce-tier { color: #a79fb4; font-weight: 900; font-variant-numeric: tabular-nums; }
.choice .rec-badge.is-elem b { color: #e6e0f0; font-weight: 800; font-variant-numeric: tabular-nums; }

.choice .rec-badge.route-free {
  color: #b8c0cc;
  background: rgba(184, 192, 204, 0.12);
}

.item-chip {
  font-size: 22px;
  line-height: 1;
}

.choice .cdesc {
  width: 100%;

  margin-top: 3px;
  padding: 0 3px;

  color: #aeb6d2;

  font-size: 0.88rem;
  line-height: 1.5;

  text-align: center;
}

.choice .recommendation-reason {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 2px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 211, 91, 0.3);
  border-radius: 10px;
  color: #efe7c8;
  background: linear-gradient(90deg, rgba(255, 211, 91, 0.1), rgba(155, 123, 255, 0.08));
  font-size: 0.73rem;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
}
.choice .recommendation-reason i { color: var(--gold); font-style: normal; font-size: .85rem; }

/* Konkrete Waffen-Kennwerte auf der Karte (Schaden, Reichweite … · Upgrade: alt→neu) */
.choice .cstats {
  display: flex;
  flex-wrap: wrap;

  width: 100%;

  margin-top: auto;
  padding-top: 13px;

  gap: 7px 13px;

  border-top: 1px solid rgba(150, 160, 205, 0.14);

  font-size: 0.77rem;
  line-height: 1.4;

  text-align: left;
}
.choice .cstat {
  color: var(--text);
  white-space: nowrap;
}
.choice .cstat b {
  color: var(--muted);
  font-weight: 600;
}
.choice .cstat.dim { opacity: 0.5; }
.choice .cstat i {
  font-style: normal;
  font-weight: 700;
}
.choice .cstat i.up { color: #7dff9b; text-shadow: 0 0 8px rgba(125, 255, 155, 0.5); }
.choice .cstat i.down { color: #ff9f6b; text-shadow: 0 0 8px rgba(255, 159, 107, 0.5); }

/* Waffen-Fähigkeit: der Teil einer Waffe, der KEINEN Schaden macht. Er taucht
   in keiner Kennzahl auf und braucht deshalb einen eigenen, deutlich abgesetzten
   Block — sonst würde niemand merken, dass es ihn gibt. */
/* Details-Schicht: Waffen-Faehigkeit und Synergie-Vorschau. Beide kosten viel
   Kartenhoehe, werden aber nur beim Vergleichen gebraucht - sie liegen deshalb
   als Einblendung ueber dem Kartenfuss statt im Fluss. */
.choice-more {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 4;

  display: flex;
  flex-direction: column;
  gap: 7px;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.choice:hover .choice-more,
.choice.focus .choice-more { opacity: 1; transform: translateY(0); }

/* Der Hinweis, dass da noch etwas ist. Klein, ruhig, und weg, sobald die
   Schicht offen ist - er soll auf sich aufmerksam machen, nicht ablenken. */
.more-cue {
  margin-top: 4px;

  color: rgba(196, 182, 232, 0.6);

  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.4px;

  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.choice:hover .more-cue,
.choice.focus .more-cue { opacity: 0; }

.choice .wpower {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;

  padding: 8px 10px;

  gap: 3px 8px;

  border: 1px solid rgba(155, 123, 255, 0.34);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(46, 33, 92, 0.97), rgba(20, 15, 44, 0.98));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);

  font-size: 0.76rem;
  line-height: 1.42;

  text-align: left;
}

/* Ohne Hover (Touch) gibt es keine Einblendung - dort bleibt alles im Fluss. */
@media (hover: none) {
  .choice-more {
    position: static;
    width: 100%;
    margin-top: 10px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .more-cue { display: none; }
}
.choice .wpower b {
  color: #d9c4ff;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.choice .wpower i {
  margin-left: auto;

  color: var(--gold);
  font-style: normal;
  font-weight: 700;
  font-size: 0.72rem;
  white-space: nowrap;
}
.choice .wpower span {
  flex: 1 0 100%;
  color: var(--muted);
}

/* Kombo-Vorschau: zeigt, welche Synergie diese Wahl auslöst/verstärkt */
.choice.combo {
  border-color: rgba(155, 123, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(155, 123, 255, 0.3), 0 6px 18px rgba(0, 0, 0, 0.5);
}

.combo-hint {
  display: flex;
  flex-direction: column;

  width: 100%;

  gap: 5px;

  padding: 10px 11px;

  border: 1px solid rgba(155, 123, 255, 0.18);
  border-radius: 10px;

  background: rgba(117, 78, 210, 0.07);

  text-align: left;
}

.combo-hint span {
  font-size: 0.76rem;
  font-weight: 750;

  letter-spacing: 0.15px;

  text-shadow: 0 0 8px currentColor;
}

.combo-hint .evo-hint { color: var(--gold); }

/* Evolutions-Karte: golden, deutlich hervorgehoben */
.choice.evo {
  border-color: rgba(255, 211, 91, 0.85);
  background: linear-gradient(180deg, rgba(60, 46, 12, 0.7), rgba(14, 12, 20, 0.9));
  box-shadow: 0 0 0 1px rgba(255, 211, 91, 0.5), 0 0 26px rgba(255, 200, 80, 0.35), 0 8px 22px rgba(0, 0, 0, 0.55);
  animation: evoPulse 1.4s ease-in-out infinite;
}

@keyframes evoPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 211, 91, 0.5), 0 0 20px rgba(255, 200, 80, 0.3), 0 8px 22px rgba(0, 0, 0, 0.55); }
  50% { box-shadow: 0 0 0 1px rgba(255, 211, 91, 0.8), 0 0 34px rgba(255, 200, 80, 0.55), 0 8px 22px rgba(0, 0, 0, 0.55); }
}

.choice .ctag.evo {
  background: linear-gradient(90deg, rgba(255, 211, 91, 0.3), rgba(255, 150, 60, 0.3));
  color: var(--gold);
}

.choice .icon img { transition: filter 0.15s; }
.choice.evo .icon img { filter: drop-shadow(0 0 10px rgba(255, 211, 91, 0.9)); }

.rec-badge.evo-badge {
  left: 8px;
  right: auto;
  color: #06101f;
  background: linear-gradient(90deg, #ffd35b, #ff9f45);
  font-weight: bold;
}

/* Evolvierte Waffe im HUD: golden */
.weapon-chip.evo-chip {
  border-color: rgba(255, 211, 91, 0.85);
  box-shadow: 0 0 12px rgba(255, 200, 80, 0.5), 0 3px 8px rgba(0, 0, 0, 0.5);
}
.weapon-chip.evo-chip img { filter: drop-shadow(0 0 6px rgba(255, 211, 91, 0.95)); }
.weapon-chip.evo-chip .wlvl {
  background: linear-gradient(90deg, #ffd35b, #ff9f45);
  color: #06101f;
  padding: 1px 3px;
}

/* ------------------------------------------------------ Game Over */
.go-title {
  font-size: 1.6rem;
  color: var(--hp);
  margin-bottom: 16px;
}

.go-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.go-stats div {
  background: rgba(10, 14, 28, 0.7);
  border: 1px solid rgba(120, 170, 255, 0.18);
  border-radius: 10px;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.go-stats span {
  font-size: 1.35rem;
  font-weight: bold;
  color: var(--xp);
  font-variant-numeric: tabular-nums;
}

.go-stats small {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.submit-info {
  font-size: 0.92rem;
  min-height: 22px;
  margin-bottom: 6px;
  color: var(--gold);
}

/* ------------------------------------------------------ Helden-Auswahl */
.hero-select {
  text-align: left;
  margin-bottom: 16px;
}
.hero-select > label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hero-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hero-cards { position: relative; }

/* Skin-Auswahl der gewaehlten Heldenkarte: ein kleines schwebendes Fenster
   NEBEN der Karte statt eines Streifens quer unter der ganzen Reihe. Position
   und Seite rechnet placeHeroSkinStrip() in js/game.js aus und schreibt sie in
   left/top und data-side - hier steht nur, wie es aussieht. */
.hero-skin-strip {
  position: absolute;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(2, 46px);
  gap: 5px;
  width: max-content;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--hc) 55%, transparent);
  border-radius: 12px;
  background: rgba(8, 10, 22, 0.97);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6),
              0 0 0 1px color-mix(in srgb, var(--hc) 18%, transparent);
  animation: hssPop 0.16s ease-out;
}
.hero-skin-strip .hss-title {
  grid-column: 1 / -1;
  padding-bottom: 1px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--hc) 75%, #fff 25%);
}
/* Zeiger zur Karte. --point kommt aus dem Skript: bei seitlicher Lage ist es
   der Abstand von oben, unterhalb der Karte der Abstand von links. */
.hero-skin-strip::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: rgba(8, 10, 22, 0.97);
  border: 1px solid color-mix(in srgb, var(--hc) 55%, transparent);
}
.hero-skin-strip[data-side="right"]::before {
  left: -5px;
  top: var(--point, 50%);
  margin-top: -4.5px;
  border-right: 0;
  border-bottom: 0;
}
.hero-skin-strip[data-side="left"]::before {
  right: -5px;
  top: var(--point, 50%);
  margin-top: -4.5px;
  border-left: 0;
  border-top: 0;
}
.hero-skin-strip[data-side="below"]::before {
  top: -5px;
  left: var(--point, 50%);
  margin-left: -4.5px;
  border-right: 0;
  border-bottom: 0;
}
@keyframes hssPop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-skin-strip { animation: none; }
}
/* Schmale Schirme: lieber breit und flach als hoch - sonst haengt das Fenster
   ueber dem Startknopf. Drei Spalten bringen die fuenf Bilder auf zwei Zeilen. */
@media (max-width: 620px) {
  .hero-skin-strip { grid-template-columns: repeat(3, 38px); gap: 4px; padding: 6px; }
  .hero-skin-strip .hss-dot { width: 38px; }
}
.hero-skin-strip .hss-dot {
  position: relative;
  width: 46px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(6, 9, 20, 0.7);
  overflow: hidden;
  cursor: pointer;
  filter: saturate(0.85) brightness(0.8);
  transition: transform 0.12s, border-color 0.15s, filter 0.15s;
}
.hero-skin-strip .hss-dot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hero-skin-strip .hss-dot:hover { transform: translateY(-2px); filter: none; border-color: var(--hc); }
.hero-skin-strip .hss-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero-skin-strip .hss-dot.is-on {
  filter: none;
  border-color: var(--hc);
  box-shadow: 0 0 10px color-mix(in srgb, var(--hc) 55%, transparent);
}
.hero-skin-strip .hss-dot.is-locked img { filter: grayscale(1) brightness(0.5); }
.hero-skin-strip .hss-lock {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 10px;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}
.hero-card {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 2px solid var(--panel-border);
  background: rgba(10, 14, 28, 0.6);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s, filter 0.15s;
  filter: saturate(0.85) brightness(0.82);
}
.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-card:hover {
  transform: translateY(-2px);
  filter: saturate(1) brightness(1);
}
.hero-card.sel {
  border-color: var(--hc, #fff);
  box-shadow: 0 0 0 1px var(--hc, #fff), 0 0 14px color-mix(in srgb, var(--hc, #fff) 60%, transparent);
  transform: translateY(-3px);
  filter: saturate(1.05) brightness(1.02);
}
.hero-card .hc-check {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 0.74rem;
  opacity: 0;
  text-shadow: 0 1px 3px #000;
}
.hero-card.sel .hc-check { opacity: 1; }
.hero-info {
  margin-top: 8px;
  min-height: 42px;
  font-size: 0.82rem;
  line-height: 1.35;
}
.hero-info .hi-name { font-weight: bold; }
.hero-info .hi-tag {
  font-size: 0.71rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 8px;
  margin-left: 6px;
  color: #06101f;
  font-weight: bold;
}

/* ------------------------------------------------------ Risiko-/Fluch-Karten */
.choice.curse {
  border-color: rgba(255, 84, 112, 0.7);
  background: linear-gradient(180deg, rgba(60, 14, 22, 0.6), rgba(14, 12, 20, 0.9));
  box-shadow: 0 0 0 1px rgba(255, 84, 112, 0.35), 0 6px 18px rgba(0, 0, 0, 0.5);
}
.choice.curse:hover,
.choice.curse.focus {
  border-color: rgba(255, 84, 112, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 84, 112, 0.5), 0 10px 28px rgba(255, 84, 112, 0.3);
}
.choice .ctag.curse {
  background: linear-gradient(90deg, rgba(255, 84, 112, 0.32), rgba(255, 60, 60, 0.28));
  color: #ff8aa8;
}
.choice.curse .icon img { filter: drop-shadow(0 0 8px rgba(255, 84, 112, 0.8)); }


/* ------------------------------------------------------ Rarität (Level-Up-/Box-Karten) */
.choice.rarcard { border-color: var(--rar); }
.choice.rarcard:hover,
.choice.rarcard.focus { border-color: var(--rar); box-shadow: 0 10px 28px var(--rarglow); }
.choice.rar-rare { box-shadow: 0 0 0 1px var(--rar), 0 6px 18px rgba(0, 0, 0, 0.5); }
.choice.rar-epic { box-shadow: 0 0 0 1px var(--rar), 0 0 16px var(--rarglow); }
.choice.rar-legendary {
  border-width: 2px;
  box-shadow: 0 0 0 2px var(--rar), 0 0 22px var(--rarglow);
  animation: rarPulse 1.8s ease-in-out infinite;
}
@keyframes rarPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--rar), 0 0 16px var(--rarglow); }
  50% { box-shadow: 0 0 0 2px var(--rar), 0 0 30px var(--rarglow); }
}
.choice .rar-badge {
  /* Sitzt oben links direkt neben der Tastenzahl - so kostet die Raritaet
     keine eigene Zeile in der Kartenhoehe. Sie gibt bei Platzmangel als erste
     nach: das Element rechts traegt die wichtigere Information. */
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 3px 8px;

  border: 1px solid color-mix(in srgb, var(--rar) 62%, transparent);
  border-radius: 999px;

  color: var(--rar);

  background: color-mix(in srgb, var(--rar) 15%, rgba(5, 7, 18, 0.55));

  box-shadow: 0 0 14px var(--rarglow);

  font-size: 0.62rem;
  font-weight: 850;

  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.choice.rar-epic .icon img,
.choice.rar-legendary .icon img { filter: drop-shadow(0 0 10px var(--rarglow)); }

/* ------------------------------------------------------ Erfolge (Achievements) */
.ach-toast-wrap {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: min(92vw, 420px);
}
.ach-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(30, 26, 12, 0.96), rgba(18, 16, 26, 0.96));
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 0 22px rgba(255, 211, 91, 0.35), var(--shadow);
  animation: achIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2), achOut 0.5s ease-in 3.4s forwards;
}
.ach-toast .ai { font-size: 1.9rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(255, 211, 91, 0.7)); }
.ach-toast .at-lbl { font-size: 0.71rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.ach-toast .at-name { font-weight: 700; font-size: 0.98rem; color: var(--text); }
.ach-toast .at-desc { font-size: 0.76rem; color: var(--muted); }
/* Belohnungs-Item im Erfolgs-Toast: der eigentliche Gewinn, deshalb abgesetzt. */
.ach-toast .at-reward {
  display: flex; align-items: center; gap: 8px;
  margin-top: 7px; padding: 6px 9px; border-radius: 9px;
  border: 1px solid rgba(255, 213, 104, 0.4); background: rgba(255, 213, 104, 0.1);
}
.ach-toast .at-reward .ar-ic { font-size: 1.3rem; line-height: 1; }
.ach-toast .at-reward span span { display: block; }
.ach-toast .at-reward .ar-lbl { font-size: 0.7rem; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); }
.ach-toast .at-reward .ar-name { font-size: 0.82rem; font-weight: 800; color: var(--text); }
@keyframes achIn { from { opacity: 0; transform: translateY(-20px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes achOut { to { opacity: 0; transform: translateY(-14px); } }

.ach-btn { margin-top: 12px; }
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 6px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 4px;
}
.ach-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: rgba(10, 14, 28, 0.7);
}
.ach-card.locked { opacity: 0.42; filter: grayscale(0.8); }
.ach-card.done { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255, 211, 91, 0.3), 0 0 14px rgba(255, 211, 91, 0.15); }
.ach-card .aic { font-size: 1.8rem; line-height: 1; }
.ach-card .an { font-weight: 700; font-size: 0.82rem; }
.ach-card .ad { font-size: 0.73rem; color: var(--muted); line-height: 1.3; }
.ach-head { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.ach-head .ach-count { color: var(--gold); font-weight: 700; }

/* ------------------------------------------------------ Synergien-Kodex */
.syn-panel { width: min(780px, 96vw); text-align: left; }
.syn-hint { font-size: 0.78rem; color: var(--muted); line-height: 1.45; margin: 4px 0 12px; text-align: center; }
.syn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  max-height: 58vh;
  overflow-y: auto;
  padding: 4px;
  margin-bottom: 16px;
}
.syn-card {
  --sc: #ffd35b;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: rgba(10, 14, 28, 0.7);
  transition: transform 0.1s;
}
.syn-card.locked { opacity: 0.5; filter: grayscale(0.7); }
/* Kodex im Startmenü: kein Lauf aktiv -> alle Synergien vollständig lesbar. */
.syn-card.codex {
  opacity: 1;
  filter: none;
  border-color: color-mix(in srgb, var(--sc) 40%, transparent);
}
.syn-card.codex .sc-status { background: rgba(255, 255, 255, 0.1); color: var(--sc); }
.syn-hint-codex { display: none; }
.syn-panel:has(#synGrid.codex-only) .syn-hint-active { display: none; }
.syn-panel:has(#synGrid.codex-only) .syn-hint-codex { display: inline; }
.syn-card.active {
  border-color: color-mix(in srgb, var(--sc) 65%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 12%, rgba(10,14,28,0.7)), rgba(10, 14, 28, 0.7));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc) 30%, transparent), 0 0 16px color-mix(in srgb, var(--sc) 22%, transparent);
}
.syn-card .sc-head { display: flex; align-items: center; gap: 8px; }
.syn-card .sc-ic { font-size: 1.4rem; line-height: 1; filter: drop-shadow(0 0 5px var(--sc)); }
.syn-card .sc-nm { font-weight: 800; font-size: 0.92rem; color: var(--sc); flex: 1; }
.syn-card .sc-status {
  font-size: 0.71rem; font-weight: 700; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px;
  background: var(--sc); color: #06101f;
}
.syn-card.locked .sc-status { background: rgba(255,255,255,0.14); color: var(--muted); }
.syn-card .sc-row { font-size: 0.74rem; line-height: 1.4; color: var(--text); }
.syn-card .sc-row b { color: var(--muted); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 1px; }
.syn-chip { cursor: pointer; pointer-events: auto; }

/* ======================================================================
   GhostSiege Game UI v3 — einheitliche, animierte In-Game-Oberflächen
   ====================================================================== */

/* ---------- Gemeinsame Overlay-Bühne ---------- */
.game-overlay {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 32%, rgba(105, 70, 205, 0.18), transparent 37%),
    radial-gradient(circle at 50% 50%, rgba(11, 9, 28, 0.7), rgba(3, 5, 13, 0.94));
  backdrop-filter: blur(7px) saturate(1.16);
  -webkit-backdrop-filter: blur(7px) saturate(1.16);
  animation: gameOverlayIn 0.34s ease-out both;
}

.game-overlay::before {
  content: "";
  position: absolute;
  inset: -65vmax;
  opacity: 0.14;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, transparent 0 18deg, rgba(166, 121, 255, 0.18) 19deg 20deg, transparent 21deg 38deg);
  animation: gameOverlayTurn 70s linear infinite;
}

.game-modal {
  --modal-accent: #a879ff;
  --modal-hot: #ff69c5;
  position: relative;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--modal-accent) 58%, transparent);
  background:
    radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--modal-accent) 18%, transparent), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,0.035), transparent 32%),
    rgba(8, 10, 25, 0.97);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.76),
    0 0 50px color-mix(in srgb, var(--modal-accent) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 60px color-mix(in srgb, var(--modal-accent) 5%, transparent);
  animation: gameModalEnter 0.54s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.game-modal::before,
.game-modal::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.game-modal::before {
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--modal-accent) 16%, transparent);
  border-radius: 14px;
  clip-path: polygon(0 0, 25% 0, 25% 1px, 75% 1px, 75% 0, 100% 0, 100% 100%, 75% 100%, 75% calc(100% - 1px), 25% calc(100% - 1px), 25% 100%, 0 100%);
}

.game-modal::after {
  left: 50%;
  top: -1px;
  width: 36%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--modal-accent), #fff3c2, var(--modal-hot), transparent);
  box-shadow: 0 0 15px var(--modal-accent);
  transform: translateX(-50%);
  animation: modalCrestBreathe 2s ease-in-out infinite;
}

.modal-violet { --modal-accent: #a879ff; --modal-hot: #ff63bf; }
.modal-blue { --modal-accent: #63d9ff; --modal-hot: #9f8cff; }
.modal-crimson { --modal-accent: #ff4f73; --modal-hot: #ff7fc8; }
.modal-gold { --modal-accent: #ffd568; --modal-hot: #ff9a58; }
.modal-synergy { --modal-accent: #c18cff; --modal-hot: #62e4ff; }

.modal-energy { position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.modal-energy::before {
  content: "";
  position: absolute;
  left: 50%; top: 42%;
  width: min(85%, 640px); aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--modal-accent) 12%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 80px color-mix(in srgb, var(--modal-accent) 6%, transparent), inset 0 0 70px color-mix(in srgb, var(--modal-accent) 5%, transparent);
  animation: modalRuneTurn 34s linear infinite;
}
.modal-energy span {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50% 0 50% 0;
  background: var(--modal-accent);
  box-shadow: 0 0 9px var(--modal-accent), 0 0 20px var(--modal-hot);
  opacity: 0.42;
  animation: modalMote 3.2s ease-in-out infinite;
}
.modal-energy span:nth-child(1) { left: 8%; top: 23%; animation-delay: -0.7s; }
.modal-energy span:nth-child(2) { right: 10%; top: 42%; animation-delay: -1.8s; }
.modal-energy span:nth-child(3) { left: 18%; bottom: 14%; animation-delay: -2.5s; }

.modal-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 auto 10px;
  color: color-mix(in srgb, var(--modal-accent) 76%, white 24%);
  font-size: 0.71rem;
  font-weight: 950;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.modal-kicker span { color: var(--modal-hot); text-shadow: 0 0 10px var(--modal-hot); }

.modal-emblem {
  display: grid;
  width: 76px;
  aspect-ratio: 1;
  place-items: center;
  margin: 0 auto 11px;
  border: 1px solid color-mix(in srgb, var(--modal-accent) 58%, transparent);
  border-radius: 24px 10px 24px 10px;
  color: #edfaff;
  background: radial-gradient(circle, color-mix(in srgb, var(--modal-accent) 34%, transparent), rgba(8,10,25,0.7));
  box-shadow: 0 0 30px color-mix(in srgb, var(--modal-accent) 28%, transparent), inset 0 0 22px color-mix(in srgb, var(--modal-accent) 14%, transparent);
  font-size: 2rem;
  font-weight: 950;
  text-shadow: 0 0 14px var(--modal-accent);
  transform: rotate(-4deg);
  animation: modalEmblemHover 2.4s ease-in-out infinite;
}
.modal-emblem-skull { color: #ffd9df; border-radius: 50%; font-size: 2.25rem; }

.modal-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  margin-bottom: 8px;
  text-align: left;
}
.modal-title-row > div { display: flex; align-items: center; gap: 13px; }
.modal-title-row h2 { margin: 0; color: #f7f3ff; font-size: clamp(1.55rem, 3.5vw, 2.15rem); line-height: 1; }
.modal-title-row small { display: block; margin-bottom: 4px; color: var(--modal-accent); font-size: 0.71rem; font-weight: 900; letter-spacing: 0.17em; }
.modal-title-icon {
  display: grid;
  width: 55px; aspect-ratio: 1;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--modal-accent) 42%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--modal-accent) 12%, rgba(8,10,25,.9));
  box-shadow: 0 0 22px color-mix(in srgb, var(--modal-accent) 18%, transparent);
  font-size: 1.65rem;
}
.modal-lead { margin: 0 0 15px; color: #aaa6c0; font-size: 0.8rem; line-height: 1.48; text-align: left; }
.modal-lead b { color: #efe8ff; }
.modal-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 5px; }
.modal-actions .btn-primary, .modal-actions .btn-ghost { margin: 0; }
.modal-close-btn { width: min(330px, 100%); margin: 12px auto 0; font-size: 0.94rem; }

/* Fusszeile der Seelenschmiede: VIP-Knopf und Zurueck nebeneinander. */
.forge-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.forge-foot .modal-close-btn { margin: 0; width: min(330px, 100%); }
.forge-vip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 211, 91, 0.55);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 211, 91, 0.24), rgba(255, 160, 60, 0.12));
  color: #ffe6a6;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.forge-vip-btn:hover {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(255, 211, 91, 0.34), rgba(255, 160, 60, 0.18));
  transform: translateY(-1px);
}
.forge-vip-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.forge-vip-btn[hidden] { display: none; }

/* ---------- Pause ---------- */
#pause.game-overlay {
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 42%, rgba(71, 165, 225, 0.13), rgba(5, 7, 14, 0.74));
}
#pause .pause-panel { position: relative; z-index: 40; width: min(470px, 94vw); padding: 28px 30px 25px; }
#pause .pause-panel h2 { margin: 0 0 5px; color: #eafaff; font-size: 1.75rem; text-shadow: 0 0 22px rgba(99,217,255,.28); }
#pause .pause-hint { margin: 0 0 18px; }

/* ---------- Game Over / Run-Auswertung ---------- */
#gameover.game-overlay { padding: 14px; }
#gameover .go-panel { width: min(760px, 96vw); max-height: 96vh; padding: 24px clamp(18px, 3vw, 34px); }
.go-panel .modal-emblem { width: 66px; margin-bottom: 8px; }
.go-panel .go-title { margin: 0; color: #ffe8ec; font-size: clamp(1.65rem, 4vw, 2.3rem); text-shadow: 0 0 20px rgba(255,79,115,.34); }
.go-subtitle { margin: 4px 0 16px; color: #9d91a9; font-size: 0.78rem; }
.go-panel .go-stats { gap: 9px; margin-bottom: 13px; }
.go-panel .go-stats div {
  position: relative;
  overflow: hidden;
  min-height: 82px;
  padding: 11px 6px 9px;
  border: 1px solid rgba(255, 103, 142, 0.2);
  background: linear-gradient(160deg, rgba(255, 79, 115, 0.1), rgba(10,14,28,.74));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.go-panel .go-stats div::after { content:""; position:absolute; inset:auto 12% 0; height:1px; background:linear-gradient(90deg,transparent,var(--modal-accent),transparent); }
.go-panel .go-stats i { color: #ff829d; font-size: 0.76rem; font-style: normal; }
.go-panel .go-stats span { color: #fff0f4; font-size: 1.42rem; text-shadow: 0 0 14px rgba(255,82,119,.3); }
.go-panel .board { margin-top: 12px; padding-top: 10px; }
.go-panel .board h2 { margin-bottom: 7px; font-size: 0.9rem; }
.go-panel .score-list { max-height: 150px; }
.go-panel .go-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.go-panel .go-actions button { margin: 0; }

.run-recap { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 9px 0; text-align: left; }
.run-recap-card { padding: 10px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.035); }
.run-recap-card.full { grid-column: 1 / -1; }
.run-recap-label { color: #8e879f; font-size: 0.71rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.run-recap-value { margin-top: 3px; color: #eeeafa; font-size: .76rem; line-height: 1.42; }
.run-recap-card.personal-record { border-color:rgba(255,211,91,.32); background:linear-gradient(120deg,rgba(255,211,91,.09),rgba(124,91,255,.08)); }
.record-summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.record-hero { margin-right:2px; color:#ffe58a; font-size: .75rem; font-weight:900; }
.record-chip { padding:3px 7px; border:1px solid rgba(255,255,255,.1); border-radius:999px; color:#bcb5c9; background:rgba(255,255,255,.035); font-size: 0.71rem; font-weight:800; }
.record-chip.best { border-color:rgba(255,211,91,.4); color:#ffe58a; background:rgba(255,211,91,.09); }
.record-next { color:#aaa2b2; font-size: 0.73rem; line-height:1.4; }
.soul-earned { color: #e8dcff; }
.soul-earned strong { color: #d5a7ff; font-size: 1.08rem; }
.recap-synergies { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.recap-syn { padding: 3px 8px; border: 1px solid var(--sc); border-radius: 999px; color: var(--sc); background: color-mix(in srgb, var(--sc) 10%, transparent); font-size: 0.72rem; font-weight: 800; }
.recap-empty { color:#777080; font-size: 0.72rem; }

.death-cause { margin: 7px 0; padding: 10px 12px; border: 1px solid rgba(255,84,112,.16); border-radius: 12px; background: rgba(255,54,91,.045); text-align: left; }
.death-cause-head { display:flex; align-items:center; gap:7px; color:#f4e8ec; font-size: .82rem; }
.death-cause-head b { color:#ff9db0; }
.death-cause-sub { margin:3px 0 7px; color:#938997; font-size: 0.72rem; }
.death-source-row { display:grid; grid-template-columns:105px 1fr 76px; align-items:center; gap:7px; margin:4px 0; font-size: 0.72rem; }
.death-source-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#b8afbd; }
.death-source-row.killer .death-source-name { color:#ff9db0; font-weight:800; }
.death-source-bar { height:7px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.07); }
.death-source-bar i { display:block; height:100%; border-radius:inherit; background:#ff9f6b; box-shadow:0 0 8px rgba(255,159,107,.3); }
.death-source-row.killer .death-source-bar i { background:#ff5f80; }
.death-source-value { text-align:right; color:#9c929e; }

/* ---------- Erfolge ---------- */
.collection-panel { width: min(900px, 96vw); max-height: 94vh; padding: 26px clamp(18px, 3vw, 32px) 22px; text-align: left; }
.collection-panel .ach-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 84px; padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--modal-accent) 42%, transparent);
  border-radius: 999px; color: var(--modal-accent); background: color-mix(in srgb, var(--modal-accent) 10%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--modal-accent) 12%, transparent);
  font-size: .76rem; font-weight: 900;
}
.collection-progress { width:100%; height:7px; overflow:hidden; margin:3px 0 12px; border-radius:999px; background:rgba(255,255,255,.07); box-shadow:inset 0 1px 3px rgba(0,0,0,.5); }
.collection-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ffad4d,#ffe57a); box-shadow:0 0 12px rgba(255,213,104,.6); transition:width .7s cubic-bezier(.16,1,.3,1); }
.ach-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 9px; max-height: 49vh; margin-top: 3px; padding: 5px; }
.ach-category-title { grid-column:1 / -1; display:flex; align-items:center; gap:9px; margin:9px 2px 0; color:#d7cfc1; font-size: 0.72rem; font-weight:950; letter-spacing:.16em; text-transform:uppercase; }
.ach-category-title::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(255,213,104,.34),transparent); }
.ach-card {
  position:relative; overflow:hidden; min-height:112px; justify-content:center;
  padding:14px 10px 12px; border-radius:14px;
  transition:transform .18s ease, border-color .18s ease, filter .18s ease, box-shadow .18s ease;
  animation: collectionCardIn .45s cubic-bezier(.16,1,.3,1) calc(var(--card-index,0) * 35ms) both;
}
.ach-card::before { content:""; position:absolute; inset:-60% -100%; background:linear-gradient(105deg,transparent 45%,rgba(255,255,255,.1) 50%,transparent 56%); transform:translateX(-25%); transition:transform .55s ease; }
.ach-card:hover { transform:translateY(-4px); }
.ach-card:hover::before { transform:translateX(35%); }
.ach-card.done { border-color:rgba(255,213,104,.65); background:linear-gradient(160deg,rgba(255,213,104,.12),rgba(10,14,28,.72)); box-shadow:0 0 0 1px rgba(255,211,91,.18),0 0 20px rgba(255,211,91,.09); }
.ach-card.locked { opacity:.56; filter:grayscale(.68); }
.ach-card .aic { font-size: 2rem; filter:drop-shadow(0 0 9px rgba(255,213,104,.3)); }
.ach-card .an { color:#f1ecdf; }
.ach-card .ad { max-width:180px; color:#958e9d; }
.ach-state { margin-top:4px; padding:2px 7px; border-radius:999px; color:#847d8e; background:rgba(255,255,255,.055); font-size: 0.7rem; font-weight:900; letter-spacing:.1em; }
.ach-card.done .ach-state { color:#ffe17b; background:rgba(255,213,104,.1); }

/* ---------- Erfolge: Reiter (Erfolge | Item-Kodex) ---------- */
.ach-tabs { display:flex; justify-content:center; gap:8px; margin:10px 0 2px; }
.ach-tab {
  padding:6px 15px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); background:rgba(10,14,28,.6);
  color:#9a93a4; font:inherit; font-size: 0.73rem; font-weight:900; letter-spacing:.08em;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.ach-tabs .ach-tab { color:#c6bfd0; }
.ach-tabs .ach-tab:hover { color:#f1ecdf; border-color:rgba(255,213,104,.4); }
.ach-tabs .ach-tab.active { color:#0c1020; }
.ach-tab.active { color:#0c1020; background:linear-gradient(160deg,#ffd968,#e0a92f); border-color:rgba(255,213,104,.8); }

/* ---------- Erfolgskarte: Belohnungs-Item ---------- */
.ach-reward {
  display:flex; align-items:center; gap:7px; width:100%;
  margin-top:8px; padding:6px 8px; border-radius:10px;
  border:1px dashed rgba(255,255,255,.14); background:rgba(255,255,255,.035);
  text-align:left;
}
.ach-card.done .ach-reward { border-style:solid; border-color:rgba(255,213,104,.45); background:rgba(255,213,104,.1); }
.ach-reward .ar-ic { font-size: 1.15rem; line-height:1; flex:0 0 auto; }
.ach-reward .ar-txt { display:flex; flex-direction:column; min-width:0; }
.ach-reward .ar-lbl { color:#847d8e; font-size: 0.69rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.ach-card.done .ach-reward .ar-lbl { color:#ffe17b; }
.ach-reward .ar-name { color:#e8e1d4; font-size: 0.74rem; font-weight:800; line-height:1.2; }

/* ---------- Item-Kodex ---------- */
.codex-grid { grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); }
.codex-hint { grid-column:1 / -1; margin:0 2px 2px; color:#8d8698; font-size: 0.71rem; line-height:1.4; }
.codex-card {
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  min-height:118px; padding:12px 10px; border-radius:14px;
  border:1px solid var(--panel-border); background:rgba(10,14,28,.7);
  transition:transform .18s ease, border-color .18s ease;
}
.codex-card:hover { transform:translateY(-3px); }
.codex-card.open { border-color:rgba(255,213,104,.45); background:linear-gradient(160deg,rgba(255,213,104,.08),rgba(10,14,28,.72)); }
.codex-card.locked { opacity:.62; filter:grayscale(.55); }
.codex-card.curse.open { border-color:rgba(255,93,183,.45); }
.codex-card .cx-ic { font-size: 1.7rem; line-height:1; }
.codex-card .cx-name { color:#f1ecdf; font-weight:800; font-size: .78rem; }
.codex-card .cx-desc { color:#958e9d; font-size: 0.72rem; line-height:1.35; }
.codex-card .cx-gate {
  margin-top:auto; padding:3px 8px; border-radius:999px;
  color:#c9a24a; background:rgba(255,213,104,.08);
  font-size: 0.7rem; font-weight:800; letter-spacing:.04em; line-height:1.3;
}
.codex-card.open .cx-gate { color:#ffe17b; background:rgba(255,213,104,.12); }
.codex-card .cx-gate.cx-base { color:#7c7688; background:rgba(255,255,255,.05); letter-spacing:.1em; }

/* ---------- Seelenschmiede ---------- */
.forge-panel { width:min(930px,96vw); }
.forge-icon { color:#e8d3ff; }
.forge-group { margin:14px 2px 7px; display:flex; align-items:center; gap:8px; color:#d8b9ff; font-size: 0.72rem; font-weight:950; letter-spacing:.16em; text-transform:uppercase; }
.forge-group::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(185,123,255,.35),transparent); }
.forge-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:9px; }
/* Fähigkeiten-Block über den Runen. Er benutzt dieselben .hero-power-Karten wie
   die Heldenauswahl, damit eine Fähigkeit im Laden nicht anders aussieht als
   dort, wo man sie auswählt. Zwei Spalten, solange Platz ist. */
.forge-abilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 9px;
  align-items: start;
}
.forge-abilities .hero-power { margin: 0; }
/* Drei Zeilen je Fähigkeit: der Block soll den Zusammenhang zu den Runen
   herstellen, nicht die halbe Seite füllen. Volltext hängt als Tooltip dran. */
.forge-abilities .hp-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Kein Skin angelegt: der Platz bleibt sichtbar, tritt aber zurück. */
.forge-abilities .hero-power.is-empty { opacity: 0.72; border-style: dashed; }
.forge-abilities .hero-power.is-empty .hp-name { color: var(--muted) !important; }
.forge-upgrade {
  --forge-color:#bd8cff;
  position:relative; overflow:hidden; min-height:126px;
  padding:12px; border:1px solid rgba(201,167,255,.19); border-radius:14px;
  color:#eaf2ff; background:linear-gradient(155deg,rgba(170,94,255,.09),rgba(255,255,255,.025));
  cursor:pointer; font:inherit; line-height:1.3; text-align:left;
  display:flex; flex-direction:column; gap:5px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease;
  animation: forgeCardIn .44s cubic-bezier(.16,1,.3,1) calc(var(--card-index,0) * 35ms) both;
}
.forge-upgrade::before { content:""; position:absolute; inset:auto -20% -55%; height:75%; background:radial-gradient(circle,var(--forge-color),transparent 68%); opacity:.07; pointer-events:none; }
.forge-upgrade:hover:not(:disabled) { transform:translateY(-5px) scale(1.012); border-color:rgba(201,167,255,.55); box-shadow:0 12px 28px rgba(53,18,91,.35),0 0 22px rgba(170,94,255,.1); }
.forge-upgrade:disabled { cursor:default; }
.forge-upgrade.unaffordable { opacity:.48; filter:saturate(.6); }
.forge-upgrade.maxed { border-color:rgba(255,214,90,.48); background:linear-gradient(155deg,rgba(255,214,90,.11),rgba(255,255,255,.025)); }
.forge-upgrade.purchased { animation: forgePurchased .55s cubic-bezier(.2,1.5,.4,1) both; }
.forge-upgrade-head { display:flex; align-items:center; gap:8px; }
.forge-upgrade-icon { display:grid; width:34px; aspect-ratio:1; place-items:center; border-radius:10px; background:rgba(255,255,255,.065); font-size: 1.15rem; }
.forge-upgrade-name { flex:1; font-size: .78rem; font-weight:850; }
.forge-upgrade-level { color:#9a8ca9; font-size: 0.71rem; font-weight:800; }
.forge-upgrade-desc { color:#a39aac; font-size: 0.73rem; line-height:1.38; }
.forge-pips { display:flex; gap:4px; margin-top:auto; }
.forge-pips i { width:13px; height:3px; border-radius:99px; background:rgba(255,255,255,.1); }
.forge-pips i.on { background:#c998ff; box-shadow:0 0 6px rgba(201,152,255,.55); }
.forge-upgrade-cost { display:flex; align-items:center; justify-content:space-between; margin-top:2px; color:#8affc0; font-size: 0.73rem; font-weight:900; }
.forge-upgrade.unaffordable .forge-upgrade-cost { color:#ff9db0; }
.forge-upgrade.maxed .forge-upgrade-cost { color:#ffd35b; }

/* ---------- Synergie-HUD: aktiv + nächster klarer Pfad ---------- */
#hud.hud-min .synergy-dock { display:none !important; }
.synergy-dock {
  width:100%;
  max-width:520px;
  margin:1px auto 0;
  padding:6px;
  border:1px solid rgba(185,135,255,.18);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(19,12,41,.74),rgba(7,10,23,.78));
  box-shadow:0 7px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.035);
  pointer-events:auto;
  backdrop-filter:blur(5px);
}
.synergy-dock-head {
  display:flex; align-items:center; width:100%; padding:2px 4px 5px;
  border:0; color:#bdb2cc; background:transparent; cursor:pointer; font:inherit;
}
.synergy-dock-title { font-size: 0.7rem; font-weight:950; letter-spacing:.15em; }
.synergy-dock-title i { color:#c78fff; font-style:normal; text-shadow:0 0 8px #b669ff; }
.synergy-dock-count { margin-left:auto; color:#9a8eaa; font-size: 0.7rem; font-weight:800; }
.synergy-dock-open { margin-left:7px; color:#796e87; font-size: 0.71rem; }
/* Sechs Element-Chips in zwei Reihen. Feste Spaltenzahl statt Umbruch: die
   Reihenfolge bleibt dadurch über den ganzen Run identisch, und wer einmal
   gelernt hat, dass Schatten unten links sitzt, muss nie wieder suchen. */
.synergy-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; justify-content:stretch; margin:0; }
.syn-chip {
  display:flex; align-items:center; justify-content:center; gap:4px;
  min-width:0; padding:4px 5px;
  border:1px solid color-mix(in srgb,var(--sc) 42%,transparent); border-radius:9px;
  color:var(--sc); background:color-mix(in srgb,var(--sc) 11%,rgba(8,10,25,.86));
  cursor:pointer; font:inherit; font-size: 0.72rem; font-weight:900;
  animation:none;
  transition:transform .16s ease,filter .16s ease,border-color .16s ease,opacity .16s ease;
}
.syn-chip:hover { transform:translateY(-2px); filter:brightness(1.15); }
/* Inaktive Elemente bleiben sichtbar, treten aber deutlich zurück – sie sind
   Information („hier passiert nichts"), keine Meldung. */
.syn-chip.off { border-color:rgba(255,255,255,.09); color:#6f6880; background:rgba(255,255,255,.028); box-shadow:none; opacity:.72; }
.syn-chip.off:hover { opacity:1; }
.syn-chip .syn-ic { font-size: .92rem; line-height:1; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--sc) 60%,transparent)); }
.syn-chip.off .syn-ic { filter:grayscale(.75); }
.syn-chip .syn-t { flex:0 0 auto; font-size: 0.7rem; font-weight:950; letter-spacing:.02em; }
/* Stufe 3 ist der seltene Zustand – der bekommt als einziger einen Puls. */
.syn-chip.t3 { box-shadow:0 0 12px color-mix(in srgb,var(--sc) 45%,transparent); animation:synT3Pulse 2.4s ease-in-out infinite; }
@keyframes synT3Pulse { 0%,100% { box-shadow:0 0 10px color-mix(in srgb,var(--sc) 35%,transparent); } 50% { box-shadow:0 0 18px color-mix(in srgb,var(--sc) 65%,transparent); } }

.synergy-next { display:flex; flex-direction:column; gap:4px; margin-top:5px; }
/* Ein einzelner Fortschrittsbalken für das Element, das der nächsten Stufe am
   nächsten ist. Sechs Balken wären ehrlicher, aber im Gefecht unlesbar. */
.syn-lead {
  --sc:#a879ff;
  display:flex; flex-direction:column; gap:3px;
  padding:4px 6px; border:0; border-radius:8px;
  background:color-mix(in srgb,var(--sc) 7%,rgba(255,255,255,.02));
  color:inherit; cursor:pointer; font:inherit; text-align:left;
}
.syn-lead:hover { background:color-mix(in srgb,var(--sc) 13%,rgba(255,255,255,.03)); }
.syn-lead .snp-bar { height:3px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }
.syn-lead .snp-bar i { display:block; height:100%; border-radius:inherit; background:var(--sc); box-shadow:0 0 7px var(--sc); transition:width .3s ease; }
.syn-lead .snp-detail { overflow:hidden; color:#9a92a8; font-size: 0.69rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }

/* Aktive Combos. Eigene Zeile, damit sie nicht mit den Elementen verwechselt
   werden – eine Combo ist ein Ergebnis, kein Sammelziel. */
.syn-combo {
  --sc:#bfe9ff;
  display:flex; align-items:center; gap:5px;
  padding:3px 7px; border:1px solid color-mix(in srgb,var(--sc) 30%,transparent); border-radius:8px;
  background:color-mix(in srgb,var(--sc) 9%,rgba(8,10,25,.7));
  color:inherit; cursor:pointer; font:inherit; text-align:left;
}
.syn-combo:hover { border-color:color-mix(in srgb,var(--sc) 55%,transparent); }
.syn-combo .sco-ic { font-size: .88rem; filter:drop-shadow(0 0 5px var(--sc)); }
.syn-combo .sco-nm { color:var(--sc); font-size: 0.7rem; font-weight:900; white-space:nowrap; }
.syn-combo .sco-fx { overflow:hidden; color:#8e889c; font-size: 0.68rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }

/* Bereitschaft der T2-Fähigkeiten. „bereit" leuchtet, eine laufende
   Abklingzeit steht still da – man soll den Blick nur dann hinziehen,
   wenn die Rettung wirklich verfügbar ist. */
.synergy-powers { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.synergy-powers.empty { display:none; }
.syn-pw {
  --sc:#a879ff;
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 6px; border:1px solid rgba(255,255,255,.08); border-radius:99px;
  background:rgba(255,255,255,.03); color:#7e7790; font-size: 0.67rem; font-weight:800;
}
.syn-pw .pw-ic { font-size: .78rem; filter:grayscale(.6); }
.syn-pw .pw-nm { overflow:hidden; max-width:96px; text-overflow:ellipsis; white-space:nowrap; }
.syn-pw .pw-st { font-variant-numeric:tabular-nums; }
.syn-pw.ready {
  border-color:color-mix(in srgb,var(--sc) 55%,transparent); color:var(--sc);
  background:color-mix(in srgb,var(--sc) 13%,transparent);
  box-shadow:0 0 9px color-mix(in srgb,var(--sc) 32%,transparent);
}
.syn-pw.ready .pw-ic { filter:none; }

/* ---------- Synergie-Karten & Erklärung ---------- */
.syn-panel { width:min(1040px,97vw); max-height:95vh; padding:25px clamp(16px,3vw,32px) 20px; }
.synergy-title-icon { color:#d7b3ff; }
.synergy-explainer {
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:9px;
  margin:4px 0 13px; padding:9px;
  border:1px solid rgba(190,142,255,.14); border-radius:14px; background:rgba(255,255,255,.025);
}
.synergy-explainer > div { display:flex; align-items:center; gap:8px; min-width:0; }
.synergy-explainer > i { color:#6e647c; font-style:normal; }
.synergy-explainer .se-icon { display:grid; width:34px; aspect-ratio:1; place-items:center; flex:0 0 auto; border-radius:10px; background:rgba(183,123,255,.09); }
.synergy-explainer b { display:block; color:#e7e0ed; font-size: 0.73rem; }
.synergy-explainer small { display:block; margin-top:2px; color:#8e8799; font-size: 0.7rem; }
.syn-build-summary { display:flex; align-items:center; gap:8px; min-height:34px; margin-bottom:8px; padding:7px 10px; border-radius:11px; color:#a9a0b2; background:linear-gradient(90deg,rgba(184,119,255,.08),rgba(90,210,255,.04)); font-size: 0.72rem; }
.syn-build-summary strong { color:#eee6f5; }
.syn-build-summary .summary-dot { color:#c68cff; text-shadow:0 0 7px #a862ff; }
.syn-grid { grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:9px; max-height:56vh; padding:5px; }
.syn-card {
  min-height:210px; gap:8px; padding:13px 14px 14px; border-radius:15px;
  opacity:1; filter:none; overflow:hidden;
  background:linear-gradient(155deg,color-mix(in srgb,var(--sc) 7%,rgba(10,14,28,.86)),rgba(7,9,21,.9));
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease;
  animation:synCardDeal .48s cubic-bezier(.16,1,.3,1) calc(var(--card-index,0) * 35ms) both;
}
.syn-card::before { content:""; position:absolute; right:-35px; top:-35px; width:115px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--sc) 18%,transparent),transparent 68%); pointer-events:none; }
.syn-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--sc) 65%,transparent); box-shadow:0 14px 32px rgba(0,0,0,.34),0 0 24px color-mix(in srgb,var(--sc) 10%,transparent); }
.syn-card.locked { opacity:.58; filter:saturate(.55); }
.syn-card.near { opacity:1; filter:none; border-color:color-mix(in srgb,var(--sc) 34%,transparent); }
.syn-card.active { border-color:color-mix(in srgb,var(--sc) 72%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--sc) 24%,transparent),0 0 24px color-mix(in srgb,var(--sc) 13%,transparent); }
.syn-card .sc-head { gap:9px; }
.syn-card .sc-ic { display:grid; width:39px; aspect-ratio:1; place-items:center; flex:0 0 auto; border:1px solid color-mix(in srgb,var(--sc) 30%,transparent); border-radius:11px; background:color-mix(in srgb,var(--sc) 8%,transparent); font-size: 1.35rem; }
.syn-card .sc-nm { font-size: .9rem; }
.syn-card .sc-sub { display:block; margin-top:2px; color:#8d8497; font-size: 0.7rem; font-weight:650; }
.syn-card .sc-status { padding:4px 8px; font-size: 0.7rem; letter-spacing:.05em; }
.syn-card.locked .sc-status { color:#9a91a2; background:rgba(255,255,255,.07); }
.syn-card.near .sc-status { color:var(--sc); background:color-mix(in srgb,var(--sc) 12%,transparent); }
/* Die Stufenleiter T1/T2/T3. Sie ist der Kern der Karte: erfüllte Stufen mit
   Haken, die nächste hervorgehoben, spätere blass. Erst diese Aufschlüsselung
   sagt dem Spieler, WAS er suchen soll – ein Prozentwert allein tut das nie. */
.syn-ladder { display:flex; flex-direction:column; gap:3px; }
.syn-tier-line {
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:8px;
  padding:5px 8px; border:1px solid transparent; border-radius:9px;
  background:rgba(255,255,255,.022); opacity:.55;
}
.syn-tier-line.done { opacity:1; background:color-mix(in srgb,var(--sc) 9%,rgba(255,255,255,.02)); }
.syn-tier-line.next { opacity:1; border-color:color-mix(in srgb,var(--sc) 45%,transparent); background:color-mix(in srgb,var(--sc) 6%,rgba(255,255,255,.03)); }
.syn-tier-line .stl-t { color:var(--sc); font-size: 0.72rem; font-weight:950; letter-spacing:.04em; }
.syn-tier-line .stl-need { display:flex; flex-wrap:wrap; gap:3px 8px; min-width:0; }
.stl-cell { color:#8d8497; font-size: 0.69rem; font-weight:700; white-space:nowrap; }
.stl-cell b { color:#cfc7d8; font-weight:900; font-variant-numeric:tabular-nums; }
.stl-cell.ok b { color:#8affc0; }
.syn-tier-line .stl-reward { color:#a49bb0; font-size: 0.68rem; font-weight:700; text-align:right; white-space:nowrap; }
.syn-tier-line.done .stl-reward, .syn-tier-line.next .stl-reward { color:var(--sc); }
.syn-tier-line .stl-mark { width:14px; font-size: 0.72rem; text-align:center; }

/* Der eine Satz, der im Gefecht zählt. Bewusst laut gesetzt. */
.syn-need {
  padding:7px 9px; border:1px solid color-mix(in srgb,var(--sc) 34%,transparent); border-radius:9px;
  background:color-mix(in srgb,var(--sc) 8%,transparent); color:#e2dbe9; font-size: 0.74rem;
}
.syn-need b { color:var(--sc); font-weight:900; }

/* Die beiden Fähigkeiten. Sie stehen auch dann da, wenn sie noch nicht laufen –
   sie sind der Grund, warum jemand überhaupt auf T2/T3 hinarbeitet. */
.sc-ability {
  display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:7px;
  padding:6px 8px; border:1px solid rgba(255,255,255,.06); border-radius:9px;
  background:rgba(255,255,255,.018); opacity:.6;
}
.sc-ability.on { opacity:1; border-color:color-mix(in srgb,var(--sc) 40%,transparent); background:color-mix(in srgb,var(--sc) 7%,transparent); }
.sc-ability .sca-t { color:var(--sc); font-size: 0.66rem; font-weight:950; letter-spacing:.06em; }
.sc-ability .sca-ic { font-size: 1rem; filter:grayscale(.6); }
.sc-ability.on .sca-ic { filter:drop-shadow(0 0 5px var(--sc)); }
.sc-ability .sca-copy { display:flex; flex-direction:column; min-width:0; }
.sc-ability .sca-copy b { color:#e0d9e8; font-size: 0.73rem; font-weight:850; }
.sc-ability .sca-copy span { color:#8d8497; font-size: 0.69rem; line-height:1.35; }
.sc-ability .sca-cd { color:#7d7589; font-size: 0.68rem; font-weight:800; font-variant-numeric:tabular-nums; }

/* Die zwei Combo-Partner jedes Elements – der Ring, sichtbar gemacht. */
.syn-combos { display:flex; flex-wrap:wrap; gap:4px; margin-top:auto; padding-top:6px; }
.syn-combo-tag {
  --cc:#bfe9ff;
  display:inline-flex; align-items:baseline; gap:4px;
  padding:3px 7px; border:1px dashed color-mix(in srgb,var(--cc) 30%,transparent); border-radius:99px;
  color:#8d8497; font-size: 0.68rem; font-weight:800;
}
.syn-combo-tag.on { border-style:solid; border-color:color-mix(in srgb,var(--cc) 62%,transparent); color:var(--cc); background:color-mix(in srgb,var(--cc) 11%,transparent); }
.syn-combo-tag em { color:#6f6880; font-size: 0.65rem; font-style:normal; font-weight:650; }
.syn-combo-tag.on em { color:color-mix(in srgb,var(--cc) 65%,#8d8497); }

.syn-card .sc-row { font-size: 0.73rem; line-height:1.42; }
.syn-card .sc-row b { font-size: 0.7rem; letter-spacing:.1em; }
/* Bei drei Stufen gibt es kein „apex" mehr – T3 ist der Höhepunkt selbst. */
.syn-card.t3 { border-color:color-mix(in srgb,var(--sc) 82%,white 18%); }

/* Synergiehinweise direkt auf Upgrade-Karten */
.choice.combo { border-color:color-mix(in srgb,var(--combo-color,#a879ff) 64%,transparent); }
.combo-hint { gap:6px; padding:0; border:0; background:transparent; }
.synergy-impact {
  --sic:#a879ff;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px;
  padding:7px 8px; border:1px solid color-mix(in srgb,var(--sic) 30%,transparent); border-radius:10px;
  /* Deckend: die Zeilen liegen als Einblendung ueber dem Kartentext. */
  color:#dad4e2; background:color-mix(in srgb,var(--sic) 14%,rgba(9,7,22,.98)); text-align:left;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.synergy-impact.unlock { border-color:color-mix(in srgb,var(--sic) 55%,transparent); box-shadow:0 0 14px color-mix(in srgb,var(--sic) 10%,transparent); }
.synergy-impact .si-icon { font-size: 1.05rem; filter:drop-shadow(0 0 5px var(--sic)); }
.synergy-impact .si-copy { display:flex; flex-direction:column; min-width:0; }
.synergy-impact .si-copy b { color:var(--sic); font-size: 0.7rem; letter-spacing:.1em; text-transform:uppercase; }
.synergy-impact .si-copy span { overflow:hidden; color:#cfc9d5; font-size: 0.71rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; text-shadow:none; }
.synergy-impact .si-count { color:var(--sic); font-size: 0.71rem; font-weight:950; text-shadow:0 0 7px color-mix(in srgb,var(--sic) 45%,transparent); }
.synergy-impact.evolution { --sic:#ffd35b; }
/* Combo-Zeilen bekommen einen Rahmen mehr Gewicht: sie sind die seltenere und
   damit interessantere Nachricht auf einer Karte. */
.synergy-impact.is-combo { border-style:solid; border-width:1.5px; }

/* Element-Abzeichen auf jeder Karte. Es beantwortet die Frage, die der Spieler
   sonst im Kopf gegen sein Inventar rechnen müsste: „welcher Synergie hilft
   das, und wo stehe ich damit?" */
.choice-element {
  --ec:#a879ff;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:5px;
  margin:5px 0 2px; padding:4px 8px;
  border:1px solid color-mix(in srgb,var(--ec) 38%,transparent); border-radius:99px;
  background:color-mix(in srgb,var(--ec) 10%,transparent);
  font-size: 0.71rem; font-weight:800;
}
.choice-element .ce-ic { font-size: .86rem; filter:drop-shadow(0 0 5px var(--ec)); }
.choice-element .ce-nm { color:var(--ec); font-weight:900; }
.choice-element .ce-tier { color:#8d8497; font-weight:900; font-variant-numeric:tabular-nums; }
.choice-element b { color:#cfc7d8; font-weight:800; font-variant-numeric:tabular-nums; }
.choice-element em { color:#8d8497; font-size: 0.68rem; font-style:normal; font-weight:700; }

/* ---------- Große Synergie-Freischaltung ---------- */
.synergy-toast-wrap { position:fixed; left:50%; top:17%; z-index:60; display:grid; gap:8px; width:min(520px,92vw); transform:translateX(-50%); pointer-events:none; }
.synergy-unlock-toast {
  --sc:#a879ff;
  position:relative; overflow:hidden; display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:12px;
  padding:12px 14px; border:1px solid color-mix(in srgb,var(--sc) 72%,transparent); border-radius:16px;
  color:#f7f2ff; background:linear-gradient(120deg,color-mix(in srgb,var(--sc) 20%,rgba(9,7,23,.97)),rgba(8,9,20,.97));
  box-shadow:0 20px 55px rgba(0,0,0,.55),0 0 35px color-mix(in srgb,var(--sc) 24%,transparent);
  animation:synergyToastIn .55s cubic-bezier(.16,1.3,.3,1) both,synergyToastOut .45s ease-in 3.25s forwards;
}
.synergy-unlock-toast::before { content:""; position:absolute; inset:-60% -30%; background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.2) 49%,transparent 57%); animation:synergyToastSheen 1.2s ease-out .25s both; }
.sut-icon { display:grid; width:54px; aspect-ratio:1; place-items:center; border:1px solid color-mix(in srgb,var(--sc) 48%,transparent); border-radius:15px; background:color-mix(in srgb,var(--sc) 12%,transparent); font-size: 1.75rem; filter:drop-shadow(0 0 8px var(--sc)); }
.sut-copy { display:flex; flex-direction:column; min-width:0; }
.sut-copy small { color:var(--sc); font-size: 0.7rem; font-weight:950; letter-spacing:.16em; }
.sut-copy strong { margin-top:2px; font-size: 1.05rem; }
.sut-copy span { margin-top:2px; color:#aaa0b1; font-size: 0.72rem; }
.sut-tier { padding:5px 8px; border-radius:999px; color:#07101b; background:var(--sc); font-size: 0.71rem; font-weight:950; }
/* Die dritte Stufe ist das seltene Ereignis eines Runs – nur sie bekommt den
   zusätzlichen Rahmen. T1 und T2 sollen sich unterscheiden, aber nicht
   gegenseitig überbieten. */
.synergy-unlock-toast.t3 { border-width:2px; border-color:color-mix(in srgb,var(--sc) 88%,white 12%); box-shadow:0 20px 55px rgba(0,0,0,.55),0 0 52px color-mix(in srgb,var(--sc) 42%,transparent); }
.synergy-unlock-toast.is-combo .sut-icon { border-radius:50%; }
.synergy-unlock-toast .sut-copy b { color:#e9e1f3; }

@keyframes gameOverlayIn { from { opacity:0; } }
@keyframes gameOverlayTurn { to { transform:rotate(360deg); } }
@keyframes gameModalEnter { from { opacity:0; transform:translateY(24px) scale(.94); } }
@keyframes modalCrestBreathe { 50% { opacity:.55; width:50%; } }
@keyframes modalRuneTurn { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes modalMote { 0%,100% { opacity:.12; transform:translateY(12px) rotate(0) scale(.5); } 50% { opacity:.7; transform:translateY(-18px) rotate(180deg) scale(1); } }
@keyframes modalEmblemHover { 50% { transform:translateY(-5px) rotate(4deg); box-shadow:0 0 38px color-mix(in srgb,var(--modal-accent) 35%,transparent); } }
@keyframes collectionCardIn { from { opacity:0; transform:translateY(18px) scale(.93); } }
@keyframes forgeCardIn { from { opacity:0; transform:translateY(18px) rotateX(8deg); } }
@keyframes forgePurchased { 45% { transform:scale(1.08); filter:brightness(1.45); box-shadow:0 0 35px rgba(201,152,255,.45); } }
@keyframes synCardDeal { from { opacity:0; transform:translateY(20px) scale(.94); } }
@keyframes synergyToastIn { from { opacity:0; transform:translateY(-30px) scale(.82); } }
@keyframes synergyToastOut { to { opacity:0; transform:translateY(-18px) scale(.94); } }
@keyframes synergyToastSheen { from { transform:translateX(-65%); } to { transform:translateX(65%); } }

@media (max-width: 720px) {
  .game-overlay { padding:9px; }
  .game-modal { max-height:97vh; }
  .modal-title-icon { width:46px; font-size: 1.35rem; }
  .modal-title-row h2 { font-size: 1.5rem; }
  .modal-title-row small { font-size: 0.7rem; }
  .collection-panel,.syn-panel { padding:20px 13px 15px; }
  .synergy-explainer { grid-template-columns:1fr; gap:6px; }
  .synergy-explainer > i { display:none; }
  .synergy-explainer > div { padding:4px; }
  .syn-grid { grid-template-columns:1fr; max-height:57vh; }
  .syn-card { min-height:0; }
  .synergy-next { grid-template-columns:1fr; }
  .go-panel .go-stats { grid-template-columns:repeat(2,1fr); }
  .go-panel .go-actions { grid-template-columns:1fr; }
  .run-recap { grid-template-columns:1fr; }
  .run-recap-card.full { grid-column:auto; }
  .death-source-row { grid-template-columns:84px 1fr 64px; }
  .ach-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ach-card { min-height:105px; }
  .forge-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 430px) {
  .ach-grid,.forge-grid { grid-template-columns:1fr; }
  .modal-title-row { gap:8px; }
  .collection-panel .ach-count { min-width:65px; padding:6px 8px; font-size: 0.72rem; }
  .synergy-unlock-toast { grid-template-columns:46px 1fr; }
  .sut-icon { width:44px; }
  .sut-tier { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .game-overlay, .game-overlay::before, .game-modal, .game-modal::after,
  .modal-energy::before, .modal-energy span, .modal-emblem, .ach-card,
  .forge-upgrade, .syn-card, .synergy-unlock-toast, .synergy-unlock-toast::before {
    animation:none !important;
  }
  .game-modal, .ach-card, .forge-upgrade, .syn-card, .syn-lead, .syn-combo,
  .syn-chip, .syn-lead .snp-bar i, .collection-progress span { transition:none !important; }
  .ach-card:hover, .forge-upgrade:hover:not(:disabled), .syn-card:hover,
  .syn-chip:hover { transform:none !important; }
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(120, 170, 255, 0.3);
  border-radius: 8px;
}

/* ======================================================================
   Landingpage / SEO-Layer (Nav, Hero-Logo, Inhalts-Sektionen, FAQ, Footer)
   Ergaenzt das bestehende Startmenue, ohne das Spiel-Layout zu aendern.
   ====================================================================== */

/* Sprachumschaltung (kritische Regeln stehen zusaetzlich inline im <head>) */
[data-l] { display: none; }
:root[lang="en"] [data-l="en"],
:root[lang="de"] [data-l="de"] { display: revert; }

/* Menue-Inhalt nun oben ausrichten (Hero fuellt die erste Ansicht selbst) */
#menu.menu-screen .menu-content {
  justify-content: flex-start;
  gap: 0;
}

/* Accessibility: Skip-Link */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 40;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: #06101f;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 12px; }

/* ---------- Navigation ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  margin-bottom: clamp(10px, 2vh, 20px);
  background: linear-gradient(180deg, rgba(8, 10, 20, 0.88) 40%, rgba(8, 10, 20, 0.35));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(146, 132, 255, 0.22);
}
.site-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: 0.4px;
}
.site-nav .brand-mark { display: block; filter: drop-shadow(0 2px 6px rgba(150, 110, 255, 0.5)); }
.site-nav .brand-word {
  background: linear-gradient(90deg, #c6b3ff, #ff9fe0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.86rem;
}
.lang-switch a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 8px;
}
.lang-switch a:hover { color: var(--text); }
.lang-switch a[aria-current="true"] {
  color: #06101f;
  background: linear-gradient(90deg, #7fd6ff, #b79bff);
}

/* ---------- Hero (Logo + Spiel fuellen die erste Ansicht) ---------- */
.hero-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 26px);
  min-height: calc(100vh - 72px);
  padding-bottom: 8px;
}
.hero-head { text-align: center; }
.brand-logo {
  display: block;
  width: min(300px, 60vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 10px 30px rgba(140, 90, 255, 0.45));
  animation: logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat {
  50% { transform: translateY(-8px); }
}
.hero-head .game-title {
  margin-top: 12px;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
}
.title-sub {
  display: block;
  margin-top: 6px;
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #cdbcff;
  -webkit-text-fill-color: #cdbcff;
  filter: none;
}
.hero-head .subtitle {
  max-width: 620px;
  margin: 10px auto 0;
}

/* Scroll-Hinweis unter dem Hero */
.scroll-cue {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.15s;
}
.scroll-cue:hover { color: var(--text); }
.scroll-cue .chev { animation: cueBounce 1.8s ease-in-out infinite; }

/* Deutlicher Hinweis, dass unterhalb des Hero der Shop (Seelenschmiede) wartet. */
.scroll-cue-shop {
  gap: 12px;
  margin: 0 0 10px;
  padding: 10px 18px 10px 12px;
  border: 1px solid rgba(154, 128, 255, 0.34);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(154, 128, 255, 0.16), rgba(11, 14, 26, 0.6));
  box-shadow: 0 6px 24px rgba(60, 30, 130, 0.28);
  color: #e9e4ff;
  text-align: left;
  animation: cueGlow 2.8s ease-in-out infinite;
}
.scroll-cue-shop:hover { color: #fff; border-color: rgba(184, 160, 255, 0.6); }
.scroll-cue-shop .cue-badge {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(154, 128, 255, 0.24);
  color: #f0ebff;
}
.scroll-cue-shop .cue-badge svg { width: 18px; height: 18px; display: block; }
.scroll-cue-shop .cue-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  border-left: 1px solid rgba(154, 128, 255, 0.28);
  color: #b7ade0;
}
.scroll-cue-shop .cue-scroll small {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.scroll-cue-shop .cue-copy { display: flex; flex-direction: column; gap: 1px; }
.scroll-cue-shop .cue-copy strong { font-size: 0.86rem; font-weight: 800; }
.scroll-cue-shop .cue-copy small { font-size: 0.72rem; font-weight: 600; color: #b7ade0; }
@keyframes cueGlow {
  0%, 100% { box-shadow: 0 6px 24px rgba(60, 30, 130, 0.28); }
  50% { box-shadow: 0 6px 30px rgba(140, 100, 255, 0.46); }
}
@media (max-width: 560px) {
  .scroll-cue-shop { gap: 9px; padding: 8px 13px 8px 9px; }
  .scroll-cue-shop .cue-copy strong { font-size: 0.76rem; }
  .scroll-cue-shop .cue-copy small { display: none; }
  .scroll-cue-shop .cue-scroll small { display: none; }
  .scroll-cue-shop .cue-scroll { padding-left: 7px; }
}
@keyframes cueBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ---------- Inhalts-Sektionen ---------- */
.site-sections {
  display: block;
  width: 100%;
  padding-top: clamp(20px, 5vh, 60px);
}
.site-section {
  max-width: 860px;
  margin: 0 auto clamp(14px, 2.2vh, 22px);
  padding: clamp(20px, 3vw, 34px);
  background: rgba(11, 14, 26, 0.74);
  border: 1px solid rgba(146, 132, 255, 0.28);
  border-radius: 18px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(180, 180, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  scroll-margin-top: 76px;
}
.site-section h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  letter-spacing: 0.4px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #7fd6ff, #b79bff, #ffd35b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.site-section p {
  color: #d3d9f2;
  line-height: 1.72;
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
}
.site-section p + p { margin-top: 12px; }
.text-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(74, 168, 255, 0.4);
}
.text-link:hover { color: #8fd0ff; border-color: #8fd0ff; }

/* ---------- Changelog ---------- */
.changelog-section {
  border-color: rgba(117, 214, 255, 0.34);
  background:
    radial-gradient(circle at 100% 0%, rgba(84, 184, 255, 0.13), transparent 34%),
    rgba(11, 14, 26, 0.82);
}
.changelog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.changelog-kicker {
  display: block;
  margin-bottom: 7px;
  color: #8fe1ff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.changelog-head h2 { margin-bottom: 6px; }
.changelog-head p { max-width: 600px; font-size: 0.95rem; line-height: 1.55; }
.version-chip {
  flex: 0 0 auto;
  min-width: 126px;
  padding: 9px 12px;
  border: 1px solid rgba(135, 226, 255, 0.35);
  border-radius: 12px;
  background: rgba(91, 193, 255, 0.09);
  text-align: right;
}
.version-chip span { display: block; color: #a9b5d1; font-size: 0.73rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.version-chip strong { color: #d9f7ff; font-size: 1rem; }
.changelog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.changelog-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 15px;
  border: 1px solid rgba(173, 178, 255, 0.2);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(45, 51, 88, 0.54), rgba(10, 13, 27, 0.62));
  box-shadow: inset 0 1px rgba(255,255,255,0.06);
}
.changelog-card:first-child { border-color: rgba(110, 221, 255, 0.52); }
.changelog-card-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; color: #a9b5d1; font-size: 0.75rem; }
.changelog-card-version { color: #86e2ff; font-weight: 800; letter-spacing: 0.04em; }
.changelog-card-date { white-space: nowrap; }
.changelog-card h3 { margin: 11px 0 7px; color: #f3f6ff; font-size: 1rem; line-height: 1.25; }
.changelog-card > p { margin: 0; color: #c9d1e9; font-size: 0.86rem; line-height: 1.58; }
.changelog-card details { margin-top: auto; padding-top: 13px; }
.changelog-card summary { cursor: pointer; color: #9bdfff; font-size: 0.82rem; font-weight: 700; list-style: none; }
.changelog-card summary::-webkit-details-marker { display: none; }
.changelog-card summary::after { content: '＋'; float: right; color: #d9b7ff; font-size: 1rem; line-height: 0.75; }
.changelog-card details[open] summary::after { content: '−'; }
.changelog-card ul { margin: 10px 0 0; padding-left: 18px; color: #cbd4ed; font-size: 0.8rem; line-height: 1.52; }
.changelog-card li + li { margin-top: 5px; }
.changelog-status { margin: 13px 0 0; color: #8e9ab8; font-size: 0.78rem !important; }
.changelog-status:empty { display: none; }
.changelog-loading { display: flex; gap: 7px; align-items: center; min-height: 56px; color: #9bdfff; }
.changelog-loading span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: changelogPulse 1.1s ease-in-out infinite; }
.changelog-loading span:nth-child(2) { animation-delay: 0.15s; }.changelog-loading span:nth-child(3) { animation-delay: 0.3s; }
@keyframes changelogPulse { 50% { opacity: 0.25; transform: translateY(-3px); } }

/* ---------- FAQ ---------- */
.faq-item {
  border: 1px solid rgba(146, 132, 255, 0.22);
  border-radius: 12px;
  margin-top: 10px;
  background: rgba(8, 10, 20, 0.4);
  overflow: hidden;
}
.faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  color: var(--accent2);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.2s;
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item .faq-a {
  padding: 0 16px 15px;
}
.faq-item .faq-a p {
  font-size: 0.98rem;
  line-height: 1.68;
}

/* ---------- Footer ---------- */
.site-footer {
  max-width: 860px;
  margin: clamp(16px, 3vh, 30px) auto 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(146, 132, 255, 0.2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  color: var(--muted);
  font-size: 0.9rem;
}
.site-footer .foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-footer .foot-brand strong { color: var(--text); display: block; }
.site-footer .foot-brand div span { font-size: 0.84rem; }
.site-footer .foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-left: auto;
}
.site-footer .foot-links a {
  color: var(--muted);
  text-decoration: none;
}
.site-footer .foot-links a:hover { color: var(--text); }
.site-footer .foot-copy { width: 100%; opacity: 0.7; }

/* ---------- Responsiv ---------- */
@media (max-width: 720px) {
  .lang-switch { margin-left: auto; }
  .hero-screen { min-height: auto; padding-top: 6px; }
  .brand-logo { width: min(230px, 62vw); }
  .changelog-head { flex-direction: column; }
  .version-chip { text-align: left; }
  .changelog-grid { grid-template-columns: 1fr; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .brand-logo, .scroll-cue .chev, .scroll-cue-shop, .changelog-loading span,
  #bossReward, #bossReward::before, #bossReward::after, .boss-reward-scene,
  .boss-reward-kicker, .boss-reward-scene h2, .ritual-ring, .ritual-core,
  .boss-light-rays, .boss-chest-orbit, .boss-chest-image-wrap, .boss-chest-image,
  .boss-chest-aura, .boss-latch-flare, .boss-spark-field span, .boss-chest-open-btn,
  .boss-chest-open-btn::before, .boss-glitter-rain span, .loot-origin-badge,
  #choices.choice-deal .choice, .choice.is-picked, .weapon-chip, .hud-pop, .choice-back,
  .bar-fill::after, .gs-click-ripple, .bar.hp.low { animation: none !important; }
  .bar.hp.low { box-shadow: 0 0 12px 2px rgba(255, 40, 70, 0.5); }
  .choice:hover, .choice.focus { transform: translateY(-3px); }
  .choice-back { display: none; }
  html { scroll-behavior: auto; }
}

/* ======================================================================
   GhostSiege Landing v2 — Premium Game Launcher
   Diese klar abgegrenzte Schicht gestaltet nur #menu; das Spiel-HUD bleibt
   bewusst unberührt.
   ====================================================================== */

#menu.menu-screen {
  --land-bg: #070811;
  --land-panel: rgba(11, 12, 25, 0.9);
  --land-panel-solid: #101225;
  --land-line: rgba(182, 173, 255, 0.22);
  --land-line-hot: rgba(162, 125, 255, 0.58);
  --land-copy: #f7f5ff;
  --land-muted: #a9a6c4;
  --land-purple: #9a6cff;
  --land-pink: #ff66c4;
  --land-cyan: #65ddff;
  --land-gold: #ffd477;
  display: block;
  height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  color: var(--land-copy);
  background-color: var(--land-bg);
  background-image:
    radial-gradient(85% 60% at 50% 8%, rgba(76, 45, 170, 0.18), transparent 72%),
    linear-gradient(180deg, rgba(5, 6, 14, 0.1) 0%, rgba(5, 6, 14, 0.46) 52%, #070811 100%),
    url("/assets/bg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: max(1280px, 100vw) auto;
  font-family: "Segoe UI Variable Text", "Aptos", "Segoe UI", system-ui, sans-serif;
  user-select: text;
  -webkit-user-select: text;
}

#menu.menu-screen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: max(100vh, 720px);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 5, 12, 0.72), transparent 27%, transparent 73%, rgba(4, 5, 12, 0.72)),
    radial-gradient(circle at 50% 35%, transparent 0 22%, rgba(5, 6, 14, 0.22) 58%, rgba(5, 6, 14, 0.8) 100%);
}

#menu.menu-screen::after {
  content: "";
  position: absolute;
  top: min(100vh, 900px);
  left: 0;
  right: 0;
  height: 420px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, #070811 30%);
}

#menu .menu-content {
  position: relative;
  z-index: 2;
  display: block;
  width: min(1460px, 100%);
  min-height: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 44px) 56px;
  animation: landingReveal 0.65s ease-out both;
}

@keyframes landingReveal {
  from { opacity: 0; transform: translateY(8px); }
}

#menu button,
#menu a,
#menu input,
#menu summary { font: inherit; }

#menu button,
#menu a { -webkit-tap-highlight-color: transparent; }

#menu :is(a, button, input, summary):focus-visible {
  outline: 3px solid var(--land-cyan);
  outline-offset: 3px;
}

#menu [hidden] { display: none !important; }

#menu .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#menu .skip-link {
  left: 18px;
  top: -70px;
  z-index: 100;
  color: #080914;
  background: var(--land-cyan);
}

#menu .skip-link:focus { top: 16px; }

/* Ambient spirits */
#menu .menu-atmosphere {
  position: absolute;
  inset: 0;
  height: max(100vh, 720px);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

#menu .spirit {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d6c8ff;
  box-shadow: 0 0 12px 5px rgba(143, 102, 255, 0.55), 0 0 34px 12px rgba(89, 50, 196, 0.28);
  animation: spiritDrift 8s ease-in-out infinite;
}

#menu .spirit::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 4px;
  width: 4px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(195, 173, 255, 0.42), transparent);
  transform: rotate(-12deg);
}

#menu .spirit-one { left: 7%; top: 25%; }
#menu .spirit-two { right: 8%; top: 18%; animation-delay: -3s; animation-duration: 10s; }
#menu .spirit-three { right: 26%; top: 66%; animation-delay: -5s; animation-duration: 12s; }

@keyframes spiritDrift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.42; }
  50% { transform: translate3d(12px, -28px, 0); opacity: 0.9; }
}

#menu .arcane-ring {
  position: absolute;
  width: 360px;
  aspect-ratio: 1;
  border: 1px solid rgba(152, 118, 255, 0.14);
  border-radius: 50%;
  opacity: 0.52;
}

#menu .arcane-ring::before,
#menu .arcane-ring::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px dashed rgba(112, 205, 255, 0.13);
  border-radius: inherit;
}

#menu .arcane-ring::after { inset: 28%; border-style: solid; }
#menu .ring-one { left: -210px; top: 62%; animation: ringSpin 40s linear infinite; }
#menu .ring-two { right: -250px; top: 8%; animation: ringSpin 55s linear infinite reverse; }

@keyframes ringSpin { to { transform: rotate(360deg); } }

/* Navigation */
#menu .site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(197, 186, 255, 0.13);
  background: linear-gradient(180deg, rgba(7, 8, 17, 0.96), rgba(7, 8, 17, 0.78));
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

#menu .site-nav .brand {
  flex: 0 0 auto;
  gap: 10px;
  color: #fff;
  font-family: "Segoe UI Variable Display", "Bahnschrift", "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#menu .site-nav .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  filter: drop-shadow(0 0 10px rgba(156, 98, 255, 0.65));
}

#menu .site-nav .brand-word {
  background: none;
  color: #f4efff;
  -webkit-text-fill-color: currentColor;
}

#menu .live-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border: 1px solid rgba(112, 232, 173, 0.22);
  border-radius: 999px;
  color: #c8f6dc;
  background: rgba(32, 113, 74, 0.14);
  font-size: 0.81rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  padding: 7px 10px;
}

#menu .live-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #65e89f;
  box-shadow: 0 0 8px #65e89f;
}

#menu .lang-switch {
  flex: 0 0 auto;
  gap: 2px;
  margin-left: 0;
  padding: 3px;
  border: 1px solid rgba(190, 180, 255, 0.16);
  border-radius: 10px;
  color: #66617d;
  background: rgba(10, 11, 24, 0.56);
}

#menu .lang-switch a {
  min-width: 34px;
  padding: 6px 7px;
  color: #8f8ba4;
  text-align: center;
  border-radius: 7px;
  font-size: 0.81rem;
}

#menu .lang-switch a[aria-current="true"] {
  color: #fff;
  background: rgba(141, 100, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(186, 157, 255, 0.25);
}

/* First viewport: Marken-Band oben, darunter zwei Karten, darunter die
   Shop-Leiste. Alle drei Zeilen teilen sich dieselbe Maximalbreite. */
#menu .hero-screen {
  --launcher-w: 1230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.5vh, 16px);
  min-height: calc(100vh - 66px);
  min-height: calc(100dvh - 66px);
  padding: clamp(10px, 1.6vh, 20px) 0 12px;
}

#menu .launcher-grid {
  width: min(var(--launcher-w), 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(430px, 1.28fr) minmax(300px, 1fr);
  /* Karten oben buendig, jede so hoch wie ihr Inhalt. Sie zwangsweise auf
     dieselbe Hoehe zu strecken erzeugt in der kuerzeren Karte nur eine Luecke –
     spuerbar, seit die Heldendetails zugeklappt starten. */
  align-items: start;
  gap: clamp(14px, 1.5vw, 22px);
}

#menu .launcher-grid:has(.board-card.hidden),
#menu .launcher-grid.board-disabled {
  max-width: 720px;
  grid-template-columns: minmax(0, 1fr);
}

/* Marken-Band: kleines Logo | Titel + Untertitel | Chips + Fakten rechts. */
#menu .hero-head {
  position: relative;
  z-index: 1;
  width: min(var(--launcher-w), 100%);
  min-width: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(14px, 2vw, 28px);
  row-gap: 10px;
  padding: 0 4px;
  text-align: left;
}

#menu .hero-copy { min-width: 0; }

#menu .hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

#menu .eyebrow,
#menu .section-kicker,
#menu .panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #bda9ff;
  font-size: 0.81rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#menu .eyebrow > span[aria-hidden] { color: var(--land-gold); }

#menu .brand-logo {
  width: clamp(96px, 8.4vw, 128px);
  height: auto;
  margin: -6px 0 -12px;
  animation: logoBreathe 6s ease-in-out infinite;
  filter: drop-shadow(0 12px 24px rgba(23, 5, 70, 0.75)) drop-shadow(0 0 16px rgba(144, 80, 255, 0.24));
}

@keyframes logoBreathe {
  50% { transform: translateY(-5px); filter: drop-shadow(0 20px 38px rgba(23, 5, 70, 0.8)) drop-shadow(0 0 28px rgba(144, 80, 255, 0.34)); }
}

#menu .hero-head .game-title {
  margin: 5px 0 0;
  color: #fff;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: "Segoe UI Variable Display", "Bahnschrift", "Segoe UI", sans-serif;
  font-size: clamp(1.45rem, 1.9vw, 2.1rem);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -0.04em;
  filter: none;
  text-wrap: balance;
}

#menu .hero-head .subtitle {
  max-width: 64ch;
  margin: 7px 0 0;
  color: #c1bdd1;
  font-size: clamp(0.82rem, 0.9vw, 0.9rem);
  line-height: 1.5;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}

#menu .instant-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
}

#menu .instant-proof > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(198, 187, 255, 0.16);
  border-radius: 999px;
  color: #cbc8d8;
  background: rgba(9, 10, 22, 0.52);
  font-size: 0.81rem;
  font-weight: 650;
  backdrop-filter: blur(8px);
}

#menu .instant-proof b { color: var(--land-cyan); font-size: 0.85rem; }

#menu .game-facts {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  border: 1px solid rgba(199, 190, 255, 0.14);
  border-radius: 999px;
  background: rgba(9, 10, 22, 0.52);
  backdrop-filter: blur(8px);
}

#menu .game-facts > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 6px 13px;
}

#menu .game-facts > span + span { border-left: 1px solid rgba(199, 190, 255, 0.12); }
#menu .game-facts strong { color: #fff; font-size: 0.94rem; line-height: 1; }
#menu .game-facts small { color: #9692aa; font-size: 0.77rem; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.08em; }

#menu .motd-notice {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  padding: 9px 11px;
  border-color: rgba(255, 211, 103, 0.32);
  color: #ffe9a8;
  background: rgba(70, 46, 8, 0.5);
  font-size: 0.83rem;
}

/* Shared launcher cards */
#menu .menu-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--land-line);
  border-radius: 22px;
  color: var(--land-copy);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.035), transparent 28%),
    linear-gradient(180deg, rgba(16, 17, 36, 0.96), rgba(8, 9, 21, 0.94));
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 1px rgba(255,255,255,0.06);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

#menu .menu-card::after {
  content: "";
  position: absolute;
  inset: auto 12% -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--land-purple), var(--land-cyan), transparent);
  opacity: 0.7;
}

#menu .play-card {
  display: flex;
  flex-direction: column;
  padding: clamp(17px, 1.7vw, 24px);
  border-color: rgba(165, 136, 255, 0.38);
  box-shadow: 0 30px 80px rgba(0,0,0,0.52), 0 0 42px rgba(91, 43, 201, 0.11), inset 0 1px rgba(255,255,255,0.07);
}

#menu .card-ornament {
  position: absolute;
  top: -90px;
  right: -85px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(157, 120, 255, 0.18);
  border-radius: 50%;
  box-shadow: inset 0 0 0 22px rgba(122, 79, 234, 0.025), inset 0 0 0 42px rgba(122, 79, 234, 0.02);
  pointer-events: none;
}

#menu .launcher-card-head,
#menu .board-head,
#menu .field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#menu .launcher-card-head { margin-bottom: 14px; }
#menu .launcher-card-head h2,
#menu .board-title {
  margin: 3px 0 0;
  color: #fff;
  font-family: "Segoe UI Variable Display", "Bahnschrift", "Segoe UI", sans-serif;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* Solo stays the zero-friction default; team setup expands only on demand. */
#menu .play-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 13px;
  padding: 4px;
  border: 1px solid rgba(181, 169, 229, 0.17);
  border-radius: 13px;
  background: rgba(3, 4, 12, 0.52);
}

#menu .play-mode-tab {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #aaa6bb;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: color 0.16s, border-color 0.16s, background-color 0.16s, transform 0.16s;
}

#menu .play-mode-tab:hover {
  color: #f4f1ff;
  background: rgba(255,255,255,0.035);
}

#menu .play-mode-tab[aria-selected="true"],
#menu .play-mode-tab.active {
  color: #fff;
  border-color: rgba(162, 126, 255, 0.45);
  background: linear-gradient(120deg, rgba(132, 83, 235, 0.24), rgba(83, 186, 224, 0.09));
  box-shadow: inset 0 1px rgba(255,255,255,0.055);
}

#menu .mode-icon {
  color: var(--land-purple);
  font-size: 0.83rem;
  letter-spacing: -0.35em;
  text-shadow: 0 0 12px rgba(154, 108, 255, 0.45);
}

#menu .mode-icon-team { color: var(--land-cyan); text-shadow: 0 0 12px rgba(101, 221, 255, 0.35); }
#menu .mode-copy { display: block; min-width: 0; }
#menu .mode-copy strong { display: block; font-size: 0.82rem; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; }
#menu .mode-copy small { display: block; overflow: hidden; margin-top: 2px; color: #777287; font-size: 0.77rem; text-overflow: ellipsis; white-space: nowrap; }
#menu .mode-new {
  padding: 3px 5px;
  border-radius: 999px;
  color: #071015;
  background: var(--land-cyan);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
#menu .mode-check { display: none; color: var(--land-cyan); font-size: 0.81rem; font-weight: 900; }
#menu .play-mode-tab[aria-selected="true"] .mode-check,
#menu .play-mode-tab.active .mode-check { display: inline; }
#menu .play-mode-tab[aria-selected="true"] .mode-new,
#menu .play-mode-tab.active .mode-new { display: none; }

#menu .name-box {
  margin: 0 0 12px;
  text-align: left;
}

#menu .field-label-row { margin-bottom: 6px; }
#menu .name-box label,
#menu .hero-select > label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #dcd8ea;
  font-size: 0.81rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#menu .field-label-row > span {
  color: #77728c;
  font-size: 0.77rem;
  font-weight: 750;
  letter-spacing: 0.1em;
}

#menu .step-number { color: var(--land-cyan); font-size: 0.78rem; }

#menu #nameInput {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid rgba(179, 167, 225, 0.22);
  border-radius: 11px;
  color: #fff;
  background: rgba(4, 5, 14, 0.62);
  box-shadow: inset 0 1px 8px rgba(0,0,0,0.24);
  font-size: 1rem;
  font-weight: 600;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

#menu #nameInput::placeholder { color: #716c83; font-weight: 500; }
#menu #nameInput:hover { border-color: rgba(188, 168, 255, 0.4); }
#menu #nameInput:focus { border-color: var(--land-purple); background: rgba(6, 7, 18, 0.84); box-shadow: 0 0 0 3px rgba(149, 101, 255, 0.15); }
#menu #nameInput.name-invalid { border-color: #ff718f; box-shadow: 0 0 0 3px rgba(255, 88, 121, 0.13); }

#menu .name-help {
  min-height: 13px;
  margin: 3px 1px 0;
  color: #77738b;
  font-size: 0.79rem;
  line-height: 1.25;
}

#menu .name-help.error { color: #ff91a8; }

#menu .hero-select { margin: 0 0 12px; text-align: left; }
#menu .hero-select > label { margin-bottom: 7px; }

#menu .hero-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

/* Das Skin-Fenster schwebt ueber der Kartenreihe - das Raster darf es also
   nicht mehr als eigene Zelle behandeln und auch nicht beschneiden. */
#menu .hero-cards { position: relative; overflow: visible; }

#menu .hero-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1.04;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(177, 165, 222, 0.22);
  border-radius: 11px;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--hc, #8f74ff) 20%, transparent), transparent 65%),
    rgba(5, 6, 15, 0.82);
  filter: saturate(0.72) brightness(0.74);
  transform: none;
  transition: border-color 0.16s, filter 0.16s, transform 0.16s, box-shadow 0.16s;
}

#menu .hero-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(4,5,13,0.9));
}

#menu .hero-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  transform: scale(1.08);
  transition: transform 0.2s ease;
}

#menu .hero-card:hover {
  border-color: color-mix(in srgb, var(--hc, #fff) 65%, #fff 5%);
  filter: saturate(1) brightness(0.95);
  transform: translateY(-2px);
}

#menu .hero-card:hover img { transform: scale(1.14); }

#menu .hero-card.sel {
  border-color: var(--hc, #fff);
  filter: saturate(1.05) brightness(1.02);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hc, #fff) 48%, transparent), 0 8px 22px color-mix(in srgb, var(--hc, #fff) 20%, transparent);
}

#menu .hero-card.sel img { transform: scale(1.14); }

/* Blickrichtung der Heldenkarten: wer nicht gewaehlt ist, dreht dir den Ruecken
   zu (…2.png). Beim Auswaehlen dreht sich der Held zu dir um (Crossfade). */
.hero-card .hc-front,
.hero-card .hc-back,
#menu .hero-card .hc-front,
#menu .hero-card .hc-back {
  position: absolute;
  inset: 0;
  transition: transform 0.2s ease, opacity 0.26s ease;
}
.hero-card .hc-front,
#menu .hero-card .hc-front { opacity: 0; }
.hero-card.sel .hc-front,
#menu .hero-card.sel .hc-front { opacity: 1; }
.hero-card .hc-back,
#menu .hero-card .hc-back { opacity: 1; }
.hero-card.sel .hc-back,
#menu .hero-card.sel .hc-back { opacity: 0; }

/* Maus drueber: der Held dreht sich schon beim Hover um, auch ohne Klick.
   Auf Touch-Geraeten (kein echter Hover) bleibt es beim Klick-Verhalten. */
@media (hover: hover) {
  .hero-card:hover .hc-front, .hero-card:focus-visible .hc-front,
  #menu .hero-card:hover .hc-front, #menu .hero-card:focus-visible .hc-front { opacity: 1; }
  .hero-card:hover .hc-back, .hero-card:focus-visible .hc-back,
  #menu .hero-card:hover .hc-back, #menu .hero-card:focus-visible .hc-back { opacity: 0; }
}

#menu .hero-card .hc-name {
  position: absolute;
  z-index: 2;
  left: 4px;
  right: 4px;
  bottom: 5px;
  overflow: hidden;
  color: #f8f6ff;
  font-size: clamp(0.75rem, 0.65vw, 0.8rem);
  font-weight: 750;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#menu .hero-card .hc-check {
  top: 5px;
  right: 5px;
  z-index: 3;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  color: #080914;
  background: var(--hc, #fff);
  font-size: 0.78rem;
  font-weight: 900;
  text-shadow: none;
}

#menu .hero-info {
  min-height: 90px;
  margin-top: 8px;
  padding: 10px 11px;
  border: 1px solid rgba(182, 170, 226, 0.16);
  border-radius: 11px;
  background: rgba(4, 5, 14, 0.5);
  font-size: 0.83rem;
}

/* Zugeklappt braucht der Block nur die Kopfzeile – die Mindesthoehe aus den
   Breiten-Regeln wuerde sonst leeren Raum reservieren. Die :not()-Regel ist
   spezifischer als jede `#menu .hero-info`-Regel und gewinnt unabhaengig von
   der Reihenfolge. */
#menu .hero-info:not(.is-open) { min-height: 0; }
#menu .hero-info:not(.is-open) .hero-info-body { display: none; }

#menu .hero-info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Kleiner Aufklapp-Knopf ganz rechts in der Kopfzeile. */
#menu .hero-info .hi-expand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 3px 7px;
  border: 1px solid rgba(182, 170, 226, 0.24);
  border-radius: 999px;
  color: #a9a3bd;
  background: rgba(255, 255, 255, 0.03);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s, background-color 0.16s;
}

#menu .hero-info .hi-expand:hover {
  color: #fff;
  border-color: var(--hero-color, var(--land-purple));
  background: rgba(255, 255, 255, 0.07);
}

#menu .hero-info .hi-expand:focus-visible { outline: 2px solid var(--hero-color, var(--land-purple)); outline-offset: 2px; }

#menu .hero-info .hi-expand-chev {
  font-size: 0.83rem;
  line-height: 0.6;
  transition: transform 0.18s ease;
}

#menu .hero-info.is-open .hi-expand { color: #e8e5f1; border-color: color-mix(in srgb, var(--hero-color, #8f74ff) 45%, transparent); }
#menu .hero-info.is-open .hi-expand-chev { transform: rotate(180deg); }

#menu .hero-name-wrap { display: flex; align-items: center; gap: 7px; min-width: 0; }
#menu .hero-info .hi-name { font-size: 0.94rem; font-weight: 800; }
#menu .hero-info .hi-tag {
  flex: 0 0 auto;
  margin: 0;
  padding: 3px 7px;
  color: #070812;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

#menu .hero-info .hi-playstyle { color: #8f8aa1; font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; }

#menu .hero-stats {
  display: grid;
  grid-template-columns: 1.15fr 0.8fr 1.2fr;
  gap: 5px;
  margin-top: 7px;
}

#menu .hero-stat {
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(178, 166, 222, 0.13);
}

#menu .hero-stat span { display: block; color: #6f6b80; font-size: 0.75rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; }
#menu .hero-stat strong { display: block; overflow: hidden; margin-top: 2px; color: #e8e5f1; font-size: 0.79rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

#menu .btn-play {
  position: relative;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 13px 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.23);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(105deg, #7450e8 0%, #a744e7 48%, #e34fae 100%);
  box-shadow: 0 13px 28px rgba(115, 52, 215, 0.34), inset 0 1px rgba(255,255,255,0.23);
  font-size: 0.98rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  animation: premiumPlayGlow 2.8s ease-in-out infinite;
}

#menu .btn-play::before {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -30%;
  width: 18%;
  background: rgba(255,255,255,0.28);
  filter: blur(8px);
  transform: skewX(-18deg);
  transition: left 0.45s ease;
}

#menu .btn-play::after { content: "  ↗"; font-weight: 500; }
#menu .btn-play:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 17px 36px rgba(145, 56, 225, 0.5); }
#menu .btn-play:hover::before { left: 115%; }
#menu .btn-play:active { transform: translateY(0); }
#menu .btn-play:disabled { cursor: not-allowed; opacity: 0.48; filter: saturate(0.55); animation: none; box-shadow: none; }
#menu .btn-play:disabled::after { content: ""; }

@keyframes premiumPlayGlow {
  50% { box-shadow: 0 15px 36px rgba(151, 61, 225, 0.5), 0 0 26px rgba(107, 210, 255, 0.08), inset 0 1px rgba(255,255,255,0.23); }
}

#menu .quick-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px 13px;
  margin-top: 9px;
  color: #858197;
  font-size: 0.78rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

#menu .quick-controls > span { display: inline-flex; align-items: center; gap: 5px; }
#menu .quick-controls kbd { padding: 3px 5px; border: 1px solid rgba(184, 174, 222, 0.25); border-radius: 5px; color: #d5d1e0; background: rgba(255,255,255,0.04); box-shadow: 0 2px rgba(0,0,0,0.35); font: inherit; }
#menu .quick-controls .auto-attack i { color: var(--land-gold); }

/* Aktionsleiste des Helden ueber der Heldenauswahl. */
#menu .play-card .hero-skin-row {
  margin: 0 0 12px;
}
/* Kein `margin-top: auto` auf dem Mode-Panel: der Start-Knopf folgt direkt auf
   die Heldenbox. Die ueberschuessige Hoehe faengt stattdessen die Bestenliste
   auf (siehe .board-card .score-list) – sonst klaffte bei zugeklappten
   Heldendetails eine Luecke ueber dem Knopf. */
#menu .play-card .mode-panel:not([hidden]) { margin-top: 0; }

/* Multiplayer lobby */
#menu .mode-panel:not([hidden]) { animation: modePanelIn 0.2s ease-out both; }
body[data-game-mode="team"] #menu #soloModePanel { display: none; }
@keyframes modePanelIn {
  from { opacity: 0; transform: translateY(5px); }
}

#menu .multiplayer-panel {
  padding-top: 2px;
  text-align: left;
}

#menu .mp-panel-head,
#menu .mp-room-head,
#menu .mp-lobby-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#menu .mp-panel-head { margin: 0 1px 9px; }
#menu .mp-panel-head h3,
#menu .mp-room-head h3 {
  margin: 2px 0 0;
  color: #f8f6ff;
  font-size: 0.9rem;
  line-height: 1.15;
}

#menu .mp-capacity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(101, 221, 255, 0.22);
  border-radius: 999px;
  color: #bcefff;
  background: rgba(62, 172, 213, 0.08);
  font-size: 0.78rem;
  font-weight: 850;
}

#menu .mp-capacity i,
#menu .mp-status::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--land-cyan);
  box-shadow: 0 0 8px rgba(101, 221, 255, 0.65);
}

/* Team-Aufbau: Online oder am selben PC. Schmalere Geschwister-Leiste der
   Modus-Reiter darueber - gleiche Sprache, eine Stufe leiser, damit die
   Hierarchie (Solo/Team zuerst, dann der Weg ins Team) lesbar bleibt. */
#menu .mp-channel-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 2px 0 9px;
  padding: 4px;
  border: 1px solid rgba(179, 166, 226, 0.14);
  border-radius: 11px;
  background: rgba(3, 4, 12, 0.4);
}
#menu .mp-channel-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
#menu .mp-channel-tab:hover { background: rgba(120, 170, 255, 0.09); color: var(--text); }
#menu .mp-channel-tab[aria-selected="true"] {
  border-color: rgba(120, 170, 255, 0.34);
  background: linear-gradient(150deg, rgba(30, 38, 66, 0.85), rgba(18, 22, 38, 0.6));
  color: var(--text);
}
#menu .mp-channel-icon { font-size: 1rem; line-height: 1; }
#menu .mp-channel-copy { display: grid; gap: 1px; min-width: 0; }
#menu .mp-channel-copy strong { font-size: 0.74rem; letter-spacing: 0.02em; }
#menu .mp-channel-copy small { font-size: 0.64rem; color: var(--muted); }
#menu .mp-channel-tab[aria-selected="true"] .mp-channel-copy small { color: rgba(180, 205, 255, 0.8); }

/* Im Kanal-Reiter steckt der Titel schon - der Block darunter braucht
   deshalb keinen zweiten Rahmen mit Abstand nach oben. */
#menu .coop-panel[role="tabpanel"] { margin-top: 0; }

#menu .mp-lobby-setup,
#menu .mp-lobby {
  padding: 10px;
  border: 1px solid rgba(179, 166, 226, 0.16);
  border-radius: 12px;
  background: rgba(3, 4, 12, 0.48);
}

#menu .mp-lobby:not(.hidden) { animation: modePanelIn 0.2s ease-out both; }
#menu .multiplayer-panel:has(#mpLobby:not(.hidden)) #mpLobbySetup { display: none; }
/* Steht die Lobby, ist der Weg hinein entschieden - die Wahl verschwindet. */
#menu .multiplayer-panel:has(#mpLobby:not(.hidden)) #mpChannelTabs { display: none; }
#menu .mp-lobby-setup + .mp-status { margin-top: 8px; }
#menu .multiplayer-panel:has(#mpLobby:not(.hidden)) > .mp-status { margin: 0 0 8px; }

#menu .mp-create-btn {
  display: grid;
  width: 100%;
  min-height: 52px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(158, 119, 255, 0.42);
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(110deg, rgba(118, 72, 223, 0.42), rgba(51, 150, 188, 0.18));
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s, background-color 0.16s, transform 0.16s;
}

#menu .mp-create-btn:hover { border-color: rgba(181, 149, 255, 0.75); transform: translateY(-1px); }
#menu .mp-create-btn strong { display: block; font-size: 0.82rem; letter-spacing: 0.025em; }
#menu .mp-create-btn small { display: block; margin-top: 2px; color: #aaa4bd; font-size: 0.77rem; }
#menu .mp-button-icon {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  color: #070812;
  background: linear-gradient(135deg, var(--land-cyan), #a98bff);
  font-size: 1rem;
  font-weight: 900;
}

#menu .mp-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0;
  color: #6f6a7d;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
#menu .mp-divider::before,
#menu .mp-divider::after { content: ""; height: 1px; flex: 1; background: rgba(180, 167, 225, 0.13); }

#menu .mp-join-form,
#menu .mp-invite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

#menu #mpJoinCode,
#menu #mpInviteLink {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgba(179, 167, 225, 0.22);
  border-radius: 9px;
  outline: 0;
  color: #f6f3ff;
  background: rgba(4, 5, 14, 0.72);
  font-size: 0.83rem;
  font-weight: 650;
  transition: border-color 0.16s, box-shadow 0.16s;
}

#menu #mpJoinCode::placeholder { color: #706b7e; font-weight: 500; }
#menu #mpJoinCode:focus { border-color: var(--land-cyan); box-shadow: 0 0 0 3px rgba(101, 221, 255, 0.12); }
#menu #mpInviteLink { color: #aca7bb; font-size: 0.8rem; text-overflow: ellipsis; }

#menu #mpJoinBtn,
#menu #mpCopyLink,
#menu .mp-leave-btn,
#menu .mp-ready-btn,
#menu .mp-start-btn {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(170, 151, 230, 0.29);
  border-radius: 9px;
  color: #ece8f7;
  background: rgba(118, 84, 200, 0.17);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
  transition: border-color 0.16s, background-color 0.16s, transform 0.16s, opacity 0.16s;
}

#menu #mpJoinBtn:hover,
#menu #mpCopyLink:hover,
#menu .mp-ready-btn:hover { border-color: rgba(101, 221, 255, 0.5); background: rgba(78, 176, 210, 0.16); }

#menu .mp-join-help,
#menu .mp-invite-help,
#menu .mp-start-help {
  margin: 6px 2px 0;
  color: #777286;
  font-size: 0.77rem;
  line-height: 1.3;
}

#menu .mp-room-head { margin-bottom: 8px; }
#menu .mp-room-label { color: #777286; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
#menu #mpLobbyCode { color: var(--land-cyan); font-size: 1rem; font-weight: 900; letter-spacing: 0.15em; }
#menu .mp-leave-btn { min-height: 32px; padding: 6px 8px; color: #b9b3c5; background: transparent; }
#menu .mp-leave-btn:hover { color: #ffb2c4; border-color: rgba(255, 105, 143, 0.38); }

#menu .mp-player-list {
  display: grid;
  gap: 5px;
  margin: 9px 0;
  padding: 0;
  list-style: none;
}

/* Vier Spalten: Held · Name · Rang · Zustand. Der Rang stand frueher in der
   dritten Spalte und schob den Zustand in eine zweite Zeile – der Slot war dann
   doppelt so hoch und der Name rutschte nach oben weg. Sichtbar wurde das nur
   bei Spielern MIT Rang; seit jeder einen traegt (playerBadge), bei allen. */
#menu .mp-player-slot {
  display: grid;
  min-height: 39px;
  grid-template-columns: 29px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(178, 165, 222, 0.13);
  border-radius: 9px;
  color: #dcd8e8;
  background: rgba(255,255,255,0.025);
  contain: layout paint;
}

#menu .mp-player-slot.ready,
#menu .mp-player-slot[data-state="ready"] { border-color: rgba(105, 231, 164, 0.27); background: rgba(52, 153, 104, 0.08); }
#menu .mp-player-slot.you { box-shadow: inset 2px 0 var(--land-cyan); }
#menu .mp-player-slot.disconnected { opacity: 0.56; }
#menu .mp-player-slot.empty,
#menu .mp-player-slot[data-state="empty"] { color: #706b7d; border-style: dashed; background: transparent; }

#menu .mp-player-hero {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  color: var(--land-cyan);
  background: rgba(101, 221, 255, 0.08);
  font-size: 0.78rem;
  font-weight: 900;
}
#menu .mp-player-hero img { width: 100%; height: 100%; object-fit: contain; }
#menu .mp-player-name { min-width: 0; overflow: hidden; font-size: 0.79rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
#menu .mp-player-slot.host .mp-player-name::after { content: " HOST"; margin-left: 5px; color: var(--land-gold); font-size: 0.73rem; letter-spacing: 0.06em; }
#menu .mp-player-state { color: #9a94a9; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
#menu .mp-player-slot.ready .mp-player-state,
#menu .mp-player-slot[data-state="ready"] .mp-player-state { color: #74e8aa; }

#menu .mp-status {
  display: flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(101, 221, 255, 0.14);
  border-radius: 8px;
  color: #aaa5b8;
  background: rgba(54, 149, 185, 0.06);
  font-size: 0.78rem;
  line-height: 1.25;
}

#menu .mp-status[data-state="connecting"]::before { animation: statusPulse 1s ease-in-out infinite; }
#menu .mp-status[data-state="ready"],
#menu .mp-status[data-state="playing"] { color: #b9f7d4; border-color: rgba(105, 231, 164, 0.25); background: rgba(52, 153, 104, 0.08); }
#menu .mp-status[data-state="ready"]::before,
#menu .mp-status[data-state="playing"]::before { background: #69e7a4; box-shadow: 0 0 8px rgba(105, 231, 164, 0.65); }
#menu .mp-status[data-state="error"],
#menu .mp-status[data-state="offline"] { color: #ffb2c4; border-color: rgba(255, 102, 139, 0.28); background: rgba(164, 42, 72, 0.09); }
#menu .mp-status[data-state="error"]::before,
#menu .mp-status[data-state="offline"]::before { background: #ff668b; box-shadow: 0 0 8px rgba(255, 102, 139, 0.55); }
@keyframes statusPulse { 50% { opacity: 0.28; transform: scale(0.72); } }

#menu .mp-lobby-actions { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); margin-top: 8px; }
#menu .mp-ready-btn[aria-pressed="true"] { color: #07130d; border-color: #69e7a4; background: #69e7a4; }
#menu .mp-start-btn {
  color: #fff;
  border-color: rgba(255,255,255,0.2);
  background: linear-gradient(105deg, #7450e8, #a744e7 55%, #e34fae);
  box-shadow: 0 8px 20px rgba(115, 52, 215, 0.25);
}
#menu :is(#mpJoinBtn, #mpCopyLink, .mp-ready-btn, .mp-start-btn):active { transform: translateY(1px); }
#menu :is(#mpJoinBtn, #mpCopyLink, .mp-ready-btn, .mp-start-btn):disabled,
#menu :is(#mpJoinBtn, #mpCopyLink, .mp-ready-btn, .mp-start-btn)[aria-disabled="true"] { cursor: not-allowed; opacity: 0.42; box-shadow: none; }

/* Solo and multiplayer scores share one compact board card. */
#menu .score-mode-tabs {
  display: grid;
  /* Drei Listen: Solo, Team, ewige Rangliste. Sichtbar sind aber immer nur zwei
     davon – der Score-Tab des anderen Spielmodus ist ausgeblendet (js/game.js
     mpSetScoreBoard). Diese Teilung gilt nur als Rueckfall, falls kein
     data-mode gesetzt ist; die Spalten sind so bemessen, dass auch
     "Multiplayer-Score" in der schmalsten Menuebreite ganz dasteht. */
  grid-template-columns: 0.52fr 1.3fr 0.92fr;
  gap: 3px;
  margin: -2px 0 10px;
  padding: 3px;
  border: 1px solid rgba(178, 166, 222, 0.14);
  border-radius: 9px;
  background: rgba(3, 4, 12, 0.42);
}

#menu .score-mode-tab {
  min-width: 0;
  min-height: 30px;
  overflow: hidden;
  padding: 5px 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #888397;
  background: transparent;
  cursor: pointer;
  font-size: 0.77rem;
  font-weight: 850;
  letter-spacing: 0.015em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Solo-Modus: Solo-Score + Rangliste. Team-Modus: Team-Score + Rangliste.
   Der ausgeblendete Tab belegt keine Spalte mehr (display:none), deshalb sind
   hier nur zwei angegeben. */
#menu .score-mode-tabs[data-mode="solo"] { grid-template-columns: 0.62fr 1fr; }
#menu .score-mode-tabs[data-mode="team"] { grid-template-columns: 1.35fr 1fr; }

#menu .score-mode-tab:hover { color: #ddd8e7; }
#menu .score-mode-tab[aria-selected="true"],
#menu .score-mode-tab.active { color: #f7f4ff; border-color: rgba(159, 122, 255, 0.3); background: rgba(132, 83, 235, 0.19); }
/* „NEU"-Marke am Team-Reiter – verschwindet, sobald er ausgewaehlt ist. */
#menu .score-new {
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 999px;
  color: #071015;
  background: var(--land-cyan);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
#menu .score-mode-tab[aria-selected="true"] .score-new,
#menu .score-mode-tab.active .score-new { display: none; }
#menu .multiplayer-score-list .empty { line-height: 1.45; }

/* Leaderboard card */
#menu .board-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.5vw, 22px);
}

#menu .board-head { margin-bottom: 13px; }
#menu .board-title { color: #fff; text-shadow: none; }
#menu .live-chip { border-color: rgba(255, 92, 166, 0.22); color: #ffc2de; background: rgba(137, 27, 79, 0.15); }
#menu .live-chip i { background: #ff64ad; box-shadow: 0 0 8px #ff64ad; animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: 0.35; } }

/* Saison-Hinweis: wie lange der aktuelle Highscore noch gilt (Reset am 1. des Monats) */
.season-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid rgba(154, 128, 255, 0.32);
  border-radius: 999px;
  background: rgba(154, 128, 255, 0.12);
  color: #cfc4ff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.season-chip.urgent {
  border-color: rgba(255, 120, 160, 0.42);
  background: rgba(255, 92, 140, 0.14);
  color: #ffc2d6;
}
.board-head-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.season-note {
  margin: 0 0 8px;
  padding: 0 2px;
  color: #8a83a0;
  font-size: 0.79rem;
  line-height: 1.45;
}

#menu .board-columns {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 0 7px 7px;
  color: #656176;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#menu .board-columns span:last-child { text-align: right; }

#menu .board-card .score-list {
  flex: 1 1 auto;
  min-height: 0;
  /* Hoehe folgt dem Viewport: der ganze Launcher (Band + Karten + Shop-Leiste)
     soll auf einen Bildschirm passen; groessere Monitore zeigen mehr Zeilen.
     Der Abzug entspricht dem, was ueber und unter der Liste steht – seit die
     Rangkarte flach ist, bleibt dafuer rund 120 px mehr uebrig. */
  max-height: clamp(240px, calc(100dvh - 700px), 640px);
  overflow-y: auto;
  padding-right: 3px;
}

#menu .score-list li {
  grid-template-columns: 27px minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 34px;
  padding: 7px;
  border-radius: 8px;
  color: #d9d5e4;
  font-size: 0.83rem;
}

#menu .score-list li:nth-child(odd) { background: rgba(154, 128, 255, 0.055); }
#menu .score-list li:nth-child(even) { background: transparent; }
#menu .score-list li .rank { color: #777289; font-size: 0.81rem; }
#menu .score-list li .pname { font-weight: 650; }
#menu .score-list li .pmeta { font-size: 0.79rem; color: #8f89a6; font-weight: 700; }
#menu .score-list li .pscore { color: var(--land-cyan); font-size: 0.83rem; font-variant-numeric: tabular-nums; }

/* Das Podium schlaegt die Zebrastreifen der Liste – die Regeln oben tragen
   eine ID und wuerden sonst gewinnen. Die Optik selbst steht bei .podium-row. */
#menu .score-list li.podium-row,
#menu .score-list li.podium-row:nth-child(odd),
#menu .score-list li.podium-row:nth-child(even) {
  min-height: 40px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--pc) 22%, transparent),
      color-mix(in srgb, var(--pc) 6%, transparent) 52%,
      transparent 88%);
}
#menu .score-list li.podium-row .rank { color: var(--pc); font-size: 0.81rem; }
#menu .score-list li.podium-row .pscore { color: var(--pc); }
#menu .score-list li.top1 { --pc: var(--land-gold, #ffd45e); }

/* Saison-Leiste unter der Liste: links der Pokal, den der aktuelle Platz beim
   Saisonende einbraechte, rechts der eigene Platz. Beide Bausteine kommen aus
   der Rangkarte (js/game.js updateRankChip) und teilen sich deren Stil. */
.board-season-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 205, 104, 0.15);
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(93, 59, 13, 0.22), rgba(255,255,255,0.02));
}
.board-season-bar[hidden] { display: none; }
/* Links der Platz, rechts was er einbringt – dazwischen ein Pfeil, damit die
   Leiste sich von selbst liest: "#16 von 18 → bringt dir bei Saisonende …". */
.board-season-bar .bsb-flow {
  position: relative;
  display: flex;
  flex: 1 1 190px;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding-left: 20px;
}
.board-season-bar .bsb-flow::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-top: 2px solid rgba(255, 205, 104, 0.45);
  border-right: 2px solid rgba(255, 205, 104, 0.45);
  transform: rotate(45deg);
}
.board-season-bar .bsb-lead {
  color: #b6afc6;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.board-season-bar .bsb-rewards { display: flex; align-items: stretch; flex-wrap: wrap; gap: 7px; }
/* Passen beide Belohnungen nebeneinander, stehen sie nebeneinander; sonst
   untereinander – dann aber gleich breit, damit es eine Liste bleibt und
   nicht zwei zufaellig lange Pillen. */
.board-season-bar .bsb-rewards .mrc-chip { flex: 1 1 165px; }
/* Ohne Saisonende (ewige Rangliste) steht nur der Platz da – dann mittig. */
.board-season-bar.is-solo { justify-content: center; }

#menu .scroll-cue {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  color: #898599;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#menu .scroll-cue:hover { color: #d8d4e2; }

/* Die Shop-Cue ist eine schlanke volle Leiste unter den beiden Karten –
   gleiche Breite wie Band und Raster, ruhig statt pulsierend. */
#menu .hero-screen > .scroll-cue-shop {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(var(--launcher-w), 100%);
  margin: 0 auto;
  padding: 9px 16px;
  border-radius: 14px;
  text-transform: none;
  letter-spacing: normal;
  animation: none;
}
#menu .hero-screen > .scroll-cue-shop .cue-copy {
  flex: 1;
  min-width: 0;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
}
#menu .hero-screen > .scroll-cue-shop .cue-copy strong { font-size: 0.83rem; white-space: nowrap; }
#menu .hero-screen > .scroll-cue-shop .cue-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#menu .hero-screen > .scroll-cue-shop .cue-scroll { margin-left: auto; flex: 0 0 auto; }
#menu .scroll-cue .mouse { position: relative; width: 15px; height: 23px; border: 1px solid #777287; border-radius: 8px; }
#menu .scroll-cue .mouse i { position: absolute; top: 4px; left: 6px; width: 2px; height: 4px; border-radius: 2px; background: var(--land-cyan); animation: mouseScroll 1.7s ease-in-out infinite; }
@keyframes mouseScroll { 70% { transform: translateY(7px); opacity: 0; } }

/* Content below the launcher */
#menu .site-sections {
  position: relative;
  z-index: 2;
  display: block;
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: clamp(54px, 8vw, 110px) 0 20px;
}

#menu .site-sections::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: min(940px, 90vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(164, 138, 255, 0.34), transparent);
}

#menu .site-section {
  position: relative;
  max-width: none;
  margin: 0 0 clamp(38px, 5vw, 72px);
  padding: clamp(25px, 3.6vw, 52px);
  overflow: hidden;
  border: 1px solid rgba(179, 166, 225, 0.16);
  border-radius: 26px;
  color: var(--land-copy);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.025), transparent 36%),
    rgba(11, 12, 25, 0.78);
  box-shadow: 0 30px 75px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.035);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  scroll-margin-top: 82px;
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

#menu .site-section h2 {
  margin: 7px 0 0;
  color: #fff;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: "Segoe UI Variable Display", "Bahnschrift", "Segoe UI", sans-serif;
  font-size: clamp(1.8rem, 3.7vw, 3.4rem);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

#menu .site-section p {
  color: #aaa6b8;
  font-size: clamp(0.88rem, 1.2vw, 1rem);
  line-height: 1.65;
}

#menu .section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: clamp(22px, 3vw, 34px);
}

#menu .section-heading > div:first-child { max-width: 720px; }
#menu .section-heading p,
#menu .centered-heading p { margin-top: 12px; }

/* Meta hub */
#menu .meta-hub {
  border-color: rgba(166, 131, 255, 0.24);
  background:
    radial-gradient(circle at 10% 0%, rgba(113, 64, 227, 0.13), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,0.025), transparent 36%),
    rgba(11, 12, 25, 0.88);
}

#menu .meta-hub::after {
  content: "SOUL SHOP";
  position: absolute;
  top: 24px;
  right: -15px;
  color: rgba(255,255,255,0.024);
  font-family: "Bahnschrift", sans-serif;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.05em;
  pointer-events: none;
}

#menu .meta-heading { position: relative; z-index: 1; }
#menu .meta-heading h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); }

/* Shop-Optik: Kicker mit Einkaufstasche, Guthaben als Geldboerse, Kategorie-Chips. */
#menu .shop-kicker { display: inline-flex; align-items: center; gap: 7px; }
#menu .shop-kicker-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #dcc6ff;
  background: rgba(154, 128, 255, 0.2);
}
#menu .shop-kicker-icon svg { width: 12px; height: 12px; display: block; }

/* Guthaben-Anzeige wie eine Kassen-/Waehrungsanzeige im Shop. */
#menu .soul-wallet {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 17px 11px 12px;
  border: 1px solid rgba(203, 165, 255, 0.3);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(129, 62, 196, 0.22), rgba(107, 49, 164, 0.1));
  box-shadow: inset 0 1px rgba(255,255,255,0.06);
}
#menu .wallet-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  font-size: 1.05rem;
}
#menu .wallet-copy { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
#menu .wallet-copy small {
  color: #b9a6dd;
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
#menu .soul-balance {
  color: #eeddff;
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Kategorie-Chips: zeigen auf einen Blick, was es im Shop zu kaufen gibt. */
#menu .shop-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
}
#menu .shop-tags li {
  padding: 5px 11px;
  border: 1px solid rgba(184, 172, 226, 0.2);
  border-radius: 999px;
  color: #a99fc4;
  background: rgba(255,255,255,0.03);
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#menu .shop-tags li:last-child { color: #d7c2ff; border-color: rgba(191, 126, 255, 0.4); background: rgba(154, 128, 255, 0.14); }

#menu .meta-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

#menu .meta-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 150px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid rgba(184, 172, 226, 0.18);
  border-radius: 17px;
  color: #ece9f5;
  cursor: pointer;
  background: rgba(5, 6, 16, 0.52);
  box-shadow: inset 0 1px rgba(255,255,255,0.03);
  text-align: left;
  transition: transform 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

#menu .meta-card::before {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -55px;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--meta-glow, rgba(139, 94, 255, 0.16));
  filter: blur(28px);
  transition: transform 0.25s;
}

#menu .meta-card:hover { transform: translateY(-4px); border-color: var(--meta-line, rgba(164, 132, 255, 0.5)); background: rgba(13, 14, 31, 0.82); box-shadow: 0 18px 36px rgba(0,0,0,0.25), inset 0 1px rgba(255,255,255,0.05); }
#menu .meta-card:hover::before { transform: scale(1.25); }
#menu .meta-forge { --meta-glow: rgba(163, 83, 255, 0.25); --meta-line: rgba(191, 126, 255, 0.58); }
#menu .meta-achievements { --meta-glow: rgba(255, 187, 64, 0.2); --meta-line: rgba(255, 208, 112, 0.5); }
#menu .meta-synergies { --meta-glow: rgba(67, 204, 255, 0.2); --meta-line: rgba(100, 220, 255, 0.52); }

#menu .meta-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 54px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, rgba(154, 104, 255, 0.25), rgba(255,255,255,0.03));
  box-shadow: inset 0 1px rgba(255,255,255,0.08);
  font-size: 1.55rem;
}

#menu .meta-achievements .meta-icon { color: var(--land-gold); background: linear-gradient(145deg, rgba(255, 184, 67, 0.22), rgba(255,255,255,0.03)); }
#menu .meta-synergies .meta-icon { color: var(--land-cyan); background: linear-gradient(145deg, rgba(65, 198, 255, 0.22), rgba(255,255,255,0.03)); }

#menu .meta-copy { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; }
#menu .meta-copy small { color: #858094; font-size: 0.77rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
#menu .meta-copy strong { margin: 4px 0 7px; color: #fff; font-size: 1.03rem; line-height: 1.1; }
#menu .meta-copy > span { color: #928ea0; font-size: 0.82rem; line-height: 1.48; }
/* Kauf-Aufforderung pro Karte – macht aus den Kacheln sichtbare Shop-Eingaenge. */
#menu .meta-cta {
  margin-top: 11px;
  color: #cbbdf2;
  font-size: 0.81rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.18s;
}
#menu .meta-cta em { font-style: normal; display: inline-block; transition: transform 0.18s; }
#menu .meta-card:hover .meta-cta { color: #fff; }
#menu .meta-card:hover .meta-cta em { transform: translateX(3px); }

/* Hauptkarte des Shops: heller, mit Badge – wie das Angebot im Schaufenster. */
#menu .meta-card.is-primary {
  border-color: rgba(191, 126, 255, 0.42);
  background: linear-gradient(150deg, rgba(103, 52, 175, 0.26), rgba(5, 6, 16, 0.6));
}
#menu .meta-card.is-primary .meta-cta { color: #e6d5ff; }
#menu .meta-badge {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  color: #1a0b2e;
  background: linear-gradient(180deg, #d9c2ff, #b58bff);
  font-size: 0.77rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Auf der Hauptkarte ersetzt das Badge den Pfeil – sonst liegen beide uebereinander. */
#menu .meta-card.is-primary .meta-arrow { display: none; }
#menu .meta-forge .meta-icon svg { width: 26px; height: 26px; display: block; }
#menu .meta-arrow { position: relative; z-index: 1; align-self: flex-start; color: #6e697c; font-size: 1rem; transition: color 0.18s, transform 0.18s; }
#menu .meta-card:hover .meta-arrow { color: #fff; transform: translate(2px, -2px); }

/* Gameplay loop */
#menu .gameplay-section {
  padding-inline: clamp(22px, 4.2vw, 62px);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#menu .section-heading.centered-heading { display: block; max-width: 770px; margin: 0 auto clamp(26px, 4vw, 44px); text-align: center; }
#menu .centered-heading .section-kicker { justify-content: center; }
#menu .centered-heading h2 { font-size: clamp(2rem, 4.6vw, 4rem); }

#menu .loop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#menu .loop-card {
  position: relative;
  min-height: 285px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(180, 168, 226, 0.15);
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(255,255,255,0.035), transparent 40%), rgba(11,12,25,0.74);
  box-shadow: 0 18px 48px rgba(0,0,0,0.23), inset 0 1px rgba(255,255,255,0.035);
}

#menu .loop-card.featured-loop { border-color: rgba(158, 118, 255, 0.36); background: radial-gradient(circle at 50% 15%, rgba(132, 73, 243, 0.18), transparent 50%), rgba(13,13,30,0.84); transform: translateY(-12px); }
#menu .loop-number { position: absolute; top: 18px; right: 20px; color: rgba(255,255,255,0.1); font-size: 1.7rem; font-weight: 900; font-variant-numeric: tabular-nums; }
#menu .loop-card h3 { margin: 21px 0 8px; color: #fff; font-size: 1.12rem; }
#menu .loop-card p { color: #928e9f; font-size: 0.83rem; line-height: 1.55; }

#menu .loop-icon,
#menu .upgrade-fan {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  margin-top: 4px;
  border: 1px solid rgba(163, 137, 255, 0.2);
  border-radius: 22px;
  background: radial-gradient(circle, rgba(125, 77, 224, 0.22), rgba(255,255,255,0.025));
  box-shadow: inset 0 1px rgba(255,255,255,0.06), 0 15px 30px rgba(0,0,0,0.2);
}

#menu .move-icon { grid-template-columns: repeat(3, 21px); grid-template-rows: repeat(2, 21px); gap: 3px; padding: 15px; }
#menu .move-icon span { display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.16); border-radius: 5px; color: #d5cff0; background: rgba(255,255,255,0.05); font-size: 0.77rem; font-weight: 800; }
#menu .move-icon span:first-child { grid-column: 2; }
#menu .crown-icon { color: var(--land-gold); font-size: 2.6rem; }

#menu .upgrade-fan { position: relative; display: block; }
#menu .upgrade-fan span { position: absolute; top: 20px; left: 27px; display: grid; width: 36px; height: 48px; place-items: center; border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; background: linear-gradient(160deg, rgba(145,89,255,0.4), rgba(9,10,23,0.94)); box-shadow: 0 9px 18px rgba(0,0,0,0.35); font-size: 1rem; }
#menu .upgrade-fan span:first-child { transform: translateX(-18px) rotate(-14deg); }
#menu .upgrade-fan span:last-child { transform: translateX(18px) rotate(14deg); }
#menu .upgrade-fan span:nth-child(2) { z-index: 2; transform: translateY(-6px); }

/* Arsenal */
#menu .arsenal-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
  min-height: 460px;
  gap: clamp(24px, 5vw, 72px);
  background:
    radial-gradient(circle at 82% 50%, rgba(105, 61, 220, 0.17), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,0.025), transparent 35%),
    rgba(10,11,24,0.86);
}

#menu .arsenal-copy { position: relative; z-index: 2; }
#menu .arsenal-copy p { margin-top: 18px; max-width: 560px; }
#menu .arsenal-stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 420px; margin-top: 25px; border-top: 1px solid rgba(186,174,228,0.15); }
#menu .arsenal-stats > span { display: flex; flex-direction: column; padding: 17px 12px 0; }
#menu .arsenal-stats > span:first-child { padding-left: 0; }
#menu .arsenal-stats > span + span { border-left: 1px solid rgba(186,174,228,0.11); }
#menu .arsenal-stats strong { color: #fff; font-size: 1.8rem; line-height: 1; }
#menu .arsenal-stats small { margin-top: 5px; color: #817c90; font-size: 0.78rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; }

#menu .arsenal-visual { position: relative; min-height: 340px; }
#menu .arsenal-visual::before,
#menu .arsenal-visual::after { content: ""; position: absolute; left: 50%; top: 50%; width: 280px; aspect-ratio: 1; border: 1px solid rgba(147, 111, 255, 0.17); border-radius: 50%; transform: translate(-50%, -50%); }
#menu .arsenal-visual::after { width: 205px; border-style: dashed; animation: ringSpin 34s linear infinite; }

#menu .evolution-core { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; width: 126px; aspect-ratio: 1; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(203, 176, 255, 0.42); border-radius: 50%; color: #fff; background: radial-gradient(circle, rgba(128, 74, 224, 0.56), rgba(28, 15, 67, 0.92) 55%, rgba(8,9,20,0.98)); box-shadow: 0 0 60px rgba(134,72,242,0.38), inset 0 0 32px rgba(226,208,255,0.12); transform: translate(-50%, -50%); }
#menu .evolution-core span { color: #fff0ac; font-size: 1.8rem; text-shadow: 0 0 15px #ffce6a; }
#menu .evolution-core strong { margin-top: 4px; font-size: 1rem; letter-spacing: 0.18em; }
#menu .evolution-core small { color: #aaa3bd; font-size: 0.75rem; letter-spacing: 0.2em; }

#menu .weapon-orbit { position: absolute; z-index: 3; display: grid; width: 67px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(189,175,239,0.24); border-radius: 16px; background: rgba(8,9,22,0.88); box-shadow: 0 12px 30px rgba(0,0,0,0.4), inset 0 1px rgba(255,255,255,0.05); }
#menu .weapon-orbit img { max-width: 78%; max-height: 78%; object-fit: contain; filter: drop-shadow(0 0 9px rgba(158, 104, 255, 0.7)); }
#menu .orbit-a { left: 6%; top: 19%; transform: rotate(-8deg); }
#menu .orbit-b { right: 5%; top: 14%; transform: rotate(7deg); }
#menu .orbit-c { right: 12%; bottom: 8%; transform: rotate(-5deg); }

#menu .synergy-chip { position: absolute; z-index: 3; padding: 7px 10px; border: 1px solid rgba(255,255,255,0.13); border-radius: 999px; background: rgba(8,9,21,0.9); box-shadow: 0 8px 20px rgba(0,0,0,0.28); font-size: 0.77rem; font-weight: 850; letter-spacing: 0.06em; }
#menu .chip-fire { left: 4%; bottom: 18%; color: #ffb480; }
#menu .chip-frost { left: 34%; bottom: 2%; color: #83e9ff; }
#menu .chip-storm { right: 0; top: 45%; color: #ffe278; }

/* Siege */
#menu .siege-section { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; min-height: 430px; gap: clamp(25px, 5vw, 64px); border-color: rgba(255, 92, 163, 0.16); background: radial-gradient(circle at 25% 54%, rgba(130, 55, 211, 0.2), transparent 38%), linear-gradient(145deg, rgba(255,255,255,0.025), transparent 40%), rgba(11,11,24,0.86); }
#menu .siege-art { position: relative; min-height: 340px; }
#menu .siege-art::before { content: ""; position: absolute; left: 50%; bottom: 2%; width: 90%; height: 25%; border-radius: 50%; background: rgba(83, 45, 172, 0.32); filter: blur(32px); transform: translateX(-50%); }
#menu .siege-art .enemy { position: absolute; bottom: 8%; object-fit: contain; filter: drop-shadow(0 22px 22px rgba(0,0,0,0.58)); }
#menu .enemy-left { left: 0; z-index: 1; width: 38%; transform: rotate(-5deg); }
#menu .enemy-center { left: 31%; z-index: 3; width: 43%; }
#menu .enemy-right { right: 0; z-index: 2; width: 35%; transform: rotate(6deg); }
#menu .danger-line { position: absolute; z-index: 4; left: 2%; right: 2%; bottom: 9%; height: 2px; background: linear-gradient(90deg, transparent, #ff4d9f, #9b70ff, transparent); box-shadow: 0 0 18px rgba(255,77,159,0.6); }
#menu .wave-chip { position: absolute; z-index: 5; top: 6%; left: 5%; padding: 8px 11px; border: 1px solid rgba(255, 100, 171, 0.3); border-radius: 8px; color: #ffc2df; background: rgba(72, 17, 53, 0.55); font-size: 0.79rem; font-weight: 900; letter-spacing: 0.14em; }
#menu .siege-copy { position: relative; z-index: 2; }
#menu .siege-copy p { margin-top: 17px; }
#menu .boss-rule { display: flex; align-items: center; gap: 13px; margin-top: 22px; padding: 13px 14px; border: 1px solid rgba(255, 106, 151, 0.17); border-radius: 13px; background: rgba(76, 22, 47, 0.22); }
#menu .boss-rule > span { flex: 0 0 auto; display: grid; width: 40px; aspect-ratio: 1; place-items: center; border-radius: 10px; color: #ff88b1; background: rgba(255, 76, 137, 0.1); font-size: 1.25rem; }
#menu .boss-rule p { margin: 0; color: #8f899a; font-size: 0.81rem; line-height: 1.45; }
#menu .boss-rule strong { display: block; margin-bottom: 2px; color: #ebdfe4; font-size: 0.82rem; }

/* High-score rally */
#menu .score-rally { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 3vw, 38px); padding-block: clamp(24px, 3vw, 38px); border-color: rgba(255, 207, 104, 0.22); background: linear-gradient(100deg, rgba(92, 62, 16, 0.21), rgba(13,13,27,0.88) 38%, rgba(86, 44, 147, 0.17)); }
#menu .score-rally h2 { font-size: clamp(1.5rem, 2.6vw, 2.45rem); }
#menu .score-rally p { max-width: 700px; margin-top: 8px; font-size: 0.83rem; }
#menu .rally-mark { color: var(--land-gold); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 950; line-height: 0.9; letter-spacing: -0.08em; text-shadow: 0 0 30px rgba(255,198,76,0.2); }
#menu .rally-link { display: inline-flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid rgba(255, 213, 119, 0.25); border-radius: 11px; color: #f8e3b1; background: rgba(115, 76, 18, 0.18); font-size: 0.82rem; font-weight: 800; text-decoration: none; white-space: nowrap; transition: transform 0.18s, background 0.18s; }
#menu .rally-link:hover { transform: translateY(-2px); background: rgba(150, 98, 19, 0.26); }

/* Browser CTA */
#menu .browser-cta { display: grid; grid-template-columns: 230px minmax(0, 1fr) auto; align-items: center; min-height: 330px; gap: clamp(20px, 4vw, 52px); padding-block: 0; border-color: rgba(105, 216, 255, 0.22); background: radial-gradient(circle at 15% 30%, rgba(74, 164, 255, 0.17), transparent 30%), radial-gradient(circle at 75% 60%, rgba(139, 75, 232, 0.16), transparent 35%), rgba(10,12,27,0.9); }
#menu .cta-hero { align-self: end; width: 100%; max-height: 320px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 14px 25px rgba(0,0,0,0.48)) drop-shadow(0 0 22px rgba(113, 87, 255, 0.25)); }
#menu .cta-copy { position: relative; z-index: 2; padding-block: 35px; }
#menu .cta-copy h2 { max-width: 700px; font-size: clamp(1.8rem, 3.7vw, 3.35rem); }
#menu .cta-copy p { max-width: 670px; margin-top: 13px; }
#menu .cta-button { display: inline-flex; align-items: center; gap: 16px; margin-top: 22px; padding: 13px 17px; border: 1px solid rgba(161, 123, 255, 0.48); border-radius: 11px; color: #fff; background: linear-gradient(100deg, rgba(120,75,224,0.54), rgba(163,68,202,0.46)); box-shadow: 0 10px 24px rgba(69, 37, 148, 0.24); font-size: 0.83rem; font-weight: 850; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; transition: transform 0.18s, filter 0.18s; }
#menu .cta-button:hover { transform: translateY(-2px); filter: brightness(1.12); }
#menu .cta-seal { display: flex; width: 108px; aspect-ratio: 1; align-items: center; justify-content: center; flex-direction: column; border: 1px dashed rgba(100, 221, 255, 0.4); border-radius: 50%; color: #d8f7ff; transform: rotate(7deg); }
#menu .cta-seal::before { content: ""; position: absolute; width: 86px; aspect-ratio: 1; border: 1px solid rgba(100,221,255,0.14); border-radius: inherit; }
#menu .cta-seal strong { font-size: 1.15rem; }
#menu .cta-seal span { margin-top: 3px; color: #7eb8c7; font-size: 0.75rem; font-weight: 850; line-height: 1.15; letter-spacing: 0.13em; text-align: center; }

/* Changelog */
#menu .changelog-section { border-color: rgba(104, 211, 255, 0.18); background: radial-gradient(circle at 100% 0%, rgba(70, 164, 226, 0.1), transparent 35%), rgba(10,12,26,0.82); }
#menu .changelog-head { position: relative; z-index: 1; align-items: flex-end; margin-bottom: 25px; }
#menu .changelog-head h2 { font-size: clamp(1.7rem, 3vw, 2.7rem); }
#menu .changelog-head p { max-width: 670px; margin-top: 10px; }
#menu .version-chip { min-width: 132px; padding: 10px 13px; border-color: rgba(104, 218, 255, 0.22); border-radius: 11px; background: rgba(62, 166, 211, 0.08); }
#menu .version-chip > small { color: #727d91; font-size: 0.77rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
#menu .version-chip strong { color: #c8f5ff; font-size: 1.05rem; }
#menu .changelog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#menu .changelog-card { min-height: 205px; padding: 18px; border-color: rgba(173, 169, 218, 0.14); border-radius: 15px; background: rgba(5,6,16,0.5); }
#menu .changelog-card:first-child { border-color: rgba(102, 220, 255, 0.32); }
#menu .changelog-card h3 { margin-top: 14px; color: #f4f1fa; }
#menu .changelog-card > p { color: #9692a2; font-size: 0.82rem; }
#menu .changelog-card summary { color: #8fdff3; }

/* FAQ */
#menu .faq { max-width: 900px; margin-inline: auto; border-color: transparent; background: transparent; box-shadow: none; backdrop-filter: none; }
#menu .faq > h2 { margin-bottom: 24px; text-align: center; font-size: clamp(1.8rem, 3.5vw, 3rem); }
#menu .faq-item { margin-top: 9px; border-color: rgba(177,166,218,0.15); border-radius: 12px; background: rgba(10,11,24,0.62); }
#menu .faq-item > summary { min-height: 54px; padding: 14px 16px; color: #dcd9e5; font-size: 0.84rem; }
#menu .faq-item > summary::after { color: var(--land-purple); }
#menu .faq-item .faq-a p { color: #94909f; font-size: 0.82rem; }

/* Footer */
#menu .site-footer { width: min(1240px, 100%); max-width: none; margin: 0 auto; padding: 25px 0 8px; border-top-color: rgba(178,166,220,0.13); color: #777386; }
#menu .site-footer .foot-brand strong { color: #dcd8e7; }
#menu .site-footer .foot-brand img { border-radius: 8px; }
#menu .site-footer .foot-links a { color: #777386; font-size: 0.83rem; }
#menu .site-footer .foot-links a:hover { color: #d8d4e2; }
#menu .site-footer .foot-copy { font-size: 0.8rem; }

/* Width breakpoints */
@media (max-width: 1180px) {
  #menu .launcher-grid { grid-template-columns: minmax(390px, 1.3fr) minmax(270px, 1fr); }
  #menu .instant-proof > span { padding-inline: 7px; }
  #menu .hero-head .subtitle { max-width: 46ch; }
}

@media (max-width: 980px) {
  #menu .menu-content { padding-inline: clamp(14px, 2.6vw, 26px); }
  #menu .site-nav { min-height: 60px; }
  #menu .hero-screen { min-height: auto; padding-top: 25px; }
  #menu .launcher-grid,
  #menu .launcher-grid:has(.board-card.hidden),
  #menu .launcher-grid.board-disabled {
    max-width: 760px;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
    align-items: start;
  }
  #menu .hero-head {
    max-width: 760px;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 18px;
    padding: 0 8px;
  }
  #menu .brand-logo { width: 92px; margin: -4px 0 -8px; }
  /* Chips + Fakten rutschen als eigene mittige Zeile unter Logo und Titel. */
  #menu .hero-side {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
  }
  #menu .instant-proof { justify-content: center; }
  #menu .hero-screen > .scroll-cue-shop { max-width: 760px; }
  #menu .board-card .score-list { max-height: none; overflow: visible; }
  #menu .board-card .score-list li:nth-child(n+4) { display: none; }
  #menu .scroll-cue { margin-top: 8px; }
  #menu .meta-grid { grid-template-columns: 1fr; }
  #menu .meta-card { min-height: 112px; }
  #menu .arsenal-section { grid-template-columns: 1fr; }
  #menu .arsenal-visual { min-height: 330px; }
  #menu .siege-section { grid-template-columns: 1fr; }
  #menu .siege-copy { max-width: 700px; }
  #menu .score-rally { grid-template-columns: auto minmax(0, 1fr); }
  #menu .rally-link { grid-column: 2; justify-self: start; }
  #menu .browser-cta { grid-template-columns: 190px minmax(0, 1fr); }
  #menu .cta-seal { display: none; }
}

@media (max-width: 720px) {
  #menu.menu-screen { background-size: auto 760px; background-position: 50% top; scrollbar-gutter: auto; }
  #menu.menu-screen::before { height: 760px; background: linear-gradient(180deg, rgba(5,6,14,0.22), rgba(5,6,14,0.72) 70%, #070811); }
  #menu .menu-content { padding-inline: max(13px, env(safe-area-inset-left)); padding-right: max(13px, env(safe-area-inset-right)); padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  #menu .site-nav { flex-wrap: wrap; min-height: 58px; gap: 7px; padding-block: 8px; }
  #menu .site-nav .brand { font-size: 0.9rem; }
  #menu .site-nav .brand-mark { width: 31px; height: 31px; }
  #menu .lang-switch { margin-left: auto; }
  #menu .hero-screen { padding-top: 18px; }
  #menu .launcher-grid,
  #menu .launcher-grid:has(.board-card.hidden),
  #menu .launcher-grid.board-disabled { display: flex; max-width: 560px; flex-direction: column; gap: 13px; }
  #menu .launcher-grid > .play-card,
  #menu .launcher-grid > .board-card { flex: 0 0 auto; width: 100%; align-self: auto; }
  #menu .hero-head { display: block; padding: 0 4px 5px; text-align: center; }
  #menu .hero-head .eyebrow { justify-content: center; }
  #menu .hero-head picture { display: block; }
  #menu .brand-logo { width: min(140px, 44vw); margin: -5px auto -11px; }
  #menu .hero-head .game-title { max-width: 420px; margin-inline: auto; font-size: clamp(1.6rem, 7.5vw, 2.1rem); line-height: 1.05; }
  #menu .hero-head .subtitle { max-width: 480px; margin: 9px auto 0; font-size: 0.82rem; line-height: 1.45; }
  #menu .hero-side { margin-top: 11px; }
  #menu .instant-proof { gap: 5px; }
  #menu .instant-proof > span { padding: 6px 7px; font-size: 0.78rem; }
  #menu .game-facts { display: none; }
  #menu .motd-notice { margin-top: 9px; text-align: left; }
  #menu .hero-screen > .scroll-cue-shop { max-width: 560px; }
  #menu .play-card,
  #menu .board-card { padding: 16px; border-radius: 18px; }
  #menu .launcher-card-head { margin-bottom: 12px; }
  #menu .launcher-card-head h2,
  #menu .board-title { font-size: 1.15rem; }
  #menu .play-mode-tabs { margin-bottom: 11px; }
  #menu .play-mode-tab { min-height: 50px; }
  #menu #nameInput { min-height: 48px; font-size: 16px; }
  #menu .hero-cards { gap: 5px; }
  #menu .hero-card { min-height: 54px; border-radius: 9px; }
  #menu .hero-card .hc-name { font-size: clamp(0.6rem, 1.8vw, 0.7rem); }
  #menu .hero-card .hc-check { width: 15px; height: 15px; }
  #menu .hero-info { min-height: 88px; padding: 9px; }
  #menu .hero-info .hi-playstyle { display: none; }
  #menu .hero-stat strong { font-size: 0.77rem; }
  #menu .btn-play { min-height: 54px; }
  #menu .quick-controls { gap: 6px 9px; }
  #menu .mp-panel-head { margin-top: 2px; }
  #menu #mpJoinCode { min-height: 46px; font-size: 16px; }
  #menu #mpJoinBtn,
  #menu #mpCopyLink { min-height: 46px; }
  #menu .mp-player-slot { min-height: 43px; }
  #menu .score-mode-tabs { margin-bottom: 9px; }
  #menu .score-mode-tab { min-height: 34px; }
  #menu .board-season-bar { margin-top: 9px; }
  #menu .scroll-cue { margin-top: 4px; }
  #menu .site-sections { padding-top: 58px; }
  #menu .site-section { margin-bottom: 28px; padding: 22px 17px; border-radius: 20px; }
  #menu .section-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
  #menu .soul-wallet { align-self: stretch; justify-content: center; }
  #menu .shop-tags { gap: 6px; margin-bottom: 12px; }
  #menu .shop-tags li { padding: 4px 9px; font-size: 0.77rem; }
  #menu .meta-hub::after { font-size: 3.6rem; }
  #menu .meta-grid { gap: 9px; }
  #menu .meta-card { min-height: 104px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; padding: 14px; }
  #menu .meta-icon { width: 45px; border-radius: 12px; font-size: 1.3rem; }
  #menu .meta-copy > span { font-size: 0.8rem; }
  #menu .gameplay-section { padding-inline: 0; }
  #menu .loop-grid { grid-template-columns: 1fr; }
  #menu .loop-card,
  #menu .loop-card.featured-loop { min-height: 0; padding: 19px; transform: none; }
  #menu .loop-icon,
  #menu .upgrade-fan { width: 72px; height: 72px; }
  #menu .upgrade-fan span { top: 16px; left: 21px; width: 30px; height: 41px; }
  #menu .arsenal-section { min-height: 0; }
  #menu .arsenal-stats { margin-top: 20px; }
  #menu .arsenal-visual { min-height: 285px; margin-inline: -10px; }
  #menu .arsenal-visual::before { width: 235px; }
  #menu .arsenal-visual::after { width: 168px; }
  #menu .evolution-core { width: 105px; }
  #menu .weapon-orbit { width: 54px; }
  #menu .synergy-chip { padding: 6px 8px; font-size: 0.74rem; }
  #menu .siege-section { gap: 8px; }
  #menu .siege-art { min-height: 260px; margin-inline: -8px; }
  #menu .score-rally { display: flex; align-items: flex-start; flex-direction: column; gap: 15px; }
  #menu .rally-mark { font-size: 3rem; }
  #menu .rally-link { align-self: stretch; justify-content: space-between; }
  #menu .browser-cta { display: block; min-height: 0; padding-top: 22px; }
  #menu .cta-hero { display: block; width: 135px; max-height: 170px; margin: 0 auto -14px; }
  #menu .cta-copy { padding: 15px 0 5px; text-align: center; }
  #menu .cta-copy .section-kicker { justify-content: center; }
  #menu .cta-button { justify-content: center; }
  #menu .changelog-head { align-items: flex-start; flex-direction: column; }
  #menu .version-chip { text-align: left; }
  #menu .changelog-grid { grid-template-columns: 1fr; }
  #menu .faq { padding-inline: 0; }
  #menu .site-footer { align-items: flex-start; flex-direction: column; }
  #menu .site-footer .foot-links { margin-left: 0; }
}

@media (max-width: 430px) {
  #menu .site-nav { min-height: 0; }
  #menu .brand-logo { width: 118px; }
  #menu .hero-head .game-title { font-size: 1.8rem; }
  #menu .hero-head .subtitle { display: none; }
  #menu .instant-proof > span:last-child { display: none; }
  #menu .hero-side { margin-top: 8px; }
  #menu .mode-copy small { display: none; }
  #menu .play-mode-tab { min-height: 43px; padding-inline: 8px; }
  #menu .mode-new { font-size: 0.72rem; }
  #menu .quick-controls > span:nth-child(2) { display: none; }
  #menu .mp-create-btn small { display: none; }
  #menu .mp-lobby-actions { grid-template-columns: 1fr; }
  /* Schmal bleibt der Slot EINE Zeile: das Wappen bleibt (es sagt den Rang auf
     einen Blick), der ausgeschriebene Titel weicht. Er steht weiter im
     title-Attribut und in der Team-Leiste im Spiel. */
  #menu .mp-player-slot { grid-template-columns: 27px minmax(0, 1fr) auto auto; padding-inline: 6px; }
  #menu .mp-player-slot.host .mp-player-name::after { display: none; }
  #menu .mp-player-rank b { display: none; }
  #menu .score-mode-tabs { grid-template-columns: 0.65fr 1.35fr; }
  /* Sehr schmal: Pokal und Platz stapeln, statt zu verschwinden. */
  #menu .board-season-bar { flex-direction: column; align-items: stretch; gap: 7px; }
  #menu .board-season-bar .mrc-place { margin-left: 0; flex-direction: row; align-items: baseline; justify-content: center; gap: 6px; }
  /* Gestapelt zeigt der Pfeil nach unten statt zur Seite. */
  #menu .board-season-bar .bsb-flow { padding-left: 0; padding-top: 12px; align-items: center; }
  #menu .board-season-bar .bsb-flow::before { left: 50%; top: 0; margin: 0 0 0 -5px; transform: rotate(135deg); }
  #menu .board-season-bar .bsb-rewards { justify-content: center; }
}

/* Low-height desktop (z. B. 1366x768): Launcher und Play-CTA moeglichst weit
   in die erste Ansicht bringen. */
@media (min-width: 981px) and (max-height: 800px) {
  #menu .site-nav { min-height: 58px; padding-block: 7px; }
  #menu .hero-screen { min-height: calc(100dvh - 58px); gap: 8px; padding: 10px 0 8px; }
  #menu .brand-logo { width: 88px; }
  #menu .hero-head .game-title { font-size: clamp(1.35rem, 1.7vw, 1.8rem); }
  #menu .hero-head .subtitle { margin-top: 5px; font-size: 0.83rem; line-height: 1.42; }
  #menu .instant-proof > span { padding-block: 4px; }
  #menu .game-facts > span { padding-block: 4px; }
  #menu .hero-screen > .scroll-cue-shop { padding-block: 6px; }
  #menu .motd-notice { padding-block: 7px; }
  #menu .play-card,
  #menu .board-card { padding: 15px; border-radius: 18px; }
  #menu .launcher-card-head { margin-bottom: 10px; }
  #menu .launcher-card-head h2,
  #menu .board-title { font-size: 1.1rem; }
  #menu .play-mode-tabs { margin-bottom: 8px; }
  #menu .play-mode-tab { min-height: 40px; padding-block: 5px; }
  #menu .mode-copy small { display: none; }
  #menu .name-box { margin-bottom: 8px; }
  #menu #nameInput { min-height: 42px; padding-block: 8px; }
  #menu .name-help { min-height: 12px; margin-top: 3px; }
  #menu .hero-select { margin-bottom: 8px; }
  #menu .hero-cards { gap: 5px; }
  #menu .hero-info { min-height: 76px; margin-top: 6px; padding: 7px 9px; }
  #menu .hero-stats { margin-top: 4px; }
  #menu .hero-stat { padding-top: 4px; }
  #menu .btn-play { min-height: 48px; padding-block: 10px; }
  #menu .quick-controls { margin-top: 6px; }
  #menu .board-head { margin-bottom: 9px; }
  /* Auch auf flachen Schirmen ist die Liste der Grund, warum man herschaut:
     sie darf tiefer laufen als die Spalte daneben. */
  #menu .board-card .score-list { max-height: min(62vh, 470px); }
  #menu .score-list li { min-height: 29px; padding-block: 5px; }
  #menu .board-season-bar { margin-top: 8px; padding-block: 6px; }
  #menu .scroll-cue { font-size: 0.77rem; }
}

@media (prefers-reduced-motion: reduce) {
  #menu *,
  #menu *::before,
  #menu *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #menu .loop-card.featured-loop,
  #menu .meta-card:hover,
  #menu .hero-card:hover,
  #menu .hero-card.sel,
  #menu .btn-play:hover,
  #menu .mp-create-btn:hover { transform: none; }
}

@media (max-width: 600px) {
  body[data-game-mode="team"] .hud-top,
  #hud:has(#mpScore:not(.hidden)) .hud-top { gap: clamp(7px, 2.4vw, 14px); }
  body[data-game-mode="team"] .hud-timer,
  #hud:has(#mpScore:not(.hidden)) .hud-timer { font-size: clamp(1.35rem, 6vw, 1.8rem); }
  body[data-game-mode="team"] :is(.hud-score, .hud-kills, .hud-wave) span:last-child,
  #hud:has(#mpScore:not(.hidden)) :is(.hud-score, .hud-kills, .hud-wave) span:last-child { font-size: clamp(0.95rem, 4.4vw, 1.2rem); }
  body[data-game-mode="team"] .hud-multiplayer-score,
  #hud:has(#mpScore:not(.hidden)) .hud-multiplayer-score { min-width: 58px; padding-inline: 5px; }
}

/* ======================================================================
   HUD v2 — "Command Frame"
   Klare Zonen statt eines gestapelten Klotzes in der Mitte:
     oben mittig  = Runden-Banner (Welle · Zeit · Score · Kills)
     unten mittig = Waffen + Vitals (Leben / Erfahrung) als ein Block
     links unten  = Synergien (ueber der Minimap)
     rechts unten = Ausruestung
   Diese Schicht liegt bewusst am Ende und ueberschreibt die alten HUD-Regeln.
   ====================================================================== */

#hud { padding: 0 16px 14px; }

/* ---------- Runden-Banner oben ---------- */
.hud-top {
  position: relative;
  width: max-content;
  max-width: min(96%, 860px);
  margin: 0 auto;
  gap: 0;
  align-items: stretch;
  padding: 8px 4px 9px;
  border: 1px solid rgba(168, 120, 255, 0.24);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background:
    radial-gradient(120% 140% at 50% -40%, rgba(155, 123, 255, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(19, 13, 40, 0.9), rgba(8, 10, 24, 0.62));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(7px);
  pointer-events: none;
}
.hud-top::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 150, 255, 0.6), transparent);
}
.hud-top > div {
  position: relative;
  justify-content: center;
  padding: 1px 18px;
}
.hud-top > div + div::before {
  content: "";
  position: absolute;
  left: 0; top: 16%; bottom: 16%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(175, 140, 255, 0.4), transparent);
}
.hud-top .lbl {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #8d84a8;
}
.hud-top .hud-timer {
  font-size: 2.15rem;
  line-height: 1;
  padding-inline: 22px;
  color: #f4efff;
  text-shadow: 0 0 18px rgba(150, 110, 255, 0.55), 0 2px 6px rgba(0, 0, 0, 0.9);
}
.hud-top :is(.hud-score, .hud-kills, .hud-wave) span:last-child {
  font-size: 1.45rem;
  line-height: 1.05;
  text-shadow: 0 0 12px currentColor, 0 2px 5px rgba(0, 0, 0, 0.9);
}
.hud-multiplayer-score { align-self: center; margin: 0 2px; }

/* Wasserzeichen unter dem Runden-Banner (fuer Video-Clips) */
.hud-watermark {
  margin: 5px auto 0;
  width: max-content;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(203, 184, 255, 0.55);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  user-select: none;
}

/* ================= RAUSCH: die Kill-Serie =================
   Eine Anzeige, vier Zeilen: Stufenname, Zaehler, Restzeit, Multiplikator.
   Die Farbe steckt in EINER Variablen (--rc) und wird vom Skript je Stufe
   gesetzt - so wandert die ganze Anzeige mit, ohne dass irgendwo eine zweite
   Farbliste gepflegt werden muss.

   Alle Bewegungen laufen ueber transform/opacity (Compositor), nicht ueber
   Breite oder Layout: die Anzeige aktualisiert sich in JEDEM Bild, solange die
   Serie laeuft, und darf deshalb nichts kosten. Der Zeitbalken skaliert seinen
   Fuellstab (scaleX) statt seine Breite zu aendern - genau aus dem Grund. */
.hud-rush {
  position: absolute;
  right: 18px;
  top: 42%;
  z-index: 14;
  width: 152px;
  text-align: right;
  transform-origin: 100% 50%;
  pointer-events: none;
  user-select: none;
  --rc: #7ee7ff;
  color: var(--rc);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
.hud-rush.hidden { display: none; }
.hud-rush .hr-name {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  opacity: 0.92;
}
.hud-rush .hr-count {
  font-size: 3.1rem;
  line-height: 0.96;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 0 13px color-mix(in srgb, var(--rc) 55%, transparent));
}
.hud-rush .hr-x { font-size: 1.7rem; opacity: 0.6; margin-right: 1px; }
.hud-rush .hr-bar {
  height: 4px;
  margin: 6px 0 4px auto;
  width: 100%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.hud-rush .hr-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--rc);
  transform-origin: 100% 50%;
  transform: scaleX(1);
}
.hud-rush .hr-mul {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  opacity: 0.85;
}
/* Jeder einzelne Kill gibt einen kleinen Kick. Das Skript setzt die Klasse neu,
   damit die Animation auch beim zweiten Kill in Folge wieder von vorn laeuft. */
.hud-rush.kick .hr-count { animation: rushKick 0.22s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes rushKick {
  0%   { transform: scale(1.34) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
/* Stufenaufstieg: der ganze Block schlaegt aus, nicht nur die Zahl. */
.hud-rush.up { animation: rushUp 0.52s ease-out; }
@keyframes rushUp {
  0%   { transform: scale(1.6); }
  45%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}
/* Letzte Sekunde: der Balken wird rot und die Anzeige blinkt. Zeitdruck ohne
   eine zweite Anzeige dafuer aufzumachen. */
.hud-rush.warn .hr-bar i { background: #ff5b6e; }
.hud-rush.warn { animation: rushWarn 0.34s steps(2, end) infinite; }
@keyframes rushWarn {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.42; }
}

/* Meilenstein-Ruf. Kommt gross von vorn, federt einmal, steigt beim Verblassen
   auf. Steht bei 29 % Hoehe: ueber dem Helden, unter dem Runden-Banner. */
.hud-rush-call {
  position: absolute;
  left: 0;
  right: 0;
  top: 29%;
  z-index: 15;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.hud-rush-call span {
  display: inline-block;
  font-size: 3.4rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--rc, #ffd35b);
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 28px color-mix(in srgb, var(--rc, #ffd35b) 70%, transparent),
               0 6px 22px rgba(0, 0, 0, 0.8);
}
.hud-rush-call.go { animation: rushCall 1.15s cubic-bezier(0.15, 0.9, 0.25, 1) forwards; }
@keyframes rushCall {
  0%   { opacity: 0; transform: scale(2.4); }
  14%  { opacity: 1; transform: scale(0.93); }
  24%  { opacity: 1; transform: scale(1.05); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.16) translateY(-28px); }
}

/* Wer Bewegung abgestellt hat, bekommt die Information trotzdem - nur ohne
   Zappeln. Der Ruf bleibt stehen und wird vom Skript wieder abgeraeumt. */
@media (prefers-reduced-motion: reduce) {
  .hud-rush.kick .hr-count,
  .hud-rush.up,
  .hud-rush.warn,
  .hud-rush-call.go { animation: none; }
  .hud-rush-call.go { opacity: 1; }
}

/* Schmale Fenster: kleiner und etwas hoeher, damit die Anzeige weder das
   Ausruestungs-Dock noch den Daumen der rechten Hand trifft. */
@media (max-width: 760px) {
  .hud-rush { right: 9px; top: 33%; width: 104px; }
  .hud-rush .hr-count { font-size: 2.1rem; }
  .hud-rush .hr-x { font-size: 1.15rem; }
  .hud-rush .hr-name { font-size: 0.6rem; letter-spacing: 0.14em; }
  .hud-rush .hr-mul { font-size: 0.56rem; }
  .hud-rush-call span { font-size: 2rem; letter-spacing: 0.08em; }
}

/* ---------- Vitals unten mittig ---------- */
/* Schmaler als frueher (560 -> 460): die Leisten sind kein Balkendiagramm,
   sondern ein Blickfang. Auf 460 Punkten liest man Segmente und Zahl in einem
   Blick, und links wie rechts bleibt Spielfeld statt HUD. */
.hud-bars {
  max-width: 460px;
  gap: 9px;
  align-items: center;
}

.weapon-row { gap: 7px; padding: 0 2px; }

.vitals {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 9px 15px 10px 11px;
  border: 1px solid rgba(168, 120, 255, 0.26);
  border-radius: 17px;
  background:
    radial-gradient(120% 180% at 0% 50%, rgba(255, 190, 90, 0.09), transparent 55%),
    linear-gradient(180deg, rgba(24, 17, 48, 0.84), rgba(8, 10, 24, 0.88));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(7px);
  pointer-events: none;
}
.vitals::before {
  content: "";
  position: absolute;
  left: 14%; right: 14%; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 160, 255, 0.7), transparent);
}

/* Rangfortschritt: eine Leuchtlinie an der UNTERKANTE der ganzen Karte. Sie
   kostet keinen Platz, verdeckt nichts und faellt trotzdem auf, weil sie sich
   waehrend des Runs sichtbar fuellt (game.js tickLiveRank setzt --rkp).
   Ohne Rangdatensatz (Gast) steht --rkp auf 0 und die Linie ist unsichtbar. */
.vitals::after {
  content: "";
  position: absolute;
  left: 3%; bottom: -1px;
  width: calc(var(--rkp, 0) * 0.94%);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--rk, #4aa8ff) 55%, transparent),
    var(--rk, #4aa8ff) 62%,
    var(--rk-glow, #fff));
  box-shadow: 0 0 8px var(--rk-glow, #fff);
  transition: width 0.45s ease-out;
  pointer-events: none;
}

/* Stufen-Medaillon: sechseckiger Rahmen mit dunklem Kern - und der Kranz des
   eigenen Rangwappens darum. Beides in EINEM Zeichen statt zweier Elemente:
   die Stufe steht in der Mitte, der Rang traegt sie.
   .vitals-level ist dabei nur der Platzhalter - die Sechseckform (und damit das
   clip-path, das alles Ueberstehende abschneiden wuerde) sitzt auf .vl-hex.
   Sonst wuerde der Kranz an der Hexkante enden. */
.vitals-level {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 58px;
  flex: none;
}
.vl-hex {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  /* Die Rangfarbe faerbt den Rahmen. Ohne Rang (Gast, Ladephase) bleibt Gold -
     dieselbe Optik wie vorher, nur ohne Sonderfall im Code. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--rk, #ffbe4d) 42%, #fff2cf),
    var(--rk, #ffbe4d) 46%,
    color-mix(in srgb, var(--rk, #ffbe4d) 48%, #000));
  box-shadow: 0 0 20px color-mix(in srgb, var(--rk, #ffbe4d) 40%, transparent);
}
.vl-hex::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: inherit;
  background: linear-gradient(180deg, #211640, #090a1c 70%);
}

/* Der Wappenkranz. Die Mitte des Wappens wird ausmaskiert - was uebrig bleibt,
   ist genau der Prunk, der mit dem Rang waechst (Ring, Aura, Zackenkranz,
   Fluegel, Krone). Rang 1 legt also fast nichts um das Medaillon, Rang 50 eine
   ganze Krone. Die Stufenzahl bleibt dabei immer frei. */
.vl-crest {
  position: absolute;
  left: 50%; top: 50%;
  /* 150 %: der Kranz ragt genau so weit ueber das Sechseck hinaus, wie die
     Luecke zur Leistenspalte breit ist (15 px). Groesser gedacht war er huebsch,
     hat aber bei den Prestige-Wappen in die Rangzeile gegriffen. */
  width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 40%, #000 54%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 40%, #000 54%);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rk-glow, #fff) 45%, transparent));
}
.vl-crest:empty { display: none; }
.vl-crest .rank-svg { width: 100%; height: 100%; display: block; }

/* Darueberfahren: die Stufenzahl tritt ab, das VOLLE Wappen tritt an ihre
   Stelle - dieselbe Bewegung in beide Richtungen, damit es wie ein Wenden des
   Medaillons wirkt und nicht wie zwei getrennte Einblendungen. Der Kranz aussen
   bleibt stehen; er ist ja derselbe Rang.
   Geschaltet wird per Klasse, NICHT per :hover - das HUD laesst Zeigerereignisse
   absichtlich zum Spielfeld durch (pointer-events: none), sonst waere die
   Medaille ein totes Loch mitten im Ziehbereich. game.js hittestet stattdessen
   die Zeigerposition (nur mit echter Maus). */
.vl-face {
  position: absolute;
  left: 50%; top: 50%;
  /* Genau die GEGENPROBE zum Kranz: der zeigt nur den Aussenrand, das hier nur
     den Kern. Zusammen ergeben sie ein Wappen - haette die Mitte noch einmal
     den ganzen Prunk, staende bei hohen Raengen zweimal dasselbe Ornament
     uebereinander und die Medaille waere nur noch ein Farbfleck. */
  width: 150%; height: 150%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 29%, transparent 41%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 29%, transparent 41%);
  transform: translate(-50%, -50%) scale(0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.2, 1.5, 0.5, 1);
}
.vl-face .rank-svg { width: 100%; height: 100%; display: block; }
.vl-lbl, .vl-num {
  transition: opacity 0.14s ease, transform 0.2s ease;
}
.vitals-level.is-hover .vl-lbl,
.vitals-level.is-hover .vl-num { opacity: 0; transform: scale(0.7); }
.vitals-level.is-hover .vl-face { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Ohne Rang (Gast) bleibt .vl-face leer. Dann setzt game.js `is-hover` gar
   nicht erst - sonst starrte man auf ein leeres Medaillon. */
@media (prefers-reduced-motion: reduce) {
  .vl-face, .vl-lbl, .vl-num { transition-duration: 0.01ms; }
}

.vl-lbl,
.vl-num { position: relative; }
.vl-lbl {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  /* Im XP-Blau: „LV" gehoert zur Erfahrungsleiste darunter, nicht zum Rang.
     Die Rangfarbe traegt schon Rahmen, Kranz und Stufenzahl - das Kuerzel darf
     dagegen zeigen, WORAUS die Stufe kommt. */
  color: var(--xp, #49d0ff);
  text-shadow: 0 0 8px rgba(73, 208, 255, 0.45);
}
.vl-num {
  margin-top: -1px;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--rk-glow, #ffd98a) 78%, #fff);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px color-mix(in srgb, var(--rk, #ffc85a) 65%, transparent);
}

/* Die Rangzeile setzt sich in die Luecke ueber der Lebensleiste: das Medaillon
   ist 58 Punkte hoch, die beiden Leisten zusammen 41 - der Platz war ohnehin da.
   Die Karte wird durch den Rang also nicht hoeher. */
.vitals-bars { display: grid; gap: 5px; min-width: 0; }

/* Segment-Raster: macht auf einen Blick lesbar, wie viel wirklich fehlt. */
.bar-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.bar.hp .bar-ticks {
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(10% - 1px), rgba(0, 0, 0, 0.42) calc(10% - 1px), rgba(0, 0, 0, 0.42) 10%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.bar.xp .bar-ticks {
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(25% - 1px), rgba(0, 0, 0, 0.4) calc(25% - 1px), rgba(0, 0, 0, 0.4) 25%);
}

.vitals .bar.hp {
  height: 25px;
  border-radius: 7px;
  border: 1px solid rgba(255, 120, 145, 0.32);
  background: linear-gradient(180deg, rgba(3, 4, 12, 0.94), rgba(16, 8, 22, 0.94));
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.75);
}
.vitals .bar.hp .bar-fill {
  border-radius: 6px;
  background: linear-gradient(180deg, #ff93a4 0%, #ff2f57 44%, #bf0f38 100%);
  box-shadow: 0 0 16px rgba(255, 60, 95, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.vitals .bar.hp.low .bar-fill {
  background: linear-gradient(180deg, #ff7d8f 0%, #ff0f33 40%, #a5001f 100%);
}
.vitals .bar-chip { border-radius: 6px; }

.vitals .bar-text {
  justify-content: flex-end;
  padding-right: 12px;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 10px rgba(255, 60, 95, 0.45);
}
.vitals .bar-text::before {
  content: "\2764";
  margin-right: auto;
  padding-left: 11px;
  font-size: 0.75rem;
  color: #ff9fb0;
  filter: drop-shadow(0 0 6px rgba(255, 70, 110, 0.85));
}

.vitals .bar.xp {
  height: 10px;
  border-radius: 99px;
  border: 1px solid rgba(73, 208, 255, 0.24);
  background: rgba(3, 6, 16, 0.92);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.75);
}
.vitals .bar.xp .bar-fill {
  background: linear-gradient(90deg, #1a8fd6, #49d0ff 62%, #bff5ff);
  box-shadow: 0 0 14px rgba(73, 208, 255, 0.7);
}

/* ---------- Waffen-Chips ---------- */
.weapon-chip {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid rgba(140, 170, 255, 0.3);
  background:
    radial-gradient(90% 120% at 50% 130%, rgba(120, 170, 255, 0.26), transparent 68%),
    linear-gradient(180deg, rgba(27, 21, 52, 0.88), rgba(8, 10, 24, 0.92));
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.weapon-chip img { width: 32px; height: 32px; }
.weapon-chip .wlvl {
  right: -3px;
  bottom: -3px;
  padding: 1px 5px;
  border-radius: 7px;
  background: linear-gradient(180deg, #b79bff, #6f4bd6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}
.weapon-chip.evo-chip .wlvl { background: linear-gradient(180deg, #ffe6a4, #f0a92c); }

/* ---------- Ausruestung: eigenes Dock rechts unten ---------- */
.gear-dock {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  padding: 8px 10px 10px;
  border: 1px solid rgba(255, 200, 110, 0.22);
  border-radius: 15px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 190, 90, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(24, 18, 34, 0.8), rgba(8, 9, 22, 0.86));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.gear-dock.empty { display: none; }
.gear-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #dcc9a2;
  font-size: 0.69rem;
  font-weight: 950;
  letter-spacing: 0.17em;
}
.gear-head i { font-style: normal; font-size: 0.74rem; filter: drop-shadow(0 0 5px rgba(255, 190, 90, 0.6)); }
.gear-head b {
  padding: 0 6px;
  border-radius: 7px;
  background: rgba(255, 200, 110, 0.14);
  color: #ffd88a;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.gear-grid {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-end;
  gap: 6px;
  max-height: min(138px, 34vh);   /* 3 Reihen; waechst danach nach links */
}
.gear-grid .weapon-chip {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border-color: rgba(255, 200, 110, 0.28);
  background:
    radial-gradient(90% 120% at 50% 130%, rgba(255, 190, 90, 0.22), transparent 68%),
    linear-gradient(180deg, rgba(30, 23, 40, 0.9), rgba(9, 9, 22, 0.92));
}
.item-chip { font-size: 21px; line-height: 1; }

/* Das Statistik-Panel darf nicht in das Ausruestungs-Dock laufen. */
#hud:has(.gear-dock:not(.empty)) .stats-panel { max-height: calc(100% - 290px); }

/* ---------- Synergien: eigenes Dock links ueber der Minimap ---------- */
.synergy-dock {
  position: absolute;
  left: 14px;
  bottom: 136px;
  z-index: 5;
  width: 244px;
  max-width: 40vw;
  max-height: 46vh;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  scrollbar-width: none;
  border-radius: 15px;
  border-color: rgba(185, 135, 255, 0.24);
}
.synergy-dock::-webkit-scrollbar { width: 0; }
.synergy-dock-head { padding: 2px 3px 6px; }
.synergy-dock-title { font-size: 0.7rem; }
/* Im schmalen Dock stehen die sechs Elemente als 3x2-Raster – dieselbe
   Reihenfolge wie überall, nur enger gesetzt. */
.synergy-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.synergy-row .syn-chip { width: 100%; padding: 4px 3px; }
.syn-pw .pw-nm { max-width: 74px; }

/* ---------- Minimal-HUD (Taste X): nur noch das Leben ---------- */
#hud.hud-min .weapon-row,
#hud.hud-min .vitals-level,
#hud.hud-min .bar.xp,
#hud.hud-min .synergy-dock,
#hud.hud-min .gear-dock { display: none !important; }
#hud.hud-min .vitals {
  padding: 0;
  border-color: transparent;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

/* ---------- Kleinere Fenster ---------- */
@media (max-width: 900px) {
  .synergy-dock { width: 200px; bottom: 128px; }
  .gear-grid { max-height: min(120px, 32vh); }
  .gear-grid .weapon-chip { width: 36px; height: 36px; }
  .item-chip { font-size: 18px; }
}
@media (max-width: 720px) {
  #hud { padding: 0 10px 10px; }
  /* Die HUD-Knoepfe stehen auf schmalen Fenstern untereinander am rechten
     Rand; das Banner rueckt um die halbe Knopfspalte nach links, damit es
     zwischen den Knoepfen nicht eingeklemmt wird. */
  .mute-btn { top: 8px; right: 8px; width: 36px; height: 36px; font-size: 1rem; }
  .hud-view-btn { top: 50px; right: 8px; }
  .gfx-btn { top: 92px; right: 8px; }
  .fb-toggle { top: 134px; right: 8px; }
  .hero-btn { top: 176px; right: 8px; }
  .audio-panel { top: 50px; right: 50px; }
  .hud-view-panel { top: 50px; right: 50px; width: min(214px, calc(100vw - 66px)); }
  /* Das Grafik-Menue haengt an seinem eigenen Knopf, sonst stuende es auf
     schmalen Fenstern ueber den beiden daruber. */
  .gfx-panel { top: 92px; width: min(238px, calc(100vw - 66px)); }
  .hud-top { max-width: calc(100% - 52px); transform: translateX(-22px); }
  .hud-top > div { padding-inline: 9px; }
  .hud-top .lbl { font-size: 0.69rem; letter-spacing: 0.12em; }
  .hud-top :is(.hud-score, .hud-kills, .hud-wave) span:last-child { font-size: 1.18rem; }
  .hud-top .hud-timer { padding-inline: 11px; font-size: 1.55rem; }
  .vitals { gap: 10px; padding: 8px 12px 9px 9px; }
  .vitals-level { width: 46px; height: 50px; }
  .vl-num { font-size: 1.02rem; }
  .vitals .bar.hp { height: 22px; }
  .weapon-chip { width: 40px; height: 40px; }
  .weapon-chip img { width: 27px; height: 27px; }
  .synergy-dock { width: 172px; bottom: 122px; padding: 6px; }
  /* Enger geht es nicht sinnvoll: bei drei Spalten auf 172 px bleiben pro Chip
     rund 50 px – gerade genug für Icon und Stufe. Die Combo-Zeile darunter
     verliert dafür ihren Effekttext, der Name mit Stufe reicht. */
  .synergy-row { gap: 3px; }
  .syn-chip { gap: 3px; padding: 3px 2px; font-size: 0.68rem; }
  .syn-chip .syn-ic { font-size: .82rem; }
  .syn-combo .sco-fx { display: none; }
  .syn-pw .pw-nm { display: none; }
  /* Schmale Fenster: das Ausruestungs-Dock steht ueber der Vitals-Leiste,
     schlanker und hoeher gestapelt, damit es die Mitte nicht ueberdeckt. */
  .gear-dock { right: 10px; bottom: 138px; padding: 6px 8px 8px; }
  .gear-grid { max-height: min(154px, 30vh); }
  .gear-grid .weapon-chip { width: 34px; height: 34px; border-radius: 10px; }
  .item-chip { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .vitals .bar-fill::after { animation: none !important; }
}


/* ---------------------------------------------------------------- Gamepad
   Fokusrahmen der Controller-Navigation: bewusst kraeftiger als der Maus-Hover,
   weil man am Pad sonst nicht sieht, worauf A gleich drueckt. */
.pad-focus {
  outline: 3px solid var(--gold, #ffd35b);
  outline-offset: 3px;
  border-radius: 12px;
  box-shadow: 0 0 22px rgba(255, 211, 91, 0.45);
}
.choice.pad-focus { transform: translateY(-4px); }

/* Zwei Fenster gleichzeitig offen (Boss-Wahl bei allen, Kartenwahl nur bei dir):
   Welches das Pad gerade bedient, muss man SEHEN - sonst wackelt man am Stick
   und nichts rührt sich. js/game.js -> padMarkClaims setzt die Klassen.
   Das AKTIVE bleibt unangetastet - dort steht ohnehin der goldene Fokusrahmen.
   Das andere tritt zurück, statt gleichberechtigt danebenzustehen. */
.pad-claim-off { opacity: 0.72; filter: saturate(0.72); }
.pad-switch-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 60;
  transform: translateX(-50%);
  padding: 5px 12px;
  border: 1px solid rgba(255, 211, 91, 0.4);
  border-radius: 999px;
  background: rgba(10, 13, 24, 0.9);
  color: #ffe7a8;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}
.pad-switch-hint.hidden { display: none; }

/* Schalter zum Ein-/Ausschalten der Controller-Steuerung (nur sichtbar, wenn ein Pad da ist) */
.pad-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid rgba(184, 174, 222, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #d5d1e0;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.pad-toggle:hover { border-color: var(--gold, #ffd35b); color: #fff; }
.pad-toggle.is-off { opacity: 0.55; text-decoration: line-through; }
#pause .pad-toggle { padding: 7px 14px; font-size: 0.85rem; }

/* ============================================================ Couch-Coop
   Lokales Spiel an einem PC: Regie-Block im Team-Panel (Gastgeber) und
   Kopfband in den Spielerfenstern. Logik in public/js/coop.js. */
#menu .coop-panel {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(120, 170, 255, 0.28);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(30, 38, 66, 0.72), rgba(18, 22, 38, 0.55));
}
#menu .coop-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; }
#menu .coop-icon { font-size: 1.15rem; }
#menu .coop-head h4 { font-size: 0.75rem; letter-spacing: 0.025em; }
#menu .coop-head p { margin-top: 2px; color: var(--muted); font-size: 0.7rem; line-height: 1.35; }
#menu .coop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-top: 9px;
}
#menu .coop-row-thin { align-items: center; gap: 10px; margin-top: 7px; }
#menu .coop-field { display: grid; gap: 3px; font-size: 0.7rem; color: var(--muted); }
#menu .coop-field select {
  min-width: 92px;
  padding: 6px 8px;
  border: 1px solid rgba(120, 170, 255, 0.3);
  border-radius: 8px;
  background: rgba(10, 14, 26, 0.85);
  color: var(--text);
  font: inherit;
  font-size: 0.71rem;
}
#menu .coop-detect,
#menu .coop-start {
  padding: 7px 11px;
  border: 1px solid rgba(120, 170, 255, 0.35);
  border-radius: 8px;
  background: rgba(74, 168, 255, 0.12);
  color: var(--text);
  font: inherit;
  font-size: 0.71rem;
  cursor: pointer;
}
#menu .coop-detect:hover { border-color: rgba(120, 170, 255, 0.7); }
#menu .coop-start {
  width: 100%;
  margin-top: 9px;
  padding: 10px;
  border-color: rgba(158, 119, 255, 0.45);
  background: linear-gradient(110deg, rgba(118, 72, 223, 0.45), rgba(51, 150, 188, 0.2));
  font-size: 0.74rem;
  font-weight: 700;
}
#menu .coop-start:hover { transform: translateY(-1px); }
#menu .coop-start.is-stop {
  border-color: rgba(255, 84, 112, 0.5);
  background: linear-gradient(110deg, rgba(180, 40, 70, 0.4), rgba(90, 30, 50, 0.25));
}
#menu .coop-screens { color: var(--muted); font-size: 0.7rem; }
#menu .coop-screens.is-multi { color: var(--xp); }
#menu .coop-check { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); font-size: 0.7rem; cursor: pointer; }
#menu .coop-status { min-height: 14px; margin-top: 7px; font-size: 0.7rem; color: var(--muted); }
#menu .coop-status[data-kind="ok"] { color: #7ee08a; }
#menu .coop-status[data-kind="wait"] { color: var(--gold); }
#menu .coop-status[data-kind="error"] { color: var(--hp); }
#menu .coop-help { margin-top: 6px; color: var(--muted); font-size: 0.7rem; line-height: 1.4; }

/* --- Spielerfenster (?coop=N): Kopfband mit Spieler- und Controller-Nummer --- */
.coop-banner {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 60;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(120, 170, 255, 0.4);
  border-radius: 10px;
  background: rgba(10, 14, 26, 0.86);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  pointer-events: auto;
}
.coop-banner .coop-badge {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #070812;
  font-size: 0.73rem;
  font-weight: 900;
}
.coop-banner .coop-lines { display: grid; gap: 1px; }
.coop-banner .coop-title { font-size: 0.71rem; letter-spacing: 0.02em; }
.coop-banner .coop-hint { color: var(--muted); font-size: 0.7rem; }
.coop-banner.is-dead { border-color: rgba(255, 84, 112, 0.6); }
.coop-banner.is-dead .coop-hint { color: var(--hp); }
.coop-banner.is-ready { border-color: rgba(126, 224, 138, 0.55); }
.coop-banner.is-ready .coop-hint { color: #7ee08a; }
.coop-banner .coop-fs {
  padding: 4px 7px;
  border: 1px solid rgba(120, 170, 255, 0.3);
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 0.73rem;
  cursor: pointer;
}
.coop-banner .coop-fs:hover { border-color: rgba(120, 170, 255, 0.7); }
/* Im Spielerfenster ist der Coop-Block des Gastgebers fehl am Platz. */
html.coop-child #coopPanel { display: none; }

/* ------------------------------------------------------ DPS-Meter (HUD, links)
   Zeigt im gleitenden 6-Sekunden-Fenster, welche Waffe den Build gerade traegt.
   Bewusst schmal und halbtransparent: es soll ablesbar sein, ohne die Arena zu
   verdecken. Taste F oder der ⚔-Knopf blenden es aus (Zustand wird gemerkt). */
.dps-dock {
  width: min(232px, 44vw);
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  z-index: 12;
  border: 1px solid rgba(255, 150, 80, 0.24);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(26, 14, 10, 0.78), rgba(9, 11, 24, 0.82));
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
  animation: dpsIn 0.22s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.dps-dock.hidden { display: none !important; }
#hud.hud-min .dps-dock { display: none !important; }

@keyframes dpsIn { from { opacity: 0; transform: translateX(-18px); } }

.dps-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 6px 11px;
  border-bottom: 1px solid rgba(255, 150, 80, 0.16);
  background: rgba(255, 140, 70, 0.06);
}
.dps-title { font-size: 0.7rem; font-weight: 950; letter-spacing: 0.16em; color: #e3c7b4; }
.dps-title i { color: #ff9d5c; font-style: normal; text-shadow: 0 0 8px rgba(255, 130, 60, 0.7); }
.dps-total {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  font-weight: 900;
  color: #ffb877;
  text-shadow: 0 0 10px rgba(255, 140, 60, 0.4);
}
.dps-close {
  width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 6px;
  color: #8d8296; background: transparent;
  cursor: pointer; font-size: 0.74rem; line-height: 1;
}
.dps-close:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

.dps-rows { padding: 5px 7px 3px; overflow-y: auto; }
.dps-empty { padding: 8px 5px 10px; color: #7d7488; font-size: 0.71rem; line-height: 1.45; }

/* Eine Zeile = eine Schadensquelle. Der Balken liegt HINTER dem Text, damit die
   Zeile schmal bleibt und der Anteil trotzdem sofort ins Auge springt. */
.dps-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
  padding: 3px 7px;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.028);
}
.dps-row .dps-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 7px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--dc) 42%, transparent), color-mix(in srgb, var(--dc) 12%, transparent));
  transition: width 0.25s ease-out;
}
.dps-row > span, .dps-row > b { position: relative; }
.dps-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
  color: #dcd3e6;
}
.dps-row .dps-val {
  font-variant-numeric: tabular-nums;
  font-size: 0.73rem;
  font-weight: 900;
  color: var(--dc);
}
.dps-row .dps-pct {
  width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 800;
  color: #8f869c;
}
/* Die tragende Waffe wird markiert – das ist die Information, um die es geht. */
.dps-row.lead .dps-name { color: #fff; }
.dps-row.lead { background: rgba(255, 255, 255, 0.055); }
.dps-row.idle .dps-name, .dps-row.idle .dps-val { opacity: 0.45; }

.dps-foot {
  display: flex;
  gap: 10px;
  padding: 5px 11px 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: #8b8296;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.dps-foot b { color: #cfc5da; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  /* Auf dem Handy stehen die HUD-Knoepfe untereinander am rechten Rand - der
     ⚔-Knopf reiht sich unter den Synergien-Knopf ein. Diese Regel MUSS nach dem
     Basisblock oben stehen, sonst gewinnt dessen right:168px. */
  /* Links neben den Knoepfen ist kein Platz - das Panel rueckt unter die
     Kennzahlen-Leiste und wird schmaler. */
  .dps-dock { width: min(174px, 50vw); }
  .dps-rows { padding: 4px 5px 2px; }
  .dps-name { font-size: 0.71rem; }
}

/* ------------------------------------------------------ Game Over, neu strukturiert
   Vorher lagen Kennzahlen, Todesursache, Build-Recap und Bestenliste untereinander –
   der Bildschirm war eine Scrollstrecke. Jetzt: eine Kopfzeile mit dem Ergebnis, eine
   Kennzahlen-Reihe und drei Reiter. Alle Zahlen bleiben erhalten, sie stehen nur dort,
   wo man sie sucht. */
#gameover .go-panel { width: min(820px, 96vw); padding: 20px clamp(16px, 2.6vw, 30px) 18px; }

.go-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  text-align: left;
}
.go-panel .go-head-emblem { flex: 0 0 auto; width: 54px; margin: 0; }
.go-head-copy { flex: 1 1 auto; min-width: 0; }
.go-head .modal-kicker { margin: 0 0 2px; justify-content: flex-start; }
.go-panel .go-head .go-title { font-size: clamp(1.35rem, 3.2vw, 1.95rem); }
.go-headline {
  margin: 3px 0 0;
  color: #a99fb6;
  font-size: 0.75rem;
  line-height: 1.45;
}
.go-headline b { color: #ffd7a0; font-weight: 800; }

/* Rekord-Plakette: die eine Sache, die man nach einem guten Run sehen will. */
.go-record-badge {
  flex: 0 0 auto;
  max-width: 190px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 211, 91, 0.42);
  border-radius: 12px;
  background: linear-gradient(130deg, rgba(255, 211, 91, 0.14), rgba(124, 91, 255, 0.1));
  text-align: center;
}
.go-record-badge.hidden { display: none; }
.go-record-badge small {
  display: block;
  color: #ffe58a;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.go-record-badge b { display: block; margin-top: 2px; color: #fff6dd; font-size: 0.8rem; }
.go-record-badge span { display: block; margin-top: 2px; color: #c9bfa4; font-size: 0.72rem; }

.go-panel .go-stats { grid-template-columns: repeat(6, 1fr); gap: 7px; margin-bottom: 12px; }
.go-panel .go-stats div { min-height: 62px; padding: 8px 4px 7px; }
.go-panel .go-stats span { font-size: 1.12rem; }
.go-panel .go-stats small { font-size: 0.7rem; letter-spacing: 0.08em; }
.go-panel .go-stats .lead { border-color: rgba(255, 168, 120, 0.42); background: linear-gradient(160deg, rgba(255, 150, 90, 0.16), rgba(10, 14, 28, 0.74)); }
.go-panel .go-stats .lead span { color: #ffd0a8; }
.go-panel .go-stats .souls span { color: #ddb4ff; }
/* Beste Kill-Serie. Traegt die Rausch-Farbe, damit man die Kachel im Rueckblick
   sofort mit der Anzeige aus dem Kampf verbindet. `display:none` braucht hier
   die hoehere Spezifitaet - `.go-stats div` setzt sonst flex durch. */
.go-panel .go-stats #goRushBox { border-color: rgba(255, 154, 60, 0.42); }
.go-panel .go-stats #goRushBox span { color: #ffb063; }
.go-stats #goRushBox.hidden { display: none; }

/* ---- Reiter ---- */
.go-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(6, 9, 20, 0.5);
}
.go-tab {
  flex: 1;
  margin: 0;
  padding: 8px 6px;
  border: 0;
  border-radius: 9px;
  color: #9a92a8;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  transition: color 0.15s, background 0.15s;
}
.go-tab:hover { color: #ded6ea; background: rgba(255, 255, 255, 0.04); }
.go-tab.has-rank { color: #ffe58a; }
.go-tab.is-active {
  color: #fff;
  background: linear-gradient(160deg, rgba(255, 79, 115, 0.24), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 0 0 1px rgba(255, 103, 142, 0.3);
}

/* ---- Freischaltungen dieses Runs (goldener Block ueber den Reitern) ---- */
.go-unlocks {
  margin: 10px 0 0;
  padding: 8px 10px 10px;
  border: 1px solid rgba(255, 209, 102, 0.34);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(255, 199, 87, 0.14), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 24px rgba(255, 196, 80, 0.08);
  text-align: left;
  animation: goUnlockIn 0.32s ease-out;
}
@keyframes goUnlockIn { from { opacity: 0; transform: translateY(-5px); } }
.go-unlocks-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: #ffd977;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.go-unlocks-head .gu-spark { font-size: 0.9rem; }
.go-unlocks-head .gu-count {
  margin-left: auto;
  color: #cbbd93;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}
.go-unlocks-grid { display: grid; gap: 6px; }
.gu-card {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(8, 11, 22, 0.45);
}
.gu-ic { font-size: 1.15rem; line-height: 1.2; }
.gu-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gu-name { color: #fff; font-size: 0.82rem; font-weight: 800; }
.gu-desc { color: #a79fb4; font-size: 0.72rem; }
.gu-reward {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(120, 220, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(120, 220, 255, 0.22);
  color: #bfe9ff;
  font-size: 0.7rem;
}
.gu-reward b { color: #fff; }
.gu-reward .item-icon-img { width: 18px; height: 18px; vertical-align: middle; }

.go-panes {
  margin-top: 10px;
  min-height: 190px;
  max-height: min(44vh, 340px);
  overflow-y: auto;
  text-align: left;
}
.go-pane { display: none; }
.go-pane.is-active { display: block; animation: goPaneIn 0.18s ease-out; }
@keyframes goPaneIn { from { opacity: 0; transform: translateY(6px); } }
.go-panel .go-panes .score-list { max-height: none; }
.go-panel .run-recap { margin: 0; }

/* ---- Kampf-Reiter: Schadensverteilung je Waffe ---- */
.go-dmg { margin-bottom: 12px; }
.go-dmg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
  color: #8e879f;
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.go-dmg-head b { margin-left: auto; color: #ffb877; font-size: 0.74rem; letter-spacing: 0; }
.go-dmg-legend { margin-left: 10px; color: #6f6880; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: none; }
.go-dmg-row b { min-width: 62px; }
.go-dmg-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 6px 10px;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
.go-dmg-row i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 9px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--dc) 40%, transparent), color-mix(in srgb, var(--dc) 10%, transparent));
}
.go-dmg-row > span, .go-dmg-row > b { position: relative; }
.go-dmg-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e6dff0; font-size: 0.74rem; font-weight: 700; }
.go-dmg-row.top .go-dmg-name { color: #fff; }
.go-dmg-meta { color: #8b8296; font-size: 0.71rem; font-variant-numeric: tabular-nums; }
.go-dmg-row b { min-width: 46px; text-align: right; color: var(--dc); font-size: 0.75rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.go-dmg-pct { min-width: 34px; text-align: right; color: #a49bb0; font-size: 0.71rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.go-dmg-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #8b8296;
  font-size: 0.72rem;
}
.go-dmg-foot b { color: #ded6ea; font-variant-numeric: tabular-nums; }

/* ---- Aktionen + Teilen ---- */
.go-panel .go-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-top: 14px; }
.go-share-note { min-height: 17px; margin-top: 6px; color: var(--gold); font-size: 0.73rem; }

@media (max-width: 640px) {
  .go-head { flex-wrap: wrap; gap: 10px; }
  .go-record-badge { max-width: none; width: 100%; }
  .go-panel .go-stats { grid-template-columns: repeat(3, 1fr); }
  .go-panel .go-actions { grid-template-columns: 1fr; }
  .go-panes { max-height: 40vh; }
}

/* ==========================================================================
   SKIN-SHOP · VIP · WERBEPLAETZE
   Markup: index.html (#skins, [data-ad-slot]) – gefuellt von js/shop.js und
   js/ads.js. Farben kommen aus den Tokens ganz oben; jede Skin-Karte setzt
   zusaetzlich --skin-tint / --skin-accent aus dem Katalog.
   ========================================================================== */

/* ---------- Navigation: der Shop-Verweis darf auffallen ---------- */
.nav-shop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 211, 91, 0.45);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(255, 211, 91, 0.16), rgba(155, 123, 255, 0.16));
  color: #ffe8a8 !important;
  font-weight: 800;
}
.nav-shop:hover { border-color: var(--gold); background: rgba(255, 211, 91, 0.24); }
.nav-shop-dot { color: var(--gold); font-size: 0.8em; }
.nav-shop [data-shop-pill].is-vip { color: #bff3ff; }

/* ---------- Navigation: Verweis auf die Guide-Wiki (/guide) ----------
   Bewusst zurueckhaltender als der Shop-Verweis: ein umrandeter Chip in der
   Akzentfarbe. Er markiert, dass der Link die Seite verlaesst, ohne mit dem
   goldenen Shop-Chip um Aufmerksamkeit zu streiten. */
.nav-guide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(120, 170, 255, 0.42);
  border-radius: 999px;
  background: rgba(74, 168, 255, 0.1);
  font-weight: 800;
}
.nav-guide::before { content: "📖"; font-size: 0.9em; }
.nav-guide:hover { border-color: var(--accent); background: rgba(74, 168, 255, 0.2); }

/* ---------- Sektion ---------- */
.skin-shop {
  max-width: 1040px;
  border-color: rgba(255, 211, 91, 0.34);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 211, 91, 0.13), transparent 42%),
    radial-gradient(circle at 92% 8%, rgba(155, 123, 255, 0.16), transparent 46%),
    rgba(11, 14, 26, 0.84);
}
.skin-shop-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* Nur der Textblock waechst mit. Ohne :first-child faengt die Regel auch den
   Schluessel-Kasten ein – der wird dann auf Handybreite kopfhoch gestreckt. */
.skin-shop-heading > div:first-child { flex: 1 1 380px; min-width: 0; }
.skin-shop-heading > .shop-account { flex: 0 0 auto; align-self: flex-start; }
.skin-shop-heading p { max-width: 640px; font-size: 0.97rem; }
.skin-shop .shop-kicker-icon svg { width: 15px; height: 15px; }
.skin-grid-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 26px 0 13px;
  color: #f1f4ff;
  font-size: 1.02rem;
  letter-spacing: 0.3px;
}
.skin-grid-title small { color: var(--muted); font-size: 0.76rem; font-weight: 700; }

/* ---------- Schluessel / Wiederherstellen ---------- */
.shop-account { flex: 0 0 auto; }
.shop-account-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 13px;
  border: 1px solid rgba(146, 132, 255, 0.3);
  border-radius: 14px;
  background: rgba(8, 10, 20, 0.5);
}
.shop-account-copy { display: flex; flex-direction: column; min-width: 0; }
.shop-account-copy small { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.shop-account-copy strong { color: #dfe6ff; font-size: 0.82rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.shop-ghost-btn {
  padding: 7px 12px;
  border: 1px solid rgba(146, 178, 255, 0.36);
  border-radius: 10px;
  background: rgba(74, 168, 255, 0.1);
  color: #cfe2ff;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}
.shop-ghost-btn:hover { border-color: var(--accent); background: rgba(74, 168, 255, 0.2); color: #fff; }

/* ---------- VIP-Karte ---------- */
.vip-slot { margin-top: 4px; }
.vip-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 211, 91, 0.5);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 50%, rgba(255, 211, 91, 0.18), transparent 55%),
    linear-gradient(120deg, rgba(52, 42, 20, 0.7), rgba(14, 16, 30, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 240, 190, 0.16), 0 16px 40px rgba(0, 0, 0, 0.42);
}
.vip-card.is-owned { border-color: rgba(120, 240, 190, 0.5); }
.vip-card.is-owned .vip-mark { color: #7ff0be; border-color: rgba(120, 240, 190, 0.5); }
.vip-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 211, 91, 0.5);
  border-radius: 16px;
  background: rgba(255, 211, 91, 0.12);
  color: var(--gold);
  font-size: 1.7rem;
}
.vip-copy { min-width: 0; }
.vip-kicker {
  display: block;
  margin-bottom: 4px;
  color: #ffd98a;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vip-copy strong { display: block; color: #fff6dd; font-size: 1.2rem; letter-spacing: 0.3px; }
.vip-copy p { margin: 5px 0 0; color: #d6dcf2; font-size: 0.9rem; line-height: 1.55; }
.vip-perks { margin: 9px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.vip-perks li { position: relative; padding-left: 16px; color: #b8c1de; font-size: 0.79rem; }
.vip-perks li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); font-weight: 900; }
.vip-buy { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
.vip-price { color: #fff3cd; font-size: 1.5rem; font-weight: 900; letter-spacing: 0.5px; white-space: nowrap; }
.vip-btn { padding: 11px 20px; white-space: nowrap; }
.owned-pill {
  padding: 9px 16px;
  border: 1px solid rgba(120, 240, 190, 0.5);
  border-radius: 999px;
  background: rgba(120, 240, 190, 0.14);
  color: #9ff8d2;
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

/* ---------- Skin-Karten ---------- */
/* Aussen stehen die Helden untereinander, innen ihre vier Skins nebeneinander.
   Ein durchlaufendes Raster hat die Helden beim Umbruch zerschnitten. */
.skin-grid { display: flex; flex-direction: column; gap: 20px; }
.skin-group { display: flex; flex-direction: column; gap: 10px; }
.skin-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(146, 178, 255, 0.16);
}
.skin-group-face {
  width: 36px;
  height: 36px;
  object-fit: contain;
  padding: 2px;
  border: 1px solid rgba(146, 178, 255, 0.2);
  border-radius: 9px;
  background: rgba(6, 9, 20, 0.6);
  image-rendering: pixelated;
}
.skin-group-name {
  margin: 0;
  color: #f2f5ff;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.skin-group-count { margin-left: auto; color: var(--muted); font-size: 0.74rem; font-weight: 700; }
.skin-group-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px;
}
/* Schmale Schirme: lieber zwei kleinere Kacheln nebeneinander als eine
   riesige pro Zeile - sonst scrollt man an 20 Karten einzeln vorbei. */
@media (max-width: 620px) {
  .skin-group-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .skin-stage { min-height: 104px; }
  .skin-art { height: 88px; }
  .skin-body { padding: 9px 10px 3px; }
  .skin-name { font-size: 0.85rem; }
  .skin-desc { font-size: 0.74rem; }
  .skin-foot { padding: 8px 10px 10px; gap: 6px; }
  .skin-btn { font-size: 0.74rem; padding: 8px 6px; }
}

.skin-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(146, 132, 255, 0.26);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(40, 46, 82, 0.5), rgba(10, 13, 27, 0.68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.skin-card:hover {
  transform: translateY(-3px);
  border-color: var(--skin-tint, var(--accent2));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
}
.skin-card.is-owned { border-color: rgba(120, 240, 190, 0.42); }
.skin-card.is-equipped {
  border-color: rgba(120, 240, 190, 0.75);
  box-shadow: 0 0 0 1px rgba(120, 240, 190, 0.3), 0 10px 26px rgba(0, 0, 0, 0.45);
}
.skin-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 138px;
  padding: 10px;
  background: rgba(6, 8, 18, 0.55);
}
.skin-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, var(--skin-tint, #8ea2ff), transparent 62%);
  opacity: 0.22;
  pointer-events: none;
}
/* Effekt-Vorschau: die Partikelaura des Skins, gezeichnet von js/game.js
   (window.GSSkinFx) mit denselben Emittern wie im Spiel. Sie liegt mittig
   HINTER dem Bild, damit die Partikel rundherum aus der Silhouette treten –
   genau so sieht man sie auch im Lauf. Rein dekorativ, nie anklickbar. */
.skin-fx {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
.skin-stage .skin-art,
.shop-buy-stage .skin-art,
.skinpick-card .spc-art img { z-index: 1; }
/* Kleinere Buehne im Kaufdialog: dieselbe Vorschau, nur enger gefasst. */
.shop-buy-stage {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 116px;
  height: 116px;
  overflow: hidden;
}
.shop-buy-stage .skin-fx { transform: translate(-50%, -50%) scale(0.72); }
.skinpick-card .spc-art { position: relative; overflow: visible; }
.skinpick-card .skin-fx { transform: translate(-50%, -50%) scale(0.62); }
/* Wer Bewegung reduziert haben will, bekommt das Standbild. */
@media (prefers-reduced-motion: reduce) {
  .skin-fx { display: none; }
}

.skin-art {
  position: relative;
  width: auto;
  max-width: 100%;
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}
/* Maus drueber = der Skin dreht sich um. Gleiche Geste wie bei den
   Heldenkarten im Menue: Vorderansicht und Rueckenansicht (…2.png) liegen
   deckungsgleich uebereinander und blenden ineinander. Nur auf den grossen
   Buehnen (Spotlight, Kaufdialog) und nur bei echtem Hover. */
.spot-stage.is-flip,
.shop-buy-stage.is-flip { position: relative; }
.is-flip .skin-art-front,
.is-flip .skin-art-back { transition: opacity 0.26s ease; }
.spot-stage.is-flip .skin-art-back,
.shop-buy-stage.is-flip .skin-art-back {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
/* Gedreht wird nur, wenn die Maus wirklich auf der Figur steht – vorher reichte
   die ganze Karte, dadurch drehte sich das Bild schon beim Lesen des Textes. */
@media (hover: hover) {
  .spot-stage.is-flip:hover .skin-art-front,
  .shop-buy-stage.is-flip:hover .skin-art-front { opacity: 0; }
  .spot-stage.is-flip:hover .skin-art-back,
  .shop-buy-stage.is-flip:hover .skin-art-back { opacity: 1; }
}
.skin-placeholder-tag,
.skin-owned-tag {
  position: absolute;
  top: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.skin-placeholder-tag {
  left: 8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(180, 190, 220, 0.28);
  background: rgba(8, 10, 20, 0.72);
  color: #8e99ba;
  font-size: 0.71rem;
  cursor: help;
}
.skin-owned-tag {
  right: 8px;
  border: 1px solid rgba(120, 240, 190, 0.5);
  background: rgba(10, 40, 32, 0.8);
  color: #9ff8d2;
}
.skin-body { flex: 1; padding: 11px 13px 4px; }
.skin-name { margin: 0 0 5px; color: var(--skin-accent, #f2f5ff); font-size: 0.95rem; line-height: 1.25; }
/* Startwaffe des Skins. Sie steht zwischen Name und Beschreibung, weil sie der
   einzige Unterschied ist, der sich im Spiel auswirkt. */
/* Startwaffe und Faehigkeit stehen nebeneinander: links die Waffe, rechts die
   Faehigkeit, jeweils Label ueber dem Wert. So bleibt die Karte flach. */
.skin-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  margin: 0 0 5px;
}
.skin-weapon {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 5px;
  margin: 0;
  min-width: 0;
  font-size: 0.74rem;
  line-height: 1.3;
}
.skin-weapon-icon { grid-row: 1 / span 2; }
.skin-weapon small, .skin-weapon strong { grid-column: 2; min-width: 0; }
.skin-weapon-icon { color: var(--skin-tint, #92b2ff); }
.skin-weapon small { color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.skin-weapon strong { color: #eaf0ff; font-weight: 800; }
/* Zeile der Skin-Fähigkeit: identisch gebaut, nur violett abgesetzt. */
.skin-trait .skin-weapon-icon { color: #c8a8ff; }
.skin-trait strong { color: #e6dbff; }
/* Zwei Zeilen fuer alle: sonst haengt die Reihe an der laengsten Beschreibung. */
.skin-desc {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.4em;
  color: #bcc4e0;
  font-size: 0.76rem;
  line-height: 1.45;
}
/* Preis oben, Knopf darunter ueber die volle Breite: bei fuenf Karten in einer
   Reihe wird es sonst so eng, dass die Beschriftung abgeschnitten wird. */
.skin-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 11px 14px 13px;
}
.skin-price { color: #f3f6ff; font-size: 0.98rem; font-weight: 900; white-space: nowrap; }
.skin-price small { color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
/* Zweiter Preis in Seelen – eine Zeile tiefer, damit der Geldpreis fuehrt. */
.skin-price .skin-souls {
  display: block;
  margin-top: 2px;
  color: #cbb8ff;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}
.skin-btn {
  width: 100%;
  text-align: center;
  padding: 9px 10px;
  border: 1px solid rgba(146, 178, 255, 0.4);
  border-radius: 10px;
  background: rgba(74, 168, 255, 0.12);
  color: #dbe8ff;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  white-space: normal;
  line-height: 1.25;
}
.skin-btn:hover { border-color: var(--accent); background: rgba(74, 168, 255, 0.24); color: #fff; }
.skin-btn.is-buy {
  border-color: rgba(255, 211, 91, 0.5);
  background: rgba(255, 211, 91, 0.14);
  color: #ffe8a8;
}
.skin-btn.is-buy:hover { border-color: var(--gold); background: rgba(255, 211, 91, 0.26); color: #fff8e2; }
.skin-btn.is-active { border-color: rgba(120, 240, 190, 0.55); background: rgba(120, 240, 190, 0.16); color: #9ff8d2; }

.shop-legal { margin-top: 18px; color: var(--muted) !important; font-size: 0.78rem !important; line-height: 1.6 !important; }
.shop-preview-only .skin-btn.is-buy,
.shop-preview-only .vip-btn { opacity: 0.75; }

.hero-card .hc-skin {
  position: absolute;
  top: 5px;
  left: 5px;
  color: var(--gold);
  font-size: 0.74rem;
  text-shadow: 0 0 6px rgba(255, 211, 91, 0.8);
  pointer-events: none;
}

/* ---------- Kauf-Dialog ---------- */
.shop-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 6, 14, 0.78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.shop-modal {
  position: relative;
  width: min(460px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 24px 22px;
  border: 1px solid rgba(255, 211, 91, 0.4);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(28, 32, 56, 0.98), rgba(10, 12, 24, 0.98));
  box-shadow: var(--shadow);
  color: var(--text);
  user-select: text;
}
.shop-modal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.shop-modal-x:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.shop-modal-title { margin: 0 30px 14px 0; color: #fff4d9; font-size: 1.18rem; }
.shop-modal-body { display: flex; flex-direction: column; gap: 13px; }
.shop-buy-head { display: flex; align-items: center; gap: 14px; }
.shop-buy-head .skin-art { height: 96px; }
.shop-buy-mark {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 211, 91, 0.45);
  border-radius: 15px;
  background: rgba(255, 211, 91, 0.12);
  color: var(--gold);
  font-size: 1.6rem;
}
.shop-buy-desc { margin: 0 0 4px; color: #dee4f8; font-size: 0.92rem; line-height: 1.5; }
.shop-note { margin: 0; color: var(--muted); font-size: 0.79rem; line-height: 1.55; }
.shop-amount-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.84rem; font-weight: 700; }
.shop-amount-wrap { position: relative; display: flex; align-items: center; }
.shop-amount {
  width: 128px;
  padding: 10px 30px 10px 12px;
  border: 1px solid rgba(146, 178, 255, 0.4);
  border-radius: 11px;
  background: rgba(8, 10, 20, 0.7);
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: right;
}
.shop-amount:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.shop-cur { position: absolute; right: 11px; color: var(--muted); font-weight: 800; pointer-events: none; }
.shop-presets { display: flex; gap: 7px; flex-wrap: wrap; }
.shop-preset {
  flex: 1 1 auto;
  padding: 8px 6px;
  border: 1px solid rgba(146, 178, 255, 0.3);
  border-radius: 10px;
  background: rgba(10, 14, 28, 0.6);
  color: #cbd6f2;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}
.shop-preset:hover { border-color: var(--accent); color: #fff; }
.shop-status { min-height: 18px; margin: 0; color: var(--gold); font-size: 0.8rem; }
.shop-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 13px; }
.shop-steps li { color: #dbe1f6; font-size: 0.84rem; }
.shop-steps strong { display: block; margin-bottom: 6px; color: #fff; font-size: 0.86rem; }
.shop-code {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 6px 0;
  padding: 9px 11px;
  border: 1px dashed rgba(255, 211, 91, 0.5);
  border-radius: 11px;
  background: rgba(255, 211, 91, 0.08);
}
.shop-code code {
  flex: 1 1 auto;
  color: #ffeaae;
  font-family: "Consolas", "SFMono-Regular", monospace;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  user-select: all;
}
.shop-pay { display: inline-block; margin-top: 4px; text-align: center; text-decoration: none; }
.shop-key-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(146, 178, 255, 0.4);
  border-radius: 11px;
  background: rgba(8, 10, 20, 0.7);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shop-key-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.shop-success-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(120, 240, 190, 0.16);
  color: #7ff0be;
  font-size: 1.8rem;
}
.shop-success-lead { margin: 0; color: #fff; font-size: 1.02rem; font-weight: 800; text-align: center; }

.shop-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 140;
  transform: translate(-50%, 14px);
  padding: 10px 18px;
  border: 1px solid rgba(146, 178, 255, 0.4);
  border-radius: 999px;
  background: rgba(12, 16, 30, 0.96);
  color: #e6ecff;
  font-size: 0.84rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.shop-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Werbeplaetze ---------- */
/* Bis js/ads.js entschieden hat, bleibt der Platz eingeklappt – so blitzt bei
   VIP nie kurz eine Anzeige auf. */
.ad-slot { display: none; }
.ad-slot.is-ready { display: block; }
/* 970 px Billboard + Innenabstand des Rahmens. Schmalere Formate zentrieren
   sich darin, breiter wird der Platz bewusst nicht. */
.ad-slot-wide { max-width: 1012px; margin: 0 auto clamp(14px, 2.2vh, 22px); }
.ad-slot-compact { margin-top: 12px; }
.ad-house-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px dashed rgba(146, 132, 255, 0.34);
  border-radius: 14px;
  background: rgba(8, 10, 20, 0.5);
}
.ad-label {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid rgba(146, 132, 255, 0.3);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ad-house-copy { flex: 1 1 240px; min-width: 0; }
.ad-house-copy strong { display: block; color: #eef2ff; font-size: 0.88rem; line-height: 1.4; }
.ad-house-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 0.74rem; }
.ad-house-btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid rgba(255, 211, 91, 0.5);
  border-radius: 10px;
  background: rgba(255, 211, 91, 0.14);
  color: #ffe8a8;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}
.ad-house-btn:hover { border-color: var(--gold); background: rgba(255, 211, 91, 0.26); color: #fff8e2; }

@media (max-width: 720px) {
  .vip-card { grid-template-columns: auto 1fr; }
  .vip-mark { width: 46px; height: 46px; font-size: 1.3rem; }
  .vip-buy { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .vip-btn { flex: 1 1 auto; }
  .skin-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .skin-art { height: 104px; }
  .skin-stage { min-height: 124px; }
  .shop-account { width: 100%; }
  .skin-shop-heading { gap: 14px; }
  /* Die Seite stellt .section-heading hier auf flex-direction: column um.
     Damit wird flex-basis zur HOEHE – die 380px von oben muessen also weg,
     sonst wird der Schluessel-Kasten kopfhoch gestreckt. */
  .skin-shop-heading > div:first-child,
  .skin-shop-heading > .shop-account { flex: 0 0 auto; }
}

/* ---------- Shop: Kopfleiste und Ein-/Ausklappen ----------
   Zugeklappt IST die Leiste der Shop: Name, Preise, Skin-Miniaturen. Sie
   verschwindet nie, sie wird nur schmal. Aufgeklappt kommt darunter das
   ausführliche Hero mit VIP-Karte und Skin-Karten. */
.skin-shop { padding: 0; overflow: hidden; }

/* Die Ãœberschrift ist nur noch Hülle für den Knopf – der Farbverlauf aus
   `.site-section h2` würde sonst den ganzen Leisteninhalt unsichtbar machen. */
.shop-bar-head {
  margin: 0;
  font-size: inherit;
  letter-spacing: normal;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

.shop-bar {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 15px;
  padding: 15px clamp(16px, 2.4vw, 26px);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease;
}
.shop-bar:hover { background: rgba(255, 211, 91, 0.07); }
.shop-bar:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }

.shop-bar-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 211, 91, 0.45);
  border-radius: 12px;
  background: rgba(255, 211, 91, 0.12);
  color: var(--gold);
}
.shop-bar-icon svg { width: 19px; height: 19px; }

.shop-bar-copy { flex: 1 1 auto; min-width: 0; }
.shop-bar-kicker {
  display: block;
  color: #b9a3ff;
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.shop-bar-name {
  display: block;
  margin-top: 1px;
  color: #fff4d9;
  font-size: clamp(1.05rem, 1.9vw, 1.32rem);
  font-weight: 800;
  letter-spacing: 0.4px;
}
.shop-bar-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}
/* Zwei Textfassungen liegen im HTML; die passende blendet die Klasse am
   Abschnitt ein. So steht auch ohne JavaScript ein sinnvoller Satz da. */
.shop-bar-sub .sub-vip { display: none; }
.skin-shop.is-vip .shop-bar-sub .sub-default { display: none; }
.skin-shop.is-vip .shop-bar-sub .sub-vip { display: inline; }
.skin-shop.is-vip .shop-bar-icon { border-color: rgba(120, 240, 190, 0.5); background: rgba(120, 240, 190, 0.12); color: #7ff0be; }

.shop-bar-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(146, 178, 255, 0.34);
  border-radius: 999px;
  background: rgba(10, 14, 28, 0.5);
  color: #cfe2ff;
  font-size: 0.75rem;
  font-weight: 800;
}
.shop-bar:hover .shop-bar-toggle { border-color: var(--gold); color: #ffe8a8; }
.shop-bar-chevron { display: grid; place-items: center; }
.shop-bar-chevron svg { width: 15px; height: 15px; transition: transform 0.28s ease; }
.skin-shop:not(.is-collapsed) .shop-bar-chevron svg { transform: rotate(180deg); }
.shop-bar-label .lbl-close { display: none; }
.skin-shop:not(.is-collapsed) .shop-bar-label .lbl-open { display: none; }
.skin-shop:not(.is-collapsed) .shop-bar-label .lbl-close { display: inline; }

/* Der ausklappbare Teil. max-height statt height, damit der Inhalt weiter frei
   wachsen darf; `visibility` kommt verzögert, sonst wären die Knöpfe darin auch
   zugeklappt noch mit Tab erreichbar. */
/* Zugeklappt wird der Inhalt hart ausgeblendet, nicht auf Hoehe 0 animiert.
   Eine max-height-Transition ueber die volle Inhaltshoehe blieb auf schmalen
   Fenstern reproduzierbar mitten im Lauf stehen und hinterliess einen leeren
   Kasten. `display: none` kann nicht haengenbleiben und nimmt den Inhalt
   nebenbei aus Tab-Reihenfolge und Vorleser.
   Das Aufklappen bekommt stattdessen eine kurze Einblendung. Bewusst OHNE
   fill-mode: laeuft sie nicht, ist der Inhalt trotzdem normal sichtbar. */
.skin-shop.is-collapsed .shop-body { display: none; }
.skin-shop:not(.is-collapsed) .shop-body { animation: shopReveal 0.3s ease; }
@keyframes shopReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.shop-body-inner { padding: 4px clamp(20px, 3vw, 34px) clamp(20px, 3vw, 34px); }
/* Zugeklappt trägt die Leiste den Rahmen allein – ohne den Rand wirkt sie hohl. */
.skin-shop.is-collapsed { border-color: rgba(255, 211, 91, 0.42); }

/* Die grosse Verkaufszeile war vorher das h2 und behält dessen Auftritt. */
.shop-lead {
  margin: 0;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.4px;
  background: linear-gradient(90deg, #7fd6ff, #b79bff, #ffd35b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.skin-shop-heading .shop-lead + p { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .skin-shop:not(.is-collapsed) .shop-body { animation: none; }
  .shop-bar-chevron svg { transition: none; }
}

@media (max-width: 720px) {
  .shop-bar { gap: 11px; padding: 13px 15px; }
  .shop-bar-icon { width: 34px; height: 34px; border-radius: 10px; }
  .shop-bar-sub { font-size: 0.74rem; }
  /* Auf dem Handy reicht der Pfeil – die Miniaturen bleiben, der Text geht. */
  .shop-bar-label { display: none; }
  .shop-bar-toggle { padding: 7px; }
}

/* ---------- Shop-Kopfleiste im Landing-Theme ----------
   Die Startseite bringt unter `#menu` ein eigenes, staerker gewichtetes Theme
   fuer .site-section mit (Polsterung, Ueberschriften, Absaetze). Ohne diese
   Nachzieher gewinnt es gegen die Leiste: die Ueberschrift waere riesig und die
   Sektion behielte ihre Innenpolsterung, obwohl die Leiste sie selbst mitbringt. */
#menu .skin-shop {
  padding: 0;
  /* content-visibility wuerde beim Zuklappen eine Platzhalterhoehe reservieren
     und die Animation springen lassen. Der Shop ist klein genug dafuer. */
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

/* Die h2 ist nur Huelle um den Knopf – alle Ueberschriftsmasse muessen weg. */
#menu .skin-shop .shop-bar-head {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
}
#menu .skin-shop .shop-bar { padding: clamp(15px, 1.8vw, 21px) clamp(18px, 2.6vw, 30px); }
#menu .skin-shop .shop-body-inner { padding: 0 clamp(25px, 3.6vw, 52px) clamp(25px, 3.6vw, 52px); }

/* Die grosse Verkaufszeile uebernimmt den Auftritt, den vorher die h2 hatte. */
#menu .skin-shop .shop-lead {
  margin: 7px 0 0;
  color: #fff;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: "Segoe UI Variable Display", "Bahnschrift", "Segoe UI", sans-serif;
  font-size: clamp(1.8rem, 3.7vw, 3.4rem);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
#menu .skin-shop .shop-bar-sub { color: #9d99ab; }

/* ---------- Skin-Laufband in der zugeklappten Leiste ----------
   Ersetzt die frueheren runden Miniaturen. Die Kacheln ziehen langsam nach
   rechts und laufen nahtlos um: js/shop.js legt den Satz zweimal hintereinander,
   die Spur wandert von -50 % auf 0 – also exakt eine Satzbreite – und beginnt
   danach wieder beim selben Anblick.

   Bewegt wird ausschliesslich die Spur, nie die einzelnen Kacheln. Mit
   `will-change: transform` bekommt sie eine eigene Compositor-Ebene: die
   Platzhalter-Skins tragen einen CSS-Filter, der so einmal gerastert und danach
   nur noch verschoben wird, statt in jedem Bild neu zu laufen. Kosten pro Bild:
   eine Verschiebung, kein Layout, kein Neuzeichnen. */
.skin-marquee {
  position: relative;
  flex: 1 1 clamp(180px, 30vw, 460px);
  min-width: 0;
  max-width: 460px;
  overflow: hidden;
  contain: paint;
  /* Kacheln an den Raendern aus- und einblenden statt hart abschneiden. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* Aufgeklappt steht das ganze Skin-Raster darunter – dann waere das Band
   Dopplung und wuerde nur Rechenzeit kosten. */
.skin-shop:not(.is-collapsed) .skin-marquee { display: none; }

.skin-marquee-track {
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  padding: 3px 0;
  will-change: transform;
  transform: translate3d(-50%, 0, 0);
}
/* Laeuft nur, wenn es auch jemand sieht: js/shop.js setzt `is-live` ueber einen
   IntersectionObserver, den Tab-Wechsel und den Klappzustand. */
.skin-marquee.is-live .skin-marquee-track {
  animation: skinMarquee 34s linear infinite;
}
@keyframes skinMarquee {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.marquee-item {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 4px 13px 4px 4px;
  overflow: hidden;
  border: 1px solid rgba(146, 132, 255, 0.26);
  border-radius: 999px;
  background: rgba(9, 11, 22, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Farbschimmer in der Skin-Farbe. Als Overlay statt color-mix, damit es auch in
   aelteren Browsern ankommt. */
.marquee-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--skin-tint, #8ea2ff), transparent 64%);
  opacity: 0.2;
  pointer-events: none;
}
.marquee-item.is-owned { border-color: rgba(120, 240, 190, 0.45); }

.skin-marquee .skin-art {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
  /* Der Skin-Filter kommt als style-Attribut aus js/shop.js und gewinnt hier;
     ohne Filter (echte Skin-Grafik) soll aber der grosse Schlagschatten der
     Karten-Variante nicht mitkommen. */
  filter: none;
}
.marquee-copy { position: relative; display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.marquee-name {
  color: var(--skin-accent, #eef1ff);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}
.marquee-tag {
  color: var(--muted);
  font-size: 0.71rem;
  font-weight: 700;
  white-space: nowrap;
}
.marquee-item.is-owned .marquee-tag { color: #8fe9c4; }

/* Ohne Bewegungswunsch steht das Band still und zeigt einfach den ersten Satz. */
@media (prefers-reduced-motion: reduce) {
  .skin-marquee.is-live .skin-marquee-track { animation: none; }
  .skin-marquee-track { transform: none; }
}

@media (max-width: 900px) {
  .skin-marquee { flex-basis: clamp(150px, 26vw, 300px); }
  .marquee-tag { display: none; }
}
/* Auf dem Handy ist neben Titel und Knopf kein Platz mehr fuer das Band –
   es bekommt eine eigene Zeile darunter, statt zu verschwinden. Gerade dort
   sollen die Skins ja sichtbar bleiben. */
@media (max-width: 640px) {
  .shop-bar { flex-wrap: wrap; }
  /* Basis 0 statt auto: sonst wuerde der Umbruch schon vor dem Textblock
     greifen und Symbol, Titel und Knopf landeten je auf einer eigenen Zeile.
     Mit Basis 0 schrumpft der Text und nur das Band (Basis 100 %) rutscht. */
  .shop-bar-copy { flex: 1 1 0; }
  .skin-marquee {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
    margin-top: 4px;
  }
  .marquee-tag { display: block; }
}

/* ==========================================================================
   Werbung – echte Anzeigen und der Belohnungsspot (js/ads.js)
   Die Vorschau im Admin-Panel (public/admin/admin.css, Block ".ad-native")
   bildet dieselbe Struktur nach. Wer hier etwas aendert, muss sie mitziehen.
   ========================================================================== */

.ad-slot .ad-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
}
.ad-slot .ad-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ad-native {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid rgba(146, 132, 255, 0.28);
  border-radius: 14px;
  background: rgba(8, 10, 20, 0.55);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.ad-link:hover .ad-native {
  border-color: rgba(146, 132, 255, 0.6);
  background: rgba(14, 17, 32, 0.72);
}
.ad-native .ad-label { align-self: flex-start; }

/* Formatrahmen. --adw/--adh kommen aus der Anzeige (js/ads.js). Der Rahmen
   haelt das Seitenverhaeltnis, BEVOR das Bild da ist – sonst springt das
   Layout beim Nachladen. Auf schmalen Schirmen schrumpft er mit, nie
   darueber hinaus: ein 728er Leaderboard wird nie auf 900 px aufgeblasen. */
.ad-frame {
  flex: 0 0 auto;
  width: calc(var(--adw, 300) * 1px);
  max-width: 100%;
  aspect-ratio: var(--adw, 300) / var(--adh, 250);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}
.ad-frame .ad-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Querbalken stehen fuer sich, der Text darunter. Nebeneinander bliebe von
   einem 970er Billboard im Rahmen nichts uebrig. */
/* Querbalken sollen pixelgenau stehen. Bei 12/14 px Innenabstand blieben im
   820 px breiten Ergebnis-Fenster nur 720 px uebrig – ein 728er Leaderboard
   waere um 1 % geschrumpft und damit unscharf. */
.ad-native.fmt-wide { flex-direction: column; align-items: stretch; padding: 12px 8px; }
.ad-native.fmt-wide .ad-frame { width: calc(var(--adw, 300) * 1px); margin: 0 auto; }
.ad-native.fmt-wide .ad-copy { flex-basis: auto; text-align: center; align-items: center; }
.ad-native.fmt-wide .ad-cta { align-self: center; }
.ad-native .ad-copy {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ad-native .ad-copy strong { color: #eef2ff; font-size: 0.9rem; line-height: 1.4; }
.ad-native .ad-copy small { color: var(--muted); font-size: 0.76rem; line-height: 1.45; }
.ad-native .ad-by { color: var(--muted); font-size: 0.72rem; font-style: normal; opacity: 0.8; }
.ad-native .ad-cta {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid rgba(120, 170, 255, 0.5);
  border-radius: 10px;
  background: rgba(74, 168, 255, 0.14);
  color: #d7ecff;
  font-size: 0.8rem;
  font-weight: 900;
}
.ad-link:hover .ad-cta { border-color: var(--accent); background: rgba(74, 168, 255, 0.26); color: #f2f9ff; }
.ad-native.is-text .ad-copy { flex-basis: 100%; }

/* ---------- Belohnungsspot (Wiederbelebung) ---------- */
.adr-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 5, 12, 0.9);
  backdrop-filter: blur(6px);
}
/* Bewusst NUR das Panel bewegt sich. Die abdunkelnde Flaeche bleibt ohne
   Animation deckend: friert ein Browser Animationen ein (Hintergrund-Tab,
   Energiesparmodus), stuende die Werbung sonst halbdurchsichtig ueber dem
   Spiel und waere weder lesbar noch als Werbung erkennbar. */
/* Die Einblendung bewegt NUR – sie fasst opacity nicht an. Die Sichtbarkeit
   dieses Fensters entscheidet ueber die Belohnung (js/ads.js, visible()), und
   ein Browser, der Animationen einfriert oder verzoegert, haette den Spot sonst
   bei opacity:0 stehen lassen: der eigene Effekt saehe dann aus wie ein
   Werbeblocker und naehme dem Spieler die Wiederbelebung. */
.adr-panel { animation: adr-in 0.18s ease-out; }
@keyframes adr-in {
  from { transform: translateY(10px) scale(0.985); }
  to { transform: none; }
}

.adr-panel {
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.adr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.adr-time {
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.adr-creative {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.adr-creative .ad-frame { width: calc(var(--adw, 300) * 1px); max-width: 100%; margin: 0 auto; }
/* Hochkant-Motive (1080x1920) wuerden sonst das ganze Fenster sprengen. Der
   Deckel ist so gewaehlt, dass Kopf, Text, Fortschritt UND beide Knoepfe auch
   auf einem 720 px hohen Fenster ohne Scrollen darunter passen. */
.adr-creative.fmt-tall .ad-frame { max-height: min(46vh, 430px); width: auto; }
.adr-creative.fmt-tall .ad-frame .adr-media { width: auto; height: 100%; }
.adr-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}
.adr-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.adr-copy strong { color: #eef2ff; font-size: 1.02rem; line-height: 1.35; }
.adr-copy p { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.adr-cta {
  margin-top: 4px;
  padding: 9px 16px;
  border: 1px solid rgba(120, 170, 255, 0.5);
  border-radius: 10px;
  background: rgba(74, 168, 255, 0.16);
  color: #d7ecff;
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
}
.adr-cta:hover { border-color: var(--accent); background: rgba(74, 168, 255, 0.28); }

.adr-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.adr-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transition: width 0.9s linear;
}

/* Sicherheitsnetz: reicht die Hoehe trotzdem nicht (sehr kleines Fenster,
   grosse Schrift), klebt die Entscheidung am unteren Rand statt aus dem
   sichtbaren Bereich zu rutschen. */
.adr-actions {
  position: sticky;
  bottom: -18px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 18px;
  margin-bottom: -18px;
  background: linear-gradient(180deg, rgba(18, 22, 38, 0) 0%, rgba(18, 22, 38, 0.97) 22%);
}
.adr-claim {
  padding: 13px 18px;
  border: 1px solid rgba(255, 211, 91, 0.35);
  border-radius: 12px;
  background: rgba(255, 211, 91, 0.1);
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: not-allowed;
  font-variant-numeric: tabular-nums;
}
.adr-claim.is-ready {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(255, 211, 91, 0.32), rgba(255, 211, 91, 0.16));
  color: #fff8e2;
  cursor: pointer;
  animation: adr-pulse 1.6s ease-in-out infinite;
}
@keyframes adr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 211, 91, 0.34); }
  50% { box-shadow: 0 0 0 8px rgba(255, 211, 91, 0); }
}
.adr-skip {
  padding: 9px 14px;
  border: 1px solid rgba(146, 132, 255, 0.24);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.adr-skip:hover { border-color: rgba(146, 132, 255, 0.5); color: var(--text); }

/* ---------- Angebot "Zweite Chance" (#reviveOffer) ---------- */
.revive-panel { max-width: 460px; text-align: center; }
.revive-panel .modal-emblem { color: var(--gold); }
.revive-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0 4px;
}
.revive-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 6px;
  border: 1px solid rgba(255, 211, 91, 0.28);
  border-radius: 12px;
  background: rgba(255, 211, 91, 0.07);
}
.revive-stats i { color: var(--gold); font-style: normal; font-size: 0.9rem; opacity: 0.85; }
.revive-stats span { color: #ffe8a8; font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.revive-stats small { color: var(--muted); font-size: 0.71rem; letter-spacing: 0.1em; text-transform: uppercase; }
.revive-note { margin: 10px 0 0; color: var(--muted); font-size: 0.74rem; line-height: 1.45; }
.revive-panel .modal-actions { margin-top: 14px; }
.revive-panel .modal-actions .btn-primary { font-variant-numeric: tabular-nums; }

/* Team-Run: hinter dem Angebot laeuft die Welt WEITER (js/game.js,
   offerAdRevive). Deshalb kein Nebel, kein Weichzeichner und kein zentriertes
   Fenster - wer sich entscheidet, soll dabei sehen, wo sein Team gerade steht.
   Das Angebot rutscht nach unten und gibt die Arena frei. */
#reviveOffer.revive-team {
  align-items: flex-end;
  padding-bottom: 18px;
  background: linear-gradient(to bottom, transparent 0%, rgba(3, 5, 13, 0.5) 55%, rgba(3, 5, 13, 0.88) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#reviveOffer.revive-team::before { display: none; }
#reviveOffer.revive-team .revive-panel { max-width: 420px; }
/* Der Countdown ist im Team die eigentliche Nachricht: das Team wartet mit. */
#reviveOffer.revive-team .revive-stats { margin: 10px 0 2px; }

@media (max-width: 720px) {
  /* Der Rahmen bringt sein Seitenverhaeltnis selbst mit und schrumpft ueber
     max-width; hier bleibt nur die Anordnung zu klaeren. */
  .ad-native { flex-direction: column; align-items: stretch; }
  .ad-native .ad-frame { margin: 0 auto; }
  .ad-native .ad-copy { text-align: center; align-items: center; }
  .ad-native .ad-cta { width: 100%; text-align: center; }
  .adr-panel { padding: 14px; }
}

/* ==========================================================================
   Werbeblocker-Hinweis (js/ads.js, blockerNotice)
   WICHTIG: keine Klasse hier darf "ad" enthalten und kein Pfad "ads". Sonst
   blendet derselbe Filter, der die Anzeige verschluckt hat, auch noch die
   Erklaerung weg – und der Spieler saehe nur, dass nichts passiert.
   ========================================================================== */
.gsb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 5, 12, 0.9);
  backdrop-filter: blur(6px);
}
.gsb-panel {
  width: min(460px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 24px 22px 20px;
  border: 1px solid rgba(255, 84, 112, 0.5);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: center;
}
.gsb-mark { font-size: 2.4rem; line-height: 1; }
.gsb-title {
  margin: 10px 0 0;
  color: #ffd9e0;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
}
.gsb-text {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.55;
}
.gsb-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(120, 170, 255, 0.22);
  border-radius: 11px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}
.gsb-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.gsb-btn {
  padding: 11px 16px;
  border: 1px solid rgba(120, 170, 255, 0.4);
  border-radius: 11px;
  background: rgba(74, 168, 255, 0.12);
  color: #d7ecff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 900;
  cursor: pointer;
}
.gsb-btn:hover { border-color: var(--accent); background: rgba(74, 168, 255, 0.24); }
.gsb-btn-main {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(255, 211, 91, 0.32), rgba(255, 211, 91, 0.16));
  color: #fff8e2;
}
.gsb-btn-main:hover { background: linear-gradient(180deg, rgba(255, 211, 91, 0.46), rgba(255, 211, 91, 0.24)); }
.gsb-btn-quiet {
  border-color: rgba(146, 132, 255, 0.24);
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8rem;
}
.gsb-btn-quiet:hover { border-color: rgba(146, 132, 255, 0.5); color: var(--text); }

/* Hinweis im Wiederbelebungs-Angebot, wenn der Blocker schon vorab auffiel. */
.revive-block {
  margin: 12px 0 0;
  padding: 9px 12px;
  border: 1px solid rgba(255, 84, 112, 0.45);
  border-radius: 11px;
  background: rgba(255, 84, 112, 0.1);
  color: #ffd9e0;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* ==========================================================================
   Vollbild-Spot: Video und Werbeseite (js/ads.js, Anzeigenart video/site)
   ========================================================================== */

/* Der Vollbild-Spot nimmt sich den Schirm, laesst aber ueberall Rand: der
   Countdown oben und die Entscheidung unten muessen immer sichtbar bleiben. */
.adr-panel.is-full {
  width: min(1100px, 100%);
  height: min(96vh, 900px);
  max-height: none;
  overflow: hidden;          /* die Buehne scrollt nicht, sie skaliert */
}
.adr-panel.is-full .adr-creative {
  flex: 1 1 auto;
  min-height: 0;             /* ohne das sprengt das iframe den Flex-Container */
}

.adr-creative.is-embed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adr-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
  background: #05060d;
}
.adr-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #05060d;
}

/* Buehne und Werbeseite fuellen die verfuegbare Flaeche. Ein festes 16:9 waere
   hier ein Scheinsieg: sobald `max-height` greift, bricht das Verhaeltnis wieder
   auf, und die Buehne muesste je nach Fensterform mal an der Breite, mal an der
   Hoehe haengen. Das Seitenverhaeltnis regelt deshalb der Inhalt selbst – der
   YouTube-Player wie eine eigene Datei, beide zentriert und ohne Verzerrung. */
.adr-creative.is-video .adr-stage,
.adr-creative.is-site .adr-stage { flex: 1 1 auto; }
video.adr-frame { object-fit: contain; }

/* Ton-an. Liegt ueber dem Video, damit es nicht die Buehne verkleinert. */
.adr-sound {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(6, 8, 16, 0.78);
  color: #eef2ff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.adr-sound:hover { border-color: #fff; background: rgba(6, 8, 16, 0.94); }

/* Zeile unter der Buehne: wer wirbt – und der Knopf, um dorthin zu gehen. */
.adr-embed-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.adr-embed-by { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adr-embed-by strong { color: #eef2ff; font-size: 0.95rem; line-height: 1.3; }
.adr-embed-by small { color: var(--muted); font-size: 0.75rem; }
.adr-cta-strong {
  flex: 0 0 auto;
  padding: 11px 20px;
  font-size: 0.9rem;
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(74, 168, 255, 0.34), rgba(74, 168, 255, 0.18));
  color: #f2f9ff;
}
.adr-cta-strong:hover { background: linear-gradient(180deg, rgba(74, 168, 255, 0.5), rgba(74, 168, 255, 0.28)); }

/* Freigabe vor dem Laden fremder Inhalte (Zwei-Klick-Loesung). */
.adr-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  padding: 26px 22px;
  text-align: center;
}
.adr-gate strong { color: #eef2ff; font-size: 1.02rem; }
.adr-gate p { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.55; }
.adr-gate small { color: var(--muted); font-size: 0.74rem; opacity: 0.85; }
.adr-gate-btn {
  margin-top: 4px;
  padding: 11px 20px;
  border: 1px solid var(--gold);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 211, 91, 0.32), rgba(255, 211, 91, 0.16));
  color: #fff8e2;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
}
.adr-gate-btn:hover { background: linear-gradient(180deg, rgba(255, 211, 91, 0.46), rgba(255, 211, 91, 0.24)); }

@media (max-width: 720px) {
  .adr-panel.is-full { height: min(94vh, 100%); }
  .adr-embed-bar { flex-direction: column; align-items: stretch; }
  .adr-cta-strong { text-align: center; }
}

/* ==========================================================================
   Zwischenanzeige – Vollbild ueber der ganzen Seite (js/ads.js, interstitial)
   Liegt hoeher als die Spiel-Overlays (z-index 20) und der Belohnungsspot
   (999), aber unter dem Einwilligungsbanner (10000): eine Rechtsauskunft darf
   Werbung nie verdecken.
   ========================================================================== */
.adi-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(3, 4, 10, 0.94);
  backdrop-filter: blur(8px);
}
.adi-panel {
  width: min(720px, 100%);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
  /* Wie beim Belohnungsspot bewegt die Einblendung nur – kein opacity, damit
     ein eingefrorener Browser nicht eine halbdurchsichtige Anzeige stehen
     laesst, die weder lesbar noch als Werbung erkennbar waere. */
  animation: adi-in 0.2s ease-out;
}
.adi-panel.is-full { width: min(1100px, 100%); height: min(94vh, 880px); }
@keyframes adi-in {
  from { transform: translateY(12px) scale(0.98); }
  to { transform: none; }
}

.adi-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Der Schliessen-Knopf zeigt erst den Countdown und wird dann zum X. */
.adi-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(146, 132, 255, 0.32);
  border-radius: 999px;
  background: rgba(8, 10, 20, 0.6);
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  cursor: not-allowed;
}
.adi-close.is-ready {
  border-color: var(--panel-border);
  color: var(--text);
  cursor: pointer;
}
.adi-close.is-ready:hover { border-color: #fff; background: rgba(20, 24, 44, 0.9); }

.adi-stage {
  position: relative;   /* Anker fuer das Schild ueber dem Video */
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
  background: #05060d;
}
.adi-stage .ad-frame { max-height: 100%; }
.adi-media { display: block; width: 100%; height: 100%; object-fit: contain; }

.adi-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.adi-copy { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adi-copy strong { color: #eef2ff; font-size: 0.98rem; line-height: 1.35; }
.adi-copy p { margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.5; }
.adi-cta {
  flex: 0 0 auto;
  padding: 11px 20px;
  border: 1px solid var(--accent);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(74, 168, 255, 0.34), rgba(74, 168, 255, 0.18));
  color: #f2f9ff;
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
}
.adi-cta:hover { background: linear-gradient(180deg, rgba(74, 168, 255, 0.5), rgba(74, 168, 255, 0.28)); }

@media (max-width: 720px) {
  .adi-panel, .adi-panel.is-full { width: 100%; height: auto; max-height: calc(100vh - 24px); }
  .adi-foot { flex-direction: column; align-items: stretch; }
  .adi-cta { text-align: center; }
}

/* Unsichtbare Scheibe ueber dem Videorahmen (js/ads.js, shield()).
   Ohne sie liesse sich der Player anklicken und anhalten – der Countdown
   stuende dann still und der Spot waere eine Sackgasse. Der Ton-Knopf liegt
   bewusst DARUEBER, er bleibt die einzige erlaubte Bedienung. */
.adr-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  cursor: default;
}
.adr-sound { z-index: 3; }
.adi-stage .adr-shield { z-index: 2; }

/* ==========================================================================
   RANG, KONTO, VIP-PAKETE UND DIE HELDEN-AKTIONSLEISTE
   --------------------------------------------------------------------------
   Alles hier arbeitet mit zwei geerbten Variablen:
     --rk        Rangfarbe (kommt aus ranks.js, je Ordensstufe)
     --rk-glow   hellere Variante fuer Leuchten und Verlaeufe
   Gesetzt werden sie inline vom JavaScript, damit eine Farbe pro Element gilt
   und nicht 50 Klassen im Stylesheet stehen muessen.
   ========================================================================== */

/* ---------- Schrifteffekte der zehn Ordensstufen ----------
   Reihenfolge = Wertigkeit. Bewusst zurueckhaltend: der Name muss in einer
   dichten Bestenliste lesbar bleiben, auch auf kleinen Bildschirmen. */
.rk-plain { color: var(--rk, #9aa0ae); }
.rk-soft { color: var(--rk, #7fb98a); text-shadow: 0 0 6px color-mix(in srgb, var(--rk) 35%, transparent); }
.rk-glow {
  color: var(--rk, #4aa8ff);
  text-shadow: 0 0 8px color-mix(in srgb, var(--rk) 55%, transparent),
               0 0 16px color-mix(in srgb, var(--rk) 25%, transparent);
}
.rk-pulse {
  color: var(--rk, #d264ff);
  text-shadow: 0 0 10px color-mix(in srgb, var(--rk) 60%, transparent);
  animation: rkPulse 2.6s ease-in-out infinite;
}
.rk-ember {
  color: var(--rk, #ff9b3d);
  text-shadow: 0 0 10px color-mix(in srgb, var(--rk) 65%, transparent),
               0 1px 0 rgba(0, 0, 0, 0.5);
  animation: rkEmber 3.4s ease-in-out infinite;
}
.rk-spectral {
  background: linear-gradient(100deg, var(--rk) 0%, var(--rk-glow, #fff) 45%, var(--rk) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rkSweep 4.5s linear infinite;
}
.rk-prismatic {
  background: linear-gradient(100deg, #9ef7ff 0%, #ffffff 20%, #ffd9a8 40%,
                              #ffb3e6 60%, #b8c6ff 80%, #9ef7ff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 7px rgba(190, 230, 255, 0.55));
  animation: rkSweep 3.6s linear infinite;
}

@keyframes rkPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.74; }
}
@keyframes rkEmber {
  0%, 100% { text-shadow: 0 0 10px color-mix(in srgb, var(--rk) 65%, transparent), 0 1px 0 rgba(0, 0, 0, 0.5); }
  50% { text-shadow: 0 0 17px color-mix(in srgb, var(--rk) 85%, transparent), 0 1px 0 rgba(0, 0, 0, 0.5); }
}
@keyframes rkSweep {
  from { background-position: 0% 50%; }
  to { background-position: 220% 50%; }
}

/* Wer Bewegung abbestellt hat, bekommt die Farbe ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .rk-pulse, .rk-ember, .rk-spectral, .rk-prismatic { animation: none; }
}

/* ---------- VIP-Namenseffekt ----------
   Derselbe Effekt in der Bestenliste UND in der Vorschau auf der VIP-Karte
   (js/shop.js), damit die Vorschau zeigt, was man wirklich bekommt. Er steigert
   sich mit der Stufe: Gold glimmt, Platin zieht einen Glanz durch, VIP++ laeuft
   im vollen Farbverlauf. */
.vip-name { font-weight: 900; }
.vip-name-1 {
  color: #ffd35b;
  text-shadow: 0 0 8px rgba(255, 211, 91, 0.5);
  animation: vipGlow1 2.6s ease-in-out infinite;
}
.vip-name-2 {
  background: linear-gradient(100deg, #9aa3b2 0%, #e6f0ff 22%, #ffffff 34%, #c8d8f0 50%, #9aa3b2 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(214, 230, 255, 0.45));
  animation: vipSheen 3.2s linear infinite;
}
.vip-name-3 {
  background: linear-gradient(100deg, #8f5bff 0%, #ff8ae0 22%, #ffd35b 42%, #ffffff 54%, #8f5bff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 9px rgba(255, 138, 224, 0.6));
  animation: vipSheen 2.2s linear infinite, vipPulse3 2.2s ease-in-out infinite;
}
@keyframes vipGlow1 {
  0%, 100% { text-shadow: 0 0 7px rgba(255, 211, 91, 0.42); }
  50% { text-shadow: 0 0 15px rgba(255, 211, 91, 0.85); }
}
@keyframes vipSheen {
  from { background-position: 0% 50%; }
  to { background-position: 240% 50%; }
}
@keyframes vipPulse3 {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 138, 224, 0.5)); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 138, 224, 0.95)); }
}
/* Ohne Bewegung bleibt die Farbe, die Animation faellt weg. */
@media (prefers-reduced-motion: reduce) {
  .vip-name-1, .vip-name-2, .vip-name-3 { animation: none; }
}

/* ---------- Abzeichen in Listen und neben Namen ---------- */
.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border: 1px solid color-mix(in srgb, var(--rk) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rk) 12%, rgba(10, 14, 28, 0.7));
  font-size: 0.73rem;
  font-weight: 900;
  line-height: 1.5;
}
.rank-badge .rb-icon { font-style: normal; font-size: 0.82rem; }
/* Rang-Wappen (js/rank-icons.js): das SVG bringt Farbe und Groesse selbst mit,
   hier bekommt es nur einen festen Platz, damit die Zeile nicht springt. */
.rank-badge .rb-icon.is-svg { display: inline-flex; align-items: center; width: 1.35em; height: 1.35em; }
.rank-badge .rb-icon.is-svg svg { width: 100%; height: 100%; }
.rank-svg { display: block; }
.acc-rank-title { display: inline-flex; align-items: center; gap: 6px; }
/* Saisonzeile im Profil: laufende Saison + Bestrang als bleibende Trophaee. */
.acc-rank-season { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; font-size: 0.73rem; font-weight: 700; }
.acc-season-now { color: #8f89a6; }
.acc-season-best { color: #ffd35b; }

.acc-chip-rank { display: inline-flex; align-items: center; gap: 4px; }
.acc-chip-rank .rb-icon.is-svg { width: 16px; height: 16px; }
.acc-rank-title .rb-icon.is-svg { width: 34px; height: 34px; }
.score-list .pl-rank .rank-svg,
.my-rank-card .mrc-icon .rank-svg,
.ach-toast.rank-toast .ai .rank-svg { width: 100%; height: 100%; }
.rank-badge .rb-lvl {
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rk) 26%, rgba(0, 0, 0, 0.4));
  color: #fff;
  font-size: 0.71rem;
}
.rank-badge.is-compact .rb-name { display: none; }

/* ---------- Prestige-Abzeichen (T1..T10) ----------
   Ab Rang 100 gibt es alle 50 Raenge eine T-Stufe. Das Abzeichen steht klein
   neben dem Rang – das Wappen selbst wird pro Stufe epischer (rank-icons.js).
   Die Farbe kommt aus --rk, also aus derselben Quelle wie Wappen und Titel:
   so bleibt ein T7 auch als Text erkennbar dieselbe Stufe wie sein Emblem. */
.rk-prestige {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--rk, #ffd76a) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rk, #ffd76a) 22%, rgba(6, 8, 16, 0.85));
  color: var(--rk-glow, #fff3c4);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
  text-shadow: 0 0 6px color-mix(in srgb, var(--rk, #ffd76a) 60%, transparent);
}
/* Ab T5 glimmt es, ab T8 pulsiert es – der Text soll dieselbe Eskalation
   mitmachen wie das Wappen. */
.rk-prestige[data-tier="5"], .rk-prestige[data-tier="6"], .rk-prestige[data-tier="7"] {
  box-shadow: 0 0 8px color-mix(in srgb, var(--rk, #ffd76a) 45%, transparent);
}
.rk-prestige[data-tier="8"], .rk-prestige[data-tier="9"], .rk-prestige[data-tier="10"] {
  box-shadow: 0 0 12px color-mix(in srgb, var(--rk, #ffd76a) 65%, transparent);
  animation: rk-prestige-pulse 2.4s ease-in-out infinite;
}
@keyframes rk-prestige-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .rk-prestige { animation: none; }
}
/* Saison-Uhr gilt nur fuer die Score-Listen – in der ewigen Rangliste tritt sie
   zurueck, statt eine Frist zu behaupten, die dort nicht gilt. */
#menu .season-chip.is-muted { opacity: 0.35; }
/* Ewige Rangliste: gleiche Zeilen wie die Score-Listen, nur die XP-Spalte
   bekommt den Rangfarbton statt des Score-Golds. */
#menu .rank-score-list .pscore { color: #cfe0ff; }
/* Rangtitel als Chip in der XP-Spalte (js/game.js rankLadderChip): dieselbe
   Spalte, in der die Score-Liste den Saisonpokal zeigt. Dadurch bleiben die
   Zeilen der Leiter genauso hoch wie die der Bestenliste. */
.score-list li .pscore.has-season .pl-rankchip { justify-self: start; }
.score-list li .pl-rankchip i {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tg, #fff) 40%, transparent));
}
.score-list li .pl-rankchip em {
  border-color: color-mix(in srgb, var(--tc, #9fb4d8) 45%, transparent);
  background: color-mix(in srgb, var(--tc, #9fb4d8) 14%, transparent);
  color: var(--tc, #dce7ff);
}
#menu .rank-score-list li .pscore.has-season { grid-template-columns: 96px 1fr; min-width: 176px; }
@media (max-width: 720px) {
  #menu .rank-score-list li .pscore.has-season { grid-template-columns: 26px 1fr; min-width: 104px; }
}

/* Zeile in der Rangkarte: Weg zur naechsten T-Stufe. */
.my-rank-card .mrc-prestige { color: var(--rk, #ffd76a); font-size: 0.71rem; font-weight: 800; }
.my-rank-card .mrc-prestige.is-max { color: #ffd35b; }

.vip-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  white-space: nowrap;
  vertical-align: middle;
}
.vip-badge.vip-t1 { background: linear-gradient(135deg, #b9862a, #ffd35b); color: #2b1d02; }
.vip-badge.vip-t2 { background: linear-gradient(135deg, #7c8ba0, #e6f0ff); color: #16202e; }
.vip-badge.vip-t3 {
  background: linear-gradient(135deg, #8f5bff, #ff8ae0 45%, #ffd35b);
  color: #1a0a2b;
  box-shadow: 0 0 10px rgba(255, 138, 224, 0.45);
}

/* ---------- Bestenliste: Rangsymbol und Name ----------
   Zwei Zeilen: oben Symbol + Name + VIP (bleibt immer eine Zeile, der Name
   kuerzt sich mit Auslassungspunkten), darunter Welle und Held. */
.score-list .pname { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.score-list .pl-line {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.score-list .pl-rank {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-style: normal;
  font-size: 0.88rem;
  line-height: 1;
}
.score-list .pl-name {
  font-weight: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.score-list .pl-line .vip-badge { flex: 0 0 auto; }

/* ---------- Rangleiter (Klick auf die eigene Rangkarte) ---------- */
.rank-ladder-panel { width: min(760px, 96vw); }
.rl-body {
  max-height: min(52vh, 460px);
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rl-next {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 6px 0 14px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--rk, #ffd568) 45%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rk, #ffd568) 16%, transparent), transparent 64%),
    rgba(10, 14, 28, 0.6);
}
.rl-next-icon { color: var(--rk, #ffd568); filter: drop-shadow(0 0 9px color-mix(in srgb, var(--rk) 55%, transparent)); }
.rl-next-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rl-next-copy small { color: #8c879b; font-size: 0.71rem; letter-spacing: 0.06em; text-transform: uppercase; }
.rl-next-copy b { font-size: 0.95rem; font-weight: 900; color: var(--rk, #ffd568); }
.rl-next-copy b em { color: #b9b4c9; font-size: 0.73rem; font-style: normal; font-weight: 800; margin-left: 6px; }
.rl-next-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.rl-next-bar i { display: block; height: 100%; border-radius: 999px; background: var(--rk, #ffd568); }
.rl-next-xp { color: #8c879b; text-transform: none !important; letter-spacing: 0.02em !important; }

.rl-tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 7px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rk, #9aa0ae);
}
.rl-tier-head em { color: #6f6a80; font-size: 0.71rem; font-style: normal; letter-spacing: 0.04em; }
.rl-tier-note { margin: 0 0 8px; color: #8c879b; font-size: 0.71rem; line-height: 1.5; }
.rl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.rl-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.02);
}
.rl-row .rl-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--rk, #9aa0ae); }
.rl-row .rl-ico-t { font-size: 0.74rem; font-weight: 900; letter-spacing: 0.02em; }
.rl-row .rl-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rl-row .rl-copy b { font-size: 0.8rem; font-weight: 800; color: #d8d4e4; }
.rl-row .rl-copy small { color: #7c778e; font-size: 0.71rem; letter-spacing: 0.03em; }
.rl-row .rl-tag { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; color: var(--rk, #9aa0ae); }
/* Erreicht bleibt sichtbar, aber ruhig; die eigene Stufe und der naechste
   Schritt sind die beiden Zeilen, die auffallen sollen. */
.rl-row.is-locked { opacity: 0.42; }
.rl-row.is-done .rl-copy b { color: #9d98ad; }
.rl-row.is-now,
.rl-row.is-next {
  border-color: color-mix(in srgb, var(--rk, #ffd568) 55%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rk, #ffd568) 15%, transparent), transparent 66%),
    rgba(255, 255, 255, 0.03);
}
.rl-row.is-now .rl-copy b, .rl-row.is-next .rl-copy b { color: var(--rk, #ffd568); }
.rl-row.is-now { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rk) 35%, transparent) inset; }

/* ---------- Eigene Rangkarte ueber dem Hinweiskasten ---------- */
/* ---------- Eigene Rangkarte ----------
   Drei Zonen, in der Reihenfolge der Fragen, die man an sie stellt:
   1) mrc-head   Wer bin ich (Wappen, Titel, Abzeichen), was bringt der Platz
                 (Pokalvorschau) und wo stehe ich (Platz-Plakette)
   2) mrc-prog   Wie weit bin ich (Balken mit Start, Rest und Ziel)
   Die Karte oeffnet die Rangleiter – sie muss also auch anklickbar aussehen. */
.my-rank-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* Steht jetzt ganz oben in der Bestenliste-Karte, ueber "Halle der Geister". */
  margin: 0 0 12px;
  padding: 9px 12px 8px;
  border: 1px solid color-mix(in srgb, var(--rk, #4aa8ff) 40%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--rk, #4aa8ff) 17%, transparent), transparent 58%),
    rgba(10, 14, 28, 0.62);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.my-rank-card[hidden] { display: none; }
.my-rank-card:hover, .my-rank-card:focus-visible {
  border-color: color-mix(in srgb, var(--rk, #4aa8ff) 80%, transparent);
  box-shadow: 0 8px 26px -14px color-mix(in srgb, var(--rk, #4aa8ff) 85%, transparent);
  transform: translateY(-2px);
}
/* Sanftes Licht, das einmal ueber die Karte wandert – dezent genug, um im
   Menue nicht zu stoeren, sichtbar genug, um die Karte als Knopf zu lesen. */
.my-rank-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%,
    color-mix(in srgb, var(--rk-glow, #fff) 13%, transparent) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.my-rank-card:hover::after { animation: mrc-sheen 1.1s ease forwards; }
@keyframes mrc-sheen { to { transform: translateX(120%); } }
.my-rank-card.is-new { animation: mrc-in .45s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes mrc-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---- 1. Kopf ---- */
.my-rank-card .mrc-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
}
.my-rank-card .mrc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rk, #4aa8ff);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rk) 55%, transparent));
  animation: mrc-float 5.5s ease-in-out infinite;
}
@keyframes mrc-float {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rk) 50%, transparent)); }
  50%      { transform: translateY(-2px); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rk) 75%, transparent)); }
}
.my-rank-card .mrc-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.my-rank-card .mrc-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.my-rank-card .mrc-name {
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--rk-glow, #eaf2ff);
  text-shadow: 0 0 12px color-mix(in srgb, var(--rk) 45%, transparent);
}
.my-rank-card .mrc-tier { color: #8c879b; font-size: 0.72rem; letter-spacing: 0.04em; }
/* Platz-Plakette: die einzige Zahl der Karte, die nur fuer die Saison gilt. */
:is(.my-rank-card, .board-season-bar) .mrc-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
  white-space: nowrap;
}
:is(.my-rank-card, .board-season-bar) .mrc-place small { color: #8c879b; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; }
:is(.my-rank-card, .board-season-bar) .mrc-place strong { color: var(--gold); font-size: 1.05rem; line-height: 1.15; }
:is(.my-rank-card, .board-season-bar) .mrc-place em { color: #8c879b; font-size: 0.68rem; font-style: normal; }
/* In der Saison-Leiste ist der Platz der Anker der ganzen Aussage: groesser,
   mit Goldsaum, damit das Auge dort startet. */
.board-season-bar .mrc-place {
  padding: 5px 13px;
  border-color: rgba(255, 205, 104, 0.28);
  background: rgba(255, 205, 104, 0.07);
}
.board-season-bar .mrc-place strong { font-size: 1.45rem; font-weight: 900; letter-spacing: -0.01em; }
.board-season-bar .mrc-place em { font-size: 0.7rem; color: #a9a3bd; }
:is(.my-rank-card, .board-season-bar) .mrc-place.is-empty strong { color: #6b6880; }

/* ---- 2. Fortschritt ---- */
.my-rank-card .mrc-prog { display: flex; flex-direction: column; gap: 3px; }
.my-rank-card .mrc-prog-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.my-rank-card .mrc-prog-foot em b { color: var(--rk-glow, #eaf2ff); font-weight: 800; }
.my-rank-card .mrc-prog-foot small { color: #7b7690; font-size: 0.67rem; font-weight: 700; white-space: nowrap; }
.my-rank-card .mrc-prog-foot em { color: #a9a3bd; font-size: 0.68rem; font-style: normal; text-align: center; }
.my-rank-card .mrc-bar {
  position: relative;
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.my-rank-card .mrc-bar i {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rk, #4aa8ff), var(--rk-glow, #fff));
  box-shadow: 0 0 10px color-mix(in srgb, var(--rk) 70%, transparent);
  overflow: hidden;
  transition: width 0.7s cubic-bezier(.2, .8, .3, 1);
}
/* Wanderndes Glanzlicht im gefuellten Teil: der Balken lebt, ohne zu blinken. */
.my-rank-card .mrc-bar i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%);
  animation: mrc-bar-shine 3.4s ease-in-out infinite;
}
@keyframes mrc-bar-shine { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.my-rank-card .mrc-bar.is-full i { background: linear-gradient(90deg, #ffd35b, #fff3c4); }

/* ---- Pokalvorschau im Kopf ----
   Was der aktuelle Platz beim Saisonende einbringt – direkt neben dem Platz,
   damit man Ursache und Belohnung in einem Blick hat. */
:is(.my-rank-card, .board-season-bar) .mrc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 5px;
  border: 1px solid color-mix(in srgb, var(--tc, #ffd75e) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tc, #ffd75e) 12%, rgba(8, 11, 22, 0.6));
}
:is(.my-rank-card, .board-season-bar) .mrc-chip i {
  display: inline-flex;
  width: 30px;
  height: 30px;
  color: var(--tc, #ffd75e);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tg, #fff) 60%, transparent));
  animation: mrc-trophy-glow 3.8s ease-in-out infinite;
}
:is(.my-rank-card, .board-season-bar) .mrc-chip i svg { width: 100%; height: 100%; }
@keyframes mrc-trophy-glow {
  0%, 100% { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tg, #fff) 45%, transparent)); }
  50%      { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--tg, #fff) 85%, transparent)); }
}
:is(.my-rank-card, .board-season-bar) .mrc-chip-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
:is(.my-rank-card, .board-season-bar) .mrc-chip-copy small { color: #8c879b; font-size: 0.6rem; letter-spacing: 0.03em; }
:is(.my-rank-card, .board-season-bar) .mrc-chip-copy b { color: var(--tc, #ffd75e); font-size: 0.86rem; font-weight: 900; line-height: 1.15; white-space: nowrap; }
/* Der Name steht oben, die Erklaerung ("Unter den besten 50", "Kiste zum
   Oeffnen") darunter – das Chip sagt damit selbst, was es ist. */
.board-season-bar .mrc-chip { padding: 3px 12px 3px 5px; border-radius: 13px; }
.board-season-bar .mrc-chip i { width: 32px; height: 32px; flex: none; }
.board-season-bar .mrc-chip-copy small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Kistenvorschau neben dem Pokal: derselbe Chip, aber mit dem Bild der Kiste
   statt eines Icons. Der Pokal sagt WELCHEN Rang der Platz bringt, das hier
   WIEVIEL Beute – zusammen ist die Saison-Leiste die ganze Antwort. */
:is(.my-rank-card, .board-season-bar) .mrc-crates i { animation: none; }
:is(.my-rank-card, .board-season-bar) .mrc-crates i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tg, #fff) 55%, transparent));
}
/* Noch kein Pokal in Reichweite: gedaempft, aber mit sichtbarem Ziel. */
:is(.my-rank-card, .board-season-bar) .mrc-trophy.is-none { opacity: 0.72; }
:is(.my-rank-card, .board-season-bar) .mrc-trophy.is-none i { animation: none; filter: grayscale(0.5) drop-shadow(0 0 4px rgba(0, 0, 0, 0.5)); }
:is(.my-rank-card, .board-season-bar) .mrc-trophy.is-none .mrc-chip-copy b { color: #a9a3bd; font-weight: 800; }
/* Ab Bronze aufwaerts darf der Pokal leuchten. */
:is(.my-rank-card, .board-season-bar) .mrc-trophy[data-power="8"],
:is(.my-rank-card, .board-season-bar) .mrc-trophy[data-power="9"],
:is(.my-rank-card, .board-season-bar) .mrc-trophy[data-power="10"] {
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--tc) 55%, transparent);
}
/* Abzugswarnung unter dem Titel – steht nur da, wenn wirklich abgezogen wurde. */
.my-rank-card .mrc-season.is-reset { color: #ffd35b; font-size: 0.68rem; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .my-rank-card,
  .my-rank-card .mrc-icon,
  .my-rank-card .mrc-bar i::after,
  .my-rank-card .mrc-chip i,
  .my-rank-card:hover::after { animation: none; }
  .my-rank-card .mrc-bar i { transition: none; }
}


/* ---------- Rang-Aufstieg im Game-Over ---------- */
.go-rank {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 10px 0;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--rk, #4aa8ff) 38%, transparent);
  border-radius: 13px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rk, #4aa8ff) 12%, transparent), transparent 60%);
}
.go-rank[hidden] { display: none; }
.go-rank .gr-icon { font-size: 1.35rem; color: var(--rk); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rk) 55%, transparent)); }
.go-rank .gr-copy { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.go-rank .gr-copy small { color: #b3b0c4; font-size: 0.72rem; }
.go-rank .gr-bar { display: block; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.go-rank .gr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--rk), var(--rk-glow)); }

/* Aufstiegs- und Freischalt-Meldung nutzen die vorhandene Toast-Form. */
.ach-toast.rank-toast { border-color: color-mix(in srgb, var(--rk) 55%, transparent); }
.ach-toast.rank-toast .ai { display: inline-flex; width: 46px; height: 46px; align-items: center; color: var(--rk); text-shadow: 0 0 10px color-mix(in srgb, var(--rk) 60%, transparent); }
.ach-toast.hero-toast { border-color: color-mix(in srgb, var(--hc) 55%, transparent); }
.ach-toast.hero-toast .at-name { color: var(--hc); }

/* ==========================================================================
   AKTIONSLEISTE UNTER DER HELDENAUSWAHL
   Vier Kacheln: Seelen-Shop des Helden, Aussehen, Erfolge, VIP.
   ========================================================================== */
.hero-skin-row {
  display: grid;
  /* Immer vier Kacheln in einer Reihe – minmax(0,1fr) laesst sie schrumpfen,
     statt die Leiste umbrechen zu lassen. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 5px;
  margin-top: 8px;
}
.hero-skin-row[hidden] { display: none; }

.hero-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid rgba(146, 178, 255, 0.22);
  border-radius: 11px;
  background: rgba(10, 14, 28, 0.55);
  color: #c2cbe8;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.hero-tile:hover { border-color: var(--accent); background: rgba(20, 28, 52, 0.75); transform: translateY(-1px); }
.hero-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero-tile .ht-icon { font-size: 1rem; line-height: 1; }
.hero-tile .ht-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hero-tile .ht-copy small {
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-tile .ht-copy strong {
  color: #eaf0ff;
  font-size: 0.74rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-tile .ht-note {
  color: #8c879b;
  font-size: 0.7rem;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Der Pfeil kostet in vier schmalen Spalten zu viel Platz. */
.hero-tile .ht-arrow { display: none; }
.hero-tile .ht-bar {
  display: block;
  height: 3px;
  margin-top: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.hero-tile .ht-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hc, var(--accent)), #fff);
  transition: width 0.4s ease;
}

.hero-tile.ht-forge { border-color: color-mix(in srgb, var(--hc, #9b7bff) 34%, transparent); }
.hero-tile.ht-forge .ht-icon { color: var(--hc, var(--accent2)); }
.hero-tile.ht-forge .ht-copy strong { color: #cbb8ff; }

.hero-tile.ht-skins .ht-icon { color: #7ce0c0; }
.hero-tile.ht-skins.is-off { opacity: 0.5; cursor: default; }
.hero-tile.ht-skins.is-off:hover { transform: none; border-color: rgba(146, 178, 255, 0.22); background: rgba(10, 14, 28, 0.55); }

.hero-tile.ht-ach .ht-icon { color: var(--gold); }

.hero-tile.ht-vip {
  border-color: rgba(255, 211, 91, 0.4);
  background: linear-gradient(135deg, rgba(255, 211, 91, 0.13), rgba(155, 123, 255, 0.09) 60%, rgba(10, 14, 28, 0.55));
}
.hero-tile.ht-vip:hover { border-color: var(--gold); }
.hero-tile.ht-vip .ht-icon { color: var(--gold); text-shadow: 0 0 9px rgba(255, 211, 91, 0.6); }
.hero-tile.ht-vip .ht-copy strong { color: #ffe6a6; }
/* Die Shop-Kachel traegt nur EIN Wort - das darf dann auch gross sein und ist
   der eigentliche Knopf. Kein Preis mehr, der ihn klein haelt. */
.hero-tile.ht-vip.is-shop .ht-copy strong {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}
.hero-tile.ht-vip.is-active { border-color: rgba(120, 240, 190, 0.5); }
.hero-tile.ht-vip.is-active .ht-copy strong { color: #9ff8d2; }
.hero-tile.ht-vip.is-active[data-tier="3"] {
  border-color: rgba(255, 138, 224, 0.5);
  background: linear-gradient(135deg, rgba(143, 91, 255, 0.18), rgba(255, 138, 224, 0.12) 55%, rgba(10, 14, 28, 0.55));
}

.hero-tile.ht-unlock {
  border-color: rgba(255, 211, 91, 0.34);
  background: rgba(28, 22, 10, 0.5);
}
.hero-tile.ht-unlock .ht-icon { color: #ffdf9c; }
.hero-tile.ht-unlock .ht-copy strong { color: #ffdf9c; font-size: 0.74rem; white-space: normal; }
.hero-tile.ht-unlock.can-buy { border-color: rgba(120, 240, 190, 0.5); }
.hero-tile.ht-unlock.can-buy .ht-note { color: #9ff8d2; }

/* Schmale Karten: vier Kacheln nebeneinander quetschen die Beschriftungen in
   drei Zeilen. Zwei Spalten geben jeder Kachel wieder eine lesbare Breite. */
@media (max-width: 620px) {
  .hero-skin-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Gesperrte Heldenkarte in der Auswahl */
.hero-card.is-locked { filter: grayscale(0.85) brightness(0.62); }
.hero-card.is-locked:hover { filter: grayscale(0.5) brightness(0.8); }
.hero-card .hc-lock {
  position: absolute;
  right: 5px;
  bottom: 5px;
  font-size: 0.78rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.btn-play.hero-locked { opacity: 0.55; }

/* ---------- Skin-Auswahl (Overlay) ---------- */
.skinpick-panel { max-width: 640px; }
.skinpick-title { color: var(--hc); margin-bottom: 4px; }
.skinpick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 9px;
  margin: 14px 0;
}
.skinpick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 7px 8px;
  border: 1px solid rgba(146, 178, 255, 0.22);
  border-radius: 13px;
  background: rgba(10, 14, 28, 0.55);
  color: #c2cbe8;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.skinpick-card:hover { border-color: var(--hc); transform: translateY(-2px); }
.skinpick-card.is-on { border-color: rgba(120, 240, 190, 0.6); background: rgba(120, 240, 190, 0.1); }
.skinpick-card.is-locked { opacity: 0.62; }
.skinpick-card.is-locked .spc-tag { color: #ffdf9c; }
.skinpick-card .spc-art { display: block; height: 74px; }
.skinpick-card .spc-art img { height: 100%; width: auto; image-rendering: pixelated; }
.skinpick-card .spc-name { font-size: 0.74rem; font-weight: 800; color: #eaf0ff; text-align: center; }
.skinpick-card .spc-tag { font-size: 0.71rem; color: var(--muted); text-align: center; }
/* Startwaffe je Skin – der eigentliche Inhalt dieser Auswahl. */
.skinpick-card .spc-weapon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.71rem;
  font-weight: 800;
  color: #dbe4ff;
  text-align: center;
}
.skinpick-card .spc-weapon i { font-style: normal; color: var(--hc); }
/* Eigene Fähigkeit je Skin – mit der Startwaffe der Grund, überhaupt zu wählen.
   Name fett wie die Waffe, der Erklärtext klein darunter: die Karte muss beides
   tragen, ohne dass das Raster in die Höhe schießt. */
.skinpick-card .spc-trait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #e6dbff;
  text-align: center;
}
.skinpick-card .spc-trait i { font-style: normal; color: #c8a8ff; }
.skinpick-card .spc-trait.is-none { color: var(--muted); font-weight: 600; }
.skinpick-card .spc-traitdesc {
  font-size: 0.65rem;
  line-height: 1.35;
  color: var(--muted);
  text-align: center;
  /* Sechs Zeilen reichen für die meisten Fähigkeiten; darüber hinaus wird
     abgeschnitten, damit eine lange Beschreibung nicht das ganze Raster
     verzieht. Der volle Text hängt als Tooltip an der Karte. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Bezahlbar: die Karte bleibt gedimmt, der Preis leuchtet trotzdem. */
.skinpick-card.can-buy { opacity: 0.92; border-color: rgba(203, 184, 255, 0.5); }
.skinpick-card.can-buy .spc-tag { color: #d9c7ff; font-weight: 800; }
.skinpick-balance {
  margin: 0 0 4px;
  color: #cbb8ff;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
}

/* ==========================================================================
   SEELENSCHMIEDE: HELDENREITER UND FREISCHALT-KARTE
   ========================================================================== */
.forge-hero-name { font-style: normal; font-size: 0.72em; opacity: 0.95; }
.forge-hero-name::before { content: "· "; opacity: 0.5; }

.forge-hero-tabs {
  display: flex;
  gap: 7px;
  margin: 12px 0 4px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.forge-hero-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  width: 86px;
  padding: 7px 5px 6px;
  border: 1px solid rgba(146, 178, 255, 0.2);
  border-radius: 12px;
  background: rgba(10, 14, 28, 0.55);
  color: #c2cbe8;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.forge-hero-tab:hover { border-color: var(--hc); }
.forge-hero-tab.sel {
  border-color: var(--hc);
  background: color-mix(in srgb, var(--hc) 14%, rgba(10, 14, 28, 0.7));
}
.forge-hero-tab img { height: 42px; width: auto; image-rendering: pixelated; }
.forge-hero-tab.is-locked img { filter: grayscale(1) brightness(0.5); }
.forge-hero-tab .fht-name {
  font-size: 0.71rem;
  font-weight: 800;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forge-hero-tab .fht-lv { color: var(--muted); font-size: 0.7rem; }
.forge-hero-tab .fht-lock { position: absolute; top: 5px; right: 6px; font-size: 0.74rem; }

.forge-locked {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--hc) 38%, transparent);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--hc) 12%, transparent), transparent 65%);
}
.forge-locked .fl-art { height: 96px; width: auto; image-rendering: pixelated; filter: grayscale(0.7) brightness(0.75); }
.forge-locked .fl-copy { display: flex; flex-direction: column; gap: 7px; }
.forge-locked .fl-kicker {
  color: var(--muted);
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.forge-locked h3 { color: var(--hc); font-size: 1rem; }
.forge-locked .fl-ways { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.forge-locked .fl-way { display: flex; align-items: center; gap: 8px; }
.forge-locked .fl-way-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(146, 178, 255, 0.3);
  border-radius: 999px;
  font-size: 0.73rem;
}
.forge-locked .fl-way.is-done .fl-way-icon { border-color: rgba(120, 240, 190, 0.6); color: #9ff8d2; }
.forge-locked .fl-way b { display: block; color: #eaf0ff; font-size: 0.75rem; }
.forge-locked .fl-way small { display: block; color: var(--muted); font-size: 0.72rem; }
.forge-locked .fl-or { color: var(--muted); font-size: 0.71rem; text-transform: uppercase; letter-spacing: 0.1em; }
.forge-locked .fl-buy { grid-column: 1 / -1; margin-top: 4px; }
.forge-locked .fl-buy.unaffordable { opacity: 0.6; }

/* Held-eigene Runen heben sich farblich vom gemeinsamen Katalog ab. */
.forge-upgrade.is-hero-rune {
  border-color: color-mix(in srgb, var(--hc) 42%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--hc) 11%, transparent), transparent 60%),
              rgba(10, 14, 28, 0.55);
}
.forge-upgrade.is-hero-rune .forge-upgrade-name { color: var(--hc); }

/* ==========================================================================
   VIP-PAKETE
   ========================================================================== */
.vip-packs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 12px;
}
.vip-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 15px 15px;
  border: 1px solid rgba(146, 178, 255, 0.24);
  border-radius: 17px;
  background: rgba(10, 14, 28, 0.6);
}
.vip-pack.vip-pack-1 { border-color: rgba(255, 211, 91, 0.34); }
.vip-pack.vip-pack-2 { border-color: rgba(200, 216, 240, 0.34); }
.vip-pack.vip-pack-3 {
  border-color: rgba(255, 138, 224, 0.42);
  background: linear-gradient(150deg, rgba(143, 91, 255, 0.14), rgba(255, 138, 224, 0.08) 55%, rgba(10, 14, 28, 0.6));
}
.vip-pack.is-owned { border-color: rgba(120, 240, 190, 0.5); }
.vip-pack .vip-flag {
  position: absolute;
  top: -9px;
  right: 14px;
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8f5bff, #ff8ae0);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* "Einmal zahlen" ist das staerkste Verkaufsargument – es steht deshalb ueber
   den Preisen, am Preis selbst und noch einmal unter dem Kauf-Knopf. */
.vip-once-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(120, 240, 190, 0.34);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(120, 240, 190, 0.12), rgba(10, 14, 28, 0.55) 62%);
}
.vip-once-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.vip-once-copy strong { color: #d6ffee; font-size: 1.02rem; font-weight: 900; letter-spacing: 0.2px; }
.vip-once-copy span { color: #c2cbe8; font-size: 0.75rem; line-height: 1.45; }
.vip-once-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vip-once-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid rgba(120, 240, 190, 0.3);
  border-radius: 999px;
  color: #9ff8d2;
  font-size: 0.73rem;
  font-weight: 800;
  white-space: nowrap;
}
.vip-once-chip .vip-ic { width: 13px; height: 13px; stroke: currentColor; }
.vip-ic-lg { width: 26px; height: 26px; stroke: #7ff0be; flex: none; }

.vip-once-tag {
  color: #9ff8d2;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vip-once-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 7px 0 0;
  color: #9ff8d2;
  font-size: 0.73rem;
  font-weight: 700;
  text-align: center;
}
.vip-once-foot .vip-ic { width: 13px; height: 13px; stroke: currentColor; }
.vip-pack-price-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }

.vip-pack-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.vip-badge-chip {
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.vip-badge-chip[data-tier="1"] { background: linear-gradient(135deg, #b9862a, #ffd35b); color: #2b1d02; }
.vip-badge-chip[data-tier="2"] { background: linear-gradient(135deg, #7c8ba0, #e6f0ff); color: #16202e; }
.vip-badge-chip[data-tier="3"] { background: linear-gradient(135deg, #8f5bff, #ff8ae0 45%, #ffd35b); color: #1a0a2b; }
.vip-pack-price { display: flex; align-items: baseline; gap: 7px; color: #fff; font-size: 1.22rem; font-weight: 900; }
.vip-pack-price s { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.vip-upgrade-note { color: #9ff8d2; font-size: 0.72rem; line-height: 1.45; }
.vip-pack .vip-btn { margin-top: auto; width: 100%; }
.vip-pack .vip-once-foot + .vip-btn, .vip-pack .vip-btn + .vip-once-foot { margin-top: 7px; }
.vip-pack .owned-pill { margin-top: auto; text-align: center; }
.vip-packs-note { margin-top: 11px; color: var(--muted); font-size: 0.73rem; line-height: 1.55; }

/* --- Bildhafte Vorteile: Vorschau oben, Bildunterschrift darunter --------- */
.vip-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid rgba(146, 178, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.028);
}
.vip-block-cap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #c2cbe8;
  font-size: 0.74rem;
  line-height: 1.35;
}
.vip-block-cap b { color: #fff6dd; font-size: 0.92rem; font-weight: 900; }
.vip-block-cap small { margin-left: auto; color: var(--muted); font-size: 0.71rem; white-space: nowrap; }
.vip-cap-solo { padding: 0 2px; }
.vip-ic {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Skin-Vorschau: enthaltene Skins farbig, fehlende als leerer Umriss. */
.vip-skin-strip { display: flex; gap: 6px; }
.vip-skin-chip {
  position: relative;
  flex: 1 1 0;
  aspect-ratio: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--skin-tint, #92b2ff) 55%, transparent);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--skin-tint, #92b2ff) 30%, transparent), transparent 70%),
    rgba(6, 9, 20, 0.72);
}
.vip-skin-chip .skin-art {
  position: relative;
  z-index: 1;
  width: 92%;
  height: 92%;
  object-fit: contain;
  image-rendering: pixelated;
}
/* Die Aura der Chips ist klein – dieselben Partikel, nur passend skaliert,
   damit sie im Rahmen bleiben statt ihn zu sprengen. */
.vip-skin-chip .skin-fx { transform: translate(-50%, -50%) scale(0.55); }
.vip-skin-chip.is-locked {
  border-style: dashed;
  border-color: rgba(146, 178, 255, 0.2);
  background: rgba(255, 255, 255, 0.02);
}
.vip-skin-chip.is-locked::after {
  content: "+";
  color: rgba(178, 195, 235, 0.35);
  font-size: 0.9rem;
  font-weight: 900;
}

/* Seelen-Bonus als Balken: die Stufen sind so direkt vergleichbar. */
.vip-meter-num { color: #ffe9a8 !important; font-size: 1.05rem !important; }
.vip-meter-bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.vip-meter-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b9862a, #ffd35b 60%, #fff3cd);
  box-shadow: 0 0 10px rgba(255, 211, 91, 0.4);
}
.vip-pack-3 .vip-meter-bar i { background: linear-gradient(90deg, #8f5bff, #ff8ae0 55%, #ffd35b); }

/* Alle Helden – Portraits statt Aufzaehlung. */
.vip-hero-row { display: flex; gap: 5px; }
.vip-hero-face {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 3px;
  border: 1px solid rgba(146, 178, 255, 0.18);
  border-radius: 9px;
  background: rgba(6, 9, 20, 0.6);
  image-rendering: pixelated;
}

/* Wie das Abzeichen spaeter in der Bestenliste steht. */
.vip-board-demo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 9px;
  background: rgba(6, 9, 20, 0.62);
}
.vip-board-rank { color: var(--gold); font-size: 0.74rem; font-weight: 900; }
.vip-board-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vip-badge-chip.is-mini { padding: 1px 7px; font-size: 0.7rem; }


/* Skin-Karte: in welchem Paket steckt der Skin? */
.skin-vip-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}
.skin-vip-tag[data-tier="1"] { background: rgba(255, 211, 91, 0.9); color: #2b1d02; }
.skin-vip-tag[data-tier="2"] { background: rgba(230, 240, 255, 0.9); color: #16202e; }
.skin-vip-tag[data-tier="3"] { background: linear-gradient(135deg, #8f5bff, #ff8ae0); color: #fff; }

/* ==========================================================================
   KONTO: KOPFZEILEN-KNOPF UND PROFIL
   ========================================================================== */
.account-slot[hidden] { display: none; }

/* In der Kopfzeile: nicht mitwachsen und nicht umbrechen, damit der Knopf
   neben dem Sprachumschalter stehen bleibt. */
#menu .nav-account { flex: 0 0 auto; }
#menu .nav-account .acc-chip { white-space: nowrap; }

.acc-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 6px;
  border: 1px solid rgba(146, 178, 255, 0.26);
  border-radius: 999px;
  background: rgba(10, 14, 28, 0.6);
  color: #c2cbe8;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.acc-chip:hover { border-color: var(--accent); background: rgba(20, 28, 52, 0.8); }
.acc-chip.is-signed { border-color: color-mix(in srgb, var(--rk, #4aa8ff) 45%, transparent); }

/* Der Gast-Zustand ist ein Angebot, kein Statusfeld: kraeftiger Rahmen,
   Akzentflaeche und ein ruhiger Puls, damit er im Kopfbereich auffaellt. */
.acc-chip.acc-chip-guest {
  padding: 6px 13px 6px 7px;
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 26%, transparent),
    rgba(10, 14, 28, 0.65));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  animation: accPulse 2.6s ease-out infinite;
}
.acc-chip.acc-chip-guest:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 38%, transparent),
    rgba(20, 28, 52, 0.8));
  animation: none;
}
.acc-chip.acc-chip-guest .acc-avatar-guest {
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  color: #eaf4ff;
}
.acc-chip.acc-chip-guest .acc-chip-copy small { color: color-mix(in srgb, var(--accent) 78%, #fff); }
.acc-chip.acc-chip-guest .acc-chip-copy strong { font-size: 0.8rem; }

/* Ein Gast, der schon gespielt hat, ist kein Angebot mehr, sondern ein
   Spieler mit Rang: derselbe ruhige Auftritt wie ein angemeldetes Konto,
   Farbe aus der Rangstufe statt aus dem Akzent, und kein Puls. */
.acc-chip.acc-chip-guest.is-played {
  padding: 5px 11px 5px 6px;
  border-color: color-mix(in srgb, var(--rk, #4aa8ff) 45%, transparent);
  background: rgba(10, 14, 28, 0.6);
  box-shadow: none;
  animation: none;
}
.acc-chip.acc-chip-guest.is-played:hover {
  border-color: var(--rk, var(--accent));
  background: rgba(20, 28, 52, 0.8);
}
.acc-chip.acc-chip-guest.is-played .acc-avatar-guest {
  background: color-mix(in srgb, var(--rk, #4aa8ff) 26%, transparent);
  color: #eaf4ff;
}
.acc-chip.acc-chip-guest.is-played .acc-chip-copy small { color: var(--rk, #9fc4ff); }

@keyframes accPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-chip.acc-chip-guest { animation: none; }
}
.acc-chip .acc-avatar {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: rgba(74, 168, 255, 0.2);
  object-fit: cover;
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}
/* ---- Rang im Kopfzeilen-Knopf ----
   Der Knopf traegt kein Profilbild mehr, sondern das Rangwappen in einem
   Fortschrittsring: der gefuellte Teil ist der Weg zur naechsten Stufe.
   Details stehen im Aufklapper (.acc-pop), ein Klick oeffnet wie immer das
   Profil. Der Knopf ist der Anker des Aufklappers. */
.acc-chip-rank-view { position: relative; }
.acc-chip .acc-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 999px;
  background:
    conic-gradient(var(--rk-glow, #eaf2ff) calc(var(--p, 0) * 1%),
                   rgba(255, 255, 255, 0.12) 0);
  transition: background 0.5s cubic-bezier(.2, .8, .3, 1);
}
/* Innenscheibe: der Ring bleibt als 2 px breiter Rand stehen. */
.acc-chip .acc-orb::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: rgba(8, 11, 22, 0.92);
}
.acc-chip .acc-orb.is-full {
  background: conic-gradient(#ffd35b, #fff3c4, #ffd35b);
  box-shadow: 0 0 10px -2px rgba(255, 211, 91, 0.7);
}
.acc-chip .acc-orb .rb-icon {
  position: relative;
  display: inline-flex;
  width: 20px;
  height: 20px;
}
.acc-chip .acc-orb .rb-icon svg { width: 100%; height: 100%; }

/* Der Aufklapper haengt am Slot, nicht am Knopf: er traegt eigene Knoepfe
   (Rangleiter, Profil) und darf deshalb nicht IM Knopf stehen. */
#menu .nav-account, .account-slot { position: relative; }
.acc-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 246px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--rk, #4aa8ff) 45%, transparent);
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--rk, #4aa8ff) 16%, transparent), transparent 60%),
    rgba(8, 11, 22, 0.97);
  box-shadow: 0 18px 40px -18px #000;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
/* Unsichtbare Bruecke ueber den 8-px-Spalt, damit der Zeiger den Aufklapper
   erreicht, ohne dass er zwischendurch verschwindet. */
.acc-pop::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.account-slot:hover .acc-pop,
.account-slot:focus-within .acc-pop {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.acc-pop-acts { display: flex; gap: 6px; margin-top: 2px; }
.acc-pop-btn {
  flex: 1 1 0;
  padding: 5px 8px;
  border: 1px solid rgba(146, 178, 255, 0.26);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: #cfd7ee;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.acc-pop-btn:hover { border-color: var(--rk, var(--accent)); background: rgba(255, 255, 255, 0.08); color: #fff; }
.acc-pop-btn.is-primary {
  border-color: color-mix(in srgb, var(--rk, #4aa8ff) 55%, transparent);
  background: color-mix(in srgb, var(--rk, #4aa8ff) 20%, transparent);
  color: var(--rk-glow, #eaf2ff);
}
.acc-pop-head { display: flex; align-items: center; gap: 8px; }
.acc-pop-head .rb-icon { display: inline-flex; width: 34px; height: 34px; flex: 0 0 auto; }
.acc-pop-head .rb-icon svg { width: 100%; height: 100%; }
.acc-pop-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acc-pop-id b {
  color: var(--rk-glow, #eaf2ff);
  font-size: 0.86rem;
  font-weight: 900;
  text-shadow: 0 0 12px color-mix(in srgb, var(--rk) 45%, transparent);
}
.acc-pop-id small { color: #8c879b; font-size: 0.68rem; }
.acc-pop-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.acc-pop-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rk, #4aa8ff), var(--rk-glow, #fff));
  box-shadow: 0 0 10px color-mix(in srgb, var(--rk) 70%, transparent);
  transition: width 0.6s cubic-bezier(.2, .8, .3, 1);
}
.acc-pop-bar.is-full i { background: linear-gradient(90deg, #ffd35b, #fff3c4); }
.acc-pop-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.acc-pop-foot small { color: #a9a3bd; font-size: 0.69rem; }
.acc-pop-foot em { color: var(--rk-glow, #eaf2ff); font-size: 0.69rem; font-style: normal; font-weight: 800; }
.acc-pop-next { color: #cfd7ee; font-size: 0.68rem; font-weight: 700; }
.acc-pop-decay { color: #7b7690; font-size: 0.65rem; }

.acc-chip .acc-chip-copy { display: flex; flex-direction: column; gap: 0; line-height: 1.25; text-align: left; }
.acc-chip .acc-chip-copy small { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.05em; }
.acc-chip .acc-chip-copy strong { color: #eaf0ff; font-size: 0.74rem; font-weight: 800; }

/* Das Overlay hat 20 px Innenabstand: eine reine vw-Breite waere breiter als
   der Platz dazwischen und liesse sich seitlich nicht mehr erreichen. */
.acc-panel { width: min(840px, calc(100vw - 44px)); max-width: none; text-align: left; }
.acc-title { margin: 6px 0 8px; }
.acc-benefits { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; list-style: none; }
.acc-benefits li {
  position: relative;
  padding-left: 18px;
  color: #c2cbe8;
  font-size: 0.76rem;
  line-height: 1.5;
}
.acc-benefits li::before { content: "✦"; position: absolute; left: 0; color: var(--accent); font-size: 0.73rem; }
.acc-google { display: flex; justify-content: center; margin: 16px 0 8px; min-height: 44px; }
.acc-google[hidden] { display: none; }
.acc-status { min-height: 18px; color: #ffdf9c; font-size: 0.74rem; text-align: center; }
.acc-status.is-busy { color: var(--muted); }
.acc-privacy { margin-top: 10px; color: var(--muted); font-size: 0.72rem; line-height: 1.55; }

.acc-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  align-items: center;
  margin: 12px 0 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--rk, #4aa8ff) 38%, transparent);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rk, #4aa8ff) 13%, transparent), transparent 62%);
}
.acc-hero-avatar {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 2px solid color-mix(in srgb, var(--rk) 55%, transparent);
  border-radius: 999px;
  background: rgba(74, 168, 255, 0.18);
  object-fit: cover;
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
}
.acc-hero-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acc-hero-name { display: flex; align-items: center; gap: 8px; }
.acc-hero-name h2 { font-size: 1.15rem; }
.acc-rank-line { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.acc-rank-title { font-size: 0.92rem; font-weight: 900; }
.acc-rank-lvl { color: var(--muted); font-size: 0.73rem; }
.acc-rank-tier { color: var(--muted); font-size: 0.71rem; letter-spacing: 0.06em; text-transform: uppercase; }
.acc-xp { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.acc-xp-bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.acc-xp-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rk), var(--rk-glow)); transition: width 0.5s ease; }
.acc-xp small { color: var(--muted); font-size: 0.71rem; }

.acc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}
.acc-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid rgba(146, 178, 255, 0.18);
  border-radius: 12px;
  background: rgba(10, 14, 28, 0.5);
}
.acc-stat small { color: var(--muted); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.acc-stat strong { color: #eaf0ff; font-size: 0.98rem; font-weight: 900; }
.acc-stat span { color: var(--muted); font-size: 0.71rem; font-weight: 800; line-height: 1.35; }

.acc-fav { margin-top: 11px; color: #ffdf9c; font-size: 0.75rem; }
.acc-heroes { margin-top: 14px; }
.acc-heroes h3 { color: var(--muted); font-size: 0.71rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.acc-hero-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.acc-hero-row {
  display: grid;
  grid-template-columns: 1.5fr 1.1fr repeat(4, 0.9fr);
  gap: 8px;
  padding: 7px 11px;
  border-radius: 10px;
  background: rgba(10, 14, 28, 0.45);
  font-size: 0.73rem;
}
.acc-hero-row .ahr-name { color: #eaf0ff; font-weight: 800; }
.acc-hero-row .ahr-val { color: var(--muted); }
.acc-meta { margin-top: 13px; color: var(--muted); font-size: 0.72rem; }

/* Gastprofil: der eine Satz, der den Unterschied zum Konto erklaert. Er steht
   unter den Reitern, nicht darueber – das Profil selbst ist die Hauptsache. */
.acc-guesthint {
  margin-top: 13px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: #c8d6f5;
  font-size: 0.74rem;
  line-height: 1.55;
}
/* "Gast" hinter dem Namen im Fremdprofil – eine Angabe, keine Abwertung. */
.acc-guest-tag {
  padding: 2px 8px;
  border: 1px solid rgba(146, 178, 255, 0.3);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.acc-actions { display: flex; gap: 9px; margin-top: 15px; }
.acc-actions button { flex: 1; }

/* ---------- Profil: Reiter, Diagramme, Sammlung ---------- */
.acc-hero-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.acc-pill {
  padding: 3px 9px;
  border: 1px solid rgba(146, 178, 255, 0.22);
  border-radius: 999px;
  background: rgba(10, 14, 28, 0.5);
  color: #c2cbe8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.acc-tabs {
  display: flex;
  gap: 5px;
  margin: 4px 0 12px;
  padding: 4px;
  border: 1px solid rgba(146, 178, 255, 0.16);
  border-radius: 12px;
  background: rgba(10, 14, 28, 0.5);
}
.acc-tab {
  flex: 1;
  padding: 7px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.acc-tab:hover { color: #eaf0ff; background: rgba(74, 168, 255, 0.1); }
.acc-tab.is-on { color: #eaf0ff; background: linear-gradient(180deg, rgba(74, 168, 255, 0.32), rgba(74, 168, 255, 0.14)); }

.acc-tabbody { min-height: 180px; }
.acc-sec { margin-top: 16px; }
.acc-sec:first-child { margin-top: 0; }
.acc-sec > h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.acc-sec-sub { color: #ffdf9c; font-size: 0.71rem; letter-spacing: 0.04em; text-transform: none; }
.acc-hint { margin-top: 7px; color: var(--muted); font-size: 0.72rem; line-height: 1.5; }

/* --- Lieblinge --- */
.acc-favs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.acc-fav-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--c, #4aa8ff) 34%, transparent);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c, #4aa8ff) 14%, transparent), rgba(10, 14, 28, 0.5) 70%);
}
.acc-fav-card .afc-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(10, 14, 28, 0.55);
  font-size: 1.05rem;
}
.acc-fav-card .afc-copy { display: flex; flex-direction: column; min-width: 0; }
.acc-fav-card small { color: var(--muted); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.acc-fav-card strong { overflow: hidden; color: #eaf0ff; font-size: 0.84rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.acc-fav-card span { color: var(--muted); font-size: 0.71rem; }

/* --- Verlaufsdiagramm --- */
.acc-chart-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.acc-mini {
  padding: 4px 10px;
  border: 1px solid rgba(146, 178, 255, 0.2);
  border-radius: 999px;
  background: rgba(10, 14, 28, 0.5);
  color: var(--muted);
  font: inherit;
  font-size: 0.71rem;
  font-weight: 900;
  cursor: pointer;
}
.acc-mini:hover { color: #eaf0ff; border-color: var(--accent); }
.acc-mini.is-on { color: #06101f; border-color: transparent; background: var(--accent); }

.acc-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 132px;
  padding: 10px 8px 0;
  border: 1px solid rgba(146, 178, 255, 0.16);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 14, 28, 0.2), rgba(10, 14, 28, 0.6));
}
.acc-bar {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
  cursor: default;
}
.acc-bar i {
  display: block;
  height: var(--h, 4%);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--c, #4aa8ff), color-mix(in srgb, var(--c, #4aa8ff) 35%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--c, #4aa8ff) 40%, transparent);
  transform-origin: bottom;
  animation: accBarGrow 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.acc-bar b {
  position: absolute;
  bottom: calc(var(--h, 4%) + 3px);
  left: 0;
  width: 100%;
  color: #eaf0ff;
  font-size: 0.69rem;
  font-weight: 900;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}
.acc-bar:hover i { filter: brightness(1.25); }
.acc-bar:hover b { opacity: 1; }
@keyframes accBarGrow { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .acc-bar i { animation: none; } }

/* --- Spielzeit-Verteilung --- */
.acc-split { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; }
.acc-split i { display: block; min-width: 3px; background: var(--c, #4aa8ff); }

/* --- Heldenzeilen --- */
.acc-hero-row { align-items: center; }
.acc-hero-row.is-locked { opacity: 0.45; }
.acc-hero-row .ahr-name { display: flex; align-items: center; gap: 6px; }
.acc-hero-row .ahr-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--c, #4aa8ff); box-shadow: 0 0 8px var(--c, #4aa8ff); }
.acc-hero-row .ahr-lock { font-size: 0.71rem; text-decoration: none; }
.acc-hero-row .ahr-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.acc-hero-row .ahr-track i { display: block; height: 100%; border-radius: 999px; background: var(--c, #4aa8ff); }

/* --- Erfolge --- */
.acc-progress { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.acc-progress-bar { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.acc-progress-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: width 0.5s ease; }
.acc-progress small { color: var(--muted); font-size: 0.71rem; text-align: right; }

.acc-ach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 7px; }
.acc-ach {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(146, 178, 255, 0.14);
  border-radius: 11px;
  background: rgba(10, 14, 28, 0.45);
  opacity: 0.6;
}
.acc-ach.is-done {
  border-color: color-mix(in srgb, var(--gold) 42%, transparent);
  background: linear-gradient(135deg, rgba(255, 211, 91, 0.13), rgba(10, 14, 28, 0.5) 65%);
  opacity: 1;
}
.acc-ach .aa-icon { font-size: 1.1rem; }
.acc-ach strong { display: block; color: #eaf0ff; font-size: 0.75rem; font-weight: 900; }
.acc-ach small { display: block; color: var(--muted); font-size: 0.71rem; line-height: 1.4; }

/* --- Sammlung --- */
.acc-coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
.acc-coll {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(146, 178, 255, 0.13);
  border-radius: 10px;
  background: rgba(10, 14, 28, 0.42);
  color: var(--muted);
  font-size: 0.72rem;
  opacity: 0.5;
}
.acc-coll.is-have {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  background: rgba(74, 168, 255, 0.1);
  color: #eaf0ff;
  opacity: 1;
}
.acc-coll i { font-size: 0.9rem; font-style: normal; }
.acc-coll b { flex: 1; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.acc-coll u { color: var(--muted); font-size: 0.7rem; font-weight: 900; text-decoration: none; }

/* --- Spezialskin (js/account.js, specialSection)
   Vergeben statt gekauft, deshalb steht der Block ganz oben im Profil und nur
   bei den wenigen, die einen haben. Jede Karte faerbt sich ueber --c in der
   Tonung ihres Skins; "Aus" bleibt neutral. */
.acc-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
  margin-top: 9px;
}
.acc-spec {
  --c: #92b2ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 9px 9px;
  border: 1px solid rgba(146, 178, 255, 0.16);
  border-radius: 12px;
  background: rgba(10, 14, 28, 0.46);
  color: #eaf0ff;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
.acc-spec:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-2px); }
.acc-spec.is-on {
  border-color: color-mix(in srgb, var(--c) 72%, transparent);
  background: color-mix(in srgb, var(--c) 13%, rgba(10, 14, 28, 0.46));
  box-shadow: 0 0 18px -6px var(--c);
}
.acc-spec-art {
  width: 100%;
  max-width: 104px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--c) 45%, transparent));
}
/* "Aus": dieselbe Flaeche, aber ohne Bild – sonst springt das Raster. */
.acc-spec-art.is-off {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(146, 178, 255, 0.22);
  border-radius: 10px;
  color: var(--muted);
  font-size: 1.4rem;
  filter: none;
}
.acc-spec b { color: #eaf0ff; font-size: 0.78rem; font-weight: 900; }
.acc-spec small { color: var(--muted); font-size: 0.68rem; line-height: 1.4; }
.acc-spec-state {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.acc-spec.is-on .acc-spec-state { color: var(--c); }

/* ================================================================ Saison-Pokale
   Zehn Auszeichnungen, vom Eisen-Abzeichen (Top 1000) bis zum Champion-Pokal.
   Die Emblem-SVGs bringen ihre eigenen Ebenen mit (js/trophy-icons.js) – hier
   steht nur, wie die UMGEBUNG mitwaechst: Rahmen, Schein, Sockel, Bewegung.
   Jede Karte setzt --tc (Metall) und --tg (Glanz) selbst, die Regeln unten
   greifen darauf zu, statt zehnmal dieselbe Farbe zu wiederholen. */

.tr-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; font-style: normal; }
.tr-icon svg { display: block; overflow: visible; }

/* ---- Chip in der Bestenliste ---- */
.score-list .pl-trophy {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  /* Bewusst schmal: die Zeile gehoert dem Namen. Jedes Pixel hier kuerzt ihn,
     und die Zahl der Auszeichnungen sitzt deshalb absolut UEBER dem Emblem. */
  gap: 3px;
  height: 17px;
  margin-left: -2px;
  font-style: normal;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tg, #fff) 45%, transparent));
}
.score-list .pl-trophy .pl-ticon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}
.score-list .pl-trophy svg { width: 100%; height: 100%; }
/* Die Stufe im Klartext ("Top 5"). Klein und in der Pokalfarbe: sie soll den
   Namen begleiten, nicht mit ihm um Aufmerksamkeit streiten. */
.score-list .pl-tlbl {
  flex: 0 0 auto;
  color: var(--tc, #fff);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 6px color-mix(in srgb, var(--tg, #fff) 40%, transparent);
}
.score-list .pl-trophy u {
  position: absolute;
  right: -4px;
  bottom: -3px;
  padding: 0 2px;
  border-radius: 999px;
  background: rgba(6, 10, 18, 0.9);
  color: var(--tg, #fff);
  font-size: 0.69rem;
  font-weight: 900;
  text-decoration: none;
}

/* Zeilen mit Konto fuehren ins oeffentliche Profil – das muss man ihnen ansehen. */
.score-list li.is-profile { cursor: pointer; transition: background 0.16s ease, transform 0.16s ease; }
.score-list li.is-profile:hover,
.score-list li.is-profile:focus-visible {
  background: rgba(120, 170, 255, 0.16);
  outline: none;
  transform: translateX(2px);
}
.score-list li.is-profile:focus-visible { box-shadow: inset 0 0 0 1px var(--accent, #4aa8ff); }

/* ---- Vitrine: alle zehn Stufen nebeneinander ---- */
.tr-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 8px;
  margin: 4px 0 10px;
}
.tr-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  padding: 9px 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: center;
  /* Offene Stufen sind da, aber kalt: man soll sehen, was noch fehlt. */
  filter: grayscale(1) brightness(0.6);
  opacity: 0.55;
  transition: filter 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
.tr-slot.is-have {
  border-color: color-mix(in srgb, var(--tc) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 15%, transparent), transparent 70%);
  color: var(--tg);
  filter: none;
  opacity: 1;
}
.tr-slot u {
  position: absolute;
  top: 4px;
  right: 6px;
  color: var(--tg);
  font-size: 0.7rem;
  text-decoration: none;
}

/* ---- Pokalkarten ---- */
.tr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 10px;
}
.tr-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  overflow: hidden;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--tc) 34%, transparent);
  border-radius: 14px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--tc) 12%, transparent), rgba(255, 255, 255, 0.02) 62%);
}
.tr-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-card .tr-name {
  color: var(--tg);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.25;
}
.tr-card .tr-place { color: #eaf0ff; font-size: 0.73rem; font-weight: 800; }
.tr-card .tr-when { color: var(--muted); font-size: 0.71rem; font-weight: 700; }

/* ---- Wertigkeit: je hoeher die Stufe, desto mehr Auftritt ----
   Die Stufen 1–3 (Abzeichen) bleiben schlicht, ab 4 kommt Schein dazu, ab 7
   ein wandernder Lichtstreifen, ab 9 ein Atmen. So ist der Unterschied auch
   dann sichtbar, wenn das Emblem selbst klein dargestellt wird. */
.tr-card.tr-p4, .tr-card.tr-p5 { box-shadow: 0 0 14px -6px color-mix(in srgb, var(--tc) 70%, transparent); }
.tr-card.tr-p6, .tr-card.tr-p7 { box-shadow: 0 0 20px -6px color-mix(in srgb, var(--tc) 85%, transparent); }
.tr-card.tr-p8 { box-shadow: 0 0 24px -5px color-mix(in srgb, var(--tc) 90%, transparent); }
.tr-card.tr-p9,
.tr-card.tr-p10 {
  border-color: color-mix(in srgb, var(--tg) 62%, transparent);
  box-shadow: 0 0 30px -4px color-mix(in srgb, var(--tc) 95%, transparent);
}
/* Lichtstreifen ueber der Karte (ab Top 5). */
.tr-card.tr-p7::after,
.tr-card.tr-p8::after,
.tr-card.tr-p9::after,
.tr-card.tr-p10::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--tg) 26%, transparent) 50%, transparent 62%);
  pointer-events: none;
  transform: translateX(-120%);
  animation: tr-sweep 5.5s ease-in-out infinite;
}
.tr-card.tr-p9::after { animation-duration: 4.4s; }
.tr-card.tr-p10::after { animation-duration: 3.4s; }
@keyframes tr-sweep {
  0%, 55% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
/* Der Champion-Pokal atmet zusaetzlich. */
.tr-card.tr-p10 { animation: tr-breathe 3.2s ease-in-out infinite; }
@keyframes tr-breathe {
  0%, 100% { box-shadow: 0 0 26px -6px color-mix(in srgb, var(--tc) 85%, transparent); }
  50% { box-shadow: 0 0 40px -2px color-mix(in srgb, var(--tg) 95%, transparent); }
}

/* Wer Bewegung abbestellt hat, bekommt die Wertigkeit ueber Rahmen und Schein –
   die Animation ist Zierrat, die Information steckt in Form und Farbe. */
@media (prefers-reduced-motion: reduce) {
  .tr-card::after { animation: none; opacity: 0.25; transform: none; }
  .tr-card.tr-p10 { animation: none; }
}

/* ---- Fremdprofil aus der Bestenliste ---- */
.acc-preview-overlay { z-index: 120; }
.acc-panel.acc-preview { width: min(720px, calc(100vw - 44px)); }
.acc-hero.acc-hero-preview { margin-top: 6px; }

@media (max-width: 560px) {
  .tr-grid { grid-template-columns: 1fr; }
  .tr-ladder { grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); }
}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width: 900px) {
  .acc-hero-row { grid-template-columns: 1.4fr 1fr 1fr; }
  .acc-hero-row .ahr-track { grid-column: 1 / -1; order: 9; }
}
@media (max-width: 560px) {
  .hero-tile .ht-note { -webkit-line-clamp: 1; }
  /* Schmal: Platz rutscht unter den Titel, damit der Name nicht bricht. */
  .my-rank-card .mrc-head { grid-template-columns: auto minmax(0, 1fr); row-gap: 7px; }
  .my-rank-card .mrc-place {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
  }
  /* Schmal: die Restzahl bekommt eine eigene Zeile unter Start und Ziel. */
  .my-rank-card .mrc-prog-foot { flex-wrap: wrap; }
  .my-rank-card .mrc-prog-foot em { flex: 1 1 100%; order: 3; text-align: left; }
  .my-rank-card .mrc-chip { grid-column: 1 / -1; justify-content: center; }
  .acc-chip .acc-chip-copy { display: none; }
  .acc-chip { padding: 5px; }
  /* Schmal bleibt nur der Ring stehen; der Aufklapper darf nicht ueberstehen. */
  .acc-pop { width: min(246px, calc(100vw - 28px)); }
  .forge-locked { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* =======================================================================
   FEEDBACK (js/feedback.js)
   Einstiegspunkte im Menü, in der Fußzeile, im HUD und in den Overlays –
   dazu das Formular selbst. Alle Knöpfe starten mit [hidden] und werden
   erst eingeblendet, wenn der Server den Meldeweg als offen meldet.
   ======================================================================= */

.meta-card[hidden],
.fb-toggle[hidden],
.go-feedback[hidden],
.foot-feedback-link[hidden],
[data-feedback-open][hidden] {
  display: none !important;
}

/* Vierte Karte im Meta-Raster: bewusst ruhiger als Shop und Erfolge –
   sie soll erreichbar sein, aber nicht um Aufmerksamkeit kämpfen. */
.meta-card.meta-feedback .meta-icon {
  background: linear-gradient(160deg, rgba(120, 200, 255, 0.22), rgba(80, 120, 200, 0.12));
  color: #b9e2ff;
}

/* Link in der Fußzeile: sieht aus wie die Nachbarn, ist aber ein Knopf. */
.foot-feedback-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.foot-feedback-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Overlay */
/* position: fixed, weil das Formular an <body> hängt und nicht an #stage –
   sonst würde es beim Scrollen der Startseite mitwandern. Der z-index liegt
   über HUD (30) und den Spiel-Overlays (20). Er muss außerdem über dem
   Einwilligungs-Banner (10000) liegen: solange die Datenschutz-Wahl noch
   aussteht, deckte das Banner sonst das Textfeld ab und man konnte gar
   nichts schreiben. */
.fb-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: radial-gradient(circle at 50% 30%, rgba(30, 40, 80, 0.6), rgba(5, 7, 14, 0.92));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Offenes Feedback-Formular blendet das Einwilligungs-Banner weg – zwei
   gestapelte Dialoge sind unbedienbar, das Banner kommt beim Schließen
   von selbst wieder. */
body.fb-open .privacy-banner { display: none !important; }

.fb-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  text-align: left;
}

.fb-panel h2 { margin: 6px 0 4px; }

.fb-lead {
  margin: 0 0 14px;
  color: rgba(226, 235, 255, 0.72);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Schließkreuz oben rechts. */
.fb-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(10, 14, 26, 0.6);
  color: #cfe0ff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.fb-x:hover { border-color: rgba(120, 190, 255, 0.6); color: #fff; }

/* ---------------------------------------------------------------- Felder */

.fb-fields { display: flex; flex-direction: column; gap: 6px; }

.fb-label {
  margin-top: 8px;
  color: rgba(190, 210, 255, 0.78);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.fb-hint {
  margin: 2px 0 0;
  color: rgba(190, 205, 240, 0.55);
  font-size: 0.76rem;
  line-height: 1.45;
}

/* Art der Meldung: vier gleich große Schaltflächen, damit die Wahl schnell geht. */
.fb-kinds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.fb-kind-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid rgba(120, 170, 255, 0.24);
  border-radius: 10px;
  background: rgba(16, 22, 40, 0.7);
  color: rgba(214, 228, 255, 0.8);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.fb-kind-btn:hover { border-color: rgba(120, 190, 255, 0.6); color: #fff; }

.fb-kind-btn.is-on {
  border-color: rgba(120, 200, 255, 0.85);
  background: rgba(52, 96, 168, 0.35);
  color: #fff;
}

.fb-kind-ico { font-size: 1.2rem; line-height: 1; }

.fb-textarea,
.fb-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid rgba(120, 170, 255, 0.26);
  border-radius: 10px;
  background: rgba(9, 13, 24, 0.8);
  color: #e8eeff;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
}

.fb-textarea { resize: vertical; min-height: 96px; }

.fb-textarea:focus,
.fb-input:focus {
  outline: none;
  border-color: rgba(120, 200, 255, 0.8);
  box-shadow: 0 0 0 3px rgba(74, 160, 255, 0.18);
}

.fb-count {
  align-self: flex-end;
  color: rgba(180, 195, 230, 0.5);
  font-size: 0.74rem;
}

/* Sternchen: freiwillig, ohne Klick geht kein Wert mit. */
.fb-stars { display: flex; gap: 4px; }

.fb-star {
  padding: 2px 4px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.22);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, transform 0.12s ease;
}

.fb-star:hover { transform: scale(1.12); }
.fb-star.is-on { color: #ffd35b; }

.fb-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: rgba(214, 228, 255, 0.86);
  font-size: 0.88rem;
  cursor: pointer;
}

.fb-check-box { width: 16px; height: 16px; accent-color: #4aa8ff; cursor: pointer; }

/* "Anzeigen, was mitgeht" – Transparenz darüber, welche Daten die Meldung
   begleiten. Wichtiger Baustein für die Datenschutzerklärung. */
.fb-link {
  padding: 0;
  border: 0;
  background: none;
  color: #7cc4ff;
  font: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.fb-peek {
  margin: 6px 0 0;
  max-height: 180px;
  overflow: auto;
  padding: 9px 11px;
  border: 1px solid rgba(120, 170, 255, 0.2);
  border-radius: 9px;
  background: rgba(6, 9, 18, 0.85);
  color: rgba(180, 200, 235, 0.85);
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.74rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fb-peek[hidden] { display: none; }

/* Honigtopf gegen Spam-Bots: nicht sichtbar, aber im DOM erreichbar.
   display:none würde von manchen Bots erkannt – deshalb ausgeblendet
   über Position und Größe. */
.fb-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fb-error {
  margin: 8px 0 0;
  min-height: 1.2em;
  color: #ff8fa3;
  font-size: 0.84rem;
}

.fb-error:empty { display: none; }

.fb-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* Dankeschön nach dem Absenden. */
.fb-done { text-align: center; padding: 12px 4px; }
.fb-done-ico { font-size: 2.6rem; line-height: 1; margin-bottom: 6px; }
.fb-done .fb-actions { justify-content: center; }

@media (max-width: 560px) {
  .fb-kinds { grid-template-columns: repeat(2, 1fr); }
  .fb-panel { width: 100%; }
  .fb-actions button { flex: 1 1 auto; }
}

/* ==========================================================================
   STORE – Schaufenster, Filter und die Bruecken zwischen Paket und Variante
   Ein Laden, drei Ebenen: oben das Schaufenster (Variante der Woche + dein
   Held), darunter die Pakete, unten das Regal. Die Marken "steckt in VIP+"
   und "lieber einzeln?" verbinden beide Richtungen.
   ========================================================================== */

.store-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 14px;
  margin: 0 0 22px;
}

/* ---------------------------------------------------- Variante der Woche */
.spot-main {
  position: relative;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 22px 18px 18px;
  border: 1px solid color-mix(in srgb, var(--skin-tint, #92b2ff) 42%, transparent);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 55%, color-mix(in srgb, var(--skin-tint, #92b2ff) 26%, transparent), transparent 62%),
    linear-gradient(120deg, rgba(12, 16, 32, 0.94), rgba(6, 8, 18, 0.94));
}
.spot-main::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--skin-accent, #92b2ff) 16%, transparent);
}
.spot-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
}
.spot-stage .skin-art {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
}
.spot-copy { min-width: 0; }
.spot-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--skin-tint, #92b2ff) 50%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--skin-tint, #92b2ff) 14%, transparent);
  color: color-mix(in srgb, var(--skin-tint, #92b2ff) 78%, #fff);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.spot-hero {
  margin: 0;
  color: #93a2c6;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.spot-name {
  margin: 1px 0 8px;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.05;
  color: #fff;
}
.spot-weapon {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 8px;
  padding: 4px 11px;
  border: 1px solid rgba(146, 178, 255, 0.26);
  border-radius: 9px;
  background: rgba(8, 11, 24, 0.6);
}
.spot-weapon i { color: var(--skin-accent, #92b2ff); font-style: normal; }
.spot-weapon small { color: #8f9dc0; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.spot-weapon strong { color: #e9eeff; font-size: 0.92rem; }
/* Skin-Fähigkeit: gleiche Zeile wie die Startwaffe, aber violett – sie gehört der
   Variante, nicht dem Helden. Die beiden stehen direkt untereinander. */
.spot-trait { border-color: rgba(200, 168, 255, 0.34); }
.spot-trait i { color: #c8a8ff; }
.spot-traitdesc { margin-bottom: 10px; color: #cbbdec; font-size: 0.82rem; }
.spot-desc {
  margin: 0 0 14px;
  max-width: 46ch;
  color: #b3bedd;
  font-size: 0.87rem;
  line-height: 1.45;
}
.spot-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.store-price { display: inline-flex; flex-direction: column; line-height: 1.15; }
.store-price b { color: #fff; font-size: 1.05rem; }
.store-price.is-big b { font-size: 1.5rem; }
.store-price small { color: #93a2c6; font-size: 0.74rem; }
.spot-btn { padding: 11px 20px; font-size: 0.9rem; }

/* Marke "steckt in VIP+": ueberall im Laden dieselbe, immer ein Sprungziel. */
.store-vip-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 6px;
  border: 1px solid rgba(146, 178, 255, 0.26);
  border-radius: 999px;
  background: rgba(10, 14, 28, 0.6);
  color: #b3bedd;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
.store-vip-hint:hover { border-color: var(--accent); background: rgba(20, 28, 52, 0.8); transform: translateY(-1px); }
.svh-badge {
  padding: 2px 7px;
  border-radius: 999px;
  background: #6f7cff;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.svh-badge[data-tier="2"] { background: #a06bff; }
.svh-badge[data-tier="3"] { background: linear-gradient(120deg, #ffb347, #ff6bd6); }

/* --------------------------------------------------------- Dein Held */
.spot-side {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 15px 16px;
  border: 1px solid rgba(146, 178, 255, 0.2);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(14, 18, 36, 0.9), rgba(7, 9, 20, 0.9));
}
.spot-side-head { display: flex; align-items: center; gap: 11px; }
.spot-face {
  width: 54px;
  height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}
.spot-side-copy { display: flex; flex-direction: column; min-width: 0; }
.spot-side-copy small {
  color: #8f9dc0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.spot-side-copy strong { color: #fff; font-size: 1.02rem; }
.spot-side-runs { color: #93a2c6; font-size: 0.75rem; }

.spot-prog { display: flex; flex-direction: column; gap: 4px; }
.spot-prog-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.spot-prog-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6f7cff, #b06bff);
}
.spot-prog small { color: #93a2c6; font-size: 0.74rem; }

.spot-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.spot-chip {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--skin-tint, #92b2ff) 40%, transparent);
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 76%, color-mix(in srgb, var(--skin-tint, #92b2ff) 26%, transparent), transparent 70%),
    rgba(6, 9, 20, 0.72);
  cursor: pointer;
  overflow: hidden;
  filter: saturate(0.8) brightness(0.8);
  transition: transform 0.15s, filter 0.15s, border-color 0.15s;
}
.spot-chip:hover { transform: translateY(-2px); filter: none; }
.spot-chip.is-owned { filter: none; }
.spot-chip .skin-art { width: 86%; height: 86%; object-fit: contain; image-rendering: pixelated; }
.spot-chip-tag {
  position: absolute;
  inset: auto 0 0;
  padding: 1px 0 2px;
  background: rgba(4, 6, 14, 0.82);
  color: #cdd7f5;
  font-size: 0.71rem;
  font-weight: 700;
  text-align: center;
}
.spot-chip.is-owned .spot-chip-tag { color: #7dffb0; }

.spot-wallet {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(146, 178, 255, 0.18);
  border-radius: 12px;
  background: rgba(8, 11, 24, 0.6);
}
.spot-wallet-icon { font-size: 1.1rem; }
.spot-wallet-copy { display: flex; flex-direction: column; line-height: 1.1; }
.spot-wallet-copy small { color: #8f9dc0; font-size: 0.71rem; letter-spacing: 0.08em; text-transform: uppercase; }
.spot-wallet-copy strong { color: #fff; font-size: 0.98rem; }
.spot-wallet-note { margin-left: auto; max-width: 19ch; color: #93a2c6; font-size: 0.72rem; line-height: 1.3; text-align: right; }

.spot-side-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 10px 13px;
  border: 1px solid rgba(146, 178, 255, 0.3);
  border-radius: 12px;
  background: rgba(20, 26, 50, 0.7);
  color: #dbe3ff;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
.spot-side-cta:hover { border-color: var(--accent); background: rgba(30, 38, 70, 0.85); transform: translateY(-1px); }
.spot-side-cta b { color: #fff; white-space: nowrap; }
.spot-side-done { margin: auto 0 0; color: #7dffb0; font-size: 0.82rem; }

/* ------------------------------------------------------------- Pakete */
.vip-packs-head { margin: 0 0 12px; }
.vip-packs-head h3 { margin: 0 0 3px; color: #fff; font-size: 1.06rem; }
.vip-packs-head p { margin: 0; max-width: 74ch; color: #a7b2d4; font-size: 0.84rem; line-height: 1.45; }
.vip-packs-open {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 10px;
  border: 1px solid rgba(146, 178, 255, 0.26);
  border-radius: 999px;
  color: #cdd7f5;
  font-size: 0.74rem;
}
.vip-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 0.78rem;
}
.vip-value-old { color: #8f9dc0; text-decoration: line-through; }
.vip-value b { color: #7dffb0; }
.vip-gain { margin: 0 0 6px; color: #cdd7f5; font-size: 0.78rem; }
.vip-packs-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Sprung aus einer "steckt in VIP+"-Marke: kurz aufblitzen, damit klar ist,
   wo man gelandet ist. */
.vip-slot.is-flash { animation: vipFlash 1.1s ease-out; border-radius: 18px; }
@keyframes vipFlash {
  from { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
  to   { box-shadow: 0 0 0 2px transparent; }
}

/* -------------------------------------------------------------- Filter */
.store-filters { display: flex; flex-direction: column; gap: 7px; margin: 0 0 14px; }
.store-filter-row { display: flex; flex-wrap: wrap; gap: 6px; }
.store-chip,
.store-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid rgba(146, 178, 255, 0.22);
  border-radius: 999px;
  background: rgba(10, 14, 28, 0.55);
  color: #b3bedd;
  font: inherit;
  font-size: 0.79rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}
.store-hero-chip { padding: 4px 13px 4px 5px; }
.store-hero-chip img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.store-chip:hover,
.store-hero-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.store-chip.is-on,
.store-hero-chip.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, rgba(10, 14, 28, 0.7));
  color: #fff;
}
.skin-grid-empty {
  margin: 0;
  padding: 26px 0;
  color: #93a2c6;
  text-align: center;
}
/* Die VIP-Marke auf der Regalkarte ist jetzt ein Knopf – sie soll sich auch
   so anfuehlen, ohne ihr Aussehen zu aendern. */
button.skin-vip-tag { border: 0; font: inherit; cursor: pointer; }
button.skin-vip-tag:hover { filter: brightness(1.15); }

@media (max-width: 900px) {
  .store-spotlight { grid-template-columns: minmax(0, 1fr); }
  .spot-main { grid-template-columns: 150px minmax(0, 1fr); padding: 14px; gap: 12px; }
}
@media (max-width: 560px) {
  .spot-main { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .spot-stage { max-width: 200px; margin: 0 auto; }
  .spot-foot { justify-content: center; }
  .spot-desc { margin-inline: auto; }
  .spot-wallet-note { max-width: none; }
}

/* Zwei Wege, zwei Knoepfe: links die Seelen, die man sich erspielt hat,
   rechts das Geld. Gleich gross, damit keiner der beiden wie der Notausgang
   aussieht. */
.skin-foot.is-duo {
  flex-direction: row;
  gap: 7px;
}
.skin-foot.is-duo .skin-btn {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 6px;
}
.skin-btn.is-souls {
  border-color: rgba(168, 146, 255, 0.42);
  background: rgba(140, 120, 255, 0.14);
  color: #d9d2ff;
}
.skin-btn.is-souls:hover { border-color: #a08cff; background: rgba(140, 120, 255, 0.26); color: #fff; }
.skin-btn.is-souls i { font-style: normal; font-size: 0.8rem; }
.skin-btn.is-souls b { font-weight: 800; }
/* Zu wenig Seelen: der Knopf bleibt anklickbar (er sagt dann, wie viel fehlt),
   tritt aber sichtbar zurueck. */
.skin-btn.is-souls.is-short { opacity: 0.6; }
.skin-btn.is-souls.is-short:hover { opacity: 0.85; }
.skin-btn.is-souls[disabled] { opacity: 0.35; cursor: not-allowed; }
.skin-btn.is-buy b { font-weight: 900; }
.skin-btn.is-buy span { font-weight: 700; opacity: 0.85; }

/* Im Schaufenster stehen dieselben zwei Knoepfe – nur groesser. */
.spot-foot .skin-btn.is-souls {
  width: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 11px 16px;
  font-size: 0.85rem;
}

/* Die VIP-Kachel unter der Heldenauswahl ist der Eingang zum Store – sie sieht
   deshalb aus wie ein Knopf und nicht wie eine Infozeile. Der Pfeil zeigt nach
   unten, weil genau dorthin gescrollt wird. */
.hero-tile.ht-vip.is-shop {
  border-color: rgba(255, 211, 91, 0.42);
  background:
    linear-gradient(120deg, rgba(255, 211, 91, 0.14), rgba(160, 108, 255, 0.14)),
    rgba(10, 14, 28, 0.6);
  color: #ffeec2;
}
.hero-tile.ht-vip.is-shop:hover {
  border-color: var(--gold);
  background:
    linear-gradient(120deg, rgba(255, 211, 91, 0.26), rgba(160, 108, 255, 0.22)),
    rgba(16, 20, 38, 0.75);
}
.hero-tile.ht-vip.is-shop strong { color: #fff6dc; }
.hero-tile.ht-vip .ht-arrow { transition: transform 0.16s ease; }
.hero-tile.ht-vip:hover .ht-arrow { transform: translateY(2px); }

/* ==========================================================================
   WARENKORB UND SEELENSTAND
   Der Korb sammelt einzelne Varianten und bezahlt sie in EINER Bestellung
   (ein Code, eine Zahlung). Er klebt am unteren Rand des Ladens, solange
   etwas drin liegt. Der Seelenstand steht oben neben dem Schlüssel, weil
   jede Variante auch mit Seelen zu haben ist.
   ========================================================================== */

.shop-head-side { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

.store-souls-inner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(168, 146, 255, 0.28);
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(140, 120, 255, 0.14), rgba(10, 14, 28, 0.6));
}
.store-souls-icon { font-size: 1.15rem; }
.store-souls-copy { display: flex; flex-direction: column; line-height: 1.1; }
.store-souls-copy small { color: #a99fd8; font-size: 0.71rem; letter-spacing: 0.09em; text-transform: uppercase; }
.store-souls-copy strong { color: #fff; font-size: 1.05rem; }
.store-souls-note { margin-left: auto; max-width: 16ch; color: #a3a0c8; font-size: 0.73rem; text-align: right; }

/* ------------------------------------------------------------ Korb-Knopf */
.skin-btn.is-cart {
  flex: 0 0 auto !important;
  width: 40px;
  padding: 9px 0 !important;
  border-color: rgba(146, 178, 255, 0.28);
  background: rgba(10, 14, 28, 0.55);
  color: #b3bedd;
}
.skin-btn.is-cart:hover { border-color: var(--accent); background: rgba(20, 28, 52, 0.8); color: #fff; }
.skin-btn.is-cart.is-on {
  border-color: rgba(120, 240, 190, 0.55);
  background: rgba(120, 240, 190, 0.16);
  color: #9ff8d2;
}

/* ------------------------------------------------------------- Korbleiste */
.store-cart {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Sichtbar nur, solange der Laden im Bild ist – sonst schwebt sie ueber der
   ganzen Startseite. */
.store-cart.is-near { opacity: 1; transform: none; }
.store-cart[hidden] { display: none; }
.cart-bar { pointer-events: auto; width: min(780px, 100%); }
.cart-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(18, 24, 46, 0.97), rgba(10, 13, 26, 0.97));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}
.cart-thumbs { display: flex; gap: 4px; flex: 0 0 auto; }
.cart-thumb {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--skin-tint, #92b2ff) 45%, transparent);
  border-radius: 9px;
  background: rgba(6, 9, 20, 0.7);
  overflow: hidden;
}
.cart-thumb .skin-art { width: 90%; height: 90%; object-fit: contain; image-rendering: pixelated; }
.cart-thumb.is-more { color: #b3bedd; font-size: 0.75rem; font-weight: 800; }
.cart-copy { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 1px; }
.cart-copy strong { color: #fff; font-size: 0.9rem; }
.cart-copy small { color: #93a2c6; font-size: 0.74rem; }
.cart-hint {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font: inherit;
  font-size: 0.74rem;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cart-total { display: flex; flex-direction: column; margin-left: auto; text-align: right; line-height: 1.1; }
.cart-total small { color: #93a2c6; font-size: 0.71rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cart-total b { color: #fff; font-size: 1.15rem; }
.cart-clear {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(146, 178, 255, 0.22);
  border-radius: 8px;
  background: rgba(10, 14, 28, 0.6);
  color: #93a2c6;
  font: inherit;
  cursor: pointer;
}
.cart-clear:hover { border-color: #ff91a8; color: #ff91a8; }
/* .btn-primary ist im Rest der Seite eine Zeile breit – in der Leiste nicht. */
.cart-bar .btn-primary.cart-go {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
  padding: 10px 22px;
  font-size: 0.9rem;
}

/* --------------------------------------------------- Korb im Kauf-Dialog */
.shop-buy-head.is-cart { display: block; }
.cart-modal-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cart-modal-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border: 1px solid rgba(146, 178, 255, 0.18);
  border-radius: 10px;
  background: rgba(8, 11, 24, 0.55);
}
.cart-modal-item .skin-art { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.cart-modal-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.cart-modal-copy strong { color: #e9eeff; font-size: 0.86rem; }
.cart-modal-copy small { color: #93a2c6; font-size: 0.74rem; }
.cart-modal-item b { margin-left: auto; color: #ffe8a8; }

@media (max-width: 700px) {
  .cart-bar { flex-wrap: wrap; }
  .cart-copy { order: 3; flex: 1 1 100%; }
  .cart-total { margin-left: auto; }
  .store-souls-note { max-width: none; }
}

/* ==========================================================================
   REGAL: JE HELD EINE AUSLAGE
   Links die gewaehlte Variante gross (dasselbe Stueck wie im Schaufenster),
   rechts die vier Varianten zum Durchklicken.
   ========================================================================== */
.store-spotlight.is-shelf { margin: 0; }
.spot-side.is-shelf { gap: 9px; }
.shelf-side-head {
  margin: 0;
  color: #8f9dc0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.spot-more {
  align-self: start;
  margin: -2px 0 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--skin-accent, #92b2ff);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.spot-more:hover { color: #fff; }
.shelf-side-note { margin: auto 0 0; color: #8794b6; font-size: 0.74rem; line-height: 1.35; }
/* Die angesehene Variante ist im Streifen deutlich markiert – sonst sucht man,
   welches Bild gerade links steht. */
.spot-chip.is-sel {
  filter: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.hero-shelf .spot-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .hero-shelf .spot-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Jede Auslage gleich hoch und deutlich flacher: vorher wuchs die Karte mit
   der Laenge des Beschreibungstextes, dadurch war jedes Regal anders hoch und
   man scrollte pro Held fast einen ganzen Bildschirm. Ab 901 px steht eine
   feste Hoehe; darunter stapeln die Spalten und duerfen wieder wachsen. */
@media (min-width: 901px) {
  .store-spotlight.is-shelf { height: 370px; }
  .store-spotlight.is-shelf > .spot-main,
  .store-spotlight.is-shelf > .spot-side { height: 100%; min-height: 0; }
  .store-spotlight.is-shelf > .spot-main {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 16px;
  }
  .store-spotlight.is-shelf .spot-stage { aspect-ratio: auto; height: 100%; }
  /* Der Text darf die Karte nicht mehr aufblaehen: jeder Absatz zeigt eine
     Zeile, den Rest holt der Knopf "Mehr lesen" (js/shop.js). Gekuerzt wird
     nichts – der volle Text steht weiter im DOM. */
  .store-spotlight.is-shelf .spot-copy { min-height: 0; overflow: hidden; }
  .store-spotlight.is-shelf .spot-name { font-size: clamp(1.3rem, 2vw, 1.7rem); }
  .store-spotlight.is-shelf .spot-desc,
  .store-spotlight.is-shelf .spot-traitdesc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-bottom: 8px;
    overflow: hidden;
  }
  /* Aufgeklappt: der volle Text, die Karte waechst dafuer ueber ihre feste
     Hoehe hinaus. Zugeklappt stehen alle Regale wieder exakt gleich hoch. */
  .store-spotlight.is-shelf:has(> .spot-main.is-open) { height: auto; min-height: 370px; }
  .store-spotlight.is-shelf .spot-main.is-open .spot-desc,
  .store-spotlight.is-shelf .spot-main.is-open .spot-traitdesc {
    display: block;
    -webkit-line-clamp: none;
  }
  /* Die vier Varianten sitzen in einem flachen Streifen; der Hinweistext
     darunter wird per margin-top:auto nach unten gedrueckt. */
  .spot-side.is-shelf { overflow: hidden; }
  .spot-side.is-shelf .spot-chips { gap: 8px; }
  /* Feste Pixelhoehe statt Seitenverhaeltnis: prozentuale Hoehen loesen sich
     in dieser Kachel nicht auf, das Artwork lief sonst unten heraus. */
  .spot-side.is-shelf .spot-chip { aspect-ratio: auto; height: 96px; padding: 7px; }
  .spot-side.is-shelf .spot-chip .skin-art {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 82px;
  }
}

/* Die Aura im Store war unsichtbar: die Leinwand ist 170 px gross, das
   Artwork daneben gut 240 – die Partikel lagen also komplett HINTER dem Bild
   und traten nie aus der Silhouette heraus. Hier wird sie deshalb deutlich
   ueber die Figur hinaus vergroessert; die Buehne darf dafuer ueberlaufen. */
.spot-stage { overflow: visible; }
.spot-stage .skin-fx { transform: translate(-50%, -50%) scale(2); }
@media (max-width: 900px) {
  .spot-stage .skin-fx { transform: translate(-50%, -50%) scale(1.6); }
}

/* ---------- Modal-Schliesskreuz (Seelenschmiede) ----------
   Der Fussknopf "Zurueck zum Lager" bleibt; das Kreuz oben rechts ist der
   schnelle Weg raus, wenn man weit nach unten gescrollt hat. */
.modal-close-x {
  position: sticky;
  z-index: 5;
  top: 0;
  float: right;
  width: 34px;
  height: 34px;
  margin: -6px -6px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(12, 14, 30, 0.85);
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.modal-close-x:hover,
.modal-close-x:focus-visible {
  border-color: color-mix(in srgb, var(--modal-accent, #a879ff) 65%, transparent);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ---------------------------------------------------------------- Bezahlwege
 * Zwei Schalter im Admin-Panel entscheiden, was der Laden ueberhaupt anbietet
 * (admin/schema.js: shopMoneyEnabled, shopVipEnabled). js/shop.js setzt danach
 * .gs-no-money bzw. .gs-no-vip auf das <html>. Beide stehen im HTML von
 * vornherein drin: gestartet wird nur mit Seelen, und ohne JS bleibt es dabei.
 *
 * Fester Seitentext liegt deshalb doppelt vor – data-pay="money" nennt Preise
 * und VIP, data-pay="souls" ist dieselbe Aussage rein ueber Seelen.
 */
.gs-no-money [data-pay="money"] { display: none !important; }
html:not(.gs-no-money) [data-pay="souls"] { display: none !important; }
/* VIP abgeschaltet: der Kaufweg dorthin verschwindet ueberall mit. */
.gs-no-vip .vip-slot,
.gs-no-vip .store-vip-hint,
.gs-no-vip .forge-vip-btn { display: none !important; }


/* ------------------------------------------------------------------ Item-Bilder
   Ausruestung traegt normalerweise ein Emoji. Wer im Admin-Panel (Ansicht "Items")
   ein eigenes Bild hochlaedt, bekommt statt des Emojis ein <img class="item-icon-img">
   an genau derselben Stelle. Deshalb wird hier NICHT neu positioniert, sondern nur
   die Zeichenflaeche des jeweiligen Textkontextes uebernommen: 1em bedeutet
   "so gross wie das Emoji, das hier sonst stuende". Die Auswahlkarte hat mit
   `.choice .icon img` bereits eine eigene, groessere Regel und bleibt aussen vor. */
.item-icon-img {
  width: 1em;
  height: 1em;

  object-fit: contain;
  vertical-align: -0.15em;

  display: inline-block;
}

/* Der HUD-Chip ist ein quadratisches Feld; dort darf das Bild es ganz fuellen. */
.item-chip .item-icon-img {
  width: 100%;
  height: 100%;

  vertical-align: baseline;
}

/* Steuerungs-Hinweis im Startmenue: „WASD" hilft niemandem mit einem Finger.
   Beide Fassungen stehen im HTML, sichtbar ist immer nur eine. Die Umschaltung
   haengt allein an (pointer: coarse) – bewusst OHNE Groessenbedingung, denn
   auch auf einem grossen Tablet wird gewischt, nicht getippt. */
.qc-touch { display: none; }

/* Pausenknopf und ⋯-Schalter im HUD sind reiner Finger-Ersatz: fuer Pause gibt
   es am Rechner P und Escape, und die Knopfreihe stoert dort niemanden. Also
   bleiben beide auf Zeigergeraeten weg. */
.hud-pause-btn,
.hud-menu-btn { display: none; }

/* ---------- Ausweichsprung-Knopf ----------
   Derselbe Gedanke wie beim Pausenknopf, nur umgekehrt gewichtet: am Rechner
   liegt der Sprung auf der Leertaste, am Pad auf B/RB - dort waere ein Knopf
   nur ein Fleck im Bild. Mit dem Finger gibt es aber keine dritte Taste, also
   bekommt er hier eine.

   Er sitzt unten rechts statt oben in der Knopfspalte. Oben stehen
   Einstellungen, die man einmal im Run anfasst; das hier wird alle paar
   Sekunden gedrueckt und muss im Daumenbogen liegen, ohne dass die Hand die
   Stickflaeche verlaesst. Genau deshalb ist er auch gross (72) und nicht 44:
   danebengreifen heisst hier sterben.

   Die Leinwand faengt Beruehrungen selbst ab (virtueller Stick), dieser Knopf
   liegt als DOM darueber und schluckt seine eigenen - der Daumen auf dem Knopf
   schiebt den Helden also nicht nebenbei mit. */
.hud-dash-btn { display: none; }
@media (pointer: coarse) {
  .hud-dash-btn {
    display: grid;
    place-items: center;
    position: absolute;
    right: calc(18px + env(safe-area-inset-right));
    bottom: calc(24px + env(safe-area-inset-bottom));
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(10, 16, 28, 0.42);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    /* #hud ist als Ganzes durchlaessig (pointer-events: none), damit der
       virtuelle Stick die Leinwand darunter erreicht. Jeder Knopf muss die
       Beruehrungen einzeln wieder annehmen - ohne diese Zeile lag der Knopf
       zwar sichtbar da, der Daumen ging aber durch ihn hindurch an den Stick. */
    pointer-events: auto;
    z-index: 6;
  }
  .hud-dash-btn > * { grid-area: 1 / 1; }
  /* Der Ring IST die Abklingzeit: der Kegel waechst von oben im Uhrzeigersinn
     zu, bis er geschlossen ist. Kein Text, keine Zahl - im Gefecht liest man
     ohnehin nur „schon wieder da" oder „noch nicht". */
  .hdb-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
      conic-gradient(rgba(159, 232, 255, 0.85) calc(var(--cd, 1) * 360deg), rgba(159, 232, 255, 0.14) 0);
    -webkit-mask: radial-gradient(closest-side, transparent 76%, #000 78%);
            mask: radial-gradient(closest-side, transparent 76%, #000 78%);
  }
  .hdb-icon {
    font-size: 1.6rem;
    line-height: 1;
    opacity: 0.45;
    transition: opacity 0.12s ease, transform 0.12s ease;
  }
  /* Bereit: das Symbol wird voll deckend und der Knopf bekommt einen Schein.
     Der Unterschied muss aus dem Augenwinkel lesbar sein. */
  .hud-dash-btn.ready .hdb-icon { opacity: 1; }
  .hud-dash-btn.ready { box-shadow: 0 0 16px rgba(159, 232, 255, 0.45), 0 2px 14px rgba(0, 0, 0, 0.45); }
  .hud-dash-btn:active .hdb-icon { transform: scale(0.86); }
}
/* Im Querformat ist unten wenig Platz - der Knopf rueckt hoch und wird etwas
   kleiner, bleibt aber ueber der 44er Mindestgroesse. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 480px) {
  .hud-dash-btn {
    width: 60px;
    height: 60px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .hdb-icon { font-size: 1.35rem; }
}
@media (pointer: coarse) {
  .qc-keys { display: none; }
  #menu .quick-controls .qc-touch { display: inline-flex; align-items: center; gap: 5px; }
  #menu .quick-controls kbd.qc-touch { display: inline-block; }
}

/* ======================================================================
   HANDY & TABLET
   ======================================================================
   Diese Schicht steht bewusst ganz am Ende: sie korrigiert das fertige
   Desktop-Layout, statt es an 60 Stellen zu verzweigen.

   Zwei Bedingungen tragen alles Weitere:

     Handheld     – (pointer: coarse) UND kurze Seite <= 820 Punkte. Die beiden
                    kommagetrennten Zeilen sind ein ODER, treffen also genau
                    dann zu, wenn min(Breite, Hoehe) <= 820 ist. Das ist
                    dieselbe Regel wie isHandheld() in js/game.js, damit CSS
                    und Spiel nie unterschiedlicher Meinung sind. Eine Maus
                    faellt ueber `coarse` raus, ein grosses Tablet ueber die
                    820 - beide haben Platz und brauchen nichts davon.
     Hoch/Quer    – ueber (orientation), zusaetzlich (max-height) fuer die
                    wirklich flachen Faelle (Handy quer ist nur ~390 hoch).

   Nichts hier greift auf einem Desktop. Wer das pruefen will: jede Regel
   unten steht innerhalb eines dieser Media-Blocks.
   ====================================================================== */

@media (pointer: coarse) and (max-width: 820px),
       (pointer: coarse) and (max-height: 820px) {

  /* ---------- Grundlagen ---------- */

  /* Die Buehne muss auf die WIRKLICH sichtbare Hoehe. `position:fixed; inset:0`
     rechnet auf Handys gegen den grossen Viewport (Adressleiste eingefahren) –
     mit ausgefahrener Leiste rutscht dann die Lebensleiste unter den Browser.
     dvh ist genau der Wert, der sich mitbewegt; vh bleibt als Rueckfall stehen. */
  #stage {
    height: 100vh;
    height: 100dvh;
  }

  /* Kein Ueberziehen, kein Pull-to-Refresh mitten im Run. */
  html, body {
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
  }

  /* Der Daumen liegt auf der Leinwand – dort darf nichts markiert werden und
     kein Kontextmenue aufgehen (iOS Lupe beim Halten). */
  #game {
    cursor: default;
    -webkit-touch-callout: none;
  }

  /* Beruehrungsziele: alles, was man treffen koennen muss, auf mindestens 44px.
     Das ist die Groesse, unter der ein Daumen anfaengt danebenzugreifen.
     Die Schliess-Kreuze sind hier die wichtigsten: sie sitzen am Rand, wo
     danebengreifen bedeutet, versehentlich ins Overlay dahinter zu tippen. */
  .mute-btn,
  .hud-view-btn,
  .dps-close,
  .synergy-dock-head,
  .gear-head,
  .modal-close-x,
  .stats-close,
  .stats-hint-close,
  .lbl-close {
    min-width: 44px;
    min-height: 44px;
  }

  /* ---------- Knopfspalte rechts ----------
     Auf schmalen Fenstern stehen die HUD-Knoepfe untereinander. Die bestehende
     Regel rechnet dabei mit 36er-Knoepfen im 42er-Raster – mit 44ern (siehe
     oben) ueberlappten sie sich um zwei Punkte. Hier also beides zusammen:
     44er Knoepfe im 48er-Raster, dazu der sichere Rand oben.
     Ganz oben sitzt die Pause: der einzige Knopf, den man im Ernstfall sofort
     treffen muss. */
  .mute-btn {
    right: calc(8px + env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
  }
  .hud-pause-btn { display: block; top: calc(8px + env(safe-area-inset-top)); }
  .hud-menu-btn  { display: block; top: calc(56px + env(safe-area-inset-top)); }
  #muteBtn       { top: calc(104px + env(safe-area-inset-top)); }
  .hud-view-btn  { top: calc(152px + env(safe-area-inset-top)); }
  .gfx-btn       { top: calc(200px + env(safe-area-inset-top)); }
  .fb-toggle     { top: calc(248px + env(safe-area-inset-top)); }
  .hero-btn      { top: calc(296px + env(safe-area-inset-top)); }

  /* Zugeklappt bleiben nur Pause und der ⋯-Schalter stehen. */
  #hud:not(.hud-menu-open) :is(#muteBtn, .hud-view-btn, .gfx-btn, .fb-toggle, .hero-btn) { display: none; }

  /* Die Panels stehen LINKS neben ihrem Knopf, nicht darunter – unter dem
     Knopf laege im Hochformat schon der naechste. */
  .audio-panel {
    top: calc(104px + env(safe-area-inset-top));
    right: calc(56px + env(safe-area-inset-right));
  }
  .hud-view-panel {
    top: calc(152px + env(safe-area-inset-top));
    right: calc(56px + env(safe-area-inset-right));
    width: min(232px, calc(100vw - 112px));
  }

  /* Sichere Raender (Notch, Home-Indikator, abgerundete Ecken). */
  #hud {
    padding:
      env(safe-area-inset-top) calc(10px + env(safe-area-inset-right))
      calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
  }

  /* Das Wasserzeichen bleibt auch auf dem Handy stehen (es soll in Clips zu
     sehen sein), nur kleiner und dichter am Banner. */
  .hud-watermark { margin-top: 2px; font-size: 0.58rem; letter-spacing: 0.1em; }
  .hud-ghost { margin-top: 2px; padding: 2px 9px; font-size: 0.62rem; }

  /* ---------- Zierde und teure Effekte ----------
     backdrop-filter ist der teuerste Posten im ganzen Blatt: jedes Element mit
     Weichzeichner zwingt den Browser, den Bildschirmbereich dahinter erneut
     auszulesen und zu filtern - je Bild, je Element. Auf einem Handy kostet das
     mehr als das gesamte Spielfeld. Die Flaechen darunter sind ohnehin schon zu
     ~90 % deckend, sichtbar aendert sich also fast nichts.

     Dazu faellt reine Zierde weg: rotierende Ringe, Glanzstreifen, Ornamente.
     Sie tragen keine Information, laufen aber dauerhaft und zwingen den
     Compositor zu staendigen Neuzeichnungen. */
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

  .modal-energy,
  .arcane-ring,
  .row-shine,
  .card-ornament,
  .choice::before,
  .vitals::before,
  .hud-top::after { display: none !important; }

  /* Dauerlaeufer anhalten. Einmalige Ein-/Ausblendungen bleiben - die sagen
     etwas aus („das ist neu", „das ist weg") und laufen nur kurz. */
  .ring-spin,
  [class*="sheen"],
  [class*="shimmer"] { animation: none !important; }

  /* Die Karten-Icons trugen zwei Schlagschatten uebereinander; auf 62 Punkten
     Bildgroesse sieht man davon nichts mehr. */
  .choice .icon img { filter: none; }

  /* ---------- Runden-Banner (oben) ---------- */
  .hud-top {
    max-width: 100%;
    padding: 4px 2px 5px;
    border-radius: 0 0 14px 14px;
  }
  .hud-top > div { padding: 0 8px; }
  .hud-top .lbl { font-size: 0.55rem; letter-spacing: 0.1em; }
  .hud-top .hud-timer { font-size: 1.4rem; padding-inline: 10px; }
  .hud-top :is(.hud-score, .hud-kills, .hud-wave) span:last-child { font-size: 1rem; }

  /* ---------- Docks am Rand ---------- */
  /* Der Stapel oben links darf hoechstens ein Drittel der Hoehe nehmen; darunter
     kommen im Hochformat die Gegner ins Bild. */
  .hud-left-stack {
    top: calc(46px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    max-height: 34%;
  }
  .dps-dock { font-size: 0.72rem; }

  .synergy-dock { transform-origin: bottom left; }
  .gear-dock { transform-origin: bottom right; }

  /* ---------- Vitals (unten) ----------
     Die Leiste war fuer einen Monitor bemessen. Auf dem Handy nimmt sie in der
     alten Groesse rund ein Fuenftel der Hoehe weg – und zwar unten, wo im
     Hochformat die Gegner hereinkommen. Alle Werte bleiben lesbar, nur eben
     nicht mehr fingerbreit. */
  .hud-bars { gap: 4px; }
  .weapon-row { gap: 5px; }

  .vitals { gap: 7px; padding: 4px 9px 5px 5px; border-radius: 12px; }
  .vitals-bars { gap: 3px; }
  .vitals-level { width: 32px; height: 36px; }
  /* Auf dem Handy zaehlt jeder Punkt: die Rangzeile bleibt als Fussnote, der
     TITEL faehrt gar nicht erst aus - neben der Stufe ist kein Platz, und ein
     nach zehn Zeichen abgeschnittener Name sagt weniger als keiner. Wer ihn
     sehen will, findet ihn in der Rangleiter. */
  .vitals-rank { gap: 4px; }
  .vitals-rank .hr-lvl { font-size: 0.52rem; letter-spacing: 0.05em; }
  .vitals-rank .hr-name { display: none; }
  .vitals::after { height: 1.5px; }
  /* Der Kranz muss hier enger anliegen: im Hochformat sitzt die Karte am
     Bildrand, bei 150 % haengen die Zacken ueber den Schirm hinaus. */
  .vl-crest { width: 128%; height: 128%; }
  .vitals { padding-left: 9px; }
  .vl-lbl { font-size: 0.46rem; letter-spacing: 0.1em; }
  .vl-num { margin-top: 0; font-size: 0.78rem; }
  .vitals .bar.hp { height: 15px; border-radius: 5px; }
  .vitals .bar.hp .bar-fill { border-radius: 4px; }
  .vitals .bar.xp { height: 5px; }
  .bar-text { font-size: 0.58rem; }
  .weapon-chip { width: 32px; height: 32px; }
  .weapon-chip img { width: 22px; height: 22px; }

  /* ---------- Level-up-Karten ---------- */
  /* Vier Karten a 390px passen auf kein Handy. Sie werden kompakt, das Feld
     scrollt notfalls – aber die erste Karte ist immer ohne Wischen erreichbar. */
  .levelup-panel {
    width: 100%;
    max-height: 100dvh;
    padding:
      calc(10px + env(safe-area-inset-top)) 10px
      calc(10px + env(safe-area-inset-bottom));
    border-radius: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .levelup-title { font-size: 1.3rem; }
  .levelup-sub { margin: 4px 0 10px; font-size: 0.8rem; }

  /* Vier Karten sind laenger als ein Handybildschirm, also wird gescrollt – und
     dann waere „Neu wuerfeln" ganz unten erst nach dem Wischen an allen Karten
     vorbei erreichbar. Der Knopf bleibt deshalb am unteren Rand stehen. */
  .levelup-panel .reroll-btn {
    position: sticky;
    bottom: calc(-10px - env(safe-area-inset-bottom));
    z-index: 3;
    /* Volle Breite bis in die Panel-Polsterung hinein: als schmaler,
       halbdurchsichtiger Knopf schienen die Karten dahinter durch und der
       Text lief ineinander. Der Farbton bleibt, nur liegt er jetzt auf einer
       deckenden Flaeche. */
    /* `width: auto` genuegt bei <button> nicht – Knoepfe schrumpfen auf ihren
       Inhalt. Die 20px sind die beiden 10er-Polsterungen des Panels, die die
       negativen Aussenabstaende daneben wieder aufmachen. */
    display: block;
    width: calc(100% + 20px);
    margin: 8px -10px calc(-10px - env(safe-area-inset-bottom));
    padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 0;
    background:
      linear-gradient(rgba(155, 123, 255, 0.18), rgba(155, 123, 255, 0.18)),
      rgba(10, 13, 29, 0.985);
  }

  .choices { gap: 8px; }
  .choice {
    min-height: 0;
    padding: 12px 12px 12px 34px;
    gap: 5px;
    border-radius: 14px;
  }
  .choice .icon {
    width: 62px;
    height: 62px;
    margin: 0;
    font-size: 2.4rem;
  }
  /* Das Bild hat eine eigene feste Groesse (108px) und wuerde sonst aus dem
     geschrumpften Rahmen herauswachsen. */
  .choice .icon img { width: 100%; height: 100%; }
  .choice .key {
    top: 50%;
    left: 7px;
    transform: translateY(-50%);
  }
  .choice .cname { font-size: 0.95rem; }
  .choice .ctag { min-height: 21px; padding: 2px 8px; font-size: 0.66rem; }
  .choice .cdesc { font-size: 0.78rem; }
  .choice .cstats { font-size: 0.75rem; }

  /* Auf einem Zeigergeraet hebt sich die Karte beim Ueberfahren an. Ein Finger
     kennt kein Ueberfahren – der Zustand bliebe nach dem Tippen kleben. */
  .choice:hover {
    transform: none;
  }

  /* ---------- Overlays allgemein ---------- */
  /* Panels duerfen die volle Breite nehmen und muessen scrollen koennen,
     sonst haengt der untere Knopf unerreichbar unter dem Bildschirmrand. */
  .overlay > .panel,
  .go-panel,
  .stats-panel {
    max-width: 100%;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- Beruehrungsziele in Menue, Kopf- und Fusszeile ----------
     Alles hier war fuer einen Mauszeiger bemessen (19-34 Punkte hoch). Ein
     Daumen braucht rund 44. Wo Platz ist, waechst das Element; bei den dicht
     gesetzten Fusszeilen-Links waechst nur die Trefferflaeche ueber Innenabstand,
     damit die Zeile optisch bleibt, wie sie ist. */
  /* Die #menu-Praefixe sind kein Zufall: die bestehenden Regeln fuer
     Sprachumschalter und Wertungs-Reiter haengen selbst an #menu und wuerden
     eine reine Klassenregel schlagen. */
  .site-nav .nav-actions a,
  .site-nav .nav-menu a,
  .site-nav .nav-more,
  .site-nav .brand,
  #menu .score-mode-tab,
  .store-chip,
  .store-hero-chip,
  .forge-hero-tab,
  .shop-ghost-btn,
  .ad-house-btn,
  .hi-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  #menu .lang-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* ---------- Formularfelder ----------
     iOS zoomt beim Antippen in jedes Feld, dessen Schrift kleiner als 16px ist,
     und kommt danach nicht von selbst wieder heraus – die Seite bleibt
     verschoben. 16px ist die Schwelle, nicht eine Geschmacksfrage. */
  input, select, textarea { font-size: max(16px, 1em); }

  select,
  input:is([type="text"], [type="email"], [type="number"], [type="search"], [type="password"]),
  textarea,
  .coop-detect,
  .coop-start {
    min-height: 44px;
  }

  /* Kaestchen und Punkte sind ab Werk 13 Punkte gross. Das Kaestchen selbst
     waechst nur massvoll (sonst wirkt es plump); die eigentliche Trefferflaeche
     wird die Zeile drumherum. */
  input:is([type="checkbox"], [type="radio"]) { width: 22px; height: 22px; }
  label:has(> input:is([type="checkbox"], [type="radio"])) {
    display: flex;
    align-items: center;
    min-height: 44px;
  }


  .foot-links a,
  .foot-links button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 40px;
    padding-block: 10px;
  }
}

/* ======================================================================
   HOCHFORMAT (Handy)
   ======================================================================
   Hier ist Hoehe da und Breite knapp. Die Docks liegen im Querformat links
   und rechts unten – im Hochformat wuerden sie sich mit der Lebensleiste in
   der Mitte stapeln. Deshalb ruecken sie nach oben und werden schmaler.
   ====================================================================== */
@media (pointer: coarse) and (max-width: 560px) and (orientation: portrait) {

  /* Unten ist im Hochformat kein Platz mehr: dort liegt die Lebensleiste ueber
     die volle Breite, darueber die Minimap. Das Synergie-Dock zieht deshalb
     nach oben LINKS – rechts steht die Knopfleiste (Ton, Anzeige, Grafik,
     Feedback), dort wuerde es sich hineinstapeln. */
  .synergy-dock {
    bottom: auto;
    top: calc(44px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    right: auto;
    width: min(46vw, 190px);
  }

  /* Rutscht unter das Synergie-Dock, das oben links jetzt den Platz hat.
     Betrifft nur, wer DPS-Meter oder Erfolgs-Helfer von Hand einschaltet –
     auf dem Handy sind beide ab Werk aus. */
  .hud-left-stack {
    top: calc(104px + env(safe-area-inset-top));
    max-height: 28%;
  }

  .gear-dock {
    width: min(46vw, 190px);
  }

  /* Hier ist Breite das knappe Gut: die Lebensleiste darf sie ganz haben,
     links und rechts unten liegt im Hochformat nichts mehr. */
  .hud-bars { max-width: 100%; }

  /* Eine Karte je Zeile – bei 4 Karten wird gescrollt, aber jede ist voll
     lesbar. Zwei nebeneinander waeren auf 360 Punkten Breite unlesbar. */
  .choices { grid-template-columns: 1fr; }

  .hud-top .hud-timer { font-size: 1.25rem; }
}

/* ======================================================================
   QUERFORMAT (Handy)
   ======================================================================
   Umgekehrter Fall: Breite genug, Hoehe knapp (ein Handy quer ist rund 390
   Punkte hoch). Alles Vertikale muss schrumpfen, sonst bleibt vom Spielfeld
   ein Streifen uebrig.
   ====================================================================== */
@media (pointer: coarse) and (max-height: 480px) and (orientation: landscape) {

  .hud-top {
    padding: 2px 2px 3px;
    border-radius: 0 0 10px 10px;
  }
  .hud-top .hud-timer { font-size: 1.15rem; }
  .hud-top .lbl { font-size: 0.5rem; }
  .hud-top :is(.hud-score, .hud-kills, .hud-wave) span:last-child { font-size: 0.85rem; }

  .hud-left-stack {
    top: calc(34px + env(safe-area-inset-top));
    max-height: 46%;
  }

  /* Die Knopfspalte wird quer zur KnopfZEILE. Untereinander naehmen fuenf
     Knoepfe 244 Punkte – bei 390 Punkten Gesamthoehe waere das der halbe
     Bildschirmrand. Nebeneinander kostet es oben nur 44. */
  .mute-btn      { top: calc(8px + env(safe-area-inset-top)); }
  .hud-pause-btn { right: calc(8px + env(safe-area-inset-right)); }
  .hud-menu-btn  { right: calc(56px + env(safe-area-inset-right)); }
  #muteBtn       { right: calc(104px + env(safe-area-inset-right)); }
  .hud-view-btn  { right: calc(152px + env(safe-area-inset-right)); }
  .gfx-btn       { right: calc(200px + env(safe-area-inset-right)); }
  .fb-toggle     { right: calc(248px + env(safe-area-inset-right)); }
  .hero-btn      { right: calc(296px + env(safe-area-inset-right)); }
  .audio-panel,
  .hud-view-panel { top: calc(56px + env(safe-area-inset-top)); }

  /* Schmaler halten als im Hochformat: unten links liegt die Minimap, unten
     rechts das Ausruestungs-Dock. Eine randlose Leiste wuerde beide zudecken. */
  .hud-bars { gap: 3px; max-width: min(460px, 62vw); }

  /* Zwei Spalten: vier flache Karten passen quer nebeneinander, ohne dass
     eine davon unter den Rand rutscht. */
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .choice { padding: 8px 10px 8px 30px; }
  .choice .icon { width: 46px; height: 46px; }
  .choice .cdesc { font-size: 0.72rem; }

  .levelup-title { font-size: 1.05rem; }
  .levelup-sub { margin: 2px 0 6px; font-size: 0.72rem; }
}

/* ------------------------------------------------------------- Hilfefenster
   Waffen- und Faehigkeitszeilen im Shop erklaeren sich beim Ueberfahren
   selbst (js/shop.js -> withTip). Das Fenster haengt am <body> und liegt
   `fixed`, damit keine Karte mit `overflow: hidden` es abschneidet. */
.has-tip { cursor: help; outline: none; }
.has-tip strong { text-decoration: underline dotted rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
.has-tip:hover strong, .has-tip:focus-visible strong { text-decoration-color: currentColor; }
.has-tip:focus-visible { border-radius: 6px; box-shadow: 0 0 0 2px rgba(146, 178, 255, 0.6); }

.gs-tip {
  position: fixed;
  left: 0; top: 0;
  z-index: 9999;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid rgba(146, 178, 255, 0.35);
  border-radius: 12px;
  background: rgba(12, 15, 28, 0.97);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  color: #dfe6ff;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}
.gs-tip.is-on { opacity: 1; visibility: visible; transform: none; }
.gs-tip-head { display: flex; align-items: baseline; gap: 6px; margin: 0; flex-wrap: wrap; }
.gs-tip-head i { color: #92b2ff; font-style: normal; }
.gs-tip-head strong { color: #fff; font-size: 0.92rem; }
.gs-tip-head em {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(146, 178, 255, 0.16);
  color: #a9bdf0;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gs-tip-kicker {
  margin: 2px 0 6px;
  color: #8f9dc0;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.gs-tip-body { margin: 0; color: #cdd6f2; }

/* Startwaffe an der Heldenkarte (js/game.js -> showHeroWeaponTip). Dasselbe
   Fenster wie im Shop, nur traegt es statt eines Zeichens das WAFFENBILD - das
   ist schneller erkannt als jeder Name und dasselbe Bild, das spaeter im Run
   auf der Waffenleiste steht. */
.gs-tip.is-weapon { max-width: min(280px, calc(100vw - 24px)); }
.gs-tip.is-weapon .gs-tip-head { align-items: center; }
.gs-tip.is-weapon .gs-tip-head img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 6px rgba(146, 178, 255, 0.35));
}

/* ================================================================
   Belohnung, Erinnerung, Wiederkehr
   ----------------------------------------------------------------
   Alles, was den Spieler nach einem Run wieder an den Tisch holt:
   der Rekord-Geist im HUD, die Seelenernte, der Tagesbonus, die
   Jackpot-Karte, das Beute-Band der Boss-Kiste und die Chronik.
   ================================================================ */

/* ---------------------------------------------------------------- Rekord-Geist
   Duenner Streifen unter der HUD-Kopfzeile. Er darf im Gefecht nie um
   Aufmerksamkeit kaempfen: kleine Schrift, gedaempft, und nur der Moment des
   Ueberholens leuchtet kurz auf. */
.hud-ghost {
  /* Steht als eigene Zeile im Fluss zwischen Runden-Banner und Wasserzeichen.
     Frueher lag der Streifen absolut auf top:52px – genau auf dem
     Wasserzeichen, sobald er auftauchte. Im Fluss schieben sich beide
     auseinander, statt sich zu ueberdecken. */
  margin: 4px auto 0;
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border: 1px solid rgba(120, 170, 255, 0.22);
  border-radius: 999px;
  background: rgba(10, 13, 24, 0.58);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.hud-ghost.hidden { display: none; }
.hud-ghost .hg-ic { opacity: 0.7; font-size: 0.78rem; }
.hud-ghost.ahead {
  color: #86e8a4;
  border-color: rgba(134, 232, 164, 0.4);
  background: rgba(16, 40, 26, 0.55);
}
.hud-ghost.behind { color: #9aa6c8; }
.hud-ghost.beaten {
  color: #0b0e18;
  border-color: var(--gold);
  background: linear-gradient(100deg, var(--gold), #ffb03a);
  text-shadow: none;
  animation: hudGhostPop 0.5s ease;
}
@keyframes hudGhostPop {
  0%   { transform: scale(0.8); filter: brightness(1.8); }
  55%  { transform: scale(1.1); }
  100% { transform: scale(1); filter: brightness(1); }
}
/* Im Minimal-HUD (Taste X) verschwindet er mit allem anderen – die Klasse
   sitzt auf #hud, nicht auf <body>; die Regel steht oben bei den uebrigen. */

/* ---------------------------------------------------------------- Seelenernte
   Die Seelen fliegen von unten in den Zaehler, statt fertig dazustehen. Die
   Lichter sind reine Zierde – die Zahl selbst tickt in js/game.js. */
.go-stats .souls { position: relative; }
.go-stats .souls.is-harvesting > span {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 211, 91, 0.65);
}
.soul-mote {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sm-size, 4px);
  height: var(--sm-size, 4px);
  margin: calc(var(--sm-size, 4px) / -2) 0 0 calc(var(--sm-size, 4px) / -2);
  border-radius: 50%;
  background: #fff3c4;
  box-shadow: 0 0 8px 2px rgba(255, 211, 91, 0.8);
  pointer-events: none;
  opacity: 0;
  animation: soulMote 0.85s var(--sm-delay, 0s) ease-in forwards;
}
@keyframes soulMote {
  0%   { opacity: 0; transform: translate3d(var(--sm-x, 0), var(--sm-y, 90px), 0) scale(0.5); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, 0, 0) scale(1.35); }
}

/* ---------------------------------------------------------------- Nochmal
   Der Weg in die naechste Runde ist der wichtigste Knopf des Bildschirms und
   sieht ab hier auch so aus: eigene Zeile, volle Breite, Tastenhinweis. */
.go-actions .go-again {
  order: -1;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-block: 12px;
  font-size: 1.05rem;
}
.go-actions .go-again .ga-key {
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
/* Auf Beruehrungsgeraeten gibt es keine Leertaste – der Hinweis waere gelogen. */
@media (pointer: coarse) {
  .go-actions .go-again .ga-key { display: none; }
}

/* ---------------------------------------------------------------- Tagesbonus */
.daily-bonus-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 211, 91, 0.42);
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(255, 211, 91, 0.16), rgba(255, 176, 58, 0.05));
}
.daily-bonus-chip.hidden { display: none; }
.daily-bonus-chip .db-ic {
  font-size: 1.15rem;
  color: var(--gold);
  filter: drop-shadow(0 0 8px rgba(255, 211, 91, 0.6));
  animation: dailyPulse 2.6s ease-in-out infinite;
}
@keyframes dailyPulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.daily-bonus-chip .db-txt { display: flex; flex-direction: column; line-height: 1.25; }
.daily-bonus-chip .db-txt b { color: var(--gold); font-size: 0.86rem; }
.daily-bonus-chip .db-txt small { color: var(--muted); font-size: 0.74rem; }

/* ---------------------------------------------------------------- Erfolgs-Seelen */
.ach-toast .at-souls {
  margin-top: 4px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
}

/* ---------------------------------------------------------------- Schmiede
   Hinweis an den gemeinsamen Gruppen. Er ist der Grund, diese Runen zuerst zu
   kaufen – also steht er an der Ueberschrift, nicht im Kleingedruckten. */
.forge-group { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.forge-group-note {
  padding: 1px 8px;
  border: 1px solid rgba(120, 170, 255, 0.3);
  border-radius: 999px;
  background: rgba(74, 168, 255, 0.12);
  color: #8fc4ff;
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- Jackpot-Karte
   Die fuenfte, goldene Karte. Sie muss sich auf den ersten Blick von den
   anderen unterscheiden – sonst ist sie nur eine weitere Wahl. */
.choice.is-jackpot {
  border-color: var(--gold);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 211, 91, 0.22), transparent 62%),
    rgba(30, 24, 10, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 211, 91, 0.4), 0 14px 44px rgba(255, 176, 58, 0.28);
  animation: jackpotIn 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes jackpotIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.9); filter: brightness(2.4); }
  100% { opacity: 1; transform: none; filter: brightness(1); }
}
.choice.is-jackpot .choice-jackpot-flag {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: #241a04;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}


/* ---------------------------------------------------------------- Chronik
   Profil-Reiter: die eigene Geschichte als Kurve und als Liste. */
.acc-curve {
  position: relative;
  --curve-c: #7ad0ff;
  height: 132px;
  padding: 4px 0;
}
.acc-curve svg { width: 100%; height: 100%; display: block; }
.acc-curve-peaks { position: absolute; inset: 4px 0; pointer-events: none; }
.acc-curve-peaks i {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: 0 0 -4px -4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px 2px rgba(255, 211, 91, 0.65);
}
.acc-thennow { color: var(--text); line-height: 1.55; }
.acc-thennow b { color: var(--gold); }

.acc-runs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.acc-run {
  display: grid;
  grid-template-columns: 2.6rem minmax(7rem, 1.3fr) minmax(6rem, 1fr) repeat(3, minmax(4rem, 0.7fr)) minmax(0, 1.1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(120, 170, 255, 0.14);
  border-left: 3px solid var(--c, var(--accent));
  border-radius: 8px;
  background: rgba(14, 18, 32, 0.6);
  font-size: 0.8rem;
}
.acc-run.is-best {
  border-color: rgba(255, 211, 91, 0.45);
  background: linear-gradient(100deg, rgba(255, 211, 91, 0.12), rgba(14, 18, 32, 0.6) 60%);
}
.acc-run > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.acc-run b { color: var(--text); font-size: 0.85rem; }
.acc-run small { color: var(--muted); font-size: 0.68rem; }
.acc-run .ar-no { color: var(--muted); font-weight: 800; font-size: 0.72rem; }
.acc-run .ar-hero b { color: var(--c, var(--accent)); }
.acc-run .ar-num { text-align: right; }
.acc-run .ar-souls b { color: var(--gold); }
.acc-run .ar-cause {
  color: var(--muted);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-run .ar-flag { color: var(--gold); font-size: 0.7rem; font-weight: 800; }

/* Schmal: die Zeile bricht um, statt sich zu quetschen. */
@media (max-width: 700px) {
  .acc-run {
    grid-template-columns: 2.2rem 1fr 1fr;
    grid-auto-rows: min-content;
  }
  .acc-run .ar-no { grid-row: span 2; }
  .acc-run .ar-cause, .acc-run .ar-flag { grid-column: 2 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .soul-mote,
  .daily-bonus-chip .db-ic,
  .hud-ghost.beaten,
  .choice.is-jackpot { animation: none; }
}

/* ============================================================ BOSS-WAHL
   Drei Karten, links die schwächste Rarität, rechts die höchste. Sie erben die
   Farblogik der Kartenwahl (--rar) und legen die Leitfarbe des Bosses (--boss)
   für Bild und Rahmen darüber – so trägt jede Karte beide Achsen: Belohnung
   und Gegner. */
/* `.panel` setzt width: min(460px, 94vw) - ohne eigene BREITE (nicht max-width)
   quetschen sich die Bosskarten in eine Spalte von der halben Bildschirmbreite. */
.bosschoice-panel {
  width: min(880px, 94vw);
  padding: 30px 34px 26px;
  border-radius: 24px;
}
.bosschoice-title { margin: 0 0 4px; }
.bosschoice-sub { margin: 0 0 18px; opacity: 0.82; }

.bosschoice-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.bosschoice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--boss) 22%, transparent), transparent 70%),
    rgba(8, 10, 22, 0.82);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
/* Gäste sehen dieselben Karten, können aber nichts anfassen. */
div.bosschoice-card { cursor: default; opacity: 0.9; }

.bosschoice-card:is(:hover, :focus-visible) {
  transform: translateY(-4px);
  border-color: var(--rar);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--boss) 45%, transparent);
  outline: none;
}
.bosschoice-card.rar-epic { box-shadow: 0 0 0 1px var(--rar), 0 0 16px color-mix(in srgb, var(--rar) 45%, transparent); }
.bosschoice-card.rar-legendary {
  box-shadow: 0 0 0 2px var(--rar), 0 0 26px color-mix(in srgb, var(--rar) 55%, transparent);
}

.bc-rar {
  font-size: 11px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--rar);
}
.bc-art {
  width: 100%; max-width: 132px; height: 116px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--boss) 55%, transparent));
}
.bc-name { font-size: 17px; line-height: 1.15; }
.bc-tier { font-size: 11px; opacity: 0.72; }
.bc-sig { font-size: 12px; font-weight: 700; color: var(--boss); }
.bc-loot {
  margin-top: 4px; padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px; line-height: 1.35; opacity: 0.88;
}

/* Abstimmung im Team: der Zaehler sitzt auf der Karte, damit man beim Lesen
   sieht, wo das Team steht. Bei 0 Stimmen bleibt er blass im Hintergrund -
   sichtbar genug, um zu wissen, dass abgestimmt wird, leise genug, um die
   Bosskarte nicht zu uebertoenen. */
.bc-votes {
  margin-top: 6px;
  min-width: 46px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  opacity: 0.55;
  transition: opacity 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.bc-votes i { font-style: normal; }
.bosschoice-card.has-votes .bc-votes {
  opacity: 1;
  border-color: color-mix(in srgb, var(--rar) 60%, transparent);
  background: color-mix(in srgb, var(--rar) 22%, transparent);
}
/* Die eigene Stimme muss auf den ersten Blick zu finden sein - sonst klickt
   man im Gewuehl ein zweites Mal, weil man nicht mehr weiss, wo man stand. */
.bosschoice-card.is-myvote {
  border-color: var(--rar);
  box-shadow: 0 0 0 2px var(--rar), 0 10px 26px color-mix(in srgb, var(--boss) 45%, transparent);
}
.bosschoice-card.is-myvote .bc-votes {
  opacity: 1;
  background: color-mix(in srgb, var(--rar) 34%, transparent);
  border-color: var(--rar);
}

.bosschoice-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 16px 0 0; font-size: 12px; opacity: 0.72;
}
.bosschoice-timer {
  padding: 2px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-weight: 800; font-variant-numeric: tabular-nums;
}

/* Drei Karten bleiben auch schmal NEBENEINANDER: die Reihenfolge schwach -> stark
   ist die halbe Aussage des Fensters, gestapelt liest man sie nicht mehr. Erst
   wenn selbst dafuer kein Platz ist, faellt es auf eine Spalte (dann von oben
   nach unten gelesen). */
@media (max-width: 900px) {
  .bosschoice-cards { gap: 10px; }
  .bosschoice-panel { padding: 24px 18px 20px; }
  .bc-art { height: 88px; }
  .bc-name { font-size: 15px; }
}
@media (max-width: 560px) {
  .bosschoice-panel { padding: 18px 12px 14px; }
  .bosschoice-cards { gap: 7px; }
  .bosschoice-card { padding: 9px 6px 8px; gap: 4px; border-radius: 12px; }
  .bc-art { height: 62px; }
  .bc-rar { font-size: 9px; letter-spacing: 0.06em; }
  .bc-name { font-size: 12px; line-height: 1.15; }
  .bc-tier, .bc-sig, .bc-loot { font-size: 9px; line-height: 1.25; }
}

/* ==========================================================================
   KOPFZEILE & ERSTE ANSICHT — Neuaufbau
   --------------------------------------------------------------------------
   Vorher stritten sechs gleich laute Bloecke um denselben Bildschirm: sieben
   Navigationslinks mit zwei bunten Chips, die Tageskisten-Leiste ganz oben,
   die Play-Karte mit vier dichten Kacheln, die Bestenliste mit Kicker und
   Erklaerabsatz, eine volle Shop-Bahn und ein Marken-Band mit sechs Pillen.
   Dieser Block ordnet das neu — bewusst am Dateiende, damit er die alten
   Regeln ueberschreibt, ohne sie im ganzen Stylesheet aufzustoebern.

   Leitplanken:
     - EINE Akzentfarbe oben (Violett). Gold bleibt dem Laden vorbehalten.
     - Nur was man aus dem Stand braucht, steht in der Kopfzeile.
     - Jede Karte hat genau eine Ueberschrift und einen klaren Knopf.
   ========================================================================== */

/* ------------------------------------------------------------------ Kopf */

#menu .site-nav {
  min-height: 56px;
  gap: 12px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(7, 8, 17, 0.95), rgba(7, 8, 17, 0.74));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#menu .site-nav .brand {
  margin-right: auto;
  gap: 9px;
  font-size: 0.97rem;
  font-weight: 750;
  letter-spacing: 0.005em;
}

#menu .site-nav .brand-mark {
  width: 29px;
  height: 29px;
  border-radius: 8px;
  filter: none;
}

#menu .site-nav .brand-word { color: #efecfa; }

.nav-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

/* Guide: reiner Textlink. Er verlaesst zwar die Seite, muss dafuer aber
   keinen Rahmen und kein Emoji tragen. */
#menu .nav-actions .nav-guide {
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: #a8a3be;
  font-size: 0.85rem;
  font-weight: 650;
  transition: color 0.15s ease, background 0.15s ease;
}
#menu .nav-actions .nav-guide::before { content: none; }
#menu .nav-actions .nav-guide:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }

/* Der Laden ist der einzige farbige Punkt oben — deshalb faellt er auch
   ohne Goldverlauf auf. */
#menu .nav-actions .nav-shop {
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid rgba(154, 108, 255, 0.42);
  border-radius: 999px;
  background: rgba(154, 108, 255, 0.13);
  color: #e7dcff !important;
  font-size: 0.85rem;
  font-weight: 750;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
#menu .nav-actions .nav-shop:hover {
  border-color: rgba(174, 134, 255, 0.85);
  background: rgba(154, 108, 255, 0.22);
  color: #fff !important;
}
#menu .nav-actions .nav-shop-dot { color: var(--land-gold); font-size: 0.78em; }

/* Sprache: zwei nackte Kuerzel, das aktive hell. Kein Kasten, kein Punkt. */
#menu .site-nav .lang-switch {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
#menu .site-nav .lang-switch a {
  min-width: 0;
  padding: 7px 6px;
  border-radius: 7px;
  background: none;
  box-shadow: none;
  color: #6f6a85;
  font-size: 0.79rem;
  font-weight: 750;
  letter-spacing: 0.05em;
}
#menu .site-nav .lang-switch a:hover { color: #cfc9e4; }
#menu .site-nav .lang-switch a[aria-current="true"] {
  color: #fff;
  background: none;
  box-shadow: none;
}

/* Menue-Knopf: drei Striche, die sich beim Oeffnen zum Kreuz legen. */
#menu .nav-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: 3px;
  padding: 8px 13px 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #cec9e0;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
#menu .nav-more:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.07); color: #fff; }
#menu .nav-more:focus-visible { outline: 2px solid var(--land-purple); outline-offset: 2px; }

/* ===== Ton-Schalter in der Kopfzeile der Startseite =====
   Gleiche Form wie der Menue-Knopf daneben, nur quadratisch. Das Panel darunter
   ist dasselbe Bauteil wie im HUD (.audio-panel) und wird hier nur neu verankert:
   im HUD haengt es oben rechts am Bildschirm, hier unter seinem Knopf. */
#menu .nav-audio { position: relative; display: inline-flex; }
#menu .nav-sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #cec9e0;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
#menu .nav-sound:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.07); color: #fff; }
#menu .nav-sound:focus-visible { outline: 2px solid var(--land-purple); outline-offset: 2px; }
#menu .nav-sound.is-muted { color: #ff8a9c; border-color: rgba(255, 138, 156, 0.4); }
#menu .nav-audio-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 40;
}
/* „🎵 Musik" ist EIN Label. Ohne das hier bricht es zwischen Zeichen und Wort
   um, weil die Sprachumschaltung das Wort in ein eigenes <span> setzt. */
#menu .nav-audio-panel .audio-row > span:first-child { white-space: nowrap; }

#menu .nav-more-bars,
#menu .nav-more-bars::before,
#menu .nav-more-bars::after {
  display: block;
  width: 15px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
#menu .nav-more-bars { position: relative; }
#menu .nav-more-bars::before,
#menu .nav-more-bars::after { content: ""; position: absolute; left: 0; }
#menu .nav-more-bars::before { top: -5px; }
#menu .nav-more-bars::after  { top: 5px; }

#menu .nav-more[aria-expanded="true"] .nav-more-bars { background: transparent; }
#menu .nav-more[aria-expanded="true"] .nav-more-bars::before { transform: translateY(5px) rotate(45deg); }
#menu .nav-more[aria-expanded="true"] .nav-more-bars::after  { transform: translateY(-5px) rotate(-45deg); }

/* Ausklapper. Haengt an der Kopfzeile, nicht am Dokument — so wandert er
   beim Scrollen mit und braucht keine Positionsrechnung. */
#menu .nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 4px;
  z-index: 60;
  display: grid;
  min-width: 232px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(12, 13, 26, 0.97);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: navMenuIn 0.16s ease-out both;
}
#menu .nav-menu[hidden] { display: none; }
#menu .site-nav { position: sticky; }   /* Anker fuer den Ausklapper */

@keyframes navMenuIn {
  from { opacity: 0; transform: translateY(-5px); }
}

#menu .nav-menu a {
  padding: 10px 12px;
  border-radius: 9px;
  color: #b6b1ca;
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
  transition: color 0.14s ease, background 0.14s ease;
}
#menu .nav-menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

/* --------------------------------------------------- Erste Ansicht: Ruhe */

#menu .hero-screen {
  --launcher-w: 1180px;
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
  gap: clamp(12px, 1.8vh, 20px);
}

/* Die Tageskisten sind eine Belohnung, keine Begruessung. Sie standen ganz
   oben und waren damit das Erste und Lauteste auf der Seite — jetzt stehen
   sie unter den beiden Karten, ueber die volle Breite.

   Ausnahme: ab 1480px baut crates.css die Leiste zur schmalen Senkrechten
   LINKS neben dem Raster um. Dort steht sie niemandem im Weg, also bleibt es
   dabei — dieser Block endet vorher. */
@media (max-width: 1479px) {
  #menu .launcher-grid > .play-card,
  #menu .launcher-grid > .board-card { order: 1; }
  #menu .launcher-grid > .crate-rail {
    order: 5;
    grid-column: 1 / -1;
    margin-top: 2px;
  }
}

/* Karten: weniger Rundung, ruhigerer Rahmen, mehr Innenluft. */
#menu .menu-card {
  border-radius: 18px;
  border-color: rgba(255, 255, 255, 0.09);
}

/* Genau EINE Ueberschrift je Karte. Die Kicker darueber ("NEW RUN",
   "HALL OF SPIRITS") sagten nichts, was der Titel nicht schon sagt. */
#menu .play-card .launcher-card-head .panel-kicker,
#menu .board-card .board-head .panel-kicker { display: none; }

#menu .play-card .launcher-card-head h2,
#menu .board-card .board-title {
  margin: 0;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* Schrittnummern und Zeichenzaehler: Buerokratie um ein Textfeld herum. */
#menu .play-card .step-number,
#menu .play-card .field-label-row > span:last-child { display: none; }

#menu .play-card .name-box label,
#menu .play-card .hero-select > label {
  color: #9d98b4;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Die vier Helden-Kacheln waren dreizeilig und trugen Fliesstext plus
   Fortschrittsbalken. Als einzeiliger Chip-Streifen erfuellen sie denselben
   Zweck — sie sind Einstiege, keine Infotafeln. */
#menu .play-card .hero-skin-row { gap: 6px; }
#menu .play-card .hero-tile {
  padding: 8px 10px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.028);
  border-radius: 10px;
}
#menu .play-card .hero-tile:hover {
  border-color: rgba(154, 108, 255, 0.5);
  background: rgba(154, 108, 255, 0.1);
  transform: none;
}
#menu .play-card .hero-tile .ht-note,
#menu .play-card .hero-tile .ht-bar { display: none; }
#menu .play-card .hero-tile .ht-copy small { font-size: 0.63rem; letter-spacing: 0.07em; }
#menu .play-card .hero-tile .ht-copy strong { font-size: 0.79rem; }
#menu .play-card .hero-tile.ht-vip {
  border-color: rgba(255, 211, 91, 0.32);
  background: rgba(255, 211, 91, 0.075);
}
#menu .play-card .hero-tile.ht-vip:hover { border-color: var(--gold); background: rgba(255, 211, 91, 0.15); }
#menu .play-card .hero-tile.ht-vip.is-shop .ht-copy strong { font-size: 0.88rem; letter-spacing: 0.02em; }

/* Der Erklaerabsatz zur Monats-Saison ist Nachschlagewissen. Er rutscht
   unter die Liste, statt zwischen Titel und Tabs zu stehen. */
#menu .board-card .season-note {
  order: 9;
  margin: 10px 0 0;
  color: #77738c;
  font-size: 0.72rem;
  line-height: 1.45;
}

#menu .board-card .live-chip {
  padding: 5px 9px;
  border-color: rgba(112, 232, 173, 0.16);
  background: none;
  color: #7fd8a8;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

/* Shop-Bahn: eine Zeile, ein Ziel. Die Maus-Grafik und der zweite Textsatz
   machten daraus ein zweites Banner unter dem Banner. */
#menu .hero-screen > .scroll-cue-shop {
  padding: 9px 14px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
}
#menu .hero-screen > .scroll-cue-shop .cue-scroll { display: none; }
#menu .hero-screen > .scroll-cue-shop .cue-copy {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 9px;
}
#menu .hero-screen > .scroll-cue-shop .cue-copy strong { font-size: 0.86rem; color: #ded6f5; }
#menu .hero-screen > .scroll-cue-shop .cue-copy small {
  color: #7d7894;
  font-size: 0.76rem;
  white-space: normal;
}
/* Pfeil statt Maus-Grafik: der Balken ist ein Link, kein Scroll-Hinweis. */
#menu .hero-screen > .scroll-cue-shop::after {
  content: "→";
  margin-left: auto;
  color: #7d7894;
  font-size: 1rem;
  transition: transform 0.16s ease, color 0.16s ease;
}
#menu .hero-screen > .scroll-cue-shop:hover::after { transform: translateX(3px); color: #ded6f5; }
#menu .hero-screen > .scroll-cue-shop .cue-badge {
  width: 30px;
  height: 30px;
  border-color: rgba(255, 211, 91, 0.3);
  color: var(--land-gold);
}
#menu .hero-screen > .scroll-cue-shop .cue-scroll small {
  color: #7d7894;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
}

/* Marken-Band: Logo, Titel, ein Satz, eine Faktenzeile. Sonst nichts. */
#menu .hero-head {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(14px, 2vw, 26px);
}

#menu .brand-logo {
  width: clamp(84px, 6.6vw, 104px);
  animation: none;
  filter: drop-shadow(0 10px 22px rgba(23, 5, 70, 0.7));
}

#menu .hero-head .eyebrow {
  color: #8f87ad;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.18em;
}
#menu .hero-head .eyebrow > span[aria-hidden] { display: none; }

#menu .hero-head .game-title {
  margin: 6px 0 0;
  font-size: clamp(1.4rem, 1.8vw, 1.95rem);
  font-weight: 800;
}

#menu .hero-head .subtitle {
  max-width: 62ch;
  margin: 8px 0 0;
  color: #a5a1b8;
  text-shadow: none;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 9px 0 0;
  color: #7d7894;
  font-size: 0.79rem;
  font-weight: 600;
}
.hero-facts i { color: #4a4660; font-style: normal; }

/* -------------------------------------------------------------- Schmaler */

@media (max-width: 1180px) {
  #menu .launcher-grid { grid-template-columns: minmax(380px, 1.3fr) minmax(280px, 1fr); }
}

@media (max-width: 900px) {
  #menu .site-nav { min-height: 54px; gap: 8px; flex-wrap: nowrap; padding-block: 7px; }
  #menu .site-nav .brand-word { display: none; }
  #menu .nav-actions .nav-guide { display: none; }   /* liegt im Ausklapper */
  #menu .nav-actions { gap: 5px; }
  #menu .nav-more-word { display: none; }
  #menu .nav-more { padding: 9px 11px; }
  #menu .nav-menu { min-width: min(280px, calc(100vw - 20px)); }
  #menu .hero-screen { min-height: auto; }
  #menu .hero-head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  #menu .hero-head picture { display: block; }
  #menu .hero-head .eyebrow { justify-content: center; }
  .hero-facts { justify-content: center; }
}

@media (max-width: 620px) {
  #menu .play-card .hero-skin-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #menu .hero-screen > .scroll-cue-shop .cue-scroll { display: none; }
}

/* Der Ausklapper darf im Guide-Menue nicht mitwandern, wenn die Kopfzeile
   dort ohne ihn ausgeliefert wird. */
.site-nav .nav-menu:not([hidden]) { display: grid; }

/* Der Gast-Chip war ein zweiter bunter Knopf neben dem Laden. In der neuen
   Kopfzeile darf nur einer leuchten — Anmelden bleibt lesbar, hoert aber auf
   zu blinken. */
#menu .nav-account .acc-chip.acc-chip-guest {
  padding: 6px 12px 6px 7px;
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  animation: none;
}
#menu .nav-account .acc-chip.acc-chip-guest:hover {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}
#menu .nav-account .acc-chip.acc-chip-guest .acc-chip-copy small { color: #8d88a4; }
#menu .nav-account .acc-chip.acc-chip-guest .acc-chip-copy strong { color: #d9d5e8; }

/* Zwischen 620 und 1080 Pixeln ist die Play-Karte zu schmal fuer vier
   Kacheln nebeneinander - die Beschriftungen brachen dort auf drei Punkte
   zusammen. Zwei Spalten geben jeder Kachel wieder eine lesbare Breite. */
@media (max-width: 1080px) {
  #menu .play-card .hero-skin-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================== Postfach
   Knopf in der Kopfzeile plus das Fenster dahinter (js/inbox.js). Der Knopf
   sitzt links vom Konto-Knopf und traegt den Zaehler der ungelesenen
   Nachrichten - er ist der einzige Ort, an dem eine verpasste Freischaltung
   noch auffaellt. */
.nav-inbox {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(150, 170, 220, 0.22);
  background: rgba(14, 18, 34, 0.66);
  color: #c4cde2; font-size: 1rem; line-height: 1;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.nav-inbox:hover, .nav-inbox:focus-visible {
  border-color: rgba(180, 200, 255, 0.5); color: #f0f5ff;
  background: rgba(24, 30, 54, 0.9); transform: translateY(-1px);
}
.nav-inbox.has-unread { border-color: rgba(255, 205, 90, 0.55); color: #ffe8a8; }

.nav-inbox .inbox-dot {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: #ff5470; color: #fff;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px rgba(8, 10, 20, 0.9), 0 0 10px rgba(255, 84, 112, 0.7);
}
/* Ein kurzer Puls, damit ein frischer Eingang auch dann auffaellt, wenn der
   Blick gerade woanders war. Laeuft dreimal und hoert dann auf - eine dauernd
   blinkende Kopfzeile lernt man in Minuten zu uebersehen. */
.nav-inbox.has-unread .inbox-dot { animation: inboxPulse 1.1s ease-out 3; }
@keyframes inboxPulse {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.28); box-shadow: 0 0 0 2px rgba(8, 10, 20, 0.9), 0 0 16px rgba(255, 84, 112, 0.95); }
}

/* ---- Fenster ---- */
.inbox-panel { max-width: 720px; }
.inbox-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: min(56vh, 460px); overflow-y: auto;
  margin: 12px 0 16px; padding-right: 4px;
}
.inbox-empty {
  margin: 22px 8px; text-align: center; color: #8b93a6; font-size: 0.9rem; line-height: 1.5;
}

.inbox-row {
  --ib: #7f8dab;
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(140, 160, 210, 0.16);
  background: rgba(12, 16, 30, 0.62);
  border-left: 3px solid var(--ib);
}
/* Ungelesen: heller Grund und ein Punkt. Der Unterschied muss ohne Farbsehen
   erkennbar bleiben, deshalb beides - Helligkeit UND das zusaetzliche Zeichen. */
.inbox-row.is-new { background: rgba(26, 33, 58, 0.82); border-color: rgba(180, 200, 255, 0.3); }
.inbox-row.is-new .ib-title::after {
  content: '●'; margin-left: 7px; font-size: 0.55em; color: #ff5470; vertical-align: middle;
}

.inbox-row .ib-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; font-size: 1.15rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.inbox-row .ib-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.inbox-row .ib-kick {
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ib);
}
.inbox-row .ib-title {
  font-size: 0.98rem; font-weight: 800; color: #eef3ff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox-row .ib-text { font-size: 0.8rem; color: #9aa3b7; line-height: 1.35; }
.inbox-row .ib-when { font-size: 0.68rem; color: #6f7789; white-space: nowrap; align-self: start; padding-top: 4px; }

/* Farbe je Art: man soll ein Postfach ueberfliegen und sofort sehen, was
   Beute war und was ein Rang. */
.inbox-row.kind-item   { --ib: #6fe0a8; }
.inbox-row.kind-rank   { --ib: #ffd76a; }
.inbox-row.kind-ach    { --ib: #ffb63a; }
.inbox-row.kind-hero   { --ib: #7fb7ff; }
.inbox-row.kind-trophy { --ib: #ffd75e; }
.inbox-row.kind-season { --ib: #b98bff; }
.inbox-row.kind-crate  { --ib: #ff9a3d; }
.inbox-row.kind-news   { --ib: #8f9ab4; }

@media (max-width: 560px) {
  .inbox-row { grid-template-columns: 34px 1fr; gap: 9px; padding: 9px 10px; }
  .inbox-row .ib-icon { width: 34px; height: 34px; font-size: 1rem; }
  /* Der Zeitstempel rutscht unter den Text statt die Zeile zu quetschen. */
  .inbox-row .ib-when { grid-column: 2; padding-top: 2px; }
}

/* ============================================================= Item-Auftritt
   Ein neues Item ist die folgenreichste Freischaltung im Spiel - ab jetzt kann
   es in jedem Angebot liegen. Frueher war es eine Zeile im Erfolgs-Toast oben
   rechts und ging dort unter. Jetzt steht es in der Bildmitte.

   Bewusst OHNE Standbild (anders als der Rangaufstieg): Erfolge fallen
   haeufiger als Raenge. Die Karte laesst das Spielfeld durchscheinen, faengt
   keine Klicks und ist nach gut drei Sekunden weg. */
#itemRevealFx {
  position: fixed; inset: 0; z-index: 74; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.item-reveal {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  gap: 3px; text-align: center; padding: 20px 30px 17px;
  min-width: min(86vw, 340px); max-width: min(92vw, 460px);
  border-radius: 18px;
  border: 1px solid rgba(120, 240, 190, 0.34);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(60, 200, 150, 0.20), rgba(0, 0, 0, 0) 62%),
    rgba(7, 12, 20, 0.9);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.66), 0 0 40px rgba(70, 220, 165, 0.16) inset;
  animation: itemReveal 3.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Strahlenkranz hinter dem Symbol - dieselbe Sprache wie beim Rangaufstieg,
   nur eine Nummer kleiner: es ist die kleinere Nachricht. */
.item-reveal .ir-rays {
  position: absolute; left: 50%; top: 54px; width: 300px; height: 300px;
  margin: -150px 0 0 -150px; opacity: 0; z-index: -1;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(120, 245, 195, 0.5) 3deg, transparent 9deg,
    transparent 42deg, rgba(120, 245, 195, 0.5) 45deg, transparent 51deg,
    transparent 87deg, rgba(120, 245, 195, 0.5) 90deg, transparent 96deg,
    transparent 132deg, rgba(120, 245, 195, 0.5) 135deg, transparent 141deg,
    transparent 177deg, rgba(120, 245, 195, 0.5) 180deg, transparent 186deg,
    transparent 222deg, rgba(120, 245, 195, 0.5) 225deg, transparent 231deg,
    transparent 267deg, rgba(120, 245, 195, 0.5) 270deg, transparent 276deg,
    transparent 312deg, rgba(120, 245, 195, 0.5) 315deg, transparent 321deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 6%, rgba(0, 0, 0, 0.3) 22%, transparent 50%);
  mask-image: radial-gradient(circle, #000 6%, rgba(0, 0, 0, 0.3) 22%, transparent 50%);
  animation: itemRays 3.2s linear both;
}
.item-reveal .ir-ring {
  position: absolute; left: 50%; top: 54px; width: 96px; height: 96px;
  margin: -48px 0 0 -48px; border-radius: 50%;
  border: 2px solid rgba(150, 255, 210, 0.9); opacity: 0;
  animation: itemRing 1s cubic-bezier(0.1, 0.8, 0.3, 1) 0.06s both;
}
.item-reveal .ir-ring2 { border-width: 1px; animation-delay: 0.22s; animation-duration: 1.2s; }

.item-reveal .ir-ic {
  display: block; font-size: 3rem; line-height: 1;
  filter: drop-shadow(0 0 18px rgba(120, 245, 195, 0.75));
  animation: itemIcon 3.2s cubic-bezier(0.14, 1.5, 0.3, 1) both;
}
.item-reveal .ir-ic .item-icon-img { width: 62px; height: 62px; object-fit: contain; }

.item-reveal .ir-kick {
  margin-top: 8px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.24em;
  text-transform: uppercase; color: #6fe0a8;
}
.item-reveal .ir-name {
  font-size: 1.6rem; font-weight: 900; color: #ffffff;
  text-shadow: 0 0 20px rgba(120, 245, 195, 0.55);
}
.item-reveal .ir-desc {
  margin-top: 3px; font-size: 0.84rem; line-height: 1.4; color: #b7c2d2; max-width: 42ch;
}
.item-reveal .ir-foot {
  margin-top: 9px; padding-top: 8px; font-size: 0.68rem; letter-spacing: 0.06em; color: #7d879b;
  border-top: 1px solid rgba(255, 255, 255, 0.07); width: 100%;
}

@keyframes itemReveal {
  0%   { opacity: 0; transform: translateY(22px) scale(0.9); }
  6%   { opacity: 1; transform: translateY(0) scale(1.02); }
  11%  { transform: translateY(0) scale(1); }
  86%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-16px) scale(0.98); }
}
@keyframes itemIcon {
  0%   { transform: scale(2.2) rotate(-10deg); opacity: 0; }
  7%   { transform: scale(0.92) rotate(0deg); opacity: 1; }
  12%  { transform: scale(1.06); }
  18%  { transform: scale(1); }
  100% { transform: scale(1); }
}
@keyframes itemRing {
  0%   { opacity: 0; transform: scale(0.3); }
  14%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(2.8); }
}
@keyframes itemRays {
  0%   { opacity: 0; transform: rotate(0deg) scale(0.5); }
  8%   { opacity: 0.55; }
  100% { opacity: 0.12; transform: rotate(26deg) scale(1); }
}

@media (max-width: 560px) {
  .item-reveal { padding: 16px 18px 14px; }
  .item-reveal .ir-ic { font-size: 2.4rem; }
  .item-reveal .ir-name { font-size: 1.3rem; }
  .item-reveal .ir-desc { font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .item-reveal, .item-reveal * { animation-duration: 0.01ms !important; animation-delay: 0s !important; }
  .item-reveal { opacity: 1; }
}

/* ---------------------------------------------------- Neue Items im End-Screen
   Die gebuendelte Vorstellung: im Gefecht sah man jede Karte drei Sekunden,
   hier stehen alle nebeneinander und lassen sich in Ruhe lesen. */
.go-new-items {
  margin: 10px 0 4px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(120, 240, 190, 0.28);
  background: linear-gradient(180deg, rgba(30, 70, 58, 0.34), rgba(10, 16, 24, 0.5));
}
.go-new-items .gni-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px;
  font-size: 0.7rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase;
  color: #6fe0a8;
}
.go-new-items .gni-head b { color: #dff7ec; letter-spacing: 0.1em; }
.go-new-items .gni-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.go-new-items .gni-card {
  display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center;
  padding: 9px 11px; border-radius: 11px;
  background: rgba(8, 14, 22, 0.66); border: 1px solid rgba(255, 255, 255, 0.07);
}
.go-new-items .gni-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; font-size: 1.4rem; border-radius: 10px;
  background: rgba(120, 240, 190, 0.1);
}
.go-new-items .gni-ic .item-icon-img { width: 34px; height: 34px; object-fit: contain; }
.go-new-items .gni-name { display: block; font-weight: 800; color: #f2f7ff; font-size: 0.95rem; }
.go-new-items .gni-desc { display: block; font-size: 0.76rem; line-height: 1.35; color: #9aa6b8; }

/* ------------------------------------------------- Beutekammer auf der Startseite
   Eine Zeile ueber den Meta-Karten: wie viele Items offen sind und welches
   zuletzt dazukam. Die Items sind der einzige Fortschritt, der die ANGEBOTE
   im naechsten Lauf veraendert - und ihr Stand steckte bis hierher hinter zwei
   Klicks im Item-Kodex. Fuellt js/game.js (renderUnlockHint). */
.unlock-hint {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px;
  width: 100%; margin: 0 0 14px; padding: 13px 16px; text-align: left;
  border-radius: 15px; cursor: pointer;
  border: 1px solid rgba(120, 240, 190, 0.22);
  background: linear-gradient(135deg, rgba(20, 52, 44, 0.5), rgba(12, 17, 30, 0.62));
  color: inherit; font: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.unlock-hint:hover, .unlock-hint:focus-visible {
  border-color: rgba(140, 255, 205, 0.5); transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(26, 64, 54, 0.6), rgba(16, 22, 38, 0.7));
}
.unlock-hint.is-complete { border-color: rgba(255, 214, 110, 0.34); }

.unlock-hint .uh-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 13px; font-size: 1.4rem;
  background: rgba(120, 240, 190, 0.1); border: 1px solid rgba(120, 240, 190, 0.16);
}
.unlock-hint .uh-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.unlock-hint .uh-lbl {
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase;
  color: #6fe0a8;
}
.unlock-hint .uh-count { font-size: 0.95rem; color: #d7dfee; }
.unlock-hint .uh-count b { color: #ffffff; font-size: 1.1rem; }
.unlock-hint .uh-bar {
  display: block; height: 5px; border-radius: 3px; margin-top: 3px;
  background: rgba(255, 255, 255, 0.08); overflow: hidden; max-width: 320px;
}
.unlock-hint .uh-bar > span {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #4fd6a0, #9dffd4);
  box-shadow: 0 0 10px rgba(110, 240, 190, 0.6);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.unlock-hint .uh-cta {
  font-size: 0.78rem; font-weight: 700; color: #93a0b6; white-space: nowrap;
}
.unlock-hint .uh-cta em { font-style: normal; }

/* Das frische Item bekommt die rechte Spalte fuer sich - es ist die eigentliche
   Neuigkeit, die Zahl daneben nur der Rahmen dazu. */
.unlock-hint .uh-fresh {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.unlock-hint .uh-fresh-lbl {
  font-size: 0.58rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase;
  color: #ffd76a;
}
.unlock-hint .uh-fresh-row { display: inline-flex; align-items: center; gap: 7px; }
.unlock-hint .uh-fresh-row b { color: #ffffff; font-size: 0.95rem; white-space: nowrap; }
.unlock-hint .uh-fresh-ic { font-size: 1.15rem; line-height: 1; }
.unlock-hint .uh-fresh-ic .item-icon-img { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; }

@media (max-width: 620px) {
  .unlock-hint { grid-template-columns: 40px 1fr; gap: 10px; padding: 11px 12px; }
  .unlock-hint .uh-ic { width: 40px; height: 40px; font-size: 1.2rem; }
  /* Frisches Item und Handlungsaufforderung ruecken unter den Balken statt die
     Zeile auf einem Telefon in drei zu enge Spalten zu pressen. */
  .unlock-hint .uh-fresh {
    grid-column: 1 / -1; align-items: flex-start;
    padding: 8px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .unlock-hint .uh-cta { grid-column: 1 / -1; }
}