/* Ravager effects — code-drawn placeholders until the skill art exists.
   Every visual here is one class; final art replaces it by giving that class a
   background-image (the art slots are listed in ravager-fx.mjs, ART). Hosts sit in
   #knightFxLayer in world units: left = x, bottom = height above the map floor. */

.rav-host { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 6; }
.rav-host--behind { z-index: 3; }
/* Every part is placed from the host's point by its margins. Without an explicit
   bottom/left an absolute child sits at the host's TOP and hangs downward, which
   put every effect a body-height below the character. */
.rav-host > div { left: 0; bottom: 0; }

/* Savage Cleave: a crimson crescent sweeping ahead of the body. */
.rav-arc {
  position: absolute; width: 280px; height: 170px; margin-left: -40px; margin-bottom: -40px;
  border-radius: 50%;
  border-top: 16px solid rgba(235, 40, 40, .92);
  border-right: 8px solid rgba(255, 120, 80, .55);
  filter: drop-shadow(0 0 10px rgba(255, 40, 20, .8));
  transform-origin: 20% 70%;
  animation: rav-arc 340ms ease-out forwards;
}
.rav-arc--flip { margin-left: -240px; transform-origin: 80% 70%; animation-name: rav-arc-flip; }
@keyframes rav-arc { 0% { opacity: 0; transform: rotate(-70deg) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(35deg) scale(1.05); } }
@keyframes rav-arc-flip { 0% { opacity: 0; transform: scaleX(-1) rotate(-70deg) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scaleX(-1) rotate(35deg) scale(1.05); } }

/* Rampage Charge: a red streak along the path and dust kicked up behind. */
.rav-streak {
  position: absolute; height: 46px; margin-bottom: 30px;
  background: linear-gradient(90deg, rgba(255,60,30,0), rgba(255,60,30,.55) 60%, rgba(255,210,170,.9));
  border-radius: 24px; filter: blur(3px);
  animation: rav-fade 480ms ease-out forwards;
}
.rav-streak--left { background: linear-gradient(270deg, rgba(255,60,30,0), rgba(255,60,30,.55) 60%, rgba(255,210,170,.9)); }
.rav-dust {
  position: absolute; width: 70px; height: 46px; margin-left: -35px; margin-bottom: -6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(190,160,120,.75), rgba(150,120,90,.25) 60%, rgba(150,120,90,0) 75%);
  animation: rav-dust 620ms ease-out forwards;
}
@keyframes rav-dust { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7) translateY(-16px); } }
@keyframes rav-fade { 0% { opacity: 1; } 100% { opacity: 0; } }

/* War Stomp: a shockwave each way along the floor, and a crack where you stood. */
.rav-wave {
  position: absolute; width: 90px; height: 60px; margin-left: -45px; margin-bottom: -4px;
  border-radius: 50% 50% 0 0;
  border-top: 10px solid rgba(255, 190, 120, .9);
  filter: drop-shadow(0 0 8px rgba(255, 120, 40, .8));
}
.rav-crack {
  position: absolute; width: 220px; height: 26px; margin-left: -110px; margin-bottom: -10px;
  background:
    linear-gradient(170deg, transparent 46%, rgba(30,15,10,.9) 48%, rgba(30,15,10,.9) 52%, transparent 54%),
    linear-gradient(10deg, transparent 46%, rgba(30,15,10,.85) 48%, rgba(30,15,10,.85) 52%, transparent 54%),
    radial-gradient(ellipse at center, rgba(255,120,40,.35), rgba(0,0,0,0) 70%);
  animation: rav-crack 1100ms ease-out forwards;
}
@keyframes rav-crack { 0% { opacity: 0; transform: scaleX(.3); } 8% { opacity: 1; transform: scaleX(1); } 75% { opacity: 1; } 100% { opacity: 0; } }

/* Earthbreaker: a stone spike erupting from the floor. */
.rav-spike {
  position: absolute; width: 70px; height: 130px; margin-left: -35px; margin-bottom: -8px;
  clip-path: polygon(50% 0, 82% 62%, 100% 100%, 0 100%, 18% 62%);
  background: linear-gradient(180deg, #d9c4a0 0%, #8a6a48 45%, #4a3424 100%);
  transform-origin: 50% 100%;
  animation: rav-spike 620ms cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes rav-spike { 0% { transform: scaleY(0); opacity: 1; } 35% { transform: scaleY(1.1); } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } }

/* Brutal Grab: a red grip flash where the hand closes; the landing burst. */
.rav-grip {
  position: absolute; width: 90px; height: 90px; margin-left: -45px; margin-bottom: -45px;
  border-radius: 50%; border: 6px solid rgba(255, 50, 30, .95);
  box-shadow: 0 0 16px rgba(255,40,20,.9), inset 0 0 12px rgba(255,40,20,.7);
  animation: rav-grip 360ms ease-out forwards;
}
@keyframes rav-grip { 0% { opacity: 0; transform: scale(1.6); } 40% { opacity: 1; transform: scale(.7); } 100% { opacity: 0; transform: scale(.9); } }
.rav-burst {
  position: absolute; width: 180px; height: 80px; margin-left: -90px; margin-bottom: -20px;
  border-radius: 50%; border: 8px solid rgba(255, 200, 120, .9);
  animation: rav-burst 480ms ease-out forwards;
}
@keyframes rav-burst { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.8); } }

/* Whirlwind: a spinning blade ring around the body for the whole spin. */
.rav-spin {
  position: absolute; width: 300px; height: 150px; margin-left: -150px; margin-bottom: -75px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,60,40,0), rgba(255,60,40,.7) 18%, rgba(255,230,200,.9) 22%, rgba(255,60,40,0) 30%,
    rgba(255,60,40,0) 50%, rgba(255,60,40,.7) 68%, rgba(255,230,200,.9) 72%, rgba(255,60,40,0) 80%);
  -webkit-mask: radial-gradient(ellipse at center, transparent 52%, #000 56%);
          mask: radial-gradient(ellipse at center, transparent 52%, #000 56%);
  animation: rav-spin 300ms linear infinite;
}
@keyframes rav-spin { to { transform: rotate(360deg); } }

/* Buff auras: Battle Rage (embers), Unleash (red blaze + eyes), Iron Will (stone). */
.rav-aura {
  position: absolute; width: 170px; height: 190px; margin-left: -85px; margin-bottom: -95px;
  border-radius: 50%; filter: blur(5px);
  animation: rav-pulse 900ms ease-in-out infinite alternate;
}
.rav-aura--rage { background: radial-gradient(ellipse at center, rgba(255,150,40,.6), rgba(255,90,20,.25) 60%, rgba(255,90,20,0) 78%); }
.rav-aura--unleash {
  width: 220px; height: 240px; margin-left: -110px; margin-bottom: -120px;
  background: radial-gradient(ellipse at center, rgba(255,20,20,.7), rgba(200,0,0,.32) 55%, rgba(200,0,0,0) 76%);
  animation-duration: 420ms;
}
.rav-aura--iron {
  filter: drop-shadow(0 0 6px rgba(220, 230, 255, .8)); border: 7px dashed rgba(215, 220, 235, .95);
  background: radial-gradient(ellipse at center, rgba(170,180,200,.28), rgba(160,170,190,0) 70%);
  animation: rav-iron 2400ms linear infinite;
}
@keyframes rav-pulse { from { opacity: .7; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
@keyframes rav-iron { to { transform: rotate(360deg); } }
.rav-eye {
  position: absolute; width: 8px; height: 8px; margin-left: -4px; margin-bottom: -4px;
  border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 9px 4px rgba(255, 40, 40, .95);
}

/* The Fury bar, under the skill cluster and the buff tray. */
.rav-fury {
  position: absolute; top: 116px; right: 132px; z-index: 10115;
  width: 250px; padding: 5px 8px 6px; border-radius: 11px;
  border: 1px solid rgba(255, 80, 60, .45); background: rgba(20, 4, 6, .86);
  box-shadow: 0 8px 20px rgba(0,0,0,.35); pointer-events: none;
  font: 700 11px/1 system-ui, sans-serif; color: #ffd9d0; letter-spacing: .04em;
}
.rav-fury__label { display: flex; justify-content: space-between; margin-bottom: 4px; }
.rav-fury__track { position: relative; height: 10px; border-radius: 6px; background: #3a0b0e; overflow: hidden; }
.rav-fury__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, #8f0f16, #e0282f 70%, #ff7a3c);
  transition: width 220ms ease-out;
}
.rav-fury.is-hot .rav-fury__fill { box-shadow: 0 0 10px rgba(255,90,40,.9); }
.rav-fury.is-ready { border-color: rgba(255, 120, 60, .95); box-shadow: 0 0 16px rgba(255, 60, 30, .75); animation: rav-ready 700ms ease-in-out infinite alternate; }
.rav-fury.is-unleashed { border-color: #ff3b2f; }
@keyframes rav-ready { from { box-shadow: 0 0 8px rgba(255,60,30,.5); } to { box-shadow: 0 0 20px rgba(255,90,40,.95); } }

/* ---- Vandal + Slasher ---- */
.rav-stab {
  position: absolute; width: 150px; height: 10px; margin-left: -20px; margin-bottom: -5px;
  border-radius: 6px; background: linear-gradient(90deg, rgba(200,160,255,0), rgba(235,220,255,.95) 70%, #fff);
  filter: drop-shadow(0 0 6px rgba(170,110,255,.9)); transform-origin: 0 50%;
  animation: rav-stab 240ms ease-out forwards;
}
.rav-stab--left { margin-left: -130px; transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(200,160,255,0), rgba(235,220,255,.95) 70%, #fff); }
.rav-stab--heavy { height: 16px; filter: drop-shadow(0 0 10px rgba(150,60,255,1)); }
@keyframes rav-stab { 0% { opacity: 0; transform: scaleX(.2); } 30% { opacity: 1; transform: scaleX(1.05); } 100% { opacity: 0; transform: scaleX(1); } }
.rav-streak--shadow { background: linear-gradient(90deg, rgba(90,40,160,0), rgba(110,60,190,.55) 60%, rgba(210,190,255,.85)); }
.rav-streak--shadow.rav-streak--left { background: linear-gradient(270deg, rgba(90,40,160,0), rgba(110,60,190,.55) 60%, rgba(210,190,255,.85)); }
.rav-streak--blade { height: 30px; margin-bottom: 50px; }
.rav-dust--smoke { background: radial-gradient(ellipse at center, rgba(120,110,140,.8), rgba(90,80,110,.3) 60%, rgba(90,80,110,0) 75%); }
.rav-crit {
  position: absolute; width: 120px; height: 120px; margin-left: -60px; margin-bottom: -60px;
  background:
    linear-gradient(45deg, transparent 45%, rgba(255,255,255,.95) 48%, rgba(190,120,255,.95) 50%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(255,255,255,.95) 48%, rgba(190,120,255,.95) 50%, transparent 55%);
  filter: drop-shadow(0 0 10px rgba(170,90,255,.95));
  animation: rav-burst 480ms ease-out forwards;
}
.rav-dirty {
  position: absolute; width: 90px; height: 70px; margin-left: -45px; margin-bottom: -35px;
  border-radius: 50%; background: radial-gradient(ellipse at center, rgba(140,220,90,.8), rgba(90,160,40,.3) 60%, rgba(90,160,40,0) 75%);
  animation: rav-dust 680ms ease-out forwards;
}
.rav-arc--bleed { border-top-color: rgba(180, 0, 30, .95); }
.rav-slash {
  position: absolute; width: 140px; height: 8px; margin-left: -70px; margin-bottom: -4px;
  border-radius: 6px; background: linear-gradient(90deg, rgba(255,80,80,0), #fff 50%, rgba(255,80,80,0));
  filter: drop-shadow(0 0 6px rgba(255,60,60,.9)); transform: rotate(var(--rot, 0deg));
  animation: rav-slash 220ms ease-out forwards;
}
.rav-slash--big { width: 220px; height: 14px; margin-left: -110px; }
@keyframes rav-slash { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 40% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; } }
.rav-aura--smoke { filter: blur(8px); background: radial-gradient(ellipse at center, rgba(140,130,160,.75), rgba(100,90,120,.35) 60%, rgba(100,90,120,0) 78%); }
.rav-aura--rush { background: radial-gradient(ellipse at center, rgba(255,40,60,.45), rgba(160,20,200,.22) 60%, rgba(160,20,200,0) 78%); animation-duration: 300ms; }
.rav-bleed {
  position: absolute; width: 14px; height: 18px; margin-left: -18px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #d4142c; box-shadow: 0 0 6px rgba(255,30,50,.9);
  font: 800 11px/18px system-ui, sans-serif; color: #fff; text-indent: 16px; white-space: nowrap;
  animation: rav-drip 900ms ease-in infinite;
}
@keyframes rav-drip { 0% { transform: translateY(0); } 70% { transform: translateY(10px); opacity: 1; } 100% { transform: translateY(12px); opacity: .4; } }
.rav-vuln {
  position: absolute; width: 0; height: 0; margin-left: 10px; margin-bottom: 2px;
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 14px solid #8bd94a;
  filter: drop-shadow(0 0 5px rgba(140,230,80,.9));
}
.rav-dodge {
  position: absolute; margin-left: -40px; margin-bottom: 10px; width: 80px; text-align: center;
  font: 900 16px/1 system-ui, sans-serif; color: #f4ecff; letter-spacing: .08em;
  text-shadow: 0 0 8px rgba(170,110,255,.95), 0 2px 0 #3a2060;
  animation: rav-dodge 600ms ease-out forwards;
}
@keyframes rav-dodge { 0% { opacity: 0; transform: translateY(0) scale(.7); } 25% { opacity: 1; transform: translateY(-10px) scale(1.1); } 100% { opacity: 0; transform: translateY(-34px) scale(1); } }
.rav-fury--momentum { border-color: rgba(190, 120, 255, .5); background: rgba(14, 6, 24, .88); }
.rav-fury--momentum .rav-fury__fill { background: linear-gradient(90deg, #5a1690, #a33cf0 70%, #ff6a8c); }
.rav-fury--momentum .rav-fury__track { background: #26103a; }

/* ---- Deadeye ---- */
/* A throwing star drawn in code. The projectile element spins itself; this is
   only the shape. Give a Deadeye skill a projectileUrl and the image replaces it. */
.projectile--rav-star { width: 30px; height: 30px; }
.rav-star {
  display: block; width: 100%; height: 100%;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  background: radial-gradient(circle at center, #f2f6ff 0 18%, #9fb3d6 19% 46%, #4c5d80 47%);
  filter: drop-shadow(0 0 4px rgba(150, 190, 255, .9));
}
.projectile--shadow_throw { width: 46px; height: 46px; }
.projectile--shadow_throw .rav-star {
  background: radial-gradient(circle at center, #e9dcff 0 16%, #6b3fb8 17% 46%, #24113f 47%);
  filter: drop-shadow(0 0 9px rgba(140, 70, 255, 1));
}
.rav-aura--focus { background: radial-gradient(ellipse at center, rgba(90,160,255,.5), rgba(200,220,255,.2) 60%, rgba(200,220,255,0) 78%); animation-duration: 600ms; }
.rav-fury--precision { border-color: rgba(120, 170, 255, .55); background: rgba(6, 12, 28, .88); }
.rav-fury--precision .rav-fury__fill { background: linear-gradient(90deg, #12357a, #3d7fe0 70%, #d7e6ff); }
.rav-fury--precision .rav-fury__track { background: #0c1d3d; }

/* ---- Shadow Mode and Haste ---- */
/* Smoke Escape: the hidden player is a dark, see-through silhouette for everyone,
   so a fighter can still tell where a Vandal is while monsters cannot. */
.rav-shadow-mode { opacity: .62 !important; filter: grayscale(1) brightness(.3) drop-shadow(0 0 3px rgba(190, 140, 255, 1)) drop-shadow(0 0 12px rgba(140, 80, 240, .95)) !important; transition: opacity 180ms, filter 180ms; }
/* Haste: wind streaks at the feet. */
.rav-haste {
  position: absolute; width: 120px; height: 24px; margin-left: -60px; margin-bottom: -12px;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(190, 255, 220, .85) 8% 28%, transparent 28% 40%, rgba(190, 255, 220, .6) 40% 55%, transparent 55% 70%, rgba(190, 255, 220, .45) 70% 80%, transparent 80%);
  background-size: 120px 3px; background-repeat: repeat-y; background-position: 0 4px;
  filter: drop-shadow(0 0 4px rgba(120, 255, 190, .8));
  animation: rav-haste 500ms linear infinite;
}
@keyframes rav-haste { from { background-position-x: 0; opacity: .9; } to { background-position-x: -120px; opacity: .6; } }

/* ==== Round 6: 3rd/4th jobs, Reaper, Trickster ==== */
/* The bar wraps once a 3rd/4th job fills it; what sits under it moves down
   (job-abilities.js sets --hq-jobbar-extra). */
.hq-jobbar { flex-wrap: wrap; justify-content: flex-end; max-width: min(640px, calc(100vw - 300px)); }
.hq-buff-tray { top: calc(68px + var(--hq-jobbar-extra, 0px)); }
.rav-fury { top: calc(116px + var(--hq-jobbar-extra, 0px)); }
body.hq-mobile-play .hq-jobbar { max-width: calc(100% - 464px); }

/* Gauges */
.rav-fury--spectral { border-color: rgba(120, 230, 255, .55); background: rgba(4, 14, 24, .88); color: #d6f6ff; }
.rav-fury--spectral .rav-fury__fill { background: linear-gradient(90deg, #0f4d6e, #39c6ff 65%, #e0fbff); }
.rav-fury--spectral .rav-fury__track { background: #0b2533; }
.rav-fury--mischief { border-color: rgba(255, 120, 220, .55); background: rgba(22, 6, 22, .88); color: #ffe0f6; }
.rav-fury--mischief .rav-fury__fill { background: linear-gradient(90deg, #ff4d6d, #ffb703 30%, #4dd599 55%, #4cc9f0 75%, #c77dff); }
.rav-fury--mischief .rav-fury__track { background: #2a0d27; }

/* Thrown cards */
.projectile--rav-card { width: 34px !important; height: 34px !important; display: flex; align-items: center; justify-content: center; }
.rav-card { width: 22px; height: 30px; border-radius: 4px; background: #fff; border: 2px solid #c1121f; color: #c1121f; font: 900 16px/26px system-ui, sans-serif; text-align: center; box-shadow: 0 0 10px rgba(255, 80, 200, .8); animation: rav-card-spin 360ms linear infinite; }
.projectile--explosive_joker .rav-card { border-color: #7b2cbf; color: #7b2cbf; font-size: 14px; }
@keyframes rav-card-spin { from { transform: rotateY(0) rotate(-12deg); } to { transform: rotateY(360deg) rotate(-12deg); } }
.projectile--rav-star.projectile--phantom_star .rav-star,
.projectile--rav-star.projectile--spectral_ricochet .rav-star { filter: hue-rotate(160deg) drop-shadow(0 0 8px rgba(110, 220, 255, .95)); opacity: .9; }
.projectile--rav-star.projectile--deathshot .rav-star,
.projectile--rav-star.projectile--final_shot .rav-star { transform: scale(2); filter: drop-shadow(0 0 14px rgba(255, 40, 60, .95)); }
.projectile--rav-star.projectile--bullseye .rav-star { transform: scale(1.4); filter: drop-shadow(0 0 10px rgba(255, 220, 80, .95)); }

/* Storms */
.rav-field {
  position: absolute; left: calc(-1 * var(--r)); bottom: -14px; width: calc(2 * var(--r)); height: 34px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 70, 70, .45), rgba(120, 0, 30, .18) 60%, transparent 72%);
  animation: rav-field var(--ms) ease-out forwards;
}
.rav-field--blades, .rav-field--cuts { background: radial-gradient(ellipse at center, rgba(130, 220, 255, .45), rgba(40, 60, 140, .18) 60%, transparent 72%); }
.rav-field--cards { background: radial-gradient(ellipse at center, rgba(255, 120, 220, .45), rgba(120, 20, 120, .18) 60%, transparent 72%); }
.rav-field--coins { background: radial-gradient(ellipse at center, rgba(255, 215, 60, .5), rgba(160, 110, 0, .18) 60%, transparent 72%); }
.rav-field--annihilation { background: radial-gradient(ellipse at center, rgba(255, 120, 30, .6), rgba(160, 20, 0, .25) 60%, transparent 72%); }
@keyframes rav-field { 0% { transform: scale(.3); opacity: 0; } 15% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.rav-storm { position: absolute; left: -40px; bottom: 0; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; font-size: 40px; pointer-events: none; }
.rav-storm:not(.rav-storm--fall) { height: 10px; margin-bottom: 30px; border-radius: 6px; background: linear-gradient(90deg, transparent, #fff 45%, #ff3b4f 55%, transparent); transform: rotate(var(--rot)); animation: rav-slash-in 280ms ease-out forwards; box-shadow: 0 0 12px rgba(255, 60, 80, .9); }
.rav-storm--blades:not(.rav-storm--fall), .rav-storm--cuts:not(.rav-storm--fall) { background: linear-gradient(90deg, transparent, #fff 45%, #6ad7ff 55%, transparent); box-shadow: 0 0 12px rgba(80, 200, 255, .9); }
.rav-storm--annihilation:not(.rav-storm--fall) { height: 120px; width: 120px; left: -60px; margin-bottom: 0; border-radius: 50%; background: radial-gradient(circle, #fff 0 10%, #ffb703 25%, #ff3d00 50%, transparent 70%); animation: rav-pop 300ms ease-out forwards; }
.rav-storm--fall { animation: rav-fall 600ms cubic-bezier(.5, 0, 1, 1) forwards; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .8)); }
.rav-storm--axes { font-size: 64px; filter: drop-shadow(0 0 10px rgba(255, 60, 30, .9)) hue-rotate(-20deg); }
.rav-storm--hammer { font-size: 150px; width: 160px; left: -80px; height: 160px; }
.rav-storm--stars, .rav-storm--starfall { color: #fff6a8; text-shadow: 0 0 12px #ffd23f; }
.rav-storm--last { transform: scale(1.5); }
@keyframes rav-fall { 0% { transform: translateY(-360px) rotate(var(--rot)); opacity: 0; } 20% { opacity: 1; } 85% { transform: translateY(0) rotate(var(--rot)); opacity: 1; } 100% { transform: translateY(0) rotate(var(--rot)) scale(1.3); opacity: 0; } }
@keyframes rav-slash-in { 0% { transform: rotate(var(--rot)) scaleX(.1); opacity: 1; } 60% { transform: rotate(var(--rot)) scaleX(1.2); opacity: 1; } 100% { transform: rotate(var(--rot)) scaleX(1.3); opacity: 0; } }
@keyframes rav-pop { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.rav-burst--finale { transform: scale(2.2); }
.rav-burst--execute { transform: scale(1.8); filter: hue-rotate(-30deg) saturate(1.6); }
.rav-burst--joker { transform: scale(2.2); filter: hue-rotate(250deg) saturate(1.8); }

/* Chain hops, chain lines, leaps */
.rav-streak--chain { filter: hue-rotate(170deg) brightness(1.3); }
.rav-streak--leap { transform: translateY(-40px); filter: hue-rotate(-20deg) brightness(1.4); }
.rav-streak--swap { filter: hue-rotate(260deg) saturate(1.6); }
.rav-slash--chain { filter: hue-rotate(180deg); }
.rav-chainline { position: absolute; left: 0; bottom: 0; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, #cfd8dc 0 10px, #607d8b 10px 16px); box-shadow: 0 0 8px rgba(160, 220, 255, .8); transform-origin: left center; animation: rav-chain 520ms ease-in-out forwards; }
.rav-chainline--left { transform-origin: right center; }
@keyframes rav-chain { 0% { transform: scaleX(0); } 45% { transform: scaleX(1); } 100% { transform: scaleX(0); opacity: .6; } }
.rav-crash { position: absolute; left: calc(-1 * var(--r)); bottom: -20px; width: calc(2 * var(--r)); height: 40px; border-radius: 50%; border: 4px solid rgba(255, 170, 60, .95); box-shadow: 0 0 24px rgba(255, 90, 30, .9), inset 0 0 18px rgba(255, 200, 80, .7); animation: rav-crash 700ms ease-out forwards; }
.rav-crash--finale { border-color: rgba(140, 220, 255, .95); box-shadow: 0 0 24px rgba(80, 180, 255, .9); }
@keyframes rav-crash { 0% { transform: scale(.15); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.rav-execute { position: absolute; left: -16px; bottom: 0; width: 32px; height: 200px; border-radius: 16px; background: linear-gradient(180deg, transparent, #fff 30%, #ff2d55 60%, transparent); box-shadow: 0 0 22px rgba(255, 30, 80, .95); animation: rav-execute 480ms ease-in forwards; }
@keyframes rav-execute { 0% { transform: translateY(160px) scaleY(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(0) scaleY(1); opacity: 0; } }
.rav-word { position: absolute; left: -90px; bottom: 60px; width: 180px; text-align: center; font: 900 26px/1 'Anton', system-ui, sans-serif; letter-spacing: .06em; color: #fff; -webkit-text-stroke: 2px #b00020; animation: rav-word 700ms ease-out forwards; }
.rav-word--joker, .rav-word--trap { -webkit-text-stroke-color: #7b2cbf; color: #ffe066; }
.rav-word--slip { -webkit-text-stroke-color: #b08900; color: #fff3b0; }
@keyframes rav-word { 0% { transform: scale(.4); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
.rav-spring { position: absolute; left: -40px; bottom: 0; width: 80px; font-size: 64px; text-align: center; animation: rav-spring 900ms cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes rav-spring { 0% { transform: translateY(0) scaleY(.2); } 30% { transform: translateY(-70px) scaleY(1.2); } 100% { transform: translateY(-50px); opacity: 0; } }

/* Confusion cloud */
.rav-cloud { position: absolute; left: calc(-1 * var(--r)); bottom: -10px; width: calc(2 * var(--r)); height: 180px; border-radius: 50%; background: radial-gradient(ellipse at center 70%, rgba(190, 90, 255, .55), rgba(120, 40, 200, .25) 55%, transparent 72%); filter: blur(2px); animation: rav-cloud 4s ease-out forwards; }
@keyframes rav-cloud { 0% { transform: scale(.2); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 80% { opacity: .85; } 100% { opacity: 0; } }

/* Monster markers */
.rav-deathmark { position: absolute; left: -22px; bottom: 26px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #ff1744; box-shadow: 0 0 12px rgba(255, 23, 68, .9), inset 0 0 8px rgba(255, 23, 68, .7); background: radial-gradient(circle, #ff1744 0 12%, transparent 14%), linear-gradient(transparent 46%, #ff1744 46% 54%, transparent 54%), linear-gradient(90deg, transparent 46%, #ff1744 46% 54%, transparent 54%); animation: rav-deathmark 1.2s linear infinite; }
@keyframes rav-deathmark { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.rav-confused { position: absolute; left: -50px; bottom: 30px; width: 100px; text-align: center; font: 900 16px/1 system-ui, sans-serif; color: #ffe066; text-shadow: 0 0 6px #7b2cbf; animation: rav-confused 900ms linear infinite; }
@keyframes rav-confused { 0% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } 100% { transform: rotate(-8deg); } }

/* Room entities: clones, traps, puppets */
.rav-decoy { position: absolute; left: 0; bottom: 0; opacity: .62; filter: hue-rotate(250deg) saturate(1.5) drop-shadow(0 0 10px rgba(200, 90, 255, .9)); animation: rav-decoy 1.6s ease-in-out infinite alternate; }
.rav-decoy--phantom { opacity: .5; filter: grayscale(.6) brightness(1.4) hue-rotate(170deg) drop-shadow(0 0 12px rgba(110, 220, 255, .95)); }
@keyframes rav-decoy { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.rav-mirror { position: absolute; left: -60px; bottom: 0; width: 120px; height: auto; transform: scaleX(-1); opacity: .7; filter: hue-rotate(250deg) drop-shadow(0 0 10px rgba(200, 90, 255, .9)); }
.rav-entity { position: absolute; left: -32px; bottom: 0; width: 64px; height: 64px; font-size: 48px; line-height: 64px; text-align: center; filter: drop-shadow(0 0 8px rgba(255, 120, 220, .8)); animation: rav-bob 700ms ease-in-out infinite alternate; }
.rav-entity--trap { font-size: 40px; animation: none; filter: drop-shadow(0 0 6px rgba(255, 230, 120, .9)); }
.rav-entity--jester { width: 200px; left: -100px; height: 220px; font-size: 180px; line-height: 220px; opacity: .85; filter: drop-shadow(0 0 24px rgba(200, 90, 255, .95)); }
@keyframes rav-bob { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.rav-entity-fading { opacity: .35; transition: opacity 400ms; }
.rav-dust--pop { transform: scale(1.6); }

/* Auras */
.rav-aura--frenzy { box-shadow: 0 0 28px 8px rgba(200, 0, 30, .7); background: radial-gradient(circle, rgba(255, 0, 40, .22), transparent 70%); }
.rav-aura--avatar { width: 220px !important; height: 260px !important; margin-left: -110px !important; background: radial-gradient(ellipse at center 60%, rgba(140, 0, 255, .35), rgba(255, 30, 30, .2) 50%, transparent 72%); box-shadow: none; }
.rav-aura--spectral { box-shadow: 0 0 30px 10px rgba(80, 210, 255, .7); background: radial-gradient(circle, rgba(140, 230, 255, .25), transparent 70%); }
.rav-aura--chaos { box-shadow: 0 0 30px 10px rgba(255, 90, 220, .7); background: conic-gradient(from 0deg, rgba(255, 77, 109, .3), rgba(255, 183, 3, .3), rgba(77, 213, 153, .3), rgba(76, 201, 240, .3), rgba(199, 125, 255, .3), rgba(255, 77, 109, .3)); animation: rav-spinning 1.5s linear infinite; }
@keyframes rav-spinning { to { transform: rotate(360deg); } }
.rav-orbit { position: absolute; left: 0; bottom: 0; width: 0; height: 0; animation: rav-spinning 1.4s linear infinite; }
.rav-orbit__blade { position: absolute; left: -12px; bottom: -12px; width: 24px; height: 24px; font-size: 22px; line-height: 24px; text-align: center; color: #bff3ff; text-shadow: 0 0 8px #39c6ff; transform: rotate(calc(var(--i) * 90deg)) translateX(78px); }
.rav-die { position: absolute; left: -16px; bottom: 0; width: 32px; font-size: 28px; text-align: center; animation: rav-bob 600ms ease-in-out infinite alternate; }
/* Avatar of Ruin: the player IS bigger (individual `scale`, so the facing flip
   on `transform` is untouched). */
.rav-avatar { scale: 1.35; transform-origin: center bottom; filter: drop-shadow(0 0 14px rgba(160, 20, 255, .9)) !important; transition: scale 300ms; }

/* ==== Round 7: movement looks, tier ladder, 4th-job skins ==== */
.rav-arc--shadow { filter: hue-rotate(230deg) saturate(1.4) brightness(.8) drop-shadow(0 0 10px rgba(110, 60, 220, .9)); }

/* Movement */
.rav-move--slasher { filter: hue-rotate(320deg) saturate(1.8); }
.rav-move--deadeye { filter: hue-rotate(40deg) brightness(1.4); }
.rav-move--reaper { filter: hue-rotate(170deg) brightness(1.3); opacity: .8; }
.rav-move-spark { position: absolute; left: -10px; bottom: 0; width: 20px; font-size: 18px; color: #fff3a0; text-shadow: 0 0 8px #ffd23f; animation: rav-pop 600ms ease-out forwards; }
.rav-move-ghost { position: absolute; left: -30px; bottom: -40px; width: 60px; height: 110px; border-radius: 30px 30px 20px 20px; background: radial-gradient(ellipse at center 35%, rgba(190, 240, 255, .55), rgba(90, 200, 255, .2) 60%, transparent 72%); animation: rav-ghost 520ms ease-out forwards; }
@keyframes rav-ghost { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.15) translateY(-8px); } }
.rav-move--valor { filter: sepia(1) saturate(4) hue-rotate(5deg) brightness(1.4); }
.rav-wings { position: absolute; left: -70px; bottom: -30px; width: 140px; height: 70px; background:
  radial-gradient(ellipse at 20% 50%, rgba(255, 230, 140, .95) 0 25%, transparent 60%),
  radial-gradient(ellipse at 80% 50%, rgba(255, 230, 140, .95) 0 25%, transparent 60%);
  filter: drop-shadow(0 0 14px rgba(255, 210, 80, .95)); animation: rav-wings 600ms ease-out forwards; }
@keyframes rav-wings { 0% { transform: scaleX(.2) scaleY(.6); opacity: 1; } 40% { transform: scaleX(1.1) scaleY(1); opacity: 1; } 100% { transform: scaleX(1.3) translateY(-20px); opacity: 0; } }
.rav-move-feather { position: absolute; left: -6px; bottom: 0; width: 12px; height: 24px; border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; background: linear-gradient(#fff8d6, #ffd34d); box-shadow: 0 0 8px #ffd34d; animation: rav-feather 600ms ease-in forwards; }
@keyframes rav-feather { from { transform: rotate(-20deg); opacity: 1; } to { transform: translateY(-40px) rotate(40deg); opacity: 0; } }
.rav-sugar-pop { position: absolute; left: -40px; bottom: -40px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, #fff 0 15%, #ff8fd1 35%, rgba(255, 143, 209, .4) 55%, transparent 70%); animation: rav-pop 450ms ease-out forwards; }
.rav-sprinkle { position: absolute; left: -3px; bottom: -8px; width: 6px; height: 16px; border-radius: 3px; background: hsl(calc(var(--i) * 60), 90%, 65%); transform: rotate(calc(var(--i) * 60deg)) translateY(-10px); animation: rav-sprinkle 650ms ease-out forwards; }
@keyframes rav-sprinkle { to { transform: rotate(calc(var(--i) * 60deg)) translateY(-60px); opacity: 0; } }
.rav-move--tailwind { filter: hue-rotate(80deg) saturate(1.5) brightness(1.3); opacity: .7; }
.rav-leaf { position: absolute; left: -12px; bottom: 0; width: 24px; font-size: 22px; animation: rav-leaf 900ms ease-out forwards; }
@keyframes rav-leaf { from { transform: rotate(0); opacity: 1; } to { transform: translate(-30px, 30px) rotate(220deg); opacity: 0; } }
.rav-move--savage { filter: hue-rotate(-10deg) saturate(2) brightness(1.1); }
.rav-cannon { position: absolute; left: -45px; bottom: 0; width: 90px; font-size: 70px; text-align: center; animation: rav-pop 600ms ease-out forwards; }
.rav-cannon--left { transform: scaleX(-1); }
.rav-confetti { position: absolute; left: -4px; bottom: 0; width: 8px; height: 12px; background: hsl(var(--hue), 90%, 60%); animation: rav-confetti 900ms ease-in forwards; }
@keyframes rav-confetti { from { transform: rotate(0); opacity: 1; } to { transform: translateY(60px) rotate(540deg); opacity: 0; } }

/* Tier ladder */
.rav-sigil { position: absolute; left: -90px; bottom: -22px; width: 180px; height: 44px; border-radius: 50%; border: 3px solid var(--path); box-shadow: 0 0 18px var(--path), inset 0 0 14px var(--path);
  background: repeating-conic-gradient(from 0deg, transparent 0 12deg, color-mix(in srgb, var(--path) 35%, transparent) 12deg 18deg); animation: rav-sigil 800ms ease-out forwards; }
.rav-sigil--t4 { left: -140px; width: 280px; height: 66px; bottom: -33px; border-width: 4px; animation-duration: 1100ms; }
@keyframes rav-sigil { 0% { transform: scale(.2) rotate(0); opacity: 0; } 25% { transform: scale(1) rotate(40deg); opacity: 1; } 100% { transform: scale(1.1) rotate(120deg); opacity: 0; } }
.rav-ultimate { position: absolute; left: 0; right: 0; top: 34%; z-index: 10120; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .72) 20%, rgba(0, 0, 0, .72) 80%, transparent); border-top: 2px solid var(--path); border-bottom: 2px solid var(--path);
  animation: rav-ultimate 1600ms ease-out forwards; }
.rav-ultimate__icon { font-size: 40px; filter: drop-shadow(0 0 10px var(--path)); }
.rav-ultimate__name { font: 900 40px/1 'Anton', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 0 14px var(--path), 0 0 30px var(--path); }
@keyframes rav-ultimate { 0% { transform: scaleY(0); opacity: 0; } 12% { transform: scaleY(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(40px); opacity: 0; } }
.rav-ultimate-flash { position: absolute; inset: 0; z-index: 10119; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, var(--path) 140%); animation: rav-uflash 700ms ease-out forwards; }
@keyframes rav-uflash { 0% { opacity: 0; } 15% { opacity: .75; } 100% { opacity: 0; } }

/* 4th-job looks that shared a 3rd-job one */
.rav-execute.rav-skin--oblivion_strike { width: 140px; height: 140px; left: -70px; border-radius: 50%; background: radial-gradient(circle, #000 0 30%, #2a0040 45%, rgba(170, 60, 255, .6) 60%, transparent 72%); box-shadow: 0 0 40px rgba(140, 40, 255, .9); animation: rav-void 520ms ease-in forwards; }
@keyframes rav-void { 0% { transform: scale(1.6); opacity: 0; } 40% { transform: scale(1); opacity: 1; } 100% { transform: scale(.1); opacity: 0; } }
.rav-execute.rav-skin--final_verdict { width: 200px; left: -100px; height: 200px; border-radius: 0; background:
  linear-gradient(45deg, transparent 46%, #fff 48%, #ff2d55 50%, #fff 52%, transparent 54%),
  linear-gradient(-45deg, transparent 46%, #fff 48%, #ff2d55 50%, #fff 52%, transparent 54%),
  linear-gradient(0deg, transparent 47%, #ffd1dc 49%, #ff2d55 50%, transparent 53%); box-shadow: none; filter: drop-shadow(0 0 18px #ff2d55); animation: rav-verdict 560ms ease-out forwards; }
@keyframes rav-verdict { 0% { transform: scale(.3) rotate(-30deg); opacity: 0; } 30% { transform: scale(1.1) rotate(0); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.rav-execute.rav-skin--executioner { width: 60px; left: -30px; height: 260px; background: linear-gradient(180deg, transparent, #fff 25%, #ff7a2a 55%, transparent); box-shadow: 0 0 30px rgba(255, 110, 30, .95); }
.rav-execute.rav-skin--ghost_strike { background: linear-gradient(180deg, transparent, #fff 30%, #5fd7ff 60%, transparent); box-shadow: 0 0 22px rgba(95, 215, 255, .95); }
.rav-cloud.rav-skin--funhouse { height: 240px; background:
  radial-gradient(ellipse at center 70%, transparent 50%, rgba(255, 106, 213, .35) 62%, transparent 72%),
  repeating-linear-gradient(90deg, rgba(255, 60, 90, .35) 0 40px, rgba(255, 255, 255, .25) 40px 80px);
  -webkit-mask-image: radial-gradient(ellipse at center 70%, #000 55%, transparent 72%); mask-image: radial-gradient(ellipse at center 70%, #000 55%, transparent 72%);
  filter: drop-shadow(0 0 16px rgba(255, 106, 213, .9)); }
/* Chains in the path's colour */
.rav-streak--chain.rav-path--shadow_assault, .rav-streak--chain.rav-path--phantom_onslaught { filter: hue-rotate(320deg) saturate(2) brightness(1.2); }
.rav-streak--chain.rav-path--phantom_step, .rav-streak--chain.rav-path--spectral_blitz, .rav-streak--chain.rav-path--soul_rend, .rav-streak--chain.rav-path--eternal_specter { filter: hue-rotate(170deg) brightness(1.5); }
/* Snipers */
.rav-scope { position: absolute; left: -36px; bottom: -36px; width: 72px; height: 72px; border-radius: 50%; border: 3px solid #ffd23f; box-shadow: 0 0 14px #ffd23f;
  background: linear-gradient(transparent 48%, #ffd23f 48% 52%, transparent 52%), linear-gradient(90deg, transparent 48%, #ffd23f 48% 52%, transparent 52%); animation: rav-scope 520ms ease-out forwards; }
.rav-scope--final_shot, .rav-scope--deathshot { border-color: #ff2d55; box-shadow: 0 0 22px #ff2d55; transform: scale(1.4); }
@keyframes rav-scope { 0% { transform: scale(2.2) rotate(45deg); opacity: 0; } 35% { transform: scale(1) rotate(0); opacity: 1; } 100% { opacity: 0; } }
.projectile--rav-star.projectile--deathshot, .projectile--rav-star.projectile--final_shot { filter: drop-shadow(0 0 18px rgba(255, 40, 70, 1)) drop-shadow(0 0 40px rgba(255, 40, 70, .8)); }
.projectile--rav-star.projectile--final_shot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 3px solid rgba(255, 80, 100, .9); animation: rav-ring 380ms linear infinite; }
@keyframes rav-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }
.projectile--rav-star.projectile--ricochet_star, .projectile--rav-star.projectile--spectral_ricochet { filter: drop-shadow(0 0 12px rgba(255, 230, 120, .95)); }

/* ==== Round 8: the GM every-job skill list (Skills window) ==== */
.exp-progression-skilltab--gm { background: linear-gradient(90deg, #7c3aed, #db2777) !important; color: #fff !important; white-space: nowrap; }
.exp-gm-jobs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.exp-gm-job { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(196, 160, 255, .5); background: rgba(124, 58, 237, .18); font: 700 12px/1.2 system-ui, sans-serif; color: #ede9fe; cursor: pointer; }
.exp-gm-job.is-active { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.exp-gm-tier { margin: 0 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); overflow: hidden; color: #e5e7eb; }
.exp-gm-tier__head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font: 700 13px/1.2 system-ui, sans-serif; color: #fff; }
.exp-gm-tier__head em { margin-left: auto; font-style: normal; opacity: .85; font-size: 11px; }
.exp-gm-tier__badge { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .22); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.exp-gm-tier--1 .exp-gm-tier__head { background: #16a34a; }
.exp-gm-tier--2 .exp-gm-tier__head { background: #2563eb; }
.exp-gm-tier--3 .exp-gm-tier__head { background: #9333ea; }
.exp-gm-tier--4 .exp-gm-tier__head { background: linear-gradient(90deg, #dc2626, #f59e0b); }
.exp-gm-skill { display: grid; grid-template-columns: 30px 1fr auto auto auto; grid-template-areas: 'icon body body body body' 'icon lvl gap key use'; align-items: center; gap: 4px 8px; padding: 7px 10px; border-top: 1px solid rgba(255, 255, 255, .08); font: 12px/1.35 system-ui, sans-serif; }
.exp-gm-skill__icon { grid-area: icon; align-self: start; }
.exp-gm-skill__body { grid-area: body; }
.exp-gm-skill__lvl { grid-area: lvl; }
.exp-gm-skill__key { grid-area: key; }
.exp-gm-skill__use { grid-area: use; }
.exp-gm-skill__icon { font-size: 20px; text-align: center; }
.exp-gm-skill__icon img { width: 26px; height: 26px; object-fit: contain; }
.exp-gm-skill__body small { display: block; opacity: .7; }
.exp-gm-skill__lvl { font-weight: 800; color: #fbbf24; white-space: nowrap; }
.exp-gm-skill__key { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .1); font-size: 11px; white-space: nowrap; }
.exp-gm-skill__use { padding: 4px 10px; border-radius: 8px; border: 0; background: #7c3aed; color: #fff; font-weight: 700; cursor: pointer; }
@media (max-width: 640px) { .exp-gm-skill__key { display: none; } }

/* Round 10: the GM's chosen jump */
.exp-gm-skill__key--on { background: rgba(34, 197, 94, .25) !important; color: #bbf7d0; font-weight: 700; }