/* Making damage obvious: big outlined numbers, the HP "damage ghost", the turn summary. */

/* Floating numbers: about twice the old size, heavy, with a thick dark outline; they pop in, then rise. */
.ftext { font: 900 28px/1 var(--ui); letter-spacing: -.01em; -webkit-text-stroke: 5px #0b0608; paint-order: stroke fill; text-shadow: 0 3px 6px rgba(0,0,0,.7); }
.ftext span { display: inline-block; animation: fpop var(--pop, .32s) cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fpop { 0% { transform: scale(1.45); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1); } }
.ftext.damage { color: #ff6a3c !important; }
.ftext.big { font-size: 40px; }
.ftext.damage.big { color: #ffd23c !important; -webkit-text-stroke: 6px #3a0d00; text-shadow: 0 0 14px rgba(255,170,40,.75), 0 3px 6px rgba(0,0,0,.7); }
.ftext.cover span::after { content: ' 🛡'; font-size: .55em; vertical-align: middle; }
.ftext.heal { color: #5dff9a !important; }
.ftext.shield { color: #bfe0ff !important; font-size: 22px; }
.ftext.status { font: 800 15px var(--title); -webkit-text-stroke: 3px #0b0608; }
.ftext.storm { color: #c9a7ff !important; }

/* HP bar on the unit label: a touch bigger; the lost chunk shows white, then drains; shields sit after HP. */
.ulabel .pip .bar { width: 52px; height: 7px; }
.bar .gh { position: absolute; inset: 0 auto 0 0; background: #fff4d6; transition: width .6s cubic-bezier(.4, 0, .6, 1); }
.bar .gh.hit { animation: ghflash .22s ease-out; }
@keyframes ghflash { from { background: #fff; box-shadow: 0 0 8px #fff; } to { background: #fff4d6; } }
.bar i { z-index: 1; }
.bar s { right: auto !important; z-index: 1; background: #d8ecff !important; opacity: .9; }

/* This turn: what you dealt and took. */
#turnsum { position: fixed; left: 12px; top: 220px; z-index: 3; padding: 7px 12px; border-radius: 10px; background: rgba(13,17,26,.92); border: 1px solid var(--line); font: 600 13px var(--ui); color: var(--fg); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
#turnsum[hidden] { display: none; }
#turnsum.in { animation: sumin .35s ease-out; }
@keyframes sumin { from { transform: translateX(-10px); opacity: 0; } }
#turnsum .lbl { display: block; font: 800 9.5px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
#turnsum b { font-size: 16px; } #turnsum .d { color: #ff8a5c; } #turnsum .t { color: #ff5a6e; } #turnsum .h { color: #5dff9a; }
#turnlog li b { color: #fff; font-weight: 800; }

/* The phase banner stays up longer (its time follows the replay speed). */
#banner.pop { animation-duration: var(--dur, 1.3s); }

@media (max-width: 640px) {
  .ftext { font-size: 24px; -webkit-text-stroke-width: 4px; }
  .ftext.big { font-size: 32px; }
  #turnsum { top: 168px; left: 8px; font-size: 12px; }
}

/* Critical hits: bigger, gold-white with a hot outline and glow. */
.ftext.crit { font-size: 46px; color: #fff3b0 !important; -webkit-text-stroke: 6px #6a2a00; text-shadow: 0 0 18px rgba(255,200,60,.95), 0 0 36px rgba(255,140,30,.6), 0 3px 6px rgba(0,0,0,.7); letter-spacing: .02em; }
.ftext.crit span { animation-duration: calc(var(--pop, .32s) * 1.4); }
@media (max-width: 640px) { .ftext.crit { font-size: 36px; } }

/* Numbers float above the HUD dock (they take no clicks), so hits near the bottom stay readable. */
#fxtext { z-index: 4; }