/* 演出（js/ui/fx.js・cutin.js）。時間は --fx-speed（演出速度の倍率）で割る */
.fx-layer, .fx-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.fx-dim-layer { z-index: 55; }
.fx-canvas { z-index: 60; }
.fx-top { z-index: 80; }
.fx-cine { z-index: 110; }
.fx-ccanvas { z-index: 5; }
.fx-cine > .fx-cn, .fx-cine > .vs { z-index: 1; }
.fx-layer > * { position: absolute; }

.fx-flash { inset: 0; opacity: 0; mix-blend-mode: screen; }
.fx-dim { inset: 0; background: rgba(2, 4, 14, .32); opacity: 0; }

/* 縁取り文字（16方向の text-shadow ＋外光） */
.fx-impact { --ow: 6px; --oc: #000; --fill: #fff; position: relative; display: inline-block; color: var(--fill); white-space: nowrap;
  font-family: var(--font-impact);
  text-shadow:
    var(--ow) 0 var(--oc), calc(var(--ow) * -1) 0 var(--oc), 0 var(--ow) var(--oc), 0 calc(var(--ow) * -1) var(--oc),
    calc(var(--ow) * .924) calc(var(--ow) * .383) var(--oc), calc(var(--ow) * .707) calc(var(--ow) * .707) var(--oc),
    calc(var(--ow) * .383) calc(var(--ow) * .924) var(--oc), calc(var(--ow) * -.383) calc(var(--ow) * .924) var(--oc),
    calc(var(--ow) * -.707) calc(var(--ow) * .707) var(--oc), calc(var(--ow) * -.924) calc(var(--ow) * .383) var(--oc),
    calc(var(--ow) * -.924) calc(var(--ow) * -.383) var(--oc), calc(var(--ow) * -.707) calc(var(--ow) * -.707) var(--oc),
    calc(var(--ow) * -.383) calc(var(--ow) * -.924) var(--oc), calc(var(--ow) * .383) calc(var(--ow) * -.924) var(--oc),
    calc(var(--ow) * .707) calc(var(--ow) * -.707) var(--oc), calc(var(--ow) * .924) calc(var(--ow) * -.383) var(--oc),
    0 0 calc(var(--ow) * 5) var(--glow, transparent), 0 0 calc(var(--ow) * 2) var(--glow, transparent); }
.fx-impact.fx-grad::after { content: attr(data-text); position: absolute; left: 0; top: 0; right: 0; white-space: inherit;
  color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; text-shadow: none; }

/* ダメージ数字 */
.fx-dmg { --d: calc(1000ms / var(--fx-speed, 1)); font-family: var(--font-impact); font-size: var(--fs); line-height: 1; white-space: nowrap;
  transform: translate(-50%, -50%); animation: fx-dmg-arc var(--d) cubic-bezier(.2, .7, .4, 1) both;
  filter: drop-shadow(0 0 14px var(--glow)) drop-shadow(0 5px 0 rgba(0, 0, 0, .35)); }
.fx-dmg span { display: inline-block; color: #ff2d48; --oc: #fff;
  text-shadow: 4px 0 #fff, -4px 0 #fff, 0 4px #fff, 0 -4px #fff, 3px 3px #fff, -3px 3px #fff, 3px -3px #fff, -3px -3px #fff, 0 0 18px var(--glow);
  animation: fx-dmg-pop calc(380ms / var(--fx-speed, 1)) cubic-bezier(.34, 1.56, .64, 1) both; }
.fx-dmg.heal span { color: #2fd27a; }
.fx-dmg.huge { animation: fx-dmg-arc var(--d) cubic-bezier(.2, .7, .4, 1) both, fx-dmg-jit calc(320ms / var(--fx-speed, 1)) steps(8) both; }
@keyframes fx-dmg-arc {
  0% { transform: translate(-50%, -50%); opacity: 1; }
  30% { transform: translate(calc(-50% + var(--dx) * .4), calc(-50% - 70px)); }
  62% { transform: translate(calc(-50% + var(--dx) * .7), calc(-50% - 58px)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + 30px)); opacity: 0; }
}
@keyframes fx-dmg-pop { 0% { transform: translateY(-24px) scale(2.3); opacity: 0; } 55% { transform: scale(.88); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes fx-dmg-jit { 0% { translate: 8px -5px; } 25% { translate: -7px 4px; } 50% { translate: 5px 3px; } 75% { translate: -3px -2px; } 100% { translate: 0 0; } }

/* 召喚: カード表面を光の帯がなでる */
.card > .fx-sweep { inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%); background-size: 320% 100%;
  animation: fx-sweep calc(520ms / var(--fx-speed, 1)) cubic-bezier(.3, .6, .4, 1) both; }
@keyframes fx-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.fx-sumname { left: 50%; top: 520px; font-size: 48px; white-space: nowrap; letter-spacing: .04em; }

/* 破壊の破片 */
.fx-shatter { width: 0; height: 0; perspective: 900px; }
.fx-shatter > * { pointer-events: none; will-change: transform; backface-visibility: visible; }

/* ---- バナー ---- */
.fx-banner { inset: 0; --d: calc(1300ms / var(--fx-speed, 1)); --c1: #4a2c05; --c2: #ffb627; }
.fx-banner.self { --c1: #0a2a5e; --c2: #3fa9ff; }
.fx-banner.opp { --c1: #5a0a1c; --c2: #ff5468; }
.fx-banner > * { position: absolute; }
.fx-bn-shade { inset: 0; background: radial-gradient(ellipse 70% 40% at 50% 50%, rgba(0, 0, 0, .5), transparent 75%); animation: fx-bn-fade var(--d) both; }
.fx-bn-band { left: 0; right: 0; top: 50%; height: 220px; margin-top: -110px; transform: skewY(-4deg);
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--c1) 85%, transparent) 10%, var(--c1) 28%, color-mix(in srgb, var(--c2) 75%, var(--c1)) 50%, var(--c1) 72%, color-mix(in srgb, var(--c1) 85%, transparent) 90%, transparent);
  animation: fx-bn-band var(--d) cubic-bezier(.16, 1, .3, 1) both; overflow: visible; }
.fx-bn-band::before { content: ''; position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(120deg, rgba(255, 255, 255, .07) 0 14px, transparent 14px 40px); }
.fx-bn-band::after { content: ''; position: absolute; inset: 0; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .4) 50%, transparent 56%); background-size: 300% 100%;
  animation: fx-sweep calc(700ms / var(--fx-speed, 1)) calc(120ms / var(--fx-speed, 1)) ease-out both; }
.fx-bn-band i, .fx-bn-band b { position: absolute; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, transparent, var(--c2) 20%, #fff 50%, var(--c2) 80%, transparent); box-shadow: 0 0 18px var(--c2); }
.fx-bn-band i { top: 8px; animation: fx-bn-line var(--d) cubic-bezier(.16, 1, .3, 1) both; }
.fx-bn-band b { bottom: 8px; animation: fx-bn-line-r var(--d) cubic-bezier(.16, 1, .3, 1) both; }
.fx-bn-text { left: 0; right: 0; top: 50%; text-align: center; font-size: 128px; line-height: 1; letter-spacing: .04em;
  animation: fx-bn-text var(--d) cubic-bezier(.16, 1, .3, 1) both; }
.fx-bn-sub { left: 0; right: 0; top: calc(50% + 50px); text-align: center; font: 800 36px var(--font-round); color: #fff; letter-spacing: .3em;
  text-shadow: 0 2px 8px #000, 0 0 3px #000; animation: fx-bn-sub var(--d) cubic-bezier(.16, 1, .3, 1) both; }
@keyframes fx-bn-fade { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-bn-band { 0% { clip-path: inset(0 100% 0 0); } 16% { clip-path: inset(0 0 0 0); } 80% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes fx-bn-line { 0% { transform: translateX(-100%); opacity: 0; } 18% { transform: translateX(0); opacity: 1; } 82% { transform: translateX(3%); opacity: 1; } 100% { transform: translateX(60%); opacity: 0; } }
@keyframes fx-bn-line-r { 0% { transform: translateX(100%); opacity: 0; } 18% { transform: translateX(0); opacity: 1; } 82% { transform: translateX(-3%); opacity: 1; } 100% { transform: translateX(-60%); opacity: 0; } }
@keyframes fx-bn-text {
  0% { transform: translate(-280px, -66%); opacity: 0; filter: blur(8px); letter-spacing: .4em; }
  18% { transform: translate(0, -66%); opacity: 1; filter: blur(0); letter-spacing: .04em; }
  80% { transform: translate(40px, -66%); opacity: 1; filter: blur(0); }
  100% { transform: translate(340px, -66%); opacity: 0; filter: blur(8px); }
}
@keyframes fx-bn-sub { 0%, 8% { transform: translateX(200px); opacity: 0; } 24% { transform: translateX(0); opacity: 1; } 80% { transform: translateX(-30px); opacity: 1; } 100% { transform: translateX(-260px); opacity: 0; } }

.fx-banner.tone-phase { --d: calc(800ms / var(--fx-speed, 1)); }
.tone-phase .fx-bn-band { height: 120px; margin-top: -60px; transform: skewY(-3deg); }
.tone-phase .fx-bn-text { font-size: 76px; transform: translateY(-58%); }
.tone-phase .fx-bn-sub { top: calc(50% + 30px); font-size: 24px; }
.tone-phase .fx-bn-shade { display: none; }

.fx-banner.tone-win, .fx-banner.tone-lose { --d: calc(2600ms / var(--fx-speed, 1)); }
.tone-win .fx-bn-band, .tone-lose .fx-bn-band { display: none; }
.tone-win .fx-bn-shade { background: radial-gradient(ellipse at 50% 46%, rgba(80, 40, 0, .35), rgba(0, 0, 0, .7) 75%); }
.tone-win .fx-bn-text { font-size: 260px; top: 46%; animation-name: fx-bn-win; animation-timing-function: linear; }
.tone-win .fx-bn-sub { top: calc(46% + 130px); font-size: 44px; color: #fff3c4; animation-name: fx-bn-winsub; }
.fx-bn-rays { left: 50%; top: 46%; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, rgba(255, 205, 90, 0) 0deg 5deg, rgba(255, 205, 90, .45) 7deg 9deg, rgba(255, 205, 90, 0) 11deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 5%, transparent 50%); mask-image: radial-gradient(circle, #000 5%, transparent 50%);
  animation: fx-spin calc(14s / var(--fx-speed, 1)) linear infinite, fx-bn-fade var(--d) both; }
@keyframes fx-bn-win {
  0% { transform: translateY(-50%) scale(3.2); opacity: 0; filter: blur(16px); }
  8% { transform: translateY(-50%) scale(.9); opacity: 1; filter: blur(0); }
  12% { transform: translateY(-50%) scale(1.04); }
  16% { transform: translateY(-50%) scale(1); }
  86% { transform: translateY(-50%) scale(1.07); opacity: 1; }
  100% { transform: translateY(-50%) scale(1.12); opacity: 0; }
}
@keyframes fx-bn-winsub { 0%, 14% { opacity: 0; transform: translateY(20px); letter-spacing: .8em; } 24% { opacity: 1; transform: none; letter-spacing: .3em; } 86% { opacity: 1; } 100% { opacity: 0; } }
.tone-lose .fx-bn-shade { background: linear-gradient(180deg, rgba(8, 12, 28, .55), rgba(8, 12, 28, .8)); }
.tone-lose .fx-bn-text { font-size: 180px; animation-name: fx-bn-lose; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
.tone-lose .fx-bn-sub { top: calc(50% + 90px); color: #c3cde6; animation-name: fx-bn-winsub; }
@keyframes fx-bn-lose {
  0% { transform: translateY(-160%); opacity: 0; }
  24% { transform: translateY(-50%); opacity: 1; }
  86% { transform: translateY(-46%); opacity: 1; }
  100% { transform: translateY(-40%); opacity: 0; }
}
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* ---- 伝説・神のシネマ ---- */
.fx-cn { inset: 0; overflow: hidden; pointer-events: auto; cursor: pointer; }
.fx-cn > * { position: absolute; pointer-events: none; }
.cn-dim { inset: 0; background: radial-gradient(ellipse at 50% 44%, rgba(30, 14, 0, .55), rgba(0, 0, 0, .94) 70%); }
.cn-glow { inset: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--c) 45%, #fff) 0%, color-mix(in srgb, var(--c) 45%, transparent) 16%, transparent 42%); }
.cn-rays { left: 50%; top: 44%; width: 2800px; height: 2800px; margin: -1400px 0 0 -1400px; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, rgba(255, 196, 92, 0) 0deg 4deg, rgba(255, 196, 92, .42) 6deg 7.5deg, rgba(255, 196, 92, 0) 9.5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 4%, transparent 52%); mask-image: radial-gradient(circle, #000 4%, transparent 52%);
  animation: fx-spin calc(24s / var(--fx-speed, 1)) linear infinite; }
.cn-rays.white { background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg 3deg, rgba(255, 255, 255, .5) 5deg 6deg, rgba(255, 255, 255, 0) 8deg 12deg);
  animation-duration: calc(18s / var(--fx-speed, 1)); }
.cn-emblem-wrap { left: 50%; top: 44%; width: 900px; height: 900px; mix-blend-mode: screen; }
.cn-emblem { width: 100%; height: 100%; animation: fx-spin calc(18s / var(--fx-speed, 1)) linear infinite; }
.cn-pillar { left: 50%; top: 0; bottom: 0; width: 300px; margin-left: -150px; transform-origin: 50% 100%; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(255, 170, 60, .5) 28%, #fff6dc 50%, rgba(255, 170, 60, .5) 72%, transparent); }
.cn-card { left: 50%; top: 470px; filter: drop-shadow(0 0 50px color-mix(in srgb, var(--c, #fff) 80%, transparent)); }
.cn-card .card { box-shadow: 0 0 0 3px rgba(255, 236, 180, .85), 0 30px 80px rgba(0, 0, 0, .7); }
.cn-holo, .cn-foil { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; }
.cn-holo { mix-blend-mode: overlay; background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .85) 44%, rgba(255, 214, 120, .6) 50%, transparent 64%);
  background-size: 280% 100%; animation: cn-holo calc(1500ms / var(--fx-speed, 1)) linear infinite; }
.cn-foil { mix-blend-mode: overlay; opacity: .35;
  background: linear-gradient(125deg, #ff4d6d, #ffb627, #fff35c, #4be08a, #3fa9ff, #8f5cff, #ff4dd2, #ff4d6d); background-size: 300% 300%;
  animation: cn-holo calc(2400ms / var(--fx-speed, 1)) linear infinite; }
@keyframes cn-holo { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.cn-brush { left: 50%; top: 772px; width: 1560px; height: 168px; margin-left: -780px; transform: skewX(-18deg) rotate(-2deg);
  background: linear-gradient(90deg, transparent, rgba(12, 5, 0, .94) 6%, rgba(20, 8, 0, .96) 50%, rgba(12, 5, 0, .94) 94%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.cn-brush::before, .cn-brush::after { content: ''; position: absolute; left: 4%; right: 4%; height: 3px;
  background: linear-gradient(90deg, transparent, #ffcf6b 20%, #fff3c4 50%, #ffcf6b 80%, transparent); box-shadow: 0 0 14px #ffb627; }
.cn-brush::before { top: 18px; } .cn-brush::after { bottom: 18px; }
.cn-title { left: 50%; top: 780px; font-size: 140px; line-height: 1.05; letter-spacing: .06em; white-space: nowrap; }
.cn-name, .cn-epithet { left: 0; right: 0; text-align: center; white-space: nowrap; color: #fff; }
.cn-name { top: 948px; font-family: var(--font-impact); font-size: 56px; line-height: 1.1;
  text-shadow: 3px 0 #1a0d00, -3px 0 #1a0d00, 0 3px #1a0d00, 0 -3px #1a0d00, 2px 2px #1a0d00, -2px 2px #1a0d00, 2px -2px #1a0d00, -2px -2px #1a0d00, 0 0 24px var(--c, #ffb627); }
.cn-name span { display: inline-block; }
.cn-epithet { top: 1018px; font: 800 28px var(--font-round); letter-spacing: .3em; color: #ffe7a8; text-shadow: 0 2px 6px #000; }
.fx-cn-god .cn-black { inset: 0; background: #000; }
.fx-cn-god .cn-rainbow { inset: 0; overflow: hidden; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent); }
.fx-cn-god .cn-rainbow::before { content: ''; position: absolute; left: 50%; top: 44%; width: 2600px; height: 2600px; margin: -1300px 0 0 -1300px;
  background: conic-gradient(from 0deg, #ff4d6d, #ffb627, #fff35c, #4be08a, #3fa9ff, #8f5cff, #ff4dd2, #ff4d6d);
  animation: fx-spin calc(8s / var(--fx-speed, 1)) linear infinite; opacity: .85; }
.fx-cn-god .cn-rainbow::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 44%, #fff 0%, rgba(255, 255, 255, .9) 12%, rgba(255, 255, 255, .2) 34%, rgba(0, 0, 0, .55) 70%); }
.fx-cn-god .cn-card { --c: #ffffff; }
.cn-kami { left: 50%; top: 44%; font-size: 360px; line-height: 1; }
.cn-kami .fx-impact { animation: cn-hue calc(1600ms / var(--fx-speed, 1)) linear infinite; }
@keyframes cn-hue {
  from { filter: drop-shadow(0 0 18px #fff) drop-shadow(0 0 50px #ff7ad9) drop-shadow(0 0 110px #6fc3ff) hue-rotate(0deg); }
  to { filter: drop-shadow(0 0 18px #fff) drop-shadow(0 0 50px #ff7ad9) drop-shadow(0 0 110px #6fc3ff) hue-rotate(360deg); }
}
.fx-cn-god .cn-name { top: 860px; font-size: 68px; text-shadow: 3px 0 #1b1030, -3px 0 #1b1030, 0 3px #1b1030, 0 -3px #1b1030, 2px 2px #1b1030, -2px 2px #1b1030, 2px -2px #1b1030, -2px -2px #1b1030, 0 0 30px #c49bff, 0 0 60px #fff; }
.fx-cn-god .cn-epithet { top: 960px; font-size: 32px; color: #f3eaff; }

/* ---- カットイン ---- */
.ci { inset: 0; pointer-events: auto; cursor: pointer; --d: calc(1450ms / var(--fx-speed, 1)); --y: 380px; }
.ci > * { position: absolute; }
.ci-dim { inset: 0; background: radial-gradient(ellipse 90% 60% at 50% var(--y), rgba(4, 6, 16, .1), rgba(4, 6, 16, .6)); animation: ci-dim var(--d) both; }
.kind-pinch .ci-dim { background: radial-gradient(ellipse 80% 60% at 50% var(--y), rgba(60, 0, 10, .1), rgba(90, 0, 16, .65)); }
.ci-band { left: -5%; width: 110%; top: calc(var(--y) - 190px); height: 380px; overflow: hidden; transform: skewY(-8deg);
  animation: ci-band-l var(--d) both; box-shadow: 0 0 60px color-mix(in srgb, var(--c) 70%, transparent); }
.side-right .ci-band { transform: skewY(8deg); animation-name: ci-band-r; }
.ci-band > * { position: absolute; }
.ci-band-bg { inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, #05030c) 0%, var(--c) 38%, color-mix(in srgb, var(--c) 55%, #fff) 52%, var(--c) 66%, color-mix(in srgb, var(--c) 28%, #05030c) 100%); }
.kind-pinch .ci-band-bg::after, .kind-read .ci-band-bg::after, .kind-finish .ci-band-bg::after { content: ''; position: absolute; inset: 0; }
.kind-pinch .ci-band-bg::after { background: linear-gradient(90deg, rgba(255, 30, 60, .55), rgba(120, 0, 20, .2) 60%, rgba(255, 30, 60, .45)); mix-blend-mode: multiply; }
.kind-read .ci-band-bg::after { background: linear-gradient(90deg, rgba(40, 70, 200, .45), transparent 60%); mix-blend-mode: multiply; }
.kind-finish .ci-band-bg::after { background: radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, .45), transparent 60%); mix-blend-mode: screen; }
.ci-lines { left: 30%; top: 50%; width: 3200px; height: 3200px; margin: -1600px 0 0 -1600px; mix-blend-mode: overlay; opacity: .9;
  -webkit-mask-image: radial-gradient(circle, transparent 6%, #000 22%); mask-image: radial-gradient(circle, transparent 6%, #000 22%);
  animation: fx-spin calc(9s / var(--fx-speed, 1)) linear infinite; }
.side-right .ci-lines { left: 70%; }
.kind-finish .ci-lines { animation-duration: calc(3s / var(--fx-speed, 1)); opacity: 1; mix-blend-mode: screen; }
.ci-stripes { inset: 0; background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .09) 0 16px, transparent 16px 44px); background-size: 200% 100%;
  animation: ci-stripes calc(1450ms / var(--fx-speed, 1)) linear both; }
.ci-kicker { right: 7%; top: 50%; transform: translateY(-50%); font: 600 300px/1 'Chakra Petch', var(--font-impact); letter-spacing: .04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 3px rgba(255, 255, 255, .38); animation: ci-kick-l var(--d) linear both; }
.side-right .ci-kicker { right: auto; left: 7%; animation-name: ci-kick-r; }
.kind-finish .ci-kicker { -webkit-text-stroke-color: rgba(255, 255, 255, .6); }
.ci-edge { left: 0; right: 0; height: 9px; background: #fff; box-shadow: 0 0 18px #fff, 0 0 40px var(--c); }
.ci-edge.t { top: 0; } .ci-edge.b { bottom: 0; }
.kind-ace .ci-edge { background: linear-gradient(90deg, #ffcf6b, #fff7d6, #ffcf6b); box-shadow: 0 0 18px #ffd36b, 0 0 40px #ffb627; }
.kind-pinch .ci-edge { background: #ff4d6d; box-shadow: 0 0 18px #ff4d6d, 0 0 40px #ff0033; }
.ci-pt { top: calc(var(--y) - 260px); height: 600px; width: 760px; left: 60px; overflow: hidden;
  clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%); animation: ci-pt-l var(--d) cubic-bezier(.16, 1, .3, 1) both; }
.side-right .ci-pt { left: auto; right: 60px; clip-path: polygon(0 0, 100% 18%, 100% 100%, 0 82%); animation-name: ci-pt-r; }
.ci-pt-img { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); }
.ci-pt-img img { display: block; height: 1300px; filter: drop-shadow(5px 0 0 rgba(255, 255, 255, .85)) drop-shadow(0 0 24px var(--c)); }
.side-right .ci-pt-img img { filter: drop-shadow(-5px 0 0 rgba(255, 255, 255, .85)) drop-shadow(0 0 24px var(--c)); }
.ci-sil { width: 620px; height: 1300px; display: grid; justify-items: center; padding-top: 260px;
  background: radial-gradient(ellipse 22% 13% at 50% 21%, color-mix(in srgb, var(--c) 30%, #05030c) 96%, transparent),
    radial-gradient(ellipse 46% 40% at 50% 62%, color-mix(in srgb, var(--c) 30%, #05030c) 96%, transparent); }
.ci-sil span { align-self: start; margin-top: 360px; font: 800 56px var(--font-round); color: #fff; opacity: .9; text-shadow: 0 2px 10px #000; }
.ci-text { left: 830px; right: 90px; top: calc(var(--y) - 48px - 120px); height: 240px; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; transform: rotate(-3deg); }
.side-right .ci-text { left: 90px; right: 830px; align-items: flex-end; text-align: right; transform: rotate(3deg); }
.ci-line { font-family: var(--font-impact); line-height: 1.22; animation: ci-line var(--d) both; transform-origin: 30% 50%; }
.side-right .ci-line { transform-origin: 70% 50%; }
.ci-line .fx-impact { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.ci-name { margin-top: 12px; font: 800 26px var(--font-round); color: #fff; letter-spacing: .08em; text-shadow: 0 2px 6px #000, 0 0 2px #000;
  animation: ci-name var(--d) both; }
.ci-name span { color: color-mix(in srgb, var(--c) 40%, #fff); }
@keyframes ci-dim { 0% { opacity: 0; } 10% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ci-band-l { 0% { clip-path: inset(0 100% 0 0); } 13.8% { clip-path: inset(0 0 0 0); } 82.7% { clip-path: inset(0 0 0 0); opacity: 1; transform: skewY(-8deg) scaleY(1); } 100% { clip-path: inset(0 0 0 0); opacity: 0; transform: skewY(-8deg) scaleY(0); } }
@keyframes ci-band-r { 0% { clip-path: inset(0 0 0 100%); } 13.8% { clip-path: inset(0 0 0 0); } 82.7% { clip-path: inset(0 0 0 0); opacity: 1; transform: skewY(8deg) scaleY(1); } 100% { clip-path: inset(0 0 0 0); opacity: 0; transform: skewY(8deg) scaleY(0); } }
@keyframes ci-pt-l { 0%, 5% { transform: translateX(200px); opacity: 0; } 19% { transform: translateX(0); opacity: 1; } 82.7% { transform: translateX(-24px); opacity: 1; } 100% { transform: translateX(-160px); opacity: 0; } }
@keyframes ci-pt-r { 0%, 5% { transform: translateX(-200px); opacity: 0; } 19% { transform: translateX(0); opacity: 1; } 82.7% { transform: translateX(24px); opacity: 1; } 100% { transform: translateX(160px); opacity: 0; } }
@keyframes ci-line { 0%, 12% { transform: scale(1.6); opacity: 0; filter: blur(6px); } 17% { transform: scale(.95); opacity: 1; filter: blur(0); } 21% { transform: scale(1); } 82.7% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes ci-name { 0%, 18% { transform: translateX(-30px); opacity: 0; } 26% { transform: none; opacity: 1; } 82.7% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ci-kick-l { 0% { transform: translate(200px, -50%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-120px, -50%); opacity: 1; } }
@keyframes ci-kick-r { 0% { transform: translate(-200px, -50%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(120px, -50%); opacity: 1; } }
@keyframes ci-stripes { from { background-position: 0 0; } to { background-position: -600px 0; } }

/* ---- VS ---- */
.vs { inset: 0; overflow: hidden; pointer-events: auto; cursor: pointer; --d: calc(2900ms / var(--fx-speed, 1)); animation: vs-out var(--d) both; }
.vs > * { position: absolute; }
.vs-bg { inset: 0; background: #05060f; }
.vs-half { inset: 0; overflow: hidden; }
.vs-half > * { position: absolute; }
.vs-half.l { clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%); animation: vs-l var(--d) cubic-bezier(.16, 1, .3, 1) both; }
.vs-half.r { clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%); animation: vs-r var(--d) cubic-bezier(.16, 1, .3, 1) both; }
.vs-fill { inset: 0; }
.l .vs-fill { background: linear-gradient(115deg, color-mix(in srgb, var(--c) 20%, #05030c) 0%, var(--c) 50%, color-mix(in srgb, var(--c) 55%, #fff) 60%, color-mix(in srgb, var(--c) 35%, #05030c) 100%); }
.r .vs-fill { background: linear-gradient(245deg, color-mix(in srgb, var(--c) 20%, #05030c) 0%, var(--c) 50%, color-mix(in srgb, var(--c) 55%, #fff) 60%, color-mix(in srgb, var(--c) 35%, #05030c) 100%); }
.vs-fill::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(102deg, rgba(0, 0, 0, .14) 0 3px, transparent 3px 9px); }
.vs-lines { top: 50%; width: 3600px; height: 3600px; margin: -1800px 0 0 -1800px; mix-blend-mode: overlay;
  -webkit-mask-image: radial-gradient(circle, transparent 8%, #000 26%); mask-image: radial-gradient(circle, transparent 8%, #000 26%);
  animation: fx-spin calc(16s / var(--fx-speed, 1)) linear infinite; }
.l .vs-lines { left: 25%; } .r .vs-lines { left: 75%; animation-direction: reverse; }
.vs-pt { top: 10px; }
.l .vs-pt { left: 470px; animation: vs-pt-l var(--d) cubic-bezier(.16, 1, .3, 1) both; }
.r .vs-pt { left: 1450px; animation: vs-pt-r var(--d) cubic-bezier(.16, 1, .3, 1) both; }
.vs-pt .ci-pt-img { top: 0; }
.vs-pt .ci-pt-img img { height: 1400px; filter: drop-shadow(0 0 30px rgba(0, 0, 0, .6)); }
.vs-slit { left: 50%; top: -10%; width: 16px; height: 120%; margin-left: -8px; background: #fff; transform: rotate(12.1deg) scaleY(0);
  box-shadow: 0 0 20px #fff, 0 0 60px #ffd36b, 0 0 120px #ff9d2e; animation: vs-slit var(--d) both; }
.vs-mark { left: 50%; top: 50%; font-size: 300px; line-height: 1; letter-spacing: -.02em; animation: vs-mark var(--d) linear both; }
.vs-plate { bottom: 80px; padding: 14px 54px 18px; min-width: 520px; transform: skewX(-12deg);
  background: linear-gradient(90deg, rgba(5, 6, 15, .92), rgba(5, 6, 15, .55)); border-left: 12px solid var(--c);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.vs-plate > * { display: block; transform: skewX(12deg); }
.vs-plate small { font: 800 24px var(--font-round); color: color-mix(in srgb, var(--c) 45%, #fff); letter-spacing: .12em; min-height: 1em; }
.vs-plate b { font: 400 64px/1.15 var(--font-impact); color: #fff; text-shadow: 0 0 20px var(--c); white-space: nowrap; }
.vs-plate.l { left: 70px; animation: vs-plate-l var(--d) cubic-bezier(.16, 1, .3, 1) both; }
.vs-plate.r { right: 70px; text-align: right; border-left: 0; border-right: 12px solid var(--c);
  background: linear-gradient(270deg, rgba(5, 6, 15, .92), rgba(5, 6, 15, .55)); animation: vs-plate-r var(--d) cubic-bezier(.16, 1, .3, 1) both; }
.vs-title { left: 0; right: 0; top: 54px; text-align: center; animation: vs-title var(--d) both; }
.vs-title span { display: inline-block; padding: 10px 70px; font: 400 52px var(--font-impact); color: #fff; letter-spacing: .12em;
  background: linear-gradient(90deg, transparent, rgba(5, 6, 15, .85) 20%, rgba(5, 6, 15, .85) 80%, transparent); text-shadow: 0 0 20px #ffb627; }
.vs-title small { display: block; margin-top: 6px; font: 800 26px var(--font-round); color: #ffe7a8; letter-spacing: .3em; text-shadow: 0 2px 6px #000; }
@keyframes vs-out { 0%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes vs-l { 0% { transform: translateX(-70%); } 11% { transform: translateX(0); } 100% { transform: translateX(0); } }
@keyframes vs-r { 0% { transform: translateX(70%); } 11% { transform: translateX(0); } 100% { transform: translateX(0); } }
@keyframes vs-pt-l { 0%, 5% { transform: translateX(-50%) translateX(-260px); opacity: 0; } 20% { transform: translateX(-50%); opacity: 1; } 100% { transform: translateX(-50%) translateX(40px); opacity: 1; } }
@keyframes vs-pt-r { 0%, 5% { transform: translateX(-50%) translateX(260px); opacity: 0; } 20% { transform: translateX(-50%); opacity: 1; } 100% { transform: translateX(-50%) translateX(-40px); opacity: 1; } }
@keyframes vs-slit { 0%, 9% { transform: rotate(12.1deg) scaleY(0); } 15% { transform: rotate(12.1deg) scaleY(1); } 100% { transform: rotate(12.1deg) scaleY(1); } }
@keyframes vs-mark {
  0%, 17% { transform: translate(-50%, -56%) scale(4); opacity: 0; filter: blur(14px); }
  21.4% { transform: translate(-50%, -56%) scale(.88); opacity: 1; filter: blur(0); }
  24% { transform: translate(-50%, -56%) scale(1.04); }
  27% { transform: translate(-50%, -56%) scale(1); }
  100% { transform: translate(-50%, -56%) scale(1.1); opacity: 1; }
}
@keyframes vs-plate-l { 0%, 22% { transform: skewX(-12deg) translateX(-700px); } 32% { transform: skewX(-12deg) translateX(0); } 100% { transform: skewX(-12deg) translateX(0); } }
@keyframes vs-plate-r { 0%, 22% { transform: skewX(-12deg) translateX(700px); } 32% { transform: skewX(-12deg) translateX(0); } 100% { transform: skewX(-12deg) translateX(0); } }
@keyframes vs-title { 0%, 26% { opacity: 0; transform: translateY(-40px); } 36% { opacity: 1; transform: none; } 100% { opacity: 1; } }