/* Dragonball.LT — „Gyvesnis pasaulis“ (etapas 1261, žaidėjo Tyska pasiūlymas). Tik CSS transformacijos ir permatomumas —
   lengva telefonams. Išjungiama: Nustatymai → Lengvas režimas (body[data-fx="off"]) arba sistemos „mažiau judesio“. */

/* ===== TRANSFORMACIJOS KIBIRKŠTYS (ne aura — auros lieka tik Premium+ pasui, savininko sprendimas) =====
   Vidinis švytėjimas paveikslėlio apačioje + kylančios ki kibirkštys (fx.js prideda .fx-spark). */
.fx-ki { position: relative; --fx-a: 255 204 0; }
/* 1262: energijos liežuviai paveikslėlio apačioje (viduje, ne aplink — ne aura) */
.fx-ki::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72%; border-radius: 0 0 14px 14px; pointer-events: none; z-index: 2;
  background: radial-gradient(32% 70% at 18% 100%, rgb(var(--fx-a) / .75), transparent 72%),
              radial-gradient(30% 95% at 50% 100%, rgb(var(--fx-a) / .9), rgb(255 255 255 / .12) 30%, transparent 72%),
              radial-gradient(32% 65% at 82% 100%, rgb(var(--fx-a) / .7), transparent 72%);
  mix-blend-mode: screen; transform-origin: 50% 100%; animation: fxKiFlame .9s ease-in-out infinite alternate; }
.fx-ki::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; z-index: 2;
  box-shadow: inset 0 -16px 18px -10px rgb(var(--fx-a) / .9), inset 0 0 0 2px rgb(var(--fx-a) / .7);
  animation: fxKiPulse 1.2s ease-in-out infinite; }
.fx-spark { position: absolute; bottom: 6%; left: var(--l, 50%); width: 5px; height: 5px; border-radius: 50%; pointer-events: none; z-index: 3;
  background: #fff; box-shadow: 0 0 6px 2px rgb(var(--fx-a)), 0 0 12px rgb(var(--fx-a));
  animation: fxSpark var(--d, 1.6s) linear infinite; animation-delay: var(--w, 0s); opacity: 0; }
/* 1262: įsijungimo akimirka — trumpam sustiprėja ir grįžta į įprastą */
.fx-ki-up::before { animation: fxKiUp 1.4s ease-out; }
.fx-ki-up > :first-child { animation: fxKiUpImg 1.4s ease-out; }
@keyframes fxKiFlame { 0% { transform: scaleY(.82); opacity: .65; } 100% { transform: scaleY(1.1) scaleX(.97); opacity: 1; } }
@keyframes fxKiUp { 0% { transform: scaleY(.4); opacity: 0; } 30% { transform: scaleY(1.45); opacity: 1; filter: brightness(1.6); } 100% { transform: scaleY(1); opacity: .9; } }
@keyframes fxKiUpImg { 0% { filter: brightness(1); } 25% { filter: brightness(1.7) saturate(1.3); transform: scale(1.05); } 100% { filter: none; transform: none; } }
.fx-ki-gold   { --fx-a: 255 204 0; }   .fx-ki-blue  { --fx-a: 56 189 248; }  .fx-ki-red   { --fx-a: 255 69 58; }
.fx-ki-silver { --fx-a: 226 232 240; } .fx-ki-purple { --fx-a: 192 132 252; } .fx-ki-green { --fx-a: 74 222 128; }
.fx-ki-pink   { --fx-a: 244 114 182; } .fx-ki-cyan  { --fx-a: 34 211 238; }  .fx-ki-white { --fx-a: 255 255 255; }
/* įkeltas paveikslėlis (uploads/ui/fx/ki_<spalva>.png) — permatomas energijos sluoksnis ant paveikslėlio apačios */
.fx-ki-img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; object-fit: cover; object-position: bottom;
  pointer-events: none; z-index: 2; mix-blend-mode: screen; opacity: .85; border-radius: 0 0 14px 14px; animation: fxKiPulse 1.5s ease-in-out infinite; }
body[data-fx="off"] .fx-ki-img { display: none !important; }
@keyframes fxKiPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes fxSpark { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--x, 0px), var(--h, -64px)) scale(.3); opacity: 0; } }

/* ===== KOVA: žalos skaičiai, drebėjimas, blyksnis ===== */
.fx-host { position: relative; }
.fx-float {
  position: absolute; left: 50%; top: 4%; z-index: 6; pointer-events: none; white-space: nowrap;
  font: 900 17px/1 'Orbitron', sans-serif; color: #fff;
  text-shadow: 0 0 4px #000, 0 0 10px rgb(255 59 48 / .85);
  animation: fxFloat 1s ease-out forwards;
}
.fx-float.fx-crit { color: #FFCC00; font-size: 23px; text-shadow: 0 0 4px #000, 0 0 14px rgb(255 204 0 / .95); }
.fx-float.fx-heal { color: #4ade80; text-shadow: 0 0 4px #000, 0 0 10px rgb(74 222 128 / .8); }
.fx-float.fx-miss { color: #cbd5e1; font-size: 13px; text-shadow: 0 0 4px #000; }
.fx-float.fx-xp { color: #7dd3fc; font-size: 14px; text-shadow: 0 0 4px #000, 0 0 10px rgb(56 189 248 / .9); }
.fx-float.fx-gold { color: #FFCC00; font-size: 14px; text-shadow: 0 0 4px #000, 0 0 10px rgb(255 204 0 / .9); }
.fx-float.fx-ko { color: #FF3B30; font-size: 20px; text-shadow: 0 0 4px #000, 0 0 12px rgb(255 59 48 / .95); }
.fx-pulse { animation: fxPulse .6s ease-out; }
@keyframes fxPulse { 0% { transform: scale(1); } 30% { transform: scale(1.07); filter: brightness(1.35); } 100% { transform: scale(1); } }
.fx-hurt { animation: fxShake .38s linear, fxHurt .5s ease-out; }
@keyframes fxHurt { 0% { filter: none; } 30% { filter: brightness(1.4) sepia(1) hue-rotate(-40deg) saturate(4); } 100% { filter: none; } }
/* 1262: kovos rezultato antraštė */
.fx-title-win { display: inline-block; animation: fxTitle .7s cubic-bezier(.2,.9,.3,1.5) both; text-shadow: 0 0 22px rgb(255 204 0 / .55); }
.fx-title-lose { display: inline-block; animation: fxTitle .5s ease-out both, fxShake .45s .5s linear; text-shadow: 0 0 18px rgb(255 59 48 / .5); }
@keyframes fxTitle { 0% { opacity: 0; transform: scale(2.2); letter-spacing: .3em; } 60% { opacity: 1; transform: scale(.94); } 100% { transform: none; letter-spacing: normal; } }
.fx-rez-rays { position: absolute; left: 50%; top: 34px; width: 340px; height: 340px; margin: -170px 0 0 -170px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgb(255 204 0 / .13) 0deg 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%); mask: radial-gradient(circle, #000 12%, transparent 62%);
  animation: fxSpin 14s linear infinite, fxFade 1s ease-out both; }
/* 1262: auto kovų žurnalo žymos kaip [KOVA] [DAIKTAS] */
.fx-row-in { animation: fxRowIn .4s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes fxRowIn { from { opacity: 0; transform: translateX(-14px); background: rgb(255 255 255 / .08); } to { opacity: 1; transform: none; } }
.fx-tag { flex-shrink: 0; font: 800 9px/1 'Orbitron', sans-serif; letter-spacing: .06em; padding: 3px 5px; border-radius: 5px;
  color: rgb(var(--g)); background: rgb(var(--g) / .12); border: 1px solid rgb(var(--g) / .35); }
.fx-tag-green { --g: 74 222 128; } .fx-tag-red { --g: 255 90 78; } .fx-tag-blue { --g: 56 189 248; } .fx-tag-gold { --g: 255 204 0; }
.fx-tag-purple { --g: 192 132 252; } .fx-tag-orange { --g: 255 140 30; } .fx-tag-gray { --g: 156 163 175; }
.fx-txt-gold { color: #FFCC00 !important; font-weight: 700; } .fx-txt-purple { color: #d8b4fe !important; font-weight: 700; }
.fx-txt-blue { color: #7dd3fc !important; } .fx-txt-orange { color: #fdba74 !important; font-weight: 700; }
@keyframes fxFloat {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.7); }
  15%  { opacity: 1; transform: translate(-50%, 0) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}
.fx-shake { animation: fxShake .38s linear; }
@keyframes fxShake {
  0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -2px); }
  60% { transform: translate(-3px, 1px); } 80% { transform: translate(3px, -1px); }
}
.fx-flash { position: fixed; inset: 0; z-index: 95; pointer-events: none; animation: fxFlash .4s ease-out forwards;
  background: radial-gradient(circle at 50% 45%, rgb(255 230 150 / .55), rgb(255 204 0 / .15) 45%, transparent 75%); }
@keyframes fxFlash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* ===== 1263: KI SPINDULYS (nuo kovotojo iki priešo) ===== */
.fx-beam { position: fixed; z-index: 93; height: 14px; margin-top: -7px; transform-origin: 0 50%; pointer-events: none; --b: 56 189 248; }
.fx-beam.fx-beam-sm { height: 8px; margin-top: -4px; }
.fx-beam.fx-beam-crit { height: 22px; margin-top: -11px; }
.fx-beam-core { position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--b) / .15), rgb(var(--b) / .95) 22%, #fff 60%, rgb(var(--b)) 100%);
  box-shadow: 0 0 10px rgb(var(--b)), 0 0 26px rgb(var(--b) / .7);
  clip-path: inset(0 100% 0 0 round 999px); animation: fxBeam .62s cubic-bezier(.3,.8,.4,1) forwards; }
.fx-beam-core::before { content: ""; position: absolute; left: 8%; right: 0; top: 32%; bottom: 32%; border-radius: 999px; background: #fff; opacity: .9; }
.fx-beam-head { position: absolute; top: 50%; left: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, rgb(var(--b)) 55%, transparent 72%); box-shadow: 0 0 18px 4px rgb(var(--b) / .8);
  animation: fxBeamHead .62s cubic-bezier(.3,.8,.4,1) forwards; }
.fx-beam-sm .fx-beam-head { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.fx-beam-crit .fx-beam-head { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.fx-beam-orb { position: absolute; top: 50%; left: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, rgb(var(--b) / .9) 50%, transparent 72%); animation: fxBeamOrb .62s ease-out forwards; }
.fx-beam-sm .fx-beam-orb { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
@keyframes fxBeam { 0% { clip-path: inset(0 100% 0 0 round 999px); opacity: 1; } 40% { clip-path: inset(0 0 0 0 round 999px); opacity: 1; }
  75% { clip-path: inset(0 0 0 0 round 999px); opacity: .9; transform: scaleY(.8); } 100% { clip-path: inset(0 0 0 100% round 999px); opacity: 0; transform: scaleY(.3); } }
@keyframes fxBeamHead { 0% { left: 0; opacity: 1; transform: scale(.6); } 40% { left: 100%; opacity: 1; transform: scale(1.25); } 100% { left: 100%; opacity: 0; transform: scale(1.8); } }
@keyframes fxBeamOrb { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(.4); opacity: 0; } }
.fx-tech { position: fixed; z-index: 97; pointer-events: none; white-space: nowrap; transform: translate(-50%, -100%);
  font: 900 18px/1 'Orbitron', sans-serif; letter-spacing: .04em; color: #fff; --b: 56 189 248;
  text-shadow: 0 0 4px #000, 0 0 12px rgb(var(--b)), 0 0 24px rgb(var(--b) / .8); animation: fxTech 1.3s ease-out forwards; }
@keyframes fxTech { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -100%) scale(1.15); }
  75% { opacity: 1; transform: translate(-50%, -115%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -135%) scale(1); } }

/* ===== DALELĖS (sprogimas) ===== */
.fx-p { position: fixed; z-index: 96; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none;
  background: var(--c, #FFCC00); box-shadow: 0 0 8px var(--c, #FFCC00); animation: fxBurst .85s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes fxBurst { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* ===== PRANEŠIMAI (įvykiai) ===== */
.fx-toasts { position: fixed; z-index: 90; top: 76px; right: 16px; width: min(22rem, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
@media (max-width: 640px) { .fx-toasts { right: 12px; left: 12px; width: auto; top: 64px; } }
.fx-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(135deg, rgb(11 16 32 / .96), rgb(20 26 48 / .96)); border: 1px solid rgb(var(--t) / .6);
  box-shadow: 0 0 18px rgb(var(--t) / .35), 0 8px 24px rgb(0 0 0 / .5); color: #e5e7eb; font-size: 12px;
  animation: fxToastIn .45s cubic-bezier(.2,.9,.3,1.2) both; }
.fx-toast.fx-out { animation: fxToastOut .35s ease-in forwards; }
.fx-toast .fx-ti { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 18px;
  color: rgb(var(--t)); background: radial-gradient(circle, rgb(var(--t) / .35), rgb(var(--t) / .08) 70%); box-shadow: 0 0 12px rgb(var(--t) / .5); }
.fx-toast .fx-ti img { width: 34px; height: 34px; object-fit: contain; animation: fxBob 1.6s ease-in-out infinite; }
.fx-toast b { display: block; color: rgb(var(--t)); font-size: 13px; }
.fx-tone-gold { --t: 255 204 0; } .fx-tone-blue { --t: 56 189 248; } .fx-tone-purple { --t: 192 132 252; }
.fx-tone-green { --t: 74 222 128; } .fx-tone-red { --t: 255 59 48; }
@keyframes fxToastIn { from { opacity: 0; transform: translateX(30px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes fxToastOut { to { opacity: 0; transform: translateX(30px); } }
@keyframes fxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ===== LANGAS: rastas rutulys / reti daiktai ===== */
.fx-overlay { position: fixed; inset: 0; z-index: 94; display: grid; place-items: center; padding: 16px;
  background: rgb(0 0 0 / .72); backdrop-filter: blur(3px); animation: fxFade .3s ease-out both; }
.fx-overlay.fx-out { animation: fxFadeOut .3s ease-in forwards; }
@keyframes fxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxFadeOut { to { opacity: 0; } }
.fx-card { position: relative; width: min(24rem, 100%); padding: 22px 18px 18px; border-radius: 20px; text-align: center; color: #e5e7eb;
  background: linear-gradient(160deg, rgb(12 18 36 / .98), rgb(22 14 40 / .98)); border: 1px solid rgb(255 204 0 / .45);
  box-shadow: 0 0 40px rgb(255 204 0 / .25); animation: fxPop .45s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes fxPop { from { opacity: 0; transform: scale(.8) translateY(12px); } to { opacity: 1; transform: none; } }
.fx-card h3 { font: 900 18px/1.2 'Orbitron', sans-serif; color: #FFCC00; letter-spacing: .02em; }
.fx-card p { font-size: 12px; color: #9ca3af; margin-top: 6px; }
.fx-rays { position: absolute; left: 50%; top: 40%; width: 260px; height: 260px; margin: -130px 0 0 -130px; pointer-events: none; z-index: 0;
  background: repeating-conic-gradient(from 0deg, rgb(255 204 0 / .18) 0deg 10deg, transparent 10deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%);
  animation: fxSpin 9s linear infinite; }
@keyframes fxSpin { to { transform: rotate(360deg); } }
.fx-ball { position: relative; z-index: 1; display: block; margin: 14px auto 6px; width: 120px; height: 120px; border: 0; background: none; cursor: pointer;
  animation: fxBob 1.6s ease-in-out infinite; filter: drop-shadow(0 0 18px rgb(255 170 0 / .8)); }
.fx-ball img { width: 100%; height: 100%; object-fit: contain; }
.fx-ball .fx-ball-n { position: absolute; right: 6px; bottom: 6px; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 15px;
  background: #FFCC00; color: #111; font: 900 15px/30px 'Orbitron', sans-serif; box-shadow: 0 0 10px rgb(0 0 0 / .5); }
.fx-ball.fx-taken { animation: fxTaken .55s ease-in forwards; }
@keyframes fxTaken { to { transform: translateY(-60px) scale(.2) rotate(200deg); opacity: 0; } }
.fx-hint { position: relative; z-index: 1; font-size: 12px; color: #FFCC00; animation: fxBlink 1.2s ease-in-out infinite; }
@keyframes fxBlink { 50% { opacity: .45; } }
.fx-btns { position: relative; z-index: 1; display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.fx-btn { padding: 8px 16px; border-radius: 12px; font: 700 12px 'Orbitron', sans-serif; background: #FFCC00; color: #111; border: 0; cursor: pointer; text-decoration: none; }
.fx-btn.fx-ghost { background: rgb(255 255 255 / .08); color: #e5e7eb; border: 1px solid rgb(255 255 255 / .15); }
.fx-loot { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; text-align: left; }
.fx-loot-i { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgb(0 0 0 / .45);
  border: 1px solid rgb(var(--r) / .6); box-shadow: 0 0 14px rgb(var(--r) / .3), inset 0 0 12px rgb(var(--r) / .12);
  opacity: 0; animation: fxLootIn .45s cubic-bezier(.2,.9,.3,1.2) forwards; }
.fx-loot-i i { color: rgb(var(--r)); font-size: 18px; width: 22px; text-align: center; }
.fx-loot-i .fx-ln { flex: 1; min-width: 0; font-size: 13px; color: #fff; }
.fx-loot-i .fx-lr { display: block; font-size: 10px; color: rgb(var(--r)); }
.fx-r-neiprastas { --r: 74 222 128; } .fx-r-retas { --r: 56 189 248; } .fx-r-epinis { --r: 192 132 252; } .fx-r-legendinis { --r: 255 204 0; } .fx-r-paprastas { --r: 156 163 175; }
.fx-loot-i { position: relative; }
.fx-loot-i.fx-r-legendinis::after, .fx-loot-i.fx-r-epinis::after { content: ""; position: absolute; inset: -1px; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 22px rgb(var(--r) / .6); animation: fxLegend 1.6s ease-in-out infinite; }
@keyframes fxLootIn { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes fxLegend { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.fx-chest { position: relative; z-index: 1; width: 96px; height: 96px; margin: 4px auto 0; object-fit: contain; animation: fxBob 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgb(192 132 252 / .7)); }

/* ===== ZONOS dalelės (ki burbulai) ===== */
.fx-ambient { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.fx-ambient ~ * { position: relative; z-index: 1; }
.fx-orb { position: absolute; bottom: -12px; width: var(--s, 8px); height: var(--s, 8px); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, rgb(var(--o) / .95) 30%, rgb(var(--o) / .15) 72%); box-shadow: 0 0 14px 2px rgb(var(--o) / .75);
  animation: fxDrift var(--d, 9s) linear infinite; animation-delay: var(--w, 0s); opacity: 0; }
@keyframes fxDrift { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: .75; } 100% { transform: translate(var(--x, 20px), var(--h, -240px)); opacity: 0; } }
.fx-orb.fx-orb-db { background: radial-gradient(circle at 34% 30%, #fff3c4 0 10%, #ffb627 38%, #f06a0c 78%, #b93c05); box-shadow: 0 0 16px 3px rgb(255 150 30 / .7); }
.fx-orb.fx-orb-db::after { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; color: #d61f1f; font-size: calc(var(--s, 14px) * .5); line-height: 1; }
/* 1262: transformacijos įjungimo langas */
.fx-tf { position: relative; z-index: 1; width: 150px; height: 150px; margin: 10px auto 4px; border-radius: 18px; }
.fx-tf img { width: 100%; height: 100%; object-fit: contain; border-radius: 18px; background: rgb(0 0 0 / .5); }
.fx-tf-name { position: relative; z-index: 1; font: 800 15px 'Orbitron', sans-serif; margin-top: 8px; }

/* ===== Išjungta / mažiau judesio ===== */
body[data-fx="off"] .fx-ki::before, body[data-fx="off"] .fx-ki::after, body[data-fx="off"] .fx-spark, body[data-fx="off"] .fx-rez-rays,
body[data-fx="off"] .fx-ambient { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .fx-ki::before, .fx-ki::after, .fx-spark, .fx-orb, .fx-rays, .fx-rez-rays, .fx-ball, .fx-hint, .fx-toast .fx-ti img, .fx-chest,
  .fx-title-win, .fx-title-lose, .fx-row-in, .fx-pulse, .fx-hurt, .fx-ki-up > :first-child { animation: none !important; }
  .fx-float, .fx-p, .fx-flash, .fx-beam, .fx-tech { display: none !important; }
}