/*
 * CS2 式击杀卡牌。预览页和将来的 shell.html 共用这一份。
 * 1～5 杀扇形叠牌；超过 5 杀只留一张并显示总数。
 *
 * 徽标现为 56hy × 224hy。牌宽略小于圆徽一半，底角标露出约 2/3。
 */

#hud-root {
  --kc-stage-bottom: calc(37 * var(--hy, 1px));
  --kc-foot: calc(-2 * var(--hy, 1px));
  --kc-card-w: calc(23 * var(--hy, 1px));
  --kc-card-h: calc(23 * 109 / 82 * var(--hy, 1px));
}

#web-killcards {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 观战：牌压在底卡上，仍被头像盖住下半 */
#hud-root.is-spec #web-killcards {
  z-index: 2;
}

/* 枢轴更深地落在徽标里，当前牌只露出右下角标约 2/3 */
.kc-stage {
  position: absolute;
  left: 50%;
  bottom: var(--kc-stage-bottom);
  z-index: 1;
  width: 0;
  height: 0;
}

.kc-rack {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
}

/* 和卡牌同宽、同底；高度为牌高的 4 倍 */
.kc-beam {
  position: absolute;
  left: 0;
  bottom: var(--kc-foot);
  z-index: 0;
  width: var(--kc-card-w);
  height: calc(var(--kc-card-h) * 4);
  margin-left: calc(var(--kc-card-w) / -2);
  transform-origin: 50% 100%;
  transform: rotate(var(--kc-rot, 0deg));
  background: url("killcards/Vector.svg") center bottom / 100% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0%,
    rgba(0, 0, 0, 0.95) 10%,
    rgba(0, 0, 0, 0.35) 42%,
    rgba(0, 0, 0, 0.08) 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to top,
    #000 0%,
    rgba(0, 0, 0, 0.95) 10%,
    rgba(0, 0, 0, 0.35) 42%,
    rgba(0, 0, 0, 0.08) 72%,
    transparent 100%
  );
}

.kc-beam::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("killcards/Vector.svg") center / 100% 100% no-repeat;
  opacity: 0.45;
  filter: blur(0.6px);
}

.kc-beam.is-flash {
  animation: kc-beam 0.7s ease-out both;
}

.kc-beam.is-ace {
  animation: kc-beam 1.1s ease-out both;
}

/* 底部扫光：基线对齐徽标圆心，和卡牌/竖光一样在阵营徽标后面 */
.kc-floor {
  position: absolute;
  left: 50%;
  bottom: calc(28 * var(--hy, 1px));
  z-index: 0;
  width: calc(112 * var(--hy, 1px));
  height: calc(13 * var(--hy, 1px));
  margin-left: calc(-56 * var(--hy, 1px));
  background: url("killcards/bottom.svg") center bottom / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}

.kc-floor.is-flash {
  animation: kc-floor 0.7s ease-out both;
}

.kc-floor.is-ace {
  animation: kc-floor 1.1s ease-out both;
}

.kc-card {
  position: absolute;
  left: 0;
  bottom: var(--kc-foot);
  z-index: 1;
  width: var(--kc-card-w);
  height: var(--kc-card-h);
  margin-left: calc(var(--kc-card-w) / -2);
  transform-origin: 50% 100%;
  opacity: 0;
}

.kc-card.is-on {
  opacity: 1;
}

.kc-card.is-in {
  animation: kc-slide 0.28s cubic-bezier(0.16, 0.84, 0.32, 1) both;
}

/* 出场时整牌发亮，光从牌身往上辐射进竖光 */
.kc-card.is-in::before {
  content: "";
  position: absolute;
  inset: 8% 11%;
  border-radius: 3px;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    0 0 calc(3 * var(--hy, 1px)) calc(1 * var(--hy, 1px)) rgba(255, 232, 170, 0.95),
    0 0 calc(10 * var(--hy, 1px)) calc(3 * var(--hy, 1px)) rgba(255, 216, 125, 0.55),
    0 0 calc(18 * var(--hy, 1px)) calc(6 * var(--hy, 1px)) rgba(255, 197, 63, 0.28);
  animation: kc-body-glow 0.7s ease-out both;
}

.kc-card.is-in::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 0;
  width: 170%;
  height: 260%;
  margin-left: -85%;
  pointer-events: none;
  transform-origin: 50% 85%;
  background: radial-gradient(
    ellipse 46% 58% at 50% 80%,
    rgba(255, 232, 170, 0.8) 0%,
    rgba(255, 216, 125, 0.38) 26%,
    rgba(255, 197, 63, 0.12) 50%,
    transparent 70%
  );
  animation: kc-radiate 0.7s ease-out both;
}

.kc-card.is-in .kc-num {
  animation: kc-num-glow 0.7s ease-out both;
}

.kc-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.kc-cover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4%;
}

.kc-card.is-art .kc-cover {
  display: none;
}

.kc-num {
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-weight: 600;
  font-size: calc(12 * var(--hy, 1px));
  line-height: 1;
  letter-spacing: 0.02em;
  color: #dfb55a;
  text-shadow: 0 0 calc(2 * var(--hy, 1px)) rgba(223, 181, 90, 0.4);
}

.kc-num.is-long {
  font-size: calc(9 * var(--hy, 1px));
  font-weight: 500;
  letter-spacing: 0;
}

/* CT：现有金色 SVG 先用色相转蓝，不必另出一套图 */
#hud-root.is-ct .kc-num {
  color: #7eb6d9;
  text-shadow: 0 0 calc(3 * var(--hy, 1px)) rgba(126, 182, 217, 0.5);
}

#hud-root.is-ct .kc-card.is-in .kc-num {
  animation-name: kc-num-glow-ct;
}

#hud-root.is-ct .kc-art,
#hud-root.is-ct .kc-beam,
#hud-root.is-ct .kc-floor,
#hud-root.is-ct .kc-card.is-in::before,
#hud-root.is-ct .kc-card.is-in::after {
  filter: hue-rotate(168deg) saturate(0.72) brightness(1.06);
}

.kc-card.is-ace.is-in {
  animation: kc-slide 0.28s cubic-bezier(0.16, 0.84, 0.32, 1) both,
    kc-ace 1s ease-out 0.12s both;
}

.kc-card.is-ace.is-in::before,
.kc-card.is-ace.is-in::after,
.kc-card.is-ace.is-in .kc-num {
  animation-duration: 1.1s;
}

@keyframes kc-slide {
  from {
    opacity: 0;
    transform: rotate(var(--kc-rot, 0deg)) translateY(calc(31 * var(--hy, 1px)));
  }
  to {
    opacity: 1;
    transform: rotate(var(--kc-rot, 0deg)) translateY(0);
  }
}

@keyframes kc-ace {
  0% { filter: brightness(1.8); }
  35% { filter: brightness(1.15); }
  100% { filter: brightness(1); }
}

@keyframes kc-body-glow {
  0% { opacity: 0; }
  16% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes kc-radiate {
  0% { opacity: 0; transform: scaleY(0.55); }
  16% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1.18); }
}

@keyframes kc-num-glow {
  0%, 16% {
    text-shadow:
      0 0 calc(4 * var(--hy, 1px)) rgba(255, 232, 170, 0.95),
      0 0 calc(10 * var(--hy, 1px)) rgba(255, 216, 125, 0.7);
  }
  100% {
    text-shadow: 0 0 calc(2 * var(--hy, 1px)) rgba(223, 181, 90, 0.4);
  }
}

@keyframes kc-num-glow-ct {
  0%, 16% {
    text-shadow:
      0 0 calc(4 * var(--hy, 1px)) rgba(180, 230, 255, 0.95),
      0 0 calc(10 * var(--hy, 1px)) rgba(126, 182, 217, 0.7);
  }
  100% {
    text-shadow: 0 0 calc(3 * var(--hy, 1px)) rgba(126, 182, 217, 0.5);
  }
}

@keyframes kc-beam {
  0% { opacity: 0; transform: rotate(var(--kc-rot, 0deg)) translateY(calc(10 * var(--hy, 1px))); }
  18% { opacity: 0.95; transform: rotate(var(--kc-rot, 0deg)) translateY(0); }
  100% { opacity: 0; transform: rotate(var(--kc-rot, 0deg)) translateY(calc(-8 * var(--hy, 1px))); }
}

@keyframes kc-floor {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

#hud-root.is-spec .kc-floor {
  display: none;
}

/* CS2 底栏徽标本身略透；未选队时仍由 shell 的 opacity:0 藏掉 */
#hud-root.is-ct .k-bot,
#hud-root.is-t .k-bot,
#hud-root .k-bot.is-ct,
#hud-root .k-bot.is-t {
  opacity: 0.9;
  overflow: visible;
}

#hud-root .k-bot::after,
#hud-root .k-spec-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.28) 38%,
    transparent 72%
  );
  opacity: 0;
  mix-blend-mode: screen;
}

#hud-root .k-bot::after {
  width: calc(58 * var(--hy, 1px));
  height: calc(58 * var(--hy, 1px));
  margin: calc(-29 * var(--hy, 1px)) 0 0 calc(-29 * var(--hy, 1px));
}

#hud-root .k-spec-avatar::after {
  width: 130%;
  height: 130%;
  margin: -65% 0 0 -65%;
}

#hud-root .k-bot.is-kill-flash,
#hud-root .k-spec-avatar.is-kill-flash {
  animation: kc-bot-flash 0.7s ease-out both;
}

#hud-root .k-bot.is-kill-ace,
#hud-root .k-spec-avatar.is-kill-ace {
  animation: kc-bot-flash 1.1s ease-out both;
}

#hud-root .k-bot.is-kill-flash::after,
#hud-root .k-spec-avatar.is-kill-flash::after {
  animation: kc-bot-glow 0.7s ease-out both;
}

#hud-root .k-bot.is-kill-ace::after,
#hud-root .k-spec-avatar.is-kill-ace::after {
  animation: kc-bot-glow 1.1s ease-out both;
}

@keyframes kc-bot-flash {
  0% { filter: none; }
  18% { filter: brightness(1.85) saturate(0.25); }
  100% { filter: none; }
}

@keyframes kc-bot-glow {
  0% { opacity: 0; transform: scale(0.86); }
  18% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12); }
}