/* ==========================================================================
   GOLDEN GUNS — место в рейтинге GG, версия 4.3: «Эскадрилья», гибрид трёх лестниц версии 3 (12.10.2026)
   Знак Golden Guns в центре не меняется. Ярус — это крылья: чем выше место, тем их больше, тем ярче материал и тем живее эмблема.
   Файл самостоятельный: от версий 1 и 2 не зависит. Рисунки — спрайт gg-rank-squadron-v4.svg, вставляется в страницу один раз.

   Гибридная карта (уточнение владельца): t1 hole (из «Космоса») · t2 violet (из «Сияния») · t3–t4 red (из «Жара»);
   ярусы 2–4 носят полное оформление № 1 своих лестниц (та же геометрия лидера), иерархия — материалом и приглушённой анимацией.
   Материалы верхних ярусов (класс gg-e3--… / gg-rk3--…):
     hole    чёрная дыра          violet  фиолетовый металл      red     раскалённый красный
   Нижние ярусы v4.3 — обычные, без движения, детализация убывает (полос 3 · 2 · 1 · 0):
     t5 матовая красная сталь (три оттенка красного) · t6 тёмная сталь · t7 серая сталь · t8 тусклая сталь · t9 контур. Красного после 40-го места нет.

   Что движется (только transform и opacity; фильтров и размытий нет):
     ярус 1   живёт постоянно: перелив бежит по крыльям, свет под эмблемой дышит, на звезде вспыхивает искра;
              у «чёрной дыры» кольцо вращается, свет стягивается к центру
     ярус 2   перелив по крыльям раз в 6 с — приглушён (иерархия к месту 1)
     ярус 3   мягкий перелив раз в 6 с, тише — в противофазе с ярусом 2
     ярус 4   короткий блик раз в 12 с, ещё тише
     ярусы 5–9  неподвижны
   В строке (18 и 26 px) — только перелив и дыхание света у лидера; вращений нет.
   prefers-reduced-motion и класс gg3-still на контейнере — всё стоит.
   Класс gg3-calm на контейнере — в строках движутся только места 1–5.
   ========================================================================== */

:root {
  --gg3-font-num: var(--gg-font-display, 'Bowlby One', 'Montserrat', Impact, sans-serif);
  --gg3-font-mono: var(--gg-font-mono, 'JetBrains Mono', 'Courier New', monospace);
  /* силуэты крыльев для перелива: wm — крупная эмблема, wi — значок в строке.
     v4.1: ярусы 1–4 носят полную геометрию № 1, поэтому маска одна на все верхние ярусы */
  --gg3-wm1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 204' preserveAspectRatio='none'%3E%3Cpath d='M116 56.4 9 36.4 19.4 49.6 116 68.6ZM116 70.4 22.9 54.4 33.3 67.6 116 82.6ZM116 84.4 36.8 72.4 47.2 85.6 116 96.6ZM116 98.4 50.7 90.4 61.1 103.6 116 110.6ZM116 112.4 64.6 108.4 75 121.6 116 124.6ZM116 126.4 78.6 126.4 88.9 139.6 116 138.6ZM204 56.4 311 36.4 300.6 49.6 204 68.6ZM204 70.4 297.1 54.4 286.7 67.6 204 82.6ZM204 84.4 283.2 72.4 272.8 85.6 204 96.6ZM204 98.4 269.3 90.4 258.9 103.6 204 110.6ZM204 112.4 255.4 108.4 245 121.6 204 124.6ZM204 126.4 241.4 126.4 231.1 139.6 204 138.6ZM116 43 26 17 33.6 26.7 116 52ZM116 57 44 36.2 51.6 45.9 116 66ZM116 71 62 55.4 69.7 65.1 116 80ZM204 43 294 17 286.4 26.7 204 52ZM204 57 276 36.2 268.4 45.9 204 66ZM204 71 258 55.4 250.3 65.1 204 80Z'/%3E%3C/svg%3E");
  --gg3-wi1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 40' preserveAspectRatio='none'%3E%3Cpath d='M14 13 0 8 4.4 13.6 14 18.2ZM14 20.4 2.8 16.4 7.2 22 14 25.6ZM14 27.8 5.6 24.8 10 30.4 14 33ZM62 13 76 8 71.6 13.6 62 18.2ZM62 20.4 73.2 16.4 68.8 22 62 25.6ZM62 27.8 70.4 24.8 66 30.4 62 33Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   1. КРУПНАЯ ЭМБЛЕМА
   <span class="gg-e3 gg-e3--red gg-e3--t1 gg-e3--l" role="img" aria-label="…">
     <i class="gg-e3__glow"></i>                         только ярус 1
     <svg viewBox="0 0 320 204"><use href="#e3b-red-1"/></svg>          крылья
     <i class="gg-e3__ring"></i><i class="gg-e3__pull"></i>             только «чёрная дыра»
     <i class="gg-e3__flow"><i></i><i></i></i>                          перелив, обрезан по силуэту крыльев
     …кокарда (см. ниже)… <i class="gg-e3__spark"></i>                   искра на звезде, только ярус 1
     <svg viewBox="0 0 320 204"><use href="#e3f-red-1"/><text class="gg-e3__n" …>#1</text></svg>   кокарда, звёзды, планка
   </span>
   Разметку отдаёт ggRankSquadron().
   ========================================================================== */
.gg-e3 {
  --e3-h: 64px; --e3-band: rgba(255, 255, 255, 0.7); --e3-band2: transparent; --e3-glow: transparent; --e3-wm: none;
  position: relative; isolation: isolate; display: inline-block; vertical-align: middle; flex: none;
  height: var(--e3-h); aspect-ratio: 320 / 204;
}
.gg-e3--m { --e3-h: 44px; }
.gg-e3--l { --e3-h: 64px; }
.gg-e3--xl { --e3-h: 128px; }
.gg-e3 > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.gg-e3 > i { position: absolute; display: block; pointer-events: none; }
.gg-e3__n { text-anchor: middle; font-family: var(--gg3-font-num); font-weight: 400; font-variant-numeric: tabular-nums; }
.gg-e3__n--mono { font-family: var(--gg3-font-mono); font-weight: 800; }

.gg-e3--t1 { --e3-wm: var(--gg3-wm1); }
.gg-e3--t2 { --e3-wm: var(--gg3-wm1); }
.gg-e3--t3 { --e3-wm: var(--gg3-wm1); }
.gg-e3--t4 { --e3-wm: var(--gg3-wm1); }
.gg-e3--red { --e3-band: rgba(255, 244, 200, 0.82); --e3-glow: rgba(255, 86, 40, 0.55); }
.gg-e3--gold { --e3-band: rgba(255, 255, 255, 0.78); --e3-glow: rgba(242, 196, 99, 0.42); }
.gg-e3--violet { --e3-band: rgba(140, 240, 255, 0.72); --e3-band2: rgba(255, 150, 235, 0.6); --e3-glow: rgba(154, 92, 240, 0.55); }
.gg-e3--ice { --e3-band: rgba(255, 255, 255, 0.85); }
.gg-e3--plat { --e3-band: rgba(255, 255, 255, 0.85); }
.gg-e3--hole { --e3-band: rgba(255, 138, 60, 0.6); --e3-band2: rgba(160, 110, 255, 0.5); --e3-glow: rgba(138, 77, 255, 0.34); }

/* свет под эмблемой лидера: дышит */
.gg-e3__glow {
  left: -9%; right: -9%; top: 6%; bottom: -16%; z-index: -1;
  background: radial-gradient(closest-side, var(--e3-glow) 0%, transparent 74%);
  animation: gg3-pulse 2s ease-in-out infinite;
}
@keyframes gg3-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.06); } }

/* перелив: два зеркальных окна (левое и правое крыло), в каждом едет лента света — от кокарды к концам перьев */
.gg-e3__flow { inset: 0; -webkit-mask: var(--e3-wm) 0 0 / 100% 100% no-repeat; mask: var(--e3-wm) 0 0 / 100% 100% no-repeat; }
.gg-e3__flow > i { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; overflow: hidden; }
.gg-e3__flow > i:first-child { left: 0; transform: scaleX(-1); }
.gg-e3__flow > i::before, .gg-e3__flow > i::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 300%;
  background: linear-gradient(104deg, transparent 0%, transparent 36%, var(--e3-band) 50%, transparent 64%, transparent 100%) 50% 0 / 33.3334% 100% no-repeat;
  transform: translateX(0);
}
.gg-e3__flow > i::after { display: none; }
/* ярус 1 — лента идёт без остановки */
.gg-e3--t1 .gg-e3__flow > i::before { background-position: 0 0; background-repeat: repeat-x; animation: gg3-flow 2s linear infinite; }
.gg-e3--t1.gg-e3--violet .gg-e3__flow > i::after, .gg-e3--t1.gg-e3--hole .gg-e3__flow > i::after {
  display: block; background: linear-gradient(104deg, transparent 0%, transparent 30%, var(--e3-band2) 50%, transparent 70%, transparent 100%) 16.6667% 0 / 33.3334% 100% repeat-x;
  animation: gg3-flow 4s linear infinite;
}
.gg-e3--t1.gg-e3--hole .gg-e3__flow > i::before, .gg-e3--t1.gg-e3--hole .gg-e3__flow > i::after { animation-direction: reverse; } /* свет идёт к центру */
@keyframes gg3-flow { from { transform: translateX(-33.3334%); } to { transform: translateX(0); } }
/* ярусы 2–4 — проходы с паузой; --i сдвигает соседей по списку, чтобы шли волной */
.gg-e3--t2 .gg-e3__flow > i::before { opacity: 0.85; animation: gg3-pass-a 6s linear infinite; animation-delay: calc(var(--i, 0) * -0.3s); }
.gg-e3--t3 .gg-e3__flow > i::before { opacity: 0.5; animation: gg3-pass-b 6s linear infinite; animation-delay: calc(-3s + var(--i, 0) * -0.3s); }
.gg-e3--t4 .gg-e3__flow > i::before { opacity: 0.55; animation: gg3-pass-c 12s linear infinite; animation-delay: calc(-6s + var(--i, 0) * -0.3s); }
.gg-e3--t2.gg-e3--violet .gg-e3__flow > i::after {
  display: block; background: linear-gradient(104deg, transparent 0%, transparent 36%, var(--e3-band2) 50%, transparent 64%, transparent 100%) 50% 0 / 33.3334% 100% no-repeat;
  animation: gg3-pass-a 6s linear infinite; animation-delay: calc(-0.8s + var(--i, 0) * -0.3s);
}
@keyframes gg3-pass-a { 0% { transform: translateX(-66.6667%); } 45%, 100% { transform: translateX(0); } }
@keyframes gg3-pass-b { 0% { transform: translateX(-66.6667%); } 62%, 100% { transform: translateX(0); } }
@keyframes gg3-pass-c { 0% { transform: translateX(-66.6667%); } 13%, 100% { transform: translateX(0); } }

/* искра на верхней звезде лидера: вспыхивает раз в 4 с */
.gg-e3__spark {
  left: 50%; top: 11.76%; width: 24%; aspect-ratio: 1; opacity: 0;
  background: radial-gradient(closest-side, #fff 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0) 72%);
  clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%);
  transform: translate(-50%, -50%) scale(0.2); animation: gg3-spark 4s ease-in-out infinite; animation-delay: -1s;
}
@keyframes gg3-spark {
  0%, 62%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  74% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(20deg); }
  88% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(45deg); }
}

/* «чёрная дыра»: кольцо лежит между крыльями и кокардой; вращается и стягивает свет к центру */
.gg-e3__ring, .gg-e3__pull { left: 50%; top: 48.04%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-7deg) scaleY(0.4); }
.gg-e3__ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 138, 60, 0) 0deg, #ff8a3c 50deg, #fff3d6 82deg, #ff3d5a 108deg, #8a4dff 146deg, rgba(138, 77, 255, 0) 180deg,
    rgba(255, 138, 60, 0) 180deg, #ff8a3c 230deg, #fff3d6 262deg, #ff3d5a 288deg, #8a4dff 326deg, rgba(138, 77, 255, 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 82%, #000 93%, transparent 99%);
  mask: radial-gradient(closest-side, transparent 78%, #000 82%, #000 93%, transparent 99%);
  animation: gg3-spin 8s linear infinite;
}
.gg-e3__pull::before, .gg-e3__pull::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, transparent 88%, rgba(255, 138, 60, 0.9) 92%, rgba(160, 110, 255, 0.75) 96%, transparent 100%);
  animation: gg3-pull 2s linear infinite;
}
.gg-e3__pull::after { animation-delay: -1s; }
@keyframes gg3-spin { to { transform: rotate(360deg); } }
@keyframes gg3-pull { 0% { transform: scale(1.75); opacity: 0; } 35% { opacity: 0.8; } 100% { transform: scale(0.72); opacity: 0; } }

/* ==========================================================================
   2. ЗНАЧОК В СТРОКЕ: маленькая эмблема + планка с номером
   <span class="gg-rk3 gg-rk3--red gg-rk3--t1 gg-rk3--s" role="img" aria-label="…">
     <span class="gg-rk3__i"><svg viewBox="0 0 76 40"><use href="#e3i-red-1"/></svg><i class="gg-rk3__f"></i></span>
     <span class="gg-rk3__p"><span class="gg-rk3__n">1</span></span>
   </span>
   ========================================================================== */
.gg-rk3 {
  --h: 26px; --ph: 22px; --fs: 15px; --fsm: 12.5px; --px: 7px; --c: 6px;
  --p-rim: transparent; --p-face: transparent; --p-ink: currentColor; --f-band: rgba(255, 255, 255, 0.8); --f-glow: transparent; --f-wm: none;
  display: inline-flex; align-items: center; vertical-align: middle; flex: none; white-space: nowrap; line-height: 1;
}
.gg-rk3--s { --h: 18px; --ph: 16px; --fs: 11.5px; --fsm: 10.5px; --px: 5px; --c: 4px; }
.gg-rk3__i { position: relative; isolation: isolate; flex: none; height: var(--h); aspect-ratio: 76 / 40; }
.gg-rk3__i > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.gg-rk3__p {
  position: relative; isolation: isolate; box-sizing: border-box; flex: none; margin-left: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--ph); min-width: calc(var(--ph) * 1.5); padding: 0 var(--px);
  font: 400 var(--fs)/1 var(--gg3-font-num); letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
  color: var(--p-ink); background: var(--p-rim);
}
.gg-rk3__p, .gg-rk3__p::before { clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.gg-rk3__p::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--p-face); }
.gg-rk3__n::before { content: "#"; font-size: 0.66em; margin-right: 0.06em; opacity: 0.86; vertical-align: 0.2em; }

.gg-rk3--t1 { --f-wm: var(--gg3-wi1); }
.gg-rk3--t2 { --f-wm: var(--gg3-wi1); }
.gg-rk3--t3 { --f-wm: var(--gg3-wi1); }
.gg-rk3--t4 { --f-wm: var(--gg3-wi1); }
.gg-rk3--red { --p-rim: linear-gradient(180deg, #ffe9b8, #ff5a2e 50%, #7a0f14); --p-face: linear-gradient(180deg, #c9261a, #7a0f14); --p-ink: #fff3e0; --f-band: rgba(255, 244, 200, 0.9); --f-glow: rgba(255, 86, 40, 0.6); }
.gg-rk3--hole { --p-rim: linear-gradient(90deg, #ff8a3c, #ff3d5a 50%, #8a4dff); --p-face: #000; --p-ink: #ffe9dc; --f-band: rgba(255, 150, 90, 0.75); --f-glow: rgba(138, 77, 255, 0.5); }
.gg-rk3--violet { --p-rim: linear-gradient(180deg, #f6e3ff, #9a5cf0 50%, #2e1466); --p-face: linear-gradient(180deg, #f6e3ff, #d9b8ff 50%, #a678f0); --p-ink: #1d0b3d; --f-band: rgba(150, 245, 255, 0.85); --f-glow: rgba(154, 92, 240, 0.6); }
.gg-rk3--gold { --p-rim: linear-gradient(180deg, #fff1c9, #e9b754 44%, #9a5f16); --p-face: linear-gradient(180deg, #fbe2a0, #f2c463 50%, #d9a441); --p-ink: #2b1703; --f-glow: rgba(242, 196, 99, 0.5); }
.gg-rk3--ice { --p-rim: linear-gradient(180deg, #f4fbff, #7ea6c9 50%, #1f3347); --p-face: linear-gradient(180deg, #f4fbff, #cfe6f6 50%, #8fb4d4); --p-ink: #0d1c2a; }
.gg-rk3--plat { --p-rim: linear-gradient(180deg, #f4f6f8, #a7afb9 50%, #5b636d); --p-face: linear-gradient(180deg, #e9ecef, #c6ccd3 52%, #a6adb6); --p-ink: #141920; }
/* нижние ярусы v4.3: 21–40 — матовая красная сталь; дальше — нейтральная сталь, гаснущая с рангом (красного нет) */
.gg-rk3--t5 { --p-rim: #a24a3e; --p-face: linear-gradient(180deg, #281410, #160b09); --p-ink: #e8d5cd; }
.gg-rk3--t6 { --p-rim: #6d7684; --p-face: linear-gradient(180deg, #171a1f, #0e1013); --p-ink: #d9dce0; }
.gg-rk3--t7 { --p-rim: #585c64; --p-face: linear-gradient(180deg, #141518, #0c0d0f); --p-ink: #c9cbcf; }
.gg-rk3--t8 { --p-rim: #44474d; --p-face: linear-gradient(180deg, #121316, #0b0c0e); --p-ink: #b6b8bd; }
.gg-rk3--t9 { --p-ink: var(--gg-ld-muted, #8f8d89); }
.gg-rk3--t5 .gg-rk3__p, .gg-rk3--t6 .gg-rk3__p, .gg-rk3--t7 .gg-rk3__p, .gg-rk3--t8 .gg-rk3__p, .gg-rk3--t9 .gg-rk3__p {
  font: 800 var(--fsm)/1 var(--gg3-font-mono); letter-spacing: 0;
}
.gg-rk3--t5 .gg-rk3__n::before, .gg-rk3--t6 .gg-rk3__n::before, .gg-rk3--t7 .gg-rk3__n::before, .gg-rk3--t8 .gg-rk3__n::before { font-size: 0.84em; margin-right: 0.02em; opacity: 0.76; vertical-align: 0.05em; }
.gg-rk3--t9 .gg-rk3__p { clip-path: none; background: none; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.17); }
.gg-rk3--t9 .gg-rk3__p::before { display: none; }
.gg-rk3--t9 .gg-rk3__n::before { font-size: 0.84em; margin-right: 0.02em; opacity: 1; vertical-align: 0.05em; }
.gg-rk3--none .gg-rk3__n::before { content: none; }

/* движение в строке: свет под знаком лидера дышит, по крыльям идёт лента; вращений нет */
.gg-rk3--t1 .gg-rk3__i::before {
  content: ""; position: absolute; z-index: -1; inset: -18% -6% -22%; pointer-events: none;
  background: radial-gradient(closest-side, var(--f-glow), transparent 76%);
  animation: gg3-breath 2s ease-in-out infinite;
}
@keyframes gg3-breath { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.gg-rk3__f { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: var(--f-wm) 0 0 / 100% 100% no-repeat; mask: var(--f-wm) 0 0 / 100% 100% no-repeat; }
.gg-rk3__f::before {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 300%;
  background: linear-gradient(104deg, transparent 0%, transparent 38%, var(--f-band) 50%, transparent 62%, transparent 100%) 50% 0 / 33.3334% 100% no-repeat;
}
.gg-rk3--t1 .gg-rk3__f::before { background-position: 0 0; background-repeat: repeat-x; animation: gg3-flow 2s linear infinite; }
.gg-rk3--t2 .gg-rk3__f::before { opacity: 0.9; animation: gg3-pass-a 6s linear infinite; animation-delay: calc(var(--i, 0) * -0.3s); }
.gg-rk3--t3 .gg-rk3__f::before { opacity: 0.55; animation: gg3-pass-b 6s linear infinite; animation-delay: calc(-3s + var(--i, 0) * -0.3s); }
.gg-rk3--t4 .gg-rk3__f::before { opacity: 0.6; animation: gg3-pass-c 12s linear infinite; animation-delay: calc(-6s + var(--i, 0) * -0.3s); }

/* спокойный список: класс gg3-calm на контейнере оставляет в строках движение только у мест 1–5 */
.gg3-calm .gg-rk3--t3 .gg-rk3__f::before, .gg3-calm .gg-rk3--t4 .gg-rk3__f::before { animation: none; }

/* стоп: «уменьшить движение» или класс gg3-still на любом предке */
.gg3-still .gg-e3 *, .gg3-still .gg-e3 *::before, .gg3-still .gg-e3 *::after,
.gg3-still .gg-rk3 *, .gg3-still .gg-rk3 *::before, .gg3-still .gg-rk3 *::after { animation: none !important; }
.gg3-still .gg-e3__glow, .gg3-still .gg-rk3--t1 .gg-rk3__i::before { opacity: 0.8; }
@media (prefers-reduced-motion: reduce) {
  .gg-e3 *, .gg-e3 *::before, .gg-e3 *::after, .gg-rk3 *, .gg-rk3 *::before, .gg-rk3 *::after { animation: none !important; }
  .gg-e3__glow, .gg-rk3--t1 .gg-rk3__i::before { opacity: 0.8; }
}