:root {
      --akzent: #7c3aed;
      --akzent-dunkel: #6d28d9;
      --text-dunkel: #1f2330;
      --text-hell: #6b7280;
    }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    .nur-screenreader {
      position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
    html, body { min-height: 100%; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      max-width: 480px; margin: 0 auto;
      /* v142: als installierte App (display: standalone + viewport-fit=cover)
         zeichnet die Seite unter der Statusleiste/Notch weiter - der feste
         28px-Abstand reichte dort nicht, wodurch z. B. der Spielkopf mit den
         Navigations-Buttons oben kaum erreichbar war. Jetzt weicht der obere/
         untere Rand zusaetzlich der jeweiligen "safe area" aus (im normalen
         Browser-Tab ist env(safe-area-inset-*) = 0, dort aendert sich nichts). */
      padding: max(28px, calc(env(safe-area-inset-top) + 20px)) 16px
               max(48px, calc(env(safe-area-inset-bottom) + 24px));
      min-height: 100vh;
      background: linear-gradient(160deg, #4338ca 0%, #7c3aed 45%, #db2777 100%);
      background-attachment: fixed;
      color: var(--text-dunkel);
    }
    input, button {
      font-size: 1rem; padding: 10px 12px; margin: 4px 0;
      border-radius: 12px; border: 1px solid #d8dbe3; font-family: inherit;
    }
    input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(124,58,237,0.18); }
    button {
      cursor: pointer; border: none; background: var(--akzent); color: #fff;
      font-weight: 600; transition: transform .05s ease, background .15s ease;
    }
    button:hover { background: var(--akzent-dunkel); }
    button:active { transform: scale(0.97); }
    button:disabled { opacity: 0.5; cursor: not-allowed; }
    .fehler-text, #start-error { color: #c0392b; font-size: 0.9rem; }
    ul { padding-left: 0; list-style: none; margin: 0; }
    li { padding: 0; margin-bottom: 10px; }
    li:last-child { margin-bottom: 0; }
    .kategorie { color: #888; font-size: 0.9rem; text-transform: uppercase; }
    #top-bar { text-align: right; margin-bottom: 10px; }
    #top-bar button {
      font-size: 0.8rem; padding: 6px 14px; border-radius: 999px;
      background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.4);
    }
    #top-bar button:hover { background: rgba(255,255,255,0.28); }
    #app-version { color: rgba(255,255,255,0.75); }
    #debug-log {
      color: #c0392b; font-size: 0.8rem; white-space: pre-wrap; word-break: break-word;
      background: #fff; padding: 10px 14px; border-radius: 12px;
    }

    .bildschirm-karte {
      background: #fff; border-radius: 24px; padding: 26px 22px;
      box-shadow: 0 20px 45px rgba(17, 12, 46, 0.35);
    }

    /* ---------- Vollbild-Profilwahl ---------- */
    body.profil-offen { overflow: hidden; }
    #profil-screen[hidden] { display: none; }
    #profil-screen {
      --profil-farbe: #2563eb;
      --profil-hell: #60a5fa;
      --profil-dunkel: #1e3a8a;
      --profil-text: #fff;
      position: fixed; inset: 0; z-index: 50; overflow-x: hidden; overflow-y: auto;
      display: grid; grid-template-rows: 1fr; min-height: 100dvh;
      padding: max(68px, calc(env(safe-area-inset-top) + 34px)) 18px max(112px, calc(env(safe-area-inset-bottom) + 88px));
      color: #fff;
      background:
        radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--profil-farbe) 22%, transparent) 0, transparent 44%),
        linear-gradient(180deg, #071526 0%, #0a2035 48%, #06131f 100%);
      isolation: isolate;
    }
    #profil-screen::before {
      content: ""; position: fixed; z-index: -3; inset: 0;
      background:
        radial-gradient(ellipse at 3% 12%, rgba(212,232,255,.32) 0 1%, transparent 12%),
        radial-gradient(ellipse at 97% 12%, rgba(212,232,255,.32) 0 1%, transparent 12%),
        linear-gradient(116deg, transparent 0 12%, rgba(255,255,255,.055) 12.2% 27%, transparent 27.3%),
        linear-gradient(244deg, transparent 0 12%, rgba(255,255,255,.055) 12.2% 27%, transparent 27.3%),
        repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.018) 35px 36px);
      pointer-events: none;
    }
    /* Spielfeldlinien im unteren Bereich schaffen Arena-Tiefe, ohne das
       unveränderte Spielerfoto zu überlagern. */
    .profil-zacken {
      position: fixed; z-index: -2; left: -14%; right: -14%; bottom: -13%; height: 48%;
      border-top: 1px solid rgba(174,207,232,.22);
      background:
        linear-gradient(90deg, transparent 49.8%, rgba(190,218,238,.22) 50%, transparent 50.2%),
        repeating-linear-gradient(0deg, transparent 0 58px, rgba(190,218,238,.1) 59px 60px),
        linear-gradient(180deg, rgba(16,46,64,.22), rgba(3,13,22,.82));
      transform: perspective(380px) rotateX(54deg);
      transform-origin: bottom center;
      pointer-events: none;
    }
    .profil-zacken::before {
      content: ""; position: absolute; left: 50%; top: 5%; width: 190px; height: 190px;
      border: 2px solid rgba(190,218,238,.16); border-radius: 50%; transform: translateX(-50%);
    }
    #profil-screen::after {
      content: ""; position: fixed; z-index: -1; inset: 0;
      background:
        radial-gradient(circle at 5% 13%, #d9edff 0 2px, transparent 3px),
        radial-gradient(circle at 95% 13%, #d9edff 0 2px, transparent 3px);
      background-size: 16px 16px;
      background-repeat: repeat-y;
      opacity: .36;
      pointer-events: none;
    }
    .profil-inhalt {
      width: min(calc(100vw - 36px), 620px); margin: auto; display: flex; flex-direction: column;
      align-items: stretch; justify-content: center; gap: clamp(12px, 2.3vh, 22px);
    }
    .profil-kopf { text-align: center; text-shadow: 0 4px 18px rgba(0,0,0,.62); }
    .profil-kopf::after {
      content: ""; display: block; width: 42px; height: 4px; margin: 12px auto 0;
      border-radius: 99px; background: rgba(191,218,240,.32);
    }
    .profil-kopf h1 {
      margin: 0; color: #f8fbff; font-family: "Barlow Condensed", sans-serif;
      font-size: clamp(2rem, 8vw, 3.2rem); font-style: italic; line-height: .98;
      letter-spacing: .01em;
    }
    .profil-auswahlblock { text-align: center; }
    /* v114: Umschalter zwischen den Bilder-Kategorien "Fußballer" und "Freunde" -
       zwischen Farbauswahl und Spielerauswahl, passend zum karussell-pfeil-Look. */
    .profil-kategorie-wahl {
      display: flex; justify-content: center; gap: 8px; margin: 4px 0 2px;
    }
    .profil-kategorie-btn {
      border: 1px solid rgba(174,205,231,.42); border-radius: 999px;
      background: rgba(9,29,48,.6); color: #dfe7ff;
      font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-style: italic;
      font-size: 1rem; letter-spacing: .02em; padding: 7px 20px;
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      transition: background .2s ease, color .2s ease, transform .2s ease;
    }
    .profil-kategorie-btn:hover { background: rgba(9,29,48,.84); }
    .profil-kategorie-btn:active { transform: scale(.96); }
    .profil-kategorie-btn.aktiv {
      background: var(--profil-farbe); color: var(--profil-text); border-color: transparent;
      box-shadow: 0 8px 22px rgba(0,0,0,.32), 0 0 16px color-mix(in srgb, var(--profil-farbe) 55%, transparent);
    }
    .profil-karussell { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
    .karussell-buehne {
      width: 100%; min-height: 104px; display: flex; align-items: center;
      justify-content: center; gap: clamp(10px, 3.6vw, 22px); touch-action: pan-y;
    }
    .karussell-pfeil {
      position: absolute; z-index: 6; top: 50%; width: 44px; height: 58px; margin: 0; padding: 0 0 5px;
      border: 1px solid rgba(174,205,231,.42); border-radius: 999px;
      color: #fff; background: rgba(9,29,48,.84); font-size: 2.15rem; line-height: 1;
      box-shadow: 0 8px 24px rgba(0,0,0,.28);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      transform: translateY(-50%);
    }
    .karussell-pfeil:first-child { left: -3px; }
    .karussell-pfeil:last-child { right: -3px; }
    .karussell-pfeil:hover { background: #153552; }
    .karussell-pfeil:active { transform: translateY(-50%) scale(.95); }
    .karussell-option {
      position: relative; flex: 0 0 auto; margin: 0; padding: 0; overflow: hidden;
      border: 2px solid rgba(214,231,244,.64); background: rgba(255,255,255,.08);
      box-shadow: 0 10px 28px rgba(0,0,0,.34);
      transition: transform .22s ease, opacity .22s ease, filter .22s ease, box-shadow .22s ease;
    }
    .karussell-option:hover { background-color: rgba(255,255,255,.12); }
    .karussell-option.seite { opacity: .7; transform: scale(.86); }
    .karussell-option.mitte {
      border-color: #fff; transform: scale(1);
      box-shadow: 0 13px 34px rgba(0,0,0,.46), 0 0 0 5px color-mix(in srgb, var(--profil-farbe) 45%, transparent), 0 0 25px color-mix(in srgb, var(--profil-farbe) 62%, transparent);
    }
    .farb-option {
      width: 62px; height: 62px; border-radius: 50%;
      background: var(--item-farbe);
    }
    .farb-option.mitte { width: 82px; height: 82px; }
    .spieler-auswahlblock { position: relative; margin-top: -2px; }
    .spieler-auswahlblock .profil-karussell { width: calc(100vw + 22px); margin-left: calc((100% - 100vw - 22px) / 2); }
    .spieler-auswahlblock .karussell-pfeil:first-child { left: 7px; }
    .spieler-auswahlblock .karussell-pfeil:last-child { right: 7px; }
    .icon-karussell { min-height: clamp(302px, 44vh, 370px); gap: clamp(8px, 2.5vw, 18px); overflow: hidden; }
    .icon-option {
      width: 96px; height: 226px; border-radius: 20px;
      border-color: rgba(156,185,211,.72);
    }
    .icon-option.seite:first-child { transform: perspective(500px) rotateY(8deg) scale(.88); transform-origin: right center; }
    .icon-option.seite:last-child { transform: perspective(500px) rotateY(-8deg) scale(.88); transform-origin: left center; }
    .icon-option.mitte {
      width: clamp(205px, 55vw, 244px); height: clamp(292px, 43vh, 350px); border-radius: 25px;
      border: 3px solid #fff;
      /* v121: die Farbe außerhalb des weißen Rahmens war auf dem lila Hintergrund
         kaum zu erkennen (v. a. bei Schwarz), deshalb dezent INNEN am weißen
         Rahmen zeigen statt außen - dort liegt sie über dem Foto, nicht über dem
         Hintergrund, und bleibt so bei jeder Farbe sichtbar. */
      box-shadow:
        inset 0 0 0 5px color-mix(in srgb, var(--profil-farbe) 65%, transparent),
        0 13px 34px rgba(0,0,0,.46);
    }
    .icon-option img {
      position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: cover;
    }
    .icon-option::before {
      content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
      background: linear-gradient(0deg, rgba(2,8,14,.9) 0, rgba(2,8,14,.36) 21%, transparent 46%);
    }
    .icon-option.seite::before {
      background: linear-gradient(0deg, rgba(2,8,14,.52), rgba(2,8,14,.08) 58%, rgba(2,8,14,.22));
    }
    .profil-spielername {
      position: absolute; z-index: 5; left: 50%; bottom: 25px; width: min(190px, 52vw); min-height: 54px;
      margin: 0; padding: 0 8px; text-align: center; transform: translateX(-50%);
      color: #fff; text-shadow: 0 3px 9px rgba(0,0,0,.85); pointer-events: none;
      display: flex; flex-direction: column;
    }
    /* v115: bei der Freunde-Kategorie steht die Rolle (groß) über dem Namen
       (klein) - bei den Fußballern bleibt die bisherige Reihenfolge. */
    .profil-spielername.freunde-modus { flex-direction: column-reverse; }
    .profil-spielername span, .profil-spielername strong { display: block; }
    .profil-spielername span { font-family: "Barlow Condensed", sans-serif; font-size: 1.15rem; font-style: italic; line-height: .95; font-weight: 800; }
    .profil-spielername strong {
      margin-top: 1px; font-family: "Barlow Condensed", sans-serif;
      /* v120: --name-skala verkleinert lange Wörter (z. B. "MEERJUNGFRAU"), damit
         sie nicht über den Kartenrand hinausragen - wird per JS gesetzt, siehe
         app.js. Ohne JS-Wert (z. B. alte Fußballer-Nachnamen) bleibt es bei 1. */
      font-size: calc(clamp(2.2rem, 10vw, 3rem) * var(--name-skala, 1));
      font-style: italic; line-height: .92;
      letter-spacing: .01em; text-transform: uppercase;
    }
    .profil-verlassen {
      position: fixed; z-index: 8; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left));
      margin: 0; padding: 9px 14px; border: 1px solid rgba(174,205,231,.52); border-radius: 999px;
      color: #fff; background: rgba(8,25,42,.68); font-size: .76rem;
      box-shadow: 0 7px 20px rgba(0,0,0,.2);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .profil-verlassen:hover { background: #153552; }
    .profil-auswaehlen {
      position: fixed; z-index: 8; left: max(28px, env(safe-area-inset-left)); right: max(28px, env(safe-area-inset-right));
      bottom: max(18px, env(safe-area-inset-bottom)); width: min(calc(100vw - 56px), 390px); margin: 0 auto;
      padding: 15px 24px; border-radius: 999px; border: 2px solid rgba(255,255,255,.78);
      background: var(--profil-farbe); color: var(--profil-text); font-family: "Barlow Condensed", sans-serif;
      font-size: 1.45rem; font-style: italic; font-weight: 800;
      box-shadow: 0 10px 30px rgba(0,0,0,.42), 0 0 20px color-mix(in srgb, var(--profil-farbe) 44%, transparent);
    }
    .profil-auswaehlen::after { content: "  ›"; font-size: 1.65rem; font-style: normal; vertical-align: -1px; }
    .profil-auswaehlen:hover { background: var(--profil-farbe); transform: translateY(-1px); filter: brightness(1.08); }
    .profil-auswaehlen:active { transform: scale(0.97); }
    .profil-hinweis {
      position: fixed; z-index: 2; right: 18px; bottom: max(77px, calc(env(safe-area-inset-bottom) + 77px));
      max-width: min(78vw, 360px); margin: 0; padding: 8px 11px; border-radius: 10px;
      color: #fff; background: rgba(128,0,0,0.62); font-size: 0.78rem; text-align: right;
    }
    .profil-hinweis:empty { display: none; }

    @media (max-height: 700px) {
      #profil-screen { padding-top: max(52px, env(safe-area-inset-top)); padding-bottom: max(88px, env(safe-area-inset-bottom)); }
      .profil-inhalt { gap: 6px; }
      .profil-kopf::after { margin-top: 6px; }
      .profil-kopf h1 { font-size: 1.8rem; }
      .farb-option { width: 48px; height: 48px; }
      .farb-option.mitte { width: 64px; height: 64px; }
      .karussell-buehne { min-height: 70px; }
      .icon-karussell { min-height: 260px; }
      .icon-option { width: 78px; height: 178px; }
      .icon-option.mitte { width: 176px; height: 250px; }
      .profil-spielername { bottom: 20px; min-height: 42px; }
      .profil-spielername span { font-size: .95rem; }
      .profil-spielername strong { font-size: calc(2rem * var(--name-skala, 1)); }
    }
    @media (min-width: 760px) and (orientation: landscape) {
      .profil-inhalt { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px 38px; }
      .profil-kopf { grid-column: 1 / -1; }
      .spieler-auswahlblock .profil-karussell { width: 100%; margin-left: 0; }
    }
    .start-hero { text-align: center; margin-bottom: 18px; }
    .start-icon { line-height: 1; margin-bottom: 4px; }
    .app-icon { border-radius: 18px; box-shadow: 0 6px 16px rgba(17,12,46,0.25); }
    .start-hero h1 { margin: 4px 0 2px; font-size: 1.6rem; }
    .start-tagline { color: var(--text-hell); margin: 0; font-size: 0.95rem; }
    .feld-label { display: block; font-size: 0.85rem; font-weight: 600; color: #4b5061; margin: 14px 0 4px; }
    .feld-label input { display: block; width: 100%; margin-top: 6px; }
    .start-aktionen { display: grid; gap: 10px; margin-top: 18px; }
    .start-aktionen button { margin: 0; }
    .btn-primaer { width: 100%; padding: 14px; font-size: 1.05rem; border-radius: 14px; }
    .btn-sekundaer {
      width: 100%; background: transparent; color: var(--akzent);
      border: 2px solid var(--akzent); font-weight: 700;
    }
    .btn-sekundaer:hover { background: rgba(124,58,237,0.08); }
    .frage-zusatz { font-size: 0.68em; font-weight: 600; color: var(--text-hell); }
    .btn-flach {
      background: transparent; color: var(--akzent); border: 2px solid var(--akzent);
      font-size: 0.85rem; padding: 8px 14px; font-weight: 700;
    }
    .btn-flach:hover { background: rgba(124,58,237,0.08); }
    .code-eingabe { text-align: center; letter-spacing: 4px; font-size: 1.2rem; font-weight: 700; }

    /* Checkbox "Passwort benötigt" beim Raum erstellen (v191). */
    .feld-checkbox {
      display: flex; align-items: center; gap: 8px; margin: 14px 0 0;
      font-size: 0.85rem; font-weight: 600; color: #4b5061; cursor: pointer;
    }
    .feld-checkbox input { width: 18px; height: 18px; margin: 0; flex: none; }

    /* ---------- Dialog: offene Räume durchsuchen (v191) ---------- */
    .raumliste-dialog-inhalt { max-height: min(80vh, 620px); display: flex; flex-direction: column; }
    .raumliste-inhalt {
      overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
      margin: 4px 0 14px; min-height: 60px;
    }
    .raumliste-hinweis { margin: 10px 0; text-align: center; color: var(--text-hell); }
    .raum-kachel {
      display: flex; align-items: center; gap: 12px; width: 100%; margin: 0;
      padding: 12px 14px; border-radius: 16px; border: 1px solid #e3e5eb; cursor: pointer;
      background: #f7f8fb; text-align: left; transition: background .15s ease, border-color .15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .raum-kachel:hover { background: #eef0f6; border-color: #d7dae2; }
    .raum-kachel-deaktiviert { opacity: .6; pointer-events: none; }
    .raum-kachel-schloss {
      display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; width: 44px;
    }
    .raum-kachel-schloss-icon { font-size: 1.3rem; line-height: 1; }
    .raum-kachel-schloss-text { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #6b7280; }
    .raum-kachel.raum-kachel-privat .raum-kachel-schloss-text { color: #b45309; }
    .raum-kachel-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .raum-kachel-name { font-size: 0.98rem; color: #211827; }
    .raum-kachel-code { font-size: 0.8rem; color: #6b7280; }
    .raum-kachel-zeit { font-size: 0.72rem; color: #8b8fa3; }
    .raum-kachel-spieler-toggle {
      display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 2px 0; border: none;
      background: none; font: inherit; cursor: pointer; color: #6b7280;
      /* v197: ohne das hier kann iOS Safari den nativen Tap-Ring hier "kleben"
         lassen, wenn die Raumliste kurz nach dem Antippen per onSnapshot neu
         gerendert wird (gleiches Problem wie beim .db-symbol, siehe dort) -
         sichtbar als schief sitzendes, orangenes Rechteck um den Text. */
      -webkit-tap-highlight-color: transparent;
    }
    .raum-kachel-spieler-toggle:hover .raum-kachel-spieler { text-decoration: underline; }
    .raum-kachel-spieler { font-size: 0.8rem; color: #6b7280; }
    .raum-kachel-spieler-pfeil { font-size: 0.65rem; transition: transform .15s ease; }
    .raum-kachel-spieler-toggle[aria-expanded="true"] .raum-kachel-spieler-pfeil { transform: rotate(180deg); }
    .raumliste-spieler-liste {
      list-style: none; margin: 6px 0 0; padding: 8px; display: flex; flex-direction: column; gap: 6px;
      background: #eef0f6; border-radius: 10px;
    }
    .raumliste-spieler-zeile { display: flex; align-items: center; gap: 8px; }
    .raumliste-spieler-avatar {
      width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex;
      background: var(--spieler-farbe, #7f8c8d); overflow: hidden;
    }
    .raumliste-spieler-bild { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .raumliste-spieler-bild.raumliste-spieler-bild-text {
      display: flex; align-items: center; justify-content: center; color: #fff; font-size: .7rem; font-weight: 700;
    }
    .raumliste-spieler-name { font-size: 0.82rem; color: #211827; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .raumliste-spieler-krone { font-size: 0.75rem; color: #b45309; flex: none; }
    .raumliste-code-btn { width: 100%; margin-top: 4px; }
    .beitreten-zurueck {
      display: inline-block; margin: 0 0 8px; padding: 0; background: none; border: none;
      color: var(--text-hell); font-size: 0.85rem; font-weight: 600; text-decoration: underline;
    }

    /* ---------- Raum beitreten ---------- */
    body.beitreten-offen { overflow: hidden; }
    .beitreten-dialog[hidden] { display: none; }
    .beitreten-dialog {
      position: fixed; z-index: 70; inset: 0; display: grid; place-items: center;
      padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
      background: rgba(17,12,46,.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    }
    .beitreten-dialog-inhalt {
      position: relative; width: min(100%, 420px); padding: 27px 22px 22px;
      border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgba(17,12,46,.42);
      animation: beitreten-einblenden .18s ease-out;
    }
    @keyframes beitreten-einblenden {
      from { opacity: 0; transform: translateY(12px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .beitreten-dialog-inhalt .kategorie { margin: 0 42px 5px 0; }
    .beitreten-dialog-inhalt h2 { margin: 0 42px 5px 0; font-size: 1.55rem; }
    .beitreten-dialog-inhalt .hinweis-text { margin: 0 0 18px; }
    .beitreten-dialog-inhalt .feld-label { margin-top: 0; }
    .beitreten-dialog-inhalt .code-eingabe { width: 100%; margin: 6px 0 0; font-size: 1.55rem; }
    #beitreten-error { min-height: 21px; margin: 8px 0; }
    .beitreten-schliessen {
      position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
      margin: 0; padding: 0 0 3px; border-radius: 50%; color: #5f6472;
      background: #f1f2f6; font-size: 1.6rem; line-height: 1;
    }
    .beitreten-schliessen:hover { color: var(--text-dunkel); background: #e5e7eb; }

    /* ---------- Bestätigung: Raum verlassen ---------- */
    body.raum-verlassen-offen { overflow: hidden; }
    .raum-verlassen-dialog[hidden] { display: none; }
    .raum-verlassen-dialog {
      position: fixed; z-index: 80; inset: 0; display: grid; place-items: center;
      padding: max(20px, env(safe-area-inset-top)) 22px max(20px, env(safe-area-inset-bottom));
      background: rgba(23,20,22,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    }
    .raum-verlassen-dialog-inhalt {
      width: min(100%, 330px); padding: 25px 22px 21px; border: 1px solid #eee1d8;
      border-radius: 24px; background: var(--flaeche, #fffaf1); text-align: center;
      box-shadow: 0 24px 60px rgba(17,12,46,.42); animation: beitreten-einblenden .18s ease-out;
    }
    .raum-verlassen-symbol {
      width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 12px;
      overflow: hidden; border-radius: 50%; background-color: #d95b51;
      background-image: url("data:image/png;base64,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");
      background-repeat: no-repeat; background-size: 71px 67px; background-position: -14px -6px;
      box-shadow: 0 8px 18px rgba(180,54,46,.28);
    }
    .raum-verlassen-dialog-inhalt h2 { margin: 0 0 20px; font-size: 1.55rem; }
    .raum-verlassen-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .raum-verlassen-aktionen button { width: 100%; min-height: 48px; margin: 0; }
    .btn-gefahr { color: #fff; background: #dc493d; }
    .btn-gefahr:hover { background: #c83c31; }

    /* ---------- Wertung: Punktetabelle aller bisher gespielten Spiele ---------- */
    body.wertung-offen { overflow: hidden; }
    .wertung-dialog[hidden] { display: none; }
    .wertung-dialog {
      position: fixed; z-index: 75; inset: 0; display: grid; place-items: center;
      padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
      background: rgba(17,12,46,.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    }
    .wertung-dialog-inhalt {
      position: relative; width: min(100%, 480px); max-height: 82vh; overflow-y: auto;
      padding: 27px 22px 22px; border-radius: 24px; background: #fff;
      box-shadow: 0 24px 60px rgba(17,12,46,.42); animation: beitreten-einblenden .18s ease-out;
    }
    .wertung-dialog-inhalt h2 { margin: 0 42px 5px 0; font-size: 1.55rem; }
    .wertung-dialog-inhalt .hinweis-text { margin: 0 0 16px; }
    .wertung-tabelle-wrapper { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
    .wertung-naechstes-spiel { width: 100%; margin-top: 16px; }
    .wertung-tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
    .wertung-tabelle th, .wertung-tabelle td {
      padding: 8px 10px; text-align: center; white-space: nowrap;
      border-bottom: 1px solid var(--linie, #e6e0da);
    }
    .wertung-tabelle thead th { font-size: 1.3rem; padding-bottom: 10px; }
    .wertung-tabelle .wertung-spieler-kopf { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #6f6672; }
    .wertung-tabelle .wertung-spieler-zelle {
      display: flex; align-items: center; gap: 8px; text-align: left; font-weight: 700;
    }
    .wertung-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
    .wertung-avatar-text { display: flex; align-items: center; justify-content: center; background: #eee; font-size: .68rem; }
    .wertung-tabelle .wertung-gesamt-zelle { font-weight: 900; color: var(--akzent); }
    .wertung-tabelle tbody tr:last-child td { border-bottom: none; }

    /* ---------- Chat (v186): schwebender Knopf + Dialog, während der ganzen
       Raum-Sitzung (Lobby + laufendes Spiel) erreichbar ---------- */
    .chat-button {
      position: fixed; z-index: 60; right: 18px;
      bottom: max(18px, calc(env(safe-area-inset-bottom) + 18px));
      width: 56px; height: 56px; margin: 0; padding: 0; border: 1px solid rgba(255,115,90,.7);
      border-radius: 50%; display: grid; place-items: center; font-size: 1.55rem; line-height: 1;
      background: linear-gradient(135deg, var(--club-orange), #ffb066); color: #2a1305;
      box-shadow: 0 10px 22px rgba(0,0,0,.38);
    }
    .chat-button:hover { filter: brightness(1.06); }
    .chat-button:active { transform: scale(.97); }
    .chat-button[hidden] { display: none; }
    .chat-badge {
      position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px;
      border-radius: 999px; background: #dc493d; color: #fff; font-size: .72rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center; border: 2px solid var(--club-ink, #18101d);
      font-variant-numeric: tabular-nums;
    }
    .chat-badge[hidden] { display: none; }

    body.chat-offen { overflow: hidden; }
    .chat-dialog[hidden] { display: none; }
    .chat-dialog {
      position: fixed; z-index: 78; inset: 0; display: grid; place-items: center;
      padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
      background: rgba(8,5,11,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    }
    .chat-dialog-inhalt {
      position: relative; width: min(100%, 440px); height: min(78vh, 640px);
      display: flex; flex-direction: column;
      padding: 27px 20px 16px; border-radius: 24px; color: var(--club-text);
      background: var(--club-glow) center/100% 100% no-repeat, var(--club-ink);
      border: 1px solid rgba(255,115,90,.7); box-shadow: 0 24px 70px rgba(0,0,0,.55);
      animation: beitreten-einblenden .18s ease-out;
    }
    .chat-dialog-inhalt h2 { margin: 0 42px 12px 0; flex-shrink: 0; font-size: 1.55rem; color: var(--club-text); }
    .chat-nachrichten {
      flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
      padding: 4px 2px; margin-bottom: 8px;
    }
    .chat-leer { margin: auto; color: var(--club-muted); text-align: center; font-size: .92rem; }
    /* v188: fremde Nachrichten zeigen statt eines Namens (schwer lesbar in
       Textfarbe) das Profilbild der Person davor - dafür eine Zeile aus
       Avatar + Sprechblasen-Spalte statt nur einer Spalte. */
    .chat-nachricht { display: flex; max-width: 82%; }
    .chat-nachricht.chat-eigene { align-self: flex-end; flex-direction: column; align-items: flex-end; gap: 2px; }
    .chat-nachricht.chat-fremde { align-self: flex-start; flex-direction: row; align-items: flex-end; gap: 8px; }
    .chat-avatar {
      width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
      border: 2px solid rgba(255,255,255,.18);
    }
    .chat-avatar-text {
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.1); font-size: .8rem; color: var(--club-text);
    }
    .chat-inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
    .chat-blase {
      padding: 9px 13px; border-radius: 16px; font-size: .95rem; line-height: 1.35;
      overflow-wrap: anywhere; white-space: pre-wrap;
    }
    .chat-eigene .chat-blase {
      background: linear-gradient(135deg, var(--club-orange), #ff8a5c); color: #2a1305;
      border-bottom-right-radius: 4px;
    }
    .chat-fremde .chat-blase {
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13);
      border-bottom-left-radius: 4px;
    }
    .chat-zeit { font-size: .66rem; color: var(--club-muted); padding: 0 2px; }
    .chat-eingabeleiste { flex-shrink: 0; display: flex; gap: 8px; align-items: flex-end; }
    .chat-eingabeleiste input {
      flex: 1; margin: 0; min-height: 46px; border-radius: 14px;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: var(--club-text);
    }
    .chat-eingabeleiste input::placeholder { color: var(--club-muted); }
    .chat-senden-btn { width: auto; margin: 0; padding: 0 18px; min-height: 46px; flex-shrink: 0; }
    #chat-fehler { min-height: 0; margin: 4px 0 0; flex-shrink: 0; }
    @media (max-width: 370px) { .chat-dialog-inhalt { padding: 22px 14px 14px; } }

    .auswahl-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
    .farb-swatch {
      width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.15);
      padding: 0; cursor: pointer;
    }
    .farb-swatch.ausgewaehlt { border-color: #333; border-width: 3px; }
    .farb-swatch.vergeben, .icon-swatch.vergeben { opacity: 0.3; cursor: not-allowed; }
    .icon-swatch {
      width: 52px; height: 52px; border-radius: 50%; border: 3px solid #ddd;
      background: #f5f5f5; font-size: 1.3rem; cursor: pointer; overflow: hidden;
      padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1;
    }
    .icon-swatch.ausgewaehlt { border-color: var(--akzent); }
    .avatar-bild { width: 100%; height: 100%; object-fit: cover; display: block; }
    .avatar-bild-text { display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }

    .spieler-karte {
      position: relative; isolation: isolate; overflow: hidden;
      display: flex; align-items: center; gap: 12px;
      width: 100%; min-height: 96px; padding: 10px 16px 10px 12px; border-radius: 22px;
      background: var(--spieler-farbe, #7f8c8d);
      box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }
    .spieler-karte::after {
      content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
      background: linear-gradient(90deg, rgba(255,255,255,0.05), transparent 54%, rgba(0,0,0,0.08));
    }
    .spieler-zacken {
      position: absolute; z-index: 0; inset: 0 0 0 50%; overflow: hidden;
      opacity: 0.62; pointer-events: none;
    }
    .spieler-zacken span {
      position: absolute; right: 0; display: block;
      clip-path: polygon(0 50%, 100% 0, 100% 100%);
    }
    .spieler-zacken span:nth-child(-n+3) { background: var(--spieler-dunkel); }
    .spieler-zacken span:nth-child(n+4) { background: var(--spieler-hell); }
    .spieler-zacken span:nth-child(1) { top: 12%; width: 78%; height: 5%; }
    .spieler-zacken span:nth-child(2) { top: 48%; width: 93%; height: 6%; }
    .spieler-zacken span:nth-child(3) { top: 84%; width: 72%; height: 5%; }
    .spieler-zacken span:nth-child(4) { top: 20%; width: 88%; height: 20%; }
    .spieler-zacken span:nth-child(5) { top: 58%; width: 76%; height: 19%; }
    .spieler-punkte {
      position: relative; z-index: 1;
      font-weight: 800; font-size: 1.8rem; line-height: 1; flex-shrink: 0;
      font-variant-numeric: tabular-nums;
      text-shadow: 0 2px 4px rgba(0,0,0,0.35);
    }
    /* Nur für die rechte (Gesamt-)Punktzahl: eine kräftige Display-Schrift ("Phosphate" selbst ist eine
       Apple-Systemschrift ohne freie Web-Lizenz - "Bungee" ist die zugängliche Alternative mit
       ähnlich kräftigem, blockigem Charakter). Bungee hat keine echte Kursive, deshalb wird hier
       gezielt (nur für diese Zahl) font-style: italic gesetzt - der Browser kippt sie automatisch
       schräg ("synthetische Kursive"). */
    .spieler-punkte-gesamt {
      font-family: "Bungee", sans-serif;
      font-style: italic;
      font-size: 2.3rem;
      letter-spacing: 0.5px;
      text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
    }
    .spieler-info { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
    .spieler-icon {
      width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
      border: 3px solid rgba(255,255,255,0.82); box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }
    .spieler-icon-text {
      display: flex; align-items: center; justify-content: center;
      font-size: 2rem; border: none;
    }
    .spieler-text { display: flex; flex-direction: column; min-width: 0; }
    .spieler-name {
      font-weight: 700; font-size: 1.05rem; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .spieler-extra {
      font-size: 0.78rem; opacity: 0.85; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }

    .schalter-zeile { display: flex; align-items: center; gap: 10px; cursor: pointer; }
    .schalter { position: relative; width: 48px; height: 28px; flex-shrink: 0; }
    .schalter input {
      position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0;
      cursor: pointer; z-index: 1;
    }
    .schalter-regler {
      position: absolute; inset: 0; background: #cfd3dc; border-radius: 999px;
      transition: background .15s ease; pointer-events: none;
    }
    .schalter-regler::after {
      content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
      background: #fff; border-radius: 50%; transition: transform .15s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .schalter input:checked + .schalter-regler { background: var(--akzent); }
    .schalter input:checked + .schalter-regler::after { transform: translateX(20px); }
    /* v140: Einstellungen sind jetzt fuer alle sichtbar, aber nur der
       Spielleiter darf sie aendern - deaktivierte Schalter/Felder etwas
       ausgeblendet, damit klar ist, dass man hier nur zuschaut. */
    .schalter input:disabled + .schalter-regler { opacity: .5; cursor: default; }
    .schalter-text { font-weight: 700; }

    .dummkopf-wahl { cursor: pointer; }
    .dummkopf-wahl .spieler-karte { transition: box-shadow .15s ease, transform .05s ease; }
    .dummkopf-wahl:active .spieler-karte { transform: scale(0.98); }
    .dummkopf-wahl.gewaehlt .spieler-karte { box-shadow: 0 0 0 4px var(--akzent); }

    /* ---------- Denk gleich! ---------- */
    #dg-antwort { width: 100%; }

    /* ---------- 10 Treffer! ---------- */
    .zt-regel {
      margin: 10px 0 18px; padding: 10px 12px; border-radius: 12px;
      background: #f6f4fb; color: var(--text-hell); font-size: 0.82rem; line-height: 1.35;
    }
    .zt-team-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    }
    .zt-punkte-grid { display: grid; gap: 10px; }
    .zt-team {
      padding: 12px; border-radius: 16px; border: 2px solid transparent;
    }
    .zt-team h2, .zt-team h3 { margin: 0 0 8px; }
    .zt-team h3 { white-space: nowrap; font-size: clamp(0.95rem, 4.5vw, 1.17rem); }
    .zt-team li { margin-bottom: 4px; font-size: 0.86rem; font-weight: 700; }
    .zt-team-blau { color: #173a75; background: #dbeafe; border-color: #93c5fd; }
    .zt-team-rot { color: #7f1d1d; background: #fee2e2; border-color: #f87171; }
    .zt-team.gewinner { box-shadow: 0 0 0 3px #f5c518; }
    /* v109: Team-Kacheln, mit denen sich jeder Spieler selbst für ein Team
       entscheiden kann (Klick auf die Kachel) - wiederverwendet bei allen
       Spielen mit Teammodus (10 Treffer!, Schätzfragen, Wer ist es?). */
    .zt-team-waehlbar {
      appearance: none;
      -webkit-appearance: none;
      display: block;
      width: 100%;
      margin: 0;
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: box-shadow .15s ease, transform .05s ease;
    }
    .zt-team-waehlbar:active { transform: scale(0.98); }
    .zt-team-waehlbar.zt-team-eigenes { box-shadow: inset 0 0 0 3px var(--club-orange, #ff5b36); }
    .zt-begriff {
      margin: 10px 0; padding: 18px 12px; border-radius: 18px;
      color: #fff; background: linear-gradient(135deg, #6d28d9, #db2777);
      text-align: center; line-height: 1.1;
      box-shadow: 0 8px 18px rgba(70, 35, 130, 0.22);
    }
    .zt-aktive-einheit { margin: 12px 0; text-align: center; font-size: 1.05rem; font-weight: 800; }
    #zt-runde { position: relative; overflow: hidden; }
    .zt-timer {
      width: 104px; height: 104px; margin: 12px auto 16px; display: flex; flex-direction: column;
      align-items: center; justify-content: center; border: 6px solid #c4b5fd; border-radius: 50%;
      color: #5b21b6; background: #f5f3ff; box-shadow: 0 8px 18px rgba(91,33,182,0.16);
      transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
    }
    .zt-timer strong { font-size: 2.65rem; line-height: 0.9; }
    .zt-timer span { margin-top: 5px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
    .zt-timer.warnung {
      color: #991b1b; background: #fee2e2; border-color: #ef4444;
      animation: zt-timer-puls 1s ease-in-out infinite;
    }
    .zt-timer.abgelaufen { color: #fff; background: #dc2626; border-color: #991b1b; }
    #zt-runde.zt-countdown-warnung::after {
      content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none;
      box-shadow: inset 0 0 0 5px rgba(239,68,68,0.72), inset 0 0 42px rgba(239,68,68,0.32);
      animation: zt-bildschirm-blitz 1s ease-in-out infinite;
    }
    @keyframes zt-timer-puls {
      50% { transform: scale(1.08); box-shadow: 0 0 30px rgba(239,68,68,0.48); }
    }
    @keyframes zt-bildschirm-blitz {
      50% { opacity: 0.25; }
    }
    .zt-rater-ansicht { padding: 16px; border-radius: 18px; background: #f6f4fb; text-align: center; }
    .zt-treffer-zaehler { display: flex; align-items: baseline; justify-content: center; gap: 7px; }
    .zt-treffer-zaehler strong { color: var(--akzent); font-size: 3.4rem; line-height: 1; }
    .zt-treffer-zaehler span { color: var(--text-hell); font-weight: 700; }
    .zt-treffer-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0;
    }
    .zt-treffer {
      min-height: 54px; margin: 0; padding: 9px 10px; display: flex; align-items: center; gap: 7px;
      border: 2px solid transparent; border-radius: 13px; color: var(--text-dunkel);
      background: #f6f4fb; text-align: left; line-height: 1.15;
    }
    .zt-treffer:hover { color: var(--text-dunkel); background: #efe9ff; border-color: #c4b5fd; }
    .zt-treffer.getroffen {
      color: #14532d; background: #dcfce7; border-color: #22c55e;
    }
    .zt-treffer.getroffen:hover { color: #14532d; background: #d1fae5; }
    .zt-treffer:disabled { opacity: 1; cursor: default; }
    .zt-treffer:disabled:hover { background: #f6f4fb; border-color: transparent; }
    .zt-treffer.getroffen:disabled:hover { background: #dcfce7; border-color: #22c55e; }
    .zt-haken {
      width: 22px; height: 22px; flex: 0 0 22px; display: flex; align-items: center; justify-content: center;
      border: 2px solid #c8ccd5; border-radius: 50%; font-size: 0.8rem;
    }
    .zt-treffer.getroffen .zt-haken { color: #fff; background: #16a34a; border-color: #16a34a; }
    .zt-runden-status, .zt-runden-ergebnis { text-align: center; font-weight: 800; }
    .zt-runden-ergebnis { font-size: 1.08rem; }
    #zt-zwischenstand { margin-top: 22px; }
    .zt-punkteliste { margin: 0; }
    .zt-punkte-team {
      display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
      min-height: 88px; padding: 10px 14px; border-radius: 18px;
    }
    .zt-punkte-team-info { min-width: 0; }
    .zt-punkte-team-info > span { display: block; font-size: .86rem; font-weight: 800; }
    .zt-team-avatare { display: flex; flex-wrap: wrap; row-gap: 4px; margin-top: 7px; padding-left: 5px; }
    .zt-team-avatar {
      width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center;
      margin-left: -5px; border: 2px solid #fff; border-radius: 50%; object-fit: cover;
      background: #fff; overflow: hidden; font-size: .7rem;
    }
    .zt-team-rundenpunkte { font-size: 1.45rem; line-height: 1; }
    .zt-team-gesamtpunkte {
      font-family: "Bungee", sans-serif; font-style: italic; font-size: 2.25rem; line-height: 1;
      text-shadow: 2px 2px 0 rgba(0,0,0,.14);
    }
    .zt-team-endstand { display: grid; gap: 12px; }
    .zt-team-endstand .zt-team { text-align: center; }
    .zt-team-punkte { display: block; font-size: 3rem; line-height: 1; }

    /* v110: Rundenergebnis nach Team gruppiert (Schätzfragen, Wer ist es?) -
       eine Kachel pro Team mit Gesamtpunktzahl oben, darunter die einzelnen
       Spieler mit ihren eigenen Punkten dieser Runde. */
    .zt-team-rundenergebnis { display: grid; gap: 14px; }
    .zt-team-kopf {
      display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    }
    .zt-team-kopf h2 { margin: 0; }
    .zt-team-rundenergebnis .zt-team-punkte { display: block; flex: 0 0 auto; font-size: 1.9rem; line-height: 1; }
    .zt-team-mitglieder { margin: 10px 0 0; padding: 0; list-style: none; text-align: left; }
    .zt-team-mitglieder li { margin-bottom: 6px; font-size: 1rem; font-weight: 400; }
    .zt-team-mitglieder li:last-child { margin-bottom: 0; }
    .zt-team-leer { text-align: center; font-weight: 700; opacity: .7; }

    @media (max-width: 360px) {
      .zt-treffer-grid { grid-template-columns: 1fr; }
    }

    /* ---------- Reih dich ein! ---------- */
    .rd-kategorie-kopf {
      margin: 10px 0 14px; padding: 16px; border: 2px solid #ddd6fe; border-radius: 18px;
      background: linear-gradient(145deg, #faf8ff, #f1edff);
    }
    .rd-kategorie-kopf h1 { margin: 0 0 5px; }
    .rd-kategorie-kopf p { margin: 0 0 10px; color: var(--text-hell); }
    .rd-kategorie-kopf strong {
      display: inline-flex; padding: 5px 10px; border-radius: 999px;
      color: #5b21b6; background: #ede9fe; font-size: 0.78rem;
    }
    .rd-aktiver-spieler {
      margin: 12px 0;
    }
    .rd-aktiver-spieler .spieler-karte { min-height: 78px; padding: 7px 13px 7px 8px; border-radius: 17px; }
    .rd-aktiver-spieler .spieler-icon { width: 62px; height: 62px; }
    .rd-aktiver-spieler .spieler-name { font-size: 1.08rem; }
    .rd-kandidat {
      margin: 10px 0 12px; padding: 17px 14px; border-radius: 19px; text-align: center;
      color: #fff; background: linear-gradient(135deg, #6d28d9, #a855f7);
      box-shadow: 0 10px 22px rgba(109,40,217,.2);
    }
    .rd-kandidat strong { font-size: 1.5rem; line-height: 1.15; }
    .rd-kategorie-wechsel { display: flex; justify-content: flex-end; margin: 18px 0 0; }
    .rd-kategorie-wechsel button { width: auto; margin: 0; padding: 8px 13px; font-size: .76rem; }
    .rd-letztes-ergebnis {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      margin: 8px 0; padding: 9px 12px; border: 2px solid; border-radius: 13px;
    }
    .rd-letztes-ergebnis[hidden] { display: none; }
    .rd-letztes-ergebnis.richtig { color: #14532d; border-color: #22c55e; background: #dcfce7; }
    .rd-letztes-ergebnis.falsch { color: #7f1d1d; border-color: #ef4444; background: #fee2e2; }
    .rd-letztes-ergebnis strong { flex: 0 0 auto; font-size: .86rem; }
    .rd-letztes-ergebnis span { font-size: .76rem; line-height: 1.25; text-align: right; }
    .rd-sortierbereich {
      display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 9px;
      align-items: stretch; margin: 12px 0 22px;
    }
    .rd-skala {
      display: flex; flex-direction: column; align-items: center; min-height: 100%;
      padding: 5px 0; color: #5b21b6;
    }
    .rd-skala span {
      width: 58px; padding: 5px 3px; border-radius: 9px; background: #ede9fe;
      font-size: .61rem; font-weight: 900; line-height: 1.05; text-align: center;
      overflow-wrap: anywhere;
    }
    .rd-skala i {
      position: relative; flex: 1; width: 3px; min-height: 35px; margin: 5px 0;
      border-radius: 999px; background: linear-gradient(#8b5cf6, #c4b5fd);
    }
    .rd-skala i::before, .rd-skala i::after {
      content: ""; position: absolute; left: 50%; width: 8px; height: 8px;
      border-left: 3px solid #8b5cf6; border-top: 3px solid #8b5cf6;
    }
    .rd-skala i::before { top: 1px; transform: translateX(-50%) rotate(45deg); }
    .rd-skala i::after { bottom: 1px; transform: translateX(-50%) rotate(225deg); }
    .rd-reihe { display: flex; flex-direction: column; gap: 7px; margin: 0; }
    .rd-position {
      width: 100%; min-height: 34px; padding: 6px 10px; border: 2px dashed #a78bfa;
      border-radius: 12px; color: #6d28d9; background: #f5f3ff;
      font-size: .75rem; font-weight: 800;
    }
    .rd-position:hover { color: #fff; background: var(--akzent); border-color: var(--akzent); }
    .rd-position:disabled {
      min-height: 14px; padding: 0; border: 0; color: #c4b5fd; background: transparent;
      opacity: 1;
    }
    .rd-reihen-begriff {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      min-height: 48px; padding: 11px 14px; border: 2px solid #e7e3ef; border-radius: 15px;
      color: var(--text-dunkel); background: #fff; box-shadow: 0 5px 13px rgba(26,28,40,.06);
    }
    .rd-reihen-begriff strong { line-height: 1.2; }
    .rd-reihen-begriff span {
      flex: 0 0 auto; padding: 4px 8px; border-radius: 9px;
      color: #5b21b6; background: #ede9fe; font-size: .76rem; font-weight: 800;
    }
    .rd-reihen-begriff.neu {
      border-color: #f59e0b; background: #fffbeb; box-shadow: 0 0 0 3px rgba(245,158,11,.18);
      animation: rd-neu-puls .55s ease-out;
    }
    @keyframes rd-neu-puls {
      from { transform: scale(.96); }
      to { transform: scale(1); }
    }
    .rd-kategorie-ergebnis-kopf {
      display: flex; flex-direction: column; gap: 3px; margin: 10px 0 18px;
      padding: 15px; border: 2px solid #8b5cf6; border-radius: 17px;
      color: #4c1d95; background: #f3e8ff;
    }
    .rd-kategorie-ergebnis-kopf strong { font-size: 1.08rem; }
    .rd-kategorie-ergebnis-kopf span { font-size: .83rem; line-height: 1.35; }
    .rd-ergebnis-reihe { display: grid; gap: 8px; margin: 12px 0 20px; }
    .rd-ergebnis-begriff {
      display: grid; gap: 8px; padding: 11px 13px; border: 2px solid #e7e3ef;
      border-radius: 15px; background: #fff; box-shadow: 0 5px 13px rgba(26,28,40,.06);
    }
    .rd-ergebnis-begriff-kopf, .rd-ergebnis-meta {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    .rd-ergebnis-begriff-kopf > strong { line-height: 1.2; }
    .rd-ergebnis-begriff-kopf > span {
      flex: 0 0 auto; padding: 4px 8px; border-radius: 9px;
      color: #5b21b6; background: #ede9fe; font-size: .76rem; font-weight: 800;
    }
    .rd-ergebnis-meta {
      padding-top: 7px; border-top: 1px solid #eeeaf4; color: var(--text-hell); font-size: .8rem;
    }
    .rd-ergebnis-spieler { flex: 1; min-width: 0; }
    .rd-ergebnis-spieler.neutral { padding: 7px 3px; }
    .rd-ergebnis-spieler .spieler-karte {
      min-height: 48px; padding: 4px 9px 4px 5px; border-radius: 13px; box-shadow: none;
    }
    .rd-ergebnis-spieler .spieler-info { gap: 8px; }
    .rd-ergebnis-spieler .spieler-icon { width: 40px; height: 40px; border-width: 2px; }
    .rd-ergebnis-spieler .spieler-name { font-size: .82rem; }
    .rd-ergebnis-meta > strong {
      min-width: 42px; padding: 4px 9px; border-radius: 999px; text-align: center; font-size: .82rem;
    }
    .rd-ergebnis-meta > strong.richtig { color: #166534; background: #dcfce7; }
    .rd-ergebnis-meta > strong.falsch { color: #991b1b; background: #fee2e2; }
    .rd-ergebnis-meta > strong.neutral { color: #64748b; background: #f1f5f9; }
    .rd-punkteliste { display: grid; gap: 8px; margin: 8px 0 18px; padding: 0; list-style: none; }
    .rd-punkteliste li { margin: 0; }

    .kategorien-aktionen { display: flex; gap: 8px; margin: 8px 0 0; }
    .kategorien-aktionen button { flex: 1; font-size: 0.8rem; padding: 7px 8px; }
    .kategorien-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 16px; }
    .kategorie-kachel {
      position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; padding: 10px 4px; border-radius: 14px; border: 2px solid transparent;
      background: #f6f4fb; cursor: pointer; text-align: center;
    }
    .kategorie-emoji { font-size: 28px; line-height: 32px; }
    .kategorie-kachel-name { font-size: 0.7rem; font-weight: 700; color: var(--text-dunkel); line-height: 1.15; }
    .kategorie-kachel-anzahl { font-size: 0.62rem; color: var(--text-hell); }
    .kategorie-kachel.ausgewaehlt { border-color: var(--akzent); background: #efe9ff; }
    .kategorie-stimmen {
      position: absolute; top: 4px; right: 4px; background: var(--akzent); color: #fff;
      font-size: 0.65rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px;
      display: flex; align-items: center; justify-content: center; padding: 0 4px;
    }

    /* ---------- allgemeine Textbausteine ---------- */
    .hinweis-text { color: var(--text-hell); font-size: 0.85rem; margin: 0 0 6px; }
    .feld-titel { font-weight: 600; font-size: 0.9rem; margin: 14px 0 2px; }
    .fortschritt { color: #888; font-size: 0.9rem; }

    /* ---------- Spielauswahl in der Lobby ---------- */
    .spiele-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 4px; }
    .spiel-kachel {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 4px; padding: 18px 10px; border-radius: 18px; border: 2px solid transparent;
      background: #f6f4fb; cursor: pointer; text-align: center;
      transition: transform .05s ease, border-color .15s ease, background .15s ease;
    }
    .spiel-kachel:hover { border-color: var(--akzent); background: #efe9ff; }
    .spiel-kachel:active { transform: scale(0.98); }
    .spiel-kachel.passiv { cursor: default; opacity: 0.75; }
    .spiel-kachel.passiv:hover { border-color: transparent; background: #f6f4fb; }
    .spiel-kachel.kommt-bald { position: relative; opacity: 0.55; }
    .spiel-emoji { font-size: 34px; line-height: 38px; }
    .spiel-bild { display: block; height: 62px; width: auto; margin: -6px auto 0; border-radius: 5px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
    .olympiade-auswahl-grid .spiel-bild { height: 40px; margin: 0 auto; }
    .spiel-name { font-size: 0.95rem; font-weight: 800; color: var(--text-dunkel); }
    .spiel-beschreibung { font-size: 0.7rem; color: var(--text-hell); line-height: 1.2; }
    .spiel-badge {
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
      color: #fff; background: var(--akzent); border-radius: 999px; padding: 2px 8px; margin-top: 2px;
    }

    /* Abstand zwischen mehreren Karten (Lobby + laufendes Spiel) */
    #spiel-wurzel > .bildschirm-karte { margin-top: 0; }

    /* ======================================================================
       Designsystem v49 – ruhige Spielflächen, klare Spieler und große Spiele
       Die Hintergrundfarbe bleibt absichtlich eine einzelne Variable.
       ====================================================================== */
    :root {
      --app-hintergrund: #292526;
      --app-hintergrund-hell: #3a3234;
      --flaeche: #fffaf1;
      --flaeche-klar: #fffdf8;
      --linie: #e9dfd4;
      --koralle: #ff604c;
    }

    html { background: var(--app-hintergrund); }
    body {
      position: relative;
      max-width: 520px;
      padding-bottom: 48px;
      background:
        radial-gradient(circle at 12% 5%, rgba(255,255,255,.075), transparent 24%),
        linear-gradient(165deg, var(--app-hintergrund-hell), var(--app-hintergrund) 55%);
    }
    #app-version {
      position: absolute; left: 20px; bottom: 16px; z-index: 2;
      margin: 0; color: rgba(255,255,255,.72); font-size: .6rem;
      line-height: 1; letter-spacing: .03em;
    }
    .bildschirm-karte {
      background: var(--flaeche);
      border: 1px solid rgba(255,255,255,.6);
      box-shadow: 0 22px 50px rgba(8, 6, 16, .34);
    }

    /* Ruhiger Startbildschirm mit großzügigen Abständen und wenigen Motiven. */
    #start-screen {
      position: relative; isolation: isolate; overflow: hidden;
      min-height: min(790px, calc(100dvh - 96px));
      display: flex; flex-direction: column;
      padding: 44px 28px 26px;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 800' preserveAspectRatio='none'%3E%3Cpath fill='%23a93bd0' d='M0 0h168c-5 34-26 54-57 67-36 15-43 49-72 62-14 6-27 7-39 4Z'/%3E%3Cpath fill='%23d875e5' opacity='.58' d='M0 0h126c-3 23-20 38-43 48C49 62 37 84 0 93Z'/%3E%3Cpath fill='%23f6bd55' d='M270 0h120v132c-33-6-49-28-63-51-15-26-41-35-57-81Z'/%3E%3Cpath fill='%23ffd887' opacity='.75' d='M318 0h72v91c-18-6-28-20-37-37-9-18-24-28-35-54Z'/%3E%3Cpath fill='%23ff6755' d='M0 638c30 7 49 35 66 66 17 32 54 43 83 96H0Z'/%3E%3Cpath fill='%23ff9480' opacity='.68' d='M0 704c24 5 38 23 51 44 12 21 31 32 45 52H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
        var(--flaeche);
    }
    #start-screen::before {
      display: none;
    }
    #start-screen::after {
      display: none;
    }
    #start-screen .start-hero { position: relative; margin-bottom: 24px; }
    #start-screen .start-hero::before {
      display: none;
    }
    #start-screen .start-icon {
      /* v80: EINZIGE Regel fuer dieses Element (die zweite, weiter unten im
         "Designsystem v68"-Block stehende Regel ist entfernt - das war schon
         zweimal die Ursache dafuer, dass Aenderungen hier wirkungslos
         blieben bzw. sich gegenseitig ueberschrieben haben).
         Farben 1:1 wie beim Warteraum-Badge (.lobby-logo-badge), das laut
         Rueckmeldung perfekt aussieht - nur groesser. Die fruehere Vermutung
         hier ("kein CSS-Bug, sondern Kontrastproblem der cremefarbenen
         Fuchs-Stellen") war falsch bzw. unvollstaendig: die Ecken des
         weissen/cremefarbenen Rechtecks um den Fuchs blieben auch im
         privaten Modus sichtbar (also kein Cache-Effekt) UND eine
         Pixelpruefung der PNG-Datei zeigt an allen vier Bildecken alpha=0
         (voll transparent) - im Bild selbst steckt an den Ecken also nichts.
         v93: DAHER echter CSS-Clip-Bug bestaetigt - bekanntes iOS-Safari-
         Problem, dass "overflow:hidden" + "border-radius:50%" ein
         <img>-Kind nicht zuverlaessig auf den Kreis clippt (das Bild ist
         102x102 in einem 112x112-Kreis zentriert - seine RECHTECKIGEN Ecken
         liegen geometrisch ausserhalb des Kreisradius und wurden bei
         fehlgeschlagenem Clipping direkt sichtbar). Fix: zusaetzlich
         clip-path als robusterer, von overflow:hidden unabhaengiger
         Kreis-Clip - das ist der in iOS Safari fuer genau dieses Muster
         (rundes Icon-Badge) empfohlene, zuverlaessigere Ansatz. */
      /* v99 (entfernter clip-path) hat die Kerben NICHT behoben - laut
         Nutzer-Screenshot weiterhin da. v100: neue, praezisere Diagnose.
         Bekanntes WebKit/iOS-Safari-Problem: "overflow:hidden" +
         "border-radius:50%" + "box-shadow" GLEICHZEITIG auf demselben
         Element zwingt den Browser, die Kreis-Maske fuer die Kompositions-
         Ebene (wegen box-shadow noetig) nur grob anzunaehern statt sie exakt
         zu berechnen - das Ergebnis sind sichtbare Facetten/Kerben an
         bestimmten Punkten des Randes, exakt wie beschrieben. Da das <img>
         selbst laengst sein eigenes border-radius:50% hat (self-clipping,
         siehe unten), braucht dieser Wrapper "overflow:hidden" gar nicht mehr
         zum Clippen - nur entfernt, um genau diese Kombination (die den Bug
         ausloest) aufzubrechen. border-radius bleibt fuer die Form von
         Hintergrund/Rahmen, box-shadow bleibt fuer den Schlagschatten. */
      /* v101: box-shadow komplett entfernt (auch den Rand-Schatten
         "0 0 0 1px ..." - der war ohnehin redundant zum echten
         "border: 5px solid" direkt darunter) und durch filter:drop-shadow
         ersetzt. Grund: mehrere Tests via Safari Remote Web Inspector am
         echten iPhone zeigten ein WIDERSPRUECHLICHES Verhalten je nach
         box-shadow-Wert bzw. sogar bei GLEICHEM Wert bei unterschiedlichen
         Seiten-Neustarts (mal mit Kerben, mal ohne) - das spricht nicht
         fuer ein deterministisches CSS-Wert-Problem, sondern fuer einen
         instabilen WebKit-GPU-Kompositions-Bug beim Zusammenspiel von
         border-radius:50% + box-shadow auf einem Element. filter:drop-shadow
         umgeht dieses Problem strukturell: der Schatten wird anhand der
         tatsaechlich gerenderten (bereits korrekt rund geclippten) Alpha-Form
         berechnet, nicht per eigener Radius-Clip-Berechnung wie box-shadow -
         es entfaellt also genau der Schritt, der den Bug ausloest. */
      width: 112px; height: 112px; margin: 0 auto 14px; display: grid; place-items: center;
      border-radius: 50%;
      background: var(--club-ivory);
      border: 5px solid var(--club-orange);
      box-shadow: none;
      filter: drop-shadow(0 9px 22px rgba(0,0,0,.34));
    }
    #start-screen .app-icon {
      /* v77: EINZIGE Regel fuer dieses Element - vorher gab es eine zweite,
         weiter unten stehende Regel mit width/height 92px, die diese Werte
         die ganze Zeit lautlos ueberschrieben hat (siehe Kommentar dort).
         92px liess den Punkt des Fragezeichens den Kreisrand beruehren,
         deshalb kleiner: 86px mit echtem Sicherheitsabstand.
         v86: auf Wunsch minimal vergroessert (86 -> 88px) - deutlich unter
         den kritischen 92px, Sicherheitsabstand zum Kreisrand bleibt.
         v87: nochmals minimal vergroessert (88 -> 90px), bewusst noch mit
         2px Abstand zu den kritischen 92px.
         filter:none, weil drop-shadow auf iOS Safari bei dieser Kombination
         (Kreis-Clip + object-fit:contain) fehlerhaft als eckiger Schatten
         gerendert werden kann.
         v85: DAS war die eigentliche Ursache des "weissen Vierecks" - eine
         ganz frueh im File stehende, allgemeine ".app-icon"-Regel (ohne
         "#start-screen" davor, ca. Zeile 246) setzt fuer JEDES Element mit
         dieser Klasse "box-shadow: 0 6px 16px rgba(17,12,46,.25)". Diese
         Regel wurde hier nie mit box-shadow ueberschrieben, nur border-radius
         und filter - der box-shadow blieb also die ganze Zeit aktiv: ein
         weicher dunkler Schatten um ein eckiges (border-radius:0) Bild,
         sichtbar als Kanten/Schatten-Artefakt auf dem cremefarbenen Kreis.
         Per getComputedStyle bestaetigt (boxShadow war nicht "none"). Jetzt
         explizit entfernt.
         v88: auf Wunsch weiter vergroessert (90 -> 94px) - das liegt jetzt
         ÜBER den oben dokumentierten kritischen 92px. Per Pixel-Messung
         bestaetigt: bei 94px bleibt trotzdem ca. 12px Abstand zwischen dem
         Fragezeichen-Punkt und dem Kreisrand (112px-Referenzbild) - die
         alte 92px-Grenze war also zu konservativ / bezog sich auf eine
         andere Ausgangslage.
         v89: 94px war fuer den Nutzer beim Vorher/Nachher-Vergleich kaum
         wahrnehmbar (nur 6px Zuwachs seit v86 insgesamt). Deutlicher
         Sprung auf 102px, erneut per Pixel-Messung auf Abstand zum
         Kreisrand geprueft.
         v90: DER EIGENTLICHE GRUND, warum v87-v89 kaum etwas gebracht haben -
         bilder/logo-fuchs-transparent.png (1254x1254) enthielt riesigen,
         fast unsichtbaren transparenten Leerraum um den Fuchs (echter
         sichtbarer Inhalt nur ca. 743x1091px, mittig, nicht mal quadratisch).
         Jede Vergroesserung dieser Box hat also vor allem den Leerraum
         mitvergroessert, kaum den Fuchs selbst. Bild jetzt eng auf den
         sichtbaren Inhalt zugeschnitten (mit object-fit:contain skaliert
         sich der Fuchs dadurch bei GLEICHER Boxgroesse deutlich sichtbarer).
         v95/v96: Versuche, den Frageazeichen-Punkt neu zu positionieren bzw.
         wegzuschneiden - kam beim Nutzer optisch schlechter an als das
         Original. v97: Bilddatei wieder auf den unveraenderten Original-
         Zustand zurueckgesetzt (Fuchs + Punkt exakt wie urspruenglich, keine
         Verschiebung mehr). Einzige bleibende, tatsaechlich noetige Aenderung
         bleibt die Loesung fuer die weissen Ecken: object-fit:contain +
         Clipping am AEUSSEREN Wrapper-Element ist bei iOS Safari in
         Kombination mit border-radius manchmal unzuverlaessig - border-radius
         DIREKT auf dem <img> selbst wird dagegen von jedem Browser
         zuverlaessig angewendet und clippt das Bild unabhaengig vom
         Eltern-Element.
         v98: Obwohl die Bounding-Box des Fuchsmotivs im Bild links/rechts
         exakt symmetrisch ist (je 43px), WIRKT der Fuchskopf beim Nutzer
         optisch leicht nach links verschoben (der duenne, geschwungene
         Schweif rechts hat weniger "visuelles Gewicht" als der massive
         dunkle Kopf) - klassischer Effekt von mathematischer vs. optischer
         Zentrierung. Fix: Bildinhalt um 24px nach rechts verschoben (mehr
         Leerraum links als rechts), das kompensiert den Effekt, ohne dass
         am Kunstwerk selbst etwas veraendert wurde. */
      display: block; width: 102px; height: 102px; object-fit: contain; object-position: center;
      border-radius: 50%;
      filter: none;
      box-shadow: none;
    }
    #start-screen .start-hero h1 { margin-top: 0; font-size: 2.25rem; letter-spacing: -.04em; }
    #start-screen .start-tagline { font-size: 1rem; }
    #start-screen .feld-label { margin-top: 18px; color: var(--text-dunkel); font-size: .92rem; }
    #start-screen input { min-height: 54px; background: rgba(255,255,255,.72); }
    #start-screen .start-aktionen { margin-top: 20px; }
    #start-screen .btn-primaer {
      min-height: 58px; background: linear-gradient(135deg, #ff785f, var(--koralle));
      box-shadow: 0 9px 20px rgba(255,96,76,.24);
    }
    #start-screen .btn-primaer:hover { background: linear-gradient(135deg, #ff806a, #ee4e3c); }
    #start-screen .btn-sekundaer { min-height: 55px; background: rgba(255,255,255,.5); }
    .start-deko {
      position: relative; min-height: 178px; margin-top: auto; display: flex;
      align-items: flex-end; justify-content: center; padding: 10px 2px 2px;
    }
    .start-deko img {
      display: block; width: min(100%, 340px); height: auto; max-height: 180px;
      object-fit: contain; filter: drop-shadow(0 12px 12px rgba(75,40,22,.12));
    }

    /* Die Lobby zeigt Personen als horizontale, scrollbare Gruppe. */
    #top-bar:not(.im-spiel) { display: none !important; }
    #lobby-screen {
      position: relative; margin-top: 0; padding: 30px 24px 58px;
    }
    .lobby-kopf {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid #e5dbd1;
    }
    .lobby-marke { min-width: 0; display: flex; align-items: center; gap: 9px; }
    .lobby-logo-badge, .spiel-logo-badge {
      display: grid; place-items: center; flex: 0 0 auto;
      border-radius: 50%; background: #35105c; border: 2px solid #ff6b58;
      /* v101: box-shadow -> filter:drop-shadow, gleicher Grund wie bei
         #start-screen .start-icon (siehe dortigen ausfuehrlichen Kommentar) -
         box-shadow + border-radius:50% auf demselben Element war der
         instabile WebKit-Kompositions-Bug, der die Kerben verursacht hat. */
      box-shadow: none;
      filter: drop-shadow(0 5px 12px rgba(79,38,93,.18));
    }
    .lobby-logo-badge { width: 42px; height: 42px; }
    /* v97: gleicher Fix wie beim Start-Icon - Kreis-Clip direkt auf dem <img>
       (border-radius:50%), Bildgroesse wieder wie vor v95 (siehe ausfuehrlicher
       Kommentar bei #start-screen .app-icon). */
    .lobby-app-icon { display: block; width: 36px; height: 36px; object-fit: contain; object-position: center; border-radius: 50%; }
    .lobby-kopf h1 {
      min-width: 0; margin: 0; font-size: 1.55rem; line-height: 1;
      letter-spacing: -.035em; white-space: nowrap;
    }
    .lobby-verlassen {
      position: relative; flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center;
      overflow: hidden; margin: 0; padding: 0; border: 0; border-radius: 50%;
      color: #fff; background-color: #d95b51;
      background-image: url("data:image/png;base64,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");
      background-repeat: no-repeat; background-size: 63px 60px; background-position: -13px -5px;
      box-shadow: 0 7px 16px rgba(180,54,46,.24);
    }
    .lobby-verlassen:hover { filter: brightness(1.05); }
    @media (max-width: 350px) {
      #lobby-screen { padding-left: 18px; padding-right: 18px; }
      .lobby-kopf { gap: 7px; }
      .lobby-app-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
      .lobby-kopf h1 { font-size: 1.35rem; }
      .lobby-verlassen { width: 42px; height: 42px; flex-basis: 42px; }
    }
    #lobby-screen > h3 { margin: 26px 0 9px; font-size: 1.35rem; }
    .lobby-code {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      margin: 17px 0 11px; padding: 12px 16px; border: 1px solid #ded3c9;
      border-radius: 17px; background: #f3ece4; box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    }
    .lobby-code span { color: #5f6170; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
    .lobby-code strong {
      color: #5b21b6; font-family: inherit; font-size: 2.15rem; font-weight: 950;
      font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: .08em;
    }
    .lobby-spielerleiste {
      display: flex; align-items: flex-start; gap: 18px; overflow-x: auto;
      margin: 0 -5px; padding: 7px 5px 12px; scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .lobby-spielerleiste::-webkit-scrollbar { display: none; }
    .lobby-spieler {
      width: 78px; flex: 0 0 78px; display: flex; flex-direction: column; align-items: center;
      margin: 0; color: var(--text-dunkel); text-align: center;
    }
    .lobby-avatar-rahmen {
      /* v123: Kreis vergrößert (Bild besser erkennbar) und der farbige Rand
         dünner - vorher wirkte die Linie neben dem größeren Foto zu dominant. */
      position: relative; width: 76px; height: 76px; display: block; padding: 2px;
      border: 2px solid var(--spieler-farbe); border-radius: 50%; background: #fff;
      box-shadow: 0 6px 13px rgba(36,28,45,.17);
    }
    .lobby-avatar { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
    .lobby-avatar-text { align-items: center; justify-content: center; font-size: 1rem; }
    .lobby-krone {
      position: absolute; top: -15px; right: -7px; color: #f7b928; font-size: 1.25rem;
      text-shadow: 0 2px 2px rgba(0,0,0,.18); transform: rotate(10deg);
    }
    /* v185: kleiner Rauswerfen-Knopf, nur für den Spielleiter auf den
       Kacheln der anderen Mitspieler*innen sichtbar (siehe renderLobby()/
       kickeSpieler() in app.js). */
    .lobby-kick {
      position: absolute; bottom: -4px; right: -4px; width: 22px; height: 22px;
      border: 2px solid #fff; border-radius: 50%; background: #e0455b; color: #fff;
      font-size: .68rem; line-height: 1; display: flex; align-items: center; justify-content: center;
      cursor: pointer; box-shadow: 0 2px 5px rgba(36,28,45,.25); padding: 0;
    }
    .lobby-kick:hover, .lobby-kick:focus-visible { background: #c8324a; }
    .lobby-spieler strong {
      width: 100px; margin-top: 7px; font-size: .76rem; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .lobby-spieler small { margin-top: 2px; color: var(--text-hell); font-size: .62rem; line-height: 1.05; }

    /* v141: rechteckige Kachel zwischen Mitspieler-Leiste und Spielauswahl,
       sichtbar sobald in diesem Raum mindestens ein Spiel beendet wurde -
       oeffnet den Wertungs-Dialog mit der Punktetabelle aller Spiele. */
    .wertung-kachel {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; margin: 2px 0 4px; padding: 14px 18px; border: none; border-radius: 16px;
      background: linear-gradient(90deg, var(--akzent), #a78bfa);
      color: #fff; font: inherit; font-family: "Barlow Condensed", sans-serif;
      font-size: 1.3rem; font-weight: 800; letter-spacing: .02em;
      box-shadow: 0 8px 18px rgba(124,58,237,.28); cursor: pointer;
    }
    .wertung-kachel:hover { filter: brightness(1.06); }
    .wertung-kachel:active { transform: scale(.99); }
    .wertung-kachel-symbol { font-size: 1.35rem; }

    /* v198: Umschalter zwischen normaler Spielauswahl und Olympiade-Planung -
       ersetzt die fruehere separate Olympiade-Kachel/den Dialog aus v196, die
       Planung sitzt jetzt direkt in der Lobby-Karte. */
    .spielmodus-tabs {
      display: flex; gap: 6px; margin: 10px 0 2px; padding: 4px;
      border-radius: 14px; background: #f0eefa;
    }
    .spielmodus-tab {
      flex: 1 1 0; padding: 9px 10px; border: none; border-radius: 10px; background: transparent;
      font: inherit; font-weight: 700; font-size: .88rem; color: var(--text-hell); cursor: pointer;
      transition: background .15s ease, color .15s ease;
    }
    .spielmodus-tab.aktiv {
      background: #fff; color: var(--text-dunkel); box-shadow: 0 2px 6px rgba(42,30,39,.12);
    }
    .olympiade-bereich { margin-top: 2px; }
    .olympiade-zwischentitel { margin: 14px 0 6px; font-size: 1rem; }
    .olympiade-auswahl-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 4px; }
    .olympiade-auswahl-grid .spiel-kachel { min-height: 110px; padding: 12px 8px; gap: 2px; }
    .olympiade-auswahl-grid .spiel-emoji { font-size: 26px; line-height: 30px; }
    .olympiade-auswahl-grid .spiel-name { font-size: .82rem; }
    .olympiade-hinzufuegen-hinweis { font-size: .62rem; color: var(--akzent); font-weight: 700; }
    .olympiade-auswahl-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
    .olympiade-auswahl-zeile {
      display: flex; align-items: center; gap: 8px; padding: 8px 10px;
      border-radius: 12px; background: #f6f4fb;
    }
    /* v200: Ziehgriff fuer die Drag-&-Drop-Sortierung (loest die vorherigen
       ↑/↓-Buttons ab) - touch-action:none verhindert, dass das Ziehen auf dem
       Handy gleichzeitig die Seite scrollt. */
    .olympiade-zeile-griff {
      flex: none; width: 20px; text-align: center; cursor: grab;
      touch-action: none; color: var(--text-dezent, #8b849c); font-size: 1.05rem;
      user-select: none;
    }
    .olympiade-auswahl-zeile.ziehend {
      position: relative; z-index: 5; background: #ece7f9;
      box-shadow: 0 10px 22px rgba(0,0,0,.18);
    }
    .olympiade-auswahl-zeile.ziehend .olympiade-zeile-griff { cursor: grabbing; }
    .olympiade-zeile-nummer {
      width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center;
      border-radius: 50%; background: var(--akzent); color: #fff; font-size: .68rem; font-weight: 800;
    }
    .olympiade-zeile-emoji { font-size: 1.15rem; flex: none; }
    .olympiade-zeile-name { flex: 1 1 auto; font-weight: 700; font-size: .88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .olympiade-zeile-anzahl { flex: none; }
    .olympiade-anzahl-feld {
      width: 44px; padding: 5px 4px; text-align: center; border-radius: 8px;
      border: 1px solid var(--linie, #ddd6f3); font: inherit; font-variant-numeric: tabular-nums;
    }
    .olympiade-zeile-btn {
      flex: none; width: 26px; height: 26px; border: none; border-radius: 8px;
      background: #e9e4f7; color: var(--text-dunkel); font-size: .8rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center; padding: 0;
    }
    .olympiade-zeile-btn:hover { background: #ddd4f5; }
    .olympiade-zeile-btn:disabled { opacity: .4; cursor: default; }
    .olympiade-zeile-entfernen { background: #f6dade; color: #c8324a; }
    .olympiade-zeile-entfernen:hover { background: #f1c3ca; }
    .olympiade-starten-btn { margin-top: 14px; }

    /* Größere Spielkacheln – Spielname und Symbol bilden den Blickfang. */
    .spiele-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .spiel-kachel {
      min-height: 174px; gap: 8px; padding: 22px 12px; border: 1px solid var(--linie);
      border-radius: 22px; background: var(--flaeche-klar);
      box-shadow: 0 8px 18px rgba(42,30,39,.07);
    }
    .spiel-kachel:hover { background: #f7f0ff; }
    .spiel-emoji { font-size: 46px; line-height: 50px; }
    .spiel-bild { height: 80px; }
    .spiel-name { font-family: "Barlow Condensed", sans-serif; font-size: 1.38rem; line-height: 1; }
    .spiel-beschreibung { max-width: 150px; font-size: .75rem; line-height: 1.25; }

    /* Gemeinsame Punktezeile: Änderung/Platz links, Spielerfarbe in Ring und Balken,
       Gesamtstand rechts in der Display-Schrift. */
    .spieler-zacken { display: none; }
    .spieler-karte {
      min-height: 78px; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 18px;
      color: #f8faff; background: linear-gradient(145deg, #182039, #111629);
      border: 1px solid rgba(131,148,202,.2); box-shadow: 0 8px 19px rgba(12,14,27,.18);
    }
    .spieler-karte::after { display: none; }
    .spieler-punkte {
      width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
      border: 2px solid rgba(255,255,255,.42); border-radius: 50%; background: var(--spieler-farbe);
      font-size: .9rem; text-shadow: none;
    }
    .spieler-punkte.positiv { color: #052e16; background: #61e59a; border-color: #b9f8d2; }
    .spieler-punkte.negativ { color: #4c0519; background: #fb7185; border-color: #fecdd3; }
    .spieler-info { gap: 10px; }
    .spieler-icon {
      width: 52px; height: 52px; border: 3px solid var(--spieler-farbe);
      box-shadow: 0 0 0 2px rgba(255,255,255,.88), 0 4px 12px rgba(0,0,0,.28);
    }
    .spieler-name { font-size: .93rem; }
    .spieler-extra { margin-top: 1px; color: #bec7df; font-size: .69rem; }
    .spieler-fortschritt {
      width: 100%; height: 7px; display: block; overflow: hidden; margin-top: 7px;
      border-radius: 999px; background: #303955;
    }
    .spieler-fortschritt i {
      height: 100%; display: block; border-radius: inherit; background: var(--spieler-farbe);
      box-shadow: 0 0 8px color-mix(in srgb, var(--spieler-farbe), transparent 30%);
    }
    .spieler-punkte-gesamt {
      min-width: 31px; flex: 0 0 auto; color: #fff; font-family: "Bungee", sans-serif;
      font-size: 1.65rem; font-style: normal; line-height: 1; text-align: right;
      text-shadow: none;
    }
    .spieler-identitaet { min-height: 70px; }
    .spieler-identitaet .spieler-info { flex: 1; }
    .spieler-identitaet .spieler-icon { width: 52px; height: 52px; }
    .spieler-identitaet .spieler-name { font-size: 1rem; }

    /* Ruhigere Spieloberflächen mit großen, plakativen Titeln. Ausnahme (v167):
       #sf-dk-kategorie bei Schätzfragen bleibt sichtbar - beim Dummkopf-Tippen
       ist die Frage selbst noch nicht zu sehen, die Kategorie ist dort also der
       einzige Hinweis (anders als auf den anderen Bildschirmen, wo die Frage
       ohnehin schon dasteht und das kleine Kategorie-Label nur Ballast wäre). */
    #spiel-wurzel .bildschirm-karte { padding: 25px 21px; background: var(--flaeche); }
    #spiel-wurzel .bildschirm-karte > .kategorie:not(#sf-dk-kategorie),
    #sf-setup > h1, #dg-setup > h1, #zt-setup > h1, #rd-setup > h1, #wi-setup > h1, #ww-setup > h1, #fi-setup > h1, #imp-setup > h1 { display: none; }
    #spiel-wurzel .bildschirm-karte > h1,
    #spiel-wurzel .rd-kategorie-kopf h1 {
      font-family: "Barlow Condensed", sans-serif; font-size: clamp(2.15rem, 10vw, 3rem);
      line-height: .98; letter-spacing: -.02em;
    }
    #spiel-wurzel .bildschirm-karte > h1 { margin-top: 8px; }
    .kategorie-kachel, .zt-rater-ansicht, .zt-regel {
      background: var(--flaeche-klar); border: 1px solid var(--linie);
    }
    .rd-kategorie-kopf {
      padding: 18px; border: 1px solid #ded4ff; background: #f8f4ff; box-shadow: none;
    }
    .rd-kandidat, .zt-begriff {
      color: #29194b; border: 1px solid #d8c7ff;
      background: linear-gradient(145deg, #f3edff, #e7dcff); box-shadow: none;
    }
    .rd-punkteliste, .zt-punkteliste { gap: 9px; }
    #rd-zwischenstand > h3, #zt-zwischenstand > h3 { margin-top: 24px; font-size: 1.35rem; }

    /* Gemeinsamer Spielkopf: Navigation und Spielidentität bleiben außerhalb
       der wechselnden Karten immer an derselben Stelle. */
    #top-bar.im-spiel {
      position: relative;
      display: flex; flex-direction: column; align-items: flex-start; gap: 13px;
      margin: 0 0 14px; padding: 14px 17px 17px; text-align: left;
      border: 1px solid rgba(102,137,255,.38); border-radius: 22px;
      background:
        linear-gradient(140deg, rgba(28,38,70,.98), rgba(10,16,34,.98)),
        var(--app-hintergrund);
      box-shadow: 0 14px 28px rgba(7,9,20,.22), inset 0 1px 0 rgba(255,255,255,.08);
    }
    /* v112: gemeinsame Rundenfortschrittsanzeige (z. B. "2/8") oben links im
       Spielkopf - für alle Spiele einheitlich, statt je Spiel eine eigene
       "Frage X von Y"-Zeile auf dem Bildschirm zu wiederholen.
       v200: von oben rechts nach oben links gewechselt, damit sie beim
       Spielleiter nicht mehr mit dem "<- Spielauswahl"-Text und bei
       Mitspieler*innen nicht mehr mit dem runden Verlassen-Symbol denselben
       Eck-Platz teilt - beide Buttons sitzen jetzt einheitlich oben rechts. */
    .spiel-kopf-fortschritt {
      position: absolute; top: 14px; left: 17px;
      font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-style: italic;
      font-size: 1.15rem; color: #dfe7ff; letter-spacing: .02em;
      background: rgba(255,255,255,.1); padding: 3px 12px; border-radius: 999px;
    }
    /* v200: sowohl die Text-Pille des Spielleiters ("<- Spielauswahl") als
       auch das runde Verlassen-Symbol der Mitspieler*innen sitzen jetzt
       einheitlich oben RECHTS (align-self statt des Flex-Flusses von links),
       während die Rundenanzeige oben links eigenen Platz hat. */
    #top-bar.im-spiel button {
      align-self: flex-end;
      margin: 0; padding: 7px 12px 7px 9px; border: 0; border-radius: 999px;
      color: #dfe7ff; background: rgba(255,255,255,.09); font-size: .78rem;
    }
    #top-bar.im-spiel button:hover { background: rgba(255,255,255,.16); }
    /* v189: Mitspieler*innen sehen statt der Text-Pille dasselbe runde
       Symbol wie im Hauptmenü (.lobby-verlassen) - siehe
       aktualisiereRaumNavigation() in app.js. */
    #top-bar.im-spiel button.verlassen-icon {
      width: 40px; height: 40px; padding: 0; border-radius: 50%;
      display: grid; place-items: center;
      background-color: #bd4e4d;
    }
    #top-bar.im-spiel button.verlassen-icon:hover { background-color: #d85a50; }
    #top-bar.im-spiel button.verlassen-icon img { display: block; width: 20px; height: 20px; }
    .spiel-kopf-titel { display: flex; align-items: center; gap: 12px; width: 100%; }
    .spiel-kopf-icon {
      min-width: 58px; font-size: 3.25rem; line-height: 1; text-align: center;
      filter: drop-shadow(0 7px 8px rgba(0,0,0,.24));
    }
    .spiel-kopf-icon img { display: block; width: 58px; height: 58px; border-radius: 16px; }
    .spiel-logo-badge { width: 58px; height: 58px; }
    /* v97: gleicher Fix wie beim Start-Icon - Kreis-Clip direkt auf dem <img>
       (border-radius:50%), Bildgroesse wie vor v95 (siehe ausfuehrlicher
       Kommentar bei #start-screen .app-icon). */
    .spiel-logo-badge img { width: 50px; height: 50px; object-fit: contain; object-position: center; border-radius: 50%; }
    .spiel-kopf-titel strong {
      color: #fff; font-family: "Barlow Condensed", sans-serif; font-style: italic;
      font-size: clamp(2.35rem, 11vw, 3.2rem); line-height: .9; letter-spacing: -.025em;
      text-shadow: 0 3px 0 rgba(0,0,0,.2);
    }

    @media (max-width: 370px) {
      body { padding-inline: 10px; }
      #lobby-screen, #spiel-wurzel .bildschirm-karte { padding-inline: 17px; }
      .spiel-kachel { min-height: 154px; padding-inline: 8px; }
      .spiel-name { font-size: 1.2rem; }
      .spieler-karte { padding-right: 10px; }
      .spieler-punkte { width: 32px; height: 32px; }
      .spieler-icon { width: 46px; height: 46px; }
      #top-bar.im-spiel { padding-inline: 13px; }
      .spiel-kopf-icon { min-width: 50px; font-size: 2.8rem; }
      .spiel-kopf-titel strong { font-size: 2.25rem; }
      .spiel-kopf-fortschritt { top: 11px; left: 13px; font-size: 1rem; padding: 2px 10px; }
    }

    @media (max-height: 720px) {
      #start-screen { min-height: 620px; padding-top: 30px; }
      #start-screen .start-icon { width: 94px; height: 94px; margin-bottom: 8px; }
      #start-screen .app-icon { width: 74px; height: 74px; }
      .start-deko { min-height: 116px; padding-top: 8px; }
      .start-deko img { max-height: 118px; }
    }

    /* ======================================================================
       Designsystem v68 – Dark Clubhouse / Minimal Ink
       ====================================================================== */
    :root {
      --app-hintergrund: #120d17;
      --app-hintergrund-hell: #251727;
      --club-ink: #18101d;
      --club-ink-2: #24152a;
      --club-ink-3: #352039;
      --club-ivory: #fff9ed;
      --club-ivory-2: #f5ede1;
      --club-orange: #ff5b36;
      --club-orange-dunkel: #e94628;
      --club-linie: rgba(255, 111, 79, .68);
      --club-text: #fffaf3;
      --club-muted: #bdb3c0;
      --akzent: var(--club-orange);
      --akzent-dunkel: var(--club-orange-dunkel);
      --text-dunkel: #211827;
      --text-hell: #756e7d;
      --flaeche: var(--club-ink);
      --flaeche-klar: var(--club-ivory);
      --linie: rgba(255,255,255,.13);
      --koralle: var(--club-orange);
      /* v84: Design "C" (diagonaler Farbverlauf) - vom Nutzer aus 4 echten,
         in der App gerenderten Vorschlaegen ausgewaehlt. Kein SVG, keine
         Kontur-Rekonstruktion mehr - einfach ein durchgehender, deckender
         diagonaler linear-gradient. Da dieser vollstaendig deckend ist,
         ueberdeckt er die pro Karte leicht unterschiedlichen Fallback-
         Verlaeufe (die zweite Ebene in jeder "background:"-Zeile) komplett -
         die muessen deshalb nicht einzeln angefasst werden. */
      --club-glow: linear-gradient(135deg, #3d2544 0%, #251728 32%, #18101d 62%, #120d17 100%);
    }

    /* v137: --club-glow je aktivem Spiel eingefaerbt statt immer Lila -
       gleiche Verlaufsstruktur, nur die erste Farbe wechselt (Vorschlag B). */
    body[data-spiel="schaetzfragen"]  { --club-glow: linear-gradient(135deg, color-mix(in srgb, #ff6b5c 32%, #3d2544) 0%, #251728 32%, #18101d 62%, #120d17 100%); }
    body[data-spiel="denk-gleich"]    { --club-glow: linear-gradient(135deg, color-mix(in srgb, #818cf8 32%, #3d2544) 0%, #251728 32%, #18101d 62%, #120d17 100%); }
    body[data-spiel="zehn-treffer"]   { --club-glow: linear-gradient(135deg, color-mix(in srgb, #ffa94d 32%, #3d2544) 0%, #251728 32%, #18101d 62%, #120d17 100%); }
    body[data-spiel="reih-dich-ein"] { --club-glow: linear-gradient(135deg, color-mix(in srgb, #2dd4bf 32%, #3d2544) 0%, #251728 32%, #18101d 62%, #120d17 100%); }
    body[data-spiel="wer-ist-es"]     { --club-glow: linear-gradient(135deg, color-mix(in srgb, #4ade80 32%, #3d2544) 0%, #251728 32%, #18101d 62%, #120d17 100%); }
    body[data-spiel="blitzquiz"]      { --club-glow: linear-gradient(135deg, color-mix(in srgb, #fbbf24 32%, #3d2544) 0%, #251728 32%, #18101d 62%, #120d17 100%); }
    body[data-spiel="finto"]          { --club-glow: linear-gradient(135deg, color-mix(in srgb, #38bdf8 32%, #3d2544) 0%, #251728 32%, #18101d 62%, #120d17 100%); }
    body[data-spiel="imposter"]        { --club-glow: linear-gradient(135deg, color-mix(in srgb, #fb7185 32%, #3d2544) 0%, #251728 32%, #18101d 62%, #120d17 100%); }

    html { background: var(--app-hintergrund); }
    body {
      color: var(--club-text);
      background: linear-gradient(155deg, #2a1b2c 0%, #171019 46%, #100c14 100%);
      background-attachment: fixed;
    }
    .bildschirm-karte {
      color: var(--club-text); background: var(--club-glow) center/100% 100% no-repeat, var(--club-ink);
      border: 1px solid rgba(255,115,90,.66);
      box-shadow: 0 22px 48px rgba(0,0,0,.38);
    }
    input {
      color: var(--text-dunkel); background: var(--club-ivory);
      border-color: #dfd4c7;
    }
    input::placeholder { color: #9d969f; }
    input:focus { border-color: var(--club-orange); box-shadow: 0 0 0 3px rgba(255,91,54,.2); }
    button { background: var(--club-orange); }
    button:hover { background: var(--club-orange-dunkel); }
    .btn-primaer {
      color: #fff; background: linear-gradient(135deg, #ff673f, #ff4e2e);
      border: 1px solid #ff805f; box-shadow: 0 8px 18px rgba(255,73,39,.2);
    }
    .btn-sekundaer, .btn-flach {
      color: #ff714e; background: transparent; border: 2px solid var(--club-orange);
    }
    .btn-sekundaer:hover, .btn-flach:hover { color: #fff; background: rgba(255,91,54,.13); }
    .hinweis-text, .fortschritt { color: var(--club-muted); }
    .feld-label { color: var(--club-text); }

    #start-screen {
      min-height: min(790px, calc(100dvh - 96px));
      background: var(--club-glow) center/100% 100% no-repeat, linear-gradient(160deg, #251728 0%, #18101d 50%, #120d17 100%);
    }
    #start-screen .start-hero h1, #start-screen .feld-label { color: var(--club-text); }
    #start-screen .start-tagline { color: var(--club-muted); }
    #start-screen input { color: var(--text-dunkel); background: var(--club-ivory); border-color: #e6d9c9; }
    #start-screen .btn-primaer { background: linear-gradient(135deg, #ff673f, #ff4e2e); }
    #start-screen .btn-sekundaer { color: #ff714e; background: transparent; border-color: var(--club-orange); }
    #app-version { color: rgba(255,250,243,.64); }
    .start-deko {
      min-height: 118px; align-items: center; justify-content: flex-start; gap: 12px;
      padding: 24px 0 10px; margin-top: auto;
    }
    .start-symbol {
      width: 52px; height: 52px; display: grid; place-items: center;
      color: #f4ece8; border: 1px solid rgba(255,250,243,.42); border-radius: 12px;
      background: rgba(255,255,255,.025); font-size: 1.65rem; font-weight: 700;
    }
    .start-symbol svg {
      width: 29px; height: 29px; fill: none; stroke: currentColor;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    }
    .start-symbol-frage { font-family: Georgia, serif; font-size: 2rem; }

    @media (max-height: 720px) {
      .start-deko { min-height: 76px; padding-top: 12px; gap: 9px; }
      .start-symbol { width: 43px; height: 43px; border-radius: 10px; }
      .start-symbol svg { width: 24px; height: 24px; }
    }

    /* Durchgaengiges Clubhouse-Motiv */
    button:focus-visible, input:focus-visible {
      outline: 3px solid #ffad94;
      outline-offset: 3px;
    }
    .beitreten-dialog, .raum-verlassen-dialog {
      background: rgba(8, 5, 11, .78);
      backdrop-filter: blur(12px);
    }
    .beitreten-dialog-inhalt, .raum-verlassen-dialog-inhalt {
      color: var(--club-text);
      background: var(--club-glow) center/100% 100% no-repeat, var(--club-ink);
      border: 1px solid rgba(255, 115, 90, .7);
      box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    }
    .beitreten-dialog-inhalt h2, .raum-verlassen-dialog-inhalt h2 { color: var(--club-text); }
    .beitreten-schliessen {
      color: var(--club-orange);
      background: rgba(255, 91, 54, .1);
      border: 1px solid rgba(255, 112, 78, .55);
    }
    .beitreten-schliessen:hover { color: #fff; background: rgba(255, 91, 54, .24); }
    .raum-verlassen-symbol {
      color: var(--club-orange);
      background-color: rgba(255, 91, 54, .12);
      border-color: rgba(255, 112, 78, .62);
    }
    .btn-gefahr {
      color: #fff;
      background: linear-gradient(135deg, #ff6742, #e9402a);
      border: 1px solid #ff8064;
    }

    .wertung-kachel {
      background: linear-gradient(90deg, var(--club-orange), #ffb066);
      color: #2a1305;
      box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
    }
    .spielmodus-tabs { background: rgba(255, 255, 255, .06); }
    .spielmodus-tab { color: #cfc3d1; }
    .spielmodus-tab.aktiv { background: rgba(255, 255, 255, .14); color: var(--club-text); box-shadow: none; }
    .olympiade-auswahl-zeile { background: rgba(255, 255, 255, .06); }
    .olympiade-auswahl-zeile.ziehend { background: rgba(255, 255, 255, .12); }
    .olympiade-zeile-griff { color: rgba(255, 255, 255, .55); }
    .olympiade-zeile-name { color: var(--club-text); }
    .olympiade-anzahl-feld {
      background: rgba(0, 0, 0, .25); color: var(--club-text);
      border-color: rgba(255, 255, 255, .18);
    }
    .olympiade-zeile-btn { background: rgba(255, 255, 255, .12); color: var(--club-text); }
    .olympiade-zeile-btn:hover { background: rgba(255, 255, 255, .2); }
    .olympiade-zeile-entfernen { background: rgba(220, 73, 61, .3); color: #ff9d94; }
    .olympiade-zeile-entfernen:hover { background: rgba(220, 73, 61, .45); }
    .wertung-dialog { background: rgba(8, 5, 11, .78); backdrop-filter: blur(12px); }
    .wertung-dialog-inhalt {
      color: var(--club-text);
      background: var(--club-glow) center/100% 100% no-repeat, var(--club-ink);
      border: 1px solid rgba(255, 115, 90, .7);
      box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    }
    .wertung-dialog-inhalt h2 { color: var(--club-text); }
    .wertung-tabelle th, .wertung-tabelle td { border-bottom-color: rgba(255, 255, 255, .14); }
    .wertung-tabelle .wertung-spieler-kopf { color: #cfc3d1; }
    .wertung-tabelle .wertung-gesamt-zelle { color: var(--club-orange); }

    #lobby-screen {
      background: var(--club-glow) center/100% 100% no-repeat, linear-gradient(158deg, #251728 0%, #18101d 54%, #120d17 100%);
      border-color: rgba(255, 115, 90, .68);
    }
    .lobby-kopf {
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(255, 130, 101, .35);
    }
    .lobby-kopf h1, #lobby-screen > h3 { color: var(--club-text); }
    .lobby-logo-badge, .spiel-logo-badge {
      background: var(--club-ivory);
      border: 3px solid var(--club-orange);
      /* v101: siehe Kommentar bei #start-screen .start-icon - box-shadow
         durch filter:drop-shadow ersetzt, um den WebKit-Kerben-Bug zu
         umgehen. Diese Regel hier ueberschreibt (spaeter in der Kaskade)
         die weiter oben stehende .lobby-logo-badge-Regel - daher muss der
         Fix hier ZUSAETZLICH gesetzt werden. */
      box-shadow: none;
      filter: drop-shadow(0 5px 14px rgba(0, 0, 0, .28));
    }
    .lobby-verlassen {
      color: #fff4ef;
      background-color: #bd4e4d;
      border: 1px solid #ff8b7d;
      box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
    }
    .lobby-verlassen:hover { background-color: #d85a50; }
    .lobby-code {
      color: #29202b;
      background: linear-gradient(135deg, #fffdf7, #fff5e7);
      border: 1.5px solid var(--club-orange);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
    }
    .lobby-code span { color: #6e6671; }
    .lobby-code strong {
      color: #f14d32;
      font-family: "Barlow Condensed", sans-serif;
      font-variant-numeric: tabular-nums;
      letter-spacing: .08em;
    }
    .lobby-spieler strong { color: var(--club-text); }
    .lobby-spieler small { color: var(--club-muted); }
    .lobby-avatar-rahmen {
      /* v102: auf Wunsch nur noch EIN Ring in der Spielerfarbe - der
         innere dunkle Ring kam vom Hintergrund (#251b29) in der 3px-
         Polsterung zwischen Foto und Rahmen. Entfernt: Hintergrund jetzt in
         der Spielerfarbe selbst (dadurch wirkt die Polsterung wie ein Teil
         des einen farbigen Rings statt wie ein eigener Ring).
         v103: der aeussere weisse Ring kommt auf Wunsch zurueck, aber
         duenner (1px statt vorher 2px). Bewusst wieder per box-shadow-Spread
         gelöst (nicht per outline o.ae.) - dieses Element war nie von dem
         Kerben-Rendering-Bug betroffen, der beim Fuchs-Logo auftrat (dort
         nur bei #start-icon/.lobby-logo-badge/.spiel-logo-badge, siehe
         deren Kommentare); hier war der Ring in jedem bisherigen Screenshot
         sauber rund. */
      background: var(--spieler-farbe);
      box-shadow: 0 0 0 1px var(--club-ivory), 0 6px 15px rgba(0, 0, 0, .36);
    }
    .spiel-kachel {
      /* v139: gleiches dunkles Verlaufs-Design wie der lila Hintergrund
         (--club-glow), nur je Spiel in dessen eigener Farbe statt Lila -
         Kachelfarbe kommt ueber --sf (--spiel-farbe, von app.js gesetzt). */
      --sf: var(--spiel-farbe, #ff5b36);
      color: var(--club-text);
      background: linear-gradient(135deg, color-mix(in srgb, var(--sf) 55%, #3d2544) 0%, color-mix(in srgb, var(--sf) 18%, #251728) 32%, #18101d 62%, #120d17 100%);
      border: 1.5px solid color-mix(in srgb, var(--sf) 85%, transparent);
      box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
    }
    .spiel-kachel:hover {
      color: var(--club-text);
      background: linear-gradient(135deg, color-mix(in srgb, var(--sf) 68%, #3d2544) 0%, color-mix(in srgb, var(--sf) 28%, #251728) 32%, #18101d 62%, #120d17 100%);
      border-color: var(--sf);
    }
    .spiel-kachel.passiv:hover {
      background: linear-gradient(135deg, color-mix(in srgb, var(--sf) 40%, #3d2544) 0%, color-mix(in srgb, var(--sf) 12%, #251728) 32%, #18101d 62%, #120d17 100%);
      border-color: color-mix(in srgb, var(--sf) 60%, transparent);
    }
    .spiel-name { color: var(--club-text); }
    .spiel-beschreibung { color: #cfc3d1; }

    #profil-screen {
      color: var(--club-text);
      background: var(--club-glow) center/100% 100% no-repeat, linear-gradient(160deg, #251728 0%, #18101d 54%, #110c15 100%);
    }
    #profil-screen::before, #profil-screen::after, .profil-zacken { display: none; }
    .profil-kopf { text-shadow: 0 5px 20px rgba(0, 0, 0, .65); }
    .profil-kopf h1 { color: var(--club-text); }
    .profil-kopf::after { background: var(--club-orange); box-shadow: 0 0 14px rgba(255, 91, 54, .38); }
    .profil-verlassen {
      color: var(--club-text);
      background: rgba(15, 10, 19, .58);
      border: 1px solid rgba(255, 112, 78, .78);
    }
    .profil-verlassen:hover { color: #fff; background: rgba(255, 91, 54, .16); }
    .karussell-pfeil {
      color: var(--club-text);
      background: rgba(18, 12, 23, .9);
      border-color: rgba(255, 112, 78, .82);
      box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
    }
    .karussell-pfeil:hover { color: #fff; background: rgba(255, 91, 54, .2); }
    .profil-kategorie-btn {
      color: var(--club-text);
      background: rgba(18, 12, 23, .9);
      border-color: rgba(255, 112, 78, .82);
    }
    .profil-kategorie-btn:hover { background: rgba(255, 91, 54, .2); }
    .profil-kategorie-btn.aktiv {
      background: var(--club-orange); color: #fff;
      box-shadow: 0 0 0 3px rgba(255, 91, 54, .3), 0 9px 24px rgba(0, 0, 0, .42);
    }
    .farb-option {
      border-color: rgba(255, 250, 243, .62);
      box-shadow: 0 7px 18px rgba(0, 0, 0, .32);
    }
    .farb-option.aktiv {
      border-color: #fff;
      box-shadow: 0 0 0 4px var(--club-orange), 0 9px 24px rgba(0, 0, 0, .42);
    }
    .icon-option {
      background: #19121c;
      border-color: rgba(255, 250, 243, .42);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
    }
    .icon-option.aktiv {
      border-color: var(--club-ivory);
      box-shadow: 0 0 0 5px var(--club-orange), 0 17px 34px rgba(0, 0, 0, .48);
    }
    .profil-spielername { color: var(--club-text); text-shadow: 0 4px 16px rgba(0, 0, 0, .8); }
    .profil-auswaehlen {
      color: #fff;
      background: linear-gradient(135deg, #ff673f, #ff4e2e);
      border-color: #ff8b6f;
      box-shadow: 0 10px 24px rgba(255, 71, 38, .22);
    }
    .profil-auswaehlen:hover { background: linear-gradient(135deg, #ff7854, #ff5534); }
    .profil-hinweis { color: #ffb4a0; background: rgba(143, 37, 36, .42); }

    #top-bar.im-spiel {
      color: var(--club-text);
      background: var(--club-glow) center/100% 100% no-repeat, linear-gradient(145deg, #251728, #171019);
      border: 1px solid rgba(255, 115, 90, .68);
      box-shadow: 0 14px 32px rgba(0, 0, 0, .34);
    }
    #top-bar.im-spiel button {
      color: var(--club-text);
      background: rgba(12, 8, 16, .5);
      border-color: var(--club-orange);
    }
    #top-bar.im-spiel button:hover { background: rgba(255, 91, 54, .15); }
    .spiel-kopf-titel strong { color: var(--club-text); text-shadow: 0 4px 14px rgba(0, 0, 0, .46); }
    .spiel-kopf-fortschritt { color: var(--club-text); background: rgba(12, 8, 16, .5); border: 1px solid var(--club-orange); }

    #spiel-wurzel .bildschirm-karte {
      color: var(--club-text);
      background: var(--club-glow) center/100% 100% no-repeat, linear-gradient(158deg, #241627 0%, #18101d 55%, #110c15 100%);
      border: 1px solid rgba(255, 115, 90, .68);
    }
    #spiel-wurzel h1, #spiel-wurzel h2, #spiel-wurzel h3,
    #spiel-wurzel .schalter-text { color: var(--club-text); }
    #spiel-wurzel .kategorie { color: #ff8567; }
    #spiel-wurzel .hinweis-text, #spiel-wurzel .fortschritt { color: var(--club-muted); }
    #spiel-wurzel hr { border-color: rgba(255, 130, 101, .28); }
    .zt-regel,
    .zt-rater-ansicht, .rd-kategorie-kopf, .rd-kandidat {
      color: #2a1c2d;
      background: linear-gradient(145deg, #fffdf7, #fff5e9);
      border: 1px solid rgba(255, 91, 54, .58);
      box-shadow: 0 8px 18px rgba(0, 0, 0, .19);
    }
    .zt-regel,
    .rd-kategorie-kopf p { color: #6f6672; }
    #spiel-wurzel .rd-kategorie-kopf h1, .rd-kandidat strong { color: #2d1735; }
    .rd-kategorie-kopf strong { color: #7b2eea; background: #f1e8ff; }
    .schalter-regler { background: #53495a; border: 1px solid rgba(255,255,255,.18); }
    .schalter input:checked + .schalter-regler { background: var(--club-orange); }
    .schalter input:disabled + .schalter-regler { opacity: .5; }
    .kategorien-aktionen button {
      color: var(--club-orange);
      background: transparent;
      border-color: var(--club-orange);
    }
    .kategorie-kachel {
      color: #2b2030;
      background: linear-gradient(145deg, #fffdf8, #fff6eb);
      border: 1px solid #ddcfc3;
      box-shadow: 0 5px 13px rgba(0, 0, 0, .16);
    }
    .kategorie-kachel-name { color: #2b2030; }
    .kategorie-kachel-anzahl { color: #746b75; }
    .kategorie-kachel.ausgewaehlt {
      color: #27152f;
      background: #fff0e9;
      border-color: var(--club-orange);
      box-shadow: 0 0 0 2px rgba(255, 91, 54, .22), 0 7px 16px rgba(0,0,0,.18);
    }

    .spieler-karte {
      color: #fff;
      background: linear-gradient(135deg,
        color-mix(in srgb, var(--spieler-farbe, #6b7280) 58%, #211427),
        color-mix(in srgb, var(--spieler-farbe, #6b7280) 28%, #100c15));
      border: 1px solid color-mix(in srgb, var(--spieler-farbe, #6b7280) 62%, #fff);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
    }
    .spieler-punkte { color: #fff; background: rgba(7, 5, 10, .38); border-color: rgba(255, 255, 255, .46); }
    .spieler-punkte.positiv { color: #d9ffe8; background: #176c45; border-color: #62e89d; }
    .spieler-punkte.negativ { color: #ffe3e4; background: #8e2934; border-color: #ff8790; }
    .spieler-punkte-gesamt { color: #fff8ed; text-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
    .spieler-extra { color: rgba(255, 255, 255, .7); }
    .spieler-fortschritt { background: rgba(255,255,255,.16); }
    .spieler-fortschritt i { background: linear-gradient(90deg, #ff7a55, #ffd17d); }

    .zt-begriff {
      color: #27182d;
      background: linear-gradient(145deg, #fffdf7, #fff2e5);
      border: 1.5px solid var(--club-orange);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
    }
    #spiel-wurzel .zt-begriff { color: #27182d; }
    .zt-aktive-einheit, .zt-runden-status, .zt-runden-ergebnis { color: var(--club-text); }
    .zt-timer {
      color: var(--club-text); background: #130d17; border: 3px solid var(--club-orange);
      box-shadow: 0 0 0 6px rgba(255, 91, 54, .1), 0 9px 22px rgba(0,0,0,.33);
    }
    .zt-timer span { color: var(--club-muted); }
    .zt-team { color: var(--club-text); background: #211729; border-color: rgba(255,255,255,.18); }
    .zt-team-blau { background: linear-gradient(145deg, #182a47, #151827); border-color: #4a8dea; }
    .zt-team-rot { background: linear-gradient(145deg, #4a202a, #23141d); border-color: #e96368; }
    .zt-treffer { color: #2b1c2f; background: #fffaf1; border-color: #ded2c7; }
    .zt-treffer:hover { color: #2b1c2f; background: #fff0e8; border-color: var(--club-orange); }
    .zt-treffer:disabled:hover { background: #fffaf1; border-color: #ded2c7; }
    .zt-treffer.getroffen, .zt-treffer.getroffen:disabled:hover { color: #dfffea; background: #195c3d; border-color: #4bd78a; }
    .zt-punkte-team { color: var(--club-text); background: #21172a; border-color: rgba(255,255,255,.18); }

    .rd-skala i { background: var(--club-orange); }
    .rd-skala i::before, .rd-skala i::after { border-color: var(--club-orange); }
    .rd-skala span { color: #ff9b80; background: rgba(255, 91, 54, .12); }
    .rd-position { color: #ff8a6b; background: rgba(13, 9, 17, .42); border-color: var(--club-orange); }
    .rd-position:hover { color: #fff; background: var(--club-orange); }
    .rd-position:disabled { color: rgba(255,255,255,.46); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
    .rd-reihen-begriff, .rd-ergebnis-begriff, .rd-kategorie-ergebnis-kopf {
      color: #2a1b2e; background: linear-gradient(145deg, #fffdf7, #fff5e9); border-color: #e2d4c7;
    }
    .rd-reihen-begriff span, .rd-ergebnis-begriff-kopf > span, .rd-ergebnis-meta { color: #766d77; }
    .rd-reihen-begriff.neu { border-color: var(--club-orange); box-shadow: 0 0 0 2px rgba(255,91,54,.16); }
    .rd-letztes-ergebnis.richtig { color: #d8ffe7; border-color: #3ed47f; background: #174c35; }
    .rd-letztes-ergebnis.falsch { color: #ffe1df; border-color: #f16f68; background: #63282e; }

    @media (min-width: 760px) {
      .bildschirm-karte, #profil-screen, #top-bar.im-spiel { border-width: 1.5px; }
    }

    /* v69: scharfe Symbole und kompaktere Spieleinstellungen */
    .lobby-verlassen {
      background-image: none;
      background-color: #bd4e4d;
    }
    .lobby-verlassen img {
      display: block;
      width: 32px;
      height: 32px;
      object-fit: contain;
    }

    .setup-anzahlblock, .setup-modusblock {
      position: relative;
      margin: 18px 0 0;
      padding: 13px 14px;
      border: 1px solid rgba(255, 130, 101, .28);
      border-radius: 16px;
      background: rgba(255, 255, 255, .035);
    }
    .setup-anzahl-zeile, .setup-moduszeile {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: var(--club-text);
      font-size: 1rem;
      font-weight: 750;
    }
    /* v104: einheitliches Zahlenfeld fuer "Anzahl X" in allen Spielen -
       ersetzt sowohl das fruehere Dropdown/Zahlenrad (Schaetzfragen) als
       auch den Plus/Minus-Stepper (Wer ist es?) und die unformatierten
       Zahlenfelder (Reih dich ein!, Denk gleich!, 10 Treffer!). */
    .anzahl-picker {
      position: relative;
      flex: 0 0 80px;
    }
    .anzahl-eingabe {
      width: 100%;
      min-height: 40px;
      margin: 0;
      padding: 5px 8px;
      color: #24182a;
      background: var(--club-ivory);
      border: 1px solid #dfd2c6;
      border-radius: 11px;
      font: inherit;
      font-size: 1rem;
      font-weight: 800;
      text-align: center;
      font-variant-numeric: tabular-nums;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 5px 13px rgba(0,0,0,.18);
    }
    .anzahl-eingabe:focus-visible {
      outline: 3px solid #ffad94;
      outline-offset: 2px;
      border-color: var(--club-orange);
    }
    .anzahl-eingabe:disabled { opacity: .55; }
    .setup-anzahlblock > .hinweis-text {
      display: block;
      margin-top: 9px;
      font-size: .8rem;
      line-height: 1.35;
    }
    /* v106: der Modus-Umschalter (Dummkopf-/Team-Modus) zeigt den Text jetzt
       immer links und den Schalter immer rechts im Kästchen; das Info-"i"
       sitzt klein und hochgestellt direkt hinter dem Wort statt separat am
       rechten Rand. Der Schalter steckt dafür in einem eigenen <label>, das
       nur ihn selbst umschließt - so löst ein Klick auf das "i" nicht
       versehentlich den Schalter mit aus. */
    .modus-text-zeile { display: inline-flex; align-items: baseline; gap: 2px; min-width: 0; }
    .setup-moduszeile .schalter-text { white-space: nowrap; }
    .setup-moduszeile .schalter-zeile { flex: 0 0 auto; }
    .modus-info {
      display: inline-flex;
      align-self: flex-start;
      margin-left: 1px;
    }
    .modus-info summary {
      width: 15px;
      height: 15px;
      display: grid;
      place-items: center;
      cursor: pointer;
      list-style: none;
      color: #fff;
      background: var(--club-orange);
      border: 1px solid #ff9b81;
      border-radius: 50%;
      font-family: Georgia, serif;
      font-size: .58rem;
      font-weight: 800;
      font-style: italic;
      box-shadow: 0 3px 8px rgba(0,0,0,.22);
    }
    .modus-info summary::-webkit-details-marker { display: none; }
    .modus-info[open] summary { background: var(--club-orange-dunkel); }
    /* v108: der Infotext öffnet jetzt direkt über dem "i", rechtsbündig innerhalb
       des umgebenden Kästchens (nicht mehr relativ zum "i" selbst) - so bleibt er
       immer innerhalb des sichtbaren Bereichs und man muss nicht mehr nach rechts
       scrollen, um ihn ganz zu lesen. */
    .modus-info > div {
      position: absolute;
      z-index: 20;
      bottom: calc(100% + 8px);
      right: 14px;
      left: auto;
      top: auto;
      width: min(260px, calc(100% - 28px));
      padding: 12px 13px;
      color: #302334;
      background: var(--club-ivory);
      border: 1px solid var(--club-orange);
      border-radius: 13px;
      font-size: .8rem;
      font-weight: 500;
      line-height: 1.4;
      box-shadow: 0 13px 28px rgba(0,0,0,.38);
    }

    @media (max-width: 350px) {
      .setup-anzahlblock, .setup-modusblock { padding-inline: 11px; }
      .setup-anzahl-zeile, .setup-moduszeile { gap: 9px; font-size: .92rem; }
      .anzahl-picker { flex-basis: 68px; }
      .modus-text-zeile { white-space: normal; }
    }

    /* v70: kein rechteckiger Safari-Filterrand am Logo */
    #start-screen .app-icon, .lobby-app-icon, .spiel-logo-badge img {
      filter: none;
    }

    /* Ruhiges, standardisiertes Ausloggen-Symbol */
    .lobby-verlassen img {
      width: 27px;
      height: 27px;
    }

    /* v72: zurueck zum ruhigen, einheitlichen Clubhouse-Verlauf (v71s
       gebaenderter SVG-Hintergrund passte an den Kartenraendern nicht
       zusammen und wurde daher wieder entfernt - body und Karten nutzen
       jetzt wieder denselben weichen Verlauf ohne harte Uebergaenge).
       v77: die zweite, doppelte #start-screen .app-icon Regel, die hier
       frueher stand, ist entfernt - sie hat lautlos width/height 92px
       erzwungen und jede Groessenaenderung weiter oben im Code wirkungslos
       gemacht. Es gibt jetzt nur noch die eine Regel oben im Code. */

    /* ======================================================================
       "Wer ist es?" - Buzzer, Hinweise
       v104: der eigene ".wi-anzahl-zeile/-stepper"-Plus/Minus-Block ist
       entfernt - "Anzahl Runden" nutzt jetzt dieselben gemeinsamen Klassen
       wie alle anderen Spiele (.setup-anzahlblock/.setup-anzahl-zeile/
       .anzahl-picker/.anzahl-eingabe, siehe weiter oben).
       ====================================================================== */

    .wi-hinweis-aktuell {
      margin: 10px 0 8px; padding: 16px 14px;
      border-radius: 16px; border: 1px solid rgba(255, 130, 101, .28);
      background: rgba(255, 255, 255, .035);
      font-size: 1.25rem; font-weight: 750; line-height: 1.35;
    }
    .wi-hinweis-liste { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
    .wi-hinweis-liste li {
      color: var(--club-muted); font-size: 0.85rem; opacity: .8;
      padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .02);
    }
    .wi-countdown { color: var(--club-muted); font-size: 0.85rem; margin: 0 0 14px; }

    /* v95: Liste der bisherigen Fehlversuche dieser Runde - bewusst in Rot/Orange,
       damit der Punktabzug optisch erkennbar ist, aber deutlich zurückhaltender
       als der Buzzer-Button, damit nichts mit ihm verwechselt wird. */
    .wi-falsch-liste { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
    .wi-falsch-liste li {
      color: #ffb4a3; font-size: 0.85rem; font-weight: 600;
      padding: 7px 10px; border-radius: 10px;
      background: rgba(255, 91, 54, .1); border: 1px solid rgba(255, 91, 54, .22);
    }

    .wi-buzzer {
      width: 100%; padding: 20px; font-size: 1.35rem; font-weight: 800;
      border-radius: 18px; border: none; color: #fff;
      background: linear-gradient(160deg, #ff8a68, #ff5b36);
      box-shadow: 0 10px 24px rgba(255, 91, 54, .35);
    }
    .wi-buzzer:disabled { opacity: .45; box-shadow: none; }
    .wi-buzzer:not(:disabled):active { transform: scale(.98); }

    .wi-antwort-zeile { display: flex; gap: 8px; }
    .wi-antwort-zeile input { flex: 1; min-width: 0; }

    /* ======================================================================
       Blitzquiz - Mehrfachauswahl-Kacheln, Buchstaben-Rätsel
       ====================================================================== */
    .bz-antwort-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
      margin: 14px 0;
    }
    .bz-antwort-btn {
      min-height: 64px; margin: 0; padding: 12px 10px;
      border: 1px solid rgba(255, 130, 101, .32); border-radius: 16px;
      background: rgba(255, 255, 255, .035);
      color: var(--club-text); font-size: 0.98rem; font-weight: 700; line-height: 1.25;
      transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
    }
    .bz-antwort-btn:not(:disabled):active { transform: scale(.97); }
    .bz-antwort-btn.bz-eigene-wahl {
      border-color: var(--club-orange); background: rgba(255, 91, 54, .16);
      box-shadow: 0 0 0 2px var(--club-orange);
    }
    .bz-antwort-btn:disabled { opacity: .6; }
    /* Nach der Auswertung (im Ergebnis-Bildschirm gibt es keine bz-antwort-btn
       mehr, die Fragen-Karte zeigt dann nur noch Text) bleibt die Kachel der
       eigenen Wahl auch dann sichtbar hervorgehoben, wenn man selbst schon
       geantwortet hat, aber die Runde noch läuft (siehe .bz-eigene-wahl oben). */

    .bz-buchstaben-reihe {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
      margin: 16px 0 6px;
    }
    .bz-buchstabe-kasten {
      width: clamp(28px, 8vw, 38px); height: clamp(34px, 9.5vw, 46px);
      display: grid; place-items: center;
      border: 1px solid rgba(255, 130, 101, .4); border-radius: 8px;
      background: rgba(255, 255, 255, .035);
      color: var(--club-text); font-size: 1.15rem; font-weight: 800;
      text-transform: uppercase;
    }
    .bz-buchstabe-kasten.bz-aufgedeckt {
      border-color: var(--club-orange); background: rgba(255, 91, 54, .14);
    }
    .bz-buchstabe-luecke {
      width: 12px; display: grid; place-items: center;
      color: var(--club-muted); font-weight: 800;
    }
    .bz-countdown { color: var(--club-muted); font-size: 0.85rem; margin: 0 0 14px; }
    .bz-antwort-zeile { display: flex; gap: 8px; }
    .bz-antwort-zeile input { flex: 1; min-width: 0; }
    .bz-bild-anzeige {
      display: flex; justify-content: center; align-items: center;
      margin: 10px 0 18px;
    }
    .bz-bild-anzeige svg {
      width: min(200px, 55vw); height: min(200px, 55vw);
      color: var(--club-orange);
      transform: scale(1.18);
      transition: filter .6s ease;
    }
    .bz-bild-anzeige img {
      width: min(240px, 65vw); height: min(240px, 65vw);
      object-fit: cover;
      border-radius: 16px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
      /* Kurze, lineare Übergangszeit passend zum 300ms-Update-Takt in
         spiel.js - dadurch wirkt die stetig sinkende Unschärfe als
         durchgehende, gleichmäßige Bewegung statt als Sprünge. */
      transition: filter .3s linear;
    }

    /* ======================================================================
       v144/v145 - Imposter: aufziehbare Karte (Name vorn, Wort/"Imposter"
       auf der Rückseite). Ziehen per Pointer Events; ein einfaches Antippen
       funktioniert als Fallback, falls das Ziehen auf einem Gerät nicht
       zuverlässig erkannt wird.
       ====================================================================== */
    .imp-karten-buehne {
      position: relative;
      max-width: 280px;
      height: 280px;
      margin: 18px auto;
    }
    .imp-karte {
      position: relative;
      width: 100%;
      height: 100%;
      touch-action: none;
    }
    .imp-karte-seite {
      position: absolute;
      inset: 0;
      border-radius: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 18px;
      text-align: center;
    }
    .imp-karte-vorne {
      z-index: 2;
      color: #fff;
      background: linear-gradient(160deg, color-mix(in srgb, var(--club-orange) 70%, #7c1d2e) 0%, #5c1524 100%);
      border: 1.5px solid rgba(255,255,255,.25);
      box-shadow: 0 14px 30px rgba(0,0,0,.4);
      transform: translateY(var(--verschiebung, 0px));
      transition: transform .28s ease, opacity .28s ease;
      cursor: grab;
    }
    .imp-karte.wird-gezogen .imp-karte-vorne { transition: none; cursor: grabbing; }
    /* v145: Karte faellt beim Loslassen IMMER zurueck (kein dauerhaftes
       Aufdecken mehr) - ".faellt-zurueck" gibt der Rueckkehr auf 0 eine kurze,
       leicht ueberschwingende Fall-Bewegung statt der linearen Zieh-Transition. */
    .imp-karte.faellt-zurueck .imp-karte-vorne {
      transition: transform .32s cubic-bezier(.34, 1.4, .64, 1);
    }
    .imp-karte-hinten {
      z-index: 1;
      color: var(--text-dunkel);
      background: var(--club-ivory);
      box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
    }
    .imp-karte-name { font-size: 1.3rem; font-weight: 800; }
    .imp-karte-figur { font-size: 3rem; }
    .imp-karte-pfeil { font-size: 1.6rem; animation: imp-pfeil-schweben 1.4s ease-in-out infinite; }
    @keyframes imp-pfeil-schweben {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }
    .imp-karte-hinweis { font-weight: 700; letter-spacing: .02em; }
    .imp-rueckseite-symbol { font-size: 2.4rem; }
    .imp-karte-hinten strong { font-size: 1.5rem; }
    .imp-rueckseite-zusatz { font-size: .85rem; color: var(--text-hell); max-width: 220px; }
    .imp-runde-hinweis { text-align: center; }
    .imp-start-anzeige {
      text-align: center; font-weight: 700; color: var(--akzent); margin: 4px 0 0;
    }

    /* ======================================================================
       v146 - Finto: Antwort-Kacheln (Abstimmung + Auflösung) als 2-spaltiges
       Raster mit abgerundeten Kacheln, statt einer einfachen Liste - jede
       Kachel traegt oben ein Namensschild ("Deine Finte" bei der eigenen
       Antwort, sonst - erst in der Auflösung - der Name der Person, die sich
       die Antwort ausgedacht hat, bzw. "Richtig" bei der echten Antwort).
       In der Auflösung zeigen kleine Profilbild-Kreise, wer für diese Kachel
       gestimmt hat, statt einer Namensliste.
       ====================================================================== */
    .fi-kachel-raster {
      display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; margin: 16px 0;
    }
    .fi-kachel-wrapper { position: relative; }
    .fi-kachel-pill {
      position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
      background: var(--club-ink); color: var(--club-text); border: 1px solid rgba(255,255,255,.25);
      font-size: .68rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
      padding: 3px 10px; border-radius: 999px; z-index: 1;
    }
    .fi-kachel-pill-eigene { background: var(--akzent); border-color: var(--akzent); color: #fff; }
    .fi-kachel-pill-richtig { background: #4ade80; border-color: #4ade80; color: #123018; }
    .fi-kachel {
      width: 100%; min-height: 92px; box-sizing: border-box;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
      text-align: center; background: var(--club-ink-2); color: var(--club-text);
      border: 1.5px solid rgba(255,255,255,.18); border-radius: 16px; padding: 16px 10px 10px;
      font-size: .95rem; font-weight: 700;
    }
    .fi-kachel-knopf { cursor: pointer; }
    .fi-kachel-knopf:hover:not(:disabled) { border-color: var(--akzent); background: var(--club-ink-3); }
    .fi-kachel-knopf:disabled { cursor: default; opacity: .75; }
    .fi-kachel-knopf.ausgewaehlt {
      border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 26%, var(--club-ink-2)); opacity: 1;
    }
    .fi-kachel-eigene { opacity: .8; border-style: dashed; }
    .fi-kachel-richtig { border-color: #4ade80; background: color-mix(in srgb, #4ade80 20%, var(--club-ink-2)); }
    .fi-kachel-text { font-weight: 700; }
    .fi-kachel-waehler { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 22px; }
    .fi-erg-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--club-ink); }
    .fi-erg-keine-stimmen { font-size: .72rem; font-weight: 400; color: var(--club-muted); }

    /* Gemeinsame Warteanzeige: Profilbilder der noch nicht fertigen Spieler
       (aktuell genutzt von Finto und Schätzfragen). */
    .warten-block {
      display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
      gap: 8px; margin: 14px 0; min-height: 1px;
    }
    .warten-avatar {
      width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
      border: 2px solid var(--club-ink); opacity: .55; filter: grayscale(35%);
      transition: opacity .2s ease, filter .2s ease;
    }
    .warten-avatar-text {
      width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center;
      justify-content: center; font-size: 1rem; background: #eee; opacity: .55;
    }
    .warten-block.warten-einzeln { flex-direction: column; gap: 10px; margin: 18px 0; }
    .warten-avatar-gross {
      width: 88px; height: 88px; opacity: 1; filter: none; border-width: 3px;
      box-shadow: 0 8px 20px rgba(0,0,0,.28);
    }
    .warten-block.warten-einzeln .warten-avatar-text { width: 88px; height: 88px; font-size: 2.2rem; opacity: 1; }
    .warten-text { margin: 0; font-weight: 700; text-align: center; }

    /* Bereit-System (v190): Bereit-Button für Mitspieler*innen + Profilbild-
       Übersicht für den Spielleiter im Setup-Bildschirm jedes Spiels. */
    /* v200: bewusst gruen statt orange - hebt sich klar von den normalen
       Primaer-Buttons ab und signalisiert "positive, eigene Aktion". */
    .bereit-btn.btn-primaer {
      margin-top: 6px;
      background: linear-gradient(135deg, #34c465, #22a350);
      border-color: #4fdc80;
      box-shadow: 0 8px 18px rgba(34,163,80,.28);
    }
    .bereit-btn.btn-primaer:hover { background: linear-gradient(135deg, #3fd473, #1f9a4a); }
    .bereit-bereich {
      display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
      gap: 10px; margin: 14px 0;
    }
    .bereit-avatar-wrapper { position: relative; width: 46px; height: 46px; }
    .bereit-avatar {
      width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block;
      border: 2px solid var(--club-ink); opacity: .4; filter: grayscale(45%) brightness(.75);
      transition: opacity .2s ease, filter .2s ease;
    }
    .bereit-avatar-text {
      width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center;
      justify-content: center; font-size: 1.1rem; background: #eee;
      opacity: .4; filter: brightness(.75); transition: opacity .2s ease, filter .2s ease;
    }
    .bereit-avatar-wrapper.bereit .bereit-avatar,
    .bereit-avatar-wrapper.bereit .bereit-avatar-text { opacity: 1; filter: none; }
    .bereit-haken {
      position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px;
      border-radius: 50%; background: #16a34a; color: #fff; font-size: .72rem; font-weight: 900;
      display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
    }

    /* Schätzfragen-Auswertung als Balkendiagramm (v155, v159 groesser, v160 auf
       Zeilen-Layout umgestellt, v161 Balken mit Luecke zum Profilbild - in v162
       komplett auf ein CSS-Grid umgebaut: Spalte 1 = Punkte (wie in den anderen
       Spielen links vor dem Profilbild), Spalte 2 = Profilbild+Name, Spalte 3 =
       Balken. Weil alle Zeilen dasselbe Grid nutzen, hat Spalte 3 in jeder Zeile
       exakt dieselbe Breite/Startposition - die uebergreifende Ziellinie (ein
       einzelnes Element, das ueber alle Zeilen der Spalte 3 gespannt wird) liegt
       dadurch garantiert auf derselben Skala wie jeder einzelne Balken, egal wie
       lang Name oder Punktetext in einer Zeile sind. */
    .sf-erg-liste-balken {
      display: grid; grid-template-columns: auto auto 1fr auto; align-items: stretch;
      column-gap: 10px; row-gap: 14px; position: relative; margin: 4px 0 6px;
    }
    /* Punkte links vor dem Profilbild - wie in den anderen Spielen wird dafür
       bewusst dieselbe Kreis-Komponente (spieler-punkte/positiv/negativ)
       wiederverwendet, damit Farbe/Form überall identisch aussehen (v164). */
    .sf-erg-punkte-links { grid-column: 1; align-self: center; justify-self: center; }
    .sf-erg-info {
      grid-column: 2; display: flex; align-items: center; gap: 8px;
      min-width: 0; max-width: 132px; overflow: hidden;
    }
    .sf-erg-avatar {
      width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
      border: 3px solid rgba(255, 255, 255, .85); flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    }
    .sf-erg-name {
      font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-style: italic;
      font-size: .93rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sf-erg-spur {
      grid-column: 3; position: relative; min-height: 60px;
      background: rgba(255, 255, 255, .07); border-radius: 16px; overflow: hidden;
    }
    .sf-erg-balken {
      position: absolute; top: 0; bottom: 0; left: 0; border-radius: 16px;
      transition: width .2s ease;
    }
    /* Der Tipp (die Schätzung) steht rechts, als Kapsel über der Spur - so
       bleibt er immer lesbar, egal wie lang der Balken darunter gerade ist. */
    .sf-erg-tipp {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 2;
      display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .32);
      padding: 5px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none;
    }
    .sf-erg-tipp-wert {
      font-family: "Bungee", sans-serif; font-size: 1rem; color: #fff; white-space: nowrap;
    }
    .sf-erg-punkte-dk { font-size: .72rem; }
    /* Gesamtpunktstand ganz rechts (v173) - wie in den anderen Spielen soll
       nach jeder Auswertung sofort sichtbar sein, wo jeder Spieler insgesamt
       steht, nicht nur die Punkte dieser Runde. */
    .sf-erg-punkte-gesamt {
      grid-column: 4; align-self: center; justify-self: end; text-align: right;
      font-family: "Bungee", sans-serif; font-size: 1.15rem; color: #fff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .55); min-width: 30px;
    }
    /* Ein einzelnes Element, das ueber die Balken-Spalte (3) aller Zeilen
       gespannt wird (grid-row wird beim Rendern per Inline-Style gesetzt) -
       dadurch automatisch dieselbe Breite/Skala wie jeder Balken. */
    .sf-erg-ziel-ueberlagerung { grid-column: 3; position: relative; pointer-events: none; }
    .sf-erg-ziel-linie {
      position: absolute; top: -18px; bottom: 0; width: 2px;
      background: repeating-linear-gradient(to bottom, var(--club-orange) 0 6px, transparent 6px 11px);
      box-shadow: 0 0 6px rgba(255, 91, 54, .55); transform: translateX(-1px);
    }
    .sf-erg-ziel-tag {
      position: absolute; top: -20px; transform: translateX(-50%);
      background: var(--club-orange); color: #fff; font-family: "Bungee", sans-serif;
      font-size: .66rem; padding: 2px 7px; border-radius: 6px; white-space: nowrap;
    }

    /* ======================================================================
       Doppelblick! - zwei runde Symbolkarten, Auswertung wie bei Blitzquiz'
       Schnelligkeits-Fragen (siehe .bz-antwort-btn) mit eigener Optik.
       ====================================================================== */
    .db-anleitung { text-align: center; }
    .db-karten-bereich {
      display: flex; flex-direction: column; align-items: center; gap: 18px;
      margin: 10px 0 14px;
    }
    .db-karten-bereich-klein { gap: 12px; margin: 8px 0 12px; }
    .db-karte {
      position: relative; width: min(78vw, 300px); aspect-ratio: 1 / 1;
      border-radius: 50%; flex-shrink: 0;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
      /* v175: erlaubt "cqw"-Einheiten (% der eigenen Kartenbreite) fuer die
         Emoji-Schriftgroesse - so laesst sich die inline pro Symbol gesetzte
         font-size (siehe rendereKarten() in spiel.js) exakt an die ebenfalls
         individuelle Kachelgroesse koppeln, ohne fuer jede Groesse eine
         eigene CSS-Klasse zu brauchen. */
      container-type: inline-size;
    }
    .db-karten-bereich-klein .db-karte { width: min(58vw, 220px); }
    .db-karte-a { background: radial-gradient(circle at 30% 26%, #eaf3ff, #bcdcff 62%, #7fb8f2); border: 4px solid #4a8dea; }
    .db-karte-b { background: radial-gradient(circle at 30% 26%, #fff0ee, #ffc9c2 62%, #f28a7f); border: 4px solid #e96368; }
    .db-symbol {
      position: absolute; margin: 0; padding: 0; border: none; background: transparent;
      display: flex; align-items: center; justify-content: center;
      font-size: clamp(20px, 7vw, 34px); line-height: 1;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28));
      transition: transform .1s ease, filter .15s ease;
      /* v187: ohne das hier kann iOS Safari den nativen Tap-Ring eines
         angetippten Symbol-Buttons an dessen Bildschirmposition "kleben"
         lassen, wenn die Karte direkt danach per innerHTML durch eine neue
         Karte mit anderen Symbolen ersetzt wird (z. B. Turm-Modus nach
         richtigem Tipp) - sichtbar als scheinbar "markiertes" falsches
         Symbol an der alten Stelle. */
      -webkit-tap-highlight-color: transparent;
    }
    .db-karten-bereich-klein .db-symbol { font-size: clamp(15px, 5vw, 24px); }
    button.db-symbol:not(:disabled):active { filter: brightness(.92); }
    button.db-symbol:disabled { opacity: .55; }
    .db-symbol.db-symbol-richtig {
      filter: drop-shadow(0 0 0 transparent);
      outline: 3px solid #22c55e; outline-offset: 3px; border-radius: 50%;
      background: rgba(34, 197, 94, .22);
    }
    .db-symbol.db-symbol-falsch {
      outline: 3px solid #ef4444; outline-offset: 3px; border-radius: 50%;
      background: rgba(239, 68, 68, .22);
    }

    /* ---------- Doppelblick! Turm-Modus (v179): eigener Kartenstapel je
       Spieler*in + gemeinsame Mitte-Karte, siehe zeigeTurm() in spiel.js. */
    .db-modus-zeile-kopf { margin-bottom: 10px; }
    .db-modus-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .db-modus-btn {
      margin: 0; padding: 11px 10px; border-radius: 12px;
      background: transparent; color: var(--akzent);
      border: 2px solid var(--akzent); font-weight: 700; font-size: .92rem;
      text-align: center;
    }
    .db-modus-btn:hover { background: rgba(124,58,237,0.08); }
    .db-modus-btn.db-modus-aktiv {
      background: var(--akzent); color: #fff;
      box-shadow: 0 6px 16px rgba(124,58,237,.32);
    }
    .db-modus-btn:disabled { opacity: .55; cursor: not-allowed; }
    .db-turm-hinweis { margin: 6px 0 0; font-size: .82rem; }
    .db-turm-bereich {
      display: flex; flex-direction: column; align-items: center; gap: 18px;
      margin: 10px 0 16px;
    }
    .db-turm-spalte { display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .db-turm-label { margin: 0; font-weight: 700; font-size: .85rem; color: var(--text-hell); }
    .db-karte-turm-eigene { background: radial-gradient(circle at 30% 26%, #eaf3ff, #bcdcff 62%, #7fb8f2); border: 4px solid #4a8dea; }
    .db-karte-turm-mitte { background: radial-gradient(circle at 30% 26%, #fff7e6, #ffe1a8 62%, #f2b84a); border: 4px solid #e9a636; }
    .db-turm-staende {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 14px;
    }
    .db-turm-stapel-item { display: flex; align-items: center; gap: 6px; }
    .db-turm-stapel-avatar, .db-turm-stapel-avatar-text {
      width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
      border: 2px solid rgba(0,0,0,.12);
    }
    .db-turm-stapel-avatar-text { display: flex; align-items: center; justify-content: center; background: #eee; font-size: 1rem; }
    .db-turm-stapel-anzahl {
      min-width: 22px; padding: 3px 8px; border-radius: 999px; text-align: center;
      background: var(--akzent); color: #fff; font-weight: 800; font-size: .85rem;
      font-variant-numeric: tabular-nums;
    }
    .db-turm-sieger-hinweis { margin: 2px 0 0; font-weight: 700; color: var(--akzent); }

/* ---------------------------------------------------------------------------
   Zeitgefühl! - Countdown-Anzeige und großer, runder roter Buzzer. Bewusst
   NICHT die bestehende .wi-buzzer-Farbe (Orange) wiederverwendet, da hier
   ausdrücklich ein roter, runder Buzzer gewünscht ist. */
.zg-mitte { text-align: center; }
.zg-ziel-anzeige { font-size: 1.15rem; margin: 0 0 6px; }
.zg-ziel-anzeige strong { font-size: 1.4rem; color: var(--akzent); }
.zg-countdown-ziffer {
  font-size: 4.5rem; font-weight: 800; margin: 18px 0 4px;
  font-variant-numeric: tabular-nums;
}
.zg-buzzer-btn {
  width: 200px; height: 200px; border-radius: 50%; border: none;
  margin: 10px auto; display: block;
  font-size: 1.5rem; font-weight: 800; letter-spacing: .04em; color: #fff;
  background: radial-gradient(circle at 32% 28%, #ff6b5c, #e0261a 68%, #a8150c);
  box-shadow: 0 14px 30px rgba(224, 38, 26, .45), inset 0 -6px 14px rgba(0, 0, 0, .25);
}
.zg-buzzer-btn:disabled { opacity: .45; box-shadow: none; }
.zg-buzzer-btn:not(:disabled):active { transform: scale(.96); }

/* v205: statt eines weiteren Text-Schritts ("Los!") signalisiert jetzt ein
   kurzer roter Bildschirmblitz eindeutig den genauen Startzeitpunkt. Das
   Element steckt im Buzzer-Bildschirm und wird beim Umschalten von "hidden"
   auf sichtbar automatisch neu von Opak auf Transparent animiert (der
   Browser startet eine CSS-Animation neu, sobald ein Element von
   display:none in den normalen Fluss wechselt) - pointer-events:none, damit
   ein schneller Klick auf den Buzzer waehrenddessen nicht blockiert wird. */
.zg-flash-overlay {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: #ff2418;
  animation: zg-flash .5s ease-out forwards;
}
@keyframes zg-flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   Merk's dir! - nummerierte Merkliste, Tipp-Gitter und die immer sichtbare
   Status-Leiste (volle Helligkeit = noch dabei, gedimmt + rotes Kreuz =
   in diesem Durchgang ausgeschieden). */
.md-emoji-liste, .md-emoji-gitter {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0;
}
.md-emoji-eintrag {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 12px; background: rgba(127, 140, 141, .12);
}
.md-emoji-nr { font-size: .72rem; font-weight: 700; opacity: .65; }
.md-emoji-symbol { font-size: 1.8rem; line-height: 1; }
.md-emoji-bild {
  width: 40px; height: 40px; object-fit: cover; border-radius: 10px;
  display: block; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.md-emoji-btn {
  font-size: 1.8rem; line-height: 1; padding: 14px 4px; border-radius: 14px; border: none;
  background: rgba(127, 140, 141, .14); box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
}
.md-emoji-btn:disabled { opacity: .4; }
.md-emoji-btn:not(:disabled):active { transform: scale(.94); }
.md-emoji-btn.md-eigene-wahl { outline: 3px solid var(--akzent); opacity: 1; }

.md-status-liste {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0;
  justify-content: center;
}
.md-status-eintrag .spieler-karte { min-height: auto; width: auto; padding: 6px 10px; }
.md-status-eintrag.md-ausgeschieden .spieler-karte { opacity: .4; filter: grayscale(.6); }
.md-status-eintrag.md-ausgeschieden .spieler-icon { position: relative; }
.md-status-eintrag.md-ausgeschieden .spieler-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 44%, #e0261a 47%, #e0261a 53%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #e0261a 47%, #e0261a 53%, transparent 56%);
}

/* ======================================================================
   Länderumrisse - Umriss-Anzeige, Texteingabe
   ====================================================================== */
.lu-umriss-anzeige {
  display: flex; justify-content: center; align-items: center;
  margin: 10px 0 18px;
}
.lu-svg {
  width: min(220px, 60vw); height: min(220px, 60vw);
  color: var(--akzent);
}
.lu-svg path { fill: currentColor; }
.lu-buchstaben-reihe {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin: 6px 0 14px;
}
.lu-buchstabe-kasten {
  width: clamp(22px, 6.5vw, 32px); height: clamp(28px, 8vw, 40px);
  display: grid; place-items: center;
  border: 1px solid var(--linie, rgba(255,255,255,.13)); border-radius: 7px;
  background: rgba(255, 255, 255, .035);
  color: var(--club-text, var(--text-dunkel)); font-size: 1rem; font-weight: 800;
  text-transform: uppercase;
}
.lu-buchstabe-kasten.lu-aufgedeckt {
  border-color: var(--akzent); background: rgba(255, 91, 54, .14);
}
.lu-buchstabe-luecke {
  width: 10px; display: grid; place-items: center;
  color: var(--club-muted, var(--text-hell)); font-weight: 800;
}
.lu-antwort-zeile { display: flex; gap: 8px; }
.lu-antwort-zeile input { flex: 1; min-width: 0; }

/* ======================================================================
   Stimmt's? - Behauptung, Stimmt/Stimmt-nicht-Tasten
   ====================================================================== */
.st-aussage {
  font-size: 1.15rem; font-weight: 700; line-height: 1.4;
  margin: 6px 0 16px;
}
.st-antwort-tasten {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 14px 0;
}
.st-antwort-btn {
  min-height: 58px; margin: 0; padding: 12px 10px;
  border: 1px solid var(--linie, #e5e0f0); border-radius: 16px;
  background: var(--flaeche-klar, #fff);
  color: var(--text-dunkel); font-size: 1rem; font-weight: 800;
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.st-antwort-btn:not(:disabled):active { transform: scale(.97); }
.st-antwort-ja {
  background: #2fae60; border-color: #24924f; color: #fff;
}
.st-antwort-ja:hover { background: #279551; }
.st-antwort-nein {
  background: #e0362b; border-color: #c02c22; color: #fff;
}
.st-antwort-nein:hover { background: #c22e24; }
.st-antwort-btn.st-eigene-wahl {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
}
.st-antwort-btn:disabled { opacity: .6; }


/* ---------- Fußball-Auktion (v220: Kartengröße, Lesbarkeit, echte Flaggen) ---------- */
.fa-karten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.fa-karte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 190px;
  margin: 0 auto;
}
.fa-karte-art {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  container-type: inline-size;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.fa-karte-bg { position: absolute; inset: 0; }
.fa-karte-bg-top {
  background: linear-gradient(135deg, var(--n-top) 0%, color-mix(in srgb, var(--n-top) 65%, black) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 63%);
}
.fa-karte-bg-mid {
  background: var(--n-mid);
  clip-path: polygon(0 60%, 100% 35%, 100% 43%, 0 68%);
}
.fa-karte-bg-bottom {
  background: linear-gradient(135deg, var(--n-bottom) 0%, color-mix(in srgb, var(--n-bottom) 55%, black) 100%);
  clip-path: polygon(0 65%, 100% 40%, 100% 100%, 0 100%);
}
.fa-karte-carbon {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px);
}
.fa-karte-portrait {
  position: absolute; z-index: 2; bottom: 13%; right: 2%; height: 64%; width: auto;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .4));
  -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none;
  outline: none; border: none; pointer-events: none;
}
.fa-karte-platzhalter {
  position: absolute; z-index: 2; bottom: 19%; right: -2%; width: 54%; height: auto;
}
.fa-karte-namebox {
  position: absolute; z-index: 3; top: 4%; left: 5%; max-width: 56%; line-height: 1.05;
}
.fa-vorname {
  display: block; font-size: 6.4cqw; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; opacity: .85; text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.fa-nachname {
  display: block; margin-top: 1.5cqw; font-size: 9.2cqw; font-weight: 800; letter-spacing: .01em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 5px color-mix(in srgb, var(--n-akzent) 55%, transparent);
}
.fa-karte-rating {
  position: absolute; z-index: 3; top: 4%; right: 5%; width: 18%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(0, 0, 0, .6); border: 2px solid var(--n-akzent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--n-akzent) 45%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.fa-karte-rating span {
  font-size: 7.2cqw; font-weight: 800; color: #fff;
  text-shadow: 0 0 3px color-mix(in srgb, var(--n-akzent) 70%, transparent); line-height: 1;
}
.fa-karte-rating-plus {
  position: absolute; z-index: 3; top: 6.2%; right: 24%;
  padding: 0.6cqw 2.2cqw; border-radius: 3cqw;
  background: #16a34a; color: #fff; font-size: 5cqw; font-weight: 800; line-height: 1.15;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.fa-bonus-plus {
  margin-left: .8cqw; font-size: 3.6cqw; font-weight: 800; color: #0b7a2b;
}
.fa-boni-legende ul { margin: 4px 0; padding-left: 18px; }
.fa-boni-legende li { margin: 2px 0; }
.fa-bonus-zeile { flex-wrap: wrap; margin: 6px 0; }
.fa-bonus-auswahl { padding: 4px 6px; border-radius: 6px; max-width: 48%; }
.fa-rabatt-zeile {
  margin: 6px 0 2px; padding: 4px 8px; border-radius: 6px; font-size: .9em;
  background: rgba(22, 163, 74, .16);
}
.fa-karte-flaggenbadge {
  position: absolute; z-index: 3; top: calc(4% + 18%); right: -1%; width: 30%;
  aspect-ratio: 2.5 / 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
}
.fa-karte-flaggenbadge svg { display: block; width: 100%; height: 100%; }
.fa-karte-statwrap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 20%; overflow: hidden; }
.fa-karte-statovl {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--n-bottom) 40%, #161a20) 0%, rgba(8, 9, 12, .94) 100%);
}
.fa-karte-statgrid {
  position: relative; height: 100%; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 0.6cqw; column-gap: 1cqw;
  padding: 1.6cqw 0; align-items: center; justify-items: center;
}
.fa-karte-chip {
  display: flex; justify-content: space-between; align-items: center; gap: 3px;
  width: 90%;
  background: rgba(214, 217, 222, .5); border-radius: 1.8cqw; padding: 0 2cqw;
  font-size: 4.6cqw; font-weight: 700; color: #16181c;
}
.fa-karte-chip-kuerzel { opacity: .7; font-size: 3.7cqw; }
.fa-karte-chip-wert { font-size: 5.4cqw; }
.fa-karte-chip-aktiv {
  background: rgba(214, 217, 222, .5);
  box-shadow: inset 0 0 0 1.5px #ffd700;
}
.fa-gebot-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fa-gebot-eingabe {
  width: 80px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, .2);
  text-align: right;
}
.fa-karten-grid-ergebnis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fa-karte-ergebnis {
  max-width: 230px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 8px;
}
.fa-auktion-gewinner { margin-top: 4px; }
.fa-karte-waehlbar { cursor: pointer; }
.fa-karte-spielen-btn { align-self: flex-start; }

.fa-gebote-ueberschrift { font-size: .78em; opacity: .65; margin-top: 2px; }
.fa-gebote-liste { display: flex; flex-direction: column; gap: 4px; }
.fa-gebot-eintrag {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px; font-size: .85em;
  background: color-mix(in srgb, var(--spieler-farbe, #22c55e) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--spieler-farbe, #22c55e);
}
.fa-gebot-gewinner {
  background: color-mix(in srgb, var(--spieler-farbe, #22c55e) 32%, transparent);
  box-shadow: inset 3px 0 0 var(--spieler-farbe, #22c55e), 0 0 0 1.5px var(--spieler-farbe, #22c55e);
  font-weight: 700;
}
.fa-gebot-sieger-abzeichen { font-size: 1em; line-height: 1; }
.fa-gebot-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.fa-gebot-name { flex: 1; }
.fa-gebot-betrag { opacity: .9; display: inline-flex; align-items: center; gap: 3px; }
.fa-muenze {
  display: inline-block;
  position: relative;
  flex: none;
  width: 1.15em; height: 1.15em;
  vertical-align: -0.2em;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff3b8 0%, #ffd34d 30%, #f0a91c 68%, #c27d08 100%);
  border: .09em solid #9a5f00;
  box-shadow: 0 .06em .12em rgba(0,0,0,.35), inset 0 0 0 .08em #ffe58a;
  font-size: 1em;
}
.fa-muenze::before {
  content: "";
  position: absolute; inset: .2em;
  border-radius: 50%;
  border: .06em solid rgba(122, 74, 0, .55);
}
.fa-muenze::after {
  content: "\2605";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .62em; line-height: 1;
  color: #8a5300;
  text-shadow: 0 .05em 0 rgba(255,240,170,.8);
}
.fa-gebot-betrag .fa-muenze { font-size: .95em; }
.fa-kopfzeile { display: flex; align-items: center; justify-content: center; gap: .35em; flex-wrap: wrap; }
.fa-kopfzeile .fa-muenze { font-size: 1.1em; vertical-align: 0; }
.fa-trenn { opacity: .6; }
.fa-eigene-karten { margin: 8px 0 10px; }
.fa-eigene-karten-titel { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin-bottom: 4px; }
.fa-eigene-karten-reihe { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.fa-eigene-karte { flex: 0 0 190px; zoom: .5; }
.fa-eigene-karte .fa-karte { max-width: none; margin: 0; }
.fa-eigene-gespielt { opacity: .45; }

/* ===== Fußball-Auktion: Spielanleitung (v253) ===== */
.fa-anl-knopf {
  display: block; margin: 0 0 10px auto; font-size: .85rem; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.4);
}
.fa-anl-knopf:hover { background: rgba(255,255,255,.28); }
body.fa-anl-offen { overflow: hidden; }
.fa-anl {
  position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column;
  max-width: 480px; margin: 0 auto; color: #f4f2ff;
  background: radial-gradient(120% 80% at 50% 0%, #2a2160 0%, #14112b 60%, #0c0a1c 100%);
  padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
}
.fa-anl-kopf { display: flex; align-items: center; gap: 10px; }
.fa-anl-fortschritt { flex: 1; display: flex; gap: 4px; }
.fa-anl-seg { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.fa-anl-seg i { display: block; height: 100%; width: 0; background: #fff; }
.fa-anl-seg.fa-anl-fertig i { width: 100%; }
.fa-anl-seg.fa-anl-aktiv i { animation: fa-anl-fuellen linear forwards; }
@keyframes fa-anl-fuellen { from { width: 0; } to { width: 100%; } }
.fa-anl-x { margin: 0; padding: 4px 10px; background: rgba(255,255,255,.12); border-radius: 999px; font-size: .9rem; }
.fa-anl-titel { font-size: 1.45rem; font-weight: 800; margin: 14px 0 6px; letter-spacing: .01em; }
.fa-anl-buehne { flex: 1; overflow-y: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; }
.fa-anl-szene { display: flex; flex-direction: column; gap: 12px; font-size: 1.02rem; line-height: 1.45; }
.fa-anl-szene p { margin: 0; }
.fa-anl-klein { font-size: .88rem; color: #c9c4ee; }
.fa-anl-fuss { display: flex; gap: 8px; align-items: stretch; }
.fa-anl-nav { margin: 0; flex: 0 0 56px; background: rgba(255,255,255,.12); font-size: 1.5rem; padding: 6px; line-height: 1; }
.fa-anl-nav.fa-anl-mitte { flex: 1; font-size: .95rem; }
.fa-anl-fertig-knopf { margin-top: 14px; width: 100%; background: #22c55e; font-size: 1.1rem; padding: 12px; }
.fa-anl-fertig-knopf:hover { background: #16a34a; }
.fa-anl.fa-anl-pausiert *, .fa-anl.fa-anl-pausiert *::before, .fa-anl.fa-anl-pausiert *::after { animation-play-state: paused !important; }

.fa-anl-ein { opacity: 0; animation: fa-anl-rein .55s ease-out forwards; }
@keyframes fa-anl-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fa-anl-karte { flex: none; }
.fa-anl-karte .fa-karte-art { box-shadow: 0 8px 20px rgba(0,0,0,.5); }

/* Szene 1 */
.fa-anl-faecher { display: flex; justify-content: center; height: 190px; margin: 6px 0 4px; position: relative; }
.fa-anl-faecher .fa-anl-karte { position: absolute; top: 0; opacity: 0; animation: fa-anl-faecher 1s cubic-bezier(.2,.9,.3,1) forwards; }
.fa-anl-f1 { --w: -118px; --r: -10deg; animation-delay: .1s !important; }
.fa-anl-f2 { --w: 0px; --r: 0deg; animation-delay: .35s !important; z-index: 2; }
.fa-anl-f3 { --w: 118px; --r: 10deg; animation-delay: .6s !important; }
@keyframes fa-anl-faecher { from { opacity: 0; transform: translateY(40px) scale(.8); } to { opacity: 1; transform: translateX(var(--w)) rotate(var(--r)); } }
.fa-anl-phasen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fa-anl-phasen span { background: rgba(255,255,255,.14); border-radius: 999px; padding: 6px 14px; font-weight: 700; }

/* Szene 2 */
.fa-anl-muenzen { display: flex; align-items: center; justify-content: center; gap: 14px; }
.fa-anl-muenze { font-size: 3.2rem; animation: fa-anl-dreh 3s ease-in-out infinite; }
@keyframes fa-anl-dreh { 0%,100% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } }
.fa-anl-zahl { font-size: 3.6rem; font-weight: 900; color: #fcd34d; }
.fa-anl-slots { display: flex; gap: 8px; justify-content: center; }
.fa-anl-slot { width: 46px; height: 62px; border-radius: 8px; border: 2px dashed rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; font-weight: 800; opacity: .3; animation: fa-anl-slot .5s ease-out forwards; }
@keyframes fa-anl-slot { to { opacity: 1; background: rgba(34,197,94,.35); border-style: solid; border-color: #4ade80; } }

/* Szene 3 */
.fa-anl-gebote { display: flex; gap: 14px; justify-content: center; }
.fa-anl-gebot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fa-anl-eingabe { min-width: 64px; text-align: center; padding: 6px 10px; border-radius: 10px; background: #fff; color: #1f2330; font-weight: 800; font-size: 1.15rem; }
.fa-anl-eingabe.fa-anl-hoch { background: #fcd34d; }
.fa-anl-summe { text-align: center; background: rgba(255,255,255,.1); padding: 8px; border-radius: 10px; }

/* Szene 4 */
.fa-anl-stechen { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.08); padding: 12px; border-radius: 14px; }
.fa-anl-ring { flex: none; width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(#f97316 0deg, #f97316 var(--ring, 360deg), rgba(255,255,255,.18) 0); animation: fa-anl-ring 10s linear infinite; }
.fa-anl-ring::before { content: ""; position: absolute; }
.fa-anl-ring-zahl { width: 58px; height: 58px; border-radius: 50%; background: #1b1740; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.5rem; }
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
@keyframes fa-anl-ring { from { --ring: 360deg; } to { --ring: 0deg; } }
.fa-anl-liste { display: flex; flex-direction: column; gap: 10px; padding-left: 0; }
.fa-anl-liste li { margin: 0; padding-left: 18px; position: relative; }
.fa-anl-liste li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #a78bfa; }

/* Szene 5 */
.fa-anl-vorher-nachher { display: grid; justify-items: center; }
.fa-anl-paar { grid-area: 1 / 1; display: flex; gap: 12px; justify-content: center; }
.fa-anl-vorher { animation: fa-anl-aus .6s ease 2.4s forwards; }
.fa-anl-nachher { opacity: 0; animation: fa-anl-an .8s ease 2.6s forwards; }
@keyframes fa-anl-aus { to { opacity: 0; } }
@keyframes fa-anl-an { to { opacity: 1; } }

/* Szene 6 */
.fa-anl-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fa-anl-kachel { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.1); border-radius: 12px; padding: 8px 10px; opacity: 0; animation: fa-anl-rein .5s ease-out forwards; }
.fa-anl-flagge { font-size: 1.8rem; }
.fa-anl-kachel-text { font-size: .9rem; line-height: 1.25; }

/* Szene 7 */
.fa-anl-de-beispiel { display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,.08); padding: 10px 14px; border-radius: 12px; }
.fa-anl-gesamt { text-align: center; font-size: 1.5rem; font-weight: 800; }
.fa-anl-gesamt span { color: #cbd5e1; }
.fa-anl-gesamt .fa-anl-neu { color: #fff; }
.fa-anl-gesamt b { color: #4ade80; font-size: 1.2rem; }

/* Szene 8 */
.fa-anl-tabelle { width: 100%; border-collapse: collapse; text-align: center; }
.fa-anl-tabelle th, .fa-anl-tabelle td { padding: 8px 6px; border: 1px solid rgba(255,255,255,.2); }
.fa-anl-tabelle th { text-align: left; background: rgba(255,255,255,.08); }
.fa-anl-rueck { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; background: rgba(255,255,255,.08); border-radius: 12px; padding: 10px; }
.fa-anl-pfeil { color: #fcd34d; font-weight: 800; }
.fa-anl-muenze-fliegt { font-size: 1.5rem; animation: fa-anl-flug 1.6s ease-in-out 2.4s infinite; }
.fa-anl-m2 { animation-delay: 2.8s; }
@keyframes fa-anl-flug { 0% { transform: translateX(-14px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(14px); opacity: 0; } }

/* Szene 9 */
.fa-anl-kategorien { display: flex; gap: 10px; align-items: center; justify-content: center; }
.fa-anl-kat { background: #7c3aed; padding: 8px 16px; border-radius: 10px; font-weight: 800; }
.fa-anl-plus { font-size: 1.5rem; font-weight: 900; }
.fa-anl-spielkarten { display: flex; gap: 14px; justify-content: center; }

/* Szene 10 */
.fa-anl-rang { display: flex; flex-direction: column; gap: 8px; }
.fa-anl-rang-zeile { display: grid; grid-template-columns: 22px 78px 1fr 26px 38px; gap: 6px; align-items: center; opacity: 0; animation: fa-anl-rein .5s ease-out forwards; font-size: .95rem; }
.fa-anl-balken { height: 12px; background: rgba(255,255,255,.12); border-radius: 6px; overflow: hidden; }
.fa-anl-balken i { display: block; height: 100%; width: 0; background: #a78bfa; border-radius: 6px; animation: fa-anl-balken .9s ease-out forwards; }
@keyframes fa-anl-balken { to { width: var(--b); } }
.fa-anl-rang-pkt { font-weight: 900; text-align: right; }
.fa-anl-top .fa-anl-rang-pkt { color: #4ade80; }
.fa-anl-top .fa-anl-balken i { background: #4ade80; }
.fa-anl-minus .fa-anl-rang-pkt { color: #f87171; }
.fa-anl-minus .fa-anl-balken i { background: #f87171; }

/* Szene 11 */
.fa-anl-pokal { font-size: 4rem; text-align: center; animation: fa-anl-rein .6s ease-out forwards, fa-anl-wippe 2.4s ease-in-out .8s infinite; }
@keyframes fa-anl-wippe { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

@media (prefers-reduced-motion: reduce) {
  .fa-anl *, .fa-anl *::before, .fa-anl *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .fa-anl-ein, .fa-anl-kachel, .fa-anl-rang-zeile { opacity: 1; }
  .fa-anl-nachher { opacity: 1; } .fa-anl-vorher { display: none; }
}
.fa-anl button, .fa-anl button:hover, .fa-anl button:focus { background: rgba(255,255,255,.12); outline: none; }
.fa-anl button:hover { background: rgba(255,255,255,.22); }
.fa-anl button:focus-visible { box-shadow: 0 0 0 2px #fff; }
.fa-anl .fa-anl-fertig-knopf, .fa-anl .fa-anl-fertig-knopf:focus { background: #22c55e; }
.fa-anl .fa-anl-fertig-knopf:hover { background: #16a34a; }

/* ===== Update-Hinweis mit Feuerwerk (kern/update-hinweis.js) ===== */
body.ank-offen { overflow: hidden; }
.ank-overlay {
  position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 80% at 50% 0%, #2a2160 0%, #14112b 60%, #0c0a1c 100%);
  color: #f4f2ff; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  animation: fa-anl-rein .4s ease-out;
}
.ank-feuerwerk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ank-inhalt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 360px; }
.ank-badge { font-size: 1.5rem; font-weight: 900; letter-spacing: .12em; color: #1b1740; background: #fcd34d; padding: 8px 20px; border-radius: 999px; box-shadow: 0 0 28px rgba(252,211,77,.7); animation: fa-anl-puls 1.1s ease-in-out infinite; }
.ank-neu { font-size: 1.15rem; font-weight: 700; color: #e9e5ff; margin-top: 8px; animation: fa-anl-rein .6s ease-out .3s backwards; }
.ank-symbol { font-size: 4.2rem; line-height: 1; animation: fa-anl-huepf 1s ease-in-out .6s infinite; }
.ank-name { font-size: 2.6rem; font-weight: 900; line-height: 1.05; background: linear-gradient(90deg, #fcd34d, #fb923c, #f43f5e); -webkit-background-clip: text; background-clip: text; color: transparent; animation: fa-anl-rein .7s ease-out .5s backwards; }
.ank-sub { color: #d6d1f5; animation: fa-anl-rein .7s ease-out 1.1s backwards; }
.ank-ok { margin-top: 14px; padding: 12px 34px; font-size: 1.1rem; background: #22c55e; border-radius: 999px; animation: fa-anl-rein .7s ease-out 1.6s backwards; }
.ank-ok:hover { background: #16a34a; }
.ank-hinweis { font-size: .85rem; color: #a5b4fc; animation: fa-anl-rein .7s ease-out 2s backwards; }
@keyframes fa-anl-puls { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes fa-anl-huepf { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px) rotate(180deg); } }
@keyframes fa-anl-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ank-overlay *, .ank-overlay { animation: none !important; } }

.fa-regeln { display: flex; flex-direction: column; gap: 18px; margin-bottom: 14px; }
.fa-regel-block h3 { margin: 0 0 8px; font-size: 1.05rem; }
.fa-regel-block p { margin: 0 0 8px; line-height: 1.45; }
.fa-regel-liste { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; padding: 0; }
.fa-regel-liste li { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.07); line-height: 1.4; }
.fa-regel-hinweis { font-size: .88rem; opacity: .75; }

/* Länderspiel: Münzen auf Fähigkeiten setzen (Spielphase) */
.fa-runde-schritt { font-weight: 700; margin: 8px 0; }
.fa-einsatz { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.fa-einsatz-zeile { display: grid; grid-template-columns: 1fr 44px 64px 44px; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.06); }
.fa-einsatz-zeile.fa-einsatz-aktiv { background: rgba(167,139,250,.22); }
.fa-einsatz-name { font-weight: 700; }
.fa-einsatz-btn { height: 40px; border: 0; border-radius: 10px; font-size: 1.4rem; font-weight: 900; cursor: pointer; background: rgba(255,255,255,.14); color: inherit; }
.fa-einsatz-btn:disabled { opacity: .35; cursor: default; }
.fa-einsatz-eingabe { width: 100%; height: 40px; text-align: center; font-size: 1.1rem; font-weight: 800; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.2); color: inherit; box-sizing: border-box; }
.fa-erg-summen { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.15); }
.fa-erg-summe { padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.07); }
.fa-erg-summe-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 1rem; }
.fa-erg-summe-kopf strong { display: inline-flex; align-items: center; gap: 5px; }
.fa-erg-summe-gebote { font-size: .8rem; opacity: .75; margin-top: 2px; }
.fa-erg-summe-gewonnen { background: rgba(74,222,128,.25); box-shadow: inset 3px 0 0 #4ade80; }
.fa-anl-faeh { grid-template-columns: 6px 98px 1fr 24px 22px; }

.fa-erg-muenzen { margin: 2px 0 10px 6px; font-size: .82rem; opacity: .8; }

#fa-runde-erg-liste > li { list-style: none; }

/* Anleitung: kein Aufbau - jede Seite zeigt sofort alles (nur Dauer-Animationen wie Münzdrehung bleiben) */
.fa-anl .fa-anl-ein, .fa-anl .fa-anl-kachel, .fa-anl .fa-anl-rang-zeile { opacity: 1; animation: none; transform: none; }
.fa-anl .fa-anl-faecher .fa-anl-karte { opacity: 1; animation: none; transform: translateX(var(--w)) rotate(var(--r)); }
.fa-anl .fa-anl-slot { opacity: 1; animation: none; background: rgba(34,197,94,.35); border-style: solid; border-color: #4ade80; }
.fa-anl .fa-anl-balken i { width: var(--b); animation: none; }
.fa-anl .fa-anl-pokal { animation: fa-anl-wippe 2.4s ease-in-out infinite; }
.fa-anl .fa-anl-muenze-fliegt { animation-delay: 0s; }
.fa-anl .fa-anl-m2 { animation-delay: .4s; }
.fa-anl .fa-anl-vorher-nachher { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.fa-anl .fa-anl-vorher, .fa-anl .fa-anl-nachher { opacity: 1; animation: none; display: flex; flex-wrap: wrap; }
.fa-anl .fa-anl-vorher::after { content: "\2193"; flex-basis: 100%; text-align: center; font-size: 1.4rem; font-weight: 900; color: #fcd34d; line-height: 1; margin-top: 4px; }

/* ===== 30-Sekunden-Timer (v271) ===== */
.fa-timer { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.fa-timer-balken { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; }
.fa-timer-fuellung { height: 100%; width: 100%; border-radius: 999px; background: #60a5fa; transition: width .25s linear; }
.fa-timer-zahl { min-width: 2.2ch; text-align: right; font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.fa-timer-knapp .fa-timer-balken { height: 14px; }
.fa-timer-knapp .fa-timer-fuellung { background: #ef4444; }
.fa-timer-knapp .fa-timer-zahl { color: #ff6b6b; font-size: 2rem; line-height: 1; animation: fa-timer-puls .5s ease-in-out infinite alternate; }
@keyframes fa-timer-puls { from { transform: scale(1); } to { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .fa-timer-knapp .fa-timer-zahl { animation: none; } }
.fa-timer { position: sticky; top: 0; z-index: 20; padding: 8px 10px; border-radius: 12px; background: rgba(24, 16, 36, .92); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.fa-timer-knapp { background: rgba(70, 14, 20, .95); box-shadow: 0 0 0 2px #ef4444, 0 2px 14px rgba(239,68,68,.5); }
#ueben-dialog .raum-verlassen-aktionen { grid-template-columns: 1fr; }
#ueben-dialog h2 { line-height: 1.3; }

/* ---------- Größenvergleich (v276) ---------- */
.gv-szene { width: 100%; height: auto; display: block; margin: 6px 0 4px; background: #f8fafc; border-radius: 16px; }
.gv-mass-text { font-size: 30px; font-weight: 700; font-family: inherit; }
.gv-timer { height: 8px; border-radius: 999px; background: #e5e7eb; overflow: hidden; margin: 4px 0 8px; }
.gv-timer i { display: block; height: 100%; width: 100%; background: var(--akzent); border-radius: 999px; transition: width .15s linear; }
.gv-timer-knapp i { background: #ef4444; }
.gv-timer-knapp { animation: gv-puls .5s ease-in-out infinite alternate; }
@keyframes gv-puls { from { opacity: 1; } to { opacity: .55; } }
.gv-schaetzung { text-align: center; font-size: 1.05rem; margin: 6px 0 2px; }
.gv-schaetzung strong { font-size: 1.6rem; color: #dc2626; font-variant-numeric: tabular-nums; }
.gv-regler-zeile { display: flex; align-items: center; gap: 8px; }
.gv-regler { flex: 1; min-width: 0; padding: 0; margin: 8px 0; accent-color: #ef4444; height: 36px; }
.gv-fein { width: 44px; height: 44px; padding: 0; font-size: 1.4rem; line-height: 1; border-radius: 50%; flex: none; }
.gv-quelle { font-size: .75rem; opacity: .7; }
.gv-chips { display: flex; gap: 8px; margin: 4px 0 6px; }
.gv-chip { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: .8rem; }
.gv-chip small { text-transform: uppercase; letter-spacing: .04em; font-size: .65rem; opacity: .8; }
.gv-chip b { font-size: .95rem; overflow-wrap: anywhere; }
.gv-chip em { font-style: normal; opacity: .7; }
.gv-chip-ref { border-left: 4px solid #3b82f6; }
.gv-chip-ref small { color: #60a5fa; }
.gv-chip-ziel { border-left: 4px solid #ef4444; }
.gv-chip-ziel small { color: #f87171; }
.gv-name-text { font-size: 40px; font-weight: 800; font-family: inherit; }
.gv-name-zusatz { font-size: 30px; font-weight: 600; }
.gv-modus-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.gv-modus-gruppe { display: inline-flex; gap: 4px; }
.gv-modus-btn { padding: 8px 12px; margin: 0; font-size: .85rem; background: rgba(255,255,255,.12); }
.gv-modus-btn.aktiv { background: var(--akzent); box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.gv-modus-btn:disabled { opacity: 1; cursor: default; }
.gv-modus-btn:disabled:not(.aktiv) { opacity: .5; }

/* ---------- Knobeln (v279) ---------- */
.kn-hand-wahl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 8px 0; }
.kn-hand-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; margin: 0; border-radius: 18px; background: rgba(255,255,255,.1); color: inherit; font-size: 1.4rem; font-weight: 800; }
.kn-hand-btn:hover { background: rgba(255,255,255,.18); }
.kn-hoelzer { max-width: 100%; height: auto; color: rgba(255,255,255,.7); }
.kn-gewaehlt { grid-column: 1 / -1; text-align: center; }
.kn-aktive { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.kn-chip-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.kn-tipp-liste { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.kn-tipp-zeile { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.07); margin: 0; }
.kn-tipp-zeile.dran { background: rgba(255,255,255,.2); box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.kn-tipp-spieler { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.kn-tipp-wert { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kn-tipp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.kn-tipp-btn { margin: 0; padding: 14px 0; font-size: 1.3rem; font-weight: 800; border-radius: 14px; }
.kn-tipp-btn:disabled { opacity: .25; text-decoration: line-through; }
.kn-summe { text-align: center; font-size: 1.1rem; margin: 4px 0 10px; }
.kn-summe strong { font-size: 2.2rem; }
.kn-erg-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-radius: 14px; border-left: 5px solid var(--spieler-farbe); background: rgba(255,255,255,.07); }
.kn-erg-zeile.richtig { background: rgba(34,197,94,.28); }
.kn-erg-tipp { white-space: nowrap; }
.kn-verlierer { text-align: center; font-size: 1.05rem; }
.kn-treffer { opacity: .7; font-size: .7rem; font-weight: 600; }
.kn-erg-info { font-weight: 700; margin-top: 10px; }

/* ---- Doppelkopf ---- */
.dk-bildschirm { padding-left: 10px; padding-right: 10px; }
.dk-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .85rem; margin-bottom: 4px; }
.dk-team-re { color: #f87171; }
.dk-team-kontra { color: #60a5fa; }
.dk-ansagen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 6px; }
.dk-chip { padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(255,255,255,.14); }
.dk-chip-re { background: rgba(248,113,113,.3); }
.dk-chip-ko { background: rgba(96,165,250,.3); }
.dk-holz { position: relative; margin: 6px 0; border-radius: 20px; overflow: hidden; color: #fff; padding-bottom: 8px;
  background-color: #8a5428;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='800'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.22' numOctaves='5' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.08  0 0 0 0 0.02  0 0 0 -2.4 1.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%, rgba(255,190,120,.28) 0%, rgba(255,190,120,0) 62%),
    linear-gradient(180deg, #a2662f 0%, #8a5428 55%, #6e3f17 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), inset 0 0 40px rgba(0,0,0,.45); }
.dk-holz > :not(.dk-tisch):not(.dk-popup) { margin-left: 8px; margin-right: 8px; }
.dk-tisch { position: relative; height: clamp(340px, 46vh, 430px); max-width: 460px; margin: 0 auto; }
.dk-holz .dk-hand { padding-top: 22px; }
.dk-popup { position: absolute; left: 50%; top: 175px; transform: translateX(-50%); width: min(300px, 88%); max-height: calc(100% - 190px); overflow: auto; z-index: 20;
  padding: 12px 14px; border-radius: 18px; background: rgba(24,14,12,.94); box-shadow: 0 8px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12);
  animation: dkPop .22s ease-out; }
.dk-popup[hidden] { display: none; }
.dk-popup h3 { margin: 0 0 4px; text-align: center; }
@keyframes dkPop { from { opacity: 0; transform: translateX(-50%) scale(.85); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
body.dk-aktiv #spiel-kopf-titel { display: none; }
.dk-sitz { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 5px; border-radius: 12px; max-width: 70px; line-height: 1.15; z-index: 2; }
.dk-sitz.aktiv { background: rgba(255,255,255,.2); box-shadow: 0 0 0 2px #facc15; }
.dk-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--spieler-farbe); background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.dk-av-text { display: inline-flex; align-items: center; justify-content: center; color: #222; font-size: .7rem; }
.dk-sitz-name { font-size: .78rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.dk-blase { position: absolute; top: -8px; left: 100%; margin-left: 2px; white-space: nowrap; z-index: 5; padding: 2px 8px; border-radius: 12px 12px 12px 2px; background: #fff; color: #222; font-size: .7rem; font-weight: 800; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.dk-blase-2 { top: 100%; bottom: auto; left: 50%; right: auto; margin: 3px 0 0; transform: translateX(-50%); border-radius: 12px; }
.dk-blase-1, .dk-blase-3 { top: auto; bottom: 100%; left: 50%; right: auto; margin: 0 0 3px; transform: translateX(-50%); border-radius: 12px; }
/* Sitzpositionen: 0 unten (ich), 1 links, 2 oben, 3 rechts */
.dk-s1, .dk-s3 { max-width: 86px; }
.dk-s0 { left: 6px; bottom: 6px; }
.dk-s2 { left: 58%; top: 48px; }
.dk-s1 { left: 46px; top: 112px; }
.dk-s3 { right: 46px; top: 112px; }
/* Handfächer der Mitspieler (Kartenrücken) */
.dk-rk { display: block; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.dk-rk svg { display: block; width: 100%; height: 100%; }
.dk-hf { position: absolute; display: flex; z-index: 1; }
.dk-hf2 { top: -14px; left: 50%; transform: translateX(-50%); flex-direction: row; }
.dk-hf2 .dk-rk { width: 34px; height: 51px; margin-left: -23px; }
.dk-hf2 .dk-rk:first-child { margin-left: 0; }
.dk-hf1, .dk-hf3 { top: 50%; transform: translateY(-50%); flex-direction: column; }
.dk-hf1 { left: -14px; }
.dk-hf3 { right: -14px; }
.dk-hf1 .dk-rk, .dk-hf3 .dk-rk { position: relative; width: 54px; height: 36px; margin-top: -22px; }
.dk-hf1 .dk-rk:first-child, .dk-hf3 .dk-rk:first-child { margin-top: 0; }
.dk-hf1 .dk-rk svg, .dk-hf3 .dk-rk svg { position: absolute; left: 50%; top: 50%; width: 36px; height: 54px; transform: translate(-50%, -50%) rotate(90deg); }
.dk-hf3 .dk-rk svg { transform: translate(-50%, -50%) rotate(-90deg); }
/* Stichstapel */
.dk-stapel { position: absolute; width: 30px; height: 45px; z-index: 1; }
.dk-stapel .dk-rk { position: absolute; inset: 0; }
.dk-stapel .dk-rk:nth-child(2) { transform: translate(3px, -3px); }
.dk-stapel .dk-rk:nth-child(3) { transform: translate(6px, -6px); }
.dk-st0 { left: 50%; bottom: 8px; margin-left: -15px; }
.dk-st2 { left: 30%; top: 64px; }
.dk-st1 { left: 58px; bottom: 14%; }
.dk-st3 { right: 58px; bottom: 14%; }
.dk-ablage { position: absolute; width: 50px; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.dk-ablage.gewinner { filter: drop-shadow(0 0 6px #facc15) drop-shadow(0 0 2px #facc15); }
.dk-a2 { top: 54px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.dk-a0 { bottom: 56px; left: 50%; transform: translateX(-50%) rotate(2deg); }
.dk-a1 { left: calc(50% - 54px); top: 50%; transform: translateY(-50%) rotate(-6deg); }
.dk-a3 { right: calc(50% - 54px); top: 50%; transform: translateY(-50%) rotate(5deg); }
.dk-aussetzer { position: absolute; right: 10px; bottom: 6px; font-size: .68rem; opacity: .85; z-index: 2; text-shadow: 0 1px 3px #000; }
.dk-karte-svg { display: block; width: 100%; height: auto; }
.dk-zeile { text-align: center; min-height: 1.4em; margin: 2px 0 6px; font-size: .92rem; }
.dk-aktionen { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.dk-aktionen button { margin: 0; }
.dk-hand { display: flex; justify-content: center; padding-top: 20px; min-height: 60px; }
.dk-hk { width: var(--kw, 60px); flex: none; margin: 0 0 0 calc(var(--kw, 60px) * -0.56); padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform .12s; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.dk-hk:first-child { margin-left: 0; }
.dk-hk.gewaehlt { transform: translateY(-18px); }
.dk-hk.gesperrt { filter: brightness(.55) drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.dk-hk.wartet { cursor: default; }
.dk-hand-vb .dk-hk { cursor: default; }
.dk-vb-wahl { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.dk-vb-wahl button { margin: 0; }
.dk-solo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dk-letzter { margin: 4px 0 8px; }
.dk-letzter-reihe { display: flex; gap: 8px; justify-content: center; }
.dk-mini { width: 60px; text-align: center; font-size: .65rem; }
.dk-mini-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-erg-augen { text-align: center; }
.dk-erg-teams { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.dk-erg-team { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.05); }
.dk-erg-team.gewinner { background: rgba(255,255,255,.1); box-shadow: 0 0 0 2px rgba(250,204,21,.55); }
.dk-erg-team h3 { margin: 0; text-align: center; font-size: 1rem; }
.dk-erg-team.re h3 { color: #f87171; }
.dk-erg-team.kontra h3 { color: #60a5fa; }
.dk-erg-spieler { display: flex; justify-content: center; gap: 8px; min-height: 66px; }
.dk-erg-sp { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; max-width: 72px; font-size: .75rem; font-weight: 700; }
.dk-erg-sp span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-erg-sp .dk-av { width: 40px; height: 40px; }
.dk-erg-kopf { display: flex; justify-content: space-between; gap: 4px; flex-wrap: wrap; font-size: .7rem; opacity: .85; }
.dk-erg-box { list-style: none; margin: 0; padding: 6px 8px; min-height: 66px; border-radius: 8px; background: rgba(0,0,0,.3); font-size: .78rem; display: flex; flex-direction: column; gap: 2px; }
.dk-erg-box-klein { min-height: 46px; }
.dk-erg-box li { display: flex; justify-content: space-between; gap: 6px; text-align: right; }
.dk-erg-gesamt { text-align: right; font-weight: 800; color: #facc15; font-size: .95rem; }
.dk-erg-notiz p { margin: 2px 0; text-align: center; }
.dk-erg-details { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 4px; }
.dk-erg-details li { display: flex; justify-content: space-between; padding: 3px 10px; border-radius: 10px; background: rgba(255,255,255,.07); font-size: .9rem; }
.dk-erg-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-radius: 14px; border-left: 5px solid var(--spieler-farbe); background: rgba(255,255,255,.07); margin-bottom: 6px; }
#dk-erg-liste { list-style: none; padding: 0; }
.dk-aktionen { flex-wrap: nowrap; }
.dk-aktionen button { flex: 1 1 0; width: auto; min-width: 0; padding: 10px 6px; font-size: .88rem; box-shadow: none; }
.dk-aktionen button[hidden] { display: none; }
.dk-solo-grid button, .dk-vb-wahl button { padding: 10px 8px; font-size: .92rem; }
.dk-label { margin: 0 0 4px; font-size: .8rem; opacity: .75; text-transform: uppercase; letter-spacing: .05em; }
.dk-hk:disabled { opacity: 1; }
.dk-hand-vb { flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; }
.dk-hand-reihe { display: flex; justify-content: center; }
#dk-ar-hand { padding-top: 24px; }
.dk-hinweis { text-align: center; font-weight: 600; }
.dk-regel { display: inline-flex; align-items: flex-start; gap: 3px; }
.dk-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-top: -2px; border-radius: 50%;
  border: 1px solid currentColor; font-size: .65rem; font-style: italic; font-weight: 700; line-height: 1; opacity: .7; cursor: pointer; vertical-align: super; }
.dk-info.offen { background: var(--akzent, #7c3aed); border-color: transparent; color: #fff; opacity: 1; }
.dk-info:focus-visible { outline: 2px solid #facc15; outline-offset: 2px; }
.dk-info-text { margin: -2px 0 6px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.07); font-size: .85rem; }
.dk-chip-bock { background: rgba(250,204,21,.3); }

/* ---------- Startseite: Button "Spiele" + Anleitungen ---------- */
.start-spiele-btn {
  position: absolute; right: 20px; bottom: 10px;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: 8px 16px; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.start-spiele-btn:active { transform: scale(.96); }
body.anl-offen { overflow: hidden; }
.anl-overlay {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  background: rgba(8,4,14,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 12px;
}
.anl-panel {
  width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #1c1426; color: #fff; border-radius: 20px; padding: 14px 16px 16px;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.anl-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.anl-kopf h2 { margin: 0; font-size: 1.2rem; }
.anl-x, .anl-zurueck {
  background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 999px;
  padding: 7px 12px; font: inherit; font-size: .9rem; cursor: pointer;
}
.anl-sub { margin: 4px 0 10px; opacity: .7; font-size: .9rem; }
.anl-liste { display: grid; gap: 8px; }
.anl-kachel {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--farbe) 45%, #1c1426), #241a31);
  color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 10px 12px; font: inherit; cursor: pointer;
}
.anl-kachel:active { transform: scale(.98); }
.anl-kachel-sym { font-size: 1.8rem; width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.anl-kachel-sym .spiel-bild, .anl-titel-sym .spiel-bild { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.anl-kachel-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.anl-kachel-txt small { opacity: .7; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anl-kachel-n { font-size: .72rem; opacity: .6; flex: none; }
.anl-titel { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; }
.anl-titel h2 { margin: 0; font-size: 1.3rem; }
.anl-titel-sym { font-size: 1.6rem; width: 34px; height: 34px; display: grid; place-items: center; }
.anl-folie { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.anl-bildrahmen { border-radius: 14px; overflow: hidden; }
.anl-bild { display: block; width: 100%; height: auto; }
.anl-folie h3 { margin: 12px 0 6px; font-size: 1.1rem; }
.anl-folie p { margin: 0 0 8px; line-height: 1.45; font-size: .95rem; opacity: .92; }
.anl-folie strong { color: #fde68a; }
.anl-punkte { display: flex; justify-content: center; gap: 8px; margin: 10px 0; }
.anl-punkt { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.28); cursor: pointer; }
.anl-punkt.an { background: #fff; transform: scale(1.3); }
.anl-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.anl-nav button { min-width: 96px; }
.anl-nav button:disabled { opacity: .35; }
.anl-zaehler { opacity: .7; font-size: .85rem; }
.anl-liste { grid-template-columns: minmax(0, 1fr); }
.anl-kachel { min-width: 0; box-sizing: border-box; overflow: hidden; }
.anl-panel { box-sizing: border-box; }
.anl-kachel-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anl-zaehler { white-space: nowrap; } .anl-nav button { min-width: 0; flex: 1; }
.anl-bildrahmen { display: flex; justify-content: center; background: #0d0814; }
.anl-foto { display: block; max-width: 100%; max-height: 46vh; width: auto; height: auto; object-fit: contain; }
.anl-bildrahmen { display: block; text-align: center; }
.anl-foto { display: inline-block; vertical-align: top; }
.anl-foto { max-height: 38vh; }
.anl-nav { position: sticky; bottom: -16px; background: #1c1426; padding: 10px 0 14px; margin-bottom: -16px; z-index: 1; }

.dk-unter { margin: 8px 0 0; }
.dk-unter .dk-zeile { color: inherit; }

/* v295: Zeit als Ring ums Profilbild, Ablage naeher an der Mitte, Stichstapel unter den Handkarten */
.dk-timer-aus, #dk-timer-zug, #dk-timer-vb { display: none !important; }
.dk-avring { display: inline-flex; padding: 3px; border-radius: 50%; }
.dk-sitz.aktiv { background: none; box-shadow: none; }
.dk-sitz.aktiv .dk-avring { background: conic-gradient(#facc15 calc(var(--t, 1) * 360deg), rgba(255,255,255,.22) 0); }
.dk-sitz.aktiv .dk-avring.knapp { background: conic-gradient(#ef4444 calc(var(--t, 1) * 360deg), rgba(255,255,255,.22) 0); }
.dk-a2 { top: calc(50% - 76px); }
.dk-a0 { bottom: auto; top: calc(50% - 4px); }
.dk-st2 { left: 50%; margin-left: -15px; top: 42px; }
.dk-st1 { left: 8px; bottom: auto; top: calc(50% + 104px); }
.dk-st3 { right: 8px; bottom: auto; top: calc(50% + 104px); }
.dk-stapel-ich { display: flex; justify-content: center; min-height: 0; }
.dk-stapel-unten { position: relative; width: 30px; height: 45px; margin: 8px 0 4px; }
.dk-stapel-unten .dk-rk { position: absolute; inset: 0; }
.dk-stapel-unten .dk-rk:nth-child(2) { transform: translate(3px, -3px); }
.dk-stapel-unten .dk-rk:nth-child(3) { transform: translate(6px, -6px); }
.dk-st1 { top: calc(50% - 150px); }
.dk-st3 { top: calc(50% - 150px); }

.dk-erg-total { font-size: .95rem; font-weight: 800; color: #facc15; line-height: 1; }
.dk-erg-sp { max-width: 90px; }

.dk-ansage-pop { position: fixed; z-index: 9999; left: 50%; top: 40%; transform: translate(-50%, -50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 34px; border-radius: 24px; background: rgba(15,10,25,.92); box-shadow: 0 0 0 3px #facc15, 0 12px 40px rgba(0,0,0,.6); animation: dk-pop 1.9s ease both; }
.dk-ansage-pop small { font-size: 1rem; opacity: .85; }
.dk-ansage-pop b { font-size: 2.6rem; line-height: 1.1; color: #facc15; text-align: center; }
@keyframes dk-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 20% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.dk-erg-box-klein { display: none; }

/* v297: groessere Karten, Stichstapel an festen Plaetzen */
.dk-hf2 { top: -16px; }
.dk-hf2 .dk-rk { width: 44px; height: 66px; margin-left: -29px; }
.dk-hf1 { left: -16px; } .dk-hf3 { right: -16px; }
.dk-hf1 .dk-rk, .dk-hf3 .dk-rk { width: 66px; height: 44px; margin-top: -27px; }
.dk-hf1 .dk-rk svg, .dk-hf3 .dk-rk svg { width: 44px; height: 66px; }
.dk-ablage { width: 66px; }
.dk-a2 { top: calc(50% - 98px); }
.dk-a0 { top: calc(50% - 6px); }
.dk-a1 { left: calc(50% - 68px); }
.dk-a3 { right: calc(50% - 68px); }
.dk-st2 { top: 56px; left: 50%; margin-left: -18px; }
.dk-st1 { left: 66px; right: auto; top: 50%; bottom: auto; margin-top: -22px; }
.dk-st3 { right: 66px; left: auto; top: 50%; bottom: auto; margin-top: -22px; }
.dk-st0 { left: 50%; right: auto; top: auto; bottom: -36px; margin-left: -18px; z-index: 4; }
.dk-holz .dk-hand { padding-top: 40px; }
.dk-ablage { width: 60px; }
.dk-a1 { left: calc(50% - 62px); }
.dk-a3 { right: calc(50% - 62px); }
.dk-a2 { top: calc(50% - 90px); }
.dk-s1, .dk-s3 { top: 74px; }
.dk-st1 { left: 54px; }
.dk-st3 { right: 54px; }

/* ---- Tetris-Duell ---- */
body.tt-aktiv:has(#tt-spiel-screen:not([hidden])) #spiel-kopf-titel { display: none; }
.tt-spiel { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 12px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tt-gegner { display: flex; justify-content: center; gap: 10px; min-height: 26px; flex-wrap: wrap; }
.tt-gegner-karte { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 10px; background: rgba(255,255,255,.06); border-bottom: 3px solid var(--spieler-farbe); font-size: .72rem; font-weight: 700; max-width: 90px; }
.tt-gegner-karte canvas { display: block; border-radius: 4px; }
.tt-gegner-karte.tot { opacity: .45; filter: grayscale(.8); }
.tt-gegner-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-gegner-info { color: #facc15; }
.tt-mitte { display: flex; gap: 10px; align-items: flex-start; justify-content: center; }
.tt-brettbox { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 3px rgba(255,255,255,.18); touch-action: none; }
#tt-brett { display: block; touch-action: none; }
.tt-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(10,6,20,.72); text-align: center; padding: 10px; pointer-events: none; }
.tt-overlay b { font-size: 1.5rem; }
.tt-overlay b.gross { font-size: 4.5rem; color: #facc15; }
.tt-seite { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 76px; }
.tt-werte { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.tt-werte div { display: flex; flex-direction: column; background: rgba(255,255,255,.07); border-radius: 10px; padding: 4px 8px; }
.tt-werte small { font-size: .65rem; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.tt-werte b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tt-muellbalken { position: relative; width: 14px; height: 70px; border-radius: 7px; background: rgba(255,255,255,.1); overflow: hidden; display: flex; align-items: flex-end; }
.tt-muellbalken i { display: block; width: 100%; height: 0; background: #ef4444; transition: height .15s; }
.tt-tasten { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: min(100%, 440px); touch-action: manipulation; }
.tt-tasten button { height: 56px; border-radius: 14px; border: 0; font-size: 1.4rem; font-weight: 800; color: #fff; background: rgba(255,255,255,.14); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tt-tasten button:active { background: rgba(255,255,255,.3); }
.tt-tasten button[data-a="drop"] { background: rgba(6,182,212,.45); }
.tt-spiel.zuschauer .tt-mitte, .tt-spiel.zuschauer .tt-tasten { display: none; }

/* ======================================================================
   Wo liegt's? - Globus, Stadtname
   ====================================================================== */
.wl-stadt { font-size: 1.7rem; line-height: 1.15; margin: 2px 0 0; }
.wl-land { margin: 2px 0 12px; color: var(--club-muted, var(--text-hell)); font-weight: 600; }
.wl-globus {
  position: relative; width: 100%; aspect-ratio: 1 / 1; margin: 4px 0 10px;
  border-radius: 20px; overflow: hidden; touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none;
  background: radial-gradient(circle at 50% 45%, #14233f 0%, #0a1226 70%, #060b18 100%);
}
.wl-canvas { display: block; touch-action: none; cursor: grab; }
.wl-canvas:active { cursor: grabbing; }
.wl-zoomknoepfe {
  position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 8px;
}
.wl-zoomknoepfe button {
  width: 42px; height: 42px; margin: 0; padding: 0; border-radius: 50%;
  font-size: 1.5rem; line-height: 1; font-weight: 700;
  background: rgba(255, 255, 255, 0.92); color: #1f2330;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.wl-zoomknoepfe button:hover { background: #fff; }

.wl-modus-block { margin: 14px 0 6px; }
.wl-modus-titel { display: block; font-weight: 700; margin-bottom: 8px; }
.wl-modus { display: flex; flex-direction: column; gap: 8px; }
.wl-modus button {
  margin: 0; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.07); color: inherit;
  border: 2px solid rgba(255, 255, 255, 0.14); font-weight: 600;
}
.wl-modus button:hover { background: rgba(255, 255, 255, 0.12); }
.wl-modus button.aktiv { border-color: var(--akzent); background: rgba(255, 91, 54, 0.2); }
.wl-modus button:disabled { opacity: 1; cursor: default; }
.wl-modus button:disabled:not(.aktiv) { opacity: 0.45; }
.wl-modus-block .hinweis-text { margin-top: 10px; }
.wl-modus-titel small { font-weight: 500; opacity: 0.7; }
.wl-modus button::before { content: "☐ "; opacity: 0.7; }
.wl-modus button.aktiv::before { content: "☑ "; opacity: 1; }

/* Direkte Eingabe in Buchstabenfelder (kern/buchstabeneingabe.js) */
.tipp-versteckt {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  opacity: 0; border: 0; padding: 0; margin: 0; font-size: 16px; pointer-events: none;
}
.lu-antwort-zeile, .bz-antwort-zeile { position: relative; }
.lu-antwort-zeile:has(.tipp-versteckt) button,
.bz-antwort-zeile:has(.tipp-versteckt) button { flex: 1; }
.lu-buchstabe-kasten, .bz-buchstabe-kasten { cursor: text; }
.lu-buchstabe-kasten.tipp-getippt, .bz-buchstabe-kasten.tipp-getippt { border-color: var(--akzent, #ff5b36); }
.lu-buchstabe-kasten.tipp-cursor, .bz-buchstabe-kasten.tipp-cursor {
  box-shadow: 0 0 0 2px var(--akzent, #ff5b36);
}
.zg-ziel-unten { margin: 14px 0 0; text-align: center; }

/* ======================================================================
   Passgenau - Einstellungen, Zeitleiste, Spielfeld (Canvas)
   ====================================================================== */
.pg-mitte { text-align: center; }
.pg-vorb-text { font-size: 1.15rem; margin: 0 0 6px; }
.pg-opt-block { margin: 14px 0 6px; }
.pg-opt-titel { display: block; font-weight: 700; margin-bottom: 8px; }
.pg-opt { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-opt button {
  margin: 0; flex: 1; min-width: 64px; padding: 10px 8px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.07); color: inherit;
  border: 2px solid rgba(255, 255, 255, 0.14); font-weight: 600;
}
.pg-opt button.aktiv { border-color: var(--akzent); background: rgba(124, 58, 237, 0.25); }
.pg-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.pg-zeit-text { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pg-kopf-btns { display: flex; gap: 6px; }
.pg-mini { margin: 0; padding: 7px 10px; font-size: 0.85rem; border-radius: 10px; }
.pg-zeitbalken { height: 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.18); overflow: hidden; margin-bottom: 10px; }
.pg-zeitbalken > div { height: 100%; width: 100%; background: #22c55e; transition: width 0.15s linear; }
.pg-zeitbalken > div.knapp { background: #ef4444; }
.pg-canvas-wrap { position: relative; width: 100%; }
.pg-canvas-wrap canvas { display: block; width: 100%; border-radius: 12px; background: rgba(0, 0, 0, 0.18); touch-action: none; }
.pg-fertig-overlay {
  position: absolute; left: 8px; right: 8px; bottom: 14px; padding: 10px; text-align: center;
  font-weight: 800; border-radius: 12px; background: rgba(22, 163, 74, 0.93); color: #fff; pointer-events: none;
}
.pg-hinweis { text-align: center; margin-top: 8px; }

/* Spielkopf: eigenes Spiel-Bild statt Emoji */
.spiel-kopf-icon img.spiel-kopf-bild { width: auto; height: 62px; max-width: 76px; border-radius: 0; object-fit: contain; }
@media (max-width: 420px) { .spiel-kopf-icon img.spiel-kopf-bild { height: 54px; max-width: 66px; } }
.pg-fertig-overlay.pg-zeit-aus { background: rgba(185, 28, 28, 0.93); }

/* Doppelkopf: gemalte Karten */
img.dk-karte-bild { -webkit-user-drag: none; user-select: none; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }


/* ---- Run ---- */
.run-spiel { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 12px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.run-hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.run-hud-wert { font-size: 1.15rem; }
.run-hud-leben { font-size: 1.05rem; letter-spacing: 2px; min-width: 3.2em; text-align: right; }
.run-canvas-wrap { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
.run-canvas-wrap canvas { display: block; width: 100%; border-radius: 14px; background: #150f2e; touch-action: none; }
body.run-laeuft #btn-chat-oeffnen { display: none !important; }
.run-overlay {
  position: absolute; left: 12px; right: 12px; bottom: 14px; padding: 12px 14px; border-radius: 14px; text-align: center;
  font-weight: 800; font-size: 1.1rem; background: rgba(21, 128, 61, 0.93); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.run-overlay.run-overlay-schlecht { background: rgba(185, 28, 28, 0.93); }
.run-hinweis { text-align: center; margin-top: 4px; }
.run-spuren { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 520px; width: 100%; margin: 0 auto; }
.run-spuren[hidden] { display: none; }
.run-gegner { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--spieler-farbe, #94a3b8); flex: none; }
.run-gegner-bild { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; font-size: 1.1rem; font-weight: 800; text-align: center; line-height: 40px; background: rgba(255,255,255,0.12); }
.run-gegner-aus .run-gegner-bild { opacity: 0.32; filter: grayscale(1); }
.run-gegner-aus::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 44%, #ef4444 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #ef4444 44% 56%, transparent 56%);
}