/* ================================================================
   PLAY SCROLL – core/style_online.css   (Online mit Freunden, 2026-10-10)
   Lobby-Fenster (#ps-online), Duell-Bretter, Rennen-Leiste.
   Nutzt die Farbvariablen aus style.css (--bg, --txt, --glass, --cyan …),
   folgt damit auch der hellen Ansicht. Spielbretter bleiben dunkel (--buehne*).
   ================================================================ */

/* ---------- Fenster ---------- */
.pso{position:fixed;inset:0;z-index:240;display:none;flex-direction:column;background:var(--bg);color:var(--txt);
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.pso.offen{display:flex}
.pso-kopf{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--linie,rgba(255,255,255,.08))}
.pso-kopf b{font-size:17px;font-weight:900;flex:1}
.pso-status{font-size:12px;color:var(--txt-dim);max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pso-status.aus{color:#ff6b6b}
.pso-knopf-rund{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-border);color:inherit}
.pso-knopf-rund .i{width:20px;height:20px}
.pso-inhalt{flex:1;overflow-y:auto;scrollbar-width:none;padding:14px 16px 90px;max-width:640px;width:100%;margin:0 auto;-webkit-overflow-scrolling:touch}
.pso h2{font-size:22px;font-weight:900;margin:6px 0}
.pso h3{font-size:15px;font-weight:800;margin:0 0 8px;display:flex;align-items:center;gap:6px;justify-content:space-between}
.pso h3 .i{width:18px;height:18px}
.pso-ueber{margin:18px 0 4px!important}
.pso-klein{font-size:12px;color:var(--txt-dim);margin:6px 0;line-height:1.45}
.pso-karte{background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;padding:14px;margin-bottom:12px}
.pso-zeile{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pso-mitte{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:40px 10px}
.pso-gross .i{width:54px;height:54px;color:var(--cyan)}
.pso-haupt,.pso-neben{border-radius:999px;padding:11px 18px;font-weight:800;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;justify-content:center}
/* gleicher Hauptknopf wie in der App (.knopf-auth: Anmelden, Los geht's) */
.pso-haupt{border:0;color:#1c0f00;background:linear-gradient(135deg,var(--pink),#ffb020);}
.pso-haupt:disabled{opacity:.45;cursor:default}
.pso-neben{background:transparent;border:1px solid var(--glass-border);color:inherit}
.pso-haupt .i,.pso-neben .i{width:16px;height:16px}
.pso-start{width:100%;margin-top:10px;font-size:16px;padding:14px}
.pso-verlassen{width:100%;margin-top:6px;color:#ff6b6b;border-color:rgba(255,107,107,.4)}
.pso-warte{text-align:center;font-weight:800;color:var(--txt-dim);margin:10px 0 0}
.pso-lader{width:38px;height:38px;border-radius:50%;border:4px solid var(--glass-border);border-top-color:var(--cyan);animation:pso-dreh 1s linear infinite}
@keyframes pso-dreh{to{transform:rotate(360deg)}}
.pso code{background:var(--glass);padding:2px 6px;border-radius:6px}

.pso-wer{display:flex;flex-direction:column;gap:6px}
.pso-wer span{font-size:12px;color:var(--txt-dim)}
.pso-wer label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--txt-dim)}
.pso-name,.pso-code-eingabe,.pso-wahl{background:var(--bg);color:var(--txt);border:1px solid var(--glass-border);border-radius:12px;padding:10px 12px;font-size:15px}
.pso-code-eingabe{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.3em;font-weight:900;font-size:20px;text-align:center}
.pso-wahl{width:100%;margin:4px 0}
.pso-option{display:block;font-size:12px;color:var(--txt-dim);margin-top:8px}

.pso-spiele{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:6px}
.pso-spiel{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px;border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-border);color:inherit;cursor:pointer}
.pso-spiel:active{transform:scale(.98)}
.pso-spiel b{font-size:14px}
.pso-spiel small{font-size:11px;color:var(--txt-dim);line-height:1.35}
.pso-logo{width:38px;height:38px;border-radius:22%}

.pso-code{text-align:center}
.pso-code-gross{font-size:40px;font-weight:900;letter-spacing:.18em;margin:2px 0 10px;font-variant-numeric:tabular-nums}
.pso-code .pso-zeile{justify-content:center}
.pso-qr{margin-top:12px;display:flex;justify-content:center}
.pso-qr svg{border-radius:10px;max-width:70vw;height:auto}

.pso-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pso-liste li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(127,127,127,.08)}
.pso-liste li b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pso-liste li small{font-size:11px;color:var(--txt-dim);background:rgba(127,127,127,.15);padding:2px 7px;border-radius:999px}
.pso-liste li.aus{opacity:.55}
.pso-punkt{width:9px;height:9px;border-radius:50%;background:#3fd06a;flex:none}
.pso-liste li.aus .pso-punkt{background:#888}
.pso-chef{color:var(--gold-txt,#ffd54a)!important}
.pso-pkt{font-weight:900;font-variant-numeric:tabular-nums}
.pso-platz{font-weight:900;width:24px}
.pso-ergebnis li.p1{background:linear-gradient(90deg,rgba(255,213,74,.28),rgba(255,213,74,.05))}
.pso-ergebnis li.p2{background:linear-gradient(90deg,rgba(200,210,230,.24),rgba(200,210,230,.04))}
.pso-ergebnis li.p3{background:linear-gradient(90deg,rgba(205,127,50,.26),rgba(205,127,50,.04))}
.pso-gold{font-size:12px;font-weight:800;color:var(--gold-txt,#ffd54a)}

.pso-modus{margin:8px 0}
.pso-modus button{flex:1;padding:9px;border-radius:12px;border:1px solid var(--glass-border);background:transparent;color:inherit;font-weight:800;font-size:13px}
.pso-modus button.an{background:var(--cyan);color:#111;border-color:transparent}

.pso-schnell{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 10px;margin:4px 0 8px}
.pso-schnell::-webkit-scrollbar{display:none}
.pso-schnell button{flex:none;border-radius:999px;padding:8px 12px;background:var(--glass);border:1px solid var(--glass-border);color:inherit;font-weight:700;font-size:13px}
.pso-blasen{position:absolute;left:0;right:0;top:calc(64px + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.pso-blase{background:rgba(20,20,30,.92);color:#fff;border-radius:999px;padding:8px 14px;font-size:13px;animation:pso-rein .25s ease-out;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.pso-blase b{color:var(--cyan)}
@keyframes pso-rein{from{transform:translateY(-8px);opacity:0}}

.pso-pille{position:fixed;left:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:150;display:flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--pink),#ffb020);color:#1c0f00;border:0;border-radius:999px;padding:9px 14px;font-weight:900;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.pso-pille .i{width:16px;height:16px}
/* display:flex oben würde sonst das hidden-Attribut überstimmen */
.pso-pille[hidden],.psr-leiste[hidden]{display:none!important}

.pso-banner{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;margin:0 0 16px;border-radius:18px;cursor:pointer;color:inherit;
  background:linear-gradient(110deg,rgba(255,138,0,.16),rgba(255,201,60,.06));border:1px solid var(--glass-border)}
.pso-banner>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px}
.pso-banner b{font-size:16px;font-weight:900}
.pso-banner small{font-size:12px;color:var(--txt-dim)}
.pso-banner-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),#ffb020);color:#1c0f00;flex:none}
.pso-banner .i{width:22px;height:22px}

/* ---------- Duelle ---------- */
.psd{display:flex;flex-direction:column;gap:10px}
.psd-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.psd-kopf b{font-size:18px;font-weight:900}
.psd-kopf span{font-size:12px;color:var(--txt-dim)}
.psd-hinweis{text-align:center;font-size:13px;color:var(--txt-dim);padding:6px}
.psd-tabs{display:flex;gap:6px;overflow-x:auto}
.psd-tabs button{flex:none;border-radius:999px;padding:7px 12px;border:1px solid var(--glass-border);background:transparent;color:inherit;font-size:12px;font-weight:700}
.psd-tabs button.an{background:var(--cyan);color:#111}
.psd-spieler{display:flex;gap:8px;flex-wrap:wrap}
.psd-sp{flex:1;min-width:120px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--glass);border:2px solid transparent}
.psd-sp.dran{border-color:var(--cyan)}
.psd-sp b{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psd-sp svg{width:20px;height:20px}
.psd-pkt{font-weight:900;font-size:16px}
.psd-uhr{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;padding:2px 8px;border-radius:8px;background:rgba(127,127,127,.15)}
.psd-uhr.laeuft{background:var(--cyan);color:#111}
.psd-status{text-align:center;font-weight:800;font-size:15px;padding:4px}
.psd-status.du{color:var(--cyan-txt,var(--cyan))}
.psd-status.ende{font-size:18px}
.psd-status.sieg{color:var(--gold-txt,#ffd54a)}
.psd-aufgeben{align-self:center;color:#ff6b6b;border-color:rgba(255,107,107,.4)}
.pst-x{color:#ff4f6a}.pst-o{color:#3fa7ff}

.pst-brett{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(86vw,360px);aspect-ratio:1;margin:0 auto;padding:8px;border-radius:18px;background:var(--buehne,#111)}
.pst-feld{border:0;border-radius:12px;background:rgba(255,255,255,.07);display:grid;place-items:center;cursor:pointer}
.pst-brett.aktiv .pst-feld:not(:disabled):hover{background:rgba(255,255,255,.14)}
.pst-feld svg{width:62%;height:62%}
.pst-feld.sieg{background:rgba(255,213,74,.3)}
.pst-feld.letzt{box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.pst-feld:disabled{cursor:default;opacity:1;color:inherit}

.psc-brett{display:grid;grid-template-columns:repeat(8,1fr);width:min(92vw,52vh,480px);aspect-ratio:1;margin:0 auto;border-radius:10px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.psc-feld{position:relative;display:grid;place-items:center;cursor:pointer;user-select:none}
.psc-feld.l{background:#e8d0a9}.psc-feld.d{background:#a5714b}
.psc-feld.letzt{background-image:linear-gradient(rgba(37,244,238,.28),rgba(37,244,238,.28))}
.psc-feld.wahl{outline:3px solid #25f4ee;outline-offset:-3px}
.psc-fig{font-size:clamp(20px,6.4vmin,42px);line-height:1;pointer-events:none}
.psc-fig.w{color:#fff;text-shadow:0 0 2px #000,0 1px 2px #000}
.psc-fig.b{color:#1a1a1a;text-shadow:0 0 1px rgba(255,255,255,.6)}
.psc-punkt{position:absolute;width:26%;height:26%;border-radius:50%;background:rgba(37,244,238,.6);pointer-events:none}
.psc-ring{position:absolute;inset:7%;border-radius:50%;border:3px solid rgba(254,44,85,.85);pointer-events:none}
.psc-farbe{width:16px;height:16px;border-radius:50%;border:2px solid #888;flex:none}
.psc-farbe.w{background:#fff}.psc-farbe.b{background:#1a1a1a}

.psm-brett{display:grid;grid-template-columns:repeat(var(--sp),1fr);gap:6px;width:min(92vw,480px);margin:0 auto;padding:8px;border-radius:16px;background:var(--buehne,#111)}
.psm-karte{aspect-ratio:3/4;border:0;border-radius:10px;cursor:pointer;display:grid;place-items:center;background:linear-gradient(145deg,#3a2f6a,#24204a);transition:transform .15s}
.psm-karte.offen{background:#f4f1ea}
.psm-karte.weg{opacity:.35}
.psm-brett.aktiv .psm-karte:not(:disabled):active{transform:scale(.95)}
.psm-karte:disabled{cursor:default}
.psm-ruecken{width:46%;aspect-ratio:1;height:auto;border-radius:50%;border:3px solid rgba(255,255,255,.25);box-shadow:inset 0 0 0 5px rgba(37,244,238,.18)}
.psm-sym{width:70%;height:70%}

/* ---------- Rennen ---------- */
/* Die Leiste hat eine feste Höhe, das Spiel-Vollbild rutscht darunter (sonst verdeckt sie die Kopfzeile der Spiele) */
.psr-leiste{position:fixed;left:0;right:0;top:0;z-index:250;height:calc(56px + env(safe-area-inset-top));box-sizing:border-box;
  padding:calc(6px + env(safe-area-inset-top)) 10px 6px;pointer-events:none;background:#0b0b14;border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
body.pso-rennen .game-fullscreen{top:calc(56px + env(safe-area-inset-top))}
.psr-zeile{display:flex;align-items:center;gap:8px;pointer-events:auto}
.psr-zeit{font-variant-numeric:tabular-nums;font-size:15px;font-weight:900;background:rgba(255,255,255,.12);padding:4px 10px;border-radius:999px;flex:none}
.psr-zeit.knapp{background:#ff4f5a}
.psr-wer{flex:1;display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}
.psr-wer::-webkit-scrollbar{display:none}
.psr-sp{flex:none;display:flex;flex-direction:column;gap:2px;min-width:64px;max-width:96px;padding:3px 7px;border-radius:8px;background:rgba(255,255,255,.1);font-size:10px}
.psr-sp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.psr-sp b{font-size:12px}
.psr-sp i{display:block;height:4px;border-radius:2px;background:linear-gradient(90deg,#25f4ee var(--p),rgba(255,255,255,.18) var(--p))}
.psr-sp.ich{outline:2px solid #25f4ee}
.psr-sp.fertig{background:rgba(63,208,106,.35)}
.psr-sp.raus{opacity:.5}
.psr-mehr{flex:none;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.35);color:#fff;padding:5px 10px;font-weight:800;font-size:12px}
.psr-blase{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin:6px 0 0;width:max-content;max-width:90%;background:rgba(20,20,30,.92);border-radius:999px;padding:6px 12px;font-size:12px;opacity:0;transition:opacity .2s}
.psr-blase.an{opacity:1}
.psr-count{position:fixed;inset:0;display:none;place-items:center;font-size:120px;font-weight:900;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.6);background:rgba(0,0,0,.28);pointer-events:auto;touch-action:none}   /* Spiel ist dahinter schon zu sehen, Tippen wird bis 0 abgefangen */
.psr-count.an{display:grid}
.psr-tabelle li{flex-wrap:wrap}
.psr-balken{flex:0 0 40%;height:8px;border-radius:4px;background:rgba(127,127,127,.2);overflow:hidden}
.psr-balken i{display:block;height:100%;background:var(--cyan)}

/* ---------- Nachbesserungen nach Philipps Live-Test (2026-10-10) ---------- */
.pso-inhalt::-webkit-scrollbar{display:none}
body.pso-offen #toast{z-index:300}                 /* Meldungen über dem Online-Fenster (vorher dahinter) */
.pso-gross-knopf{width:100%;padding:16px;font-size:17px;margin:2px 0 4px}
.pso-gross-knopf .i{width:20px;height:20px}
.pso-mitte-text{text-align:center;margin:0 0 14px}
.pso-neben.an{background:var(--pink);border-color:transparent;color:#1c0f00}
.pso-gewaehlt{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pso-gewaehlt>div{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pso-gewaehlt b{font-size:16px}
.pso-gewaehlt small{font-size:12px;color:var(--txt-dim)}
.pso-gewaehlt .pso-logo{width:52px;height:52px;flex:none}
.pso-spiele-klein{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));margin:8px 0 4px}
.pso-spiele-klein .pso-spiel{align-items:center;text-align:center;padding:10px 6px}
.pso-spiele-klein .pso-spiel b{font-size:12px;line-height:1.2}
.pso-spiel.an{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink) inset}
.pso-option{margin:12px 0 6px}
.pso-chips{display:flex;flex-wrap:wrap;gap:6px}
.pso-chips button{border-radius:999px;padding:9px 14px;border:1px solid var(--glass-border);background:var(--glass);color:inherit;font-weight:800;font-size:13px;cursor:pointer}
.pso-chips button.an{background:linear-gradient(135deg,var(--pink),#ffb020);color:#1c0f00;border-color:transparent}

/* ---------- Leiter, Nachrichten-Knopf, Emojis, Tic-Tac-Toe-Raster (2026-10-10, 2. Live-Test) ---------- */
.pst-brett{grid-template-rows:repeat(3,1fr)}          /* alle Felder gleich hoch – vorher richtete sich die Zeile nach dem Inhalt */
.pst-feld{min-height:0;min-width:0;padding:0;aspect-ratio:auto}
.pso-mitglied-knoepfe{display:flex;gap:4px;margin-left:4px}
.pso-mitglied-knoepfe button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--glass-border);background:transparent;color:var(--txt-dim);cursor:pointer}
.pso-mitglied-knoepfe button .i{width:15px;height:15px}
.pso-mitglied-knoepfe button[data-a="kicken"]:hover{color:#ff6b6b;border-color:rgba(255,107,107,.5)}
.pso-nachricht-zeile{display:flex;justify-content:center;margin:6px 0 10px}
.pso-sprech{display:flex;align-items:center;gap:8px;border-radius:999px;padding:10px 18px;border:1px solid var(--glass-border);background:var(--glass);color:inherit;font-weight:800;font-size:14px;cursor:pointer}
.pso-sprech .i{width:18px;height:18px}
.pso-panel{position:absolute;left:0;right:0;bottom:0;z-index:5;max-width:640px;margin:0 auto;background:var(--bg2,#12121e);border-radius:22px 22px 0 0;
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.5);border-top:1px solid var(--glass-border);animation:pso-hoch .2s ease-out}
.pso-panel[hidden]{display:none}
@keyframes pso-hoch{from{transform:translateY(30px);opacity:0}}
.pso-panel-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pso-panel-kopf b{font-size:16px}
.pso-emojis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.pso-emoji{position:relative;aspect-ratio:1;border-radius:16px;border:1px solid var(--glass-border);background:var(--glass);display:grid;place-items:center;cursor:pointer}
.pso-emoji.zu .pso-emoji-bild{opacity:.35;filter:grayscale(.7)}
.pso-preis{position:absolute;bottom:4px;right:6px;display:flex;align-items:center;gap:2px;font-size:11px;font-weight:900;color:var(--gold-txt,#ffd54a)}
.pso-preis .i{width:11px;height:11px}
.pso-panel .pso-schnell{margin:0}
.pso-blase.mit-emoji{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 12px}

/* ---------- Echtzeit-Duelle (Ballduell, Heiße Kartoffel) ---------- */
.pse-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.pse-feld{border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.4);max-width:100%;touch-action:none}
.pse-tipp{font-size:13px;font-weight:700;color:var(--txt-dim);text-align:center;min-height:18px}

/* Zuschauen: Live-Bild eines anderen, wenn man selbst raus ist (online_rennen.js) */
.psz{position:fixed;left:0;right:0;bottom:0;top:calc(56px + env(safe-area-inset-top));z-index:245;display:flex;flex-direction:column;gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));box-sizing:border-box;background:rgba(8,10,20,.92);backdrop-filter:blur(6px)}
.psz-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.psz-wer{flex:1;text-align:center;color:#fff;font-weight:800;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psz-pfeil{width:44px;height:44px;border-radius:14px;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer}
.psz-buehne{position:relative;flex:1;min-height:0;display:grid;place-items:center;border-radius:16px;overflow:hidden;background:#000}
.psz-bild{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;image-rendering:auto}
.psz-bild:not([src]){display:none}
.psz-warte{position:absolute;color:rgba(255,255,255,.7);font-weight:700}
.psz-zu{align-self:center;border:0;border-radius:999px;padding:10px 18px;background:rgba(255,255,255,.14);color:#fff;font-weight:800;cursor:pointer}

/* Folgen: ich bin raus, meine Figur fährt als Geist einem anderen nach (online_rennen.js) */
.psf{position:fixed;left:50%;transform:translateX(-50%);top:calc(64px + env(safe-area-inset-top));z-index:251;display:flex;align-items:center;gap:6px;padding:4px;border-radius:999px;background:rgba(10,12,24,.82);backdrop-filter:blur(6px);box-shadow:0 4px 18px rgba(0,0,0,.35);max-width:calc(100% - 32px)}
.psf-wer{color:#fff;font-weight:800;font-size:14px;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psf-pfeil{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:14px;cursor:pointer;flex:none}

/* Schach (2026-10-13, Philipp: "Spielfeldgrößen verbackt"): 8 gleich hohe Zeilen - vorher wuchsen Reihen mit Figuren */
.psc-brett{grid-template-rows:repeat(8,1fr)}
.psc-feld{min-width:0;min-height:0;overflow:hidden}
.psc-fig{font-size:min(8.6vw,4.9vh,45px)}

/* ---------- Stream-Test 13.10. (Gustav Heimserver, 14.10.) ---------- */
/* A3: Nachrichten/Reaktionen waren zu klein – Blasen in Lobby und Rennleiste größer */
.pso-blase{font-size:16px;padding:10px 18px}
.pso-blase.mit-emoji{padding:8px 18px 8px 14px}
.psr-blase{font-size:15px;padding:8px 16px}
/* A2: Wieder beitreten */
.pso-wieder + .pso-neben{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px}
/* A4: Vorschläge + Abstimmung */
.pso-vorschlaege{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:6px}
.pso-vorschlaege li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05)}
.pso-vorschlaege .pso-logo{width:30px;height:30px;flex:0 0 auto}
.pso-vorschlaege b{font-size:13px}
.pso-vorschlaege small{flex:1;min-width:0;font-size:11px;color:var(--txt-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pso-vorschlaege .pso-neben{flex:0 0 auto;padding:6px 12px;width:auto;margin:0}
.pso-abst-knoepfe{flex-wrap:wrap;gap:6px;margin-top:8px}
.pso-abst-knoepfe .pso-neben{flex:1 1 160px;margin:0}
.pso-abstimmung{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}
.pso-abstimmung h3{display:flex;align-items:center;gap:8px}
.pso-abstimmung .pso-abst-rest{margin-left:auto;font-variant-numeric:tabular-nums}
.pso-abstimmung .pso-spiel small{color:var(--cyan);font-weight:700}
.pso-abst-erg{display:flex;align-items:center;gap:6px;justify-content:center}
/* B6 Schach (Stream-Test 13.10.): SVG-Figuren, geschlagene Figuren + Material, König im Schach, Umwandlung */
.psc-fig{display:block;width:88%;height:88%}
.psc-fig svg{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.psc-feld.schach{background-image:radial-gradient(circle,rgba(255,40,60,.85) 0%,rgba(255,40,60,.45) 45%,rgba(255,40,60,0) 75%)}
.psc-wrap{position:relative;width:min(92vw,52vh,480px);margin:0 auto}
.psc-wrap .psc-brett{width:100%}
.psc-beute{display:flex;align-items:center;flex-wrap:wrap;gap:0;min-height:30px;width:min(92vw,52vh,480px);margin:6px auto;padding:3px 10px;box-sizing:border-box;border-radius:10px;background:rgba(232,208,169,.16)}
.psc-beute span{width:22px;height:22px;margin-right:-6px}
.psc-beute span svg{width:100%;height:100%}
.psc-beute b{margin-left:12px;font-size:14px;color:#ffd54a}
.psc-promo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(8,8,14,.78);border-radius:10px;z-index:3}
.psc-promo p{margin:0;font-weight:800;font-size:16px}
.psc-promo div{display:flex;gap:8px}
.psc-promo button[data-promo]:not(.psc-promo-zu){width:64px;height:64px;padding:6px;border-radius:14px;border:2px solid rgba(255,255,255,.25);background:#e8d0a9;cursor:pointer}
.psc-promo button svg{width:100%;height:100%}
.psc-promo-zu{background:none;border:0;color:var(--txt-dim,#aaa);font-size:13px;cursor:pointer;text-decoration:underline}
/* B12 Tic-Tac-Toe (Stream-Test 13.10., 22:09: „Spielfeld größer“): vorher höchstens 360 px */
.pst-brett{width:min(92vw,56vh,520px);gap:10px;padding:10px}
.pst-feld svg{width:66%;height:66%}
/* B13 PlayScroll Party (Stream-Test 13.10.) */
.pso-party.an{border-color:#ffb020;box-shadow:0 0 0 1px #ffb020 inset}
.pso-party h3{display:flex;align-items:center;gap:6px}
.pso-party-start{width:100%;margin-top:10px}
.pso-party-liste{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.pso-party-liste span{display:flex;align-items:center;gap:5px;padding:4px 9px 4px 4px;border-radius:999px;background:rgba(255,255,255,.06);font-size:12px;font-weight:700;opacity:.7}
.pso-party-liste span .pso-logo{width:22px;height:22px;border-radius:6px}
.pso-party-liste span.fertig{opacity:.45;text-decoration:line-through}
.pso-party-liste span.jetzt{opacity:1;background:rgba(255,176,32,.22);box-shadow:0 0 0 1px #ffb020 inset}
.pso-party-stand li.ich b{color:#ffd54a}
.pso-party-sieger{text-align:center;font-size:18px;font-weight:900;margin:10px 0 4px}

/* ================================================================
   Online-Bereich im Store-Stil (Philipp 14.10.: schöner, kleiner, klarer – Vorlage: Store-Seiten der Spiele)
   ================================================================ */
.pso-s{--s-or:#ff8a00;--s-leise:#8e939c;--s-linie:rgba(255,255,255,.08);max-width:640px;margin:0 auto;padding:4px 2px 24px;font-size:14px}
.pso-s section{border-top:1px solid var(--s-linie);margin-top:20px;padding-top:18px}
.pso-s h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.2px}
.pso-s h3{margin:0 0 10px;font-size:17px;font-weight:700;display:flex;align-items:baseline;gap:8px}
.pso-s-orange{color:var(--s-or);font-weight:800;font-size:13px;letter-spacing:.02em;margin:2px 0 0}
.pso-s-grau{color:var(--s-leise);font-size:13px;line-height:1.45;margin:4px 0}
.pso-s-grau.mitte{text-align:center}
.pso-s-kopf{display:flex;align-items:center;gap:14px;margin-top:4px}
.pso-s-kopf>div{min-width:0}
.pso-av{display:inline-grid;place-items:center;flex:none;border-radius:50%;overflow:hidden;background:#20232b;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.pso-av svg{width:100%;height:100%;display:block}
.pso-av.gross{border-radius:22%;box-shadow:0 0 0 2px rgba(255,138,0,.5)}
.pso-s-gast{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}
.pso-s-gast input{width:140px;height:32px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:inherit;font-size:13px}
.pso-s-gast span{color:var(--s-leise);font-size:12px}
.pso-s-link{background:none;border:0;padding:0;color:var(--s-or);font-weight:700;font-size:13px;cursor:pointer}
.pso-s-link.rot{display:block;margin:22px auto 0;color:#ff6b6b}
.pso-s-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.pso-s-haupt,.pso-s-zweit{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 16px;border:0;border-radius:16px;font-weight:800;font-size:15px;cursor:pointer;transition:transform .12s}
.pso-s-haupt{background:linear-gradient(135deg,var(--s-or),#ffb020);color:#1c0f00;box-shadow:0 6px 20px rgba(255,138,0,.25)}
.pso-s-zweit{background:rgba(255,255,255,.07);color:#fff}
.pso-s-haupt:active,.pso-s-zweit:active{transform:scale(.97)}
.pso-s-haupt:disabled,.pso-s-zweit:disabled{opacity:.4;cursor:default;box-shadow:none}
.pso-s-haupt svg,.pso-s-zweit svg{width:20px;height:20px}
.pso-s-haupt.klein,.pso-s-zweit.klein{height:38px;border-radius:12px;font-size:13px;padding:0 12px}
.pso-s-haupt.voll,.pso-s-zweit.voll{width:100%;margin-top:14px}
.pso-s-wieder{display:flex;align-items:center;gap:8px;width:100%;margin-top:14px;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,138,0,.45);background:rgba(255,138,0,.1);color:#fff;font-size:14px;cursor:pointer}
.pso-s-wieder b{color:var(--s-or);letter-spacing:.08em}
.pso-s-zahlen{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;padding:12px 0;border-top:1px solid var(--s-linie);border-bottom:1px solid var(--s-linie)}
.pso-s-zahlen div{text-align:center;border-left:1px solid var(--s-linie)}
.pso-s-zahlen div:first-child{border-left:0}
.pso-s-zahlen b{display:block;font-size:15px}
.pso-s-zahlen span{color:var(--s-leise);font-size:12px}
.pso-s-zahlen+section{border-top:0;margin-top:6px}
.pso-s-code{display:flex;gap:10px}
.pso-s-code input{flex:1;min-width:0;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:#fff;text-align:center;font-size:20px;font-weight:900;letter-spacing:.3em;text-transform:uppercase}
.pso-s-gut{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--s-linie)}
.pso-s-gut:last-child{border-bottom:0}
.pso-s-gut p{margin:0;color:#c9ccd2;font-size:13.5px;line-height:1.45}
.pso-s-gut b{color:#fff}.pso-s-gut b.g{color:#ffd54a}.pso-s-gut b.s{color:#cfd6e0}.pso-s-gut b.b{color:#e0955a}
.pso-s-sym{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,138,0,.14);color:var(--s-or)}
.pso-s-sym svg{width:22px;height:22px}
.pso-s-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;margin-top:8px}
.pso-s-kachel{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border-radius:14px;border:1px solid transparent;background:rgba(255,255,255,.04);color:#ddd;cursor:pointer;font-size:11px;line-height:1.2;text-align:center}
.pso-s-kachel .pso-logo{width:48px;height:48px;border-radius:12px}
.pso-s-kachel small{color:var(--s-or);font-weight:700}
.pso-s-kachel.gruen{border-color:#3ecf6e;background:rgba(62,207,110,.14);color:#fff}
.pso-s-kachel:active{transform:scale(.95)}
.pso-s-lobbykopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.pso-s-icons{display:flex;gap:8px}
.pso-s-icons button{width:42px;height:42px;border-radius:12px;border:0;background:rgba(255,255,255,.07);color:#fff;font-weight:900;font-size:12px;cursor:pointer;display:grid;place-items:center}
.pso-s-icons button.an{background:rgba(255,138,0,.25)}
.pso-s-icons svg{width:20px;height:20px}
.pso-seg{display:flex;gap:4px;padding:4px;margin:8px 0 4px;border-radius:14px;background:rgba(255,255,255,.06)}
.pso-seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;border:0;border-radius:10px;background:none;color:#aeb3bb;font-weight:700;font-size:13px;cursor:pointer}
.pso-seg button.an{background:linear-gradient(135deg,var(--s-or),#ffb020);color:#1c0f00}
.pso-seg button:disabled{cursor:default}
.pso-seg button svg{width:18px;height:18px}
.pso-seg.gross{margin-top:16px}.pso-seg.gross button{min-height:44px;font-size:14px}
.pso-s-option{margin:12px 0 0;color:var(--s-leise);font-size:12px;font-weight:700}
.pso-s-spieler{display:flex;flex-wrap:wrap;gap:10px}
.pso-s-sp{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:78px;text-align:center}
.pso-s-sp b{font-size:12px;max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pso-s-sp small{color:var(--s-leise);font-size:10.5px}
.pso-s-sp.aus{opacity:.45}
.pso-s-sp.ich .pso-av{box-shadow:0 0 0 2px var(--s-or)}
.pso-s-sp.ki .pso-av{box-shadow:0 0 0 2px #6aa8ff}
.pso-s-sp-knoepfe{position:absolute;top:-4px;right:2px;display:flex;gap:2px}
.pso-s-sp-knoepfe button{width:22px;height:22px;border-radius:50%;border:0;background:#2a2d35;color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.pso-s-sp-knoepfe svg{width:12px;height:12px}
.pso-s-code-gross{display:block;font-size:30px;font-weight:900;letter-spacing:.2em}
.pso-s-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.pso-s-ki{color:#6aa8ff;display:inline-flex}.pso-s-ki svg{width:22px;height:22px}
.pso-s-chip{height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(106,168,255,.4);background:rgba(106,168,255,.1);color:#cfe0ff;font-weight:700;font-size:12.5px;cursor:pointer}
.pso-s-app{display:flex;align-items:center;gap:12px}
.pso-s-app .pso-logo{width:56px;height:56px;border-radius:14px;flex:none}
.pso-s-app>div{flex:1;min-width:0;display:flex;flex-direction:column}
.pso-s-app b{font-size:16px}.pso-s-app small{color:var(--s-leise);font-size:12px}
.pso-s-liste{display:flex;flex-direction:column}
.pso-s-zeile-v{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--s-linie)}
.pso-s-zeile-v .pso-logo{width:40px;height:40px;border-radius:10px;flex:none}
.pso-s-zeile-v>div{flex:1;min-width:0;display:flex;flex-direction:column}
.pso-s-zeile-v small{color:var(--s-leise);font-size:12px}
.pso-s-zeile-v.meins{background:linear-gradient(90deg,rgba(62,207,110,.12),transparent);border-radius:10px;padding-left:6px}
.pso-s-marke{flex:none;font-size:11px;font-weight:800;color:#3ecf6e;background:rgba(62,207,110,.14);padding:4px 8px;border-radius:999px}
.pso-s-marke.grau{color:var(--s-leise);background:rgba(255,255,255,.06)}
.pso-s-warte{text-align:center;color:var(--s-leise);margin:18px 0 6px}
@media (min-width:900px){.pso-s{max-width:720px;font-size:15px}.pso-s-raster{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}}

/* ================================================================
   Party Games – Spielbrett (core/online_party.js)
   ================================================================ */
.pso-pb{--s-or:#ff8a00;--s-leise:#8e939c;--s-linie:rgba(255,255,255,.08);display:grid;gap:14px;max-width:640px;margin:0 auto;padding:2px 0 20px;font-size:14px}
.pso-pb.breit{max-width:1180px;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);grid-template-areas:"kopf kopf" "karte seite";align-items:start}
.pso-pb.breit .pso-pb-kopf{grid-area:kopf}.pso-pb.breit .pso-pb-karte{grid-area:karte}.pso-pb.breit .pso-pb-seite{grid-area:seite}
.pso-pb-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pso-pb-kopf b{font-size:20px;font-weight:800}
.pso-pb-runde{color:var(--s-or);font-weight:800;font-size:13px;margin-left:6px}
.pso-pb-kopf .pso-s-link.rot{margin:0;display:inline}
.pso-pb-abbr.scharf{color:#fff;background:#c0392b;padding:6px 10px;border-radius:10px}
.pso-pb-karte{position:relative;border-radius:18px;overflow:hidden;background:#2b1d10;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.pso-pb-svg{display:block;width:100%;height:auto}
.pso-pb.breit .pso-pb-karte{position:sticky;top:8px}
.pso-pb-figuren{position:absolute;inset:0;pointer-events:none}
.pso-pb-figur{position:absolute;transform:translate(calc(-50% + var(--dx,0px)),-88%);transition:left .26s ease-in-out,top .26s ease-in-out,transform .2s}
.pso-pb-fk{display:block;position:relative;padding:2px;border-radius:50%;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.45)}
.pso-pb-fk::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-6px;border:6px solid transparent;border-top:8px solid #fff;border-bottom:0}
.pso-pb-figur.ich .pso-pb-fk,.pso-pb-figur.ich .pso-pb-fk::after{background:var(--s-or);border-top-color:var(--s-or)}
.pso-pb-figur.ki .pso-pb-fk,.pso-pb-figur.ki .pso-pb-fk::after{background:#6aa8ff;border-top-color:#6aa8ff}
.pso-pb-figur .pso-av{box-shadow:none}
.pso-pb-figur.hopp .pso-pb-fk{animation:psoPbHopp .3s ease-out}
@keyframes psoPbHopp{0%{transform:translateY(0)}45%{transform:translateY(-12px) scale(1.06)}100%{transform:translateY(0)}}
.pso-pb-seite{display:flex;flex-direction:column;gap:6px;min-width:0}
.pso-pb-panel{background:rgba(255,255,255,.04);border:1px solid var(--s-linie);border-radius:18px;padding:14px}
.pso-pb-panel h3{margin:0 0 8px;font-size:17px;font-weight:800;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pso-pb-uhr{margin-left:auto;font-size:13px;font-variant-numeric:tabular-nums}
.pso-pb-panel .pso-s-grau{margin:0 0 10px}
.pso-pb-standwrap{border-top:0!important;margin-top:4px!important;padding-top:6px!important}
.pso-pb-standwrap h3{margin:4px 0 8px;font-size:15px}
/* Auslosung (Durchlauf wie bei Lucky Challenges) */
.pso-pb-los{position:relative;height:84px;overflow:hidden;border-radius:14px;background:rgba(0,0,0,.3);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.pso-pb-band{position:absolute;left:0;top:10px;display:flex;gap:8px;will-change:transform}
.pso-pb-teil{flex:none;width:64px;height:64px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.06);transition:transform .3s,box-shadow .3s}
.pso-pb-teil .pso-logo{width:56px;height:56px;border-radius:12px}
.pso-pb-teil.treffer{transform:scale(1.12);box-shadow:0 0 0 3px #3ecf6e,0 0 22px rgba(62,207,110,.6)}
.pso-pb-pfeil{position:absolute;left:50%;top:0;margin-left:-8px;border:8px solid transparent;border-top:10px solid var(--s-or)}
.pso-pb-gezogen{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 2px;font-size:17px;animation:psoPbAuf .4s ease-out}
.pso-pb-gezogen .pso-logo{width:36px;height:36px;border-radius:9px}
@keyframes psoPbAuf{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.pso-pb-los-knopf,.pso-pb-weiter{display:flex;margin:12px auto 0}
/* Würfeln */
.pso-pb-wurfliste{display:flex;flex-direction:column;gap:2px}
.pso-pb-zeile{display:flex;align-items:center;gap:9px;padding:7px 4px;border-bottom:1px solid var(--s-linie);min-height:52px}
.pso-pb-zeile:last-child{border-bottom:0}
.pso-pb-zeile.ich{background:linear-gradient(90deg,rgba(255,138,0,.12),transparent);border-radius:12px}
.pso-pb-zeile>em,.pso-pb-st>em{width:22px;flex:none;font-style:normal;font-weight:900;color:var(--s-leise);text-align:center}
.pso-pb-zeile>em.g{color:#ffd54a}.pso-pb-zeile>em.s{color:#cfd6e0}.pso-pb-zeile>em.b{color:#e0955a}
.pso-pb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.pso-pb-wuerfel{display:flex;gap:7px;perspective:400px}
.pso-pb-summe{min-width:34px;text-align:right;font-weight:900;font-size:17px;color:var(--s-or)}
.pso-pb-summe.spaet{animation:psoPbAuf .3s ease-out 1.1s both}
.pso-pb-wurfknopf{animation:psoPbPuls 1.1s ease-in-out infinite}
@keyframes psoPbPuls{50%{transform:scale(1.07)}}
/* 3D-Würfel */
.pso-pb-w{--g:30px;display:inline-block;width:var(--g);height:var(--g)}
.pso-pb-wk{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}
.pso-pb-wk i{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:14%;border-radius:22%;background:#fafafa;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 -3px 5px rgba(0,0,0,.12);backface-visibility:hidden}
.pso-pb-wk i b{display:block;margin:auto;width:70%;height:70%;border-radius:50%}
.pso-pb-wk i b.a{background:#222}
.pso-pb-wk .vorne{transform:translateZ(calc(var(--g)/2))}
.pso-pb-wk .hinten{transform:rotateY(180deg) translateZ(calc(var(--g)/2))}
.pso-pb-wk .rechts{transform:rotateY(90deg) translateZ(calc(var(--g)/2))}
.pso-pb-wk .links{transform:rotateY(-90deg) translateZ(calc(var(--g)/2))}
.pso-pb-wk .oben{transform:rotateX(90deg) translateZ(calc(var(--g)/2))}
.pso-pb-wk .unten{transform:rotateX(-90deg) translateZ(calc(var(--g)/2))}
.pso-pb-w.gold .pso-pb-wk i{background:linear-gradient(135deg,#fff1a8,#ffcc33 55%,#d99a00)}
.pso-pb-w.silber .pso-pb-wk i{background:linear-gradient(135deg,#ffffff,#cfd6e0 55%,#9aa4b2)}
.pso-pb-w.bronze .pso-pb-wk i{background:linear-gradient(135deg,#f7c9a0,#d08a4e 55%,#9c5a26)}
.pso-pb-w.gold .pso-pb-wk i b.a{background:#6b4a00}.pso-pb-w.bronze .pso-pb-wk i b.a{background:#4a2410}
.pso-pb-w.zu .pso-pb-wk i{display:grid;place-items:center;padding:0;transform:none}
.pso-pb-w.zu em{font-style:normal;font-weight:900;font-size:16px;color:#888}
.pso-pb-w.zu{animation:psoPbWackel 1.6s ease-in-out infinite}
@keyframes psoPbWackel{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
/* Stand */
.pso-pb-stand{display:flex;flex-direction:column}
.pso-pb-st{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--s-linie)}
.pso-pb-st:last-child{border-bottom:0}
.pso-pb-st>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pso-pb-st b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pso-pb-st.ich b{color:var(--s-or)}
.pso-pb-st small{color:var(--s-leise);font-size:12px;font-variant-numeric:tabular-nums}
.pso-pb-balken{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.pso-pb-balken span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#c9a26a,#ffd54a);transition:width .4s}
/* Ende */
.pso-pb-ende{position:relative;text-align:center;padding:6px 0 2px;overflow:hidden}
.pso-pb-ende h2{margin:10px 0 2px;font-size:21px;font-weight:900}
.pso-pb-sieger{display:flex;justify-content:center;gap:14px;padding-top:22px}
.pso-pb-krone{position:relative;display:inline-block;animation:psoPbAuf .6s ease-out}
.pso-pb-krone .pso-av{box-shadow:0 0 0 3px #ffd54a,0 0 26px rgba(255,213,74,.55)}
.pso-pb-kr{position:absolute;left:50%;top:-22px;width:42px;margin-left:-21px;transform:rotate(-8deg)}
.pso-pb-konfetti{position:absolute;inset:0;pointer-events:none}
.pso-pb-konfetti i{position:absolute;top:-10px;width:7px;height:11px;border-radius:2px;animation:psoPbFall linear infinite}
@keyframes psoPbFall{from{transform:translateY(-10px) rotate(0)}to{transform:translateY(330px) rotate(540deg)}}
.pso-pb-chat:empty{display:none}
@media (min-width:820px){.pso-pb-w{--g:34px}}
@media (prefers-reduced-motion:reduce){.pso-pb-figur,.pso-pb-band{transition:none!important}.pso-pb-konfetti{display:none}.pso-pb-w.zu,.pso-pb-wurfknopf{animation:none}}
.pso-pb-gezogen[hidden]{display:none}
.pso-pb-konfetti{z-index:0}.pso-pb-sieger,.pso-pb-ende h2,.pso-pb-ende p,.pso-pb-ende button{position:relative;z-index:1}
.pso-inhalt.pso-breit{max-width:1240px}
@media (min-width:900px){.pso-inhalt{max-width:720px}.pso-inhalt.pso-breit{max-width:1240px}}
/* 14.10.: ein Knopf „Lobby erstellen“, Bot Gustav hervorgehoben */
.pso-s-knoepfe:has(> :only-child){grid-template-columns:1fr}
.pso-s-knoepfe + .pso-s-grau.mitte{margin-top:8px}
.pso-s-sp.ki.gustav .pso-av{box-shadow:0 0 0 2px #ff8a1f,0 0 12px rgba(255,138,31,.5)}
.pso-s-sp.ki.gustav small{color:#ffb15c}
.pso-s-chip.gustav{border-color:rgba(255,138,31,.6);background:rgba(255,138,31,.14);color:#ffd2a1}

/* 14.10.: öffentliche Lobbys */
.pso-s-offen{display:flex;flex-direction:column;gap:8px}
.pso-s-offen-zeile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.pso-s-offen-zeile b{display:block}
.pso-s-offen-zeile small{display:block;color:#9aa6bd;font-size:12.5px;margin-top:2px}
.pso-s h3 .pso-s-link.klein{float:right;font-size:12.5px;display:inline-flex;align-items:center;gap:4px}
.pso-s h3 .pso-s-link.klein svg{width:14px;height:14px}
.pso-sicht{margin:10px 0 4px}
/* „Lobby verlassen“ als echter Knopf (2026-10-17) */
.pso-verlassen{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:22px 0 4px;min-height:46px;padding:11px 16px;
  border-radius:14px;border:1.5px solid rgba(255,107,107,.55);background:rgba(255,107,107,.1);color:#ff8a8a;font-weight:800;font-size:14.5px;cursor:pointer}
.pso-verlassen svg{width:18px;height:18px}
.pso-verlassen:hover{background:rgba(255,107,107,.18)}
.pso-verlassen:active{transform:scale(.98)}
/* Galgenmännchen zusammen (core/online_galgen.js, 2026-10-17) */
.psg{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0}
.psg-oben{display:flex;justify-content:space-between;width:100%;font-size:12.5px;color:var(--s-grau,#9aa)}
.psg-galgen{width:150px;height:110px;fill:none;stroke:#e8e2d6;stroke-width:3;stroke-linecap:round}
.psg-wort{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.psg-wort span{min-width:26px;height:36px;display:grid;place-items:center;font-size:24px;font-weight:900;border-bottom:3px solid rgba(255,255,255,.35)}
.psg-wort span.leer{border-bottom-color:rgba(255,179,71,.7)}
.psg-hinweis{font-size:13px;color:#cfd3dc;text-align:center}
.psg-vorrecht{width:100%;height:30px;position:relative;border-radius:10px;background:rgba(255,255,255,.06);overflow:hidden;visibility:hidden}
.psg-vorrecht.an{visibility:visible}
.psg-vorrecht span{position:relative;z-index:1;display:block;text-align:center;line-height:30px;font-size:12.5px;font-weight:800}
.psg-vorrecht i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,107,107,.35)}
.psg-vorrecht.ich i{background:rgba(74,222,128,.4)}
.psg-tasten{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%;max-width:420px}
.psg-tasten button{min-height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;font-weight:900;font-size:16px;cursor:pointer}
.psg-tasten button.treffer{background:rgba(74,222,128,.25);border-color:#4ade80}
.psg-tasten button.fehl{opacity:.35}
.psg-tasten button:disabled{cursor:default}
.psg-punkte{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;font-size:13px}
.psg-punkte span{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.07)}
.psg-punkte span.ich{background:rgba(255,138,0,.25)}