/* ============================================================
   战斗动画 — 大逃杀
   ============================================================ */

/* 【1】日志逐条入场（带节奏的 stagger） */
.battle-log .bl {
  animation: blEnter .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes blEnter {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

/* 攻击行：短促冲击 */
.bl-attack { color: #d8dee9; }
.bl-attack::before {
  content: '⚔';
  display: inline-block;
  margin-right: .3rem;
  color: #e05a5a;
  animation: atkFlash .45s ease-out;
}
@keyframes atkFlash {
  0%   { transform: scale(1.5) rotate(-12deg); color: #ff6b6b; }
  60%  { transform: scale(1.05) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* 击杀行：闪红 + 抖动 */
.bl-dead {
  color: var(--red);
  animation: blEnter .42s cubic-bezier(.22,1,.36,1) both, deadShake .5s .1s;
}
@keyframes deadShake {
  0%,100% { transform: translateX(0); }
  15% { transform: translateX(-4px); }
  30% { transform: translateX(4px); }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  80% { transform: translateX(-1px); }
}

/* 毒圈行：警示脉冲 */
.bl-zone {
  color: #c98a3a;
  position: relative;
}
.bl-zone::before {
  content: '☠';
  display: inline-block;
  margin-right: .3rem;
  animation: zonePulse 1.1s ease-in-out infinite;
}
@keyframes zonePulse {
  0%,100% { opacity: .55; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.18); }
}

/* 回血行：绿色上浮 */
.bl-heal { color: #4ec98a; }
.bl-heal::before {
  content: '✚';
  display: inline-block;
  margin-right: .3rem;
  color: #4ec98a;
  animation: healRise .6s ease-out;
}
@keyframes healRise {
  0%   { transform: translateY(3px) scale(.85); opacity: 0; }
  55%  { transform: translateY(-2px) scale(1.12); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* 中奖行：金色发光 */
.bl-win {
  color: var(--gold);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(201,150,63,.6);
  animation: blEnter .42s cubic-bezier(.22,1,.36,1) both,
             winGlow 1.6s ease-in-out .2s infinite;
}
@keyframes winGlow {
  0%,100% { text-shadow: 0 0 10px rgba(201,150,63,.45); }
  50%     { text-shadow: 0 0 22px rgba(201,150,63,.9); }
}

/* 开局行：从中间展开 */
.bl-start {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  animation: startOpen .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes startOpen {
  0%   { opacity: 0; letter-spacing: .3em; transform: scale(.9); }
  100% { opacity: 1; letter-spacing: .04em; transform: scale(1); }
}

/* ============================================================
   【2】座位打击反馈
   ============================================================ */
.seat.hit {
  animation: seatHit .42s ease-out;
}
@keyframes seatHit {
  0%   { transform: translateX(0); box-shadow: none; }
  20%  { transform: translateX(-5px); border-color: #e05a5a; box-shadow: 0 0 16px -2px rgba(224,90,90,.85); background: rgba(224,90,90,.12); }
  45%  { transform: translateX(4px); }
  70%  { transform: translateX(-2px); }
  100% { transform: translateX(0); box-shadow: none; }
}

.seat.heal {
  animation: seatHeal .6s ease-out;
}
@keyframes seatHeal {
  0%   { box-shadow: none; }
  35%  { border-color: #4ec98a; box-shadow: 0 0 18px -2px rgba(78,201,138,.85); background: rgba(78,201,138,.12); }
  100% { box-shadow: none; }
}

.seat.dead {
  animation: seatDead .8s ease-out forwards;
}
@keyframes seatDead {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.06); border-color: var(--red); box-shadow: 0 0 22px -2px rgba(229,72,77,.9); }
  100% { transform: scale(.94); opacity: .38; filter: grayscale(1); }
}

.seat.winner {
  animation: seatWin 1.4s ease-in-out infinite;
}
@keyframes seatWin {
  0%,100% { border-color: rgba(201,150,63,.5); box-shadow: 0 0 0 rgba(201,150,63,0); }
  50%     { border-color: var(--gold); box-shadow: 0 0 22px -2px rgba(201,150,63,.9); }
}

.seat.turn {
  border-color: rgba(90,160,220,.65);
  box-shadow: 0 0 14px -3px rgba(90,160,220,.7);
}

/* ============================================================
   【3】战斗区脉冲边框（战斗进行中）
   ============================================================ */
.battle-card.fighting {
  border-color: rgba(224,90,90,.32);
  animation: battlePulse 2.4s ease-in-out infinite;
}
@keyframes battlePulse {
  0%,100% { box-shadow: 0 0 0 rgba(224,90,90,0); }
  50%     { box-shadow: 0 0 28px -8px rgba(224,90,90,.4); }
}

/* ============================================================
   【4】伤害数字飘浮
   ============================================================ */
.dmg-float {
  position: fixed;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 900;
  color: #ff6b6b;
  text-shadow: 0 2px 8px rgba(0,0,0,.85), 0 0 14px rgba(255,107,107,.7);
  pointer-events: none;
  z-index: 250;
  animation: dmgFloat 1.05s cubic-bezier(.2,.8,.4,1) forwards;
}
@keyframes dmgFloat {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  18%  { opacity: 1; transform: translate(-50%, -14px) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -58px) scale(.92); }
}
.dmg-float.heal {
  color: #4ec98a;
  text-shadow: 0 2px 8px rgba(0,0,0,.85), 0 0 14px rgba(78,201,138,.7);
}
.dmg-float.crit {
  font-size: 1.35rem;
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 0 20px rgba(201,150,63,.9);
}

/* ============================================================
   【5】战况进度条（HP 条）
   ============================================================ */
.seat-hp {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
  margin-top: .1rem;
}
.seat-hp-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #4ec98a, #2fa96b);
  transition: width .45s cubic-bezier(.4,0,.2,1), background .3s;
}
.seat-hp-fill.mid { background: linear-gradient(90deg, #e8b23a, #c9963f); }
.seat-hp-fill.low { background: linear-gradient(90deg, #e5484d, #b8323a); }

/* ============================================================
   【6】reduced-motion 适配
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .battle-log .bl,
  .bl-dead, .bl-win, .bl-start,
  .seat.hit, .seat.heal, .seat.dead, .seat.winner,
  .battle-card.fighting,
  .dmg-float {
    animation: none !important;
  }
  .seat.dead { opacity: .38; filter: grayscale(1); transform: scale(.94); }
}

/* ============================================================
   【7】真人玩家标记（比 AI 更醒目）
   ============================================================ */
.seat.human {
  border-color: rgba(90,200,250,.55);
  background: linear-gradient(170deg, rgba(58,169,212,.14), var(--panel2));
  position: relative;
}
.seat.human::after {
  content: '真人';
  position: absolute;
  top: -6px; right: -4px;
  font-size: .42rem;
  font-weight: 800;
  padding: .08rem .26rem;
  border-radius: 5px;
  background: linear-gradient(135deg, #3aa9d4, #1fb87d);
  color: #04121a;
  letter-spacing: .04em;
  box-shadow: 0 2px 8px -2px rgba(58,169,212,.9);
}
.seat.human .seat-ico {
  background: linear-gradient(135deg, #3aa9d4, #1fb87d) !important;
  color: #04121a !important;
  font-weight: 900;
}
.seat.human.me::after { content: '我'; background: linear-gradient(135deg, #e8b23a, #c9963f); color: #1a1206; }
.seat.human.me .seat-ico { background: linear-gradient(135deg, #e8b23a, #c9963f) !important; }

/* ============================================================
   【8】回合分组
   ============================================================ */
.round-div {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .42rem 0 .26rem;
  font-family: var(--mono);
  font-size: .56rem;
  color: var(--dim);
  letter-spacing: .1em;
  animation: blEnter .4s cubic-bezier(.22,1,.36,1) both;
}
.round-div::before,
.round-div::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line2), transparent);
}
.round-div span {
  padding: 0 .3rem;
  white-space: nowrap;
}
.round-div.hot span { color: #e8a03a; text-shadow: 0 0 10px rgba(232,160,58,.5); }

/* 回合分隔的呼吸停顿 */
.bl.pause { animation: blEnter .4s cubic-bezier(.22,1,.36,1) both, rowPulse .7s ease-out; }
@keyframes rowPulse {
  0%,100% { background: transparent; }
  35%     { background: rgba(255,255,255,.035); }
}

/* ============================================================
   【9】冠军加冕特效
   ============================================================ */
.win-modal.crown .win-medal {
  animation: crownSpin 1.1s cubic-bezier(.22,1,.36,1) both,
             crownFloat 2.2s ease-in-out 1.1s infinite;
}
@keyframes crownSpin {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.35) rotate(12deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes crownFloat {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-7px) rotate(3deg); }
}
/* 金色光晕扩散 */
.win-modal.crown .win-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 30%, rgba(201,150,63,.35), transparent 65%);
  animation: crownGlow 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes crownGlow {
  0%,100% { opacity: .35; transform: scale(1); }
  50%     { opacity: .8;  transform: scale(1.06); }
}
/* 撒花 */
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 320;
  overflow: hidden;
}
.confetti i {
  position: absolute;
  top: -12px;
  width: 7px;
  height: 12px;
  opacity: .95;
  animation: confFall linear forwards;
}
@keyframes confFall {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ============================================================
   【10】战斗回放控制
   ============================================================ */
.replay-bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .5rem;
  padding: .4rem .55rem;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: .62rem;
  color: var(--sub);
}
.replay-bar button {
  flex-shrink: 0;
  padding: .3rem .6rem;
  border-radius: 7px;
  border: 1px solid var(--line2);
  background: var(--panel2);
  color: var(--sub);
  font-family: var(--mono);
  font-size: .6rem;
  cursor: pointer;
  transition: .15s;
}
.replay-bar button:hover { border-color: #3aa9d4; color: #3aa9d4; }
.replay-bar button:disabled { opacity: .4; cursor: default; }
.replay-bar .rp-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
  cursor: pointer;
}
.replay-bar .rp-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #3aa9d4, #1fb87d);
  transition: width .12s linear;
}
.replay-bar .rp-speed {
  font-family: var(--mono);
  color: var(--dim);
  min-width: 2.4rem;
  text-align: right;
}

/* 音效开关 */
.sound-toggle {
  padding: 0 .5rem;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--panel2);
  color: var(--sub);
  font-size: .66rem;
  cursor: pointer;
  transition: .16s;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.sound-toggle:hover { border-color: #3aa9d4; color: #3aa9d4; }
.sound-toggle.off { opacity: .55; }