/* GANG WAR KFS – Startbildschirm, Menü, Lobby, Versus, HUD, Punktestand, Rundenende. Wird nach style.css geladen.
   Farben: dunkle neutrale Grautöne, gebrochenes Weiss, EIN Akzent (Amber) für Fokus und Auswahl. Blau/Rot nur für Team-Elemente.
   Schriften selbst gehostet (CSP 'self'): Barlow Condensed (OFL 1.1) für UI-Text, Permanent Marker (Apache 2.0) für Logo/Titel. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/font-barlow-condensed-400.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/font-barlow-condensed-500.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/font-barlow-condensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/font-barlow-condensed-700.woff2) format('woff2')}
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/font-permanent-marker.woff2) format('woff2')}

:root{
  --gw-ink:#0b0c0e;--gw-panel:rgba(17,18,21,.72);--gw-panel-2:rgba(13,14,17,.92);
  --gw-line:rgba(236,232,224,.11);--gw-line-2:rgba(236,232,224,.24);--gw-line-3:rgba(236,232,224,.42);
  --gw-text:#ece8e0;--gw-dim:#a8a39a;--gw-mute:#6f6b65;
  --gw-accent:#e9b64a;--gw-accent-hi:#f5cd74;--gw-accent-glow:rgba(233,182,74,.38);--gw-accent-ink:#17130a;
  --gw-blue:#2f62ff;--gw-blue-hi:#7499ff;--gw-blue-glow:rgba(47,98,255,.55);
  --gw-red:#e2263c;--gw-red-hi:#ff6b7a;--gw-red-glow:rgba(226,38,60,.5);
  --gw-ui:'Barlow Condensed','Arial Narrow','Roboto Condensed',Arial,sans-serif;
  --gw-brush:'Permanent Marker','Barlow Condensed',Arial,sans-serif;
  --gw-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --gw-brush-a:url(/assets/ui-brush-a.png);--gw-brush-b:url(/assets/ui-brush-b.png);--gw-brush-c:url(/assets/ui-brush-c.png);
  font-family:var(--gw-ui);color:var(--gw-text);background:var(--gw-ink);
}
body{background:var(--gw-ink);font-family:var(--gw-ui);-webkit-font-smoothing:antialiased}
button,input,select{font-family:var(--gw-ui)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gw-accent);outline-offset:3px}
.screen::before,.gw-main::before,.gw-room::before,.gw-versus::before,.gw-end::before,.gw-title::before{content:none}
#menu-fade{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none}
.gw-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;background:#0b0c0e;pointer-events:none}
.gw-video[hidden]{display:none!important}

/* ---------- Grundbausteine ---------- */
.gw-team--blue,.gw-blue{--team:var(--gw-blue);--team-hi:var(--gw-blue-hi);--team-glow:var(--gw-blue-glow)}
.gw-team--red,.gw-red{--team:var(--gw-red);--team-hi:var(--gw-red-hi);--team-glow:var(--gw-red-glow)}
.gw-team--ffa,.gw-ffa{--team:#cfcac1;--team-hi:#ffffff;--team-glow:rgba(255,255,255,.22)}
/* Logo mit «Riss»: zwei Hälften leicht versetzt, dünne Linie durch die Buchstaben */
.gw-crack{position:relative;display:inline-block;margin:0;font:400 clamp(50px,7.4vw,124px)/1 var(--gw-brush);color:#f4f1ea;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;transform:skewX(-6deg)}
.gw-crack>span{display:block;clip-path:inset(0 0 49% 0);text-shadow:0 6px 30px rgba(0,0,0,.5)}
.gw-crack>span+span{position:absolute;inset:0;clip-path:inset(51% 0 0 0);transform:translateX(.035em)}
.gw-crack::after{content:"";position:absolute;left:-6%;right:-6%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(244,241,234,.9) 12%,rgba(244,241,234,.9) 88%,transparent);transform:rotate(-.6deg)}
.gw-crack--menu{font-size:clamp(28px,2.95vw,40px)}   /* passt in die linke Spalte (330 px), sonst schneidet das Panel «KFS» ab */
.gw-crack--loading{font-size:clamp(52px,8vw,104px)}
.gw-label,.gw-row>label{font:600 13px/1.2 var(--gw-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gw-dim)}
.gw-hint{margin:0;color:var(--gw-mute);font:500 14px/1.45 var(--gw-ui);letter-spacing:.04em}
.gw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 20px;border:1px solid var(--gw-line-2);border-radius:1px;background:rgba(236,232,224,.05);color:var(--gw-text);font:700 15px/1 var(--gw-ui);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.gw-btn:hover{background:rgba(236,232,224,.12);border-color:var(--gw-line-3)}
.gw-btn:disabled{opacity:.4;cursor:default}
.gw-btn--primary{background:var(--gw-accent);border-color:var(--gw-accent-hi);color:var(--gw-accent-ink);box-shadow:0 0 28px -10px var(--gw-accent-glow)}
.gw-btn--primary:hover{background:var(--gw-accent-hi);border-color:#fff0c8}
.gw-btn--ghost{background:transparent}
.gw-btn--small{min-height:32px;padding:0 12px;font-size:13px;letter-spacing:.12em}
.gw-btn--wide{width:100%}
.gw-btn.is-ready{border-color:var(--gw-accent);color:var(--gw-accent);background:rgba(233,182,74,.1)}
.gw-icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:38px;height:38px;padding:0 9px;border:1px solid var(--gw-line-2);border-radius:1px;background:rgba(10,11,13,.6);color:var(--gw-text);font:700 13px/1 var(--gw-ui);letter-spacing:.1em}
.gw-icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.gw-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--gw-line-2);border-radius:1px;overflow:hidden}
.gw-seg button{min-height:34px;padding:0 13px;border:0;background:transparent;color:var(--gw-dim);font:600 14px/1 var(--gw-ui);letter-spacing:.12em;text-transform:uppercase}
.gw-seg button+button{border-left:1px solid var(--gw-line)}
.gw-seg button:hover{color:var(--gw-text);background:rgba(236,232,224,.06)}
.gw-seg button[aria-pressed=true]{background:rgba(233,182,74,.14);color:var(--gw-accent);box-shadow:inset 0 -2px 0 var(--gw-accent)}
.gw-row{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:14px;min-height:42px;padding:4px 10px;border-left:2px solid transparent}
.gw-row>label{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gw-row output{color:var(--gw-text);font-weight:700;letter-spacing:.06em}
.gw-row.is-focus{background:rgba(236,232,224,.04);border-left-color:var(--gw-accent)}
.gw-row input:not([type=range]),#share-url{width:100%;min-height:36px;padding:0 12px;border:1px solid var(--gw-line-2);border-radius:1px;background:rgba(0,0,0,.35);color:var(--gw-text);font:600 16px/1 var(--gw-ui);letter-spacing:.08em}
.gw-row input[type=range],.gw-field input[type=range]{width:100%;accent-color:var(--gw-accent)}
.gw-field{display:grid;gap:6px}
.gw-field label{display:flex;justify-content:space-between;font:600 13px/1.2 var(--gw-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gw-dim)}
.gw-field output{color:var(--gw-text);font-weight:700}
.gw-brush-title{position:relative;isolation:isolate;display:inline-block;padding:.2em .95em .14em .55em;font:400 clamp(26px,3.8vw,46px)/1 var(--gw-brush);color:#fff;text-transform:uppercase;white-space:nowrap;transform:rotate(-2deg)}
.gw-brush-title::before{content:"";position:absolute;inset:-8% -6% -12% -8%;z-index:-1;background:var(--team,#fff);-webkit-mask:var(--gw-brush-a) center/100% 100% no-repeat;mask:var(--gw-brush-a) center/100% 100% no-repeat}
.gw-tag{padding:3px 6px 2px;border:1px solid var(--gw-line-2);color:var(--gw-dim);font:700 11px/1 var(--gw-ui);letter-spacing:.14em}
.gw-tag--host{border-color:rgba(233,182,74,.75);color:var(--gw-accent)}
.gw-tag--me{border-color:var(--gw-line-3);color:var(--gw-text)}

/* ---------- Laden ---------- */
#loading{z-index:50;background:radial-gradient(ellipse at 50% 40%,#16171b,#08090b 72%);gap:28px}
#loading p{color:var(--gw-dim);font:600 13px/1.4 var(--gw-ui);letter-spacing:.3em;text-transform:uppercase;max-width:560px;text-align:center}
.gw-loading-bar{display:block;width:180px;height:1px;background:linear-gradient(90deg,transparent,var(--gw-accent),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:gw-load 1.3s ease-in-out infinite}
@keyframes gw-load{from{background-position:-100% 0}to{background-position:200% 0}}

/* ---------- Startbildschirm: client/loadout.css [menu] (h40). Hier nur, was auch das HUD braucht ---------- */
.gw-press{position:relative;margin-top:clamp(18px,5vh,46px);padding:14px 30px;border:0;background:transparent;color:var(--gw-text);font:600 clamp(13px,1.5vw,15px)/1 var(--gw-ui);letter-spacing:.42em;text-transform:uppercase;padding-left:calc(30px + .42em);
  background:linear-gradient(var(--gw-line-3),var(--gw-line-3)) top left/12px 1px,linear-gradient(var(--gw-line-3),var(--gw-line-3)) top left/1px 12px,linear-gradient(var(--gw-line-3),var(--gw-line-3)) top right/12px 1px,linear-gradient(var(--gw-line-3),var(--gw-line-3)) top right/1px 12px,linear-gradient(var(--gw-line-3),var(--gw-line-3)) bottom left/12px 1px,linear-gradient(var(--gw-line-3),var(--gw-line-3)) bottom left/1px 12px,linear-gradient(var(--gw-line-3),var(--gw-line-3)) bottom right/12px 1px,linear-gradient(var(--gw-line-3),var(--gw-line-3)) bottom right/1px 12px;background-repeat:no-repeat;animation:gw-breathe 2.4s ease-in-out infinite}
.gw-press:focus-visible{outline:0;color:var(--gw-accent)}
@keyframes gw-breathe{0%,100%{opacity:1}50%{opacity:.45}}
.gw-click{position:absolute;left:50%;top:58%;transform:translateX(-50%);margin:0;pointer-events:auto;z-index:3;background-color:rgba(9,10,12,.55)}
@keyframes gw-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Hauptmenü: client/loadout.css [menu] (h40) ---------- */
/* Einstellungen */
.gw-subtabs{display:flex;gap:22px;border-bottom:1px solid var(--gw-line)}
.gw-subtabs button{position:relative;padding:0 0 10px;border:0;background:none;color:var(--gw-dim);font:600 14px/1 var(--gw-ui);letter-spacing:.22em;text-transform:uppercase}
.gw-subtabs button:hover{color:var(--gw-text)}
.gw-subtabs button[aria-selected=true]{color:var(--gw-text)}
.gw-subtabs button[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gw-accent)}
.gw-settings-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,210px);gap:16px}
.gw-settings-rows>div{display:grid;gap:4px}
.gw-info{align-self:start;padding:12px 14px;border:1px solid var(--gw-line);background:rgba(13,14,17,.7)}
.gw-info small{display:block;color:var(--gw-accent);font:600 12px/1 var(--gw-ui);letter-spacing:.24em;text-transform:uppercase}
.gw-info p{margin:8px 0 0;color:var(--gw-dim);font:500 14px/1.45 var(--gw-ui);letter-spacing:.02em}
@media (max-width:1199px) and (min-height:501px){.gw-settings .gw-row{grid-template-columns:1fr;gap:7px;padding:7px 10px}.gw-settings .gw-row>.gw-label,.gw-settings .gw-row>label{justify-content:space-between}.gw-settings-body{grid-template-columns:minmax(0,1fr) 170px}}
/* ---------- Raum-Lobby ---------- */
.gw-room{z-index:6;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:clamp(8px,1.8vh,16px);padding:clamp(12px,2.6vh,24px) clamp(16px,3vw,44px) clamp(10px,2vh,18px);color:var(--gw-text);background:radial-gradient(ellipse 48% 70% at 18% 54%,rgba(47,98,255,.16),transparent 70%),radial-gradient(ellipse 48% 70% at 82% 54%,rgba(226,38,60,.14),transparent 70%),linear-gradient(rgba(9,10,12,.8),rgba(9,10,12,.9))}
.gw-room.is-ffa{background:linear-gradient(rgba(9,10,12,.8),rgba(9,10,12,.9))}
.gw-room-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.gw-room-head .gw-crack{font-size:24px;justify-self:start}
.gw-room-title{text-align:center}
.gw-room-title h2{margin:0;font:600 clamp(24px,4vw,42px)/1 var(--gw-ui);letter-spacing:.34em;padding-left:.34em;text-transform:uppercase}
.gw-room-title small{display:block;margin-top:7px;color:var(--gw-dim);font:600 13px/1 var(--gw-ui);letter-spacing:.2em;text-transform:uppercase}
.gw-room-code{justify-self:end;display:flex;align-items:center;gap:12px;font:600 13px/1 var(--gw-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gw-dim)}
.gw-room-code b{color:var(--gw-accent);letter-spacing:.22em;font-size:18px}
.gw-room-teams{display:grid;grid-template-columns:minmax(0,1fr) clamp(64px,10vw,150px) minmax(0,1fr);min-height:0}
.gw-room-teams.is-ffa{grid-template-columns:minmax(0,1fr)}
.gw-team{display:flex;flex-direction:column;min-height:0}
.gw-team-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;min-height:clamp(54px,10vh,80px);padding:0 4px 8px 6px}
.gw-team--red .gw-team-head{flex-direction:row-reverse}
.gw-team-head .gw-brush-title{font-size:clamp(26px,3.6vw,44px)}
.gw-team-meta{display:flex;flex-direction:column;gap:5px;padding-bottom:4px;text-align:right}
.gw-team--red .gw-team-meta{text-align:left}
.gw-team-meta strong{font:600 13px/1 var(--gw-ui);letter-spacing:.28em;text-transform:uppercase}
.gw-team-meta small{color:var(--gw-dim);font:600 12px/1 var(--gw-ui);letter-spacing:.14em;text-transform:uppercase}
.gw-roster{--n:5;display:flex;flex-direction:column;flex:1;min-height:0;margin:0;padding:4px 0;list-style:none;overflow:hidden;border:1px solid color-mix(in srgb,var(--team) 50%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--team) 18%,transparent),rgba(13,14,17,.74) 70%);box-shadow:inset 3px 0 0 var(--team)}
.gw-team--red .gw-roster{background:linear-gradient(270deg,color-mix(in srgb,var(--team) 18%,transparent),rgba(13,14,17,.74) 70%);box-shadow:inset -3px 0 0 var(--team)}
.gw-team--ffa .gw-roster{background:rgba(13,14,17,.72);box-shadow:none;border-color:var(--gw-line-2)}
.gw-roster li{display:grid;grid-template-columns:16px minmax(0,1fr) auto 54px;align-items:center;gap:10px;flex:0 0 auto;height:calc((100% - 1px) / var(--n));max-height:40px;min-height:0;padding:0 14px;border-bottom:1px solid rgba(236,232,224,.06);font:600 clamp(15px,2vh,18px)/1 var(--gw-ui);letter-spacing:.07em;text-transform:uppercase}
.gw-roster li:last-child{border-bottom:0}
.gw-roster .gw-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gw-roster li.is-me{background:rgba(236,232,224,.08)}
.gw-roster li.is-bot .gw-name{color:var(--gw-dim)}
.gw-roster li.is-empty{color:rgba(236,232,224,.2)}
.gw-ping{text-align:right;color:var(--gw-dim);font:500 13px/1 var(--gw-mono);font-variant-numeric:tabular-nums}
.gw-ready{width:13px;height:13px;border:1.5px solid rgba(236,232,224,.3);border-radius:50%}
li.is-ready .gw-ready{border-color:transparent;background:var(--team-hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0c0e' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center/78% no-repeat}
.gw-team-join{margin-top:10px;align-self:stretch}
.gw-team-join.is-own{visibility:hidden}
.gw-team--blue .gw-team-join{border-color:var(--gw-blue);box-shadow:inset 0 0 0 1px var(--gw-blue),0 0 22px -10px var(--gw-blue-glow)}
.gw-team--red .gw-team-join{border-color:var(--gw-red);box-shadow:inset 0 0 0 1px var(--gw-red),0 0 22px -10px var(--gw-red-glow)}
.gw-vs{position:relative;display:flex;align-items:center;justify-content:center}
.gw-vs::before{content:"";position:absolute;top:2%;bottom:2%;left:50%;width:2px;transform:translateX(-50%) skewX(-16deg);background:linear-gradient(180deg,transparent,var(--gw-blue) 18%,var(--gw-blue) 47%,var(--gw-red) 53%,var(--gw-red) 82%,transparent);opacity:.9}
.gw-vs span{position:relative;font:400 clamp(42px,7vw,88px)/1 var(--gw-brush);color:#f4f1ea;transform:rotate(-8deg);text-shadow:0 0 28px rgba(0,0,0,.7)}
.gw-ffa-list{display:grid;grid-template-columns:1fr 1fr;min-height:0}
.gw-room-settings{display:grid;grid-template-columns:1.45fr 1.1fr 1fr 1fr .85fr;gap:8px}
.gw-set{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0;padding:8px 10px;border:1px solid var(--gw-line);background:rgba(13,14,17,.72)}
.gw-set small{color:var(--gw-mute);font:600 11px/1 var(--gw-ui);letter-spacing:.2em;text-transform:uppercase}
.gw-set-val{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.gw-set-val strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 16px/1.1 var(--gw-ui);letter-spacing:.05em;text-transform:uppercase}
.gw-set-val button{flex:none;width:26px;height:26px;padding:0;border:1px solid var(--gw-line-2);border-radius:1px;background:transparent;color:var(--gw-text);font:700 16px/1 var(--gw-ui)}
.gw-set-val button:hover{border-color:var(--gw-accent);color:var(--gw-accent)}
.gw-set-val button:disabled{opacity:.22}
.gw-set.is-host:hover{border-color:var(--gw-line-2)}
.gw-room-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px}
#room-status{margin:0;text-align:center;color:var(--gw-dim);font:600 14px/1.25 var(--gw-ui);letter-spacing:.18em;text-transform:uppercase}
.gw-room-actions{display:flex;align-items:center;gap:10px}
#room-start{min-width:200px;min-height:48px;font-size:17px}
.gw-outfit-pick{display:flex;align-items:center;gap:6px;height:42px;padding:0 6px 0 12px;border:1px solid var(--gw-line-2);font:600 13px/1 var(--gw-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gw-dim)}
.gw-outfit-pick b{min-width:22px;color:var(--gw-text);text-align:center}
.gw-outfit-pick button{width:26px;height:26px;padding:0;border:1px solid var(--gw-line);background:transparent;color:var(--gw-text);font:700 15px/1 var(--gw-ui)}
.gw-pop{position:absolute;z-index:8;right:clamp(16px,3vw,44px);top:clamp(58px,10vh,90px);width:300px;padding:16px;border:1px solid var(--gw-line-2);background:rgba(13,14,17,.97);box-shadow:0 20px 60px rgba(0,0,0,.55);display:grid;gap:10px}
.gw-pop img{width:150px;height:150px;justify-self:center;background:#fff;padding:6px;border-radius:1px}
.gw-pop input{width:100%;min-height:34px;padding:0 10px;border:1px solid var(--gw-line-2);background:rgba(0,0,0,.4);color:var(--gw-text);font:500 13px/1 var(--gw-ui);letter-spacing:.04em}

/* ---------- Versus / Countdown ---------- */
.gw-versus{z-index:6;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,34%) minmax(0,1fr);align-items:center;gap:2vw;padding:clamp(14px,4vh,40px) clamp(16px,3.5vw,52px);overflow:hidden;color:var(--gw-text);background:linear-gradient(100deg,rgba(14,30,92,.9) 0%,rgba(12,16,32,.74) 38%,rgba(9,10,12,.72) 50%,rgba(40,12,18,.74) 62%,rgba(92,14,26,.9) 100%)}
.gw-versus.is-ffa{background:linear-gradient(rgba(9,10,12,.8),rgba(9,10,12,.88))}
.gw-versus::after{content:"";position:absolute;left:50%;top:-10%;bottom:-10%;width:2px;transform:translateX(-50%) rotate(14deg);background:linear-gradient(180deg,transparent,rgba(120,150,255,.8) 30%,#fff 50%,rgba(255,110,125,.8) 70%,transparent);z-index:-1}
.gw-versus.is-ffa::after{display:none}
.gw-vs-team{display:flex;flex-direction:column;gap:clamp(8px,2vh,16px);min-width:0;animation:gw-slide-l .5s cubic-bezier(.2,.8,.2,1) both}
.gw-vs-team--red{align-items:flex-end;animation-name:gw-slide-r}
.gw-vs-team .gw-brush-title{font-size:clamp(34px,5.4vw,66px);transform:rotate(-3deg)}
.gw-vs-team--red .gw-brush-title{transform:rotate(2deg)}
.gw-vs-team .gw-place{font:600 14px/1 var(--gw-ui);letter-spacing:.32em;text-transform:uppercase;color:rgba(236,232,224,.75);padding-left:.6em}
.gw-vs-list{list-style:none;margin:0;padding:4px 0;width:min(100%,340px);border:1px solid color-mix(in srgb,var(--team) 65%,transparent);background:rgba(13,14,17,.62)}
.gw-vs-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;height:clamp(22px,4.2vh,34px);padding:0 14px;border-bottom:1px solid rgba(236,232,224,.07);font:600 clamp(14px,2.1vh,19px)/1 var(--gw-ui);letter-spacing:.1em;text-transform:uppercase}
.gw-vs-list li:last-child{border-bottom:0}
.gw-vs-list li.is-me{background:rgba(236,232,224,.1);box-shadow:inset 2px 0 0 var(--gw-accent)}
.gw-vs-list li.is-bot span{color:var(--gw-dim)}
.gw-vs-list li small{color:var(--gw-mute);font-size:11px;letter-spacing:.16em}
.gw-vs-center{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.2vh,10px);text-align:center}
.gw-vs-center .gw-crack{font-size:clamp(30px,4.4vw,54px)}
.gw-vs-mode{margin-top:clamp(10px,2.2vh,20px);font:600 clamp(15px,2.4vh,20px)/1 var(--gw-ui);letter-spacing:.36em;padding-left:.36em;text-transform:uppercase}
.gw-count{display:block;min-height:1em;font:400 clamp(84px,19vh,170px)/1 var(--gw-brush);color:#f4f1ea;text-shadow:0 0 40px rgba(0,0,0,.6)}
.gw-count.pop{animation:gw-count .6s cubic-bezier(.2,.9,.25,1)}
@keyframes gw-count{0%{transform:scale(1.7);opacity:0}35%{opacity:1}100%{transform:scale(1);opacity:1}}
.gw-vs-place{font:600 14px/1 var(--gw-ui);letter-spacing:.3em;text-transform:uppercase;color:rgba(236,232,224,.8)}
.gw-vs-map{position:relative;width:clamp(96px,23vh,190px);aspect-ratio:1;margin:clamp(4px,1vh,10px) 0}
.gw-vs-map .map{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:1px solid var(--gw-line-3);background:#0b0c0e url(/assets/ui-minimap.jpg) 50% 51%/84% auto no-repeat;box-shadow:0 0 0 4px rgba(0,0,0,.25),0 0 30px rgba(0,0,0,.5)}
.gw-vs-map i{position:absolute;color:rgba(236,232,224,.8);font:700 11px/1 var(--gw-ui);font-style:normal}
.gw-vs-map .n{top:-15px;left:50%;transform:translateX(-50%)}.gw-vs-map .s{bottom:-15px;left:50%;transform:translateX(-50%)}
.gw-vs-map .w{left:-14px;top:50%;transform:translateY(-50%)}.gw-vs-map .e{right:-14px;top:50%;transform:translateY(-50%)}
.gw-spawn{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:400 13px/1 var(--gw-brush);color:#fff;background:var(--team);box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 14px var(--team-glow)}
.gw-spawn.is-own{outline:2px solid var(--gw-accent);outline-offset:2px}
.gw-vs-tip{max-width:420px;margin:clamp(6px,1.4vh,12px) 0 0;color:rgba(236,232,224,.72);font:600 13px/1.4 var(--gw-ui);letter-spacing:.16em;text-transform:uppercase}
/* Versus mit 3D-Aufstellung (is-3d, Lead 23.10.): beide Teams stehen in der Bildmitte; Listen kompakt in den oberen
   Ecken, Mitte durchsichtig, unten Platz für die Waffenwahl (#loadout-pick). Handy: nur Titel + Anzahl, Namen über den Köpfen. */
.gw-vs-n{display:none;font:600 12px/1 var(--gw-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--gw-dim);padding-left:.6em}
.gw-versus.is-3d{align-items:start;background:radial-gradient(110% 62% at 0 0,rgba(47,98,255,.32),transparent 56%),radial-gradient(110% 62% at 100% 0,rgba(226,38,60,.32),transparent 56%),linear-gradient(180deg,rgba(8,9,12,.72) 0%,rgba(8,9,12,.3) 24%,rgba(8,9,12,0) 38%,rgba(8,9,12,0) 66%,rgba(8,9,12,.5) 100%)}
.gw-versus.is-3d.is-ffa{background:linear-gradient(180deg,rgba(8,9,12,.72) 0%,rgba(8,9,12,0) 36%,rgba(8,9,12,0) 66%,rgba(8,9,12,.5) 100%)}
.gw-versus.is-3d::after{display:none}
.gw-versus.is-3d .gw-vs-team{gap:6px}
.gw-versus.is-3d .gw-vs-team .gw-brush-title{font-size:clamp(26px,3.6vw,46px)}
.gw-versus.is-3d .gw-vs-list{width:min(100%,250px);background:rgba(13,14,17,.46)}
.gw-versus.is-3d .gw-vs-list li{height:clamp(20px,3.3vh,28px);font-size:clamp(12px,1.8vh,15px)}
.gw-vs-list li.is-more span{color:var(--gw-mute);font-size:.86em}
.gw-versus.is-3d .gw-vs-center{gap:2px}
.gw-versus.is-3d .gw-vs-center .gw-crack{font-size:clamp(22px,3vw,38px)}
.gw-versus.is-3d .gw-vs-mode{margin-top:4px}
.gw-versus.is-3d .gw-count{font-size:clamp(64px,13vh,124px)}
.gw-versus.is-3d .gw-vs-place{display:none}
.gw-versus.is-3d .gw-vs-tip{position:absolute;left:clamp(16px,3.5vw,52px);bottom:max(14px,var(--gw-sab,env(safe-area-inset-bottom)));max-width:min(26vw,360px);margin:0;text-align:left;font-size:11.5px}
@media (max-height:500px){
  .gw-versus.is-3d{padding-top:max(8px,var(--gw-sat,env(safe-area-inset-top)))}
  .gw-versus.is-3d .gw-vs-team .gw-brush-title{font-size:24px}
  .gw-versus.is-3d .gw-vs-list,.gw-versus.is-3d .gw-vs-tip{display:none}
  .gw-versus.is-3d .gw-vs-n{display:block}
  .gw-versus.is-3d .gw-vs-center .gw-crack{font-size:19px}
  .gw-versus.is-3d .gw-vs-mode{font-size:11px;margin-top:2px}
  .gw-versus.is-3d .gw-count{font-size:58px}
}
@keyframes gw-slide-l{from{transform:translateX(-60px);opacity:0}to{transform:none;opacity:1}}
@keyframes gw-slide-r{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}

/* ---------- HUD ---------- */
#hud{font-family:var(--gw-ui)}
.gw-minimap{position:absolute;top:max(14px,var(--gw-sat,env(safe-area-inset-top)));left:max(16px,var(--gw-sal,env(safe-area-inset-left)));width:clamp(110px,24vh,168px);aspect-ratio:1}
.gw-minimap canvas{display:block;width:100%;height:100%;border-radius:50%}
.gw-minimap::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--gw-line-3);box-shadow:0 0 0 3px rgba(0,0,0,.2),inset 0 0 18px rgba(0,0,0,.55);pointer-events:none}
.gw-minimap i{position:absolute;z-index:1;font:700 11px/1 var(--gw-ui);font-style:normal;color:rgba(236,232,224,.8);text-shadow:0 1px 3px #000}
.gw-minimap .n{top:5px;left:50%;transform:translateX(-50%);color:var(--gw-accent)}.gw-minimap .s{bottom:5px;left:50%;transform:translateX(-50%)}
.gw-minimap .w{left:6px;top:50%;transform:translateY(-50%)}.gw-minimap .e{right:6px;top:50%;transform:translateY(-50%)}
#room-badge{position:absolute;top:calc(max(14px,var(--gw-sat,env(safe-area-inset-top))) + clamp(110px,24vh,168px) + 8px);left:max(16px,var(--gw-sal,env(safe-area-inset-left)));margin:0;font:500 10px/1 var(--gw-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(236,232,224,.55);text-shadow:0 1px 3px #000}
#room-badge span{display:inline;margin:0;font-size:inherit;opacity:1}
#room-badge b{color:var(--gw-text)}
#room-badge small{display:inline;margin:0 0 0 8px;font-size:inherit;opacity:1}
.gw-teambar{position:absolute;top:max(12px,var(--gw-sat,env(safe-area-inset-top)));left:50%;transform:translateX(-50%);display:flex;align-items:stretch;height:42px;filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}
.gw-tb-side{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:clamp(130px,17vw,186px);padding:0 18px 0 30px;color:#fff;overflow:hidden}
.gw-tb-side.gw-blue{clip-path:polygon(16px 0,100% 0,100% 100%,0 100%);background:linear-gradient(90deg,rgba(18,40,110,.5),rgba(47,98,255,.9))}
.gw-tb-side.gw-red{padding:0 30px 0 18px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 100%,0 100%);background:linear-gradient(90deg,rgba(226,38,60,.9),rgba(100,16,28,.5))}
.gw-tb-side.gw-ffa{clip-path:polygon(16px 0,100% 0,100% 100%,0 100%);background:linear-gradient(90deg,rgba(30,31,35,.5),rgba(60,61,66,.9))}
.gw-tb-side.gw-ffa.right{padding:0 30px 0 18px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 100%,0 100%);background:linear-gradient(90deg,rgba(60,61,66,.9),rgba(30,31,35,.5))}
.gw-tb-name{font:600 14px/1 var(--gw-ui);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw-tb-score{font:700 32px/1 var(--gw-ui);font-variant-numeric:tabular-nums}
.gw-tb-bar{position:absolute;left:0;bottom:0;height:3px;background:rgba(255,255,255,.85);transition:width .3s}
.gw-tb-side.gw-red .gw-tb-bar,.gw-tb-side.right .gw-tb-bar{left:auto;right:0}
.gw-tb-side.is-own::after{content:"";position:absolute;left:50%;bottom:0;margin-left:-6px;border:6px solid transparent;border-bottom-color:var(--gw-accent)}
.gw-tb-time{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:96px;margin:0 -8px;padding:0 22px;background:rgba(9,10,12,.92);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,12px 100%);z-index:1}
.gw-tb-time strong{font:700 28px/1 var(--gw-ui);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.gw-tb-time small{margin-top:2px;color:var(--gw-mute);font:600 9px/1 var(--gw-ui);letter-spacing:.24em;text-transform:uppercase}
.gw-tb-time.is-low strong{color:var(--gw-red-hi)}
.gw-tb-time.is-low strong{animation:gw-time-pulse 1s ease-in-out infinite}
.gw-tb-time.is-final{background:rgba(70,8,16,.94)}
.gw-tb-time.is-final strong{color:#fff;animation-duration:.5s;text-shadow:0 0 10px rgba(255,66,86,.85)}
@keyframes gw-time-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.62;transform:scale(1.08)}}
/* Wer führt: Seite heller mit Lichtkante, die andere etwas zurück; Etikett «Führt» / «Gleichstand» unter dem Balken */
.gw-tb-side::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 0 22px rgba(255,255,255,.35)}
.gw-tb-side.is-lead::before{opacity:1}
.gw-tb-side.is-lead{filter:brightness(1.18) saturate(1.12)}
.gw-tb-side.is-lead .gw-tb-score{text-shadow:0 0 14px rgba(255,255,255,.75)}
.gw-tb-side.is-behind{filter:saturate(.55) brightness(.78)}
.gw-tb-status{position:absolute;top:100%;left:50%;margin-top:4px;transform:translateX(-50%);padding:3px 9px 2px calc(9px + .24em);font:700 11px/1 var(--gw-ui);font-style:normal;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;color:var(--gw-accent);background:rgba(9,10,12,.82);pointer-events:none}
.gw-tb-status[data-lead=blue]{left:22px;transform:none;color:#fff;background:#2f62ff}
.gw-tb-status[data-lead=orange]{left:auto;right:22px;transform:none;color:#fff;background:#e2263c}
.gw-tb-status[hidden]{display:none}
/* Letzte 10 Sekunden: grosse Zahl oberhalb des Fadenkreuzes */
.gw-final-count{position:absolute;left:50%;top:27%;transform:translate(-50%,-50%);font:700 104px/1 var(--gw-ui);font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 2px rgba(0,0,0,.95),0 2px 10px rgba(0,0,0,.85),0 0 20px rgba(255,66,86,.85);pointer-events:none;z-index:2}
.gw-final-count.is-last{color:#ff4a5e;text-shadow:0 0 22px rgba(255,66,86,.95),0 3px 10px rgba(0,0,0,.75)}
.gw-final-count[hidden]{display:none}
.gw-round-card{position:absolute;top:calc(max(12px,var(--gw-sat,env(safe-area-inset-top))) + 58px);left:50%;transform:translateX(-50%);padding:9px 20px 8px;border:1px solid var(--gw-line-3);background:rgba(9,10,12,.55);font:600 13px/1 var(--gw-ui);letter-spacing:.34em;padding-left:calc(20px + .34em);text-transform:uppercase;color:var(--gw-text);white-space:nowrap;animation:gw-card 4.2s ease both}
.gw-round-card b{color:var(--gw-accent);font-weight:700}
@keyframes gw-card{0%{opacity:0;transform:translate(-50%,-6px)}10%,82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.gw-banner{position:absolute;top:calc(max(12px,var(--gw-sat,env(safe-area-inset-top))) + 58px);left:50%;transform:translateX(-50%);padding:9px 26px 8px;background:linear-gradient(90deg,rgba(226,38,60,0),rgba(226,38,60,.92) 18%,rgba(226,38,60,.92) 82%,rgba(226,38,60,0));color:#fff;font:700 15px/1 var(--gw-ui);letter-spacing:.38em;padding-left:calc(26px + .38em);text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.35);animation:gw-banner 2.8s ease both}
@keyframes gw-banner{0%{opacity:0;clip-path:inset(0 50%)}12%{opacity:1;clip-path:inset(0 0)}85%{opacity:1}100%{opacity:0}}
.hud-top{position:absolute;top:max(14px,var(--gw-sat,env(safe-area-inset-top)));right:max(16px,var(--gw-sar,env(safe-area-inset-right)));left:auto;display:none;gap:8px;justify-content:flex-end}
body.touch .hud-top{display:flex}
#score-button span{font:700 12px/1 var(--gw-ui);letter-spacing:.1em}
#kill-feed{position:absolute;top:max(16px,var(--gw-sat,env(safe-area-inset-top)));right:max(16px,var(--gw-sar,env(safe-area-inset-right)));display:flex;flex-direction:column;align-items:flex-end;gap:4px}
body.touch #kill-feed{top:calc(max(14px,var(--gw-sat,env(safe-area-inset-top))) + 46px)}
#kill-feed .gw-kf{display:flex;align-items:center;gap:10px;height:28px;padding:0 12px 0 24px;background:linear-gradient(90deg,rgba(9,10,12,0),rgba(9,10,12,.74) 24px);border:0;font:700 16px/1 var(--gw-ui);letter-spacing:.07em;text-transform:uppercase;animation:gw-kf-in .2s ease-out}
#kill-feed .gw-kf.is-me{box-shadow:inset -2px 0 0 var(--gw-accent);background:linear-gradient(90deg,rgba(236,232,224,0),rgba(236,232,224,.12) 24px)}
#kill-feed .gw-kf.out{opacity:0;transition:opacity .4s}
.gw-kf .gw-blue{color:var(--gw-blue-hi)}.gw-kf .gw-red{color:var(--gw-red-hi)}.gw-kf .gw-ffa{color:var(--gw-text)}
.gw-kf svg{width:44px;height:14px;fill:#f1ede6}
@keyframes gw-kf-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
#crosshair{width:26px;height:26px;filter:drop-shadow(0 0 1px rgba(0,0,0,.9))}
#crosshair i{background:rgba(255,255,255,.95);border-radius:0}
#crosshair i:nth-child(1){width:2px;height:7px;left:12px;top:0}#crosshair i:nth-child(2){width:2px;height:7px;left:12px;bottom:0}
#crosshair i:nth-child(3){height:2px;width:7px;top:12px;left:0}#crosshair i:nth-child(4){height:2px;width:7px;top:12px;right:0}
#hit-marker{width:34px;height:34px;font-size:0;color:transparent;text-shadow:none;transition:opacity .08s}
#hit-marker i{position:absolute;left:16px;top:0;width:2px;height:10px;background:#fff;transform-origin:1px 17px;box-shadow:0 0 2px rgba(0,0,0,.9)}
#hit-marker i:nth-child(1){transform:rotate(45deg)}#hit-marker i:nth-child(2){transform:rotate(135deg)}#hit-marker i:nth-child(3){transform:rotate(225deg)}#hit-marker i:nth-child(4){transform:rotate(315deg)}
#hit-marker.kill i{background:#ff3349;height:12px;box-shadow:0 0 4px rgba(255,40,60,.6)}
#hit-marker.pop{animation:gw-hit .16s ease-out}
@keyframes gw-hit{from{transform:translate(-50%,-50%) scale(1.35)}to{transform:translate(-50%,-50%) scale(1)}}
#kill-popup{position:absolute;left:50%;top:calc(50% + 34px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.8);transition:opacity .35s ease-in}
#kill-popup.out{opacity:0}
#kill-points{font:700 52px/1 var(--gw-ui);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:#fff}
#kill-popup.pop #kill-points{animation:gw-kill-pop .12s ease-out}
@keyframes gw-kill-pop{from{transform:scale(1.3)}to{transform:scale(1)}}
#kill-medal{font:700 17px/1 var(--gw-ui);font-style:normal;letter-spacing:.26em;color:var(--gw-accent);text-transform:uppercase;padding-left:.26em}
#kill-medal:empty{display:none}
#kill-victim{font:600 14px/1 var(--gw-ui);letter-spacing:.2em;color:rgba(236,232,224,.9);text-transform:uppercase;padding-left:.2em}
#protection{top:calc(50% - 66px);font:700 12px/1 var(--gw-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--gw-text)}
.hud-bottom{bottom:max(18px,var(--gw-sab,env(safe-area-inset-bottom)));left:max(22px,var(--gw-sal,env(safe-area-inset-left)));right:max(22px,var(--gw-sar,env(safe-area-inset-right)))}
.health-card{display:grid;grid-template-columns:auto auto;align-items:end;justify-content:start;gap:0 6px;min-width:0;padding:0;background:none;border-radius:0;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.health-icon{font:700 30px/.9 var(--gw-ui);color:#fff}
#health{display:block;font:600 42px/.86 var(--gw-ui);font-variant-numeric:tabular-nums}
.health-track{position:relative;grid-column:1/-1;width:clamp(160px,24vw,250px);height:3px;margin-top:8px;background:rgba(255,255,255,.2)}
.health-track i{background:#f1ede6}
.health-card small{display:none}
@media (max-width:1199px){.desktop-help{display:none}}
.desktop-help{align-self:flex-end;margin-bottom:2px;color:rgba(236,232,224,.45);font:500 10px/1 var(--gw-mono);letter-spacing:.04em;text-shadow:0 1px 4px #000}
.desktop-help span{font-size:10px;opacity:.75;margin:0 6px}
.ammo-card{display:grid;grid-template-columns:auto auto;grid-template-areas:"name name" "icon count" "bar bar" "track track";align-items:center;justify-items:end;gap:6px 14px;min-width:0;padding:0;background:none;border-radius:0;text-align:right;text-shadow:0 2px 8px rgba(0,0,0,.6)}
#weapon-state{grid-area:name;justify-self:stretch;padding-bottom:7px;border-bottom:1px solid rgba(236,232,224,.35);font:600 13px/1 var(--gw-ui);letter-spacing:.24em;text-transform:uppercase;color:rgba(236,232,224,.88)}
.gw-weapon-icon{grid-area:icon;display:block;width:64px;height:20px}
.gw-weapon-icon svg{width:100%;height:100%;fill:#f1ede6;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.gw-ammo-count{grid-area:count;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
#ammo{font:500 56px/.84 var(--gw-ui);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#ammo-reserve{margin:0;font:500 24px/1 var(--gw-ui);opacity:.55}
.gw-ammo-bar{grid-area:bar;display:flex;gap:2px;justify-self:end}
.gw-ammo-bar i{width:4px;height:11px;background:rgba(236,232,224,.18)}
.gw-ammo-bar i.on{background:#f1ede6;box-shadow:0 0 4px rgba(0,0,0,.5)}
.gw-ammo-bar.is-low i.on{background:var(--gw-accent)}
#reload-track{grid-area:track;justify-self:stretch;height:2px;margin:0;background:rgba(236,232,224,.15)}
#reload-track i{background:var(--gw-accent)}
#sprint-state{font:700 11px/1 var(--gw-ui);letter-spacing:.34em;text-transform:uppercase;bottom:118px}
#hurt{background:radial-gradient(ellipse,transparent 42%,rgba(150,10,24,.62))}
#notice{top:calc(max(12px,var(--gw-sat,env(safe-area-inset-top))) + 58px);bottom:auto;padding:10px 18px;border:0;border-left:2px solid var(--gw-accent);background:rgba(9,10,12,.88);color:var(--gw-text);font:600 14px/1.3 var(--gw-ui);letter-spacing:.1em;text-transform:uppercase;z-index:30}
#death{top:62%;padding:18px 40px 20px;border:0;border-top:2px solid var(--gw-red);background:rgba(9,10,12,.84);min-width:260px}
#death .eyebrow{display:block;color:var(--gw-red-hi);font:700 13px/1 var(--gw-ui);letter-spacing:.32em;text-transform:uppercase}
#death h2{margin:10px 0 6px;font:700 30px/1 var(--gw-ui);letter-spacing:.08em;text-transform:uppercase;color:#fff}
#death p{margin:0;color:var(--gw-dim);font:600 14px/1 var(--gw-ui);letter-spacing:.16em;text-transform:uppercase}
#death strong{color:#fff}
#killcam{border-color:rgba(226,38,60,.7)}
.killcam-top,.killcam-bottom{background:rgba(9,10,12,.9);font-family:var(--gw-ui)}
.killcam-top{border-bottom-color:rgba(226,38,60,.45)}
.killcam-top strong{font:700 20px/1 var(--gw-ui);letter-spacing:.3em;text-transform:uppercase}
.killcam-top i,.killcam-track i{background:var(--gw-red)}
.killcam-top span,.killcam-bottom small,.killcam-bottom>span{font:600 12px/1 var(--gw-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gw-dim)}
.killcam-bottom strong{font:700 26px/1 var(--gw-ui);letter-spacing:.08em;text-transform:uppercase}
/* ---------- Touch-Steuerung (Handy quer, Aufbau wie CoD Mobile; Logik: client/ui/touch-controls.js) ----------
   Links: Joystick unter dem Daumen (Ruheplatz unten links), weit nach vorne = Sprint-Sperre (Anzeige über dem Joystick).
   Rechts: wischen = umsehen; um den Feuerknopf Zielen, Nachladen, Springen, Ducken. Mitte unten: Waffenleiste.
   Ziele mindestens 52 px (Feuer 84 px), 10 px Abstand; Safe Areas (Dynamic Island, Home-Balken) über --tc-l / --tc-r / --tc-b. */
:root{--tc-l:max(16px,var(--gw-sal,env(safe-area-inset-left)));--tc-r:max(16px,var(--gw-sar,env(safe-area-inset-right)));--tc-b:max(10px,var(--gw-sab,env(safe-area-inset-bottom)));
  --tc-btn:54px;--tc-fire:88px;--tc-gap:12px;--tc-stick:120px;--tc-knob:52px;--tc-slot:60px;--tc-slot-h:52px;
  --tc-fx:calc(var(--tc-r) + var(--tc-btn) + 14px);--tc-fy:calc(var(--tc-b) + 26px)}
@media (min-height:390px){:root{--tc-btn:58px;--tc-fire:96px;--tc-gap:14px;--tc-stick:132px;--tc-knob:56px;--tc-slot:64px;--tc-slot-h:54px;--tc-fx:calc(var(--tc-r) + var(--tc-btn) + 16px);--tc-fy:calc(var(--tc-b) + 28px)}}
@media (min-height:560px){:root{--tc-btn:64px;--tc-fire:108px;--tc-gap:16px;--tc-stick:150px;--tc-knob:62px;--tc-slot:72px;--tc-slot-h:58px}}
#touch-controls{z-index:-1;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#touch-controls *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#touch-controls.is-down{visibility:hidden}
#look-zone,#move-zone{position:absolute;bottom:0;pointer-events:auto;touch-action:none}
#look-zone{left:40%;right:0;top:0}
#move-zone{left:0;width:40%;top:calc(max(14px,var(--gw-sat,env(safe-area-inset-top))) + clamp(110px,24vh,168px) + 10px)}
@media (max-height:500px){#move-zone{top:calc(max(14px,var(--gw-sat,env(safe-area-inset-top))) + 106px)}}
@media (max-height:380px){#move-zone{top:calc(max(14px,var(--gw-sat,env(safe-area-inset-top))) + 94px)}}
#touch-controls .tc-btn{position:absolute;display:grid;place-items:center;width:var(--tc-btn);height:var(--tc-btn);padding:0;border-radius:50%;color:#fff;touch-action:none;transition:transform .08s ease-out,background-color .12s,border-color .12s,box-shadow .12s,color .12s}
body.touch #touch-controls .tc-btn{border:1.5px solid rgba(236,232,224,.5);background:rgba(10,11,13,.46);box-shadow:0 0 0 1px rgba(0,0,0,.22)}
#touch-controls .tc-btn svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.65));pointer-events:none}
body.touch #touch-controls .tc-btn.is-pressed{background:rgba(236,232,224,.24);border-color:rgba(236,232,224,.92);transform:scale(.93)}
body.touch #touch-controls .tc-btn.is-on{border-color:var(--gw-accent);background:rgba(233,182,74,.2);color:var(--gw-accent-hi);box-shadow:0 0 0 1px rgba(0,0,0,.22),0 0 18px -4px var(--gw-accent-glow)}
body.touch #touch-controls .tc-btn:disabled{opacity:.28}
#crouch-button{right:var(--tc-r);bottom:calc(var(--tc-b) + 4px)}
body.touch #touch-controls #crouch-button.is-prone{background:rgba(233,182,74,.42);color:#fff}   /* [h27] liegend */
#jump-button{right:var(--tc-r);bottom:calc(var(--tc-b) + 4px + var(--tc-btn) + var(--tc-gap))}
#fire-button{right:var(--tc-fx);bottom:var(--tc-fy)}
#aim-button{right:calc(var(--tc-fx) + var(--tc-fire) + var(--tc-gap));bottom:calc(var(--tc-fy) + (var(--tc-fire) - var(--tc-btn)) / 2 + 14px)}
#reload-button{right:calc(var(--tc-fx) + var(--tc-fire) * 1.1 - var(--tc-btn) / 2);bottom:calc(var(--tc-fy) + var(--tc-fire) * 1.41 - var(--tc-btn) / 2 + 2px)}
#reload-button.is-busy{color:var(--gw-accent-hi)}
#reload-button.is-busy svg{animation:tc-spin .9s linear infinite}
/* Feuer: Patronen (Messer: Klinge); Sniper: Ladekreis bis das Zielfernrohr ruhig ist, dann Amber = voller Schaden */
#touch-controls #fire-button{width:var(--tc-fire);height:var(--tc-fire)}
body.touch #touch-controls #fire-button{border:2px solid rgba(236,232,224,.66);background:radial-gradient(circle,rgba(10,11,13,.22) 0 50%,rgba(10,11,13,.5) 100%)}
body.touch #touch-controls #fire-button.is-pressed{border-color:#fff;background:radial-gradient(circle,rgba(236,232,224,.14) 0 50%,rgba(236,232,224,.3) 100%)}
body.touch #touch-controls #fire-button.is-ready{border-color:var(--gw-accent-hi);color:var(--gw-accent-hi);box-shadow:0 0 0 1px rgba(0,0,0,.22),0 0 26px -2px var(--gw-accent-glow)}
#fire-button .tc-icon{display:grid;place-items:center;width:44%;height:44%;pointer-events:none;transition:opacity .15s}
#touch-controls #fire-button .tc-icon svg{width:100%;height:100%}
#fire-button[data-kind=gun] .tc-icon--melee,#fire-button[data-kind=melee] .tc-icon--gun{display:none}
#fire-button.is-cooling .tc-icon{opacity:.38}
#touch-controls .tc-btn .tc-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);filter:none}
.tc-ring circle{stroke:var(--gw-accent);stroke-width:5;stroke-linecap:round;opacity:0;transition:opacity .1s}
#fire-button.is-charging .tc-ring circle{opacity:1}
#fire-button.is-ready .tc-ring circle{stroke:var(--gw-accent-hi)}
/* Joystick: Ruheplatz unten links (gedimmt), erscheint unter dem Daumen; Sprint-Sperre leuchtet Amber */
#joystick{position:absolute;left:calc(var(--tc-l) + 24px);bottom:calc(var(--tc-b) + 16px);width:var(--tc-stick);height:var(--tc-stick);border-radius:50%;border:1.5px solid rgba(236,232,224,.36);background:radial-gradient(circle,rgba(10,11,13,.04) 0 36%,rgba(10,11,13,.34) 100%);box-shadow:0 0 0 1px rgba(0,0,0,.22),inset 0 0 0 1px rgba(0,0,0,.14);opacity:.6;pointer-events:none;transition:transform .16s cubic-bezier(.2,.8,.2,1),opacity .2s}
#joystick.is-active{opacity:1;transition:opacity .06s}
#joystick.is-auto{opacity:.9}
#stick{position:absolute;left:50%;top:50%;width:var(--tc-knob);height:var(--tc-knob);margin:calc(var(--tc-knob) / -2) 0 0 calc(var(--tc-knob) / -2);border-radius:50%;border:1.5px solid rgba(236,232,224,.8);background:rgba(236,232,224,.26);box-shadow:0 0 0 1px rgba(0,0,0,.28),0 2px 10px rgba(0,0,0,.35);transition:transform .14s ease-out,background-color .12s,border-color .12s}
#joystick.is-active #stick{transition:background-color .12s,border-color .12s}
#joystick.is-lock #stick{border-color:var(--gw-accent-hi);background:rgba(233,182,74,.4)}
#sprint-lock{position:absolute;left:50%;bottom:calc(100% + 8px);display:grid;place-items:center;width:32px;height:32px;margin-left:-16px;border-radius:50%;border:1.5px solid rgba(236,232,224,.5);background:rgba(10,11,13,.5);color:#fff;font-style:normal;opacity:0;transition:opacity .15s,border-color .12s,color .12s,background-color .12s}
#sprint-lock svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#joystick.is-active #sprint-lock{opacity:.65}
#joystick.is-lock #sprint-lock{opacity:1;border-color:var(--gw-accent);background:rgba(233,182,74,.22);color:var(--gw-accent-hi);box-shadow:0 0 16px -4px var(--gw-accent-glow)}
#joystick.is-auto #sprint-lock{animation:tc-pulse 1.1s ease-in-out infinite}
/* Waffenleiste: ein Platz pro Waffe des Spielers (aus den Daten gebaut), aktive Waffe mit Amber-Kante */
#weapon-bar{position:absolute;left:50%;bottom:calc(var(--tc-b) + 38px);display:flex;gap:11px;transform:translateX(-50%);transition:opacity .2s}
#touch-controls .tc-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:var(--tc-slot);height:var(--tc-slot-h);padding:0;border-radius:1px;color:rgba(241,237,230,.7);touch-action:none;transform:skewX(-8deg);transition:background-color .12s,border-color .12s,color .12s}
body.touch #touch-controls .tc-slot{border:1px solid rgba(236,232,224,.24);background:rgba(10,11,13,.5);box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.tc-slot>*{transform:skewX(8deg);pointer-events:none}
.tc-slot-icon{display:block;width:46px;height:14px}
.tc-slot-icon svg{display:block;width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.tc-slot-ammo{min-height:11px;font:600 12px/1 var(--gw-ui);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--gw-dim)}
body.touch #touch-controls .tc-slot.is-on{border-color:rgba(236,232,224,.62);background:rgba(22,23,27,.74);color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18),inset 0 -2px 0 var(--gw-accent)}
.tc-slot.is-on .tc-slot-ammo{color:var(--gw-text)}
.tc-slot.is-low .tc-slot-ammo{color:var(--gw-accent)}
body.touch #touch-controls .tc-slot.is-pressed{background:rgba(236,232,224,.2)}
body.touch #hud:has(#kill-popup:not([hidden])) #weapon-bar{opacity:.3}
/* HUD auf dem Handy: Menü-Knöpfe oben rechts mit 52-px-Trefferfläche, Hinweise über der Waffenleiste */
body.touch .hud-top .gw-icon-btn{position:relative}
body.touch .hud-top .gw-icon-btn::after{content:"";position:absolute;inset:-7px}
@media (max-height:380px){body.touch #notice{bottom:calc(var(--tc-b) + 100px)}}
@keyframes tc-spin{to{transform:rotate(360deg)}}
@keyframes tc-pulse{50%{box-shadow:0 0 0 5px rgba(233,182,74,.16),0 0 16px -4px var(--gw-accent-glow)}}
@media (prefers-reduced-motion:reduce){#joystick.is-auto #sprint-lock,#reload-button.is-busy svg{animation:none}}
/* Hochformat (nur nach «Trotzdem spielen»): Knopfbogen über der Gesundheit, Joystick links darüber, Waffenleiste über dem Fadenkreuz */
@media (orientation:portrait){
  :root{--tc-btn:54px;--tc-fire:88px;--tc-gap:12px;--tc-stick:120px;--tc-knob:52px;--tc-slot:60px;--tc-slot-h:52px;--tc-fx:calc(var(--tc-r) + var(--tc-btn) + 14px);--tc-fy:calc(var(--tc-b) + 66px)}
  #crouch-button{bottom:calc(var(--tc-b) + 44px)}
  #jump-button{bottom:calc(var(--tc-b) + 44px + var(--tc-btn) + var(--tc-gap))}
  #joystick{bottom:calc(var(--tc-b) + 236px)}
  #move-zone{width:50%;top:40%}
  #look-zone{left:50%}
  #weapon-bar{top:36%;bottom:auto}
  body.touch .hud-bottom .ammo-card{bottom:calc(54px + 2 * var(--tc-btn) + var(--tc-gap))}
}
body.touch .hud-bottom{top:auto;bottom:max(10px,var(--gw-sab,env(safe-area-inset-bottom)));left:0;right:0;height:0;display:block}
body.touch .health-card{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
body.touch .health-card{grid-template-columns:auto auto;padding:0;min-width:0;gap:0 5px}
body.touch .health-icon{font-size:20px}
body.touch #health{font-size:26px}
body.touch .health-track{width:150px;margin-top:5px}
/* Munition rechts über Springen/Ducken (ihre Höhe: 4 px + 2 Knöpfe + Abstand, dann 10 px Luft) */
body.touch .ammo-card{position:absolute;right:var(--tc-r);bottom:calc(14px + 2 * var(--tc-btn) + var(--tc-gap));min-width:0;padding:0;gap:3px 10px}
/* Handy: die Waffenleiste zeigt die Waffe (lange Namen wie «Scharfschützengewehr» träfen sonst den Nachladen-Knopf) */
body.touch #weapon-state{display:none}
body.touch .gw-weapon-icon{width:46px;height:14px}
body.touch #ammo{font-size:36px}
body.touch #ammo-reserve{font-size:16px}
/* grössere Magazine (nächste Phase) machen die Striche schmaler, nicht die Munitionsanzeige breiter */
body.touch .gw-ammo-bar{max-width:124px}
body.touch .gw-ammo-bar i{width:3px;height:8px;flex:0 1 auto;min-width:1px}
body.touch #room-badge{display:none}
#rotate-hint{background:rgba(9,10,12,.97);font-family:var(--gw-ui)}
#rotate-hint>span{width:56px;height:56px;border:2px solid var(--gw-text);border-radius:8px;transform:rotate(90deg);margin-bottom:12px}
#rotate-hint strong{font:700 28px/1 var(--gw-ui);letter-spacing:.14em;text-transform:uppercase}
#rotate-hint p{color:var(--gw-dim);font:600 14px/1.5 var(--gw-ui);letter-spacing:.1em;text-transform:uppercase}

/* ---------- Punktestand (Tab) und Tabellen ---------- */
.gw-overlay{background:rgba(5,6,8,.5);backdrop-filter:blur(3px);padding:clamp(8px,3vh,24px)}
.gw-score-panel,.gw-pause{width:min(900px,96vw);max-height:calc(100dvh - 20px);overflow:auto;padding:clamp(12px,2.6vh,22px) clamp(14px,2.4vw,26px);border:1px solid var(--gw-line-2);background:rgba(11,12,14,.94);box-shadow:0 30px 90px rgba(0,0,0,.55);color:var(--gw-text)}
.gw-score-panel>header,.gw-pause>header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(8px,1.8vh,16px)}
.gw-score-panel h2,.gw-pause h2{margin:4px 0 0;font:700 clamp(22px,3.4vw,32px)/1 var(--gw-ui);letter-spacing:.26em;text-transform:uppercase}
.gw-score-panel header small,.gw-pause header small{color:var(--gw-dim);font:600 13px/1 var(--gw-ui);letter-spacing:.2em;text-transform:uppercase}
.gw-score-panel header b,.gw-pause header b{color:var(--gw-accent);letter-spacing:.2em}
.gw-tables{display:grid;gap:clamp(8px,1.6vh,14px)}
.gw-tables.is-split{grid-template-columns:1fr 1fr;gap:14px}
.gw-tsec{min-width:0}
.gw-tsec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.gw-tsec-head .gw-brush-title{font-size:clamp(20px,2.8vw,30px);padding:.18em .9em .1em .45em}
.gw-tsec-head strong{font:700 clamp(24px,3.4vw,34px)/1 var(--gw-ui);font-variant-numeric:tabular-nums;color:var(--team-hi,#fff)}
.gw-trow{display:grid;grid-template-columns:minmax(0,1fr) 50px 50px 66px 52px;align-items:center;gap:6px;height:clamp(20px,4.2vh,32px);padding:0 12px;border-bottom:1px solid rgba(236,232,224,.06);font:600 clamp(14px,2.1vh,17px)/1 var(--gw-ui);letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.gw-trow>span:not(:first-child){text-align:right}
.gw-trow>span:first-child{display:flex;align-items:center;gap:8px;min-width:0}
.gw-trow .gw-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gw-trow.gw-thead{height:24px;border-bottom:1px solid var(--gw-line-2);color:var(--gw-mute);font:600 11px/1 var(--gw-ui);letter-spacing:.18em}
.gw-tbody{border:1px solid color-mix(in srgb,var(--team,#fff) 40%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--team,#fff) 14%,transparent),rgba(13,14,17,.6) 65%)}
.gw-trow.is-me{background:rgba(236,232,224,.09);box-shadow:inset 3px 0 0 var(--gw-accent)}
.gw-trow.is-bot .gw-n{color:var(--gw-dim)}
.gw-trow .gw-tag{font-size:10px;padding:2px 5px 1px}
.gw-trow .pts{color:#fff;font-weight:700}
.gw-trow .ping{color:var(--gw-dim);font:500 12px/1 var(--gw-mono)}

/* ---------- Pausenmenü ---------- */
.gw-pause{width:min(760px,96vw)}
.gw-pause-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.gw-pause-col{display:grid;gap:10px;align-content:start}
.gw-pause .setting-buttons{display:flex;gap:8px}
.gw-pause .setting-buttons button{flex:1;padding:0 6px}
#team-switch-hint:empty{display:none}
.gw-share{padding:14px;border:1px solid var(--gw-line);background:rgba(236,232,224,.03);justify-items:center;text-align:center}
.gw-share img{width:130px;height:130px;padding:6px;background:#fff;border:0;border-radius:1px}
#share-url{min-height:34px;font:500 12px/1 var(--gw-mono);letter-spacing:0;margin:0}

/* ---------- Rundenende («Mission complete»): obere Hälfte frei für die 3D-Aufstellung ---------- */
.gw-end{z-index:6;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;padding:clamp(12px,2.6vh,24px) clamp(14px,3vw,44px) clamp(10px,2vh,18px);color:var(--gw-text);background:linear-gradient(180deg,rgba(9,10,12,.78) 0%,rgba(9,10,12,.3) 18%,rgba(9,10,12,0) 26%,rgba(9,10,12,0) 46%,rgba(9,10,12,.84) 56%,rgba(9,10,12,.94) 100%)}
.gw-end-head{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1vh,8px);text-align:center;animation:gw-drop .55s cubic-bezier(.2,.9,.25,1) both}
.gw-end-kicker{font:600 12px/1 var(--gw-ui);letter-spacing:.5em;padding-left:.5em;text-transform:uppercase;color:var(--gw-dim)}
.gw-end-title{margin:0;font:700 clamp(46px,8.4vw,104px)/.9 var(--gw-ui);letter-spacing:.14em;padding-left:.14em;text-transform:uppercase;color:#f6f3ec;text-shadow:0 6px 40px rgba(0,0,0,.6)}
.gw-end-title.is-loss{color:rgba(236,232,224,.82)}
.gw-end-sub{display:flex;align-items:center;gap:14px;font:600 clamp(14px,2vw,19px)/1 var(--gw-ui);letter-spacing:.26em;text-transform:uppercase}
.gw-end-sub .team{color:var(--team-hi)}
.gw-end-sub .score{font-weight:700;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.gw-end-sub .score .gw-blue{color:var(--gw-blue-hi)}.gw-end-sub .score .gw-red{color:var(--gw-red-hi)}
.gw-end-free{position:relative;min-height:0}
.gw-mvp{position:absolute;left:50%;bottom:clamp(6px,1.6vh,14px);transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:8px 18px 8px 12px;border:1px solid var(--gw-line-2);background:rgba(9,10,12,.76);white-space:nowrap;animation:gw-fade-in .6s .25s both}
.gw-mvp b{font:700 13px/1 var(--gw-ui);letter-spacing:.3em;color:var(--gw-accent)}
.gw-mvp strong{font:700 19px/1 var(--gw-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--team-hi,#fff)}
.gw-mvp span{color:var(--gw-dim);font:600 13px/1 var(--gw-ui);letter-spacing:.16em;text-transform:uppercase}
.gw-end-body{display:grid;grid-template-columns:minmax(0,.72fr) auto minmax(0,1.75fr);gap:clamp(12px,2vw,24px);align-items:stretch;min-height:0;animation:gw-rise .5s .1s both}
.gw-mystats{display:grid;align-content:start;gap:0;border:1px solid var(--gw-line-2);background:rgba(13,14,17,.7)}
.gw-mystats header{padding:9px 14px;border-bottom:1px solid var(--gw-line);font:600 12px/1 var(--gw-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--gw-dim)}
.gw-mystats div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 14px;height:clamp(24px,4.6vh,36px);border-bottom:1px solid rgba(236,232,224,.06);font:600 13px/1 var(--gw-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gw-dim);align-items:center}
.gw-mystats div:last-child{border-bottom:0}
.gw-mystats div b{white-space:nowrap;color:var(--gw-text);font:700 clamp(17px,2.6vh,22px)/1 var(--gw-ui);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.gw-grade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:clamp(96px,14vw,150px);border:1px solid var(--gw-line-2);background:rgba(13,14,17,.7)}
.gw-grade small{font:600 11px/1 var(--gw-ui);letter-spacing:.34em;padding-left:.34em;text-transform:uppercase;color:var(--gw-dim)}
.gw-grade b{font:700 clamp(64px,13vh,118px)/.9 var(--gw-ui);color:var(--gw-text)}
.gw-grade.is-S b{color:var(--gw-accent);text-shadow:0 0 40px var(--gw-accent-glow)}
.gw-end-tables{min-height:0;overflow:auto}
.gw-end-tables .gw-trow{height:clamp(16px,3.3vh,26px);font-size:clamp(12px,1.9vh,15px);grid-template-columns:minmax(0,1fr) 30px 30px 46px;gap:5px;padding:0 8px}
.gw-end-tables .gw-trow>span:nth-child(5){display:none}
.gw-end-tables .gw-trow .gw-tag:not(.gw-tag--me){display:none}
.gw-end-tables .gw-trow.gw-thead{letter-spacing:.04em;font-size:10px}
.gw-end-tables .gw-tsec-head .gw-brush-title{font-size:clamp(16px,2.2vw,22px)}
.gw-end-tables .gw-tsec-head strong{font-size:clamp(18px,2.6vw,26px)}
.gw-end-foot{display:flex;align-items:center;justify-content:center;gap:16px;padding-top:clamp(6px,1.4vh,12px)}
.gw-end-foot p{margin:0;color:var(--gw-dim);font:600 13px/1 var(--gw-ui);letter-spacing:.3em;text-transform:uppercase}
.gw-end-foot p b{color:var(--gw-text)}
.gw-end-foot .line{flex:0 1 80px;height:1px;background:var(--gw-line-2)}
@keyframes gw-drop{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes gw-rise{from{transform:translateY(20px);opacity:0}to{opacity:1}}

/* ---------- Handy quer (z. B. 844 x 390) ---------- */
@media (max-height:500px){
  .gw-crack{font-size:58px}
  .gw-subtabs{gap:16px}.gw-subtabs button{font-size:12px;padding-bottom:7px}
  .gw-settings-body{grid-template-columns:minmax(0,1fr) 150px;gap:10px}
  .gw-row{grid-template-columns:112px minmax(0,1fr);min-height:34px;gap:10px;padding:2px 8px}
  .gw-label,.gw-row>label{font-size:11px}
  .gw-seg button{min-height:28px;padding:0 9px;font-size:12px}
  .gw-row input:not([type=range]){min-height:30px;font-size:14px}
  .gw-info{padding:8px 10px}.gw-info small{font-size:10px}.gw-info p{font-size:12px;line-height:1.35;margin-top:5px}
  .gw-room{padding:8px max(14px,var(--gw-sar,env(safe-area-inset-right))) 8px max(14px,var(--gw-sal,env(safe-area-inset-left)));gap:7px}
  .gw-room-head .gw-crack{font-size:18px}
  .gw-room-title h2{font-size:22px;letter-spacing:.28em}
  .gw-room-title small{font-size:10.5px;margin-top:4px}
  .gw-room-code{font-size:11px;gap:8px}.gw-room-code b{font-size:15px}
  .gw-team-head{min-height:40px;padding-bottom:4px}
  .gw-team-head .gw-brush-title{font-size:22px}
  .gw-team-meta strong{font-size:10.5px}.gw-team-meta small{font-size:10px}
  .gw-roster{padding:2px 0}
  .gw-roster li{font-size:14px;gap:8px;padding:0 10px;grid-template-columns:12px minmax(0,1fr) auto 40px}
  .gw-ready{width:11px;height:11px}
  .gw-tag{font-size:9px;padding:2px 4px 1px}
  .gw-ping{font-size:11px}
  .gw-team-join{margin-top:5px;min-height:28px}
  .gw-vs span{font-size:40px}
  .gw-room-settings{gap:5px}
  .gw-set{padding:4px 7px;gap:3px}
  .gw-set small{font-size:9px}
  .gw-set-val strong{font-size:13px}
  .gw-set-val button{width:20px;height:20px;font-size:13px}
  .gw-btn{min-height:34px;padding:0 14px;font-size:13px}
  #room-start{min-width:150px;min-height:36px;font-size:14px}
  #room-status{font-size:11px;letter-spacing:.12em}
  .gw-outfit-pick{height:34px;font-size:11px}
  .gw-versus{padding:10px 18px;gap:12px;grid-template-columns:minmax(0,1fr) minmax(200px,32%) minmax(0,1fr)}
  .gw-vs-team .gw-brush-title{font-size:30px}
  .gw-vs-team .gw-place{font-size:11px}
  .gw-vs-list li{height:clamp(16px,calc((100dvh - 130px) / 10),28px);font-size:13px;padding:0 10px}
  .gw-vs-center .gw-crack{font-size:26px}
  .gw-vs-mode{margin-top:8px;font-size:13px}
  .gw-count{font-size:84px}
  .gw-vs-map{width:92px}
  .gw-vs-place{font-size:11px}
  .gw-vs-tip{font-size:10.5px;letter-spacing:.12em}
  .gw-minimap{width:96px}
  .gw-minimap i{font-size:9px}
  .gw-teambar{height:36px}
  .gw-tb-side{min-width:118px;padding:0 12px 0 22px;gap:10px}
  .gw-tb-side.gw-red,.gw-tb-side.gw-ffa.right{padding:0 22px 0 12px}
  .gw-tb-name{font-size:11px;letter-spacing:.12em}
  .gw-tb-score{font-size:28px}
  .gw-tb-time{min-width:74px;padding:0 14px}
  .gw-tb-time strong{font-size:22px}
  .gw-tb-time small{display:block;font-size:8px;letter-spacing:.18em;margin-top:1px}
  .gw-tb-status{font-size:9px;padding:2px 7px 2px calc(7px + .24em);margin-top:3px}
  .gw-tb-status[data-lead=blue]{left:18px}.gw-tb-status[data-lead=orange]{right:18px}
  .gw-final-count{top:31%;font-size:68px}
  .gw-round-card,.gw-banner{top:68px;font-size:11px;padding:7px 14px 6px}
  #kill-feed .gw-kf{height:21px;font-size:12px;gap:7px;padding:0 9px 0 16px}
  .gw-kf svg{width:32px;height:10px}
  body:not(.touch) #kill-feed{top:12px}
  #kill-points{font-size:38px}
  #kill-medal{font-size:13px}
  #kill-victim{font-size:11px}
  #kill-popup{top:calc(50% + 26px)}
  .hud-bottom{bottom:10px;left:14px;right:14px}
  #health{font-size:30px}.health-icon{font-size:22px}
  .health-track{width:150px;margin-top:5px}
  #ammo{font-size:40px}.gw-weapon-icon{width:48px;height:15px}#weapon-state{font-size:11px}
  .desktop-help{display:none}
  #notice{font-size:12px;padding:7px 12px;top:48px}
  .gw-score-panel,.gw-pause{padding:10px 14px;max-height:calc(100dvh - 12px)}
  .gw-overlay{padding:6px}
  .gw-score-panel>header,.gw-pause>header{margin-bottom:6px}
  .gw-score-panel h2,.gw-pause h2{font-size:20px}
  .gw-tables.is-split{gap:10px}
  .gw-trow{height:clamp(15px,calc((100dvh - 150px) / 11),26px);font-size:12.5px;padding:0 8px;grid-template-columns:minmax(0,1fr) 34px 34px 46px 38px}
  .gw-trow.gw-thead{height:18px;font-size:9px}
  .gw-tsec-head .gw-brush-title{font-size:17px}
  .gw-tsec-head strong{font-size:20px}
  .gw-pause-grid{gap:12px}
  .gw-pause-col{gap:7px}
  .gw-share img{width:96px;height:96px}
  .gw-end{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:14px;padding:8px max(14px,var(--gw-sar,env(safe-area-inset-right))) 8px max(14px,var(--gw-sal,env(safe-area-inset-left)));background:linear-gradient(180deg,rgba(9,10,12,.78) 0%,rgba(9,10,12,0) 26%),linear-gradient(90deg,rgba(9,10,12,0) 0%,rgba(9,10,12,0) 40%,rgba(9,10,12,.9) 50%)}
  .gw-end-head{grid-column:1/-1;flex-direction:row;justify-content:center;gap:16px}
  .gw-end-kicker{display:none}
  .gw-end-title{font-size:40px}
  .gw-end-sub{font-size:13px;flex-direction:column;align-items:flex-start;gap:4px}
  .gw-end-free{grid-column:1;grid-row:2/4}
  .gw-end-body{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr) 84px;grid-template-rows:auto minmax(0,1fr);gap:8px}
  .gw-mystats{grid-column:1}
  .gw-mystats header{padding:5px 10px;font-size:10px}
  .gw-mystats div{height:18px;font-size:10px;padding:0 10px}
  .gw-mystats div b{font-size:14px}
  .gw-grade{grid-column:2;grid-row:1;min-width:0}
  .gw-grade b{font-size:52px}
  .gw-end-tables{grid-column:1/-1;grid-row:2}
  .gw-end-tables .gw-tables.is-split{grid-template-columns:1fr 1fr;gap:6px}
  .gw-end-tables .gw-trow{height:14px;font-size:10px;padding:0 5px;grid-template-columns:minmax(0,1fr) 20px 20px 34px;gap:4px}
  .gw-end-tables .gw-trow>span:nth-child(5){display:none}
  .gw-end-tables .gw-trow.gw-thead{height:14px;font-size:8px}
  .gw-end-tables .gw-tsec-head{margin-bottom:2px}
  .gw-end-tables .gw-tsec-head .gw-brush-title{font-size:13px}
  .gw-end-tables .gw-tsec-head strong{font-size:15px}
  .gw-end-foot{grid-column:2;grid-row:3;padding-top:4px;gap:8px;flex-wrap:wrap}
  .gw-end-foot p{font-size:10px;letter-spacing:.16em}
  .gw-end-foot .line{display:none}
  .gw-mvp{bottom:6px;padding:5px 12px 5px 8px;gap:10px}
  .gw-mvp b{font-size:10px}.gw-mvp strong{font-size:14px}.gw-mvp span{font-size:10px}
}
@media (max-width:649px){
  .gw-room{overflow:auto}
  .gw-room-head{grid-template-columns:1fr auto}
  .gw-room-head .gw-crack{display:none}
  .gw-room-settings{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gw-room-foot{grid-template-columns:1fr;justify-items:center}
  .gw-pause-grid{grid-template-columns:1fr}
  .gw-loadout-grid,.gw-settings-body{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.gw-count.pop,#kill-popup.pop #kill-points,.gw-vs-team,.gw-end-head,.gw-end-body,.gw-mvp,#hit-marker.pop,#kill-feed .gw-kf,.gw-tab,.gw-title-center,.gw-press,.gw-banner,.gw-round-card,.gw-tb-time.is-low strong{animation:none!important}}

/* Lobby: Hinweise unten über der Aktionsleiste statt über den Teamnamen (Lead) */
body:has(#room-lobby:not([hidden])) #notice{top:auto;bottom:calc(max(12px,var(--gw-sab,env(safe-area-inset-bottom))) + 84px)}

/* Lead: sehr flache Handy-Ansicht (Safari quer mit Adressleiste, ~340 px hoch) – Hinweise, Killfeed und Waffe überlappen nicht */
@media (max-height:380px){
  #notice{top:auto;bottom:calc(max(8px,var(--gw-sab,env(safe-area-inset-bottom))) + 58px);font-size:11px;padding:6px 10px;max-width:60vw}
  #kill-feed .gw-kf{height:18px;font-size:10px}
  #kill-feed .gw-kf:nth-child(n+3){display:none}
  #weapon-state{display:none}
  .gw-round-card,.gw-banner{top:64px;font-size:10px;padding:5px 12px 4px}
  .gw-final-count{font-size:60px}
  .gw-minimap{width:84px}
}
/* Handy (Lead): keine Hintergrund-Unschärfe über dem laufenden 3D-Bild – iOS rechnet sie jedes Bild neu (kostet Tempo) */
body.touch #touch-controls button,body.touch .glass-button,body.touch .gw-overlay,body.touch .overlay{-webkit-backdrop-filter:none;backdrop-filter:none}
body.touch #touch-controls button{background:rgba(10,11,13,.5)}
body.touch .gw-overlay{background:rgba(5,6,8,.72)}

/* ---------- Einstellungen (Lead 23.10.): Leistungsanzeige, Fadenkreuz, Touch-Knöpfe, Einstellungen im Spiel ---------- */
.gw-perf{position:absolute;top:max(14px,var(--gw-sat,env(safe-area-inset-top)));left:calc(max(16px,var(--gw-sal,env(safe-area-inset-left))) + clamp(110px,24vh,168px) + 10px);padding:4px 8px;font:600 12px/1.1 var(--gw-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#dff7e4;background:rgba(10,11,13,.58);border-left:2px solid #57ff7f;pointer-events:none}
.gw-perf[data-level=mittel]{border-left-color:var(--gw-accent);color:#fbe9c4}
.gw-perf[data-level=tief]{border-left-color:#ff4256;color:#ffd0d6}
@media (max-height:500px){.gw-perf{left:calc(max(16px,var(--gw-sal,env(safe-area-inset-left))) + 96px + 8px);font-size:11px}}
@media (max-height:380px){.gw-perf{left:calc(max(16px,var(--gw-sal,env(safe-area-inset-left))) + 84px + 8px)}}
#crosshair{--xh:#fff}
#crosshair i{background:var(--xh)}
#crosshair::before,#crosshair::after{content:"";position:absolute;left:50%;top:50%;display:none;transform:translate(-50%,-50%);box-sizing:border-box;pointer-events:none}
#crosshair[data-style=punkt] i,#crosshair[data-style=kreis] i{display:none}
#crosshair[data-style=punkt]::after,#crosshair[data-style=kreuzpunkt]::after,#crosshair[data-style=kreis]::after{display:block;width:4px;height:4px;border-radius:50%;background:var(--xh)}
#crosshair[data-style=kreis]::before{display:block;width:22px;height:22px;border-radius:50%;border:2px solid var(--xh)}
.gw-swatches button{min-width:32px;padding:0 8px}
.gw-xh-seg button{min-width:40px;padding:0 9px}
.gw-xh-seg svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.gw-xh-seg svg .f{fill:currentColor;stroke:none}
.gw-swatches button i{display:block;width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.18)}
.gw-swatches [data-value=weiss] i{background:#fff}.gw-swatches [data-value=gruen] i{background:#57ff7f}.gw-swatches [data-value=gelb] i{background:#ffe14d}
.gw-swatches [data-value=cyan] i{background:#53e9ff}.gw-swatches [data-value=pink] i{background:#ff5ccb}
/* Touch: Grösse (scale, unabhängig vom Drück-Effekt) und Deckkraft aus den Einstellungen; zweiter Feuerknopf über dem Joystick */
#touch-controls{opacity:var(--tc-alpha,1)}
body.touch #touch-controls .tc-btn,body.touch #weapon-bar{scale:var(--tc-size,1)}
#touch-controls #fire-left{left:calc(var(--tc-l) + 30px);bottom:calc(var(--tc-b) + 16px + var(--tc-stick) + 16px);width:calc(var(--tc-btn) * 1.16);height:calc(var(--tc-btn) * 1.16)}
#fire-left .tc-icon{display:grid;place-items:center;width:46%;height:46%;pointer-events:none}
#touch-controls #fire-left .tc-icon svg{width:100%;height:100%}
#touch-controls #fire-left[hidden]{display:none}
/* Einstellungen im Pausenmenü: dasselbe Panel wie im Hauptmenü */
#menu.is-settings .gw-pause-grid{display:none}
.gw-pause-settings{display:grid;gap:12px;justify-items:start}
.gw-pause-settings[hidden]{display:none}
.gw-pause-settings>.gw-tab{width:100%;animation:none}
@media (max-height:500px){.gw-pause-settings .gw-info{display:none}.gw-pause-settings .gw-settings-body{grid-template-columns:1fr}.gw-pause-settings .gw-panel-title{display:none}}

/* [headshot] label above the crosshair, gold hit marker, kill feed icon */
#headshot{position:absolute;left:50%;top:calc(50% - 64px);transform:translateX(-50%);font:700 22px/1 'Barlow Condensed',system-ui,sans-serif;letter-spacing:4px;color:#ffd23a;text-shadow:0 0 2px #000,0 2px 10px rgba(0,0,0,.85),0 0 14px rgba(255,190,40,.45);pointer-events:none;white-space:nowrap}
#headshot.pop{animation:gw-headshot .9s ease-out forwards}
@keyframes gw-headshot{0%{opacity:0;transform:translateX(-50%) scale(1.6)}12%{opacity:1;transform:translateX(-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-8px)}}
#hit-marker.head i{background:#ffd23a;height:14px;box-shadow:0 0 5px rgba(255,190,40,.8)}
.gw-kf .gw-kf-head{color:#ffd23a;display:inline-flex;align-items:center}
@media (pointer:coarse){#headshot{font-size:20px;top:calc(50% - 56px)}}
@media (prefers-reduced-motion:reduce){#headshot.pop{animation:none}}

/* [2.1] clean sights: red dot while aiming (AK / SD / pistol), crosshair hidden */
#red-dot{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#ff2a2a;box-shadow:0 0 4px 1px rgba(255,40,40,.85),0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
#red-dot::after{content:'';position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1px solid rgba(255,255,255,.18)}
#crosshair.is-ads{opacity:0}
#red-dot.is-quiet{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:#ff3b3b;box-shadow:0 0 2px rgba(255,40,40,.55),0 0 0 1px rgba(0,0,0,.3);opacity:.9}
#red-dot.is-quiet::after{display:none}
/* ---------- [kit] Waffen (h29): Schalldämpfer, Farbe pro Waffe, Taschenlampen-Knopf (client/ui/kit-ui.js) ---------- */
.gw-settings .gw-row.gw-kit-row{grid-template-columns:1fr;gap:5px;padding-top:6px;padding-bottom:6px}
.gw-kit-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.gw-kit-name{display:flex;align-items:center;gap:8px;margin-right:auto}
.gw-kit-k--colour{min-width:96px}
.gw-kit-icon{display:block;width:52px;height:16px;color:var(--gw-text)}
.gw-kit-icon svg{display:block;width:100%;height:100%;fill:currentColor}
.gw-kit-k{font:600 11px/1 var(--gw-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gw-dim)}
.gw-kit-sup button{min-width:40px;padding:0 8px}
.gw-kit-col{flex-wrap:nowrap}
.gw-kit-col button{min-width:24px;padding:0 4px}
.gw-kit-col button i{width:14px;height:14px}
.gw-kit-col button[aria-pressed=true] i{box-shadow:0 0 0 2px var(--gw-accent),0 0 0 3px rgba(0,0,0,.6)}
.gw-kit-note{flex-basis:100%;color:var(--gw-dim);font:500 12px/1.3 var(--gw-ui);letter-spacing:.02em}
.gw-kit--detail{display:grid;gap:8px;margin-top:4px;padding-top:10px;border-top:1px solid var(--gw-line)}
.gw-weapon-detail .icon svg{fill:var(--kit-tint,#f1ede6)}
@media (max-height:500px){.gw-kit-icon{width:52px;height:16px}.gw-kit-col button{min-width:22px;padding:0 3px}.gw-kit-col button i{width:13px;height:13px}.gw-kit-note{font-size:11px}.gw-settings .gw-row.gw-kit-row{gap:4px;padding-top:4px;padding-bottom:4px}}
/* left of the reload button (the column above «Springen» belongs to the ammo card on phones) */
#light-button{right:calc(var(--tc-fx) + var(--tc-fire) * 1.1 + var(--tc-btn) / 2 + var(--tc-gap));bottom:calc(var(--tc-fy) + var(--tc-fire) * 1.41 - var(--tc-btn) / 2 + 12px)}
#touch-controls #light-button[hidden]{display:none}
/* [2.4.5] sniper zoom button: same place as the flashlight button (never both: lamp = pistol, zoom = sniper scope) */
#zoom-button{right:calc(var(--tc-fx) + var(--tc-fire) * 1.1 + var(--tc-btn) / 2 + var(--tc-gap));bottom:calc(var(--tc-fy) + var(--tc-fire) * 1.41 - var(--tc-btn) / 2 + 12px);font:700 17px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;color:#fff;letter-spacing:.5px}
#touch-controls #zoom-button[hidden]{display:none}
/* ---------- [grenades] Flashbang und Rauchgranate (h37): Blendung, Rauch-Schleier, Anzeige PC, Touch-Knöpfe ---------- */
#smoke-veil,#flash-overlay{position:absolute;inset:0;z-index:1;pointer-events:none}
/* the colour of a dense cloud core on screen (measured: day ~#8a8d8f backlit … white front-lit; dusk ~#3e4354) */
#smoke-veil{background:#96999b;opacity:0}
#smoke-veil[data-time=abend]{background:#40455a}
#flash-overlay canvas,#flash-overlay i{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0}
#flash-white{background:#fffef6}
/* PC: «G ⚡ 1  T ☁ 1» über dem Waffennamen (am Handy zeigen die Knöpfe die Anzahl) */
body:not(.touch) .ammo-card{grid-template-areas:"nades nades" "name name" "icon count" "bar bar" "track track"}
.gw-nades{grid-area:nades;display:flex;gap:14px;justify-self:end;font:600 14px/1 var(--gw-ui);color:rgba(236,232,224,.92);text-shadow:0 1px 4px rgba(0,0,0,.7)}
.gw-nade{display:flex;align-items:center;gap:5px;transition:opacity .15s,color .15s}
.gw-nade kbd{padding:2px 4px;border:1px solid rgba(236,232,224,.38);border-radius:2px;font:600 10px/1 var(--gw-mono);color:rgba(236,232,224,.66)}
.gw-nade i{display:block;width:18px;height:18px}
.gw-nade svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.gw-nade b{min-width:8px;font-variant-numeric:tabular-nums}
.gw-nade.is-empty{opacity:.32}
.gw-nade.is-busy{color:var(--gw-accent-hi)}
body.touch #nade-hud{display:none}
/* Touch: zwei kleine Knöpfe über Nachladen (Flashbang) und über der Lampe (Rauch), je 10 px Abstand; Grösse und Deckkraft wie
   alle Knöpfe (--tc-size, --tc-alpha), Anzahl als Plakette unten rechts, leer = gedimmt */
:root{--tc-nade:40px}
@media (min-height:390px){:root{--tc-nade:44px}}
@media (min-height:560px){:root{--tc-nade:50px}}
#touch-controls .tc-nade{width:var(--tc-nade);height:var(--tc-nade)}
/* centres from the reload / lamp centres, half sizes × --tc-size (scale grows round the centre): 10 px visual gap at 85–120 % */
#flash-button{right:calc(var(--tc-fx) + var(--tc-fire) * 1.1 - var(--tc-nade) / 2);bottom:calc(var(--tc-fy) + var(--tc-fire) * 1.41 + 12px + (var(--tc-btn) + var(--tc-nade)) / 2 * var(--tc-size, 1) - var(--tc-nade) / 2)}
#smoke-button{right:calc(var(--tc-fx) + var(--tc-fire) * 1.1 + var(--tc-nade) * var(--tc-size, 1) + 12px - var(--tc-nade) / 2);bottom:calc(var(--tc-fy) + var(--tc-fire) * 1.41 + 22px + (var(--tc-btn) + var(--tc-nade)) / 2 * var(--tc-size, 1) - var(--tc-nade) / 2)}
#touch-controls .tc-nade svg{width:58%;height:58%;stroke-width:1.9}
.tc-nade-count{position:absolute;right:-4px;bottom:-4px;min-width:17px;height:17px;padding:0 3px;border-radius:9px;border:1px solid rgba(236,232,224,.55);background:rgba(10,11,13,.86);font:700 11px/15px var(--gw-ui);text-align:center;color:#fff;pointer-events:none}
body.touch #touch-controls .tc-nade.is-empty{opacity:.34}
body.touch #touch-controls .tc-nade.is-busy{border-color:var(--gw-accent);color:var(--gw-accent-hi)}
/* portrait (only after «Trotzdem spielen»): the joystick rests left of the cluster – smoke stacks above the flash button */
@media (orientation:portrait){#smoke-button{right:calc(var(--tc-fx) + var(--tc-fire) * 1.1 - var(--tc-nade) / 2);bottom:calc(var(--tc-fy) + var(--tc-fire) * 1.41 + 22px + (var(--tc-btn) / 2 + var(--tc-nade) * 1.5) * var(--tc-size, 1) - var(--tc-nade) / 2)}}