/* Super-Pepe-Theme -- alles unter html:root[data-theme="pepe"].
   Absichtlich eine eigene Datei: das Theme ist Spielerei, die anderen beiden
   Modi sollen davon nichts merken. Wird NACH style.css geladen.

   Zur Spezifitaet: der Dunkelmodus greift ueber
   `:root:not([data-theme="light"])` (0,2,0) -- und "pepe" ist nicht "light",
   die Regeln wuerden also mitgelten. Deshalb steht hier ueberall `html:root[...]`
   (0,2,1), damit die Pepe-Farben in jedem Fall gewinnen, unabhaengig von der
   Windows-Einstellung und von der Ladereihenfolge. */

html:root[data-theme="pepe"] {
  /* Grundfarben -- Himmel aus dem SMB1-Screenshot */
  --sky: #6b8cff;
  /* Derselbe Ton mit Alpha 0 -- fuer den Wolken-Deckel. Nicht `transparent`
     verwenden: das ist rgba(0,0,0,0) und kann beim Verlauf einen dunklen
     Saum erzeugen. */
  --sky-klar: rgba(107, 140, 255, 0);
  --sky-dark: #5878e8;
  --pipe-light: #8ce55a;
  --pipe-mid: #3ca020;
  --pipe-dark: #14701a;
  --pipe-black: #0b2f0b;
  --brick: #c84c0c;
  --brick-dark: #8f3406;
  --brick-light: #f0a070;
  --coin: #ffd800;

  --bg: var(--sky);
  --surface: #ffffff;
  --surface-2: #f4f7ff;
  --border: #0b1020;
  --border-strong: #0b1020;
  --text: #1a1f2e;
  --text-dim: #4a5468;
  --text-faint: #6b7688;

  --accent: #1a3fd0;
  --accent-soft: #dbe4ff;
  --accent-text: #ffffff;

  --overdue: #c01810;
  --overdue-bg: #ffe0dd;
  --today: #a85c00;
  --today-bg: #ffeecd;
  --soon: #7a6600;
  --soon-bg: #fff6cc;
  --ok: #12703f;
  --ok-bg: #ddf6e6;

  /* Harte Pixelkanten statt weicher Schatten -- das ist der halbe 8-Bit-Look */
  --shadow-sm: 2px 2px 0 rgba(11, 16, 32, .35);
  --shadow-md: 3px 3px 0 rgba(11, 16, 32, .4);
  --shadow-lg: 6px 6px 0 rgba(11, 16, 32, .5);
  --radius: 0px;
  --radius-sm: 0px;

  --pepe-font: "Impact", "Haettenschweiler", "Franklin Gothic Heavy", "Arial Black", sans-serif;
  --ground-h: 48px;
}

/* Die drei Meta-Spalten im Reminder bleiben im Pixel-Theme gleich gut lesbar
   wie der hervorgehobene Tasktitel. */
html:root[data-theme="pepe"] .reminder-row .rr-when,
html:root[data-theme="pepe"] .reminder-row .rr-project,
html:root[data-theme="pepe"] .reminder-row .rr-asg {
  color: #0b1020;
  font-size: 13px;
  font-weight: 650;
}

/* ---------- Himmel: Wolken, Huegel, Buesche ---------- */

/* Eine feste Deko-Ebene hinter allem. pointer-events: none ist Pflicht, sonst
   liegt sie ueber dem Board und schluckt Klicks.

   z-index: -1, nicht 0. Bei 0 malt die Ebene ueber den normalen Fluss-Inhalt
   (positionierte Elemente mit z-index 0 liegen ueber in-flow Bloecken), und man
   muesste jeder App-Flaeche einen z-index verpassen. Genau das war der erste
   Versuch -- er hat `.overlay` von `fixed` auf `relative` gezogen, wodurch das
   Task-Sheet geoeffnet, aber unsichtbar war, und die Topbar von z-index 20 auf 1
   gedrueckt. Mit -1 liegt die Deko hinter allem und nichts muss angefasst
   werden. */
html:root[data-theme="pepe"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Buesche und Huegel direkt ueber dem Boden */
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='104' shape-rendering='crispEdges'><g fill='rgb(0,168,0)'><path d='M40 104 L40 72 L56 72 L56 56 L72 56 L72 40 L104 40 L104 56 L120 56 L120 72 L136 72 L136 104 Z'/><path d='M300 104 L300 72 L316 72 L316 56 L348 56 L348 72 L364 72 L364 104 Z'/></g><g fill='rgb(128,208,16)'><path d='M180 104 L180 88 L196 88 L196 72 L228 72 L228 88 L244 88 L244 104 Z'/><path d='M420 104 L420 88 L436 88 L436 72 L468 72 L468 88 L484 88 L484 104 Z'/></g><g fill='rgb(0,80,0)'><rect x='60' y='64' width='8' height='16'/><rect x='84' y='52' width='8' height='16'/><rect x='324' y='68' width='8' height='16'/></g></svg>")
      /* Vier-Wert-Syntax: die UNTERKANTE der Huegel liegt auf der Oberkante des
         Bodens. Mit `left calc(100% - …)` waere die OBERkante dort gelandet und
         die Huegel wuerden im Ziegelboden versinken. */
      repeat-x left 0 bottom var(--ground-h),
    /* Deckel: legt reinen Himmel ueber das untere Drittel und nimmt dort die
       Wolken weg. Liegt VOR der Wolkenebene (frueher = weiter oben) und HINTER
       den Huegeln, die dadurch sichtbar bleiben. Der Uebergang von 58% auf 72%
       ist breiter als eine Wolke hoch ist -- so wird keine abgeschnitten,
       sondern sie verblassen. */
    linear-gradient(to bottom, var(--sky-klar) 0 58%, var(--sky) 72% 100%),
    /* Wolken */
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1450' height='620' shape-rendering='crispEdges'><g transform='translate(40,10) scale(1.15)'><path d='M0 36 v-12 h10 v-8 h10 v-8 h22 v8 h12 v8 h14 v12 z' fill='rgb(255,255,255)'/><rect x='9' y='24' width='24' height='4' fill='rgb(150,214,255)'/></g><g transform='translate(300,62) scale(0.7)'><path d='M0 24 v-8 h10 v-8 h20 v8 h10 v8 z' fill='rgb(255,255,255)'/><rect x='9' y='16' width='16' height='3' fill='rgb(150,214,255)'/></g><g transform='translate(520,18) scale(1.55)'><path d='M0 36 v-12 h10 v-8 h10 v-8 h22 v8 h12 v8 h14 v12 z' fill='rgb(255,255,255)'/><rect x='9' y='24' width='24' height='4' fill='rgb(150,214,255)'/></g><g transform='translate(900,34) scale(0.85)'><path d='M0 24 v-8 h10 v-8 h20 v8 h10 v8 z' fill='rgb(255,255,255)'/><rect x='9' y='16' width='16' height='3' fill='rgb(150,214,255)'/></g><g transform='translate(1180,8) scale(1.0)'><path d='M0 36 v-12 h10 v-8 h10 v-8 h22 v8 h12 v8 h14 v12 z' fill='rgb(255,255,255)'/><rect x='9' y='24' width='24' height='4' fill='rgb(150,214,255)'/></g><g transform='translate(150,150) scale(1.3)'><path d='M0 36 v-12 h10 v-8 h10 v-8 h22 v8 h12 v8 h14 v12 z' fill='rgb(255,255,255)'/><rect x='9' y='24' width='24' height='4' fill='rgb(150,214,255)'/></g><g transform='translate(680,128) scale(0.75)'><path d='M0 24 v-8 h10 v-8 h20 v8 h10 v8 z' fill='rgb(255,255,255)'/><rect x='9' y='16' width='16' height='3' fill='rgb(150,214,255)'/></g><g transform='translate(1010,176) scale(1.1)'><path d='M0 36 v-12 h10 v-8 h10 v-8 h22 v8 h12 v8 h14 v12 z' fill='rgb(255,255,255)'/><rect x='9' y='24' width='24' height='4' fill='rgb(150,214,255)'/></g><g transform='translate(400,232) scale(0.95)'><path d='M0 36 v-12 h10 v-8 h10 v-8 h22 v8 h12 v8 h14 v12 z' fill='rgb(255,255,255)'/><rect x='9' y='24' width='24' height='4' fill='rgb(150,214,255)'/></g><g transform='translate(1300,220) scale(0.65)'><path d='M0 24 v-8 h10 v-8 h20 v8 h10 v8 z' fill='rgb(255,255,255)'/><rect x='9' y='16' width='16' height='3' fill='rgb(150,214,255)'/></g><g transform='translate(60,320) scale(0.8)'><path d='M0 24 v-8 h10 v-8 h20 v8 h10 v8 z' fill='rgb(255,255,255)'/><rect x='9' y='16' width='16' height='3' fill='rgb(150,214,255)'/></g><g transform='translate(760,300) scale(1.4)'><path d='M0 36 v-12 h10 v-8 h10 v-8 h22 v8 h12 v8 h14 v12 z' fill='rgb(255,255,255)'/><rect x='9' y='24' width='24' height='4' fill='rgb(150,214,255)'/></g><g transform='translate(1130,350) scale(0.9)'><path d='M0 36 v-12 h10 v-8 h10 v-8 h22 v8 h12 v8 h14 v12 z' fill='rgb(255,255,255)'/><rect x='9' y='24' width='24' height='4' fill='rgb(150,214,255)'/></g><g transform='translate(250,430) scale(1.05)'><path d='M0 36 v-12 h10 v-8 h10 v-8 h22 v8 h12 v8 h14 v12 z' fill='rgb(255,255,255)'/><rect x='9' y='24' width='24' height='4' fill='rgb(150,214,255)'/></g><g transform='translate(620,470) scale(0.7)'><path d='M0 24 v-8 h10 v-8 h20 v8 h10 v8 z' fill='rgb(255,255,255)'/><rect x='9' y='16' width='16' height='3' fill='rgb(150,214,255)'/></g><g transform='translate(980,520) scale(1.2)'><path d='M0 36 v-12 h10 v-8 h10 v-8 h22 v8 h12 v8 h14 v12 z' fill='rgb(255,255,255)'/><rect x='9' y='24' width='24' height='4' fill='rgb(150,214,255)'/></g><g transform='translate(1350,480) scale(0.75)'><path d='M0 36 v-12 h10 v-8 h10 v-8 h22 v8 h12 v8 h14 v12 z' fill='rgb(255,255,255)'/><rect x='9' y='24' width='24' height='4' fill='rgb(150,214,255)'/></g></svg>")
      /* Die Kachel ist 1450x620 und streut 17 Wolken in zwei Formen und
         Groessen von 0.65 bis 1.55 -- vorher lagen alle auf einer Linie und in
         gleicher Groesse, was wie Tapete aussah. Eine kleinere Kachel (1150x300)
         war ebenfalls zu wenig: die senkrechte Wiederholung war als Muster
         erkennbar und der Himmel zu voll.
         top 106px: unterhalb von Topbar und Filterleiste. Auf dem Board sieht man
         nur den oberen Streifen (darunter stehen die Roehren), darum liegen drei
         Wolken bewusst in den obersten 60px.

         `repeat` statt `repeat-x`: auf langen Seiten war der Himmel unterhalb von
         etwa 400px sonst vollstaendig leer. Keine Wolke beruehrt den unteren oder
         rechten Kachelrand -- sonst wuerde die Wiederholung sie durchschneiden. */
      repeat left 0 top 106px,
    linear-gradient(var(--sky), var(--sky));
}

/* Platz fuer den Boden am unteren Rand freihalten -- sonst verdeckt der Streifen
   die letzte Karte bzw. das Ende der Spalte. */
html:root[data-theme="pepe"] main {
  height: calc(100% - var(--topbar-h) - var(--filterbar-h) - var(--ground-h));
}
html:root[data-theme="pepe"] main.no-filterbar {
  height: calc(100% - var(--topbar-h) - var(--ground-h));
}

/* ---------- Schrift ---------- */

/* Nur Ueberschriften, Reiter und Knoepfe bekommen die Logo-Schrift. Fliesstext,
   Tabellen und Eingaben bleiben lesbar -- eine Notiz in Impact liest niemand. */
html:root[data-theme="pepe"] .brand-name,
html:root[data-theme="pepe"] .tab,
html:root[data-theme="pepe"] .col-head,
html:root[data-theme="pepe"] .team-name,
html:root[data-theme="pepe"] .page h1,
html:root[data-theme="pepe"] .page h2,
html:root[data-theme="pepe"] .sheet h2,
html:root[data-theme="pepe"] .btn {
  font-family: var(--pepe-font);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  /* paint-order laesst die Kontur HINTER der Fuellung liegen -- ohne das
     frisst ein 3px-Stroke die Buchstaben von innen auf. */
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #0b1020;
}

html:root[data-theme="pepe"] .brand-name {
  font-size: 22px;
  color: #ffd800;
  -webkit-text-stroke-width: 4px;
  text-shadow: 0 3px 0 rgba(11, 16, 32, .45);
}
html:root[data-theme="pepe"] .brand-mark {
  background: var(--brick);
  border: 3px solid #0b1020;
  border-radius: 0;
  box-shadow: inset 0 3px 0 var(--brick-light);
}

html:root[data-theme="pepe"] .tab {
  font-size: 16px;
  color: #ffffff;
  -webkit-text-stroke-width: 3px;
  background: none;
  border: none;
}
html:root[data-theme="pepe"] .tab:hover { color: #ffd800; }
html:root[data-theme="pepe"] .tab.active {
  color: #ffd800;
  background: none;
  text-shadow: 0 3px 0 rgba(11, 16, 32, .5);
}
html:root[data-theme="pepe"] .tab.active::after { display: none; }

html:root[data-theme="pepe"] .page h1 { font-size: 26px; color: #ffd800; -webkit-text-stroke-width: 4px; }
html:root[data-theme="pepe"] .page h2 { font-size: 17px; color: #ffffff; letter-spacing: 1.4px; }
html:root[data-theme="pepe"] .page .lead {
  color: #ffffff; font-weight: 600;
  text-shadow: 1px 1px 0 rgba(11, 16, 32, .85);
}
html:root[data-theme="pepe"] .sheet h2 { font-size: 20px; color: #1a1f2e; -webkit-text-stroke-width: 0; letter-spacing: .8px; }

/* Die Radar-Gruppentitel stehen frei auf dem Himmel, nicht auf einer Flaeche --
   mit var(--text-dim) waeren sie grau auf Blau und kaum zu lesen. Die
   Ampelfarben fuer overdue/today bleiben, bekommen aber Kontur. */
html:root[data-theme="pepe"] .radar-group h2 {
  font-family: var(--pepe-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.4px;
  color: #ffffff;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #0b1020;
}
html:root[data-theme="pepe"] .radar-group.g-overdue h2 { color: #ff8b84; }
html:root[data-theme="pepe"] .radar-group.g-today h2 { color: #ffc46b; }
html:root[data-theme="pepe"] .radar-group h2 .n { color: var(--coin); }

/* Das Abzeichen steckt IM h2 des Klapp-Abschnitts und erbt darum Impact samt
   Kontur -- damit lief es aus dem Panel heraus. Hier zurueck auf Fliesstext. */
html:root[data-theme="pepe"] .sec-badge {
  font-family: "Segoe UI", -apple-system, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  color: #ffffff;
  text-shadow: 1px 1px 0 rgba(11, 16, 32, .7);
}

/* Beschriftungen, die frei auf dem Himmel stehen statt auf einer weissen
   Flaeche -- grau auf Blau ist nicht lesbar. */
html:root[data-theme="pepe"] .stx-head .fld > span,
html:root[data-theme="pepe"] .stx-summary,
html:root[data-theme="pepe"] .page > .hint {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 1px 1px 0 rgba(11, 16, 32, .85);
}

/* ---------- Topbar und Filterbar als Ziegelband ---------- */

html:root[data-theme="pepe"] .topbar {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'><rect width='32' height='32' fill='rgb(143,52,6)'/><g fill='rgb(200,76,12)'><rect x='1' y='1' width='14' height='14'/><rect x='17' y='1' width='14' height='14'/><rect x='-7' y='17' width='14' height='14'/><rect x='9' y='17' width='14' height='14'/><rect x='25' y='17' width='14' height='14'/></g><g fill='rgb(240,160,112)'><rect x='1' y='1' width='14' height='2'/><rect x='17' y='1' width='14' height='2'/><rect x='-7' y='17' width='14' height='2'/><rect x='9' y='17' width='14' height='2'/><rect x='25' y='17' width='14' height='2'/></g></svg>");
  border-bottom: 4px solid #0b1020;
  height: 58px;
}
html:root[data-theme="pepe"] { --topbar-h: 58px; }

html:root[data-theme="pepe"] .filterbar {
  background: rgba(11, 16, 32, .28);
  border-bottom: 3px solid #0b1020;
  color: #ffffff;
}
html:root[data-theme="pepe"] .filterbar .fld > span,
html:root[data-theme="pepe"] .filterbar .chk,
html:root[data-theme="pepe"] .filter-count {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 1px 1px 0 rgba(11, 16, 32, .8);
}

/* ---------- Eingaben und Knoepfe als Bloecke ---------- */

html:root[data-theme="pepe"] input,
html:root[data-theme="pepe"] select,
html:root[data-theme="pepe"] textarea {
  border: 3px solid #0b1020 !important;
  border-radius: 0 !important;
  background: #ffffff;
  color: #1a1f2e;
}
html:root[data-theme="pepe"] input:focus,
html:root[data-theme="pepe"] select:focus,
html:root[data-theme="pepe"] textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--coin);
}

html:root[data-theme="pepe"] .btn {
  border: 3px solid #0b1020;
  border-radius: 0;
  font-size: 14px;
  -webkit-text-stroke-width: 0;
  letter-spacing: .8px;
  box-shadow: 3px 3px 0 rgba(11, 16, 32, .45);
  transition: transform .06s, box-shadow .06s;
}
html:root[data-theme="pepe"] .btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 rgba(11, 16, 32, .45);
}

/* Login bleibt bewusst neutral, auch wenn die letzte Sitzung Super Pepe nutzte. */
html:root[data-theme="pepe"] body.auth-page {
  background: #e9edf3 !important;
}
html:root[data-theme="pepe"] body.auth-page > .topbar,
html:root[data-theme="pepe"] body.auth-page > .filterbar,
html:root[data-theme="pepe"] body.auth-page > .overlay,
html:root[data-theme="pepe"] body.auth-page > .toasts {
  display: none !important;
}
html:root[data-theme="pepe"] body.auth-page > main {
  height: 100% !important;
  background: #e9edf3 !important;
}
html:root[data-theme="pepe"] body.auth-page .login-page {
  background: linear-gradient(135deg, #f8fafc 0%, #e6ebf3 100%) !important;
}
html:root[data-theme="pepe"] body.auth-page .login-page h1,
html:root[data-theme="pepe"] body.auth-page .login-subtitle,
html:root[data-theme="pepe"] body.auth-page .login-form label,
html:root[data-theme="pepe"] body.auth-page .login-language {
  font-family: "Segoe UI", sans-serif !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  letter-spacing: 0 !important;
}
html:root[data-theme="pepe"] body.auth-page .login-form input,
html:root[data-theme="pepe"] body.auth-page .login-language select {
  font-family: "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

html:root[data-theme="pepe"] .account-name {
  color: #ffffff !important;
  text-shadow: 2px 2px 0 #0b1020 !important;
  font-weight: 700;
}
html:root[data-theme="pepe"] .account-box {
  border-left-color: rgba(255,255,255,.65);
}
html:root[data-theme="pepe"] .btn-primary { background: var(--brick); color: #fff; }
html:root[data-theme="pepe"] .btn-primary:hover { background: #e05e18; }
html:root[data-theme="pepe"] .btn-ghost { background: #ffffff; color: #1a1f2e; }
html:root[data-theme="pepe"] .btn-danger { background: #c01810; color: #fff; }

/* ---------- Board-Spalten als Roehren ---------- */

/* Der Kranz oben ist breiter als der Schaft -- genau das macht eine Pepe-Roehre
   erkennbar. Er tritt links und rechts 9px heraus, darum der groessere
   Spaltenabstand: sonst beruehren sich die Kraenze. */
/* padding-top: Pepe ist 50px hoch und steht AUF dem Kranz -- ohne diesen
   Vorlauf ragt er in die Filterleiste und verdeckt deren Bedienelemente. */
/* padding-bottom: 0 -- die Roehren stehen direkt auf dem Ziegelboden, wie im
   Spiel. Mit dem urspruenglichen Abstand von 16px schwebten sie darueber und die
   Huegel dahinter waren nur als unruhiger Streifen zu sehen. */
html:root[data-theme="pepe"] .board { gap: 28px; padding: 58px 16px 0; }

html:root[data-theme="pepe"] .col {
  /* Stopps in Pixeln, nicht Prozent: der Kranz ist 26px breiter als der Schaft,
     bei Prozentwerten liefen Glanz- und Schattenstreifen der beiden auseinander
     und die Roehre sah geknickt aus. Der Kranz verschiebt seine linken Stopps
     um genau die 13px, die er links heraussteht. */
  background: linear-gradient(90deg,
    var(--pipe-dark) 0 7px,
    var(--pipe-light) 7px 30px,
    var(--pipe-mid) 30px calc(100% - 44px),
    var(--pipe-dark) calc(100% - 44px) calc(100% - 14px),
    var(--pipe-black) calc(100% - 14px) 100%);
  border: 4px solid #0b1020;
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(11, 16, 32, .35);
}
html:root[data-theme="pepe"] .col.drag-over {
  border-color: var(--coin);
  box-shadow: 0 0 0 4px var(--coin), 4px 4px 0 rgba(11, 16, 32, .35);
}

html:root[data-theme="pepe"] .col-head {
  margin: -4px -13px 0;
  padding: 12px 18px;
  border: 4px solid #0b1020;
  border-bottom-width: 4px;
  background: linear-gradient(90deg,
    var(--pipe-dark) 0 20px,
    var(--pipe-light) 20px 43px,
    var(--pipe-mid) 43px calc(100% - 44px),
    var(--pipe-dark) calc(100% - 44px) calc(100% - 14px),
    var(--pipe-black) calc(100% - 14px) 100%);
  box-shadow: 4px 4px 0 rgba(11, 16, 32, .35);
  position: relative;
  z-index: 2;
}
/* Der Spaltentitel steckt als nackter Textknoten in .col-head -- ein eigenes
   .col-title gibt es im Markup nicht. Darum wird der Kopf selbst formatiert. */
html:root[data-theme="pepe"] .col-head {
  font-size: 18px;
  color: #ffffff;
  -webkit-text-stroke-width: 3px;
  white-space: nowrap;
  overflow: hidden;
}
html:root[data-theme="pepe"] .col-head .dot {
  width: 12px; height: 12px; border-radius: 0;
  border: 2px solid #0b1020;
}
html:root[data-theme="pepe"] .col-count {
  font-family: var(--pepe-font);
  font-size: 17px;
  color: var(--coin);
  -webkit-text-stroke: 3px #0b1020;
  paint-order: stroke fill;
}

html:root[data-theme="pepe"] .col-body { padding: 12px 10px; gap: 10px; }
html:root[data-theme="pepe"] .col-empty {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 1px 1px 0 rgba(11, 16, 32, .7);
}

/* ---------- Karten als Wolken ---------- */

/* Wolkenform von Board-Karten und Radar-Zeilen.

   Unten gerade, oben eine EINZELNE mittig gesetzte Beulengruppe: gross in der
   Mitte, kleiner daneben, nach aussen keine mehr.

   Vorher lagen die Beulen als `repeat-x` gekacheltes SVG oben UND unten. Zwei
   Probleme: die Karten wirkten unruhig und der Text schwer lesbar, und weil eine
   Kachelreihe fast nie glatt in die Breite passt, endete sie rechts mitten in
   einer Beule -- der abgeschnittene Rand, der im Radar am deutlichsten war.
   `no-repeat center top` kann das nicht passieren.

   Die Basislinie des SVG liegt auf der UNTERkante seines Feldes, und das Feld
   reicht 3px in die Karte hinein. Dadurch deckt die weisse Fuellung unter den
   Boegen die Rahmenlinie genau dort ab, wo eine Beule sitzt -- daneben bleibt sie
   als gerade Oberkante der Wolke stehen. (::before ist ein Kind der Karte und
   wird darum ueber deren Rahmen gemalt.) */
html:root[data-theme="pepe"] .card,
html:root[data-theme="pepe"] .rrow {
  background: #ffffff;
  border: 3px solid #0b1020;
  border-left-width: 7px;
  border-radius: 14px;
  padding: 10px 13px;
  box-shadow: 3px 3px 0 rgba(11, 16, 32, .3);
  position: relative;
  background-clip: padding-box;
}
html:root[data-theme="pepe"] .card::before,
html:root[data-theme="pepe"] .rrow::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  /* Die Basislinie liegt auf der Unterkante des Feldes; -17 + 20 = +3 setzt sie
     3px unter die Oberkante des Innenbereichs, also unter die Rahmenlinie. */
  top: -17px;
  height: 20px;
  pointer-events: none;
  /* Sieben Halbboegen mit Radius 4, 8, 13, 18, 13, 8, 4 -- gross in der Mitte,
     nach aussen auslaufend. Kein `Z`: `fill` schliesst den Pfad zwar zur
     Basislinie, `stroke` zeichnet aber nur die Boegen. Ein geschlossener Pfad
     haette eine schwarze Linie quer unter die Beulen gelegt.
     Fuenf Boegen auf 88px wirkten auf einer 570px breiten Karte wie ein schmaler
     Henkel statt wie eine Wolke. */
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='20'><path d='M2 20 A4 4 0 0 1 10 20 A8 8 0 0 1 26 20 A13 13 0 0 1 52 20 A18 18 0 0 1 88 20 A13 13 0 0 1 114 20 A8 8 0 0 1 130 20 A4 4 0 0 1 138 20' fill='rgb(255,255,255)' stroke='rgb(11,16,32)' stroke-width='3'/></svg>")
      no-repeat center top;
}

html:root[data-theme="pepe"] .card:hover,
html:root[data-theme="pepe"] .rrow:hover {
  box-shadow: 3px 3px 0 rgba(11, 16, 32, .3), 0 0 0 3px var(--coin);
}

/* Nach unten ragt nichts mehr heraus, nach oben nur die 17px der Beulengruppe --
   der Abstand muss also nur noch deren Hoehe abdecken (vorher 24px fuer Beulen
   auf beiden Seiten). */
html:root[data-theme="pepe"] .rrow { margin-bottom: 20px; padding: 11px 16px; }
html:root[data-theme="pepe"] .radar-group h2 { margin-bottom: 20px; }
html:root[data-theme="pepe"] .radar-group { margin-bottom: 26px; }
html:root[data-theme="pepe"] .card-title {
  font-weight: 700;
  color: #14192a;
}
html:root[data-theme="pepe"] .chip {
  border: 2px solid #0b1020;
  border-radius: 0;
  font-weight: 600;
}

/* ---------- Checkboxen als Fragezeichen-Bloecke ---------- */

/* ::before/::after gehen an <input> nicht -- das Fragezeichen muss deshalb als
   Hintergrundbild kommen. `?` ist im Data-URI als %3F kodiert. */
html:root[data-theme="pepe"] input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  flex: none;
  margin: 0 3px 0 0;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  vertical-align: -5px;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><rect width='16' height='16' fill='rgb(11,16,32)'/><rect x='2' y='2' width='12' height='12' fill='rgb(150,86,30)'/><rect x='2' y='2' width='12' height='2' fill='rgb(196,132,64)'/><g fill='rgb(80,40,8)'><rect x='3' y='3' width='2' height='2'/><rect x='11' y='3' width='2' height='2'/><rect x='3' y='11' width='2' height='2'/><rect x='11' y='11' width='2' height='2'/></g></svg>")
      center / 100% 100% no-repeat;
  transition: transform .07s;
}
html:root[data-theme="pepe"] input[type="checkbox"]:checked {
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><rect width='16' height='16' fill='rgb(11,16,32)'/><rect x='2' y='2' width='12' height='12' fill='rgb(231,144,32)'/><rect x='2' y='2' width='12' height='2' fill='rgb(252,204,104)'/><g fill='rgb(90,42,4)'><rect x='3' y='3' width='2' height='2'/><rect x='11' y='3' width='2' height='2'/><rect x='3' y='11' width='2' height='2'/><rect x='11' y='11' width='2' height='2'/><rect x='6' y='4' width='4' height='2'/><rect x='5' y='5' width='2' height='2'/><rect x='9' y='5' width='2' height='2'/><rect x='8' y='7' width='2' height='2'/><rect x='7' y='8' width='2' height='2'/><rect x='7' y='11' width='2' height='2'/></g></svg>");
}
html:root[data-theme="pepe"] input[type="checkbox"]:active { transform: scale(.9); }
html:root[data-theme="pepe"] input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--coin);
  outline-offset: 2px;
}

/* ---------- Flaechen, Tabellen, Sheet ---------- */

html:root[data-theme="pepe"] .panel,
html:root[data-theme="pepe"] table.grid {
  border: 4px solid #0b1020;
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(11, 16, 32, .4);
}
/* Weiss auf Ziegelrot ohne Kontur war schlecht lesbar -- beides sind mittlere
   Helligkeiten. Deshalb dieselbe Behandlung wie bei den Hauptreitern: weisse
   Fuellung mit schwarzer Kontur dahinter (`paint-order`), dazu ein Grad groesser.
   Gilt fuer alle Flaechen dieses Themes, auf denen heller Text auf Ziegel oder
   Rot steht. */
html:root[data-theme="pepe"] table.grid th {
  background: var(--brick);
  color: #ffffff;
  font-family: var(--pepe-font);
  font-size: 14px;
  letter-spacing: 1.2px;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #0b1020;
  border-bottom: 3px solid #0b1020;
}
/* Filterfelder liegen innerhalb der Tabellenkoepfe. Ohne expliziten Reset
   erben sie Impact, Buchstabenabstand und die 3px-Kontur vom <th>; eingegebener
   Text wird dadurch trotz korrekter Farben fast unlesbar. */
html:root[data-theme="pepe"] table.grid .th-filter {
  font-family: "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  paint-order: normal;
  -webkit-text-stroke: 0;
  text-shadow: none;
  background: #ffffff;
  color: #1a1f2e;
}
html:root[data-theme="pepe"] table.grid .th-filter::placeholder {
  color: #6b7688;
  opacity: 1;
}
/* Wie die Textfilter liegt auch die Statusauswahl im <th> und darf dessen
   Impact-Schrift und Textkontur nicht erben. */
html:root[data-theme="pepe"] table.grid .patch-status-filter summary {
  font-family: "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  paint-order: normal;
  -webkit-text-stroke: 0;
  text-shadow: none;
  background: #ffffff;
  color: #1a1f2e;
}
/* Knoepfe mit farbigem Grund -- die hellen Ghost-Knoepfe bleiben ohne Kontur,
   dort waere sie um dunklen Text herum und wuerde ihn zumatschen. */
html:root[data-theme="pepe"] .btn-primary,
html:root[data-theme="pepe"] .btn-danger {
  color: #ffffff;
  paint-order: stroke fill;
  -webkit-text-stroke: 2.5px #0b1020;
}
/* Der Kopf eines Klapp-Abschnitts sah als blassblauer Streifen mit Haarlinie
   wie ein Ueberrest aus, waehrend daneben alles 4px schwarze Kontur hat.
   Jetzt ein Steinblock -- bewusst grau und nicht ziegelrot, denn direkt darunter
   folgt die Tabellenkopfzeile in Ziegel; zwei orange Baender waeren Matsch. */
html:root[data-theme="pepe"] .sec-toggle {
  background: linear-gradient(#a9b6cc 0 5px, #7d8ba6 5px 100%);
  border: 4px solid #0b1020;
  border-radius: 0;
  color: #ffffff;
  font-size: 17px;
  padding: 9px 13px;
  box-shadow: 4px 4px 0 rgba(11, 16, 32, .35);
}
html:root[data-theme="pepe"] .sec-toggle:hover {
  background: linear-gradient(#bfcbdf 0 5px, #8c9ab6 5px 100%);
  border-color: #0b1020;
}
/* Aufgeklappt traegt der Rumpf den Schatten -- sonst laege eine Schattenkante
   mitten zwischen Kopf und Rumpf. */
html:root[data-theme="pepe"] .sec-toggle.open { box-shadow: none; }
html:root[data-theme="pepe"] .sec-chevron {
  color: var(--coin);
  -webkit-text-stroke: 0;
  font-size: 12px;
}
html:root[data-theme="pepe"] .sec-toggle.open .sec-chevron { color: var(--coin); }
html:root[data-theme="pepe"] .sec-body {
  border: 4px solid #0b1020;
  border-top: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: 4px 4px 0 rgba(11, 16, 32, .35);
}

/* Der Unterreiter-Balken der Stammdaten hatte dasselbe Problem wie der
   Klapp-Header: blasse Flaeche mit Haarlinie direkt unter einem Ziegelband.
   Jetzt ein dunkles Band mit Logo-Schrift; der aktive Reiter tragt Muenzgelb. */
html:root[data-theme="pepe"] .subtabs {
  background: rgba(11, 16, 32, .28);
  border-bottom: 3px solid #0b1020;
  padding: 10px 20px 8px;
  gap: 6px;
}
html:root[data-theme="pepe"] .subtab {
  font-family: var(--pepe-font);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 15px;
  color: #ffffff;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #0b1020;
  border-bottom: 0;
}
html:root[data-theme="pepe"] .subtab:hover { color: var(--coin); }
html:root[data-theme="pepe"] .subtab.active {
  color: var(--coin);
  border-bottom: 0;
  text-shadow: 0 3px 0 rgba(11, 16, 32, .5);
}
html:root[data-theme="pepe"] .subtab-n {
  border: 2px solid #0b1020;
  border-radius: 0;
  background: #ffffff;
  color: #1a1f2e;
  font-family: "Segoe UI", -apple-system, system-ui, sans-serif;
  -webkit-text-stroke: 0;
  letter-spacing: 0;
}
html:root[data-theme="pepe"] .subtab.active .subtab-n {
  background: var(--coin);
  border-color: #0b1020;
  color: #1a1f2e;
}

html:root[data-theme="pepe"] .overlay { background: rgba(11, 16, 32, .55); }

/* Das Task-Sheet (Neuer Task UND Bearbeiten -- beide teilen sich #sheet) als
   dieselbe Wolke wie die Karten, nicht als Ziegelblock. Zwei Dinge muessen dafuer
   anders sein als bei einer Karte:

   1. Die Wolkenbeule braucht Platz OBERHALB der Flaeche. Bei Karten ist der
      da, weil sie im normalen Textfluss stehen; das Sheet dagegen haengt
      `position: fixed; inset: 0` prall am Bildschirmrand -- ohne Abstand nach
      oben waere die Beule abgeschnitten. Darum ein Rand statt `height: 100%`,
      das Sheet schwebt jetzt wie eine große Wolke ueber dem abgedunkelten
      Himmel.
   2. `.sheet-head` und `.sheet-foot` sind eigene Kindflaechen mit eigenen
      rechten Winkeln -- ohne Weiteres wuerden sie ueber die runden Ecken der
      Wolke hinausstehen. Sie bekommen darum selbst eine Rundung, knapp innerhalb
      der aeusseren (14 - 3px Rahmen = 11px), statt dass `.sheet` seinerseits
      `overflow: hidden` bekommt -- das wuerde die Beule oberhalb der Flaeche
      gleich mit abschneiden. */
html:root[data-theme="pepe"] .sheet {
  margin: 22px 18px 18px 0;
  height: calc(100% - 40px);
  background: #ffffff;
  border: 3px solid #0b1020;
  border-radius: 14px;
  box-shadow: 3px 3px 0 rgba(11, 16, 32, .3);
  position: relative;
}
html:root[data-theme="pepe"] .sheet::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -17px;
  height: 20px;
  pointer-events: none;
  /* Dieselbe Beulenkontur wie bei .card/.rrow -- absichtlich derselbe Data-URI,
     damit Sheet und Karten wirklich dieselbe Wolke sind, nicht nur aehnliche. */
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='20'><path d='M2 20 A4 4 0 0 1 10 20 A8 8 0 0 1 26 20 A13 13 0 0 1 52 20 A18 18 0 0 1 88 20 A13 13 0 0 1 114 20 A8 8 0 0 1 130 20 A4 4 0 0 1 138 20' fill='rgb(255,255,255)' stroke='rgb(11,16,32)' stroke-width='3'/></svg>")
      no-repeat center top;
}
html:root[data-theme="pepe"] .sheet-head {
  background: #ffffff;
  border-bottom: 3px solid #0b1020;
  border-radius: 11px 11px 0 0;
}
html:root[data-theme="pepe"] .sheet-foot {
  background: #ffffff;
  border-top: 3px solid #0b1020;
  border-radius: 0 0 11px 11px;
}
/* Reduzierte Bewegung: das Sheet faehrt sonst per `slidein`-Keyframe von rechts
   ein (siehe style.css) -- das ist Sache des Grundthemas und bleibt unberuehrt,
   hier geht es nur um die neue Position/Groesse, die aendert sich bei reduzierter
   Bewegung nicht. */
html:root[data-theme="pepe"] #sheetTitle {
  font-family: var(--pepe-font);
  font-weight: 400;
  letter-spacing: .4px;
}

/* ---------- Boden am Fussende ---------- */

html:root[data-theme="pepe"] .pepe-ground {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--ground-h);
  z-index: 5;
  pointer-events: none;
  border-top: 4px solid #0b1020;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'><rect width='32' height='32' fill='rgb(143,52,6)'/><g fill='rgb(200,76,12)'><rect x='1' y='1' width='14' height='14'/><rect x='17' y='1' width='14' height='14'/><rect x='-7' y='17' width='14' height='14'/><rect x='9' y='17' width='14' height='14'/><rect x='25' y='17' width='14' height='14'/></g><g fill='rgb(240,160,112)'><rect x='1' y='1' width='14' height='2'/><rect x='17' y='1' width='14' height='2'/><rect x='-7' y='17' width='14' height='2'/><rect x='9' y='17' width='14' height='2'/><rect x='25' y='17' width='14' height='2'/></g></svg>");
  background-size: 32px 32px;
}

/* ---------- Panzer ---------- */

/* 40x38 entspricht dem Seitenverhaeltnis des Sprites (16x15). Bei einer
   quadratischen Box liesse `preserveAspectRatio` oben und unten einen Rand,
   und der Panzer saesse nicht mehr auf dem Boden auf. */
html:root[data-theme="pepe"] .pepe-shell {
  position: fixed;
  bottom: calc(var(--ground-h) - 8px);
  left: 0;
  width: 40px; height: 38px;
  z-index: 6;
  pointer-events: none;
  /* will-change: der Panzer bewegt und dreht sich in jedem Frame */
  will-change: transform;
}
html:root[data-theme="pepe"] .pepe-shell svg { display: block; width: 100%; height: 100%; }

/* ---------- Pepe auf der Roehre ---------- */

/* Beim Verschwinden faehrt die Figur um ihre eigene Hoehe nach unten und wird
   dadurch vom unteren Rand abgeschnitten -- so sieht es aus, als steige sie in
   das Rohr. Ohne overflow: hidden wuerde sie einfach nach unten wandern.

   Der Ausschnitt ist 14px HOEHER als die Figur, und die Figur sitzt am unteren
   Rand (siehe `> svg`). Diese 14px sind Kopffreiheit fuer den Sprung: er hebt
   die Figur um 11px, und ein Ausschnitt in Figurhoehe hat ihr dabei die Muetze
   abgeschnitten. Unten kappt es weiter genau an der Kante -- translateY(100%)
   sind 50px, also die Figurhoehe, damit bleibt sie im Rohr vollstaendig weg.

   PEPE_HOEHE + KOPFFREIHEIT muessen zu SLOT_H in pepe.js passen: daraus
   berechnet setzePosition(), wo die Fuesse auf dem Roehrenkranz stehen. */
html:root[data-theme="pepe"] .pepe-slot {
  position: fixed;
  z-index: 7;
  width: 38px; height: 64px;   /* 50 Figur + 14 Kopffreiheit */
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: left .22s cubic-bezier(.34, 1.3, .64, 1), top .22s, opacity .12s;
}
html:root[data-theme="pepe"] .pepe-slot.on { opacity: 1; }
/* Umsetzen auf eine andere Roehre, waehrend Pepe im Rohr steckt: ohne
   Uebergang, sonst driftet er beim Auftauchen seitlich.

   Das `> svg` ist der entscheidende Teil und hat gefehlt: die Figur hat ihren
   EIGENEN Uebergang auf `transform`. Ohne Abschaltung ist sie beim ersten
   Erscheinen von translateY(0) nach 100% GEFAHREN -- man sah Pepe oben auf der
   Roehre aufpoppen, absinken und wieder hochkommen, statt nur hochzukommen. */
html:root[data-theme="pepe"] .pepe-slot.no-slide,
html:root[data-theme="pepe"] .pepe-slot.no-slide > svg { transition: none; }

/* Am UNTEREN Rand des Ausschnitts verankert, nicht am oberen: die Kopffreiheit
   soll oben liegen, und die Fuesse muessen an der Unterkante bleiben -- an ihr
   rechnet setzePosition() die Hoehe ueber dem Roehrenkranz aus. */
html:root[data-theme="pepe"] .pepe-slot > svg {
  display: block;
  position: absolute;
  left: 0; bottom: 0;
  width: 38px; height: 50px;
  transition: transform .28s cubic-bezier(.4, 0, .5, 1);
  filter: drop-shadow(2px 2px 0 rgba(11, 16, 32, .3));
}
/* im Rohr */
html:root[data-theme="pepe"] .pepe-slot.in-pipe > svg { transform: translateY(100%); }
/* Sprung, wenn er auf einer neuen Roehre landet */
html:root[data-theme="pepe"] .pepe-slot.hop > svg { animation: pepe-hop .3s ease-out; }
@keyframes pepe-hop {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(-11px); }
  100% { transform: translateY(0); }
}

/* ---------- Muenze ---------- */

/* --sprung wird je Muenze aus dem Platz oberhalb der Checkbox gesetzt. Fest
   verdrahtete 52px liessen die Muenze bei den Checkboxen in der Filterleiste
   oben aus dem Bild fliegen (Scheitelpunkt lag bei top: -7px). */
html:root[data-theme="pepe"] .pepe-coin {
  --sprung: 52px;
  position: fixed;
  width: 20px; height: 22px;
  z-index: 9999;
  pointer-events: none;
  animation: pepe-coin .62s ease-out forwards;
}
html:root[data-theme="pepe"] .pepe-coin svg { display: block; width: 100%; height: 100%; }
/* scaleX steuert die Drehung: bei .2 steht die Muenze hochkant, wie im Spiel. */
@keyframes pepe-coin {
  0%   { transform: translateY(0)                            scaleX(1);  opacity: 1; }
  25%  { transform: translateY(calc(var(--sprung) * -0.66))  scaleX(.2); opacity: 1; }
  50%  { transform: translateY(calc(var(--sprung) * -1))     scaleX(1);  opacity: 1; }
  75%  { transform: translateY(calc(var(--sprung) * -0.75))  scaleX(.3); opacity: .9; }
  100% { transform: translateY(calc(var(--sprung) * -0.12))  scaleX(1);  opacity: 0; }
}

/* ---------- Belohnung: Pilz, Verpuffen, Zaehler ---------- */

/* z-index 6: ueber dem Ziegelboden (5), unter Pepe (7). Wenn sich beide
   beruehren, soll Pepe vorne stehen -- er sammelt ein, nicht umgekehrt. */
html:root[data-theme="pepe"] .pepe-pilz {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 rgba(11, 16, 32, .3));
}
html:root[data-theme="pepe"] .pepe-pilz svg { display: block; width: 100%; height: 100%; }

html:root[data-theme="pepe"] .pepe-puff {
  position: fixed;
  width: 28px; height: 28px;
  z-index: 8;
  pointer-events: none;
  animation: pepe-puff .5s ease-out forwards;
}
html:root[data-theme="pepe"] .pepe-puff svg { display: block; width: 100%; height: 100%; }
@keyframes pepe-puff {
  0%   { transform: scale(.35) rotate(0deg);    opacity: 1; }
  45%  { transform: scale(1.15) rotate(35deg);  opacity: .95; }
  100% { transform: scale(1.9) rotate(70deg);   opacity: 0; }
}

/* Pepe leuchtet beim Einsammeln. Die Animation sitzt am AUSSCHNITT, nicht an
   der Figur: an der Figur laeuft schon `pepe-hop`, und zwei Regeln mit
   `animation` auf demselben Element wuerden sich gegenseitig ersetzen -- es
   gaebe entweder Sprung oder Leuchten, nie beides. */
html:root[data-theme="pepe"] .pepe-slot.leuchtet { animation: pepe-glanz .72s ease-out; }
@keyframes pepe-glanz {
  0%   { filter: none; }
  15%  { filter: brightness(1.9) drop-shadow(0 0 9px rgba(255, 232, 120, .95)); }
  50%  { filter: brightness(1.35) drop-shadow(0 0 14px rgba(255, 232, 120, .7)); }
  100% { filter: none; }
}

/* Punktestand. bottom rechnet mit der Bodenhoehe, damit der Zaehler ueber dem
   Ziegelboden sitzt und die Panzer darunter durchrollen koennen. */
html:root[data-theme="pepe"] .pepe-zaehler {
  position: fixed;
  right: 16px;
  bottom: calc(var(--ground-h) + 12px);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 8px;
  border: 3px solid #0b1020;
  border-radius: 8px;
  background: rgba(11, 16, 32, .68);   /* gleiche Transparenz wie .pepe-highscore drunter */
  /* Klickbar -- die Anzeige startet das Spiel. Alle anderen Theme-Aufsaetze
     (Pepe, Pilz, Panzer, Boden) bleiben bei pointer-events: none, damit sie
     nie einen Klick schlucken. Diese hier ist die Ausnahme mit Absicht. */
  appearance: none;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
html:root[data-theme="pepe"] .pepe-zaehler:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 0 rgba(11, 16, 32, .5);
}
html:root[data-theme="pepe"] .pepe-zaehler:focus-visible {
  outline: 3px solid rgb(255, 216, 0);
  outline-offset: 2px;
}
html:root[data-theme="pepe"] .pepe-zaehler svg { display: block; width: 24px; height: 22px; }
html:root[data-theme="pepe"] .pepe-zaehler span {
  font-family: var(--pepe-font);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .5px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(11, 16, 32, .85);
}
html:root[data-theme="pepe"] .pepe-zaehler.bump { animation: pepe-bump .42s ease-out; }
@keyframes pepe-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* Rekordanzeige direkt unter dem Pilz-Zaehler, gleiche rechte Kante. Ein
   Knopf: Klick oeffnet die Bestenliste. */
html:root[data-theme="pepe"] .pepe-highscore {
  position: fixed;
  right: 16px;
  bottom: calc(var(--ground-h) - 20px);
  z-index: 7;
  appearance: none;
  cursor: pointer;
  padding: 3px 10px;
  border: 2px solid #0b1020;
  border-radius: 6px;
  background: rgba(11, 16, 32, .68);
  font-family: var(--pepe-font);
  font-size: 13px;
  letter-spacing: .5px;
  color: #ffd83d;
  text-shadow: 1px 1px 0 rgba(11, 16, 32, .85);
}
html:root[data-theme="pepe"] .pepe-highscore:hover { transform: translateY(-1px); }
html:root[data-theme="pepe"] .pepe-highscore:focus-visible {
  outline: 3px solid rgb(255, 216, 0);
  outline-offset: 2px;
}

html:root[data-theme="pepe"] .pepe-highscore-tabelle {
  position: fixed;
  right: 16px;
  bottom: calc(var(--ground-h) + 64px);
  z-index: 30;
  min-width: 240px;
  max-width: min(360px, calc(100vw - 32px));
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px 14px 12px;
  border: 4px solid #0b1020;
  border-radius: 0;
  background: rgba(11, 16, 32, .9);
  box-shadow: 4px 4px 0 rgba(11, 16, 32, .5);
  color: #fff;
}
html:root[data-theme="pepe"] .pepe-highscore-tabelle h3 {
  margin: 0 0 8px;
  font-family: var(--pepe-font);
  font-size: 16px;
  letter-spacing: 1px;
  color: #ffd83d;
  text-align: center;
}
html:root[data-theme="pepe"] .pepe-highscore-tabelle ol {
  margin: 0;
  padding: 0 0 0 26px;
}
html:root[data-theme="pepe"] .pepe-highscore-tabelle li {
  padding: 2px 0;
  font-size: 14px;
}
html:root[data-theme="pepe"] .pepe-highscore-tabelle li > .name,
html:root[data-theme="pepe"] .pepe-highscore-tabelle li > .punkte {
  display: inline-block;
  vertical-align: top;
}
html:root[data-theme="pepe"] .pepe-highscore-tabelle li > .name {
  width: calc(100% - 90px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:root[data-theme="pepe"] .pepe-highscore-tabelle li > .punkte {
  width: 90px;
  text-align: right;
  font-family: var(--pepe-font);
  color: #ffd83d;
}
html:root[data-theme="pepe"] .pepe-highscore-tabelle li.ich { font-weight: 700; color: #8fe37a; }
html:root[data-theme="pepe"] .pepe-highscore-tabelle li.leer { list-style: none; margin-left: -26px; opacity: .8; }

/* Wer Bewegung reduziert haben will, bekommt das Theme ohne Zappeln. */
@media (prefers-reduced-motion: reduce) {
  html:root[data-theme="pepe"] .pepe-slot,
  html:root[data-theme="pepe"] .pepe-slot > svg,
  html:root[data-theme="pepe"] .pepe-coin,
  html:root[data-theme="pepe"] .pepe-puff,
  html:root[data-theme="pepe"] .pepe-zaehler { transition: none; animation: none; }
}


/* ---------- PC Team Status ---------- */

html:root[data-theme="pepe"] .team-card {
  border: 4px solid #0b1020;
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(11, 16, 32, .4);
}
/* Die eigene Karte traegt Muenzgelb statt der Akzentfarbe. */
html:root[data-theme="pepe"] .team-card.team-self {
  border-color: #0b1020;
  box-shadow: 4px 4px 0 rgba(11, 16, 32, .4), inset 0 0 0 3px var(--coin);
}
html:root[data-theme="pepe"] .team-name {
  font-size: 17px;
  color: #1a1f2e;
  /* Keine Kontur: dunkler Text auf weisser Karte, eine schwarze Kontur wuerde
     ihn nur zumatschen -- dieselbe Regel wie bei den Ghost-Knoepfen. */
  -webkit-text-stroke-width: 0;
  letter-spacing: .6px;
}
html:root[data-theme="pepe"] .team-badge {
  background: var(--coin);
  color: #1a1f2e;
  border: 2px solid #0b1020;
  border-radius: 0;
  font-weight: 700;
}