/* Übernommen aus besserwisser.html – dasselbe Bühnenbild. Die Datei ist die
   Zwillingsschwester des <style>-Blocks dort und muss mit ihm mitziehen:
   Einmal waren die Handy-Regeln nur lokal nachgezogen, und online blieb ein
   halbes Jahr lang die Kopfzeile auf jedem Handy abgeschnitten. */
  :root{
    --studio:#160C38; --studio-deep:#0C0722;
    --gelb:#FFD23F; --magenta:#FF3D8A; --cyan:#29D9D5;
    --papier:#FFF6E8; --rot:#FF4B33;
    --display:'Impact','Haettenschweiler','Arial Narrow Bold',sans-serif;
    --body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{height:100%}
  body{
    font-family:var(--body);
    background:
      radial-gradient(ellipse 90% 60% at 50% -10%, #2B1866 0%, transparent 60%),
      repeating-linear-gradient(115deg, transparent 0 90px, rgba(255,255,255,.015) 90px 92px),
      var(--studio);
    /* min-height statt height und flex-start statt center: Eine zentrierende
       Flex-Box schiebt überlaufenden Inhalt nach OBEN aus dem Fenster, wo kein
       Scrollen mehr hinkommt – auf dem Handy war das in jeder Frage die
       Kopfzeile. Die Bühne zentriert sich mit margin:auto selbst, solange sie
       hineinpasst. Unten bleibt Platz für die fest stehende Rechtsfußzeile. */
    color:var(--papier); min-height:100%; display:flex; align-items:flex-start; justify-content:center;
    padding:16px 16px 2.2rem; overflow-x:hidden;
  }
  body::before{ /* wandernde Bühnenscheinwerfer */
    content:"";position:fixed;inset:-20%;pointer-events:none;z-index:0;
    background:
      radial-gradient(ellipse 28% 46% at 18% 0%, rgba(255,61,138,.12), transparent 70%),
      radial-gradient(ellipse 28% 46% at 82% 0%, rgba(41,217,213,.12), transparent 70%),
      radial-gradient(ellipse 20% 34% at 50% 100%, rgba(255,210,63,.05), transparent 70%);
    animation:lichter 9s ease-in-out infinite alternate;
  }
  .buehne{width:100%;max-width:780px;position:relative;z-index:1;margin:auto}

  /* Kopf */
  .topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;min-width:0}
  .topbar-knoepfe{display:flex;gap:6px;flex:none}
  .logo-mini{font-family:var(--display);font-size:1.4rem;letter-spacing:.04em;color:var(--gelb);
    transform:rotate(-2deg);text-shadow:3px 3px 0 var(--magenta);user-select:none}
  /* Der Rundentitel darf die Knöpfe rechts nicht aus dem Bild drücken:
     „BLITZRUNDE · KARTOFFELSORTE ODER STURMTIEF?“ passt auf kein Handy. */
  .runde-info{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;opacity:.6;text-align:center;flex:1;
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mute-btn{background:#241455;border:2px solid #4A2FA0;color:var(--papier);border-radius:8px;
    font-size:1.1rem;cursor:pointer;padding:4px 10px;line-height:1}
  .mute-btn:hover{border-color:var(--cyan)}
  .mute-btn:focus-visible{outline:2px solid var(--gelb);outline-offset:2px}

  .spieler-leiste{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
  .chip{display:flex;align-items:center;gap:6px;background:#1C0F45;border:2px solid var(--pf,#4A2FA0);
    border-radius:8px;padding:4px 8px;font-size:.8rem;opacity:.72;transition:.15s;min-width:0}
  .chip.dran{opacity:1;box-shadow:0 0 0 2px var(--pf), 0 0 14px -2px var(--pf);transform:translateY(-2px)}
  .chip.raus{opacity:.3}
  .chip-key{font-family:var(--display);background:var(--pf);color:var(--studio-deep);
    border-radius:4px;padding:0 5px;font-size:.85rem}
  .chip-name{opacity:.8;font-weight:700}
  .chip-geld{font-family:var(--display);letter-spacing:.03em;margin-left:2px}
  .chip.plus .chip-geld{color:var(--cyan)} .chip.minus .chip-geld{color:var(--rot)}

  /* Host */
  .host{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;min-height:60px}
  .host-kopf{width:50px;height:50px;flex:none;border-radius:50%;background:var(--magenta);
    display:flex;align-items:center;justify-content:center;font-size:1.6rem;
    border:3px solid var(--gelb);box-shadow:0 0 0 3px var(--studio-deep);
    animation:bob 3.4s ease-in-out infinite}
  .sprechblase{background:var(--papier);color:var(--studio-deep);border-radius:12px;border-top-left-radius:2px;
    padding:10px 14px;font-size:.96rem;line-height:1.4;max-width:600px;font-weight:500;
    box-shadow:3px 3px 0 rgba(0,0,0,.35)}

  /* Karte */
  .karte{background:var(--studio-deep);border:3px solid var(--gelb);border-radius:14px;
    padding:24px 22px 22px;box-shadow:8px 8px 0 rgba(0,0,0,.4);transform:rotate(-.6deg);position:relative;
    animation:karte-rein .35s cubic-bezier(.2,1.4,.4,1)}
  .karte.wackeln{animation:wackeln .35s}
  @keyframes wackeln{0%,100%{transform:rotate(-.6deg)}25%{transform:rotate(1.2deg) translateX(4px)}75%{transform:rotate(-2deg) translateX(-4px)}}
  .eyebrow{font-family:var(--display);letter-spacing:.1em;color:var(--magenta);font-size:.9rem;
    margin-bottom:8px;text-transform:uppercase}
  .wert-schild{position:absolute;top:-16px;right:18px;font-family:var(--display);font-size:1.1rem;
    background:var(--cyan);color:var(--studio-deep);padding:3px 12px;border-radius:5px;
    transform:rotate(3deg);box-shadow:2px 2px 0 rgba(0,0,0,.4);
    animation:schild .5s cubic-bezier(.3,1.8,.5,1) both}
  .frage{font-family:var(--display);font-size:clamp(1.35rem,4.3vw,1.95rem);line-height:1.15;
    letter-spacing:.01em;margin-bottom:18px;text-transform:uppercase}
  .antworten{display:grid;gap:10px}
  @media(min-width:560px){.antworten{grid-template-columns:1fr 1fr}}
  .antworten.gesperrt{opacity:.5;pointer-events:none}
  button.antwort{font-family:var(--body);font-weight:700;font-size:1rem;text-align:left;cursor:pointer;
    background:linear-gradient(180deg,#2A1866,#241455);color:var(--papier);border:2px solid #4A2FA0;border-radius:10px;padding:13px 14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
    transition:transform .1s, background .1s, border-color .1s}
  button.antwort .nr{display:inline-block;width:1.5em;color:var(--cyan);font-family:var(--display)}
  button.antwort:hover:not(:disabled),button.antwort:focus-visible{background:#37208A;border-color:var(--cyan);transform:translateY(-2px) rotate(-.4deg)}
  button.antwort:focus-visible{outline:3px solid var(--gelb);outline-offset:2px}
  button.antwort:disabled{cursor:default;opacity:.55}
  button.antwort.richtig{background:#0E7B4F;border-color:#3DE58F;opacity:1;animation:puls .45s}
  button.antwort.falsch{background:#8A1B1B;border-color:var(--rot);opacity:1}
  button.antwort.weg{visibility:hidden}

  .timer-schiene{height:12px;background:#241455;border-radius:99px;margin-bottom:16px;overflow:hidden;border:2px solid #4A2FA0}
  .timer-balken{height:100%;width:100%;background:linear-gradient(90deg,var(--cyan),var(--gelb));transform-origin:left;border-radius:99px;
    position:relative;overflow:hidden}
  .timer-balken::after{content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 8px, transparent 8px 16px);
    animation:streifen .8s linear infinite}
  .timer-balken.knapp{background:linear-gradient(90deg,var(--rot),var(--magenta))}

  .status{text-align:center;font-family:var(--display);letter-spacing:.04em;font-size:1.05rem;
    margin-top:14px;min-height:1.4em;color:var(--gelb)}
  .status .klein{font-family:var(--body);font-weight:600;font-size:.82rem;opacity:.7;letter-spacing:0;color:var(--papier)}

  .fuss{display:flex;justify-content:flex-end;align-items:center;margin-top:14px;gap:10px}
  button.weiter,button.start{font-family:var(--display);letter-spacing:.05em;cursor:pointer;border:none;border-radius:8px;
    padding:10px 20px;font-size:1.25rem;background:var(--gelb);color:var(--studio-deep);box-shadow:4px 4px 0 var(--magenta);transition:transform .1s}
  button.weiter:hover,button.start:hover{transform:translateY(-2px) rotate(-1deg)}
  button.weiter:focus-visible,button.start:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

  /* Intro / Setup / Finale */
  .zentriert{text-align:center;padding:24px 10px}
  /* Kompakter Startbildschirm: kleinerer Kopf, Blöcke nebeneinander */
  .intro-kompakt{padding:10px 10px 16px}
  .intro-kompakt .logo-gross{font-size:clamp(2.4rem,7vw,3.6rem);margin-bottom:2px}
  .intro-kompakt .untertitel{margin-bottom:8px}
  .intro-kompakt .intro-text{margin-bottom:10px;font-size:.88rem}
  .intro-kompakt .setup-block{margin-bottom:10px}
  .intro-kompakt .pz-btn{width:48px;height:48px;font-size:1.25rem}
  .intro-kompakt .pz-btn.wide{width:auto;padding:0 10px;height:38px;font-size:.9rem}
  .intro-kompakt .spielerwahl{gap:6px}
  .intro-kompakt .setup-label{margin-bottom:6px}
  .intro-kompakt .start{margin-top:4px}
  /* Sehr flache Bildschirme: Kopf weiter eindampfen */
  @media(max-height:760px){
    .intro-kompakt .logo-gross{font-size:2.2rem}
    .intro-kompakt .intro-text{display:none}
    .intro-kompakt .untertitel{margin-bottom:4px}
    .intro-kompakt .setup-block{margin-bottom:6px}
  }
  .setup-grid{max-width:1080px;margin:0 auto}
  @media(min-width:760px){
    .setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-items:start;text-align:center}
    .setup-grid .breit{grid-column:1/-1}
    .setup-grid .setup-block{max-width:none}
    .intro-kompakt .hc-hinweis{margin-top:4px}
  }
  @media(min-width:1080px){
    .setup-grid{grid-template-columns:1.8fr 1fr 1fr;max-width:1200px}
  }
  /* Ohne Impact – auf Android und in jedem Prüflauf – springt eine breite
     Schrift ein, und „BESSERWISSER!“ lief bei 12vw rechts aus der Karte. Die
     Größe ist auf die Ersatzschrift bemessen; mit Impact bleibt Luft. */
  .logo-gross{font-family:var(--display);font-size:clamp(2rem,9.5vw,5rem);line-height:.95;text-transform:uppercase;
    color:var(--gelb);text-shadow:5px 5px 0 var(--magenta),10px 10px 0 rgba(0,0,0,.4);transform:rotate(-3deg);
    margin-bottom:8px;animation:einzug .6s cubic-bezier(.2,1.6,.4,1)}
  @keyframes einzug{from{transform:rotate(-3deg) scale(.3);opacity:0}to{transform:rotate(-3deg) scale(1);opacity:1}}
  .untertitel{font-family:var(--display);color:var(--cyan);font-size:clamp(1rem,3.5vw,1.4rem);letter-spacing:.08em;transform:rotate(1deg);margin-bottom:22px}
  .intro-text{max-width:520px;margin:0 auto 22px;line-height:1.55;opacity:.9}
  .spielerwahl{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
  .pz-btn{font-family:var(--display);font-size:1.5rem;width:60px;height:60px;border-radius:10px;cursor:pointer;
    background:#241455;color:var(--papier);border:2px solid #4A2FA0;transition:.1s}
  .pz-btn:hover,.pz-btn.aktiv{background:var(--magenta);border-color:var(--gelb);transform:translateY(-2px)}
  .pz-btn:focus-visible{outline:3px solid var(--gelb);outline-offset:2px}
  .setup-block{margin:0 auto 20px;max-width:560px}
  .setup-label{font-family:var(--display);letter-spacing:.12em;font-size:.85rem;color:var(--cyan);
    text-transform:uppercase;margin-bottom:8px}
  .namen-liste{display:grid;gap:8px;grid-template-columns:1fr 1fr;max-width:640px;margin:12px auto 0}
  @media(min-width:760px){ .setup-grid .namen-liste{grid-template-columns:1fr;max-width:none} }
  .name-row{display:flex;gap:6px;align-items:stretch}
  input.name-feld{background:#241455;border:2px solid var(--pf,#4A2FA0);border-radius:8px;color:var(--papier);
    padding:9px 12px;font:inherit;font-size:1.02rem;font-weight:700;width:100%;min-width:0}
  input.name-feld::placeholder{color:var(--papier);opacity:.35}
  input.name-feld:focus{outline:2px solid var(--gelb);outline-offset:1px}
  .hc-btn{flex:none;white-space:nowrap;font-size:.72rem;font-weight:700;cursor:pointer;border-radius:8px;
    padding:0 8px;background:#1C0F45;color:var(--papier);border:2px solid #4A2FA0;opacity:.6;transition:.1s}
  .hc-btn.aktiv{opacity:1;border-color:var(--gelb);background:#3a2450;color:var(--gelb)}
  .hc-btn:hover{transform:translateY(-1px)}
  .hc-btn:focus-visible{outline:2px solid var(--gelb);outline-offset:2px}
  .hc-hinweis{font-size:.72rem;opacity:.55;margin-top:10px;line-height:1.4}
  .pz-btn.wide{width:auto;padding:0 20px;font-size:1.1rem}
  .chip-hc{font-family:var(--display);font-size:.72rem;background:var(--gelb);color:var(--studio-deep);
    border-radius:4px;padding:0 4px;margin-left:2px}
  .kat-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .kat-chip{font-family:var(--body);font-weight:700;font-size:.82rem;cursor:pointer;border-radius:99px;
    padding:6px 12px;background:#1C0F45;color:var(--papier);border:2px solid #4A2FA0;opacity:.5;transition:.1s}
  .kat-chip.aktiv{opacity:1;border-color:var(--cyan);background:#241455}
  .kat-chip:hover{transform:translateY(-1px)}
  .kat-chip:focus-visible{outline:2px solid var(--gelb);outline-offset:2px}
  .kat-chip.sonder{border-style:dashed;opacity:.85}
  .pool-info{font-size:.78rem;opacity:.65;margin-top:10px;min-height:1.2em}
  .stimme-wahl{background:#241455;border:2px solid #4A2FA0;color:var(--papier);border-radius:8px;
    padding:8px 10px;font:inherit;font-weight:700;max-width:280px}
  .stimme-wahl:focus{outline:2px solid var(--gelb);outline-offset:1px}
  .stat-tabelle{width:100%;border-collapse:collapse;font-size:.85rem}
  .stat-tabelle th{font-family:var(--display);letter-spacing:.06em;color:var(--cyan);padding:6px 8px;border-bottom:2px solid #4A2FA0}
  .stat-tabelle td{padding:6px 8px;text-align:center;border-bottom:1px solid #2b1a5e}
  .stat-tabelle tr:first-child+tr td{color:var(--gelb)}
  .endsumme{font-family:var(--display);font-size:clamp(2rem,8vw,3.4rem);color:var(--gelb);text-shadow:4px 4px 0 var(--magenta);margin:6px 0 2px}
  .rang{display:inline-block;font-family:var(--display);font-size:1.2rem;background:var(--cyan);color:var(--studio-deep);
    padding:4px 16px;border-radius:6px;transform:rotate(-2deg);margin-bottom:18px;box-shadow:3px 3px 0 rgba(0,0,0,.4)}
  .rangliste{max-width:420px;margin:0 auto 22px;text-align:left}
  .rl-zeile{display:flex;align-items:center;gap:10px;background:#1C0F45;border:2px solid var(--pf,#4A2FA0);
    border-radius:10px;padding:8px 12px;margin-bottom:8px}
  .rl-medaille{font-size:1.3rem;width:1.6em;text-align:center}
  .rl-name{flex:1;font-weight:700}
  .rl-geld{font-family:var(--display);font-size:1.2rem}

  /* Dies oder Das */
  .dod-item{font-family:var(--display);font-size:clamp(1.8rem,7vw,2.8rem);text-align:center;margin:14px 0 22px;
    color:var(--cyan);letter-spacing:.06em;text-transform:uppercase}
  .dod-wahl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .dod-fortschritt{text-align:center;font-size:.8rem;letter-spacing:.2em;opacity:.6;margin-bottom:6px}

  .tastenhinweis{font-size:.75rem;opacity:.5;margin-top:12px}
  /* Geräte, deren Hauptzeiger ein Finger ist: Dort gibt es keine Tastatur,
     die Buchstaben in den Beschriftungen wären irreführend. pointer:coarse
     statt hover:none – letzteres melden auch Browser ohne echten Zeiger. */
  @media(pointer:coarse){.taste{display:none}}

  /* ---------- Handy ----------
     Kopfzeile, Moderatorenkopf und Kartenrand fressen auf 390 Pixeln den
     halben Bildschirm. Alles eine Nummer kleiner, Tippflächen dafür größer.
     Gleicher Block wie in besserwisser.html. */
  @media(max-width:560px){
    body{padding:8px 8px 2.2rem}
    .topbar{margin-bottom:8px}
    .logo-mini{font-size:1.05rem;text-shadow:2px 2px 0 var(--magenta)}
    .runde-info{font-size:.6rem;letter-spacing:.06em}
    .spieler-leiste{gap:5px;margin-bottom:10px}
    .chip{padding:7px 9px;font-size:.82rem}
    .host{gap:8px;margin-bottom:10px;min-height:0}
    .host-kopf{width:36px;height:36px;font-size:1.1rem;border-width:2px;box-shadow:0 0 0 2px var(--studio-deep)}
    .sprechblase{font-size:.86rem;padding:8px 11px;line-height:1.35}
    .karte{padding:16px 14px 15px;border-width:2px;box-shadow:5px 5px 0 rgba(0,0,0,.4)}
    .frage{margin-bottom:13px}
    button.antwort{padding:11px 12px;font-size:.95rem}
    .timer-schiene{margin-bottom:11px}
    .status{font-size:.95rem;margin-top:11px}
    .dod-item{margin:10px 0 16px}
    .zentriert{padding:12px 4px}
  }

  /* --- Effekte --- */
  .blink{display:inline-block;animation:blinken .9s ease-in-out infinite}
  .geld-pop{position:absolute;left:50%;top:-10px;transform:translateX(-50%);font-family:var(--display);
    font-size:1.7rem;pointer-events:none;z-index:5;text-shadow:2px 2px 0 rgba(0,0,0,.55);
    animation:pop-hoch 1.1s ease-out forwards}
  .geld-pop.plus{color:#3DE58F}
  .geld-pop.minus{color:var(--rot)}
  .konfetti{position:fixed;top:-14px;z-index:50;pointer-events:none;border-radius:2px;animation:fallen linear forwards}
  @keyframes lichter{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
  @keyframes bob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg) translateY(-2px)}}
  @keyframes karte-rein{from{transform:rotate(-3deg) translateY(14px) scale(.97);opacity:0}to{transform:rotate(-.6deg) translateY(0) scale(1);opacity:1}}
  @keyframes schild{from{transform:rotate(3deg) scale(0)}to{transform:rotate(3deg) scale(1)}}
  @keyframes puls{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
  @keyframes blinken{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.06)}}
  @keyframes streifen{to{background-position:22.63px 0}}
  @keyframes pop-hoch{
    0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.7)}
    15%{opacity:1;transform:translateX(-50%) translateY(-6px) scale(1.15)}
    100%{opacity:0;transform:translateX(-50%) translateY(-48px) scale(1)}}
  @keyframes fallen{to{transform:translateY(106vh) rotate(720deg);opacity:.9}}

  @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

  /* Fußzeile mit den Pflichtangaben. Fest am unteren Rand statt im
     Textfluss: Der Body ist eine senkrecht zentrierende Flex-Box, ein
     gewöhnliches Element käme dort NEBEN der Bühne zu liegen. */
  .rechtliches{position:fixed;left:0;right:0;bottom:0;z-index:40;
    text-align:center;font-size:.66rem;letter-spacing:.06em;padding:6px 8px;
    background:linear-gradient(to top, rgba(12,7,34,.9), transparent);
    color:#9C8CB8;pointer-events:none}
  .rechtliches a{color:#9C8CB8;text-decoration:none;pointer-events:auto}
  .rechtliches a:hover{color:var(--gelb)}

  /* ---------- Netzbetrieb und Ein-Geräte-Spiel ----------
     Stand früher als <style> in index.html. Hier, damit lokal.html – das
     denselben Client bündelt – dieselben Regeln bekommt. */
  /* Ergänzungen für den Netzbetrieb – der Rest kommt unverändert aus stil.css */
  .verbindung{position:fixed;top:6px;left:50%;transform:translateX(-50%);z-index:50;
    font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:99px;
    background:#3B1220;color:#FFB4A2;border:1px solid #FF4B3355;display:none}
  .verbindung.sichtbar{display:block}
  /* Hinweis mitten im Spiel – gelb, kurz, ohne den Spielstand anzutasten */
  .hinweis{position:fixed;top:34px;left:50%;transform:translateX(-50%);z-index:50;max-width:92vw;
    font-size:.8rem;font-weight:700;padding:6px 14px;border-radius:99px;
    background:var(--gelb);color:var(--studio-deep);box-shadow:0 3px 0 rgba(0,0,0,.35);
    opacity:0;pointer-events:none;transition:opacity .2s}
  .hinweis.sichtbar{opacity:1}
  .code-anzeige{font-family:var(--display);font-size:2.6rem;letter-spacing:.22em;color:var(--gelb);
    text-shadow:3px 3px 0 var(--magenta);margin:4px 0 2px}
  .code-feld{text-transform:uppercase;letter-spacing:.35em;text-align:center;font-size:1.5rem;max-width:220px}
  .buzzer{display:block;width:min(74vw,300px);height:min(74vw,300px);margin:14px auto;border-radius:50%;
    border:none;cursor:pointer;font-family:var(--display);font-size:2.4rem;letter-spacing:.06em;
    color:#2A0713;background:radial-gradient(circle at 38% 32%, #FF7BA8, var(--magenta) 55%, #C21B5C);
    box-shadow:0 12px 0 #8E1342, 0 18px 30px rgba(0,0,0,.5);transition:transform .06s, box-shadow .06s;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .buzzer:active,.buzzer.gedrueckt{transform:translateY(9px);box-shadow:0 3px 0 #8E1342, 0 6px 14px rgba(0,0,0,.5)}
  .buzzer:disabled{background:radial-gradient(circle at 38% 32%, #6B5878, #4A3A55 60%, #35283F);
    color:#0006;box-shadow:0 8px 0 #2A2033;cursor:not-allowed}
  .buzzer.blitz{background:radial-gradient(circle at 38% 32%, #7BE9E6, var(--cyan) 55%, #12908D);box-shadow:0 12px 0 #0C6D6B, 0 18px 30px rgba(0,0,0,.5)}
  .mute-btn.abbruch-frage{background:var(--rot);color:#fff;border-color:var(--rot);
    width:auto;padding:0 10px;font-size:.72rem;font-weight:700;letter-spacing:.04em;animation:puls 1s infinite}
  /* Unübersehbare Ansage für den, der gerade antworten muss */
  .dran-du{margin:12px auto 0;max-width:520px;text-align:center;border-radius:12px;padding:10px 16px;
    font-family:var(--display);font-size:1.35rem;letter-spacing:.05em;
    background:var(--gelb);color:var(--studio-deep);box-shadow:0 4px 0 #B8860B;animation:puls .9s infinite}
  .dran-du > span{display:block;font-family:var(--body);font-size:.78rem;font-weight:600;
    letter-spacing:.02em;opacity:.75;margin-top:3px}
  .dran-du.genagelt{background:var(--rot);color:#fff;box-shadow:0 4px 0 #8E1A0E}
  .aktion-reihe{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}
  .aktion{font-family:var(--display);letter-spacing:.05em;font-size:1.05rem;padding:11px 20px;border-radius:12px;
    border:2px solid #ffffff22;background:#241455;color:var(--papier);cursor:pointer}
  .aktion.nagel{background:#5A1230;border-color:var(--rot);color:#FFD9D2}
  .aktion.joker{background:#123A5A;border-color:var(--cyan);color:#CFF6F5}
  .aktion:disabled{opacity:.35;cursor:not-allowed}
  .warte-liste{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
  .warte-chip{font-size:.78rem;padding:4px 10px;border-radius:99px;background:#241455;border:1px solid #ffffff18;opacity:.55}
  .warte-chip.fertig{opacity:1;background:#1C4A2E;border-color:#4ADE8055;color:#BBF7D0}
  .weg-verdeckt{opacity:.18;pointer-events:none}
  /* Die eigene, noch unaufgelöste Wahl in der Finalrunde: markiert, aber nicht grün */
  button.antwort.gewaehlt{background:#1E3A6E;border-color:var(--cyan);opacity:1;box-shadow:0 0 0 2px var(--cyan)}
  .mitspieler{font-size:.72rem;opacity:.5;text-align:center;margin-top:12px;letter-spacing:.06em}
  .ping{font-size:.62rem;opacity:.4;text-align:center;margin-top:6px;letter-spacing:.08em}
  .rolle-hinweis{font-size:.75rem;opacity:.6;text-align:center;margin-top:8px}
  .chip-leitung{color:var(--gelb);font-size:.8rem;line-height:1}
  .link-zeile{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:6px}
  .link-anzeige{font-size:.8rem;font-weight:700;color:var(--cyan);background:#241455;border-radius:8px;
    padding:6px 10px;max-width:100%;overflow-wrap:anywhere;user-select:all}
  .zusammenfassung{margin-top:14px;font-weight:700;font-size:.95rem;background:#1C0F45;border:2px dashed #4A2FA0;
    border-radius:10px;padding:9px 12px;display:inline-block}
  .abgegeben{color:var(--gelb);font-weight:700}
  .final-zeile{display:flex;justify-content:space-between;gap:12px;padding:5px 10px;border-radius:6px;background:#241455;font-size:.9rem}
  .schaetz-zeile{display:flex;justify-content:space-between;gap:12px;padding:5px 10px;border-radius:6px;background:#241455;font-size:.9rem}
  /* Auf dem Handy sollen Frage und Buzzer zusammen auf den Schirm passen. */
  @media(max-width:560px){
    .buzzer{width:min(62vw,260px);height:min(62vw,260px);margin:10px auto;font-size:2rem}
  }

  /* ---------- Ein-Geräte-Spiel ----------
     Chips sind dort Buzzer: antippbar, mit Tastenkürzel. */
  .chip[data-pi]{font:inherit;font-size:.8rem;color:inherit;text-align:left}
  .chip.tippbar{cursor:pointer}
  .chip.tippbar:active{transform:scale(.95)}
  .chip.tippbar:focus-visible{outline:3px solid var(--gelb);outline-offset:2px}
  body.lokal .ping{display:none}
  .eingabe-zeile{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}

  /* Die Lobby des Ein-Geräte-Spiels zeigt nur, was man zum Losspielen braucht:
     Wie viele spielt ihr, wie heißt ihr, los. Tempo, Niveau, Rundenzahl, Modus
     und die zwölf Themenblöcke sind zugeklappt – sonst standen dort über 600
     Pixel Einstellungen, und auf jedem Laptop musste man scrollen. */
  .setup-grid.mehr-aus{display:none}
  .mehr-knopf{width:100%;max-width:560px;margin:12px auto 0;cursor:pointer;
    font:inherit;font-size:.84rem;font-weight:700;color:var(--papier);
    background:#1C0F45;border:2px dashed #4A2FA0;border-radius:10px;padding:9px 12px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;transition:.1s}
  .mehr-knopf:hover{border-color:var(--cyan);transform:translateY(-1px)}
  .mehr-knopf:focus-visible{outline:3px solid var(--gelb);outline-offset:2px}
  .mehr-zeile{opacity:.85;text-align:left}
  .mehr-hinweis{flex:none;font-size:.76rem;color:var(--cyan);opacity:.9;white-space:nowrap}
  .lokal-lobby .logo-gross{font-size:clamp(2rem,7vw,3.2rem);margin-bottom:2px}
  .lokal-lobby .untertitel{margin-bottom:10px}
  .lokal-lobby .setup-block{margin-bottom:10px}
  .lokal-lobby .pz-btn{width:48px;height:48px;font-size:1.25rem}
  .lokal-lobby .spielerwahl{gap:6px}
  .lokal-lobby .setup-label{margin-bottom:6px}
  .lokal-lobby .setup-grid{margin-top:12px;text-align:center}
  .lokal-lobby .setup-grid .setup-block{margin-bottom:12px}
  @media(max-width:560px){
    .lokal-lobby .logo-gross{font-size:clamp(1.8rem,9vw,2.6rem);text-shadow:3px 3px 0 var(--magenta),6px 6px 0 rgba(0,0,0,.4)}
    .lokal-lobby .untertitel{font-size:.95rem;margin-bottom:8px}
    .lokal-lobby .hc-hinweis{display:none}   /* steht als Tooltip am Knopf */
    .lokal-lobby .setup-block{margin-bottom:6px}
    .lokal-lobby .start{margin-top:8px}
    .namen-liste{grid-template-columns:1fr;margin-top:8px;gap:6px}
    .mehr-knopf{font-size:.78rem;padding:8px 10px;margin-top:8px}
  }
  /* Schmal UND flach – kleine ältere Handys: Sechs Namensfelder sind der
     Löwenanteil, deshalb sitzen die Kürzungen vor allem dort. */
  @media(max-width:560px) and (max-height:700px){
    body{padding:6px 6px 2.2rem}
    .zentriert{padding:6px 4px}
    .lokal-lobby .logo-gross{font-size:1.9rem;margin-bottom:0}
    .lokal-lobby .untertitel{font-size:.78rem;margin-bottom:2px}
    .lokal-lobby .setup-label{margin-bottom:4px}
    .lokal-lobby .pz-btn{width:42px;height:42px;font-size:1.1rem}
    .namen-liste{gap:6px;margin-top:8px}
    input.name-feld{padding:5px 10px;font-size:.95rem}
    .mehr-knopf{margin-top:8px;padding:6px 10px}
    button.start{padding:8px 18px;font-size:1.1rem}
    .kat-chip{padding:4px 9px;font-size:.76rem}
    .tastenhinweis{margin-top:2px;font-size:.66rem;line-height:1.3}
  }