/* nur innerhalb #sm-footer gültig */
#sm-footer{
  --foot-bg: linear-gradient(180deg, #0b0c10 0%, #0f1117 100%);
  --foot-border: rgba(255,255,255,.06);
  --foot-text: #dbe2ee;
  --foot-muted: #9aa6b2;
  --foot-link: #ffd36e;

  margin-top: clamp(24px, 6vw, 64px);
  background: var(--foot-bg);
  border-top: 1px solid var(--foot-border);
  box-shadow: 0 -8px 24px rgba(0,0,0,.25) inset;
  color: var(--foot-text);
}

#sm-footer .footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:18px 14px; flex-wrap:wrap;
}

#sm-footer p{ margin:0 0 6px; }

#sm-footer a{ color:var(--foot-link); text-decoration:none; }
#sm-footer a:hover{ text-decoration:underline; }

/* Credits / details */
#sm-footer .build-info{ color:var(--foot-muted); }
#sm-footer .build-info summary{
  list-style:none; cursor:pointer; user-select:none; padding:6px 0;
}
#sm-footer .build-info summary::-webkit-details-marker{ display:none; }
#sm-footer .build-info[open] summary{ color:var(--foot-text); }
#sm-footer .build-info ul{ margin:6px 0 0; padding-left:16px; }
#sm-footer .build-info li{ margin:2px 0; }

/* GambleAware Badge – feste/resp. Größe */
#sm-footer .ga-badge img{
  display:block; height:clamp(26px, 4vw, 40px); width:auto;
  filter:saturate(.92) contrast(1.05);
  transition:transform .15s ease, filter .15s ease;
}
#sm-footer .ga-badge:hover img{ transform:translateY(-1px); filter:none; }

/* Mobile */
@media (max-width: 640px){
  #sm-footer .footer-inner{ align-items:flex-start; }
  #sm-footer .footer-right{ margin-left:auto; }
}



/* Sticky Footer Layout – nur aktiv, wenn body#sm-body gesetzt ist */
#sm-body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;            /* Fallback für ältere Browser */
}
@supports (height: 100dvh){
  #sm-body{ min-height: 100dvh; }  /* Korrekt für Mobile Viewports */
}
#sm-main{ flex: 1 0 auto; }
#sm-footer{ margin-top: auto; }



/* Kompatibilität: .main-area enthält den Footer → dort Flex-Spalte aktivieren */
#sm-main{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@supports (height: 100dvh){
  #sm-main{ min-height: 100dvh; }
}
/* Inhalt dehnt sich, Footer rutscht nach unten */
#sm-main > .content{ flex: 1 0 auto; }
/* Footer bekommt den Auto-Abstand nach oben */
#sm-footer{ margin-top: auto; }




/* ===== Dunkler, glanzvoller Standard-Hintergrund (Seite, falls Content transparent) */
#sm-body{
  background:
    radial-gradient(1200px 800px at 0% -10%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(1200px 800px at 100% -10%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, #060708 0%, #0a0b0f 100%);
  color-scheme: dark; /* bessere Standardfarben für Form Controls */
}

/* ===== Footer: tiefschwarz + dezenter Glanz, immer gut lesbar */
#sm-footer{
  position: relative;
  background:
    radial-gradient(900px 420px at 15% -20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1200px 520px at 85% -30%, rgba(255,255,255,.04), transparent 65%),
    linear-gradient(180deg, #0a0b0e 0%, #0a0a0d 60%, #0e0e12 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -12px 28px rgba(0,0,0,.35);
  color: #e9eef7;
}

/* Optional: sanfter „Sheen“ beim Hover (ohne Bewegung für Reduced Motion) */
#sm-footer::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  opacity: 0; pointer-events:none; transition: opacity .28s ease;
}
#sm-footer:hover::before{ opacity: .12; }
@media (prefers-reduced-motion: reduce){
  #sm-footer::before{ transition: none; }
}

/* Links im Footer kontrastreich */
#sm-footer a{
  color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.18);
}
#sm-footer a:hover{ border-bottom-color: rgba(255,255,255,.36); }

/* Falls der Footer-Container transparent war: leichte Glasfläche */
#sm-footer .container{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}


/* Rahmen/Glas-Effekt der Footer-Containerfläche deaktivieren */
#sm-footer .container{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important; /* extr. Innenabstand aus der alten Regel entfernen */
}




/* Desktop: Footer-Inhalt leicht nach rechts vom Zentrum schieben */
:root{ --footer-offset-desktop: 40px; } /* + weiter rechts, − nach links */

@media (min-width: 993px){
  #sm-footer > .container,
  .site-footer > .container{
    transform: translateX(var(--footer-offset-desktop));
  }
}








/* ===== Bottom-right Credits FAB (SpinMafia) =============================== */
:root{
  --smc-delay-first: 20s;     /* erste Einblendung */
  --smc-delay-repeat: 180s;   /* Wiederholung (nur für CSS-Animation-Reserve) */
}

#sm-credits-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 3000;
  display: none;                 /* per JS auf block */
  align-items: center;
  gap: 8px;
  pointer-events: none;          /* nur Kinder klickbar */
}

#sm-credits-fab .smc-btn{
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font: 600 13px/1.1 "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #e9eef7;
  background: linear-gradient(180deg, rgba(20,22,28,.92), rgba(9,10,12,.92));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(8px);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform, opacity;
}

#sm-credits-fab.show .smc-btn{
  transform: none;
  opacity: 1;
}

#sm-credits-fab .smc-btn:hover{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 14px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
}

#sm-credits-fab .smc-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, #ffc14f 0%, #ff7a59 55%, #ff3d3d 100%);
  box-shadow: 0 0 8px rgba(255,122,89,.55);
}

#sm-credits-fab .smc-txt{ letter-spacing: .2px; }

/* Close-X */
#sm-credits-fab .smc-close{
  pointer-events: auto;
  margin-left: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e9eef7;
  line-height: 1; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease, background .2s ease, border-color .2s ease;
}
#sm-credits-fab.show .smc-close{ transform:none; opacity:1; }
#sm-credits-fab .smc-close:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }

/* Respekt vor Reduced Motion */
@media (prefers-reduced-motion: reduce){
  #sm-credits-fab .smc-btn,
  #sm-credits-fab .smc-close{ transition: none; }
}