@font-face{font-family:"Special Elite";src:url(fonts/special-elite.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Reenie Beanie";src:url(fonts/reenie-beanie.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Unifraktur";src:url(fonts/unifraktur.woff2) format("woff2");font-display:swap}
:root{--ink:#d8d4c6;--dim:#8f8b7e;--red:#b3201a;--bg:#000;--safeL:env(safe-area-inset-left,0px);--safeR:env(safe-area-inset-right,0px);--ctl:1}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none}
html,body{margin:0;height:100%;background:#000;color:var(--ink);font-family:"Special Elite","Courier New",monospace;overflow:hidden;overscroll-behavior:none}
input{user-select:text;-webkit-user-select:text;touch-action:manipulation}
#gl{position:fixed;inset:0;display:block;image-rendering:pixelated;background:#000}
.hidden{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* Menue */
#ui{position:fixed;inset:0;display:flex;pointer-events:none;z-index:20}
.scr{pointer-events:auto;margin:auto;padding:14px 22px;width:min(520px,92vw);max-height:100%;overflow:auto;touch-action:pan-y;text-align:center;scrollbar-width:none;animation:fadeIn .35s ease}
.scr::-webkit-scrollbar{display:none}
.scr.wide{width:min(820px,96vw);text-align:left}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.logo{font-family:"Unifraktur",serif;font-weight:400;font-size:clamp(52px,14vh,110px);margin:0;line-height:1;color:#e4e0d2;text-shadow:0 0 22px rgba(0,0,0,.95),2px 0 0 rgba(170,20,15,.55),-2px 0 0 rgba(20,90,110,.35);animation:logoGlitch 7s infinite steps(1)}
@keyframes logoGlitch{0%,91%,100%{transform:none;opacity:1}92%{transform:translateX(3px) skewX(5deg);opacity:.75}93%{transform:translateX(-2px);opacity:1}95%{transform:translateX(5px) skewX(-7deg);opacity:.55}96%{transform:none}}
.tag{margin:2px 0 12px;color:#b8b4a6;font-size:clamp(12px,3.2vh,15px);text-shadow:0 0 8px #000}
.foot{color:var(--dim);font-size:11px;margin:10px 0 0;text-shadow:0 0 6px #000}
h2{font-weight:400;font-size:clamp(20px,6vh,30px);margin:0 0 10px;letter-spacing:.04em;color:#e4e0d2;text-shadow:0 0 12px #000}
nav{display:flex;flex-direction:column;gap:7px;align-items:center}
#s-title{margin:auto auto auto max(4vw,var(--safeL));text-align:left;width:min(420px,50vw)}
#s-title nav{align-items:flex-start}
#s-title .m{min-width:230px;text-align:left}
.m{display:inline-block;padding:9px 18px;min-height:40px;background:rgba(8,8,10,.74);border:1px solid rgba(216,212,198,.28);color:var(--ink);font-size:clamp(14px,3.6vh,17px);letter-spacing:.02em;transition:background .15s,border-color .15s,color .15s;min-width:230px;backdrop-filter:blur(2px)}
.m:active,.m:hover{background:rgba(120,18,14,.5);border-color:#b3201a}
.m.primary{border-color:rgba(179,32,26,.85);background:rgba(90,12,9,.5)}
.m.small{font-size:13px;min-width:0;padding:7px 14px;min-height:34px}
.m.tiny{font-size:12px;min-width:0;padding:5px 10px;min-height:28px}
.m.on{background:rgba(179,32,26,.6);border-color:#d8332a}
.m:disabled{opacity:.4}
.back{margin-top:10px}
.row{display:flex;gap:8px;justify-content:center;align-items:stretch;margin:6px 0}
.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim);margin-bottom:8px}
input[type=text],input:not([type]){font:inherit;background:rgba(0,0,0,.72);color:var(--ink);border:1px solid rgba(216,212,198,.3);padding:9px;font-size:16px;text-align:center;width:100%}
input.code{width:130px;font-size:22px;letter-spacing:.3em;text-transform:uppercase}
.row .m{min-width:150px}
.divider{color:var(--dim);font-size:12px;margin:10px 0 2px}
.err{color:#e0564e;min-height:1.2em;font-size:13px;margin:6px 0 0;text-shadow:0 0 6px #000}

/* Lobby */
.lobbyhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
#lobbyCode{font-size:26px;letter-spacing:.2em;color:#fff;vertical-align:middle}
#lobbyCodeWrap{color:var(--dim);font-size:13px;text-shadow:0 0 6px #000}
#diffBox{display:flex;gap:4px}
#players{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.pl{background:rgba(5,5,7,.72);border:1px solid rgba(216,212,198,.16);padding:6px 8px;font-size:13px;min-height:42px;display:flex;align-items:center;gap:7px;overflow:hidden;white-space:nowrap}
.pl i{width:11px;height:22px;flex:none}
.pl.off{opacity:.45}.pl.empty{color:#55524a;border-style:dashed}
.pl .host{font-size:10px;color:#c0352c;margin-left:auto}
#levels{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
@media (max-width:640px){#levels{grid-template-columns:repeat(3,1fr)}}
.lvl{position:relative;aspect-ratio:16/10;background:#050506 center/cover;border:1px solid rgba(216,212,198,.2);padding:0;overflow:hidden;text-align:left;font-size:10.5px;color:#e4e0d2}
.lvl span{position:absolute;left:4px;bottom:3px;right:3px;text-shadow:0 0 4px #000,0 1px 2px #000;line-height:1.1}
.lvl b{position:absolute;right:5px;top:3px;font-weight:400;opacity:.75}
.lvl.lock{filter:grayscale(1) brightness(.34)}
.lvl:not(.lock):active,.lvl:not(.lock):hover{border-color:#d8332a}
.lvl.hostonly{cursor:default}
#lobbyFoot{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
#lobbyWait{margin:0 0 0 auto;color:var(--dim);font-size:12px;text-shadow:0 0 6px #000}

/* Einstellungen */
.tabs{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.tabs button{padding:6px 12px;border:1px solid rgba(216,212,198,.2);background:rgba(0,0,0,.7);font-size:13px;min-height:32px}
.tabs button.on{background:rgba(179,32,26,.55);border-color:#d8332a}
.tab{background:rgba(3,3,5,.8);border:1px solid rgba(216,212,198,.12);padding:6px 12px}
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(216,212,198,.07);font-size:13px}
.set:last-child{border:0}
.set.col{flex-direction:column;align-items:stretch;gap:4px}
.set em{display:block;font-style:normal;font-size:11px;color:var(--dim);margin-top:2px}
.set b{font-weight:400}
.seg{display:flex;flex:none}
.seg button{border:1px solid rgba(216,212,198,.2);padding:5px 8px;font-size:12px;margin-left:-1px;min-height:28px}
.seg button.on{background:rgba(179,32,26,.55);border-color:#d8332a}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;touch-action:none;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:rgba(216,212,198,.3)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:22px;margin-top:-10px;background:#b3201a;border:1px solid #e0564e}
input[type=range]::-moz-range-track{height:3px;background:rgba(216,212,198,.3)}
input[type=range]::-moz-range-thumb{width:18px;height:22px;background:#b3201a;border:1px solid #e0564e;border-radius:0}
.sw{position:relative;width:46px;height:24px;flex:none;display:block}
.sw input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.sw i{position:absolute;inset:0;border:1px solid rgba(216,212,198,.34);pointer-events:none}
.sw i:after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;background:#6b685e;transition:left .12s,background .12s}
.sw input:checked+i:after{left:24px;background:#d8332a}
.brightcal{display:flex;align-items:center;gap:4px;background:#000;padding:6px}
.brightcal i{width:30px;height:24px;background:#fff;flex:none}
.brightcal em{margin:0 0 0 6px}
.info{font-size:12px;color:#c9a35a;margin:4px 0}
.how{display:flex;flex-direction:column;gap:7px;font-size:13px;line-height:1.35;background:rgba(3,3,5,.8);border:1px solid rgba(216,212,198,.12);padding:10px 12px}
.how b{font-weight:400;color:#ecb5ae}
.ctlHelp{color:var(--dim)}

/* Sucher */
#hud{position:fixed;inset:0;z-index:10}
#rec{position:fixed;left:calc(18px + var(--safeL));top:10px;font-size:15px;color:#e5e1d3;text-shadow:1px 1px 0 #000;letter-spacing:.06em;pointer-events:none}
#rec .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#e02a20;margin-right:6px;animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#date{position:fixed;left:calc(18px + var(--safeL));bottom:8px;font-size:12px;color:#c9c5b7;opacity:.72;text-shadow:1px 1px 0 #000;pointer-events:none}
#bat{position:fixed;right:calc(18px + var(--safeR));top:12px;width:70px;pointer-events:none}
.bat-shell{height:13px;border:1.5px solid #d8d4c6;padding:1.5px;position:relative}
.bat-shell:after{content:"";position:absolute;right:-5px;top:3px;width:3px;height:5px;background:#d8d4c6}
#batFill{height:100%;background:#d8d4c6;width:100%}
#batFill.low{background:#e02a20;animation:blink .7s steps(1) infinite}
#stam{height:2px;margin-top:4px;background:rgba(216,212,198,.14)}
#stamFill{height:100%;background:#d8d4c6;width:100%;transition:opacity .4s}
#micBar{height:3px;margin-top:4px;background:rgba(216,212,198,.1)}
#micFill{height:100%;background:#c0352c;width:0}
#obj{position:fixed;left:50%;top:8px;transform:translateX(-50%);text-align:center;pointer-events:none;width:58vw;text-shadow:1px 1px 0 #000,0 0 6px #000;transition:opacity .6s}
#objT{font-size:14px;color:#e5e1d3}
#objP{font-size:13px;color:#d8bda0;min-height:1em}
#obj.hit #objT{color:#ff6d5e}
#noteLine{position:fixed;left:50%;top:58px;transform:translateX(-50%);font-size:13px;color:#e8c4b8;text-shadow:1px 1px 0 #000,0 0 8px #000;opacity:0;transition:opacity .35s;pointer-events:none;text-align:center;width:66vw}
#noteLine.on{opacity:1}
#tags{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.ntag{position:absolute;left:0;top:0;will-change:transform;font-size:11px;color:#d8d4c6;opacity:.76;text-shadow:1px 1px 0 #000;white-space:nowrap}
.ntag.warn{color:#ff6d5e;opacity:1}
#stick{position:fixed;left:-200px;top:0;width:calc(116px*var(--ctl));height:calc(116px*var(--ctl));transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid rgba(216,212,198,.2);opacity:0;transition:opacity .12s;pointer-events:none}
#stick.on{opacity:1}
#knob{position:absolute;left:50%;top:50%;width:calc(48px*var(--ctl));height:calc(48px*var(--ctl));border-radius:50%;background:rgba(216,212,198,.2);transform:translate(-50%,-50%)}
.btn{position:fixed;width:calc(54px*var(--ctl));height:calc(54px*var(--ctl));border-radius:50%;border:1.5px solid rgba(216,212,198,.24);background:rgba(0,0,0,.28);color:#d8d4c6;display:flex;align-items:center;justify-content:center;padding:0;z-index:2}
.btn svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn.down{background:rgba(179,32,26,.55);border-color:#d8332a}
/* Rechte Daumenzone: Schuss gross und unten, der Rest im Bogen darum */
#btnFire{right:calc(16px + var(--safeR));bottom:16px;width:calc(76px*var(--ctl));height:calc(76px*var(--ctl));border-color:rgba(214,90,70,.6);background:rgba(70,10,8,.34)}
#btnReload{right:calc(16px + 84px*var(--ctl) + var(--safeR));bottom:12px;width:calc(46px*var(--ctl));height:calc(46px*var(--ctl))}
#btnSprint{right:calc(16px + 78px*var(--ctl) + var(--safeR));bottom:calc(14px + 58px*var(--ctl));width:calc(50px*var(--ctl));height:calc(50px*var(--ctl))}
#btnLamp{right:calc(20px + var(--safeR));bottom:calc(16px + 84px*var(--ctl));width:calc(50px*var(--ctl));height:calc(50px*var(--ctl))}
#btnPing{right:calc(16px + 74px*var(--ctl) + var(--safeR));bottom:calc(14px + 116px*var(--ctl));width:calc(44px*var(--ctl));height:calc(44px*var(--ctl))}
#btnCrank{right:calc(22px + var(--safeR));bottom:calc(16px + 142px*var(--ctl));width:calc(44px*var(--ctl));height:calc(44px*var(--ctl))}
.lefty #btnFire,.lefty #btnReload,.lefty #btnLamp,.lefty #btnSprint,.lefty #btnCrank,.lefty #btnPing{right:auto}
.lefty #btnFire{left:calc(16px + var(--safeL))}.lefty #btnLamp{left:calc(20px + var(--safeL))}.lefty #btnCrank{left:calc(22px + var(--safeL))}
.lefty #btnReload{left:calc(16px + 84px*var(--ctl) + var(--safeL))}.lefty #btnSprint{left:calc(16px + 78px*var(--ctl) + var(--safeL))}.lefty #btnPing{left:calc(16px + 74px*var(--ctl) + var(--safeL))}
.ghost #btnFire,.ghost #btnReload,.ghost #btnSprint,.ghost #btnLamp,.ghost #btnCrank,.ghost #btnAction,.ghost #cross,.ghost #ammo,.ghost #bat{display:none!important}
.ghost #btnPing{right:calc(30px + var(--safeR));bottom:30px;width:76px;height:76px;border-color:rgba(214,90,70,.7)}
.nofire #btnFire,.nofire #btnReload{opacity:.3}
#cross{position:fixed;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:rgba(232,226,208,.55);box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none}
#ammo{position:fixed;right:calc(18px + var(--safeR));top:44px;font-size:14px;letter-spacing:.06em;color:#e5e1d3;text-shadow:1px 1px 0 #000;text-align:right;pointer-events:none;white-space:nowrap}
#ammo .rl{color:#ffb35e}
#ammo .emp{color:#ff6d5e}
#fps{position:fixed;left:calc(18px + var(--safeL));top:34px;font-size:11px;color:#9fe29f;text-shadow:1px 1px 0 #000;pointer-events:none}
#objR{font-size:13px;color:#ff8a78;min-height:0}
#sub{position:fixed;left:50%;bottom:70px;transform:translateX(-50%);width:56vw;text-align:center;font-size:12px;line-height:1.25;color:#f0e7d3;text-shadow:1px 1px 0 #000,0 0 7px #000;opacity:0;transition:opacity .3s;pointer-events:none}
#sub.on{opacity:1}
#sub.wh{color:#ffb6a8;font-style:italic}
#btnAction{left:50%;bottom:calc(16px + 4vh);transform:translateX(-50%);width:auto;min-width:138px;height:48px;border-radius:0;padding:0 16px;font-size:14px;gap:8px;background:rgba(0,0,0,.6);border-color:rgba(232,211,175,.7);color:#f2e6cc;touch-action:none}
#btnAction svg{width:24px;height:24px;transform:rotate(-90deg);stroke-width:4}
#actRing{stroke:#e8d3af;fill:none;stroke-dasharray:100;stroke-dashoffset:100}
.menu-btn{position:fixed;left:calc(180px + var(--safeL));top:6px;padding:6px 12px;font-size:14px;color:#d8d4c6;opacity:.75;z-index:3}
#down{position:fixed;left:50%;top:32%;transform:translateX(-50%);text-align:center;color:#ecb5ae;text-shadow:0 0 8px #000,1px 1px 0 #000;pointer-events:none;width:80vw}
.d1{font-size:clamp(18px,6vh,28px);letter-spacing:.08em}.d2{font-size:14px;margin-top:6px}.d3{font-size:12px;color:#c9c5b7;margin-top:6px}
#downBar{height:3px;width:220px;margin:8px auto 0;background:rgba(236,181,174,.2)}
#downBar div{height:100%;width:0;background:#e8d3af}
#spect{position:fixed;left:50%;top:70px;transform:translateX(-50%);font-size:12px;color:#ccc;opacity:.8;pointer-events:none}
#fearEdge{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 120px 30px rgba(120,0,0,.0);transition:box-shadow .2s}

#intro{position:fixed;inset:0;background:#000;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;transition:opacity 1.6s}
#intro .i1{font-size:13px;color:#8f8b7e;letter-spacing:.2em}
#intro .i2{font-family:"Unifraktur",serif;font-size:clamp(40px,14vh,84px);line-height:1.1;margin:4px 0}
#intro .i3{font-size:14px;color:#c9c5b7}

#note{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:18;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fadeIn .15s}
#noteImg{height:88vh;max-width:90vw;box-shadow:0 0 50px #000;transform:rotate(-1deg)}
#note .tap{position:fixed;bottom:6px;font-size:11px;color:#8f8b7e}

#selfieCv{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:25;image-rendering:pixelated;background:#000}
#selfieText{position:fixed;left:50%;bottom:7vh;transform:translateX(-50%);z-index:26;color:#e8c4b8;font-size:clamp(15px,5vh,24px);text-shadow:0 0 8px #000,1px 1px 0 #000;text-align:center;width:90vw;pointer-events:none}
#rotate{display:none;position:fixed;inset:0;background:#000;z-index:60;align-items:center;justify-content:center;flex-direction:column;gap:12px;font-size:15px}
@media (orientation:portrait) and (max-width:760px){#rotate{display:flex}}
#boot{position:fixed;inset:0;background:#000;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:opacity .8s}
#bootTxt{font-size:13px;color:#8f8b7e}
#s-final{width:min(700px,92vw);pointer-events:none}
#finalText{font-size:clamp(14px,4.4vh,19px);line-height:1.5;color:#d8d4c6;white-space:pre-line;text-shadow:0 0 8px #000}

#btnFlare{left:calc(16px + var(--safeL));bottom:calc(46vh);width:calc(46px*var(--ctl));height:calc(46px*var(--ctl));border-color:rgba(255,120,90,.45)}
#flareN{position:absolute;right:-2px;bottom:-3px;font-size:11px;background:#000;border:1px solid rgba(255,120,90,.6);border-radius:50%;width:17px;height:17px;line-height:15px;text-align:center}
#btnFlare.none{opacity:.28}
.lefty #btnFlare{left:auto;right:calc(16px + var(--safeR))}
.ghost #btnFlare{display:none!important}
#chat{position:fixed;right:calc(150px*var(--ctl) + 12px + var(--safeR));bottom:calc(14px + 92px*var(--ctl));display:flex;flex-direction:column;gap:5px;z-index:4;align-items:flex-end}
.ghost #chat{right:calc(30px + var(--safeR));bottom:114px}
.chip{background:rgba(0,0,0,.72);border:1px solid rgba(216,212,198,.4);color:#e5e1d3;font-size:13px;padding:8px 12px;min-height:36px;white-space:nowrap}
.chip:active{background:rgba(179,32,26,.6)}
.rowm{display:flex;gap:7px}
#archive{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
@media (max-width:520px){#archive{grid-template-columns:repeat(6,1fr)}}
#archive button{aspect-ratio:3/4;background:rgba(216,210,188,.92);color:#16130e;font-size:11px;border:0;padding:2px;line-height:1.1;box-shadow:0 2px 6px rgba(0,0,0,.7)}
#archive button:nth-child(odd){transform:rotate(-1.5deg)}
#archive button:nth-child(even){transform:rotate(1.2deg)}
#archive button.lock{background:rgba(20,20,22,.8);color:#55524a;border:1px dashed rgba(216,212,198,.2);box-shadow:none}
h2 small{font-size:13px;color:#8f8b7e;margin-left:6px}
#note{z-index:30}
.pauseSens{width:min(340px,86vw);margin:0 auto 10px;font-size:13px;text-shadow:0 0 6px #000;display:flex;flex-direction:column;gap:2px}
.sensV{font-weight:400;color:#ecb5ae}