/* ============================================================
   Growvia — Dungeon: lobi + arena pertarungan (animasi giliran).
   ============================================================ */

/* ─────────────── Lobi ─────────────── */
/* Kartu dungeon ringkas (horizontal): banyak dungeon muat satu layar, tombol Enter tanpa scroll. */
.dg-lobby { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 10px; align-items: start; }
.dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.dg-card {
  --rc: var(--line2);
  display: flex; flex-direction: row; min-width: 0;
  background: var(--panel2); border: 2px solid var(--line);
  box-shadow: inset 0 0 0 2px var(--bg2), var(--shadow);
  transition: transform .15s ease, border-color .15s ease;
}
.dg-card:not(.locked):hover { transform: translateY(-2px); border-color: var(--rc); }
.dg-card.locked { filter: grayscale(.85) brightness(.7); }
.rarity-b-uncommon { --rc: var(--green); }
.rarity-b-rare { --rc: var(--blue); }
.rarity-b-epic { --rc: var(--purple); }
.rarity-b-legendary { --rc: var(--gold); }
.dg-art {
  position: relative; flex: none; width: 76px; align-self: stretch;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--rc) 35%, transparent), transparent 70%), linear-gradient(#1a1410, #241b14);
  border-right: 2px solid var(--line);
}
.main .dg-art img.dg-gate { max-width: none; max-height: none; width: 54px; height: 54px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
.dg-card:not(.locked):hover .dg-gate { animation: idle-bob 1.2s ease-in-out infinite; }
.dg-boss { position: absolute; right: 3px; bottom: 3px; padding: 2px; background: #2a0f0c; border: 2px solid #7a2a24; }
.main .dg-boss img { width: 18px; height: 18px; }
.dg-lock {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 3px;
  background: rgba(10, 8, 6, .55); font-family: var(--font-pixel); font-size: 8px; color: var(--head);
}
.dg-body { padding: 7px 9px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.dg-body .nm { font-family: var(--font-pixel); font-size: 10px; color: var(--head); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-body .sub { font-size: 10px; text-transform: capitalize; }
.dg-floors { display: flex; gap: 3px; flex-wrap: wrap; }
.dg-floor { padding: 1px; background: var(--bg2); border: 2px solid var(--line); }
.dg-floor.boss { border-color: #7a2a24; background: #2a0f0c; }
.main .dg-floor img { width: 16px; height: 16px; }
/* Statistik + tombol dalam satu baris */
.dg-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.dg-foot .meta-grid { flex: 1; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.dg-foot .meta-grid span { font-size: 9px; }
.dg-foot .meta-grid strong { font-size: 11px; white-space: nowrap; }
.dg-foot .btn { flex: none; padding: 7px 12px; }
.dg-warn {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 10px;
  background: #2a1310; border: 2px solid #7a2a24; color: #ffd9d4; font-size: 12px;
}
.dg-warn span { flex: 1; }
.stat-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stat-trio .stat { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; background: var(--bg2); border: 2px solid var(--line); }
.stat-trio .stat b { font-family: var(--font-pixel); font-size: 11px; }
.stat-trio .stat span { font-size: 10px; color: var(--muted); }
.stat-trio .hp b { color: #f5736a; }
.stat-trio .atk b { color: var(--gold); }
.stat-trio .def b { color: var(--blue); }
.gear-list { display: grid; gap: 6px; margin-top: 8px; }
.gear-slot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--panel2); border: 2px solid var(--line); }
.gear-slot.empty { border-style: dashed; }
.gear-slot .nm { font-size: 12px; font-weight: 700; color: var(--head); }
.gear-slot.empty .nm { color: var(--muted); font-weight: 400; }
.gear-slot .sub { font-size: 10px; color: var(--gold); }
.main img.dim { opacity: .35; }
.loot-row { display: flex; gap: 6px; flex-wrap: wrap; }
.loot-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; background: var(--bg2); border: 2px solid var(--line);
  font-size: 12px; color: var(--text);
}
.loot-chip.gold { border-color: #7a5a1e; color: var(--gold); font-weight: 700; }
.main .loot-chip img { width: 20px; height: 20px; }

/* ─────────────── Arena ─────────────── */
.combat-view { gap: 10px; }
.arena {
  position: relative;
  border: 2px solid var(--line2);
  box-shadow: inset 0 0 0 2px var(--bg2), var(--shadow);
  background: #0d0a07;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  /* Ukuran petarung ikut lebar arena: dua petarung selalu muat (desktop 230px, kolom sempit mengecil). */
  --rig: min(230px, 40cqw);
}
.arena.boss { border-color: #7a2a24; --rig: min(272px, 46cqw); }

/* Panggung: latar SVG + dua petarung berpijak di lantai yang sama; HUD di atas kepala */
.arena-world { position: relative; height: calc(var(--rig) * 1.12 + 124px); }
.arena .scene { position: absolute; inset: 0; }
.arena .scene svg { width: 100%; height: 100%; display: block; }
.arena.boss .scene { filter: saturate(1.15) brightness(.86) hue-rotate(-8deg); }
.arena-stage { position: absolute; inset: 0; }
.fighter { position: absolute; bottom: 6%; width: var(--rig); height: var(--rig); }
.fighter.you { left: 6%; }
.fighter.enemy { right: 6%; }
.fighter .ground {
  position: absolute; left: 50%; bottom: -6px; translate: -50% 0;
  width: 86%; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--gc) 55%, transparent), transparent 72%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--gc) 35%, transparent);
  --gc: #6ea8ff;
}
.fighter.enemy .ground { --gc: #ff6a5e; }
.fighter.boss .ground { --gc: #ff3a2a; height: 32px; animation: ar-ring 2s ease-in-out infinite; }
.rig-host { position: absolute; inset: 0; }
.rig { position: absolute; inset: 0; transform-origin: 50% 96%; }
.rig svg { width: 100%; height: 100%; overflow: visible; display: block; }
.fighter.you .rig { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.fighter.enemy .rig { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.fighter.boss .rig { filter: drop-shadow(0 0 16px rgba(255, 70, 50, .5)) drop-shadow(0 8px 12px rgba(0, 0, 0, .7)); }
.rig-host { animation: ar-in .5s cubic-bezier(.2, 1.5, .4, 1) both; }

/* Idle: badan naik-turun, kepala & anggota ikut dengan beda fase (bukan sprite kaku) */
.rig .p-root { animation: ar-idle 2.8s ease-in-out infinite; }
.fighter.enemy .rig .p-root { animation-duration: 3.2s; animation-delay: -1.1s; }
.rig .p-head { animation: ar-head 2.8s ease-in-out infinite; }
.rig .p-armF { animation: ar-armf 2.8s ease-in-out infinite; }
.rig .p-armB { animation: ar-armb 3.2s ease-in-out infinite; }
.rig .p-cape, .rig .p-plume { animation: ar-cape 2.4s ease-in-out infinite; }
.rig .p-tail { animation: ar-tail 2.6s ease-in-out infinite; }
.rig .p-jaw { animation: ar-jaw 3.4s ease-in-out infinite; }
.rig .p-wingF { animation: ar-wing 1.5s ease-in-out infinite; }
.rig .p-wingB { animation: ar-wing 1.5s ease-in-out infinite reverse; }
.rig .p-eye { animation: ar-blink 4.6s steps(1) infinite; }
.rig .p-orb, .rig .p-shards { animation: ar-orb 2.2s ease-in-out infinite; }
.rig .p-bub { animation: ar-bub 2.6s ease-in-out infinite; }
.rig .p-bub.b2 { animation-delay: -.8s; }
.rig .p-bub.b3 { animation-delay: -1.6s; }
.rig .p-shadow { animation: ar-shadow 2.8s ease-in-out infinite; }
.rig .p-h1 { animation: ar-head 2.4s ease-in-out infinite; }
.rig .p-h2 { animation: ar-head 2.8s ease-in-out infinite -.7s; }
.rig .p-h3 { animation: ar-head 3.2s ease-in-out infinite -1.4s; }
.k-ghost .p-root { animation: ar-drift 3.4s ease-in-out infinite; }
.k-ghost .p-shadow { opacity: .2; }
.k-blob .p-root { animation: ar-squish 2.2s ease-in-out infinite; }

/* Pose aksi (ditempel playTurnFx, satu kelas = satu gerakan) */
.rig.a-atk .p-armF { animation: ar-swing .72s cubic-bezier(.3, 1.4, .5, 1) both; }
.rig.a-atk .p-root { animation: ar-step .72s ease-out both; }
.rig.a-atk .p-legF { animation: ar-kick .72s ease-out both; }
.rig.a-heavy .p-armF { animation: ar-swing-heavy .96s cubic-bezier(.3, 1.3, .5, 1) both; }
.rig.a-heavy .p-root { animation: ar-wind .96s ease-out both; }
.rig.a-heavy .p-armB { animation: ar-brace .96s ease-out both; }
.rig.a-guard .p-shield { animation: ar-shield 1.5s cubic-bezier(.2, 1.4, .4, 1) both; }
.rig.a-guard .p-root { animation: ar-crouch 1.5s ease-out both; }
.rig.a-guard .p-armB { animation: ar-raise 1.5s ease-out both; }
.rig.a-guard .p-head { animation: ar-tuck 1.5s ease-out both; }
.rig.a-drink .p-armF { animation: ar-drink .76s ease-in-out both; }
.rig.a-drink .p-head { animation: ar-gulp .76s ease-in-out both; }
.rig.a-melee .p-armF { animation: ar-swing .88s cubic-bezier(.3, 1.4, .5, 1) both; }
.rig.a-melee .p-root { animation: ar-step .88s ease-out both; }
.rig.a-melee .p-jaw { animation: ar-roar .88s ease-out both; }
.rig.a-slam .p-armF, .rig.a-slam .p-armB { animation: ar-slam 1.15s cubic-bezier(.3, 1.2, .4, 1) both; }
.rig.a-slam .p-root { animation: ar-slam-body 1.15s cubic-bezier(.3, 1.2, .4, 1) both; }
.rig.a-ranged .p-armF { animation: ar-draw 1s ease-out both; }
.rig.a-ranged .p-string { animation: ar-string 1s ease-out both; }
.rig.a-ranged .p-root { animation: ar-lean 1s ease-out both; }
.rig.a-magic .p-armF { animation: ar-cast 1.08s ease-out both; }
.rig.a-magic .p-orb { animation: ar-orb-cast 1.08s ease-out both; }
.rig.a-magic .p-root { animation: ar-float-up 1.08s ease-in-out both; }
.rig.a-breath .p-head { animation: ar-breath 1.18s ease-out both; }
.rig.a-breath .p-jaw { animation: ar-maw 1.18s ease-out both; }
.rig.a-breath .p-root { animation: ar-rear 1.18s ease-out both; }
.rig.a-breath .p-wingF, .rig.a-breath .p-wingB { animation: ar-flap .4s ease-in-out 3; }
.rig.a-hurt .p-root { animation: ar-knock .46s cubic-bezier(.3, 1.4, .5, 1) both; }
.rig.a-hurt .p-head { animation: ar-snap .46s ease-out both; }
.rig.hit-flash { filter: brightness(2.4) saturate(.35) drop-shadow(0 0 16px #ff5a4a) !important; }
.rig.healed { filter: brightness(1.25) saturate(1.3) drop-shadow(0 0 18px #7cf85a) !important; }
.rig.a-ko { animation: ar-ko 1.1s cubic-bezier(.3, .8, .4, 1) forwards; }
.rig.a-run .p-legF { animation: ar-run .22s linear infinite; }
.rig.a-run .p-legB { animation: ar-run .22s linear infinite reverse; }
.rig.charging .p-root { animation: ar-charge .42s ease-in-out infinite alternate; }
.rig.charging { filter: drop-shadow(0 0 18px rgba(255, 170, 40, .95)) brightness(1.2) !important; }

/* Latar hidup (obor, kabut, bara) */
.sc-flame { transform-origin: 50% 100%; animation: ar-flame .5s ease-in-out infinite alternate; }
.sc-flame.f2 { animation-duration: .38s; animation-delay: -.12s; }
.sc-flame.f3 { animation-duration: .3s; animation-delay: -.2s; }
.sc-glow { animation: ar-glow 1.4s ease-in-out infinite alternate; }
.sc-mote { animation: ar-mote 6s linear infinite; }
.sc-fog { animation: ar-fog 9s ease-in-out infinite alternate; }
.sc-fog.f2 { animation-duration: 12s; animation-direction: alternate-reverse; }
.sc-star { animation: ar-twinkle 3s ease-in-out infinite alternate; }
.sc-lava { animation: ar-lava 2.6s ease-in-out infinite alternate; }
.sc-water { animation: ar-water 4s ease-in-out infinite alternate; }
.sc-portal { animation: ar-portal 6s linear infinite; transform-box: fill-box; transform-origin: center; }

/* HUD: judul, jejak lantai, plate HP */
.arena-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px;
  background: linear-gradient(#0c0906ee, #0c090600);
}
.arena-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-pixel); font-size: 11px; color: var(--head); text-shadow: 0 2px 0 #000; }
.arena-floor { margin-left: auto; font-family: var(--font-pixel); font-size: 10px; color: var(--gold); text-shadow: 0 2px 0 #000; }
.floor-track { display: flex; align-items: center; }
.floor-node {
  position: relative; display: grid; place-items: center;
  width: 30px; height: 30px; background: #19120cd9; border: 2px solid var(--line);
}
.floor-node + .floor-node { margin-left: 14px; }
.floor-node + .floor-node::before { content: ''; position: absolute; right: 100%; top: 50%; width: 16px; height: 2px; background: var(--line); }
.floor-node.done { border-color: var(--green); }
.floor-node.done + .floor-node::before { background: var(--green); }
.floor-node.now { border-color: var(--gold); animation: ar-pulse-gold 1.4s ease-in-out infinite; }
.floor-node.boss { border-color: #7a2a24; }
.floor-node.boss.now { border-color: var(--red); }
.main .floor-node img { width: 20px; height: 20px; }
.floor-node:not(.done):not(.now) img { filter: grayscale(1) brightness(.6); }

.arena-hud {
  position: absolute; top: 46px; left: 0; right: 0; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start; gap: 10px; padding: 0 12px;
}
.vs {
  align-self: center; margin-top: 6px;
  font-family: var(--font-pixel); font-size: 18px; color: var(--gold);
  text-shadow: 0 3px 0 #000, 0 0 14px rgba(245, 197, 66, .55);
  animation: ar-vs 2.4s ease-in-out infinite;
}
.plate {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 8px;
  background: linear-gradient(#241b14f2, #140f0af2);
  border: 2px solid var(--line2);
  box-shadow: inset 0 0 0 2px #0c0906, 0 3px 0 rgba(0, 0, 0, .5);
}
.plate.enemy { flex-direction: row-reverse; text-align: right; }
.plate.boss { border-color: #a0362c; box-shadow: inset 0 0 0 2px #0c0906, 0 0 16px rgba(224, 82, 82, .45); }
.plate-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: #0f0b07; border: 2px solid var(--line); }
.main .plate-av img { width: 32px; height: 32px; }
.plate-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.plate-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.plate.enemy .plate-name { flex-direction: row-reverse; }
.plate-name b { font-family: var(--font-pixel); font-size: 10px; color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plate-name .sub { font-size: 10px; color: var(--muted); white-space: nowrap; }
.boss-tag { flex: none; padding: 2px 6px; background: var(--red); color: #fff; font-family: var(--font-pixel); font-size: 8px; box-shadow: 0 2px 0 #5a1612; animation: ar-blink 1.2s ease-in-out infinite; }
.hp-track { position: relative; height: 16px; background: #0d0905; border: 2px solid var(--line); overflow: hidden; }
.hp-ghost, .hp-fill { position: absolute; inset: 0; transform-origin: left; }
.hp-ghost { background: #f5e6c8; transition: transform .8s ease-in .3s; }
.hp-fill {
  background: linear-gradient(#b8ec4c, #6fa01f 70%, #5a8519);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), inset 0 3px 0 rgba(255, 255, 255, .3);
  transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
.plate.enemy .hp-fill { background: linear-gradient(#f7948c, #b03329 70%, #922a22); }
.plate.low .hp-fill { animation: ar-hp-low .7s ease-in-out infinite; }
.hp-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-pixel); font-size: 8px; color: #fff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
}
.plate-stats { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.plate.enemy .plate-stats { flex-direction: row-reverse; }
.plate-stats span { display: inline-flex; align-items: center; gap: 4px; }
.plate-stats b { color: var(--head); }
.charge-pill { padding: 1px 6px; background: #3a2a0c; border: 2px solid var(--gold); color: var(--gold); font-family: var(--font-pixel); font-size: 8px; animation: ar-blink .8s ease-in-out infinite; }
.charge-warn {
  position: absolute; bottom: 8px; left: 50%; translate: -50% 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 12px; max-width: calc(100% - 24px);
  background: #3a2a0ce8; border: 2px solid var(--gold); color: var(--gold);
  font-size: 12px; font-weight: 700; text-align: center;
  animation: ar-pulse-gold 1s ease-in-out infinite;
}

/* ─────────────── Lapisan efek ─────────────── */
.fx-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.fx { position: absolute; pointer-events: none; }
.fx.flash { inset: 0; translate: 0; background: var(--c); mix-blend-mode: screen; animation: ar-fade-out .24s ease-out forwards; }
.fx.num {
  font-family: var(--font-pixel); font-size: clamp(14px, 4.4cqw, 20px); color: #fff; white-space: nowrap;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 0 0 10px rgba(0, 0, 0, .9);
  animation: ar-num 1.3s cubic-bezier(.17, .89, .32, 1.28) forwards;
}
.fx.num.dmg { color: #ff8f85; }
.fx.num.heavy { color: #ffb35c; font-size: clamp(17px, 5.4cqw, 25px); }
.fx.num.crit { color: var(--gold); font-size: clamp(20px, 6.4cqw, 30px); text-shadow: 3px 3px 0 #000, 0 0 18px rgba(255, 215, 0, .95); }
.fx.num.heal { color: #8cf85a; }
.fx.num.guard { color: #9fdcff; font-size: clamp(13px, 3.8cqw, 17px); }
.fx.num.miss { color: #d8cdb8; font-size: clamp(12px, 3.6cqw, 16px); }
.fx.num.warn { color: #ffcf5a; font-size: clamp(11px, 3.4cqw, 15px); }
.fx.num.xp { color: #b9e6ff; font-size: clamp(10px, 3.2cqw, 14px); }
.fx.num.viaz { color: var(--gold); font-size: clamp(10px, 3.2cqw, 14px); }
.fx.banner {
  font-family: var(--font-pixel); font-size: clamp(16px, 5cqw, 24px); color: #fff; white-space: nowrap;
  text-shadow: 3px 3px 0 #000, 0 0 20px rgba(0, 0, 0, .9);
  animation: ar-banner 1.1s cubic-bezier(.2, 1.6, .3, 1) forwards;
}
.fx.banner.crit { color: var(--gold); }
.fx.banner.ko { color: #ff6a5e; font-size: clamp(26px, 9cqw, 44px); animation-duration: 1.5s; }
.fx.banner.break { color: #ffb03a; }
.fx.banner.block { color: #9fdcff; font-size: clamp(13px, 3.8cqw, 18px); }
.fx.banner.warn { color: #ff9a3a; font-size: clamp(14px, 4.2cqw, 20px); }
.fx.slash { width: calc(var(--rig) * .78); aspect-ratio: 1; animation: ar-slash .5s cubic-bezier(.2, .9, .3, 1) forwards; }
.fx.slash svg { width: 100%; height: 100%; fill: none; stroke: #fff6d8; stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 10px #ffd46a); }
.fx.slash.big { width: calc(var(--rig) * 1.08); }
.fx.slash.big svg { stroke-width: 13; filter: drop-shadow(0 0 16px #ff9a2a); }
.fx.slash.rev { scale: -1 1; }
.fx.slash.whiff svg { stroke: #cfc5b0; stroke-width: 5; filter: none; opacity: .65; }
.fx.burst {
  width: calc(var(--rig) * .48); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd46a 35%, transparent 70%);
  mix-blend-mode: screen; animation: ar-burst .45s ease-out forwards;
}
.fx.burst.crit, .fx.burst.heavy { width: calc(var(--rig) * .74); background: radial-gradient(circle, #fff 0%, #ffae2a 40%, transparent 72%); }
.fx.spark { width: 6px; height: 6px; border-radius: 50%; animation: ar-spark .7s cubic-bezier(.2, .7, .3, 1) forwards; }
.fx.power {
  width: var(--s); height: var(--s); border-radius: 50%;
  border: 3px solid rgba(255, 190, 70, .9);
  box-shadow: 0 0 26px rgba(255, 170, 40, .8) inset;
  animation: ar-power .6s ease-out forwards;
}
.fx.dome {
  width: var(--s); aspect-ratio: 1; border-radius: 50%;
  border: 3px solid rgba(130, 200, 255, .9);
  background: radial-gradient(circle, rgba(90, 170, 255, .28), rgba(90, 170, 255, .05) 65%, transparent 72%);
  box-shadow: 0 0 30px rgba(90, 170, 255, .55);
  animation: ar-dome-in .3s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
.fx.dome.hit { animation: ar-dome-hit .45s ease-out forwards; }
.fx.shock {
  width: var(--s); height: calc(var(--s) * .34); border-radius: 50%;
  border: 4px solid rgba(255, 220, 140, .9);
  animation: ar-shock .7s ease-out forwards;
}
.fx.heal-ring {
  width: var(--s); height: calc(var(--s) * .34); border-radius: 50%;
  border: 4px solid #8cf85a; box-shadow: 0 0 24px rgba(140, 248, 90, .7);
  animation: ar-heal-ring .85s ease-out forwards;
}
.fx.plus { width: 12px; height: 12px; background: #8cf85a; clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%); animation: ar-plus .9s ease-out forwards; }
.fx.soul { width: 10px; height: 10px; border-radius: 50%; background: #cfe8ff; box-shadow: 0 0 12px #9fdcff; animation: ar-soul 1s ease-out forwards; }
.fx.ember { width: 9px; height: 9px; border-radius: 50%; background: #ffb03a; box-shadow: 0 0 12px #ff8a2a; }
.fx.dust { width: 26px; height: 26px; border-radius: 50%; background: rgba(200, 180, 150, .5); animation: ar-dust .7s ease-out forwards; }
.fx.proj.arrow { width: 64px; height: 14px; }
.fx.proj.arrow svg { width: 100%; height: 100%; }
.fx.proj.orb {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #c77dff 45%, #5a1a8a);
  box-shadow: 0 0 22px #c77dff;
  animation: ar-orb-spin .5s linear infinite;
}
.fx.fire { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 0 20px var(--c); mix-blend-mode: screen; }

/* ─────────────── Aksi ─────────────── */
.skill-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.skill {
  --c1: #4a3826; --c2: #3a2b1d; --ce: var(--line2);
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 9px 10px;
  border: 2px solid var(--ce); box-shadow: 0 4px 0 #1c1410;
  background: linear-gradient(var(--c1), var(--c2)); color: var(--head);
  transition: transform .08s ease, filter .15s ease;
}
.skill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  translate: -120% 0;
}
.skill:hover:not(:disabled)::after { animation: ar-sheen .55s ease-out; }
.skill-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; background: rgba(0, 0, 0, .3); border: 2px solid rgba(255, 255, 255, .14); }
.main .skill img { width: 26px; height: 26px; transition: transform .15s ease; }
.skill:hover:not(:disabled) { filter: brightness(1.12); }
.skill:hover:not(:disabled) img { transform: scale(1.18) rotate(-8deg); }
.skill:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #1c1410; }
.skill:disabled { filter: grayscale(.7) brightness(.65); }
.skill-txt { min-width: 0; display: grid; gap: 2px; }
.skill-name { font-family: var(--font-pixel); font-size: 9px; text-transform: uppercase; line-height: 1.3; }
.skill-hint { font-size: 10px; color: rgba(255, 244, 220, .72); line-height: 1.2; }
.skill.attack { --c1: #6f9c22; --c2: #4e7417; --ce: #93c240; }
.skill.heavy { --c1: #a97c1c; --c2: #7d5a12; --ce: #d8a83a; }
.skill.defend { --c1: #2f6d96; --c2: #23506f; --ce: #4fa8e0; }
.skill.flee { --c1: #5a3a30; --c2: #42291f; --ce: #8a5a44; }
.skill.hot { animation: ar-hot 1s ease-in-out infinite; }
.potion-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--line); }
.potion-left { font-family: var(--font-pixel); font-size: 8px; color: var(--muted); text-transform: uppercase; margin-right: 4px; }
.potion-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; background: var(--panel2); border: 2px solid var(--line2);
  box-shadow: 0 3px 0 #1c1410; color: var(--head); font-size: 12px;
}
.main .potion-btn img { width: 22px; height: 22px; }
.potion-btn span { color: #a5f05a; font-size: 11px; }
.potion-btn:hover:not(:disabled) { border-color: #93c240; }
.potion-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }

/* Loot run + log */
.combat-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: start; }
.clog { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow-y: auto; }
.clog-line { margin: 0; padding: 5px 8px; font-size: 12px; background: var(--bg2); border-left: 3px solid var(--line2); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.clog-line.hit { border-left-color: var(--gold); }
.clog-line.bad { border-left-color: var(--red); }
.clog-line.heal { border-left-color: var(--green); }
.clog-line.warn { border-left-color: var(--gold); background: #2a2010; }
.clog-line.new { animation: ar-log-in .35s ease-out; }

/* Ringkasan run */
.run-summary { display: grid; justify-items: center; gap: 10px; text-align: center; }
.main .run-summary img.summary-ic, .run-summary img.summary-ic { width: 72px; height: 72px; animation: ar-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.summary-rewards { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

/* ─────────────── Keyframes ─────────────── */
@keyframes ar-in { from { opacity: 0; transform: translateY(26px) scale(.9); } }
@keyframes ar-idle {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-7px) scaleY(1.03); }
}
@keyframes ar-head {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  35% { transform: rotate(-3deg) translateY(-2px); }
  70% { transform: rotate(2deg) translateY(1px); }
}
@keyframes ar-armf { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(7deg); } }
@keyframes ar-armb { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } }
@keyframes ar-cape { 0%, 100% { transform: rotate(-2deg) skewX(0deg); } 50% { transform: rotate(4deg) skewX(-4deg); } }
@keyframes ar-tail { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
@keyframes ar-jaw { 0%, 88%, 100% { transform: rotate(0deg); } 94% { transform: rotate(9deg); } }
@keyframes ar-wing {
  0%, 100% { transform: rotate(-10deg) scaleY(1); }
  50% { transform: rotate(22deg) scaleY(.82); }
}
@keyframes ar-blink { 0%, 95% { opacity: 1; } 96%, 98% { opacity: .15; } 99% { opacity: 1; } }
@keyframes ar-orb { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.08); } }
@keyframes ar-bub { 0% { transform: translateY(6px) scale(.6); opacity: 0; } 40% { opacity: .5; } 100% { transform: translateY(-26px) scale(1.1); opacity: 0; } }
@keyframes ar-shadow { 0%, 100% { transform: scale(1); opacity: .45; } 50% { transform: scale(.9); opacity: .32; } }
@keyframes ar-drift { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
@keyframes ar-squish {
  0%, 100% { transform: scale(1, 1); }
  45% { transform: scale(1.09, .88); }
  70% { transform: scale(.95, 1.07); }
}
@keyframes ar-swing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-62deg); }
  45% { transform: rotate(74deg); }
  70% { transform: rotate(52deg); }
  100% { transform: rotate(0deg); }
}
@keyframes ar-swing-heavy {
  0% { transform: rotate(0deg); }
  32% { transform: rotate(-128deg); }
  56% { transform: rotate(96deg); }
  78% { transform: rotate(64deg); }
  100% { transform: rotate(0deg); }
}
@keyframes ar-step {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(2px) rotate(-4deg); }
  45% { transform: translateY(-8px) rotate(7deg); }
  70% { transform: translateY(0) rotate(3deg); }
}
@keyframes ar-kick { 0%, 100% { transform: rotate(0deg); } 45% { transform: rotate(-22deg); } }
@keyframes ar-wind {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  30% { transform: translate(-10px, 4px) rotate(-10deg) scale(.96, 1.05); }
  56% { transform: translate(14px, -10px) rotate(13deg) scale(1.07, .95); }
  80% { transform: translate(4px, 0) rotate(5deg); }
}
@keyframes ar-brace { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(30deg); } 56% { transform: rotate(-26deg); } }
@keyframes ar-shield {
  0% { transform: translate(0, 0) rotate(0deg); }
  22% { transform: translate(14px, -16px) rotate(-26deg) scale(1.12); }
  100% { transform: translate(12px, -14px) rotate(-22deg) scale(1.1); }
}
@keyframes ar-crouch {
  0% { transform: translateY(0) scaleY(1); }
  25% { transform: translateY(7px) scaleY(.93); }
  100% { transform: translateY(5px) scaleY(.95); }
}
@keyframes ar-raise { 0% { transform: rotate(0deg); } 100% { transform: rotate(-34deg); } }
@keyframes ar-tuck { 0% { transform: rotate(0deg); } 100% { transform: rotate(10deg) translateY(4px); } }
@keyframes ar-drink {
  0%, 100% { transform: rotate(0deg); }
  30%, 70% { transform: rotate(-116deg); }
}
@keyframes ar-gulp { 0%, 100% { transform: rotate(0deg); } 35%, 68% { transform: rotate(-16deg) translateY(-3px); } }
@keyframes ar-roar { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(16deg); } }
@keyframes ar-slam {
  0% { transform: rotate(0deg); }
  34% { transform: rotate(-96deg); }
  52% { transform: rotate(40deg); }
  100% { transform: rotate(0deg); }
}
@keyframes ar-slam-body {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-16px) scale(.95, 1.08); }
  50% { transform: translateY(10px) scale(1.12, .9); }
  72% { transform: translateY(0) scale(1); }
}
@keyframes ar-draw {
  0% { transform: rotate(0deg); }
  38% { transform: rotate(-16deg) translateX(-6px); }
  58% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}
@keyframes ar-string {
  0%, 100% { transform: translateX(0) scaleX(1); }
  38% { transform: translateX(-14px) scaleX(1.5); }
  48% { transform: translateX(4px) scaleX(.92); }
}
@keyframes ar-lean { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-5deg) translateY(-3px); } }
@keyframes ar-cast {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(-104deg); }
  62% { transform: rotate(-56deg); }
  100% { transform: rotate(0deg); }
}
@keyframes ar-orb-cast {
  0% { transform: scale(1); }
  40% { transform: scale(2.1); filter: drop-shadow(0 0 22px #c77dff); }
  62% { transform: scale(.25); opacity: .3; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ar-float-up { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-20px); } }
@keyframes ar-breath {
  0%, 100% { transform: rotate(0deg); }
  28% { transform: rotate(-20deg) translateY(-8px); }
  56% { transform: rotate(16deg) translateX(10px); }
}
@keyframes ar-maw { 0%, 100% { transform: rotate(0deg); } 34%, 70% { transform: rotate(30deg); } }
@keyframes ar-rear {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-12px) rotate(-6deg); }
  60% { transform: translateY(4px) rotate(4deg); }
}
@keyframes ar-flap { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(34deg) scaleY(.8); } }
@keyframes ar-knock {
  0% { transform: translateX(0) rotate(0deg); }
  22% { transform: translateX(-22px) rotate(-11deg) scale(.92, 1.08); }
  48% { transform: translateX(12px) rotate(7deg) scale(1.06, .95); }
  74% { transform: translateX(-5px) rotate(-3deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
@keyframes ar-snap { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(18deg) translateY(3px); } }
@keyframes ar-ko {
  0% { transform: rotate(0deg) translateY(0); opacity: 1; }
  25% { transform: rotate(-12deg) translateY(-18px); }
  100% { transform: rotate(-84deg) translateY(26px) scale(.92); opacity: 0; }
}
@keyframes ar-run { 0% { transform: rotate(-26deg); } 50% { transform: rotate(26deg); } 100% { transform: rotate(-26deg); } }
@keyframes ar-charge { to { transform: scale(1.07) translateY(-6px); } }
@keyframes ar-ring { 50% { opacity: .6; transform: scale(1.1); } }
@keyframes ar-flame { to { transform: scaleY(1.22) scaleX(.88) translateY(-3px); } }
@keyframes ar-glow { to { opacity: .55; transform: scale(1.14); } }
@keyframes ar-mote { 0% { transform: translateY(14px); opacity: 0; } 25% { opacity: .85; } 100% { transform: translateY(-120px); opacity: 0; } }
@keyframes ar-fog { to { transform: translateX(58px) scaleX(1.12); } }
@keyframes ar-twinkle { to { opacity: .2; } }
@keyframes ar-lava { to { opacity: .45; transform: translateY(-3px); } }
@keyframes ar-water { to { transform: scaleX(1.06) scaleY(.85); opacity: .5; } }
@keyframes ar-portal { to { transform: rotate(360deg); } }
@keyframes ar-vs { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes ar-blink { 50% { opacity: .55; } }
@keyframes ar-hp-low { 50% { filter: brightness(1.7); } }
@keyframes ar-pulse-gold { 50% { box-shadow: 0 0 16px rgba(242, 178, 58, .85); } }
@keyframes ar-hot { 50% { box-shadow: 0 4px 0 #1c1410, 0 0 18px rgba(242, 178, 58, .9); } }
@keyframes ar-sheen { to { translate: 120% 0; } }
@keyframes ar-log-in { from { opacity: 0; transform: translateX(-8px); } }
@keyframes ar-pop { from { transform: scale(.3); opacity: 0; } }
@keyframes ar-fade-out { to { opacity: 0; } }
@keyframes ar-num {
  0% { transform: translate(-50%, 14px) scale(.5); opacity: 0; }
  18% { transform: translate(-50%, -14px) scale(1.35); opacity: 1; }
  60% { transform: translate(-50%, -42px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -76px) scale(.9); opacity: 0; }
}
@keyframes ar-banner {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  22% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -140%) scale(.95); opacity: 0; }
}
@keyframes ar-slash {
  0% { transform: translate(-50%, -50%) rotate(-38deg) scale(.4); opacity: 0; }
  35% { transform: translate(-50%, -50%) rotate(4deg) scale(1.12); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(26deg) scale(1.3); opacity: 0; }
}
@keyframes ar-burst {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
@keyframes ar-spark {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; }
}
@keyframes ar-power {
  0% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(.25); opacity: 0; }
}
@keyframes ar-dome-in {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes ar-dome-hit {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: brightness(2.4); }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}
@keyframes ar-shock {
  0% { transform: translate(-50%, -50%) scale(.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}
@keyframes ar-heal-ring {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, -160%) scale(1.25); opacity: 0; }
}
@keyframes ar-plus {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, -150%) scale(1); opacity: 0; }
}
@keyframes ar-soul {
  0% { transform: translate(-50%, -50%) scale(1); opacity: .95; }
  100% { transform: translate(-50%, -260%) scale(.3); opacity: 0; }
}
@keyframes ar-dust {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: .6; }
  100% { transform: translate(-150%, -90%) scale(1.6); opacity: 0; }
}
@keyframes ar-orb-spin { to { rotate: 360deg; } }

/* ─────────────── Responsif ─────────────── */
@media (max-width: 1180px) {
  .dg-lobby { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .dg-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dg-art { width: 60px; }
  .main .dg-art img.dg-gate { width: 44px; height: 44px; }
  .dg-foot .btn { padding: 7px 10px; }
  .arena-world { min-height: 200px; }
  .fighter.you { left: 2%; }
  .fighter.enemy { right: 2%; }
  .arena-top { padding: 6px 8px; gap: 6px; }
  .arena-title b { font-size: 9px; }
  .arena-floor { font-size: 8px; }
  .floor-node { width: 24px; height: 24px; }
  .floor-node + .floor-node { margin-left: 10px; }
  .floor-node + .floor-node::before { width: 12px; }
  .main .floor-node img { width: 16px; height: 16px; }
  .arena-hud { top: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 0 6px; }
  .vs { display: none; }
  .plate { padding: 4px 6px; gap: 6px; }
  .plate-av { width: 30px; height: 30px; }
  .main .plate-av img { width: 24px; height: 24px; }
  .plate-name .sub { display: none; }
  .plate-stats { font-size: 10px; gap: 6px; }
  .hp-track { height: 14px; }
  .charge-warn { font-size: 11px; padding: 5px 8px; }
  .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill { padding: 7px 8px; gap: 6px; }
  .skill-ic { width: 30px; height: 30px; }
  .main .skill img { width: 22px; height: 22px; }
  .combat-side { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .arena .rig *, .arena .rig, .arena .scene *, .rig-host { animation: none !important; }
  .fx.slash, .fx.burst, .fx.spark, .fx.ember, .fx.fire, .fx.dust, .fx.soul, .fx.plus { display: none; }
  .skill.hot, .charge-warn, .boss-tag, .vs, .floor-node.now { animation: none !important; }
}