html, body { color:#e6edf3; font-family:'Space Grotesk', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
html { scroll-behavior:smooth; background:#0b0d10; color-scheme:dark; }
/* Body-Background: Deep-Teal/Petrol Grundton mit Mint-Glow oben +
Dot-Grid für Tiefe. Selbe Farbfamilie wie Mint = harmonisch, monochrom-elegant.
!important nötig damit das Tailwind-Util "bg-ink-950" auf nicht gewinnt
(jede View hat ). */
body {
background-color: #0b0d10 !important;
background-image:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245,181,36,0.08) 0%, transparent 60%),
linear-gradient(180deg, #11151a 0%, #0b0d10 40%, #090b0e 100%) !important;
background-size: 100% 100%, 100% 100% !important;
background-attachment: fixed !important;
/* eigener Stacking-Kontext → erlaubt z-index:-1 Kindern (Samurai-BG) hinter Content zu liegen ohne unter Body-BG zu rutschen */
isolation: isolate;
}
.surface { background: linear-gradient(160deg, #1a2129 0%, #11151a 60%, #0d1115 100%); }
/* Marquee — nahtloses laufendes Band für den Raffle-Gewinner-Ticker.
Content ist im HTML 6× dupliziert; -16.67% = eine Basis-Set-Breite → Loop nahtlos
da Copy #2 visuell identisch zu Copy #1 ist. Mehr Dups = füllt auch breite Viewports. */
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-16.6667%); }
}
.animate-marquee { animation: marquee 20s linear infinite; width: max-content; }
@media (prefers-reduced-motion: reduce) {
.animate-marquee { animation: none; }
}
/* Gold-Shimmer für Text (wie Podium #1 Effekt, nur als Text). */
.text-gold-shimmer {
background: linear-gradient(90deg, #ffd24a 0%, #fff3b0 25%, #ffd24a 50%, #fff3b0 75%, #ffd24a 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gold-shimmer 3s linear infinite;
}
@keyframes gold-shimmer {
from { background-position: 0% 0; }
to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.text-gold-shimmer { animation: none; }
}
/* Aktiver 3D Gold Shimmer — Tiefe via Drop-Shadow (Schriftart bleibt unverändert) */
.text-gold-shimmer-3d {
background: linear-gradient(
180deg,
#fff8d0 0%,
#ffe478 15%,
#ffc94d 35%,
#d99318 60%,
#a06808 85%,
#c98a18 100%
);
background-size: 100% 200%;
background-position: 0 0;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter:
drop-shadow(0 1px 0 rgba(255, 245, 200, 0.6))
drop-shadow(0 2px 0 rgba(160, 100, 15, 0.55))
drop-shadow(0 4px 0 rgba(110, 65, 5, 0.45))
drop-shadow(0 10px 28px rgba(255, 195, 60, 0.45));
animation: gold-3d-tilt 4s ease-in-out infinite;
position: relative;
isolation: isolate;
}
/* Aktiver Schimmer-Sweep (heller Glanzstreifen über die Goldfläche) */
.text-gold-shimmer-3d::after {
content: attr(data-text);
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 20%,
rgba(255, 255, 255, 0.0) 35%,
rgba(255, 255, 255, 0.95) 50%,
rgba(255, 255, 255, 0.0) 65%,
transparent 80%
);
background-size: 220% 100%;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gold-3d-sweep 2s linear infinite;
pointer-events: none;
z-index: 1;
}
@keyframes gold-3d-tilt {
0%, 100% { background-position: 0% 0%; }
50% { background-position: 0% 100%; }
}
@keyframes gold-3d-sweep {
0% { background-position: 200% 0; }
100% { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
.text-gold-shimmer-3d,
.text-gold-shimmer-3d::after { animation: none; }
}
.text-mint-grad { background: linear-gradient(90deg, #ffc83d 0%, #ffdd80 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Hero-Akzent ("ohne Limits") — schlichter Mint-Verlauf, kein Effekt */
.text-shimmer {
background: linear-gradient(90deg, #ffc83d 0%, #ffdd80 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-bg { position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(70% 80% at 90% 20%, rgba(245,181,36,.18) 0%, transparent 60%),
radial-gradient(60% 70% at 10% 80%, rgba(255,200,61,.10) 0%, transparent 60%),
linear-gradient(180deg, #11151a 0%, #0b0d10 100%);
}
/* hover cards (casino rows) */
.card { position:relative; border-radius:1rem; border:1px solid rgba(255,255,255,.06); transition: border-color .2s ease, box-shadow .2s ease; }
.card:hover { border-color: rgba(255,200,61,.4); box-shadow: 0 8px 30px -10px rgba(245,181,36,.25); }
/* sidebar shell — no hover, no transform; rounded so scrollbar gets clipped */
.sidebar-shell {
border-radius: 1rem;
border: 1px solid rgba(255,255,255,.06);
overflow: hidden;
}
.sidebar-scroll {
overflow-y: auto;
padding: 1.25rem;
}
@media (min-width: 1024px) {
.sidebar-scroll { max-height: calc(100vh - 6rem); }
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,200,61,.25); border-radius: 999px; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,200,61,.45); }
.sidebar-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,200,61,.25) transparent; }
/* buttons */
.btn-mint { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem 1rem; border-radius:.6rem; font-weight:600; background:#f5b524; color:#0a1500; border:1px solid rgba(255,255,255,.06); transition: background .15s ease, transform .15s ease; }
.btn-mint:hover { background:#ffc83d; transform: translateY(-1px); }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.55rem .9rem; border-radius:.6rem; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); color:#e6edf3; transition: border-color .15s ease, color .15s ease; cursor: pointer; }
.btn-ghost:hover { border-color: rgba(255,200,61,.5); color:#fff; }
.btn-twitch { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.55rem .9rem; border-radius:.6rem; font-weight:600; background:#9146ff; color:#fff; border:1px solid rgba(255,255,255,.08); transition: background .15s ease, transform .15s ease; }
.btn-twitch:hover { background:#a970ff; transform: translateY(-1px); color:#fff; }
/* Social Icon Buttons im Footer — neutral, hover'd Brand-Farbe */
.social-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.7);
font-size: 1.05rem;
transition: all .2s ease;
}
.social-ico:hover { transform: translateY(-2px); color: #fff; }
.social-ico[data-net="instagram"]:hover {
background: linear-gradient(135deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
border-color: rgba(220, 39, 67, .6);
box-shadow: 0 6px 16px -6px rgba(220,39,67,.55);
}
.social-ico[data-net="twitch"]:hover {
background: #9146ff;
border-color: rgba(145,70,255,.7);
box-shadow: 0 6px 16px -6px rgba(145,70,255,.55);
}
.social-ico[data-net="telegram"]:hover {
background: #229ed9;
border-color: rgba(34,158,217,.7);
box-shadow: 0 6px 16px -6px rgba(34,158,217,.55);
}
/* Amber-Button für "Geschenk abholen" CTA */
.btn-amber { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem 1rem; border-radius:.6rem; font-weight:700; background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); color:#1a0f00; border:1px solid rgba(245,158,11,.45); box-shadow: 0 0 18px -4px rgba(245,158,11,.45); transition: transform .15s ease, box-shadow .15s ease; cursor:pointer; }
.btn-amber:hover { transform: translateY(-1px); box-shadow: 0 0 24px -4px rgba(245,158,11,.65); }
/* Aufmerksamkeits-Animation: pulsierender Goldglow + wackelndes Geschenk-Icon + Sheen-Shimmer */
.btn-amber-attn { position: relative; overflow: hidden; animation: amber-pulse 2.2s ease-in-out infinite; }
@keyframes amber-pulse {
0%, 100% { box-shadow: 0 0 18px -4px rgba(245,158,11,.45), 0 0 0 0 rgba(245,158,11,.55); }
50% { box-shadow: 0 0 28px -2px rgba(251,191,36,.85), 0 0 0 6px rgba(245,158,11,0); }
}
.btn-amber-gift { transform-origin: 50% 60%; animation: gift-wiggle 2.2s ease-in-out infinite; }
@keyframes gift-wiggle {
0%, 60%, 100% { transform: rotate(0deg) scale(1); }
68% { transform: rotate(-14deg) scale(1.12); }
76% { transform: rotate(12deg) scale(1.12); }
84% { transform: rotate(-8deg) scale(1.08); }
92% { transform: rotate(6deg) scale(1.04); }
}
.btn-amber-shine {
position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
transform: skewX(-20deg);
animation: amber-sheen 2.6s ease-in-out infinite;
pointer-events: none;
}
@keyframes amber-sheen {
0%, 60% { left: -60%; }
100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
.btn-amber-attn, .btn-amber-gift, .btn-amber-shine { animation: none; }
}
/* Bonus-Code Box: pulsierender Mint-Glow zur Aufmerksamkeit */
@keyframes code-pulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(255,200,61,.35), 0 0 14px -2px rgba(255,200,61,.25); border-color: rgba(255,200,61,.45); }
50% { box-shadow: 0 0 0 1px rgba(255,200,61,.65), 0 0 22px -2px rgba(255,200,61,.55); border-color: rgba(255,200,61,.75); }
}
.code-box { animation: code-pulse 2.4s ease-in-out infinite; background: rgba(245,181,36,.05); }
/* Details-Toggle: Hervorhebung + Chevron-Bounce, damit klar wird dass es aufklappbar ist */
.details-toggle {
background: rgba(255,200,61,.06);
border: 1px solid rgba(255,200,61,.22);
color: #ffdd80 !important;
font-weight: 600;
transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.details-toggle:hover { background: rgba(255,200,61,.14); border-color: rgba(255,200,61,.55); transform: translateY(-1px); }
@keyframes chevron-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
.details-toggle .details-icon { animation: chevron-bounce 1.4s ease-in-out infinite; will-change: transform; }
.card.open .details-toggle .details-icon { animation: none; }
/* filters — Card-Stack-Design (Option B) */
/* generic chip baseline (kept for pill-style usage outside the QF grid) */
.chip { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.5rem .85rem; border-radius:999px; font-size:.8rem; line-height:1; cursor:pointer; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); color:#b8c0c8; transition: all .15s ease; user-select:none; min-height: 2.1rem; }
.chip:hover { color:#fff; border-color: rgba(255,200,61,.4); }
.chip.active { background: rgba(245,181,36,.14); border-color: rgba(255,200,61,.5); color:#ffe9b0; }
.chip i { font-size: .75rem; line-height: 1; flex-shrink: 0; }
/* Quick-Filter tiles — Color-Coded (Icon oben, Label unten), kompakt */
.chip.qf-tile {
flex-direction: column;
gap: 2px;
padding: 7px 6px;
border-radius: 8px;
min-height: 0;
font-size: .7rem;
font-weight: 600;
background: var(--qf-bg, rgba(255,255,255,.03));
border: 1px solid var(--qf-bd, rgba(255,255,255,.08));
color: #d5dde4;
}
.chip.qf-tile i { font-size: .8rem; color: var(--qf-ic, #f5b524); line-height: 1; transition: color .15s ease; }
.chip.qf-tile span { font-size: .7rem; letter-spacing: .01em; }
.chip.qf-tile:hover { border-color: var(--qf-bdh, rgba(255,255,255,.2)); color: #fff; }
.chip.qf-tile.active {
background: var(--qf-bg, rgba(245,181,36,.12));
border-color: var(--qf-bdh, rgba(255,200,61,.55));
color: #fff;
box-shadow: 0 0 0 1px var(--qf-bdh, rgba(255,200,61,.4)), 0 8px 18px -8px var(--qf-bd, rgba(245,181,36,.4));
}
.chip.qf-tile.--neu { --qf-bg: rgba(251,113,42,.09); --qf-bd: rgba(251,113,42,.32); --qf-bdh: rgba(251,113,42,.6); --qf-ic: #ffa470; }
.chip.qf-tile.--crypto { --qf-bg: rgba(255,193,55,.09); --qf-bd: rgba(255,193,55,.32); --qf-bdh: rgba(255,193,55,.6); --qf-ic: #ffd34a; }
.chip.qf-tile.--merkur { --qf-bg: rgba(245,181,36,.09); --qf-bd: rgba(245,181,36,.32); --qf-bdh: rgba(245,181,36,.6); --qf-ic: #f5b524; }
.chip.qf-tile.--free { --qf-bg: rgba(168,85,247,.09); --qf-bd: rgba(168,85,247,.35); --qf-bdh: rgba(168,85,247,.65); --qf-ic: #c39bf5; }
/* shared check baseline — used by Boni & Payment rows (JS hook stays `.check`) */
.check { display:flex; align-items:center; gap:.55rem; padding:.4rem .55rem; border-radius:.5rem; cursor:pointer; font-size:.85rem; color:#cfd6dd; transition: background .15s ease, border-color .15s ease, color .15s ease; user-select:none; width:100%; text-align:left; background: transparent; border: 1px solid transparent; }
.check:hover { background: rgba(255,255,255,.03); color:#fff; }
.check.active { color:#fff; }
/* Boni — Card-Rows mit Icon-Badge */
.check.bn-row {
gap: 10px;
padding: 10px 12px;
border-radius: 9px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.07);
font-size: .82rem;
}
.check.bn-row .bn-ico {
width: 28px; height: 28px;
border-radius: 7px;
background: rgba(255,255,255,.05);
display: inline-flex; align-items: center; justify-content: center;
color: #b8c0c8;
flex-shrink: 0;
transition: background .15s ease, color .15s ease;
}
.check.bn-row .bn-ico i { font-size: .82rem; }
.check.bn-row:hover { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); }
.check.bn-row.active { background: rgba(245,181,36,.08); border-color: rgba(245,181,36,.5); color: #ffe9b0; }
.check.bn-row.active .bn-ico { background: rgba(245,181,36,.18); color: #f5b524; }
/* Payment-Section header */
.pm-group {
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255,255,255,.42);
margin: 6px 0 4px;
padding-left: 2px;
}
/* Payment rows — kompakt */
.check.pm-row {
gap: 9px;
padding: 7px 10px;
border-radius: 7px;
background: rgba(255,255,255,.02);
font-size: .8rem;
}
.check.pm-row i { width: 18px; text-align: center; font-size: .9rem; color: #9aa3ad; flex-shrink: 0; transition: color .15s ease; }
.check.pm-row:hover { background: rgba(255,255,255,.045); color: #fff; }
.check.pm-row:hover i { color: #cfd6dd; }
.check.pm-row.active { background: rgba(245,181,36,.08); border-color: rgba(245,181,36,.4); color: #ffe9b0; }
.check.pm-row.active i { color: #f5b524; }
/* badges */
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .5rem; border-radius:.35rem; font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; background: rgba(255,255,255,.04); color:#cbd5d1; border:1px solid rgba(255,255,255,.07); }
.badge-no-dep { background: rgba(255,200,100,.10); border-color: rgba(255,200,100,.35); color:#fde68a; }
/* rank flag — hangs off the top-left edge; darker layer SITS BEHIND the number as offset shadow */
.rank-flag {
position: absolute; top: .9rem; left: -.625rem; z-index: 20;
display:inline-flex; align-items:center; justify-content:center;
height:1.7rem; min-width:2.6rem; padding:0 .6rem;
border-radius:.4rem;
font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:.82rem;
background: rgba(20,24,30,.92); backdrop-filter: blur(8px);
color: rgba(255,255,255,.8);
border: 1px solid rgba(255,255,255,.1);
box-shadow: 0 3px 0 0 rgba(0,0,0,.55), 0 8px 18px -4px rgba(0,0,0,.5);
}
/* Top-3 Plätze: Gold/Silber/Bronze mit metallischem Verlauf + Schimmer-Sweep */
.rank-1, .rank-2, .rank-3 { position: absolute; overflow: hidden; isolation: isolate; }
.rank-1::after, .rank-2::after, .rank-3::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
transform: translateX(-110%);
animation: rank-shine 3.2s ease-in-out infinite;
pointer-events: none; z-index: 1;
}
.rank-1 > *, .rank-2 > *, .rank-3 > * { position: relative; z-index: 2; }
@keyframes rank-shine {
0% { transform: translateX(-110%); }
55%, 100% { transform: translateX(110%); }
}
/* GOLD */
.rank-1 {
background: linear-gradient(135deg, #fff4b8 0%, #ffd34d 30%, #d99520 55%, #ffe28a 80%, #c98010 100%);
color: #4a2b00; border-color: rgba(255,210,80,.8);
text-shadow: 0 1px 0 rgba(255,255,255,.45);
box-shadow: 0 3px 0 0 #8a5a10, 0 10px 22px -6px rgba(255,200,80,.55), inset 0 1px 0 rgba(255,255,255,.55);
}
/* SILBER */
.rank-2 {
background: linear-gradient(135deg, #ffffff 0%, #d8dde2 30%, #8d97a2 55%, #e6ebef 80%, #6b7480 100%);
color: #1a2028; border-color: rgba(220,225,232,.8);
text-shadow: 0 1px 0 rgba(255,255,255,.5);
box-shadow: 0 3px 0 0 #4a525c, 0 10px 22px -6px rgba(200,210,220,.45), inset 0 1px 0 rgba(255,255,255,.6);
}
/* BRONZE */
.rank-3 {
background: linear-gradient(135deg, #f4c89a 0%, #d18a4c 30%, #8a4a18 55%, #e8b282 80%, #6b3712 100%);
color: #2c1500; border-color: rgba(210,140,80,.8);
text-shadow: 0 1px 0 rgba(255,255,255,.35);
box-shadow: 0 3px 0 0 #4a2810, 0 10px 22px -6px rgba(180,120,60,.5), inset 0 1px 0 rgba(255,235,210,.4);
}
/* Logo — Quadrat inline neben Stars/Lizenz im Brand-Block (Name ist raus, also darf's größer). */
.logo-block {
width: 5.75rem; height: 5.75rem; /* mobile: 92×92 */
flex-shrink: 0;
border-radius: .75rem;
background: linear-gradient(135deg, rgba(245,181,36,.20) 0%, rgba(255,200,61,.07) 55%, rgba(245,181,36,.02) 100%);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
@media (min-width: 768px) {
.logo-block { width: 7rem; height: 7rem; } /* desktop: 112×112 */
}
.logo-icon { color:#ffc83d; font-size: 2.4rem; filter: drop-shadow(0 2px 6px rgba(245,181,36,.32)); }
@media (min-width: 768px) { .logo-icon { font-size: 3rem; } }
/* Logo füllt den Frame vollständig aus — minimal beschnittene Ränder werden
in Kauf genommen für den "edge-to-edge"-Look. */
.logo-block img.logo-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* stars — FA Kit ersetzt mit