/* ================================================================ frases flutuando em volta dos personagens (public/js/comics.js)
   Simples: metade do tamanho do ícone do personagem, letra limpa com contorno fino escuro e um brilho suave na
   cor da técnica. Aparece subindo devagar e some flutuando. */
#comics { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 90; --tile: 64px; }
.fl { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform;
  font: 700 max(11px, calc(var(--tile) * .5))/1 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif; letter-spacing: .03em;
  --c: #fff; --glow: rgba(255, 255, 255, .5);
  color: var(--c);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .85), 0 -1px 0 rgba(0, 0, 0, .85), 1px 0 0 rgba(0, 0, 0, .85), -1px 0 0 rgba(0, 0, 0, .85), 0 0 .45em var(--glow);
  animation: fl-float var(--life, 1700ms) ease-out both; }
.fl-big { font-size: max(12px, calc(var(--tile) * .6)); }
.fl-out { animation: fl-gone .3s ease-in forwards; }

/* cores: só o tom da letra e do brilho */
.fl-kame   { --c: #d6f1ff; --glow: rgba(80, 180, 255, .8); }
.fl-ki     { --c: #fff6c8; --glow: rgba(255, 210, 80, .7); }
.fl-gold   { --c: #ffe68a; --glow: rgba(255, 190, 40, .8); }
.fl-red    { --c: #ffd2d2; --glow: rgba(255, 60, 60, .8); }
.fl-purple { --c: #ecd6ff; --glow: rgba(180, 100, 255, .8); }
.fl-green  { --c: #dcffc6; --glow: rgba(110, 220, 70, .7); }
.fl-silver { --c: #f2f5ff; --glow: rgba(200, 215, 255, .9); }
.fl-impact { --c: #fff0c0; --glow: rgba(255, 140, 40, .6); }
.fl-beast  { --c: #ffe2c2; --glow: rgba(200, 120, 50, .7); }
.fl-rp     { --c: #ffffff; --glow: rgba(255, 255, 255, .35); }
.fl-npc    { --c: #d9f4ff; --glow: rgba(100, 205, 255, .55); font-style: italic; }

/* entra subindo e aparecendo, flutua devagar e some */
@keyframes fl-float {
  0% { opacity: 0; translate: 0 .5em; }
  12% { opacity: 1; translate: 0 0; }
  75% { opacity: 1; }
  100% { opacity: 0; translate: 0 -.9em; }
}
@keyframes fl-gone { to { opacity: 0; translate: 0 -.4em; } }

@media (prefers-reduced-motion: reduce) {
  .fl { animation-name: fl-fade; }
  @keyframes fl-fade { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }
}

/* Reações estilo anime/mangá: mais sóbrias que os antigos kaomojis kawaii. */
.fl-reaction {
  --c:#f4f6fb;
  --glow:rgba(105,177,255,.72);
  font-family:Impact,'Arial Black','Segoe UI Symbol','Noto Color Emoji',sans-serif;
  font-weight:800;
  letter-spacing:.035em;
  text-shadow:0 2px 0 #111,0 0 6px rgba(0,0,0,.85),0 0 10px var(--glow);
}
.fl-reaction.fl-big { font-size:max(14px,calc(var(--tile) * .52)); }


/* Reações novas: símbolos de mangá/anime, sem emoji colorido do SO. */
.fl-reaction {
  --c:#f4f7ff;
  --glow:rgba(100,175,255,.74);
  font-family:Impact,'Arial Black','Trebuchet MS',sans-serif;
  font-weight:900;
  letter-spacing:.02em;
}
.fl-reaction.fl-big { font-size:max(15px,calc(var(--tile) * .58)); }
.fl-reaction-mark { animation: reaction-pop var(--life, 1100ms) cubic-bezier(.2,.85,.2,1) both; }

/* Floating combat text */
.fl-damage {
  font-family:Impact,'Arial Black','Trebuchet MS',sans-serif;
  font-weight:900;
  letter-spacing:.015em;
  font-size:max(12px,calc(var(--tile) * .42));
  text-shadow:
    0 2px 0 #111,
    1px 0 0 #111,-1px 0 0 #111,0 -1px 0 #111,
    0 0 .42em var(--glow);
  animation: damage-rise var(--life, 920ms) cubic-bezier(.18,.78,.26,1) both;
}
.fl-damage-dealt { --c:#ffe47a; --glow:rgba(255,170,30,.82); }
.fl-damage-received { --c:#ff7a6e; --glow:rgba(255,50,35,.78); }
.fl-damage-strong { --c:#fff2a6; --glow:rgba(255,115,20,.92); font-size:max(15px,calc(var(--tile) * .54)); }
.fl-heal { --c:#8fffb2; --glow:rgba(55,235,120,.76); }
.fl-status,.fl-miss,.fl-block {
  font-family:Impact,'Arial Black','Trebuchet MS',sans-serif;
  font-weight:900;
  font-size:max(11px,calc(var(--tile) * .34));
  letter-spacing:.04em;
}
.fl-status { --c:#f4f7ff; --glow:rgba(130,185,255,.65); }
.fl-miss { --c:#d9e1ec; --glow:rgba(130,150,180,.55); }
.fl-block { --c:#aee8ff; --glow:rgba(80,190,255,.78); }
.fl-status-mark { animation: status-pop var(--life,760ms) ease-out both; }
.fl-pop { animation: damage-pop .16s ease-out; }

@keyframes damage-rise {
  0% { opacity:0; translate:0 .22em; scale:.72; }
  12% { opacity:1; scale:1.14; }
  28% { scale:1; }
  72% { opacity:1; translate:0 -.58em; }
  100% { opacity:0; translate:0 -1.22em; scale:.94; }
}
@keyframes damage-pop {
  0% { scale:.92; }
  55% { scale:1.18; }
  100% { scale:1; }
}
@keyframes reaction-pop {
  0% { opacity:0; translate:0 .28em; scale:.55; rotate:-7deg; }
  18% { opacity:1; scale:1.18; rotate:4deg; }
  36% { scale:1; rotate:0deg; }
  76% { opacity:1; translate:0 -.18em; }
  100% { opacity:0; translate:0 -.72em; scale:.92; }
}
@keyframes status-pop {
  0% { opacity:0; scale:.7; }
  16% { opacity:1; scale:1.12; }
  72% { opacity:1; translate:0 -.32em; }
  100% { opacity:0; translate:0 -.72em; }
}