/* Dycode Gunslinger — frontend styles (rig: examine idle + rotating gun arm, transparent) */

.dcgs {
  position: relative;
  z-index: 2;                 /* keep the character above following content */
  width: 100%;
  background: transparent;
  overflow: visible;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  color: var(--dcgs-reticle, #fff);
}

.dcgs__stage {
  position: relative;
  width: 100%;
  /* extra top headroom so the raised gun is never clipped */
  height: min(calc(var(--dcgs-h, 560px) * 1.18 + 16px), 94vh);
  min-height: 260px;
  overflow: visible;
  cursor: crosshair;
}

/* Bullet-hole layer (clipped so holes stay inside the interactive area). */
.dcgs__holes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }

/* Character anchoring. */
.dcgs__char {
  position: absolute;
  bottom: 0;
  height: min(var(--dcgs-h, 560px), 80vh);
  z-index: 2;
  will-change: transform;
}
.dcgs--pos-right  .dcgs__char { right: clamp(10px, 7%, 130px); }
.dcgs--pos-left   .dcgs__char { left:  clamp(10px, 7%, 130px); }
.dcgs--pos-center .dcgs__char { left: 50%; transform: translateX(-50%); }

.dcgs__figure { position: relative; height: 100%; transform-origin: 55% 82%; will-change: transform; }

/* Body layer (aim state) — sizes the figure. */
.dcgs__body {
  position: relative;
  height: 100%;
  width: auto;
  display: block;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  -webkit-user-drag: none; user-drag: none;
  filter: drop-shadow(0 24px 26px rgba(0,0,0,.42));
}

/* Idle "examining the gun" pose (shown at rest). */
.dcgs__idle {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: auto;
  opacity: 1;
  transition: opacity .3s ease;
  pointer-events: none;
  -webkit-user-drag: none; user-drag: none;
  filter: drop-shadow(0 24px 26px rgba(0,0,0,.42));
}

/* Gun-arm layer (aim state) — rotates about the shoulder pivot. No shadow (avoids a hard cut edge). */
.dcgs__arm {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  will-change: transform;
  /* transform-origin set inline by JS */
}
.dcgs__armimg {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: auto;
  pointer-events: none;
  -webkit-user-drag: none; user-drag: none;
}

/* Cross-fade between idle examine and the aim rig. */
.dcgs.is-aiming .dcgs__idle { opacity: 0; }
.dcgs.is-aiming .dcgs__body { opacity: 1; }
.dcgs.is-aiming .dcgs__arm  { opacity: 1; }

/* Muzzle flash at the barrel tip. */
.dcgs__muzzle {
  position: absolute;
  width: clamp(56px, 15%, 140px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(.3);
  opacity: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, var(--dcgs-muzzle, #ffcc55) 26%, rgba(255,140,40,.65) 48%, rgba(255,90,20,0) 72%);
  mix-blend-mode: screen;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 3;
}
.dcgs__muzzle.is-fire { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .04s ease, transform .05s cubic-bezier(.2,1.5,.3,1); }

/* Bullet holes */
.dcgs__hole {
  position: absolute;
  transform: translate(-50%, -50%) scale(.15) rotate(var(--r, 0deg));
  opacity: 0;
  transition: transform .32s cubic-bezier(.18,1.5,.3,1), opacity .18s ease;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
.dcgs__hole.is-in  { transform: translate(-50%, -50%) scale(1) rotate(var(--r, 0deg)); opacity: .96; }
.dcgs__hole.is-out { opacity: 0; transition: opacity .6s ease; }

/* Impact flash ring */
.dcgs__impact {
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.4);
  opacity: .9;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,220,150,.5) 40%, rgba(255,255,255,0) 70%);
  transition: transform .35s ease-out, opacity .35s ease-out;
}
.dcgs__impact.is-go { transform: translate(-50%, -50%) scale(4.2); opacity: 0; }

/* Reticle (opacity/cursor driven by JS so it also works inside an arena container). */
.dcgs__reticle {
  position: absolute;
  left: 0; top: 0;
  width: clamp(46px, 6vw, 74px);
  aspect-ratio: 1 / 1;
  transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%);
  color: var(--dcgs-reticle, #fff);
  pointer-events: none;
  opacity: 0;
  z-index: 6;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.6));
  transition: opacity .25s ease;
}

/* Hint */
.dcgs__hint {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 6;
  font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  background: rgba(0,0,0,.28);
  padding: 7px 12px; border-radius: 999px;
  pointer-events: none;
  opacity: 1; transition: opacity .3s ease;
}
.dcgs.is-aiming .dcgs__hint, .dcgs.has-fired .dcgs__hint { opacity: 0; }