/* ============================================================
   DARKMODE v4 — kohärente Neuauflage
   Prinzip: eine Flächen-Leiter (#0F->1C->24->2C), EIN Ink-Paar,
   Akzente für Dunkel aufgehellt, Borders weich. Raritäts- und
   Arena-Farben bleiben physisch (Spielszene!).
   ============================================================ */
[data-theme="dark"]{
  --paper:#141414;
  --card:#1C1C1C;
  --card-2:#242424;
  --elev:#2C2C2C;
  --ink:#ECEAE4;
  --muted:#A09C92;
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.16);
  --shadow:0 8px 22px rgba(0,0,0,.45);
  /* Akzente: heller & etwas entsättigt für dunkle Flächen */
  --green-600:#7CB765;
  --green-700:#8FCA77;
  --green-050:#20291C;
  --gold:#D9B24A;
  --gold-soft:#3A3212;
  --red:#D06A50;
  /* Tokens die styles.css im Light setzt, aber dark-theme bisher nicht:
     ohne diese blieben Überschriften (--green-dark), Chips (--yellow/--mint)
     und Labels (--soil) auf ihrem hellen Wert -> dunkel-auf-dunkel / blendend.
     --green bleibt bewusst dunkelgrün (wird nur als Fläche mit weißem Text
     bzw. als Hover-Border benutzt, funktioniert so in beiden Modi). */
  --green-dark:#CFE6C2;   /* Überschriften/Logo/Labels -> helles Sage */
  --yellow:#3A3212;       /* .eyebrow / Timer-Chips -> dunkles Gold */
  --mint:#26331F;         /* aktives Nav / Tabellen-Header -> dunkler Grünton */
  --soil:#C6A98D;         /* .notice / .eyebrow / Labels -> helles Tan */
  --panel:#242424;        /* Fallback-Konsumenten (garden-clash / arena2) */
  --paper2:#1C1C1C;
  --line:rgba(255,255,255,.10);
  --track:#2a2e37;        /* arena2 HP-/Stat-Balken */
  --gridline:rgba(255,255,255,.04);  /* arena2 Hintergrund-Raster */
}
[data-theme="dark"] body{ background:var(--paper); color:var(--ink); }

/* Flächen */
[data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] section.card,
[data-theme="dark"] .gc-season-meta, [data-theme="dark"] .shelf-card, [data-theme="dark"] .profile-card{
  background:var(--card); border-color:var(--border); box-shadow:var(--shadow);
}
[data-theme="dark"] .card .card, [data-theme="dark"] .inner, [data-theme="dark"] .stat-box{
  background:var(--card-2); border-color:var(--border);
}
[data-theme="dark"] header, [data-theme="dark"] nav, [data-theme="dark"] .topbar{
  background:rgba(20,20,20,.92); border-color:var(--border);
}

/* Text-Hierarchie */
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3{ color:var(--ink); }
[data-theme="dark"] small, [data-theme="dark"] .muted, [data-theme="dark"] .hint{ color:var(--muted); }
[data-theme="dark"] a{ color:var(--green-700); }

/* Buttons: EIN System */
[data-theme="dark"] .btn{
  background:var(--card-2); color:var(--ink); border-color:var(--border-strong);
  box-shadow:0 2px 0 rgba(0,0,0,.4);
}
[data-theme="dark"] .btn:hover{ background:var(--elev); }
[data-theme="dark"] .btn.primary{
  background:linear-gradient(180deg,#5E9A47,#4A8236);
  border-color:#3B6B2A; color:#FFFFFF;
  box-shadow:0 2px 0 #2E5420, 0 4px 12px rgba(70,130,50,.25);
}
[data-theme="dark"] .btn.primary:hover{ background:linear-gradient(180deg,#69A951,#54903D); }
[data-theme="dark"] #streakClaimBtn, [data-theme="dark"] .btn.reward{
  background:linear-gradient(180deg,#C55238,#9E3419);
  border-color:#7A2812; color:#FFEFE8;
  box-shadow:0 2px 0 #64200E, 0 4px 12px rgba(170,60,30,.3);
}
/* Streak-Banner: im Dark-Mode war der Gradient hart hell -> heller Text auf
   hellem Grund = unsichtbar (Grund, warum die Streak "nicht zu finden" war). */
[data-theme="dark"] .streak-banner{
  background:linear-gradient(135deg,#2c2416,#3a2e18);
  border-color:#5a4a28;
}
[data-theme="dark"] .streak-copy strong{ color:#ffe0a8; }
[data-theme="dark"] .streak-copy small{ color:#c9bfa6; }
[data-theme="dark"] .streak-copy-win strong{ color:#8fe05a; }
[data-theme="dark"] .btn:disabled{ background:var(--card); color:var(--muted); border-color:var(--border); box-shadow:none; }

/* Inputs & Slider */
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{
  background:var(--card-2); color:var(--ink); border-color:var(--border-strong);
}
[data-theme="dark"] input::placeholder{ color:var(--muted); }
[data-theme="dark"] input[type="range"]{ accent-color:var(--green-600); background:transparent; }

/* Tabellen & Listen */
[data-theme="dark"] table{ background:var(--card); border-color:var(--border); }
[data-theme="dark"] th{ background:var(--card-2); color:var(--muted); border-color:var(--border); }
[data-theme="dark"] td{ border-color:var(--border); color:var(--ink); }
[data-theme="dark"] tr:hover td{ background:var(--card-2); }

/* Pills, Badges, Meta */
[data-theme="dark"] .pill, [data-theme="dark"] .tag{
  background:var(--card-2); color:var(--ink); border-color:var(--border-strong);
}
[data-theme="dark"] .gc-season-meta .meta-up{ color:var(--green-700); }
[data-theme="dark"] .gc-season-meta .meta-down{ color:var(--red); }
[data-theme="dark"] .gc-season-meta i{ color:var(--muted); }

/* Gold/Preise */
[data-theme="dark"] .price, [data-theme="dark"] .pixels, [data-theme="dark"] .gold{
  color:var(--gold);
}

/* Gesperrte/inaktive Items */
[data-theme="dark"] .locked, [data-theme="dark"] [class*="locked"]{
  filter:grayscale(.4) brightness(.7);
}

/* Scrollbars */
[data-theme="dark"] ::-webkit-scrollbar{ width:10px; height:10px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#333; border-radius:6px; }
[data-theme="dark"] ::-webkit-scrollbar-track{ background:var(--card); }

/* Fokus-Ringe sichtbar auf dunkel */
[data-theme="dark"] :focus-visible{ outline:2px solid var(--green-700); outline-offset:2px; }

/* ============================================================
   Geteilte Chrome aus styles.css, die hartcodierte helle Hex nutzt
   (keine Token) — hier zentral für ALLE Seiten korrigiert.
   ============================================================ */
[data-theme="dark"] .notice{ background:var(--card-2); color:var(--muted); border-color:var(--border); }
[data-theme="dark"] .lang-switch{ background:var(--card-2); border-color:var(--border); box-shadow:none; }
[data-theme="dark"] .lang-btn{ color:var(--ink); }
[data-theme="dark"] .game-panel{ background:var(--card); border-color:var(--border); box-shadow:var(--shadow); }
[data-theme="dark"] .case{ background:var(--card)!important; }
[data-theme="dark"] .rare-card,[data-theme="dark"] .inventory-card,
[data-theme="dark"] .room-card,[data-theme="dark"] .history-item,
[data-theme="dark"] .leaderboard-card{ background:var(--card); border-color:var(--border); box-shadow:var(--shadow); }
[data-theme="dark"] .table{ background:var(--card); }
[data-theme="dark"] .reel-window,[data-theme="dark"] .contents-list,
[data-theme="dark"] .hand{ background:var(--card); border-color:var(--border); }
/* Die wenigen Stellen, die --green-dark als FLÄCHE (mit weißem Text) nutzen:
   da --green-dark im Dark jetzt hell ist, hier eine dunkle/farbige Fläche halten. */
[data-theme="dark"] .lb-sort-btn.active{ background:var(--green-700); color:#12210c; }
[data-theme="dark"] .reward-lock{ background:var(--green-700)!important; box-shadow:0 0 0 1.5px var(--green-700); }
[data-theme="dark"] .reward-lock:before{ border-color:var(--green-700); }

/* Community-Landing (öffentliche Startseite) — hartcodiertes Weiß in styles.css */
[data-theme="dark"] .landing-card{ background:var(--card); border-color:var(--border); box-shadow:var(--shadow); }
[data-theme="dark"] .landing-note{ color:var(--muted); }
[data-theme="dark"] .winner-badge{ background:var(--card-2); border-color:var(--border); }
[data-theme="dark"] .winner-badge small{ color:var(--muted); }