/* =============================================================================
   VEIL STAGE — scena walki (js/battle-stage.js)
   Jedna oprawa dla areny, World Bossa, Glebin, wojen i wypraw gildii.
   Zloto na fiolecie, Cinzel na nazwach, Inter na liczbach. Wszystko, co sie
   rusza, rusza sie NA scenie: zetony, bron, pociski, liczby. HUD stoi.
   ========================================================================== */
.vb-root {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column;
  background: #0A0616; color: var(--text, #F0EAFF);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  overflow: hidden; user-select: none;
  --vb-gold: #FFD46A; --vb-gold-deep: #C8A84E; --vb-violet: #9B7BFF;
  --vb-win: #2ED573; --vb-loss: #FF4757; --vb-blue: #4FACFE;
}
body.vb-open { overflow: hidden; }

/* ── Tlo ───────────────────────────────────────────────────────── */
.vb-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.vb-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; filter: saturate(0.9); }
.vb-bg-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 50% 62%, transparent 30%, rgba(10, 6, 22, 0.55) 100%),
    linear-gradient(180deg, rgba(10, 6, 22, 0.78) 0%, rgba(10, 6, 22, 0.25) 30%, rgba(10, 6, 22, 0.2) 65%, rgba(10, 6, 22, 0.9) 100%);
}
/* Pylki: dwie warstwy kropek plynacych w gore. Tanie i ozywiaja tlo. */
.vb-motes {
  position: absolute; inset: -10% 0 0 0; opacity: 0.55; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 212, 106, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(155, 123, 255, 0.8) 0 1px, transparent 2px);
  background-size: 260px 320px, 340px 420px;
  background-position: 20px 40px, 160px 200px;
  animation: vbMotes 26s linear infinite;
}
@keyframes vbMotes { from { background-position: 20px 40px, 160px 200px; } to { background-position: 60px -600px, 120px -640px; } }

/* ── HUD ───────────────────────────────────────────────────────── */
.vb-head {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px 6px;
}
.vb-title { display: flex; flex-direction: column; min-width: 0; }
.vb-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 212, 106, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-title b {
  font-family: var(--font-display, Cinzel, serif); font-weight: 700; font-size: 22px; letter-spacing: 0.08em;
  color: var(--vb-gold); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 22px rgba(255, 212, 106, 0.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vb-round {
  flex: 0 0 auto; padding: 6px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vb-gold); border: 1px solid rgba(255, 212, 106, 0.4);
  background: linear-gradient(180deg, rgba(51, 36, 95, 0.9), rgba(22, 16, 44, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.5);
  max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.vb-stage { position: relative; z-index: 2; flex: 1; min-height: 0; }

.vb-ticker {
  position: relative; z-index: 3; min-height: 66px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  padding: 4px 16px; pointer-events: none;
}
.vb-tick {
  font-size: 12px; color: rgba(240, 234, 255, 0.8);
  padding: 3px 12px; border-radius: 999px;
  background: rgba(10, 6, 22, 0.55); border: 1px solid rgba(255, 255, 255, 0.06);
  animation: vbTickIn 0.3s ease both;
}
.vb-tick:not(:last-child) { opacity: 0.55; font-size: 11px; }
.vb-tick b { color: #fff; }
.vb-tick em { font-style: normal; color: var(--vb-gold); font-weight: 800; letter-spacing: 0.08em; }
.vb-tick.crit { border-color: rgba(255, 212, 106, 0.4); }
.vb-tick.pet { color: #C4AEFF; }
.vb-tick.sys { color: var(--vb-gold); }
@keyframes vbTickIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.vb-foot {
  position: relative; z-index: 3;
  display: flex; justify-content: center; gap: 10px;
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
.vb-fbtn {
  min-width: 96px; padding: 11px 18px; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--vb-gold); border: 1px solid rgba(255, 212, 106, 0.4);
  background: linear-gradient(180deg, rgba(64, 46, 122, 0.9), rgba(20, 13, 42, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(6, 3, 16, 0.6);
  transition: transform 0.14s ease, border-color 0.14s ease;
}
.vb-fbtn:hover { transform: translateY(-1px); border-color: rgba(255, 212, 106, 0.75); }
.vb-fbtn-skip { color: #2a1c04; border-color: rgba(255, 255, 255, 0.35); background: linear-gradient(180deg, #FFE08A, #E9A93A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 14px rgba(233, 169, 58, 0.3); }
/* Wyjscie awaryjne. Waskie i wygaszone — ma byc dostepne, a nie zapraszac
   do przerwania walki, ktora gracz wlasnie oglada. */
.vb-fbtn-x {
  min-width: 0; padding: 11px 14px;
  color: rgba(255, 212, 106, 0.65);
  border-color: rgba(255, 212, 106, 0.22);
}
.vb-fbtn-x:hover { color: var(--vb-gold); border-color: rgba(255, 212, 106, 0.6); }

/* ── Zeton ─────────────────────────────────────────────────────── */
.vb-token {
  --vb-c: var(--vb-gold); --vb-port: 210px;
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: calc(var(--vb-port) + 60px); will-change: transform;
}
.vb-c-warrior { --vb-c: #FF7A5C; }
.vb-c-mage { --vb-c: #9B7BFF; }
.vb-c-blade_dancer { --vb-c: #2ED573; }
.vb-boss { --vb-c: #FF4757; }
.vb-me { --vb-c: var(--vb-gold); }

.vb-plate {
  display: flex; align-items: baseline; gap: 7px; max-width: 100%;
  padding: 4px 12px; margin-bottom: 8px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(51, 36, 95, 0.92), rgba(22, 16, 44, 0.95));
  border: 1px solid rgba(255, 212, 106, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.5);
}
/* Wejscie tylko pod `.vb-enter`, ktora JS zdejmuje po chwili. Animacja
   wpisana na stale w `.vb-port` odtwarzala sie od nowa po kazdym wstrzasie
   (zmiana `animation` restartuje ja) i portret bladl po kazdym ciosie. */
.vb-enter .vb-plate { animation: vbRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.vb-enter .vb-port { animation: vbRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.vb-enter .vb-hp { animation: vbRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.vb-name { font-family: var(--font-display, Cinzel, serif); font-weight: 700; font-size: 15px; color: #fff; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-me .vb-name { color: var(--vb-gold); }
.vb-lvl { font-size: 10px; font-weight: 800; color: var(--text-dim, #B0A5D4); white-space: nowrap; }

/* Krag na posadzce: swiatlo w kolorze klasy, na ktorym stoi portret. */
.vb-ring {
  position: absolute; left: 50%; top: calc(34px + var(--vb-port) * 0.86); z-index: 0;
  width: calc(var(--vb-port) * 1.25); height: calc(var(--vb-port) * 0.34);
  transform: translateX(-50%); pointer-events: none;
}
.vb-ring i {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--vb-c) 85%, #fff 10%), color-mix(in srgb, var(--vb-c) 40%, transparent) 40%, transparent 70%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vb-c) 70%, transparent) inset, 0 0 30px color-mix(in srgb, var(--vb-c) 60%, transparent);
  animation: vbRingPulse 3.2s ease-in-out infinite;
}
@keyframes vbRingPulse { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

.vb-port {
  position: relative; z-index: 1;
  width: var(--vb-port); height: var(--vb-port); border-radius: 50%;
  overflow: hidden; background: #150d2c;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7);
  transition: filter 0.4s ease;
}
/* Rama z grafiki (img/battle/frame-*.webp) siedzi NA ZEWNATRZ portretu,
   na `.vb-portwrap`, ktory nie ma overflow: hidden. Wczesniej lezala
   w srodku kola rysowanego kodem i wygladala jak drugi pierscien. */
/* Rama z grafiki TYLKO dla bossow i potworow. Gracze maja swoje ramki
   z profilu (klasy gv-frame-* na portrecie) — wspolna zlota rama chowala
   to, co gracz kupil albo wygral. */
.vb-boss .vb-portwrap::after {
  content: ''; position: absolute; inset: -9%; z-index: 4; pointer-events: none;
  background: url('../img/battle/frame-boss.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}
/* Ramki profilu na duzym zetonie: obwodka szersza niz 1,5 px z profilu,
   kolor i poswiata zostaja z klasy. */
.vb-duel .vb-port[class*="gv-frame-"], .vb-duel .vb-port.gv-avatar-prem { border-width: 4px !important; }
.vb-teams .vb-port[class*="gv-frame-"], .vb-teams .vb-port.gv-avatar-prem { border-width: 2px !important; }
.vb-port .vb-av, .vb-port img, .vb-port video { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
.vb-boss .vb-port { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 71, 87, 0.3); }
.vb-boss .vb-port img { object-position: center 20%; }
.vb-crack {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 47%, rgba(0, 0, 0, 0.85) 49%, transparent 51%),
    linear-gradient(35deg, transparent 58%, rgba(0, 0, 0, 0.8) 60%, transparent 62%),
    linear-gradient(160deg, transparent 30%, rgba(0, 0, 0, 0.7) 31.5%, transparent 33%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.55), transparent 60%);
  transition: opacity 0.4s ease;
}
.vb-dead .vb-port { filter: grayscale(1) brightness(0.55); }
.vb-dead .vb-crack { opacity: 1; }
.vb-dead .vb-ring i { opacity: 0.15; animation: none; }
.vb-dead .vb-plate { opacity: 0.55; }
.vb-dead .vb-hp-fill { width: 0 !important; }

.vb-hp {
  position: relative; z-index: 1; width: calc(var(--vb-port) + 24px); height: 14px; margin-top: 12px;
  border-radius: 8px; overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.vb-hp i { position: absolute; left: 0; top: 0; bottom: 0; display: block; border-radius: 8px; }
.vb-hp-ghost { background: rgba(255, 255, 255, 0.55); }
.vb-hp-fill { background: linear-gradient(180deg, #7DF0A8, #2ED573 50%, #1FA85A); box-shadow: 0 0 10px rgba(46, 213, 115, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.vb-hp-fill.mid { background: linear-gradient(180deg, #FFE59A, #FFB340 50%, #D98A1E); box-shadow: 0 0 10px rgba(255, 179, 64, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.vb-hp-fill.low { background: linear-gradient(180deg, #FF9AA2, #FF4757 50%, #C22A3A); box-shadow: 0 0 10px rgba(255, 71, 87, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.vb-hp-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); letter-spacing: 0.03em; }
.vb-infinite .vb-side-right .vb-hp-fill { background: linear-gradient(180deg, #D9CCFF, #9B7BFF 50%, #6F4FD8); box-shadow: 0 0 10px rgba(155, 123, 255, 0.5); }

.vb-sub { display: flex; gap: 6px; margin-top: 6px; }
.vb-cls, .vb-fac { font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(10, 6, 22, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--vb-c); }
.vb-fac.f-warden { color: #FFD46A; } .vb-fac.f-seeker { color: #C4AEFF; }

.vb-pets { display: flex; gap: 8px; margin-top: 8px; }
.vb-pet {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: rgba(10, 6, 22, 0.7); border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vb-pet img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vb-pet.r-rare { border-color: #4FACFE; } .vb-pet.r-epic { border-color: #BF5FFF; } .vb-pet.r-legendary { border-color: #FFA726; } .vb-pet.r-mythic { border-color: #FF4757; } .vb-pet.r-unique { border-color: #FFD700; }
.vb-pet-act { transform: scale(1.25); box-shadow: 0 0 18px rgba(155, 123, 255, 0.8); }

@keyframes vbRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── Pojedynek: dwa duze zetony i piecz VS ─────────────────────── */
.vb-duel .vb-stage { display: flex; align-items: center; justify-content: center; gap: clamp(48px, 16vw, 260px); padding: 0 4vw; }
.vb-vs {
  width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display, Cinzel, serif); font-weight: 700; font-size: 16px; color: var(--vb-gold);
  background: radial-gradient(circle at 50% 35%, rgba(255, 212, 106, 0.28), rgba(20, 13, 42, 0.95) 65%);
  border: 1px solid rgba(255, 212, 106, 0.5);
  box-shadow: 0 0 0 4px rgba(10, 6, 22, 0.7), 0 0 30px rgba(255, 212, 106, 0.25);
  animation: vbVsPop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) 0.3s both;
}
@keyframes vbVsPop { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.vb-mode-worldboss .vb-side-right, .vb-boss.vb-side-right { --vb-port: 250px; }

/* ── Ruch: cios, doskok, dotkniecie ────────────────────────────── */
.vb-lunging { z-index: 5; }
.vb-hurt .vb-port { box-shadow: 0 0 0 5px rgba(255, 71, 87, 0.85), 0 0 40px rgba(255, 71, 87, 0.7); }
.vb-hurt .vb-port .vb-av, .vb-hurt .vb-port img { filter: brightness(1.25) saturate(0.7) sepia(0.3) hue-rotate(-30deg); }
.vb-hurt-crit .vb-port { box-shadow: 0 0 0 6px rgba(255, 212, 106, 0.95), 0 0 60px rgba(255, 212, 106, 0.8); }
.vb-hurt-crit .vb-port .vb-av, .vb-hurt-crit .vb-port img { filter: brightness(1.45) contrast(1.1); }
.vb-hurt-block .vb-port { box-shadow: 0 0 0 5px rgba(79, 172, 254, 0.9), 0 0 40px rgba(79, 172, 254, 0.6); }
.vb-dodging .vb-port { animation: vbDodge 0.42s ease both; }
@keyframes vbDodge { 0% { transform: none; } 35% { transform: translateX(-14%) skewX(6deg); opacity: 0.6; } 100% { transform: none; opacity: 1; } }
.vb-shake .vb-port { animation: vbShake 0.42s ease both; }
.vb-shake-hard .vb-port { animation: vbShakeHard 0.46s ease both; }
@keyframes vbShake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
@keyframes vbShakeHard { 0%, 100% { transform: none; } 15% { transform: translate(-12px, 4px) rotate(-2deg); } 30% { transform: translate(10px, -4px) rotate(2deg); } 45% { transform: translate(-8px, 2px); } 60% { transform: translate(6px, -2px); } 80% { transform: translate(-3px, 1px); } }
.vb-charging .vb-port { animation: vbCharge var(--vb-charge, 800ms) ease-in both; }
@keyframes vbCharge { from { box-shadow: 0 0 0 4px rgba(10, 6, 22, 0.85), 0 0 0 5px rgba(255, 71, 87, 0.2); } to { box-shadow: 0 0 0 4px rgba(10, 6, 22, 0.85), 0 0 0 8px rgba(255, 71, 87, 0.9), 0 0 70px rgba(255, 71, 87, 0.9); } }
.vb-swap .vb-port { transform: scale(0.6); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; }
.vb-swap .vb-plate { opacity: 0; transition: opacity 0.3s ease; }

/* Bron tnie: sprite obraca sie po luku przed celem. */
.vb-swing { position: absolute; z-index: 20; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; transform-origin: 50% 90%; animation: vbSwing var(--vb-ms, 260ms) cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.vb-swing img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 10px rgba(255, 212, 106, 0.6)); }
.vb-swing.flip { animation-name: vbSwingFlip; }
@keyframes vbSwing { 0% { transform: translate(-70px, -30px) rotate(-70deg) scale(0.7); opacity: 0; } 45% { transform: translate(-10px, -10px) rotate(-10deg) scale(1.1); opacity: 1; } 100% { transform: translate(28px, 18px) rotate(55deg) scale(1); opacity: 0; } }
@keyframes vbSwingFlip { 0% { transform: translate(70px, -30px) rotate(70deg) scale(-0.7, 0.7); opacity: 0; } 45% { transform: translate(10px, -10px) rotate(10deg) scale(-1.1, 1.1); opacity: 1; } 100% { transform: translate(-28px, 18px) rotate(-55deg) scale(-1, 1); opacity: 0; } }

/* Pocisk. Magia ciagnie za soba fioletowa smuge. */
.vb-proj { position: absolute; z-index: 20; width: 96px; height: 96px; pointer-events: none; }
.vb-proj img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 0 10px rgba(255, 212, 106, 0.7)); }
.vb-proj.magic img { filter: drop-shadow(0 0 14px rgba(155, 123, 255, 0.95)) drop-shadow(0 0 30px rgba(155, 123, 255, 0.6)); }
.vb-proj.magic::before { content: ''; position: absolute; right: 50%; top: 50%; width: 220px; height: 26px; transform: translateY(-50%); border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(155, 123, 255, 0.7)); filter: blur(4px); }
.vb-proj.shot::before { content: ''; position: absolute; right: 50%; top: 50%; width: 90px; height: 6px; transform: translateY(-50%); border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6)); filter: blur(2px); }
.vb-proj.spin img { filter: drop-shadow(0 0 12px rgba(196, 174, 255, 0.9)); }

/* Trafienie: blysk + sprite. */
.vb-impact { position: absolute; z-index: 21; width: var(--vb-size, 120px); height: var(--vb-size, 120px); margin: calc(var(--vb-size, 120px) / -2) 0 0 calc(var(--vb-size, 120px) / -2); pointer-events: none; }
.vb-impact .vb-flash { position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 212, 106, 0.6) 30%, transparent 65%); animation: vbFlash 0.45s ease-out both; }
.vb-impact img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: vbPop 0.6s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.vb-impact.crit .vb-flash { inset: -45%; background: radial-gradient(circle, #fff, rgba(255, 212, 106, 0.9) 25%, rgba(255, 107, 53, 0.4) 50%, transparent 70%); animation-duration: 0.6s; }
.vb-impact.block .vb-flash { background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(79, 172, 254, 0.6) 30%, transparent 65%); }
.vb-impact.dodge .vb-flash { background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 55%); }
@keyframes vbFlash { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes vbPop { 0% { transform: scale(0.3) rotate(-20deg); opacity: 0; } 30% { transform: scale(1.15) rotate(0); opacity: 1; } 100% { transform: scale(1.3) rotate(8deg); opacity: 0; } }

/* Liczby. */
.vb-float {
  position: absolute; z-index: 30; transform: translate(-50%, -50%); pointer-events: none;
  font-family: var(--font-display, Cinzel, serif); font-weight: 700; font-size: 30px; color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.9), 0 0 24px rgba(255, 255, 255, 0.35);
  animation: vbFloat 1.2s cubic-bezier(0.2, 0.9, 0.3, 1) both; white-space: nowrap;
}
.vb-float.crit { font-size: 44px; color: var(--vb-gold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 212, 106, 0.9), 0 0 40px rgba(255, 107, 53, 0.6); animation-name: vbFloatCrit; }
.vb-float.crit-lbl { font-size: 13px; letter-spacing: 0.3em; color: var(--vb-gold); margin-top: -46px; animation-duration: 1s; }
.vb-float.block { font-size: 18px; color: var(--vb-blue); letter-spacing: 0.1em; }
.vb-float.dodge { font-size: 18px; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.3em; }
.vb-float.pet { font-size: 22px; color: #C4AEFF; }
.vb-float.skill { font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #FFB340; margin-top: -60px; animation-duration: 1.1s; }
.vb-float.dead { font-size: 15px; letter-spacing: 0.35em; color: var(--vb-loss); padding: 4px 10px; border: 2px solid var(--vb-loss); border-radius: 6px; transform: translate(-50%, -50%) rotate(-12deg); animation-name: vbStamp; animation-duration: 1.4s; }
@keyframes vbFloat { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -150%) scale(1); } }
@keyframes vbFloatCrit { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.4) rotate(-8deg); } 12% { opacity: 1; transform: translate(-50%, -60%) scale(1.35) rotate(3deg); } 30% { transform: translate(-50%, -70%) scale(1.1) rotate(0); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1.1); } }
@keyframes vbStamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2) rotate(-12deg); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-12deg); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ── Szuflada szczegolow ───────────────────────────────────────── */
.vb-drawer {
  position: absolute; left: 0; right: 0; bottom: 74px; z-index: 40; margin: 0 auto;
  width: min(880px, calc(100% - 24px)); max-height: 46%; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px;
  border-radius: 20px; border: 1px solid rgba(255, 212, 106, 0.35);
  background: linear-gradient(180deg, rgba(40, 28, 78, 0.96), rgba(16, 10, 32, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 40px rgba(0, 0, 0, 0.7);
  animation: vbRise 0.3s ease both;
}
.vb-det { min-width: 0; }
.vb-det-name { font-family: var(--font-display, Cinzel, serif); font-weight: 700; font-size: 14px; color: var(--vb-gold); margin-bottom: 8px; }
.vb-det-name small { font-family: var(--font-body, Inter, sans-serif); font-size: 10px; color: var(--text-dim, #B0A5D4); font-weight: 600; margin-left: 6px; }
.vb-statgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 8px; }
.vb-statgrid div { text-align: center; padding: 6px 2px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); }
.vb-statgrid b { display: block; font-family: var(--font-display, Cinzel, serif); font-size: 13px; color: #fff; }
.vb-statgrid span { font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim, #B0A5D4); }
.vb-gear { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-bottom: 8px; }
.vb-gear-slot { aspect-ratio: 1; border-radius: 8px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vb-gear-slot > * { width: 100% !important; height: 100% !important; }
.vb-gear-slot.empty { opacity: 0.35; }
.vb-det-none { font-size: 11px; color: var(--text-dim, #B0A5D4); }
.vb-det-pets { display: flex; gap: 8px; flex-wrap: wrap; }
.vb-det-pet { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(155, 123, 255, 0.4); font-size: 11px; }
.vb-det-pet img { width: 26px; height: 26px; object-fit: contain; }
.vb-det-pet b { color: #C4AEFF; font-weight: 700; }

/* ── Wynik ─────────────────────────────────────────────────────── */
.vb-scrim { position: absolute; inset: 0; z-index: 50; background: rgba(10, 6, 22, 0.62); backdrop-filter: blur(2px); animation: vbFade 0.4s ease both; }
@keyframes vbFade { from { opacity: 0; } to { opacity: 1; } }
.vb-res {
  position: absolute; left: 50%; top: 50%; z-index: 51; transform: translate(-50%, -50%);
  width: min(380px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto;
  padding: 18px 18px 16px; text-align: center; border-radius: 24px;
  border: 1px solid rgba(255, 212, 106, 0.45);
  background: radial-gradient(80% 50% at 50% 0%, rgba(200, 168, 78, 0.18), transparent 70%), linear-gradient(180deg, rgba(64, 46, 122, 0.98), rgba(18, 11, 38, 0.99) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 60px rgba(0, 0, 0, 0.8);
  animation: vbResIn 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) 0.15s both;
}
.vb-res.loss { border-color: rgba(255, 71, 87, 0.45); }
@keyframes vbResIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.vb-res-art img { height: 84px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7)); }
.vb-res-art img + h2 { display: none; }
.vb-res h2 { margin: 6px 0 2px; font-family: var(--font-display, Cinzel, serif); font-weight: 700; font-size: 26px; letter-spacing: 0.1em; color: var(--vb-gold); text-shadow: 0 0 22px rgba(255, 212, 106, 0.4); }
.vb-res.loss h2 { color: #FF9AA2; text-shadow: 0 0 22px rgba(255, 71, 87, 0.4); }
.vb-res-sub { margin: 0 0 8px; font-size: 12px; color: var(--text-dim, #B0A5D4); }
.vb-res-rows { display: flex; flex-direction: column; gap: 5px; margin: 12px 0 8px; }
.vb-res-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); font-size: 12px; }
.vb-res-row span { display: inline-flex; align-items: center; gap: 8px; color: var(--text, #F0EAFF); }
.vb-res-row img { width: 18px; height: 18px; object-fit: contain; }
.vb-res-row b { font-family: var(--font-display, Cinzel, serif); font-size: 15px; }
.vb-res-row b.up { color: var(--vb-win); } .vb-res-row b.down { color: var(--vb-loss); }
.vb-res-note { margin: 6px 0; font-size: 11.5px; color: var(--text-dim, #B0A5D4); }
.vb-res-note b { color: #fff; }
.vb-res-unlock { color: var(--vb-gold); }
.vb-res-loot { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 8px 10px; border-radius: 12px; border: 1px solid; background: rgba(0, 0, 0, 0.3); text-align: left; }
.vb-res-loot-txt { display: flex; flex-direction: column; font-size: 10px; }
.vb-res-loot-txt b { font-size: 13px; }
.vb-res-loot-txt small { color: var(--text-dim, #B0A5D4); }
.vb-res-btn { width: 100%; margin-top: 10px; padding: 12px; border-radius: 14px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800; color: #2a1c04; border: 1px solid rgba(255, 255, 255, 0.35); background: linear-gradient(180deg, #FFE08A, #E9A93A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 14px rgba(233, 169, 58, 0.3); }
.vb-res-btn:hover { filter: brightness(1.06); }

/* ── Druzyny ───────────────────────────────────────────────────── */
.vb-teams .vb-stage { display: flex; flex-direction: column; padding: 0 16px; }
.vb-teambar { display: flex; gap: 16px; padding: 4px 0 8px; }
.vb-teamhp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vb-team-right { align-items: flex-end; text-align: right; }
.vb-teamhp b { font-family: var(--font-display, Cinzel, serif); font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vb-team-left b { color: var(--vb-gold); }
.vb-teamhp span { font-size: 10px; color: var(--text-dim, #B0A5D4); font-weight: 700; }
.vb-thp { width: 100%; height: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.vb-thp i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(180deg, #FFE59A, #FFD46A 50%, #C8A84E); transition: width 0.4s ease; }
.vb-team-right .vb-thp i { margin-left: auto; background: linear-gradient(180deg, #FF9AA2, #FF4757 50%, #C22A3A); }
.vb-team-right .vb-thp { direction: rtl; }
.vb-field { position: relative; flex: 1; min-height: 0; }
.vb-teams .vb-token { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--vb-sc, 1)); --vb-port: 84px; width: calc(var(--vb-port) + 40px); }
.vb-n-xl .vb-token { --vb-port: 110px; }
.vb-n-lg .vb-token { --vb-port: 84px; }
.vb-n-md .vb-token { --vb-port: 64px; }
.vb-n-sm .vb-token { --vb-port: 46px; }
.vb-teams .vb-plate { padding: 2px 8px; margin-bottom: 4px; }
.vb-teams .vb-name { font-size: 11px; }
.vb-n-md .vb-name, .vb-n-sm .vb-name { font-size: 9.5px; }
.vb-teams .vb-lvl { display: none; }
.vb-teams.vb-boss .vb-portwrap::after { inset: -8%; }
.vb-teams .vb-hp { height: 8px; margin-top: 5px; width: calc(var(--vb-port) + 10px); }
.vb-teams .vb-hp-txt { display: none; }
.vb-teams .vb-sub { display: none; }
.vb-teams .vb-ring { top: calc(22px + var(--vb-port) * 0.86); }
.vb-teams .vb-swing { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.vb-teams .vb-proj { width: 52px; height: 52px; }
.vb-teams .vb-float { font-size: 20px; }
.vb-teams .vb-float.crit { font-size: 28px; }
.vb-teams .vb-me .vb-plate { border-color: var(--vb-gold); box-shadow: 0 0 14px rgba(255, 212, 106, 0.4); }

/* ── Telefon ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .vb-head { padding: 10px 12px 4px; }
  .vb-title b { font-size: 17px; }
  .vb-duel .vb-stage { padding: 0 8px; gap: 10px; }
  .vb-token { --vb-port: 112px; width: calc(var(--vb-port) + 24px); max-width: 47%; }
  .vb-sub { flex-wrap: wrap; justify-content: center; }
  .vb-hp { width: 100%; }
  .vb-mode-worldboss .vb-side-right, .vb-boss.vb-side-right { --vb-port: 150px; }
  .vb-name { font-size: 12px; }
  .vb-vs { width: 40px; height: 40px; font-size: 12px; }
  .vb-hp { height: 12px; margin-top: 8px; }
  .vb-pet { width: 30px; height: 30px; }
  .vb-float { font-size: 22px; } .vb-float.crit { font-size: 32px; }
  .vb-swing { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .vb-drawer { grid-template-columns: 1fr; bottom: 66px; max-height: 60%; }
  .vb-statgrid { grid-template-columns: repeat(3, 1fr); }
  .vb-fbtn { min-width: 0; padding: 10px 14px; font-size: 12px; }
  .vb-ticker { min-height: 54px; }
  .vb-tick { font-size: 11px; }
  .vb-n-xl .vb-token { --vb-port: 64px; } .vb-n-lg .vb-token { --vb-port: 50px; } .vb-n-md .vb-token { --vb-port: 40px; } .vb-n-sm .vb-token { --vb-port: 30px; }
  .vb-teams .vb-name { font-size: 8px; }
}
@media (max-height: 560px) {
  .vb-token { --vb-port: 120px; }
  .vb-ticker { min-height: 40px; }
  .vb-foot { padding-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .vb-motes, .vb-ring i { animation: none; }
  .vb-enter .vb-plate, .vb-enter .vb-port, .vb-enter .vb-hp, .vb-vs { animation: none; }
}

/* ── Dossier: panele boczne z tym, co ma wplyw na walke ────────── */
.vb-duel .vb-stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "fight"; align-items: stretch; gap: 0; padding: 0; }
.vb-fight { grid-area: fight; display: flex; align-items: center; justify-content: center; gap: clamp(48px, 14vw, 240px); padding: 0 12px; min-width: 0; }
.vb-dos {
  grid-area: dos; display: none; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px; border-radius: 18px;
  border: 1px solid rgba(200, 168, 78, 0.3);
  background: linear-gradient(180deg, rgba(40, 28, 78, 0.82), rgba(16, 10, 32, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
}
.vb-dos-me { grid-area: dosme; }
.vb-dos-foe { grid-area: dosfoe; }
@media (min-width: 1040px) {
  .vb-duel .vb-stage { grid-template-columns: 236px minmax(0, 1fr) 236px; grid-template-areas: "dosme fight dosfoe"; gap: 12px; padding: 0 12px; }
  .vb-dos { display: block; }
  #vbDetails { display: none; }
}
.vb-dos-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.vb-dos-head b { font-family: var(--font-display, Cinzel, serif); font-size: 14px; color: var(--vb-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-dos-foe .vb-dos-head b { color: #fff; }
.vb-dos-head span { font-size: 9.5px; font-weight: 800; color: var(--text-dim, #B0A5D4); white-space: nowrap; }
.vb-dos-sec { margin-bottom: 10px; }
.vb-dos-lbl { font-size: 8.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 212, 106, 0.7); margin-bottom: 5px; }
.vb-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.vb-statgrid div { text-align: center; padding: 5px 2px; border-radius: 9px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); }
.vb-statgrid b { display: block; font-family: var(--font-display, Cinzel, serif); font-size: 12px; color: #fff; }
.vb-statgrid span { font-size: 7.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim, #B0A5D4); }
.vb-gear { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.vb-gear-slot { aspect-ratio: 1; border-radius: 9px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: help; transition: transform 0.12s ease, border-color 0.12s ease; }
.vb-gear-slot > * { width: 100% !important; height: 100% !important; }
.vb-gear-slot:hover { transform: translateY(-1px); border-color: rgba(255, 212, 106, 0.6); }
.vb-gear-slot.empty { opacity: 0.35; cursor: default; font-size: 8px; font-weight: 800; color: var(--text-dim, #B0A5D4); }
.vb-gear-slot.r-rare { border-color: rgba(79, 172, 254, 0.5); } .vb-gear-slot.r-epic { border-color: rgba(191, 95, 255, 0.5); } .vb-gear-slot.r-legendary { border-color: rgba(255, 167, 38, 0.6); } .vb-gear-slot.r-mythic { border-color: rgba(255, 71, 87, 0.6); }
.vb-gems .gvl-gems { display: flex; flex-wrap: wrap; gap: 5px; }
.vb-gems .gvl-gem { cursor: help; }
.vb-det-none { font-size: 11px; color: var(--text-dim, #B0A5D4); }
.vb-det-pets { display: flex; flex-direction: column; gap: 5px; }
.vb-det-pet { position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 5px 8px 5px 5px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(155, 123, 255, 0.35); cursor: help; }
.vb-det-pet img { grid-row: 1 / span 2; width: 34px; height: 34px; object-fit: contain; }
.vb-det-pet i { position: absolute; left: 26px; top: 26px; font-style: normal; font-size: 8px; font-weight: 800; padding: 0 4px; border-radius: 999px; background: #0A0616; color: var(--vb-gold); border: 1px solid rgba(255, 212, 106, 0.5); }
.vb-det-pet b { font-size: 11px; color: #C4AEFF; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-det-pet small { display: flex; flex-wrap: wrap; gap: 3px; }
.vb-det-pet small em, .vb-tip-chips em { font-style: normal; font-size: 8.5px; font-weight: 800; padding: 1px 5px; border-radius: 999px; background: rgba(46, 213, 115, 0.12); color: #7DF0A8; border: 1px solid rgba(46, 213, 115, 0.3); }
.vb-det-pet.empty { min-height: 34px; opacity: 0.35; border-style: dashed; }
.vb-det-pet.r-rare { border-color: rgba(79, 172, 254, 0.5); } .vb-det-pet.r-epic { border-color: rgba(191, 95, 255, 0.6); } .vb-det-pet.r-legendary { border-color: rgba(255, 167, 38, 0.6); } .vb-det-pet.r-mythic { border-color: rgba(255, 71, 87, 0.6); }
.vb-tree { display: block; width: 100%; max-width: 220px; margin: 0 auto; height: auto; aspect-ratio: 1; border-radius: 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); }

/* Telefon i wąskie okna: dossier jako szuflada pod Szczegoly. */
@media (max-width: 1039px) {
  .vb-root.vb-show-dos .vb-dos { display: block; position: absolute; left: 0; right: 0; bottom: 70px; z-index: 40; margin: 0 auto; width: min(560px, calc(100% - 16px)); max-height: 62%; }
  .vb-root.vb-show-dos .vb-dos-foe { display: none; }
  .vb-root.vb-show-dos.vb-dos-flip .vb-dos-me { display: none; }
  .vb-root.vb-show-dos.vb-dos-flip .vb-dos-foe { display: block; }
  .vb-root.vb-show-dos .vb-dos-head { cursor: pointer; }
  .vb-root.vb-show-dos .vb-dos-head::after { content: '\21C4'; margin-left: auto; color: var(--vb-gold); font-size: 14px; }
}

/* Tooltip. Wnetrze przedmiotu przychodzi z GVUI.buildEqTooltipInner. */
.vb-tip {
  position: absolute; z-index: 60; width: 240px; max-width: calc(100% - 16px);
  padding: 10px 12px; border-radius: 12px; pointer-events: none;
  font-size: 11px; line-height: 1.4; color: var(--text, #F0EAFF);
  background: linear-gradient(180deg, rgba(40, 28, 78, 0.98), rgba(16, 10, 32, 0.99));
  border: 1px solid rgba(255, 212, 106, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 30px rgba(0, 0, 0, 0.7);
  animation: vbFade 0.15s ease both;
}
.vb-tip > b { display: block; font-size: 12px; margin-bottom: 3px; }
.vb-tip > span { display: block; }
.vb-tip .vb-tip-r { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim, #B0A5D4); }
.vb-tip .vb-tip-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.vb-tip .vb-tip-skill { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-dim, #B0A5D4); }
.vb-tip .vb-tip-skill b { color: var(--vb-gold); }
.vb-tip .vb-tip-warn { color: #FF9AA2; }
.vb-tip .arena-eq-tooltip { display: block; position: static; transform: none; width: auto; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }

/* Guzik demo (tylko na podgladzie). */
.vb-demo { position: fixed; left: 12px; bottom: 150px; z-index: 99998; font-family: Inter, system-ui, sans-serif; }
.vb-demo-main { padding: 8px 12px; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: #2a1c04; border: 1px solid rgba(255, 255, 255, 0.35); background: linear-gradient(180deg, #FFE08A, #E9A93A); box-shadow: 0 4px 14px rgba(233, 169, 58, 0.35); }
.vb-demo-menu { display: none; position: absolute; left: 0; bottom: 40px; min-width: 160px; padding: 6px; border-radius: 14px; background: linear-gradient(180deg, rgba(40, 28, 78, 0.98), rgba(16, 10, 32, 0.99)); border: 1px solid rgba(255, 212, 106, 0.4); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7); }
.vb-demo.open .vb-demo-menu { display: flex; flex-direction: column; gap: 3px; }
.vb-demo-menu button { text-align: left; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: #F0EAFF; background: none; border: 1px solid transparent; }
.vb-demo-menu button:hover { background: rgba(255, 212, 106, 0.12); border-color: rgba(255, 212, 106, 0.4); color: #FFD46A; }

/* ── Rama konta, tlo awatara, aura premium ───────────────────────
   Klasy ramek i tel sa te same, co w profilu (gv-frame-*, gv-bg-*,
   gv-avatar-prem). Rama siedzi na osobnym pierscieniu NAD portretem,
   bo `.vb-port` ma overflow: hidden i zjadlby halo founderow. */
.vb-portwrap { position: relative; z-index: 1; width: var(--vb-port); height: var(--vb-port); }
.vb-portwrap .vb-port { width: 100%; height: 100%; }
.vb-frame { position: absolute; inset: 0; border-radius: 50%; z-index: 0; pointer-events: none; border-color: transparent !important; box-shadow: none !important; }
.vb-boss .vb-frame { display: none; }
/* Halo founderow bez wymogu `.gv-avatar-wrap` w gorze drzewa. */
.vb-frame.gv-frame-founder::before, .vb-frame.gv-frame-founder::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.vb-frame.gv-frame-founder::before {
  inset: -16%; filter: blur(5px); z-index: -1;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,240,180,0.6) 30deg, transparent 60deg, rgba(255,220,140,0.5) 120deg, transparent 150deg, rgba(255,250,200,0.7) 210deg, transparent 240deg, rgba(255,220,140,0.5) 300deg, transparent 330deg);
  animation: gvFounderHaloSpin 10s linear infinite;
}
.vb-frame.gv-frame-founder::after {
  inset: -30%; filter: blur(10px); z-index: -2;
  background: conic-gradient(from 180deg, transparent 0deg, rgba(255,215,140,0.3) 45deg, transparent 90deg, rgba(255,215,140,0.22) 180deg, transparent 225deg, rgba(255,215,140,0.3) 315deg, transparent 360deg);
  animation: gvFounderHaloCounter 16s linear infinite;
}
/* Nazwa, pasek, podpisy i pupile stoja NAD aura i halo. */
.vb-plate, .vb-hp, .vb-sub, .vb-pets { position: relative; z-index: 2; }
/* Aura premium: pasek 6 klatek 200x200, przeskok klatek przez steps. */
.vb-aura {
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: calc(var(--vb-port) * 1.4); height: calc(var(--vb-port) * 1.4);
  transform: translate(-50%, -50%);
  background: url('../img/arena/aura-premium-sheet.webp') 0 0 / 600% 100% no-repeat;
  opacity: 0.38;
  /* Promienie gasna ku brzegowi, zeby nie wchodzily na nazwe i pasek. */
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 68%);
          mask-image: radial-gradient(circle, #000 35%, transparent 68%);
  animation: vbAura 1.5s steps(6, jump-none) infinite;
}
@keyframes vbAura { from { background-position-x: 0%; } to { background-position-x: 100%; } }
.vb-teams .vb-aura { opacity: 0.35; }

/* ── Efekty calej sceny ─────────────────────────────────────────── */
.vb-sflash { position: absolute; inset: 0; z-index: 45; pointer-events: none; animation: vbSflash 0.55s ease-out both; }
.vb-sflash.crit { background: radial-gradient(circle at 50% 45%, rgba(255, 230, 150, 0.55), rgba(255, 212, 106, 0.18) 40%, transparent 70%); }
.vb-sflash.ko { background: radial-gradient(circle at 50% 50%, transparent 35%, rgba(255, 71, 87, 0.45) 100%); animation-duration: 0.7s; }
@keyframes vbSflash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.vb-ko .vb-stage { animation: vbKoShake 0.6s ease both; }
@keyframes vbKoShake { 0%, 100% { transform: none; } 20% { transform: translate(-8px, 3px); } 40% { transform: translate(7px, -3px); } 60% { transform: translate(-5px, 2px); } 80% { transform: translate(3px, -1px); } }
.vb-banner {
  position: absolute; left: 0; right: 0; top: 18%; z-index: 44; text-align: center; pointer-events: none;
  animation: vbBanner 1.1s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.vb-banner span {
  display: inline-block; padding: 8px 28px; border-radius: 999px;
  font-family: var(--font-display, Cinzel, serif); font-weight: 700; font-size: 22px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--vb-gold); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 24px rgba(255, 212, 106, 0.5);
  background: linear-gradient(90deg, transparent, rgba(10, 6, 22, 0.75) 20%, rgba(10, 6, 22, 0.75) 80%, transparent);
  border-top: 1px solid rgba(255, 212, 106, 0.4); border-bottom: 1px solid rgba(255, 212, 106, 0.4);
}
@keyframes vbBanner { 0% { opacity: 0; transform: translateY(-14px) scale(0.9); } 20% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
/* Zwyciezca: zlota poswiata i drobiny w gore. */
.vb-win .vb-port { box-shadow: 0 0 0 6px rgba(255, 212, 106, 0.9), 0 0 60px rgba(255, 212, 106, 0.7); animation: vbWinPulse 1.6s ease-in-out infinite; }
@keyframes vbWinPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
.vb-sparks { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: visible; }
.vb-sparks i {
  position: absolute; bottom: 20%; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff, #FFD46A 60%, transparent 70%);
  box-shadow: 0 0 8px rgba(255, 212, 106, 0.9);
  animation: vbSpark 1.8s ease-out infinite;
}
@keyframes vbSpark { 0% { opacity: 0; transform: translate(0, 0) scale(0.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -140px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .vb-aura, .vb-sparks i, .vb-win .vb-port, .vb-ko .vb-stage, .vb-frame::before, .vb-frame::after { animation: none; } }

/* Trafienie z luku: mniejszy rozblysk niz krytyk, bez etykiety. */
.vb-impact.shot img { inset: 15%; width: 70%; height: 70%; }
.vb-impact.shot .vb-flash { background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 212, 106, 0.5) 30%, transparent 60%); }

/* ── Wiecej zycia w walce ───────────────────────────────────────── */
/* Ostatni cios: przyblizenie i zlota winieta. */
.vb-slowmo .vb-stage { animation: vbSlowZoom 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes vbSlowZoom { 0% { transform: scale(1); } 30% { transform: scale(1.05); } 100% { transform: scale(1); } }
.vb-slowmo::after { content: ''; position: absolute; inset: 0; z-index: 43; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(255, 212, 106, 0.28) 100%); animation: vbSflash 1.1s ease both; }
/* Krytyk: krotki skok obiektywu. */
.vb-zoom .vb-stage { animation: vbZoomKick 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes vbZoomKick { 0% { transform: scale(1); } 25% { transform: scale(1.035); } 100% { transform: scale(1); } }
/* Doskok: smuga swiatla za zetonem w kolorze klasy. */
.vb-lunging .vb-portwrap::before {
  content: ''; position: absolute; inset: -10%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--vb-c) 55%, transparent), transparent 70%);
  filter: blur(10px); animation: vbTrail 0.5s ease-out both;
}
@keyframes vbTrail { 0% { transform: scale(0.6); opacity: 0; } 40% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
/* Malo zycia: czerwony puls. */
.vb-low .vb-port { animation: vbLowPulse 1.1s ease-in-out infinite; }
@keyframes vbLowPulse { 0%, 100% { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7), 0 0 0 0 rgba(255, 71, 87, 0); } 50% { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(255, 71, 87, 0.55), 0 0 40px rgba(255, 71, 87, 0.6); } }
.vb-low .vb-hp-fill { animation: vbLowBar 0.9s ease-in-out infinite; }
@keyframes vbLowBar { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }
/* Pasek blyska przy stracie. */
.vb-hp-hit { animation: vbHpHit 0.35s ease-out both; }
@keyframes vbHpHit { 0% { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 16px rgba(255, 255, 255, 0.6); } 100% { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5); } }
/* Kombo. */
.vb-float.combo { font-size: 15px; letter-spacing: 0.2em; color: #FF9F43; margin-top: 44px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9), 0 0 16px rgba(255, 159, 67, 0.8); animation-duration: 1s; }
.vb-banner.final span { color: #FF9AA2; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 24px rgba(255, 71, 87, 0.6); border-color: rgba(255, 71, 87, 0.5); }
@media (prefers-reduced-motion: reduce) { .vb-slowmo .vb-stage, .vb-zoom .vb-stage, .vb-lunging .vb-portwrap::before, .vb-low .vb-port, .vb-low .vb-hp-fill, .vb-hp-hit { animation: none; } }