/* =========================================================================
   Club 30 Range · Spiel-Styles (Prefix .cg-)
   High-class, dunkles Glas-Design mit Orange-Akzent, passend zum Club-30-Theme.
   Tokens lokal gespiegelt, damit selbstcontained (kein Theme-CSS nötig).

   © 2026 Club 30. Alle Rechte vorbehalten. Spiel im Auftrag von Club 30
   entwickelt von Brandsta Media (brandsta-media.com). Alle Grafiken/Mechaniken
   eigenproduziert; Sounds vollständig prozedural via Web Audio API erzeugt
   (keine Fremd-Samples/keine Lizenzpflicht). Keine externen Requests, keine
   Cookies, keine personenbezogenen Daten – DSGVO-konform. Einzige Speicherung:
   Ton-Einstellungen in localStorage (funktional).
   ========================================================================= */
.cg-shell{
  /* lokale Tokens (Spiegel des Themes) */
  --cg-bg:#08080a;
  --cg-bg2:#0e0c12;
  --cg-text:#f4f3f0;
  --cg-mut:#9a9aa2;
  --cg-acc:#f5821f;
  --cg-acc-hi:#ff9836;
  --cg-line:rgba(255,255,255,.12);
  --cg-soft:rgba(245,130,31,.13);
  --cg-card:linear-gradient(168deg,#15121a,#0b090c);
  --cg-ease:cubic-bezier(.22,1,.36,1);

  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--cg-text);
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-user-select:none;
}
.cg-shell *{box-sizing:border-box;margin:0;padding:0}
.cg-shell svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}

/* =========================================================================
   HUD
   ========================================================================= */
.cg-hud{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 46px 12px 16px;  /* rechts Platz für den Schließen-Button (Timer nicht verdeckt) */
  background:linear-gradient(180deg,rgba(21,18,26,.92),rgba(11,9,12,.92));
  border:1px solid var(--cg-line);
  border-radius:16px;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
}
.cg-hud-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 14px;border-radius:11px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  min-height:46px;
}
.cg-hud .cg-ico{width:20px;height:20px;color:var(--cg-acc);flex:0 0 auto}
.cg-hud-lbl{font-family:'Oswald',sans-serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cg-mut)}
.cg-hud-val{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.02rem;letter-spacing:.02em;color:#fff;line-height:1}
.cg-hud-weapon .cg-hud-val{color:var(--cg-acc-hi)}
.cg-hud-score{flex:1 1 220px;min-width:200px}
.cg-hud-scorebox{display:flex;flex-direction:column;gap:5px;flex:1}
.cg-hud-sub{font-family:'Oswald',sans-serif;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cg-mut)}
.cg-hud-ammo{margin-left:auto}
.cg-hud-ammo .cg-hud-val{min-width:54px}
.cg-ammo-dots{display:flex;gap:4px;flex-wrap:wrap;max-width:96px}
.cg-ammo-dots i{width:8px;height:12px;border-radius:3px;background:rgba(255,255,255,.14);transition:background .15s var(--cg-ease)}
.cg-ammo-dots i.on{background:linear-gradient(180deg,var(--cg-acc-hi),var(--cg-acc));box-shadow:0 0 6px rgba(245,130,31,.5)}
.cg-hud-time .cg-hud-val{min-width:34px;text-align:right}
.cg-hud-time.cg-low .cg-hud-val{color:#ff5b4d}
.cg-hud-time.cg-low .cg-ico{color:#ff5b4d;animation:cg-pulse .9s var(--cg-ease) infinite}
@keyframes cg-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.9)}}

/* Fortschrittsbalken (Ziel) */
.cg-bar{position:relative;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.cg-bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:6px;background:linear-gradient(90deg,var(--cg-acc),var(--cg-acc-hi));box-shadow:0 0 10px rgba(245,130,31,.5);transition:width .35s var(--cg-ease)}
.cg-bar-goal{width:100%}

/* =========================================================================
   SPIELFELD (Bühne)
   ========================================================================= */
.cg-stage{
  position:relative;
  width:100%;
  height:clamp(360px,56vh,540px);
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(245,130,31,.10),transparent 55%),
    radial-gradient(80% 60% at 50% 120%,rgba(245,130,31,.06),transparent 60%),
    linear-gradient(180deg,#0e0c12,#08080a 70%);
  border:1px solid var(--cg-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -30px rgba(0,0,0,.85);
  cursor:none;
  touch-action:manipulation;
}
/* =========================================================================
   SCHIESSSTAND-SZENE (HINTER den Zielscheiben, z-index 0, pointer-events:none)
   Perspektivische Bahn -> Rückwand mit gerahmten Club-30-Plakaten.
   ========================================================================= */
.cg-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* Decke + dezente Strahler */
.cg-scene-ceiling{
  position:absolute;left:0;right:0;top:0;height:24%;
  background:
    linear-gradient(180deg,#15131b,#0d0b11 70%,transparent),
    repeating-linear-gradient(90deg,transparent 0 70px,rgba(0,0,0,.25) 70px 72px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.cg-scene-light{
  position:absolute;top:0;width:30%;height:62%;
  background:linear-gradient(180deg,rgba(245,130,31,.16),rgba(245,130,31,.05) 38%,transparent 72%);
  filter:blur(6px);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);opacity:.8;
}
.cg-scene-light-1{left:6%}
.cg-scene-light-2{left:35%;width:30%}
.cg-scene-light-3{right:6%}
.cg-scene-light-2::after{content:'';position:absolute;left:50%;top:2px;transform:translateX(-50%);
  width:54px;height:7px;border-radius:4px;background:linear-gradient(90deg,var(--cg-acc),var(--cg-acc-hi));
  box-shadow:0 0 16px rgba(245,130,31,.7)}

/* Seitenwände / Kabinen-Andeutung (Fluchtperspektive) */
.cg-scene-wall-l,.cg-scene-wall-r{position:absolute;top:0;bottom:0;width:34%;
  background:linear-gradient(90deg,#0a090d,#100e15);}
.cg-scene-wall-l{left:0;clip-path:polygon(0 0,46% 26%,46% 74%,0 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04)}
.cg-scene-wall-r{right:0;clip-path:polygon(100% 0,54% 26%,54% 74%,100% 100%);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.04)}
/* Kabinen-Trennwände (Striche an den Seitenwänden) */
.cg-scene-wall-l::before,.cg-scene-wall-r::before{content:'';position:absolute;inset:0;
  background-repeat:no-repeat}
.cg-scene-wall-l::before{background:
  linear-gradient(180deg,transparent 30%,rgba(255,255,255,.05) 30%,transparent 31%) left/100% 100%}

/* Rückwand (Fluchtpunkt-Fläche mittig hinten) */
.cg-scene-backwall{
  position:absolute;left:50%;top:26%;transform:translateX(-50%);
  width:48%;height:48%;
  display:flex;align-items:center;justify-content:center;gap:4%;
  padding:0 2%;
  background:linear-gradient(180deg,#191721,#100e15);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6),0 0 0 6px rgba(0,0,0,.3);
}

/* gerahmte Club-30-Plakate an der Rückwand – DEUTLICH sichtbar */
.cg-poster{
  position:relative;border-radius:5px;overflow:hidden;
  background:linear-gradient(168deg,#1d1a24,#121017);
  border:2px solid rgba(245,130,31,.45);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.05);
}
.cg-poster-main{flex:0 0 44%;height:64%;display:flex;align-items:center;justify-content:center;
  padding:8px 9px;opacity:.9}
.cg-poster-logo{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.cg-poster-main .cg-logo-text{justify-content:center;font-size:clamp(.8rem,2.2vw,1.3rem)}
.cg-poster-side{flex:0 0 22%;height:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:4px 5px;opacity:.82}
.cg-poster-text .cg-poster-1{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:#fff;font-size:clamp(.52rem,1.5vw,.84rem);line-height:1.05}
.cg-poster-text .cg-poster-2{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.07em;color:var(--cg-acc-hi);font-size:clamp(.42rem,1.1vw,.62rem);line-height:1.15;margin-top:3px}
.cg-poster-est .cg-poster-2{font-weight:700;font-size:clamp(.6rem,1.8vw,1rem);color:#fff}
.cg-poster-est .cg-poster-1{color:var(--cg-acc-hi)}

/* Boden mit Fluchtlinien (Schießbahn) */
.cg-scene-floor{
  position:absolute;inset:auto 0 0 0;height:38%;
  background:
    linear-gradient(180deg,transparent,rgba(0,0,0,.45)),
    linear-gradient(180deg,#14121a,#0b0a0f);
  transform:perspective(440px) rotateX(60deg);
  transform-origin:bottom;
}
.cg-scene-lanes{
  position:absolute;inset:auto 0 0 0;height:38%;
  background:
    repeating-linear-gradient(90deg,transparent 0 58px,rgba(255,255,255,.045) 58px 59px),
    repeating-linear-gradient(0deg,transparent 0 30px,rgba(255,255,255,.03) 30px 31px);
  transform:perspective(440px) rotateX(60deg);
  transform-origin:bottom;opacity:.7;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);
  mask-image:linear-gradient(180deg,transparent,#000 40%);
}

.cg-stage-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 40%,rgba(245,130,31,.07),transparent 70%)}
.cg-layer{position:absolute;inset:0;pointer-events:none;z-index:3}
.cg-layer-fx{z-index:6}

/* Fadenkreuz-Cursor */
.cg-crosshair{position:absolute;width:46px;height:46px;z-index:8;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .12s}
.cg-crosshair::before,.cg-crosshair::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
.cg-crosshair::before{width:46px;height:46px;border:1.5px solid rgba(245,130,31,.55);box-shadow:0 0 10px rgba(245,130,31,.35)}
.cg-crosshair::after{width:5px;height:5px;background:var(--cg-acc-hi);box-shadow:0 0 8px rgba(245,130,31,.9)}
.cg-crosshair i{position:absolute;left:50%;top:50%;background:rgba(245,130,31,.7)}
.cg-crosshair i:nth-child(1){width:2px;height:14px;transform:translate(-50%,-50%);box-shadow:0 -16px 0 rgba(245,130,31,.7),0 16px 0 rgba(245,130,31,.7)}
.cg-crosshair i:nth-child(2){width:14px;height:2px;transform:translate(-50%,-50%);box-shadow:-16px 0 0 rgba(245,130,31,.7),16px 0 0 rgba(245,130,31,.7)}
.cg-crosshair.cg-miss{animation:cg-shake .3s var(--cg-ease)}
.cg-crosshair.cg-miss::before{border-color:rgba(255,91,77,.8)}
@keyframes cg-shake{0%,100%{}25%{transform:translate(-50%,-50%) translateX(-4px)}75%{transform:translate(-50%,-50%) translateX(4px)}}

/* =========================================================================
   ZIELSCHEIBEN (konzentrische Ringe)
   ========================================================================= */
.cg-target{
  position:absolute;
  transform:translate(-50%,-50%) scale(.6);
  opacity:0;
  border-radius:50%;
  pointer-events:none;            /* Treffer per Hit-Test im JS */
  opacity:var(--cg-depth,1);
  will-change:transform,opacity;
  background:
    radial-gradient(circle at 50% 50%,
      #f5821f 0 12%,
      #fff 12% 17%,
      #1a1a1e 17% 31%,
      #f4f3f0 31% 45%,
      #b5500a 45% 60%,
      #f4f3f0 60% 75%,
      #2a2a30 75% 90%,
      rgba(255,255,255,.5) 90% 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 8px 22px rgba(0,0,0,.55),
    inset 0 0 14px rgba(0,0,0,.4);
  filter:saturate(1.05);
}
.cg-target .cg-bull{
  position:absolute;left:50%;top:50%;width:8%;height:8%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:#0c0c0e;box-shadow:0 0 4px rgba(0,0,0,.8);
}
/* Treffer: kurzer Puls + ausblenden */
.cg-target.cg-hit{animation:cg-hit .26s var(--cg-ease) forwards}
@keyframes cg-hit{
  0%{filter:brightness(1.6) saturate(1.2)}
  100%{transform:translate(-50%,-50%) scale(1.35);opacity:0;filter:brightness(2)}
}

/* Treffer-Ring (FX) */
.cg-hitring{position:absolute;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--cg-acc-hi);pointer-events:none;animation:cg-ring .5s var(--cg-ease) forwards}
@keyframes cg-ring{0%{opacity:.9;width:14px;height:14px}100%{opacity:0;width:84px;height:84px;border-width:1px}}

/* Mündungsblitz */
.cg-muzzle{position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,236,205,.95),rgba(245,130,31,.6) 45%,transparent 70%);animation:cg-flash .13s ease-out forwards}
@keyframes cg-flash{0%{opacity:.95;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}

/* Punkte-Popup */
.cg-pop{position:absolute;transform:translate(-50%,-50%);pointer-events:none;font-family:'Oswald',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.03em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);white-space:nowrap}
.cg-pop-bull{color:var(--cg-acc-hi);font-size:1.25rem;text-shadow:0 0 12px rgba(245,130,31,.7),0 2px 8px rgba(0,0,0,.8)}
.cg-pop-x2{color:#ffe2bd}

/* =========================================================================
   NACHLADEN (weapon-spezifische Animation: Magazin / Trommel)
   ========================================================================= */
/* Nachladen: nur die Trommel/das Magazin, kompakt unten rechts, KEIN Panel/Label/Balken.
   Nur während des Nachladens sichtbar (reload.hidden -> Catch-all blendet aus). */
.cg-reload{
  position:absolute;right:16px;bottom:14px;left:auto;transform:none;z-index:7;
  display:flex;align-items:flex-end;justify-content:center;
  background:none;border:none;box-shadow:none;padding:0;width:auto;
  pointer-events:none;                 /* blockiert das Spielfeld nicht */
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7));   /* Lesbarkeit ohne Box */
}
.cg-shell [hidden],.cg-reload[hidden]{display:none!important}

/* gemeinsame Visualisierungs-Bühne (kompakt) */
.cg-reload-visual{display:flex;align-items:flex-end;justify-content:center}

/* ---- Reptile (Pistole): Magazin füllt sich von unten ---- */
.cg-rl-pist .cg-rl-mag{position:relative;display:flex;flex-direction:column;align-items:center}
.cg-rl-mag-body{
  position:relative;width:30px;height:66px;border-radius:5px 5px 7px 7px;overflow:hidden;
  background:linear-gradient(180deg,#23202a,#15131a);
  border:1.5px solid rgba(255,255,255,.16);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
}
.cg-rl-lips{width:35px;height:6px;margin-top:-3px;border-radius:3px;
  background:linear-gradient(180deg,#2b2832,#1a1820);border:1.5px solid rgba(255,255,255,.16);border-bottom:none}
/* Patronen als kompakte Striche (kompakt auch bei großem Magazin) */
.cg-rl-rounds{position:absolute;left:4px;right:4px;bottom:4px;top:4px;
  display:flex;flex-direction:column-reverse;justify-content:flex-start;gap:1.5px}
.cg-rl-round{display:block;flex:1 1 0;min-height:2px;border-radius:2px;
  background:rgba(255,255,255,.10);transition:background .12s var(--cg-ease),box-shadow .12s}
.cg-rl-round.cg-loaded{background:linear-gradient(90deg,var(--cg-acc-hi),var(--cg-acc));
  box-shadow:0 0 5px rgba(245,130,31,.55)}
/* Follower (Feder/Platte) wandert hoch */
.cg-rl-follower{position:absolute;left:3px;right:3px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.55);box-shadow:0 0 6px rgba(255,255,255,.4);
  transition:bottom .12s var(--cg-ease)}
/* Abschluss: kurzer "rack"-Blitz */
.cg-rl-pist.cg-rl-done .cg-rl-mag{animation:cg-rl-rack .22s var(--cg-ease)}
@keyframes cg-rl-rack{0%{transform:translateY(0)}40%{transform:translateY(-5px)}100%{transform:translateY(0)}}

/* ---- RL Range (Revolver): Trommel mit radialen Kammern ---- */
.cg-rl-rev .cg-rl-svg{width:70px;height:70px;display:block;overflow:visible}
.cg-rl-rev [data-rldrum]{transform-box:fill-box;transform-origin:center;transition:transform .1s linear}
.cg-rl-drum{fill:#1b1922;stroke:rgba(255,255,255,.18);stroke-width:2.5}
.cg-rl-hub{fill:#2a2732;stroke:rgba(255,255,255,.18);stroke-width:2}
.cg-rl-cell{fill:rgba(0,0,0,.55);stroke:rgba(255,255,255,.16);stroke-width:1.5;transition:fill .12s var(--cg-ease)}
.cg-rl-cell.cg-loaded{fill:#f5821f;stroke:var(--cg-acc-hi);
  filter:drop-shadow(0 0 4px rgba(245,130,31,.6))}
.cg-rl-extra{fill:#fff;stroke:none;font-family:'Oswald',sans-serif;font-weight:700;font-size:15px}
/* Abschluss: Trommel schnappt zu */
.cg-rl-rev.cg-rl-done .cg-rl-svg{animation:cg-rl-snap .2s var(--cg-ease)}
@keyframes cg-rl-snap{0%{transform:scale(1)}45%{transform:scale(.92)}100%{transform:scale(1)}}

/* Level-Banner */
.cg-banner{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:18px 34px;border-radius:16px;text-align:center;pointer-events:none;
  background:linear-gradient(168deg,rgba(21,18,26,.94),rgba(11,9,12,.9));
  border:1px solid rgba(245,130,31,.3);
  box-shadow:0 0 40px rgba(245,130,31,.16),0 20px 50px -24px rgba(0,0,0,.8);
}
.cg-banner strong{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.9rem;letter-spacing:.04em;color:#fff}
.cg-banner span{font-size:.86rem;color:var(--cg-mut)}
.cg-banner.cg-out{opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .4s,transform .4s}

/* =========================================================================
   OVERLAYS (Start / Wahl / Perk / Werbung)
   ========================================================================= */
.cg-overlay{position:absolute;inset:0;z-index:20;display:flex;cursor:default}
.cg-overlay[hidden]{display:none}
.cg-ov-center{align-items:safe center;justify-content:safe center;padding:20px;overflow-y:auto;
  background:radial-gradient(80% 80% at 50% 30%,rgba(14,12,18,.86),rgba(8,8,10,.96));
  backdrop-filter:blur(8px) saturate(1.1);
}

.cg-kicker{font-family:'Oswald',sans-serif;font-weight:500;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cg-acc);margin-bottom:14px}
.cg-title{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(2.2rem,6vw,3.4rem);line-height:.94;letter-spacing:.01em;color:#fff;margin-bottom:16px}
.cg-title .cg-accent{background:linear-gradient(90deg,#b5500a,#f5821f,#ffe2bd,#f5821f,#b5500a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:cg-grad 6s linear infinite}
@keyframes cg-grad{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.cg-sub-title{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.5rem,3.4vw,2.1rem);color:#fff;margin-bottom:10px;letter-spacing:.02em}
.cg-lead{color:#cfcfd4;font-size:1.02rem;line-height:1.6;max-width:44ch;margin:0 auto 24px}
.cg-hint{color:var(--cg-mut);font-size:.82rem;margin-top:14px}

/* Panel (Start) */
.cg-panel{max-width:540px;text-align:center;padding:8px}

/* Start: Club-30-Logo prominent über dem Titel */
.cg-start-logo{display:flex;justify-content:center;margin-bottom:14px}
.cg-brand-logo{display:block;width:clamp(140px,42vw,168px);height:auto;object-fit:contain;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}
/* Titel "Range" als große Spielname-Headline */
.cg-ov-start .cg-title{font-size:clamp(2.6rem,8vw,4.2rem);margin-bottom:14px}

/* Text-Fallback-Schriftzug "CLUB 30" (wenn keine Logo-PNG vorhanden) */
.cg-logo-text{display:inline-flex;align-items:center;gap:.4em;font-family:'Oswald',sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1}
.cg-logo-text b{font-weight:700;color:#f4f3f0}
.cg-logo-text i{font-style:normal;font-weight:700;color:#08080a;background:var(--cg-acc);
  border-radius:999px;padding:.06em .42em;box-shadow:0 0 0 2px var(--cg-acc-hi) inset}
.cg-start-logo .cg-logo-text{font-size:clamp(2rem,6vw,2.8rem)}

/* Dezente Copyright-Zeile (Start + End/Ad) */
.cg-copyright{margin-top:18px;font-family:'Inter',sans-serif;font-size:.68rem;letter-spacing:.04em;
  color:var(--cg-mut);opacity:.62}
.cg-ad .cg-copyright{margin-top:10px}

/* Buttons */
.cg-btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.6rem;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.95rem 1.8rem;border:1px solid transparent;background:transparent;cursor:pointer;color:var(--cg-text);
  text-decoration:none;border-radius:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:transform .25s var(--cg-ease),box-shadow .25s var(--cg-ease),color .25s,border-color .25s;
}
.cg-btn svg{width:18px;height:18px}
.cg-btn-primary{background:linear-gradient(135deg,#ff9836 0%,#f5821f 52%,#d96a10 100%);color:#1c1305;box-shadow:0 6px 20px rgba(245,130,31,.34),inset 0 1px 0 rgba(255,255,255,.3)}
.cg-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(245,130,31,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.cg-btn-primary svg{transition:transform .25s var(--cg-ease)}
.cg-btn-primary:hover svg{transform:translateX(4px)}
.cg-btn-ghost{color:var(--cg-text);border-color:rgba(245,130,31,.5);background:rgba(255,255,255,.02)}
.cg-btn-ghost:hover{color:#fff;border-color:var(--cg-acc);background:rgba(245,130,31,.1)}

/* =========================================================================
   TON-EINSTELLUNGEN (Start-Zeile, In-Game-Toggle, Popover)
   ========================================================================= */
.cg-snd{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.cg-snd-start{margin-top:20px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--cg-line)}
.cg-snd-pop{flex-direction:column;align-items:stretch;gap:10px}
.cg-snd-toggle{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cg-mut);background:rgba(255,255,255,.03);
  border:1px solid var(--cg-line);border-radius:30px;padding:7px 13px;
  transition:color .2s,border-color .2s,background .2s;
}
.cg-snd-toggle .cg-snd-ico{width:16px;height:16px;color:currentColor;flex:0 0 auto}
.cg-snd-toggle:hover{color:var(--cg-text);border-color:rgba(245,130,31,.4)}
.cg-snd-toggle.cg-on{color:#1c1305;background:linear-gradient(135deg,#ff9836,#f5821f);border-color:transparent;
  box-shadow:0 4px 14px rgba(245,130,31,.32)}
.cg-snd-toggle[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
.cg-snd-vol{display:inline-flex;align-items:center;gap:8px;color:var(--cg-mut)}
.cg-snd-vol .cg-snd-ico{width:16px;height:16px;color:var(--cg-acc);flex:0 0 auto}
.cg-snd-vol input[type=range]{
  -webkit-appearance:none;appearance:none;height:5px;width:108px;border-radius:6px;cursor:pointer;
  background:linear-gradient(90deg,var(--cg-acc),var(--cg-acc-hi));outline:none;
}
.cg-snd-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--cg-acc);
  box-shadow:0 0 8px rgba(245,130,31,.6);cursor:pointer}
.cg-snd-vol input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:#fff;border:2px solid var(--cg-acc);box-shadow:0 0 8px rgba(245,130,31,.6);cursor:pointer}
.cg-snd-vol input[type=range][disabled]{opacity:.4;cursor:not-allowed}

/* In-Game Lautsprecher-Icon (Ecke der Bühne) */
.cg-sound-toggle{
  position:absolute;right:12px;bottom:12px;z-index:9;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;cursor:pointer;color:var(--cg-acc);
  background:linear-gradient(168deg,rgba(21,18,26,.88),rgba(11,9,12,.88));
  border:1px solid var(--cg-line);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.8);
  transition:color .2s,border-color .2s,transform .2s var(--cg-ease);
}
.cg-sound-toggle svg{width:19px;height:19px}
.cg-sound-toggle:hover{color:var(--cg-acc-hi);border-color:rgba(245,130,31,.5);transform:translateY(-1px)}
.cg-sound-toggle.cg-muted{color:var(--cg-mut)}

/* In-Game Ton-Popover (über dem Lautsprecher-Icon) */
.cg-sound-pop{
  position:absolute;right:12px;bottom:58px;z-index:10;
  padding:12px 13px;border-radius:14px;
  background:linear-gradient(168deg,rgba(21,18,26,.97),rgba(11,9,12,.97));
  border:1px solid var(--cg-line);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.85);
  animation:cg-in .3s var(--cg-ease) both;
}
.cg-sound-pop[hidden]{display:none}

/* ---- Waffenwahl ---- */
.cg-choose-wrap{width:100%;max-width:760px;text-align:center}
.cg-wgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0 6px}
.cg-wcard{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;
  padding:22px 22px 18px;border-radius:16px;cursor:pointer;
  background:var(--cg-card);border:1px solid var(--cg-line);color:var(--cg-text);
  box-shadow:0 16px 40px -26px rgba(0,0,0,.8);
  transition:transform .3s var(--cg-ease),border-color .3s,box-shadow .3s;
}
.cg-wcard:hover{transform:translateY(-4px);border-color:rgba(245,130,31,.5);box-shadow:0 22px 50px -24px rgba(245,130,31,.35),0 0 0 1px rgba(245,130,31,.25)}
.cg-wicon{width:48px;height:48px;color:var(--cg-acc);padding:9px;border-radius:12px;background:var(--cg-soft);border:1px solid rgba(245,130,31,.25)}
.cg-wname{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.45rem;color:#fff;letter-spacing:.02em}
.cg-wsub{font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cg-acc)}
.cg-wdesc{color:var(--cg-mut);font-size:.9rem;line-height:1.5}
.cg-wstats{display:flex;gap:16px;margin-top:6px;width:100%}
.cg-wstats span{display:flex;flex-direction:column;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cg-mut);font-family:'Oswald',sans-serif}
.cg-wstats b{font-size:1.05rem;color:#fff;letter-spacing:.01em}
.cg-wgo{margin-top:12px;display:inline-flex;align-items:center;gap:.5rem;font-family:'Oswald',sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cg-acc-hi)}
.cg-wgo svg{width:16px;height:16px;transition:transform .25s var(--cg-ease)}
.cg-wcard:hover .cg-wgo svg{transform:translateX(4px)}

/* ---- Perk-Auswahl ---- */
.cg-perk-wrap{width:100%;max-width:840px;text-align:center}
.cg-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 6px}
.cg-pcard{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;
  padding:20px 18px;border-radius:15px;cursor:pointer;min-height:172px;
  background:var(--cg-card);border:1px solid var(--cg-line);color:var(--cg-text);
  transition:transform .3s var(--cg-ease),border-color .3s,box-shadow .3s;
}
.cg-pcard:hover{transform:translateY(-4px);border-color:rgba(245,130,31,.5);box-shadow:0 18px 44px -24px rgba(245,130,31,.4)}
.cg-pcard-rev{border-color:rgba(245,130,31,.32);background:linear-gradient(168deg,#1a1119,#0c0809)}
.cg-pico{width:40px;height:40px;color:var(--cg-acc);padding:8px;border-radius:11px;background:var(--cg-soft);border:1px solid rgba(245,130,31,.25)}
.cg-pname{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.08rem;color:#fff;letter-spacing:.01em;line-height:1.2}
.cg-pname em{font-style:normal;font-size:.6rem;letter-spacing:.12em;color:var(--cg-acc);background:var(--cg-soft);padding:2px 6px;border-radius:5px;vertical-align:middle;margin-left:4px}
.cg-pdesc{color:var(--cg-mut);font-size:.85rem;line-height:1.45;flex:1}
.cg-plvl{font-family:'Oswald',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cg-acc-hi);display:inline-flex;align-items:center;gap:6px}
.cg-arrow-mini{display:inline-flex;width:15px;height:15px;color:var(--cg-acc)}
.cg-arrow-mini svg{width:15px;height:15px}

/* aktive Perks (Chips) */
.cg-active-perks{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--cg-line)}
.cg-active-lbl{font-family:'Oswald',sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cg-mut)}
.cg-chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--cg-text);padding:5px 11px;border-radius:30px;background:rgba(255,255,255,.04);border:1px solid var(--cg-line)}
.cg-chip b{font-family:'Oswald',sans-serif;color:var(--cg-acc-hi);font-size:.82rem}

/* =========================================================================
   WERBUNG (Brandsta Media)
   ========================================================================= */
.cg-ad{
  width:100%;max-width:540px;text-align:center;
  padding:22px 24px;border-radius:18px;
  background:var(--cg-card);
  border:1px solid var(--cg-line);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
}
.cg-ov-ad{background:radial-gradient(80% 80% at 50% 20%,rgba(14,12,18,.9),rgba(8,8,10,.97))}
.cg-ad-win .cg-ad{border-color:rgba(245,130,31,.45);box-shadow:0 0 60px rgba(245,130,31,.22),0 40px 80px -30px rgba(0,0,0,.9)}
/* Club-30-Logo klein oben im End-Screen (Spiel-Eigentümer) */
.cg-ad-owner{display:flex;justify-content:center;margin-bottom:8px}
.cg-ad-logo-club{display:block;width:clamp(82px,24vw,100px);height:auto;object-fit:contain;opacity:.92}
.cg-ad-owner .cg-logo-text{font-size:1.35rem}
.cg-ad-trophy{width:50px;height:50px;margin:0 auto 8px;color:var(--cg-acc);padding:10px;border-radius:50%;background:var(--cg-soft);border:1px solid rgba(245,130,31,.35);box-shadow:0 0 30px rgba(245,130,31,.3)}
.cg-ad-result{margin-bottom:14px}
.cg-ad-head{display:block;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.6rem,4vw,2.1rem);color:#fff;letter-spacing:.02em;line-height:1}
.cg-ad-win .cg-ad-head{background:linear-gradient(90deg,#b5500a,#f5821f,#ffe2bd,#f5821f,#b5500a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:cg-grad 6s linear infinite}
.cg-ad-sub{display:block;color:var(--cg-mut);font-size:.86rem;line-height:1.45;margin-top:6px;max-width:42ch;margin-left:auto;margin-right:auto}
.cg-ad-stats{display:flex;justify-content:center;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.cg-ad-stat{flex:1 1 96px;max-width:150px;display:flex;flex-direction:column;gap:3px;padding:9px 8px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid var(--cg-line)}
.cg-ad-stat b{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.28rem;color:var(--cg-acc-hi);letter-spacing:.01em}
.cg-ad-stat span{font-family:'Oswald',sans-serif;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cg-mut)}

.cg-ad-brand{padding-top:14px;border-top:1px solid var(--cg-line)}
.cg-ad-logo{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.2rem;letter-spacing:.04em;color:#fff;margin-bottom:6px}
.cg-ad-logo span{color:var(--cg-acc)}
.cg-ad-pitch{color:#cfcfd4;font-size:.85rem;line-height:1.5;max-width:46ch;margin:0 auto 14px}
.cg-ad-pitch b{color:#fff}
.cg-ad-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Konfetti (Sieg) */
.cg-confetti{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.cg-confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;opacity:.95;animation:cg-fall linear forwards}
@keyframes cg-fall{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(560px) rotate(540deg);opacity:0}}

/* =========================================================================
   Animationen (Einblenden)
   ========================================================================= */
.cg-anim-in{animation:cg-in .5s var(--cg-ease) both}
@keyframes cg-in{0%{opacity:0;transform:translateY(14px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
.cg-anim-pop{animation:cg-popin .4s var(--cg-ease) both}
@keyframes cg-popin{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* gestaffeltes Einblenden mehrerer Karten */
.cg-wgrid .cg-anim-in:nth-child(2),
.cg-pgrid .cg-anim-in:nth-child(2){animation-delay:.07s}
.cg-pgrid .cg-anim-in:nth-child(3){animation-delay:.14s}

/* =========================================================================
   RESPONSIV (Mobil – Touch = tippen zum Schießen)
   ========================================================================= */
@media (max-width:680px){
  .cg-hud{gap:7px;padding:10px 42px 10px 11px;border-radius:13px}
  .cg-hud-item{padding:7px 10px;min-height:42px;gap:7px}
  .cg-hud-val{font-size:.92rem}
  .cg-hud .cg-ico{width:17px;height:17px}
  .cg-hud-score{flex:1 1 100%;order:5}
  .cg-hud-ammo{margin-left:0}
  .cg-stage{height:clamp(320px,52vh,440px);border-radius:14px}
  .cg-wgrid{grid-template-columns:1fr;gap:12px}
  .cg-pgrid{grid-template-columns:1fr;gap:11px}
  .cg-pcard{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center}
  .cg-pico{width:36px;height:36px}
  .cg-pname{flex:1}
  .cg-pdesc{flex:1 1 100%}
  .cg-ad{padding:24px 18px}
  .cg-ad-stats{gap:8px}
  .cg-ad-stat{flex:1 1 90px;padding:11px 8px}
  .cg-ad-stat b{font-size:1.2rem}
  .cg-btn{padding:.85rem 1.4rem;font-size:.86rem}
  .cg-ad-actions{flex-direction:column}
  .cg-ad-actions .cg-btn{justify-content:center}
  /* Szene: Rückwand etwas größer, damit Plakate lesbar bleiben */
  .cg-scene-backwall{width:62%;top:24%;height:46%;gap:4%}
  .cg-reload{right:12px;bottom:12px}
  .cg-rl-rev .cg-rl-svg{width:62px;height:62px}
  .cg-rl-pist .cg-rl-mag-body{height:58px;width:28px}
  /* Ton-Zeile am Start kompakter */
  .cg-snd-start{gap:8px;padding:10px}
  .cg-snd-toggle{padding:6px 11px;font-size:.7rem}
  .cg-snd-vol input[type=range]{width:92px}
}

/* Touch-Geräte: kein „echter“ Cursor nötig, Fadenkreuz folgt dem Finger nur kurz */
@media (hover:none){
  .cg-stage{cursor:default}
}

/* Reduzierte Bewegung respektieren (betrifft NUR Animationen, nicht den Ton) */
@media (prefers-reduced-motion:reduce){
  .cg-anim-in,.cg-anim-pop,.cg-title .cg-accent,.cg-ad-win .cg-ad-head,.cg-confetti i,
  .cg-sound-pop,.cg-rl-pist.cg-rl-done .cg-rl-mag,.cg-rl-rev.cg-rl-done .cg-rl-svg{animation:none}
  .cg-target,.cg-rl-cell,.cg-rl-round,.cg-rl-follower,.cg-rl-rev [data-rldrum]{transition:none}
}