/* [loadout] Ausrüstung wählen (client/ui/loadout-pick.js): Countdown-Leiste unten Mitte, Lobby-Zeile, Pausenmenü.
   Tokens aus client/ui.css (--gw-*); Schriften Barlow Condensed / Permanent Marker. */
.lo{--lo-cut:9px;--lo-gun-h:34px;--lo-side-h:18px;color:var(--gw-text);font-family:var(--gw-ui)}
.lo-head{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 2px 7px}
.lo-label{font:600 11px/1 var(--gw-ui);letter-spacing:.32em;text-transform:uppercase;color:var(--gw-dim)}
.lo-count{font:700 12px/1 var(--gw-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gw-accent);font-variant-numeric:tabular-nums}
.lo-timer{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(236,232,224,.12);overflow:hidden}
.lo-timer>i{position:absolute;inset:0;transform-origin:left center;background:linear-gradient(90deg,var(--gw-accent),var(--gw-accent-hi));box-shadow:0 0 10px var(--gw-accent-glow)}
.lo-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Karte: abgeschrägte Ecken, Waffen als Silhouetten, Werte als kurze Zeile */
.lo-card{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:5px;min-width:0;min-height:44px;margin:0;padding:8px 11px 8px 12px;border:0;
  background:linear-gradient(180deg,rgba(24,25,29,.86),rgba(12,13,16,.9));color:var(--gw-text);text-align:left;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - var(--lo-cut)) 0,100% var(--lo-cut),100% 100%,var(--lo-cut) 100%,0 calc(100% - var(--lo-cut)));
  box-shadow:inset 0 0 0 1px var(--gw-line-2);transition:background .14s,box-shadow .14s,transform .14s cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.lo-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gw-line-2);transition:background .14s}
.lo-card:hover{box-shadow:inset 0 0 0 1px var(--gw-line-3)}
.lo-card:active{transform:scale(.985)}
.lo-card:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--gw-accent)}
.lo-card.is-on{background:linear-gradient(180deg,rgba(233,182,74,.2),rgba(32,26,14,.88) 70%);box-shadow:inset 0 0 0 1px var(--gw-accent),0 0 26px -6px var(--gw-accent-glow)}
.lo-card.is-on::before{background:var(--gw-accent);box-shadow:0 0 12px var(--gw-accent-glow)}
.lo-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.lo-card-title{overflow:hidden;font:400 17px/1 var(--gw-brush);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;transform:skewX(-6deg)}
.lo-card.is-on .lo-card-title{color:#fff}
.lo-card-tag{flex:none;font:700 10px/1 var(--gw-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gw-mute)}
.lo-card.is-on .lo-card-tag{color:var(--gw-accent)}
.lo-card.is-next .lo-card-tag{color:var(--gw-accent-hi)}
.lo-card-guns{display:flex;align-items:center;gap:9px;min-width:0}
.lo-gun{display:block;flex:none;font-style:normal;line-height:0;color:rgba(236,232,224,.62);transition:color .14s}
.lo-gun svg{display:block;height:100%;width:auto;fill:currentColor}
.lo-gun--main{height:var(--lo-gun-h);flex:1 1 auto;min-width:0;color:rgba(236,232,224,.82)}
.lo-gun--main svg{max-width:100%}
.lo-gun--side{height:var(--lo-side-h);opacity:.85}
.lo-card.is-on .lo-gun{color:var(--gw-text)}
.lo-card.is-on .lo-gun--main{color:#fff;filter:drop-shadow(0 0 6px rgba(233,182,74,.35))}
.lo-card-stats{display:flex;flex-wrap:nowrap;align-items:baseline;gap:4px 9px;min-width:0;overflow:hidden;white-space:nowrap;font:600 11px/1.1 var(--gw-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gw-dim)}
.lo-card-stats strong{color:var(--gw-text);font-weight:700;letter-spacing:.08em}
.lo-card-stats em{font-style:normal}
.lo-card-stats em::before{content:"·";margin-right:9px;color:var(--gw-mute)}

/* Countdown: eigene Ebene über #versus (z 6), unten Mitte. Kein backdrop-filter: über dem WebGL-Bild kostet Weichzeichnen
   auf Handys jedes Bild Leistung (Regel Nr. 1). */
#loadout-pick{position:fixed;z-index:7;left:50%;bottom:max(14px,calc(var(--gw-sab,env(safe-area-inset-bottom)) + 8px));width:min(640px,52vw);max-height:170px;padding:10px 12px 12px;
  transform:translateX(-50%);background:linear-gradient(180deg,rgba(10,11,14,.74),rgba(10,11,14,.86));box-shadow:inset 0 0 0 1px var(--gw-line),0 18px 50px rgba(0,0,0,.45);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
#loadout-pick[hidden]{display:none}
#loadout-pick.is-in{animation:lo-in .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes lo-in{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
#loadout-pick .lo-card{min-height:96px}
#loadout-pick{--lo-gun-h:42px;--lo-side-h:20px}

/* Lobby (vor «Bereit») und Pausenmenü: kompakte Karten – Titel, darunter Waffen und Name der Hauptwaffe */
.lo-inline{width:min(620px,100%);justify-self:center}
.lo-inline .lo-head{padding-bottom:5px}
.lo-inline .lo-card{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:4px;padding:7px 10px 7px 12px}
.lo-inline .lo-card-head{grid-column:1 / -1}
.lo-inline .lo-card-guns{grid-row:2;grid-column:1;--lo-gun-h:22px;--lo-side-h:13px;gap:6px}
.lo-inline .lo-gun--main{flex:none;width:auto}
.lo-inline .lo-card-stats{grid-row:2;grid-column:2;align-self:center;justify-content:flex-end}
.lo-inline .lo-card-stats strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lo-inline .lo-card-stats em{display:none}
.lo-inline--pause .lo-card-stats{display:none}
.lo-inline--pause{width:100%;margin:2px 0 4px}

/* Handy quer (874 x 402 / 874 x 338): Leiste höchstens ~118 px, beide Karten zusammen höchstens 56 % der Breite */
@media (max-height:500px){
  #loadout-pick{width:min(54vw,500px);max-height:118px;padding:6px 8px 8px;bottom:max(6px,calc(var(--gw-sab,env(safe-area-inset-bottom)) + 4px));--lo-gun-h:26px;--lo-side-h:14px}
  #loadout-pick .lo-head{padding:0 2px 5px}
  #loadout-pick .lo-card{min-height:74px;gap:3px;padding:6px 9px 6px 10px}
  .lo{--lo-cut:7px}
  .lo-label{font-size:9.5px;letter-spacing:.26em}
  .lo-count{font-size:10.5px}
  .lo-cards{gap:6px}
  .lo-card-title{font-size:14px}
  .lo-card-tag{font-size:8.5px;letter-spacing:.16em}
  .lo-card-stats{font-size:9.5px;letter-spacing:.08em;gap:3px 6px}
  .lo-card-stats em::before{margin-right:6px}
  .lo-inline .lo-head{display:none}
  .lo-inline .lo-card{padding:5px 8px 5px 10px;row-gap:2px}
  .lo-inline .lo-card-guns{--lo-gun-h:18px;--lo-side-h:11px}
  .lo-inline--lobby{width:min(520px,100%)}
}
@media (max-height:360px){
  /* iPhone mit Browserleisten (874 x 338): die Lobby braucht die Höhe für die Teamlisten; Wahl im Countdown und im Pausenmenü */
  #loadout-lobby{display:none}
  #loadout-pick{max-height:104px;--lo-gun-h:22px;--lo-side-h:12px}
  #loadout-pick .lo-card{min-height:64px}
  .lo-card-stats em:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){#loadout-pick.is-in{animation:none}.lo-card{transition:none}}

/* ---------- [waffenschmiede] Ausrüstung → Waffen (client/ui/gunsmith.js) und echte Waffenbilder (client/ui/weapon-art.js) ----------
   Liste → grosse Vorschau mit den Anbauplätzen → Optionen des Platzes → Werte. Drei Anordnungen: breit (Container ≥ 720 px),
   kompakt (schmale Fenster: Werte als Kacheln unter den Optionen), Handy quer (Höhe ≤ 500 px: Werte rechts neben der Vorschau). */
/* Bild: Waffe + Schalldämpfer im selben Ausschnitt genau darüber; ohne Schalldämpfer steht die Waffe in der Mitte */
.wa{position:relative;display:block;flex:none;aspect-ratio:var(--wa-ar,10/3);line-height:0}
.wa img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:translateX(calc(var(--wa-dx,0) * 100%));transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.wa .wa-sup.is-off{opacity:0}
/* Countdown / Lobby / Pause (loadout-pick.js): Bilder statt Silhouetten,Höhe wie bisher */
.lo-gun.wa{flex:0 1 auto;min-width:0;width:auto;height:var(--lo-gun-h);color:inherit}   /* shrinks (picture fits inside), never overflows the card */
.lo-gun--side.wa{opacity:1}
.lo-gun--side.wa[data-weapon="pistol"]{height:calc(var(--lo-gun-h) * .66)}
.lo-gun--side.wa[data-weapon="knife"]{height:calc(var(--lo-gun-h) * .36)}
.lo-gun--main.wa{flex:0 1 auto;max-width:none}
.lo-gun.wa img{filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
.lo-card:not(.is-on) .lo-gun.wa img{filter:saturate(.7) brightness(.82) drop-shadow(0 3px 5px rgba(0,0,0,.55))}
.lo-card.is-on .lo-gun--main.wa{filter:drop-shadow(0 0 8px rgba(233,182,74,.25))}
/* Einstellungen → Waffen: kleines Bild in der Zeile */
.gw-kit-name .gw-kit-icon.wa{width:auto;height:22px}

/* ---------- [menu] Waffenschmiede (h40): Werkbank mit Raster, Anbaupunkte am Bild, Leiste mit Symbolen, Werte rechts ----------
   Breit (Container ≥ 720 px): Liste | Werkbank + Leiste + Optionen | Werte. Kompakt (< 720 px): Werte unter den Optionen.
   Handy quer (Höhe ≤ 500 px): Liste | Werkbank + Optionen | Werte. */
.gw-main.is-loadout .gw-info-card{display:none}
.gw-loadout{container:gunsmith/inline-size;min-height:0}
.gw-loadout-grid{display:grid;grid-template-columns:minmax(156px,214px) minmax(0,1fr);gap:clamp(10px,1.1vw,18px);align-items:start;min-height:0}
/* Liste */
#weapon-list.gw-weapon-list{display:flex;flex-direction:column;gap:6px;min-width:0}
#weapon-list .gs-item{--cut:9px;position:relative;display:grid;gap:6px;width:100%;min-height:44px;margin:0;padding:9px 11px 10px 13px;border:0;color:var(--gw-dim);text-align:left;cursor:pointer;
  background:linear-gradient(180deg,rgba(24,25,29,.86),rgba(12,13,16,.92));box-shadow:inset 0 0 0 1px var(--mn-line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  transition:background .14s,box-shadow .14s,color .14s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#weapon-list .gs-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background .14s}
#weapon-list .gs-item:hover{box-shadow:inset 0 0 0 1px var(--mn-line-2);color:var(--gw-text)}
#weapon-list .gs-item[aria-selected=true]{background:linear-gradient(180deg,rgba(233,182,74,.2),rgba(30,25,14,.92) 80%);box-shadow:inset 0 0 0 1px rgba(233,182,74,.75);color:var(--gw-text)}
#weapon-list .gs-item[aria-selected=true]::before{background:var(--gw-accent);box-shadow:0 0 12px var(--gw-accent-glow)}
#weapon-list .gs-item:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--gw-accent)}
#weapon-list .gs-item-pic{display:grid;place-items:center;height:46px;container-type:size}
#weapon-list .gs-item-pic .wa{width:min(100cqw,calc(100cqh * var(--wa-arn,3.3)))}
#weapon-list .gs-item .wa img{filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
#weapon-list .gs-item:not([aria-selected=true]) .wa img{filter:saturate(.75) brightness(.9) drop-shadow(0 4px 6px rgba(0,0,0,.6))}
#weapon-list .gs-item-text{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
#weapon-list .gs-item b{flex:none;font:700 15px/1 var(--gw-ui);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
#weapon-list .gs-item small{min-width:0;overflow:hidden;font:600 11px/1 var(--gw-ui);letter-spacing:.04em;color:rgba(236,232,224,.46);white-space:nowrap;text-overflow:ellipsis}
#weapon-list .gs-item small.is-kit{color:var(--gw-accent)}
/* Detail */
#weapon-detail.gw-weapon-detail{display:grid;grid-template-columns:minmax(0,1fr) clamp(236px,22vw,340px);grid-template-areas:"head head" "stage stats" "stage text" "mods text";grid-template-rows:auto auto auto minmax(0,1fr);
  gap:12px clamp(14px,1.6vw,26px);align-content:start;min-width:0;padding:0;border:0;background:none}
#weapon-detail .gs-head{grid-area:head;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;min-width:0}
#weapon-detail .gs-title{display:flex;align-items:baseline;gap:14px;min-width:0}
#weapon-detail .gs-title h3{margin:0;overflow:hidden;font:700 clamp(28px,2.6vw,46px)/.9 var(--gw-ui);letter-spacing:.04em;text-transform:uppercase;color:#fff;white-space:nowrap;text-overflow:ellipsis}
#weapon-detail .gs-title small{display:block;color:var(--gw-accent);font:600 clamp(12px,.9vw,15px)/1 var(--gw-ui);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
#weapon-detail .gs-build{flex:0 1 auto;min-width:0;overflow:hidden;padding:6px 10px;border:0;box-shadow:inset 0 0 0 1px rgba(233,182,74,.42);background:rgba(233,182,74,.07);color:var(--gw-accent);font:600 12px/1 var(--gw-ui);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}
/* Werkbank: dunkle Platte mit Raster, Licht von oben, Kennung der Waffe als Schablone, Massstab unter der Waffe */
#weapon-detail .gs-stage{grid-area:stage;position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;overflow:hidden;container:gsstage/inline-size;
  background:radial-gradient(56% 72% at 50% 36%,rgba(233,182,74,.13),rgba(233,182,74,0) 72%),
    linear-gradient(rgba(236,232,224,.075) 1px,transparent 1px) 0 0/100% 25%,linear-gradient(90deg,rgba(236,232,224,.075) 1px,transparent 1px) 0 0/12.5% 100%,
    linear-gradient(rgba(236,232,224,.03) 1px,transparent 1px) 0 0/100% 5%,linear-gradient(90deg,rgba(236,232,224,.03) 1px,transparent 1px) 0 0/2.5% 100%,#0a0c0f;
  box-shadow:inset 0 0 0 1px var(--mn-line),inset 0 -70px 90px -50px rgba(0,0,0,.75)}
#weapon-detail .gs-stage::before{content:"";position:absolute;inset:8px;z-index:1;pointer-events:none;background:linear-gradient(var(--gw-accent),var(--gw-accent)) top left/16px 2px,linear-gradient(var(--gw-accent),var(--gw-accent)) top left/2px 16px,linear-gradient(var(--gw-accent),var(--gw-accent)) top right/16px 2px,linear-gradient(var(--gw-accent),var(--gw-accent)) top right/2px 16px;background-repeat:no-repeat;opacity:.8}
#weapon-detail .gs-stage-pic{position:relative;display:grid;place-items:center;height:clamp(140px,34vh,470px);container-type:size}
#weapon-detail .gs-code{position:absolute;left:3.5%;bottom:-6%;font:700 64cqh/1 var(--gw-ui);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px rgba(236,232,224,.1);pointer-events:none;user-select:none}
#weapon-detail .gs-ruler{position:absolute;left:9%;right:9%;bottom:8%;height:9px;opacity:.5;pointer-events:none;
  background:linear-gradient(rgba(236,232,224,.45),rgba(236,232,224,.45)) 0 100%/100% 1px no-repeat,repeating-linear-gradient(90deg,rgba(236,232,224,.5) 0 1px,transparent 1px 10%) 0 0/100% 100% no-repeat,repeating-linear-gradient(90deg,rgba(236,232,224,.3) 0 1px,transparent 1px 2%) 0 100%/100% 45% no-repeat}
#weapon-detail .gs-art{position:relative;z-index:1;display:block;width:min(90cqw,calc(78cqh * var(--gs-arn,3.3)));aspect-ratio:var(--gs-arn,3.3)}
#weapon-detail .gs-art .wa{position:absolute;inset:0;width:100%;height:100%}
#weapon-detail .gs-art .wa img{filter:drop-shadow(0 16px 18px rgba(0,0,0,.7))}
#weapon-detail .gs-art.is-enter{animation:gs-enter .42s cubic-bezier(.2,.8,.2,1)}
@keyframes gs-enter{from{opacity:0;transform:translateX(6%)}to{opacity:1;transform:none}}
#weapon-detail .gs-art.is-paint::after{content:"";position:absolute;inset:-12% -4%;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(255,236,196,.3) 50%,transparent 65%);animation:gs-paint .7s ease-out both}
@keyframes gs-paint{from{transform:translateX(-70%)}to{transform:translateX(70%);opacity:0}}
/* Anbaupunkte: Ring am Bild, Name darüber; der gewählte Platz leuchtet */
#weapon-detail .gs-point{position:absolute;z-index:3;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;background:none;cursor:pointer;transition:left .3s cubic-bezier(.2,.8,.2,1)}
#weapon-detail .gs-point i{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;box-shadow:0 0 0 2px rgba(236,232,224,.75),0 0 0 4px rgba(0,0,0,.35);background:rgba(10,12,15,.6);transition:background .15s,box-shadow .15s}
#weapon-detail .gs-point span{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);padding:3px 6px 2px;background:rgba(10,12,15,.82);font:700 10px/1 var(--gw-ui);letter-spacing:.1em;text-transform:uppercase;color:rgba(236,232,224,.75);white-space:nowrap;pointer-events:none}
#weapon-detail .gs-point span::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:8px;background:rgba(236,232,224,.45)}
#weapon-detail .gs-point.is-on i{background:var(--gw-accent);box-shadow:0 0 0 2px #fff3d6,0 0 0 5px rgba(233,182,74,.35),0 0 18px var(--gw-accent)}
#weapon-detail .gs-point.is-on span{background:var(--gw-accent);color:var(--gw-accent-ink)}
#weapon-detail .gs-point.is-on span::after{background:var(--gw-accent)}
#weapon-detail .gs-point:hover i{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(0,0,0,.35)}
/* Leiste der Anbauplätze */
#weapon-detail .gs-slots{position:relative;z-index:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;border-top:1px solid var(--mn-line);background:var(--mn-line)}
#weapon-detail .gs-slot{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:11px;row-gap:5px;min-width:0;min-height:52px;margin:0;padding:8px 14px;border:0;background:rgba(9,10,12,.94);color:var(--gw-text);text-align:left;cursor:pointer;transition:background .14s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#weapon-detail .gs-slot-icon{grid-row:1/3;display:block;width:24px;height:24px;color:rgba(236,232,224,.6)}
#weapon-detail .gs-slot-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#weapon-detail .gs-slot small{font:600 11px/1 var(--gw-ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(236,232,224,.5);white-space:nowrap}
#weapon-detail .gs-slot b{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;font:700 15px/1 var(--gw-ui);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}
#weapon-detail .gs-slot:hover{background:rgba(22,23,27,.96)}
#weapon-detail .gs-slot[aria-selected=true]{background:linear-gradient(180deg,rgba(233,182,74,.18),rgba(233,182,74,.05));box-shadow:inset 0 -3px 0 var(--gw-accent)}
#weapon-detail .gs-slot[aria-selected=true] small,#weapon-detail .gs-slot[aria-selected=true] .gs-slot-icon{color:var(--gw-accent)}
#weapon-detail .gs-slot:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--gw-accent)}
#weapon-detail .gs-slot.is-empty{grid-template-columns:minmax(0,1fr);cursor:default;color:var(--gw-dim)}
#weapon-detail .gs-swatch{flex:none;width:13px;height:13px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px rgba(0,0,0,.55)}
#weapon-detail .gs-text{grid-area:text;align-self:start;margin:0;color:var(--mn-dust);font:500 14px/1.45 var(--gw-ui);letter-spacing:.01em}
/* Optionen des gewählten Platzes */
#weapon-detail .gs-mods{grid-area:mods;display:grid;gap:8px;align-content:start;min-width:0;container:gsmods/inline-size}
#weapon-detail .gs-mods.is-new{animation:mn-cut .22s cubic-bezier(.2,.8,.2,1)}
#weapon-detail .gs-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#weapon-detail .gs-opts--one{grid-template-columns:minmax(0,1fr)}
#weapon-detail .gs-opt{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 14px;align-items:center;gap:12px;min-width:0;min-height:56px;margin:0;padding:8px 12px;border:0;
  background:rgba(14,15,18,.82);box-shadow:inset 0 0 0 1px var(--mn-line-2);color:var(--gw-dim);text-align:left;cursor:pointer;transition:background .14s,box-shadow .14s,color .14s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#weapon-detail .gs-opt:hover{box-shadow:inset 0 0 0 1px rgba(236,232,224,.45);color:var(--gw-text)}
#weapon-detail .gs-opt-icon{display:block;line-height:0}
#weapon-detail .gs-opt-icon svg{display:block;width:44px;height:15px;fill:currentColor}
#weapon-detail .gs-opt-text{display:grid;gap:5px;min-width:0}
#weapon-detail .gs-opt b{overflow:hidden;font:700 16px/1 var(--gw-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--gw-text);white-space:nowrap;text-overflow:ellipsis}
#weapon-detail .gs-opt small{font:500 13px/1.15 var(--gw-ui);letter-spacing:.01em;color:var(--mn-dust)}
#weapon-detail .gs-opt-check{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(236,232,224,.4)}
#weapon-detail .gs-opt[aria-checked=true]{background:linear-gradient(90deg,rgba(233,182,74,.16),rgba(20,18,13,.86));box-shadow:inset 0 0 0 1px var(--gw-accent);color:var(--gw-accent)}
#weapon-detail .gs-opt[aria-checked=true] .gs-opt-check{background:var(--gw-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 0 0 3px rgba(233,182,74,.2)}
#weapon-detail .gs-opt.is-fixed{cursor:default}
#weapon-detail .gs-opt:focus-visible,#weapon-detail .gs-camo-tile:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--gw-accent)}
#weapon-detail .gs-hint{margin:0;color:var(--mn-dust);font:500 13px/1.4 var(--gw-ui);letter-spacing:.01em}
#weapon-detail .gs-hint kbd{display:inline-block;min-width:18px;padding:2px 5px;box-shadow:inset 0 0 0 1px var(--mn-line-2);color:var(--gw-text);font:700 12px/1 var(--gw-ui);text-align:center}
/* Tarnung: grosse Farbfelder, Name darunter, gewählt mit Amber-Rahmen und Haken */
#weapon-detail .gs-camo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
@container gsmods (min-width:470px){#weapon-detail .gs-camo{grid-template-columns:repeat(9,minmax(0,1fr))}}
#weapon-detail .gs-camo-tile{position:relative;display:grid;justify-items:center;align-content:center;gap:7px;min-width:0;min-height:58px;margin:0;padding:8px 2px 7px;border:0;background:rgba(14,15,18,.82);box-shadow:inset 0 0 0 1px var(--mn-line);color:var(--mn-dust);cursor:pointer;transition:background .14s,box-shadow .14s,color .14s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#weapon-detail .gs-camo-tile i{display:block;width:30px;height:30px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px rgba(0,0,0,.6)}
#weapon-detail .gs-camo-tile small{max-width:100%;overflow:hidden;font:700 11px/1 var(--gw-ui);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}
#weapon-detail .gs-camo-tile:hover{box-shadow:inset 0 0 0 1px rgba(236,232,224,.45);color:var(--gw-text)}
#weapon-detail .gs-camo-tile[aria-checked=true]{background:rgba(233,182,74,.12);box-shadow:inset 0 0 0 1px var(--gw-accent);color:var(--gw-accent)}
#weapon-detail .gs-camo-tile[aria-checked=true] i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 0 2px #0a0c0f,0 0 0 4px var(--gw-accent)}
#weapon-detail .gs-camo-tile[aria-checked=true]::after{content:"";position:absolute;top:4px;right:4px;width:13px;height:13px;border-radius:50%;background:var(--gw-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center/72% no-repeat}
#weapon-detail .gs-none{display:grid;gap:8px;padding:16px 16px 17px;border:0;box-shadow:inset 0 0 0 1px var(--mn-line);background:rgba(14,15,18,.7)}
#weapon-detail .gs-none b{font:700 18px/1 var(--gw-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--gw-text)}
#weapon-detail .gs-none small{color:var(--mn-dust);font:500 14px/1.4 var(--gw-ui);letter-spacing:.01em}
/* Werte: echte Spielzahlen, Balken in Zehnteln, die Wirkung des Anbauteils grün (der weggefallene Teil schraffiert) */
#weapon-detail .gs-stats{grid-area:stats;align-self:start;display:grid;gap:13px;align-content:start;min-width:0;padding:14px 16px 16px;border:0;background:rgba(14,15,18,.82);box-shadow:inset 0 0 0 1px var(--mn-line)}
#weapon-detail .gs-stat{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;row-gap:7px;column-gap:10px;min-height:0;font:700 12px/1 var(--gw-ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(236,232,224,.62)}
#weapon-detail .gs-stat-k{white-space:nowrap}
#weapon-detail .gs-stat-v{min-width:0;color:var(--gw-text);font:700 15px/1 var(--gw-ui);letter-spacing:.03em;text-align:right;text-transform:none;font-variant-numeric:tabular-nums;white-space:nowrap}
#weapon-detail .gs-stat-v em{margin-left:6px;font-style:normal;color:#8fe39a}
#weapon-detail .gs-stat-n{grid-column:1/-1;margin-top:-2px;font:600 11px/1.25 var(--gw-ui);letter-spacing:.02em;text-transform:none;color:rgba(236,232,224,.5)}
#weapon-detail .gs-bar{grid-row:2;grid-column:1/-1;position:relative;display:block;height:6px;min-width:0;background:rgba(236,232,224,.1);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%)}
#weapon-detail .gs-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%);background:var(--gw-text);transition:width .3s cubic-bezier(.2,.8,.2,1)}
#weapon-detail .gs-bar em{position:absolute;top:0;bottom:0;left:calc(var(--v) * 100%);width:calc((var(--b) - var(--v)) * 100%);background:repeating-linear-gradient(135deg,rgba(143,227,154,.7) 0 2px,rgba(143,227,154,.18) 2px 5px)}
#weapon-detail .gs-stat.is-better .gs-bar i{background:#8fe39a}
#weapon-detail .gs-flag{grid-column:2;color:var(--gw-text);font:700 13px/1 var(--gw-ui);letter-spacing:.04em;text-transform:none;white-space:nowrap;text-align:right}
#weapon-detail .gs-stat.is-better .gs-flag{color:#8fe39a}
@media (min-height:900px){#weapon-list .gs-item-pic{height:62px}#weapon-list .gs-item{padding:11px 12px 12px 14px}}
@media (max-height:760px){#weapon-list .gs-item-pic{height:34px}#weapon-list .gs-item{gap:5px;padding:7px 10px 8px 12px}}
@media (max-height:820px){#weapon-detail .gs-text{display:none}#weapon-detail.gw-weapon-detail{grid-template-areas:"head head" "stage stats" "mods stats";grid-template-rows:auto auto minmax(0,1fr)}}
/* kompakt: schmale Fenster (Panel < 720 px breit, z. B. 908 x 571): Liste nur Bild + Name, Werte als Kacheln unter den Optionen */
@container gunsmith (max-width:719px){
  .gw-loadout-grid{grid-template-columns:100px minmax(0,1fr);gap:10px}
  #weapon-list.gw-weapon-list{gap:5px}
  #weapon-list .gs-item{gap:4px;padding:6px 6px 7px 9px}
  #weapon-list .gs-item-pic{height:30px}
  #weapon-list .gs-item b{font-size:12px;letter-spacing:.06em}
  #weapon-list .gs-item small{display:none}
  #weapon-detail.gw-weapon-detail{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "mods" "stats";grid-template-rows:none;gap:8px}
  #weapon-detail .gs-title h3{font-size:23px}
  #weapon-detail .gs-title small{font-size:11px}
  #weapon-detail .gs-build{display:none}
  #weapon-detail .gs-text{display:none}
  #weapon-detail .gs-stage-pic{height:clamp(76px,15vh,160px)}
  #weapon-detail .gs-point span{display:none}
  #weapon-detail .gs-slot{min-height:46px;padding:6px 10px;column-gap:8px;row-gap:4px}
  #weapon-detail .gs-slot-icon{width:20px;height:20px}
  #weapon-detail .gs-slot b{font-size:13px;letter-spacing:.03em}
  #weapon-detail .gs-opt{min-height:46px;grid-template-columns:32px minmax(0,1fr) 12px;gap:8px;padding:6px 9px}
  #weapon-detail .gs-opt-icon svg{width:32px;height:11px}
  #weapon-detail .gs-opt b{font-size:13px}
  #weapon-detail .gs-opt small{font-size:11.5px}
  #weapon-detail .gs-hint{font-size:12px}
  #weapon-detail .gs-camo-tile{min-height:46px;gap:4px;padding:5px 2px}
  #weapon-detail .gs-camo-tile i{width:22px;height:22px}
  #weapon-detail .gs-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 16px;padding:9px 11px}
  #weapon-detail .gs-stat{font-size:10.5px;letter-spacing:.06em;row-gap:5px}
  #weapon-detail .gs-stat .gs-bar{height:4px}
  #weapon-detail .gs-stat-v{font-size:12px}
  #weapon-detail .gs-flag{font-size:11px}
}
/* Handy quer (und sehr niedrige Fenster): Werte rechts neben Werkbank und Optionen, grosse Tipp-Flächen, kurze Texte */
@media (max-height:500px){
  .gw-main.is-wide .gw-panel-title,.gw-main[data-tab=crew] .gw-panel-title{display:none}
  .gw-loadout-grid{grid-template-columns:88px minmax(0,1fr);gap:8px}
  #weapon-list.gw-weapon-list{gap:4px}
  #weapon-list .gs-item{--cut:6px;min-height:44px;gap:3px;padding:5px 5px 6px 8px}
  #weapon-list .gs-item-pic{height:24px}
  #weapon-list .gs-item b{font-size:11px;letter-spacing:.05em}
  #weapon-list .gs-item small{display:none}
  #weapon-detail.gw-weapon-detail{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);grid-template-areas:"head head" "stage stats" "mods stats";grid-template-rows:auto auto minmax(0,1fr);gap:6px 12px}
  #weapon-detail .gs-title{gap:10px}
  #weapon-detail .gs-title h3{font-size:19px}
  #weapon-detail .gs-title small{font-size:10px;letter-spacing:.06em}
  #weapon-detail .gs-build{display:block;padding:4px 7px;font-size:10px;letter-spacing:.06em}
  #weapon-detail .gs-text{display:none}
  #weapon-detail .gs-stage-pic{height:clamp(66px,24vh,124px)}
  #weapon-detail .gs-stage::before{inset:5px;background-size:10px 2px,2px 10px,10px 2px,2px 10px}
  #weapon-detail .gs-point{width:22px;height:22px;margin:-11px 0 0 -11px}
  #weapon-detail .gs-point i{width:9px;height:9px;margin:-4.5px 0 0 -4.5px}
  #weapon-detail .gs-point span{display:none}
  #weapon-detail .gs-slot{min-height:42px;padding:5px 8px;column-gap:6px;row-gap:3px}
  #weapon-detail .gs-slot-icon{width:17px;height:17px}
  #weapon-detail .gs-slot small{font-size:9px;letter-spacing:.06em}
  #weapon-detail .gs-slot b{gap:5px;font-size:11.5px;letter-spacing:.02em}
  #weapon-detail .gs-swatch{width:10px;height:10px}
  #weapon-detail .gs-mods{gap:5px}
  #weapon-detail .gs-opts{gap:5px}
  #weapon-detail .gs-opt{min-height:44px;grid-template-columns:26px minmax(0,1fr) 11px;gap:6px;padding:5px 7px}
  #weapon-detail .gs-opt-icon svg{width:26px;height:9px}
  #weapon-detail .gs-opt b{font-size:12px;letter-spacing:.03em}
  #weapon-detail .gs-opt small{font-size:10.5px;line-height:1.1}
  #weapon-detail .gs-opt-check{width:11px;height:11px}
  #weapon-detail .gs-hint{display:none}
  #weapon-detail .gs-hint--key{display:block;font-size:10.5px;line-height:1.3}
  #weapon-detail .gs-camo{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  #weapon-detail .gs-camo-tile{min-height:41px;gap:3px;padding:4px 1px}
  #weapon-detail .gs-camo-tile i{width:18px;height:18px}
  #weapon-detail .gs-camo-tile small{font-size:9px;letter-spacing:.02em}
  #weapon-detail .gs-camo-tile[aria-checked=true]::after{width:10px;height:10px;top:3px;right:3px}
  #weapon-detail .gs-none{padding:9px 10px;gap:5px}
  #weapon-detail .gs-none b{font-size:14px}
  #weapon-detail .gs-none small{font-size:11px}
  #weapon-detail .gs-stats{grid-template-columns:minmax(0,1fr);gap:8px;padding:8px 10px 9px}
  #weapon-detail .gs-stat{font-size:9.5px;letter-spacing:.05em;row-gap:4px}
  #weapon-detail .gs-stat .gs-bar{height:4px}
  #weapon-detail .gs-stat-v{font-size:11.5px}
  #weapon-detail .gs-stat-v em{margin-left:4px}
  #weapon-detail .gs-flag{font-size:10.5px}
  .gw-kit-name .gw-kit-icon.wa{height:16px}
}
/* schmale Werkbank (< 560 px, z. B. drei Plätze der Pistole bei 908 px): die Leiste ohne Symbole, damit die Namen ganz bleiben */
@container gsstage (max-width:559px){
  #weapon-detail .gs-slot{grid-template-columns:minmax(0,1fr);padding:6px 10px}
  #weapon-detail .gs-slot-icon{display:none}
  #weapon-detail .gs-slot b{font-size:13px;letter-spacing:.02em}
}
/* schmale Optionen (Platz < 460 px): ohne Symbol, Name + Haken oben, Wirkung darunter */
@container gsmods (max-width:459px){
  #weapon-detail .gs-mods .gs-opt{grid-template-columns:minmax(0,1fr) 12px;align-items:start}
  #weapon-detail .gs-mods .gs-opt-icon{display:none}
  #weapon-detail .gs-mods .gs-opt-check{margin-top:1px}
  #weapon-detail .gs-mods .gs-opt b{font-size:13px;letter-spacing:.03em}
}
/* niedrige Fenster: der Satz unter den Mündungs-Optionen fällt weg (die Kacheln nennen die Wirkung), die Lampen-Taste bleibt */
@media (max-height:640px){#weapon-detail .gs-hint{display:none}#weapon-detail .gs-hint.gs-hint--key{display:block}.gw-main.is-wide .gw-main-panel{padding-top:8px}}
@media (prefers-reduced-motion:reduce){.wa img,.gs-bar i{transition:none}#weapon-detail .gs-art.is-enter,#weapon-detail .gs-mods.is-new{animation:none}#weapon-detail .gs-art.is-paint::after{display:none}}

/* =====================================================================================================================
   [menu] HOOD WARS – Startbildschirm und Hauptmenü (h40). Die Figur steht live in der Strasse (client/menu-stage.js),
   das UI liegt flach darüber: Laternen-Amber als einzige UI-Farbe, Blau / Rot nur für Block A / Block B, harte Kanten.
   Keine Weichzeichner über dem 3D-Bild (Handy: kostet jedes Bild), Bewegung nur als Antwort oder als ein Auftritt.
   ===================================================================================================================== */
:root{--mn-gx:clamp(18px,3.2vw,64px);--mn-bar:clamp(54px,7.4vh,76px);--mn-panel:clamp(330px,32vw,560px);
  --mn-ink:7,8,10;--mn-line:rgba(236,232,224,.13);--mn-line-2:rgba(236,232,224,.26);--mn-dust:#a39e95}
.gw-video{transition:opacity .7s ease}
.gw-video.is-out{opacity:0}

/* ---------- Startbildschirm ---------- */
.gw-title{z-index:6;display:grid;place-items:center;padding:max(18px,var(--gw-sat,env(safe-area-inset-top))) max(var(--mn-gx),var(--gw-sar,env(safe-area-inset-right))) max(18px,var(--gw-sab,env(safe-area-inset-bottom))) max(var(--mn-gx),var(--gw-sal,env(safe-area-inset-left)));overflow:hidden;cursor:pointer;
  background:radial-gradient(ellipse 42% 52% at 76% 26%,rgba(var(--mn-ink),.58),rgba(var(--mn-ink),0) 72%),linear-gradient(0deg,rgba(var(--mn-ink),.86) 0%,rgba(var(--mn-ink),0) 30%),linear-gradient(180deg,rgba(var(--mn-ink),.42) 0%,rgba(var(--mn-ink),0) 20%)}
/* the screen opens from black, once */
.gw-title::after{content:"";position:absolute;inset:0;z-index:3;background:#000;pointer-events:none;animation:tt-open .9s .05s ease-out both}
@keyframes tt-open{to{opacity:0;visibility:hidden}}
/* Block A / Block B: cold blue from the left, red from the right, breathing slowly (no flashing) */
.tt-light{position:absolute;top:-10%;bottom:-10%;width:46%;pointer-events:none;opacity:.55;animation:tt-breathe 7s ease-in-out infinite;will-change:opacity}
.tt-light--a{left:-14%;background:radial-gradient(ellipse 50% 60% at 30% 58%,rgba(47,98,255,.3),rgba(47,98,255,0) 70%)}
.tt-light--b{right:-14%;background:radial-gradient(ellipse 50% 60% at 70% 52%,rgba(226,38,60,.26),rgba(226,38,60,0) 70%);animation-delay:-3.5s}
@keyframes tt-breathe{0%,100%{opacity:.4}50%{opacity:.72}}
.gw-title .gw-title-center{position:absolute;z-index:2;top:max(8vh,var(--gw-sat,env(safe-area-inset-top)));bottom:max(7vh,var(--gw-sab,env(safe-area-inset-bottom)));right:max(calc(var(--mn-gx) + 1vw),var(--gw-sar,env(safe-area-inset-right)));
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;justify-items:center;align-items:start;gap:clamp(10px,2vh,20px);margin:0;animation:none;text-align:center}
.tt-logo{position:relative;display:grid;justify-items:start;margin:0;font:400 clamp(80px,12.8vw,244px)/.8 var(--gw-brush);color:#f4f1ea;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.tt-word{position:relative;display:block;transform:skewX(-7deg);animation:tt-slam .62s cubic-bezier(.2,.9,.25,1.08) both}
.tt-word--a{animation-delay:.32s}
.tt-word--b{margin:-.04em 0 0 .42em;animation-delay:.46s}
/* cracked letters: two halves, the lower one shifted; Block A blue and Block B red bleed out of the edges */
.tt-word>span{display:block;clip-path:inset(0 0 52% 0);text-shadow:-.028em 0 rgba(47,98,255,.78),.028em 0 rgba(226,38,60,.78),0 .06em .5em rgba(0,0,0,.55)}
.tt-word>span+span{position:absolute;inset:0;clip-path:inset(48% 0 0 0);transform:translateX(.045em);animation:tt-twitch 7.5s 3.2s infinite}
/* idle: now and then the lower half of the letters slips along the crack (a jolt, no flash) */
@keyframes tt-twitch{0%,92%,100%{transform:translateX(.045em)}93%{transform:translateX(.12em)}94.5%{transform:translateX(-.025em)}96%{transform:translateX(.08em)}97.5%{transform:translateX(.045em)}}
.tt-word--b>span+span{animation-delay:3.35s}
.tt-crack{position:absolute;left:-7%;right:-9%;top:51%;height:2px;background:linear-gradient(90deg,transparent,rgba(244,241,234,.95) 14%,#fff 50%,rgba(244,241,234,.95) 86%,transparent);transform:rotate(-1.4deg) scaleX(0);transform-origin:18% 50%;box-shadow:0 0 18px rgba(255,236,200,.55);animation:tt-crack .5s .86s cubic-bezier(.3,.9,.2,1) both}
@keyframes tt-slam{0%{opacity:0;transform:skewX(-7deg) scale(1.6) translateY(-6%)}45%{opacity:1}80%{transform:skewX(-7deg) scale(.985)}100%{opacity:1;transform:skewX(-7deg) scale(1)}}   /* no blur: phones load the 3D scene meanwhile */
@keyframes tt-crack{to{transform:rotate(-1.4deg) scaleX(1)}}
.tt-logo{animation:tt-shake .3s .82s linear both}
@keyframes tt-shake{0%,100%{translate:0 0}20%{translate:-4px 2px}40%{translate:3px -2px}60%{translate:-2px 1px}80%{translate:1px 0}}
.gw-title .gw-title-sub{display:flex;align-items:center;gap:16px;margin:clamp(2px,1vh,10px) 0 0;padding:0;font:600 clamp(13px,1.15vw,19px)/1 var(--gw-ui);letter-spacing:.38em;text-transform:uppercase;color:#f4f1ea;animation:tt-wipe .7s 1.05s cubic-bezier(.2,.8,.2,1) both}
.gw-title .gw-title-sub span{padding-left:.38em}
.gw-title .gw-title-sub::before,.gw-title .gw-title-sub::after{content:"";width:clamp(26px,4vw,72px);height:2px;background:var(--gw-accent);box-shadow:0 0 12px var(--gw-accent-glow)}
@keyframes tt-wipe{from{clip-path:inset(0 50% 0 50%);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}
/* call to action: a lit bar, the key hint underneath */
.gw-title .gw-press{grid-row:4;display:grid;justify-items:center;gap:8px;margin:0;padding:0;background:none;letter-spacing:0;animation:tt-rise .6s 1.35s cubic-bezier(.2,.8,.2,1) both}
.tt-cta{position:relative;display:block;min-width:clamp(220px,19vw,330px);padding:clamp(13px,1.8vh,19px) 34px;overflow:hidden;background:rgba(var(--mn-ink),.74);box-shadow:inset 0 0 0 1px rgba(233,182,74,.55),0 0 34px -12px var(--gw-accent-glow);
  font:700 clamp(18px,1.6vw,26px)/1 var(--gw-ui);letter-spacing:.3em;padding-left:calc(34px + .3em);text-transform:uppercase;color:#fff;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.tt-cta::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--gw-accent);box-shadow:0 0 14px var(--gw-accent)}
.tt-cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,226,160,.22),transparent);transform:translateX(-120%);animation:tt-sweep 3.4s 2.2s ease-in-out infinite}
@keyframes tt-sweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(400%)}}
.gw-title .gw-press:hover .tt-cta,.gw-title .gw-press:focus-visible .tt-cta{background:rgba(233,182,74,.2);box-shadow:inset 0 0 0 1px var(--gw-accent-hi),0 0 40px -8px var(--gw-accent-glow)}
.tt-key{font:600 12px/1 var(--gw-ui);letter-spacing:.2em;text-transform:uppercase;color:rgba(236,232,224,.66)}
.tt-key--touch,.gw-title.is-touch .tt-key--pc{display:none}
.gw-title.is-touch .tt-key--touch{display:block}
@keyframes tt-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.gw-title .gw-title-loading{grid-row:5;min-height:14px;margin:0;font:600 11px/1 var(--gw-ui);letter-spacing:.18em;text-transform:uppercase;color:rgba(236,232,224,.5);animation:tt-rise .6s 1.5s both}
.gw-title .gw-title-loading::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:gw-dots 1.2s steps(4) infinite}
.gw-title .gw-title-loading.is-ready{visibility:hidden}
@keyframes gw-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.tt-teams{position:absolute;z-index:2;left:max(var(--mn-gx),var(--gw-sal,env(safe-area-inset-left)));bottom:max(18px,var(--gw-sab,env(safe-area-inset-bottom)));display:flex;align-items:center;gap:12px;font:700 13px/1 var(--gw-ui);letter-spacing:.16em;text-transform:uppercase;animation:tt-rise .6s 1.6s both}
.tt-teams b{padding:6px 10px 5px;color:#fff}
.tt-teams .is-blue{background:var(--gw-blue)}.tt-teams .is-red{background:var(--gw-red)}
.tt-teams span{font-weight:600;letter-spacing:.12em;color:rgba(236,232,224,.6);text-transform:none}
.gw-title .gw-corner{position:absolute;z-index:2;top:max(18px,var(--gw-sat,env(safe-area-inset-top)));left:max(var(--mn-gx),var(--gw-sal,env(safe-area-inset-left)));font:600 12px/1 var(--gw-ui);letter-spacing:.14em;text-transform:uppercase;color:rgba(236,232,224,.45);font-variant-numeric:tabular-nums}
@media (max-height:500px){
  .gw-title .gw-title-center{top:max(5vh,var(--gw-sat,env(safe-area-inset-top)));bottom:max(5vh,var(--gw-sab,env(safe-area-inset-bottom)));gap:8px}
  .tt-logo{font-size:min(17vh,96px)}
  .gw-title .gw-title-sub{font-size:11px;letter-spacing:.3em;gap:10px}
  .tt-cta{min-width:190px;padding:11px 24px 11px calc(24px + .3em);font-size:17px}
  .tt-teams{font-size:10.5px;gap:8px}.tt-teams b{padding:5px 8px 4px}
}
@media (max-width:760px) and (min-height:501px){.gw-title .gw-title-center{left:var(--mn-gx);right:var(--mn-gx)}.tt-logo{font-size:min(19vw,120px)}}
@media (prefers-reduced-motion:reduce){
  .gw-title::after,.tt-word,.tt-crack,.tt-logo,.gw-title .gw-title-sub,.gw-title .gw-press,.tt-teams,.gw-title .gw-title-loading{animation:none}
  .tt-crack{transform:rotate(-1.4deg) scaleX(1)}.gw-title::after{display:none}
  .tt-light,.tt-cta::after,.tt-word>span+span{animation:none}
}

/* ---------- Hauptmenü: Tab-Leiste, Panel links, Figur rechts ---------- */
.gw-main{z-index:6;display:grid;grid-template-columns:minmax(0,var(--mn-panel)) minmax(0,1fr);grid-template-rows:var(--mn-bar) minmax(0,1fr) auto;column-gap:var(--mn-gx);
  padding:max(0px,var(--gw-sat,env(safe-area-inset-top))) max(var(--mn-gx),var(--gw-sar,env(safe-area-inset-right))) max(clamp(10px,2.2vh,24px),var(--gw-sab,env(safe-area-inset-bottom))) max(var(--mn-gx),var(--gw-sal,env(safe-area-inset-left)));color:var(--gw-text);
  background:linear-gradient(180deg,rgba(var(--mn-ink),.82) 0,rgba(var(--mn-ink),.42) calc(var(--mn-bar) + 1px),rgba(var(--mn-ink),0) calc(var(--mn-bar) + 110px)),
    linear-gradient(90deg,rgba(var(--mn-ink),.86) 0%,rgba(var(--mn-ink),.66) 24%,rgba(var(--mn-ink),.16) 44%,rgba(var(--mn-ink),0) 56%),
    linear-gradient(0deg,rgba(var(--mn-ink),.72) 0%,rgba(var(--mn-ink),0) 24%),
    radial-gradient(ellipse 34% 64% at 63% 52%,rgba(var(--mn-ink),0) 52%,rgba(var(--mn-ink),.5) 100%)}   /* the figure stands in the light, the street around it sinks */
.gw-main.is-wide{background:linear-gradient(180deg,rgba(var(--mn-ink),.94),rgba(var(--mn-ink),.88)),radial-gradient(ellipse at 50% 0,rgba(233,182,74,.06),transparent 60%)}
.gw-main-head{grid-column:1/-1;grid-row:1;display:flex;align-items:stretch;gap:clamp(14px,2.2vw,40px);min-width:0;border-bottom:1px solid var(--mn-line)}
.mn-logo{align-self:center;flex:none;font:400 clamp(19px,1.55vw,28px)/1 var(--gw-brush);color:#f4f1ea;text-transform:uppercase;white-space:nowrap;transform:skewX(-7deg);text-shadow:-.04em 0 rgba(47,98,255,.7),.04em 0 rgba(226,38,60,.7)}
.gw-menu-list{display:flex;align-items:stretch;gap:clamp(2px,.9vw,18px);min-width:0}
.gw-menu-list button{position:relative;display:flex;align-items:center;padding:0 clamp(7px,.7vw,13px);border:0;background:none;color:var(--mn-dust);font:700 clamp(15px,1.12vw,21px)/1 var(--gw-ui);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transition:color .15s}
.gw-menu-list button::after{content:"";position:absolute;left:clamp(7px,.7vw,13px);right:clamp(7px,.7vw,13px);bottom:-1px;height:3px;background:var(--gw-accent);box-shadow:0 0 14px var(--gw-accent-glow);transform:scaleX(0);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.gw-menu-list button:hover{color:var(--gw-text)}
.gw-menu-list button[aria-current=true]{color:#fff}
.gw-menu-list button[aria-current=true]::after{transform:scaleX(1)}
.gw-menu-list button:focus-visible{outline:0;color:#fff;box-shadow:inset 0 0 0 1px rgba(233,182,74,.55)}
.gw-player-chip{align-self:center;display:inline-flex;align-items:center;gap:10px;flex:none;height:38px;margin-left:auto;padding:0 12px 0 4px;border:0;background:rgba(var(--mn-ink),.6);box-shadow:inset 0 0 0 1px var(--mn-line-2);cursor:text}
.gw-avatar{width:30px;height:30px;background:rgba(236,232,224,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b9b3a8'%3E%3Ccircle cx='12' cy='8.5' r='4.2'/%3E%3Cpath d='M3.5 22c.9-4.6 4.3-7 8.5-7s7.6 2.4 8.5 7z'/%3E%3C/svg%3E") center 75%/70% no-repeat}
#player-name{width:150px;border:0;background:transparent;color:var(--gw-text);font:700 16px/1 var(--gw-ui);letter-spacing:.12em;text-transform:uppercase}
#player-name::placeholder{color:rgba(236,232,224,.4)}
.gw-player-chip.is-missing{box-shadow:inset 0 0 0 1px var(--gw-accent),0 0 22px -8px var(--gw-accent-glow)}
.gw-main-head .gw-app-chip{align-self:center;flex:none;margin-left:auto}
.gw-main-head .gw-app-chip:not([hidden])+.gw-player-chip{margin-left:0}
.gw-main-panel{grid-column:1;grid-row:2;align-self:center;min-width:0;min-height:0;max-height:100%;overflow:auto;padding:clamp(12px,2.6vh,30px) 0;scrollbar-width:none}
.gw-main.is-wide .gw-main-panel{grid-column:1/-1;align-self:stretch;padding-bottom:clamp(6px,1.4vh,14px)}
.gw-tab{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,16px);animation:mn-cut .26s cubic-bezier(.2,.8,.2,1)}
/* a quick cut sideways; it never starts invisible (a slow first frame must not leave the panel empty) */
@keyframes mn-cut{from{transform:translateX(-14px);opacity:.55}to{transform:none;opacity:1}}
.gw-panel-title{display:block;margin:0;font:700 clamp(26px,2.3vw,42px)/.95 var(--gw-ui);letter-spacing:.03em;text-transform:uppercase;color:#fff}
.gw-panel-title::after{content:none}
.gw-pause .gw-panel-title{font-size:20px}
.gw-main .gw-hint{max-width:46ch;margin:0;color:var(--mn-dust);font:500 clamp(13px,.95vw,16px)/1.45 var(--gw-ui);letter-spacing:.01em}
#connection-status{margin:clamp(6px,1.4vh,14px) 0 0;min-height:16px;color:var(--gw-text);font:600 14px/1.35 var(--gw-ui);letter-spacing:.04em}
#connection-status:empty{display:none}
#connection-status.error{color:var(--gw-red-hi)}
/* Spielen: zwei grosse Modi, der erste ist der Hauptweg */
.gw-mode-card{position:relative;isolation:isolate;display:flex;align-items:center;width:100%;min-height:clamp(66px,11.5vh,112px);padding:0 22px 0 30px;border:0;color:var(--gw-text);text-align:left;overflow:hidden;
  background:linear-gradient(90deg,rgba(15,16,19,.94),rgba(15,16,19,.76));box-shadow:inset 0 0 0 1px var(--mn-line);clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s,box-shadow .18s}
.gw-mode-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;z-index:2;transition:width .18s}
.gw-mode-card--tdm::before{background:linear-gradient(180deg,var(--gw-blue) 0 50%,var(--gw-red) 50% 100%)}
.gw-mode-card--ffa::before{background:#d6d1c8}
.gw-mode-card:hover,.gw-mode-card:focus-visible{outline:0;transform:translateX(6px);background:linear-gradient(90deg,rgba(26,27,31,.96),rgba(22,23,27,.82));box-shadow:inset 0 0 0 1px rgba(233,182,74,.62)}
.gw-mode-card:hover::before,.gw-mode-card:focus-visible::before{width:9px}
.gw-mode-card:active{transform:translateX(6px) scale(.99)}
.gw-mode-text{position:relative;z-index:1}
.gw-mode-card strong{display:block;font:700 clamp(23px,2.05vw,38px)/.95 var(--gw-ui);letter-spacing:.03em;text-transform:uppercase}
.gw-mode-card small{display:block;margin-top:clamp(6px,.9vh,10px);color:var(--mn-dust);font:600 clamp(13px,.95vw,16px)/1.2 var(--gw-ui);letter-spacing:.02em}
.gw-mode-art{position:absolute;inset:0 0 0 46%;z-index:0;background:url(/assets/ui-minimap.jpg) 50% 47%/150% auto no-repeat;-webkit-mask:linear-gradient(90deg,transparent,#000 80%);mask:linear-gradient(90deg,transparent,#000 80%);opacity:.34;filter:grayscale(1) brightness(.8) contrast(1.2)}
.gw-mode-art--tdm::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,rgba(47,98,255,.24) 55%,rgba(226,38,60,.26))}
.gw-mode-art--ffa{background-position:46% 62%}
/* Beitreten: vier grosse Ziffern */
.gw-join{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.gw-join label{font:600 14px/1 var(--gw-ui);letter-spacing:.04em;color:var(--mn-dust)}
.gw-join-row{display:flex;gap:10px;min-width:0}
#room-input{flex:1;width:0;min-width:0;height:clamp(56px,9vh,78px);padding:0 18px;border:0;border-radius:0;background:rgba(var(--mn-ink),.66);box-shadow:inset 0 0 0 1px var(--mn-line-2);color:#fff;font:700 clamp(32px,3vw,50px)/1 var(--gw-ui);letter-spacing:.42em;text-transform:uppercase;font-variant-numeric:tabular-nums}
#room-input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--gw-accent)}
#room-input::placeholder{color:rgba(236,232,224,.14)}
.gw-join .gw-btn{height:clamp(56px,9vh,78px);padding:0 26px;font-size:17px}
/* Crew */
.mn-crew-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.mn-field{display:flex;align-items:center;gap:10px}
.mn-field-k{font:600 13px/1 var(--gw-ui);letter-spacing:.04em;color:var(--mn-dust)}
.mn-seg{border-color:var(--mn-line-2)}
.mn-seg button{min-height:34px}
.mn-seg button[aria-checked=true]{background:rgba(233,182,74,.14);color:var(--gw-accent);box-shadow:inset 0 -2px 0 var(--gw-accent)}
.mn-seg button.is-blue[aria-checked=true]{background:rgba(47,98,255,.24);color:#d4dfff;box-shadow:inset 0 -2px 0 var(--gw-blue)}
.mn-seg button.is-red[aria-checked=true]{background:rgba(226,38,60,.22);color:#ffd5da;box-shadow:inset 0 -2px 0 var(--gw-red)}
.mn-looks{display:grid;gap:4px}
.mn-look{display:grid;grid-template-columns:12px minmax(0,1fr);align-items:center;gap:15px;min-height:clamp(46px,7.2vh,68px);margin:0;padding:7px 16px 7px 14px;border:0;background:rgba(14,15,18,.74);box-shadow:inset 0 0 0 1px rgba(236,232,224,.07);color:var(--gw-text);text-align:left;cursor:pointer;transition:background .14s,box-shadow .14s}
.mn-look:hover,.mn-look:focus-visible{outline:0;background:rgba(26,27,31,.88);box-shadow:inset 0 0 0 1px var(--mn-line-2)}
.mn-look[aria-checked=true]{background:linear-gradient(90deg,rgba(233,182,74,.17),rgba(18,17,14,.86) 72%);box-shadow:inset 3px 0 0 var(--gw-accent),inset 0 0 0 1px rgba(233,182,74,.42)}
.mn-look-code{display:grid;grid-template-rows:5px 1fr 1fr;gap:2px;width:12px;height:clamp(28px,4.4vh,40px)}
.mn-look-code i{display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.mn-look-text{display:grid;gap:5px;min-width:0}
.mn-look b{font:700 clamp(18px,1.32vw,25px)/1 var(--gw-ui);letter-spacing:.05em;text-transform:uppercase}
.mn-look small{overflow:hidden;font:500 clamp(12px,.85vw,15px)/1.25 var(--gw-ui);color:var(--mn-dust);white-space:nowrap;text-overflow:ellipsis}
.mn-look[aria-checked=true] small{color:#d8d2c6}
.mn-crew-hint{font-size:13px}
/* Figur: Name und Ausrüstung neben den Füssen */
.mn-operator{grid-column:2;grid-row:2;align-self:end;justify-self:end;display:grid;grid-template-columns:minmax(0,1fr);justify-items:end;gap:10px;max-width:min(460px,40vw);margin-bottom:clamp(6px,2.6vh,30px);text-align:right;pointer-events:auto;animation:mn-in .5s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes mn-in{from{opacity:.5;transform:translateX(-14px)}to{opacity:1;transform:none}}
.gw-main.is-wide .mn-operator{display:none}
/* --mn-n = letters of the name (operator.js): «Schatten» and «November» get a smaller size, so the name stays on the plate */
.mn-op-name{margin:0;padding-right:.08em;font:400 min(clamp(46px,5.4vw,104px),calc(min(460px,40vw) / (var(--mn-n,8) * .72)))/.88 var(--gw-brush);color:#f6f3ec;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;transform:skewX(-7deg);text-shadow:0 .05em .4em rgba(0,0,0,.6)}
.mn-op-row{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.mn-op-side{flex:none;padding:5px 9px 4px;font:700 12px/1 var(--gw-ui);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--gw-blue)}
.mn-op-side.is-red{background:var(--gw-red)}
.mn-op-art{display:block;height:clamp(28px,3.2vw,48px);line-height:0}
.mn-op-art .wa{height:100%;width:auto}
.mn-op-art .wa img{filter:drop-shadow(0 3px 6px rgba(0,0,0,.7))}
.mn-op-gun-text{display:grid;justify-items:end;gap:4px;min-width:0}
.mn-op-gun{font:700 clamp(15px,1.1vw,19px)/1 var(--gw-ui);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mn-op-build{font:600 13px/1 var(--gw-ui);letter-spacing:.03em;color:var(--gw-accent);white-space:nowrap}
.mn-op-line{display:none;max-width:36ch;margin:0;color:#d8d2c6;font:500 clamp(14px,1vw,17px)/1.4 var(--gw-ui);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.mn-op-actions{display:flex;gap:8px}
.mn-op-go{min-height:36px;padding:0 15px;border:0;background:rgba(var(--mn-ink),.66);box-shadow:inset 0 0 0 1px var(--mn-line-2);color:var(--gw-text);font:700 13px/1 var(--gw-ui);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .14s,box-shadow .14s}
.mn-op-go:hover,.mn-op-go:focus-visible{outline:0;background:rgba(233,182,74,.16);box-shadow:inset 0 0 0 1px var(--gw-accent)}
.gw-main[data-tab=crew] .mn-op-line{display:block}
.gw-main[data-tab=crew] .mn-op-actions,.gw-main[data-tab=crew] .mn-op-row{display:none}
/* Fuss: Tasten links, Map rechts */
.gw-main-foot{grid-column:1/-1;grid-row:3;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;min-height:0}
.gw-keys{display:flex;align-items:center;gap:6px;font:600 12px/1 var(--gw-ui);letter-spacing:.06em;color:rgba(236,232,224,.5)}
.gw-keys span{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 5px;box-shadow:inset 0 0 0 1px var(--mn-line-2);color:var(--gw-text);font-weight:700}
.gw-keys span+span{margin-left:-2px}
.gw-keys span:not(:first-child):not(:nth-child(2)){margin-left:12px}
body.touch .gw-keys{visibility:hidden}
.gw-info-card,.gw-invite{display:grid;gap:4px;min-width:0;padding:10px 14px;border:0;background:rgba(var(--mn-ink),.66);box-shadow:inset 0 0 0 1px var(--mn-line)}
.gw-info-card{grid-template-columns:auto auto;align-items:baseline;column-gap:12px;row-gap:3px}
.gw-info-card small,.gw-invite small{color:rgba(236,232,224,.48);font:600 11px/1 var(--gw-ui);letter-spacing:.14em;text-transform:uppercase}
.gw-info-card small{grid-row:1;grid-column:1/-1}
.gw-info-card strong{font:700 20px/1 var(--gw-ui);letter-spacing:.08em;text-transform:uppercase}
.gw-info-card span{color:var(--mn-dust);font:600 13px/1 var(--gw-ui);letter-spacing:.04em}
.gw-info-card a{grid-column:1/-1;color:rgba(236,232,224,.4);font:500 11px/1 var(--gw-ui);letter-spacing:.06em}
.gw-main.is-wide .gw-info-card{display:none}
.gw-invite{grid-template-columns:auto auto;align-items:center;column-gap:18px;box-shadow:inset 0 0 0 1px rgba(233,182,74,.6),0 0 30px -14px var(--gw-accent-glow)}
.gw-invite strong{display:block;margin-top:5px;font:700 22px/1 var(--gw-ui);letter-spacing:.1em;text-transform:uppercase}
.gw-invite b{letter-spacing:.2em;color:var(--gw-accent)}
.gw-invite:not([hidden])+.gw-info-card{display:none}
/* Einstellungen: dieselben Bausteine wie bisher, über die ganze Breite */
.gw-main .gw-settings .gw-subtabs{gap:clamp(14px,2vw,30px)}
.gw-main .gw-settings-body{grid-template-columns:minmax(0,1fr) minmax(200px,300px);gap:clamp(14px,2vw,32px)}
.gw-main .gw-info{background:rgba(14,15,18,.8);box-shadow:inset 3px 0 0 var(--gw-accent);border:0}
.gw-main .gw-info small{letter-spacing:.06em;font-size:14px}
.gw-main .gw-info p{font-size:15px}
/* niedrige Fenster (MacBook-Chrome 908 x 571): Crew-Zeilen ohne Beschreibung – die steht beim Namen neben der Figur */
@media (max-height:640px){
  .mn-look{min-height:38px;padding-block:5px}
  .mn-look small,.mn-crew-hint{display:none}
  .mn-look-code{height:24px}
}
/* Handy quer (874 x 402, 844 x 390 …): kompakt, die Figur rechts bleibt frei */
@media (max-height:500px){
  :root{--mn-bar:42px;--mn-panel:min(46vw,400px)}
  .mn-logo{display:none}
  .gw-main-head{gap:10px}
  .gw-menu-list{gap:0}
  .gw-menu-list button{padding:0 8px;font-size:14px;letter-spacing:.05em}
  .gw-menu-list button::after{left:8px;right:8px;height:2px}
  .gw-player-chip{height:30px;gap:6px;padding:0 9px 0 3px}.gw-avatar{width:24px;height:24px}#player-name{width:104px;font-size:13px;letter-spacing:.08em}
  .gw-main-panel{padding:8px 0}
  .gw-tab{gap:8px}
  .gw-panel-title{font-size:20px}
  .gw-main .gw-hint{font-size:12px;line-height:1.35}
  .gw-mode-card{min-height:58px;padding:0 14px 0 20px;clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%)}
  .gw-mode-card::before{width:5px}
  .gw-mode-card strong{font-size:21px}
  .gw-mode-card small{font-size:12px;margin-top:5px}
  #room-input,.gw-join .gw-btn{height:50px}#room-input{font-size:30px}
  .mn-crew-opts{gap:6px 12px}
  .mn-field{gap:6px}.mn-field-k{font-size:11px}
  .mn-seg button{min-height:30px;padding:0 9px;font-size:12px}
  .mn-looks{grid-template-columns:1fr 1fr;gap:4px}
  .mn-look{min-height:44px;gap:10px;padding:5px 10px 5px 9px}
  .mn-look b{font-size:16px}
  .mn-look small{display:none}
  .mn-look-code{height:26px;width:10px}
  .mn-look{grid-template-columns:10px minmax(0,1fr)}
  .mn-crew-hint{display:none}
  .mn-operator{gap:6px;max-width:44vw;margin-bottom:4px}
  .mn-op-name{font-size:40px}
  .mn-op-art{height:24px}
  .mn-op-gun{font-size:13px}.mn-op-build{font-size:11px}
  .mn-op-side{font-size:10px;padding:4px 7px 3px}
  .mn-op-actions{display:none}
  .mn-op-line{font-size:12px;max-width:30ch}
  .gw-main-foot{display:none}
  .gw-main-foot:has(.gw-invite:not([hidden])){display:flex;justify-content:flex-end}
  .gw-main-foot:has(.gw-invite:not([hidden])) .gw-info-card,.gw-main-foot:has(.gw-invite:not([hidden])) .gw-keys{display:none}
  .gw-invite{padding:6px 10px}.gw-invite strong{font-size:16px}
  .gw-main .gw-settings-body{grid-template-columns:minmax(0,1fr) 170px;gap:12px}
  .gw-main .gw-info small{font-size:12px}.gw-main .gw-info p{font-size:12px}
}
@media (max-width:649px){
  .gw-main{grid-template-columns:1fr;grid-template-rows:auto auto auto;overflow:auto}
  .gw-main-head{flex-wrap:wrap;padding-bottom:6px}
  .gw-menu-list{order:3;width:100%;overflow-x:auto}
  .mn-operator{display:none}
  .gw-main-panel{grid-column:1}
  .gw-main-foot{flex-wrap:wrap}
  .gw-keys{display:none}
}
@media (prefers-reduced-motion:reduce){.gw-tab,.mn-operator{animation:none}.gw-mode-card,.gw-menu-list button::after{transition:none}}