body.spiel{overflow:hidden;height:100vh}
body.spiel #c{position:fixed;inset:0;width:100vw;height:100vh;display:block}
body.spiel .zur-reliquie{left:16px}
#lade{position:fixed;inset:0;z-index:80;background:var(--spuel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font:600 13px var(--m);letter-spacing:.24em;color:var(--orange);transition:opacity .6s}
#lade i{display:block;width:280px;height:4px;background:#222}#lade b{display:block;height:100%;width:0;background:var(--orange)}
#lade.weg{opacity:0;pointer-events:none}
#schicht{position:fixed;left:16px;top:110px;z-index:30;max-width:420px;pointer-events:none}
#schicht b{display:block;font:850 clamp(20px,2.6vw,34px)/1 var(--a);font-stretch:118%;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.8)}
#schicht span{display:block;font:600 12px var(--m);color:var(--signal);margin-top:6px;text-shadow:0 1px 6px #000}
#schicht i{display:block;font:400 12px var(--m);color:#ddd;font-style:normal;text-shadow:0 1px 6px #000}
#log{position:fixed;left:16px;top:210px;z-index:30;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
#log li{width:40px;height:30px;display:flex;align-items:center;justify-content:center;font:700 12px var(--m);color:#111;background:var(--c);opacity:.3;border:2px solid transparent}
#log li.ok{opacity:1;border-color:var(--signal)}#log li.bruch{opacity:.85;border-color:var(--orange);background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(0,0,0,.4) 5px 7px)}
#log li.hier{outline:2px solid #fff}
#log.weg{display:none}
#hud{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:12px 16px;background:linear-gradient(0deg,rgba(14,15,16,.85),rgba(14,15,16,0))}
#hitze{display:flex;align-items:center;gap:8px;font:600 11px var(--m);letter-spacing:.2em;color:#ccc}
#hitze i{display:block;width:180px;height:8px;background:#333;overflow:hidden}
#hitze b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--signal),var(--orange))}
#hitze.heiss b{animation:blink .3s infinite alternate}
@keyframes blink{to{opacity:.4}}
#pkt{font:700 15px var(--a);font-stretch:112%;color:#fff}
.tasten{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
#meldung{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:50;font:850 clamp(20px,3vw,40px)/1.1 var(--a);font-stretch:116%;text-align:center;opacity:0;transition:opacity .3s;pointer-events:none;text-shadow:0 3px 20px #000;max-width:90vw}
#meldung.an{opacity:1}
.dialog{position:fixed;inset:0;z-index:60;background:rgba(5,5,6,.78);display:none;align-items:center;justify-content:center;padding:16px}
.dialog.auf{display:flex}.dialog.weg{display:none}
.dialog>div{max-width:640px;background:#141517;border:1px solid #333;border-top:4px solid var(--orange);padding:24px}
.dialog h3{margin:0 0 10px;font:850 28px var(--a);font-stretch:118%;color:#fff}
.dialog p{font:400 14px/1.55 var(--m);color:#ddd}
.dialog .vers{font:700 18px var(--a);color:var(--signal)}
.dialog .wahl{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
body.blitz::after{content:'';position:fixed;inset:0;background:#ff5a1f;z-index:70;opacity:.6;pointer-events:none}