/* Stream Boss overlay. Designed on a 1920×400 canvas; boss.js scales the stage to the source size. */

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

* { box-sizing: border-box; }

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.stage {
  /* Royal (default): gold frame, gold-to-ember-to-crimson health. */
  --font-title: "Cinzel", "Times New Roman", serif;
  --font-num: "Teko", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --name-size: 50px;
  --name-weight: 900;
  --name-track: 0.04em;
  --accent: #e8b931;
  --accent-2: #fff1b8;
  --accent-deep: #6e4c0c;
  --rim-dark: #4a3006;
  --rim: #c9961f;
  --rim-light: #fff0b3;
  --plate-a: #2a1a14;
  --plate-b: #0d0809;
  --plate-line: rgba(255, 220, 140, 0.05);
  --text: #fff6df;
  --text-dim: #e8d29c;
  --name-a: #fffaf0;
  --name-b: #ffd877;
  --hp1-a: #fff4b8; --hp1-b: #f5c842; --hp1-c: #c78a10; --hp1-d: #6e4207;
  --hp2-a: #ffd59a; --hp2-b: #ff8a1f; --hp2-c: #c24a00; --hp2-d: #5c1d00;
  --hp3-a: #ffb3bd; --hp3-b: #ff2d4a; --hp3-c: #b0001f; --hp3-d: #4d000c;
  --ghost: #fff3e8;
  --heal: #4dffa6;
  --halo-a: #ffd25e;
  --halo-b: #ff2d95;
  --rage: #ff4a1f;
  --crown-a: #fff4c2;
  --crown-b: #f2c33b;
  --crown-c: #7a520a;
  --gem-a: #ff2d6f;
  --gem-b: #39c6ff;
  --shape: circle(50% at 50% 50%);
  --card-shape: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
  --plate-shape: polygon(21px 0, calc(100% - 21px) 0, 100% 21px, 100% calc(100% - 21px), calc(100% - 21px) 100%, 21px 100%, 0 calc(100% - 21px), 0 21px);
  --fit: 1;
  --size: 1;

  position: absolute;
  left: 50%;
  width: 1920px;
  height: 400px;
  transform: translateX(-50%) scale(var(--fit));
  color: var(--text);
  font-family: var(--font-body);
}

.stage.pos-bottom { bottom: 0; transform-origin: 50% 100%; }
.stage.pos-top { top: 0; transform-origin: 50% 0; }

/* ---------- themes ---------- */

.stage.theme-inferno {
  --font-title: "Teko", "Arial Narrow", sans-serif;
  --name-size: 60px;
  --name-weight: 700;
  --name-track: 0.05em;
  --accent: #ff6a1a;
  --accent-2: #ffd9a8;
  --accent-deep: #6a1500;
  --rim-dark: #3d0a00;
  --rim: #d8430e;
  --rim-light: #ffc27a;
  --plate-a: #2a0e08;
  --plate-b: #0b0505;
  --plate-line: rgba(255, 120, 60, 0.06);
  --text: #fff1e6;
  --text-dim: #ffc9a1;
  --name-a: #fff7e0;
  --name-b: #ff9b3d;
  --hp1-a: #ffe39a; --hp1-b: #ff8c1f; --hp1-c: #c43c00; --hp1-d: #5a1400;
  --hp2-a: #ffb0a0; --hp2-b: #ff3b2a; --hp2-c: #a8100a; --hp2-d: #4a0402;
  --hp3-a: #ffc2f0; --hp3-b: #ff2fb4; --hp3-c: #a3006e; --hp3-d: #45002e;
  --halo-a: #ff8a1f;
  --halo-b: #ff2a00;
  --crown-a: #ffe0b0;
  --crown-b: #ff8a2a;
  --crown-c: #5c1500;
  --gem-a: #ffe14a;
  --gem-b: #ff2a2a;
  --shape: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.stage.theme-cyber {
  --font-title: "Orbitron", "Arial Black", sans-serif;
  --font-num: "Rajdhani", "Teko", sans-serif;
  --name-size: 42px;
  --name-weight: 900;
  --name-track: 0.06em;
  --accent: #00e5ff;
  --accent-2: #c9fbff;
  --accent-deep: #003b4d;
  --rim-dark: #2a0040;
  --rim: #ff2d95;
  --rim-light: #00e5ff;
  --plate-a: #0a0f24;
  --plate-b: #05040e;
  --plate-line: rgba(0, 229, 255, 0.07);
  --text: #eafcff;
  --text-dim: #9fe9ff;
  --name-a: #ffffff;
  --name-b: #6ff3ff;
  --hp1-a: #d6feff; --hp1-b: #00e5ff; --hp1-c: #0088b0; --hp1-d: #00304a;
  --hp2-a: #ffc6e6; --hp2-b: #ff2d95; --hp2-c: #a3005a; --hp2-d: #400024;
  --hp3-a: #ffd0d0; --hp3-b: #ff2440; --hp3-c: #a0001a; --hp3-d: #40000a;
  --halo-a: #00e5ff;
  --halo-b: #ff2d95;
  --crown-a: #e8feff;
  --crown-b: #00d2f0;
  --crown-c: #0b2a5a;
  --gem-a: #ff2d95;
  --gem-b: #faff00;
  --shape: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
  --card-shape: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px));
  --plate-shape: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 32px 100%, 0 calc(100% - 32px));
}

.stage.theme-frost {
  --name-size: 48px;
  --accent: #9fd7ff;
  --accent-2: #f0fbff;
  --accent-deep: #123a5c;
  --rim-dark: #18344f;
  --rim: #7fb8e6;
  --rim-light: #ffffff;
  --plate-a: #10223a;
  --plate-b: #060c16;
  --plate-line: rgba(180, 225, 255, 0.07);
  --text: #f2fbff;
  --text-dim: #bfe3ff;
  --name-a: #ffffff;
  --name-b: #a8dcff;
  --hp1-a: #ffffff; --hp1-b: #9fd7ff; --hp1-c: #3d8fd1; --hp1-d: #12406a;
  --hp2-a: #eadbff; --hp2-b: #a66bff; --hp2-c: #5a26b5; --hp2-d: #261052;
  --hp3-a: #ffc4cf; --hp3-b: #ff3a5c; --hp3-c: #a1001f; --hp3-d: #45000d;
  --halo-a: #bfe8ff;
  --halo-b: #7f6bff;
  --crown-a: #ffffff;
  --crown-b: #b8e2ff;
  --crown-c: #2a5a85;
  --gem-a: #7fe0ff;
  --gem-b: #c69bff;
  --shape: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.stage.theme-toxic {
  --font-title: "Rajdhani", "Arial Narrow", sans-serif;
  --name-size: 54px;
  --name-weight: 700;
  --name-track: 0.04em;
  --accent: #7cff4f;
  --accent-2: #e6ffd1;
  --accent-deep: #1d4d0a;
  --rim-dark: #1f0838;
  --rim: #8a3cff;
  --rim-light: #b8ff7a;
  --plate-a: #131a10;
  --plate-b: #07060c;
  --plate-line: rgba(124, 255, 79, 0.06);
  --text: #f1ffe8;
  --text-dim: #c4f5a8;
  --name-a: #f6ffe9;
  --name-b: #8dff5a;
  --hp1-a: #eaffc2; --hp1-b: #7cff4f; --hp1-c: #2c9a10; --hp1-d: #0f3d04;
  --hp2-a: #fff4a8; --hp2-b: #ffd21f; --hp2-c: #9a7000; --hp2-d: #3d2c00;
  --hp3-a: #ffc0ec; --hp3-b: #e81fa0; --hp3-c: #82005a; --hp3-d: #330024;
  --halo-a: #7cff4f;
  --halo-b: #a24bff;
  --crown-a: #efffd6;
  --crown-b: #86ff52;
  --crown-c: #26105a;
  --gem-a: #b14bff;
  --gem-b: #ffe94a;
  --shape: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

/* ---------- layers ---------- */

.fx {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 400px;
  z-index: 5;
}

.flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 4;
  background: radial-gradient(ellipse 46% 80% at 50% 76%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2) 45%, transparent 72%);
}
.pos-top .flash { background: radial-gradient(ellipse 46% 80% at 50% 44%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2) 45%, transparent 72%); }
.flash.go { animation: flash 0.55s ease-out; }

.rig {
  position: absolute;
  left: 50%;
  width: 1240px;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.pos-bottom .rig { bottom: 22px; transform: translateX(-50%) scale(var(--size)); transform-origin: 50% 100%; }
.pos-top .rig { top: 94px; flex-direction: column-reverse; transform: translateX(-50%) scale(var(--size)); transform-origin: 50% 0; }

.above {
  position: relative;
  height: 160px;
}

/* ---------- card ---------- */

.card {
  position: relative;
  height: 160px;
}

.card-bg {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 10px 0 rgba(4, 2, 3, 0.85)) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55));
}

.card-rim, .card-plate, .card-glow { position: absolute; }

.card-rim {
  inset: 0;
  clip-path: var(--card-shape);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 30%, rgba(0, 0, 0, 0.3)),
    linear-gradient(90deg, var(--rim-dark), var(--rim) 16%, var(--rim-light) 50%, var(--rim) 84%, var(--rim-dark));
}

.card-plate {
  inset: 4px;
  clip-path: var(--plate-shape);
  background:
    radial-gradient(ellipse 60% 120% at 18% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
    repeating-linear-gradient(-45deg, var(--plate-line) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--plate-a) 0%, var(--plate-b) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08);
}

.card-glow {
  inset: 4px;
  clip-path: var(--plate-shape);
  background: radial-gradient(ellipse 70% 140% at 50% 120%, var(--accent), transparent 60%);
  opacity: 0.12;
  transition: opacity 0.4s ease;
}
.card.phase-2 .card-glow { background: radial-gradient(ellipse 70% 140% at 50% 120%, var(--rage), transparent 60%); opacity: 0.22; }
.card.phase-3 .card-glow { background: radial-gradient(ellipse 80% 160% at 50% 120%, #ff1530, transparent 62%); animation: danger-glow 0.9s ease-in-out infinite; }

.card.shake-s { animation: shake-s 0.22s linear; }
.card.shake-m { animation: shake-m 0.32s linear; }
.card.shake-l { animation: shake-l 0.5s linear; }

/* ---------- medallion ---------- */

.medallion {
  position: absolute;
  left: -26px;
  top: -44px;
  width: 204px;
  height: 204px;
  z-index: 3;
}

.card.phase-3 .medallion { animation: tremble 0.18s linear infinite; }

.halo {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8%, var(--halo-a) 20%, transparent 32% 52%, var(--halo-b) 66%, transparent 80% 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 86%, #000 95%, transparent 97%);
  mask: radial-gradient(closest-side, transparent 84%, #000 86%, #000 95%, transparent 97%);
  animation: spin 5s linear infinite;
  filter: drop-shadow(0 0 8px var(--halo-a));
}

.halo-2 {
  inset: 6px;
  background: repeating-conic-gradient(from 0deg, var(--accent-2) 0 2deg, transparent 2deg 10deg);
  -webkit-mask: radial-gradient(closest-side, transparent 90%, #000 91%, #000 96%, transparent 97%);
  mask: radial-gradient(closest-side, transparent 90%, #000 91%, #000 96%, transparent 97%);
  opacity: 0.45;
  animation: spin 22s linear infinite reverse;
  filter: none;
}

.card.phase-2 .halo { background: conic-gradient(from 0deg, transparent 0 8%, var(--rage) 20%, transparent 32% 52%, #ffd25e 66%, transparent 80% 100%); filter: drop-shadow(0 0 10px var(--rage)); animation-duration: 2.6s; }
.card.phase-3 .halo { background: conic-gradient(from 0deg, transparent 0 6%, #ff1d3a 18%, transparent 30% 48%, #ff1d3a 64%, transparent 78% 100%); filter: drop-shadow(0 0 14px #ff1d3a); animation-duration: 1.4s; }

.frame {
  position: absolute;
  inset: 20px;
  padding: 7px;
  clip-path: var(--shape);
  background:
    linear-gradient(160deg, var(--rim-light) 0%, var(--rim) 38%, var(--rim-dark) 70%, var(--rim) 100%);
}

.frame-inner {
  position: relative;
  width: 100%;
  height: 100%;
  clip-path: var(--shape);
  background: #120c0c;
  overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.6);
}

.frame-inner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.frame-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 32%, transparent 52%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

.hurt {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 40, 60, 0.75) 60%, rgba(120, 0, 10, 0.8));
  mix-blend-mode: screen;
  z-index: 1;
}

/* Heal glow lives on its own layer so it never masks the hit flash on .hurt. */
.frame-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(220, 255, 235, 0.9), rgba(60, 255, 150, 0.5) 60%, transparent);
}

.medallion.hit .frame { animation: frame-hit 0.32s linear; }
.medallion.hit .hurt { animation: hurt 0.36s ease-out; }
.medallion.heal .frame-inner::before { animation: hurt 0.7s ease-out; }

.cracks {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 2;
}
.cracks svg { width: 100%; height: 100%; }
.cracks path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  filter: drop-shadow(0 0 3px #fff);
}
.medallion.dead .cracks { opacity: 1; }
.medallion.dead .cracks path { animation: crack 0.35s ease-out forwards; }
.medallion.dead .frame-inner img { filter: grayscale(1) brightness(0.7) contrast(1.2); transition: filter 0.3s ease; }
.medallion.dead .frame { animation: frame-hit 0.5s linear; }

.medallion.reveal .frame { animation: reveal 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); }

.slash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 14px;
  margin: -7px 0 0 -150px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 18%, #fff 50%, var(--accent-2) 70%, transparent);
  box-shadow: 0 0 16px 4px rgba(255, 255, 255, 0.55);
  opacity: 0;
  z-index: 4;
  transform: rotate(var(--ang, -30deg)) scaleX(0);
}
.slash.go { animation: slash 0.3s ease-out; }
.slash.crit { height: 22px; margin-top: -11px; background: linear-gradient(90deg, transparent, #fff 30%, #ffe14a 55%, #ff8a1f 75%, transparent); box-shadow: 0 0 24px 8px rgba(255, 210, 80, 0.7); }

.bubble {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.75) 0 6%, transparent 18%),
    radial-gradient(circle, rgba(120, 200, 255, 0.05) 50%, rgba(110, 190, 255, 0.35) 68%, rgba(190, 235, 255, 0.95) 70.5%, rgba(120, 200, 255, 0.25) 72%, transparent 73%);
  z-index: 5;
}
.bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(255, 255, 255, 0.6) 70%, transparent 80%);
  -webkit-mask: radial-gradient(closest-side, transparent 92%, #000 95%, transparent 99%);
  mask: radial-gradient(closest-side, transparent 92%, #000 95%, transparent 99%);
  animation: spin 2.4s linear infinite;
}
.card.shielded .bubble { opacity: 1; transform: scale(1); animation: bubble 1.6s ease-in-out infinite; }
.medallion.blocked .bubble { animation: bubble-hit 0.3s ease-out; }

.crown-wrap {
  position: absolute;
  left: 50%;
  top: -44px;
  width: 118px;
  margin-left: -59px;
  z-index: 6;
  transform-origin: 50% 100%;
  animation: bob 3.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(255, 210, 90, 0.35));
}
.crown { display: block; width: 100%; height: auto; overflow: visible; }
.crown stop:nth-of-type(1) { stop-color: var(--crown-a); }
.crown stop:nth-of-type(2) { stop-color: var(--crown-b); }
.crown stop:nth-of-type(3) { stop-color: var(--crown-c); }
.crown > path:first-of-type, .crown > rect { fill: url(#crown-gold); stroke: var(--crown-c); stroke-width: 3; stroke-linejoin: round; }
.crown > circle:nth-of-type(-n+3) { fill: var(--crown-a); }
.crown > circle:nth-of-type(4) { fill: var(--gem-a); stroke: var(--crown-c); stroke-width: 2; }
.crown > circle:nth-of-type(n+5) { fill: var(--gem-b); stroke: var(--crown-c); stroke-width: 2; }
.crown > path:last-of-type { stroke: rgba(255, 255, 255, 0.6); stroke-width: 3; stroke-linecap: round; fill: none; }

.medallion.dead .crown-wrap { animation: crown-fall 0.9s cubic-bezier(0.5, 0, 0.9, 0.6) forwards; }
.medallion.reveal .crown-wrap { animation: crown-drop 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) 0.15s backwards, bob 3.2s ease-in-out 1.1s infinite; }

.plat {
  position: absolute;
  left: 50%;
  bottom: -2px;
  z-index: 7;
  transform: translateX(-50%) skewX(-12deg);
  padding: 3px 12px 1px;
  font-family: "Teko", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: #fff;
  background: #9146ff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.plat.youtube { background: #ff0033; }
.plat.kick { background: #53fc18; color: #062006; }
.plat.tip { background: #e8b931; color: #1a1208; }
.plat.none { display: none; }

/* ---------- body ---------- */

/* Rows add up to the 148px inside the card: 24 + 54 + 35 + 26 + 3 gaps of 3px. */
.body {
  position: absolute;
  inset: 6px 30px 6px 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  z-index: 2;
}

.body > * { flex-shrink: 0; }

.row-top, .row-name, .row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.row-name {
  height: 54px;
  overflow: hidden;
}

.row-top { height: 24px; }

.meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  white-space: nowrap;
}

.round {
  padding: 3px 10px 0;
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--plate-b);
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  transform: skewX(-12deg);
}

.epithet {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
}

.reign {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}
.reign svg { width: 17px; height: 17px; margin-top: -3px; }
.reign b { font-weight: 600; min-width: 46px; }

.chips {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px 0 3px;
  border-radius: 12px;
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  animation: chip-in 0.35s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.chip svg { width: 18px; height: 18px; flex: 0 0 auto; }
.chip .t { padding-top: 2px; }
.chip b { font-weight: 700; color: rgba(255, 255, 255, 0.75); padding-top: 2px; }
.chip.shield { background: linear-gradient(90deg, rgba(60, 150, 255, 0.55), rgba(60, 150, 255, 0.2)); box-shadow: inset 0 0 0 1px rgba(150, 210, 255, 0.7), 0 0 12px rgba(80, 170, 255, 0.5); padding-left: 8px; }
.chip.power { background: linear-gradient(90deg, rgba(255, 210, 40, 0.5), rgba(160, 80, 255, 0.25)); box-shadow: inset 0 0 0 1px rgba(255, 220, 90, 0.75), 0 0 12px rgba(255, 200, 40, 0.45); }
.chip.mark { background: linear-gradient(90deg, rgba(255, 40, 70, 0.5), rgba(255, 40, 70, 0.15)); box-shadow: inset 0 0 0 1px rgba(255, 120, 140, 0.75); }
.chip.paused { background: rgba(160, 160, 170, 0.35); padding-left: 8px; }
.chip.rage { background: linear-gradient(90deg, rgba(255, 90, 20, 0.6), rgba(255, 90, 20, 0.1)); box-shadow: inset 0 0 0 1px rgba(255, 160, 90, 0.7); padding-left: 8px; letter-spacing: 0.08em; }
.chip.stand { background: linear-gradient(90deg, rgba(255, 20, 50, 0.75), rgba(255, 20, 50, 0.15)); box-shadow: inset 0 0 0 1px rgba(255, 140, 150, 0.8), 0 0 14px rgba(255, 20, 50, 0.6); padding-left: 8px; letter-spacing: 0.08em; animation: chip-in 0.35s cubic-bezier(0.2, 1.5, 0.4, 1), stand 0.8s ease-in-out infinite; }

.name {
  min-width: 0;
  font-family: var(--font-title);
  font-size: var(--name-size);
  font-weight: var(--name-weight);
  letter-spacing: var(--name-track);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 2px 2px 0;
  background: linear-gradient(180deg, var(--name-a) 30%, var(--name-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.75)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.4));
}
.name.swap { animation: name-in 0.6s cubic-bezier(0.2, 1.2, 0.4, 1); }

.hp-read {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 auto;
  font-family: var(--font-num);
  line-height: 1;
  white-space: nowrap;
}
.hp-now { font-size: 46px; font-weight: 700; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.7); font-variant-numeric: tabular-nums; }
.hp-max { font-size: 28px; font-weight: 600; color: var(--text-dim); opacity: 0.85; }
.hp-pct {
  align-self: center;
  padding: 4px 8px 1px;
  font-size: 22px;
  font-weight: 600;
  color: var(--plate-b);
  background: var(--accent);
  transform: skewX(-12deg);
}
.card.phase-2 .hp-pct { background: var(--hp2-b); color: #fff; }
.card.phase-3 .hp-pct { background: var(--hp3-b); color: #fff; }

/* ---------- health bar ---------- */

.bar {
  position: relative;
  height: 34px;
  margin: 1px 6px 0 10px;
}

.bar > div:not(.nums) {
  position: absolute;
  transform: skewX(-20deg);
}

.bar-track {
  inset: 0;
  background: linear-gradient(180deg, #050304, #1a1012 60%, #0a0607);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px rgba(0, 0, 0, 0.7), 0 0 0 3px var(--rim-dark);
}

.bar-ghost, .bar-heal, .bar-fill {
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(100% - 8px);
  transform-origin: 0 50%;
}

.bar-ghost {
  background: linear-gradient(180deg, #fff, var(--ghost) 50%, #ffb0a0);
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.45s;
}

.bar-heal {
  background: linear-gradient(180deg, #e2ffef, var(--heal) 55%, #10a35a);
  box-shadow: 0 0 12px rgba(77, 255, 166, 0.7);
  transition: none;
}

.bar-fill {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, var(--hp1-a) 0%, var(--hp1-b) 38%, var(--hp1-c) 74%, var(--hp1-d) 100%);
  box-shadow: 0 0 18px -2px var(--hp1-b);
  transition: width 0.22s cubic-bezier(0.3, 0.8, 0.4, 1), box-shadow 0.4s ease;
}
.card.phase-2 .bar-fill {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, var(--hp2-a) 0%, var(--hp2-b) 38%, var(--hp2-c) 74%, var(--hp2-d) 100%);
  box-shadow: 0 0 18px -2px var(--hp2-b);
}
.card.phase-3 .bar-fill {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, var(--hp3-a) 0%, var(--hp3-b) 38%, var(--hp3-c) 74%, var(--hp3-d) 100%);
  box-shadow: 0 0 22px 0 var(--hp3-b);
  animation: low-hp 0.7s ease-in-out infinite;
}

.bar-fill::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  right: 0;
  width: 5px;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.85);
}

.bar-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58% 100%);
  background-size: 260% 100%;
  animation: sheen 3.4s linear infinite;
  mix-blend-mode: overlay;
}

.bar-ticks {
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 2px), rgba(0, 0, 0, 0.32) calc(5% - 2px) 5%);
}

.bar-notch {
  top: -6px;
  bottom: -6px;
  width: 3px;
  margin-left: -1px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent) 30%, var(--accent-deep));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.bar-notch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: var(--accent-2);
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 8px var(--accent);
}

.bar-shield {
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  background:
    linear-gradient(100deg, transparent 0 40%, rgba(255, 255, 255, 0.7) 50%, transparent 60% 100%) 0 0 / 260% 100%,
    repeating-linear-gradient(60deg, rgba(170, 225, 255, 0.35) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-60deg, rgba(170, 225, 255, 0.35) 0 2px, transparent 2px 14px),
    rgba(70, 160, 255, 0.28);
  box-shadow: inset 0 0 0 2px rgba(170, 225, 255, 0.95), 0 0 18px rgba(80, 170, 255, 0.8);
  animation: sheen 1.6s linear infinite;
}
.card.shielded .bar-shield { opacity: 1; }

/* Damage numbers fly off the boss into the open space above the card's left half. */
.nums {
  position: absolute;
  left: -210px;
  bottom: calc(100% + 92px);
  width: 760px;
  height: 0;
  pointer-events: none;
  z-index: 8;
}
/* At the top of the screen there is no room above the card, so numbers rise from below it. */
.pos-top .nums { bottom: auto; top: calc(100% + 110px); }

.num {
  position: absolute;
  bottom: 0;
  font-family: var(--font-num);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 3px 0 #000, 0 0 2px #000, 0 0 14px rgba(0, 0, 0, 0.7);
  transform: translateX(-50%);
  animation: num-rise 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.num small { display: block; font-size: 22px; letter-spacing: 0.14em; text-align: center; }
.num.crit { font-size: 74px; color: #ffe14a; text-shadow: 0 4px 0 #6b2a00, 0 0 18px rgba(255, 180, 40, 0.9); animation: num-crit 1.3s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.num.crit small { color: #fff3b0; }
.num.paid { font-size: 60px; color: var(--accent-2); }
.num.heal { color: #6dffb4; text-shadow: 0 3px 0 #003d1c, 0 0 14px rgba(60, 255, 150, 0.7); }
.num.block { font-size: 40px; color: #b8e2ff; text-shadow: 0 3px 0 #0b2a50, 0 0 14px rgba(90, 180, 255, 0.9); letter-spacing: 0.08em; }

/* ---------- bottom row ---------- */

.row-bottom { height: 26px; }

.taunt {
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
.taunt::before { content: "\201C"; margin-right: 2px; color: var(--accent); }
.taunt::after { content: "\201D"; margin-left: 2px; color: var(--accent); }
.taunt.out { opacity: 0; transform: translateY(6px); }

.mvp {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.mvp-label {
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  padding-top: 2px;
}

.mvp-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px 0 2px;
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: chip-in 0.35s ease;
}
.mvp-row img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--medal); }
.mvp-row span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.mvp-row b { font-family: var(--font-num); font-size: 21px; font-weight: 600; color: var(--medal); padding-top: 2px; }
.mvp-row.r1 { --medal: #ffd24a; }
.mvp-row.r2 { --medal: #d9e2ee; }
.mvp-row.r3 { --medal: #e0925a; }

/* ---------- feed ---------- */

.feed {
  position: absolute;
  right: 6px;
  bottom: 10px;
  width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  transition: opacity 0.3s ease;
}
.pos-top .feed { bottom: auto; top: 6px; gap: 4px; flex-direction: column-reverse; }
.above.banner-on .feed { opacity: 0; }

.feed-item {
  --plat: #9146ff;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  max-width: 560px;
  padding: 0 16px 0 5px;
  background: linear-gradient(90deg, rgba(10, 7, 10, 0.55), rgba(10, 7, 10, 0.92) 30%);
  border-right: 4px solid var(--plat);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
  white-space: nowrap;
  animation: feed-in 0.38s cubic-bezier(0.2, 1.3, 0.4, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.feed-item.youtube { --plat: #ff0033; }
.feed-item.kick { --plat: #53fc18; }
.feed-item.tip { --plat: #e8b931; }
.feed-item.out { animation: feed-out 0.45s ease forwards; }

.feed-item img {
  width: 36px;
  height: 36px;
  margin-left: 10px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--plat);
  flex: 0 0 auto;
}
.feed-item .who {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  padding-top: 4px;
  letter-spacing: 0.02em;
  color: #fff;
}
.feed-item svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent); }
.feed-item .amt {
  font-family: var(--font-num);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  padding-top: 4px;
  color: var(--accent-2);
}
.feed-item .tag {
  padding: 3px 7px 1px;
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--plate-b);
  background: var(--accent);
  transform: skewX(-12deg);
}
.feed-item.crit { background: linear-gradient(90deg, rgba(60, 30, 0, 0.6), rgba(40, 18, 0, 0.94) 30%); }
.feed-item.crit .amt { color: #ffe14a; text-shadow: 0 0 10px rgba(255, 200, 40, 0.8); }
.feed-item.crit .tag { background: #ffe14a; }
.feed-item.block svg, .feed-item.block .amt { color: #9fd7ff; }
.feed-item.block .tag, .feed-item.shield .tag { background: #9fd7ff; }
.feed-item.heal svg, .feed-item.heal .amt, .feed-item.selfheal svg, .feed-item.selfheal .amt { color: #6dffb4; }
.feed-item.heal .tag, .feed-item.selfheal .tag { background: #6dffb4; }
.feed-item.shield svg, .feed-item.shield .amt { color: #9fd7ff; }
.feed-item.power svg, .feed-item.power .amt { color: #ffd84a; }
.feed-item.power .tag { background: #ffd84a; }
.feed-item.mark svg, .feed-item.mark .amt { color: #ff5a78; }
.feed-item.mark .tag { background: #ff5a78; color: #fff; }

/* ---------- banner ---------- */

.banner {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 980px;
  margin-left: -490px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
.pos-top .banner { bottom: auto; top: 12px; }
.banner.show { visibility: visible; animation: banner-in 0.6s cubic-bezier(0.2, 1.2, 0.4, 1) forwards; }
.banner.hide { visibility: visible; animation: banner-out 0.5s ease forwards; }

.banner-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.6);
}
.banner-kicker::before, .banner-kicker::after {
  content: "";
  width: 90px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.banner-kicker::after { background: linear-gradient(90deg, var(--accent), transparent); }

.banner-title {
  margin-top: 4px;
  font-family: var(--font-title);
  font-size: 78px;
  font-weight: var(--name-weight);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(180deg, #fff 20%, var(--accent-2) 55%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 0 22px rgba(0, 0, 0, 0.6));
}
.theme-cyber .banner-title { font-size: 60px; }

.banner-sub {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.8);
}
.banner-sub b { color: var(--accent); }

/* ---------- K.O. ---------- */

.ko {
  position: absolute;
  left: 50%;
  bottom: 150px;
  width: 0;
  height: 0;
  z-index: 6;
  visibility: hidden;
}
.pos-top .ko { bottom: auto; top: 176px; }
.ko.go { visibility: visible; }

.ko-text {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  font-family: "Teko", var(--font-title), sans-serif;
  font-size: 230px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(180deg, #ffffff 10%, #ffe27a 45%, #ff3b30 75%, #7a0010 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 0 #000) drop-shadow(0 0 30px rgba(255, 60, 40, 0.75));
  opacity: 0;
}
.ko-text.small { font-size: 150px; }
.ko.go .ko-text { animation: ko-slam 1.5s cubic-bezier(0.2, 1, 0.3, 1) forwards; }

.ko-ring {
  position: absolute;
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 8px solid #fff;
  box-shadow: 0 0 30px var(--accent), inset 0 0 30px var(--accent);
  opacity: 0;
}
.ko.go .ko-ring { animation: ring 0.9s ease-out forwards; }
.ko.go .ko-ring-2 { animation: ring 1.1s ease-out 0.12s forwards; border-color: var(--accent); }

/* ---------- note ---------- */

.sb-note {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #ffd0e6;
  background: rgba(20, 8, 16, 0.85);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9;
  white-space: nowrap;
}
.pos-top .sb-note { bottom: auto; top: 4px; }
.sb-note.show { opacity: 1; }

/* ---------- toggles ---------- */

.stage.no-feed .feed,
.stage.no-nums .nums,
.stage.no-mvp .mvp { display: none; }
.stage.no-fx .fx, .stage.no-fx .flash { display: none; }
.stage.no-fx .card { animation: none !important; }

/* ---------- keyframes ---------- */

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes bob {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-6px); }
}

@keyframes crown-fall {
  0% { transform: rotate(-7deg); opacity: 1; }
  25% { transform: translate(10px, -26px) rotate(14deg); opacity: 1; }
  100% { transform: translate(60px, 240px) rotate(110deg); opacity: 0; }
}

@keyframes crown-drop {
  0% { transform: translateY(-260px) rotate(-30deg) scale(1.4); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(0) rotate(-7deg) scale(1); opacity: 1; }
}

@keyframes frame-hit {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-7px, 3px) rotate(-2deg); }
  40% { transform: translate(6px, -3px) rotate(2deg); }
  60% { transform: translate(-4px, 2px); }
  80% { transform: translate(3px, -1px); }
  100% { transform: translate(0, 0); }
}

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

@keyframes crack { to { stroke-dashoffset: 0; } }

@keyframes reveal {
  0% { transform: scale(0.2) rotate(-20deg); filter: brightness(3); }
  60% { transform: scale(1.12) rotate(3deg); filter: brightness(1.4); }
  100% { transform: scale(1) rotate(0); filter: none; }
}

@keyframes slash {
  0% { opacity: 0; transform: rotate(var(--ang, -30deg)) scaleX(0) translateX(-60px); }
  30% { opacity: 1; transform: rotate(var(--ang, -30deg)) scaleX(1) translateX(0); }
  100% { opacity: 0; transform: rotate(var(--ang, -30deg)) scaleX(1.1) translateX(60px); }
}

@keyframes bubble {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes bubble-hit {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.1); filter: brightness(2.2); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes tremble {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.5px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(1.5px, 1px); }
}

@keyframes shake-s {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-3px, 1px); }
  66% { transform: translate(3px, -1px); }
}

@keyframes shake-m {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-8px, 3px) rotate(-0.4deg); }
  40% { transform: translate(7px, -3px) rotate(0.4deg); }
  60% { transform: translate(-5px, 2px); }
  80% { transform: translate(4px, -1px); }
}

@keyframes shake-l {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-16px, 6px) rotate(-0.8deg); }
  25% { transform: translate(14px, -6px) rotate(0.8deg); }
  40% { transform: translate(-11px, 4px) rotate(-0.5deg); }
  55% { transform: translate(9px, -3px) rotate(0.4deg); }
  70% { transform: translate(-6px, 2px); }
  85% { transform: translate(3px, -1px); }
}

@keyframes flash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes danger-glow {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.42; }
}

@keyframes low-hp {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.45); }
}

@keyframes sheen {
  0% { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

@keyframes stand {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

@keyframes chip-in {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes name-in {
  0% { opacity: 0; transform: translateX(-24px); letter-spacing: 0.4em; }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes num-rise {
  0% { opacity: 0; transform: translate(-50%, 16px) scale(1.7); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(0.92); }
}

@keyframes num-crit {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(2.6) rotate(-8deg); }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-4deg); }
  18% { transform: translate(calc(-50% - 6px), 0) scale(1.04) rotate(-4deg); }
  24% { transform: translate(calc(-50% + 6px), 0) scale(1) rotate(-4deg); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -80px) scale(0.95) rotate(-4deg); }
}

@keyframes feed-in {
  0% { opacity: 0; transform: translateX(60px) scaleY(0.4); }
  100% { opacity: 1; transform: translateX(0) scaleY(1); }
}

@keyframes feed-out {
  0% { opacity: 1; transform: translateX(0); height: 44px; }
  60% { opacity: 0; transform: translateX(40px); height: 44px; }
  100% { opacity: 0; transform: translateX(40px); height: 0; margin-top: -6px; }
}

@keyframes banner-in {
  0% { opacity: 0; transform: scale(1.5); filter: blur(10px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes banner-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}

@keyframes ko-slam {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(3.2) rotate(-6deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(0.92) rotate(-3deg); }
  18% { transform: translate(-50%, -50%) scale(1.04) rotate(-3deg); }
  24% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25) rotate(-3deg); filter: blur(6px); }
}

@keyframes ring {
  0% { opacity: 1; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(9); border-width: 1px; }
}