html, body { color:#e6edf3; font-family:'Space Grotesk', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
html { scroll-behavior:smooth; background:#0a0a0b; }
/* 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: #0a0a0b !important;
background-image:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,203,31,0.08) 0%, transparent 60%),
linear-gradient(180deg, #18181b 0%, #0a0a0b 40%, #08080a 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, #18181b 0%, #121214 60%, #0a0a0b 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, #ffd84a 0%, #fff19a 25%, #ffd84a 50%, #fff19a 75%, #ffd84a 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%,
#ffd84a 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, #ffd84a 0%, #ffe066 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, #ffd84a 0%, #ffe066 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(255,203,31,.18) 0%, transparent 60%),
radial-gradient(60% 70% at 10% 80%, rgba(255,216,74,.10) 0%, transparent 60%),
linear-gradient(180deg, #121214 0%, #0a0b0d 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,216,74,.4); box-shadow: 0 8px 30px -10px rgba(255,203,31,.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,216,74,.25); border-radius: 999px; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,216,74,.45); }
.sidebar-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,216,74,.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:#ffcb1f; color:#11130a; border:1px solid rgba(255,255,255,.06); transition: background .15s ease, transform .15s ease; }
.btn-mint:hover { background:#ffd84a; 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,216,74,.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; }
/* Bonus-Code Box: pulsierender Mint-Glow zur Aufmerksamkeit */
@keyframes code-pulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(255,216,74,.35), 0 0 14px -2px rgba(255,216,74,.25); border-color: rgba(255,216,74,.45); }
50% { box-shadow: 0 0 0 1px rgba(255,216,74,.65), 0 0 22px -2px rgba(255,216,74,.55); border-color: rgba(255,216,74,.75); }
}
.code-box { animation: code-pulse 2.4s ease-in-out infinite; background: rgba(255,203,31,.05); }
/* Details-Toggle: Hervorhebung + Chevron-Bounce, damit klar wird dass es aufklappbar ist */
.details-toggle {
background: rgba(255,216,74,.06);
border: 1px solid rgba(255,216,74,.22);
color: #ffe066 !important;
font-weight: 600;
transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.details-toggle:hover { background: rgba(255,216,74,.14); border-color: rgba(255,216,74,.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 */
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .7rem; border-radius:999px; font-size:.78rem; 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; }
.chip:hover { color:#fff; border-color: rgba(255,216,74,.4); }
.chip.active { background: rgba(255,203,31,.14); border-color: rgba(255,216,74,.5); color:#fff19a; }
.chip i { font-size: .75rem; }
.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; user-select:none; width:100%; text-align:left; }
.check:hover { background: rgba(255,255,255,.03); color:#fff; }
.check .box { width:16px; height:16px; border-radius:4px; border:1.5px solid rgba(255,255,255,.2); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition: all .15s ease; }
.check.active .box { background:#ffcb1f; border-color:#ffcb1f; }
.check.active .box::after { content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; color:#11130a; font-size:.65rem; }
.check.active { color:#fff; }
/* 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:#fff19a; }
/* 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(255,203,31,.20) 0%, rgba(255,216,74,.07) 55%, rgba(255,203,31,.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:#ffd84a; font-size: 2.4rem; filter: drop-shadow(0 2px 6px rgba(255,203,31,.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