/* 战斗反馈：特效全部位于独立层，不遮挡点击与战斗信息。 */
.flying-card {
  position: fixed !important;
  z-index: 120;
  min-height: 0;
  margin: 0;
  pointer-events: none;
  opacity: 1 !important;
  transform-origin: center;
  box-shadow: 0 0 0 2px #ffe6a7, 0 0 24px rgb(255 207 105 / 65%), 0 18px 34px rgb(0 0 0 / 45%);
  will-change: transform, opacity;
}

.combat-float,
.combat-impact,
.sugar-smile-burst {
  position: fixed;
  z-index: 125;
  pointer-events: none;
}

.combat-float {
  width: max-content;
  max-width: min(280px, 82vw);
  color: #ffb090;
  font-family: var(--font-display, sans-serif);
  font-size: 2rem;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 2px 0 #35110b, 2px 0 0 #35110b, -2px 0 0 #35110b, 0 -1px 0 #35110b, 0 4px 12px #000;
  transform: translate(-50%, 0);
  white-space: nowrap;
}

.combat-float--block {
  color: #bceeff;
  font-size: 1.08rem;
  text-shadow: 0 2px 0 #0c2a40, 1px 0 0 #0c2a40, -1px 0 0 #0c2a40, 0 3px 10px #000;
}

.combat-float--heal { color: #b1ffc2; font-size: 1.3rem; }
.combat-float--critical { color: #ffe494; font-size: 2.25rem; }
.combat-float--weak,
.combat-float--grievance { color: #f1b7ef; font-size: 1rem; }
.combat-float--energy { color: #ffe08c; font-size: 1.1rem; }

.combat-impact {
  width: 126px;
  height: 126px;
  transform: translate(-50%, -50%);
}

.combat-impact--hit {
  background: radial-gradient(circle, #fff9d8 0 5%, #ffe3a3 8% 12%, rgb(255 164 76 / 85%) 22%, rgb(255 101 50 / 10%) 65%, transparent 72%);
  clip-path: polygon(50% 0, 57% 30%, 77% 12%, 70% 38%, 100% 34%, 76% 52%, 97% 72%, 67% 66%, 69% 100%, 50% 75%, 29% 97%, 33% 66%, 0 74%, 24% 52%, 3% 32%, 33% 37%, 26% 10%, 43% 30%);
  filter: drop-shadow(0 0 12px #ffb655);
}

.combat-impact--shield {
  width: 114px;
  height: 114px;
  border: 4px solid #c0f4ff;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 35%, rgb(104 209 255 / 16%) 65%, rgb(184 244 255 / 40%) 68%, transparent 74%);
  box-shadow: 0 0 20px rgb(111 214 255 / 60%), inset 0 0 20px rgb(111 214 255 / 40%);
}

.sugar-smile-burst {
  display: grid;
  width: min(300px, 82vw);
  height: 210px;
  place-items: center;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgb(255 239 169 / 50%), rgb(254 161 214 / 25%) 42%, transparent 69%);
}

.sugar-smile-burst::before {
  position: absolute;
  inset: 20px;
  background: linear-gradient(145deg, rgb(255 243 170 / 75%), rgb(244 148 203 / 70%));
  clip-path: polygon(50% 0, 58% 30%, 87% 10%, 72% 38%, 100% 50%, 72% 60%, 91% 90%, 60% 74%, 50% 100%, 40% 74%, 10% 92%, 26% 61%, 0 50%, 27% 38%, 10% 10%, 41% 28%);
  content: "";
}

.sugar-smile-burst strong {
  position: relative;
  color: #fff6cc;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 950;
  text-shadow: 3px 3px 0 #9e4060, -2px -2px 0 #9e4060, -2px 2px 0 #9e4060, 2px -2px 0 #9e4060, 0 8px 20px #5c183b;
}

#enemy-block:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #8bdfff;
  color: #e0f8ff;
  background: linear-gradient(135deg, #285670, #15394f);
  box-shadow: inset 0 1px rgb(255 255 255 / 18%), 0 0 13px rgb(99 205 255 / 27%);
  font-size: .8rem;
  font-weight: 900;
}

#enemy-block::before {
  width: 13px;
  height: 15px;
  background: #a9e9ff;
  clip-path: polygon(50% 0, 100% 18%, 92% 66%, 50% 100%, 8% 66%, 0 18%);
  content: "";
}

#enemy-placeholder.has-block::before {
  position: absolute;
  z-index: 1;
  inset: 5px;
  border: 2px solid rgb(139 225 255 / 65%);
  border-radius: inherit;
  background: linear-gradient(125deg, rgb(149 227 255 / 17%), transparent 35% 65%, rgb(118 213 255 / 13%));
  box-shadow: inset 0 0 18px rgb(99 205 255 / 25%);
  content: "";
  pointer-events: none;
}

#player-block.has-block { color: #b4e9ff; font-weight: 800; }
#player-health-bar { grid-column: 1 / -1; width: 100%; }
#player-health-fill { transition: width 330ms cubic-bezier(.2,.7,.3,1); }
#player-health-bar.is-low-health #player-health-fill {
  background: linear-gradient(90deg, #a72b3c, #fa7c70);
}

.battle-card.is-entering {
  animation: combat-card-deal 290ms cubic-bezier(.18,.8,.25,1) backwards;
  animation-delay: calc(var(--deal-index, 0) * 38ms);
}

.battle-card:disabled:not(.flying-card) {
  cursor: wait;
  opacity: .78;
}

#sugar-smile-button.is-ready {
  border-color: #ffe4a3;
  box-shadow: 0 0 0 2px rgb(255 202 140 / 20%), 0 0 20px rgb(235 139 197 / 38%);
}

.pile-chip[role="button"] { cursor: pointer; transition: border-color 140ms, background 140ms; }
.pile-chip[role="button"]:hover { border-color: rgb(242 197 92 / 65%); background: rgb(125 84 40 / 28%); }
.pile-chip[role="button"]:focus-visible { outline: 2px solid #ffe3a4; outline-offset: 3px; }
.pile-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 12px; }
.pile-empty-state { grid-column: 1 / -1; margin: 0; padding: 28px 14px; color: var(--color-muted); text-align: center; }

@keyframes combat-card-deal {
  from { opacity: 0; transform: translateY(28px) rotate(5deg) scale(.93); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .battle-card.is-entering { animation: none; }
  #player-health-fill,
  #enemy-health-fill { transition: none; }
  #enemy-placeholder.is-hit,
  #player-area.is-hit { animation: none; }
  .combat-impact { display: none; }
}