/* ============================================================
   SpinMafia ÔÇô Index (modular, BEM, scoped)
   Scope: #page-home (+ gezielt .sm-overlay-scope f├╝rs Overlay)
   Struktur:
   0) Tokens/Resets
   1) Utilities
   2) Section: Podium (Top 3)
   3) Section: Divider
   4) Section: Ranking Table
   5) Section: Games (Grid + Overlay)
   6) Section: Giveaways
   7) Section: Leaderboard
   8) Section: Community
   9) Deko: Global Rain + Neon Headline
   10) Responsive (Ôëñ992px, Ôëñ768px, Ôëñ576px, Ôëñ360px)
   ============================================================ */


/* ============================================================
   0) TOKENS & GLOBAL RESETS
   ============================================================ */
#page-home{
  --sm-bg: #0b0e14;
  --sm-surface: #101522;
  --sm-glass: rgba(255,255,255,.06);
  --sm-glass-border: rgba(255,255,255,.12);
  --sm-text: #e9eef7;
  --sm-muted: #88909b;
  --sm-accent: #ff385c;
  --sm-accent-2: #ff7a59;
  --sm-gold: #ffd36e;
  --sm-silver: #d7dde4;
  --sm-bronze: #e4b08a;
  --font-headline: 'Bebas Neue', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--sm-text);
}
html, body{ overflow-x:hidden; }
#page-home{ overflow-x:clip; }

/* Landing-Wrapper mit dezenten, performanten Deko-Ebenen */
#page-home.lp-bg{
  position:relative; min-height:100%;
  background:transparent; overflow:visible; isolation:isolate;
}


/* #page-home.lp-bg::before{
  content:""; position:fixed; inset:0;
  background:url("/static/img/landing_bg/hero-bg.png") center top/cover no-repeat;
  opacity:.28; pointer-events:none; z-index:-1;
}
 */


/* Landing: nur das BG-Bild, in Schwarz-Weiß */
/* #page-home.lp-bg::before{
/*  content:"";
/*  position: fixed;
/*  inset: 0;
/*  background: url("/static/img/landing_bg/hero-bg.png") center top / cover no-repeat;
/*  opacity: .28;                 /* deine Transparenz bleibt */
/*  filter: grayscale(100%) contrast(1.05);
/*  -webkit-filter: grayscale(100%) contrast(1.05); /* Safari */
/*  pointer-events: none;
/*  z-index: -1;
/*}


/* ===== Landing: Fallback-BG (statisch) ===== */
#page-home.lp-bg::before{
  content:"";
  position: fixed;
  inset: 0;
  background: url("/static/img/landing_bg/hero-bg-new.jpg") center center / cover no-repeat;
  opacity: .28;
  filter: var(--lp-filter, none);            /* setze z.B. auf grayscale(100%) contrast(1.05) falls gew├╝nscht */
  pointer-events: none;
  z-index: -1;                               /* unter Content, ├╝ber Body */
}

/* Dein Spotlight/Overlays bleiben wie gehabt mit z-index:0 */

/* ===== Video-Layer ===== */
#lpVideoBg{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                         /* skaliert sauber 1920×1080 */
  z-index: -1;                               /* unter Overlay (::after) */
  pointer-events: none;
  opacity: 0;                                /* fade-in erst wenn ready */
  transition: opacity .6s ease;
  filter: var(--lp-filter, none);            /* gleiche Optik wie Fallback (optional) */
}

/* Wenn Video ready ist: Fallback ausblenden, Video einblenden */
#page-home.lp-bg.video-on::before{ opacity: 0; }
#page-home.lp-bg.video-on #lpVideoBg{ opacity: 1; }

/* Bewegungsreduktion: gar kein Video, nur Standbild */
@media (prefers-reduced-motion: reduce){
  #lpVideoBg{ display: none !important; }
}



















#page-home.lp-bg::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  /* Spotlight/Gradienten entfernt: Kein Scheinwerfer-Effekt mehr ├╝ber dem Hintergrundbild */
  background: none !important;
  mix-blend-mode: normal !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce){
  #page-home.lp-bg::after{ animation:none; }
}

























/* ============================================================
   1) UTILITIES
   ============================================================ */
#page-home .u-muted{ color:var(--sm-muted); }
#page-home .u-card{
  background:var(--sm-glass);
  border:1px solid var(--sm-glass-border);
  border-radius:20px;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
#page-home .u-btn{
  display:inline-block; font-weight:800; color:#fff; text-decoration:none;
  padding:10px 16px; border-radius:12px; border:0;
  background:linear-gradient(90deg, var(--sm-accent), var(--sm-accent-2));
  box-shadow:0 0 30px rgba(255,56,92,.35);
  transition:filter .2s, transform .12s;
}
#page-home .u-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* ============================================================
   2) SECTION: PODIUM (Top 3)
   ============================================================ */
#page-home .sm-podium{
  --pad-y: clamp(32px, 6vw, 80px);
  --card-min-h: 360px;
  --logo-size: 210px;
  --cta-h: 56px;
  --cta-font: clamp(32px, 3.2vw, 48px);
  --stats-top-space: 12px;
  --stats-gap-y: 12px;
  --stats-value-size: clamp(26px, 2.6vw, 38px);
  --stats-label-size: clamp(15px, 1.6vw, 20px);
  position:relative; padding:var(--pad-y) 0; overflow:visible;
}

/* Logo */
#page-home .sm-podium__logo{ display:flex; justify-content:center; margin-bottom:24px; }
#page-home .sm-podium__logoimg{
  max-height:var(--logo-size);
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.35));
  transform-origin:50% 40%;
  animation: sm-logo-sway 6s ease-in-out .4s infinite;
}
@media (prefers-reduced-motion: reduce){
  #page-home .sm-podium__logoimg{ animation:none; }
}

/* Grid */
#page-home .sm-podium__grid{
  position:relative; z-index:2;
  display:grid; gap:clamp(16px, 2.4vw, 28px);
  grid-template-columns:repeat(3, minmax(0,1fr));
  align-items:stretch;
}
@media (max-width:992px){ #page-home .sm-podium__grid{ grid-template-columns:1fr; } }

/* Card */
#page-home .sm-podium__card{
  position:relative; display:flex; flex-direction:column; text-align:center;
  min-height:var(--card-min-h); border-radius:22px; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(8px);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  padding:20px 18px calc(22px + var(--cta-h) + 12px);
  transition:transform .2s, box-shadow .2s;
}
#page-home .sm-podium__card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.45); }
/* Varianten */
#page-home .sm-podium__card--gold   { background-image:linear-gradient(180deg, rgba(255,211,110,.22), rgba(255,211,110,.04)); }
#page-home .sm-podium__card--silver { background-image:linear-gradient(180deg, rgba(215,221,228,.22), rgba(215,221,228,.04)); }
#page-home .sm-podium__card--bronze { background-image:linear-gradient(180deg, rgba(228,176,138,.22), rgba(228,176,138,.04)); }

/* Badge */
#page-home .sm-podium__badge{
  position:absolute; top:12px; left:12px; z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  font: 800 14px/1 var(--font-body); color:#fff;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25);
  border-radius:999px; padding:6px 10px; backdrop-filter:blur(6px);
}
#page-home .sm-podium__badge.has-img{ background:transparent; border:0; padding:0; }
#page-home .sm-podium__badge.has-img img{
  --badge-size:44px; width:var(--badge-size); height:var(--badge-size);
  display:block; border-radius:999px; border:1px solid rgba(255,255,255,.65);
  box-shadow:0 4px 12px rgba(0,0,0,.45); background:rgba(0,0,0,.25);
}
#page-home .sm-podium__badge.has-img span{ display:none; }

/* Inhalt */
#page-home .sm-podium__card .sm-podium__logoimg{ max-height:64px; object-fit:contain; margin:10px auto 8px; display:block; }
#page-home .sm-podium__title{
  font-family:var(--font-headline); text-transform:uppercase; letter-spacing:.6px;
  font-size:clamp(26px, 3.4vw, 46px); line-height:1.05; margin:8px 0 6px; color:#fff;
  text-shadow:0 0 4px rgba(255,56,92,.55), 0 0 10px rgba(255,56,92,.45), 0 0 22px rgba(255,56,92,.35);
}
#page-home .sm-podium__bonus{
  font-family:var(--font-headline); font-weight:800;
  font-size:clamp(22px, 3vw, 40px); line-height:1.05; margin:8px 0 var(--stats-top-space);
  color:#fff; -webkit-text-stroke:1px rgba(255,56,92,.9);
  text-shadow:0 0 6px rgba(255,56,92,.55), 0 0 14px rgba(255,56,92,.45), 0 0 30px rgba(255,56,92,.35);
}

/* Stats (Label über Zahl, DOM unverändert) */
#page-home .sm-podium__stats{
  list-style:none; padding:0; margin:var(--stats-top-space) 0 16px;
  display:grid; grid-template-columns:1fr; row-gap:var(--stats-gap-y); text-align:center;
}
#page-home .sm-podium__stat{ display:flex; flex-direction:column-reverse; align-items:center; gap:6px; }
#page-home .sm-podium__label{
  font:800 var(--stats-label-size)/1.1 var(--font-body);
  letter-spacing:.4px; text-transform:uppercase; color:#dbe6f7; opacity:.95;
}
#page-home .sm-podium__value{ font-size:var(--stats-value-size); font-weight:900; line-height:1; color:#fff; }
#page-home .sm-podium__value strong{ font:inherit; }
#page-home .sm-podium__stat--max   .sm-podium__value{ color:var(--sm-gold);  text-shadow:0 0 12px rgba(255,211,110,.35); }
#page-home .sm-podium__stat--spins .sm-podium__value{ color:#79d8ff;         text-shadow:0 0 12px rgba(121,216,255,.35); }
#page-home .sm-podium__stat--wager .sm-podium__value{ color:#a8b2c3;         text-shadow:0 0 12px rgba(168,178,195,.30); }

/* CTA der Cards */
#page-home .sm-podium__card .u-btn{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  height:var(--cta-h); width:100%; margin:0; border-radius:0 0 22px 22px;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  background:linear-gradient(90deg, #ff2f59 0%, #ff7a39 100%);
  box-shadow:0 0 30px rgba(255,56,92,.65), 0 18px 46px rgba(255,56,92,.45), inset 0 0 14px rgba(255,255,255,.18);
  font-size:var(--cta-font);
}
#page-home .sm-podium__card .u-btn:hover{ transform:translateY(-2px); }

/* Hero-Keyframes */
/* Spotlight-Animation entfernt */
@keyframes sm-logo-sway{ 0%{rotate:-1.2deg} 50%{rotate:1.2deg} 100%{rotate:-1.2deg} }

@media (max-width:576px){
  #page-home .sm-podium{
    --pad-y:40px; --cta-h:50px; --cta-font:18px; --stats-top-space:14px;
  }
  #page-home .sm-podium__logoimg{ max-height:64px; }
  #page-home .sm-podium__title{ font-size:26px; text-wrap:balance; }
  #page-home .sm-podium__bonus{ font-size:22px; margin:6px 0 12px; -webkit-text-stroke:.5px rgba(255,56,92,.8); }
  #page-home .sm-podium__stats{
    grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:8px; column-gap:10px; margin:10px 0 6px;
  }
  #page-home .sm-podium__value{ font-size:20px; }
  #page-home .sm-podium__label{ font-size:13px; }
  /* Mobile Reihenfolge 1ÔÇô2ÔÇô3 */
  #page-home .sm-podium__grid{ display:flex; flex-direction:column; }
  #page-home .sm-podium__grid > :nth-child(2){ order:1; }
  #page-home .sm-podium__grid > :nth-child(1){ order:2; }
  #page-home .sm-podium__grid > :nth-child(3){ order:3; }
}

/* ============================================================
   3) SECTION: DIVIDER (Titel + Copy mit Shine)
   ============================================================ */
#page-home .sm-divider{ text-align:center; margin:38px auto 34px; position:relative; }
#page-home .sm-divider__box{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 28px; border-radius:999px;
  background:linear-gradient(180deg,
    color-mix(in srgb, #7b1027 28%, transparent),
    color-mix(in srgb, #7b1027 12%, transparent));
  border:1px solid color-mix(in srgb, #7b1027 52%, transparent);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
#page-home .sm-divider__title{
  margin:0; font-family:var(--font-headline); font-weight:900; letter-spacing:2.2px;
  font-size:clamp(32px, 3.6vw, 52px); color:#fff;
  text-shadow:0 0 8px color-mix(in srgb, #7b1027 55%, transparent), 0 0 20px color-mix(in srgb, #7b1027 40%, transparent);
}
#page-home .sm-divider p{
  margin:12px auto 0; max-width:1000px; font-size:clamp(18px, 1.6vw, 24px); line-height:1.7;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ff0000 50%,
    #aaa5a5 100%
  );
  background-size: 200% auto; /* makes the gradient wider for animation */
  background-position: 0% center;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  text-align: center;
  margin: 38px auto 34px;
  position: relative;

  animation: gradient-sweep 6s linear infinite;
}

@keyframes gradient-sweep {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes sm-text-sweep{ from{background-position:-50% 0} to{background-position:150% 0} }
@media (prefers-reduced-motion: reduce){
  #page-home .sm-divider__box, #page-home .sm-divider__title, #page-home .sm-divider p{ animation:none !important; }
  #page-home .sm-divider p{ color:var(--sm-muted); background:none; -webkit-text-fill-color:currentColor; }
}

/* ============================================================
   4) SECTION: RANKING TABLE
   ============================================================ */
#page-home .sm-ranking{ position:relative; padding:24px 0 40px; }
#page-home .sm-ranking__table{
  width:100%; border-collapse:separate; border-spacing:0 12px; table-layout:auto;
}


#page-home .sm-ranking__row{
  --float-amp:4px; --float-dur:4s; --pulse-dur:3.2s;
  --snake-angle:0turn;
  --snake-c1: rgba(255,56,92,1);
  --snake-c2: rgba(255,211,110,.95);
  --snake-c3: rgba(255,255,255,1);

  position:relative;
  background:var(--sm-glass);
  border-radius:14px;
  box-shadow:0 0 0 1px rgba(255,120,120,.35) inset, 0 10px 24px rgba(0,0,0,.25);
  transition:transform .25s, box-shadow .25s, opacity .3s;
  opacity:1;               /*  sichtbar */
  transform:none;          /*  keine Verschiebung */
}




#page-home .sm-ranking__row:hover{
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(255,140,140,.45) inset, 0 16px 36px rgba(0,0,0,.35), 0 0 24px rgba(255,56,92,.28);
}
#page-home .sm-ranking__cell{ padding:16px 12px; vertical-align:middle; color:#e9eef7; }
#page-home .sm-ranking__cell strong{ color:#fff; font-weight:900; font-size:clamp(18px, 1.4vw, 22px); }
#page-home .sm-ranking__cell small{ display:block; margin-top:4px; color:#b9c2cf; font-size:12px; opacity:.95; }
#page-home .sm-ranking__logo{ height:40px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.25)); }

/* CTA-Spalte rechts (kein Hintergrund, kein Clip) */
#page-home .sm-ranking__table td:last-child{
  text-align:right !important; padding-right:24px; width:240px; background:transparent;
}
#page-home .sm-ranking__table td:last-child .u-btn{
  display:inline-flex; margin-left:auto; padding:12px 20px; font-weight:800; border-radius:14px;
  background:linear-gradient(90deg, var(--sm-accent), var(--sm-accent-2));
  box-shadow:0 0 20px rgba(255,56,92,.45), 0 10px 26px rgba(255,56,92,.30), inset 0 0 10px rgba(255,255,255,.12);
}

/* Reveal & Float */
#page-home .sm-ranking__row.from-left{ animation: sm-row-reveal-left .55s ease-out forwards; }
#page-home .sm-ranking__row.from-right{ animation: sm-row-reveal-right .55s ease-out forwards; }
#page-home .sm-ranking__row.floaty{ animation: sm-row-float var(--float-dur) ease-in-out infinite alternate; }
@keyframes sm-row-reveal-left{ from{opacity:0; transform:translateX(-22px)} to{opacity:1; transform:none} }
@keyframes sm-row-reveal-right{ from{opacity:0; transform:translateX(22px)}  to{opacity:1; transform:none} }
@keyframes sm-row-float{ from{ transform:translateY(calc(var(--float-amp)*-1)) } to{ transform:translateY(var(--float-amp)) } }

/* Snake-Glow (konischer Border-Ring) */
#page-home .sm-ranking__row::before{
  content:""; position:absolute; inset:-2px; border-radius:16px; padding:2px;
  background:conic-gradient(from var(--snake-angle), var(--snake-c1), var(--snake-c2), var(--snake-c3), var(--snake-c2), var(--snake-c1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; z-index:1; animation: sm-snake 5s linear infinite;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--snake-c2) 70%, transparent))
          drop-shadow(0 0 30px color-mix(in srgb, var(--snake-c1) 45%, transparent));
}
@keyframes sm-snake{ to{ --snake-angle:1turn; } }

/* Gleam-Sweep */
#page-home .sm-ranking__row::after{
  content:""; position:absolute; inset:-20% -40%; border-radius:inherit; pointer-events:none;
  background:linear-gradient(100deg, transparent 45%, rgba(255,255,255,.12) 50%, transparent 55%);
  transform:translateX(-50%); animation: sm-row-gleam 2.8s ease-in-out infinite;
}
@keyframes sm-row-gleam{ 0%{ transform:translateX(-140%) } 100%{ transform:translateX(140%) } }

/* Varianten per JS */
#page-home .sm-ranking__row.is-white{ --snake-c1:#fff; --snake-c2:rgba(255,255,255,.85); --snake-c3:#fff; }
#page-home .sm-ranking__row.is-red  { --snake-c1:#ff385c; --snake-c2:rgba(255,120,120,.95); --snake-c3:#ffd0c0; }
#page-home .sm-ranking__row.is-flame{ --snake-c1:#ff2f00; --snake-c2:#ffb84d; --snake-c3:#ff7a00; }
#page-home .sm-ranking__row.top-row { --snake-c1:#ffd36e; --snake-c2:#ffbd4d; --snake-c3:#fff2b3; }

/* Mobile Rotator: Container/Slot-Styles (JS baut die Slots in Zelle 2) */
#page-home .sm-metric-rotator{ position:relative; min-height:1.8em; overflow:hidden; }
#page-home .sm-metric-slot{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(6px); transition:opacity .22s, transform .22s; white-space:nowrap;
}
#page-home .sm-metric-slot.is-active{ opacity:1; transform:none; }

/* Mini-Neonlabel (wird im DOM als <small> gesetzt) */
#page-home .sm-label-neon{
  display:inline; margin-left:6px; font:800 12px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase;
  color:transparent;
  background:linear-gradient(90deg, #fff 0%, #ffd36e 20%, #ff7a59 45%, #ff385c 60%, #ffd36e 80%, #fff 100%);
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(255,56,92,.30)) drop-shadow(0 0 18px rgba(255,211,110,.22));
  animation: sm-neon-sweep 5s linear infinite, sm-neon-flicker 2.6s ease-in-out infinite;
}

/* Mittel-Breakpoint polishing */
@media (max-width:768px){
  #page-home .sm-ranking__cell{ padding:12px 10px; }
  #page-home .sm-ranking__logo{ height:34px; }
}

/* ============================================================
   5) SECTION: GAMES (Grid + Overlay)
   ============================================================ */
#page-home .sm-games{
  padding: 1.875rem 6.875rem 0.625rem;
  margin: 0 auto;
  max-width: 71.5rem;
}
#page-home .sm-games__toolbar{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;
  text-align: center;
}

#page-home .sm-games__toolbar .section-title {
  flex: 1;
  text-align: center;
}

#page-home .sm-games__toolbar .sm-filter {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#page-home .sm-games__toolbar {
  position: relative;
}
#page-home .sm-games__grid{
  display:grid; gap:20px; grid-template-columns:repeat(5, 1fr);
  margin-top: 5rem;
}
#page-home .sm-games__card{
  background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 0;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 20px rgba(0,0,0,0.15),
    0 1px 3px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

#page-home .sm-games__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255,106,61,0.1) 0%, 
    rgba(255,211,107,0.05) 50%, 
    rgba(255,61,184,0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

#page-home .sm-games__card:hover::before {
  opacity: 1;
}

#page-home .sm-games__card:hover{ 
  transform: translateY(-8px) scale(1.02); 
  box-shadow: 
    0 20px 40px rgba(255,106,61,0.2),
    0 8px 16px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.2);
  border-color: rgba(255,106,61,0.3);
}

#page-home .sm-games__card-inner {
  position: relative;
  z-index: 2;
  padding: 12px;
}

#page-home .sm-games__thumb{ 
  width: 100%; 
  aspect-ratio: 4/3; 
  object-fit: cover; 
  border-radius: 12px; 
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

#page-home .sm-games__card:hover .sm-games__thumb {
  transform: scale(1.05);
}

#page-home .sm-games__name{ 
  font-family: 'Bebas Neue', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 16px;
  margin: 8px 0 4px;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-transform: uppercase;
}

#page-home .sm-games__provider{ 
  color: rgba(255,211,107,0.9);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Overlay (zentral) ÔÇô Basissheet */
#page-home .sm-games__overlay{
  position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.92);
  display:none; align-items:center; justify-content:center; padding:24px;
}
#page-home .sm-games__overlay.is-open{ display:flex; }
#page-home .sm-games__overlay-inner{
  width:min(1200px, 95vw); max-height:90vh; overflow:auto;
  display:flex; flex-direction:column; align-items:center; gap:16px; box-sizing:border-box;
}
#page-home .sm-games__overlay-title{
  margin:0; font-family:var(--font-headline); letter-spacing:.6px; font-size:clamp(22px, 2.4vw, 32px);
}
#page-home .sm-games__choice, #page-home .sm-games__top1{
  width:100%; background:var(--sm-glass); border:1px solid var(--sm-glass-border); border-radius:18px; padding:16px;
}
#page-home .sm-games__actions{ margin-top:10px; text-align:center; }
#page-home .sm-games__frame{ width:100%; height:70vh; border:0; background:#000; border-radius:14px; }
#page-home .sm-games__close{ align-self:center; margin-top:8px; }
#page-home .sm-games .sponsor-note{ color:var(--sm-muted); font-size:12px; margin:4px 0 10px; text-align:center; }

/* Body lock wenn Overlay offen (wird via JS gesetzt) */
html.sm-overlay-open, body.sm-overlay-open{ overflow:hidden !important; }

/* ============================================================
   6) SECTION: GIVEAWAYS
   ============================================================ */
#page-home .sm-gw{ padding:24px 0 6px; }
#page-home .sm-gw__grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
#page-home .sm-gw__card{ background:var(--sm-glass); border:1px solid var(--sm-glass-border); border-radius:20px; box-shadow:0 10px 26px rgba(0,0,0,.28); display:flex; flex-direction:column; }
#page-home .sm-gw__media img{ width:100%; height:160px; object-fit:cover; display:block; }
#page-home .sm-gw__body{ padding:12px; }
#page-home .sm-gw__title{ font-weight:800; margin:2px 0 6px; }
#page-home .sm-gw__sub{ color:var(--sm-muted); margin:0 0 10px; }
/* Gr├Â├ƒeres, neonigeres H2 nur in Giveaways */
#page-home #giveaway .section-title.sm-neon-title{ font-size:clamp(56px, 7vw, 110px); letter-spacing:.12em; word-spacing:.28em; line-height:1.02; }

/* ============================================================
   7) SECTION: LEADERBOARD
   ============================================================ */
#page-home .sm-lb{ padding:26px 0 10px;text-align: center; }
#page-home .sm-lb__card{ background:var(--sm-glass); border:1px solid var(--sm-glass-border); border-radius:20px; box-shadow:0 10px 26px rgba(0,0,0,.28); }
#page-home .sm-lb__table{ width:100%; border-collapse:collapse; }
#page-home .sm-lb__table th, #page-home .sm-lb__table td{ padding:12px 10px; border-bottom:1px solid rgba(255,255,255,.08); }
#page-home .sm-lb__rank{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.14); font-weight:800; }
#page-home .sm-lb__user{ display:flex; align-items:center; gap:10px; }
#page-home .sm-lb__avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.22); }
#page-home .sm-lb__tickets{ text-align:right; font-weight:900; letter-spacing:.2px; }
/* Leaderboard-├£berschrift etwas gr├Â├ƒer */
#page-home .sm-lb .section-title.sm-neon-title{ font-size:clamp(36px, 4vw, 64px); letter-spacing:.12em; word-spacing:.28em; line-height:1.02; }

/* ============================================================
   8) SECTION: COMMUNITY
   ============================================================ */
#community .sm-community__box{
  position:relative; padding:28px 22px; border-radius:16px;
  background:linear-gradient(180deg, rgb(0 0 0), rgba(255, 255, 255, .02));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 12px 38px rgba(0,0,0,.35); text-align:center;
}
#community .sm-community__title.sm-neon-title{
  margin:0 0 14px; font-family:var(--font-headline); font-weight:800;
  font-size:clamp(34px, 3.2vw, 48px); letter-spacing:.8px; word-spacing:4px; line-height:1.05;
  background:linear-gradient(90deg, #ff7a59, #ffd36b 60%, #ffffff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 18px rgba(255,122,89,.35), 0 0 36px rgba(255,211,107,.25);
}
#community .sm-community__title.sm-neon-title::after{
  content:""; display:block; margin-top:8px; width:120px; height:4px; border-radius:999px;
  background:linear-gradient(90deg, rgba(255,122,89,.9), rgba(255,211,107,.6));
  box-shadow:0 0 18px rgba(255,122,89,.55), 0 0 28px rgba(255,211,107,.45);
}
#community .sm-community__text{ font-size:1.1rem;font-weight: 600; color:white; max-width:900px; line-height:1.6; margin:14px auto 20px; text-align:center; display:grid; row-gap:6px; }
#community .sm-community__icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 20px;
}
#community .sm-social {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: none;
  border: 2px solid #fff;
  box-shadow: none;
  transition: border-color .18s, transform .18s;
}
#community .sm-social img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: none !important;
  opacity: 1;
}
/* Brand colors for each social icon */
#community .sm-social.discord svg {
  color: #5865F2;
}
#community .sm-social.tiktok svg {
  color: #FFFFFF;
}
#community .sm-social.youtube svg {
  color: #FF0000;
}
#community .sm-social.instagram svg {
  color: #E1306C;
}
#community .sm-social.twitch svg {
  color: #9146FF;
}
#community .sm-social.telegram svg {
  color: #0088CC;
}

#community .sm-social:hover {
  border-color: #ff385c;
  transform: scale(1.08);
}


/* ============================================================
   9) DEKO: GLOBAL RAIN + NEON HEADLINE
   ============================================================ */
/* Globaler Regen-Layer (außerhalb von #page-home) */
.sm-rain{ position:fixed; inset:0; z-index:400; pointer-events:none; overflow:hidden; }
.sm-rain__drop{ position:absolute; top:-20px; pointer-events:none; will-change:transform, opacity; animation: sm-rain-fall var(--fallDur, 20s) linear var(--fallDelay, 0s) forwards; }
.sm-rain__drop.is-clickable{ pointer-events:auto; cursor:pointer; }
.sm-rain__inner{ position:relative; display:inline-block; transform-origin:50% 40%; animation: sm-rain-sway var(--swayDur, 5.6s) ease-in-out var(--swayDelay, 0s) infinite; }
.sm-rain__inner img{ display:block; width:var(--size, 120px); height:auto; border-radius:12px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)); user-select:none; }
.sm-rain__inner::before{
  content:""; position:absolute; inset:-6px; border-radius:16px; pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,211,110,.65), 0 0 18px rgba(255,211,110,.45), 0 0 36px rgba(255,56,92,.35);
  animation: sm-rain-outline 2.2s ease-in-out infinite;
}
@keyframes sm-rain-fall{ 0%{ transform:translate3d(var(--x,0),0,0) rotate(var(--rot,0deg)); opacity:0; filter:blur(.8px) } 10%{ opacity:1 } 100%{ transform:translate3d(var(--xend,0),var(--fall,100vh),0) rotate(var(--rot,0deg)); opacity:.97; filter:blur(0) } }
@keyframes sm-rain-sway{ 0%{ transform:translateX(calc(var(--swayAmp,8px)*-1)) rotate(calc(var(--tilt,6deg)*-1)) } 50%{ transform:translateX(var(--swayAmp,8px)) rotate(var(--tilt,6deg)) } 100%{ transform:translateX(calc(var(--swayAmp,8px)*-1)) rotate(calc(var(--tilt,6deg)*-1)) } }
@keyframes sm-rain-outline{ 0%,100%{ box-shadow:0 0 0 2px rgba(255,211,110,.65), 0 0 18px rgba(255,211,110,.45), 0 0 36px rgba(255,56,92,.35); opacity:1 } 50%{ box-shadow:0 0 0 3px rgba(255,230,150,.95), 0 0 28px rgba(255,230,150,.85), 0 0 64px rgba(255,90,120,.55); opacity:.95 } }
@media (prefers-reduced-motion: reduce){ .sm-rain{ display:none; } }

/* Neon-Headline (wird global f├╝r H2s genutzt) */
#page-home .sm-neon-title{
  position:relative; display:inline-block; font-family:var(--font-headline); text-transform:uppercase; letter-spacing:.08em; line-height:1;
  background:linear-gradient(90deg, #ffffff 0%, #ffd36e 20%, #ff7a59 45%, #ff385c 60%, #ffd36e 80%, #ffffff 100%);
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(255,56,92,.35)) drop-shadow(0 0 22px rgba(255,211,110,.30));
  animation: sm-neon-sweep 5s linear infinite, sm-neon-flicker 2.6s ease-in-out infinite;
}
#page-home .sm-neon-title::after{
  content:""; position:absolute; left:50%; bottom:-10px; width:64%; height:4px; transform:translateX(-50%); border-radius:999px;
  background:radial-gradient(closest-side, rgba(255,56,92,.95), rgba(255,56,92,.35), transparent 70%);
  filter:blur(4px); animation: sm-neon-underline 2.8s ease-in-out infinite;
}
@keyframes sm-neon-sweep{ from{background-position:0% 0} to{background-position:300% 0} }
@keyframes sm-neon-flicker{ 0%,19%,21%,23%,55%,100%{opacity:1} 20%,22%,24%{opacity:.93} 50%{opacity:.98} }
@keyframes sm-neon-underline{ 0%,100%{ transform:translateX(-50%) scaleX(1); opacity:.85 } 50%{ transform:translateX(-50%) scaleX(1.08); opacity:1 } }
@media (prefers-reduced-motion: reduce){
  #page-home .sm-neon-title, #page-home .sm-neon-title::after{ animation:none !important; }
}

/* ============================================================
   10) RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Ôëñ992px */
@media (max-width:992px){
  #page-home .sm-podium__grid{ grid-template-columns:1fr; }
  #page-home .sm-gw__grid{ grid-template-columns:1fr 1fr; }
}

/* Ôëñ1024px (Tablet) */
@media (max-width:1024px){
  #page-home .sm-games__grid{ grid-template-columns:repeat(3, 1fr); }
}

/* Ôëñ768px */
@media (max-width:768px){
  #community .sm-community__icons{ flex-wrap:nowrap; } /* Desktop-only in Row; auf <768px darf umbrechen, daher kein Override hier */
}

/* Ôëñ576px ÔÇô kompakte, robuste Mobile-Variante */
@media (max-width:576px){
  /* Global */
  #page-home .u-btn{ padding:10px 14px; border-radius:10px; }

  /* Divider */
  #page-home .sm-divider{ margin:26px auto 24px; }
  #page-home .sm-divider__title{ font-size:32px; letter-spacing:1.4px; }
  #page-home .sm-divider p{ font-size:18px; line-height:1.6; max-width:92vw; }

  /* Ranking ÔÇô 3ÔÇô5 ausblenden, Rotator ├╝bernimmt; Buttons frei ÔÇ×gl├╝henÔÇ£ */
  #page-home .sm-ranking{ padding:10px 0 22px; }
  #page-home .sm-ranking__table{ table-layout:fixed; border-spacing:0 10px; text-align:left; }
  #page-home .sm-ranking .table-responsive{ overflow-x:visible; }

  #page-home .sm-ranking__row{ opacity:1 !important; transform:none !important; }
  #page-home .sm-ranking__row::before, #page-home .sm-ranking__row::after{ animation:none; filter:none; } /* weniger Last */
  #page-home .sm-ranking__cell{ padding:10px 8px; font-size:14px; }
  #page-home .sm-ranking__cell small{ display:none; } /* Labels sparen Platz */
  #page-home .sm-ranking__logo{ height:30px; }

  /* Sekundärspalten aus */
  #page-home #ranking .sm-ranking__row > .sm-ranking__cell:nth-child(3),
  #page-home #ranking .sm-ranking__row > .sm-ranking__cell:nth-child(4),
  #page-home #ranking .sm-ranking__row > .sm-ranking__cell:nth-child(5){
    display:none !important;
  }

  /* CTA-Spalte kompakt & transparent */
  #page-home .sm-ranking__row > .sm-ranking__cell:last-child{
    background:transparent !important; border:0 !important; border-radius:0 14px 14px 0;
    width:128px; padding-right:8px; text-align:right !important; overflow:visible;
  }
  #page-home .sm-ranking .u-btn{
    width:100%; min-width:0; padding:10px 12px; font-size:13px; border-radius:16px;
    box-shadow:0 0 18px rgba(255,56,92,.5), inset 0 0 10px rgba(255,255,255,.12);
  }

  /* Games */
  #page-home .sm-games{ padding:18px 16px 8px; }
  #page-home .sm-games__toolbar{ flex-direction:column; gap:16px; }
  #page-home .sm-games__toolbar .section-title{ font-size:28px; line-height:1.1; }
  #page-home .sm-games__toolbar .sm-filter{ position:static; transform:none; }
  #page-home .sm-games__grid{ grid-template-columns:repeat(2, minmax(140px, 1fr)); gap:14px; }
  #page-home .sm-games__card-inner{ padding:10px; }
  #page-home .sm-games__name{ font-size:14px; }
  #page-home .sm-games__provider{ font-size:10px; }
  #page-home .sm-games__thumb{ margin-bottom:8px; border-radius:8px; }
  #page-home .sm-games__overlay-inner{ width:100vw; padding:12px; }
  #page-home .sm-games__frame{ height:60vh; }

  /* Giveaways */
  #page-home #giveaway .section-title.sm-neon-title{ font-size:clamp(32px, 8vw, 44px); letter-spacing:.08em; }
  #page-home .sm-gw__grid{ grid-template-columns:1fr; gap:14px; }
  #page-home .sm-gw__media img{ height:150px; }

  /* Leaderboard */
  #page-home .sm-lb{ padding:18px 0 8px; }
  #page-home .sm-lb .section-title.sm-neon-title{ font-size:30px; }
  #page-home .sm-lb__avatar{ width:28px; height:28px; }
  #page-home .sm-lb__rank{ width:36px; height:36px; }

  /* Community kompakt */
  #community .sm-community__title.sm-neon-title{ font-size:28px; }
  #community .sm-community__title.sm-neon-title::after{ width:88px; height:3px; bottom:-8px; }
  #community .sm-community__box{ padding:20px 16px; }
  #community .sm-social{ width:56px; height:56px; border-radius:12px; }
  #community .sm-social img{ width:26px; height:26px; }

  /* Neon-Underline dezenter */
  #page-home .sm-neon-title::after{ width:56%; }

  /* Deko: Rain-Effekt auf Phones aus */
  .sm-rain{ display:none !important; }
}

/* Ôëñ360px */
@media (max-width:360px){
  #page-home .sm-games__grid{ grid-template-columns:1fr; }
  #page-home .sm-podium__stats{ grid-template-columns:1fr; }
  #page-home .sm-ranking__cell{ font-size:13px; }
}

/* ============================================================
   11) OVERLAY-SCOPE (nur innerhalb des Game-Overlays)
   - Hält das Overlay entkoppelt vom restlichen Ranking-Layout
   ============================================================ */

/* Desktop + Default */
.sm-overlay-scope .sm-games__overlay-inner{
  box-sizing:border-box; width:min(100vw, 1100px); margin:0 auto; padding:16px;
}
.sm-overlay-scope .sm-games__frame{ width:100%; height:68vh; border:0; }
.sm-overlay-scope .sm-ranking__table{ width:100%; table-layout:fixed; }
.sm-overlay-scope .sm-ranking__cell{
  padding:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sm-overlay-scope .sm-ranking__logo{ width:80px; height:auto; }
.sm-overlay-scope .u-btn.btn-sm{ white-space:nowrap; }

/* Mobile Overlay (Ôëñ576px): Spalten 3ÔÇô5 einklappen, Titel/Logo kompakter */
@media (max-width:576px){
  .sm-overlay-scope .sm-games__overlay-inner{ width:100vw; padding:12px; }
  .sm-overlay-scope .sm-games__frame{ height:60vh; }
  .sm-overlay-scope .sm-ranking__cell:nth-child(3),
  .sm-overlay-scope .sm-ranking__cell:nth-child(4),
  .sm-overlay-scope .sm-ranking__cell:nth-child(5){ display:none; }
  .sm-overlay-scope .sm-ranking__logo{ width:64px; }
}

/* ============================================================
   Ende der Styles
   ============================================================ */



/* Ranking: Hard-Visible Fallback f├╝r Desktop, falls Reveal nicht feuert */
@media (min-width: 577px){
  #page-home #ranking .sm-ranking__row.is-visible{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* Overlay-Ranking: Fallback-Sichtbarkeit erzwingen (Desktop) */
@media (min-width: 577px){
  .sm-overlay-scope .sm-ranking__row.is-visible{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* nur mobil Rotator-Labels anzeigen */
@media (max-width: 576px){
  .sm-metric-rotator .sm-metric-slot[data-type="bonus"]::before { content: '%'; }
  .sm-metric-rotator .sm-metric-slot[data-type="max"]::before   { content: 'Ôé¼'; }
  .sm-metric-rotator .sm-metric-slot[data-type="spins"]::before { content: 'FS'; }
  .sm-metric-rotator .sm-metric-slot[data-type="wager"]::before { content: 'x'; }
}
/* harte Desktop-Guard, falls DOM schon einen Rotator hat */
@media (min-width: 577px){
  .sm-metric-rotator .sm-metric-slot::before { content: none !important; }
}



/* =================== MOBILE FIX PACK (Ôëñ576px) =================== */
@media (max-width: 576px) {

  /* ---------- Podest Top 3 ---------- */
  .sm-podium__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sm-podium__card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
  }
  .sm-podium__logoimg { width: 56px; height: auto; }
  .sm-podium__title   { margin: 0 0 4px; font-size: 16px; line-height: 1.2; }
  .sm-podium__bonus   { margin: 0; font-size: 14px; opacity: .9; }
  .sm-podium__stats   { display: none; } /* mobil kompakt wie fr├╝her */
  .sm-podium__badge   { order: 3; justify-self: end; }
  .sm-podium__card .u-btn {
    grid-column: 1 / -1;
    justify-self: stretch;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 800;
  }

  /* ---------- Ranking: Button-Styling kompakt ---------- */
  #page-home .sm-ranking .u-btn.btn-sm,
  .sm-overlay-scope .sm-ranking .u-btn.btn-sm {
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    min-width: 112px; /* stabiler Touch-Target */
  }

  /* ---------- Rotator-Layout ---------- */
  /* greift auf Seite und im Overlay */
  #page-home .sm-ranking .sm-metric-rotator,
  .sm-overlay-scope .sm-ranking .sm-metric-rotator {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: center;
  }
  #page-home .sm-ranking .sm-metric-slot,
  .sm-overlay-scope .sm-ranking .sm-metric-slot {
    display: none;
    gap: 8px;           /* Zahl + Label leicht trennen */
    align-items: baseline;
    white-space: nowrap;
  }
  #page-home .sm-ranking .sm-metric-slot.is-active,
  .sm-overlay-scope .sm-ranking .sm-metric-slot.is-active {
    display: inline-flex;
  }
  /* Labels etwas kleiner, damit nichts umbrecht */
  #page-home .sm-ranking .sm-metric-slot .sm-label-neon,
  .sm-overlay-scope .sm-ranking .sm-metric-slot .sm-label-neon {
    font-size: 12px;
    margin-left: 6px;
  }

  /* ---------- Allgemeine Zeilenh├Âhe auf Mobil ---------- */
  #page-home .sm-ranking__row,
  .sm-overlay-scope .sm-ranking__row {
    min-height: 64px;
  }
}




/* =========================================================
   MOBILE PATCH (<=576px): Podest- & Ranking-Buttons + Rotator
   Diese Regeln am ENDE der CSS einf├╝gen.
   ========================================================= */
@media (max-width: 576px){

  /* === Podest (Top-3) CTA ÔÇô kr├ñftig & gro├ƒ, vollbreit angekoppelt === */
  #page-home .sm-podium__card .u-btn{
    height: 56px;
    font-size: 18px;
    letter-spacing: .3px;
    border-radius: 0 0 22px 22px;         /* unten andocken */
    background: linear-gradient(90deg, #ff2f59 0%, #ff7a39 100%);
    box-shadow:
      0 0 32px rgba(255,56,92,.65),
      0 22px 48px rgba(255,56,92,.45),
      inset 0 0 14px rgba(255,255,255,.20);
  }

  /* === Ranking-Tabelle: letzte Zelle nicht fix breiten, Button zentrieren === */
  #page-home .sm-ranking__table td:last-child{
    width: auto;
    padding-right: 10px !important;
    text-align: center !important;
  }

  /* Claim-Button im Ranking ÔÇô pillenf├Ârmig, gut klickbar */
  #page-home .sm-ranking__table td:last-child .u-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 220px;                     /* wirkt wie ÔÇ×vollbreitÔÇ£ ohne zu gro├ƒ zu werden */
    height: 48px;
    padding: 0 20px;
    font-size: 15.5px;
    font-weight: 900;
    border-radius: 999px;                 /* Pille */
    background: linear-gradient(90deg, #ff2f59, #ff7a39);
    box-shadow:
      0 0 24px rgba(255,56,92,.55),
      0 14px 32px rgba(255,56,92,.35),
      inset 0 0 12px rgba(255,255,255,.16);
  }
  #page-home .sm-ranking__table td:last-child .u-btn:hover{
    transform: translateY(-1px);
  }

  /* Zeilen-Padding kompakter, damit Button Platz hat */
  #page-home .sm-ranking__cell{ padding: 12px 10px; }
  #page-home .sm-ranking__logo{ height: 34px; }

  /* === Mobile-Rotator Optik (nur Darstellung, kein JS n├Âtig) ========= */
  /* Container reserviert H├Âhe, Slots weich ├╝berblenden */
  #page-home .sm-metric-rotator{
    position: relative;
    min-height: 28px;                     /* Raum f├╝r Wert + Label */
  }
  #page-home .sm-metric-rotator .sm-metric-slot{
    position: absolute; inset: 0;
    display: inline-flex;
    align-items: baseline;                /* Wert + Label in einer Linie */
    gap: 6px;
    opacity: 0; transform: translateY(6px) scale(.985);
    transition: opacity .18s ease, transform .18s ease;
    white-space: nowrap;
  }
  #page-home .sm-metric-rotator .sm-metric-slot.is-active{
    opacity: 1; transform: none;
  }

  /* Wert groß & kräftig, Label kompakt daneben (wie vorher) */
  #page-home .sm-metric-rotator .sm-metric-slot strong,
  #page-home .sm-metric-rotator .sm-metric-slot .sm-metric-val{
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
    color: #fff;
  }
  #page-home .sm-metric-rotator .sm-metric-slot small{
    margin: 0 0 0 4px;
    font-size: 12px;
    line-height: 1.1;
    color: #b9c2cf;
    display: inline-block;
  }

  /* Im Overlay dieselbe Button-Optik */
  #page-home .sm-games__overlay .sm-ranking__table td:last-child{
    text-align: center !important;
    padding-right: 8px !important;
  }
  #page-home .sm-games__overlay .sm-ranking__table td:last-child .u-btn{
    max-width: 220px;
    height: 48px;
    border-radius: 999px;
  }
}



/* === RESPONSIVE OVERRIDES ÔÇô keep this the LAST block in CSS === */
/* Grid responsive: stronger scope so later files don't override by accident */
@media (max-width: 992px){
#page-home :where(.gw-grid){
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px){
#page-home :where(.gw-grid){
grid-template-columns: 1fr;
}
}


/* Ranking table: compact & readable on small screens */
@media (max-width: 576px){
#page-home .sm-ranking__table{
border-spacing: 0 10px;
}
#page-home .sm-ranking__row{
display: grid;
grid-template-columns: 44px 1fr auto; /* rank | logo+texts | CTA */
align-items: center;
padding: 12px;
gap: 10px;
}
#page-home .sm-ranking__cell{ padding: 0; }
#page-home .sm-ranking__logo{ height: 32px; }
#page-home .sm-ranking__row .u-btn{ padding: 8px 12px; font-size: 13px; }
#page-home .sm-ranking__badge{ font-size: 12px; padding: 4px 8px; }
}



/* === Ranking polish === */
#page-home .sm-ranking__row{
position: relative;
border: 1px solid #24262b;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#page-home .sm-ranking__row:hover{
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(0,0,0,.25);
border-color: #2d3036;
}
#page-home .sm-ranking__rank{
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 10px;
font-weight: 700;
background: linear-gradient(135deg, #3a3f4a, #272a31);
color: #fff;
}
#page-home .sm-ranking__rank.is-top1{ background: linear-gradient(135deg, #ffd36e, #ffbd4d); color:#211; }
#page-home .sm-ranking__rank.is-top2{ background: linear-gradient(135deg, #c0c7d6, #9ca3af); color:#111; }
#page-home .sm-ranking__rank.is-top3{ background: linear-gradient(135deg, #f7a56a, #f59e0b); color:#211; }


#page-home .sm-ranking__title{ font-size: 15px; font-weight: 700; letter-spacing:.2px; }
#page-home .sm-ranking__subtitle{ font-size: 12px; color:#b9c2cf; margin-top: 2px; }


#page-home .sm-ranking__row .u-btn{
border-radius: 12px;
font-weight: 700;
box-shadow: 0 6px 16px rgba(255, 99, 0, .18);
}














/* =========================================================
   MOBILE Ôëñ576px ÔÇö FIX: Overlay bleibt unver├ñndert,
   Ranking (#ranking) erhält dasselbe Stacked-Layout separat.
   ÔåÆ Stellschrauben (Logo, Abst├ñnde, Button) als Variablen.
   ========================================================= */

/* ---------------- OVERLAY (nur Overlay behalten) ---------------- */
/* Tunables NUR f├╝rs Overlay (Logo-/Abst├ñnde/Gr├Â├ƒen) */
@media (max-width: 576px){
  .sm-games__overlay.sm-overlay-scope{
    --ov-logo: 72px;   /* LOGO-HÖHE Overlay */
    --ov-gap: 12px;    /* Abstand zwischen Bl├Âcken */
    --ov-pill-py: 10px;/* Vertikales Pill-Padding */
    --ov-pill-px: 14px;/* Horizontales Pill-Padding */
    --ov-val: 20px;    /* Wert-Schriftgr├Â├ƒe */
    --ov-label: 12px;  /* Label-Schriftgr├Â├ƒe */
    --ov-btn-w: 260px; /* Buttonbreite max */
    --ov-btn-h: 50px;  /* Buttonh├Âhe */
  }

  .sm-games__overlay.sm-overlay-scope .sm-ranking__table,
  .sm-games__overlay.sm-overlay-scope .sm-ranking__table > tbody{
    display:block !important; width:100% !important;
  }
  .sm-games__overlay.sm-overlay-scope .sm-ranking__row{
    display:flex !important; flex-direction:column !important;
    align-items:center !important; text-align:center !important;
    gap:var(--ov-gap); padding:16px 14px 18px;
  }
  .sm-games__overlay.sm-overlay-scope .sm-ranking__cell{
    width:100% !important; padding:0 !important; text-align:center;
  }
  .sm-games__overlay.sm-overlay-scope .sm-ranking__row > .sm-ranking__cell:nth-child(3),
  .sm-games__overlay.sm-overlay-scope .sm-ranking__row > .sm-ranking__cell:nth-child(4),
  .sm-games__overlay.sm-overlay-scope .sm-ranking__row > .sm-ranking__cell:nth-child(5){
    display:block !important; visibility:visible !important;
  }

  /* Overlay: Logo oben */
  .sm-games__overlay.sm-overlay-scope .sm-ranking__cell:first-child{ order:1; margin-bottom:2px; }
  .sm-games__overlay.sm-overlay-scope .sm-ranking__logo{
    height:var(--ov-logo) !important; max-width:85%; object-fit:contain;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
  }

  /* Overlay: 4 Pills (Label oben, Wert unten) */
  .sm-games__overlay.sm-overlay-scope .sm-ranking__cell:nth-child(n+2):not(:last-child){
    order:2; display:flex !important; flex-direction:column-reverse !important;
    align-items:center; gap:4px; padding:var(--ov-pill-py) var(--ov-pill-px);
    margin:2px 0; border-radius:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.10);
  }
  .sm-games__overlay.sm-overlay-scope .sm-ranking__cell small:not(.sm-label-neon) {
    order:-1 !important; display:block !important; margin:0 0 2px;
    font-weight:800; font-size:var(--ov-label); letter-spacing:.12em; text-transform:uppercase;
    color:#dbe6f7 !important; background:none !important; -webkit-text-fill-color:initial !important;
    filter:none !important; text-shadow:none !important; animation:none !important;
  }
  .sm-games__overlay.sm-overlay-scope .sm-ranking__cell strong,
  .sm-games__overlay.sm-overlay-scope .sm-ranking__cell .sm-metric-val{
    display:block !important; font-size:var(--ov-val); line-height:1.15; font-weight:900; color:#fff;
  }

  /* Overlay: CTA unten mittig */
  .sm-games__overlay.sm-overlay-scope .sm-ranking__cell:last-child{
    order:3; display:flex !important; justify-content:center !important; padding-top:8px;
  }
  .sm-games__overlay.sm-overlay-scope .sm-ranking__table td:last-child{
    text-align:center !important; padding-right:0 !important; width:auto !important;
  }
  .sm-games__overlay.sm-overlay-scope .sm-ranking__cell:last-child .u-btn{
    width:min(var(--ov-btn-w), 90%) !important; height:var(--ov-btn-h) !important; border-radius:999px; font-weight:900;
  }
}

/* ---------------- RANKING (nur Seiten-Ranking) ---------------- */
/* Tunables NUR fürs Seiten-Ranking (eigenständig justieren) */
@media (max-width: 576px){
  #page-home #ranking.sm-overlay-scope{
    --rk-logo: 72px;   /* LOGO-HÖHE Ranking */
    --rk-gap: 12px;    /* Abstand zwischen Bl├Âcken */
    --rk-pill-py: 10px;
    --rk-pill-px: 14px;
    --rk-val: 20px;
    --rk-label: 12px;
    --rk-btn-w: 260px;
    --rk-btn-h: 50px;
  }

  /* Tabelle brechen + Stack herstellen */
  #page-home #ranking.sm-overlay-scope .sm-ranking__table,
  #page-home #ranking.sm-overlay-scope .sm-ranking__table > tbody{
    display:block !important; width:100% !important;
  }
  #page-home #ranking.sm-overlay-scope .sm-ranking__row{
    display:flex !important; flex-direction:column !important;
    align-items:center !important; text-align:center !important;
    gap:var(--rk-gap); padding:16px 14px 18px;
    grid-template-columns:unset !important;
  }
  #page-home #ranking.sm-overlay-scope .sm-ranking__cell{
    width:100% !important; padding:0 !important; text-align:center;
  }

  /* ganz wichtig: Spalten 3ÔÇô5 sichtbar (├╝berschreibt alte Mobile-Hides) */
  #page-home #ranking.sm-overlay-scope .sm-ranking__row > .sm-ranking__cell:nth-child(3),
  #page-home #ranking.sm-overlay-scope .sm-ranking__row > .sm-ranking__cell:nth-child(4),
  #page-home #ranking.sm-overlay-scope .sm-ranking__row > .sm-ranking__cell:nth-child(5){
    display:block !important; visibility:visible !important;
  }

  /* Ranking: Logo oben */
  #page-home #ranking.sm-overlay-scope .sm-ranking__cell:first-child{ order:1; margin-bottom:2px; }
  #page-home #ranking.sm-overlay-scope .sm-ranking__logo{
    height:var(--rk-logo) !important; max-width:85%; object-fit:contain;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
  }

  /* Ranking: 4 Pills (Label oben, Wert unten) */
  #page-home #ranking.sm-overlay-scope .sm-ranking__cell:nth-child(n+2):not(:last-child){
    order:2; display:flex !important; flex-direction:column-reverse !important;
    align-items:center; gap:4px; padding:var(--rk-pill-py) var(--rk-pill-px);
    margin:2px 0; border-radius:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.10);
  }
  #page-home #ranking.sm-overlay-scope .sm-ranking__cell small:not(.sm-label-neon) {
    order:-1 !important; display:block !important; margin:0 0 2px;
    font-weight:800; font-size:var(--rk-label); letter-spacing:.12em; text-transform:uppercase;
    color:#dbe6f7 !important; background:none !important; -webkit-text-fill-color:initial !important;
    filter:none !important; text-shadow:none !important; animation:none !important;
  }
  #page-home #ranking.sm-overlay-scope .sm-ranking__cell strong,
  #page-home #ranking.sm-overlay-scope .sm-ranking__cell .sm-metric-val{
    display:block !important; font-size:var(--rk-val); line-height:1.15; font-weight:900; color:#fff;
  }

  /* Ranking: CTA unten mittig + alte Tabellenbreite neutralisieren */
  #page-home #ranking.sm-overlay-scope .sm-ranking__cell:last-child{
    order:3; display:flex !important; justify-content:center !important; padding-top:8px !important;
  }
  #page-home #ranking .sm-ranking__table td:last-child{
    text-align:center !important; padding-right:0 !important; width:auto !important;
  }
  #page-home #ranking.sm-overlay-scope .sm-ranking__cell:last-child .u-btn{
    width:min(var(--rk-btn-w), 90%) !important; height:var(--rk-btn-h) !important; border-radius:999px; font-weight:900;
  }
}




/* === HOTFIX (ans Ende der Datei) =========================
   Mobile: Labels (Neon) wieder anzeigen ÔÇô Overlay & Ranking
   ======================================================== */
@media (max-width: 576px){

  /* 1) Neon-Labels (".sm-label-neon") sichtbar + oben platzieren */
  .sm-games__overlay.sm-overlay-scope .sm-ranking__cell .sm-label-neon,
  #page-home #ranking.sm-overlay-scope .sm-ranking__cell .sm-label-neon{
    display: block !important;
    order: -1 !important;              /* Label ├╝ber dem Wert */
    margin: 0 0 4px;
    font-size: var(--ov-label, var(--rk-label, 12px));
    letter-spacing: .12em;
    text-transform: uppercase;

    /* Neon-Look wiederherstellen */
    color: transparent;
    background: linear-gradient(90deg,#ffffff 0%,#ffd36e 20%,#ff7a59 45%,#ff385c 60%,#ffd36e 80%,#ffffff 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255,56,92,.30))
            drop-shadow(0 0 18px rgba(255,211,110,.22));
    animation: sm-neon-sweep 5s linear infinite, sm-neon-flicker 2.6s ease-in-out infinite;
  }

  /* 2) Normale <small> (ohne .sm-label-neon) ruhig halten */
  .sm-games__overlay.sm-overlay-scope .sm-ranking__cell small:not(.sm-label-neon),
  #page-home #ranking.sm-overlay-scope .sm-ranking__cell small:not(.sm-label-neon){
    display: block !important;
    order: -1 !important;
    margin: 0 0 2px;
    font-weight: 800;
    color: #dbe6f7;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}



/* === MOBILE ORDER FIX: Label ├╝ber Wert (Overlay + Ranking) === */
@media (max-width: 576px){

  /* 1) Detail-"Pills" als normale Spalte (kein column-reverse mehr) */
  .sm-games__overlay.sm-overlay-scope .sm-ranking__cell:nth-child(n+2):not(:last-child),
  #page-home #ranking.sm-overlay-scope       .sm-ranking__cell:nth-child(n+2):not(:last-child){
    display: flex !important;
    flex-direction: column !important;   /* <-- WICHTIG: Label/Wert von oben nach unten */
    align-items: center;
  }

  /* 2) Label (small, inkl. .sm-label-neon) nach oben schieben */
  .sm-games__overlay.sm-overlay-scope .sm-ranking__cell small,
  #page-home #ranking.sm-overlay-scope       .sm-ranking__cell small{
    order: -1 !important;                /* <-- Label ÜBER den Wert */
    margin: 0 0 4px !important;
  }
}




@media (max-width:576px){
  /* vertikaler Abstand zwischen den Karten/Zeilen */
  .sm-games__overlay.sm-overlay-scope .sm-ranking__row,
  #page-home #ranking.sm-overlay-scope .sm-ranking__row{
    margin-block: 18px;   /* 18ÔÇô24px nach Geschmack */
  }
  /* falls Glow abgeschnitten wird */
  .sm-games__overlay .table-responsive,
  #page-home #ranking .table-responsive{ overflow: visible; }
}



@media (max-width:576px){
  .sm-games__overlay.sm-overlay-scope .sm-ranking__logo{
    height: var(--ov-logo) !important;
    width: auto !important;
    max-width: 100%;            /* ggf. 100% oder sogar none setzen */
    object-fit: contain;
  }
  #page-home #ranking.sm-overlay-scope .sm-ranking__logo{
    height: var(--rk-logo) !important;
    width: auto !important;
    max-width: 100%;            /* verhindert, dass 85% es kleiner macht */
    object-fit: contain;
  }
}

















/* === Pills AUS: Overlay + Ranking (nur mobil) === */
@media (max-width: 576px){

  /* Overlay */
  .sm-games__overlay.sm-overlay-scope .sm-ranking__cell:nth-child(n+2):not(:last-child){
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding-left: 0 !important;   /* optional: seitliches Padding reduzieren */
    padding-right: 0 !important;
  }

  /* Ranking (Seite) */
  #page-home #ranking.sm-overlay-scope .sm-ranking__cell:nth-child(n+2):not(:last-child){
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding-left: 0 !important;   /* optional */
    padding-right: 0 !important;
  }
}












/* ==== MOBILE ONLY (Ôëñ576px): Overlay & Ranking ÔÇô roter, schimmernder Glaslook ==== */
@media (max-width: 576px){

  /* Tuning-Variablen NUR f├╝r Mobile */
  #page-home{
    --m-glass-k-overlay: .35;  /* Schwarzer Deckschleier Overlay (kleiner = weniger schwarz) */
    --m-glass-k-row:     .28;  /* Schwarzer Deckschleier Ranking-Zeilen */
    --m-glass-red:       .22;  /* Rot-Schimmer (gr├Â├ƒer = mehr Rot) */
    --m-glass-orange:    .14;  /* Orange-Schimmer (wärmt leicht) */
    --m-sheen-white:     .05;  /* Weißer Glanz im Overlay */
  }

  /* ===== Overlay-Hintergrund (r├Âtlich, glasig, leichter Schimmer) ===== */
  #page-home .sm-games__overlay{
    background:
      /* dezente Verdunklung ÔÇô weniger Schwarz */
      linear-gradient(0deg, rgba(0,0,0,var(--m-glass-k-overlay)), rgba(0,0,0,var(--m-glass-k-overlay))),
      /* roter/oranger Schimmer */
      radial-gradient(900px 450px at 12% 15%, rgba(255,56,92,var(--m-glass-red)), transparent 60%),
      radial-gradient(900px 450px at 88% 12%, rgba(255,98,0,var(--m-glass-orange)), transparent 62%),
      /* Grundfläche leicht warm statt tiefschwarz */
      linear-gradient(120deg, rgba(40,0,12,.35), rgba(6,0,2,.45));
    backdrop-filter: blur(6px) saturate(112%);
    -webkit-backdrop-filter: blur(6px) saturate(112%);
  }
  /* schmale wandernde Glanzkante */
  #page-home .sm-games__overlay::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,var(--m-sheen-white)) 50%, transparent 60%);
    mix-blend-mode: screen; opacity:.45;
    animation: sm-mglass-gleam 3.8s ease-in-out infinite;
  }

  /* ===== Ranking-Zeilen (sowohl Seite als auch im Overlay) ===== */
  #page-home #ranking.sm-overlay-scope .sm-ranking__row,
  #page-home .sm-games__overlay .sm-ranking__row{
    background:
      linear-gradient(0deg, rgba(0,0,0,var(--m-glass-k-row)), rgba(0,0,0,var(--m-glass-k-row))),
      radial-gradient(520px 260px at 12% 15%, rgba(255,56,92,var(--m-glass-red)), transparent 60%),
      radial-gradient(540px 280px at 88% 12%, rgba(255,98,0,var(--m-glass-orange)), transparent 62%),
      linear-gradient(120deg, rgba(40,0,12,.30), rgba(6,0,2,.38));
    border: 1px solid rgba(255,56,92,.22);
    backdrop-filter: blur(5px) saturate(110%);
    -webkit-backdrop-filter: blur(5px) saturate(110%);
    background-size: 180% 180%;
    animation: sm-mglass-sheen 18s linear infinite;
  }
  /* die bestehenden Glow-Pseudoelemente etwas z├╝geln */
  #page-home #ranking.sm-overlay-scope .sm-ranking__row::before,
  #page-home .sm-games__overlay .sm-ranking__row::before{ opacity:.45; }
  #page-home #ranking.sm-overlay-scope .sm-ranking__row::after,
  #page-home .sm-games__overlay .sm-ranking__row::after { opacity:.14; }

  /* Keyframes (mobil) */
  @keyframes sm-mglass-sheen{
    0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
  }
  @keyframes sm-mglass-gleam{
    0%{transform:translateX(-120%);opacity:.32}
    50%{transform:translateX(0);opacity:.50}
    100%{transform:translateX(120%);opacity:.32}
  }




  /* Reduced motion respektieren */
  @media (prefers-reduced-motion: reduce){
    #page-home .sm-games__overlay::before,
    #page-home #ranking.sm-overlay-scope .sm-ranking__row,
    #page-home .sm-games__overlay .sm-ranking__row{ animation:none !important; }
  }
}



/* === PODIUM MOBILE PARITY (Ôëñ576px) ÔÇö ANS DATEIENDE SETZEN ===================
   Ziel: Auf Phones den Desktop-Look beibehalten, aber mit eigenen Mobile-Werten.
   Du kannst ALLE Werte unten (Variablen) frei anpassen, ohne Desktop zu ändern.
==============================================================================*/
@media (max-width: 576px){

  /* ---------- 1) TUNABLES NUR FÜR MOBIL ----------------------------------- */
  #page-home .sm-podium{
    /* Karten-Abstand im Grid (zwischen #1/#2/#3) */
    --m-card-gap:        18px;

    /* Logo-H├Âhe in der Karte (├╝berschreibt das fr├╝here 64px-Limit) */
    --m-logo-max-h:      128px;

    /* Überschrift & Bonus-Zeile */
    --m-title-size:      32px;   /* z.B. 28ÔÇô40px */
    --m-bonus-size:      28px;   /* z.B. 24ÔÇô36px */

    /* Abstand zwischen Bonus-Zeile und den Stats */
    --m-stats-top-space: 12px;   /* z.B. 16ÔÇô72px */

    /* Stats (Zeilenabstand & Typo) */
    --m-stats-gap-y:       12px;
    --m-stat-value-size:   22px; /* Zahl */
    --m-stat-label-size:   13px; /* Label */

    /* CTA-Gr├Â├ƒe unten */
    --m-cta-h:           56px;   /* H├Âhe des Claim-Buttons */
    --m-cta-font:        20px;   /* Schriftgr├Â├ƒe im Button */

    /* Mindesth├Âhe einer Karte (falls n├Âtig) */
    --m-card-min-h:     260px;
  }

  /* ---------- 2) Reihenfolge der Karten: Top1  Top2  Top3 ---------------- */
  #page-home .sm-podium__grid{
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-card-gap) !important;
  }
  #page-home .sm-podium__grid > .sm-podium__card--gold   { order: 1 !important; }
  #page-home .sm-podium__grid > .sm-podium__card--silver { order: 2 !important; }
  #page-home .sm-podium__grid > .sm-podium__card--bronze { order: 3 !important; }

  /* ---------- 3) Karten-Innenleben wie Desktop (flex, Platz f├╝r CTA unten) - */
  #page-home .sm-podium__card{
    display: flex !important;
    flex-direction: column !important;
    min-height: var(--m-card-min-h) !important;
    padding: 20px 18px calc(22px + var(--m-cta-h) + 12px) !important;
    border-radius: 22px !important;
    grid-template-columns: unset !important; /* killt das mobile Grid-Layout */
  }

  /* Logo-Gr├Â├ƒe (├╝berschreibt fr├╝heres 64px) */
  #page-home .sm-podium__card .sm-podium__logoimg{
    max-height: var(--m-logo-max-h) !important;
  }

  /* ---------- 4) Bonus/Stats: Desktop-Optik, aber mit Mobile-Werten -------- */
  /* Bonus-Zeile */
  #page-home .sm-podium__bonus{
    font-size: var(--m-bonus-size) !important;
    margin: 8px 0 var(--m-stats-top-space) !important;
  }

  /* Titel (Casino-Name) */
  #page-home .sm-podium__title{
    font-size: var(--m-title-size) !important;
  }

  /* Stats EINSPALTIG + Abstände */
  #page-home .sm-podium__stats{
    display: grid !important;
    grid-template-columns: 1fr !important;        /*  1 Spalte (wie Desktop) */
    row-gap: var(--m-stats-gap-y) !important;
    margin: var(--m-stats-top-space) 0 16px !important;
  }

  /* Stat-Werte & -Labels */
  #page-home .sm-podium__value{
    font-size: var(--m-stat-value-size) !important;
  }
  #page-home .sm-podium__label{
    font-size: var(--m-stat-label-size) !important;
  }

  /* ---------- 5) CTA unten andocken & skalieren ---------------------------- */
  #page-home .sm-podium__card .u-btn{
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    height: var(--m-cta-h) !important;
    font-size: var(--m-cta-font) !important;
    border-radius: 0 0 22px 22px !important;
    /* optional: volle Breite lassen, Look bleibt vom Desktop */
  }
}



/* === PODIUM LOGO ÔÇô MOBILE OVERRIDE (Ôëñ576px)
   hebt die 56px-Breite + Grid-Spalte sicher auf
   Werte unten nach Bedarf anpassen
================================================================ */
@media (max-width:576px){
  /* Karte sicher von Grid zur├╝ck auf Flex */
  #page-home .sm-podium__card{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns: unset !important; /* killt 64px-Spalte */
  }

  /* Tunables nur f├╝r das Logo in den Karten (nicht das Header-Logo) */
  #page-home .sm-podium{
    --m-card-logo-max-h: 140px;  /* maximale Logoh├Âhe */
    --m-card-logo-max-w: 100%;   /* maximale Breite innerhalb der Karte */
    --m-card-logo-mt:   10px;    /* Abstand oben  */
    --m-card-logo-mb:   8px;     /* Abstand unten */
  }

  /* Logo selbst: feste Breite aufheben + ├╝ber H├Âhe skalieren */
  #page-home .sm-podium__card .sm-podium__logoimg{
    width: auto !important;                 /* ├╝berschreibt width:56px */
    max-width: var(--m-card-logo-max-w) !important;
    height: auto !important;
    max-height: var(--m-card-logo-max-h) !important;
    margin: var(--m-card-logo-mt) auto var(--m-card-logo-mb) !important;
    object-fit: contain !important;
    display:block;
  }
}













/* === Podium Top1 Boost ÔÇô PURE CSS ===========================
   Stellschrauben:
   --boost-scale ....... Vergr├Â├ƒerung
   --boost-speed ....... Blink-/Ring-Geschwindigkeit
   --boost-glow ........ Glow-Intensität
==============================================================*/
#page-home .sm-podium__card--gold{
  --boost-scale: 1.05;
  --boost-speed: 1.0s;
  --boost-glow: 1.1;

  position: relative;
  transform: scale(var(--boost-scale));
  z-index: 3;
}

/* Hover darf die Skalierung nicht ├╝berschreiben */
#page-home .sm-podium__card--gold:hover{
  transform: translateY(-3px) scale(var(--boost-scale));
}

/* Leuchtrand um Top1 */
#page-home .sm-podium__card--gold::before{
  content:"";
  position:absolute; inset:-2px; border-radius:inherit; padding:2px; pointer-events:none;
  background: conic-gradient(from var(--boost-angle,0turn),
              #ffd36e, #ff7a59, #ff385c, #ffd36e);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sm-boost-ring var(--boost-speed) linear infinite;
  filter:
    drop-shadow(0 0 calc(18px*var(--boost-glow)) rgba(255,211,110,.45))
    drop-shadow(0 0 calc(24px*var(--boost-glow)) rgba(255,56,92,.35));
}
@keyframes sm-boost-ring{ to { --boost-angle: 1turn; } }

/* Schnelleres/kräftigeres Flickern für Titel & Bonus */
#page-home .sm-podium__card--gold .sm-podium__title,
#page-home .sm-podium__card--gold .sm-podium__bonus{
  animation:
    sm-neon-sweep 3s linear infinite,
    sm-boost-flicker var(--boost-speed) ease-in-out infinite;
}
@keyframes sm-boost-flicker{
  0%,100% { opacity:1;   text-shadow:0 0 10px rgba(255,56,92,.55), 0 0 22px rgba(255,211,110,.45); }
  50%     { opacity:.88; text-shadow:0 0 16px rgba(255,56,92,.80), 0 0 34px rgba(255,211,110,.65); }
}

/* Button pulsiert kräftiger */
#page-home .sm-podium__card--gold .u-btn{
  animation: sm-boost-pulse var(--boost-speed) ease-in-out infinite;
}
@keyframes sm-boost-pulse{
  0%,100%{ transform:translateY(0);
           box-shadow:0 0 30px rgba(255,56,92,.65),0 18px 46px rgba(255,56,92,.45),inset 0 0 14px rgba(255,255,255,.18); }
  50%    { transform:translateY(-1px);
           box-shadow:0 0 42px rgba(255,56,92,.85),0 24px 58px rgba(255,56,92,.60),inset 0 0 18px rgba(255,255,255,.24); }
}

/* Mobile Feinjustage */
@media (max-width:576px){
  #page-home .sm-podium__card--gold{
    --boost-scale: 1.03;   /* etwas weniger Scale auf Phones */
    --boost-speed: .9s;    /* schnelleres Blinken auf Mobil */
    --boost-glow: 1.2;     /* stärkerer Glow auf Mobil */
  }
}

/* Barrierefreiheit: Animationen z├╝geln */
@media (prefers-reduced-motion: reduce){
  #page-home .sm-podium__card--gold::before,
  #page-home .sm-podium__card--gold .sm-podium__title,
  #page-home .sm-podium__card--gold .sm-podium__bonus,
  #page-home .sm-podium__card--gold .u-btn{
    animation: none !important;
  }
}









/* === Podium CTA: echtes Zentrieren & Padding neutralisieren === */
#page-home .sm-podium__card .u-btn{
  /* Base-Padding der .u-btn killen */
  padding-left: 0 !important;
  padding-right: 0 !important;

  /* bombensicher zentrieren */
  display: grid !important;
  place-items: center !important;      /* vertikal + horizontal */
  text-align: center !important;

  /* optional: gleiche Innenabstände links/rechts, wenn gewünscht */
  /* --cta-xpad: 0px;  padding: 0 var(--cta-xpad) !important; */
}

/* Falls du lieber Flex behalten willst, nimm das: */
/*
#page-home .sm-podium__card .u-btn{
  padding-left: 0 !important;
  padding-right: 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
*/











/* Desktop-only: alle Zahlen in der Ranking-Tabelle fett & gleich groß */
@media (min-width: 577px){
  #page-home .sm-ranking__cell strong,
  #page-home .sm-ranking__cell .sm-metric-val{
    font-weight: 900;
    font-size: clamp(19px, 1.5vw, 24px);
    line-height: 1;
  }

	#page-home .sm-ranking__logo{
	  height: 80px;                           /*  vorher 40px */
	  width: auto;
	  object-fit: contain;
	  filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
	}  


}


@media (min-width: 577px){
  #page-home .sm-ranking__cell strong,
  #page-home .sm-ranking__cell .sm-metric-val,
  .sm-overlay-scope .sm-ranking__cell strong,
  .sm-overlay-scope .sm-ranking__cell .sm-metric-val{
    font-weight: 900;
    font-size: clamp(19px, 1.5vw, 24px);
    line-height: 1;
  }
  
	#page-home .sm-ranking__logo{
	  height: 80px;                           /*  vorher 40px */
	  width: auto;
	  object-fit: contain;
	  filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
	}  

  
}








/* ================= DESKTOP FINAL PATCH ================= */
@media (min-width: 577px){
  #page-home{
    /* Tuning */
    --rk-row-dark:   .15;   /* Schwarzanteil (0ÔÇô1) */
    --rk-row-red:    .8;   /* Rot-Ton (0ÔÇô1) */
    --rk-row-sheen:  .5;   /* Schimmer (0ÔÇô1) */
    --rk-row-pad-y:  16px;  /* Zellen-Padding Y */
    --rk-row-pad-x:  14px;  /* Zellen-Padding X */
    --rk-row-radius: 32px;  /* Rundung links/rechts */
  }

  /* 1) EIN Hintergrund pro ROW (verdeckt Zellkanten) */
  #page-home #ranking .sm-ranking__row{
    position: relative !important;
    overflow: hidden !important;                 /* clippt die Rundung */
    border-radius: var(--rk-row-radius) !important;
    background:
      radial-gradient(900px 360px at 12% 18%,
        rgba(255,56,92, var(--rk-row-sheen)), transparent 60%),
      radial-gradient(900px 360px at 88% 82%,
        rgba(255,120,0, calc(var(--rk-row-sheen)*.7)), transparent 62%),
      linear-gradient(180deg,
        rgba(0,0,0, var(--rk-row-dark)),
        rgba(46,0,10, var(--rk-row-red)))
      !important;
    backdrop-filter: blur(4px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(4px) saturate(110%) !important;
  }

  /* 2) Zellen selbst transparent lassen (inkl. CTA-Zelle) */
  #page-home #ranking .sm-ranking__row > .sm-ranking__cell{
    background: transparent !important;
    padding: var(--rk-row-pad-y) var(--rk-row-pad-x) !important;
    vertical-align: middle !important;
    text-align: center !important;              /* alles zentral */
  }
  /* alte Desktop-Regel (right-align + feste Breite) sicher neutralisieren */
  #page-home #ranking .sm-ranking__table td:last-child{
    text-align: center !important;
    width: auto !important;
    padding-right: var(--rk-row-pad-x) !important;
  }

  /* 3) Logo wirklich mittig */
  #page-home #ranking .sm-ranking__cell:first-child{ text-align: center !important; }
  #page-home #ranking .sm-ranking__logo{
    display: block !important;
    margin: 0 auto !important;
  }
}






/* Desktop: Ecken ALLER Ranking-Zeilen (auch .blink-row) sicher abrunden */
@media (min-width:577px){
  #page-home #ranking .sm-ranking__row{
    --rk-radius: 18px;                    /* << Radius hier anpassen */
    border-radius: var(--rk-radius) !important;
    overflow: hidden !important;          /* schneidet alle Effekte/Zellen sauber */
    isolation: isolate;                   /* Pseudoelemente unter dem Inhalt halten */
  }

  /* Gleam/Ring ├╝bernehmen den gleichen Radius ÔÇô sonst ÔÇ×spitzeÔÇ£ Kanten */
  #page-home #ranking .sm-ranking__row::before,
  #page-home #ranking .sm-ranking__row::after{
    border-radius: inherit !important;
  }

  /* Falls .blink-row eigene Styles hat: nur Rounding/Clipping erzwingen */
  #page-home #ranking .sm-ranking__row.blink-row{
    border-radius: var(--rk-radius) !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
  }

  /* Sicherheitsnetz: falls irgendwo Zellflächen doch Hintergrund haben */
  #page-home #ranking .sm-ranking__cell{
    border-radius: 0 !important;
    background: transparent !important;
  }
  #page-home #ranking .sm-ranking__cell:first-child{
    border-top-left-radius:  var(--rk-radius) !important;
    border-bottom-left-radius:var(--rk-radius) !important;
  }
  #page-home #ranking .sm-ranking__cell:last-child{
    border-top-right-radius:  var(--rk-radius) !important;
    border-bottom-right-radius:var(--rk-radius) !important;
  }
}




/* =========================================================
   Divider Title ÔÇô Neon-Look + Tunables (Desktop & Mobile)
   - letter-spacing:   --divider-letter
   - word-spacing:     --divider-word
   - sweep/flicker:    --divider-neon-speed, --divider-flicker-speed
   - wir bleiben in der Pille (.sm-divider__box), ändern nur den Titel
   ========================================================= */

/* Desktop + Default */
#page-home .sm-divider__title.sm-neon-title{
  /* ---------- SPACING (DESKTOP) ---------- */
  --divider-letter: 2.2px;   /*  Buchstabenabstand */
  --divider-word:   .28em;   /*  Wortabstand */

  letter-spacing: var(--divider-letter) !important;
  word-spacing:   var(--divider-word) !important;

  /* Optional: vorhandenen Textschatten des alten Styles neutralisieren,
     damit der Neon-Gradient klar wirkt */
  text-shadow: none !important;

  /* ---------- ANIMATION-TEMPO ---------- */
  /* Du kannst das Tempo des Sweep & Flicker separat steuern */
  --divider-neon-speed:   5s;   /* Sweep-Geschwindigkeit */
  --divider-flicker-speed: 2.6s;/* Flicker-Geschwindigkeit */

  animation:
    sm-neon-sweep var(--divider-neon-speed) linear infinite,
    sm-neon-flicker var(--divider-flicker-speed) ease-in-out infinite;
}

/* Mobile (Ôëñ576px) ÔÇô eigene, kompaktere Abst├ñnde/Gr├Â├ƒen */
@media (max-width:576px){
  #page-home .sm-divider__title.sm-neon-title{
    --divider-letter: 1.2px;  /*  Buchstabenabstand mobil */
    --divider-word:   .14em;  /*  Wortabstand mobil */

    /* Falls du die mobile Gr├Â├ƒe direkt hier setzen willst, sonst
       greift deine vorhandene clamp()-Regel: */
    /* font-size: 32px !important; */
  }
}







/* Mobile: Social-Icons ohne sichtbare Umrandung */
@media (max-width: 600px){
  .sm-community__icons { gap: 10px; }

  .sm-social{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent;
  }

  .sm-social img{
    display: block;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important; /* oder 8px, falls du weiche Kanten willst */
  }
}




/* ===== Pill + zentriert: nur mobil f├╝r die "unteren" Titel =====
   Gilt f├╝r alle .section-title.sm-neon-title EXKLUSIVE .sm-divider__title */
@media (max-width: 768px){
  .section-title.sm-neon-title:not(.sm-divider__title){
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem 1rem;
    border-radius: 999px;
    margin: 0 auto .8rem;          /* zentriert */
    text-align: center;
    max-width: 92vw;
    line-height: 1.15;
    background:
      /* sanfter "Glass" Glanz */
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
      /* dezenter Rot-Schimmer oben */
      radial-gradient(120% 140% at 50% 0%, rgba(230,0,0,.18), rgba(230,0,0,0) 60%),
      #0f1420;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
      0 6px 18px rgba(230,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.05);
    white-space: normal;
    word-break: break-word;
  }

  /* Falls der Titel in einer Toolbar mit Filtern sitzt: Breite auf 100%,
     damit er wirklich mittig stehen kann. */
  .sm-games__toolbar .section-title.sm-neon-title{
    width: 100%;
  }
}

/* ===== Community-Titel: immer zentriert (mobil + desktop), ohne Pill ===== */
.sm-community__title.sm-neon-title{
  display: block;
  text-align: center;
  margin: 0 auto .8rem;
}





/* Mobil: gleiche Pillen-Optik wie die anderen Titel */
@media (max-width: 768px){
  .sm-community__title.sm-neon-title{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem 1rem;
    border-radius: 999px;
    margin: 0 auto .8rem;
    max-width: 92vw;
    white-space: normal;
    word-break: break-word;

    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
      radial-gradient(120% 140% at 50% 0%, rgba(230,0,0,.18), rgba(230,0,0,0) 60%),
      #0f1420;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
      0 6px 18px rgba(230,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.05);
  }
}




/* ÔÇöÔÇöÔÇö Abst├ñnde zwischen Sektionen: Giveaways, Leaderboard, Community ÔÇöÔÇöÔÇö */
:root{
  --sec-gap-desktop: 100px;   /* Desktop-Abstand */
  --sec-gap-mobile:  36px;   /* Mobile-Abstand */
}

/* IDs/Klassen nach deinem Layout ÔÇô gern anpassen */
:where(#giveaways, #leaderboard, .sm-community){
  margin-block: var(--sec-gap-desktop);
}

/* Mobile: etwas enger, aber luftiger als vorher */
@media (max-width: 768px){
  :where(#giveaways, #leaderboard, .sm-community){
    margin-block: var(--sec-gap-mobile);
  }
}





/* ===== Spacing fix: Leaderboard  Community ===== */
:root{ --lb-comm-gap: clamp(48px, 8vw, 120px); }

/* sorge f├╝r Luft UNTER dem Leaderboard */
#leaderboard{
  margin-bottom: var(--lb-comm-gap) !important;
}

/* sorge für Luft ÜBER der Community (Padding verhindert Margin-Collapse) */
.sm-lb + .sm-community,
#community{
  padding-top: calc(var(--lb-comm-gap) * .75) !important;
}

/* optional: auf großen Screens noch etwas mehr */
@media (min-width: 992px){
  #leaderboard{ margin-bottom: calc(var(--lb-comm-gap) * 1.0) !important; }
  .sm-lb + .sm-community,
  #community{ padding-top: var(--lb-comm-gap) !important; }
}



/* ===== Abstand ├╝ber dem Button (exakt 3 Zeilen) ===== */
#leaderboard .mt-3.text-center{
  margin-top: 3em !important;          /* Fallback Ôëê 3 Zeilen */
}
@supports (margin-top: 1lh){
  #leaderboard .mt-3.text-center{
    margin-top: 3lh !important;        /* exakt 3 Textzeilen */
  }
}

/* ===== Nur dieser Button: bessere Schrift + SchwarzÔåÆRotÔåÆWei├ƒ Textverlauf ===== */
#lb-view-all{
  /* Form & Layout */
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:10px 18px; min-height:38px;
  line-height:1; white-space:nowrap;

  /* Schrift (aus base.html geladen) */
  font-family: "Bebas Neue","Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:1500;                      /* Bebas Neue ist Display-Font */
  font-size: 1.9rem;
  letter-spacing:.06em;                 /* etwas weiter */
  word-spacing:.10em;
  text-transform:uppercase;

  /* Button-Hintergrund (bleibt wie gehabt, 1. Layer) + Textgradient (2. Layer) */
  background-image:
    linear-gradient(90deg, #ff3b2f, #ffb703),                    /* Button-F├╝llung */
    linear-gradient(90deg, #0a0a0a 0%, #d82020 50%, #ffffff 100%);/* Text-Verlauf */
  background-origin: border-box, border-box;
  background-clip: padding-box, text;                            /* 1.=Button, 2.=Text */
  -webkit-background-clip: padding-box, text;
  color: transparent;                                            /* f├╝r Text-Gradient */
  -webkit-text-fill-color: transparent;

  /* Kontrast leicht erh├Âhen */
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 10px rgba(255,255,255,.12);

  border:0;
  box-shadow: 0 8px 22px rgba(255,59,47,.25), inset 0 0 0 1px rgba(255,255,255,.16);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
#lb-view-all:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(255,59,47,.35), inset 0 0 0 1px rgba(255,255,255,.2);
  filter: brightness(1.04);
}
#lb-view-all:focus-visible{
  outline: 2px solid rgba(255,183,3,.6);
  outline-offset: 2px;
}
#lb-view-all:active{
  transform: none;
  box-shadow: 0 6px 16px rgba(255,59,47,.25), inset 0 0 0 1px rgba(255,255,255,.16);
}
#lb-view-all:disabled{
  opacity:.6; filter:none; transform:none; box-shadow:none;
}



/* Mobil: gr├Â├ƒerer Tap-Target */
@media (max-width: 768px){
  #lb-view-all{ padding:12px 20px; min-height:42px; }
  
	#lb-view-all{
	  font-weight: 900;      /* fetter */
	  font-size: 1.2rem;     /* gr├Â├ƒer (anpassen nach Geschmack) */
	}  
	  
}







/* ===== RAFFLES ÔÇô zentriert, Glass Cards & Grids (scoped) ===== */
#page-home .raffles_list_index{
  --rf-bg:#0c0d0f;
  --rf-card: rgba(16,17,20,.55);
  --rf-card-fallback:#15161a;
  --rf-border: rgba(255,255,255,.08);
  --rf-border-2: rgba(255,255,255,.14);
  --rf-muted:#a9afba;
  --rf-text:#e9edf3;
  --rf-accent:#e0212d;
  --rf-accent-2:#ff8a00;
  --rf-ok:#1fb66f;
  --rf-warn:#caa34b;

  max-width: 1100px;
  margin: 48px auto 0;
  padding: 0 12px;
  text-align: center;
  color: var(--rf-text);
}

#page-home .raffles_list_index .muted{ color:var(--rf-muted) }

/* Headline */


/* ========= Active Grid ========= */
#page-home .raffles_list_index .rf-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items:stretch;
}
@media (max-width: 992px){
  #page-home .raffles_list_index .rf-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 576px){
  #page-home .raffles_list_index .rf-grid{ grid-template-columns: 1fr; }
}

/* ========= History Grid ========= */
#page-home .raffles_list_index .rf-grid--history{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1200px){
  #page-home .raffles_list_index .rf-grid--history{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 992px){
  #page-home .raffles_list_index .rf-grid--history{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 576px){
  #page-home .raffles_list_index .rf-grid--history{ grid-template-columns: 1fr; }
}

/* ========= Glass Cards ========= */
#page-home .raffles_list_index .rf-card{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 40%),
    var(--rf-card-fallback);
  border:1px solid var(--rf-border);
  border-radius:18px;
  padding:16px;
  text-align:center;               /* << zentriert alles in der Karte */
  display:flex; flex-direction:column;

  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  background-color: var(--rf-card);

  box-shadow: 0 12px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
#page-home .raffles_list_index .rf-card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--rf-accent), var(--rf-accent-2));
  opacity:.5; border-top-left-radius:18px; border-top-right-radius:18px;
}
#page-home .raffles_list_index .rf-card--history{ opacity:.98; }
#page-home .raffles_list_index .rf-card.rf-ended{ opacity:.88; filter:saturate(.92); }

/* Body & Footer: Footer immer nach unten dr├╝cken */
#page-home .raffles_list_index .rf-body{ display:flex; flex-direction:column; min-height: 100%; }
#page-home .raffles_list_index .rf-footer{
  margin-top:auto;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
#page-home .raffles_list_index .rf-actions{
  display:flex; gap:.75rem; align-items:center; justify-content:center; flex-wrap:wrap;
}

/* Badge / Typo */
#page-home .raffles_list_index .rf-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--rf-border-2);
  background: rgba(26,28,32,.75); color: var(--rf-text); font-size:.88rem;
  text-align:center;
}
#page-home .raffles_list_index .rf-badge--muted{ opacity:.85; }

#page-home .raffles_list_index .rf-title{ margin:.55rem 0 .35rem; line-height:1.25; color: var(--rf-text); }
#page-home .raffles_list_index .rf-title--big{ font-size: clamp(1.15rem, .9rem + .9vw, 1.55rem); }
#page-home .raffles_list_index .rf-title--history.rf-title--big{ font-size: clamp(1.05rem, .85rem + .75vw, 1.35rem); }
#page-home .raffles_list_index .rf-desc{ color:#d6dbe4; font-size:.96rem; margin:0 0 .65rem; }

/* Meta & Countdown ÔÇô untereinander */
#page-home .raffles_list_index .rf-meta{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.45rem; margin:.35rem 0 .9rem; text-align:center;
}
#page-home .raffles_list_index .rf-end{ width:100%; display:block; color:#dbe0e8; }
#page-home .raffles_list_index .rf-countdown{ font-variant-numeric:tabular-nums; color:#fff; }

/* Details / Mehr anzeigen */
#page-home .raffles_list_index .rf-details > summary,
#page-home .raffles_list_index .rf-more > summary{
  cursor:pointer; user-select:none; list-style:none;
  padding:8px 12px; border-radius:12px;
  border:1px solid var(--rf-border-2);
  background: rgba(28,30,36,.8);
  display:inline-block; margin-top:.25rem;
  color: var(--rf-text); text-align:center;
}
#page-home .raffles_list_index .rf-details[open] > summary,
#page-home .raffles_list_index .rf-more[open] > summary{
  background: rgba(32,34,40,.85);
}

/* Tabelle */
#page-home .raffles_list_index .rf-table-wrap{ margin-top:.55rem; }
#page-home .raffles_list_index .table{ --bs-table-bg:transparent; color: var(--rf-text); }
#page-home .raffles_list_index .table thead th{
  background: rgba(28,30,36,.9);
  border-bottom:1px solid var(--rf-border-2);
  text-align:center;
}
#page-home .raffles_list_index .table td,
#page-home .raffles_list_index .table th{ border-color: var(--rf-border-2); text-align:center; }
/* Username-Spalte nicht mehr links ausrichten  insgesamt zentriert */
#page-home .raffles_list_index .table td.text-start{ text-align:center !important; }

/* Pills */
#page-home .raffles_list_index .rf-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.32rem .65rem; border-radius:999px; font-size:.86rem;
  border:1px solid var(--rf-border-2); text-align:center;
}
#page-home .raffles_list_index .rf-pill-ok{ background:rgba(31,182,111,.16); color:#c5f6da; border-color:rgba(31,182,111,.4); }
#page-home .raffles_list_index .rf-pill-warn{  color:#ffe1a3; border-color:rgba(255,196,64,.35); }

/* Buttons */
#page-home .raffles_list_index .btn{ border-radius:12px; border:1px solid transparent; }
#page-home .raffles_list_index .btn-danger{ background:linear-gradient(90deg, var(--rf-accent), var(--rf-accent-2)); color:#fff; }
#page-home .raffles_list_index .btn-secondary{ background: rgba(43,46,52,.85); color:#e6e6e6; border-color: var(--rf-border-2); }

/* History */
#page-home .raffles_list_index .rf-history{ margin-top:26px; text-align:center; }
#page-home .raffles_list_index .rf-subtitle{ margin:0 0 12px; }
#page-home .raffles_list_index .rf-subtitle--big{ font-size: clamp(1.25rem, 1.0rem + 1.2vw, 1.7rem); }
#page-home .raffles_list_index .rf-winners{ margin-top:10px; }
#page-home .raffles_list_index .rf-winners-title{ font-weight:800; margin-bottom:6px; color: var(--rf-text); }
#page-home .raffles_list_index .rf-winner-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; justify-items:center; }
#page-home .raffles_list_index .rf-winner-item{ display:flex; gap:8px; justify-content:center; align-items:center; color: var(--rf-text); }
#page-home .raffles_list_index .rf-result{ text-align:center; }




/* Abstand ├╝ber dem Ergebnis-Pill in der History */
#page-home .raffles_list_index .rf-card--history .rf-result{
  margin-top: 12px;   /* Ôëê eine Zeile */
}

/* (optional) ein Hauch weniger Abstand unter der Gewinnerliste, damit es sauber wirkt */
#page-home .raffles_list_index .rf-card--history .rf-winners{
  margin-bottom: 4px;
}








/* Raffles/History-Titel: dunklere Glass-Pill hinter dem Neon-Text.
   WICHTIG: wir ändern NICHT ::after, damit der Kreis exakt wie beim Divider bleibt. */
#page-home .raffles_list_index .sm-divider__title,
#page-home .raffles_list_index .sm-divider__title.sm-divider__title--sm{
  position: relative;
  display: inline-block;
  isolation: isolate;       /* eigener stacking context */
  z-index: 0;
}

/* Nur die Pill (unter dem Text & unter dem Kreis) */
#page-home .raffles_list_index .sm-divider__title::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(10,12,15,.94), rgba(10,12,15,.86)); /* dunkler */
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  box-shadow: 0 10px 26px rgba(0,0,0,.50), inset 0 1px rgba(255,255,255,.06);
  z-index: -2;   /* unter dem Divider-Kreis (::after) */
  pointer-events: none;
}

/* Kompaktere Pill f├╝r History (nur Padding anpassen, Kreis bleibt vom Divider) */
#page-home .raffles_list_index .sm-divider__title.sm-divider__title--sm{
  padding: 8px 16px; /* optional ÔÇô falls dein Divider hier nicht bereits skaliert */
}

/* Abstände */
#page-home .raffles_list_index .rf-head { margin-bottom: 55px; }
#page-home .raffles_list_index .rf-history { margin-top: 28px; }
#page-home .raffles_list_index .rf-subtitle { margin-bottom: 12px; }



/* Raffles-Titel: KEINE extra dunkle Pill ÔÇô Kreis/Glow bleibt wie beim Divider */
#page-home .raffles_list_index .sm-divider__title::before,
#page-home .raffles_list_index .sm-divider__title.sm-divider__title--sm::before{
  content: none !important;
}






















/* ===== PODIUM MOBILE COMPACT (Ôëñ576px) ÔÇö ~50% Gr├Â├ƒe ===== */
@media (max-width:576px){
  /* Gr├Â├ƒen per Variablen runterdrehen (greift in deinen Mobile-Blocks) */
  #page-home .sm-podium{
    --m-card-gap:        10px;   /* Abstand zwischen den Karten */
    --m-card-min-h:      170px;  /* Mindesth├Âhe pro Karte */
    --m-logo-max-h:      70px;   /* Logo in der Karte */
    --m-card-logo-max-h: 70px;   /* falls der Logo-Mobile-Override aktiv ist */
    --m-title-size:      18px;   /* Casino-Name */
    --m-bonus-size:      16px;   /* Bonus-Zeile */
    --m-stats-top-space: 6px;    /* Abstand Bonus  Stats */
    --m-stats-gap-y:     6px;    /* Zeilenabstand in den Stats */
    --m-stat-value-size: 14px;   /* Zahlen in den Stats */
    --m-stat-label-size: 11px;   /* Labels in den Stats */
    --m-cta-h:           40px;   /* Button-H├Âhe */
    --m-cta-font:        14px;   /* Button-Schrift */
  }

  /* Karte kompakter, Platz f├╝r kleineren CTA unten */
  #page-home .sm-podium__card{
    padding: 12px 12px calc(12px + var(--m-cta-h) + 6px) !important;
    border-radius: 16px !important;
    min-height: var(--m-card-min-h) !important;
  }

  /* Logos wirklich kleiner */
  #page-home .sm-podium__card .sm-podium__logoimg{
    max-height: var(--m-logo-max-h) !important;
  }

  /* Titel/Bonus enger & kleiner */
  #page-home .sm-podium__title{
    font-size: var(--m-title-size) !important;
    margin: 6px 0 4px !important;
  }
  #page-home .sm-podium__bonus{
    font-size: var(--m-bonus-size) !important;
    margin: 4px 0 var(--m-stats-top-space) !important;
    -webkit-text-stroke: .4px rgba(255,56,92,.85) !important;
  }

  /* Stat-Block kompakter */
  #page-home .sm-podium__stats{
    row-gap: var(--m-stats-gap-y) !important;
    margin: var(--m-stats-top-space) 0 8px !important;
  }
  #page-home .sm-podium__value{
    font-size: var(--m-stat-value-size) !important;
  }
  #page-home .sm-podium__label{
    font-size: var(--m-stat-label-size) !important;
  }

  /* Badge kleiner */
  #page-home .sm-podium__badge{
    padding: 3px 6px !important;
    font: 800 11px/1 var(--font-body) !important;
  }

  /* CTA unten passend verkleinern */
  #page-home .sm-podium__card .u-btn{
    height: var(--m-cta-h) !important;
    font-size: var(--m-cta-font) !important;
    border-radius: 0 0 16px 16px !important;
  }
}



/* ===== PODIUM STATS ÔÇô mobile nebeneinander (links/mitte/rechts) ===== */
@media (max-width:576px){
  /* Stats sichtbar + 3 Spalten */
  #page-home .sm-podium__stats{
    display: grid !important;                          /* ├╝berschreibt evtl. display:none */
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    column-gap: 10px;
    row-gap: 6px;
    margin: var(--m-stats-top-space, 8px) 0 8px !important;
  }

  /* Grund-Layout beibehalten (Label ├╝ber Zahl) */
  #page-home .sm-podium__stat{
    display: flex !important;
    flex-direction: column-reverse !important;         /* Label ├╝ber Wert (wie bisher) */
    gap: 4px;
  }

  /* 1. links, 2. mittig, 3. rechts */
  #page-home .sm-podium__stat:nth-child(1){
    align-items: flex-start !important;
    text-align: left !important;
  }
  #page-home .sm-podium__stat:nth-child(2){
    align-items: center !important;
    text-align: center !important;
  }
  #page-home .sm-podium__stat:nth-child(3){
    align-items: flex-end !important;
    text-align: right  !important;
  }

  /* Sicherheit: Werte & Labels block-level, damit text-align greift */
  #page-home .sm-podium__value,
  #page-home .sm-podium__label{
    display: block !important;
    width: 100%;
  }
}