/* ==========================================================================
   AMOGOTTI — shadcn Skin  (clean Neutral-Grau + orange-gelber Akzent)
   --------------------------------------------------------------------------
   Lädt ZULETZT (nach main.css + tailwind.css) → überschreibt das alte
   Schwarz/Gold-Theme auf das cleane shadcn-Neutral-Dark.
     • Flächen/Hintergründe : neutrales Grau (zinc-artig)
     • Akzent (primary/ring): Amber / Orange-Gelb  hsl(var(--primary))
     • Komponenten          : shadcn-Radien, -Borders, -Shadows
     • Casino-Cards & Layout: voll responsive (Flexbox, kein Overflow)
   shadcn-Tokens (--background, --primary, --border …) kommen aus tailwind.css.
   ========================================================================== */

:root {
  /* Akzent (Amber / Orange-Gelb) — ersetzt das alte Gold, etwas cleaner */
  --amo-gold:        #ffcb1f;   /* primary fill            */
  --amo-gold-bright: #ffd84a;   /* helle Akzentlinie       */
  --amo-gold-soft:   #ffe066;   /* hover / Text-Highlight   */
  --amo-gold-hi:     #fde68a;   /* obere Glanzkante         */
  --amo-gold-deep:   #cc9500;   /* untere Kante             */
  /* Metallischer Gold-Verlauf für Buttons */
  --gold-grad: linear-gradient(180deg, #ffe680 0%, #ffd23c 38%, #ffcb1f 60%, #e7a900 100%);

  /* Neutral-Grau-Flächen */
  --amo-bg:          hsl(240 5% 8%);    /* Seiten-Hintergrund          */
  --amo-surface:     hsl(240 4% 11%);   /* Card-Fläche (= --card)      */
  --amo-surface-2:   hsl(240 4% 14%);   /* erhöhte Fläche              */
  --amo-border:      hsl(240 4% 22%);   /* sichtbare Border            */
  --amo-border-soft: hsl(240 4% 17%);   /* dezente Border              */
  --amo-accent-ring: rgba(255,203,31,.5);

  /* alte main.css-Variablen auf das neue Schema umbiegen */
  --fr-yellow:       #ffcb1f;
  --fr-yellow-br:    #ffd84a;
  --fr-yellow-soft:  #ffe066;
  --fr-bg-0:         hsl(240 5% 8%);
  --fr-bg-1:         hsl(240 4% 10%);
  --fr-bg-2:         hsl(240 4% 12%);
  --fr-bg-3:         hsl(240 4% 16%);
  --fr-line:         hsl(240 4% 22%);
}

/* ── Body / Background — cleanes Neutral-Grau statt Schwarz ─────────────── */
html, body { background: var(--amo-bg) !important; }
html { overflow-x: hidden; }                 /* Sicherheitsnetz gegen H-Scroll */
body {
  background-color: var(--amo-bg) !important;
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(255,203,31,0.07) 0%, transparent 60%),
    linear-gradient(180deg, hsl(240 5% 10%) 0%, hsl(240 5% 8%) 45%, hsl(240 6% 6%) 100%) !important;
  color: hsl(var(--foreground)) !important;
  overflow-x: hidden;
}

/* generische erhöhte Fläche (Sidebar-Cards, Empty-State …) */
.surface {
  background: var(--amo-surface) !important;
  border-color: var(--amo-border-soft) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   HEADER  (.fr-h2*)  → cleanes shadcn-Sticky-Bar
   ════════════════════════════════════════════════════════════════════ */
.fr-h2 { border-bottom: 1px solid var(--amo-border); }
.fr-h2-bg {
  background: hsl(240 5% 8% / .85) !important;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

/* Echtes Amogotti-Logo (Bild) anzeigen — kein CSS-Wortmark mehr */
.fr-h2-brand { position: relative; display: inline-flex; align-items: center; }
.fr-h2-brand::before, .fr-h2-brand::after { content: none !important; }
.fr-h2-brand .fr-h2-logo { display: block !important; height: 56px; width: auto; max-width: 240px; object-fit: contain; }
.fr-h2-logo.fr-h2-logo--sm { height: 42px !important; }
@media (max-width: 640px) { .fr-h2-brand .fr-h2-logo { height: 44px !important; max-width: 160px; } }

/* Footer-Logo (breite Wortmarke) */
.fr-ftr-logo { height: 48px !important; width: auto !important; max-width: 220px; object-fit: contain; }

/* Pill-Nav → shadcn "segmented" Look */
.fr-h2-pill {
  background: hsl(240 4% 13%) !important;
  border: 1px solid var(--amo-border-soft) !important;
  border-radius: var(--radius) !important;
}
.fr-h2-pill-link { color: hsl(var(--muted-foreground)) !important; border-radius: calc(var(--radius) - 2px) !important; }
.fr-h2-pill-link:hover { color: hsl(var(--foreground)) !important; }
.fr-h2-pill-link.is-active { color: hsl(var(--primary)) !important; }
.fr-h2-pill-indicator {
  background: hsl(240 4% 19%) !important;
  border: 1px solid var(--amo-border) !important;
  border-radius: calc(var(--radius) - 2px) !important;
  box-shadow: none !important;
}

/* Icon-Buttons / User-Pill / Popover */
.fr-h2-icon-btn {
  background: transparent !important;
  border: 1px solid var(--amo-border-soft) !important;
  color: hsl(var(--muted-foreground)) !important;
  border-radius: var(--radius) !important;
}
.fr-h2-icon-btn:hover { background: hsl(var(--accent)) !important; color: hsl(var(--foreground)) !important; }
.fr-h2-user {
  background: hsl(240 4% 13%) !important;
  border: 1px solid var(--amo-border-soft) !important;
  border-radius: var(--radius) !important;
}
.fr-h2-user:hover { border-color: var(--amo-border) !important; }
.fr-h2-pop {
  background: hsl(var(--popover)) !important;
  border: 1px solid var(--amo-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.7) !important;
  color: hsl(var(--popover-foreground)) !important;
}
.fr-h2-badge { background: hsl(var(--primary)) !important; color: hsl(var(--primary-foreground)) !important; }

/* Login-Pill / CTA → Amber Primary-Button (shadcn) */
.fr-h2-login, .fr-h2-cta {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.fr-h2-login:hover, .fr-h2-cta:hover { background: hsl(46 100% 45%) !important; }

/* Mobile-Sidebar (Header) */
.fr-h2-sidebar {
  background: hsl(var(--popover)) !important;
  border-left: 1px solid var(--amo-border) !important;
}
.fr-h2-mobile-link { color: hsl(var(--muted-foreground)) !important; border-radius: var(--radius) !important; }
.fr-h2-mobile-link:hover { background: hsl(var(--accent)) !important; color: hsl(var(--foreground)) !important; }
.fr-h2-mobile-link.is-active { background: hsl(var(--accent)) !important; color: hsl(var(--primary)) !important; }
.fr-h2-mobile-dot { background: hsl(var(--primary)) !important; }

/* Pill-Nav auf kleinen Screens ausblenden (Burger übernimmt) → kein Overflow */
@media (max-width: 880px) { .fr-h2-pill { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════ */
.fr-hero-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  color: hsl(var(--primary)) !important;
}
.fr-hero-sub, .fr-hero-mark { color: hsl(var(--muted-foreground)) !important; }
.fr-hero-mark i { color: hsl(var(--primary)) !important; }
.fr-hero-line { background: linear-gradient(90deg, transparent, var(--amo-border), transparent) !important; }

/* ══════════════════════════════════════════════════════════════════════
   BUTTONS  (.btn-mint = primary, .btn-ghost = outline)  — shadcn
   ════════════════════════════════════════════════════════════════════ */
.btn-mint {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background .15s ease !important;
}
.btn-mint:hover { background: hsl(46 100% 45%) !important; filter: none !important; transform: none !important; }
.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--amo-border) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: var(--radius) !important;
}
.btn-ghost:hover { background: hsl(var(--accent)) !important; border-color: var(--amo-border) !important; color: hsl(var(--foreground)) !important; }

/* ══════════════════════════════════════════════════════════════════════
   FILTER-SIDEBAR + Chips + Checks
   ════════════════════════════════════════════════════════════════════ */
.fr-sidebar {
  background: hsl(var(--card)) !important;
  border: 1px solid var(--amo-border-soft) !important;
  border-radius: var(--radius) !important;
}
.fr-sidebar-title i, .fr-sidebar-reset:hover { color: hsl(var(--primary)) !important; }
.fr-sidebar-reset { border-color: var(--amo-border-soft) !important; border-radius: calc(var(--radius) - 2px) !important; }

.fr-fgroup { border-color: var(--amo-border-soft) !important; }
.fr-fgroup-ico, .fr-fgroup-chev { color: hsl(var(--muted-foreground)) !important; }

.chip, .fr-sidebar .chip, .fr-filterbar .chip {
  background: hsl(240 4% 13%) !important;
  border: 1px solid var(--amo-border-soft) !important;
  color: hsl(var(--muted-foreground)) !important;
  border-radius: 999px !important;
}
.chip:hover, .fr-sidebar .chip:hover, .fr-filterbar .chip:hover {
  border-color: var(--amo-accent-ring) !important;
  color: hsl(var(--foreground)) !important;
}
.chip.active, .fr-sidebar .chip.active, .fr-filterbar .chip.active {
  background: rgba(255,203,31,.14) !important;
  border-color: var(--amo-accent-ring) !important;
  color: hsl(var(--primary)) !important;
}
.chip.active i, .fr-sidebar .chip.active i, .fr-filterbar .chip.active i { color: hsl(var(--primary)) !important; }

.check, .fr-sidebar .check { color: hsl(var(--muted-foreground)) !important; border-radius: calc(var(--radius) - 2px) !important; }
.check:hover, .fr-sidebar .check:hover { background: hsl(var(--accent)) !important; color: hsl(var(--foreground)) !important; }
.check .box, .fr-sidebar .check .box { border-color: var(--amo-border) !important; border-radius: 4px !important; }
.check.active, .fr-sidebar .check.active { color: hsl(var(--foreground)) !important; }
.check.active .box, .fr-sidebar .check.active .box { background: hsl(var(--primary)) !important; border-color: hsl(var(--primary)) !important; }
.check.active .box::after { color: hsl(var(--primary-foreground)) !important; }
.check.active i, .fr-sidebar .check.active i { color: hsl(var(--primary)) !important; }

/* Mobile-Filter-Button */
.fr-mobile-filter {
  background: hsl(var(--card)) !important;
  border: 1px solid var(--amo-border) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: var(--radius) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   RESULT-BAR + Sort-Menü
   ════════════════════════════════════════════════════════════════════ */
.fr-result-count { color: hsl(var(--muted-foreground)) !important; }
.fr-result-count #result-count { color: hsl(var(--primary)) !important; }
.fr-sort-toggle {
  background: hsl(var(--card)) !important;
  border: 1px solid var(--amo-border) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: var(--radius) !important;
}
.fr-sort-toggle:hover { border-color: var(--amo-accent-ring) !important; }
.fr-sort-toggle i.text-mint-400 { color: hsl(var(--primary)) !important; }
.fr-sort-menu {
  background: hsl(var(--popover)) !important;
  border: 1px solid var(--amo-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.7) !important;
}
.fr-sort-opt { color: hsl(var(--foreground)) !important; border-radius: calc(var(--radius) - 2px) !important; }
.fr-sort-opt:hover { background: hsl(var(--accent)) !important; }

/* ══════════════════════════════════════════════════════════════════════
   CASINO-LISTE  — voll responsive Flex-Cards (kein Overflow, kein Grid-Bruch)
   ════════════════════════════════════════════════════════════════════ */
.fr-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: .9rem !important;
  grid-template-columns: none !important;
}

.fr-skel-card { min-height: 120px; }

/* Card-Wrapper */
.fr-card-wrap { width: 100%; }

.fr-card {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1rem 1.25rem !important;
  padding: 1.1rem 1.25rem !important;
  background: hsl(var(--card)) !important;
  border: 1px solid var(--amo-border-soft) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
  flex-direction: row !important;
  max-width: 100%;
}
.fr-card:hover {
  border-color: var(--amo-border) !important;
  box-shadow: 0 8px 26px -14px rgba(0,0,0,.8) !important;
  transform: translateY(-1px) !important;
}
.fr-card--featured { border-color: var(--amo-accent-ring) !important; }

/* 1 · Logo + Name + Chips */
.fr-card-head {
  flex: 1 1 230px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .9rem !important;
  min-width: 0 !important;
  text-align: left !important;
}
.fr-card-logo { margin: 0 !important; flex: 0 0 auto; }
.fr-card-logo .logo-block {
  width: 60px; height: 60px;
  background: hsl(240 4% 9%) !important;
  border: 1px solid var(--amo-border-soft) !important;
  border-radius: calc(var(--radius) - 2px) !important;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fr-card-logo .logo-img { max-width: 80%; max-height: 80%; object-fit: contain; }
.fr-card-logo .logo-icon { color: hsl(var(--primary)); font-size: 1.4rem; }
.fr-card-headinfo { display: flex !important; flex-direction: column !important; gap: .3rem !important; min-width: 0; }
.amo-card-name, .fr-card-name {
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.02rem; line-height: 1.15;
  color: hsl(var(--foreground)); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 2 · Bonus-Highlight */
.fr-card-bonus {
  flex: 1 1 160px !important;
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; justify-content: center;
  min-width: 0 !important;
  padding: 0 0 0 1.1rem !important; margin: 0 !important;
  border-left: 1px solid var(--amo-border-soft);
  text-align: left !important;
}
.fr-card-bonus-label { color: hsl(var(--muted-foreground)); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.fr-card-bonus-value {
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.15; margin-top: .1rem;
  color: hsl(var(--primary)) !important; background: none !important; -webkit-text-fill-color: currentColor;
}
.fr-card-bonus-fs { color: hsl(var(--primary)); opacity: .85; font-size: .78rem; margin-top: .1rem; }

/* 3 · Stats */
.fr-card-stats {
  flex: 2 1 250px !important;
  display: flex !important; flex-wrap: wrap !important;
  gap: .25rem .9rem !important; align-items: center; align-content: flex-start;
  min-width: 0 !important; margin: 0 !important;
  padding: 0 0 0 1.1rem !important;
  border-left: 1px solid var(--amo-border-soft);
  grid-template-columns: none !important;
}
.fr-stat { display: inline-flex !important; flex-direction: row !important; align-items: baseline !important; gap: .35rem !important; flex: 0 1 auto !important; padding: 0 !important; position: static !important; }
.fr-stat::after { display: none !important; content: none !important; }
.fr-stat-label { color: hsl(var(--muted-foreground)) !important; font-size: .66rem !important; letter-spacing: .06em !important; text-transform: uppercase !important; white-space: nowrap !important; }
.fr-stat-val { color: hsl(var(--foreground)) !important; font-weight: 700 !important; font-size: .86rem !important; margin: 0 !important; white-space: nowrap !important; }
.fr-stat-val.accent { color: hsl(var(--primary)) !important; }

/* 4 · Bonus-Code */
.fr-card-code, .fr-card-code-placeholder {
  flex: 0 1 165px !important;
  align-self: center !important; margin: 0 !important; min-width: 0; width: auto;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.fr-card-code {
  background: hsl(240 4% 9%) !important;
  border: 1px dashed var(--amo-border) !important;
  padding: .5rem .7rem !important; border-radius: calc(var(--radius) - 2px) !important;
}
.fr-card-code-label { color: hsl(var(--muted-foreground)); font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; }
.fr-card-code-value { color: hsl(var(--primary)); font-weight: 700; font-family: 'Sora', sans-serif; }
.fr-card-code-placeholder {
  background: hsl(240 4% 12%) !important;
  border: 1px solid var(--amo-border-soft) !important;
  padding: .5rem .7rem !important; border-radius: calc(var(--radius) - 2px) !important;
  color: hsl(var(--muted-foreground)); font-size: .73rem; justify-content: center;
}

/* 5 · Play-Button + 6 · Details */
.fr-card-actions { display: flex; flex-direction: column; gap: .4rem; flex: 0 0 auto; }
.fr-card-play {
  flex: 0 0 auto !important;
  background: hsl(var(--primary)) !important; color: hsl(var(--primary-foreground)) !important;
  border: 0 !important; border-radius: var(--radius) !important; font-weight: 600 !important;
  padding: .6rem 1.1rem !important; min-height: 0 !important; height: auto !important;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap;
  box-shadow: none !important;
}
.fr-card-play:hover { background: hsl(46 100% 45%) !important; transform: none !important; filter: none !important; }
.fr-card-details-btn {
  flex: 0 0 auto !important;
  width: auto !important; padding: .45rem .8rem !important; font-size: .72rem !important;
  border: 1px solid var(--amo-border-soft) !important; color: hsl(var(--muted-foreground)) !important;
  background: transparent !important; border-radius: calc(var(--radius) - 2px) !important;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
}
.fr-card-details-btn:hover { color: hsl(var(--foreground)) !important; border-color: var(--amo-border) !important; background: hsl(var(--accent)) !important; }

/* ── Tablet: Bonus/Stats-Trennlinien weg, sauberes Umbrechen ───────────── */
@media (max-width: 900px) {
  .fr-card-bonus, .fr-card-stats { border-left: 0 !important; padding-left: 0 !important; }
  .fr-card-head { flex-basis: 100% !important; }
}

/* ── Mobile: Card komplett gestapelt ───────────────────────────────────── */
@media (max-width: 640px) {
  .fr-card { flex-direction: column !important; align-items: stretch !important; gap: .8rem !important; padding: 1rem !important; }
  .fr-card-head, .fr-card-bonus, .fr-card-stats, .fr-card-code, .fr-card-code-placeholder, .fr-card-actions { flex: 1 1 100% !important; width: 100% !important; }
  .fr-card-bonus { align-items: flex-start !important; }
  .fr-card-play, .fr-card-details-btn { width: 100% !important; flex: 1 1 100% !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   DETAILS-PANEL (aufklappbar)
   ════════════════════════════════════════════════════════════════════ */
.fr-detail-nodep, .fr-detail-stat, .fr-detail-term, .fr-detail-section {
  border-color: var(--amo-border-soft) !important;
}
.fr-detail-ico, .fr-detail-nodep-ico, .fr-detail-heading i { color: hsl(var(--primary)) !important; }
.fr-detail-label, .fr-detail-term-label { color: hsl(var(--muted-foreground)) !important; }
.fr-detail-val, .fr-detail-term-val { color: hsl(var(--foreground)) !important; }

/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════ */
.fr-ftr { border-top: 1px solid var(--amo-border); background: hsl(240 5% 7%) !important; }
.fr-ftr-hairline { background: linear-gradient(90deg, transparent, var(--amo-border), transparent) !important; }
.fr-ftr-tagline, .fr-ftr-list a, .fr-ftr-bottom { color: hsl(var(--muted-foreground)) !important; }
.fr-ftr-list a:hover { color: hsl(var(--primary)) !important; }
.fr-ftr-col-title { color: hsl(var(--foreground)) !important; }
.fr-ftr-warn {
  background: hsl(240 4% 11%) !important;
  border: 1px solid var(--amo-border-soft) !important;
  border-radius: var(--radius) !important;
}
.fr-ftr-warn-ico { color: hsl(var(--primary)) !important; }

/* ══════════════════════════════════════════════════════════════════════
   GENERISCHE UTILITIES — alte gold/teal Reste auf Token-Akzent ziehen
   ════════════════════════════════════════════════════════════════════ */
.text-gold-shimmer, .text-gold-shimmer-3d {
  background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important;
  color: hsl(var(--primary)) !important; -webkit-text-fill-color: hsl(var(--primary)) !important;
  filter: none !important; animation: none !important;
}
.text-gold-shimmer-3d::after { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   CASINO-CARD  (.cc-*)  — komplett neu, clean shadcn, voll responsive
   Aufbau:  [ Haupt-Reihe ]  →  [ Details-Toggle-Bar ]  →  [ Dropdown drunter ]
   Alles in EINER Card mit Border; Dropdown klappt UNTER der Card auf.
   ════════════════════════════════════════════════════════════════════ */
.cc-wrap {
  position: relative;
  background: hsl(var(--card));
  border: 1px solid var(--amo-border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cc-wrap:hover { border-color: var(--amo-border); box-shadow: 0 12px 32px -18px rgba(0,0,0,.85); transform: translateY(-1px); }
.cc-wrap--featured { border-color: var(--amo-accent-ring); }
.cc-wrap--featured .cc-main { background: linear-gradient(180deg, rgba(255,203,31,.06), transparent 55%); }

/* ── Haupt-Reihe ── */
.cc-main { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.1rem 1.25rem; }

/* Brand: Rang + Logo + Name + Badges */
.cc-brand { display: flex; align-items: center; gap: .8rem; flex: 1 1 230px; min-width: 0; }
/* Rang als absolute Corner-Badge (oben-links, Ribbon-Form) */
.cc-rank {
  position: absolute; top: 0; left: 0; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 23px; padding: 0 .5rem;
  border-radius: var(--radius) 0 calc(var(--radius) - 2px) 0;
  background: hsl(var(--secondary)); color: hsl(var(--muted-foreground));
  font-weight: 800; font-size: .72rem; letter-spacing: .02em;
  box-shadow: 0 1px 6px -1px rgba(0,0,0,.5);
}
.cc-rank.rank-1 { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.cc-rank.rank-2 { background: #d4d4d8; color: #18181b; }
.cc-rank.rank-3 { background: #b45309; color: #fff; }
/* Inhalt etwas einrücken, damit nichts unter der Badge klebt */
.cc-main { padding-top: 1.35rem; }
.cc-logo { margin-top: .15rem; }
.cc-logo {
  flex: 0 0 auto; width: 96px; height: 96px; border-radius: 16px; overflow: hidden;
  background: hsl(240 4% 9%); border: 0;
  display: flex; align-items: center; justify-content: center;
}
.cc-logo .logo-block { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.cc-logo .logo-img { width: 100%; height: 100%; object-fit: cover; }
.cc-logo .logo-icon { color: hsl(var(--primary)); font-size: 2.4rem; }

@media (max-width: 640px) { .cc-logo { width: 80px; height: 80px; } }
.cc-brand-info { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.cc-name { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.05rem; line-height: 1.1; color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-badges { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Bonus-Highlight */
.cc-bonus { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: .1rem; padding-left: 1.1rem; border-left: 1px solid var(--amo-border-soft); }
.cc-bonus-label { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.cc-bonus-value { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.25rem; line-height: 1.15; color: hsl(var(--primary)); }
.cc-bonus-fs { font-size: .78rem; color: hsl(var(--primary)); opacity: .85; }

/* Stats (2×2 Mini-Grid) */
.cc-stats { flex: 1 1 210px; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .9rem; padding-left: 1.1rem; border-left: 1px solid var(--amo-border-soft); }
.cc-stat { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.cc-stat-label { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.cc-stat-val { font-weight: 700; font-size: .9rem; color: hsl(var(--foreground)); white-space: nowrap; }
.cc-stat-val.accent { color: hsl(var(--primary)); }

/* Actions: Code + Play */
.cc-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: .5rem; min-width: 180px; }
.cc-code { display: flex; align-items: center; gap: .5rem; background: hsl(240 4% 9%); border: 1px dashed var(--amo-border); border-radius: calc(var(--radius) - 2px); padding: .4rem .6rem; }
.cc-code-label { flex: 0 0 auto; font-size: .56rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.cc-code-value { flex: 1 1 auto; min-width: 0; font-family: 'Sora', sans-serif; font-weight: 800; letter-spacing: .04em; color: hsl(var(--primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-code--none { justify-content: center; border-style: solid; color: hsl(var(--muted-foreground)); font-size: .78rem; }
.cc-code--none i { color: #22c55e; }
.code-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 auto;
  border: 1px solid var(--amo-border-soft); border-radius: calc(var(--radius) - 4px);
  color: hsl(var(--muted-foreground)); background: transparent; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s; font-size: .8rem;
}
.code-copy:hover { color: hsl(var(--primary)); border-color: var(--amo-accent-ring); background: hsl(var(--accent)); }
.cc-play {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 700;
  border-radius: var(--radius); padding: .62rem 1.2rem; white-space: nowrap;
  transition: background .15s ease;
}
.cc-play:hover { background: hsl(46 100% 45%); }

/* ── Details-Toggle-Bar (volle Breite, unten in der Card) ── */
.cc-toggle {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem; border: 0; border-top: 1px solid var(--amo-border-soft);
  background: hsl(240 4% 10%); color: hsl(var(--muted-foreground));
  font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.cc-toggle:hover { background: hsl(240 4% 10%); color: hsl(var(--primary)); }
.cc-toggle > .fa-circle-info { color: hsl(var(--primary)); }
.details-chev { transition: transform .25s ease; font-size: .7rem; }
.cc-wrap.details-open .details-chev { transform: rotate(180deg); }
.cc-wrap.details-open .cc-toggle { background: hsl(240 4% 10%); color: hsl(var(--primary)); }

/* ── Dropdown — klappt UNTER der Card auf (smooth, kein Modal) ── */
.cc-details {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1);
  background: hsl(240 5% 9%);
}
.cc-wrap.details-open .cc-details { grid-template-rows: 1fr; border-top: 1px solid var(--amo-border-soft); }
.cc-details-inner { overflow: hidden; min-height: 0; }
.cc-wrap.details-open .cc-details-inner { padding: 1.1rem 1.25rem; }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .cc-bonus, .cc-stats { border-left: 0; padding-left: 0; }
  .cc-brand { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .cc-main { gap: .9rem; padding: 1.5rem 1rem 1rem; }
  .cc-brand, .cc-bonus, .cc-stats, .cc-actions { flex: 1 1 100%; min-width: 0; width: 100%; }
  .cc-actions { min-width: 0; }
  .cc-wrap.details-open .cc-details-inner { padding: 1rem; }
}

/* ── Kachel-Grid ───────────────────────────────────────────────────────── */
.fr-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .7rem;
}
.fr-tile {
  display: flex; flex-direction: column; gap: .25rem;
  background: hsl(240 4% 13%);
  border: 1px solid var(--amo-border-soft);
  border-radius: calc(var(--radius) - 1px);
  padding: .8rem .9rem;
  min-width: 0;
}
.fr-tile--wide { grid-column: 1 / -1; }
.fr-tile-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: .15rem;
  border-radius: calc(var(--radius) - 3px);
  background: hsl(var(--accent)); color: hsl(var(--primary)); font-size: .8rem;
}
.fr-tile-label {
  color: hsl(var(--muted-foreground));
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  display: flex; align-items: center; gap: .4rem;
}
.fr-tile-label i { color: hsl(var(--primary)); }
.fr-tile-value { color: hsl(var(--foreground)); font-weight: 700; font-size: .92rem; word-break: break-word; }
.fr-tile-value strong { color: hsl(var(--primary)); }
.fr-tile-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

/* No-Deposit-Highlight-Kachel */
.fr-tile--accent {
  flex-direction: row; align-items: center; gap: .8rem;
  background: rgba(255,203,31,.10);
  border-color: var(--amo-accent-ring);
}
.fr-tile--accent .fr-tile-ico { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); width: 38px; height: 38px; font-size: 1rem; }
.fr-tile--accent .fr-tile-value { color: hsl(var(--primary)); font-size: 1.05rem; }

/* Willkommenspaket */
.fr-tile-deposits { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-top: .5rem; }
.fr-dep {
  display: inline-flex; align-items: center; gap: .35rem;
  background: hsl(240 4% 10%); border: 1px solid var(--amo-border-soft);
  border-radius: 999px; padding: .3rem .7rem; font-size: .8rem; color: hsl(var(--foreground));
}
.fr-dep b { color: hsl(var(--muted-foreground)); font-weight: 700; }
.fr-dep-pct { color: hsl(var(--primary)); font-weight: 800; }
.fr-dep-arrow { color: hsl(var(--muted-foreground)); font-size: .65rem; }
.fr-tile-note { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .8rem; color: hsl(var(--muted-foreground)); }
.fr-tile-note i { color: hsl(var(--primary)); }

/* Pros / Cons */
.fr-tile-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .35rem .9rem; }
.fr-tile-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: hsl(var(--foreground)); line-height: 1.35; }
.fr-tile--pros .fr-tile-list i { color: #22c55e; margin-top: .2rem; }
.fr-tile--cons .fr-tile-list i { color: hsl(var(--destructive)); margin-top: .2rem; }
.fr-tile--pros .fr-tile-label i { color: #22c55e; }
.fr-tile--cons .fr-tile-label i { color: hsl(var(--destructive)); }

/* Beschreibung */
.fr-tile-text { margin: .5rem 0 0; font-size: .86rem; line-height: 1.55; color: hsl(var(--muted-foreground)); }

/* Zahlungsmethoden + Tags in Kachel */
.fr-tile .fr-detail-payments { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.fr-tile-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 .3rem; border-radius: 999px; background: hsl(var(--accent)); color: hsl(var(--muted-foreground));
  font-size: .62rem; font-weight: 700; letter-spacing: 0;
}
.fr-tile-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.fr-tag {
  display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: 999px;
  background: hsl(240 4% 13%); border: 1px solid var(--amo-border-soft);
  color: hsl(var(--muted-foreground)); font-size: .72rem; font-weight: 600;
}

@media (max-width: 640px) {
  .fr-tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .55rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   DETAIL-TABS (Reiter im Dropdown) — shadcn-Segmented, Amber-aktiv
   ════════════════════════════════════════════════════════════════════ */
.cc-tabs { display: block; }
.cc-tablist {
  display: inline-flex; flex-wrap: wrap; gap: .25rem;
  max-width: 100%; margin-bottom: 1rem; padding: .25rem;
  background: hsl(240 4% 13%); border: 1px solid var(--amo-border-soft);
  border-radius: var(--radius);
}
.cc-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .9rem; border: 0; border-radius: calc(var(--radius) - 2px);
  background: transparent; color: hsl(var(--muted-foreground));
  font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.cc-tab i { font-size: .76rem; }
.cc-tab:hover { color: hsl(var(--foreground)); }
.cc-tab.is-active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.cc-tabpanel { animation: cc-fade .25s ease; }
.cc-tabpanel[hidden] { display: none; }
@keyframes cc-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .cc-tablist { display: flex; width: 100%; }
  .cc-tab { flex: 1 1 auto; justify-content: center; padding: .45rem .6rem; font-size: .76rem; }
  .cc-tab span { display: inline; }
}

/* ── Vor- & Nachteile: nebeneinander (2 Spalten) ── */
.fr-proscons {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .7rem;
}
.fr-proscons .fr-tile-list { grid-template-columns: 1fr; }

/* ── Info-Tab: Boxen nebeneinander (Zahlungen | Über/Eigenschaften) ── */
.cc-info { display: grid; grid-template-columns: 1.3fr 1fr; gap: .7rem; align-items: start; }
.cc-info--single { grid-template-columns: 1fr; }
.cc-info-side { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.cc-info-pay { min-width: 0; }
@media (max-width: 760px) { .cc-info { grid-template-columns: 1fr; } }

/* ── Zahlungsmethoden als coole Chips (auto-Breite, kein Abschneiden, Hover) ── */
.cc-pays { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.cc-pay {
  display: inline-flex; align-items: center; gap: .55rem;
  background: hsl(240 4% 14%);
  border: 1px solid var(--amo-border-soft); border-radius: calc(var(--radius) - 1px);
  padding: .4rem .7rem;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cc-pay:hover {
  border-color: var(--amo-accent-ring); transform: translateY(-1px);
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.7);
}
.cc-pay .pay-icon {
  flex: 0 0 auto; margin: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 24px; border-radius: 5px;
  background: #fff; padding: 3px; color: #18181b;
}
.cc-pay .pay-icon img { height: 100% !important; width: auto; max-width: 100%; object-fit: contain; }
.cc-pay .pay-icon > i { color: #18181b; font-size: .95rem; }
.cc-pay .pay-icon.text, .cc-pay .pay-icon.icon-text { color: #18181b; font-weight: 800; font-size: .7rem; }
.cc-pay-name { font-size: .82rem; font-weight: 600; color: hsl(var(--foreground)); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   GOLD-EFFEKT auf Primär-Buttons — metallischer Verlauf + Glanzkante +
   Glow + Shine-Sweep beim Hover.  Gilt für alle "Jetzt spielen"/CTA-Buttons.
   ════════════════════════════════════════════════════════════════════ */
.cc-play, .btn-mint, .fr-h2-login, .fr-h2-cta, .fr-card-play {
  position: relative;
  overflow: hidden;
  background: var(--gold-grad) !important;
  color: #2a1d00 !important;
  border: 1px solid rgba(120,80,0,.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(120,80,0,.22),
    0 2px 10px -2px rgba(255,180,0,.45) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  transition: filter .15s ease, box-shadow .15s ease, transform .1s ease !important;
}
.cc-play:hover, .btn-mint:hover, .fr-h2-login:hover, .fr-h2-cta:hover, .fr-card-play:hover {
  background: var(--gold-grad) !important;
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 5px 18px -3px rgba(255,190,0,.6) !important;
}
.cc-play:active, .btn-mint:active, .fr-h2-login:active, .fr-h2-cta:active, .fr-card-play:active {
  transform: translateY(0) !important;
  filter: brightness(.97) !important;
}
/* Glanz-Sweep (heller Streifen wandert beim Hover über den Button) */
.cc-play::before, .btn-mint::before, .fr-h2-login::before, .fr-h2-cta::before, .fr-card-play::before {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .55s ease;
}
.cc-play:hover::before, .btn-mint:hover::before, .fr-h2-login:hover::before, .fr-h2-cta:hover::before, .fr-card-play:hover::before {
  left: 135%;
}
@media (prefers-reduced-motion: reduce) {
  .cc-play::before, .btn-mint::before, .fr-h2-login::before, .fr-h2-cta::before, .fr-card-play::before { display: none; }
}