/* Freischaltbare Skins. Sie überschreiben nur die Tokens aus style.css.
   Aktiv per <html data-skin="…">, Hell/Dunkel folgt der Handy-Einstellung. */

/* ---------- Limette (ab Level 5) ---------- */
:root[data-skin="lime"] {
  --bg: #f6f8ea; --ink: #1f3317; --muted: #66735c; --card: #fff; --line: #dde3c6; --soft-line: #e9eed3;
  --block: #1f3317; --surface: #e6ebcf; --field: #fff; --tile: #f0f4dc; --cell: #fff; --slot: #fbfcf3; --key: #fff;
  --btn: #1f3317; --btn-ink: #eaf6c2; --accent: #5a9a1c;
  --host: #0d7a84; --host-soft: #d5eef0; --guest: #e2465f; --guest-soft: #fbdde2;
  --ok: #dcf1a6; --ok-strong: #c8e985; --ok-ink: #3b6510;
  --sel: #fff1a8; --word: #fbf6d2; --clue: #e9eed3; --clue-line: #d3dbb4; --clue-ink: #3c4a2e; --clue-num: #7d8a6c;
  --turn-off: #e6ebcf;
  --font-body: "Nunito", system-ui, sans-serif; --font-head: "Fredoka", "Nunito", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="lime"] {
    --bg: #11170e; --ink: #eef5e0; --muted: #9aa78d; --card: #1b2316; --line: #2f3a28; --soft-line: #2a3324;
    --block: #eef5e0; --surface: #2a3424; --field: #1f281a; --tile: #232d1d; --cell: #1f281a; --slot: #1f281a; --key: #2a3424;
    --btn: #b5e550; --btn-ink: #11170e; --accent: #b5e550;
    --host: #4fc8d2; --host-soft: #16383b; --guest: #ff7b90; --guest-soft: #43202a;
    --ok: #34501a; --ok-strong: #44661f; --ok-ink: #d6f29a; --wrong: #ff6b6b; --bad: #4a1f1f; --bad-strong: #5c2424; --bad-ink: #ffb3b3;
    --sel: #5c5418; --word: #343414; --clue: #2b3524; --clue-line: #3a4632; --clue-ink: #c9d4b8; --clue-num: #8d9a7e;
    --turn-off: #2a3424;
    color-scheme: dark;
  }
}

/* ---------- Sonntagszeitung (ab Level 10) ---------- */
:root[data-skin="paper"] {
  --bg: #f5f0e6; --ink: #1b1b1b; --muted: #6f675a; --card: #fffdf8; --line: #d9d1bf; --soft-line: #e8e1d2;
  --block: #1b1b1b; --surface: #e6dfcf; --field: #fffdf8; --tile: #efe8da; --cell: #fffdf8; --slot: #fffdf8; --key: #fffdf8;
  --btn: #1b1b1b; --btn-ink: #f5f0e6; --accent: #9b2c2c;
  --host: #2443b8; --host-soft: #dde3f7; --guest: #9b2c6b; --guest-soft: #f2dbe8;
  --ok: #dde9cf; --ok-strong: #c9dcb4; --ok-ink: #2f5220;
  --sel: #f6e3a1; --word: #f7efd2; --clue: #e6dfcf; --clue-line: #cfc6b2; --clue-ink: #3b352b; --clue-num: #8a8170;
  --turn-off: #e6dfcf;
  --font-body: "Libre Franklin", system-ui, sans-serif; --font-head: "Fraunces", Georgia, serif;
}
:root[data-skin="paper"] h1 span { font-style: italic; font-weight: 500; }
@media (prefers-color-scheme: dark) {
  :root[data-skin="paper"] {
    --bg: #171513; --ink: #efe9dc; --muted: #a39a89; --card: #221f1b; --line: #38332b; --soft-line: #2e2a24;
    --block: #efe9dc; --surface: #322d25; --field: #26221d; --tile: #2a2620; --cell: #26221d; --slot: #26221d; --key: #322d25;
    --btn: #efe9dc; --btn-ink: #171513; --accent: #e6907f;
    --host: #8ea5ff; --host-soft: #232c4d; --guest: #e486bb; --guest-soft: #45233a;
    --ok: #2f3d25; --ok-strong: #3d4f30; --ok-ink: #cfe3b8; --wrong: #ff7b6b; --bad: #4a1f1c; --bad-strong: #5c2622; --bad-ink: #ffb8ad;
    --sel: #53461c; --word: #362f1c; --clue: #322d25; --clue-line: #423b31; --clue-ink: #d6ccb8; --clue-num: #998f7c;
    --turn-off: #322d25;
    color-scheme: dark;
  }
}

/* ---------- Tandem (ab Level 15) ---------- */
:root[data-skin="tandem"] {
  --bg: #f4f2fb; --ink: #1d1b3a; --muted: #6b6889; --card: #fff; --line: #dcd8ee; --soft-line: #e9e6f5;
  --block: #1d1b3a; --surface: #e7e4f4; --field: #fff; --tile: #efedf9; --cell: #fff; --slot: #faf9fe; --key: #fff;
  --btn: #1d1b3a; --btn-ink: #fff; --accent: #e8650f;
  --host: #6d4aff; --host-soft: #e5defe; --guest: #e8650f; --guest-soft: #ffe5d3;
  --ok: #d6f3df; --ok-strong: #b9e9c8; --ok-ink: #1d6b3a;
  --sel: #fff0a6; --word: #fff8d6; --clue: #e7e4f4; --clue-line: #d2cde8; --clue-ink: #37345a; --clue-num: #8481a6;
  --turn-off: #e7e4f4;
  --font-body: "DM Sans", system-ui, sans-serif; --font-head: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
}
:root[data-skin="tandem"] h1 { letter-spacing: -0.02em; }
@media (prefers-color-scheme: dark) {
  :root[data-skin="tandem"] {
    --bg: #0f0e1a; --ink: #ecebff; --muted: #9a97bd; --card: #1a1930; --line: #2c2a48; --soft-line: #25233f;
    --block: #ecebff; --surface: #29274a; --field: #1d1c35; --tile: #22213d; --cell: #1d1c35; --slot: #1d1c35; --key: #29274a;
    --btn: #ecebff; --btn-ink: #0f0e1a; --accent: #ffa057;
    --host: #a28cff; --host-soft: #2b2457; --guest: #ffa057; --guest-soft: #4a2c18;
    --ok: #1e4030; --ok-strong: #275238; --ok-ink: #b6f0c9; --wrong: #ff6b7d; --bad: #451c26; --bad-strong: #57222f; --bad-ink: #ffb3bf;
    --sel: #4f4718; --word: #2f2c18; --clue: #29274a; --clue-line: #37345c; --clue-ink: #c9c6ea; --clue-num: #8e8bb3;
    --turn-off: #29274a;
    color-scheme: dark;
  }
}

/* Logo neben der Wortmarke */
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { width: 44px; height: 44px; flex: none; }
.brand:not(:has(svg)) { gap: 0; }

/* Skin-Auswahl in der Lobby */
.skins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.skins button { display: flex; align-items: center; gap: 8px; text-align: left; background: var(--tile);
  border: 2px solid transparent; padding: 8px; }
.skins button.on { border-color: var(--ink); }
.skins button svg { width: 30px; height: 30px; flex: none; }
.skins button small { display: block; color: var(--muted); font-size: 12px; }
.skins button:disabled svg { filter: grayscale(1); }
.level { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.level small { color: var(--muted); font-size: 13px; }