/* 漫画质感与动画 */
@keyframes urgent {
  from {
    transform: skew(-6deg) scale(1);
  }
  to {
    transform: skew(-6deg) scale(1.08);
  }
}

@keyframes meterPulse {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.7);
  }
}

@keyframes firePop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.22) translateY(-3px);
    box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.6), 0 0 18px rgba(255, 209, 102, 0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes comboPop {
  0% {
    opacity: 0;
    transform: rotate(-7deg) scale(0.3);
  }
  30% {
    opacity: 1;
    transform: rotate(-7deg) scale(1.18);
  }
  70% {
    opacity: 1;
    transform: rotate(-7deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(-7deg) scale(1.05) translateY(-10px);
  }
}

@keyframes koStamp {
  0% {
    transform: translate(-50%, -50%) rotate(-4deg) scale(2.2);
    opacity: 0;
  }
  40% {
    transform: translate(-50%, -50%) rotate(-4deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(-4deg) scale(1);
    opacity: 1;
  }
}

@keyframes hurtFlash {
  0% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
  }
}

/* ---------------- 开场 VS 分镜 ---------------- */

.cut {
  position: absolute;
  inset: 0;
  z-index: 32;
  display: none;
  overflow: hidden;
  background: #0b0b0b;
  pointer-events: auto;
}

.cut.play {
  display: block;
}

.cut::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1.3px, transparent 1.5px) 0 0 / 9px 9px;
  pointer-events: none;
}

.cut-half {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.cut-half.foe {
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, 0.55), transparent 62%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0 3px, transparent 3px 6px),
    var(--paper);
  /* 沿着斜切方向，从右上滑入 */
  transform: translate(62%, -62%);
}

.cut-half.self {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(120% 90% at 76% 82%, rgba(255, 255, 255, 0.16), transparent 62%),
    var(--red);
  /* 沿着斜切方向，从左下滑入 */
  transform: translate(-62%, 62%);
}

.cut.play .cut-half.foe {
  animation: cutInTop 0.48s cubic-bezier(0.15, 1.1, 0.3, 1) 0.04s forwards;
}

.cut.play .cut-half.self {
  animation: cutInBottom 0.48s cubic-bezier(0.15, 1.1, 0.3, 1) 0.14s forwards;
}

@keyframes cutInTop {
  to {
    transform: translate(0, 0);
  }
}

@keyframes cutInBottom {
  to {
    transform: translate(0, 0);
  }
}

/* 斜切墨线 */
.cut-line {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 3.5px),
    var(--ink) calc(50% - 3.5px),
    var(--ink) calc(50% + 3.5px),
    transparent calc(50% + 3.5px)
  );
}

.cut.play .cut-line {
  animation: cutLine 0.3s ease-out 0.5s forwards;
}

@keyframes cutLine {
  to {
    opacity: 1;
  }
}

.cut-inner {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cut-half.foe .cut-inner {
  left: 9%;
  top: 18%;
  align-items: flex-start;
}

.cut-half.self .cut-inner {
  right: 9%;
  bottom: 16%;
  align-items: flex-end;
  text-align: right;
}

.cut-half.foe .cut-name {
  color: var(--ink);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.14);
}

.cut-half.self .cut-name {
  color: var(--paper);
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
}

.cut-sub {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.32em;
  opacity: 0.6;
}

.cut-name {
  font-size: clamp(28px, 8vw, 52px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cut-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  padding: 2px 6px;
  border: 2px solid currentColor;
  white-space: nowrap;
}

.cut-half.foe .cut-tag {
  color: var(--ink);
}

.cut-half.self .cut-tag {
  color: var(--paper);
}

.cut-vs {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%) scale(2.4) rotate(-10deg);
  opacity: 0;
  font-size: clamp(78px, 24vw, 150px);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: var(--yellow);
  -webkit-text-stroke: 9px var(--ink);
  paint-order: stroke fill;
  text-shadow: 9px 9px 0 rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.cut.play .cut-vs {
  animation: cutVs 0.46s cubic-bezier(0.2, 1.7, 0.4, 1) 0.42s forwards;
}

@keyframes cutVs {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.6) rotate(-14deg);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.92) rotate(-6deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(-6deg);
  }
}

.cut-hint {
  position: absolute;
  left: 6%;
  top: 3%;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(20, 20, 20, 0.45);
  font-weight: 700;
  z-index: 6;
}

/* 分屏之间的分镜线：手绘感 */
#stage::before,
#stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ink);
  z-index: 6;
  pointer-events: none;
}

#stage::before {
  top: 46%;
}

#stage::after {
  top: calc(54% - 4px);
}

/* 对手半边：边缘网点渐隐 */
.half.foe::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.16) 1.3px, transparent 1.5px) 0 0 / 9px 9px,
    radial-gradient(120% 60% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.12));
  mask-image: radial-gradient(120% 90% at 50% 45%, transparent 40%, #000 100%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, transparent 40%, #000 100%);
}

/* 自己半边：顶部/底部轻微网点压边 */
#selfHalf::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 18%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent 22%);
}

/* 屏幕弹层的漫画角标 */
.card::after {
  content: "";
  position: absolute;
  right: -14px;
  top: -14px;
  width: 46px;
  height: 46px;
  background: repeating-linear-gradient(45deg, var(--ink) 0 3px, transparent 3px 7px);
  transform: rotate(45deg);
  transform-origin: center;
  opacity: 0.25;
}

/* 按钮里的小箭头 */
.btn.big::after {
  content: " →";
  font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
  .big-text,
  .callout,
  .action-light {
    transition: none !important;
    animation: none !important;
  }
}