/* KLONDAIRE © 2026 Mats (Matshio7) — Alle Rechte vorbehalten. Keine Lizenz: Nutzung, Kopieren, Verändern oder Weiterverwendung (auch von Teilen) ohne schriftliche Genehmigung untersagt. Siehe LICENSE. */
/* ============================================================================
   MODERNES DESIGN (DLC v1.1.0, Beta) — zweiter Grundstil, komplett unter
   body.ui-modern gescoped. Prinzip: gleiche Farb-Seele (Theme-Variablen
   --mint/--gold/--pink bleiben die Sprache), aber klare Sans-Typo, weiche
   Radien, Glas-Panels und sanfte Tiefe statt Retro-Pixel & Scanlines.
   Umschalter: OPTIONEN → OPTIK → MODERNES DESIGN (opts.uiModern → applyOpts).
   ============================================================================ */

/* ---- Typo: EIN Hammer ersetzt beide Retro-Fonts; Ziffern tabellarisch ---- */
body.ui-modern, body.ui-modern *{
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Inter','Helvetica Neue',sans-serif !important;
  font-variant-numeric:tabular-nums;
}
body.ui-modern .ht,
body.ui-modern .logo,
body.ui-modern .cr-title,body.ui-modern .cr-name,
body.ui-modern .lp-h,
body.ui-modern .faq-cat,
body.ui-modern .sh-shelftitle{font-weight:800;letter-spacing:.14em;text-transform:uppercase}
body.ui-modern .ol,body.ui-modern .lb-tab,body.ui-modern .mlink,
body.ui-modern .tag,body.ui-modern .cx-note{font-weight:700;letter-spacing:.08em}
body.ui-modern .od,body.ui-modern .pd,body.ui-modern .cx-exp{font-size:12px;line-height:1.65}

/* ---- Bühne: ruhiger Verlaufs-Hintergrund statt Filz-Textur + Scanlines ---- */
body.ui-modern #scanlines,body.ui-modern #bgfx,body.ui-modern #bgimg{display:none}
body.ui-modern{background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--mint) 14%,#070d0a) 0%,#070d0a 55%,#04070a 100%) fixed}
body.ui-modern::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 40% at 80% 110%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 70%)}

/* ---- Panels: Glas statt Kacheln ---- */
body.ui-modern .menu-card,
body.ui-modern .credits-stage,
body.ui-modern .kc-card{
  background:color-mix(in srgb,#0c1a13 78%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--mint) 22%,transparent);
  border-radius:22px;
  box-shadow:0 18px 48px rgba(0,0,0,.45)}
body.ui-modern .orow,
body.ui-modern .perk,
body.ui-modern .lb-row,
body.ui-modern .legacy-plaque,
body.ui-modern .stat-grid>div,
body.ui-modern .sh-card,body.ui-modern .sh-lock{
  border-radius:14px;
  border-width:1px;
  box-shadow:0 4px 16px rgba(0,0,0,.25)}

/* ---- Buttons: ruhig, satt, klare Hover-States ---- */
body.ui-modern .mbtn,body.ui-modern .btn,body.ui-modern .opt-reset,
body.ui-modern .mtile,body.ui-modern .lb-tab,body.ui-modern .tgl,
body.ui-modern .sbtn,body.ui-modern .theme-btn{
  border-radius:12px;border-width:1px;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
body.ui-modern .mbtn:active,body.ui-modern .btn:active,body.ui-modern .mtile:active{transform:scale(.985)}
body.ui-modern .mbtn.gold.hero{
  background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 24%,#241d07),#1a1405);
  box-shadow:0 6px 22px color-mix(in srgb,var(--gold) 28%,transparent);animation:none}
body.ui-modern .iconbtn{border-radius:12px}

/* ---- Logo: Verlaufs-Text statt Pixel-Flacker ---- */
body.ui-modern .logo .lg{
  animation:none;transform:none;
  background:linear-gradient(180deg,#eafff4,var(--mint) 60%,color-mix(in srgb,var(--mint) 55%,#0a2)) ;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 12px color-mix(in srgb,var(--mint) 45%,transparent))}
body.ui-modern .tag{color:color-mix(in srgb,var(--mint) 70%,#fff)}

/* ---- Karten: weiche Radien, feine Tiefe; Pixel-Kanten weg ---- */
body.ui-modern .card{border-radius:9px;box-shadow:0 2px 6px rgba(0,0,0,.35);border-width:1px}
body.ui-modern .card.down{background:linear-gradient(150deg,#12251b,#0b1710);border-color:#1d3a2b}
body.ui-modern .card.sel{box-shadow:0 0 0 2.5px var(--gold),0 8px 18px rgba(0,0,0,.4)}
body.ui-modern .card .cn{font-weight:800}
body.ui-modern .card .pip{opacity:.9}

/* ---- Szenen-Header & Listen ---- */
body.ui-modern .shead .ht{letter-spacing:.2em}
body.ui-modern .faq-item{border-radius:14px}
body.ui-modern .news-list .patch{border-radius:14px}

/* ---- Shop: luftiger ---- */
body.ui-modern .sh-shelf{border-radius:16px}
body.ui-modern .sh-pill{border-radius:999px;font-weight:600}
body.ui-modern .sh-price{font-weight:800}

/* ---- HUD ---- */
body.ui-modern #topbar .iconbtn,body.ui-modern #recchip{border-radius:12px}
body.ui-modern .scorepop{font-weight:800}

/* ---- Toasts/Overlays ---- */
body.ui-modern .toast{border-radius:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.ui-modern .bosssplash{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.ui-modern .bsp-name{letter-spacing:.16em;font-weight:800}

/* ---- Vermächtnis-Plakette & Credits im modernen Kleid ---- */
body.ui-modern .legacy-plaque{background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 12%,#171204),#120e03)}
body.ui-modern .cr-title{font-size:24px}
body.ui-modern .cr-name{font-size:19px}

/* ---- Energiesparen/Reduced Motion: keine zusätzlichen Animationen eingeführt ---- */
@media(prefers-reduced-motion:reduce){body.ui-modern .mbtn,body.ui-modern .btn,body.ui-modern .mtile{transition:none}}