/* Farben */
:root {
  --bg: #f2f5fb;
  --bg-glow: rgba(37, 99, 235, .10);
  --surface: #ffffff;
  --surface-2: #e7eefa;
  --line: #d4def0;
  --fg: #0f1f3d;
  --muted: #5d7096;
  --accent: #2563eb;
  --accent-2: #3b82f6;
  --accent-soft: rgba(37, 99, 235, .12);
  --on-accent: #ffffff;
  --tile-empty: #f7f9fe;
  --tile-border: #cfdaee;
  --tile-filled: #5b6f99;
  --key: #e1e8f5;
  --key-hover: #d2ddf0;
  --key-fg: #0f1f3d;
  --correct: #18934c;
  --present: #d4900a;
  --absent: #c3ccdc;
  --on-color: #ffffff;
  --danger: #dc3c4b;
  --shadow: 0 10px 30px rgba(15, 31, 61, .12);
  --tile: 52px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0a1224;
  --bg-glow: rgba(59, 130, 246, .16);
  --surface: #111d37;
  --surface-2: #182a4f;
  --line: #22355d;
  --fg: #e8eefc;
  --muted: #8ea3c8;
  --accent: #3b82f6;
  --accent-2: #60a5fa;
  --accent-soft: rgba(96, 165, 250, .16);
  --tile-empty: #0e1a33;
  --tile-border: #24375f;
  --tile-filled: #4d6ba3;
  --key: #1c2e56;
  --key-hover: #253b6b;
  --key-fg: #e8eefc;
  --correct: #26a965;
  --present: #d9a12a;
  --absent: #2b3b5f;
  --shadow: 0 14px 40px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
/* Farbenblind-Modi: Farbpaare per Simulation geprüft (OKLab ΔE bei Protan, Deutan, Tritan) */
:root { --on-correct: #fff; --on-present: #fff; --on-absent: #3a4866; }
:root[data-theme="dark"] { --on-absent: #fff; }
/* Tastatur: "kommt nicht vor" stark zurückgenommen, man sieht sofort, was schon weg ist */
:root { --key-absent: #98a3b8; --key-absent-fg: #f1f4f9; }
:root[data-theme="dark"] { --key-absent: #0a1226; --key-absent-fg: #5a6a92; }
:root[data-cb="rg"] { --correct: #e8692a; --present: #2477c9; --absent: #b4bccb; --on-absent: #1f2a40; }
:root[data-cb="by"] { --correct: #d93a49; --present: #1a9a9a; --absent: #b4bccb; --on-absent: #1f2a40; }
:root[data-cb="mono"] { --correct: #1f2430; --present: #8d939e; --absent: #d5d9e0; --on-present: #111; --on-absent: #1f2430; }
:root[data-theme="dark"][data-cb="rg"] { --correct: #f5793a; --present: #4fb3f6; --absent: #2b3b5f; --on-present: #0b1530; --on-absent: #fff; }
:root[data-theme="dark"][data-cb="by"] { --correct: #e5484d; --present: #2bc4c4; --absent: #2b3b5f; --on-present: #0b1530; --on-absent: #fff; }
:root[data-theme="dark"][data-cb="mono"] { --correct: #f2f4f8; --present: #8d939e; --absent: #2a2f3a; --on-correct: #111; --on-present: #111; --on-absent: #fff; }

/* Bedienelemente wachsen auf WQHD und 4K mit */
:root { --ui: 1; }
@media (min-width: 2200px) and (min-height: 1200px) { :root { --ui: 1.3; } }
@media (min-width: 3200px) and (min-height: 1800px) { :root { --ui: 1.8; } }

/* Grundlayout */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--bg-glow), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button, a.wl-btn-primary, a.wl-btn-secondary { font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
[hidden] { display: none !important; }

/* Kopfzeile */
.wl-topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 5;
}
.wl-topbar-side { display: flex; gap: 4px; }
.wl-topbar-side.wl-topbar-side-right { justify-content: flex-end; }
.wl-logo { display: flex; gap: 3px; text-decoration: none; padding-bottom: 6px; }
.wl-logo i {
  font-style: normal; font-weight: 800; font-size: 15px; color: #fff;
  width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px;
  background: var(--accent);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}
/* „LAWINE“ rutscht treppenartig nach unten */
.wl-logo i:nth-child(n+5) { transform: translateY(calc((var(--n) - 4) * 1px)); }
.wl-logo i:nth-child(5) { --n: 5; } .wl-logo i:nth-child(6) { --n: 6; background: #26a965; }
.wl-logo i:nth-child(7) { --n: 7; } .wl-logo i:nth-child(8) { --n: 8; }
.wl-logo i:nth-child(9) { --n: 9; background: #d9a12a; } .wl-logo i:nth-child(10) { --n: 10; }
.wl-logo i:nth-child(3) { background: #d9a12a; }
.wl-icon-btn {
  background: none; border: 0; padding: 8px; border-radius: 10px; display: grid; color: var(--fg);
  transition: background .15s;
}
.wl-icon-btn:hover { background: var(--accent-soft); color: var(--accent-2); }
.wl-icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl-icon-btn-label {
  display: flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: 10px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: 14px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}
.wl-icon-btn-label:hover { background: var(--accent-2); color: #fff; }
.wl-icon-btn-label svg { width: 18px; height: 18px; stroke-width: 2.5; }
@media (max-width: 600px) { .wl-icon-btn-label span { display: none; } .wl-icon-btn-label { padding: 6px; } }
/* Sprachmenü oben links: Weltkugel mit Kürzel der aktuellen Sprache, klappt die Liste aller Sprachen auf */
.wl-lang-menu { position: relative; display: flex; }
.wl-lang-menu-btn {
  display: flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border: 1px solid var(--line);
  font-weight: 700; font-size: 13px; letter-spacing: .04em; cursor: pointer; list-style: none; user-select: none;
}
.wl-lang-menu-btn::-webkit-details-marker { display: none; }
.wl-lang-menu-btn svg { width: 18px; height: 18px; }
.wl-lang-menu[open] .wl-lang-menu-btn { background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent-2); }
.wl-lang-menu-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 180px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.wl-lang-menu-list a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  color: var(--fg); text-decoration: none; font-size: 15px;
}
.wl-lang-menu-list a:hover { background: var(--surface-2); }
.wl-lang-menu-list a span { flex: 1; }
.wl-lang-menu-list small { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
/* Haken bei der aktuellen Sprache, sonst gleich breiter Platzhalter, damit die Kürzel untereinander stehen */
.wl-lang-menu-list i { width: 16px; flex: none; }
.wl-lang-menu-list svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--accent-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.wl-lang-menu-list a.wl-is-active { font-weight: 700; }
/* Beschriftungen oben neben einem Symbol: Box auf Versalhöhe kürzen, damit die Buchstaben genau auf der Mitte des Symbols sitzen.
   Sonst rutschen sie wegen des Platzes für Unterlängen 0,5 bis 1px tiefer. */
.wl-topbar .wl-icon-btn-label span, .wl-topbar .wl-twitch-btn span, .wl-lang-menu-btn span { text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .wl-topbar .wl-icon-btn-label span, .wl-topbar .wl-twitch-btn span { position: relative; top: -.5px; }
  .wl-lang-menu-btn span { position: relative; top: -1px; }
}

.wl-statusbar { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px 0; }
.wl-statusbar span, .wl-chatbox-menu .wl-zoom, .wl-zoom-pill {
  font-size: 14px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line);
  padding: 4px 12px; border-radius: 999px;
}
.wl-statusbar b { color: var(--fg); }
.wl-statusbar .wl-statusbar-copy { cursor: pointer; user-select: none; transition: border-color .15s; }
.wl-statusbar .wl-statusbar-copy:hover { border-color: var(--accent-2); }
.wl-statusbar .wl-statusbar-copy b { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.wl-statusbar .wl-statusbar-live { display: inline-flex; align-items: center; gap: 6px; border-color: var(--danger); }
/* Spielansicht aus dem Logbuch: zurück und Datum */
.wl-statusbar .wl-statusbar-review a { color: var(--fg); font-weight: 700; text-decoration: none; margin-right: 6px; }
.wl-statusbar .wl-statusbar-review a:hover { color: var(--accent-2); }
.wl-statusbar .wl-statusbar-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: live 1.4s infinite; }
@keyframes live { 50% { opacity: .3; } }
.wl-keyboard.wl-is-readonly { pointer-events: none; opacity: .85; }

/* Spielbretter */
#boards {
  flex: 1;
  min-height: 0; /* sonst wächst der Bereich mit dem Inhalt und die Größenberechnung stimmt nicht */
  display: grid; grid-template-columns: repeat(var(--cols, 4), max-content);
  justify-content: safe center; align-content: start;
  gap: 10px; padding: 10px 16px;
  overflow: auto;
}
/* Gescrollt: Bretter laufen oben weich aus, statt hart an der Statusleiste abzuschneiden */
#boards.wl-is-scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px); mask-image: linear-gradient(to bottom, transparent, #000 18px); }
.wl-board {
  display: grid;
  gap: calc(var(--tile) * var(--gap-f, .1));
  padding: calc(var(--tile) * var(--pad-f, .25));
  /* Rundung Kachel + Innenabstand + Rand, so laufen die Ecken parallel */
  border-radius: calc(var(--tile) * (.16 + var(--pad-f, .25)) + 2px);
  border: 2px solid transparent;
  transition: opacity .3s, border-color .3s;
}
.wl-boards-multi .wl-board { background: color-mix(in srgb, var(--surface) 55%, transparent); border-color: var(--line); }
.wl-board.wl-is-solved { border-color: var(--correct); opacity: .6; }
.wl-board.wl-is-failed { border-color: var(--danger); }
.wl-board-label {
  grid-column: 1 / -1; text-align: center; font-weight: 700; line-height: 1;
  font-size: max(13px, calc(var(--tile) * .5)); color: var(--muted);
}
.wl-board.wl-is-solved .wl-board-label { color: var(--correct); }
.wl-board .wl-board-answer {
  grid-column: 1 / -1; text-align: center; font-weight: 800;
  font-size: max(12px, calc(var(--tile) * .4)); letter-spacing: .1em; color: var(--danger);
}
.wl-tile-row { display: grid; grid-auto-flow: column; grid-auto-columns: var(--tile); gap: calc(var(--tile) * var(--gap-f, .1)); }
.wl-tile {
  width: var(--tile); height: var(--tile);
  border: 2px solid var(--tile-border);
  border-radius: calc(var(--tile) * .16);
  background: var(--tile-empty);
  display: grid; place-items: center;
  font-weight: 800; font-size: calc(var(--tile) * .55);
  line-height: 1; user-select: none;
}
.wl-tile.wl-is-filled { border-color: var(--tile-filled); animation: pop .12s; }
.wl-tile.wl-is-correct, .wl-tile.wl-is-present, .wl-tile.wl-is-absent { border-color: transparent; box-shadow: inset 0 calc(var(--tile) * -.06) 0 rgba(0, 0, 0, .15); }
.wl-tile.wl-is-correct { background: var(--correct); color: var(--on-correct); }
.wl-tile.wl-is-present { background: var(--present); color: var(--on-present); }
.wl-tile.wl-is-absent { background: var(--absent); color: var(--on-absent); }
/* Symbole zusätzlich zur Farbe: Balken = richtig, Punkt = woanders im Wort */
.wl-tile { position: relative; }
.wl-symbols .wl-tile.wl-is-correct::after, .wl-symbols .wl-tile.wl-is-present::after {
  content: ""; position: absolute; background: currentColor; opacity: .85;
}
.wl-symbols .wl-tile.wl-is-correct::after { left: 18%; right: 18%; bottom: 9%; height: 9%; border-radius: 99px; }
.wl-symbols .wl-tile.wl-is-present::after { top: 9%; right: 9%; width: 20%; height: 20%; border-radius: 50%; }
.wl-tile.wl-is-revealing { animation: flip .45s ease both; }
.wl-tile-row.wl-is-shaking { animation: shake .4s; }

@keyframes pop { 50% { transform: scale(1.1); } }
@keyframes flip { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* Tastatur */
.wl-keyboard {
  position: relative; width: 100%; max-width: 600px; margin: 0 auto; padding: 6px 8px 10px;
  display: flex; flex-direction: column; gap: 7px; user-select: none;
}
.wl-keyboard-row { display: flex; gap: 5px; justify-content: center; }
.wl-key {
  flex: 1; height: 50px; border: 0; border-radius: 9px;
  background: var(--key); color: var(--key-fg);
  font-weight: 700; font-size: 18px; position: relative; overflow: hidden; padding: 0;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12);
  transition: background .15s, transform .05s;
}
.wl-key:hover { background: var(--key-hover); }
.wl-key:active { transform: translateY(1px); }
.wl-key-wide { flex: 1.6; font-size: 13px; letter-spacing: .04em; background: var(--accent-soft); color: var(--accent-2); }
.wl-key span { position: relative; z-index: 1; }
.wl-key.wl-is-correct { background: var(--correct); color: var(--on-correct); }
.wl-key.wl-is-present { background: var(--present); color: var(--on-present); }
.wl-key.wl-is-absent { background: var(--key-absent); color: var(--key-absent-fg); box-shadow: none; }
.wl-key.wl-is-dead { opacity: .35; }
/* Mehrere Bretter: pro Brett eine kleine Farbzelle in der Taste */
.wl-key .wl-key-boards { position: absolute; inset: 0; display: grid; }
.wl-key .wl-key-boards i.wl-is-correct { background: var(--correct); }
.wl-key .wl-key-boards i.wl-is-present { background: var(--present); }
.wl-key .wl-key-boards i.wl-is-absent { background: var(--key-absent); }
.wl-key.wl-key-has-boards span { text-shadow: 0 0 3px var(--key), 0 0 3px var(--key), 0 0 6px var(--key); }

/* Dialoge */
.wl-modal {
  border: 1px solid var(--line); padding: 0; border-radius: 18px;
  width: min(560px, calc((100vw - 32px) / var(--ui))); max-height: calc((100dvh - 32px) / var(--ui));
  background: var(--surface); color: var(--fg);
  box-shadow: var(--shadow);
}
/* Nur beim Öffnen einblenden (.wl-is-shown kommt danach), sonst startet es z. B. beim Umschalten der Animationen neu */
.wl-modal[open]:not(.wl-is-shown) { animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.wl-modal::backdrop { background: rgba(5, 12, 28, .55); backdrop-filter: blur(3px); }
.wl-modal-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); padding: 16px 20px 8px;
}
.wl-modal-head h2 { margin: 0; font-size: 22px; }
.wl-btn-close {
  position: absolute; right: 12px; top: 10px; width: 36px; height: 36px;
  background: none; border: 0; border-radius: 10px; font-size: 26px; line-height: 1; color: var(--muted);
}
.wl-btn-close:hover { background: var(--surface-2); }
.wl-modal-body { padding: 4px 22px 22px; }
.wl-modal h3 { margin: 0 0 2px; font-size: 16px; }
.wl-modal p { margin: 0; color: var(--muted); font-size: 14px; }
.wl-setting-field { padding: 12px 0; border-bottom: 1px solid var(--line); }
.wl-text-center { text-align: center; }
.wl-setting {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.wl-setting.wl-is-disabled { opacity: .45; pointer-events: none; }

.wl-seg { display: inline-flex; gap: 4px; margin-top: 8px; padding: 4px; background: var(--surface-2); border-radius: 12px; }
.wl-seg button {
  min-width: 42px; padding: 7px 12px; border: 0; border-radius: 9px;
  background: transparent; font-size: 16px; font-weight: 600; color: var(--muted);
  transition: background .15s, color .15s;
}
.wl-seg button:hover { color: var(--fg); }
.wl-seg button.wl-is-active { background: var(--accent); color: var(--on-accent); box-shadow: 0 2px 8px rgba(37, 99, 235, .35); }
.wl-seg button.wl-is-chosen { box-shadow: inset 0 0 0 2px var(--accent); color: var(--fg); }
.wl-modal p.wl-setting-note { margin-top: 4px; color: var(--accent-2); font-size: 13px; }

.wl-switch { position: relative; width: 48px; height: 28px; flex: none; }
.wl-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.wl-switch span { position: absolute; inset: 0; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); transition: background .2s; cursor: pointer; }
.wl-switch span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.wl-switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.wl-switch input:checked + span::after { transform: translateX(20px); }
.wl-switch input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.wl-stepper { display: flex; align-items: center; gap: 4px; flex: none; background: var(--surface-2); border-radius: 12px; padding: 4px; }
.wl-stepper button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--surface); font-size: 20px; }
.wl-stepper button:hover { color: var(--accent-2); }
.wl-stepper span { min-width: 34px; text-align: center; font-size: 18px; font-weight: 700; }

.wl-btn-primary, .wl-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; padding: 11px 18px; font-weight: 700;
  transition: filter .15s, transform .05s;
}
.wl-btn-primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--on-accent); box-shadow: 0 4px 14px rgba(37, 99, 235, .3); }
.wl-btn-primary:hover { filter: brightness(1.08); }
.wl-btn-secondary { background: var(--surface-2); color: var(--fg); }
.wl-btn-secondary:hover { background: var(--accent-soft); }
.wl-btn-primary:active, .wl-btn-secondary:active { transform: translateY(1px); }
.wl-btn-primary.wl-btn-big { width: 100%; margin: 18px 0 4px; font-size: 18px; padding: 14px; }
.wl-join-form { display: flex; gap: 6px; flex: none; }
.wl-join-form input {
  width: 92px; padding: 9px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--fg); font: inherit; font-weight: 700;
  text-transform: uppercase; text-align: center; letter-spacing: .12em;
}
.wl-join-form input:focus { outline: 2px solid var(--accent); }

.wl-result-solutions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0; }
.wl-result-solutions a { padding: 5px 11px; border-radius: 8px; font-weight: 700; letter-spacing: .06em; color: var(--on-color); text-decoration: none; transition: transform .12s, filter .12s; }
.wl-result-solutions a:hover { transform: translateY(-1px); filter: brightness(1.12); text-decoration: underline; text-underline-offset: 3px; }
.wl-result-solutions .wl-is-solved { background: var(--correct); color: var(--on-correct); }
.wl-result-solutions .wl-is-failed { background: var(--danger); }
.wl-result-solutions small { opacity: .8; font-weight: 500; margin-left: 4px; }
.wl-result-grid { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: -4px 0 18px; }
.wl-result-grid span { display: flex; gap: 4px; }
.wl-result-grid i { width: 22px; height: 22px; border-radius: 5px; background: var(--surface-2); }
.wl-result-grid i.wl-is-correct { background: var(--correct); }
.wl-result-grid i.wl-is-present { background: var(--present); }
.wl-result-grid i.wl-is-absent { background: var(--absent); }
.wl-btn-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.wl-home-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 18px; }
.wl-home-stats div { background: var(--surface-2); border-radius: 12px; padding: 10px 4px; text-align: center; }
.wl-home-stats b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.wl-home-stats small { color: var(--muted); font-size: 12px; }

.wl-toast {
  position: fixed; top: 120px; left: 50%; transform: translateX(-50%);
  background: var(--fg); color: var(--bg); padding: 10px 18px; border-radius: 12px;
  font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 10;
  box-shadow: var(--shadow);
}
.wl-toast.wl-is-visible { opacity: 1; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }

/* Statistik-Seite */
.wl-page { width: 100%; max-width: 960px; margin: 0 auto; padding: 20px 16px 48px; }
.wl-page h2 { font-size: 18px; margin: 32px 0 12px; }
.wl-page h2 small { color: var(--muted); font-weight: 500; font-size: 14px; margin-left: 6px; }
.wl-stats-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; margin-bottom: 8px; }
.wl-stats-filters label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.wl-stats-filters .wl-seg { margin: 0; }
.wl-stats-filters .wl-seg button { min-width: 0; padding: 5px 10px; font-size: 14px; }

.wl-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.wl-result-list { display: flex; flex-direction: column; }
.wl-result-list div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.wl-result-list div:last-child { border-bottom: 0; }
.wl-result-list b { letter-spacing: .06em; }
.wl-result-list span { color: var(--muted); }
.wl-empty { color: var(--muted); font-size: 14px; padding: 6px 0; }

/* Logbuch (Statistikseite): Anzeigetafel, Verteilung, Bestmarken, Größen, letzte Spiele */
.wl-log-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.wl-log-head h1 { font-size: 28px; margin: 0; }
.wl-log-head .wl-stats-filters { margin: 0; justify-content: flex-end; }
.wl-log-board h2, .wl-log-box h2, h2.wl-log-label { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; }
.wl-log-board { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.wl-log-board > div { padding: 14px 10px; text-align: center; border-left: 1px solid var(--line); }
.wl-log-board > div:first-child { border-left: 0; }
.wl-log-board h2 { margin-bottom: 4px; }
.wl-log-board b { display: block; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wl-log-board .wl-is-win b { color: var(--correct); }
.wl-log-board .wl-is-hot b { color: var(--present); }
.wl-log-two { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; margin-top: 12px; }
.wl-log-box { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.wl-log-box h2 { margin-bottom: 10px; }
.wl-log-split { display: flex; justify-content: space-between; }
.wl-log-split span { font-weight: 600; letter-spacing: .04em; text-transform: none; }
.wl-log-dist { display: grid; gap: 5px; }
.wl-log-dist div { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.wl-log-dist i {
  display: block; height: 20px; min-width: 22px; box-sizing: border-box; padding-right: 7px; border-radius: 5px; line-height: 20px;
  background: var(--surface-2); color: var(--muted); font-style: normal; font-size: 12px; text-align: right;
}
.wl-log-dist i.wl-is-correct { background: var(--correct); color: var(--on-correct); }
.wl-log-dist i.wl-is-present { background: var(--present); color: var(--on-present); }
/* Bestmarken füllen die Höhe des Kastens neben der Verteilung */
.wl-log-recs { flex: 1; display: flex; flex-direction: column; margin: 0; }
.wl-log-recs div { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.wl-log-recs div:first-child { border-top: 0; }
.wl-log-recs dt { font-size: 14px; color: var(--muted); }
.wl-log-recs dd { margin: 0; font-size: 14px; color: var(--muted); white-space: nowrap; }
.wl-log-recs dd b { font-size: 20px; color: var(--fg); font-variant-numeric: tabular-nums; margin-right: 2px; }
.wl-log-word { display: inline-flex; gap: 2px; }
.wl-log-word i {
  width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800;
  color: var(--on-correct); background: var(--correct); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
h2.wl-log-label { margin: 22px 0 8px; }
.wl-log-sizes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wl-log-size { display: grid; grid-template-columns: auto 1fr; align-items: baseline; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.wl-log-size b { font-size: 15px; }
.wl-log-size b span { font-size: 13px; font-weight: 500; color: var(--muted); }
.wl-log-size em { font-style: normal; font-weight: 800; font-size: 17px; text-align: right; color: var(--correct); font-variant-numeric: tabular-nums; }
.wl-log-size em.wl-is-zero { color: var(--muted); }
.wl-log-size small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; margin-top: 5px; }
.wl-log-size.wl-is-empty { opacity: .5; }
.wl-log-meter { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--surface-2); margin-top: 8px; overflow: hidden; }
.wl-log-meter i { display: block; height: 100%; background: var(--correct); }
/* Jede Zeile führt zum Spiel (Spielseite mit ?review=…) */
.wl-log-games { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.wl-log-game {
  display: grid; grid-template-columns: 50px 1fr auto auto 12px; gap: 14px; align-items: center; padding: 10px 16px;
  border-top: 1px solid var(--line); color: var(--fg); text-decoration: none; transition: background .15s;
}
.wl-log-game:first-child { border-top: 0; }
.wl-log-game:hover { background: var(--surface-2); }
.wl-log-game:hover .wl-log-chev { color: var(--accent-2); }
/* Immer Platz für 4 Reihen, kürzere Spiele stehen unten bündig: alle Zeilen gleich hoch */
.wl-log-mini { display: grid; gap: 2px; height: 34px; align-content: end; }
.wl-log-mini span { display: flex; gap: 2px; }
.wl-log-mini i { width: 7px; height: 7px; border-radius: 2px; background: var(--absent); }
.wl-log-mini i.wl-is-correct { background: var(--correct); }
.wl-log-mini i.wl-is-present { background: var(--present); }
.wl-log-mode { font-weight: 700; font-size: 15px; }
.wl-log-tag { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-2); margin-left: 6px; vertical-align: 2px; }
.wl-log-date { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.wl-log-res { font-weight: 800; font-size: 15px; min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.wl-log-res.wl-is-win { color: var(--correct); }
.wl-log-res.wl-is-lose { color: var(--danger); }
.wl-log-chev { color: var(--muted); font-size: 20px; line-height: 1; }
@media (max-width: 700px) {
  .wl-log-two { grid-template-columns: 1fr; }
  .wl-log-sizes { grid-template-columns: repeat(3, 1fr); }
  .wl-log-board { grid-template-columns: repeat(3, 1fr); }
  .wl-log-board > div:nth-child(4) { border-left: 0; }
  .wl-log-board > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .wl-log-board b { font-size: 24px; }
  .wl-log-game { grid-template-columns: 46px 1fr auto 12px; }
  .wl-log-date { display: none; }
}

.wl-stats-tooltip {
  position: fixed; pointer-events: none; z-index: 30;
  background: var(--fg); color: var(--bg); font-size: 13px; padding: 6px 10px; border-radius: 8px;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .1s; white-space: nowrap;
}
.wl-stats-tooltip.wl-is-visible { opacity: 1; }

@media (max-width: 500px) {
  .wl-logo { gap: 2px; }
  .wl-logo i { width: 19px; height: 19px; font-size: 11px; border-radius: 5px; }
  .wl-key { height: 46px; font-size: 15px; border-radius: 8px; }
  .wl-keyboard-row { gap: 4px; }
  .wl-statusbar span { font-size: 12px; padding: 3px 9px; }
  .wl-home-stats b { font-size: 20px; }
}

/* Große Bildschirme */
.wl-topbar, .wl-statusbar, .wl-modal, .wl-toast, .wl-page { zoom: var(--ui); }
/* Tastatur wächst weniger stark mit als der Rest */
:root { --kb: 1; }
@media (min-width: 2200px) and (min-height: 1200px) { :root { --kb: 1.08; } }
@media (min-width: 3200px) and (min-height: 1800px) { :root { --kb: 1.45; } }
.wl-keyboard { zoom: var(--kb); }
.wl-key, .wl-icon-btn, .wl-seg button { touch-action: manipulation; }

/* Zoom der Bretter */
.wl-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 2px !important; }
.wl-zoom button {
  width: 26px; height: 24px; border: 0; border-radius: 999px; background: transparent;
  color: var(--fg); font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.wl-zoom button:hover { background: var(--accent-soft); color: var(--accent-2); }
.wl-zoom button.wl-zoom-reset { width: auto; padding: 0 6px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }

/* Farbenblind-Auswahl */
.wl-setting-sub { padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.wl-setting-sub .wl-seg { margin-top: 0; flex-wrap: wrap; }
.wl-setting-sub p { margin-top: 8px !important; }

.wl-setting .wl-seg { flex: none; margin-top: 0; }

/* Quellenangabe */
.wl-credits { color: var(--muted); font-size: 12px; text-align: center; margin: 32px 0 0; line-height: 1.5; }
.wl-modal .wl-credits { margin-top: 16px; font-size: 12px; }
.wl-credits a { color: inherit; }

@media (max-width: 500px) {
  .wl-topbar { padding: 6px 8px; }
  .wl-topbar-side { gap: 0; }
  .wl-icon-btn { padding: 5px; }
  .wl-icon-btn svg { width: 22px; height: 22px; }
}

/* Impressum, Datenschutz, Fußzeile */
.wl-footer { text-align: center; font-size: 11px; color: var(--muted); padding: 0 0 6px; zoom: var(--ui); }
.wl-footer a, .wl-legal-links a { color: inherit; text-decoration: none; }
.wl-footer a:hover, .wl-legal-links a:hover { color: var(--accent-2); text-decoration: underline; }
.wl-legal-links { text-align: center; font-size: 13px; color: var(--muted); margin: 16px 0 0; }
.wl-legal h1 { font-size: 28px; margin: 8px 0 12px; }
.wl-legal .wl-lead { color: var(--muted); margin: 0 0 16px; line-height: 1.6; }
.wl-legal .wl-card { line-height: 1.6; }
.wl-legal .wl-card h2 { font-size: 17px; margin: 22px 0 6px; }
.wl-legal .wl-card h2:first-child { margin-top: 0; }
.wl-legal .wl-card p { margin: 0 0 10px; }
.wl-legal ul { padding-left: 20px; margin: 0 0 10px; }
.wl-legal a { color: var(--accent-2); }

@media (max-width: 500px) {
  .wl-setting:has(> .wl-seg) { flex-wrap: wrap; }
  .wl-setting .wl-seg { flex-wrap: wrap; max-width: 100%; }
  .wl-setting .wl-seg button { min-width: 0; padding: 6px 9px; font-size: 14px; }
}

/* Startseite */
.wl-home {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  padding: 24px 16px; gap: 22px; zoom: var(--ui);
}
.wl-home-hero { text-align: center; }
.wl-home-hero p { color: var(--muted); font-size: 17px; margin: 14px 0 0; }
.wl-home-logo { display: flex; justify-content: center; gap: 5px; padding-bottom: 12px; }
.wl-home-logo i {
  font-style: normal; font-weight: 800; color: #fff; font-size: 26px;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px;
  background: var(--accent); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18);
  animation: tumble .6s cubic-bezier(.3, 1.4, .5, 1) both;
}
.wl-home-logo i:nth-child(n+5) { transform: translateY(calc((var(--n) - 4) * 2px)); }
.wl-home-logo i:nth-child(1) { animation-delay: 0s; } .wl-home-logo i:nth-child(2) { animation-delay: .04s; }
.wl-home-logo i:nth-child(3) { animation-delay: .08s; background: #d9a12a; } .wl-home-logo i:nth-child(4) { animation-delay: .12s; }
.wl-home-logo i:nth-child(5) { --n: 5; animation-delay: .16s; } .wl-home-logo i:nth-child(6) { --n: 6; animation-delay: .2s; background: #26a965; }
.wl-home-logo i:nth-child(7) { --n: 7; animation-delay: .24s; } .wl-home-logo i:nth-child(8) { --n: 8; animation-delay: .28s; }
.wl-home-logo i:nth-child(9) { --n: 9; animation-delay: .32s; background: #d9a12a; } .wl-home-logo i:nth-child(10) { --n: 10; animation-delay: .36s; }
@keyframes tumble { from { opacity: 0; translate: 0 -40px; rotate: -12deg; } }

.wl-home-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 16px; width: 100%; justify-content: center; }
.wl-home-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 24px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow);
}
.wl-home-card h2 { margin: 4px 0 0; font-size: 22px; }
.wl-home-card p { margin: 0 0 6px; color: var(--muted); line-height: 1.5; flex: 1; }
.wl-home-card .wl-btn-primary.wl-btn-big { margin: 0; }
.wl-home-icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-2);
}
.wl-home-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wl-btn-secondary.wl-btn-wide { width: 100%; padding: 12px; }
.wl-watch-form { display: flex; flex-direction: column; gap: 10px; }
.wl-watch-form input {
  width: 100%; padding: 14px; border-radius: 12px; border: 2px solid var(--line);
  background: var(--surface-2); color: var(--fg); font: inherit; font-size: 26px; font-weight: 800;
  text-transform: uppercase; text-align: center; letter-spacing: .3em;
}
.wl-watch-form input::placeholder { color: var(--muted); opacity: .5; }
.wl-watch-form input:focus { outline: none; border-color: var(--accent-2); }
body.wl-is-home #boards, body.wl-is-home #keyboard, body.wl-is-home #statusbar { display: none !important; }

@media (max-width: 720px) {
  .wl-home { justify-content: flex-start; gap: 20px; }
  .wl-home-cards { grid-template-columns: minmax(0, 420px); }
  .wl-home-logo { gap: 3px; }
  .wl-home-logo i { width: 28px; height: 28px; font-size: 16px; border-radius: 7px; }
  .wl-home-card { padding: 18px; }
}

body.wl-is-home .wl-topbar .wl-logo { visibility: hidden; }

/* Tagesrätsel-Karte */
.wl-daily {
  width: 100%; max-width: 696px; position: relative; overflow: hidden;
  border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 12px;
  /* dunkel in beiden Themes, damit die Ampelfarben (rot, gelb, grün) klar lesbar sind */
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(96, 165, 250, .12), transparent 60%),
    linear-gradient(135deg, #1a2a52, #101b38);
  color: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.wl-daily-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.wl-daily-head h2 { margin: 6px 0 0; font-size: 26px; }
.wl-daily-badge {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255, 255, 255, .18); padding: 4px 10px; border-radius: 999px;
}
.wl-daily-countdown { text-align: right; }
.wl-daily-countdown small { display: block; font-size: 12px; opacity: .8; }
.wl-daily-countdown b { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.wl-home-cards { max-width: 696px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .wl-daily { padding: 18px; }
  .wl-daily-head h2 { font-size: 21px; }
  .wl-daily-countdown { text-align: left; }
  .wl-home-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Startseite nie zusammenquetschen, lieber scrollen */
.wl-home > * { flex-shrink: 0; }

/* Statusfarben Tagesrätsel, folgen dem Farbenblind-Modus (per Simulation geprüft) */
:root { --st-won: var(--correct); --st-lost: var(--danger); --st-play: var(--present); --on-st-won: #fff; --on-st-play: #fff; }
:root[data-cb="rg"] { --st-won: #f5793a; --st-lost: #1f2937; --st-play: #4fb3f6; --on-st-play: #0b1530; }
:root[data-cb="by"] { --st-won: #e5484d; --st-lost: #1f2937; --st-play: #2bc4c4; --on-st-play: #0b1530; }
:root[data-cb="mono"] { --st-won: #f2f4f8; --st-lost: #111111; --st-play: #8d939e; --on-st-won: #111; --on-st-play: #111; }

/* Tagesrätsel-Übersicht: ein Feld pro Rätsel */
.wl-daily-grid {
  display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 6px; align-items: center;
  background: rgba(0, 0, 0, .16); border-radius: 16px; padding: 12px;
}
.wl-daily-grid .wl-daily-grid-col, .wl-daily-grid .wl-daily-grid-rowhead { text-align: center; font-weight: 800; font-size: 17px; line-height: 1.1; }
.wl-daily-grid small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .03em; opacity: .7; }
.wl-daily-grid .wl-daily-grid-rowhead { padding-right: 6px; }
.wl-daily-grid .wl-daily-grid-cell {
  height: 44px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 20px; font-weight: 800;
  transition: transform .1s, background .15s;
}
.wl-daily-grid .wl-daily-grid-cell:active { transform: scale(.96); }
.wl-daily-grid .wl-daily-grid-cell.wl-is-won { background: var(--st-won); color: var(--on-st-won); }
.wl-daily-grid .wl-daily-grid-cell.wl-is-lost { background: var(--st-lost); color: #fff; }
.wl-daily-grid .wl-daily-grid-cell.wl-is-playing { background: var(--st-play); color: var(--on-st-play); }
.wl-daily-grid .wl-daily-grid-cell.wl-is-selected { box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0, 0, 0, .3); }
.wl-daily-action { display: flex; align-items: center; gap: 14px; }
.wl-daily-selection { flex: 1; display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.wl-daily-selection b { font-size: 16px; }
.wl-daily-selection span { font-size: 14px; opacity: .85; }
.wl-daily #daily-go {
  flex: none; padding: 12px 26px; font-size: 17px; border-radius: 12px;
  background: #fff; color: #1e40af; box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.wl-daily #daily-go.wl-is-done { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
@media (max-width: 500px) {
  .wl-daily-grid { gap: 4px; padding: 8px; }
  .wl-daily-grid .wl-daily-grid-cell { height: 38px; font-size: 17px; }
  .wl-daily-grid small { font-size: 9px; }
}


/* Startseite am PC: ohne Scrollbalken */
@media (min-width: 721px) {
  .wl-home { padding: 14px 16px; gap: 14px; }
  .wl-home-logo { padding-bottom: 8px; }
  .wl-home-logo i { width: 40px; height: 40px; font-size: 23px; }
  .wl-home-hero p { margin-top: 8px; font-size: 16px; }
  .wl-daily { padding: 18px 22px; gap: 10px; }
  .wl-daily-grid { padding: 10px; gap: 5px; }
  .wl-daily-grid .wl-daily-grid-cell { height: 38px; font-size: 18px; }
  /* Karten: Symbol neben der Überschrift statt darüber */
  .wl-home-card {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr;
    column-gap: 12px; row-gap: 8px; align-items: center; padding: 16px 20px;
  }
  .wl-home-card > :not(.wl-home-icon):not(h2) { grid-column: 1 / -1; }
  .wl-home-card h2 { margin: 0; font-size: 20px; }
  .wl-home-card p { margin: 0; align-self: start; }
  .wl-home-icon { width: 36px; height: 36px; border-radius: 10px; }
  .wl-home-icon svg { width: 20px; height: 20px; }
  .wl-home-card .wl-btn-primary.wl-btn-big { padding: 11px; font-size: 17px; }
  .wl-watch-form { flex-direction: row; }
  .wl-watch-form input { flex: 1; min-width: 0; padding: 8px; font-size: 20px; letter-spacing: .2em; }
  .wl-watch-form .wl-btn-primary.wl-btn-big { width: auto; padding: 11px 18px; }
}
/* Niedrige PC-Fenster (Laptops): noch kompakter */
@media (min-width: 721px) and (max-height: 820px) {
  .wl-home { padding: 10px 16px; gap: 10px; }
  .wl-home-hero p { display: none; }
  .wl-home-logo { padding-bottom: 4px; }
  .wl-home-logo i { width: 32px; height: 32px; font-size: 19px; }
  .wl-daily { padding: 14px 20px; gap: 8px; }
  .wl-daily-head h2 { font-size: 21px; }
  .wl-daily-grid .wl-daily-grid-cell { height: 32px; font-size: 16px; }
  .wl-home-card { padding: 12px 18px; }
  .wl-home-card p { font-size: 14px; }
}

/* So geht's */
.wl-howto h1 { font-size: 30px; margin: 8px 0 6px; }
.wl-howto .wl-lead { color: var(--muted); font-size: 17px; margin: 0 0 16px; line-height: 1.5; }
.wl-howto .wl-card { margin-bottom: 12px; line-height: 1.55; }
.wl-howto h2 { margin: 0 0 10px; font-size: 19px; }
.wl-howto h2 small { color: var(--muted); font-weight: 500; font-size: 14px; }
.wl-howto ul, .wl-howto ol { padding-left: 20px; margin: 0; }
.wl-howto li { margin-bottom: 6px; }
.wl-howto dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; }
.wl-howto dt { font-weight: 700; }
.wl-howto dd { margin: 0; color: var(--muted); }
.wl-howto .wl-is-hinted { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.wl-howto .wl-example { display: flex; align-items: center; gap: 14px; margin: 8px 0; }
.wl-howto .wl-example p { margin: 0; }
.wl-tile-row-demo { --tile: 38px; }
.wl-howto kbd { font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.wl-howto .wl-legal-links a { color: var(--accent-2); }
@media (max-width: 600px) {
  .wl-howto dl { grid-template-columns: 1fr; gap: 2px; }
  .wl-howto dd { margin-bottom: 8px; }
  .wl-howto .wl-example { flex-wrap: wrap; gap: 6px; }
  .wl-tile-row-demo { --tile: 32px; }
}

/* So geht's: Streamer-Kasten */
.wl-howto .wl-card.wl-howto-stream {
  border: 0; color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(167, 139, 250, .45), transparent 60%),
    linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 14px 34px rgba(91, 33, 182, .35);
}
.wl-howto .wl-howto-stream .wl-badge {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255, 255, 255, .2); padding: 4px 10px; border-radius: 999px; margin-bottom: 6px;
}
.wl-howto .wl-howto-stream h2 { font-size: 22px; }
.wl-howto .wl-howto-stream h3 { margin: 4px 0 6px; font-size: 16px; }
.wl-howto .wl-howto-stream li { color: rgba(255, 255, 255, .92); }
.wl-howto .wl-howto-stream kbd { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .35); color: #fff; }
.wl-howto-stream-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .wl-howto-stream-cols { grid-template-columns: 1fr; gap: 6px; } }

/* Twitch-Anmeldung */
.wl-twitch-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #9146ff; color: #fff; text-decoration: none; font-weight: 700;
  padding: 9px 16px; border-radius: 10px; box-shadow: 0 4px 14px rgba(145, 70, 255, .35);
  transition: filter .15s;
}
.wl-twitch-btn:hover { filter: brightness(1.1); }
.wl-twitch-btn svg { width: 18px; height: 18px; }
.wl-twitch-btn.wl-twitch-btn-small { padding: 8px 12px; flex: none; }
.wl-account { display: flex; align-items: center; margin-right: 4px; }
.wl-twitch-btn.wl-twitch-btn-header { padding: 6px 12px; font-size: 14px; border-radius: 9px; box-shadow: none; }
.wl-account-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 14px; cursor: pointer;
}
.wl-account-chip:hover { border-color: #9146ff; }
.wl-account-chip i {
  font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #9146ff; color: #fff; font-weight: 800; font-size: 13px;
}
.wl-account-chip b { color: var(--fg); }

/* Handy: Anmelden nur als Symbol, Name ausgeblendet, damit die Kopfzeile passt */
@media (max-width: 500px) {
  .wl-twitch-btn.wl-twitch-btn-header { padding: 6px; }
  .wl-twitch-btn.wl-twitch-btn-header span, .wl-account-chip b { display: none; }
  .wl-account-chip { padding: 2px; }
  .wl-account { margin-right: 2px; }
  .wl-logo i { width: 17px; height: 17px; font-size: 10px; border-radius: 4px; }
  .wl-topbar { grid-template-columns: auto 1fr auto; }
  .wl-topbar .wl-logo { justify-self: center; }
}

/* Sync */
.wl-sync h1 { font-size: 30px; margin: 8px 0 6px; }
.wl-sync .wl-lead { color: var(--muted); font-size: 17px; margin: 0 0 16px; }
.wl-sync .wl-card { margin-bottom: 12px; line-height: 1.55; }
.wl-sync h2 { margin: 0 0 10px; font-size: 19px; }
.wl-sync p { margin: 0 0 8px; }
.wl-sync .wl-is-hinted { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.wl-sync-steps { margin: 0; padding-left: 22px; }
.wl-sync-steps li { margin-bottom: 6px; }
.wl-sync-code {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); border-radius: 12px;
  padding: 10px 14px; font: 700 15px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; cursor: pointer;
}
.wl-sync-code.wl-btn-big { width: 100%; font-size: 22px; padding: 16px; }
.wl-sync-code:hover { border-color: var(--accent-2); }
.wl-sync-transfer { display: flex; gap: 8px; }
.wl-sync-transfer input {
  flex: 1; min-width: 0; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--fg); font: 600 16px ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .05em;
}
.wl-sync-transfer input:focus { outline: 2px solid var(--accent); }
.wl-sync-transfer-warn { border-color: color-mix(in srgb, var(--present) 45%, var(--line)) !important; background: color-mix(in srgb, var(--present) 9%, var(--surface)) !important; }
.wl-sync .wl-legal-links a { color: var(--accent-2); }
@media (max-width: 500px) {
  .wl-sync-code.wl-btn-big { font-size: 16px; padding: 14px 8px; }
  .wl-sync-transfer { flex-direction: column; }
}

.wl-sync-hero {
  border-radius: 20px; padding: 24px; margin-bottom: 14px; color: #fff;
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(96, 165, 250, .4), transparent 60%),
    linear-gradient(135deg, var(--accent), #1e40af);
  box-shadow: 0 14px 34px rgba(37, 99, 235, .3);
}
.wl-sync-hero .wl-badge {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255, 255, 255, .2); padding: 4px 10px; border-radius: 999px;
}
.wl-sync-hero h1 { color: #fff; font-size: 28px; margin: 10px 0 8px; line-height: 1.2; }
.wl-sync-hero p { color: rgba(255, 255, 255, .9); margin: 0 0 10px; line-height: 1.5; }
.wl-sync-hero .wl-sync-hero-rule { margin: 4px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .2); font-weight: 700; color: #fff; }
@media (max-width: 500px) { .wl-sync-hero { padding: 18px; } .wl-sync-hero h1 { font-size: 22px; } }

/* Warnhinweise: Strichfarbe folgt dem Farbenblind-Modus */
:root { --risk: #ef4444; }
:root[data-cb="rg"] { --risk: #2477c9; }
:root[data-theme="dark"][data-cb="rg"] { --risk: #4fb3f6; }
:root[data-cb="by"] { --risk: #d93a49; }
:root[data-cb="mono"] { --risk: currentColor; }
mark.wl-sync-risk {
  background: none; color: inherit; font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--risk);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
:root[data-cb="mono"] mark.wl-sync-risk { text-decoration-style: double; }

.wl-sync-ack {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line); font-weight: 600; cursor: pointer;
}
.wl-sync-ack input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.wl-sync-code:disabled { opacity: .45; cursor: not-allowed; }

.wl-icon-btn.wl-is-active { background: var(--accent-soft); color: var(--accent-2); }

/* Hell/Dunkel-Schalter: im Hellen der Mond, im Dunkeln die Sonne */
.wl-theme-toggle .wl-theme-toggle-sun { display: none; }
:root[data-theme="dark"] .wl-theme-toggle .wl-theme-toggle-sun { display: block; }
:root[data-theme="dark"] .wl-theme-toggle .wl-theme-toggle-moon { display: none; }
@media (max-width: 500px) {
  .wl-topbar .wl-icon-btn { padding: 4px; }
  .wl-topbar .wl-icon-btn svg { width: 20px; height: 20px; }
  .wl-logo i { width: 15px; height: 15px; font-size: 9px; border-radius: 4px; }
}

/* Zuschauer: Streamer ist weg */
.wl-away .wl-modal-body { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.wl-away .wl-away-lead { font-size: 16px !important; color: var(--fg) !important; line-height: 1.5; margin: 4px 0 8px !important; }
.wl-away .wl-btn-primary.wl-btn-big { margin: 0; }
.wl-twitch-btn-wide { width: 100%; padding: 12px; }
.wl-away .wl-twitch-btn svg { display: none; }
.wl-away .wl-away-tip { font-size: 13px !important; margin-top: 4px !important; }
.wl-btn-link { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 4px; font-size: 14px; }
.wl-btn-link:hover { color: var(--fg); }

.wl-key.wl-key-flip span { display: inline-block; transform: scaleX(-1); }

/* Chat-Vorschläge */
.wl-chat-pill { display: inline-flex; align-items: center; gap: 6px; }
.wl-chat-pill .wl-badge { background: #9146ff; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.wl-chat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.wl-chat-dot.wl-is-on { background: var(--correct); }
.wl-chat-dot.wl-is-waiting { background: var(--present); }
.wl-chat-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; margin: 12px 0 0 !important; }
.wl-input {
  width: 100%; margin: 6px 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--fg); font: 600 16px ui-monospace, Consolas, monospace;
}
.wl-input:focus { outline: 2px solid var(--accent); }
.wl-suggest .wl-modal-body { min-width: min(520px, 80vw); }
.wl-suggest-board { margin-top: 14px; }
.wl-suggest-board h3 { margin-bottom: 8px !important; }
.wl-suggest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-suggest-chip {
  display: grid; grid-template-columns: auto auto; gap: 2px 10px; align-items: baseline; text-align: left;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); border-radius: 12px; padding: 8px 12px;
}
.wl-suggest-chip:hover { border-color: var(--accent-2); }
.wl-suggest-chip b { font-size: 17px; letter-spacing: .06em; }
.wl-suggest-chip .wl-suggest-chip-votes { color: var(--accent-2); font-weight: 800; }
.wl-suggest-chip small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.wl-suggest-chips-empty { color: var(--muted); margin-top: 12px !important; }

/* Glühbirne am Brett */
.wl-board { position: relative; }
.wl-board-label { display: flex; align-items: center; justify-content: center; gap: calc(var(--tile) * .15); }
.wl-bulb {
  display: inline-flex; align-items: center; gap: 1px; padding: 2px 3px; border: 0; border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer; opacity: .75;
  font-family: inherit; font-weight: 600; font-size: clamp(14px, calc(var(--tile) * .3), 20px); line-height: 1;
  transition: opacity .15s, color .15s;
}
.wl-bulb:hover { opacity: 1; color: var(--fg); }
.wl-bulb svg {
  width: clamp(16px, calc(var(--tile) * .36), 24px); height: clamp(16px, calc(var(--tile) * .36), 24px);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.wl-bulb .wl-bulb-count { font-size: 1em; }
/* Neue Vorschläge: Birne wird gelb und leuchtet sanft */
.wl-bulb.wl-is-new { opacity: 1; color: var(--present); animation: bulb-glow 2.4s ease-in-out infinite; }
.wl-bulb.wl-is-new svg { fill: color-mix(in srgb, var(--present) 35%, transparent); }
@keyframes bulb-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--present) 70%, transparent)); } }
.wl-bulb-popup {
  position: fixed; z-index: 15; width: min(320px, calc(100vw - 16px)); padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  animation: modal-in .15s ease-out;
}
.wl-bulb-popup-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.wl-bulb-popup-head span { color: var(--muted); font-size: 13px; }
.wl-bulb-popup .wl-suggest-chip { padding: 6px 40px 6px 10px; }
.wl-bulb-popup .wl-suggest-chip b { font-size: 15px; }

/* Worttipps neben der Tastatur, auf schmalen Bildschirmen über der rechten Ecke */
.wl-bulb.wl-bulb-general {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  opacity: 1; padding: 6px 12px; gap: 6px; border-radius: 999px; font-size: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.wl-bulb.wl-bulb-general svg { width: 16px; height: 16px; }
.wl-bulb.wl-bulb-general .wl-bulb-label { font-weight: 600; }
.wl-bulb.wl-bulb-general .wl-bulb-count::before { content: "· "; }
.wl-bulb.wl-bulb-general:hover { color: var(--fg); }
@media (max-width: 760px) {
  .wl-bulb.wl-bulb-general { left: auto; right: 8px; top: auto; bottom: calc(100% + 4px); transform: none; padding: 4px 10px; font-size: 13px; }
}

/* Vorschläge-Fenster */
.wl-suggest-help { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; color: var(--muted); font-size: 14px; }
.wl-suggest-help code { margin-right: 4px; }
.wl-suggest-empty {
  margin-top: 16px !important; padding: 18px 16px; border-radius: 12px; text-align: center;
  background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--muted); font-size: 14px;
}
.wl-suggest-actions { justify-content: flex-end; margin-top: 18px; }

/* Glühbirnen am Rand für Bretter außerhalb des Bildes */
.wl-bulbs {
  position: fixed; z-index: 14; transform: translateX(-50%); display: flex; gap: 6px;
  max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; pointer-events: none;
}
.wl-bulbs .wl-bulb {
  pointer-events: auto; opacity: 1; padding: 4px 10px; border-radius: 999px; gap: 4px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); font-size: 13px;
}
.wl-bulbs .wl-bulb svg { width: 15px; height: 15px; }
.wl-bulbs .wl-bulb:hover { color: var(--fg); }
.wl-bulbs.wl-is-aside { transform: none; flex-direction: column; align-items: flex-start; }

/* Chat-Befehle in den Streamer-Einstellungen */
.wl-cmd-examples { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.wl-cmd-examples span { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.wl-cmd {
  display: inline-block; min-width: 110px; padding: 4px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--fg); font-family: ui-monospace, Consolas, monospace; font-size: 14px; font-weight: 700; white-space: pre;
}
.wl-cmd.wl-cmd-inline { min-width: 0; padding: 1px 6px; font-size: 13px; }

/* Animationen aus */
.wl-no-motion *, .wl-no-motion *::before, .wl-no-motion *::after {
  /* nur auf 0s setzen statt entfernen, sonst laufen beim Wiedereinschalten alle Animationen neu ab */
  animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: 0s !important; transition-delay: 0s !important;
}

/* Ab Tablet quer: Impressum und Datenschutz unten rechts statt unter der Tastatur */
@media (min-width: 900px) {
  .wl-footer { position: fixed; right: 14px; bottom: 8px; padding: 0; z-index: 5; }
}

/* × zum Löschen eines Vorschlags */
.wl-suggest-chip { position: relative; padding-right: 42px; }
.wl-suggest-chip-del {
  position: absolute; top: 6px; bottom: 6px; right: 6px; width: 26px;
  display: grid; place-items: center; font-size: 18px; line-height: 1; color: var(--muted); opacity: .75;
  border-left: 1px solid var(--line); border-radius: 0 7px 7px 0;
}
.wl-suggest-chip-del:hover { opacity: 1; color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* Hilfe-Modus: bekannte Buchstaben blass in der Eingabezeile */
.wl-tile.wl-is-hinted { color: var(--correct); opacity: .5; border-color: color-mix(in srgb, var(--correct) 55%, transparent); border-style: dashed; }

/* Heller Modus: kräftiger statt ausgeblichen */
:root:not([data-theme="dark"]) .wl-boards-multi .wl-board { background: var(--surface); box-shadow: 0 2px 10px rgba(15, 31, 61, .06); }
:root:not([data-theme="dark"]) .wl-board.wl-is-solved { opacity: .82; background: color-mix(in srgb, var(--correct) 6%, var(--surface)); }
:root:not([data-theme="dark"]) .wl-key.wl-is-dead { opacity: .5; }

/* Gelöste Bretter: Kacheln unscharf unter grüner Fläche, die Nummer bleibt lesbar.
   Klick schaltet weich um (.wl-is-peek), nach Spielende ist alles scharf. */
.wl-board.wl-is-solved, :root:not([data-theme="dark"]) .wl-board.wl-is-solved { opacity: 1; }
.wl-board.wl-is-solved .wl-tile-row { filter: blur(calc(var(--tile) * .22 + 4px)); opacity: .35; transition: filter 1.2s ease, opacity 1.2s ease; }
.wl-board.wl-is-solved.wl-is-peek .wl-tile-row { transition-duration: .5s; }
.wl-board.wl-is-solved::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--correct) 22%, transparent); transition: opacity .8s ease;
}
.wl-board.wl-is-solved .wl-board-label { position: relative; z-index: 1; }
.wl-board.wl-is-solved { cursor: pointer; }
.wl-board.wl-is-solved.wl-is-peek .wl-tile-row, #boards.wl-is-over .wl-board.wl-is-solved .wl-tile-row { filter: none; opacity: 1; }
.wl-board.wl-is-solved.wl-is-peek::after, #boards.wl-is-over .wl-board.wl-is-solved::after { opacity: 0; }

/* Schreibmarke nach Klick auf ein Feld der aktuellen Zeile */
.wl-tile.wl-is-cursor { border-color: var(--accent-2); box-shadow: 0 0 0 2px var(--accent-soft); }
/* Brett mit der markierten Box, auch bei Zuschauern */
.wl-board.wl-is-focused, .wl-boards-multi .wl-board.wl-is-focused { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Auge als Eckfahne oben rechts: hier wird gerade getippt. Liegt auf dem Rahmen, Ecke rund wie das Brett */
.wl-board.wl-is-focused::before {
  content: ""; position: absolute; top: -2px; right: -2px;
  width: max(26px, calc(var(--tile) * .68)); height: max(19px, calc(var(--tile) * .5));
  border-radius: 0 calc(var(--tile) * (.16 + var(--pad-f, .25)) + 2px) 0 max(8px, calc(var(--tile) * .2));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / auto 62% no-repeat, var(--accent-2);
  transform-origin: top right;
  animation: eye-in .25s ease-out;
}
@keyframes eye-in { from { opacity: 0; transform: scale(.6); } }
/* auf den anderen Brettern die Box nur halb so deutlich */
.wl-has-focus .wl-board:not(.wl-is-focused) .wl-tile.wl-is-cursor { border-color: color-mix(in srgb, var(--accent-2) 50%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-soft) 50%, transparent); }

/* Zuschauer: Streamername verlinkt auf Twitch */
.wl-statusbar .wl-statusbar-live a { color: inherit; text-decoration: none; }
.wl-statusbar .wl-statusbar-live a:hover b { color: #a970ff; text-decoration: underline; }


/* Streamer ist zurück: Balken oben. Nach eigenem Spiel bleibt er bis zum Klick, beim Zuschauen 10 Sekunden */
.wl-host-back {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 16;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; max-width: calc(100vw - 16px);
  background: var(--surface); border: 1px solid var(--correct); border-radius: 14px; box-shadow: var(--shadow);
  font-weight: 700; animation: modal-in .2s ease-out, host-back-pulse 1.6s ease-in-out .2s infinite;
}
@keyframes host-back-pulse { 50% { box-shadow: var(--shadow), 0 0 0 4px color-mix(in srgb, var(--correct) 35%, transparent), 0 0 24px color-mix(in srgb, var(--correct) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .wl-host-back { animation: none; } }
.wl-host-back i { width: 10px; height: 10px; border-radius: 50%; background: var(--correct); flex: none; animation: live 1.4s infinite; }
.wl-host-back .wl-btn-primary { padding: 8px 14px; font-size: 14px; white-space: nowrap; }
.wl-host-back .wl-btn-close { position: static; width: 32px; height: 32px; flex: none; font-size: 22px; cursor: pointer; }
.wl-host-back .wl-btn-close:hover { color: var(--fg); }
@media (max-width: 520px) { .wl-host-back { flex-wrap: wrap; justify-content: center; text-align: center; } }
#btn-reset-code { margin-top: 12px; }
#btn-reset-code.wl-is-confirming { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }

/* Streamer-Einstellungen */
.wl-setting-head {
  margin: 18px 0 2px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2);
}
/* am PC breiter, weniger Scrollen. Feste Höhe, damit der Dialog beim Reiterwechsel nicht springt */
#dlg-settings { width: min(720px, calc((100vw - 32px) / var(--ui))); height: min(820px, calc((100dvh - 32px) / var(--ui))); }
.wl-modal-head-tabs { flex-wrap: wrap; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.wl-modal-head-tabs h2 { flex-basis: 100%; text-align: center; }
.wl-tabs { margin: 0; }
.wl-tabs button { min-width: 0; padding: 7px 18px; font-size: 15px; }
.wl-tabs button[hidden] { display: none; }
.wl-tab-note { margin: 4px 0 2px !important; font-size: 13px !important; }
.wl-setting .wl-zoom-pill { flex: none; }
.wl-tab-login { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 440px; margin: 28px auto; text-align: center; }
.wl-tab-login h3 { font-size: 20px; }
.wl-tab-login small { color: var(--muted); font-size: 13px; }

/* Scrollbalken */
:root { --scroll-thumb: color-mix(in srgb, var(--muted) 45%, transparent); --scroll-thumb-hover: var(--accent-2); }
/* Chrome nimmt sonst scrollbar-color, zeigt Pfeile und ignoriert die Regeln darunter. Firefox kennt nur diese */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); border-width: 2px; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
/* im Popup nicht bis in die runden Ecken */
.wl-modal::-webkit-scrollbar-track { margin: 14px 0; }
.wl-setting-head.wl-setting-head-first { margin-top: 4px; }
.wl-setting .wl-chat-status { margin-top: 6px !important; font-size: 13px; }

/* Sync-Seite: Sicherheitshinweis */
.wl-sync-note {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px 18px; border-radius: 14px;
  background: color-mix(in srgb, var(--correct) 10%, transparent); border: 1px solid color-mix(in srgb, var(--correct) 35%, transparent);
}
.wl-sync-note svg { flex: none; width: 28px; height: 28px; fill: none; stroke: var(--correct); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.wl-sync-note h3 { margin: 0 0 4px; font-size: 16px; }
.wl-sync-note p { margin: 0; line-height: 1.6; }

/* Startseite: Aufmacher mit Vorschau, dann Spielen, So geht's und Twitch */
.wl-home-grid {
  position: relative; width: 100%; max-width: 1200px; display: grid; gap: 28px 40px; align-items: start;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "hero hero hero hero hero hero hero demo demo demo demo demo"
    "main main main main main main cards cards cards cards cards cards"
    "main main main main main main sync sync sync sync sync sync"
    "steps steps steps steps steps steps steps steps steps steps steps steps"
    "pitch pitch pitch pitch pitch pitch pitch pitch pitch pitch pitch pitch";
}
.wl-home-hero { grid-area: hero; text-align: left; align-self: center; }
.wl-home-demo { grid-area: demo; align-self: center; }
.wl-home-main { grid-area: main; display: flex; flex-direction: column; gap: 16px; }
.wl-home-cards { grid-area: cards; }
.wl-sync-hint { grid-area: sync; }
.wl-home-steps { grid-area: steps; margin-top: 28px; }
.wl-pitch { grid-area: pitch; }
.wl-home-hero, .wl-home-demo, .wl-home-main, .wl-home-cards, .wl-sync-hint, .wl-home-steps, .wl-pitch { position: relative; z-index: 1; }
.wl-home-hero .wl-home-logo { justify-content: flex-start; }
.wl-home-hero h1 { margin: 6px 0 0; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; }
.wl-home-hero h1 span { color: var(--accent-2); }
.wl-home-hero h1 em {
  font-style: normal; text-decoration: underline; text-decoration-color: var(--present);
  text-decoration-thickness: .14em; text-underline-offset: .14em; text-decoration-skip-ink: none;
}
.wl-home-hero p { font-size: 18px; line-height: 1.5; max-width: 34em; }
.wl-home-main .wl-daily, .wl-home-cards { max-width: none; }
.wl-home-cards .wl-home-card { padding: 20px; }

.wl-pitch {
  position: relative; overflow: hidden; border-radius: 22px; padding: 22px 24px;
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, rgba(145, 70, 255, .28), transparent 60%),
    var(--surface);
  border: 1px solid color-mix(in srgb, #9146ff 45%, var(--line)); box-shadow: var(--shadow);
}
.wl-pitch-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: #9146ff; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.wl-pitch-badge svg { width: 14px; height: 14px; fill: currentColor; }
.wl-pitch h2 { margin: 10px 0 12px; font-size: 26px; }
.wl-pitch-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.wl-pitch-list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; color: var(--muted); }
.wl-pitch-list b { color: var(--fg); }
.wl-pitch-list code { font-size: .95em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; color: var(--fg); }
.wl-pitch-list i {
  flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, #9146ff 18%, transparent); color: #b48cff;
}
.wl-pitch-list i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl-pitch-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.wl-pitch-cta:empty { display: none; }
.wl-pitch-cta small { color: var(--muted); font-size: 13px; flex: 1 1 220px; }
.wl-pitch-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 0; border-radius: 12px; cursor: pointer;
  background: #9146ff; color: #fff; font: inherit; font-weight: 800; font-size: 16px; text-decoration: none;
  box-shadow: 0 8px 24px rgba(145, 70, 255, .35); transition: filter .15s, transform .1s;
}
.wl-pitch-btn:hover { filter: brightness(1.1); }
.wl-pitch-btn:active { transform: translateY(1px); }
.wl-pitch-btn svg { width: 18px; height: 18px; fill: currentColor; }
:root:not([data-theme="dark"]) .wl-pitch-list i { color: #7c3aed; }

/* Tablet und Handy: alles untereinander, Tagesrätsel weit oben */
@media (max-width: 1060px) {
  .wl-home-grid { grid-template-columns: minmax(0, 680px); justify-content: center; grid-template-areas: "hero" "main" "cards" "sync" "demo" "steps" "pitch"; gap: 24px; }
  .wl-home-demo { justify-self: center; }
  .wl-home-hero { padding-right: 0; }
  .wl-home-hero { text-align: center; }
  .wl-home-hero .wl-home-logo { justify-content: center; }
  .wl-home-hero p { margin-left: auto; margin-right: auto; }
}
@media (max-width: 720px) {
  .wl-home-hero h1 { font-size: 28px; }
  .wl-home-hero p { font-size: 16px; }
  .wl-pitch { padding: 18px; }
  .wl-pitch h2 { font-size: 22px; }
  .wl-pitch-btn { width: 100%; justify-content: center; }
}

/* Tagesrätsel: klassisch groß vorne, weitere Varianten aufklappbar */
.wl-daily-classic {
  display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: 16px;
  background: rgba(0, 0, 0, .16);
}
.wl-classic-tiles { display: flex; gap: 5px; flex: none; }
.wl-classic-tiles i {
  width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
  font-style: normal; font-weight: 800; font-size: 18px; color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
}
.wl-classic-tiles i.wl-is-won { background: var(--st-won); }
.wl-classic-tiles i.wl-is-lost { background: var(--st-lost); }
/* Spielstand als Mini-Raster */
.wl-classic-tiles-mini { flex-direction: column; gap: 3px; padding: 0 4px; }
.wl-classic-tiles-mini span { display: flex; gap: 3px; }
.wl-classic-tiles-mini i { width: 13px; height: 13px; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.wl-classic-tiles-mini i.wl-is-correct { background: var(--correct); box-shadow: none; }
.wl-classic-tiles-mini i.wl-is-present { background: var(--present); box-shadow: none; }
.wl-classic-tiles-mini i.wl-is-absent { background: rgba(0, 0, 0, .28); box-shadow: none; }
.wl-classic-actions { flex: none; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.wl-daily .wl-classic-share {
  padding: 9px 18px; font-size: 15px; font-weight: 800; border-radius: 12px;
  background: #fff; color: var(--accent); border: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); cursor: pointer;
}
.wl-classic-info { flex: 1; display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.wl-classic-info b { font-size: 20px; }
.wl-classic-info span { font-size: 14px; opacity: .85; }
.wl-classic-info .wl-classic-status { font-weight: 700; opacity: 1; margin-top: 2px; }
.wl-daily #classic-go {
  flex: none; padding: 14px 30px; font-size: 18px; border-radius: 12px;
  background: #fff; color: var(--accent); font-weight: 800; box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.wl-daily #classic-go.wl-is-done { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.wl-daily-more summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; padding: 4px 2px; user-select: none;
}
.wl-daily-more summary::-webkit-details-marker { display: none; }
.wl-daily-more summary::before { content: "▸"; transition: transform .2s; display: inline-block; }
.wl-daily-more[open] summary::before { transform: rotate(90deg); }
.wl-daily-more summary span { margin-left: auto; font-weight: 600; font-size: 13px; opacity: .8; }
.wl-daily-more[open] summary { margin-bottom: 10px; }
/* holdCardsHeight misst kurz die zugeklappte Höhe */
.wl-daily-more.wl-is-measuring > :not(summary) { display: none !important; }
.wl-daily-more.wl-is-measuring summary { margin-bottom: 0; }
/* Ampel auf der Tageskarte: rot offen, gelb angefangen, grün fertig. Klassisch immer, weitere Tageswörter wenn zugeklappt */
.wl-daily-classic.wl-is-open { background: color-mix(in srgb, var(--danger) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--danger); }
.wl-daily-classic.wl-is-done { background: color-mix(in srgb, var(--st-won) 20%, transparent); box-shadow: inset 0 0 0 1.5px var(--st-won); }
.wl-daily-classic.wl-is-started { background: color-mix(in srgb, var(--st-play) 20%, transparent); box-shadow: inset 0 0 0 1.5px var(--st-play); }
.wl-daily-more.wl-is-next:is(:not([open]), .wl-is-measuring) summary {
  padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 20%, transparent); box-shadow: 0 0 0 1.5px var(--danger);
  animation: daily-next 2.4s ease-in-out infinite;
}
.wl-daily-more.wl-is-next:is(:not([open]), .wl-is-measuring) summary:hover { background: color-mix(in srgb, var(--danger) 30%, transparent); }
.wl-daily-more.wl-is-started:is(:not([open]), .wl-is-measuring) summary { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--st-play) 20%, transparent); box-shadow: 0 0 0 1.5px var(--st-play); }
.wl-daily-more.wl-is-complete:is(:not([open]), .wl-is-measuring) summary { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--st-won) 20%, transparent); box-shadow: 0 0 0 1.5px var(--st-won); }
@keyframes daily-next { 50% { box-shadow: 0 0 0 1.5px var(--danger), 0 0 20px color-mix(in srgb, var(--danger) 45%, transparent); } }
.wl-no-motion .wl-daily-more.wl-is-next summary { animation: none; }
.wl-daily-more .wl-daily-action { margin-top: 12px; }
@media (max-width: 560px) {
  .wl-daily-classic { flex-wrap: wrap; gap: 12px; }
  .wl-classic-info { flex: 1 1 100%; }
  .wl-classic-tiles i { width: 32px; height: 32px; font-size: 15px; }
  .wl-daily #classic-go { width: 100%; }
  .wl-classic-actions { width: 100%; }
  .wl-classic-tiles-mini i { width: 12px; height: 12px; }
}
.wl-pitch-list li { align-items: center; font-size: 16px; }

/* Rundgang für Streamer */
.wl-tour { position: fixed; inset: 0; z-index: 30; }
.wl-tour-hole {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(4, 9, 22, .72), 0 0 0 2px var(--accent-2), 0 0 24px 4px rgba(96, 165, 250, .55);
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease;
}
.wl-tour.wl-is-centered .wl-tour-hole { left: 50%; top: 50%; width: 0; height: 0; box-shadow: 0 0 0 9999px rgba(4, 9, 22, .72); }
.wl-tour-bubble {
  position: fixed; width: min(340px, calc(100vw - 16px)); padding: 18px 18px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--accent-2); box-shadow: var(--shadow); color: var(--fg);
  transition: left .3s ease, top .3s ease; animation: modal-in .2s ease-out;
}
.wl-tour.wl-is-centered .wl-tour-bubble { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.wl-tour-bubble h3 { margin: 2px 0 6px; font-size: 18px; }
.wl-tour-bubble p { margin: 0 0 14px; color: var(--muted); line-height: 1.5; }
.wl-tour-step { color: var(--accent-2); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.wl-tour-close { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.wl-tour-close:hover { color: var(--fg); }
.wl-tour-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wl-tour.wl-is-centered .wl-tour-nav { justify-content: center; }
.wl-tour-nav .wl-btn-primary { padding: 9px 18px; }
.wl-tour-nav .wl-btn-secondary { padding: 9px 16px; }

/* So geht's: Rundgang zurücksetzen */
.wl-tour-reset { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.wl-tour-reset span { color: var(--muted); font-size: 14px; flex: 1 1 220px; }
.wl-howto code { font-size: .92em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.wl-howto-stream code { background: rgba(0, 0, 0, .28); color: #fff; }
/* Streamer-Kasten */
.wl-howto-stream .wl-tour-reset { border-top-color: rgba(255, 255, 255, .25); }
.wl-howto-stream .wl-tour-reset span { color: rgba(255, 255, 255, .9); flex: 1 1 260px; }
.wl-tour-reset-btn {
  border: 0; border-radius: 12px; padding: 11px 18px; cursor: pointer; font: inherit; font-weight: 800;
  background: #fff; color: #4c1d95; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); transition: background .15s, transform .1s;
}
.wl-tour-reset-btn:hover { background: #ede9fe; }
.wl-tour-reset-btn:active { transform: translateY(1px); }
.wl-tour-reset-btn.wl-is-done { background: var(--correct); color: var(--on-correct); }
/* Farbenblind-Auswahl gehört zum Schalter darüber: keine Trennlinie */
.wl-setting:has(+ .wl-setting-sub:not([hidden])) { border-bottom: 0; padding-bottom: 6px; }
/* Schnelles An/Aus soll keinen Text markieren */
button, .wl-switch, .wl-seg, .wl-modal .wl-setting, .wl-modal .wl-setting-sub, .wl-modal .wl-setting-head { -webkit-user-select: none; user-select: none; }
.wl-modal input, .wl-modal textarea, .wl-modal .wl-cmd, .wl-modal code { -webkit-user-select: text; user-select: text; }
.wl-daily-grid .wl-daily-grid-cell.wl-is-classic { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.wl-daily-grid .wl-daily-grid-cell.wl-is-classic:has(small) { font-size: 16px; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.wl-daily-grid .wl-daily-grid-cell.wl-is-classic small { font-size: 10px; opacity: 1; letter-spacing: .02em; }

/* Startseite: Hinweis auf Sync */
.wl-sync-hint {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; text-decoration: none;
  background: var(--surface); border: 1px dashed color-mix(in srgb, var(--accent-2) 50%, var(--line)); color: var(--muted);
  transition: border-color .15s, background .15s;
}
.wl-sync-hint:hover { border-style: solid; border-color: var(--accent-2); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.wl-sync-hint i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); }
.wl-sync-hint i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl-sync-hint span { flex: 1; font-size: 14px; line-height: 1.4; }
.wl-sync-hint b { color: var(--fg); }
.wl-sync-hint em { font-style: normal; font-weight: 800; color: var(--accent-2); white-space: nowrap; }

/* Startseite oben verankert (Abstand setzt placeHome), so wächst Aufklappen nur nach unten */
.wl-home { justify-content: flex-start; }
@media (min-width: 1061px) {
  .wl-home-grid { grid-template-rows: auto auto 1fr auto auto; } /* Aufklappen verlängert nur die Zeile unter dem Sync-Hinweis */
  .wl-home-main { align-self: stretch; }
  .wl-home-main .wl-daily { flex: 1; justify-content: space-between; } /* zugeklappt gleich hoch wie die rechte Spalte */
  .wl-home-grid:has(> .wl-sync-hint[hidden]):not(:has(#daily-more[open]:not(.wl-is-measuring))) .wl-home-cards { grid-row: 2 / span 2; align-self: start; height: 100%; }
  .wl-sync-hint { align-self: start; }
}

/* Lawine im Hintergrund: einzelne Kacheln rieseln langsam herab */
.wl-home-fall { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.wl-home-fall i {
  position: absolute; top: -70px; left: var(--x); width: var(--s); height: var(--s); border-radius: calc(var(--s) * .22);
  display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: calc(var(--s) * .55); color: #fff;
  background: var(--c, #3b82f6); opacity: .16; animation: fall var(--d) linear var(--w) infinite both;
}
@keyframes fall { from { transform: translateY(0) rotate(-14deg); } to { transform: translateY(calc(100vh + 140px)) rotate(18deg); } }
.wl-home-fall i:nth-child(1) { --x: 4%; --s: 34px; --d: 26s; --w: -3s; }
.wl-home-fall i:nth-child(2) { --x: 14%; --s: 26px; --d: 31s; --w: -17s; --c: #d9a12a; }
.wl-home-fall i:nth-child(3) { --x: 23%; --s: 40px; --d: 24s; --w: -9s; }
.wl-home-fall i:nth-child(4) { --x: 31%; --s: 28px; --d: 34s; --w: -25s; --c: #26a965; }
.wl-home-fall i:nth-child(5) { --x: 40%; --s: 36px; --d: 28s; --w: -14s; }
.wl-home-fall i:nth-child(6) { --x: 47%; --s: 24px; --d: 36s; --w: -2s; --c: #d9a12a; }
.wl-home-fall i:nth-child(7) { --x: 55%; --s: 32px; --d: 27s; --w: -20s; }
.wl-home-fall i:nth-child(8) { --x: 63%; --s: 42px; --d: 30s; --w: -6s; --c: #26a965; }
.wl-home-fall i:nth-child(9) { --x: 70%; --s: 26px; --d: 25s; --w: -12s; }
.wl-home-fall i:nth-child(10) { --x: 77%; --s: 34px; --d: 33s; --w: -28s; --c: #d9a12a; }
.wl-home-fall i:nth-child(11) { --x: 84%; --s: 28px; --d: 29s; --w: -8s; }
.wl-home-fall i:nth-child(12) { --x: 90%; --s: 38px; --d: 35s; --w: -22s; --c: #26a965; }
.wl-home-fall i:nth-child(13) { --x: 96%; --s: 24px; --d: 27s; --w: -15s; }
.wl-home-fall i:nth-child(14) { --x: 9%; --s: 30px; --d: 38s; --w: -31s; --c: #a970ff; }
:root:not([data-theme="dark"]) .wl-home-fall i { opacity: .18; }
@media (prefers-reduced-motion: reduce) { .wl-home-fall { display: none; } }
.wl-no-motion .wl-home-fall { display: none; }

/* Karten heben sich beim Drüberfahren leicht an */
.wl-home-card, .wl-pitch { transition: transform .2s, border-color .2s, box-shadow .2s; }
@media (hover: hover) {
  .wl-home-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line)); box-shadow: 0 16px 36px rgba(37, 99, 235, .22); }
  .wl-pitch:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(145, 70, 255, .28); }
}
.wl-home-cards .wl-home-card { height: 100%; }
.wl-pitch { display: flex; flex-direction: column; }
.wl-pitch-badge { align-self: flex-start; }
.wl-pitch-list { flex: 1; }

/* Aufmacher: Knöpfe */
.wl-home-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.wl-home-cta .wl-btn-primary.wl-btn-big { width: auto; margin: 0; padding: 15px 28px; font-size: 18px; box-shadow: 0 10px 28px rgba(37, 99, 235, .4); }
.wl-home-cta .wl-btn-secondary { padding: 15px 24px; font-size: 17px; }

/* Vorschau: vier kleine Bretter */
.wl-home-demo { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 22px; box-shadow: var(--shadow); rotate: 1.5deg; }
.wl-home-demo-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wl-home-demo-board { display: grid; gap: 5px; justify-items: center; padding: 10px 8px 12px; border-radius: 14px; background: var(--surface-2); }
.wl-home-demo-board.wl-is-solved { box-shadow: inset 0 0 0 2px var(--correct); }
.wl-home-demo-board b { font-size: 13px; color: var(--muted); }
.wl-home-demo-board span, .wl-home-steps li > span:last-child { display: flex; gap: 4px; }
.wl-home-demo-board i, .wl-home-steps i {
  width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 15px; color: var(--on-color);
}
.wl-home-demo i.wl-is-correct, .wl-home-steps i.wl-is-correct { background: var(--correct); }
.wl-home-demo i.wl-is-present, .wl-home-steps i.wl-is-present { background: var(--present); }
.wl-home-demo i.wl-is-absent, .wl-home-steps i.wl-is-absent { background: var(--absent); color: var(--on-absent, #fff); }
.wl-home-steps i.wl-is-blank { background: var(--tile-empty); color: var(--fg); box-shadow: inset 0 0 0 2px var(--tile-border); }
.wl-home-demo p { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 14px; }

/* So geht's in drei Schritten */
.wl-home-steps h2, .wl-pitch-text h2 { margin: 0 0 18px; font-size: 30px; letter-spacing: -.01em; }
.wl-home-steps ol { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
.wl-home-steps li {
  counter-increment: step; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: 24px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.wl-home-steps li::before {
  content: counter(step); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-2); font-weight: 800;
}
.wl-home-steps li b { font-size: 20px; }
.wl-home-steps li > span { grid-column: 1 / -1; }
.wl-home-steps li > span:first-of-type { color: var(--muted); line-height: 1.5; align-self: start; }
.wl-home-steps li > span:last-child { margin-top: 8px; }

/* Für Streamer: Text links, Spielbild mit Chat rechts */
.wl-pitch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 44px; padding: 36px; align-items: center; }
.wl-pitch-text { display: flex; flex-direction: column; align-items: flex-start; }
.wl-pitch-text h2 { margin: 12px 0 10px; }
.wl-pitch-lead { margin: 0 0 20px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.wl-pitch-list { display: grid; gap: 14px; margin: 0 0 20px; width: 100%; }
.wl-pitch-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; font-size: 15px; }
.wl-pitch-list li span { grid-column: 2; line-height: 1.5; }
.wl-pitch-list li b { font-size: 16px; line-height: 1.25; }
.wl-pitch-list li i { grid-row: 1 / span 2; align-self: start; }
.wl-pitch-setup { margin: 0 0 16px; color: var(--muted); font-size: 15px; }

.wl-pitch-shot { position: relative; margin: 0 0 28px 28px; }
.wl-pitch-shot img {
  display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.wl-pitch-chat {
  position: absolute; left: -28px; bottom: -28px; width: min(270px, 60%); padding: 12px 14px; border-radius: 12px;
  display: grid; gap: 4px; background: #18181b; border: 1px solid #2f2f35; box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.wl-pitch-chat p { margin: 0; color: #efeff1; font-size: 13.5px; line-height: 1.4; }
.wl-pitch-chat b { margin-right: 6px; }
.wl-pitch-chat b::after { content: ":"; color: #efeff1; font-weight: 400; }
.wl-pitch-chat-a { color: #ff7f50; }
.wl-pitch-chat-b { color: #1e90ff; }
.wl-pitch-chat-c { color: #00c48c; }
.wl-pitch-chat-d { color: #da70d6; }

@media (max-width: 1060px) {
  .wl-home-steps { margin-top: 12px; }
  .wl-home-steps ol { grid-template-columns: minmax(0, 1fr); }
  .wl-pitch { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .wl-home-demo { rotate: 0deg; }
  .wl-home-cta { justify-content: center; }
}
@media (max-width: 720px) {
  .wl-home-steps h2, .wl-pitch-text h2 { font-size: 24px; }
  .wl-pitch-shot { margin: 0; }
  .wl-pitch-chat { position: static; width: auto; margin-top: 12px; }
  .wl-home-demo { padding: 14px; }
  .wl-home-demo-board i { width: 22px; height: 22px; font-size: 11px; border-radius: 5px; }
  .wl-home-cta > * { flex: 1 1 100%; }
}

/* So geht's: Begriff oben, Text darunter */
.wl-howto dl { grid-template-columns: 1fr; gap: 0; }
.wl-howto dt { margin-top: 14px; line-height: 1.35; }
.wl-howto dt:first-child { margin-top: 0; }
.wl-howto dd { margin: 0; line-height: 1.5; }

/* Chatfenster: unten rechts angedockt, lösbar */
.wl-chatbox {
  position: fixed; right: 0; bottom: 0; z-index: 40; width: 320px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-right: 0; border-bottom: 0; border-radius: 16px 0 0 0;
  box-shadow: -10px -10px 36px rgba(0, 0, 0, .35); /* kein zoom: sonst passen Mausposition und Größe beim Ziehen nicht zusammen */
}
.wl-chatbox.wl-is-open { height: min(400px, 55vh); }
.wl-chatbox:not(.wl-is-open) { width: auto; border-radius: 12px 0 0 0; cursor: pointer; }
/* angedockt: nur die Ecken abrunden, die nicht am Rand liegen */
.wl-chatbox:not(.wl-is-floating) { border-radius: 16px 16px 0 0; border-right: 1px solid var(--line); }
.wl-chatbox.wl-is-at-right { border-radius: 16px 0 0 0; border-right: 0; }
.wl-chatbox.wl-is-at-left { border-radius: 0 16px 0 0; border-left: 0; }
.wl-chatbox.wl-is-floating {
  min-width: 240px; min-height: 160px; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.wl-chatbox.wl-is-open .wl-chatbox-head { cursor: grab; }
.wl-chatbox.wl-is-dragging .wl-chatbox-head { cursor: grabbing; }
.wl-chatbox.wl-is-dragging { user-select: none; }
.wl-chatbox-head { display: flex; align-items: center; gap: 8px; padding: 9px 8px 9px 14px; font-size: 14px; touch-action: none; }
.wl-chatbox.wl-is-open .wl-chatbox-head { border-bottom: 1px solid var(--line); }
.wl-chatbox-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-chatbox-new { font-style: normal; font-size: 12px; font-weight: 800; background: var(--present); color: #1b1300; border-radius: 999px; padding: 0 7px; }
.wl-chatbox-head button { display: grid; place-items: center; flex: none; background: none; border: 0; padding: 0; color: var(--muted); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
.wl-chatbox-head button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl-chatbox-head button[hidden] { display: none; }
/* Griffe zum Ziehen der Größe, angedockt nur oben und an der freien Seite */
.wl-chatbox-grip { position: absolute; z-index: 2; }
.wl-chatbox-grip[data-edge="n"] { top: -4px; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.wl-chatbox-grip[data-edge="s"] { bottom: -4px; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.wl-chatbox-grip[data-edge="w"] { left: -4px; top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.wl-chatbox-grip[data-edge="e"] { right: -4px; top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.wl-chatbox-grip[data-edge="nw"] { top: -5px; left: -5px; width: 16px; height: 16px; cursor: nwse-resize; }
.wl-chatbox-grip[data-edge="ne"] { top: -5px; right: -5px; width: 16px; height: 16px; cursor: nesw-resize; }
.wl-chatbox-grip[data-edge="sw"] { bottom: -5px; left: -5px; width: 16px; height: 16px; cursor: nesw-resize; }
.wl-chatbox-grip[data-edge="se"] { bottom: -5px; right: -5px; width: 16px; height: 16px; cursor: nwse-resize; }
.wl-chatbox-grip[data-edge*="w"], .wl-chatbox-grip[data-edge*="e"] { z-index: 3; }
.wl-chatbox-grip[data-edge="w"], .wl-chatbox-grip[data-edge="e"] { z-index: 2; }
/* angedockt: unten nichts, an der Seite am Bildschirmrand auch nicht */
.wl-chatbox:not(.wl-is-open) .wl-chatbox-grip,
.wl-chatbox:not(.wl-is-floating) .wl-chatbox-grip[data-edge*="s"],
.wl-chatbox.wl-is-at-right .wl-chatbox-grip[data-edge*="e"], .wl-chatbox.wl-is-at-left .wl-chatbox-grip[data-edge*="w"] { display: none; }
.wl-chatbox-grip[data-edge="n"]::before { content: ""; position: absolute; left: 50%; top: 2px; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--line); opacity: 0; transition: opacity .15s; }
.wl-chatbox:hover .wl-chatbox-grip[data-edge="n"]::before { opacity: 1; }
.wl-chatbox-head button:hover { background: var(--accent-soft); color: var(--fg); }
.wl-chatbox-hint {
  margin: 10px 10px 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent-2) 45%, var(--line));
}
.wl-chatbox-hint p { margin: 0 0 10px; }
.wl-chatbox-hint a { color: var(--accent-2); font-weight: 700; }
.wl-chatbox-hint .wl-btn-primary { padding: 6px 14px; font-size: 14px; }
.wl-chatbox-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 10px 14px; font-size: calc(var(--chat-fs, 14px) * var(--ui, 1)); }
.wl-chatbox-msgs time { color: var(--muted); font-size: .85em; margin-right: 6px; font-variant-numeric: tabular-nums; }
.wl-chatbox:not(.wl-is-open) .wl-chatbox-msgs { display: none; }
.wl-chatbox-msgs > :first-child { margin-top: auto; }
.wl-chatbox-msgs p { margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.wl-chatbox-msgs b::after { content: ":"; color: var(--fg); font-weight: 400; margin-right: 4px; }
.wl-chatbox-msgs .wl-is-action { font-style: italic; }
.wl-chatbox-msgs .wl-is-action b::after { content: ""; margin-right: 6px; }
.wl-chatbox-msgs .wl-is-suggestion { background: color-mix(in srgb, var(--present) 14%, transparent); border-radius: 8px; padding: 4px 7px; margin-inline: -7px; }
.wl-chatbox-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 800; background: var(--present); color: #1b1300; vertical-align: 1px; }
.wl-chatbox-tag.wl-is-tip { background: var(--accent); color: #fff; }
.wl-chatbox-empty { color: var(--muted); }
.wl-chatbox-foot { display: flex; align-items: center; border-top: 1px solid var(--line); }
.wl-chatbox-foot-main { flex: 1; min-width: 0; }
.wl-chatbox-gear { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-left: 8px; order: -1; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.wl-chatbox-gear:hover { background: var(--accent-soft); color: var(--fg); }
.wl-chatbox-gear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl-chatbox-form { padding-left: 4px; }
.wl-chatbox-menu {
  position: absolute; left: 8px; bottom: 58px; z-index: 4; width: min(280px, calc(100% - 16px)); padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); font-size: 14px;
}
.wl-chatbox-menu h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
.wl-chatbox-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.wl-chatbox-menu-row + .wl-chatbox-menu-row { margin-top: 10px; }
.wl-chatbox-menu .wl-zoom { flex: none; }
.wl-chatbox-menu .wl-switch input:not(:checked) + span { background: var(--surface); }
.wl-chatbox:not(.wl-is-open) .wl-chatbox-menu { display: none; }
.wl-chatbox-menu-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; }
.wl-chatbox-menu-links .wl-btn-link { margin: 0; padding: 0; font-size: 13px; }
.wl-chatbox:not(.wl-is-open) .wl-chatbox-foot { display: none; }
.wl-chatbox-write { display: block; padding: 8px 14px 10px; color: var(--muted); font-size: 13px; text-decoration: none; }
.wl-chatbox-write { margin: 0; }
.wl-chatbox-write a { color: var(--accent-2); text-decoration: none; white-space: nowrap; }
.wl-chatbox-write a:hover { color: #a970ff; }
.wl-chatbox-form { display: flex; gap: 6px; padding: 10px; }
.wl-chatbox-form input {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--fg); font: inherit; font-size: 14px;
}
.wl-chatbox-form input:focus { outline: none; border-color: var(--accent-2); }
.wl-chatbox-form .wl-btn-primary { padding: 0 14px; font-size: 14px; }
.wl-chatbox-login {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px; padding: 9px; border-radius: 10px; white-space: nowrap;
  background: #9146ff; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
}
.wl-chatbox-login:hover { filter: brightness(1.1); }
.wl-chatbox-login svg { width: 16px; height: 16px; fill: currentColor; }
.wl-chatbox-foot small { display: block; margin: -4px 12px 10px; color: var(--muted); font-size: 12px; text-align: center; }
body.wl-has-chat-reserve #boards { padding-left: var(--chat-reserve-l); padding-right: var(--chat-reserve-r); }
body.wl-has-chatbox .wl-footer { right: auto; left: 14px; }
body.wl-has-chatbox.wl-has-chat-left .wl-footer { left: auto; right: 14px; }
body.wl-has-chat-reserve #statusbar { padding-left: calc(16px + var(--chat-reserve-l)); padding-right: calc(16px + var(--chat-reserve-r)); }
#keyboard { translate: var(--chat-shift-kb, 0px) 0; }
@media (min-width: 761px) {
  #keyboard.wl-is-tips-left .wl-bulb.wl-bulb-general { left: auto; right: calc(100% + 10px); }
}
@media (max-width: 699px) {
  .wl-chatbox.wl-is-open { left: 0; width: auto; height: 45vh; border-left: 0; border-radius: 16px 16px 0 0; }
}

/* Aufgeben: Pille in der Statusleiste und Nachfrage */
.wl-statusbar .wl-statusbar-giveup { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; transition: border-color .15s, color .15s; }
.wl-statusbar .wl-statusbar-giveup[hidden] { display: none; }
.wl-statusbar .wl-statusbar-giveup svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl-statusbar .wl-statusbar-giveup:hover, .wl-statusbar .wl-statusbar-giveup:focus-visible { border-color: var(--danger); color: var(--danger); outline: none; }
.wl-btn-danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); }
.wl-btn-danger:hover { background: var(--danger); color: #fff; }
#dlg-giveup { width: min(440px, calc((100vw - 32px) / var(--ui))); }
.wl-giveup-title { display: inline-flex; align-items: center; gap: 10px; }
.wl-giveup-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
#dlg-giveup .wl-modal-body { padding-top: 10px; }
.wl-giveup-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#dlg-giveup p { margin-bottom: 18px; }
#dlg-giveup .wl-giveup-odds { margin: 0 auto 10px; padding: 8px 12px; max-width: 360px; border-radius: 10px; color: var(--fg); font-weight: 600;
  background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }

/* Handy: Burger-Menü statt voller Kopfzeile und Statusleiste */
.wl-menu-btn { display: none; }
@media (max-width: 600px) {
  .wl-has-menu .wl-topbar-side-right > .wl-icon-btn:not(.wl-menu-btn) { display: none; }
  .wl-has-menu .wl-menu-btn { display: grid; }
  #statusbar > :not(#st-guesses):not(#st-solved):not(.wl-statusbar-live):not(.wl-statusbar-review) { display: none; }
  #statusbar { flex-wrap: nowrap; }
}
.wl-menu {
  inset: 0 0 0 auto; margin: 0; width: min(300px, 86vw); height: 100dvh; max-width: none; max-height: none;
  padding: 14px 14px 20px; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--fg); box-shadow: var(--shadow);
}
.wl-menu[open] { animation: menu-in .2s ease-out; }
@keyframes menu-in { from { transform: translateX(30px); opacity: 0; } }
.wl-menu::backdrop { background: rgba(5, 12, 28, .55); backdrop-filter: blur(3px); }
.wl-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.wl-menu-head b { font-size: 17px; }
.wl-menu-head .wl-btn-close { position: static; }
.wl-menu h4 { margin: 16px 6px 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
.wl-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--fg); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer;
}
div.wl-menu-item { cursor: default; }
.wl-menu-item:hover { background: var(--surface-2); }
.wl-menu-item > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.wl-menu-item > span:first-of-type { flex: 1; }
.wl-menu-item small { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.wl-menu-item .wl-zoom { flex: none; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.wl-menu-item.wl-is-danger, .wl-menu-item.wl-is-danger > svg { color: var(--danger); }