/* ==========================================================================
   Geldregen-Schau (js/rain-show.js, Karten aus app.js chatBuildRainCard) – lädt nach max-chat.css.
   .rn-extras  Plätze (.rn-strip/.rn-slot), Topf und Uhr in der Regen-Karte des Chats (#chatRainExtras) und der Leiste oben
   .rn-sky     Leinwand für fallende Münzen (nur während des Regens im Dokument)   .rn-plus  aufsteigender Betrag
   .chat-rain-card  Start, Ende und Abbruch als Karte im Chat-Verlauf
   Bewegung nur transform/opacity, nicht an prefers-reduced-motion gekoppelt (Inhaber-Entscheidung).
   ========================================================================== */

/* ------------------------------------------------------------ Regen-Karte oben im Chat */
body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner { position: relative; overflow: hidden; gap: 10px; }
/* feine Regenfäden hinter dem Inhalt */
body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner::before {
  content: "";
  position: absolute;
  inset: -120px 0 0;
  background-image:
    linear-gradient(180deg, transparent 0 70%, rgba(91, 231, 240, .5) 70% 100%),
    linear-gradient(180deg, transparent 0 55%, rgba(181, 140, 255, .5) 55% 85%, transparent 85%),
    linear-gradient(180deg, transparent 0 30%, rgba(255, 201, 60, .55) 30% 55%, transparent 55%);
  background-size: 2px 40px, 2px 60px, 2px 48px;
  background-position: 18% 0, 54% 12px, 86% 30px;
  background-repeat: repeat-y;
  opacity: .34;
  pointer-events: none;
  animation: rnFall 1.5s linear infinite;
}
body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner > * { position: relative; }
@keyframes rnFall { from { transform: translateY(0); } to { transform: translateY(120px); } }
/* Der Balken weicht den Plätzen: Wer eingesammelt hat, sieht man an den Köpfen. */
body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner .rain-progress-bar-wrap { display: none !important; }
body.tc-redesign.tc-max #floatingChatContainer #chatRainAmount .mx-rain-share { font-size: 15px; }
body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner .mx-chat-rain-actions #chatRainClaimBtn { flex: 1 1 auto; min-height: 44px; font-size: 15px; }

body.tc-redesign.tc-max .rn-extras { display: grid; gap: 8px; min-width: 0; }
body.tc-redesign.tc-max .rn-extras:empty { display: none; }
body.tc-redesign.tc-max .rn-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.tc-redesign.tc-max .rn-slot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  border: 2px dashed rgba(255, 255, 255, .22);
  background: rgba(8, 12, 26, .35);
}
body.tc-redesign.tc-max .rn-slot.is-taken { border: 2px solid var(--mx-emerald, #2ee59d); background: #0d1528; overflow: hidden; }
body.tc-redesign.tc-max .rn-slot img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
body.tc-redesign.tc-max .rn-slot.is-last { animation: rnPop .42s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes rnPop { from { opacity: 0; transform: translateY(-14px) scale(.5); } to { opacity: 1; transform: none; } }
body.tc-redesign.tc-max .rn-more { padding: 0 4px; color: var(--mx-text-2, #a9b5ce); font: 700 12.5px/1 var(--mx-font-body); }
body.tc-redesign.tc-max .rn-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--mx-text-2, #a9b5ce); font: 500 13px/1.3 var(--mx-font-body); }
body.tc-redesign.tc-max .rn-pot b { color: var(--mx-gold, #ffc93c); font-weight: 700; font-variant-numeric: tabular-nums; }
body.tc-redesign.tc-max .rn-clock {
  position: relative;
  flex: none;
  min-width: 64px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(8, 12, 26, .55);
  overflow: hidden;
  text-align: center;
}
body.tc-redesign.tc-max .rn-clock i { position: absolute; inset: 0; background: rgba(91, 231, 240, .22); transform-origin: left center; }
body.tc-redesign.tc-max .rn-clock b { position: relative; color: var(--mx-text, #f2f5fb); font: 700 12.5px/1 var(--mx-font-body); font-variant-numeric: tabular-nums; }
body.tc-redesign.tc-max .rn-clock.is-low i { background: rgba(255, 90, 110, .32); }
body.tc-redesign.tc-max .rn-clock.is-low b { color: #ffb3bd; }
/* Leiste oben auf der Seite: kleine Köpfe, nur wenn Platz ist */
body.tc-redesign.tc-max .rn-extras--bar { margin-top: 5px; }
body.tc-redesign.tc-max .rn-strip.is-small { gap: 4px; flex-wrap: nowrap; overflow: hidden; }
body.tc-redesign.tc-max .rn-strip.is-small .rn-slot { width: 22px; height: 22px; border-radius: 7px; border-width: 1.5px; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) .rn-extras--bar { display: none; }
body.tc-redesign.tc-max #globalRainFloatingBanner .rn-extras--bar:not(:empty) + .global-rain-progress { display: none; }
@media (max-height: 520px) {
  body.tc-redesign.tc-max #floatingChatContainer #chatRainExtras { display: none; }
}

/* ------------------------------------------------------------ Münzregen und aufsteigender Betrag */
.rn-sky { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2147483644; pointer-events: none; }
.rn-plus {
  position: fixed;
  z-index: 2147483645;
  pointer-events: none;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(8, 12, 26, .88);
  box-shadow: inset 0 0 0 2px #ffc93c, 0 10px 26px -10px rgba(0, 0, 0, .8);
  color: #ffd76a;
  font: 800 22px/1 'Onest', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translate(-50%, -120%);
}

/* ------------------------------------------------------------ Karten im Chat-Verlauf */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.has-rain-card .chat-msg-bubble {
  padding: 9px 11px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(181, 140, 255, .2), rgba(91, 231, 240, .07) 75%) !important;
  box-shadow: inset 0 0 0 1px rgba(181, 140, 255, .32) !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.has-rain-card[data-notice="done"] .chat-msg-bubble {
  background: linear-gradient(135deg, rgba(46, 229, 157, .18), rgba(46, 229, 157, .05) 75%) !important;
  box-shadow: inset 0 0 0 1px rgba(46, 229, 157, .32) !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.has-rain-card[data-notice="stop"] .chat-msg-bubble {
  background: rgba(255, 90, 110, .1) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 110, .28) !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-card { display: grid; gap: 6px; min-width: 0; color: var(--mx-text-2); font: 500 13px/1.4 var(--mx-font-body); }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-ico { flex: none; font-size: 16px; line-height: 1; }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mx-text); font-size: 13.5px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-title strong { font-weight: 700; }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-sum { flex: none; color: var(--mx-gold); font: 800 15px/1 var(--mx-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-state { flex: none; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--mx-text); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-card[data-event="done"] .chat-rain-state { background: rgba(46, 229, 157, .18); color: #b9f7dc; }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-sub { font-size: 12.5px; font-variant-numeric: tabular-nums; }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-note { color: var(--mx-text); font-style: italic; overflow-wrap: anywhere; }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-claims { display: flex; flex-wrap: wrap; gap: 5px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-claim { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px 3px 3px; border-radius: 8px; background: rgba(8, 12, 26, .45); font-size: 12.5px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-claim.is-more { padding-left: 8px; color: var(--mx-text-2); }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-face { flex: none; width: 18px; height: 18px; border-radius: 5px; image-rendering: pixelated; }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-claim b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mx-text); font-weight: 600; }
body.tc-redesign.tc-max #floatingChatContainer .chat-rain-claim i { flex: none; color: #9ff3cf; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ Chat-Ansicht: Alles · Nur Chat · Gewinne (app.js setChatFilter)
   Die Liste trägt data-filter; ausgeblendete Zeilen bleiben im Dokument (Verlauf, Antworten und Sprungmarken stimmen weiter). */
body.tc-redesign.tc-max #floatingChatContainer .chat-filter { display: flex; flex: none; gap: 4px; margin: 0; padding: 6px 12px 0; }
body.tc-redesign.tc-max #floatingChatContainer .chat-filter-tab {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  min-height: 30px;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
  color: var(--mx-text-2);
  font: 600 12.5px/1 var(--mx-font-body);
  cursor: pointer;
  transition: background-color .14s, color .14s;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-filter-tab:hover { color: var(--mx-text); }
body.tc-redesign.tc-max #floatingChatContainer .chat-filter-tab.is-active { background: rgba(181, 140, 255, .24); color: #fff; box-shadow: inset 0 0 0 1px rgba(181, 140, 255, .5); }
body.tc-redesign.tc-max #floatingChatContainer #liveChatMessages[data-filter="chat"] .chat-msg-row:is([data-kind="win"], [data-kind="lotto"]) { display: none !important; }
body.tc-redesign.tc-max #floatingChatContainer #liveChatMessages[data-filter="wins"] .chat-msg-row:not([data-kind="win"]):not([data-kind="lotto"]):not([data-kind="rain"]) { display: none !important; }
body.tc-redesign.tc-max #floatingChatContainer #liveChatMessages[data-filter="wins"] :is(.chat-day-separator, .chat-day-sep, .chat-unread-sep, .chat-new-divider) { display: none !important; }
body.tc-redesign.tc-max #floatingChatContainer #liveChatMessages[data-filter="wins"]:not(:has(.chat-msg-row:is([data-kind="win"], [data-kind="lotto"], [data-kind="rain"])))::after {
  content: "Noch keine Gewinne im Verlauf.";
  display: block;
  padding: 28px 12px;
  color: var(--mxc-hint, #8a96b0);
  font: 500 13px/1.4 var(--mx-font-body);
  text-align: center;
}
/* Im Spiel angedockt und bei wenig Höhe bleibt die Leiste weg – dort zählt jeder Pixel für die Nachrichten. */
body.tc-redesign.tc-max.tc-game-open #floatingChatContainer .chat-filter { display: none; }
@media (max-height: 520px) {
  body.tc-redesign.tc-max #floatingChatContainer .chat-filter { display: none; }
}