/* ===========================
   Allgemeine Seiten-Defaults
   =========================== */
body {
  background: var(--bg, #0a0c14);
  color: var(--text, #f2f4f8);
}
.section-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.2rem; /* <<< Abstand unter Abschnittstitel */
}

/* ===========================
   Podium Section (Top 3 Casinos)
   =========================== */
.podium-section {
  position: relative;
  margin: 10rem auto 5rem; /* <<< Abstand: oben/unten */
  padding: 3rem 2rem;      /* <<< Innenabstand im Block */
  border-radius: 18px;
  overflow: hidden;
}

/* ===========================
   Regen-Effekte (Icons)
   =========================== */
.falling-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1; /* <<< über Glas, unter Karten */
}
.falling-icons .falling {
  position: absolute;
  top: -15%;                /* Start über dem Viewport */
  height: auto;             /* behält Seitenverhältnis */
  width: auto;              /* Originalgröße */
  max-width: 80px;          /* <<< Icon-Größe */
  opacity: 1;               /* volle Sichtbarkeit */
  animation: fallAnim linear infinite;
}

/* Unterschiedliche Spuren + Geschwindigkeit einstellen */
.falling-icons .falling:nth-child(1){ left:5%;  animation-duration: 9s;  animation-delay: 0s; }
.falling-icons .falling:nth-child(2){ left:20%; animation-duration: 12s; animation-delay: 2s; }
.falling-icons .falling:nth-child(3){ left:35%; animation-duration: 8s;  animation-delay: 4s; }
.falling-icons .falling:nth-child(4){ left:55%; animation-duration: 14s; animation-delay: 1s; }
.falling-icons .falling:nth-child(5){ left:70%; animation-duration: 11s; animation-delay: 3s; }
.falling-icons .falling:nth-child(6){ left:85%; animation-duration: 5s;  animation-delay: 5s; }

/* <<< Animation: Dauer = Geschwindigkeit (kleinere Zahl = schneller) */
@keyframes fallAnim {
  0%   { transform: translateY(-15%) rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; } /* Einblenden */
  100% { transform: translateY(120vh) rotate(360deg); opacity: 0.9; }
}

/* ===========================
   Glas-Layer (Overlay)
   =========================== */
.podium-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 30, 0.6); /* <<< Hintergrundfarbe + Deckkraft */
  backdrop-filter: blur(8px);        /* <<< Stärke vom Glas-Effekt */
  border-radius: var(--radius, 16px);
  z-index: 0; /* <<< ganz hinten */
}

/* ===========================
   Logo über Glas & Regen
   =========================== */
.podium-logo {
  position: relative;
  z-index: 3; /* <<< Logo sitzt ganz oben */
  margin: 1.5rem 0;
  text-align: center;
}
.podium-logo img {
  max-width: 640px; /* <<< Logo-Größe */
  height: auto;
}

/* ===========================
   Karten-Container
   =========================== */
.podium-container {
  position: relative;
  z-index: 2; /* zwischen Overlay und Logo */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.5rem;   /* <<< Abstand Karten */
  padding: 2rem 1rem;
}

/* ===========================
   Karten-Basis
   =========================== */
.podium-card {
  flex: 1 1 240px;
  background: #151518;
  border: 1px solid #24262b;
  border-radius: 18px;
  text-align: center;
  padding: 1.5rem; /* <<< Innenabstand Karte */
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  position: relative; /* <<< für Badges */
  --base-transform: scale(1) translateY(0); /* <<< Standard-Var für Animation */
}

/* Podest-Ränge (#1,#2,#3) → setzen eigene Basis-Transformation */
.podium-card.gold   { --base-transform: scale(1.1) translateY(-20px); background: linear-gradient(180deg,#ffd700,#ffb600); }
.podium-card.silver { --base-transform: scale(0.95) translateY(20px); background: linear-gradient(180deg,#d9d9d9,#bfbfbf); }
.podium-card.bronze { --base-transform: scale(0.95) translateY(25px); background: linear-gradient(180deg,#cd7f32,#a0522d); }

/* Float-Animation → nutzt die --base-transform */
.floating {
  animation: floatAnim 6s ease-in-out infinite;
}
@keyframes floatAnim {
  0%,100% { transform: var(--base-transform) translateY(0); }
  50%     { transform: var(--base-transform) translateY(-12px); } /* <<< Höhe des Schwebens */
}

/* ===========================
   Karten-Inhalte
   =========================== */
.podium-card img {
  max-width: 200px;     /* <<< Casino-Logo Größe */
  margin-bottom: 0.8rem;
}
.podium-card h3 {
  margin: 0.6rem 0 0.2rem;
  font-size: 1.3rem;
  font-weight: 700;
}

/* Bonus & Details */
.bonus-highlight {
  font-size: 1.6rem; /* <<< Bonus groß hervorheben */
  font-weight: 800;
  margin: .5rem 0 1rem;
  text-transform: uppercase;
}
.podium-details {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  font-size: 1.2rem;  /* <<< Detailgröße */
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

/* Rank-Badge (#1,#2,#3 Label) */
.rank-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red, #ff3d3d);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
  z-index: 4;
}

/* Blink-Effekt für #1 */
.blink { animation: blinkAnim 1s infinite; }
@keyframes blinkAnim {
  0%,100% { color: #fff; text-shadow: 0 0 8px #fff; }
  50% { color: var(--red, #ff3d3d); text-shadow: 0 0 18px var(--red, #ff3d3d); }
}

/* Pulse-Effekt für #2/#3 */
.pulse { animation: pulseAnim 2s infinite; }
@keyframes pulseAnim {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .7; transform: scale(1.05); }
}

/* Spezielle Font für Gold (#1) */
.special-font {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
  font-size: 1.6rem;
}





/* ===========================
   Ranking Section mit Glas
   =========================== */
.casino-table-section {
  position: relative;
  margin: 5rem auto;
  border-radius: 18px;
  overflow: hidden;
}

.ranking-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 30, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  z-index: 0;
}

.casino-ranking-table {
  position: relative;
  z-index: 1;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px; /* Abstand zwischen den Zeilen */
}

.casino-ranking-table thead {
  background: rgba(255, 61, 61, 0.85);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}

.casino-ranking-table td,
.casino-ranking-table th {
  padding: 1rem;
  font-size: 1.1rem;
}

/* ===========================
   Reihen Styles
   =========================== */
.ranking-row {
  background: rgba(21, 21, 24, 0.8);
  border: 3px solid transparent;
  border-radius: 12px;
  transition: all 0.3s ease;
  font-weight: 700;
}

/* Top 1 Golden Blink */
.top-row {
  border-color: gold;
  animation: blinkGold var(--blink-speed, 1.2s) infinite alternate;
}
@keyframes blinkGold {
  0%,100% { box-shadow: 0 0 8px gold, inset 0 0 8px gold; }
  50%     { box-shadow: 0 0 18px #ffec80, inset 0 0 14px #ffec80; }
}

/* Andere Reihen → rotes/oranges zufälliges Blinken */
.blink-row {
  border-color: #ff3d3d;
  animation: blinkRed var(--blink-speed, 2s) infinite alternate;
  animation-delay: calc(var(--rand-delay, 0s)); /* Zufall per Inline-Style möglich */
}
@keyframes blinkRed {
  0%,100% { box-shadow: 0 0 6px #ff3d3d, inset 0 0 6px #ff3d3d; }
  50%     { box-shadow: 0 0 14px orange, inset 0 0 12px orange; }
}

/* Casino Logos */
.casino-logo {
  max-width: 160px;
  border-radius: 8px;
}

/* Special Font */
.special-font {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 1px;
}





/* ===========================
   Giveaways Grid & Cards
   =========================== */
.gw-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
@media (max-width: 992px) {
  .gw-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 576px) {
  .gw-grid { grid-template-columns: 1fr; }
}

.gw-card {
  background: #151518;
  border: 1px solid #24262b;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4); /* >>> einheitlich wie Podium */
}

.gw-media {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}
.gw-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gw-body {
  padding: 12px 14px;
}
.gw-title {
  font-size: 1.05rem;
  margin: 0 0 4px;
  font-weight: 700;
}
.gw-sub {
  color: #8a8f98;
  font-size: .85rem;
  margin: 0 0 8px;
  min-height: 1.15em;
}
.gw-meta {
  color: #8a8f98;
  font-size: .8rem;
  margin-top: 10px;
}
.btn-ghost {
  background: #2b2e34;
  color: #ddd;
  border: none;
  border-radius: 10px;
  padding: 6px 10px;
}



/* ===========================
   Leaderboard Section
   =========================== */
.lb-wrap { max-width: 1100px; margin-inline: auto; }
.lb-muted { color: #9aa0aa; }

.lb-card {
  background: #151518;
  border: 1px solid #24262b;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.03);
}

.lb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.lb-table thead th {
  color: #fff;
  font-weight: 700;
  background: #1a1c20;
  border: 1px solid #24262b;
  border-bottom-color: #2b2d33;
  font-size: .95rem;
  padding: .75rem 1rem;
}
.lb-table thead th:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.lb-table thead th:last-child  { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }

.lb-table tbody tr { color: #fff; }
.lb-row {
  background: #17181c;
  border: 1px solid #24262b;
  border-radius: 12px;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.lb-row:hover { background: #1b1d21; transform: translateY(-1px); border-color: #32353c; }
.lb-row > td { padding: 14px 16px; vertical-align: middle; }

/* 🔴 nur Leaderboard Badge */
.lb-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(90deg,#e0212d,#ff8a00);
  color: #fff;
  font-weight: 800;
}

.user-cell { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #0e0f10;
  border: 1px solid #24262b;
  flex: 0 0 52px;
}
.username { font-weight: 700; color: #fff; }

.tickets-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: 20px !important;
}
.tickets-num { font-weight: 800; font-size: 1.1rem; }




/* Leaderboard Section */
.leaderboard-section {
  margin-top: 5rem;   /* <<< Abstand von Giveaways */
  margin-bottom: 5rem;
}

.lb-wrap {
  max-width: 1100px;
  margin-inline: auto;
}






/* ===== Section Divider ===== */
.section-divider {
  margin: 60px auto 40px; /* Abstand oben/unten */
  text-align: center;
}

.divider-box {
  display: inline-block;
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
  border: 2px solid #e0212d;
  border-radius: 25px;
  padding: 10px 30px;
  position: relative;
  box-shadow: 0 0 20px rgba(224,33,45,0.6);
}

.divider-title {
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  margin: 0;
}

.divider-text {
  margin-top: 15px;
  color: #bbb;
  font-size: 1rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}









/* ===== Community Section (im Stil vom Divider) ===== */
.community-section {
  margin: 80px auto;
  text-align: center;
}

.community-box {
  display: inline-block;
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
  border: 2px solid #e0212d;
  border-radius: 25px;
  padding: 40px 30px;
  position: relative;
  box-shadow: 0 0 25px rgba(224,33,45,0.6);
  max-width: 800px;
  width: 100%;
}

.community-title {
  color: #fff;
  font-weight: 800;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  margin-bottom: 20px;
}

.community-title .highlight {
  color: #e0212d;
}

.community-text {
  margin-bottom: 30px;
  color: #bbb;
  font-size: 1.1rem;
  line-height: 1.6;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}

.social-icons img {
  width: 64px;
  height: 64px;
  transition: transform 0.25s ease, filter 0.25s ease;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.6));
}

.social-icons img:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 10px #e0212d);
}




/* ===========================
   Podium Cards mit Button unten
   =========================== */
.podium-card {
  flex: 1 1 280px;
  border-radius: 18px;
  text-align: center;
  position: relative;
  padding: 1.5rem 1.5rem 4.5rem; /* extra Platz unten für Button */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden; /* verhindert Rausragen */
}

/* Claim Bonus Button fix am Kartenende */
.podium-card .btn-claim {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0 0 18px 18px; /* nur unten rund */
  padding: 1rem;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #ff3d3d, #e0212d);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, background 0.3s ease;
}

/* Hover-Effekt */
.podium-card .btn-claim:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg, #ff5c5c, #ff8a00);
}

/* Extra Styles pro Rang */
.podium-card.gold   .btn-claim { background: linear-gradient(90deg, #ff5c5c, #ff8a00); }
.podium-card.silver .btn-claim { background: linear-gradient(90deg, #888, #666); }
.podium-card.bronze .btn-claim { background: linear-gradient(90deg, #cd7f32, #a0522d); }