/* Community, Mitspiel-Dock, Einwahl-Dialog, Einstieg – Farben je Welt über --wacc/--wbg (gesetzt von community.js) */
:root{--wacc:#f0b45a;--wbg:#103030;--ok:#3fbf6f}
html:not(.in-game){--acc:var(--wacc)}
html:not(.in-game) body{background:color-mix(in srgb,var(--wbg) 70%,#05070f)}
.lobby-grid{display:grid;grid-template-columns:1fr 340px;gap:1.2rem;align-items:start}
.lobby-grid .lob{min-width:0}
.worlds{display:flex;gap:.4rem;flex-wrap:wrap}
.wchip{background:rgba(10,12,24,.6);color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:.35rem .8rem;font-weight:500}
.wchip.on{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent);color:var(--c)}
.side{display:flex;flex-direction:column;gap:1rem}
.side h2{font-size:1.05rem;margin:0 0 .6rem}
.prof{display:flex;gap:.8rem;align-items:center}
.av{width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--wacc) 45%,#2a1e10);display:grid;place-items:center;font-weight:700;font-size:1.3rem}
.kline{margin-top:.8rem}.kline b{color:var(--wacc);font-size:1.05rem}
.bar{height:8px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;margin:.4rem 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--wacc) 60%,#000),var(--wacc))}
.stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;margin-top:.7rem}.stats b{display:block;font-size:1.1rem;overflow:hidden;text-overflow:ellipsis}
.set{margin-top:.8rem;border-top:1px solid var(--line);padding-top:.5rem}.set summary{cursor:pointer;color:var(--wacc)}
.set select,.fr select,.dlg select{background:rgba(255,255,255,.07);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:.3rem .4rem;width:100%;margin-top:.2rem}
.set select option,.fr select option{background:#151830}
.cbx{margin-top:.7rem}.cbx form{margin-top:.3rem}
.fr{display:flex;align-items:center;gap:.5rem;padding:.45rem 0;border-top:1px solid var(--line)}
.fr .n{flex:1;min-width:0}.fr small{display:block;color:var(--muted)}
.fr button{padding:.35rem .6rem;font-size:.85rem;white-space:nowrap}
.fr select.ch{width:auto;max-width:7.5rem;font-size:.75rem;margin:0}
.dot{width:9px;height:9px;flex:none;border-radius:50%;background:#666}.dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}.dot.ing{background:var(--wacc);box-shadow:0 0 8px var(--wacc)}
.req{background:color-mix(in srgb,var(--wacc) 12%,transparent);border:1px solid color-mix(in srgb,var(--wacc) 40%,transparent);border-radius:10px;padding:.5rem .7rem;margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem}
.req .n{flex:1}.req button{padding:.3rem .6rem}
.feed{padding-left:1rem;margin:0}.feed li{margin:.25rem 0}.plus{color:var(--ok)}.minus{color:var(--danger)}
.holer{position:fixed;right:1rem;top:5rem;z-index:20;max-width:360px;border-color:var(--wacc)}
/* Dock */
.dock{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);display:flex;align-items:center;gap:.7rem;background:rgba(15,17,34,.94);border:1px solid var(--line);border-radius:99px;padding:.45rem .55rem .45rem 1.1rem;box-shadow:0 12px 40px rgba(0,0,0,.55);z-index:15;white-space:nowrap;max-width:calc(100vw - 1.2rem)}
.dock .st{display:flex;align-items:center;gap:.5rem;font-weight:600}
.dock.ring{border-color:var(--wacc)}.dock.ring .dot{background:var(--wacc);animation:dpl 1s infinite}
.dock.live{border-color:var(--ok)}.dock.live .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}.dock.mute .dot{background:var(--danger)}
@keyframes dpl{50%{opacity:.25}}
.dock .ib{width:44px;height:44px;border-radius:50%;padding:0;font-size:1.15rem;background:rgba(255,255,255,.08);color:var(--ink)}
.dock .ib.red{background:var(--danger);color:#fff}.dock .ib.act{background:#fff;color:#111}
.dock .pad{position:absolute;bottom:calc(100% + .5rem);right:0;display:grid;grid-template-columns:repeat(3,52px);gap:.35rem;background:#151830;border:1px solid var(--line);border-radius:14px;padding:.6rem}
.dock .err{position:absolute;bottom:calc(100% + .4rem);left:1rem;white-space:normal;max-width:80vw;margin:0}
.dock .err:empty{display:none}
/* Dialoge */
.dlg{width:min(540px,94vw);background:#151830;color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:1.3rem}
.dlg::backdrop{background:rgba(0,0,0,.6)}
.way{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem;border:1px solid var(--line);border-radius:12px;margin-top:.6rem}
.way.rec{border-color:var(--wacc);background:color-mix(in srgb,var(--wacc) 8%,transparent)}
.way .ic{font-size:1.5rem;width:2rem;text-align:center}.way .t{flex:1;min-width:0}.way input{margin-top:.4rem}
.mono{font-family:ui-monospace,monospace;word-break:break-all}
.pin{display:flex;gap:.5rem;justify-content:center;margin:.8rem 0}
.pin span{width:3rem;height:3.6rem;display:grid;place-items:center;font:700 2rem ui-monospace,monospace;color:var(--wacc);border:2px solid var(--wacc);border-radius:10px}
.warnline{color:#f3c27a}.okline{color:#7fe0a0;font-weight:600}
/* Einstieg */
.intro{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 70%,color-mix(in srgb,var(--wacc) 22%,transparent),color-mix(in srgb,var(--wbg) 75%,transparent) 70%);transition:opacity .45s;cursor:pointer}
.intro.out{opacity:0}
.in-scene{text-align:center;transition:transform .6s,opacity .6s}
.in-cap{font-size:clamp(2.4rem,8vw,5rem);font-weight:700;color:var(--wacc);text-shadow:0 4px 30px #000c;animation:inz 2.2s ease-out both}
.in-tag{font-style:italic;font-size:1.2rem;color:#efe6d0;animation:inz 2.2s .3s ease-out both}
@keyframes inz{from{opacity:0;transform:scale(1.08) translateY(10px);letter-spacing:.2em}to{opacity:1;transform:none;letter-spacing:.02em}}
.intro.pick .in-scene{transform:translateY(-1.5rem) scale(.6);opacity:.55}
.intro.pick{background:color-mix(in srgb,var(--wbg) 88%,transparent);cursor:default;align-content:center;gap:0}
.in-pick{text-align:center;width:min(880px,94vw);animation:inz .5s ease-out both}
.in-worlds{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin:1rem 0}
.in-worlds button{display:flex;flex-direction:column;gap:.25rem;align-items:center;padding:1.1rem .6rem;border-radius:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 35%,var(--b)),var(--b));border:2px solid color-mix(in srgb,var(--c) 60%,transparent);color:#f3efe6}
.in-worlds button:hover{border-color:var(--c);box-shadow:0 0 24px color-mix(in srgb,var(--c) 45%,transparent)}
.in-worlds .ico{font-size:2.2rem}.in-worlds small{color:#d8d2c2;font-weight:400}
.ug-host{position:fixed;inset:0;z-index:45;pointer-events:none}
.mtabs{display:none}
@media (prefers-reduced-motion:reduce){.in-cap,.in-tag,.in-pick{animation:none}.dock.ring .dot{animation:none}}
@media (max-width:900px){.lobby-grid{grid-template-columns:1fr}}
@media (max-width:760px){
 main{padding-bottom:10rem}
 .dock{bottom:4.4rem;left:.6rem;right:.6rem;transform:none;border-radius:18px;justify-content:space-between}
 .mtabs{display:flex;position:fixed;bottom:0;left:0;right:0;background:#10122a;border-top:1px solid var(--line);z-index:16}
 .mtabs a{flex:1;text-align:center;padding:.5rem 0 .65rem;color:var(--muted);text-decoration:none;font-size:.8rem}.mtabs a.a{color:var(--wacc)}.mtabs a b{display:block;font-size:1.2rem}
 body.m-lobby .side{display:none}
 body.m-freunde .lob,body.m-freunde .side>.profc,body.m-freunde .side>.feedc{display:none}
 body.m-profil .lob,body.m-profil .side>.frc{display:none}
 body.m-profil .set{display:block}
 .in-worlds{grid-template-columns:1fr 1fr}
 .holer{left:.6rem;right:.6rem;top:4rem;max-width:none}
}
.lobby-grid{padding-bottom:84px}

#verify-dlg .cd{margin:.2rem 0 .6rem;padding:.35rem .6rem;border-radius:8px;background:color-mix(in srgb,var(--wacc) 14%,transparent);font-size:.9rem;text-align:center}
#verify-dlg .cd b{font-variant-numeric:tabular-nums;font-size:1.05rem;color:var(--wacc)}
#verify-dlg .cd.knapp b{color:#ff7a6a}
#verify-dlg .cd.aus{background:rgba(255,120,100,.15);color:#ffb0a0}