/**
 * Reef Tycoon - Spielkomponenten (D61).
 *
 * Enthaelt die vier Bausteine, die die Tabellen des alten Dashboards ersetzen:
 *   1. .diorama      - Buehne fuer den 2.5D-Beckenblick (PixiJS zeichnet hinein)
 *   2. .radial       - Kreismenue, das beim Antippen einer Koralle aufklappt
 *   3. .gauge        - analoges Rundinstrument mit Warnleuchte statt Zahlenliste
 *   4. .karte        - FUT-Sammelkarte mit Neigung, Seltenheits-Leuchten, Trend
 *
 * Bewegung ist hier Bedeutung, keine Deko: die Nadel zeigt Abstand zum Optimum,
 * das Blinken der Leuchte zeigt Dringlichkeit, das Leuchten der Karte zeigt
 * Seltenheit. Was nichts bedeutet, wackelt auch nicht.
 */

/* ==========================================================================
   1. Diorama - die Beckenbuehne
   ========================================================================== */

.diorama {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--edge);
  box-shadow: var(--lift-2), inset 0 0 40px rgba(0, 0, 0, 0.5);
  line-height: 0;
  background: linear-gradient(#1a5b86, #08243a);
  touch-action: manipulation;
  aspect-ratio: 4 / 3;
}
.diorama canvas { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }

/* Glasscheibe: Kantenlicht plus schraege Spiegelung. Macht aus dem Bild ein
   Objekt, in das man hineinschaut - der wichtigste Trick fuer den Diorama-Look. */
.diorama::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  /* Keine farbige Flaeche ueber dem Canvas: Die fruehere Vignette war oben
     dunkel und unten transparent. Dadurch wurde ein identisches Korallenmotiv
     am Riffdach messbar nur halb so hell wie im Sand. */
  background: none;
  box-shadow: inset 0 0 0 2px rgba(190, 232, 255, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.3);
  border-radius: inherit;
}

/* Hinweis-Chip auf der Scheibe (z. B. "Tippe eine Koralle an"). */
.diorama .tipp {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  z-index: 3;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(6, 21, 32, 0.72);
  border: 1px solid var(--edge-soft);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--foam-dim);
  line-height: 1.3;
  backdrop-filter: blur(6px);
  animation: tipp-atmen 3.2s ease-in-out infinite;
}
@keyframes tipp-atmen { 50% { opacity: 0.55; } }

/* ==========================================================================
   2. Radialmenue - klappt beim Antippen einer Koralle aus
   ========================================================================== */

.radial-bg {
  position: fixed; inset: 0; z-index: 50;
  /* Faengt den Tap ausserhalb des Menues ab, veraendert die Beckenszene aber
     nicht: alle nicht gewaehlten Korallen bleiben farbig und voll sichtbar. */
  background: transparent;
  backdrop-filter: none;
  opacity: 0;
  transition: opacity 180ms;
}
.radial-bg.auf { opacity: 1; }

.radial {
  position: fixed;
  z-index: 51;
  width: 0; height: 0;
  pointer-events: none;
}

/* Nabe: zeigt, worauf sich das Menue bezieht. */
.radial .nabe {
  position: absolute;
  left: -34px; top: -34px;
  width: 68px; height: 68px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--shelf-2), var(--deep));
  border: 2px solid var(--edge);
  box-shadow: var(--lift-2), var(--gloss);
  pointer-events: auto;
  transform: scale(0.3);
  opacity: 0;
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 160ms;
}
.radial .nabe .n-name { font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--foam-dim); }
.radial .nabe .n-wert { font-size: 15px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.radial.auf .nabe { transform: scale(1); opacity: 1; }

/* Speichen: jede Aktion ein rundes, greifbares Plaettchen. */
.radial .speiche {
  position: absolute;
  left: calc(-1 * var(--tap) / 2);
  top: calc(-1 * var(--tap) / 2);
  width: var(--tap); height: var(--tap);
  border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--edge);
  background: linear-gradient(180deg, var(--shelf-2), var(--shelf));
  box-shadow: var(--lift-2), var(--gloss);
  color: var(--foam);
  pointer-events: auto;
  cursor: pointer;
  padding: 0;
  /* Startet in der Mitte und faehrt beim Oeffnen auf seinen Winkel heraus. */
  transform: translate(0, 0) scale(0.25);
  opacity: 0;
  transition:
    transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 180ms ease-out;
  transition-delay: var(--verzug, 0ms);
}
.radial.auf .speiche {
  transform: translate(var(--dx), var(--dy)) scale(1);
  opacity: 1;
}
.radial .speiche:active { filter: brightness(1.3); transform: translate(var(--dx), var(--dy)) scale(0.9); }
.radial .speiche svg { width: 22px; height: 22px; }
.radial .speiche[disabled] { opacity: 0.4; filter: grayscale(0.7); pointer-events: none; }

/* Beschriftung sitzt unter der Speiche, damit der Daumen sie nicht verdeckt. */
.radial .speiche .lbl {
  position: absolute;
  top: calc(100% + 4px);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--foam);
  text-shadow: 0 1px 4px #000, 0 0 8px #000;
}
.radial .speiche.frag { border-color: var(--kelp); }
.radial .speiche.sell { border-color: var(--gold); }
.radial .speiche.care { border-color: var(--cyan); }
.radial .speiche.gem  { border-color: var(--gem); }
.radial .speiche.goal { border-color: var(--gold); }

/* ==========================================================================
   3. Rundinstrumente (Labor) - ersetzen die Wasserwerte-Tabelle
   ========================================================================== */

.gauge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.gauge {
  position: relative;
  padding: 10px 8px 9px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(25, 68, 95, 0.5), rgba(9, 33, 48, 0.6));
  border: 1px solid var(--edge-soft);
  box-shadow: var(--lift-1), var(--gloss);
  text-align: center;
}
.gauge svg { width: 100%; height: auto; display: block; }

/* Die Nadel laeuft weich nach - sie ist ein Messwerk, kein Sprungwert. */
.gauge .nadel {
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 50px 50px;
}
.gauge .lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--foam-faint); margin-top: 2px; }
.gauge .wert { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.gauge .einheit { font-size: 9.5px; font-weight: 700; color: var(--foam-faint); margin-left: 2px; }

/* Warnleuchte: eine echte LED mit Fassung, Glaskuppel und Streulicht. */
.led {
  position: absolute;
  top: 9px; right: 9px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #0a1a26;
  border: 1.5px solid rgba(0, 0, 0, 0.65);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}
.led::after {
  content: "";
  position: absolute; inset: 1px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), var(--led-farbe) 65%);
  box-shadow: 0 0 8px var(--led-farbe), 0 0 16px var(--led-farbe);
}
.led.gruen { --led-farbe: var(--kelp); }
.led.gelb  { --led-farbe: var(--amber); }
.led.rot   { --led-farbe: var(--alarm); }
/* Nur Rot blinkt. Wenn alles blinkt, blinkt nichts. */
.led.rot::after { animation: led-blink 900ms steps(1, end) infinite; }
@keyframes led-blink { 50% { opacity: 0.25; box-shadow: none; } }

/* Bandanzeige unter dem Instrument: wo liegt der Wert in Toleranz/Optimum? */
.gauge .band {
  position: relative;
  height: 5px;
  border-radius: 999px;
  margin-top: 7px;
  background: rgba(255, 77, 94, 0.35);
  overflow: hidden;
}
.gauge .band .tol { position: absolute; top: 0; bottom: 0; background: rgba(255, 178, 36, 0.55); }
.gauge .band .opt { position: absolute; top: 0; bottom: 0; background: var(--kelp); }
.gauge .band .ist {
  position: absolute; top: -2px; bottom: -2px; width: 2.5px;
  background: #fff; border-radius: 2px;
  box-shadow: 0 0 5px #000;
  transition: left 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gauge .opt-werte {
  margin-top: 4px;
  min-height: 11px;
  color: var(--kelp);
  font-size: 9px;
  line-height: 1.15;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   4. FUT-Sammelkarte
   ========================================================================== */

.karten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 12px;
}
@media (max-width: 380px) {
  .karten-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
}

/* Die Buehne haelt die Perspektive - ohne sie waere die Neigung eine flache Scherung. */
.karten-buehne { perspective: 1000px; }

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 268px;
  padding: 11px 12px 12px;
  border-radius: 16px;
  overflow: hidden;
  transform-style: preserve-3d;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--lift-2);
  /* --rx/--ry setzt tilt.js beim Ziehen; ohne Eingabe bleibt die Karte flach. */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.karte.greift { transition: transform 80ms linear; }
.karte[data-art] { cursor: pointer; }
.zielwerte { list-style: none; margin: 12px 0 0; padding: 0; }
.zielwerte li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08); }

/* Metallgrund je Seltenheitsstufe. */
.karte::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.karte > * { position: relative; z-index: 1; }
.karte.bronze::before { background: linear-gradient(150deg, #c67d45, #7a4a28 55%, #4a2c17); }
.karte.silver::before { background: linear-gradient(150deg, #d2dde8, #8a9aab 55%, #55636f); }
.karte.gold::before   { background: linear-gradient(150deg, #ffe38f, #e6b23e 52%, #a5741c); }
.karte.chase::before  {
  background: linear-gradient(135deg, #33c8f0, #7a5cff 38%, #e46bd8 62%, #ffd166);
  background-size: 220% 220%;
  animation: holo 6s ease-in-out infinite;
}
@keyframes holo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.karte.bronze, .karte.silver { color: #14202c; }
.karte.gold { color: #241803; }
.karte.chase { color: #0b1622; }

/* Seltenheits-Leuchten: der Rand pulst, je edler desto deutlicher.
   Bronze bekommt bewusst gar nichts - sonst ist "leuchtet" kein Signal mehr. */
.karte.silver { animation: puls-silber 4.5s ease-in-out infinite; }
.karte.gold   { animation: puls-gold 3.6s ease-in-out infinite; }
.karte.chase  { animation: puls-chase 2.8s ease-in-out infinite; }
@keyframes puls-silber {
  0%, 100% { box-shadow: var(--lift-2), 0 0 0 rgba(210, 221, 232, 0); }
  50%      { box-shadow: var(--lift-2), 0 0 14px rgba(210, 221, 232, 0.45); }
}
@keyframes puls-gold {
  0%, 100% { box-shadow: var(--lift-2), 0 0 0 rgba(255, 209, 102, 0); }
  50%      { box-shadow: var(--lift-2), 0 0 20px rgba(255, 209, 102, 0.6); }
}
@keyframes puls-chase {
  0%, 100% { box-shadow: var(--lift-2), 0 0 12px rgba(122, 92, 255, 0.5); }
  50%      { box-shadow: var(--lift-2), 0 0 26px rgba(228, 107, 216, 0.85); }
}

/* Glanzstreifen, der der Neigung folgt (tilt.js setzt --gx/--gy).
   Das ist der Effekt, der die Karte physisch wirken laesst. */
.karte .glanz {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 0%),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.08) 32%,
    transparent 62%
  );
  opacity: 0;
  transition: opacity 260ms;
  mix-blend-mode: soft-light;
}
.karte.greift .glanz { opacity: 1; }

/* Chase-Karten bekommen zusaetzlich einen wandernden Regenbogenschimmer. */
.karte.chase .glanz {
  background:
    radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.55), transparent 55%),
    repeating-linear-gradient(105deg,
      rgba(255, 0, 128, 0.14) 0 10px, rgba(0, 200, 255, 0.14) 10px 20px, rgba(255, 220, 0, 0.14) 20px 30px);
  opacity: 0.4;
}
.karte.chase.greift .glanz { opacity: 1; }

/* Kopf: Wertung gross links, Typ/Pflege rechts daneben. */
.karte .k-top { display: flex; align-items: flex-start; gap: 7px; }
.karte .k-ovr { font-size: 32px; font-weight: 900; line-height: 0.85; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
/* Drei Zeilen seit D108: Typ, Untergruppe, Pflegestufe. `min-width: 0` plus
   nowrap/ellipsis sind das Sicherheitsnetz - ein Test haelt die Gruppen kurz,
   aber eine neu eingepflegte Art soll das Motiv nicht nach unten schieben,
   wenn jemand den Test uebergeht. */
.karte .k-meta {
  display: flex; flex-direction: column; min-width: 0;
  font-size: 10px; font-weight: 900; letter-spacing: 0.06em;
  text-transform: uppercase; margin-top: 1px;
}
.karte .k-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.karte .k-meta .gruppe { opacity: 0.85; font-weight: 800; }
.karte .k-meta .pflege { opacity: 0.7; font-weight: 800; }

/* Die artspezifischen Zeichnungen tragen Binnendetail (Fransen, Rillen,
   Wachstumsspitzen) - unter ~80 px fällt das zu, dann sehen alle Karten
   gleich aus. Deshalb bekommt das Motiv den Platz. */
.karte .k-motiv { height: 84px; margin: 4px 0 2px; display: flex; align-items: center; justify-content: center; }
.karte .k-motiv svg { height: 84px; width: 84px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)); }
@media (max-width: 420px) {
  .karte .k-motiv, .karte .k-motiv svg { height: 74px; }
  .karte .k-motiv svg { width: 74px; }
}

.karte .k-name {
  font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em;
  text-align: center; line-height: 1.08; padding: 4px 0; min-height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
}

.karte .k-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; margin-top: 7px; font-size: 11px; font-weight: 800; }
/* Der gap trennt Bezeichnung und Wert auch dann, wenn die Spalte eng wird -
   ohne ihn kleben "Tempo" und "96" auf dem Handy aneinander. */
.karte .k-stats span { display: flex; justify-content: space-between; gap: 6px; }
.karte .k-stats b { font-variant-numeric: tabular-nums; }

.karte .k-riffpunkte {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.karte .k-riffpunkte b { font-variant-numeric: tabular-nums; }

.karte .k-fuss { margin-top: auto; padding-top: 9px; }

/* Preisschild mit Trendpfeil. Helle Platte, weil die Kartenschrift auf allen
   Metallstufen dunkel ist - ein dunkles Schild waere hier unlesbar. */
.k-preis {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.k-trend { display: inline-flex; align-items: center; font-size: 12px; font-weight: 900; }
.k-trend.hoch { color: #0b7a45; }
.k-trend.runter { color: #a3122a; }
.k-trend.gleich { color: rgba(0, 0, 0, 0.45); }
/* Der Pfeil schiebt sich einmal in seine Richtung - Trend wird sichtbar, nicht nur lesbar. */
.k-trend.hoch svg { animation: schub-hoch 1.9s ease-in-out infinite; }
.k-trend.runter svg { animation: schub-runter 1.9s ease-in-out infinite; }
@keyframes schub-hoch { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-3px); } }
@keyframes schub-runter { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(3px); } }

.k-zeile { text-align: center; font-size: 10.5px; font-weight: 700; opacity: 0.78; padding-top: 5px; }

/* --- Technik- und Beckenkarte (D103) ---------------------------------------
   Erbt Metallgrund, Glanz und Seltenheitspulsieren von `.karte` - hier steht
   nur, was anders ist. Vor allem: keine Wertung. Eine 0-99 ergibt bei einem
   Heizstab keinen Sinn, also traegt der Kopf die Gattung. */
.karte.tk { min-height: 232px; }

.karte.tk .tk-gattung {
  font-size: 10px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.72;
}

/* Technikstufe 1..6 der Ausbauleiter (D123) - rechts neben der Gattung.
   Bewusst dezent: die Stufe ordnet, die Sammelstufe (Metallgrund) glaenzt. */
.karte.tk .k-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.karte.tk .tk-stufe {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  opacity: 0.6; white-space: nowrap;
}

/* Das Motiv bekommt mehr Platz als bei der Koralle: ohne Statblock und
   PP-Zeile ist es das Einzige, was die Karte traegt. */
.karte.tk .k-motiv { height: 98px; margin: 8px 0 4px; }
.karte.tk .k-motiv svg { height: 98px; width: 98px; }
.karte.tk .k-motiv img { height: 98px; width: 98px; }
@media (max-width: 420px) {
  .karte.tk .k-motiv, .karte.tk .k-motiv svg, .karte.tk .k-motiv img { height: 84px; }
  .karte.tk .k-motiv svg, .karte.tk .k-motiv img { width: 84px; }
}

.karte.tk .tk-kurz {
  margin-top: 7px;
  font-size: 11px; font-weight: 800;
  text-align: center; line-height: 1.35;
  font-variant-numeric: tabular-nums;
  opacity: 0.82;
}

/* Eingebaut: gruener Saum, wie `.tech.besitzt` es bisher tat. Bewusst nur der
   Rand und kein Filter - die Stufe muss ablesbar bleiben. */
.karte.tk.eingebaut { border-color: rgba(120, 240, 170, 0.9); }
.karte.tk.eingebaut .k-fuss { color: #0b4a2c; }

/* Zu klein fuers Becken: bernsteinfarbener Saum als Warnung, ohne die Karte
   zu entwerten - kaufbar ist sie trotzdem, sie leistet nur weniger. */
.karte.tk.zu-klein { border-color: rgba(255, 198, 61, 0.95); }

/* Zurueckgetreten (D170): das Geraet steht im Becken, liefert aber nichts. Es
   ist KEIN Problem, sondern der Normalfall nach einem Upgrade - also gedaempft
   statt gewarnt (dieselbe Ueberlegung wie bei der Hinweis-Stufe in D153: was wie
   ein Alarm aussieht, entwertet den Alarm). Der graue Saum schlaegt den gruenen,
   weil "eingebaut" hier in die Irre fuehren wuerde. */
.karte.tk.inaktiv {
  border-color: rgba(150, 170, 185, 0.75);
  opacity: 0.62;
}
.karte.tk.inaktiv .k-fuss { color: #33424c; }

/* Die Marke im Fuss traegt auf allen vier Metallgruenden dunkle Schrift, also
   braucht sie eine helle Platte - dieselbe Ueberlegung wie bei `.k-preis`. */
.karte.tk .tk-marke {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.karte.tk .tk-marke.nicht-leistbar { opacity: 0.55; }

/* ==========================================================================
   Transfermarkt: Karte + Handelsleiste
   ========================================================================== */

.markt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}
@media (max-width: 400px) { .markt-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; } }

.markt-pos { display: flex; flex-direction: column; gap: 7px; }

/* Preisverlauf: echter Kurvenzug aus der Marktfunktion (siehe preisVerlauf()).
   flex-basis fixiert die Hoehe - als schrumpfbares Flex-Kind wuerde der Graph
   in der Spalte auf ein paar Pixel zusammenfallen. */
.spark {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(4, 16, 26, 0.55);
  border: 1px solid var(--edge-soft);
  overflow: hidden;
  position: relative;
}
.spark svg { width: 100%; height: 100%; display: block; }

/* Auktions-Restzeit als ablaufender Ring. */
.uhr { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--foam-dim); }
.uhr .ring { flex: 0 0 auto; }
.uhr .ring circle.rest { transition: stroke-dashoffset 1s linear; }
.uhr.knapp { color: var(--alarm); }
.uhr.knapp .ring circle.rest { stroke: var(--alarm); }
.uhr.knapp { animation: uhr-puls 1s ease-in-out infinite; }
@keyframes uhr-puls { 50% { opacity: 0.55; } }

.handel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.handel .btn { min-height: 42px; padding: 0 8px; font-size: 12.5px; border-radius: var(--r-sm); }

/* Handy: Karten stehen zu zweit nebeneinander, da wird jede Spalte eng. */
@media (max-width: 420px) {
  .karte .k-stats { font-size: 10px; gap: 2px 8px; }
  .karte .k-ovr { font-size: 28px; }
  .handel .btn { padding: 0 4px; font-size: 11.5px; letter-spacing: -0.01em; }
}

/* ==========================================================================
   Korallenliste im Becken-Reiter (kompakte Kacheln statt Tabellenzeilen)
   ========================================================================== */

.riff-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 9px; }

.riff-kachel {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  min-height: var(--tap);
  border-radius: var(--r-md);
  border: 1px solid var(--edge-soft);
  background: rgba(25, 68, 95, 0.42);
  box-shadow: var(--lift-1);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.riff-kachel:active { transform: translateY(1px); }
.riff-kachel .pkt { position: relative; width: 30px; height: 30px; flex: 0 0 auto; display: block; }
.riff-kachel .pkt svg,
.riff-kachel .pkt img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
/* min-width:0 + block-Anzeige sind noetig, damit die Ellipse ueberhaupt
   greift - inline-Spans lassen sich nicht abschneiden und laufen ueber. */
.riff-kachel .k-txt { min-width: 0; flex: 1; display: block; overflow: hidden; }
.riff-kachel .k-art {
  display: block; font-size: 12.5px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.riff-kachel .k-unter { display: block; font-size: 10.5px; color: var(--foam-faint); font-weight: 700; }
.riff-kachel.reif { border-color: rgba(47, 221, 143, 0.55); }
.riff-kachel.tot { opacity: 0.55; }
.riff-kachel .rp-krone {
  position: absolute;
  right: -6px;
  top: -9px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  color: #3a2400;
  font-size: 10px;
  line-height: 1;
}

.rp-leistung {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  margin-bottom: 14px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--edge-soft));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--gold) 10%, var(--shelf));
}
.rp-leistung span { color: var(--foam-dim); font-size: 11px; font-weight: 750; }
.rp-leistung b { color: var(--gold); font-size: 20px; font-variant-numeric: tabular-nums; }
.rp-leistung small { grid-column: 1 / -1; color: var(--foam-faint); font-size: 10.5px; line-height: 1.35; }
/* Eine Zahl im Fliesstext bleibt Fliesstext (D155). Ohne diese Zeile erbt sie
   die 20 px der Kopfzahl und sprengt den Satz mitten im Wort. */
.rp-leistung small b { color: var(--gold); font-size: inherit; }

.prestige-kopf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-md);
  background: var(--edge-soft);
}
.prestige-kopf > div { padding: 10px 11px; background: var(--shelf); }
.prestige-kopf span { display: block; color: var(--foam-faint); font-size: 9.5px; font-weight: 750; text-transform: uppercase; }
.prestige-kopf b { display: block; margin-top: 2px; color: var(--gold); font-size: 15px; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .prestige-kopf { grid-template-columns: 1fr 1fr; }
  .prestige-kopf > div:last-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   Meilensteine
   ========================================================================== */

.ms { display: grid; gap: 9px; }
.ms-eintrag {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--edge-soft);
  background: rgba(25, 68, 95, 0.35);
}
.ms-eintrag.aktiv { border-color: var(--gold); background: rgba(255, 198, 61, 0.11); }
.ms-eintrag.fertig { opacity: 0.62; }
.ms-eintrag .nr {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900;
  background: rgba(255, 255, 255, 0.09); border: 1px solid var(--edge-soft);
}
.ms-eintrag.fertig .nr { background: var(--kelp); color: #04281a; border-color: var(--kelp); }
.ms-eintrag.aktiv .nr { background: var(--gold); color: #3c2b00; border-color: var(--gold); }
.ms-eintrag .tit { font-size: 13.5px; font-weight: 800; }
.ms-eintrag .txt { font-size: 12px; color: var(--foam-dim); margin-top: 2px; line-height: 1.35; }
.ms-eintrag .lohn { margin-left: auto; text-align: right; white-space: nowrap; font-size: 12px; font-weight: 900; color: var(--gold); }

/* ==========================================================================
   Technik-Karten (Labor)
   ========================================================================== */

.tech {
  padding: 12px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--edge-soft);
  background: rgba(25, 68, 95, 0.38);
  margin-bottom: 9px;
}
.tech .t-kopf { display: flex; align-items: center; gap: 9px; }
.tech .t-name { font-size: 13.5px; font-weight: 800; flex: 1; }
.tech .t-unter { font-size: 11.5px; color: var(--foam-faint); font-weight: 700; margin-top: 2px; }
.tech .t-regler { margin-top: 4px; }
/*
 * Bewusst OHNE `.tech`-Praefix: seit D104 sitzen die Regler im Bottom-Sheet,
 * und `sheet()` haengt an `document.body` - innerhalb von `.tech` steht die
 * Zeile also nirgends mehr. Mit dem Praefix fiel sie auf `display: block`
 * zurueck und Beschriftung und Wert klebten aneinander ("Karbonathaerte8.0
 * dKH"). Gilt fuer jedes Geraeteblatt und fuer das Dosierset.
 */
.t-reglerkopf { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; color: var(--foam-dim); }

/* Verlaufseintraege. */
.verlauf { display: grid; gap: 1px; }
.verlauf-zeile {
  display: flex; gap: 10px; align-items: baseline;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  color: var(--foam-dim);
}
.verlauf-zeile .tag { font-size: 10.5px; font-weight: 900; color: var(--foam-faint); flex: 0 0 46px; }
.verlauf-zeile .txt { flex: 1; }
.verlauf-zeile .txt b { color: var(--foam); }
.verlauf-zeile .geld { font-weight: 900; font-variant-numeric: tabular-nums; }
.verlauf-zeile .geld.plus { color: var(--kelp); }
.verlauf-zeile .geld.minus { color: var(--alarm); }

/* --- Ablegerplatte: die Draufsicht (D66) ---------------------------------
   Bewusst nuechtern gehalten. Die Frontalansicht ist die Schauseite mit Glas
   und Kaustik; das hier ist das Arbeitsbrett, auf dem man Ableger sortiert -
   es soll nach Werkbank aussehen, nicht nach Schaufenster. */
.platte {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--edge);
  background: linear-gradient(160deg, #0d2c3f, #071a27);
  box-shadow: var(--lift-1), inset 0 0 30px rgba(0, 0, 0, 0.45);
  padding: 8px;
  /* Ziehen soll ziehen und nicht die Seite scrollen. */
  touch-action: none;
}
/* Auf breiten Schirmen wuerde eine quadratische Platte den ganzen Bildschirm
   fuellen. Hoehe deckeln und mittig setzen - die Zellen bleiben quadratisch. */
.platte-svg {
  display: block;
  overflow: hidden;
  width: auto;
  max-width: 100%;
  max-height: 58vh;
  height: auto;
  margin: 0 auto;
}

.platte-grund { fill: rgba(126, 196, 232, 0.06); }
.platte-zone { pointer-events: none; }
.platte-zone.hoch { fill: rgba(91, 80, 117, 0.34); }
.platte-zone.mittel { fill: rgba(113, 97, 126, 0.24); }
.platte-zone.sand { fill: rgba(220, 200, 143, 0.17); }
.platte-zonen-kante {
  fill: none;
  stroke: rgba(199, 110, 232, 0.38);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  pointer-events: none;
}

/*
 * Zonen-Koepfe auf der Platte (D145): je Band eine schmale Kopfzeile mit Name,
 * PAR und cm/s. Bewusst leise (Pille statt Kasten), damit sie Beschriftung
 * bleibt und nicht mit den Koloniemotiven streitet. Tippbar - oeffnet das
 * Zonen-Blatt.
 */
.platte-zonenkopf {
  /* Im Ruhezustand UNSICHTBAR (Nutzer-Feedback): die Platte gehoert den
   * Korallen, Daten gibt es erst mit gegriffener Koralle oder im
   * Zonen-Blatt (Tap auf die Bandflaeche). */
  opacity: 0;
  pointer-events: none;
}
.platte-zone { cursor: pointer; }
.zonenkopf-grund {
  fill: rgba(8, 20, 30, 0.4);
  stroke: rgba(150, 210, 240, 0.18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.zonenkopf-text {
  /* In Rasterzellen, wie .ziel-mass: die viewBox laeuft in Zellen. Bewusst
   * klein und leise - Beschriftung, kein Bildelement (Nutzer-Feedback zu
   * D145: die erste Fassung war zu prominent). */
  font-size: 0.55px;
  font-weight: 650;
  fill: var(--foam, #eaf6ff);
  paint-order: stroke;
  stroke: rgb(0 0 0 / 45%);
  stroke-width: 0.16px;
}
/*
 * Beim Greifen einer Koralle sprechen die Koepfe: sie wechseln auf
 * "waechst X %" in der Ampelfarbe und treten VOR statt zurueck - das
 * erklaert die Bandfaerbung im Klartext.
 */
/*
 * Mass-Umschalter oben rechts in der Platte (D165): faerbt die Passungs-Ampel
 * nach Wachstum ODER Faerbung. Beide zeigen oft auf verschiedene Zonen, eine
 * einzige Ampel kann also nicht beides ehrlich sagen.
 *
 * Anders als die Zonen-Koepfe im Ruhezustand SICHTBAR und klickbar - das Mass
 * wird gesetzt, bevor man greift.
 */
.platte-mass { pointer-events: auto; }
.pm-grund {
  fill: rgba(8, 20, 30, 0.72);
  stroke: rgba(150, 210, 240, 0.22);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.pm-seg { cursor: pointer; }
.pm-feld { fill: transparent; }
.pm-seg.aktiv .pm-feld { fill: rgba(120, 200, 240, 0.2); }
.pm-text {
  /* In Rasterzellen wie .zonenkopf-text - die viewBox laeuft in Zellen. */
  font-size: 0.5px;
  font-weight: 750;
  fill: var(--foam-faint, #8fb4c8);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}
.pm-seg.aktiv .pm-text { fill: var(--foam, #eaf6ff); font-weight: 850; }

.platte-svg.passung .platte-zonenkopf { opacity: 1; }
.platte-svg.passung .zonenkopf-text { font-size: 0.7px; font-weight: 800; }
.platte-zonenkopf.passung-gut .zonenkopf-text { fill: var(--kelp); }
.platte-zonenkopf.passung-mittel .zonenkopf-text { fill: var(--amber); }
.platte-zonenkopf.passung-schlecht .zonenkopf-text { fill: var(--alarm); }

/* Der Bedarf der gegriffenen Art am Ziehrahmen - klein und neutral. */
.platte-hilfe-bedarf {
  font-size: 0.5px;
  font-weight: 700;
  fill: var(--foam, #eaf6ff);
  paint-order: stroke;
  stroke: rgb(0 0 0 / 60%);
  stroke-width: 0.16px;
  pointer-events: none;
}

/*
 * Passungs-Faerbung beim Aufnehmen (D145): sobald eine Koralle gegriffen ist,
 * tragen die Baender die Ampel IHRER Art (gruen >= 0,9 / gelb / rot < 0,5).
 * Nur Flaechenhauch plus Kante - die Motive muessen lesbar bleiben.
 */
.platte-zone.passung-gut { fill: rgba(47, 221, 143, 0.16); stroke: rgba(47, 221, 143, 0.55); }
.platte-zone.passung-mittel { fill: rgba(255, 198, 61, 0.13); stroke: rgba(255, 198, 61, 0.5); }
.platte-zone.passung-schlecht { fill: rgba(255, 107, 107, 0.15); stroke: rgba(255, 107, 107, 0.55); }
.platte-zone.passung-gut, .platte-zone.passung-mittel, .platte-zone.passung-schlecht {
  stroke-width: 1.5;
}
.platte-raster {
  fill: none;
  stroke: rgba(150, 210, 240, 0.16);
  stroke-width: 1;
}
.platte-raster.grob { stroke: rgba(150, 210, 240, 0.34); }

.platte-koralle { cursor: grab; }
.platte-koralle.zieht { cursor: grabbing; }
/* Unsichtbare, aber treffbare Flaeche ueber der vollen Spanne. */
.platte-griff { fill: transparent; }
.platte-bild { pointer-events: none; }
.platte-koralle.tot { opacity: 0.5; }

/*
 * Wachstumsring (D82): der Platz, den die Koralle bis zur Erntegroesse braucht.
 * Bewusst zurueckhaltend - er ist eine Randbedingung, keine Meldung. Nur so
 * kraeftig, dass man beim Ziehen sieht, wo es eng wird.
 */
.platte-reserve {
  fill: none;
  stroke: rgba(150, 200, 230, 0.34);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

/**
 * Reservierung einer Schaukolonie (D93). Deutlich kraeftiger als der normale
 * Wachstumsring - hier liegt ein Vielfaches der Ablegerflaeche still, und das
 * ist die teuerste Entscheidung, die man auf der Platte treffen kann. Zusaetzlich
 * schwach gefuellt, damit die Flaeche als Flaeche gelesen wird und nicht als Rahmen.
 */
.platte-reserve.schau {
  stroke: rgba(255, 199, 88, 0.66);
  stroke-width: 2.2;
  stroke-dasharray: 6 3;
  fill: rgba(255, 199, 88, 0.055);
}

/* Steht unter ihrem Ziel fest, weil die Nachbarin im Weg ist - Handlungsbedarf. */
.platte-koralle.eingeengt .platte-reserve {
  stroke: rgba(255, 178, 36, 0.7);
  stroke-dasharray: 2 2;
}

.platte-reif {
  fill: none;
  stroke: var(--kelp);
  stroke-width: 2;
  opacity: 0.9;
  animation: reifPuls 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes reifPuls { 50% { opacity: 0.35; } }

.platte-tag { fill: var(--gold); pointer-events: none; }

/* Zielrahmen beim Ziehen: gruen heisst "loslassen", rot heisst "belegt". */
.platte-hilfe { fill: none; stroke-width: 2; stroke-dasharray: 3 2; }
.platte-hilfe.ok { stroke: var(--kelp); fill: rgba(47, 221, 143, 0.12); }
.platte-hilfe.nein { stroke: var(--alarm); fill: rgba(255, 90, 90, 0.12); }

/* Der zweite Rahmen beim Ziehen im Zielgroessen-Modus: die gewaehlte
   Zielgroesse. Bewusst leiser als der verbindliche Rahmen - er sagt "so viel
   braeuchtest du", nicht "hier darfst du ablegen". */
.platte-hilfe.ziel { stroke-width: 1.6; stroke-dasharray: 6 3; fill: none; opacity: 0.75; }
.platte-hilfe.ziel.ok { stroke: var(--kelp); }
.platte-hilfe.ziel.nein { stroke: var(--amber); }

/* Massstab unter der Platte - erklaert, was eine Zelle ist. */
.platte-mass {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted, #8fb2c6);
  padding: 6px 2px 0;
}

/* Laufende Prestigeleistung direkt unter beiden Beckenansichten.
   Seit D155 ein Knopf: er oeffnet die Aufschluesselung. Die Knopf-Vorgaben des
   Browsers muessen dafuer weg, das Aussehen bleibt unveraendert. */
.pp-leistung {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: min(320px, calc(100% - 32px));
  margin: 12px auto 16px;
  padding: 11px 18px;
  border: 1px solid color-mix(in srgb, var(--gold) 52%, var(--edge-soft));
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 8%, var(--shelf));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
  appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pp-leistung:active { transform: scale(0.985); }
.pp-leistung:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Der Antipp-Hinweis (D155). Ohne ihn ist die Klickbarkeit unentdeckbar - die
   Pille sah vier Entscheidungen lang wie eine reine Anzeige aus. */
.pp-mehr {
  margin-top: 1px;
  color: var(--foam-faint);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.pp-leistung .pp-label {
  color: var(--foam-faint);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pp-leistung strong {
  color: var(--gold);
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pp-leistung strong small { font-size: 12px; }
/* Vielfaltsfaktor (D114): erklaert die Rate und nennt den naechsten Schritt. */
.pp-vielfalt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  color: var(--foam-faint);
  font-size: 10.5px;
  font-weight: 700;
}
.pp-vielfalt small {
  color: var(--kelp);
  font-size: 10px;
  font-weight: 800;
}
.pp-delta { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-delta.plus { color: var(--kelp); }
.pp-delta.minus { color: var(--alarm); }
.pp-delta.neutral { color: var(--foam-faint); }

/* --- Aufschluesselung der Beckenrate (D155) --------------------------------
   Liegt im Bottom-Sheet hinter der Leistungspille. Die Kette oben muss sichtbar
   aufgehen (Summe x Vielfalt = Rate), sonst ist sie nur eine weitere Zahl. */
.pp-kette {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  margin: 10px 0 12px;
  padding: 10px 13px;
  border: 1px solid var(--edge-soft);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 12px;
}
.pp-kette span { color: var(--foam-dim); font-weight: 700; }
.pp-kette b { color: var(--foam); font-variant-numeric: tabular-nums; font-weight: 850; }
.pp-kette .pp-kette-summe {
  padding-top: 5px;
  border-top: 1px solid var(--edge-soft);
  color: var(--gold);
}
.pp-posten { display: grid; gap: 4px; margin-bottom: 4px; }
.pp-posten-zeile { color: var(--foam-dim); font-size: 11.5px; font-weight: 650; }
.pp-posten-zeile b { color: var(--amber); }

.pp-zeilen { display: grid; gap: 8px; }
.pp-zeile {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--edge-soft);
  border-radius: 13px;
  background: var(--shelf);
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
}
.pp-zeile.tipp { cursor: pointer; }
.pp-zeile.tipp:active { transform: scale(0.99); }
.pp-zeile.tipp:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ppz-kopf { display: flex; align-items: center; gap: 7px; }
.ppz-punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ppz-name { flex: 1; font-size: 13px; font-weight: 850; color: var(--foam); }
.ppz-rate { color: var(--gold); font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; }
.ppz-rate small { margin-left: 3px; font-size: 9.5px; font-weight: 750; }
.ppz-meta { color: var(--foam-faint); font-size: 10.5px; font-weight: 700; }
/* Balken: Fuellung = heute erreicht, Marke = was hier drin waere. Beides gegen
   dasselbe Kartenpotenzial, sonst waeren die Zeilen untereinander unvergleichbar. */
.ppz-balken {
  position: relative;
  display: block;
  height: 7px;
  margin: 3px 0 1px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.ppz-balken i { display: block; height: 100%; background: var(--gold); }
.ppz-balken b {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 11px;
  background: var(--cyan);
}
.ppz-ziele { color: var(--foam-dim); font-size: 10.5px; font-weight: 650; }
.ppz-ziele b { color: var(--foam); font-variant-numeric: tabular-nums; }
.pp-bremse {
  margin-top: 2px;
  color: var(--foam-dim);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.pp-bremse b { display: block; color: var(--amber); font-weight: 850; }
.pp-bremse.gut b { color: var(--kelp); }
.ppz-rest { color: var(--foam-faint); font-size: 10px; font-weight: 700; }
.pp-rest-zeile { margin-top: 10px; }

/* Beim Umsetzen liegt das Ergebnis kurz direkt auf der Arbeitsflaeche. Der
   Spieler muss dadurch nicht gleichzeitig die Koralle und den unteren Rand
   beobachten; die dauerhafte Leistungsanzeige bleibt trotzdem erhalten. */
.pp-becken-delta {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 46%;
  display: block;
  padding: 10px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(5, 18, 27, 0.88);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: clamp(22px, 7vw, 38px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  animation: pp-becken-aufblitzen 1.5s ease-out both;
}
.pp-becken-delta.plus {
  color: var(--kelp);
  text-shadow: 0 0 18px color-mix(in srgb, var(--kelp) 72%, transparent);
}
.pp-becken-delta.minus {
  color: var(--alarm);
  text-shadow: 0 0 18px color-mix(in srgb, var(--alarm) 72%, transparent);
}
@keyframes pp-becken-aufblitzen {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.78); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  68% { opacity: 1; transform: translate(-50%, -54%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -82%) scale(1.04); }
}

/* Umschalter Frontal / Draufsicht. */
.sicht-schalter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px; gap: 6px; margin-bottom: 8px; }
.sicht-schalter button {
  min-height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  min-width: 0;
}
.sicht-schalter .showcase-start {
  min-width: 52px;
  width: 52px;
  color: #dff9ff;
  border-color: rgba(107, 221, 255, 0.48);
  background: linear-gradient(145deg, rgba(36, 142, 197, 0.24), rgba(133, 76, 195, 0.2));
  font-weight: 800;
  font-size: 20px;
}
.sicht-schalter button[aria-pressed="true"] {
  background: var(--gloss, rgba(255, 255, 255, 0.12));
  border-color: rgba(150, 210, 240, 0.5);
  font-weight: 600;
}

/* Umschalter zwischen den Becken (D132) - gleiche Formensprache wie der
   Sicht-Schalter, plus eine Wertungszeile darunter: welches Becken die
   Wochen-Riffpunkte schreibt, muss IMMER ablesbar sein. */
.becken-schalter {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.becken-schalter button {
  min-height: 46px;
  border-radius: var(--r-md);
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.becken-schalter button small {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--foam-faint);
}
.becken-schalter button[aria-pressed="true"] {
  background: var(--gloss, rgba(255, 255, 255, 0.12));
  border-color: rgba(150, 210, 240, 0.5);
}
.becken-wertung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--foam-dim);
  margin-bottom: 8px;
}
.becken-wertung .btn { flex-shrink: 0; }

/* Instagram-tauglicher 4:5-Showcase. Die Vorschau ist skaliert, das Canvas
   selbst bleibt 1080 x 1350 und kann daher direkt exportiert werden. */
.showcase-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: rgba(2, 9, 18, 0.9);
  backdrop-filter: blur(16px);
}
.showcase-dialog {
  width: min(100%, 480px);
  max-height: 100%;
  display: grid;
  gap: 10px;
}
.showcase-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--foam, #effcff);
}
.showcase-kopf div { display: grid; gap: 2px; }
.showcase-kopf b { font-size: 17px; }
.showcase-kopf span { color: var(--foam-faint, #8fb2c6); font-size: 11px; }
.showcase-schliessen {
  width: 42px;
  height: 42px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: white;
  font-size: 27px;
  line-height: 1;
}
.showcase-buehne {
  width: min(100%, calc((100vh - 152px) * 0.8));
  aspect-ratio: 4 / 5;
  justify-self: center;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(139, 226, 255, 0.44);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 35px rgba(44,156,220,0.13);
  background: #061828;
}
.showcase-buehne canvas { display: block; width: 100% !important; height: 100% !important; }
.showcase-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

@media (prefers-reduced-motion: reduce) {
  .platte-reif { animation: none; }
  .pp-becken-delta { animation: pp-becken-ausblenden 1.5s linear both; }
}
@keyframes pp-becken-ausblenden {
  0%, 75% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -50%); }
}

/* --- Pflegeleiste (D72) ----------------------------------------------------
   Die drei Handgriffe am Becken. Bewusst gleich gross und nebeneinander: es
   sind Gewohnheiten, keine Menuepunkte, und sie sollen sich taeglich gleich
   anfuehlen. Auf dem Handy passen drei 48-px-Ziele nebeneinander - mehr nicht,
   deshalb bleibt es bei drei Verben. */
.pflege-leiste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pflege-knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: var(--tap);
  padding: 10px 6px 9px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-md);
  background: var(--shelf);
  color: var(--foam);
  text-align: center;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 90ms ease;
}

.pflege-knopf:active { transform: scale(0.97); }
.pflege-knopf:hover { background: var(--shelf-2); }

.pflege-knopf svg {
  width: 22px;
  height: 22px;
  stroke: var(--kelp);
  flex: 0 0 auto;
}

.pflege-knopf .p-tit {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.15;
}

.pflege-knopf .p-sub {
  font-size: 10.5px;
  color: var(--foam-faint);
  line-height: 1.2;
}

/* Nur was wirklich ansteht, wird warm - sonst ist Hervorhebung kein Signal
   mehr (dieselbe Regel wie bei den Warn-LEDs der Rundinstrumente). */
.pflege-knopf.noetig {
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, var(--shelf));
}
.pflege-knopf.noetig svg { stroke: var(--amber); }

/* Reglerzeile in den Pflege-Sheets. */
.regler-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 10px;
}
.regler-zeile > span {
  flex: 0 0 58px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.regler-zeile input[type='range'] { flex: 1; }

/* --- Noch nicht freigeschaltete Karte (D73) --------------------------------
   Die Karte bleibt sichtbar und lesbar - man soll sehen, worauf man hinarbeitet.
   Nur entsaettigt und leicht abgedunkelt, damit sie sich von den kaufbaren
   abhebt, ohne zur grauen Flaeche zu werden. Das Holo der Chase-Karten wird
   dabei bewusst angehalten: eine gesperrte Karte soll ruhig sein. */
.karte.gesperrt { filter: saturate(0.45) brightness(0.78); }
.karte.gesperrt .glanz { animation: none; opacity: 0.25; }

.k-sperre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.32);
  color: var(--foam-dim);
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
}
.k-schloss svg { width: 15px; height: 15px; stroke: var(--foam-dim); display: block; }

/* --- Riffliste nach Art gruppiert (D75) ------------------------------------
   Bei drei Korallen war die flache Liste richtig, bei sechzig nicht mehr. Die
   Gruppe je Art ist das Modell, in dem ein Zuechter denkt ("meine
   Zoanthus-Linie"), und der Kopf sagt sofort, wo Handlung wartet. */
.riff-gruppe { margin-bottom: 14px; }

.rg-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 6px;
}
.rg-name { font-size: 13px; font-weight: 650; color: var(--foam); }
.rg-zahl { font-size: 11.5px; color: var(--foam-faint); }
.rg-zahl b { color: var(--kelp); font-weight: 650; }

/* Korallen ohne Rasterplatz: gestrichelter Rahmen, damit sie sich sofort von
   den liegenden unterscheiden - sie sind ein offener Posten, kein Bestand. */
.riff-liste.ablage { margin-bottom: 14px; }
.riff-kachel.ohne {
  border-style: dashed;
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 9%, var(--shelf));
}
.riff-kachel.ohne .k-unter { color: var(--amber); }

/* --- Trendpfeil an den Zustandsbalken (D76) --------------------------------
   Der Balken sagt, wo der Wert steht; der Pfeil sagt, wohin er laeuft. Ohne
   ihn liest sich eine Faerbung von 50 % gleich, egal ob sie gerade ausblasst
   oder ausfaerbt - und das ist die Frage, die man beim Blick ins Becken hat. */
.trend {
  display: inline-flex;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
}
.trend svg { width: 100%; height: 100%; }
.trend.hoch { color: var(--kelp); }
.trend.runter { color: var(--alarm); }
.trend.gleich { color: var(--foam-faint); }

/* --- Technik-Katalog nach Gattungen (D77) ----------------------------------
   Vorher eine flache Liste aus 16 Geraeten, in der weder die Gattung noch der
   Unterschied zwischen zwei Modellen zu erkennen war. Jetzt eine aufklappbare
   Rubrik je Gattung; eingebaute Gattungen starten zugeklappt, leere offen -
   dorthin muss der Blick. */
.gattung {
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.16);
  margin-bottom: 10px;
  overflow: hidden;
}

.gattung > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--tap);
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.gattung > summary::-webkit-details-marker { display: none; }
.gattung > summary::after {
  content: '▾';
  color: var(--foam-faint);
  transition: transform 160ms ease;
}
.gattung[open] > summary::after { transform: rotate(180deg); }

.g-titel { font-size: 14px; font-weight: 700; color: var(--foam); }
.g-stand { font-size: 11.5px; color: var(--foam-faint); text-align: right; }
.g-stand b { color: var(--amber); font-weight: 650; }

.g-zweck {
  margin: 0 14px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--foam-dim);
}
.gattung .tech { margin: 0 10px 10px; }

/* Was ein Geraet im eigenen Becken leistet - der Kern der Transparenz. */
.t-wirkung {
  margin: 8px 0 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--foam-dim);
}
.t-wirkung b { color: var(--foam); }

/* Zwischenueberschrift im Kaufblatt (D118). Der Abschnitt "Wirkung auf dein
   Becken" trennt die Beschreibung des Geraets von dem, was der Kauf mit dem
   VORHANDENEN Bestand macht - zwei verschiedene Fragen. */
.t-wirkung-kopf {
  margin: 14px 0 0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--foam-faint);
}

.t-vergleich {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--kelp) 12%, transparent);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--foam-dim);
}
.t-vergleich b { color: var(--kelp); }
.t-vergleich .vs {
  display: block;
  margin-bottom: 2px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--foam-faint);
}

.t-warn {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--foam-dim);
}
.t-warn b { color: var(--amber); }

.t-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.t-strom { font-size: 11px; color: var(--foam-faint); }
.tech.besitzt { border-color: color-mix(in srgb, var(--kelp) 45%, var(--edge-soft)); }

/* --- Facettenfilter (D108) -------------------------------------------------
   Suchfeld plus ein Auswahlfeld je Achse. Erst waren es Chip-Reihen; bei
   fuenfzehn Untergruppen sprengte das den Rahmen (der Nutzer hat es genau so
   gemeldet). Ein Auswahlfeld traegt beliebig viele Werte auf gleichbleibendem
   Platz - der Preis ist ein Wert je Achse statt mehrerer. */
.filter-leiste { margin-bottom: 12px; }
.filter-leiste .suche { margin-bottom: 8px; }

.f-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
@media (max-width: 420px) {
  .f-felder { grid-template-columns: 1fr 1fr; gap: 6px; }
}

.f-feld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.f-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--foam-faint);
}
.f-feld select {
  width: 100%;
  min-height: var(--tap);
  padding: 0 10px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-md);
  background: var(--shelf);
  color: var(--foam);
  font: inherit;
  font-size: 13px;
}
.f-feld select:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
/* Eine gesetzte Achse muss man sehen, ohne die Liste zu oeffnen. */
.f-feld select.gesetzt { border-color: var(--cyan); background: var(--shelf-2); }
.f-feld option:disabled { color: var(--foam-faint); }
.f-reset { margin-top: 8px; }

/* "Mehr anzeigen" unter einer gedeckelten Kartenwand. */
.f-mehr { width: 100%; margin-top: 10px; }

/* Ausgefiltert. Als eigene Klasse statt inline, damit `filterAnwenden()` nur
   `classList.toggle` braucht - das ist der ganze Trick an der Sache. */
.filter-weg { display: none !important; }

/* Suchfeld ueber dem Katalog. */
.suche {
  width: 100%;
  min-height: var(--tap);
  margin-bottom: 12px;
  padding: 0 14px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-md);
  background: var(--shelf);
  color: var(--foam);
  font: inherit;
  font-size: 14px;
}
.suche::placeholder { color: var(--foam-faint); }
.suche:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }

/* Erklaerender Fliesstext ueber Aktionsgruppen. */
.erklaerung {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--foam-dim);
}
.erklaerung b { color: var(--foam); }

/* --- Vorschau der Auto-Einstellung (D77) ---------------------------------- */
.vorschau {
  margin-top: 12px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.vorschau-kopf {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--foam-faint);
}
.vorschau-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--foam-dim);
  border-top: 1px solid var(--edge-soft);
}
.vorschau-zeile b { color: var(--foam); }
.vorschau-zeile.stark { font-size: 13.5px; font-weight: 600; }

/* --- Artenwähler über den Wasserwerten (D78) -------------------------------
   Ein Becken hat einen Satz Wasserwerte, aber mehrere Arten mit
   widersprüchlichen Optima. Die Chips zeigen alle gleichzeitig - so ist der
   Kompromiss sichtbar, statt hinter einer einzigen Referenzart zu verschwinden.
   Waagerecht scrollend, weil bei neun Arten sonst der halbe Bildschirm weg ist. */
.art-waehler {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.art-waehler::-webkit-scrollbar { display: none; }

.art-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  flex: 0 0 auto;
  min-height: var(--tap);
  padding: 7px 11px;
  border: 1px solid var(--edge-soft);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--shelf);
  color: var(--foam-dim);
  cursor: pointer;
  text-align: left;
}
.art-chip.aktiv {
  background: var(--shelf-2);
  color: var(--foam);
  border-color: var(--cyan);
}
/* Der linke Balken ist die Ampel - er bleibt auch im aktiven Zustand stehen,
   sonst verliert die gewählte Art ihre Statusfarbe. */
.art-chip.gut { border-left-color: var(--kelp); }
.art-chip.mittel { border-left-color: var(--amber); }
.art-chip.schlecht { border-left-color: var(--alarm); }

.ac-name { font-size: 12px; font-weight: 650; white-space: nowrap; }
.ac-zahl { font-size: 10.5px; color: var(--foam-faint); }
.ac-wert { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.art-chip.gut .ac-wert { color: var(--kelp); }
.art-chip.mittel .ac-wert { color: var(--amber); }
.art-chip.schlecht .ac-wert { color: var(--alarm); }

/* Zonen-Chips im Zustands-Blatt (D145): dieselbe Optik wie im Labor, aber
   reine Anzeige - der Umzug bleibt der Zieh-Weg auf der Platte. */
.zonen-chips { margin-top: 12px; }
.zonen-chips .art-waehler { margin-bottom: 4px; }
/* Wachstum und Faerbung stehen nebeneinander, sobald der Platz reicht (D176) -
   auf dem Handy untereinander. `minmax(0, …)` statt einer festen Mindestbreite,
   damit die Chip-Reihe drin scrollen darf, statt das Raster zu sprengen. */
.zonen-masse { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .zonen-masse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zonen-masse .zonen-chips { margin-top: 12px; }
}
.art-chip.anzeige { cursor: default; }
.zc-titel {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--foam-dim);
}
.zc-hinweis { font-size: 11px; color: var(--foam-faint); }

/* --- Spielerprofil (D79) ---------------------------------------------------
   Wenige gut lesbare Zahlen und eine Kennung, die auf einen Blick sagt, wen
   man vor sich hat. Der Kopf bleibt absichtlich textbasiert, damit das beste
   Stueck nicht mit der eigentlichen Rangliste um Aufmerksamkeit konkurriert. */
.profil-kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--shelf-2), var(--deep));
  box-shadow: var(--lift-1);
}

.pk-txt { min-width: 0; }

.pk-name {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--foam);
  font: inherit;
  font-size: 19px;
  font-weight: 750;
  cursor: pointer;
}
.pk-name .stift { font-size: 13px; color: var(--foam-faint); }

.pk-rang {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 650;
  color: var(--gold);
}
.pk-stufe {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--foam-dim);
}
.pk-typ { margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--foam-faint); }

/* Kopfzeile eines fremden Profils: Bild links, Rang und Becken daneben.
   Vorher stand dort nur Text - ein Profil ohne Gesicht ist ein Tabelleneintrag,
   kein Spieler (D105). */
.fp-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.fp-kopf > div { min-width: 0; }
.fp-kopf .pk-rang { margin-bottom: 2px; }

/* Kennzahlen als Ranglisten-Umschalter. */
.kz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.kz {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: var(--tap);
  padding: 9px 11px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-md);
  background: var(--shelf);
  color: var(--foam-dim);
  text-align: left;
  cursor: pointer;
}
.kz.aktiv { border-color: var(--cyan); background: var(--shelf-2); color: var(--foam); }
.kz-tit { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--foam-faint); }
.kz-wert { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kz.aktiv .kz-wert { color: var(--gold); }

.rl-hinweis { margin-bottom: 10px; font-size: 12px; line-height: 1.45; color: var(--foam-dim); }

.rangliste {
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 10px;
}
.rl-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  font-size: 13px;
  border-top: 1px solid var(--edge-soft);
}
.rl-zeile:first-child { border-top: 0; }
.rl-zeile.selbst { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.rl-platz { flex: 0 0 24px; font-weight: 750; color: var(--foam-faint); font-variant-numeric: tabular-nums; }
.rl-name { flex: 1; min-width: 0; font-weight: 650; color: var(--foam); }
.rl-wert { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }

.werte-tafel {
  display: grid;
  /* 190 px, nicht 150: bei "Gesamtvermoegen 6.043 M" bricht sonst die Einheit
     in die naechste Zeile um. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--edge-soft);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.werte-tafel > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--shelf);
  font-size: 12.5px;
  color: var(--foam-dim);
}
.werte-tafel b { color: var(--foam); font-variant-numeric: tabular-nums; }

.anlage-liste {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--foam-dim);
}

/* Ranglistenzeile ist anklickbar (D80) - sie fuehrt ins fremde Profil. */
.rl-zeile {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--edge-soft);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rl-zeile:hover { background: rgba(255, 255, 255, 0.04); }
.rl-name em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--foam-faint);
}
.k-motiv img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgb(0 0 0 / 35%));
}

.pack-shop {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgb(95 213 255 / 25%);
  border-radius: 18px;
  background: radial-gradient(circle at 15% 10%, rgb(44 174 220 / 20%), transparent 45%),
    linear-gradient(145deg, rgb(7 36 55 / 96%), rgb(5 20 31 / 96%));
  box-shadow: 0 14px 32px rgb(0 0 0 / 28%);
}

.pack-kunst {
  aspect-ratio: 0.72;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #e7fbff;
  background: radial-gradient(circle at 50% 36%, #35d7c5, transparent 28%),
    conic-gradient(from 20deg, #0b3954, #155f76, #072535, #217c87, #0b3954);
  border: 2px solid #7adcea;
  box-shadow: inset 0 0 26px rgb(167 247 255 / 22%), 0 8px 22px rgb(0 0 0 / 40%);
  transform: rotate(-3deg);
  letter-spacing: 0.1em;
}

.pack-kunst span { font-size: 12px; font-weight: 800; }
.pack-kunst b { font-size: 19px; line-height: 1; }
.pack-kunst em { margin-top: 34px; font-size: 9px; font-style: normal; }
.pack-info h3 { margin: 0 0 4px; color: var(--foam); }
.pack-info p { margin: 0 0 10px; color: var(--foam-dim); font-size: 12px; line-height: 1.45; }
.pack-odds { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 8px; }
.pack-odds span { display: flex; justify-content: space-between; font-size: 11px; color: var(--foam-faint); }
.pack-odds b { color: var(--foam); }
.pack-kaufen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.pack-reveal .karten-buehne { max-width: 270px; margin: 0 auto 16px; }

@media (max-width: 430px) {
  .pack-shop { grid-template-columns: 92px 1fr; gap: 12px; padding: 12px; }
  .pack-kunst b { font-size: 15px; }
}

/* ==========================================================================
   Zielgroesse einer Koralle (D93/D94)

   Die Entscheidung "Ablegerplatz oder Schaukolonie" wird auf der Ablegerplatte
   getroffen, nicht in einem Sheet: sie handelt von Flaeche, und Flaeche laesst
   sich nur dort beurteilen, wo sie liegt. Die Quadrate liegen auf dem Raster,
   die Segment-Leiste darunter benennt sie.
   ========================================================================== */

/* --- Die Quadrate auf dem Raster --- */

.ziel-quadrat {
  fill: none;
  stroke-width: 1.6;
  stroke-dasharray: 5 3;
  pointer-events: none;
  /* Nicht gewaehlte Stufen bleiben sichtbar, aber leise - man soll den Sprung
     zur naechsten Stufe sehen, ohne dass drei Rahmen um Aufmerksamkeit kaempfen. */
  opacity: 0.32;
  transition: opacity 180ms, stroke-width 180ms;
}
.ziel-quadrat.aktiv { opacity: 1; stroke-width: 2.6; }

/* Der Status traegt die Farbe - dieselbe Sprache wie die Ziehvorschau. */
.ziel-quadrat.passt        { stroke: var(--kelp); }
.ziel-quadrat.verschieben  { stroke: var(--cyan); stroke-dasharray: 3 2.4; }
.ziel-quadrat.aufraeumen   { stroke: var(--amber); stroke-dasharray: 3 2.4; }
.ziel-quadrat.nirgends     { stroke: var(--alarm); stroke-dasharray: 1.6 2.4; }
.ziel-quadrat.aktiv.passt       { fill: rgb(47 221 143 / 8%); }
.ziel-quadrat.aktiv.verschieben { fill: rgb(111 214 255 / 8%); }
.ziel-quadrat.aktiv.aufraeumen  { fill: rgb(255 178 36 / 8%); }
.ziel-quadrat.aktiv.nirgends    { fill: rgb(255 77 94 / 8%); }

.ziel-mass {
  /* In Rasterzellen, nicht in Pixeln: die viewBox laeuft in Zellen, eine Zahl
     ueber eine ganze Zelle hoch erschlaegt das Raster darunter. */
  font-size: 1.05px;
  font-weight: 900;
  fill: var(--foam);
  paint-order: stroke;
  stroke: rgb(0 0 0 / 75%);
  stroke-width: 0.5px;
  pointer-events: none;
}

/* Die gewaehlte Koralle heben, ohne die unveraenderten Nachbarinnen
   auszublenden. Der Filter liegt auf der Gruppe und erhaelt dadurch den
   art-/farbspezifischen Inline-Filter des eigentlichen Bildes. */
.platte-koralle.gewaehlt { filter: drop-shadow(0 0 3px var(--gold)); }
.platte-svg.zielmodus .platte-koralle { cursor: pointer; }
.platte-svg.zielmodus .platte-koralle:not(.gewaehlt) { opacity: 1; }

/* --- Das Auswahlfenster unter der Platte --- */

/**
 * Bewusst als geschlossener Rahmen mit Titel und eigenem Fertig-Knopf: die
 * erste Fassung war eine flache Leiste mit einem "Fertig"-Link oben rechts, und
 * es war nicht zu erkennen, dass die drei Kacheln eine WAHL sind statt einer
 * Anzeige. Titel, Radiogruppe und Abschluss gehoeren in denselben Rahmen.
 */
.ziel-leiste {
  margin-top: 8px;
  padding: 12px 12px 13px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--shelf-2), var(--shelf));
  border: 1.5px solid var(--gold);
  box-shadow: var(--lift-2), var(--gloss);
}

.zl-kopf { margin-bottom: 10px; }
.zl-kopf h3 {
  margin: 0;
  font-size: 14px; font-weight: 900; color: var(--foam);
  letter-spacing: 0.01em;
}
.zl-wer { display: block; margin-top: 1px; font-size: 11.5px; color: var(--foam-dim); }

.ziel-segmente { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }

.ziel-seg {
  position: relative;
  display: grid;
  gap: 1px;
  padding: 9px 4px 8px;
  min-height: var(--tap);
  border-radius: 11px;
  border: 1.5px solid var(--edge);
  background: rgb(0 0 0 / 22%);
  color: var(--foam-dim);
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms, background 150ms, color 150ms;
}
.ziel-seg:active { filter: brightness(1.2); }

/* Ein echter Auswahlpunkt statt nur eines Rahmens - das ist der Unterschied
   zwischen "drei Kacheln" und "waehle eine von dreien". */
.ziel-seg .zg-haken {
  position: absolute; top: 6px; right: 6px;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--edge);
  background: rgb(0 0 0 / 40%);
}
.ziel-seg.aktiv .zg-haken { border-color: var(--gold); background: var(--gold); }
.ziel-seg.aktiv .zg-haken::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--deep);
}

.ziel-seg .zg-name  { font-size: 11.5px; font-weight: 900; color: var(--foam); }
.ziel-seg .zg-name em { font-style: normal; font-weight: 700; color: var(--gold); }
.ziel-seg .zg-cm    { font-size: 10.5px; font-variant-numeric: tabular-nums; }
.ziel-seg .zg-platz { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ziel-seg .zg-preis { font-size: 10px; color: var(--gold); font-weight: 800; }

/* Kein Ausgrauen mehr (D94): der Status faerbt, er sperrt nicht. Auch die
   teuerste Stufe bleibt anwaehlbar - sie sagt dann eben, was ihr fehlt. */
.ziel-seg.aktiv { background: rgb(255 199 88 / 12%); border-color: var(--gold); }
.ziel-seg.passt       .zg-platz { color: var(--kelp); }
.ziel-seg.verschieben .zg-platz { color: var(--cyan); }
.ziel-seg.aufraeumen  .zg-platz { color: var(--amber); }
.ziel-seg.nirgends    .zg-platz { color: var(--alarm); }

/* Was die gewaehlte Stufe im Spiel bedeutet - die Frage, die vorher offen war. */
.zl-wirkung {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgb(0 0 0 / 22%);
  border: 1px solid var(--edge-soft);
  font-size: 11.5px; line-height: 1.5; color: var(--foam-dim);
}
.zl-wirkung b { color: var(--foam); }

.ziel-aktion { margin-top: 10px; display: grid; gap: 8px; }
.ziel-aktion .btn { width: 100%; }

.ziel-lage { font-size: 11.5px; line-height: 1.45; font-weight: 700; }
.ziel-lage.ok   { color: var(--kelp); }
.ziel-lage.warn { color: var(--amber); }
.ziel-lage.bad  { color: var(--alarm); }
.ziel-lage b { color: #fff; }

/* Zonenwechsel gehoeren VOR den Knopf, nicht in eine Meldung danach: seit D88
   entscheidet die Reihe ueber Licht und Stroemung, ein stiller Wechsel waere
   ein unsichtbarer Schaden. */
.ziel-zonen {
  font-size: 11px; line-height: 1.5;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgb(255 178 36 / 10%);
  border: 1px solid rgb(255 178 36 / 34%);
  color: var(--foam-dim);
}
.ziel-zonen.gut { background: rgb(47 221 143 / 9%); border-color: rgb(47 221 143 / 30%); }
.ziel-zonen b { color: var(--foam); }
.ziel-zonen em { display: block; margin-top: 3px; font-style: normal; color: var(--foam-faint); }

.zl-fuss {
  margin: 9px 0 10px;
  font-size: 10.5px; line-height: 1.5; color: var(--foam-faint);
}
.zl-fuss b { color: var(--foam-dim); }
.ziel-leiste > .btn { width: 100%; }

.link-btn {
  background: none; border: 0; padding: 0;
  color: var(--cyan, #6fd6ff); font: inherit; font-weight: 800;
  text-decoration: underline; cursor: pointer;
}

/* Fusszeile im Zustands-Sheet, wenn nichts blockiert - reine Auskunft. */
.ziel-fuss { margin-top: 10px; font-size: 11.5px; color: var(--foam-faint); }
.ziel-fuss b { color: var(--foam-dim); }

/*
 * Wartezeiten unter dem Ziel (D159): naechste Stufe und naechster Ableger.
 * Erbt die leise Optik der Fusszeile, ruecken aber als eigene Zeilen enger
 * zusammen - sie gehoeren zur Zielaussage darueber, sind aber nicht sie.
 */
.ziel-fuss.fahrplan { margin-top: 5px; display: grid; gap: 2px; }
.ziel-fuss.fahrplan em { color: var(--foam-faint); opacity: 0.8; }

/*
 * Hier stand bis D162 `.balken-fuss` - die Wertungs-Fusszeile unter dem
 * Reife-Balken (D159/D160). Sie ist mit ihrer einzigen Verwendung entfallen:
 * vier Zahlenzeilen an einem Ort waren ueberladen (Betreiber-Meldung). Eine
 * CSS-Klasse ohne Nutzer bleibt nicht stehen (D144).
 */

/* Licht- und Stroemungsverteilung (D88/D96). */
.zonen-leiste { display: grid; gap: 8px; grid-template-columns: 1fr; }
.zone-karte {
  background: var(--flaeche, #132430); border: 1px solid var(--rand, #23404f);
  border-radius: 12px; padding: 10px 12px; border-left-width: 4px;
}
.zone-karte.good { border-left-color: #2fdd8f; }
.zone-karte.warn { border-left-color: #ffc63d; }
.zone-karte.bad  { border-left-color: #ff6b6b; }
.zone-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.zone-name { font-weight: 600; }
.zone-zahl, .zone-lage { font-size: 12px; opacity: .7; }
.zone-werte { font-size: 13px; margin: 2px 0 4px; opacity: .9; }
.zone-lage.leer { font-style: italic; }
/* Ein Regler ist eine Kopfzeile (Beschriftung links, Wert rechts) UEBER seiner
   Bahn - dieselbe Form wie `.t-reglerkopf` im Geraeteblatt (D173). Die
   DOM-Reihenfolge span-b-input traegt das Layout: beide fuellen Zeile 1, die
   Bahn spannt Zeile 2. Stand der Wert hinter der Bahn, klebte er an der
   Beschriftung des naechsten Reglers und las sich als deren Ueberschrift. */
.zone-regler {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  column-gap: 8px; row-gap: 2px; margin-top: 12px;
}
.zone-regler span { font-size: 11.5px; font-weight: 800; color: var(--foam-dim); }
.zone-regler b { font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.zone-regler input { grid-column: 1 / -1; width: 100%; }
.zone-erklaerung { margin-top: -4px; }
.zone-aktionen { display: flex; flex-wrap: wrap; gap: 7px; margin: 9px 0 14px; }
.verlust-liste { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; }

@media (min-width: 620px) {
  .zonen-leiste { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 420px) {
  /* Drei Segmente nebeneinander werden auf schmalen Geraeten zu eng fuer die
     Beschriftung - untereinander bleibt jede Zeile lesbar. */
  .ziel-segmente { grid-auto-flow: row; grid-auto-columns: auto; }
  .ziel-seg {
    grid-template-columns: 1fr auto auto auto;
    align-items: baseline;
    gap: 8px;
    text-align: left;
    padding-right: 26px;   /* Platz fuer den Auswahlpunkt oben rechts */
  }
}

/* ==========================================================================
   Profilbild (D100)

   Vorbild Battle.net: das Bild steht vor dem Namen und macht aus einer
   Tabellenzeile eine Person. Dieselbe Zeichnung wie auf der FUT-Karte - eine
   zweite Quelle waere genau der Fehler, den D63 einmal behoben hat.
   ========================================================================== */

.avatar {
  display: grid;
  place-items: center;
  width: var(--av, 48px);
  height: var(--av, 48px);
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: radial-gradient(circle at 42% 34%, #17516f, #06202f 72%);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 12px rgb(0 0 0 / 55%);
}
/* Das Motiv fuellt den Kreis, statt darin zu schwimmen.
   Zwei Quellen, zwei Massstaebe: die prozeduralen SVG-Motive sind randlos
   gezeichnet und passen bei 78 %. Die 1024er-Rasterassets haben dagegen viel
   transparenten Rand plus den Ablegerstein am Fuss - bei 78 % blieb davon im
   34-px-Kreis ein schwarzer Punkt uebrig (im Browser gemessen). Sie werden
   deshalb formatfuellend beschnitten und leicht nach oben gerueckt, damit der
   Korallenkoerper in der Mitte sitzt und nicht der Stein. */
.avatar svg { width: 78%; height: 78%; object-fit: contain; display: block; }
.avatar img {
  width: 118%; height: 118%;
  object-fit: contain;
  object-position: 50% 38%;
  display: block;
}

/* Seltenheit faerbt den Ring - dieselbe Sprache und dieselben Stufennamen wie
   die Kartenraender (`bronze/silver/gold/chase`, siehe `.karte.*`). */
.avatar.bronze { border-color: #b0764a; }
.avatar.silver { border-color: #b9c6d2; }
.avatar.gold   { border-color: var(--gold); }
.avatar.chase  { border-color: #f0e6c8; box-shadow: inset 0 0 12px rgb(0 0 0 / 55%), 0 0 10px rgb(255 232 170 / 45%); }

/* --- Im Profilkopf --- */

.pk-bild {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
  border-radius: 50%;
}
.pk-bild:active { filter: brightness(1.15); }
.pk-bild .pb-leer {
  display: grid; place-items: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 2px dashed var(--edge);
  color: var(--foam-faint);
  font-size: 26px; font-weight: 900;
}
/* Der Stift sagt "anfassbar" - ohne ihn haelt man das Bild fuer Deko. */
.pk-bild .pb-stift {
  position: absolute; right: -2px; bottom: -2px;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--shelf-2);
  border: 1.5px solid var(--edge);
  font-size: 11px;
  color: var(--foam-dim);
}

/* --- In der Ranglistenzeile --- */

.rl-bild { flex: 0 0 auto; display: grid; place-items: center; }
.rl-bild-leer {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgb(0 0 0 / 28%);
  border: 2px solid var(--edge-soft);
  font-size: 15px;
  filter: grayscale(0.6);
  opacity: 0.7;
}

/* --- Die Auswahl --- */

.pb-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.pb-wahl {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 10px 6px 9px;
  border-radius: 13px;
  border: 1.5px solid var(--edge);
  background: rgb(0 0 0 / 22%);
  color: var(--foam-dim);
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.pb-wahl:active { filter: brightness(1.2); }
.pb-wahl.aktiv { border-color: var(--gold); background: rgb(255 199 88 / 12%); }
.pb-wahl.auto { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 3px 11px; width: 100%; }
.pb-wahl.auto .pw-auto { grid-row: span 2; font-size: 22px; color: var(--gold); }
.pb-wahl .pw-name { font-size: 11.5px; font-weight: 800; color: var(--foam); text-align: center; }
.pb-wahl .pw-meta { font-size: 10px; color: var(--foam-faint); font-variant-numeric: tabular-nums; }

/* Die angeheftete eigene Zeile: abgesetzt, damit klar ist, dass sie nicht
   Platz 26 ist, sondern ausserhalb der abgerufenen Liste steht. */
.rl-zeile.abseits {
  border-top: 2px dashed var(--edge);
  margin-top: 2px;
}
.rl-zeile.abseits .rl-platz { color: var(--foam-faint); }

/* ==========================================================================
   Chat (D134) - Vorbild Battle.net aus Warcraft 3
   ========================================================================== */

/* Die Eingabeleiste ist eine eigene Rasterzeile der App, nicht Teil der
   Buehne: `render()` baut die Buehne komplett neu, und ein Eingabefeld darin
   verloere mitten im Tippen Fokus und Inhalt. */
.chatleiste {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--edge-soft);
  background: linear-gradient(180deg, rgba(9, 28, 42, 0.94), rgba(4, 14, 22, 0.99));
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 21;
}
.chatleiste[hidden] { display: none; }

.chatleiste input {
  min-height: var(--tap);
  min-width: 0;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  /* 16px ist Pflicht, nicht Geschmack: darunter zoomt iOS beim Fokussieren
     in das Feld hinein, und `user-scalable=no` verhindert das seit iOS 10
     nicht mehr zuverlaessig. */
  font-size: 16px;
  user-select: text;
  -webkit-user-select: text;
}
.chatleiste input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.chatleiste .btn { min-height: var(--tap); padding: 0 16px; }

/* Raumwahl: dieselben Chips wie die Ranglisten-Umschalter. */
.chat-raeume { margin-bottom: 8px; }

.chat-leute {
  margin-bottom: 10px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.chat-leute > summary {
  padding: 11px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  color: var(--foam-dim);
  list-style: none;
}
.chat-leute > summary::-webkit-details-marker { display: none; }
.chat-leute > summary::after { content: ' ▾'; color: var(--foam-faint); }
.chat-leute[open] > summary::after { content: ' ▴'; }
.chat-leute .rangliste { padding: 0 8px 8px; }

/* --- Nachrichtenliste --- */

.chat-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
  /* Chatnachrichten muessen sich markieren und kopieren lassen. `body` setzt
     projektweit `user-select: none`, damit beim Ziehen im Becken nichts
     versehentlich markiert wird - hier gilt das Gegenteil. */
  user-select: text;
  -webkit-user-select: text;
}

.chat-zeile {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  align-items: start;
  padding: 5px 8px;
  border-radius: var(--r-sm, 10px);
  cursor: pointer;
}
.chat-zeile:active { background: rgba(255, 255, 255, 0.05); }
.chat-zeile.selbst .chat-kopf b { color: var(--gold); }

.chat-avatar {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  /* Der Avatar ist ein eigener Knopf und fuehrt direkt ins Profil. Die Zeile
     daneben oeffnet stattdessen die Handlungsliste. */
}

.chat-inhalt { min-width: 0; }

.chat-kopf {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12.5px;
}
.chat-kopf b { font-weight: 800; color: var(--foam-dim); }
.chat-kopf em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--foam-faint);
  font-variant-numeric: tabular-nums;
}

.chat-body {
  font-size: 14.5px;
  line-height: 1.4;
  /* Ein langes Wort ohne Leerzeichen darf die Ansicht nicht sprengen. */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-stumm-hinweis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--foam-faint);
  padding: 6px 4px 10px;
}

.chat-vorschau {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 800;
}
.chat-vorschau.gut { color: var(--kelp); }
.chat-vorschau.schlecht { color: var(--alarm); }

/* Sechs statt fuenf Navigationsknoepfe: auf schmalen Geraeten wird es eng,
   deshalb duerfen die Beschriftungen dort etwas kleiner werden. */
@media (max-width: 360px) {
  .navbtn { font-size: 9.5px; }
}

/* Spielstandwahl beim Anmelden (D137): zwei Staende nebeneinander. */
.stand-wahl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.stand-spalte {
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}
.stand-titel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--foam-faint);
  margin-bottom: 6px;
}
.stand-tag {
  font-size: 20px;
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 4px;
}
.stand-zeile {
  font-size: 12px;
  font-weight: 700;
  color: var(--foam-dim);
  line-height: 1.5;
}