html,body{margin:0;height:100%;background:#10151c;overflow:hidden;font-family:system-ui,"Segoe UI",sans-serif;touch-action:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
body.touch{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.touch input{-webkit-user-select:text;user-select:text}
canvas{display:block;width:100vw;height:100vh;cursor:crosshair}
#overlay{z-index:10;touch-action:pan-y;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,12,18,.8);color:#e8eef5;text-align:center}
#overlay.hide{display:none}
#box{width:min(760px,94vw);max-height:96vh;max-height:96dvh;overflow:auto;-webkit-overflow-scrolling:touch;padding:0 0 22px;background:#1b2530;border:2px solid #3b4d61;border-radius:14px;box-shadow:0 12px 50px #000a}
#box{position:relative}
#ver{position:absolute;top:12px;right:14px;background:#7be04a;color:#10240a;font-weight:800;padding:3px 11px;border-radius:8px;font-size:15px;box-shadow:0 2px 8px #0008}
#banner{display:block;width:100%;border-radius:12px 12px 0 0;margin-bottom:8px}
#box>p,#box>button,#box>h1{margin-left:30px;margin-right:30px}
h1{margin-top:22px;margin-bottom:4px;font-size:36px;color:#7be04a;letter-spacing:1px}
h2{margin:0 0 10px;font-size:15px;font-weight:500;color:#9fb3c8}
p{margin:8px 0;line-height:1.45;font-size:15px}
.k{display:inline-block;padding:1px 7px;border:1px solid #5b7289;border-bottom-width:3px;border-radius:5px;background:#26333f;font-size:13px}
button{margin-top:12px;padding:11px 28px;font-size:18px;font-weight:700;color:#10240a;background:#7be04a;border:0;border-radius:9px;cursor:pointer}
button:hover{background:#98f066}
#box>input,#box>table,#box>.row{margin-left:auto;margin-right:auto}
input{display:block;width:min(320px,80%);margin-top:6px;padding:11px 14px;font-size:20px;text-align:center;color:#e8eef5;background:#10181f;border:2px solid #3b4d61;border-radius:9px;outline:none}
input:focus{border-color:#7be04a}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
button.ghost{background:transparent;color:#9fb3c8;border:2px solid #3b4d61}
button.ghost:hover{background:#26333f}
.note{color:#e0b04a;font-size:13px}
table#hs-table{border-collapse:collapse;font-size:15px;min-width:min(520px,86%)}
#hs-table th{color:#9fb3c8;font-weight:600;font-size:13px;padding:4px 10px;border-bottom:1px solid #3b4d61}
#hs-table td{padding:5px 10px;border-bottom:1px solid #26333f}
#hs-table .nm{text-align:left}
#hs-table tr.me td{background:rgba(123,224,74,.18);color:#baff8a;font-weight:700}
#hs-table.mini{font-size:13px;margin:10px auto 0;opacity:.9}
#hs-table.mini td{padding:2px 10px}
.hero{display:block;height:110px;margin:10px auto 0}
.credits{font-size:13px;color:#8aa0b6;margin-top:14px}
.credits b{color:#c9d8e6}
.cr-h{margin:14px 0 0;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#7be04a}
.cr-n{margin:2px 0 0;font-size:22px;font-weight:700}
.lead{font-size:17px;color:#cfdbe8;margin:14px 30px 4px}
.diffsel{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:16px;color:#9fb3c8;font-size:15px}
.row.start{margin-top:20px}
.row.start button{margin-top:0}
.row.sub{margin-top:20px}
.row.sub button{margin-top:0;font-size:15px;padding:9px 20px}
button.big{font-size:26px;padding:15px 54px;border-radius:14px;letter-spacing:.5px}
button.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(123,224,74,.55)}50%{transform:scale(1.07);box-shadow:0 0 26px 8px rgba(123,224,74,.45)}}
.tut{text-align:left;margin:0 30px}
.tut h3{margin:16px 0 2px;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:#7be04a}
.tut p{margin:4px 0}
table.keys{border-collapse:collapse;margin:6px 0;width:100%}
.keys td{padding:5px 8px;border-bottom:1px solid #26333f;font-size:15px}
.keys td:last-child{color:#cfdbe8}

/* ===== Touch-Steuerung ===== */
#tui{position:fixed;inset:0;z-index:5;pointer-events:none;display:none;touch-action:none}
#tui.show{display:block}
#jz{position:absolute;left:0;top:0;width:52%;height:100%;pointer-events:auto;touch-action:none}
#jbase{position:absolute;width:calc(var(--jr,58px)*2);height:calc(var(--jr,58px)*2);margin:calc(var(--jr,58px)*-1) 0 0 calc(var(--jr,58px)*-1);border-radius:50%;border:3px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);transition:border-color .15s,background .15s}
#jbase.on{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.14)}
#jbase.sprint{border-color:#7be04a;background:rgba(123,224,74,.2)}
#jknob{position:absolute;left:50%;top:50%;width:54%;height:54%;border-radius:50%;background:rgba(255,255,255,.4);transform:translate(-50%,-50%)}
.tb{position:absolute;pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;text-align:center;border-radius:50%;background:rgba(10,16,24,.5);border:3px solid rgba(255,255,255,.35);cursor:pointer}
#fbtn{right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:clamp(84px,24vh,120px);height:clamp(84px,24vh,120px);font-size:clamp(14px,3.6vh,19px);letter-spacing:1px;background:rgba(210,50,40,.55);border-color:rgba(255,150,130,.7)}
#fbtn.on{background:rgba(255,80,60,.85);transform:scale(.94)}
#wbtn{right:max(22px,env(safe-area-inset-right));bottom:calc(max(22px,env(safe-area-inset-bottom)) + clamp(84px,24vh,120px) + 14px);width:clamp(74px,19vh,96px);height:clamp(74px,19vh,96px);flex-direction:column;font-size:clamp(10px,2.5vh,13px);line-height:1.15;padding:6px;box-sizing:border-box;overflow:hidden;background:rgba(40,80,150,.5);border-color:rgba(150,190,255,.6)}
#wbtn b{font-size:clamp(16px,4vh,24px)}
#wbtn.dim,#mbtn.dim{opacity:.5}
#topbtns{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:12px;pointer-events:none}
.tb.sm{position:static;width:clamp(38px,9vh,48px);height:clamp(38px,9vh,48px);font-size:clamp(15px,3.6vh,20px)}
#rotate{display:none;position:fixed;inset:0;z-index:20;background:#10151c;color:#e8eef5;text-align:center;align-items:center;justify-content:center;font-size:22px;font-weight:700}
#rotate .ri{font-size:84px;color:#7be04a;animation:rot 2s ease-in-out infinite}
#rotate .s{font-size:15px;font-weight:400;color:#9fb3c8}
@keyframes rot{0%,30%{transform:rotate(0)}70%,100%{transform:rotate(-90deg)}}
body.portrait #rotate{display:flex}

/* ===== kleine Displays ===== */
@media (max-height:540px){
  #box{max-height:98vh;max-height:98dvh;padding-bottom:12px;border-radius:10px}
  #banner{max-height:34vh;width:auto;max-width:100%;margin:0 auto 4px;object-fit:contain}
  h1{font-size:26px;margin-top:12px}
  .lead{font-size:14px;margin:8px 20px 2px}
  p{font-size:13px;margin:5px 0}
  button{padding:8px 20px;font-size:15px;margin-top:8px}
  button.big{font-size:20px;padding:10px 38px}
  .diffsel{margin-top:8px;font-size:13px}
  .row.start{margin-top:10px}.row.sub{margin-top:10px}
  .row.sub button{font-size:13px;padding:7px 14px}
  .hero{height:64px}
  #ver{top:8px;right:10px;font-size:12px;padding:2px 8px}
  #box>p,#box>button,#box>h1{margin-left:18px;margin-right:18px}
  .tut{margin:0 18px}.tut h3{margin-top:10px}
  .keys td,#hs-table td{font-size:13px;padding:3px 6px}
  input{font-size:17px;padding:8px 10px}
  .cr-n{font-size:18px}
}
@media (max-width:520px){
  h1{font-size:28px}
  .lead{margin:12px 16px 4px}
  button.big{font-size:22px;padding:13px 36px}
  #hs-table th,#hs-table td{padding:4px 5px;font-size:13px}
}
@supports (padding:max(0px)){
  #overlay{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box}
}

/* ===== v3.0: Optionen, Fokus, Rechtliches, Ladebildschirm ===== */
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:2px}
.opt{text-align:left;margin:10px 30px 0}
.opt .o{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid #26333f}
.opt label{font-size:15px;color:#cfdbe8;flex:1 1 150px}
.opt small{flex-basis:100%;color:#8aa0b6;font-size:12px;margin-top:-4px}
.seg{display:flex;gap:6px}
.seg button{margin:0;padding:7px 16px;font-size:14px;background:transparent;color:#9fb3c8;border:2px solid #3b4d61;border-radius:8px}
.seg button[data-v=evil]{color:#ff8a7a;border-color:#7a2a24}
.seg button[data-v=evil].sel{background:#d8262d;color:#fff;border-color:#d8262d;box-shadow:0 0 12px #d8262d99}
.seg button.sel{background:#7be04a;color:#10240a;border-color:#7be04a}
.sl{display:flex;align-items:center;gap:10px;flex:0 1 250px}
.sl output{width:52px;text-align:right;font-size:14px;color:#9fb3c8}
.opt input[type=range]{display:block;width:auto;flex:1;margin:0;padding:0;border:0;background:transparent;accent-color:#7be04a}
.foot{margin:14px 0 0;font-size:13px}
.foot a{color:#6f869c;text-decoration:underline;cursor:pointer}
.legal h3{margin-top:14px}
.legal p{font-size:13.5px}
#loader{position:fixed;inset:0;z-index:30;background:#10151c;color:#e8eef5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;cursor:pointer;transition:opacity .45s}
#loader.out{opacity:0;pointer-events:none}
#loader img{width:min(640px,86vw);max-height:48vh;object-fit:contain;border-radius:14px;box-shadow:0 10px 40px #000a}
#lbarw{width:min(420px,70vw);height:10px;border-radius:6px;background:#26333f;overflow:hidden}
#lbar{display:block;height:100%;width:0;background:#7be04a;transition:width .15s}
#ltxt{margin:0;font-size:15px;color:#9fb3c8}
#loader.ready #lbarw{display:none}
#loader.ready #ltxt{font-size:22px;font-weight:700;color:#7be04a;animation:pulse2 1.4s ease-in-out infinite}
@keyframes pulse2{0%,100%{opacity:1}50%{opacity:.45}}
@media (max-height:540px){.opt{margin:6px 18px 0}.opt .o{padding:5px 0}.seg button{padding:5px 11px;font-size:12px}#loader img{max-height:42vh}}

/* ===== v3.1: Blendgranate-Knopf ===== */
#gbtn{right:calc(max(22px,env(safe-area-inset-right)) + clamp(84px,24vh,120px) + 14px);bottom:max(22px,env(safe-area-inset-bottom));width:clamp(66px,17vh,86px);height:clamp(66px,17vh,86px);flex-direction:column;font-size:clamp(10px,2.4vh,12px);line-height:1.15;background:rgba(190,170,60,.5);border-color:rgba(255,240,150,.7)}
#gbtn b{font-size:clamp(16px,4vh,24px)}
#gbtn.dim{opacity:.5}

/* ===== v3.3: Markierung "ohne Polizei" in der Bestenliste ===== */
#hs-table .nop{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;background:rgba(80,140,255,.25);color:#9ec3ff;font-size:.78em;font-weight:700;white-space:nowrap}