/* Erangel Zəbti — PUBG-tactical re-skin. Scoped under .erg-body so these
   custom properties never leak into the shared style.css palette other
   pages rely on. */
.erg-body {
  --erg-bg: #11140f;
  --erg-panel: #1a1f16;
  --erg-olive: #3a4a2e;
  --erg-olive-2: #4e6339;
  --erg-sand: #c9b183;
  --erg-sand-2: #e8d9b0;
  --erg-rust: #b5471f;
  --erg-danger: #ff4d3d;
  --erg-tracer: #ffe066;
  --erg-border: #2c3524;
  --erg-water: #0c2b33;
  height: 100%;
  overflow: hidden;
  background: var(--erg-bg);
}

.erg-topbar {
  background: linear-gradient(180deg, #171b12, #11140f);
  border-bottom: 1px solid var(--erg-border);
}
.erg-topbar .pill-btn { border-color: var(--erg-border); }
.erg-topbar .pill-primary {
  background: linear-gradient(135deg, var(--erg-olive-2), var(--erg-olive));
  color: var(--erg-sand-2);
  border-color: transparent;
}
.erg-topbar .pill-gold {
  background: linear-gradient(135deg, var(--erg-sand-2), var(--erg-sand));
  color: #241d05;
}
.erg-connect-form input {
  background: var(--erg-panel);
  border: 1px solid var(--erg-border);
  color: var(--erg-sand-2);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  width: 150px;
  font-family: inherit;
}
.erg-connect-form input:focus { outline: none; border-color: var(--erg-sand); }

.erg-main {
  height: calc(100% - 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(78, 99, 57, 0.18), transparent 60%),
    var(--erg-bg);
}

.erg-map-wrap {
  position: relative;
  height: 100%;
  max-width: 100%;
}

.erg-map-frame {
  height: 100%;
  border: 2px solid var(--erg-border);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 80px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  background: var(--erg-water);
}
/* small, punchy jitter on a successful hit — see erangel.js's shakeMap() */
.erg-map-frame.erg-shake { animation: ergShake 0.36s ease-out; }
@keyframes ergShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-11px, 7px); }
  22% { transform: translate(9px, -8px); }
  36% { transform: translate(-8px, -6px); }
  50% { transform: translate(8px, 6px); }
  64% { transform: translate(-5px, -4px); }
  78% { transform: translate(4px, 3px); }
  90% { transform: translate(-2px, -1px); }
}

.erg-map { height: 100%; width: auto; aspect-ratio: 6 / 5; display: block; cursor: grab; touch-action: none; }
.erg-map.erg-panning { cursor: grabbing; }

.erg-zoom-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  background: rgba(17, 20, 15, 0.72);
  border: 1px solid var(--erg-border);
  border-radius: 20px;
  color: var(--erg-sand);
  font-size: 11px;
  letter-spacing: 0.3px;
  pointer-events: none;
  opacity: 0.85;
}

.erg-region {
  fill: transparent;
  /* unowned districts stay transparent so the real Erangel map photo
     underneath shows through; capture paints a team color on top. Border
     kept thin/faint by default so the photo reads clean — captured
     districts get their own bolder border below for clarity. */
  stroke: rgba(170, 170, 160, 0.3);
  stroke-width: 4.5;
  transition: fill 0.35s ease, fill-opacity 0.35s ease, stroke 0.35s ease, stroke-width 0.35s ease;
  cursor: default;
}
.erg-region.erg-owned {
  /* a translucent tint, not a solid block — the real map (terrain, roads,
     place names) should still read through the ownership color, not get
     completely painted over. Streamer-adjustable via Erangel Ayarları
     (--erg-territory-opacity set on the SVG root from server state). */
  fill-opacity: var(--erg-territory-opacity, 0.55);
  stroke: rgba(10, 12, 8, 0.55);
  stroke-width: 5;
}
.erg-region.erg-hit-flash { animation: ergHitFlash 0.42s ease-out; }
@keyframes ergHitFlash {
  0% { filter: brightness(1) saturate(1); }
  15% { filter: brightness(3.4) saturate(0.2); }
  100% { filter: brightness(1) saturate(1); }
}

.erg-region-label {
  fill: rgba(232, 217, 176, 0.55);
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: 41px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 9px;
}

.erg-legend {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  background: rgba(17, 20, 15, 0.78);
  border: 1px solid var(--erg-border);
  border-radius: 8px;
  backdrop-filter: blur(3px);
}
.erg-legend-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.4px;
  color: var(--erg-sand-2);
}
.erg-legend-sub { font-size: 11px; color: var(--erg-sand); }

/* --- avatar markers: simplified single centroid+badge (v1 — see
   erangel.js's renderAvatars()) --- */
.erg-avatar { pointer-events: none; }
.erg-avatar-ring { filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.6)); }
.erg-avatar-name {
  text-anchor: middle;
  font-family: 'Oswald', sans-serif;
  font-size: 45px;
  font-weight: 700;
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.7);
  stroke-width: 11px;
}
.erg-avatar-count {
  text-anchor: middle;
  font-size: 36px;
  font-weight: 700;
  fill: var(--erg-sand-2);
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.7);
  stroke-width: 11px;
}

/* --- PUBG sniper battle sequence (steal capture). All timing that actually
   matters (repaint, cleanup) is driven by JS setTimeout, not by these
   keyframes finishing — see erangel.js's playSniperAttack() comment. These
   are purely the visual layer on top. --- */
.erg-sniper-shadow { fill: rgba(0, 0, 0, 0.4); }
.erg-sniper-legs { stroke: #23291b; stroke-width: 4; stroke-linecap: round; fill: none; }
.erg-sniper-body { fill: #3a4230; stroke: #171d12; stroke-width: 1.2; }
.erg-sniper-arm { stroke: #2e3524; stroke-width: 3.4; stroke-linecap: round; fill: none; }
.erg-sniper-head { fill: #4a5238; stroke: #171d12; stroke-width: 1; }
.erg-sniper-rifle, .erg-sniper-rifle-stock { fill: #1b1b18; }
.erg-sniper-scope-body { fill: #17171a; }
.erg-sniper-scope { fill: none; stroke: #8fe0ff; stroke-width: 1.3; filter: drop-shadow(0 0 3px #8fe0ff); }
.erg-sniper-tag { filter: drop-shadow(0 0 3px currentColor); }

.erg-sniper { opacity: 0; }
.erg-sniper.erg-sniper-in { animation: ergSniperIn 0.22s cubic-bezier(.34,1.56,.64,1) forwards; }
.erg-sniper.erg-sniper-out { animation: ergSniperOut 0.3s ease-in forwards; }
/* opacity-only on purpose — this class lives on the OUTER .erg-sniper group,
   which also carries the real translate/rotate/scale POSITION via an SVG
   attribute (set once in JS). A CSS `transform` here — even briefly, mid
   pop-in — completely overrides that attribute for as long as the animation
   runs, collapsing the whole shooter down to the SVG origin (invisible,
   effectively "the weapon animation doesn't work"). Any scale-in flourish
   has to live on `.erg-sniper-inner` instead (see ergRecoil/ergSniperRun
   just above), never on this outer element. */
@keyframes ergSniperIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ergSniperOut { from { opacity: 1; } to { opacity: 0; } }
/* recoil kick — a sharp jolt backward along the character's own local axis
   (this animates the INNER group only, so it layers on top of the outer
   group's translate+rotate positioning instead of fighting it) */
.erg-sniper-inner.erg-sniper-recoil { animation: ergRecoil 0.24s cubic-bezier(.2,.9,.3,1) both; }
@keyframes ergRecoil {
  0% { transform: translateX(0); }
  15% { transform: translateX(-7px) rotate(-3deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
/* sprint-in: the shooter visibly closes distance INTO enemy territory before
   firing — starts well back along its own forward axis (local +X, already
   pointed at the target by the outer group's rotate), slides up to the
   firing stance. Ends exactly at translateX(0) rotate(0) scale(1) so the
   recoil keyframe above picks up with no visual snap when it takes over. */
.erg-sniper-inner.erg-sniper-run { animation: ergSniperRun 0.2s cubic-bezier(.25,.7,.3,1) forwards; }
@keyframes ergSniperRun {
  0% { transform: translateX(-64px) rotate(-6deg) scale(0.88); opacity: 0.35; }
  60% { opacity: 1; }
  100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
}
/* dust kicked up behind the sprinting feet — purely decorative, rides under
   the character */
.erg-sniper-dust { animation: ergSniperDust 0.32s ease-out forwards; }
.erg-sniper-dust circle { fill: rgba(180, 170, 140, 0.5); }
@keyframes ergSniperDust { 0% { opacity: 0.7; transform: translateX(0) scale(0.6); } 100% { opacity: 0; transform: translateX(-30px) scale(1.4); } }

.erg-muzzle-flash { animation: ergMuzzleFlash 0.24s ease-out forwards; transform-origin: center; }
@keyframes ergMuzzleFlash { from { opacity: 1; transform: scale(0.5); } to { opacity: 0; transform: scale(1.9); } }
.erg-muzzle-core { fill: #fff7d6; filter: drop-shadow(0 0 45px #ffe066); }
.erg-muzzle-ray { stroke: var(--erg-tracer); stroke-width: 9; stroke-linecap: round; }

/* drawn instantly at full length (x1/y1/x2/y2 already the real endpoints),
   then "revealed" via a normalized (pathLength=1) dash-offset sweep — no
   per-frame coordinate interpolation needed. A couple of fainter parallel
   copies (erg-tracer-trail) ride just behind it for a speed-line read. */
.erg-tracer {
  stroke: var(--erg-tracer);
  stroke-width: 14;
  stroke-linecap: round;
  filter: drop-shadow(0 0 22px var(--erg-tracer));
  animation: ergTracerDraw 0.15s linear forwards;
}
.erg-tracer-trail { stroke-width: 7; opacity: 0.45; filter: none; }
@keyframes ergTracerDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.erg-impact { animation: ergImpact 0.38s ease-out forwards; transform-origin: center; }
@keyframes ergImpact { from { opacity: 1; transform: scale(0.5); } to { opacity: 0; transform: scale(1.6); } }
.erg-impact-spark {
  stroke: var(--erg-danger);
  stroke-width: 11;
  stroke-linecap: round;
  filter: drop-shadow(0 0 14px var(--erg-danger));
}

/* hit-marker: a crisp red X that pops in and snaps back out, layered on
   top of the softer spark burst above for a "confirmed hit" punch */
.erg-hit-marker line {
  stroke: #fff;
  stroke-width: 13;
  stroke-linecap: round;
  filter: drop-shadow(0 0 18px var(--erg-danger)) drop-shadow(0 0 36px var(--erg-danger));
}
.erg-hit-marker { animation: ergHitMarker 0.36s cubic-bezier(.3,1.6,.4,1) forwards; transform-origin: center; }
@keyframes ergHitMarker {
  0% { opacity: 0; transform: scale(0.3) rotate(-25deg); }
  35% { opacity: 1; transform: scale(1.25) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.5) rotate(0deg); }
}

/* camera-flash style whole-map pulse the instant a shot fires — covers the
   full viewBox, so it reads as "the whole scene just got hit with light",
   not a local effect. This one thing does more for "feels powerful" than
   any single other layer. */
.erg-fire-flash { fill: #fff; animation: ergFireFlash 0.24s ease-out forwards; pointer-events: none; }
@keyframes ergFireFlash { 0% { opacity: 0.72; } 100% { opacity: 0; } }

/* expanding shockwave ring at impact — thick, bright, fast. A second,
   delayed ring rides just behind it for a double-pulse "boom" read instead
   of one thin ripple. */
.erg-shockwave {
  fill: none;
  stroke: var(--erg-danger);
  stroke-width: 27;
  filter: drop-shadow(0 0 36px var(--erg-danger));
  animation: ergShockwave 0.52s cubic-bezier(.15,.7,.3,1) forwards;
  transform-origin: center;
}
.erg-shockwave.erg-shockwave-2 {
  stroke: #ffcf5c;
  animation: ergShockwave 0.6s cubic-bezier(.15,.7,.3,1) 0.08s forwards;
}
@keyframes ergShockwave { 0% { r: 27; opacity: 1; stroke-width: 36; } 100% { r: 430; opacity: 0; stroke-width: 4; } }

/* dirt/debris burst at impact — soft expanding blobs behind the sharp
   spark lines, for a "hit the ground hard" read */
.erg-debris { animation: ergDebris 0.5s ease-out forwards; }
.erg-debris circle { fill: #4a4130; }
@keyframes ergDebris {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* floating "ZƏBT!" callout — rises and fades off the impact point */
.erg-capture-label {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 91px;
  letter-spacing: 4px;
  fill: var(--erg-danger);
  paint-order: stroke;
  stroke: #1a0d0a;
  stroke-width: 14px;
  filter: drop-shadow(0 0 36px rgba(255, 77, 61, 0.7));
  animation: ergCaptureLabel 0.62s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes ergCaptureLabel {
  0% { opacity: 0; transform: translateY(27px) scale(0.7); }
  25% { opacity: 1; transform: translateY(-18px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-155px) scale(1); }
}

/* --- protection ("qoruma") countdown --- */
.erg-protection {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  animation: fadeIn 0.3s ease;
}
.erg-protection.hidden { display: none; }
.erg-protection-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 30px 18px;
  background: linear-gradient(165deg, rgba(26, 31, 22, 0.96), rgba(17, 20, 15, 0.97));
  border: 1px solid var(--erg-sand);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(201, 177, 131, 0.2);
}
.erg-protection-photo-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--erg-sand);
  margin-bottom: 6px;
  background: var(--erg-olive);
}
.erg-protection-photo { width: 100%; height: 100%; object-fit: cover; }
.erg-protection-name { font-weight: 800; font-size: 15px; color: #fff; }
.erg-protection-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--erg-sand);
  margin: 4px 0 6px;
  text-align: center;
}
.erg-protection-timer {
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--erg-sand-2);
  text-shadow: 0 0 16px rgba(201, 177, 131, 0.5);
}
.erg-protection-timer.erg-protection-timer-slow {
  color: var(--erg-danger);
  animation: protectionPulse 0.9s ease-in-out infinite;
}

/* --- win banner --- */
.erg-win-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 6, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
  animation: fadeIn 0.3s ease;
}
.erg-win-overlay.hidden { display: none; }
.erg-win-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.erg-win-photo-wrap {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--erg-sand);
  box-shadow: 0 0 44px rgba(201, 177, 131, 0.55);
  margin-bottom: 18px;
  background: var(--erg-olive);
}
.erg-win-photo { width: 100%; height: 100%; object-fit: cover; }
.erg-win-title {
  font-family: 'Oswald', sans-serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--erg-sand-2);
  text-shadow: 0 0 30px rgba(201, 177, 131, 0.6);
}
.erg-win-name { font-size: 22px; font-weight: 800; color: #fff; margin-top: 6px; }
.erg-win-sub { font-size: 13px; color: var(--erg-sand); margin-top: 4px; }

.erg-settings-modal { width: 620px; max-width: 92vw; }

/* --- territory-opacity slider (Erangel Ayarları) --- */
.erg-opacity-section {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--erg-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.erg-opacity-section label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--erg-sand-2);
  margin-bottom: 8px;
}
.erg-opacity-section input[type="range"] {
  width: 100%;
  accent-color: var(--erg-sand);
}
.erg-opacity-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--erg-sand);
  opacity: 0.8;
}

/* --- settings modal now has several stacked sections (Hücum Gücü, opacity,
   gift rules, Bəyəni, Təqib), not just one — .attack-power-grid's
   `flex:1; min-height:0` (style.css) assumes it's the ONE space-filling
   section inside .rulers-modal's fixed-height flex column, which collapses
   it to ~0px and makes everything overlap once there are siblings after it
   competing for the same space. Neutralize that here and let the whole
   modal scroll naturally instead. --- */
.erg-settings-modal {
  overflow-y: auto;
}
.erg-settings-modal .attack-power-grid {
  flex: none;
  min-height: auto;
}