/* =====================================================
   FIREHELMET - STYLE 3/8: SPIELE
   ---------------------------------------------------
   Schatzrad, Rangliste, Wochenrennen, Streamraetsel,
   Code-Einloeseeffekt, Twitch-Login und die Rennfahrzeuge.

   ACHTUNG REIHENFOLGE: diese Dateien waren bis zum Aufteilen
   EINE Datei mit 13.539 Zeilen. An mehreren Stellen entscheidet
   allein die Reihenfolge, welche Regel gewinnt (gleich starke
   Selektoren, spaeter schlaegt frueher). Die Einbindung in
   index.html muss daher genau in dieser Nummerierung bleiben -
   eine umgestellte oder vergessene Datei aendert das Aussehen.
===================================================== */

/* =====================================================
   SCHATZRAD (Piraten-/Schatzsuche-Thema)
===================================================== */
.wheel-content {
  max-width: 650px;
  margin: auto;
}

.wheel-nickname-box {
  position: relative;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* Kurzes Aufleuchten von Eingabefeld + Button, wenn erfolgreich gespeichert */
.wheel-nickname-box.nickname-just-saved .code-input,
.wheel-nickname-box.nickname-just-saved .code-button {
  animation: nicknameFieldPulse .7s ease;
}

@keyframes nicknameFieldPulse {
  0%   { box-shadow: 0 0 0 rgba(80,255,140,0); }
  40%  { box-shadow: 0 0 25px rgba(80,255,140,.7); border-color: #50ff8c; }
  100% { box-shadow: 0 0 0 rgba(80,255,140,0); }
}

/* Avatar-Auswahl für die anonyme Anmeldung */
.wheel-avatar-picker {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}

.avatar-option {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

.avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-option:hover {
  transform: scale(1.1);
  border-color: rgba(77,163,255,.6);
}

.avatar-option-selected {
  border-color: #50ff8c;
  box-shadow: 0 0 16px rgba(80,255,140,.6);
  transform: scale(1.08);
}

/* Gesperrte Spezial-Avatare: ausgegraut mit Schloss */
.avatar-option-locked {
  cursor: not-allowed;
  background: rgba(255,255,255,.03);
  border-style: dashed;
  opacity: .55;
}

.avatar-lock-icon {
  font-size: 16px;
  filter: grayscale(1);
}

.avatar-option-unlocked {
  animation: avatarUnlockPop .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Zeitlich befristete Schatzrad-Belohnung (siehe redeemWheelPrize()/
   type "tempAvatar"): eigener Rahmen + Countdown-Badge, damit auf einen
   Blick klar ist, dass diese Freischaltung wieder abläuft. */
.avatar-option-temporary {
  position: relative;
  border-color: var(--fh-gold-bright, #f0c96a);
  box-shadow: 0 0 12px rgba(240,201,106,.4);
}

.avatar-option-temp-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 999px;
  background: var(--fh-bg, #05070b);
  border: 1px solid var(--fh-gold-bright, #f0c96a);
  color: var(--fh-gold-bright, #f0c96a);
  white-space: nowrap;
}

@keyframes avatarUnlockPop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Toast-Benachrichtigung, wenn per Code ein Avatar freigeschaltet wird */
.avatar-unlock-toast {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: var(--fh-z-toast);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(212,175,55,.25), rgba(10,10,20,.95));
  border: 1px solid rgba(212,175,55,.6);
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px rgba(212,175,55,.3);
  transform: translateX(120%);
  transition: transform .4s cubic-bezier(0.22, 0.9, 0.32, 1.2);
}

.avatar-unlock-toast.visible {
  transform: translateX(0);
}

.avatar-unlock-toast-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(255,255,255,.08);
  border: 2px solid #d4af37;
  overflow: hidden;
  animation: avatarUnlockPop .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.avatar-unlock-toast-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-unlock-toast-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.avatar-unlock-toast-text strong {
  color: #ffe9b0;
  font-size: 14px;
}

.avatar-unlock-toast-text span {
  color: #fdf1d6;
  font-size: 13px;
  opacity: .85;
}

@media (max-width: 600px) {
  .avatar-unlock-toast {
    left: 16px;
    right: 16px;
    top: 16px;
  }
}

.nickname-error {
  width: 100%;
  text-align: center;
  color: #ff8080;
  font-size: 14px;
  min-height: 20px;
  margin: 0;
}

.leaderboard-avatar-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  font-size: 16px;
}

/* Erfolgs-Badge: fliegt mit Bounce rein, verschwindet nach ein paar Sekunden wieder */
.nickname-success {
  position: absolute;
  left: 50%;
  bottom: -54px;
  transform: translateX(-50%) translateY(-10px) scale(.8);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(10, 40, 20, .9);
  border: 1px solid rgba(80,255,140,.6);
  box-shadow: 0 0 25px rgba(80,255,140,.4);
  color: #dfffe9;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}

.nickname-success.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  animation: nicknameSuccessPop .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes nicknameSuccessPop {
  0%   { transform: translateX(-50%) translateY(-10px) scale(.6); }
  60%  { transform: translateX(-50%) translateY(2px) scale(1.08); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

.nickname-success-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #50ff8c;
  color: #052a12;
  font-size: 14px;
  font-weight: bold;
  flex-shrink: 0;
  animation: nicknameCheckSpin .5s ease;
}

@keyframes nicknameCheckSpin {
  0%   { transform: rotate(-180deg) scale(0); }
  100% { transform: rotate(0deg) scale(1); }
}

@media (max-width: 600px) {
  .nickname-success {
    font-size: 13px;
    padding: 8px 16px;
    white-space: normal;
    text-align: center;
    max-width: 260px;
  }
}

.wheel-wrapper {
  position: relative;
}

/* Warmes Glühen + rotierender Strahlenkranz hinter dem Rad, Farbe je nach Wochenthema */
.wheel-wrapper::before {
  content: "";
  position: absolute;
  inset: -60px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,230,140,.16) 0deg 6deg, transparent 6deg 18deg),
    radial-gradient(circle, var(--wheel-accent, #d4af37), transparent 65%);
  z-index: -1;
  animation: wheelGlowPulse 3.5s ease-in-out infinite, wheelRaysSpin 40s linear infinite;
}

@keyframes wheelGlowPulse {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}

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

/* Metallischer, langsam schimmernder Rahmen hinter dem Rad - Farbton je nach Wochenthema */
.wheel-wrapper::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #fff7d6, var(--wheel-accent, #d4af37), #1a1a1a, var(--wheel-accent, #d4af37), #fff7d6,
    var(--wheel-accent, #d4af37), #1a1a1a, var(--wheel-accent, #d4af37), #fff7d6
  );
  animation: wheelBezelSpin 8s linear infinite;
  z-index: -1;
  transition: background 1s ease;
}

@keyframes wheelBezelSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Orbit-Ring: wöchentlich wechselnde Themen-Icons kreisen ums Rad */
.wheel-orbit-ring {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  animation: wheelOrbitSpin 26s linear infinite;
}

@keyframes wheelOrbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.wheel-orbit-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  transform-origin: 0 0;
  filter: drop-shadow(0 0 8px var(--wheel-accent, #d4af37));
  animation: wheelOrbitIconFloat 3s ease-in-out infinite;
}

@keyframes wheelOrbitIconFloat {
  0%, 100% { opacity: .65; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* Blinkende Rand-Lichter wie bei einem echten Jahrmarkt-Glücksrad */
.wheel-bulbs {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.wheel-bulb {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff3c4;
  box-shadow: 0 0 10px 3px rgba(255,230,140,.9);
  animation: wheelBulbBlink 1s ease-in-out infinite;
}

@keyframes wheelBulbBlink {
  0%, 100% { background: #fff3c4; box-shadow: 0 0 12px 4px rgba(255,230,140,1); }
  50%      { background: #a9761f; box-shadow: 0 0 3px 1px rgba(169,118,31,.5); }
}

/* Funken, die beim Landen des Rads herausschießen */
.wheel-sparks {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}

/* Canvas von window.fhCelebrationBurst() (scripts/fx/celebration-burst-3d.js) -
   wird per JS deckungsgleich ueber dem jeweiligen Ziel-Element positioniert. */
.fh-celebration-burst-canvas {
  position: fixed;
  pointer-events: none;
  z-index: var(--fh-z-celebration);
}

.wheel-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--menu-hex3) 60%, transparent);
  transform: rotate(var(--angle)) translateX(0);
  animation: wheelSparkFly .85s ease-out forwards;
}

@keyframes wheelSparkFly {
  0%   { transform: rotate(var(--angle)) translateX(0);              opacity: 1; }
  100% { transform: rotate(var(--angle)) translateX(var(--distance)); opacity: 0; }
}

.wheel-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 8px solid #6b4423;
  box-shadow:
    0 0 60px rgba(212,175,55,.55),
    0 20px 45px rgba(0,0,0,.6),
    inset 0 0 30px rgba(0,0,0,.55);
  position: relative;
  overflow: hidden;
  z-index: 2;
}

/* Zusätzlicher, dünnerer Gold-Ring innerhalb des Holzrahmens */
.wheel-disc::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid rgba(212,175,55,.6);
  pointer-events: none;
}

/* Glanz-Sweep, wandert langsam übers Rad für einen "poliert"-Effekt */
.wheel-disc-gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.wheel-disc-gloss::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 48%, transparent 60%);
  background-size: 260% 100%;
  animation: wheelGlossSweep 6s ease-in-out infinite;
}

@keyframes wheelGlossSweep {
  0%   { background-position: 200% 0; }
  55%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

.wheel-label {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 150px sind der Radius der Scheibe - mehr geht nicht, sonst
     laeuft die Beschriftung ueber den Rand hinaus und wird
     abgeschnitten (mit 200px stand dort "Kraken-Rah"). Der Platz
     fuer die sechzehn Faecher kommt stattdessen aus der Hoehe:
     Symbol und Wort stehen uebereinander statt nebeneinander,
     siehe .wheel-label-text. */
  width: 150px;
  margin-top: -1px;
  transform-origin: 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #fdf1d6;
  text-align: right;
  padding-right: 18px;
  text-shadow: 0 0 6px rgba(0,0,0,.8);
  pointer-events: none;
}

.wheel-label-text {
  /* Symbol ueber dem Wort statt nur Text: bei sechzehn Faechern
     liest im Vorbeidrehen niemand mehr sechzehn Woerter, ein
     Symbol erkennt man trotzdem. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.1;
}

.wheel-label-icon {
  font-size: 1.35em;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

.wheel-label-wort {
  font-size: .74em;
  white-space: nowrap;
  letter-spacing: -.01em;
}

/* Die seltenen Faecher tragen zusaetzlich Gewicht in der Schrift.
   Die Farbe macht die Aufhellung im Kuchendiagramm schon (siehe
   AUFHELLUNG in buildWheel) - hier kommt nur noch dazu, dass man
   den Namen auch auf dem helleren Grund gut liest. */
.wheel-label-epic .wheel-label-wort,
.wheel-label-legendary .wheel-label-wort {
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

.wheel-label-legendary .wheel-label-icon {
  filter: drop-shadow(0 0 6px rgba(255, 226, 150, .9)) drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

/* Kompass-Nadel statt einfachem Zeiger */
.wheel-pointer {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  z-index: 5;
  filter: drop-shadow(0 0 10px rgba(212,175,55,.9));
  animation: wheelPointerGlow 1.6s ease-in-out infinite;
}

@keyframes wheelPointerGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(212,175,55,.8)); transform: translateX(-50%) scale(1); }
  50%      { filter: drop-shadow(0 0 20px rgba(255,230,140,1)); transform: translateX(-50%) scale(1.08); }
}

.wheel-pointer::before,
.wheel-pointer::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
}

.wheel-pointer::before {
  top: 0;
  border-top: 24px solid var(--wheel-accent, #d4af37);
}

.wheel-pointer::after {
  top: 5px;
  border-top: 15px solid var(--boss-accent);
}

/* 3D-Tiefe fürs Rad, größer als zuvor */
.wheel-wrapper {
  position: relative;
  width: 340px;
  height: 340px;
  margin: 60px auto 30px;
  perspective: 800px;
}

/* WICHTIG: .wheel-disc bekommt bewusst KEINE eigene CSS-Animation
   mehr (auch keine, die nur box-shadow o.ä. animiert) - die Drehung
   wird komplett per JS über "transform" gesteuert (siehe wheel.js
   spinWheel()). So kann NICHTS mehr mit der eigentlichen Drehung
   kollidieren, egal was hier später noch ergänzt wird. Der weiche
   Leucht-Puls läuft stattdessen über die Bezel-Schicht (::after
   vom Wrapper) und den Strahlenkranz oben. */
.wheel-disc {
  transition: transform 4.8s cubic-bezier(0.15, 0.7, 0.15, 1), filter .3s;
}

/* Bewegungsunschärfe während der vollen Drehung (nur "filter", nie "transform") */
.wheel-wrapper.wheel-spinning .wheel-disc {
  filter: blur(2px) brightness(1.2);
}

.wheel-wrapper.wheel-spinning::before {
  animation: wheelRaysSpin 1.2s linear infinite;
  opacity: 1;
}

/* Schockwellen-Ring + kurzer Leucht-Puls beim Landen - rührt
   bewusst NUR "filter"/"box-shadow" an, NIE "transform" */
.wheel-wrapper.wheel-landed .wheel-disc {
  animation: wheelLandingPulse .5s ease;
}

.wheel-wrapper.wheel-landed::after {
  animation: wheelBezelSpin 8s linear infinite, wheelLandingRing .8s ease-out;
}

@keyframes wheelLandingPulse {
  0%   { filter: brightness(1) blur(0); }
  30%  { filter: brightness(1.5) blur(0); }
  100% { filter: brightness(1) blur(0); }
}

@keyframes wheelLandingRing {
  0%   { box-shadow: 0 0 0 0 var(--wheel-accent, #d4af37); }
  100% { box-shadow: 0 0 0 50px rgba(212,175,55,0); }
}

.spin-button {
  font-size: 21px;
  padding: 20px 54px;
  background: linear-gradient(135deg, var(--wheel-accent, #d4af37), var(--boss-accent));
  border: 1px solid rgba(253,241,214,.4);
  color: #fdf1d6;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: transform .2s, filter .2s, box-shadow .2s;
}

.spin-button:hover:not(:disabled) {
  filter: brightness(1.15);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 40px rgba(212,175,55,.35);
}

.wheel-theme-label {
  margin-top: 15px;
  font-size: 17px;
  font-weight: bold;
  color: var(--wheel-accent, #d4af37);
  text-shadow: 0 0 14px rgba(212,175,55,.4);
}

.spin-button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.wheel-status {
  margin-top: 25px;
  color: #e6c98a;
  font-size: 16px;
  min-height: 24px;
}

/* =====================================================
   RANGLISTE
===================================================== */
.leaderboard-list {
  position: relative;
  margin-top: 50px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
  border-radius: 28px;
  border: 1px solid rgba(212,175,55,.25);
  box-shadow: 0 0 60px rgba(212,175,55,.08);
}

/* Treibende Gold-Partikel im Hintergrund der Rangliste */
.leaderboard-list::before {
  content: "💰 ⚓ 💎 🏆 ⭐ 💰 🗺️ 💎";
  position: absolute;
  inset: -40px;
  z-index: -1;
  font-size: 24px;
  line-height: 100px;
  letter-spacing: 100px;
  opacity: .12;
  overflow: hidden;
  white-space: nowrap;
  animation: leaderboardBgDrift 40s linear infinite;
  pointer-events: none;
}

@keyframes leaderboardBgDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.leaderboard-table {
  position: relative;
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,.05);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(212,175,55,.3);
  isolation: isolate;
  font-size: 16px;
  animation: leaderboardFramePulse 4s ease-in-out infinite;
}

@keyframes leaderboardFramePulse {
  0%, 100% { box-shadow: 0 25px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(212,175,55,.3), 0 0 25px rgba(212,175,55,.08); }
  50%      { box-shadow: 0 25px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(212,175,55,.5), 0 0 45px rgba(212,175,55,.22); }
}

/* Wandernder Glanzstreifen, läuft periodisch über die ganze Tabelle */
.leaderboard-table::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,233,176,.16) 48%, transparent 62%);
  background-size: 250% 100%;
  background-position: 200% 0;
  animation: leaderboardSweep 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes leaderboardSweep {
  0%   { background-position: 200% 0; }
  40%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}

.leaderboard-table th,
.leaderboard-table td {
  padding: 18px 22px;
  text-align: left;
}

.leaderboard-table thead {
  position: relative;
  background: linear-gradient(90deg, rgba(212,175,55,.4), rgba(212,175,55,.18));
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  color: #ffe9b0;
  text-shadow: 0 0 12px rgba(255,233,176,.4);
}

.leaderboard-table tbody tr {
  transition: background .25s ease, transform .25s ease;
  border-bottom: 1px solid rgba(255,255,255,.05);
  animation: leaderboardRowIn .5s cubic-bezier(0.22, 0.9, 0.32, 1.2) backwards;
}

.leaderboard-table tbody tr:nth-child(1)  { animation-delay: .02s; }
.leaderboard-table tbody tr:nth-child(2)  { animation-delay: .05s; }
.leaderboard-table tbody tr:nth-child(3)  { animation-delay: .08s; }
.leaderboard-table tbody tr:nth-child(4)  { animation-delay: .11s; }
.leaderboard-table tbody tr:nth-child(5)  { animation-delay: .14s; }
.leaderboard-table tbody tr:nth-child(6)  { animation-delay: .17s; }
.leaderboard-table tbody tr:nth-child(7)  { animation-delay: .20s; }
.leaderboard-table tbody tr:nth-child(8)  { animation-delay: .23s; }
.leaderboard-table tbody tr:nth-child(9)  { animation-delay: .26s; }
.leaderboard-table tbody tr:nth-child(10) { animation-delay: .29s; }
.leaderboard-table tbody tr:nth-child(11) { animation-delay: .32s; }

@keyframes leaderboardRowIn {
  0%   { opacity: 0; transform: translateX(-25px); }
  100% { opacity: 1; transform: translateX(0); }
}

.leaderboard-table tbody tr:nth-child(odd) {
  background: rgba(255,255,255,.03);
}

.leaderboard-table tbody tr:hover {
  background: rgba(212,175,55,.14);
  transform: translateX(6px) scale(1.01);
}

.leaderboard-rank {
  font-size: 22px;
  font-weight: bold;
  width: 55px;
}

.leaderboard-name {
  font-weight: 600;
  font-size: 17px;
  color: #fff;
}

/* Titel und Abzeichen aus dem Skill-Baum, unter dem Namen. */
.leaderboard-titel,
.fh-podium-titel {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--fh-gold);
}

.fh-podium-titel {
  font-size: 11px;
  text-align: center;
}

/* Legende der sieben Meere: goldener Schimmer am Namen. */
.leaderboard-legende .leaderboard-name,
.fh-podium-legende .fh-podium-name {
  text-shadow: 0 0 12px color-mix(in srgb, var(--fh-gold-bright) 60%, transparent);
}

.leaderboard-legende .leaderboard-titel,
.fh-podium-legende .fh-podium-titel {
  color: var(--fh-gold-bright);
}

.leaderboard-codes {
  color: #bcdfff;
  white-space: nowrap;
}

.leaderboard-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reward-badge {
  position: relative;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(212,175,55,.35), rgba(124,45,18,.35));
  border: 1px solid rgba(212,175,55,.5);
  font-size: 12px;
  font-weight: 600;
  color: #ffe9b0;
  white-space: nowrap;
  overflow: hidden;
  transition: transform .2s;
}

.reward-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 48%, transparent 66%);
  background-size: 250% 100%;
  background-position: 200% 0;
  opacity: 0;
  transition: opacity .2s;
}

.reward-badge:hover {
  transform: scale(1.1) translateY(-2px);
}

.reward-badge:hover::after {
  opacity: 1;
  animation: fhNavSweep .7s ease forwards;
}

.reward-none {
  color: #555;
  font-size: 13px;
}

/* Top 3 heben sich optisch deutlich ab: pulsierender Podest-Glow */
.leaderboard-top td {
  font-weight: bold;
}

.leaderboard-top-1 {
  background: linear-gradient(90deg, rgba(255,215,107,.22), rgba(255,215,107,.05));
  box-shadow: inset 0 0 25px rgba(255,215,107,.2);
  position: relative;
  animation: leaderboardRowIn .5s cubic-bezier(0.22, 0.9, 0.32, 1.2) backwards,
             leaderboardGoldPulse 2.5s ease-in-out infinite;
}

@keyframes leaderboardGoldPulse {
  0%, 100% { box-shadow: inset 0 0 25px rgba(255,215,107,.2); }
  50%      { box-shadow: inset 0 0 40px rgba(255,215,107,.4); }
}

.leaderboard-top-1 .leaderboard-rank {
  font-size: 30px;
  display: inline-block;
  filter: drop-shadow(0 0 10px rgba(255,215,107,.8));
  animation: leaderboardMedalBounce 1.8s ease-in-out infinite;
}

.leaderboard-top-2 .leaderboard-rank,
.leaderboard-top-3 .leaderboard-rank {
  font-size: 24px;
  display: inline-block;
  animation: leaderboardMedalBounce 1.8s ease-in-out infinite;
}

.leaderboard-top-2 .leaderboard-rank { animation-delay: .2s; }
.leaderboard-top-3 .leaderboard-rank { animation-delay: .4s; }

@keyframes leaderboardMedalBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-3px) rotate(-6deg); }
  75%      { transform: translateY(-3px) rotate(6deg); }
}

.leaderboard-top-2 {
  background: linear-gradient(90deg, rgba(200,200,220,.18), rgba(200,200,220,.04));
  box-shadow: inset 0 0 18px rgba(200,200,220,.15);
}

.leaderboard-top-3 {
  background: linear-gradient(90deg, rgba(205,127,50,.18), rgba(205,127,50,.04));
  box-shadow: inset 0 0 18px rgba(205,127,50,.15);
}

/* Eigene Zeile hervorheben, mit sanftem Glow-Puls */
.leaderboard-you {
  background: rgba(77,163,255,.15) !important;
  outline: 2px solid rgba(77,163,255,.6);
  outline-offset: -2px;
  animation: leaderboardRowIn .5s cubic-bezier(0.22, 0.9, 0.32, 1.2) backwards,
             leaderboardYouPulse 2.2s ease-in-out infinite;
}

@keyframes leaderboardYouPulse {
  0%, 100% { outline-color: rgba(77,163,255,.6); }
  50%      { outline-color: rgba(77,163,255,1); }
}

.leaderboard-you-tag {
  color: #4da3ff;
  font-size: 12px;
  font-weight: normal;
}

.leaderboard-gap td {
  text-align: center;
  color: #555;
  padding: 4px;
  letter-spacing: 4px;
}

.leaderboard-own-note {
  margin-top: 18px;
  font-size: 15px;
  color: #bcdfff;
}

@media (max-width: 900px) {
  .leaderboard-table th,
  .leaderboard-table td {
    padding: 10px 10px;
    font-size: 13px;
  }

  .reward-badge {
    font-size: 10px;
    padding: 3px 7px;
  }

  .wheel-wrapper {
    width: 220px;
    height: 220px;
  }

  .wheel-label {
    width: 100px;
    font-size: 10px;
  }
}

/* =====================================================
   COUNTDOWN-HINWEIS BEIM SCHATZRAD
===================================================== */
.wheel-countdown {
  display: none;
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #d4af37;
  text-shadow: 0 0 10px rgba(212,175,55,.6);
}

/* =====================================================
   WOCHENRENNEN (bildschirmfüllend)
===================================================== */
/* Die Huelle bleibt (das Markup verweist darauf), aber der pulsende
   Doppelschein ist raus: den Rennhintergrund macht jetzt die
   gemeinsame Effektflaeche, und zwar passend zur gefahrenen Strecke
   (scripts/fx/seiten-fx-szenen.js, Eintrag "race"). Zwei
   Hintergruende uebereinander waeren nur Matsch. */
.race-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.race-fullpage {
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: 1100px;
  max-height: 92vh;
  margin: auto;
  overflow-y: auto;
  text-align: center;
  padding: 10px 10px 40px;
}

.race-daily-box {
  margin-top: 25px;
}

/* Strecken-Thema-Anzeige */
.race-track-theme {
  margin-top: 35px;
  font-size: 20px;
  font-weight: bold;
  color: var(--menu-hex3);
  text-shadow: 0 0 12px rgba(255,215,107,.5);
}

/* Rennstrecke */
.race-track-wrap {
  position: relative;
  margin-top: 15px;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 40px rgba(77,163,255,.15);
}

/* Wandernder Neon-Schein entlang der Streckenkante */
#race-curb {
  filter: drop-shadow(0 0 8px rgba(77,163,255,.7));
  animation: raceCurbPulse 2.5s ease-in-out infinite;
}

@keyframes raceCurbPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}

/* Mittellinie läuft sichtbar in Fahrtrichtung mit */
#race-center-line {
  animation: raceCenterLineFlow .8s linear infinite;
}

@keyframes raceCenterLineFlow {
  to { stroke-dashoffset: -24; }
}

.race-track-svg {
  display: block;
  width: 100%;
  height: auto;
}

.race-track-empty {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px;
  text-align: center;
  background: rgba(2,3,10,.75);
  animation: spielothekBgIn .4s ease;
}

/* Kleines Flaggen-Symbol statt reinem Fliesstext, egal ob es der
   "noch nicht eingerichtet"- oder der "konnte nicht geladen
   werden"-Zustand ist - beide nutzen dieselbe Nachrichtenflaeche. */
.race-track-empty::before {
  content: "🏁";
  font-size: 34px;
  filter: drop-shadow(0 0 14px rgba(240,201,106,.35));
  opacity: .85;
}

/* Tempo-Trail hinter dem führenden Kart */
.race-trail-dot {
  opacity: .7;
  animation: raceTrailFade .7s ease forwards;
  filter: drop-shadow(0 0 4px currentColor);
}

@keyframes raceTrailFade {
  0%   { opacity: .7; r: 3; }
  100% { opacity: 0;  r: .5; }
}

/* Karts */
.race-kart {
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}

.kart-inner {
  animation: kartBounce .3s ease-in-out infinite;
}

@keyframes kartBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-.6px); }
}

/* Der führende Fahrer bekommt eine glühende Aura + Krone */
.race-kart-leader {
  filter: drop-shadow(0 0 5px var(--menu-hex3)) drop-shadow(0 2px 3px rgba(0,0,0,.5));
}

.race-kart-leader .kart-inner {
  animation: kartBounce .3s ease-in-out infinite, kartLeaderGlow 1.4s ease-in-out infinite;
}

@keyframes kartLeaderGlow {
  0%, 100% { filter: drop-shadow(0 0 2px var(--menu-hex3)); }
  50%      { filter: drop-shadow(0 0 10px var(--menu-hex3)); }
}

/* Dezente Silber-/Bronze-Aura fuer Platz 2/3 - schwaecher als die
   Gold-Aura des Fuehrenden, damit die Rangfolge auch beim fliegenden
   Vorbeifahren auf einen Blick erkennbar bleibt, nicht nur ueber die
   Positionsreihenfolge auf der Strecke. */
.race-kart-rank2 {
  filter: drop-shadow(0 0 4px #c7ccd6) drop-shadow(0 2px 3px rgba(0,0,0,.5));
}

.race-kart-rank3 {
  filter: drop-shadow(0 0 4px #d99a5b) drop-shadow(0 2px 3px rgba(0,0,0,.5));
}

/* Krone sitzt jetzt FEST auf dem Fahrzeug: sie ist Teil der
   .kart-inner-Gruppe und bewegt/dreht/bobt exakt mit dem Auto
   mit (kein eigenes, separat schwebendes Wackeln mehr). */
.kart-crown {
  font-size: 12px;
  opacity: 0;
  transform-origin: -1.5px -9.5px;
  transition: opacity .2s;
}

.race-kart-leader .kart-crown {
  opacity: 1;
}

.kart-shadow {
  fill: rgba(0,0,0,.45);
  filter: blur(.5px);
}

/* Reifen: realistischer Verlauf statt Vollton, mit Felge */
.kart-tire {
  fill: url(#kart-tire-grad);
  stroke: #000;
  stroke-width: .3;
}

.kart-rim {
  fill: url(#kart-rim-grad);
  stroke: rgba(0,0,0,.4);
  stroke-width: .2;
}

.kart-spoke {
  fill: rgba(30,30,30,.8);
}

.kart-spoiler-post {
  fill: #1c1c1c;
}

.kart-spoiler {
  fill: #161616;
  stroke: rgba(255,255,255,.3);
  stroke-width: .4;
}

.kart-spoiler-shine {
  fill: rgba(255,255,255,.25);
}

.kart-underbody {
  fill: rgba(0,0,0,.55);
}

.kart-body {
  stroke: rgba(255,255,255,.4);
  stroke-width: .6;
  filter: drop-shadow(0 .8px 0 rgba(255,255,255,.15));
}

.kart-side-shade {
  fill: rgba(0,0,0,.22);
}

.kart-stripe {
  fill: rgba(255,255,255,.85);
}

.kart-gloss {
  fill: rgba(255,255,255,.6);
}

.kart-number {
  font-size: 5px;
  font-weight: bold;
  fill: rgba(0,0,0,.65);
}

.kart-nose {
  fill: #1c1c1c;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.2));
}

.kart-front-wing {
  fill: #161616;
  stroke: rgba(255,255,255,.25);
  stroke-width: .3;
}

.kart-headlight {
  fill: #fff7d6;
  filter: drop-shadow(0 0 2px #fff2b0);
}

.kart-windshield {
  fill: rgba(160, 220, 255, .55);
  stroke: rgba(255,255,255,.4);
  stroke-width: .3;
}

.kart-visor {
  fill: rgba(20,20,30,.85);
}

.kart-helmet {
  fill: #fdf1d6;
  stroke: #222;
  stroke-width: .5;
}

.plane-wing-shade {
  fill: rgba(0,0,0,.2);
}

.kart-label {
  font-size: 11px;
  font-weight: bold;
  fill: #fff;
  paint-order: stroke;
  stroke: #000;
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Ergebnisliste unter der Strecke */
.race-results-list {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.race-result-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .25s, background .25s, box-shadow .25s;
  animation: raceResultIn .5s cubic-bezier(0.22, 0.9, 0.32, 1.2) backwards;
}

.race-result-row:nth-child(1) {
  animation-delay: .03s;
  background: linear-gradient(90deg, rgba(255,215,107,.16), rgba(255,215,107,.03));
  border-color: rgba(255,215,107,.35);
  box-shadow: inset 0 0 20px rgba(255,215,107,.12);
}

.race-result-row:nth-child(2) { animation-delay: .08s; }
.race-result-row:nth-child(3) { animation-delay: .13s; }
.race-result-row:nth-child(4) { animation-delay: .18s; }
.race-result-row:nth-child(5) { animation-delay: .23s; }

@keyframes raceResultIn {
  0%   { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}

.race-result-row:hover {
  transform: translateX(6px) scale(1.02);
  background: rgba(77,163,255,.1);
}

.race-result-rank {
  font-weight: bold;
  min-width: 28px;
}

.race-result-name {
  flex: 1;
  text-align: left;
  font-weight: 600;
  color: #fff;
}

.race-result-points {
  color: #bcdfff;
  font-size: 14px;
}

@media (max-width: 900px) {
  .race-result-name {
    font-size: 14px;
  }

  .race-result-points {
    font-size: 12px;
  }
}

/* =====================================================
   STREAMRÄTSEL (bildschirmfüllend, Stream/Rätsel-Thema)
===================================================== */
/* Wie bei .race-fx: die Huelle bleibt, der pulsende rote Schein ist
   raus. Das Stoerbild kommt jetzt aus der gemeinsamen
   Effektflaeche. */
.streamraetsel-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Scanlines wie auf einem Stream-/Röhrenbildschirm */
.streamraetsel-fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,45,45,.08) 0px,
    rgba(255,45,45,.08) 1px,
    transparent 1px,
    transparent 4px
  );
  animation: streamScanlines 6s linear infinite;
}

@keyframes streamScanlines {
  from { transform: translateY(0); }
  to   { transform: translateY(40px); }
}

/* Schwebende Rätsel-Symbole im Hintergrund */
.streamraetsel-particle {
  position: absolute;
  bottom: -10px;
  font-size: 26px;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255,45,45,.75));
  animation: streamParticleFloat linear forwards;
}

@keyframes streamParticleFloat {
  0%   { transform: translateY(0) rotate(0deg);      opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .8; }
  100% { transform: translateY(-90vh) rotate(20deg); opacity: 0; }
}

.streamraetsel-locked {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

/* "LIVE" Badge über dem Titel */
.streamraetsel-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(255,45,45,.15);
  border: 1px solid rgba(255,45,45,.55);
  color: #ffc9c9;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 25px;
}

.streamraetsel-live::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 10px #ff3b3b;
  animation: liveDotPulse 1.4s ease-in-out infinite;
}

@keyframes liveDotPulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.8); }
}

.streamraetsel-title {
  font-size: 110px;
  letter-spacing: 18px;
  color: #ffd6d6;
  text-shadow: 0 0 70px #ff2d2d;
  animation: streamTitleGlitch 6s ease-in-out infinite;
}

@keyframes streamTitleGlitch {
  0%, 92%, 100% {
    text-shadow: 0 0 70px #ff2d2d;
    transform: translate(0, 0);
  }
  93% {
    text-shadow: -3px 0 #ff3b6e, 3px 0 #38f2ff, 0 0 70px #ff2d2d;
    transform: translate(-2px, 0);
  }
  94% {
    text-shadow: 3px 0 #ff3b6e, -3px 0 #38f2ff, 0 0 70px #ff2d2d;
    transform: translate(2px, 0);
  }
  95% {
    text-shadow: 0 0 70px #ff2d2d;
    transform: translate(0, 0);
  }
}

.streamraetsel-title-mystery {
  animation: streamTitleGlitch 6s ease-in-out infinite, streamTitleFogPulse 6s ease-in-out infinite;
}

/* Auf denselben 6s-Takt wie streamTitleGlitch gelegt (vorher 3.4s,
   durchgehend) - buendelt Nebel-Unschaerfe UND den neuen Aufloesungs-
   Effekt (feTurbulence/feDisplacementMap, siehe #streamGlitchDissolve
   in index.html) zu einem einzigen, kurzen "der Titel loest sich kurz
   auf"-Moment statt zweier unabhaengig laufender Effekte - der
   SVG-Filter wird bewusst NUR waehrend dieses Fensters referenziert
   (davor/danach schlicht kein filter), keine eigene Animations-Uhr
   im SVG noetig. */
@keyframes streamTitleFogPulse {
  0%, 88%   { filter: blur(0px); opacity: 1; }
  91%       { filter: url(#streamGlitchDissolve) blur(1px); opacity: .85; }
  93%       { filter: url(#streamGlitchDissolve) blur(3px); opacity: .5; }
  95%       { filter: url(#streamGlitchDissolve) blur(1px); opacity: .8; }
  97%, 100% { filter: blur(0px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .streamraetsel-title,
  .streamraetsel-title-mystery {
    animation: none;
    text-shadow: 0 0 70px #ff2d2d;
    filter: none;
    opacity: 1;
  }
}

.streamraetsel-mystery .streamraetsel-subtitle {
  font-style: italic;
  opacity: .85;
}

.streamraetsel-subtitle {
  margin-top: 25px;
  font-size: 28px;
  color: #ffb8b8;
}

.streamraetsel-teaser {
  margin-top: 15px;
  font-size: 20px;
  color: #ffe1a8;
  letter-spacing: 2px;
  animation: streamTeaserTwinkle 2.2s ease-in-out infinite;
}

@keyframes streamTeaserTwinkle {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.streamraetsel-countdown {
  margin-top: 90px;
  gap: 40px;
}

.streamraetsel-countdown .time-box {
  border-color: rgba(255,45,45,.4);
  animation: streamBoxBreathe 3.6s ease-in-out infinite;
}

@keyframes streamBoxBreathe {
  0%, 100% { box-shadow: 0 0 25px rgba(255,45,45,.25); }
  50%      { box-shadow: 0 0 55px rgba(255,45,45,.6); }
}

.streamraetsel-now-playing {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fh-font-display);
  font-size: 15px;
  letter-spacing: .5px;
  color: var(--fh-muted-fg, #ffb3b3);
  text-transform: capitalize;
}

.streamraetsel-now-playing-icon {
  animation: streamTeaserTwinkle 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .streamraetsel-now-playing-icon {
    animation: none;
  }
}

.streamraetsel-countdown .time-box:hover {
  box-shadow: 0 0 60px #ff2d2d;
}

.time-box-xl {
  width: 210px;
  height: 210px;
  border-radius: 40px;
}

.time-box-xl span {
  font-size: 80px;
}

.time-box-xl small {
  font-size: 22px;
}

.streamraetsel-unlocked {
  position: relative;
  z-index: 1;
  display: none;
  width: 90%;
  max-width: 900px;
  margin: auto;
  text-align: center;
}

.streamraetsel-admin-preview-banner {
  margin: 0 0 18px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(240, 201, 106, 0.12);
  border: 1px solid rgba(240, 201, 106, 0.4);
  color: var(--fh-gold-bright, #f0c96a);
  font-size: 13px;
  font-weight: bold;
}

@media (max-width: 900px) {
  .streamraetsel-title {
    font-size: 44px;
    letter-spacing: 6px;
  }

  .streamraetsel-subtitle {
    font-size: 18px;
  }

  .streamraetsel-countdown {
    margin-top: 50px;
    gap: 16px;
  }

  .time-box-xl {
    width: 110px;
    height: 110px;
    border-radius: 24px;
  }

  .time-box-xl span {
    font-size: 38px;
  }

  .time-box-xl small {
    font-size: 14px;
  }
}

/* =====================================================
   CODE-EINLÖSEN EFFEKT (Schatz-Explosion)
===================================================== */
.code-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--fh-z-fx);
  overflow: hidden;
}

.code-fx.code-fx-flash::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(212,175,55,.35), transparent 60%);
  animation: codeFxFlash .6s ease-out forwards;
}

@keyframes codeFxFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.code-fx-particle {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: rotate(var(--angle)) translateX(0) scale(.5);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(212,175,55,.8));
  animation: codeFxBurst 1.8s cubic-bezier(0.15, 0.7, 0.25, 1) forwards;
}

@keyframes codeFxBurst {
  0%   { transform: rotate(var(--angle)) translateX(0) scale(.4);              opacity: 1; }
  15%  { opacity: 1; }
  100% { transform: rotate(var(--angle)) translateX(var(--distance)) scale(1.1); opacity: 0; }
}

/* =====================================================
   TWITCH LOGIN
===================================================== */
.twitch-login-area {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.twitch-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-radius: var(--fh-radius, 15px);
  border: 1px solid rgba(145,70,255,.5);
  background: rgba(145,70,255,.2);
  color: #e4d4ff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: var(--fh-shadow-sm, none);
  /* War "transition: .3s" - also "all". */
  transition: background var(--fh-dauer) var(--fh-ease),
              box-shadow var(--fh-dauer) var(--fh-ease),
              transform var(--fh-dauer) var(--fh-ease);
}

.twitch-login-btn:hover {
  background: rgba(145,70,255,.4);
  box-shadow: 0 0 30px rgba(145,70,255,.5);
  transform: translateY(-3px);
}

.twitch-icon {
  width: 22px;
  height: 22px;
  fill: #e4d4ff;
}

.twitch-logged-in {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  border-radius: var(--fh-radius, 15px);
  background: rgba(145,70,255,.15);
  border: 1px solid rgba(145,70,255,.4);
}

.twitch-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #9146ff;
}

.twitch-logged-in span {
  font-weight: 600;
  color: #e4d4ff;
}

.twitch-logout-btn {
  padding: 6px 14px;
  border-radius: var(--fh-radius-sm, 10px);
  border: 1px solid var(--fh-border, rgba(255,255,255,.2));
  background: var(--fh-surface, rgba(255,255,255,.05));
  color: var(--fh-muted-fg, #ccc);
  font-size: 13px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.twitch-logout-btn:hover {
  background: rgba(229,57,53,.18);
  border-color: var(--fh-danger, #e53935);
  color: var(--fh-fg, #fff);
}

/* Avatar in der Rangliste */
.leaderboard-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
  border: 1px solid rgba(240,201,106,.25);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.leaderboard-table tbody tr:hover .leaderboard-avatar {
  transform: scale(1.15);
  border-color: rgba(240,201,106,.55);
}

.wheel-login-hint {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.wheel-login-hint a {
  display: inline-block;
  padding: 10px 24px;
  border-radius: var(--fh-radius-sm, 15px);
  border: 1px solid rgba(214,168,79,.5);
  background: linear-gradient(160deg, rgba(214,168,79,.16), rgba(214,168,79,.04));
  color: var(--fh-gold-bright, #f0c96a);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--fh-ease, ease), box-shadow .25s ease, background .25s ease;
}

.wheel-login-hint a:hover {
  transform: translateY(-2px);
  box-shadow: var(--fh-glow-gold, 0 0 16px rgba(214,168,79,.4));
  background: linear-gradient(160deg, rgba(214,168,79,.28), rgba(214,168,79,.08));
}

.wheel-login-hint a:active {
  transform: translateY(0) scale(.97);
}

.login-divider {
  margin: 20px 0;
  color: var(--fh-muted-fg, #666);
  font-size: 14px;
}

.social-subheading {
  margin-top: 60px;
  margin-bottom: -20px;
  font-size: 28px;
  color: #d4af37;
  text-shadow: 0 0 15px rgba(212,175,55,.4);
}

.social-twitch:hover {
  background: rgba(145,70,255,.3) !important;
  border-color: #9146ff;
  box-shadow: 0 0 40px #9146ff !important;
}

/* =====================================================
   BOOT- UND FLUGZEUG-FAHRZEUGE (Wochenrennen)
===================================================== */
.boat-sail,
.boat-sail-front {
  fill: rgba(255,255,255,.9);
  stroke: rgba(0,0,0,.2);
  stroke-width: .4;
}

.plane-wing,
.plane-tail {
  fill: rgba(255,255,255,.85);
  stroke: rgba(0,0,0,.2);
  stroke-width: .3;
}


/* ======================================================
   WOCHENRENNEN: FAHRZEUGWAHL
   ---------------------------------------------------
   Drei Fahrzeuge je Gelaende. Welches Gelaende gefahren wird,
   bestimmt die Strecke der Woche; welches der drei, jeder selbst.
   Rein optisch - die Wahl steht nur im eigenen Browser.
====================================================== */
.race-fahrzeugwahl { margin-top: 12px; }

.race-fahrzeug-titel {
  margin: 0 0 8px;
  font-family: var(--fh-font-display, inherit);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fh-muted-fg, #8296ad);
}

.race-fahrzeug-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.race-fahrzeug {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--fh-radius, 12px);
  background: rgba(12, 16, 26, .58);
  color: inherit;
  cursor: pointer;
  transition-duration: var(--fh-dauer, 200ms);
  transition-timing-function: var(--fh-ease-aus, ease-out);
  transition-property: border-color, background-color, transform;
}

.race-fahrzeug:hover { border-color: rgba(240, 201, 106, .45); }
.race-fahrzeug:active { transform: scale(.97); }

.race-fahrzeug.ist-gewaehlt {
  border-color: var(--fh-gold, #f0c96a);
  background: rgba(240, 201, 106, .10);
}

.race-fahrzeug-symbol { font-size: 20px; line-height: 1; }

.race-fahrzeug-name {
  font-size: 12px;
  color: var(--fh-muted-fg, #8296ad);
  text-align: center;
}

.race-fahrzeug.ist-gewaehlt .race-fahrzeug-name { color: inherit; }

/* ======================================================
   WIEDERHERSTELLUNGS-KENNWORT (Anmeldeseite)
   Siehe scripts/core/spieler-kennwort.js.
====================================================== */
.fh-kennwort-box {
  margin-top: 1.75rem;
  padding: 1.15rem 1.15rem 1.25rem;
  border: 1px solid var(--fh-linie, rgba(255, 255, 255, .12));
  border-radius: var(--fh-radius, 14px);
  background: rgba(255, 255, 255, .035);
  text-align: left;
}

.fh-kennwort-titel {
  margin: 0 0 .4rem;
  font-size: 1rem;
  letter-spacing: .02em;
}

.fh-kennwort-text {
  margin: 0 0 .8rem;
  font-size: .88rem;
  line-height: 1.5;
  opacity: .8;
}

.fh-kennwort-trenner {
  margin-top: 1.15rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--fh-linie, rgba(255, 255, 255, .12));
}

.fh-kennwort-anzeige,
.fh-kennwort-eingabezeile {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.fh-kennwort-wert {
  flex: 1 1 9ch;
  min-width: 9ch;
  padding: .55rem .8rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, .3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem;
  letter-spacing: .16em;
  /* Damit sich das Kennwort mit einem Doppelklick markieren laesst,
     statt nur mit muehsamem Ziehen ueber acht Zeichen. */
  user-select: all;
}

.fh-kennwort-knopf { flex: 0 0 auto; }

.fh-kennwort-eingabezeile .code-input {
  flex: 1 1 10ch;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fh-kennwort-status {
  margin: .7rem 0 0;
  min-height: 1.2em;
  font-size: .87rem;
  line-height: 1.45;
}

.fh-kennwort-status.is-negative { color: var(--fh-warn, #ff9a76); }
.fh-kennwort-status.is-positive { color: var(--fh-gut, #7bd88f); }

@media (max-width: 480px) {
  .fh-kennwort-anzeige .fh-kennwort-knopf,
  .fh-kennwort-eingabezeile .code-button { flex: 1 1 100%; }
}

/* Kontenliste im Admin-Gateway (Spieler-Identitaet umhaengen) */
.gateway-ident-tabelle {
  width: 100%;
  margin: .8rem 0;
  border-collapse: collapse;
  font-size: .85rem;
  /* IDs sind 36 Zeichen - auf dem Handy muss die Tabelle scrollen
     duerfen, statt die Seite breiter zu machen. */
  display: block;
  overflow-x: auto;
}

.gateway-ident-tabelle th,
.gateway-ident-tabelle td {
  padding: .35rem .6rem;
  border-bottom: 1px solid var(--fh-linie, rgba(255, 255, 255, .12));
  text-align: left;
  white-space: nowrap;
}

.gateway-ident-tabelle code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  user-select: all;
}

/* Statusbrett und Spielerverwaltung im Admin-Gateway */
.gateway-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .6rem;
  margin: .8rem 0 1.2rem;
}

.gateway-kachel {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .7rem .8rem;
  border: 1px solid var(--fh-linie, rgba(255, 255, 255, .12));
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

.gateway-kachel-zahl { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.gateway-kachel-text { font-size: .78rem; opacity: .72; line-height: 1.3; }

.gateway-spieler-karte {
  margin: .8rem 0;
  padding: .9rem 1rem;
  border: 1px solid var(--fh-linie, rgba(255, 255, 255, .12));
  border-radius: var(--fh-radius, 14px);
  background: rgba(255, 255, 255, .035);
}

.gateway-spieler-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  margin: 0 0 .3rem;
}

.gateway-spieler-marken { font-size: .78rem; opacity: .7; }
.gateway-spieler-karte code { user-select: all; font-size: .78rem; }
.gateway-details { margin-top: 1.2rem; }
.gateway-details summary { cursor: pointer; padding: .4rem 0; }

/* Runde 2 der Admin-Werkzeuge */
.gateway-untertitel {
  margin: 1.1rem 0 .4rem;
  font-size: .95rem;
  letter-spacing: .02em;
  opacity: .85;
}

.gateway-rennen-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.gateway-mini-input {
  width: 7ch;
  min-width: 7ch;
  padding: .3rem .5rem;
  text-align: center;
}

/* ======================================================
   HINWEISBAND (Ankuendigung / Wartung)
   Siehe scripts/core/hinweisband.js.
====================================================== */
.fh-hinweisband {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: center;
  padding: .55rem 2.5rem .55rem 1rem;
  background: linear-gradient(90deg, rgba(255, 190, 90, .18), rgba(255, 150, 60, .14));
  border-bottom: 1px solid rgba(255, 190, 90, .35);
  font-size: .88rem;
  line-height: 1.4;
  text-align: center;
  /* Der Text kommt aus dem Gateway und kann laenger sein als gedacht -
     lieber umbrechen als die Seite breiter machen. */
  overflow-wrap: anywhere;
}

.fh-hinweisband.ist-wartung {
  background: linear-gradient(90deg, rgba(255, 120, 90, .2), rgba(220, 80, 60, .16));
  border-bottom-color: rgba(255, 120, 90, .4);
}

.fh-hinweisband-text { flex: 0 1 auto; }

.fh-hinweisband-zu {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.fh-hinweisband-zu:hover { background: rgba(255, 255, 255, .1); }
.fh-hinweisband-zu:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Runde 3 der Admin-Werkzeuge */
.gateway-checkbox {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  margin: .4rem 0 .7rem;
  cursor: pointer;
}

.gateway-meldung {
  margin: .7rem 0;
  padding: .7rem .9rem;
  border: 1px solid var(--fh-linie, rgba(255, 255, 255, .12));
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

.gateway-meldung.ist-erledigt { opacity: .55; }

.gateway-meldung-text {
  margin: .3rem 0 .6rem;
  font-size: .9rem;
  line-height: 1.5;
  /* Gemeldete Texte kommen von Besuchern und koennen alles enthalten -
     lieber umbrechen als die Seite breiter machen. */
  overflow-wrap: anywhere;
}

/* ======================================================
   ANMELDESEITE
   Drei Schritte: Konto verknuepfen, Namen waehlen, Kennwort sichern.
====================================================== */
.fh-anmelde-status {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  margin: 0 0 1.5rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--fh-linie, rgba(255, 255, 255, .12));
  border-radius: var(--fh-radius, 14px);
  background: rgba(255, 255, 255, .04);
}

.fh-anmelde-status-bild { font-size: 1.9rem; line-height: 1; }
.fh-anmelde-status-bild img { width: 40px; height: 40px; border-radius: 50%; }

.fh-anmelde-status-text { display: flex; flex-direction: column; gap: .1rem; }
.fh-anmelde-status-text small { opacity: .7; font-size: .8rem; }
.fh-anmelde-status-knopf { margin-left: auto; }

.fh-anmelde-spalten {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .fh-anmelde-spalten { grid-template-columns: 1fr 1fr; }
}

.fh-anmelde-karte {
  position: relative;
  padding: 1.4rem 1.2rem 1.2rem;
  border: 1px solid var(--fh-linie, rgba(255, 255, 255, .12));
  border-radius: var(--fh-radius, 14px);
  background: rgba(255, 255, 255, .035);
  text-align: left;
  /* min-width: 0 haelt die Karte im Raster davon ab, an einem langen
     Wort oder einem breiten Knopf aufzureissen. */
  min-width: 0;
}

.fh-anmelde-karte-breit { margin-top: 1.1rem; }

.fh-anmelde-nummer {
  position: absolute;
  top: .8rem;
  right: 1rem;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  opacity: .18;
}

.fh-anmelde-titel {
  margin: 0 0 .35rem;
  padding-right: 2rem;
  font-size: 1.05rem;
  letter-spacing: .01em;
}

.fh-anmelde-text {
  margin: 0 0 1rem;
  font-size: .88rem;
  line-height: 1.55;
  opacity: .8;
}

/* Die Karte bringt ihren eigenen Rahmen mit - der Kennwort-Kasten
   braucht seinen zweiten daher nicht mehr. */
.fh-anmelde-karte.fh-kennwort-box {
  margin-top: 1.1rem;
}

/* ======================================================
   AVATARWAHL (Fenster beim Klick aufs eigene Bild)
====================================================== */
.fh-avatar-fenster {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.fh-avatar-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(2px);
}

.fh-avatar-kasten {
  position: relative;
  width: min(520px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.3rem 1.2rem;
  border: 1px solid var(--fh-linie, rgba(255, 255, 255, .14));
  border-radius: var(--fh-radius, 14px);
  background: var(--fh-surface, #0d1220);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.fh-avatar-titel { margin: 0 0 .4rem; font-size: 1.15rem; }
.fh-avatar-text { margin: 0 0 1rem; font-size: .88rem; line-height: 1.5; opacity: .8; }

.fh-avatar-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.1rem;
}

.fh-avatar-knoepfe .code-button { flex: 1 1 auto; }

/* Das eigene Bild in der Spielerkarte ist jetzt ein eigener Knopf */
.fh-player-card-avatarknopf {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 50%;
}

.fh-player-card-avatarknopf:focus-visible {
  outline: 2px solid var(--fh-gold, #f0c96a);
  outline-offset: 2px;
}

.fh-player-card-stift {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--fh-gold, #f0c96a);
  color: #14100a;
  font-size: 9px;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--fh-dauer-schnell, .15s) var(--fh-ease, ease);
}

.fh-player-card:hover .fh-player-card-stift,
.fh-player-card-avatarknopf:focus-visible .fh-player-card-stift { opacity: 1; }

/* Der Rest der Karte ist der zweite Knopf (fuehrt zum Levelpfad) */
.fh-player-card-info {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.fh-player-card-info:focus-visible {
  outline: 2px solid var(--fh-gold, #f0c96a);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .fh-player-card-stift { transition: none; }
}

/* ======================================================
   SPIELOTHEK: VERLUST-TOTENKOPF
   Zittert kurz und zerspringt dann. Laeuft genau einmal je
   Ergebnis, danach bleibt das Zeichen blass stehen.
====================================================== */
.spielothek-verlust-icon {
  /* Traegt jetzt ein SVG statt eines Emoji - inline-flex, damit es
     auf der Textlinie sitzt, und die Farbe kommt vom Totenkopf der
     Walzen, damit "schlecht" ueberall gleich aussieht. */
  display: inline-flex;
  align-items: center;
  margin-right: .35rem;
  transform-origin: 50% 60%;
  color: #a8564a;
}

.spielothek-verlust-icon .spielothek-slot-icon {
  width: 20px;
  height: 20px;
}

.spielothek-verlust-icon.ist-bewegt {
  animation: spielothekTotenkopf 1.1s var(--fh-ease, cubic-bezier(.2, .7, .3, 1)) forwards;
}

@keyframes spielothekTotenkopf {
  0%   { transform: translateX(0) rotate(0) scale(1); opacity: 1; }
  8%   { transform: translateX(-2px) rotate(-9deg) scale(1.12); }
  16%  { transform: translateX(2px)  rotate(9deg)  scale(1.12); }
  24%  { transform: translateX(-2px) rotate(-7deg) scale(1.1); }
  32%  { transform: translateX(2px)  rotate(7deg)  scale(1.1); }
  40%  { transform: translateX(-1px) rotate(-4deg) scale(1.06); }
  48%  { transform: translateX(0)    rotate(0)     scale(1.06); }
  /* kurz innehalten, dann zerspringen */
  62%  { transform: scale(1.22) rotate(0); opacity: 1; filter: none; }
  100% { transform: scale(.72) rotate(-14deg); opacity: .45; filter: blur(.6px); }
}

/* Mehr als sechs Walzen (Freidreh): zwei Reihen statt einer, sonst
   passt das auf einem Handy nicht mehr nebeneinander. */
.spielothek-slot-reels-breit {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .35rem;
  justify-items: center;
}

.spielothek-freidreh-kopf {
  margin: .8rem 0 .35rem;
  font-size: .85rem;
  letter-spacing: .02em;
  opacity: .85;
}

/* Auszahlungstabellen in den Regeln */
/* Aufschluesselung unter den Walzen: Grundgewinn und
   Guthaben-Anteil getrennt. Ohne sie waere nicht erkennbar, warum
   derselbe Treffer bei einem groesseren Konto mehr einbringt. */
.spielothek-gewinn-teile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .4rem;
  margin: .5rem 0 0;
  font-size: .82rem;
  /* Stand vorher in --fh-muted und war auf dem dunklen Holz kaum zu
     lesen - im Browser sah man an der Stelle nichts. Die Rechnung
     ist aber genau der Teil, der die Auszahlung nachvollziehbar
     macht; sie muss lesbar sein. */
  color: #c9a04a;
  letter-spacing: .04em;
}

.spielothek-regeln-tabelle {
  width: 100%;
  margin: .9rem 0 1.2rem;
  border-collapse: collapse;
  font-size: .82rem;
  /* Bis zu sieben Spalten - auf dem Handy muss die Tabelle scrollen
     duerfen, statt die Seite breiter zu machen. */
  display: block;
  overflow-x: auto;
}

.spielothek-regeln-tabelle caption {
  /* Flex statt Textfluss: sonst haengt das Quoten-Schild mal in der
     Zeile und rutscht mal darunter, je nachdem wie breit die
     Ueberschrift gerade ausfaellt. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem .45rem;
  padding-bottom: .35rem;
  font-weight: 700;
  text-align: left;
  opacity: .9;
}

/* Auf schmalen Schirmen wird rechts abgeschnitten. Ein Verlauf am
   rechten Rand sagt, dass da noch etwas kommt - sonst haelt man die
   angeschnittene Spalte fuer das Ende der Tabelle.
   mask statt einer aufgesetzten Ebene, damit nichts ueber der
   scrollenden Tabelle liegt und Zeigereingaben abfaengt. */
@media (max-width: 700px) {
  .spielothek-regeln-tabelle {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
}

.spielothek-regeln-tabelle th,
.spielothek-regeln-tabelle td {
  padding: .28rem .55rem;
  border-bottom: 1px solid var(--fh-linie, rgba(255, 255, 255, .1));
  text-align: right;
  white-space: nowrap;
}

/* Die Symbolspalte bleibt beim Querscrollen stehen. Bei sechs
   Walzen hat die Tabelle sieben Spalten - ohne das scrollt man auf
   dem Handy nach rechts und weiss nicht mehr, in welcher Zeile man
   ist. Der Hintergrund muss deckend sein, sonst scheinen die
   wegscrollenden Zahlen durch. */
.spielothek-regeln-tabelle thead th:first-child,
.spielothek-regeln-tabelle tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  font-weight: 600;
  background: var(--fh-flaeche-2, #16202b);
}
.spielothek-regeln-tabelle tbody tr:last-child { font-weight: 700; }

/* Der Normalfall: fast jeder Treffer ist die kleinste Gruppe.
   Diese Spalte bekommt deshalb das Gewicht, nicht die Traumzahlen
   ganz rechts. */
.spielothek-regeln-tabelle .ist-normalfall {
  color: var(--fh-gold, #e8b64c);
  font-weight: 700;
  background: color-mix(in srgb, var(--fh-gold, #e8b64c) 8%, transparent);
}
.spielothek-regeln-tabelle thead th.ist-normalfall::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: .2rem;
  border-radius: 2px;
  background: var(--fh-gold, #e8b64c);
}

/* Trefferquote in der Beschriftung - die Zahl ist die Aussage,
   deshalb steht sie ruhig und nicht als Signalfarbe da. */
.spielothek-regeln-quote {
  margin-left: .4rem;
  padding: .05rem .4rem;
  border: 1px solid var(--fh-linie, rgba(255, 255, 255, .14));
  border-radius: 999px;
  font-weight: 600;
  font-size: .78em;
  opacity: .85;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .spielothek-verlust-icon.ist-bewegt { animation: none; }
}

/* ======================================================
   SPIELOTHEK: WALZEN ALS ECHTER AUTOMAT
   ---------------------------------------------------
   Aus dem flachen Kasten wird ein Geraet: Holzkorpus, Messingrahmen
   mit Nieten, Glasscheibe mit Lichtreflex darueber. Alles reines
   CSS - keine Bilder, keine zusaetzlichen Anfragen.

   Die Grundregeln fuer .spielothek-slot-symbol stehen weiterhin in
   css/60-fortschritt.css (Groesse, Fenster-Ausschnitt, Landen-Glow).
   Hier kommt nur die Optik obendrauf, damit die dortige, sorgfaeltig
   austarierte Dreh-Mechanik unangetastet bleibt.
====================================================== */
.spielothek-slot-reels {
  position: relative;
  padding: 14px 16px;
  border-radius: 14px;
  /* Holzkorpus */
  background:
    repeating-linear-gradient(92deg,
      rgba(0, 0, 0, .16) 0 2px, transparent 2px 7px),
    linear-gradient(165deg, #3a2a1a, #1d150d 60%, #241a10);
  /* Messingrahmen aussen, dunkler Kern innen */
  box-shadow:
    0 0 0 2px rgba(214, 168, 79, .55),
    0 0 0 5px rgba(90, 62, 26, .8),
    inset 0 2px 10px rgba(0, 0, 0, .7),
    0 10px 24px rgba(0, 0, 0, .45);
  /* Fuer das Kippen der einzelnen Walzen beim Landen */
  perspective: 640px;
}

/* Nieten in den vier Ecken des Messingrahmens */
.spielothek-slot-reels::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 10px;
  pointer-events: none;
  background:
    radial-gradient(circle at 6px 6px,       rgba(255, 226, 168, .85) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 6px) 6px,       rgba(255, 226, 168, .85) 0 2px, transparent 2.5px),
    radial-gradient(circle at 6px calc(100% - 6px),       rgba(255, 226, 168, .85) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), rgba(255, 226, 168, .85) 0 2px, transparent 2.5px);
}

/* Glasscheibe ueber jeder Walze. ::after ist in 60-fortschritt.css
   bereits fuer den Landen-Glow belegt, deshalb ::before. */
.spielothek-slot-symbol::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, .22) 0%,
      rgba(255, 255, 255, .06) 28%,
      transparent 46%),
    linear-gradient(0deg, rgba(0, 0, 0, .35), transparent 40%);
}

/* Landen mit Tiefe: die Walze kippt kurz nach hinten und faengt sich */
.spielothek-slot-symbol-landed {
  animation: spielothekWalzeKippt .55s cubic-bezier(.34, 1.5, .64, 1);
}

@keyframes spielothekWalzeKippt {
  0%   { transform: perspective(600px) rotateX(-32deg) scale(1.04); }
  55%  { transform: perspective(600px) rotateX(9deg)  scale(1.1); }
  100% { transform: perspective(600px) rotateX(0)     scale(1); }
}

/* ---- Gewinnlinie ---- */
.spielothek-slot-reels.hat-treffer::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 3px;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent, rgba(255, 226, 168, .95), rgba(255, 180, 90, .95), transparent);
  box-shadow: 0 0 14px rgba(255, 200, 120, .8);
  pointer-events: none;
  /* Erst zeichnen, wenn alle Walzen stehen - die letzte landet bei
     hoechstens 900 + 5 x 600 ms. */
  animation: spielothekGewinnlinie .7s ease-out 1.2s forwards;
}

@keyframes spielothekGewinnlinie {
  0%   { transform: translateY(-50%) scaleX(0);   opacity: 0; }
  40%  { transform: translateY(-50%) scaleX(1);   opacity: 1; }
  100% { transform: translateY(-50%) scaleX(1);   opacity: .55; }
}

/* Die Walzen, die den Treffer gebracht haben, bekommen einen Ring -
   sichtbar erst, wenn diese Walze auch tatsaechlich gelandet ist. */
.spielothek-slot-symbol.ist-treffer.spielothek-slot-symbol-landed {
  /* Im Browser gesehen: mit 18px Schein und einem fast weissen Ring
     verschwanden die Strichzeichnungen im Licht - man sah drei
     leuchtende Kacheln, aber nicht mehr, WELCHE Symbole getroffen
     hatten. Ein Treffer, den man nicht lesen kann, ist keine
     Rueckmeldung. Jetzt markiert nur noch ein ruhiger Messingring,
     der Schein ist auf ein Drittel herunter. */
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, .5),
    0 0 0 2px rgba(226, 196, 138, .8),
    0 0 6px rgba(190, 150, 84, .35);
}

/* ======================================================
   SPIELOTHEK: VERLUST
====================================================== */

/* 1. Die Totenkoepfe lachen */
.spielothek-slot-reels.ist-verloren .ist-totenkopf .spielothek-slot-strip {
  animation: spielothekTotenkopfLacht .42s ease-in-out 4;
  transform-origin: 50% 70%;
}

@keyframes spielothekTotenkopfLacht {
  0%   { transform: translateY(0)     rotate(0)     scale(1); }
  25%  { transform: translateY(-4px)  rotate(-7deg) scale(1.14); }
  50%  { transform: translateY(1px)   rotate(0)     scale(.96); }
  75%  { transform: translateY(-3px)  rotate(7deg)  scale(1.1); }
  100% { transform: translateY(0)     rotate(0)     scale(1); }
}

/* 2. Danach sacken alle Walzen grau weg */
.spielothek-slot-reels.ist-verloren .spielothek-slot-symbol {
  animation: spielothekWalzeSackt .9s ease-in .75s forwards;
}

@keyframes spielothekWalzeSackt {
  0%   { transform: translateY(0)   rotate(0);      filter: none; }
  100% { transform: translateY(9px) rotate(-2.5deg);
         filter: grayscale(.85) brightness(.55); }
}

.spielothek-slot-reels.ist-verloren {
  animation: spielothekKorpusErlischt .9s ease-in .75s forwards;
}

@keyframes spielothekKorpusErlischt {
  to {
    box-shadow:
      0 0 0 2px rgba(214, 168, 79, .2),
      0 0 0 5px rgba(90, 62, 26, .45),
      inset 0 2px 14px rgba(0, 0, 0, .85),
      0 10px 24px rgba(0, 0, 0, .45);
  }
}

/* 3. Muenzen rieseln an der Dublonen-Anzeige davon */
.spielothek-currency-bar { position: relative; }

/* ======================================================
   SPIELOTHEK: HEBEL
====================================================== */
.spielothek-bedienung {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  .spielothek-slot-symbol-landed,
  .spielothek-slot-reels.hat-treffer::before,
  .spielothek-slot-reels.ist-verloren,
  .spielothek-slot-reels.ist-verloren .spielothek-slot-symbol,
  .spielothek-slot-reels.ist-verloren .ist-totenkopf .spielothek-slot-strip {
    animation: none;
  }
  /* Die Gewinnlinie soll trotzdem zu sehen sein, nur ohne Aufbau. */
  .spielothek-slot-reels.hat-treffer::before {
    transform: translateY(-50%) scaleX(1);
    opacity: .55;
  }
}

/* ======================================================
   ANMELDUNG: GOOGLE UND E-MAIL
   ---------------------------------------------------
   Die Knoepfe teilen sich .twitch-login-btn (Form, Groesse,
   Fokusring) - hier kommt nur die Farbe des jeweiligen Anbieters
   dazu. Google traegt bewusst Weiss auf Dunkel: das ist die von
   Google vorgegebene Darstellung, und ein lila Google-Knopf sieht
   nach Fehler aus.
====================================================== */
.google-login-btn {
  background: #ffffff;
  color: #1f1f1f;
}

.google-login-btn:hover:not(:disabled) { background: #f1f3f4; }
.google-login-btn .twitch-icon { fill: currentColor; }

.fh-anmelde-formular { margin-top: 14px; }

/* Umschalter Anmelden / Registrieren. Zwei Knoepfe in einer
   Messingschiene - dieselbe Sprache wie die Spielothek, damit die
   Seite nicht in zwei Gestaltungen zerfaellt. */
.fh-anmelde-umschalter {
  display: flex;
  gap: 4px;
  margin: 0 0 1rem;
  padding: 4px;
  border: 1px solid var(--fh-linie, rgba(255, 255, 255, .12));
  border-radius: var(--fh-radius, 12px);
  background: rgba(12, 16, 26, .5);
}

.fh-anmelde-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: calc(var(--fh-radius, 12px) - 4px);
  background: transparent;
  color: var(--fh-muted-fg, #8296ad);
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  transition: background var(--fh-dauer, .2s) var(--fh-ease, ease),
              color var(--fh-dauer, .2s) var(--fh-ease, ease);
}

.fh-anmelde-tab:hover { color: inherit; }

.fh-anmelde-tab.ist-aktiv {
  border-color: var(--fh-linie, rgba(255, 255, 255, .16));
  background: rgba(255, 255, 255, .07);
  color: var(--fh-gold, #f0c96a);
  font-weight: 600;
}

.fh-anmelde-tab:focus-visible {
  outline: 2px solid var(--fh-gold, #f0c96a);
  outline-offset: 2px;
}

/* Im Registrieren-Formular stehen die Felder untereinander statt in
   einer Reihe - dort greift das flex-basis von .fh-anmelde-feld nicht,
   deshalb hier die volle Breite. */
.fh-anmelde-formular > .fh-anmelde-feld { width: 100%; }
.fh-anmelde-formular > .fh-anmelde-feldname:not(:first-child) { margin-top: 12px; }
.fh-anmelde-formular > .fh-anmelde-absenden { margin-top: 14px; width: 100%; }

/* "Passwort vergessen?" ist ein Knopf, soll aber wie ein Link
   aussehen - ein zweiter Knopf neben "Anmelden" wuerde die
   Hauptaktion verwaessern. */
.fh-anmelde-link {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fh-muted-fg, #8296ad);
  font: inherit;
  font-size: .82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.fh-anmelde-link:hover { color: var(--fh-gold, #f0c96a); }

.fh-anmelde-link:focus-visible {
  outline: 2px solid var(--fh-gold, #f0c96a);
  outline-offset: 2px;
  border-radius: 4px;
}

.fh-anmelde-feldname {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--fh-muted-fg, #8296ad);
}

.fh-anmelde-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fh-anmelde-feld {
  flex: 1 1 200px;
  min-width: 0;          /* sonst sprengt das Feld die Reihe auf
                            schmalen Schirmen */
  padding: 10px 12px;
  border-radius: var(--fh-radius, 12px);
  border: 1px solid var(--fh-linie, rgba(255, 255, 255, .16));
  background: rgba(12, 16, 26, .6);
  color: inherit;
  font: inherit;
}

.fh-anmelde-feld:focus-visible {
  outline: 2px solid var(--fh-gold, #f0c96a);
  outline-offset: 2px;
}

.fh-anmelde-absenden { flex: 0 0 auto; }

/* Statuszeile der Anmeldung. Fehler bekommen Farbe, alles andere
   bleibt ruhig - eine rote Zeile fuer "Link verschickt" waere
   irrefuehrend. */
/* Eigene Meldungszeile der Anmeldekarte. Frueher schrieb
   fhAnmeldeStatus() in #fh-anmelde-status - das ist aber der
   Wer-bin-ich-Kasten von zeichneAnmeldeStatus(); beide haben sich
   gegenseitig ueberschrieben, und solange kein Name gespeichert war,
   stand der Kasten auf hidden und die Meldung war unsichtbar. */
.fh-anmelde-meldung {
  margin: 1rem 0 0;
  padding: .7rem .85rem;
  border: 1px solid var(--fh-linie, rgba(255, 255, 255, .12));
  border-radius: var(--fh-radius, 12px);
  background: rgba(255, 255, 255, .04);
  font-size: .86rem;
  line-height: 1.5;
}

.fh-anmelde-meldung:empty { display: none; }
.fh-anmelde-meldung.ist-fehler { color: var(--fh-danger, #e53935); }
.fh-anmelde-meldung.ist-gut { color: var(--fh-success, #55c878); }

.fh-anmelde-status.ist-fehler { color: var(--fh-danger, #ff6b6b); }
.fh-anmelde-status.ist-gut { color: var(--fh-success, #7ddba4); }


/* ======================================================
   ANMELDESEITE - DURCHGANG 2
   ---------------------------------------------------
   Alles hier folgt EINER Staffel statt gewachsener Einzelwerte:

     --fha-luft-1 .5rem   zwischen Beschriftung und Feld
     --fha-luft-2 .9rem   zwischen zwei Feldern
     --fha-luft-3 1.4rem  zwischen Bloecken
     --fha-luft-4 2rem    zwischen Karten

   Farben kommen aus den Tokens in css/00-basis.css, nicht als
   Rohwert. Die Ersatzwerte in var(...) sind nur Netz und doppelter
   Boden, falls ein Token einmal fehlt.
====================================================== */
#login {
  --fha-luft-1: .5rem;
  --fha-luft-2: .9rem;
  --fha-luft-3: 1.4rem;
  --fha-luft-4: 2rem;
  --fha-rand: var(--fh-linie, rgba(255, 255, 255, .12));
  --fha-flaeche: rgba(255, 255, 255, .035);
}

/* ---------- Karten: eine Sprache statt drei ---------- */
#login .fh-anmelde-karte {
  padding: var(--fha-luft-3);
  border: 1px solid var(--fha-rand);
  border-radius: var(--fh-radius, 14px);
  background: var(--fha-flaeche);
}

#login .fh-anmelde-spalten {
  gap: var(--fha-luft-3);
  margin-bottom: var(--fha-luft-4);
}

/* ---------- Schrift: drei klar getrennte Ebenen ---------- */
#login .fh-anmelde-titel {
  margin: 0 0 var(--fha-luft-2);
  padding-right: 0;
  font-family: var(--fh-font-display, 'Oswald'), 'Arial Narrow', sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fh-gold-bright, #ffe9b0);
}

#login .fh-anmelde-text {
  margin: 0 0 var(--fha-luft-3);
  font-size: .87rem;
  line-height: 1.55;
  color: var(--fh-muted-fg, #8296ad);
}

#login .fh-anmelde-feldname {
  display: block;
  margin: var(--fha-luft-2) 0 var(--fha-luft-1);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fh-muted-fg, #8296ad);
}

#login .fh-anmelde-formular > .fh-anmelde-feldname:first-child,
#login .wheel-nickname-box > .fh-anmelde-feldname:first-child { margin-top: 0; }

#login .fh-anmelde-hinweis {
  margin: var(--fha-luft-2) 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--fh-muted-fg, #8296ad);
  opacity: .85;
}

/* ---------- Felder und Knoepfe ---------- */
#login .fh-anmelde-feld {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--fha-rand);
  border-radius: var(--fh-radius, 12px);
  background: rgba(12, 16, 26, .6);
  color: inherit;
  font: inherit;
  transition: border-color var(--fh-dauer, 200ms) var(--fh-ease, ease),
              background var(--fh-dauer, 200ms) var(--fh-ease, ease);
}

#login .fh-anmelde-feld:hover { border-color: rgba(255, 255, 255, .24); }

#login .fh-anmelde-feld:focus {
  outline: none;
  border-color: var(--fh-gold, #d6a84f);
  background: rgba(12, 16, 26, .85);
}

#login .fh-anmelde-feld:focus-visible {
  outline: 2px solid var(--fh-gold, #d6a84f);
  outline-offset: 2px;
}

#login .fh-anmelde-absenden {
  width: 100%;
  margin-top: var(--fha-luft-3);
}

/* .twitch-login-area ist seit jeher eine flex-Reihe (drei Regeln in
   drei Dateien setzen daran herum). Seit im selben Kasten auch das
   Passwortformular und der "oder"-Trenner stehen, wurden die zu
   Reihen-Elementen und landeten nebeneinander. Eine Spalte raeumt
   das auf, ohne die alten Regeln anzufassen. */
#login .twitch-login-area {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--fha-luft-2);
  margin-top: 0;
}

#login .twitch-login-btn {
  width: 100%;
  justify-content: flex-start;
  margin: 0;
}

#login .fh-anmelde-formular { margin: 0; }

/* "oder" mit Linien links und rechts. */
#login .fh-anmelde-trenner {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: var(--fha-luft-3) 0;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fh-muted-fg, #8296ad);
}

#login .fh-anmelde-trenner::before,
#login .fh-anmelde-trenner::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--fha-rand);
}

/* ======================================================
   UMSCHALTER MIT LAEUFER
   Ein wanderndes Element statt zweier harter Hintergruende -
   dadurch sieht man, WOHIN man wechselt, nicht nur DASS.
====================================================== */
#login .fh-anmelde-umschalter {
  position: relative;
  margin-bottom: var(--fha-luft-3);
}

.fh-anmelde-laeufer {
  position: absolute;
  top: 4px;
  left: 0;
  bottom: 4px;
  width: 0;
  border-radius: calc(var(--fh-radius, 12px) - 4px);
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--fh-linie, rgba(255, 255, 255, .16));
  transition: transform var(--fh-dauer, 200ms) var(--fh-ease, ease),
              width var(--fh-dauer, 200ms) var(--fh-ease, ease);
  pointer-events: none;
}

/* Der Laeufer traegt jetzt die Flaeche - der Reiter selbst nicht mehr. */
.fh-anmelde-tab.ist-aktiv {
  background: transparent;
  border-color: transparent;
}

#login .fh-anmelde-tab { position: relative; z-index: 1; }

/* ======================================================
   FELDWECHSEL MIT RICHTUNG
   Die Buehne haelt die Hoehe, damit die Karte beim Wechsel nicht
   springt; overflow versteckt das hereinschiebende Feld, solange
   es noch draussen ist.
====================================================== */
.fh-anmelde-buehne {
  position: relative;
  overflow: hidden;
}

@keyframes fhFeldRein {
  from { opacity: 0; transform: translateX(var(--fha-von, 24px)); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fhFeldRaus {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(var(--fha-nach, -24px)); }
}

.kommt-von-rechts { --fha-von:  24px; animation: fhFeldRein 260ms var(--fh-ease, ease) both; }
.kommt-von-links  { --fha-von: -24px; animation: fhFeldRein 260ms var(--fh-ease, ease) both; }

/* Das abtretende Feld liegt waehrend des Wechsels darueber, damit
   die Karte nicht kurz auf null Hoehe zusammenfaellt. */
.geht-raus-links,
.geht-raus-rechts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.geht-raus-links  { --fha-nach: -24px; animation: fhFeldRaus 260ms var(--fh-ease, ease) both; }
.geht-raus-rechts { --fha-nach:  24px; animation: fhFeldRaus 260ms var(--fh-ease, ease) both; }

/* ======================================================
   UEBERSCHRIFT: BUCHSTABEN LAUFEN EINMAL EIN
   Der Endzustand steht hier, nicht in der Keyframe - ohne das
   Skript steht die Ueberschrift also trotzdem vollstaendig da.
====================================================== */
/* Der Kicker schimmert auf dieser Seite EINMAL durch statt endlos.
   Die Dauerschleife aus css/90-typografie.css ist damit hier weg -
   eine von 98 auf der Seite, und die erste, die faellt. */
#login .fh-page-kicker { animation: none; }

#login .fh-schrift-auftritt.laeuft-ein {
  animation: fhKickerRein 480ms var(--fh-ease, cubic-bezier(.22, .9, .32, 1.2)) both,
             fhKickerSchimmer 1.6s var(--fh-ease, ease) 420ms 1 both;
}

@keyframes fhKickerRein {
  from { opacity: 0; transform: translateY(8px); letter-spacing: .6em; }
  to   { opacity: 1; transform: translateY(0); letter-spacing: .42em; }
}

/* Die Ueberschrift als Block. transform statt Buchstaben, weil ihr
   Lichtpunkt-Effekt (css/90-typografie.css) mit background-clip: text
   arbeitet - Kindelemente haetten dort keine Fuellung mehr. */
.fh-titel-auftritt.laeuft-ein {
  animation: fhTitelRein 520ms var(--fh-ease, cubic-bezier(.22, .9, .32, 1.2)) both;
}

@keyframes fhTitelRein {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------
   [hidden] SCHLAEGT NICHT GEGEN EIN EIGENES display
   Der Browser setzt fuer [hidden] nur display: none in seinem
   Standardblatt - jede eigene display-Angabe gewinnt dagegen.

   Beide Kaesten hier hatten genau das: .fh-anmelde-spalten ist
   grid, .fh-anmelde-status ist flex. Der Statuskasten stand
   dadurch fuer JEDEN abgemeldeten Besucher als leerer, 31px hoher
   Streifen unter dem Vorspann - obwohl zeichneAnmeldeStatus() ihn
   ordnungsgemaess auf hidden setzt.
--------------------------------------------------- */
#login .fh-anmelde-spalten[hidden],
#login .fh-anmelde-status[hidden] { display: none; }

/* ======================================================
   PASSWORTFELD MIT PAPAGEI
   Er haelt sich die Augen zu, solange getippt wird, und lugt
   hervor, wenn das Passwort sichtbar ist. Damit sieht man den
   Zustand des Feldes, statt ihn aus einem Symbol zu raten.
====================================================== */
.fh-passwortfeld {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.fh-passwortfeld .fh-anmelde-feld {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 44px;
}

.fh-papagei-huelle {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: block;
}

.fh-papagei {
  width: 40px;
  height: 40px;
  overflow: visible;
}

/* Die Fluegel liegen neben dem Kopf und wandern beim Tippen genau
   auf die Augen: von (9,30) auf (19,23) sind das +10/-7, spiegel-
   verkehrt fuer rechts. Reine Verschiebung statt Drehung - bei einer
   Drehung landete der Fluegel ueber statt auf dem Auge. */
.fh-papagei-fluegel {
  transform: translate(0, 0);
  transition: transform 260ms var(--fh-ease, cubic-bezier(.22, .9, .32, 1.2));
}

.fh-papagei.haelt-zu .fh-papagei-fluegel-links  { transform: translate(10px, -7px); }
.fh-papagei.haelt-zu .fh-papagei-fluegel-rechts { transform: translate(-10px, -7px); }

/* Blinzeln, sobald die Fluegel oben sind - sonst starrt der Vogel
   durch seine eigenen Fluegel hindurch. */
.fh-papagei.haelt-zu .fh-papagei-augen { opacity: 0; }
.fh-papagei-augen { transition: opacity 160ms var(--fh-ease, ease) 100ms; }

.fh-papagei-pupille {
  transition: transform 180ms var(--fh-ease, ease);
}

.fh-papagei.nickt { animation: fhPapageiNickt 90ms ease-out; }

@keyframes fhPapageiNickt {
  50% { transform: translateY(1.5px) scale(1.04); }
}

.fh-passwort-auge {
  position: absolute;
  right: 50px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fh-muted-fg, #8296ad);
  font-size: 13px;
  cursor: pointer;
  transition: color var(--fh-dauer, 200ms) var(--fh-ease, ease),
              background var(--fh-dauer, 200ms) var(--fh-ease, ease);
}

.fh-passwort-auge:hover {
  color: var(--fh-gold, #d6a84f);
  background: rgba(255, 255, 255, .06);
}

.fh-passwort-auge:focus-visible {
  outline: 2px solid var(--fh-gold, #d6a84f);
  outline-offset: 2px;
}

/* Der Querstrich ueber dem Auge verschwindet, sobald das Passwort
   sichtbar ist - dieselbe Aussage wie der Papagei, nur klein. */
.fh-passwort-auge-zu::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -2px 0 rgba(12, 16, 26, .9);
  transform: rotate(-38deg) scaleX(1);
  transform-origin: center;
  transition: transform 200ms var(--fh-ease, ease);
}

.fh-auge-bild { width: 17px; height: 17px; display: block; }

.fh-passwort-auge.ist-offen { color: var(--fh-gold, #d6a84f); }
.fh-passwort-auge.ist-offen .fh-passwort-auge-zu::after { transform: rotate(-35deg) scaleX(0); }

/* ---------- Drei Dublonen als Staerke ---------- */
.fh-passwort-staerke {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: var(--fha-luft-1) 0 0;
  min-height: 18px;
  font-size: .76rem;
  color: var(--fh-muted-fg, #8296ad);
}

.fh-staerke-muenze {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--fh-linie, rgba(255, 255, 255, .2));
  background: transparent;
  transition: background var(--fh-dauer, 200ms) var(--fh-ease, ease),
              border-color var(--fh-dauer, 200ms) var(--fh-ease, ease);
}

.fh-staerke-muenze.ist-voll {
  background: var(--fh-gold, #d6a84f);
  border-color: var(--fh-gold-bright, #ffe9b0);
}

.fh-staerke-muenze.faellt { animation: fhMuenzeFaellt 340ms var(--fh-ease, cubic-bezier(.22, .9, .32, 1.2)); }

@keyframes fhMuenzeFaellt {
  0%   { transform: translateY(-8px) scale(.5); }
  60%  { transform: translateY(1px) scale(1.15); }
  100% { transform: translateY(0) scale(1); }
}

.fh-staerke-wort { margin-left: .35rem; }
.fh-passwort-staerke[data-stufe="3"] .fh-staerke-wort { color: var(--fh-success, #55c878); }

/* ======================================================
   KENNWORT: ZUGEKLAPPT, BIS MAN ES BRAUCHT
====================================================== */
.fh-anmelde-klapp { padding: 0; }

.fh-anmelde-klapp-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--fha-luft-3);
  cursor: pointer;
  list-style: none;
}

.fh-anmelde-klapp-kopf::-webkit-details-marker { display: none; }

.fh-anmelde-klapp-kopf:focus-visible {
  outline: 2px solid var(--fh-gold, #d6a84f);
  outline-offset: -2px;
  border-radius: var(--fh-radius, 14px);
}

.fh-anmelde-klapp-titel {
  font-family: var(--fh-font-display, 'Oswald'), 'Arial Narrow', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fh-gold-bright, #ffe9b0);
}

/* Ein Pfeil aus zwei Strichen - kein Emoji, kein Zeichensatz. */
.fh-anmelde-klapp-zeichen {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--fh-muted-fg, #8296ad);
  border-bottom: 2px solid var(--fh-muted-fg, #8296ad);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--fh-dauer, 200ms) var(--fh-ease, ease);
}

.fh-anmelde-klapp[open] .fh-anmelde-klapp-zeichen {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.fh-anmelde-klapp-inhalt {
  padding: 0 var(--fha-luft-3) var(--fha-luft-3);
  animation: fhKlappRein 240ms var(--fh-ease, ease);
}

@keyframes fhKlappRein {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#login .fh-kennwort-anzeige,
#login .fh-kennwort-eingabezeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fha-luft-2);
  margin-top: var(--fha-luft-2);
}

#login .fh-kennwort-eingabezeile .fh-anmelde-feld { flex: 1 1 180px; width: auto; }
#login .fh-kennwort-trenner { margin-top: var(--fha-luft-3); margin-bottom: 0; }

/* ---------- Platzhalter-Bild in der Menueleiste ---------- */
.fh-avatar-platzhalter {
  border: 1.5px dashed var(--fh-linie, rgba(255, 255, 255, .3));
  opacity: .75;
  transition: opacity var(--fh-dauer, 200ms) var(--fh-ease, ease),
              border-color var(--fh-dauer, 200ms) var(--fh-ease, ease);
}

.fh-avatar-platzhalter:hover {
  opacity: 1;
  border-color: var(--fh-gold, #d6a84f);
}

.fh-player-card-leer {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.fh-player-card-leer .fh-sidebar-footer-status { margin: 0; }

/* ======================================================
   BEWEGUNG REDUZIEREN
   Der Papagei bleibt - er ist ein Zustand, keine Animation.
   Er wechselt dann nur ohne Uebergang.
====================================================== */
@media (prefers-reduced-motion: reduce) {
  .fh-anmelde-laeufer,
  .fh-papagei-fluegel,
  .fh-papagei-pupille,
  .fh-passwort-auge-zu::after,
  .fh-staerke-muenze,
  .fh-anmelde-klapp-zeichen {
    transition: none;
  }

  .kommt-von-rechts,
  .kommt-von-links,
  .geht-raus-links,
  .geht-raus-rechts,
  .fh-titel-auftritt.laeuft-ein,
  #login .fh-schrift-auftritt.laeuft-ein,
  .fh-staerke-muenze.faellt,
  .fh-papagei.nickt,
  .fh-anmelde-klapp-inhalt {
    animation: none;
  }
}

@media (max-width: 560px) {
  #login {
    --fha-luft-3: 1.1rem;
    --fha-luft-4: 1.4rem;
  }
}

/* ======================================================
   ABMELDEN
   ---------------------------------------------------
   Die Karte steht bewusst unten und ohne Hervorhebung: ein Weg
   hinaus, den man findet, wenn man ihn sucht - und nicht
   versehentlich trifft, wenn man sich gerade anmelden wollte.
====================================================== */
.fh-abmelde-karte {
  margin-top: 1.1rem;
}

/* Das Raster darueber hat zwei Spalten; diese Karte steht allein
   und soll nicht auf halbe Breite springen. */
.fh-abmelde-karte .code-button {
  margin-top: .8rem;
}

/* ---------- Die Rueckfrage ----------
   Ein echtes <dialog>. Es bringt Fokusfalle, Esc und den inerten
   Hintergrund mit - bei einem Schritt, der Daten vernichtet, ist
   das Pflicht und kein Zusatz. */
.fh-abmelde-dialog {
  /* Der Sternchen-Reset in 00-basis.css setzt margin: 0 auf ALLES -
     damit faellt auch die "margin: auto"-Zentrierung weg, die ein
     <dialog> vom Browser mitbringt. Der Dialog klebte dadurch oben
     links in der Ecke. Beides hier wieder ausdruecklich setzen. */
  inset: 0;
  margin: auto;
  width: min(34rem, calc(100vw - 2rem));
  padding: 1.5rem 1.4rem 1.3rem;
  border: 1px solid var(--fh-linie, rgba(255, 255, 255, .14));
  border-radius: var(--fh-radius, 14px);
  background: var(--fh-surface, #141822);
  color: var(--fh-text, #e8e6e3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.fh-abmelde-dialog::backdrop {
  background: rgba(6, 8, 13, .72);
  backdrop-filter: blur(3px);
}

/* [hidden] schlaegt die eigene display-Angabe eines Elements
   NICHT. Ohne diese Zeile stuenden Gast- und Normalfall
   gleichzeitig im Dialog - derselbe Fehler ist in diesem Projekt
   schon mehrfach aufgetreten. */
.fh-abmelde-dialog [hidden] {
  display: none !important;
}

.fh-abmelde-titel {
  margin: 0 0 .9rem;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  color: var(--fh-gold-bright, #f0c96a);
}

.fh-abmelde-text {
  margin: 0 0 .8rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--fh-text-weich, rgba(232, 230, 227, .82));
}

/* Die Warnung traegt als einzige Flaeche im Dialog Farbe. Rot
   allein waere zu wenig - wer es nicht unterscheiden kann, sieht
   trotzdem den abgesetzten Kasten und den staerkeren Rand. */
.fh-abmelde-warnung {
  margin: 0 0 1rem;
  padding: .7rem .8rem;
  border-left: 3px solid var(--fh-rot, #c8553d);
  border-radius: 0 var(--fh-radius-klein, 8px) var(--fh-radius-klein, 8px) 0;
  background: rgba(200, 85, 61, .12);
  font-size: .92rem;
  line-height: 1.5;
}

.fh-abmelde-kennwort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}

.fh-abmelde-meldung {
  min-height: 1.2em;
  margin: 0 0 .6rem;
  font-size: .9rem;
  color: var(--fh-gold-bright, #f0c96a);
}

.fh-abmelde-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: flex-end;
}

/* Der gefaehrliche Knopf sieht auch gefaehrlich aus - aber erst
   im Gastfall, wo wirklich geloescht wird. */
.fh-abmelde-gefahr {
  border-color: var(--fh-rot, #c8553d);
  color: var(--fh-rot-hell, #e07a62);
}

.fh-abmelde-gefahr:hover,
.fh-abmelde-gefahr:focus-visible {
  border-color: var(--fh-rot-hell, #e07a62);
  color: var(--fh-rot-hell, #e07a62);
  box-shadow: 0 0 20px rgba(200, 85, 61, .35);
}

@media (max-width: 460px) {
  /* Auf schmalen Schirmen untereinander, damit die Beschriftungen
     nicht umbrechen. column-reverse dreht die Reihenfolge um, so
     dass "Angemeldet bleiben" UNTEN steht - der harmlose Weg liegt
     damit am naechsten am Daumen, so wie es die Systemdialoge von
     iOS und Android auch halten. */
  .fh-abmelde-knoepfe {
    flex-direction: column-reverse;
  }

  .fh-abmelde-knoepfe .code-button {
    width: 100%;
  }
}