/* Welt-Grafik: Szene, Außenbild, Bühne mit Figuren, HUD, Telegramm-Urteil, Musik-Leiste.
   Wird nach style.css geladen. Animationen: nur transform/opacity; html.fx-low und prefers-reduced-motion schalten sie ab. */

/* ── Außenbild (Start/Anmeldung/Lobby) ───────────────────── */
#outside{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0b1516}
#outside[hidden]{display:none!important}
#outside::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(6,10,16,.42),rgba(6,10,16,.18) 35%,rgba(6,10,16,.55))}
.o-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.o-layer.on{opacity:1}
html.has-outside #sky{display:none}
html.has-outside body{background:#0b1516}

/* ── Szene ─────────────────────────────────────────────── */
.wscene{position:absolute;inset:0;overflow:hidden;background:#0e1b1c}
.wscene svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.wscene .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,#0000 55%,#02080acc 100%)}
.wscene .flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 55%,#ff5a3a55,#5a000099);transition:opacity 1.4s}
.wscene.flash-on .flash{opacity:1;transition:opacity .15s}
.wscene.shake svg{animation:wshake .5s}
@keyframes wshake{0%,100%{transform:translate(0)}15%{transform:translate(-5px,2px)}30%{transform:translate(5px,-2px)}45%{transform:translate(-3px,-2px)}60%{transform:translate(3px,2px)}80%{transform:translate(-1px,1px)}}
.wscene .sk,.wscene .tint,.wscene .glow{transition:opacity 2.6s ease}
.wscene .world{transition:filter 2.6s ease}
.wscene[data-ph=tag] .world{filter:brightness(1.08) saturate(1.05)}
.wscene[data-ph=abend] .world{filter:brightness(.92) saturate(1.1) sepia(.18)}
.wscene[data-ph=nacht] .world{filter:brightness(.5) saturate(.75) hue-rotate(8deg)}
.wscene .sk-night{opacity:0}.wscene .sk-day{opacity:1}
.wscene[data-ph=nacht] .sk-night{opacity:1}.wscene[data-ph=nacht] .sk-day{opacity:0}
.wscene[data-ph=abend] .sk-night{opacity:.28}
.wscene .t-eve{opacity:0;mix-blend-mode:soft-light}.wscene .t-night{opacity:0;mix-blend-mode:multiply}
.wscene[data-ph=abend] .t-eve{opacity:1}.wscene[data-ph=nacht] .t-night{opacity:.5}
.wscene .glow{mix-blend-mode:screen}
.wscene[data-ph=tag] .glow{opacity:.2!important}.wscene[data-ph=abend] .glow{opacity:.65!important}.wscene[data-ph=nacht] .glow{opacity:1!important}
.wimage .glow{opacity:.9!important}
.wscene .moonglow{opacity:0;transform-box:fill-box;transform-origin:center;mix-blend-mode:screen}
.wscene[data-ph=nacht] .moonglow{opacity:1}
.wimage .moonglow{opacity:1}
@keyframes wflick{0%,100%{opacity:.95}8%{opacity:.7}14%{opacity:1}30%{opacity:.82}41%{opacity:.98}57%{opacity:.74}63%{opacity:.92}81%{opacity:.8}}
@keyframes wflick2{0%,100%{opacity:.9}20%{opacity:.78}35%{opacity:1}55%{opacity:.84}72%{opacity:.96}88%{opacity:.8}}
@keyframes wmoon{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes wcl1{from{transform:translateX(-140px)}to{transform:translateX(1200px)}}
@keyframes wcl2{from{transform:translateX(1150px)}to{transform:translateX(-220px)}}
@keyframes wfog1{0%{transform:translateX(-90px);opacity:.55}50%{opacity:.85}100%{transform:translateX(90px);opacity:.55}}
@keyframes wfog2{0%{transform:translateX(80px);opacity:.8}50%{opacity:.5}100%{transform:translateX(-100px);opacity:.8}}
@keyframes wsmoke{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.5}100%{transform:translate(34px,-120px) scale(2.6);opacity:0}}
@keyframes wmote{0%{transform:translate(0,0);opacity:0}20%{opacity:.8}100%{transform:translate(var(--dx),-70px);opacity:0}}
@keyframes wpan{0%,100%{transform:translateX(-6px) scale(1.03)}50%{transform:translateX(6px) scale(1.03)}}
@keyframes wpan2{0%,100%{transform:translateX(3px)}50%{transform:translateX(-3px)}}
@keyframes wkb{0%,100%{transform:scale(1.02) translateX(-4px)}50%{transform:scale(1.07) translateX(5px)}}
@keyframes wrain{to{transform:translate(-44px,220px)}}
.wscene .drift,.wscene .sm,.wscene .mote{transform-box:fill-box}
.wscene .fl1{animation:wflick 3.1s infinite}.wscene .fl2{animation:wflick2 4.3s infinite -1.2s}.wscene .fl3{animation:wflick 5.2s infinite -2.4s}.wscene .fl4{animation:wflick2 3.7s infinite -.6s}
.wscene .moonglow{animation:wmoon 7s ease-in-out infinite}.wscene[data-ph=nacht] .moonglow{animation-duration:4.5s}
.wscene .c1{animation:wcl1 95s linear infinite}.wscene .c2{animation:wcl2 130s linear infinite -50s}.wscene .c3{animation:wcl1 160s linear infinite -110s}
.wscene .f1{animation:wfog1 22s ease-in-out infinite alternate}.wscene .f2{animation:wfog2 29s ease-in-out infinite alternate}.wscene .f3{animation:wfog1 37s ease-in-out infinite alternate -10s}
.wscene .sm{transform-origin:center;animation:wsmoke 7s ease-out infinite}
.wscene .mote{fill:#ffcf80;transform-origin:center;animation:wmote 6s ease-in infinite}
.wscene .skies{transform-origin:50% 60%;animation:wpan 60s ease-in-out infinite}
.wscene .bdrop{animation:wpan2 40s ease-in-out infinite}
.wimage .kb{transform-origin:50% 60%;animation:wkb 70s ease-in-out infinite}
.wscene .rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen;opacity:.55}
.wscene .rain[hidden]{display:none}
.wscene .rain i{position:absolute;inset:-220px;background-size:220px 220px;animation:wrain .7s linear infinite}
.wscene .rain .r1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg stroke='%23aac8ee' stroke-width='1.2' stroke-linecap='round' opacity='.7'%3E%3Cpath d='M20 10l-8 34M90 70l-8 34M150 20l-8 34M60 150l-8 34M190 140l-8 34M120 190l-8 28'/%3E%3C/g%3E%3C/svg%3E")}
.wscene .rain .r2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg stroke='%2390b0d8' stroke-width='.8' stroke-linecap='round' opacity='.5'%3E%3Cpath d='M50 30l-5 22M130 100l-5 22M10 120l-5 22M170 60l-5 22M100 10l-5 22M200 190l-5 22'/%3E%3C/g%3E%3C/svg%3E");animation-duration:.95s;background-position:60px 40px}
html.fx-low .wscene *,html.fx-low .wscene .rain i{animation:none!important}
@media (prefers-reduced-motion:reduce){.wscene *,.wscene .rain i{animation:none!important}.o-layer{transition:none}}

/* ── Bühne im Spiel ────────────────────────────────────── */
.stage{height:auto;margin-bottom:1rem;display:flex;flex-direction:column}
.stage .arena{position:relative;height:clamp(400px,44vw,560px);overflow:hidden;border-radius:18px;border:1px solid var(--line);background:#0e1b1c;box-shadow:0 18px 50px #000a;isolation:isolate}
.stage .arena .wscene{z-index:0}
.stage .arena .ring{position:absolute;inset:0;z-index:2;height:auto}
.stage .arena.swap .ring{pointer-events:none}
@media (max-width:900px){.stage .arena{height:clamp(320px,84vw,460px)}}
/* HUD (Spielleiterin + Ansage + Stimmen) sitzt auf der dem Mond abgewandten Seite, nie über den Figuren */
.stage .center{position:absolute;z-index:4;top:12px;width:min(46%,470px);left:auto;right:auto;transform:none;text-align:left;pointer-events:none;display:flex;flex-direction:column;gap:.5rem}
.stage[data-hud=left] .center{left:14px}.stage[data-hud=right] .center{right:14px}
.stage .center .hostrow{display:flex;gap:.6rem;align-items:flex-start}
.stage[data-hud=right] .center .hostrow{flex-direction:row-reverse}
.hostbox{position:relative;flex:none;width:clamp(58px,8vw,92px);text-align:center}
.hostbox .port{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid #c9a36a;box-shadow:0 8px 22px #000a,inset 0 0 0 2px #2a1a10;background:#2b1d12}
.hostbox img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;transform-origin:50% 95%;animation:wbreathe 4.6s ease-in-out infinite}
.hostbox .hn{margin-top:.25rem;font:600 .62rem/1.1 Georgia,serif;letter-spacing:.06em;color:#f1e7c8;text-shadow:0 1px 6px #000;text-transform:uppercase}
@keyframes wbreathe{0%,100%{transform:scale(1) rotate(0)}35%{transform:scale(1.022) rotate(.5deg) translateY(-.6%)}70%{transform:scale(1.012) rotate(-.4deg)}}
html.fx-low .hostbox img{animation:none}@media (prefers-reduced-motion:reduce){.hostbox img{animation:none}}
.stage .center .say{min-width:0;flex:1}
.stage .center .caption{display:block;text-align:left;font-family:Georgia,serif;font-style:italic;font-size:clamp(.82rem,1.3vw,1.05rem);line-height:1.35;color:#2a2118;background:#f1e7c8;border-radius:12px;padding:.5rem .8rem;box-shadow:0 8px 24px #0009;text-shadow:none}
.stage .center .caption:empty{display:none}
.stage .center .tally{pointer-events:auto;margin:0;max-width:340px;font-size:.85rem}
.stage[data-hud=right] .center .tally{margin-left:auto}
@media (max-width:700px){
  .stage .center{position:static;order:-1;width:auto;margin:0 0 .5rem}
  .stage[data-hud] .center{left:auto;right:auto}
  .stage[data-hud=right] .center .hostrow{flex-direction:row}
  .stage .center .tally{max-width:none}
  .hostbox{width:54px}
}

/* Figuren-Token: Fußpunkt-verankert (left/top = Fußmitte), Breite/Höhe per --tw/--sh/--sw */
.stage .token{width:var(--tw,88px);margin-left:calc(var(--tw,88px)/-2);margin-top:calc(var(--sh,100px)*-1);transform-origin:50% var(--sh,100px);pointer-events:auto}
.stage .token .disc{width:var(--sw,46px);height:var(--sh,100px);margin:0 auto;border-radius:0;background:none;border:0;box-shadow:none;display:block;position:relative;animation:none;font-size:1rem;overflow:visible}
.stage .token .disc::before{content:"";position:absolute;left:50%;bottom:-4px;width:150%;height:16%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(#0009,#0000 70%);z-index:0}
.stage .token .fig{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 3px 4px #0008);transform-origin:50% 100%;animation:widle 4.2s ease-in-out infinite;user-select:none;-webkit-user-drag:none}
.stage .token.w1 .fig{animation-duration:5s;animation-delay:-1s}.stage .token.w2 .fig{animation-duration:4.6s;animation-delay:-2.3s}
.stage .token.mir .fig{transform:scaleX(-1)}
@keyframes widle{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,1.022)}}
.stage .token.mir .fig{animation-name:widlem}
@keyframes widlem{0%,100%{transform:scale(-1,1)}50%{transform:scale(-1.012,1.022)}}
html.fx-low .stage .token .fig{animation:none!important}@media (prefers-reduced-motion:reduce){.stage .token .fig{animation:none!important}}
.stage .token .ini{display:none}
.stage .token.me .disc{border:0;box-shadow:none}
.stage .token.me .disc::after{content:"";position:absolute;left:50%;bottom:-6px;width:170%;height:22%;transform:translateX(-50%);border-radius:50%;border:2px solid var(--acc);box-shadow:0 0 14px var(--acc);z-index:0}
.stage .token.me .nm{color:var(--acc);font-weight:700}
.stage .token.speaking .disc{border:0;box-shadow:none;animation:none}
.stage .token.speaking .fig{filter:drop-shadow(0 0 7px #7fe0a0) drop-shadow(0 3px 4px #0008)}
.stage .token.nominee .disc{border:0;animation:none;box-shadow:none}
.stage .token.nominee .fig{filter:drop-shadow(0 0 8px #ff6a4a) drop-shadow(0 3px 4px #0008)}
.stage .token.dead{filter:none}
.stage .token.dead .fig{filter:grayscale(1) brightness(.6);opacity:.4}
.stage .token.dead .disc::after{content:"✝";position:absolute;left:50%;top:30%;right:auto;bottom:auto;width:auto;height:auto;border:0;box-shadow:none;transform:translateX(-50%);font-size:1.3rem;color:#ddd;z-index:2;text-shadow:0 2px 6px #000}
.stage .token .nm{display:block;margin:.1rem auto 0;max-width:100%;font-size:clamp(.66rem,.9vw,.8rem);padding:0 .25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(8,10,22,.72);width:max-content;border-radius:6px}
.stage .token .disc .num{left:50%;bottom:-8px;transform:translateX(-120%);min-width:18px;height:18px;font-size:.62rem;z-index:3}
.stage .token .disc .badge{top:-4px;right:-6px;width:22px;height:22px;font-size:.85rem;z-index:3}
.stage .token .disc .wave{bottom:6px;right:-8px;z-index:3}
.stage .token .rl{font-size:.64rem}.stage .token .damp{font-size:.62rem;white-space:normal;line-height:1.1}
@media (prefers-reduced-motion:reduce){.stage .token.nominee .fig{filter:drop-shadow(0 0 5px #ff6a4a) drop-shadow(0 0 2px #ff6a4a)}}

/* ── Urteil als Telegramm ──────────────────────────────── */
.stage .verdict{position:absolute;left:50%;top:44%;z-index:6;translate:-50% -50%;min-width:0;width:min(420px,84%);padding:1.1rem 1.3rem;border-radius:4px;background:#f1e7c8;color:#2a2118;text-align:center;font-family:Georgia,serif;box-shadow:0 18px 50px #000c;border:0;background-image:repeating-linear-gradient(0deg,#0000 0 27px,#c9b98a55 27px 28px);rotate:-1.5deg}
.stage .verdict::before{content:"Telegramm vom Amt";display:block;letter-spacing:.3em;text-transform:uppercase;font-size:.62rem;color:#8a3b25}
.stage .verdict .v-emb{font-size:2rem}.stage .verdict .v-name{font-size:clamp(1.2rem,3vw,1.8rem);font-weight:700;color:#2a2118}
.stage .verdict .v-what{color:#2a2118;text-transform:none;letter-spacing:.02em;font-size:clamp(.85rem,1.4vw,1rem);margin-top:.2rem}
.stage .verdict .v-stamp{display:inline-block;margin-top:.6rem;border:3px solid #a33a22;color:#a33a22;padding:.05rem .8rem;font-weight:700;letter-spacing:.15em;rotate:-4deg;font-size:1rem}
@media (max-width:700px){.stage .verdict{position:absolute}}

/* ── Musik-Leiste ──────────────────────────────────────── */
#musicbar{position:fixed;left:.7rem;bottom:.7rem;z-index:90;display:flex;align-items:center;gap:.5rem;padding:.3rem .6rem .3rem .3rem;border-radius:999px;background:rgba(10,14,28,.88);border:1px solid #c9a36a99;box-shadow:0 6px 22px #000a;backdrop-filter:blur(6px);color:#f1e7c8;font:600 .8rem system-ui,sans-serif}
#musicbar button{display:flex;align-items:center;gap:.4rem;border:0;border-radius:999px;background:transparent;color:inherit;padding:.35rem .7rem;cursor:pointer;font:inherit;min-height:34px}
#musicbar button:hover,#musicbar button:focus-visible{background:#ffffff1f}
#musicbar .mi{font-size:1.15rem;line-height:1}
#musicbar input[type=range]{width:88px;accent-color:var(--acc,#e0a24a);cursor:pointer}
#musicbar.muted{border-color:#d9534f99}#musicbar.muted .ml{color:#ffb4a6}
#musicbar.wait .mi{animation:wmp 1.6s ease-in-out infinite}
@keyframes wmp{50%{transform:scale(1.25)}}
#musicbar.ducked::after{content:"leiser – Gespräch";font-weight:500;font-size:.68rem;color:#ffd28a}
html.fx-low #musicbar .mi,.fx-low #musicbar.wait .mi{animation:none}@media (prefers-reduced-motion:reduce){#musicbar.wait .mi{animation:none}}
@media (max-width:600px){#musicbar{bottom:4.3rem;left:.5rem;padding-right:.4rem}#musicbar input[type=range]{width:64px}}
html.in-game #sky{display:none}
html.in-game body{background:#0b1516}
.stage .arena:not(.ready) .ring{opacity:.0}
.stage .arena .ring{transition:opacity .6s}
@media (max-width:700px){.stage .token.me .disc::after{width:128%}}