/* ==========================================================================
   TryCasino „Tiefenschiefer & Erz“ – Basis-Schicht (Tokens, Schrift, Bausteine)
   Lädt nach allen Altschichten. Alles hängt an body.tc-redesign.tc-max:
   Klasse tc-max entfernen = neues Design aus.
   Erzfarben tragen Bedeutung: Gold = Geld/Hauptaktion, Smaragd = Gewinn/online,
   Diamant = Chance/neu, Redstone = Verlust/live, Amethyst = Community.
   ========================================================================== */

body.tc-redesign.tc-max {
  --mx-bg: #0a1020;
  --mx-bg-2: #0e1628;
  --mx-surface: #131c31;
  --mx-raised: #1a2540;
  --mx-line: #28365a;
  --mx-line-soft: rgba(148, 170, 220, .14);
  --mx-text: #f2f5fb;
  --mx-text-2: #a9b5ce;
  --mx-text-3: #72809c;

  --mx-gold: #ffc93c;
  --mx-gold-hi: #ffe08a;
  --mx-gold-lo: #c7860c;
  --mx-gold-ink: #2a1a00;
  --mx-emerald: #2ee59d;
  --mx-emerald-lo: #0e9e66;
  --mx-emerald-ink: #03231a;
  --mx-diamond: #5be7f0;
  --mx-redstone: #ff4d5e;
  --mx-amethyst: #b58cff;
  --mx-amethyst-lo: #6a3fd6;
  --mx-amethyst-ink: #1d0b42;

  --mx-font-display: 'Big Shoulders Display', 'Avenir Next Condensed', 'Arial Narrow', sans-serif;
  --mx-font-body: 'Onest', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --mx-r-xl: 22px;
  --mx-r-lg: 16px;
  --mx-r-md: 12px;
  --mx-r-sm: 8px;
  --mx-bevel: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -2px 0 rgba(0, 0, 0, .28);
  --mx-shadow: 0 22px 44px -24px rgba(0, 0, 0, .75);
  --mx-shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, .85);

  --mx-container: 1320px;
  --mx-gutter: clamp(16px, 3.2vw, 36px);

  --mx-ease: cubic-bezier(.2, .8, .2, 1);
  --mx-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mx-fast: 140ms;
  --mx-mid: 220ms;
  --mx-slow: 420ms;

  /* Altschichten lesen --font-heading/--font-body: neue Schrift überall auf der Seite */
  --font-heading: var(--mx-font-display);
  --font-body: var(--mx-font-body);

  background: var(--mx-bg) !important;
  color: var(--mx-text);
  font-family: var(--mx-font-body) !important;
  font-size: 15px;
  /* style.css setzt overflow-x:hidden auf html/body – das macht body zum Scrollcontainer
     und die Topbar klebt nicht. clip schneidet ebenso ab, ohne Scrollcontainer. */
  overflow-x: clip !important;
}
html:has(> body.tc-redesign.tc-max) { overflow-x: clip !important; }
/* Das Spiel-Overlay sperrt das Scrollen weiterhin (immersive.css). */
body.tc-redesign.tc-max.tc-game-open { overflow: hidden !important; }

/* Admin und Bot-Zentrale behalten ihre eigene Schrift */
body.tc-redesign.tc-max :is(#adminOverlay, #botsModal, #customBotCreateModal, #adminPinModal) {
  --font-heading: 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
}
/* … und erben die alten body-Werte statt Onest/15 px/#F2F5FB. :where() = Spezifität 0:
   ersetzt nur die Vererbung vom body, nie eine eigene Regel der Dialoge. */
:where(body.tc-redesign.tc-max) :where(#adminOverlay, #botsModal, #customBotCreateModal, #adminPinModal) {
  font-family: 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #f4f8ff;
}

/* Seitenbeleuchtung: eine warme Fackel oben links, kühles Diamantlicht rechts */
body.tc-redesign.tc-max::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(255, 190, 60, .10), transparent 62%),
    radial-gradient(760px 520px at 96% 8%, rgba(91, 231, 240, .06), transparent 60%),
    linear-gradient(180deg, #0b1223 0%, var(--mx-bg) 38%, #080d1a 100%);
}

body.tc-redesign.tc-max ::selection { background: rgba(255, 201, 60, .32); color: #fff; }

/* Fokus bleibt deutlich sichtbar */
body.tc-redesign.tc-max :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mx-gold) !important;
  outline-offset: 3px !important;
}

/* ------------------------------------------------------------ Typografie */
/* Kondensierte Display-Schrift braucht Laufweite 0 (Altschichten setzen -.02 bis -.05em);
   kleine Überschriften lesen sich in der Textschrift besser. Admin/Bots bleiben unberührt. */
body.tc-redesign.tc-max :is(h1, h2, h3):not(:is(#adminOverlay, #botsModal, #customBotCreateModal, #adminPinModal) *) { letter-spacing: 0 !important; }
body.tc-redesign.tc-max :is(h4, h5, h6):not(:is(#adminOverlay, #botsModal, #customBotCreateModal, #adminPinModal) *) {
  font-family: var(--mx-font-body) !important;
  letter-spacing: 0 !important;
}
body.tc-redesign.tc-max .mx-h1,
body.tc-redesign.tc-max .mx-h2,
body.tc-redesign.tc-max .mx-h3 {
  font-family: var(--mx-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: .95 !important;
  color: var(--mx-text) !important;
  margin: 0;
}
body.tc-redesign.tc-max .mx-h1 { font-size: clamp(48px, 6.4vw, 96px) !important; }
body.tc-redesign.tc-max .mx-h2 { font-size: clamp(32px, 3.6vw, 48px) !important; }
body.tc-redesign.tc-max .mx-h3 { font-size: clamp(24px, 2.2vw, 30px) !important; line-height: 1 !important; }
body.tc-redesign.tc-max .mx-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--mx-text-2);
  max-width: 60ch;
  margin: 0;
}
body.tc-redesign.tc-max .mx-label {
  font-family: var(--mx-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--mx-text-2) !important;
}
body.tc-redesign.tc-max .mx-muted { color: var(--mx-text-3) !important; }
body.tc-redesign.tc-max .mx-num { font-variant-numeric: tabular-nums; }
body.tc-redesign.tc-max .mx-display-num {
  font-family: var(--mx-font-display) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .005em !important;
}
body.tc-redesign.tc-max .mx-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------ Block-Button
   Drückbarer Block: sichtbare Unterkante, sinkt beim Drücken ein. */
body.tc-redesign.tc-max .mx-btn {
  --b-bg: var(--mx-raised);
  --b-hi: #25324f;
  --b-lo: #0c1324;
  --b-ink: var(--mx-text);
  --b-edge: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: var(--mx-r-md) !important;
  background: linear-gradient(180deg, var(--b-hi), var(--b-bg)) !important;
  color: var(--b-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: var(--mx-font-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 var(--b-edge) 0 var(--b-lo),
    0 calc(var(--b-edge) + 10px) 22px -10px rgba(0, 0, 0, .7) !important;
  transform: translateY(0) !important;
  transition: transform var(--mx-fast) var(--mx-ease), box-shadow var(--mx-fast) var(--mx-ease), filter var(--mx-fast) var(--mx-ease) !important;
  animation: none !important;
}
body.tc-redesign.tc-max .mx-btn:hover { filter: brightness(1.07) saturate(1.05); transform: translateY(-1px) !important; }
body.tc-redesign.tc-max .mx-btn:active {
  transform: translateY(calc(var(--b-edge) - 1px)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 0 var(--b-lo), 0 4px 10px -6px rgba(0, 0, 0, .7) !important;
}
body.tc-redesign.tc-max .mx-btn:disabled,
body.tc-redesign.tc-max .mx-btn[aria-disabled="true"] { filter: grayscale(.6) brightness(.8); cursor: not-allowed; transform: none !important; }
body.tc-redesign.tc-max .mx-btn--gold { --b-bg: #f6b21f; --b-hi: #ffd766; --b-lo: var(--mx-gold-lo); --b-ink: var(--mx-gold-ink); }
body.tc-redesign.tc-max .mx-btn--emerald { --b-bg: #19c985; --b-hi: #4ff0b1; --b-lo: var(--mx-emerald-lo); --b-ink: var(--mx-emerald-ink); }
body.tc-redesign.tc-max .mx-btn--stone { --b-bg: var(--mx-raised); --b-hi: #26334f; --b-lo: #0b1222; --b-ink: var(--mx-text); }
/* Amethyst wie Gold/Smaragd: helle Fläche, dunkle Schrift (≥5,4:1 auch am unteren Rand) */
body.tc-redesign.tc-max .mx-btn--amethyst { --b-bg: #9d76f7; --b-hi: #c2a3ff; --b-lo: var(--mx-amethyst-lo); --b-ink: var(--mx-amethyst-ink); }
body.tc-redesign.tc-max .mx-btn--ghost {
  --b-edge: 0px;
  background: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--mx-line) !important;
  color: var(--mx-text) !important;
}
body.tc-redesign.tc-max .mx-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--mx-text-3) !important; }
body.tc-redesign.tc-max .mx-btn--lg { min-height: 54px; padding: 0 26px !important; font-size: 16.5px !important; border-radius: 14px !important; }
body.tc-redesign.tc-max .mx-btn--sm { min-height: 36px; padding: 0 14px !important; font-size: 13.5px !important; --b-edge: 3px; border-radius: 10px !important; }
body.tc-redesign.tc-max .mx-btn--block { width: 100%; }
body.tc-redesign.tc-max .mx-btn svg { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------------ Flächen */
body.tc-redesign.tc-max .mx-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--mx-surface) !important;
  border: 1px solid var(--mx-line-soft) !important;
  border-radius: var(--mx-r-xl) !important;
  box-shadow: var(--mx-bevel), var(--mx-shadow) !important;
}
body.tc-redesign.tc-max .mx-card {
  background: var(--mx-surface) !important;
  border: 1px solid var(--mx-line-soft) !important;
  border-radius: var(--mx-r-lg) !important;
  box-shadow: var(--mx-bevel) !important;
}
body.tc-redesign.tc-max .mx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--mx-line-soft);
  color: var(--mx-text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
body.tc-redesign.tc-max .mx-tag {
  --tag: var(--mx-diamond);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tag) 14%, transparent);
  color: var(--tag);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
body.tc-redesign.tc-max .mx-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--mx-raised);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .4);
  color: var(--mx-text-2);
  font: 600 12px/1 var(--mx-font-body);
}
body.tc-redesign.tc-max .mx-live-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--mx-emerald);
  box-shadow: 0 0 0 3px rgba(46, 229, 157, .18);
}
/* Grundform = Smaragd = online. Für „Live“ (Turnier, Rangliste, Top-Gewinne …) Redstone: */
body.tc-redesign.tc-max .mx-live-dot--live {
  background: var(--mx-redstone);
  box-shadow: 0 0 0 3px rgba(255, 77, 94, .2);
}

/* ------------------------------------------------------------ Bewegung */
/* Puls-Ring als eigene Ebene (::after, nur transform/opacity): Früher animierte box-shadow den Punkt selbst – das zeichnete
   Kopfzeile, Hero und Lobby 60-mal pro Sekunde neu (Lag, v. a. in Safari). Optik gleich: Ring wächst von 8 auf 24 px und verblasst. */
@keyframes mxLiveRing {
  0% { transform: scale(1); opacity: .45; }
  70% { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}
body.tc-redesign.tc-max .mx-live-dot,
body.tc-redesign.tc-max #siteMain #heroLoggedIn :is(.mxh-resume-dot, .mxh-tag-dot) { position: relative; }
@media all {
  body.tc-redesign.tc-max:not(.tc-reduced-motion) .mx-live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgb(46, 229, 157);
    pointer-events: none;
    animation: mxLiveRing 2.2s ease-out infinite;
    will-change: transform, opacity;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) .mx-live-dot.mx-live-dot--live::after { background: rgb(255, 77, 94); }
}

/* ------------------------------------------------------------ Leistung */
/* Unsichtbare Unschärfe aus dem alten Design (style.css/redesign.css): Diese Flächen sind deckend oder haben nichts Buntes
   dahinter – Pixelvergleich ohne Unterschied (nur Text-Kantenglättung). backdrop-filter liest bei jedem Scrollen/Neuzeichnen
   den Hintergrund neu ein und machte die Seite v. a. in Safari zäh. Sichtbares Glas (z. B. Werbe-Glow) bleibt. */
body.tc-redesign.tc-max :is(#mainNav, #hero, #categoryFilters, .game, .tryus-spotlight-card, #betRow) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media not all {
  body.tc-redesign.tc-max .mx-btn { transition: none !important; }
  body.tc-redesign.tc-max .mx-btn:hover,
  body.tc-redesign.tc-max .mx-btn:active { transform: none !important; }
}