/* Dragon Ball RPG 6.1 — habillage manga, fichier 7/7 : effets de combat.
   Les éléments sont créés par app.js (floatText, burst, kiShot, flashArena, speech,
   ultimateCinematic…). Les transformations animées par JS (Web Animations) ne doivent
   pas être utilisées ici pour centrer : on centre avec des marges négatives. */

/* ---------- Textes flottants : onomatopées manga ---------- */
.dbrpg-floating{position:absolute;left:50%;top:30%;z-index:8;margin-left:-60px;width:120px;pointer-events:none;text-align:center;
  font:400 2.2rem/1 var(--m-font-display);letter-spacing:.03em;color:var(--m-blank);-webkit-text-stroke:2px var(--m-ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--m-ink);
  animation:dbrpg-m-float 1s cubic-bezier(.2,1.4,.4,1) forwards}
.dbrpg-floating.damage{color:var(--m-blank)}
.dbrpg-floating.critical{font-size:3rem;color:var(--m-pop);animation-name:dbrpg-m-float-crit}
.dbrpg-floating.crit-label{top:12%;font-size:1.3rem;color:var(--m-hot);-webkit-text-stroke:1.5px var(--m-ink)}
.dbrpg-floating.ultimate-damage{font-size:3.6rem;color:var(--m-pop);animation-name:dbrpg-m-float-crit}
.dbrpg-floating.heal{color:var(--m-hp)}
.dbrpg-floating.ki{color:var(--m-ki)}
.dbrpg-floating.guard{font-size:1.6rem;color:#b5f2f8}
.dbrpg-floating.dodge{font-size:1.8rem;color:var(--m-violet-soft);animation-name:dbrpg-m-float-dodge}
.dbrpg-floating.transform{width:220px;margin-left:-110px;font-size:2rem;color:var(--m-pop)}
@keyframes dbrpg-m-float{0%{transform:scale(.3) rotate(-12deg);opacity:0}25%{transform:scale(1.25) rotate(-6deg);opacity:1}45%{transform:scale(1) rotate(-4deg)}100%{transform:translateY(-70px) rotate(-4deg);opacity:0}}
@keyframes dbrpg-m-float-crit{0%{transform:scale(.2) rotate(10deg);opacity:0}20%{transform:scale(1.5) rotate(-8deg);opacity:1}40%{transform:scale(1.1) rotate(-6deg)}100%{transform:translateY(-80px) scale(1.1) rotate(-6deg);opacity:0}}
@keyframes dbrpg-m-float-dodge{0%{transform:translateX(0);opacity:0}20%{transform:translateX(-30px) skewX(-15deg);opacity:1}100%{transform:translate(-50px,-40px) skewX(-15deg);opacity:0}}

/* ---------- Projectiles de Ki ---------- */
.dbrpg-projectile{position:absolute;z-index:6;width:46px;height:46px;margin:-23px 0 0 -23px;border:3px solid var(--m-ink);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 35%,#fff 0 22%,var(--tone,var(--m-ki)) 55%,color-mix(in srgb,var(--tone,var(--m-ki)) 60%,#000) 100%);
  box-shadow:0 0 18px 6px color-mix(in srgb,var(--tone,var(--m-ki)) 70%,transparent)}
.dbrpg-projectile.is-big{width:78px;height:78px;margin:-39px 0 0 -39px}
.dbrpg-projectile.tone-player{--tone:var(--m-ki)}
.dbrpg-projectile.tone-enemy{--tone:var(--m-hot)}
.dbrpg-projectile.tone-companion{--tone:var(--m-hp)}
.dbrpg-projectile.tone-ultimate{--tone:var(--m-pop);width:110px;height:110px;margin:-55px 0 0 -55px}

/* ---------- Impacts : étoile BD ---------- */
.dbrpg-burst{position:absolute;z-index:6;width:110px;height:110px;margin:-55px 0 0 -55px;pointer-events:none;
  background:var(--tone,var(--m-pop));border:0;
  clip-path:polygon(50% 0,61% 30%,95% 18%,72% 45%,100% 62%,66% 66%,75% 100%,50% 76%,25% 100%,34% 66%,0 62%,28% 45%,5% 18%,39% 30%);
  filter:drop-shadow(0 0 0 var(--m-ink));animation:dbrpg-m-burst .6s cubic-bezier(.2,1.6,.4,1) forwards}
.dbrpg-burst::after{content:"";position:absolute;inset:22%;background:#fff;clip-path:inherit}
.dbrpg-burst.is-big{width:180px;height:180px;margin:-90px 0 0 -90px}
.dbrpg-burst.tone-player{--tone:var(--m-ki)}
.dbrpg-burst.tone-enemy{--tone:var(--m-hot)}
.dbrpg-burst.tone-companion{--tone:var(--m-hp)}
.dbrpg-burst.tone-ultimate{--tone:var(--m-pop)}
@keyframes dbrpg-m-burst{0%{transform:scale(.2) rotate(-20deg);opacity:1}60%{transform:scale(1.1) rotate(8deg);opacity:1}100%{transform:scale(1.3) rotate(12deg);opacity:0}}

/* ---------- Flash plein écran de l’arène ---------- */
.dbrpg-arena-flash{position:absolute;inset:0;z-index:7;pointer-events:none;animation:dbrpg-m-flash .5s ease-out forwards}
.dbrpg-arena-flash.tone-white{background:#fff}
.dbrpg-arena-flash.tone-gold{background:radial-gradient(circle,#fff 0,var(--m-pop) 60%,transparent 100%)}
@keyframes dbrpg-m-flash{0%{opacity:.95}100%{opacity:0}}

/* ---------- Bulle de dialogue ---------- */
.dbrpg-speech{position:absolute;left:50%;top:-12px;z-index:9;width:max-content;max-width:240px;padding:8px 12px;border:var(--m-stroke) solid var(--m-ink);border-radius:18px;background:var(--m-blank);color:var(--m-ink);font-weight:800;font-size:.86rem;text-align:center;box-shadow:var(--m-shadow-sm);transform:translate(-50%,-100%);animation:dbrpg-m-pop .25s ease-out}
.dbrpg-speech::after{content:"";position:absolute;left:50%;bottom:-14px;width:18px;height:14px;margin-left:-9px;background:var(--m-blank);border:var(--m-stroke) solid var(--m-ink);border-top:0;clip-path:polygon(0 0,100% 0,30% 100%)}

/* ---------- États des combattants ---------- */
.dbrpg-bar-row.is-hit{animation:dbrpg-m-shake .35s}
.dbrpg-fighter.is-acting{z-index:3}
.dbrpg-fighter.is-charging .dbrpg-fighter-img,.dbrpg-fighter.is-powering .dbrpg-fighter-img,.dbrpg-fighter.is-ultimate-charging .dbrpg-fighter-img{box-shadow:0 0 0 4px var(--m-pop),0 0 34px 8px var(--m-pop),var(--m-shadow);animation:dbrpg-m-aura .3s ease-in-out infinite alternate}
.dbrpg-fighter.charge-enemy .dbrpg-fighter-img{box-shadow:0 0 0 4px var(--m-hot),0 0 34px 8px var(--m-hot)}
.dbrpg-fighter.is-transforming .dbrpg-fighter-img{animation:dbrpg-m-aura .2s ease-in-out infinite alternate;box-shadow:0 0 0 5px var(--m-hot),0 0 40px 12px var(--m-hot)}
.dbrpg-fighter.is-ko h3{text-decoration:line-through;text-decoration-thickness:3px}
@keyframes dbrpg-m-shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes dbrpg-m-aura{to{filter:brightness(1.15)}}

/* ---------- Pouvoir du mentor / temps figé ---------- */
.dbrpg-arena.is-time-stopped{filter:grayscale(.85) contrast(1.1)}
.dbrpg-arena.is-time-stopped .dbrpg-fx-layer{filter:none}
.dbrpg-time-stop-cinematic{position:absolute;left:50%;top:50%;z-index:9;display:grid;justify-items:center;gap:4px;width:min(440px,90%);margin-left:max(-220px,-45%);margin-top:-80px;padding:18px;border:var(--m-stroke) solid var(--m-ink);border-radius:var(--m-radius-lg);background:var(--m-ink);color:var(--m-blank);text-align:center;box-shadow:var(--m-shadow-lg)}
.dbrpg-time-stop-cinematic span{font-weight:900;font-size:.72rem;letter-spacing:.16em;color:var(--m-pop)}
.dbrpg-time-stop-cinematic b{font:400 2.6rem/1 var(--m-font-display);color:var(--m-pop)}
.dbrpg-time-stop-cinematic small{font-weight:700}
.dbrpg-time-stop-cinematic i{width:60px;height:60px;border:4px solid var(--m-pop);border-radius:50%;border-top-color:transparent;animation:dbrpg-m-spin 1s linear infinite}

/* ---------- Cinématique d’attaque ultime ---------- */
.dbrpg-arena.is-ultimate-cinematic{background:repeating-conic-gradient(from 0deg at 30% 55%,#fff 0 3deg,transparent 3deg 9deg),radial-gradient(circle at 30% 55%,#fff6c7,var(--m-pop) 35%,var(--m-ult) 70%,#8b2cf5)}
.dbrpg-arena.is-ultimate-impact{animation:dbrpg-m-shake .5s}
.dbrpg-ultimate-reveal{position:absolute;left:0;top:50%;z-index:8;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;align-items:center;width:100%;margin-top:-80px;padding:14px 20px;border-block:var(--m-stroke) solid var(--m-ink);background:var(--m-ink);color:var(--m-blank)}
.dbrpg-ultimate-reveal>div{grid-row:1/4;width:120px;height:120px;overflow:hidden;border:var(--m-stroke) solid var(--m-pop);border-radius:var(--m-radius);transform:skew(-6deg)}
.dbrpg-ultimate-reveal>div img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.dbrpg-ultimate-reveal>span{font-weight:900;font-size:.72rem;letter-spacing:.2em;color:var(--m-pop)}
.dbrpg-ultimate-reveal>strong{font:400 clamp(2rem,5vw,3.2rem)/1 var(--m-font-display);color:var(--m-pop);-webkit-text-stroke:1.5px #000;transform:skew(-8deg);transform-origin:left}
.dbrpg-ultimate-reveal>small{font-weight:800;letter-spacing:.1em}
.dbrpg-ultimate-reveal.is-fired{opacity:0;transition:opacity .25s}
.dbrpg-ultimate-signature{position:absolute;right:16px;top:50%;width:80px;height:80px;margin-top:-40px;border:4px solid var(--m-pop);border-radius:50%;animation:dbrpg-m-ring 1s ease-out infinite}
.dbrpg-ultimate-name{position:absolute;left:50%;top:16px;z-index:9;display:grid;justify-items:center;margin-left:-160px;width:320px;text-align:center}
.dbrpg-ultimate-name span{padding:1px 10px;border:2px solid var(--m-ink);border-radius:6px;background:var(--m-hot);color:var(--m-blank);font-weight:900;font-size:.7rem;letter-spacing:.2em}
.dbrpg-ultimate-name b{font:400 2.4rem/1 var(--m-font-display);color:var(--m-pop);-webkit-text-stroke:2px var(--m-ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--m-ink)}
.dbrpg-ultimate-field{position:absolute;left:50%;top:50%;z-index:6;width:340px;height:340px;margin:-170px 0 0 -170px;pointer-events:none}
.dbrpg-ultimate-field>i{position:absolute;inset:0;border:5px solid var(--m-pop);border-radius:50%;opacity:.75}
.dbrpg-ultimate-field>i:nth-child(2){inset:40px;border-style:dashed;border-color:var(--m-blank)}
.dbrpg-ultimate-field>i:nth-child(3){inset:80px;border-color:var(--m-hot)}
.dbrpg-ultimate-field>b{position:absolute;inset:120px;border-radius:50%;background:radial-gradient(circle,#fff,var(--m-pop) 60%,transparent 70%)}
.dbrpg-ultimate-field.field-ocean-beam>i{border-color:var(--m-ki)}
.dbrpg-ultimate-field.field-burst>i{border-color:var(--m-hot)}

/* ---------- V6.1.3 : « The World » — arrêt du temps (durée = --zw, celle du son) ---------- */
.dbrpg-app.dbrpg-skin-manga{transition:filter .45s}
.dbrpg-app.is-zawarudo{filter:grayscale(1) contrast(1.35) brightness(1.05);transition:filter .25s calc(var(--zw-start,0s))}
.dbrpg-zawarudo{--zw:3.4s;position:fixed;inset:var(--dbrpg-admin-bar-height) 0 0;z-index:var(--z-toast);overflow:hidden;pointer-events:none;display:grid;place-items:center}
.dbrpg-zawarudo>i{position:absolute;left:50%;top:50%;display:block}
/* Sphère d’inversion : s’étend puis se rétracte au début de l’effet */
.zw-sphere{width:140vmax;height:140vmax;margin:-70vmax 0 0 -70vmax;border-radius:50%;backdrop-filter:invert(1) grayscale(1);-webkit-backdrop-filter:invert(1) grayscale(1);background:radial-gradient(circle,transparent 55%,#ffffff22 70%,transparent 71%);transform:scale(0);animation:zw-sphere var(--zw) cubic-bezier(.3,.6,.3,1) forwards}
@keyframes zw-sphere{0%{transform:scale(0)}22%{transform:scale(1)}40%{transform:scale(.02)}41%,100%{transform:scale(0)}}
/* Rayons qui tournent et s’élargissent depuis le centre */
.zw-lines{width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;background:repeating-conic-gradient(#000 0 1.6deg,transparent 1.6deg 9deg);-webkit-mask:radial-gradient(circle,transparent 6%,#000 7%,#000 30%,transparent 62%);mask:radial-gradient(circle,transparent 6%,#000 7%,#000 30%,transparent 62%);opacity:0;animation:zw-lines var(--zw) linear forwards}
@keyframes zw-lines{0%,18%{opacity:0;transform:scale(.2) rotate(0)}30%{opacity:.75}85%{opacity:.6}100%{opacity:0;transform:scale(1.6) rotate(25deg)}}
/* Ondes concentriques émises en continu */
.zw-ring{width:40vmin;height:40vmin;margin:-20vmin 0 0 -20vmin;border:6px solid #000;border-radius:50%;box-shadow:0 0 0 4px #fff,inset 0 0 0 4px #fff;opacity:0;animation:zw-ring 1.5s calc(.35s + var(--i) * .3s) cubic-bezier(.2,.6,.4,1) infinite}
@keyframes zw-ring{0%{transform:scale(.05);opacity:1}100%{transform:scale(4.2);opacity:0}}
/* Formes géométriques (losanges, hexagones, triangles) projetées vers l’extérieur */
.zw-shape{width:13vmin;height:13vmin;margin:-6.5vmin 0 0 -6.5vmin;background:#fff;border:0;outline:5px solid #000;opacity:0;animation:zw-shape 1.9s calc(.5s + var(--i) * .28s) cubic-bezier(.3,.5,.3,1) infinite}
.zw-shape.s0{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#000}
.zw-shape.s1{clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);background:#fff}
.zw-shape.s2{clip-path:polygon(50% 0,100% 100%,0 100%);background:#000}
.zw-shape:nth-of-type(odd){--dir:-1}
@keyframes zw-shape{0%{transform:rotate(calc(var(--i) * 60deg)) translateY(0) scale(.2) rotate(0);opacity:1}100%{transform:rotate(calc(var(--i) * 60deg)) translateY(-80vmax) scale(2.4) rotate(calc(var(--dir,1) * 220deg));opacity:0}}
/* Horloge figée au centre */
.zw-clock{position:absolute;left:50%;top:50%;width:22vmin;height:22vmin;margin:-11vmin 0 0 -11vmin;border:6px solid #000;border-radius:50%;background:#fff;box-shadow:0 0 0 6px #fff,0 0 0 12px #000;opacity:0;animation:zw-clock var(--zw) ease-out forwards}
.zw-clock>i{position:absolute;left:50%;bottom:50%;width:6px;height:42%;margin-left:-3px;border-radius:3px;background:#000;transform-origin:50% 100%;animation:zw-hand 1s steps(4) 2}
.zw-clock>i+i{height:30%;width:8px;margin-left:-4px;animation-duration:2s}
@keyframes zw-clock{0%,24%{opacity:0;transform:scale(.4)}32%{opacity:1;transform:scale(1.1)}38%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}
@keyframes zw-hand{to{transform:rotate(360deg)}}
/* Titre */
.zw-title{position:relative;z-index:2;display:grid;justify-items:center;gap:2px;margin-top:44vmin;text-align:center;opacity:0;animation:zw-title var(--zw) ease-out forwards}
.zw-title small{padding:2px 12px;border:3px solid #000;background:#fff;font:900 .8rem/1.4 var(--m-font-body);letter-spacing:.2em;text-transform:uppercase}
.zw-title b{font:400 clamp(3.4rem,11vw,7.5rem)/.95 var(--m-font-display);color:#fff;-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:6px 6px 0 #000;letter-spacing:.04em;transform:skew(-8deg)}
.zw-title em{font:400 clamp(1.4rem,4vw,2.4rem)/1 var(--m-font-display);font-style:normal;color:#000;-webkit-text-stroke:1px #fff;letter-spacing:.06em}
.zw-title span{margin-top:4px;padding:2px 10px;background:#000;color:#fff;font-weight:900;font-size:.82rem}
@keyframes zw-title{0%,26%{opacity:0;transform:scale(2.2)}32%{opacity:1;transform:scale(1)}88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.96)}}
.dbrpg-zawarudo.is-ending{opacity:0;transition:opacity .4s}
@media (prefers-reduced-motion:reduce){.dbrpg-zawarudo>i{display:none}.zw-title,.zw-clock{animation:none;opacity:1}}

@media (max-width:760px){
  .dbrpg-floating{font-size:1.6rem}
  .dbrpg-floating.critical{font-size:2.1rem}
  .dbrpg-ultimate-reveal>div{width:80px;height:80px}
  .dbrpg-ultimate-field{width:220px;height:220px;margin:-110px 0 0 -110px}
  .dbrpg-ultimate-name b{font-size:1.8rem}
}