/* ============================================================================
   TWR//DFNS – Stil für Landing (index.html) und App (play.html)
   DMBXK-Gerüst (Kopie der Hub-Sprache: Archivo + IBM Plex Mono, Fenster mit Eckklammern, Papier-Karten mit Akzentband,
   Rasterchips, Scanlines, Akzentwähler) mit Cyberpunk-Spielpalette: Nachtblau-Anthrazit, Akzent (Standard Neon-Cyan),
   fest Magenta (Gegner/Gefahr), Violett (Hacking), Amber (Credits/Warnung). Bewegung reduzieren → alles steht.
   ========================================================================== */

:root {
  --bg: #090b10;
  --bg-2: #0d1017;
  --panel: #11151d;
  --line: #222a36;
  --line-2: #34404f;
  --text: #e4e9ef;
  --muted: #8a95a3;
  --dim: #5a6472;
  --paper: #c7ccd3;
  --paper-2: #b3b9c2;
  --ink: #10141b;
  --ink-2: #3a434f;
  --neon: #35e0ff;
  --neon-hi: #8eedff;
  --glow: rgba(53, 224, 255, .42);
  --glow-soft: rgba(53, 224, 255, .10);
  --neon-line: rgba(53, 224, 255, .30);
  --on-neon: #0e1012;
  --acc-rgb: 53, 224, 255;
  --mag: #ff2bd6;
  --vio: #9d5cff;
  --amb: #ffb23f;
  --bad: #ff3b47;
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --snap: cubic-bezier(.7, 0, .2, 1);
  --wrap: 1240px;
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 70px; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 13px/1.55 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Scanlines + Vignette über allem, ohne Zeiger */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
    radial-gradient(130% 90% at 50% 40%, transparent 60%, rgba(0, 0, 0, .5) 100%);
  opacity: .45;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--neon); color: var(--on-neon); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; background: var(--neon); color: var(--on-neon, #000); font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }   /* sonst gewinnt display aus .btn/.chip/.field */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bx, .logo-txt em, .hero-title em { font-style: normal; color: var(--neon); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

/* ------------------------------------------------------------ Kopf -- */
.hud {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 22px;
  background: rgba(9, 11, 16, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; font: 900 16px/1 var(--display); font-stretch: 125%; letter-spacing: .02em; }
.logo-mark { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--neon); box-shadow: 0 0 10px var(--glow); }
.logo-mark i { width: 8px; height: 8px; background: var(--neon); transform: rotate(45deg); animation: core 3.2s var(--ease) infinite; }
@keyframes core { 50% { transform: rotate(225deg) scale(.7); } }
.hud-nav { display: flex; gap: 2px; margin-left: 8px; }
.hud-nav a { position: relative; padding: 7px 10px; border-radius: 3px; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.hud-nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1px; background: var(--neon); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.hud-nav a:hover { color: var(--text); }
.hud-nav a:hover::after { transform: scaleX(1); }
.hud-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hud-burger { display: none; width: 36px; height: 32px; padding: 6px; border: 1px solid var(--line-2); background: none; border-radius: 3px; cursor: pointer; }
.hud-burger svg { width: 100%; height: 100%; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: rgba(0, 0, 0, .25);
  font: 600 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip--sys { color: var(--neon); border-color: var(--neon-line); }
.chip--bad { color: var(--bad); border-color: rgba(255, 59, 71, .45); }
.chip--warn { color: var(--amb); border-color: rgba(255, 178, 63, .45); }
.pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
.pulse::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid currentColor; animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

.hud-theme { display: flex; align-items: center; gap: 4px; padding-left: 10px; border-left: 1px solid var(--line); }
.sw { position: relative; width: 16px; height: 16px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 2px; background: var(--sw); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
.sw:hover { transform: translateY(-2px); }
.sw.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--sw); }
.sw--own { background: conic-gradient(from 90deg, #ff3d4f, #ffd23f, #a6ff2e, #35e0ff, #b36bff, #ff3d4f); }
.sw--own::after { content: ""; position: absolute; inset: 4px; border-radius: 1px; background: var(--sw); }
.sw--own input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* ---------------------------------------------------------- Knöpfe -- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--neon);
  border-radius: 2px;
  background: var(--neon);
  color: var(--on-neon);
  font: 800 13px/1 var(--display);
  font-stretch: 115%;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .25s, transform .15s;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { background: transparent; color: var(--neon); box-shadow: 0 0 22px var(--glow); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn--ghost { background: rgba(0, 0, 0, .3); color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--neon); color: var(--neon); box-shadow: none; }
.btn--mag { background: var(--mag); border-color: var(--mag); color: #12060f; }
.btn--mag:hover { color: var(--mag); box-shadow: 0 0 22px rgba(255, 43, 214, .4); }
.btn--lg { height: 54px; padding: 0 28px; font-size: 15px; }
.btn--sm { height: 32px; padding: 0 12px; font-size: 11px; }

.kicker { font: 600 11px/1 var(--mono); letter-spacing: .16em; color: var(--neon); text-transform: uppercase; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid currentColor; border-radius: 2px; font: 600 9.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 1px; background: var(--c, currentColor); flex: none; }

/* Fenster mit Eckklammern (Hub-Sprache) */
.win { position: relative; padding: 16px 18px 18px; border: 1px solid rgba(233, 237, 239, .16); background: linear-gradient(180deg, rgba(17, 21, 29, .94), rgba(9, 11, 16, .94)); box-shadow: 0 24px 50px rgba(0, 0, 0, .4); }
.win::before, .win::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--c, var(--neon)); pointer-events: none; }
.win::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.win::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.win-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px dashed var(--line-2); font: 600 10px/1 var(--mono); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.win-title { margin: 0 0 6px; font: 900 22px/1.05 var(--display); font-stretch: 118%; text-transform: uppercase; }

/* ------------------------------------------------------------ Hero -- */
.hero { position: relative; display: flex; align-items: center; min-height: calc(100svh - 56px); overflow: hidden; isolation: isolate; }
/* dunkler Schleier links hinter dem Text: Lesbarkeit vor Skyline */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(9, 11, 16, .9) 0%, rgba(9, 11, 16, .62) 40%, transparent 72%); }
.sky { position: absolute; inset: 0; z-index: -3; background:
  radial-gradient(900px 420px at 72% 34%, rgba(255, 43, 214, .16), transparent 70%),
  radial-gradient(800px 500px at 20% 20%, rgba(var(--acc-rgb), .12), transparent 70%),
  linear-gradient(180deg, #07070f 0%, #120a22 48%, #1a0c24 68%, #090b10 100%); }
.city { position: absolute; inset: auto 0 0 0; z-index: -2; height: 100%; pointer-events: none; }
.hero-3d { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none; }
.hero.has-3d .hero-3d { opacity: 1; }
.hero.has-3d .city, .hero.has-3d .avs, .hero.has-3d .rain, .hero.has-3d .floor { opacity: 0; transition: opacity 1.2s var(--ease); }
.city svg { position: absolute; left: -4%; bottom: 0; width: 108%; height: auto; will-change: transform; transition: transform .6s var(--ease); }
.city .l0 { bottom: 14%; opacity: .6; }
.city .l1 { bottom: 9%; }
.city .blink { animation: blink 2.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15; } }
/* fliegende AVs: Lichtpunkte, die quer durchs Bild ziehen */
.avs i { position: absolute; left: -40px; width: 4px; height: 2px; border-radius: 2px; background: #fff3d6; box-shadow: 0 0 8px 2px rgba(255, 178, 63, .8), -14px 0 10px rgba(255, 59, 71, .4); animation: fly linear infinite; }
.avs i:nth-child(1) { top: 24%; animation-duration: 26s; }
.avs i:nth-child(2) { top: 33%; animation-duration: 34s; animation-delay: -12s; transform: scaleX(-1); animation-name: fly-back; }
.avs i:nth-child(3) { top: 18%; animation-duration: 41s; animation-delay: -27s; }
.avs i:nth-child(4) { top: 40%; animation-duration: 30s; animation-delay: -5s; animation-name: fly-back; }
@keyframes fly { to { left: calc(100% + 40px); } }
@keyframes fly-back { from { left: calc(100% + 40px); } to { left: -40px; } }
.rain { position: absolute; inset: -50% 0 0; z-index: -1; pointer-events: none; opacity: .22;
  background: repeating-linear-gradient(100deg, transparent 0 9px, rgba(180, 220, 255, .5) 9px 10px, transparent 10px 23px);
  background-size: 140px 260px; animation: rain .5s linear infinite; }
@keyframes rain { to { background-position: -40px 260px; } }
.floor { position: absolute; left: -20%; right: -20%; bottom: 0; height: 30%; z-index: -1; pointer-events: none; transform: perspective(380px) rotateX(62deg); transform-origin: bottom;
  background:
    linear-gradient(90deg, rgba(var(--acc-rgb), .32) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(0deg, rgba(var(--acc-rgb), .32) 1px, transparent 1px) 0 0 / 60px 60px;
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 90%); mask-image: linear-gradient(0deg, #000 10%, transparent 90%);
  animation: floor 3s linear infinite; }
@keyframes floor { to { background-position: 0 60px, 0 60px; } }
.hero.is-off * { animation-play-state: paused !important; }

.hero-in { position: relative; padding-top: 40px; padding-bottom: 90px; }
.hero-kicker { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 18px; }
/* Breite des Schriftzugs ≈ 7 × Schriftgröße: so groß wie möglich, ohne über den Rand zu laufen */
.hero-title { margin: 0; font: 900 clamp(40px, calc((100vw - 48px) / 7.4), 168px)/.84 var(--display); font-stretch: 125%; letter-spacing: -.01em; text-shadow: 0 0 40px rgba(var(--acc-rgb), .18); }
.hero-title em { text-shadow: 0 0 26px var(--glow); }
.hero-sub { max-width: 58ch; margin: 22px 0 28px; font-size: 14px; line-height: 1.65; color: #c3cbd4; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.hero-facts .chip b { color: var(--text); font-weight: 700; }
.wipbar { display: flex; gap: 10px; align-items: center; max-width: 640px; margin-top: 22px; padding: 9px 12px; border: 1px solid rgba(255, 178, 63, .45); background: repeating-linear-gradient(-45deg, rgba(255, 178, 63, .09) 0 8px, transparent 8px 16px), rgba(255, 178, 63, .04); font-size: 11.5px; color: #e8dcc0; }
.wipbar b { color: var(--amb); letter-spacing: .14em; font-size: 10.5px; flex: none; }
.wipbar--ok { border-color: rgba(59, 255, 138, .4); background: rgba(59, 255, 138, .05); color: #d3f5df; }
.wipbar--ok b { color: #3bff8a; }

/* -------------------------------------------------------- Abschnitte -- */
.sec { padding: 90px 0 30px; }
.sec-head { display: grid; gap: 10px; margin-bottom: 30px; }
.sec-title { margin: 0; font: 900 clamp(32px, 5vw, 60px)/.95 var(--display); font-stretch: 120%; text-transform: uppercase; }
.sec-lead { max-width: 70ch; margin: 0; color: var(--muted); }

/* Papier-Karten mit Akzentband (Modi) */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.card { position: relative; display: flex; flex-direction: column; border-radius: 2px; background: var(--paper); color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--neon), 0 18px 40px rgba(0, 0, 0, .55), 0 0 30px var(--glow-soft); }
.card-band { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--c, var(--neon)); color: var(--on-c, var(--on-neon)); font: 900 15px/1.1 var(--display); font-stretch: 112%; letter-spacing: .03em; text-transform: uppercase; }
.card-band svg { width: 18px; height: 18px; }
.card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 12px; font-size: 12px; color: var(--ink-2); }
.card-body p { margin: 0; }
.card-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; color: var(--ink); }
.card-stripe { height: 10px; background: repeating-linear-gradient(90deg, var(--paper-2) 0 14px, transparent 14px 20px); }

/* Türme: fünf Kategorien */
.cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.cat { --c: var(--neon); display: flex; flex-direction: column; }
.cat .win-head b { color: var(--c); }
.cat-desc { margin: 0 0 12px; font-size: 11.5px; color: var(--muted); min-height: 3.2em; }
.twr { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.twr li { padding: 9px 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .22); transition: border-color .2s, background .2s; }
.twr li:hover { border-color: var(--c); background: rgba(255, 255, 255, .03); }
.twr-name { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 800 13px/1.15 var(--display); font-stretch: 108%; }
.twr-role { margin-top: 3px; font-size: 11px; color: var(--muted); }
.twr-paths { margin-top: 5px; font-size: 10px; letter-spacing: .04em; color: var(--dim); }
.twr li:hover .twr-paths { color: #b9c2cc; }
.dmg { color: var(--c); font-size: 9px; }

/* Gegner: Schichten-Kette */
.chain { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 10px; }
.layer { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; }
.layer + .layer::before { content: "›"; position: absolute; left: -9px; top: 15px; color: var(--dim); font-size: 15px; }
.hex { width: 46px; height: 52px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--c); position: relative; box-shadow: 0 0 18px rgba(0, 0, 0, .4); }
.hex::after { content: ""; position: absolute; inset: 9px 10px; clip-path: inherit; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.hex--light::after { background: rgba(0, 0, 0, .35); }
.layer b { font: 800 11.5px/1.1 var(--display); }
.layer small { font-size: 9.5px; color: var(--muted); }
.vehicles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.veh { --c: var(--neon); padding: 12px; border: 1px solid var(--line); border-left: 4px solid var(--c); background: rgba(0, 0, 0, .25); }
.veh b { display: block; font: 900 14px/1.1 var(--display); font-stretch: 110%; text-transform: uppercase; }
.bosses { margin-top: 18px; }
.bosses .vehicles { margin-top: 0; }
.bosses .veh b { color: var(--c); }
.veh small { color: var(--muted); font-size: 11px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.kv { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kv li { display: grid; grid-template-columns: 150px 1fr; gap: 10px; font-size: 12px; }
.kv b { font: 800 12.5px/1.3 var(--display); }
.kv span { color: var(--muted); }

/* Maps */
.maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.map { --c: var(--neon); position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: var(--panel); transition: border-color .25s, transform .3s var(--ease); }
.map:hover { border-color: var(--c); transform: translateY(-3px); }
.map-art { position: relative; height: 120px; background:
  linear-gradient(180deg, transparent 40%, var(--panel)),
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 35%, transparent) 0 1px, transparent 1px 22px),
  repeating-linear-gradient(0deg, color-mix(in srgb, var(--c) 35%, transparent) 0 1px, transparent 1px 22px),
  radial-gradient(120% 140% at 70% 0%, color-mix(in srgb, var(--c) 40%, transparent), transparent 60%), #0b0e14; }
.map-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-body { display: grid; gap: 8px; padding: 12px 14px 16px; }
.map-name { margin: 0; font: 900 20px/1 var(--display); font-stretch: 116%; text-transform: uppercase; }
.map-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--c); }
.map p { margin: 0; font-size: 12px; color: #b9c2cc; }
.map .mech { color: var(--muted); font-size: 11px; }

/* Updates */
.news { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.news li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); background: rgba(0, 0, 0, .22); }
.news time { color: var(--neon); font-weight: 600; font-size: 11px; letter-spacing: .1em; }
.news b { display: block; margin-bottom: 4px; font: 800 15px/1.2 var(--display); font-stretch: 110%; }
.news p { margin: 0; color: var(--muted); font-size: 12px; }

/* ------------------------------------------------------------ Fuß -- */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 80px; padding: 18px 22px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.foot-home { color: var(--text); font-weight: 700; letter-spacing: .06em; }
.foot-home:hover { color: var(--neon); }
.foot-sep { width: 1px; height: 14px; background: var(--line-2); }
.foot-ver { margin-left: auto; letter-spacing: .14em; color: var(--dim); }

.toast { position: fixed; left: 50%; bottom: 40px; z-index: 96; max-width: calc(100vw - 32px); padding: 12px 18px; border: 1px solid var(--neon-line); border-radius: 3px; background: rgba(9, 11, 16, .96); color: var(--neon); font: 700 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); opacity: 0; translate: -50% 16px; pointer-events: none; transition: opacity .25s, translate .35s var(--ease); }
.toast.is-on { opacity: 1; translate: -50% 0; }
.toast.is-bad { color: var(--bad); border-color: rgba(255, 59, 71, .5); }

/* ------------------------------------------------------- App (play) -- */
.mock-banner { position: sticky; top: 0; z-index: 45; padding: 7px 16px; text-align: center; background: repeating-linear-gradient(-45deg, rgba(255, 43, 214, .22) 0 10px, rgba(255, 43, 214, .08) 10px 20px), #1a0816; border-bottom: 1px solid var(--mag); color: #ffd1f4; font: 700 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.app-main { display: grid; place-items: center; min-height: calc(100svh - 56px); padding: 30px 16px 60px; }
.auth { width: min(440px, 100%); }
.auth .win-title { font-size: 28px; }
.auth p { margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; border: 1px solid var(--line-2); }
.tabs button { padding: 10px; border: 0; background: none; cursor: pointer; font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--neon); color: var(--on-neon); }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input { height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(0, 0, 0, .35); outline: none; transition: border-color .2s, box-shadow .2s; }
.field input:focus { border-color: var(--neon); box-shadow: 0 0 0 3px var(--glow-soft); }
.err { min-height: 18px; margin: 4px 0 10px; color: var(--bad); font-size: 12px; }
.auth .btn { width: 100%; }
.down { display: grid; gap: 4px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid rgba(255, 59, 71, .5); background: rgba(255, 59, 71, .08); font-size: 12px; color: #ffc9cd; }
.down b { color: var(--bad); letter-spacing: .14em; font-size: 10.5px; }

.lobby { align-self: start; margin-top: 4vh; width: min(1180px, 100%); display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.lobby h1 { grid-column: 1 / -1; margin: 0; font: 900 clamp(28px, 4vw, 48px)/1 var(--display); font-stretch: 120%; text-transform: uppercase; }
.who { display: grid; gap: 4px; }
.who-name { font: 900 26px/1.05 var(--display); font-stretch: 115%; word-break: break-all; }
.who small { color: var(--muted); }
.ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.op { --c: var(--neon); display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.op b { font: 900 17px/1.1 var(--display); font-stretch: 112%; text-transform: uppercase; color: var(--c); }
.op p { margin: 0; font-size: 12px; color: var(--muted); }
.op .tag { justify-self: start; color: var(--amb); }
.stat { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 12px; }
.stat:last-child { border-bottom: 0; }
.stat span { color: var(--muted); }

/* Kommandozentrum Phase 4: Einsatz-Karten mit Knöpfen, Code, offene Lobbys, Freunde, Rangliste, Lobby-Raum, Einladung */
.col { display: grid; gap: 18px; align-content: start; min-width: 0; }
.op-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.op.is-hl { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 24px rgba(255, 43, 214, .18); }
.join { display: flex; align-items: end; gap: 10px; margin-top: 14px; }
.join .field { margin: 0; flex: 0 1 160px; }
.join input { text-transform: uppercase; letter-spacing: .3em; font-weight: 700; }
.join .btn { height: 42px; }
.lob { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.lob:last-child { border-bottom: 0; }
.lob small { display: block; color: var(--muted); font-size: 10.5px; }
.rank { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.rank li { display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 12px; counter-increment: r; }
.rank li::before { content: counter(r); color: var(--amb); font-weight: 700; }
.rank li:first-child b { color: var(--amb); }
.fadd { display: flex; gap: 8px; margin-bottom: 10px; }
.fadd input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(0, 0, 0, .35); color: var(--text); font: inherit; font-size: 12px; outline: none; }
.fadd input:focus { border-color: var(--neon); }
.friends { margin: 0; padding: 0; list-style: none; }
.friends li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.friends li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.friends small { display: block; color: var(--muted); font-size: 10.5px; }
.friends .btn { height: 26px; padding: 0 8px; font-size: 10px; }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4a5160; }
.is-on > .dot { background: var(--ok, #3bff8a); box-shadow: 0 0 8px var(--ok, #3bff8a); }
.room-code { color: var(--neon); font-size: 12px; letter-spacing: .2em; padding: 6px 10px; }
.room .setup-diffs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.room .setup-diff:disabled[aria-pressed="true"] { opacity: 1; }
.room h3 { margin: 6px 0 0; font: 600 10px/1 var(--mono); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.mem { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0 9px 10px; border-bottom: 1px dashed var(--line); border-left: 2px solid var(--line-2); margin-bottom: 4px; }
.mem.is-ready { border-left-color: var(--neon); }
.mem.is-off { opacity: .55; }
.mem-n { font: 800 14px/1.2 var(--display); min-width: 0; overflow-wrap: anywhere; }
.mem-n .tag { color: var(--amb); margin-left: 4px; }
.mem small { display: block; font: 400 10.5px/1.4 var(--mono); color: var(--muted); }
.mem > b { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mem.is-ready > b { color: var(--neon); }
.chat { height: 200px; overflow-y: auto; margin-bottom: 10px; padding-right: 4px; font-size: 12.5px; overflow-wrap: anywhere; }
.chat p { margin: 0 0 6px; }
.chat b { color: var(--neon); }
.invite { position: fixed; right: 16px; bottom: 16px; z-index: 97; display: grid; gap: 6px; width: min(320px, calc(100vw - 32px)); padding: 14px; border-color: var(--mag); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.invite b { color: var(--mag); font: 900 16px/1 var(--display); }
.invite div { display: flex; gap: 8px; margin-top: 4px; }

/* ----------------------------------------------------------- Spiel -- */
/* Vollbild über der Seite; HUD als Glasfenster mit Eckklammern, Spielwerte groß und lesbar */
.game { position: fixed; inset: 0; z-index: 70; background: #07060d; overflow: hidden; user-select: none; -webkit-user-select: none; }
.game-cv { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.g-top { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.g-top > * { pointer-events: auto; }
.g-stat, .g-round, .g-ctl { position: relative; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px; border: 1px solid rgba(233, 237, 239, .14); background: rgba(9, 11, 16, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.g-stat::before, .g-round::before, .g-ctl::before { content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; border: 2px solid var(--neon); border-right: 0; border-bottom: 0; }
.g-stat b { font: 900 22px/1 var(--display); font-stretch: 112%; font-variant-numeric: tabular-nums; min-width: 3ch; }
.g-ico { display: grid; width: 22px; height: 22px; }
.g-ico svg { width: 100%; height: 100%; }
.g-ico--life { color: var(--bad); }
.g-ico--cash { color: var(--amb); }
.g-round { margin: 0 auto; flex-direction: column; justify-content: center; gap: 2px; height: 46px; padding: 0 22px; }
.g-round span { font-size: 9.5px; letter-spacing: .2em; color: var(--muted); }
.g-round b { font: 900 20px/1 var(--display); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.g-ctl { gap: 6px; padding: 0 6px; }
.g-btn, .g-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(0, 0, 0, .35); cursor: pointer; font: 700 12px/1 var(--mono); letter-spacing: .06em; }
.g-btn svg, .g-go svg { width: 16px; height: 16px; }
.g-btn:hover { border-color: var(--neon); color: var(--neon); }
.g-go { padding: 0 14px; border-color: var(--neon); background: var(--neon); color: var(--on-neon); text-transform: uppercase; font-weight: 800; }
.g-go:hover:not(:disabled) { box-shadow: 0 0 18px var(--glow); }
.g-go.is-on { background: transparent; color: var(--neon); }
.g-go:disabled { cursor: default; }
.is-critical .g-ico--life, .is-critical [data-lives] { animation: crit 0.8s steps(2) infinite; color: var(--bad); }
@keyframes crit { 50% { opacity: .35; } }

/* Turmleiste unten: Kategorie-Reiter, darunter fünf Türme */
.g-bar { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: grid; gap: 6px; max-width: calc(100% - 28px); padding: 8px; border: 1px solid rgba(233, 237, 239, .14); background: rgba(9, 11, 16, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.g-tabs { display: flex; gap: 4px; overflow-x: auto; }
.g-tab { position: relative; flex: 1; padding: 5px 22px 5px 10px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(0, 0, 0, .35); cursor: pointer; font: 700 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.g-tab kbd { position: absolute; right: 5px; top: 5px; font: 600 9px/1 var(--mono); color: var(--dim); }
.g-tab:hover { color: var(--text); }
.g-tab[aria-selected="true"] { color: var(--c); border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.g-cards { display: flex; gap: 8px; overflow-x: auto; }
.g-btn-aim { border-color: var(--bad); background: rgba(255, 59, 71, .12); }
.g-card { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; width: 150px; padding: 8px 10px; border: 1px solid var(--line-2); border-bottom: 3px solid var(--c); border-radius: 2px; background: rgba(0, 0, 0, .35); cursor: pointer; text-align: left; transition: transform .15s var(--ease), border-color .15s, background .15s; }
.g-card:hover { transform: translateY(-3px); border-color: var(--c); }
.g-card.is-on { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: var(--c); }
.g-card.is-poor { opacity: .5; }
.g-card.is-poor .g-card-c { color: var(--bad); }
.g-badge { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; background: var(--c); color: #0b0c11; font: 900 13px/1 var(--display); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.g-card-n { font: 800 12px/1.1 var(--display); font-stretch: 105%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-card-c { color: var(--amb); font-weight: 700; font-size: 12px; }
.g-card kbd, .g-buy kbd { position: absolute; right: 5px; top: 4px; font: 600 9px/1 var(--mono); color: var(--dim); }

/* Held und Kräfte */
.g-hero-slot:empty { display: none; }
.g-card--hero { width: 100%; border-bottom-width: 3px; background: linear-gradient(90deg, rgba(255, 210, 63, .14), transparent 70%); }
.g-powers { position: absolute; left: 14px; top: 50%; translate: 0 -50%; display: grid; gap: 6px; }
.g-pow { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 150px; padding: 8px 10px; border: 1px solid var(--mag); border-radius: 2px; background: rgba(9, 11, 16, .85); cursor: pointer; font: 700 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; text-align: left; }
.g-pow b { color: var(--mag); font-size: 13px; }
.g-pow:hover { background: rgba(255, 43, 214, .16); }
.g-pow--pod { border-color: var(--amb); }
.g-pow--pod b { color: var(--amb); }
.g-xp { height: 6px; margin: 8px 0; background: var(--line-2); }
.g-xp i { display: block; height: 100%; background: #ffd23f; box-shadow: 0 0 8px rgba(255, 210, 63, .6); }
.g-float--hero { color: #ffd23f; font-size: 18px; }
.g-rew { margin: 10px 0; }
.g-rew-row { display: flex; flex-wrap: wrap; gap: 6px; }
.g-rew .tag { color: var(--neon); }
.g-rew .g-chips { color: var(--amb); }
.g-rew .g-up, .g-rew .g-medal { color: #ffd23f; }
.g-ach { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12px; color: #c3cbd4; }
.g-ach b { color: #ffd23f; }
.g-bad { color: var(--bad) !important; }

/* Turm-Panel rechts */
.g-panel { position: absolute; right: 14px; top: 70px; bottom: 100px; width: 330px; overflow-y: auto; padding: 14px; border: 1px solid rgba(233, 237, 239, .16); background: rgba(9, 11, 16, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.g-panel-h { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 2px solid var(--c); }
.g-panel-h b { display: block; font: 900 18px/1.1 var(--display); font-stretch: 112%; text-transform: uppercase; }
.g-panel-h small { color: var(--muted); font-size: 11px; }
.g-x { width: 30px; height: 30px; border: 1px solid var(--line-2); background: none; cursor: pointer; font-size: 18px; line-height: 1; }
.g-x:hover { border-color: var(--neon); color: var(--neon); }
.g-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.g-facts div { padding: 6px 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.g-facts dt { font-size: 9.5px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.g-facts dd { margin: 2px 0 0; font-weight: 700; font-size: 12px; }
.g-path { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-left: 3px solid var(--p); background: rgba(0, 0, 0, .25); }
.g-path-h { display: flex; justify-content: space-between; align-items: center; font: 800 12px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--p); }
.g-pips { display: flex; gap: 3px; }
.g-pips i { width: 12px; height: 6px; background: var(--line-2); }
.g-pips i.is-on { background: var(--p); box-shadow: 0 0 6px var(--p); }
.g-path small { display: block; margin-top: 5px; color: var(--muted); font-size: 10.5px; }
.g-path > b { display: block; margin-top: 8px; font: 800 13px/1.2 var(--display); }
.g-path p { margin: 4px 0 8px; font-size: 11.5px; line-height: 1.45; color: #c3cbd4; }
.g-path .g-locked { margin: 8px 0 0; color: var(--dim); font-style: italic; }
.g-buy { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 34px; padding: 0 26px 0 10px; border: 1px solid var(--p); background: color-mix(in srgb, var(--p) 18%, transparent); cursor: pointer; font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.g-buy b { color: var(--amb); }
.g-buy:hover:not(:disabled) { background: color-mix(in srgb, var(--p) 34%, transparent); }
.g-buy:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line-2); }
.g-buy:disabled b { color: var(--bad); }
.g-abils { display: grid; gap: 6px; margin-top: 10px; }
.g-abil, .g-btn-w { height: 36px; border: 1px solid var(--mag); background: rgba(255, 43, 214, .14); cursor: pointer; font: 800 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.g-abil:disabled { opacity: .5; cursor: default; }
.g-btn-w { width: 100%; margin-top: 10px; border-color: var(--amb); background: rgba(255, 178, 63, .12); }
.g-panel-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.g-panel-f label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.g-panel select, .g-set select { height: 30px; padding: 0 6px; border: 1px solid var(--line-2); background: #0d1017; color: var(--text); font: inherit; }
.g-sell { height: 32px; padding: 0 10px; border: 1px solid rgba(255, 59, 71, .5); background: rgba(255, 59, 71, .1); cursor: pointer; font: 700 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.g-sell:hover { background: rgba(255, 59, 71, .25); }

/* Gegner-Info, schwebende Zahlen, Banner */
.g-tip { position: absolute; left: 0; top: 0; display: grid; gap: 2px; padding: 7px 10px; border: 1px solid var(--line-2); background: rgba(9, 11, 16, .92); pointer-events: none; font-size: 11px; white-space: nowrap; }
.g-tip b { font: 800 13px/1.2 var(--display); }
.g-tip span { color: var(--muted); }
.g-tip .g-imm { color: var(--amb); }
.g-floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.g-float { position: absolute; translate: -50% -50%; font: 900 15px/1 var(--display); text-shadow: 0 1px 4px #000; animation: float-up 1.1s var(--ease) forwards; white-space: nowrap; }
.g-float--cash { color: var(--amb); }
.g-float--vault { color: var(--neon); }
.g-float--bad { color: var(--bad); font-size: 13px; }
@keyframes float-up { from { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } to { opacity: 0; transform: translateY(-34px); } }
.g-banner { position: absolute; left: 50%; top: 84px; translate: -50% 0; display: grid; justify-items: center; gap: 4px; padding: 10px 28px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); transform: translateY(-8px); text-align: center; }
.g-banner.is-on { opacity: 1; transform: none; }
.is-calm .g-hz.is-warn, .is-calm.is-critical .g-ico--life, .is-calm.is-critical [data-lives] { animation: none; }
.is-calm .g-banner { transition: opacity .2s; }
.g-banner b { font: 900 clamp(24px, 3.4vw, 40px)/1 var(--display); font-stretch: 120%; text-transform: uppercase; text-shadow: 0 0 24px rgba(var(--acc-rgb), .5), 0 2px 8px #000; }
.g-banner span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--neon); text-shadow: 0 1px 4px #000; }
.g-banner.is-boss b { color: var(--bad); text-shadow: 0 0 24px rgba(255, 59, 71, .6), 0 2px 8px #000; }
.g-banner.is-boss span { color: var(--bad); }
.game.is-hit::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(255, 59, 71, .55); animation: hit .5s ease-out forwards; }
@keyframes hit { to { opacity: 0; } }
.g-touch { position: absolute; left: 50%; bottom: 110px; translate: -50% 0; display: flex; gap: 8px; }

/* Menü und Ergebnis */
.g-modal { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 10, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.g-modal-in { width: min(520px, 100%); max-height: calc(100% - 32px); overflow-y: auto; }
.g-modal h2 { margin: 0 0 8px; font: 900 34px/1 var(--display); font-stretch: 120%; text-transform: uppercase; }
.g-modal h2.is-won { color: var(--neon); }
.g-modal h2.is-lost { color: var(--bad); }
.g-modal p { color: var(--muted); }
.g-set { display: grid; gap: 12px; margin: 14px 0; }
.g-set label { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.g-set input[type=range] { width: 200px; accent-color: var(--neon); }
.g-check { justify-content: flex-start !important; }
.g-check input { accent-color: var(--neon); }
.g-keys { font-size: 11px; line-height: 1.7; }
.g-modal-b { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.g-res { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.g-res div { padding: 8px 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.g-res .g-res-w { grid-column: 1 / -1; }
.g-res dt { font-size: 9.5px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.g-res dd { margin: 4px 0 0; font: 800 17px/1.2 var(--display); }
.g-note { font-size: 11px; }

/* Einsatz-Auswahl im Kommandozentrum */
.op--go { cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .2s, transform .2s var(--ease); }
.op--go:hover { border-color: var(--c); transform: translateY(-2px); }
.op--go .tag { color: var(--neon); }
.setup { width: min(760px, 100%); }
.setup-maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.setup-map, .setup-diff { position: relative; display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.setup-map[aria-pressed="true"], .setup-diff[aria-pressed="true"] { border-color: var(--neon); box-shadow: inset 0 0 0 1px var(--neon); }
.setup-map:disabled, .setup-diff:disabled { opacity: .45; cursor: not-allowed; }
.setup-map b, .setup-diff b { font: 900 14px/1.1 var(--display); text-transform: uppercase; }
.setup-map small, .setup-diff small { color: var(--muted); font-size: 10.5px; }
.setup-diffs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 18px; }
.setup h3 { margin: 16px 0 0; font: 600 10px/1 var(--mono); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }

/* Phase 5: Gefahrenanzeige der Map, Boss-Leiste mit Totenköpfen und Schild, Paragon im Turm-Panel */
.g-hz { position: absolute; left: 50%; top: 52px; translate: -50% 0; padding: 4px 10px; border: 1px solid rgba(233, 237, 239, .16); background: rgba(9, 11, 16, .82); font: 700 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.g-hz.is-warn { color: var(--amb); border-color: var(--amb); animation: g-blink 1s steps(2) infinite; }
.g-hz.is-boss { color: var(--bad); border-color: rgba(255, 59, 71, .5); }
@keyframes g-blink { 50% { opacity: .55; } }
.g-boss { --c: var(--bad); position: absolute; left: 50%; top: 84px; translate: -50% 0; width: min(560px, calc(100% - 420px)); min-width: 260px; padding: 8px 12px 10px; border: 1px solid var(--c); background: rgba(9, 11, 16, .86); box-shadow: 0 0 24px rgba(0, 0, 0, .5); }
.g-boss-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.g-boss-h b { font: 900 18px/1 var(--display); font-stretch: 115%; text-transform: uppercase; color: var(--c); }
.g-boss-h span { font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.g-boss-bar { position: relative; height: 12px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.g-boss-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); transition: width .2s; }
.g-boss-bar s { position: absolute; left: 0; top: 0; height: 4px; background: #9fe8ff; box-shadow: 0 0 8px #9fe8ff; }
.g-boss-bar em { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; opacity: .8; }
.g-boss.is-cloak { opacity: .6; }
.g-para .g-xp i { background: #ffd23f; }
.g-para .g-path-h span:first-child { color: #ffd23f; }
.g-btn-para { border-color: #ffd23f !important; color: #ffd23f !important; }
.g-btn-para:hover:not(:disabled) { background: rgba(255, 210, 63, .14) !important; }
.g-para-need { color: var(--muted); }
.who-title { display: block; font: 600 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amb); font-style: normal; }
.mem-n .who-title { display: inline; margin-left: 6px; font-size: 9.5px; }
.cos { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.cos > div b { font: 800 12.5px/1.2 var(--display); }
.cos > div small { display: block; color: var(--muted); font-size: 10.5px; }
.cos.is-on b { color: var(--neon); }
.cos-t { display: grid; place-items: center; width: 34px; height: 22px; border: 1px solid var(--amb); color: var(--amb); font: 700 11px/1 var(--mono); }
.cos-swatch { width: 34px; height: 22px; border: 1px solid var(--line-2); background: linear-gradient(135deg, var(--a) 0 55%, var(--b) 55%); box-shadow: inset 0 0 0 2px var(--g), 0 0 10px var(--g); }

/* Mehrspieler-Leiste: Versus (Gegenüber, Senden) und Koop (Team) */
.g-side { position: absolute; left: 14px; top: 70px; width: 230px; max-height: calc(100% - 190px); overflow-y: auto; padding: 10px 12px; border: 1px solid rgba(233, 237, 239, .14); background: rgba(9, 11, 16, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11.5px; }
.g-side-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 4px 0 6px; padding-bottom: 5px; border-bottom: 1px dashed var(--line); }
.g-side-h span { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.g-side-h b { font: 900 14px/1 var(--display); color: var(--vio); overflow: hidden; text-overflow: ellipsis; }
.g-side-h small { font-size: 9.5px; color: var(--muted); }
.g-side-r { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.g-side-r span { color: var(--muted); }
.g-side-r.is-me span { color: var(--neon); }
.g-side-r .g-chips { color: var(--amb); }
.g-sends { display: grid; gap: 4px; }
.g-send { --c: var(--neon); display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid rgba(233, 237, 239, .14); border-left: 3px solid var(--c); background: rgba(0, 0, 0, .3); color: var(--text); font: 600 10.5px/1.2 var(--mono); text-align: left; cursor: pointer; }
.g-send:hover:not(:disabled) { background: rgba(255, 255, 255, .06); border-color: var(--c); }
.g-send:disabled { opacity: .4; cursor: not-allowed; }
.g-send small { color: var(--amb); white-space: nowrap; }
.g-send i { font-style: normal; color: var(--c); }

@media (max-width: 760px) {
  .g-boss { top: 76px; width: calc(100% - 16px); }
  .g-hz { top: 50px; font-size: 9px; }
  .g-side { top: 56px; left: 8px; width: 180px; max-height: 40%; }
  .g-top { left: 8px; right: 8px; top: 8px; gap: 6px; }
  .g-stat, .g-round, .g-ctl { height: 40px; padding: 0 8px; }
  .g-stat b { font-size: 17px; }
  .g-round { padding: 0 10px; }
  .g-round span { display: none; }
  .g-round b { font-size: 15px; white-space: nowrap; }
  .g-btn[data-cam] { display: none; }
  .g-go span { display: none; }
  .g-card { width: auto; padding: 6px 8px; }
  .g-card-n, .g-card kbd, .g-tab kbd { display: none; }
  .g-tab { padding: 5px 6px; font-size: 9px; letter-spacing: .04em; }
  .g-panel { left: 8px; right: 8px; top: auto; bottom: 92px; width: auto; max-height: 52%; }
  .g-powers { top: 60px; translate: 0 0; left: 8px; }
  .g-pow { min-width: 0; padding: 6px 8px; font-size: 10px; }
  .setup-maps, .setup-diffs { grid-template-columns: 1fr 1fr; }
}
.lite .g-stat, .lite .g-round, .lite .g-ctl, .lite .g-bar, .lite .g-panel, .lite .g-modal { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ----------------------------------------------------- Fortschritt -- */
.lvl { margin: 10px 0; }
.lvl-bar { height: 6px; background: var(--line-2); }
.lvl-bar i { display: block; height: 100%; background: var(--neon); box-shadow: 0 0 8px var(--glow); }
.lvl small, .muted { color: var(--muted); font-size: 11px; }
.who-btns { display: flex; gap: 8px; margin-top: 10px; }
.setup .medal { color: #ffd23f; }
.loadout { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 10px 0; }
.load { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.load span { font-weight: 700; font-size: 12px; }
.load small { grid-column: 1; color: var(--muted); }
.load-c { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 6px; }
.page { width: min(1180px, 100%); align-self: start; margin-top: 3vh; display: grid; gap: 18px; }
.page-h { display: flex; align-items: center; gap: 12px; }
.page-h h1 { margin: 0 auto 0 0; font: 900 clamp(28px, 4vw, 46px)/1 var(--display); font-stretch: 120%; text-transform: uppercase; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.win h3 { margin: 14px 0 6px; font: 600 10px/1 var(--mono); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.medals { width: 100%; border-collapse: collapse; font-size: 11px; }
.medals th { color: var(--muted); font-weight: 600; font-size: 9.5px; letter-spacing: .08em; text-align: center; padding: 4px; }
.medals td { padding: 5px 4px; border-top: 1px dashed var(--line); text-align: center; color: var(--dim); }
.medals td:first-child { text-align: left; color: var(--text); }
.medals td.is-on { color: #ffd23f; text-shadow: 0 0 8px rgba(255, 210, 63, .6); }
.hist { display: grid; grid-template-columns: 90px 1fr; gap: 2px 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 11.5px; }
.hist b.ok { color: var(--neon); } .hist b.bad { color: var(--bad); }
.hist small { grid-column: 2; color: var(--muted); }
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ach { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .22); opacity: .5; }
.ach.is-on { opacity: 1; border-color: rgba(255, 210, 63, .5); }
.ach b { font: 800 12.5px/1.2 var(--display); }
.ach.is-on b { color: #ffd23f; }
.ach small { color: var(--muted); font-size: 11px; }
.ach span { color: var(--amb); font-size: 10.5px; font-weight: 700; }
.tabs--page { grid-template-columns: repeat(5, 1fr); margin: 0; }
.arsenal { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.arsenal p { margin: 0 0 10px; font-size: 12px; color: #c3cbd4; }
.txp { display: grid; grid-template-columns: 1fr 90px 48px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.txp b { font: 800 12.5px/1.2 var(--display); }
.txp small { display: block; color: var(--muted); font-size: 10.5px; }
.txp span { text-align: right; font-size: 11px; color: var(--muted); }
.txp .lvl-bar i { background: var(--c, var(--neon)); }
.perk { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.perk b { font: 800 12.5px/1.2 var(--display); }
.perk small { display: block; color: var(--muted); font-size: 11px; }
.perk.is-on b { color: var(--c, var(--neon)); }
@media (max-width: 980px) { .grid3 { grid-template-columns: 1fr; } .tabs--page { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------- Responsiv -- */
@media (max-width: 1180px) {
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chain { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vehicles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lobby { grid-template-columns: 1fr 1fr; }
  .lobby > .col:nth-of-type(2) { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 900px) {
  .hud-burger { display: block; }
  .hud-nav { display: none; position: absolute; left: 0; right: 0; top: 56px; flex-direction: column; margin: 0; padding: 8px 14px 14px; background: rgba(9, 11, 16, .97); border-bottom: 1px solid var(--line); }
  .hud.is-open .hud-nav { display: flex; }
  .hud-nav a { padding: 12px 8px; font-size: 12px; }
  .hud-theme, .hud .chip--sys { display: none; }
  .maps { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hud { gap: 8px; padding: 0 14px; }
  .wrap { padding: 0 16px; }
  .cats, .maps, .cards, .vehicles, .lobby, .ops { grid-template-columns: 1fr; }
  .chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero::before { background: rgba(9, 11, 16, .6); }
  .news li, .kv li { grid-template-columns: 1fr; gap: 4px; }
  .hero-in { padding-bottom: 60px; }
  .hero-cta .btn { width: 100%; }
  .hud-right .btn { display: none; }
  .foot-ver { margin-left: 0; }
}

/* Touch-Geräte und Bewegung reduzieren: keine Dauer-Animationen, kein Weichzeichner */
.lite .rain, .lite .avs { display: none; }
.lite .hud { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(9, 11, 16, .97); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rain, .avs { display: none; }
}

/* sehr schmale Handys: HUD-Leiste muss mit Menü-Knopf in 390 px passen (steht zuletzt, damit es die 760-px-Regeln überstimmt) */
@media (max-width: 420px) {
  .g-top { gap: 4px; left: 6px; right: 6px; }
  .g-stat, .g-round, .g-ctl { padding: 0 6px; gap: 5px; }
  .g-stat b { font-size: 15px; min-width: 0; }
  .g-ico { width: 16px; height: 16px; }
  .g-btn { width: 32px; padding: 0; }
}