/* SYNO stream overlay — 1080x1920 portrait */

@font-face { font-family: "OV Anton"; src: url(fonts/anton.woff2) format("woff2"); font-display: block; }
@font-face { font-family: "OV Mont"; src: url(fonts/montserrat-italic.woff2) format("woff2"); font-style: italic; font-weight: 100 900; font-display: block; }
@font-face { font-family: "OV MontUp"; src: url(fonts/montserrat.woff2) format("woff2"); font-weight: 300 900; font-display: block; }
@font-face { font-family: "OV Raj"; src: url(fonts/rajdhani-600.woff2) format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "OV Raj"; src: url(fonts/rajdhani-700.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "OV Teko"; src: url(fonts/teko.woff2) format("woff2"); font-weight: 600; font-display: block; }

.ov-stage, .bn {
  /* palette tokens (red theme overrides below) */
  --ink: #07050c;
  --night: #120a1f;
  --plum: #241038;
  --violet: #7b2cff;
  --flame: #b98aff;
  --violet-rgb: 123,44,255;
  --flame-rgb: 185,138,255;
  --card-a: rgba(28,13,48,.9); --card-b: rgba(17,8,32,.9); --card-c: rgba(11,6,21,.92);
  --crimson: #ff2350;
  --bone: #f3eee8;
  --ice: #52d8ff;
  --win: #6dffb0;
  --gold: #ffcf4a;
  --muted: rgba(243, 238, 232, .56);

  --f-disp: "OV Anton", "Anton", Impact, "Arial Narrow", sans-serif;
  --f-shout: "OV Mont", "Montserrat", "Arial Black", sans-serif;
  --f-hud: "OV Raj", "Rajdhani", "Segoe UI", sans-serif;
  --f-num: "OV Teko", "Teko", "OV Anton", Impact, sans-serif;
  --f-clean: "OV MontUp", "Montserrat", "Segoe UI", sans-serif;
}

/* red theme (config theme: "red") */
.ov-stage.theme-red {
  --night: #14060a; --plum: #2a0710; --violet: #c8102e; --flame: #ff6b7d;
  --violet-rgb: 200,16,46; --flame-rgb: 255,107,125;
  --card-a: rgba(40,9,16,.9); --card-b: rgba(22,6,10,.9); --card-c: rgba(12,4,6,.93);
}
.ov-stage {
  position: relative; width: 1080px; height: 1920px; overflow: hidden;
  transform-origin: 0 0; color: var(--bone); font-family: var(--f-hud);
  -webkit-font-smoothing: antialiased;
}
.ov-stage *, .bn * { box-sizing: border-box; }
.ov-layer { position: absolute; inset: 0; width: 1080px; height: 1920px; pointer-events: none; }
.ov-bgfx { image-rendering: auto; }

/* demo images (preview only) */
.ov-demo { position: absolute; overflow: hidden; background: #1a1424; }
.ov-demo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ov-demo.is-empty { display: grid; place-items: center; background:
  repeating-linear-gradient(-45deg, #17111f 0 14px, #1c1526 14px 28px); }
.ov-demo.is-empty span { font: 700 34px/1 var(--f-hud); letter-spacing: .3em; color: rgba(243,238,232,.35); }

/* ---------- slot frames + laser ---------- */
.ov-frame-base { fill: none; stroke: rgba(var(--flame-rgb), .42); stroke-width: 2; }
.ov-laser { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 90 910; animation: ov-run 6s linear infinite; }
.ov-laser.glow { stroke-width: 9; filter: url(#ov-blur); opacity: .9; }
.ov-laser.v { stroke: var(--flame); }
.ov-laser.r { stroke: var(--crimson); animation-delay: -3s; }
.ov-laser.core { stroke: #fff; stroke-width: 1.4; stroke-dasharray: 40 960; }
.ov-laser.core.r { animation-delay: -3s; }
@keyframes ov-run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }
.ov-corner { fill: none; stroke: var(--bone); stroke-width: 3; }

/* ---------- band between facecam & gameplay ---------- */
.ov-band {
  position: absolute; left: 0; width: 1080px; height: 40px; overflow: hidden; z-index: 6;
  background: linear-gradient(90deg, #0c0614, #1a0b2a 50%, #0c0614);
  border-top: 2px solid var(--crimson); border-bottom: 1px solid rgba(var(--flame-rgb),.5);
  display: flex; align-items: center; justify-content: center; gap: 22px;
  font: 700 21px/1 var(--f-hud); letter-spacing: .2em; text-transform: uppercase;
}
.ov-band .live { background: var(--crimson); color: #fff; padding: 7px 18px 6px; transform: skewX(-14deg); display: inline-flex; gap: 8px; align-items: center; }
.ov-band .live > * { transform: skewX(14deg); }
.ov-band .dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: ov-blink 1.2s steps(2, jump-none) infinite; }
.ov-band .sep { width: 5px; height: 5px; background: var(--flame); transform: rotate(45deg); }
.ov-band .sweep { position: absolute; top: 0; bottom: 0; width: 160px; left: -200px;
  background: linear-gradient(90deg, transparent, rgba(var(--flame-rgb),.35), transparent); animation: ov-sweep 6s linear infinite; }
@keyframes ov-sweep { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(1480px); } }
@keyframes ov-blink { 50% { opacity: .15; } }

/* ---------- cards ---------- */
.ov-card {
  --cut: 22px;
  position: absolute; color: var(--bone);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: linear-gradient(155deg, rgba(var(--flame-rgb),.75), rgba(var(--flame-rgb),.14) 38%, rgba(var(--flame-rgb),.1) 62%, rgba(255,35,80,.7));
}
.ov-card::before {
  content: ""; position: absolute; inset: 2px; z-index: 0;
  clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px));
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(var(--violet-rgb),.22), transparent 60%),
    linear-gradient(170deg, var(--card-a) 0%, var(--card-b) 55%, var(--card-c) 100%);
}
.ov-card::after { /* sheen */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(243,238,232,.10) 50%, transparent 60%);
  background-size: 260% 100%; background-position: 160% 0; animation: ov-sheen 12s ease-in-out infinite;
}
@keyframes ov-sheen { 0%, 70% { background-position: 160% 0; } 85%, 100% { background-position: -60% 0; } }
.ov-card > * { position: relative; z-index: 1; }

.ov-h { font: 400 54px/.9 var(--f-disp); letter-spacing: .01em; margin: 0; transform: skewX(-8deg); transform-origin: left bottom;
  text-shadow: 3px 3px 0 var(--crimson); }
.ov-lbl { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 16px/1 var(--f-hud); letter-spacing: .26em; color: var(--flame); text-transform: uppercase; }
.ov-lbl::before { content: ""; width: 9px; height: 9px; background: var(--crimson); transform: rotate(45deg); flex: none; }
.ov-lbl i { font-style: normal; margin-left: auto; color: var(--bone); background: rgba(var(--flame-rgb),.18); padding: 3px 9px 2px; letter-spacing: .1em; font-size: 15px; }

.ov-chip { display: inline-flex; align-items: baseline; gap: 6px; background: var(--bone); color: var(--ink);
  padding: 5px 12px 3px; font: 400 22px/1 var(--f-disp); letter-spacing: .02em; transform: skewX(-12deg); white-space: nowrap; }
.ov-chip > * { display: inline-block; transform: skewX(12deg); }
.ov-chip b { font-weight: 400; color: var(--crimson); font-size: 28px; }

/* ---------- queue card ---------- */
.ov-queue { padding: 20px 24px 14px; display: flex; flex-direction: column; gap: 12px; }
.ov-queue .q-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.q-open { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--f-hud); letter-spacing: .3em; color: var(--win); margin-bottom: 8px; }
.q-open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--win); box-shadow: 0 0 10px var(--win); animation: ov-blink 1.6s steps(2, jump-none) infinite; }
.q-open.full { color: var(--crimson); }
.q-open.full::before { background: var(--crimson); box-shadow: 0 0 10px var(--crimson); }
.ov-queue .q-prices { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
.ov-queue ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ov-queue .slot { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px 0 0;
  background: linear-gradient(90deg, rgba(var(--violet-rgb),.32), rgba(var(--violet-rgb),.06)); }
.ov-queue .slot .ix { width: 34px; height: 100%; display: grid; place-items: center; background: var(--violet); font: 600 24px/1 var(--f-num); padding-top: 3px; }
.ov-queue .slot .nm { flex: 1; min-width: 0; font: 700 24px/1 var(--f-hud); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-queue .slot.is-empty { background: transparent; outline: 1px dashed rgba(var(--flame-rgb),.35); outline-offset: -1px; }
.ov-queue .slot.is-empty .ix { background: rgba(var(--flame-rgb),.15); color: var(--muted); }
.ov-queue .slot.is-empty .nm { color: rgba(243,238,232,.32); font-size: 17px; letter-spacing: .24em; }
.ov-queue .pips { display: flex; gap: 5px; }
.ov-queue .pips i { width: 12px; height: 12px; transform: skewX(-14deg); background: rgba(243,238,232,.18); }
.ov-queue .pips i.on { background: var(--crimson); box-shadow: 0 0 8px rgba(255,35,80,.7); }
.ov-queue .nx { display: flex; align-items: center; gap: 12px; height: 32px; border-bottom: 1px solid rgba(var(--flame-rgb),.16); }
.ov-queue .nx .no { font: 600 26px/1 var(--f-num); color: var(--flame); width: 34px; padding-top: 4px; }
.ov-queue .nx .nm { flex: 1; min-width: 0; font: 600 22px/1 var(--f-hud); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-queue .nx .g { font: 700 14px/1 var(--f-hud); letter-spacing: .12em; color: var(--ink); background: var(--flame); padding: 4px 7px 3px; }
.ov-queue .nx.more { border: 0; color: var(--muted); font: 700 16px/1 var(--f-hud); letter-spacing: .2em; }
.ov-queue .q-empty { margin: 0; padding: 10px 0; color: var(--muted); font: 600 19px/1.3 var(--f-hud); letter-spacing: .04em; }
.q-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; font: 700 16px/1.2 var(--f-hud); letter-spacing: .08em; color: var(--bone);
  background: rgba(255,35,80,.14); border-left: 3px solid var(--crimson); padding: 8px 12px; }
.q-foot b { color: var(--crimson); }
.ov-queue .q-cols { display: flex; flex-direction: column; gap: 12px; }
.ov-queue section { display: flex; flex-direction: column; gap: 9px; }
.is-new { animation: ov-new 1.4s ease-out; }
@keyframes ov-new { 0% { background: rgba(243,238,232,.9); transform: translateX(-18px); } 25% { transform: translateX(0); } 100% { } }

/* ---------- prices card (queue hidden) ---------- */
.ov-prices { padding: 26px 28px 20px; display: flex; flex-direction: column; gap: 16px; }
.ov-prices .pr-list { display: flex; flex-direction: column; gap: 10px; }
.ov-prices .pr { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 6px;
  background: linear-gradient(90deg, rgba(var(--violet-rgb),.35), rgba(var(--violet-rgb),.06)); border-left: 4px solid var(--flame); }
.ov-prices .pr span { font: 700 24px/1 var(--f-hud); letter-spacing: .14em; }
.ov-prices .pr b { font: 400 50px/1 var(--f-disp); color: var(--bone); text-shadow: 3px 3px 0 var(--crimson); font-weight: 400; }
.ov-prices .svc { display: flex; flex-direction: column; gap: 8px; }
.ov-prices .svc div { display: flex; justify-content: space-between; align-items: baseline; font: 600 22px/1 var(--f-hud); border-bottom: 1px dashed rgba(var(--flame-rgb),.25); padding-bottom: 7px; }
.ov-prices .svc b { font: 400 28px/1 var(--f-disp); color: var(--flame); font-weight: 400; }

/* ================= BANNER BASE ================= */
.bn { position: absolute; left: 0; width: 1080px; height: 192px; overflow: hidden; color: var(--bone); font-family: var(--f-hud); }
.bn > * { position: absolute; }
.bn-bg { inset: 0; }

/* reduced motion: keep things readable */
@media (prefers-reduced-motion: reduce) {
  .ov-laser, .ov-band .sweep, .ov-card::after { animation-duration: 0s; animation-iteration-count: 1; }
}

/* ================= SCENE BANNER (minimal, two scenes) ================= */
.bn-scene { --acc: #a66bff; font-family: var(--f-clean); }
.bn-scene .bn-bg { background: radial-gradient(70% 170% at 35% 50%, #1b1823 0%, #0c0b10 70%); }
.bn-scene .sc-smoke { left: 0; top: 0; width: 1080px; height: 192px; }
.bn-scene .sc-grain { inset: 0; background-size: 240px 240px; mix-blend-mode: overlay; opacity: .9; }
.bn-scene .sc-strip { top: 0; height: 192px; background: var(--acc); overflow: hidden; }
.bn-scene .sc-strip.a { left: 0; width: 480px; }
.bn-scene .sc-strip.b { right: 0; width: 560px; background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 70%, #000)); }
.bn-scene .sc-kin { position: absolute; left: -30px; top: -26px; transform: rotate(-9deg); color: #0b0a0e; font: 400 30px/.92 var(--f-disp); letter-spacing: .02em; white-space: nowrap; }
.bn-scene .sc-brand { left: 0; top: 0; width: 1080px; height: 192px; display: flex; align-items: center; justify-content: center; gap: 22px; visibility: hidden; }
.bn-scene .sc-blogo { width: 104px; height: 104px; flex: none; }
.bn-scene.lg-mascot .sc-blogo { width: 168px; height: 168px; }
.bn-scene .sc-blogo svg, .bn-scene .sc-logo svg, .bn-scene .sc-ico svg { width: 100%; height: 100%; overflow: visible; display: block; }
.bn-scene .sc-btxt { display: flex; flex-direction: column; gap: 10px; min-width: 420px; }
.bn-scene .sc-track { font: 600 32px/1 var(--f-clean); color: #f3eee8; text-transform: uppercase; white-space: nowrap; }
.bn-scene .sc-sub { font: 600 14px/1 var(--f-clean); letter-spacing: .42em; color: var(--acc); white-space: nowrap; }
.bn-scene .sc-badge { right: 40px; top: 50px; display: flex; flex-direction: column; align-items: center; padding: 10px 18px 9px; background: var(--acc); color: #0b0a0e;
  font: italic 900 22px/1.02 var(--f-shout); border-radius: 12px; border: 3px solid #fff; box-shadow: 0 6px 0 rgba(0,0,0,.5); visibility: hidden; }
.bn-scene .sc-logo { left: 150px; top: 0; width: 360px; height: 192px; display: grid; place-items: center; visibility: hidden; }
.bn-scene.lg-mascot .sc-logo svg { width: 188px; height: 188px; }
.bn-scene .sc-item { left: 520px; top: 0; width: 540px; height: 192px; display: flex; align-items: center; gap: 14px; visibility: hidden; }
.bn-scene .sc-ico { position: relative; width: 112px; height: 112px; flex: none; transform-origin: 50% 50%; }
.bn-scene .sc-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bn-scene .sc-b { display: flex; align-items: center; gap: 16px; font: 800 38px/1 var(--f-clean); color: #fff; white-space: nowrap; }
.bn-scene .sc-l { font: 500 19px/1.1 var(--f-clean); letter-spacing: .14em; color: rgba(243,238,232,.78); text-transform: uppercase; white-space: nowrap; }
.bn-scene .sc-l em { font-style: normal; font-weight: 800; color: var(--acc); }
.bn-scene .sc-pill { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 9px 20px; border-radius: 999px; font: 500 18px/1 var(--f-clean); color: #fff;
  background: linear-gradient(180deg, #2c2933, #141218); border: 2px solid rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.5); transform-origin: 50% 50%; }
.bn-scene .sc-pill b { font-weight: 800; }
.bn-scene .sc-pill.press { background: var(--acc); color: #0b0a0e; border-color: #fff; }
.bn-scene .sc-hand { position: absolute; right: -10px; bottom: -20px; width: 26px; height: 30px; opacity: 0; }
.bn-scene .sc-hand svg { width: 100%; height: 100%; display: block; }
.bn-scene .sc-wiper { inset: 0; overflow: hidden; pointer-events: none; }
.bn-scene .sc-wiper i { position: absolute; top: -30px; height: 252px; opacity: 0; }
.bn-scene .sc-wiper .w1 { width: 300px; background: var(--acc); }
.bn-scene .sc-wiper .w2 { width: 150px; background: #0b0a0e; border-left: 6px solid #fff; }
.bn-scene .sc-line { left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--acc) 30%, var(--acc) 70%, transparent); opacity: .75; }
.bn-scene .sc-line.top { top: 0; } .bn-scene .sc-line.bot { bottom: 0; opacity: .35; }

/* ================= 3D RANK ICONS ================= */
.rk3d { position: absolute; inset: 0; }
.rk3d .rk-rays { position: absolute; left: 50%; top: 46%; width: 150%; aspect-ratio: 1; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rg, #ffcf4a) 55%, transparent) 0deg 6deg, transparent 6deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 62%); mask-image: radial-gradient(circle, #000 20%, transparent 62%); }
.rk3d .rk-ring { position: absolute; left: 50%; top: 46%; width: 86%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--rg, #ff5874);
  box-shadow: 0 0 18px var(--rg, #ff5874), inset 0 0 12px var(--rg, #ff5874); opacity: 0; pointer-events: none; }
.rk3d .rk-tier { position: absolute; inset: 0; perspective: 520px; display: none; }
.rk3d .rk-glow { position: absolute; left: 50%; top: 46%; width: 92%; aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--g) 70%, transparent) 0%, color-mix(in srgb, var(--g) 22%, transparent) 38%, transparent 66%); }
.rk3d .rk-shadow { position: absolute; left: 50%; bottom: 3%; width: 54%; height: 12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.85), rgba(0,0,0,0)); }
.rk3d .rk-card { position: absolute; left: 50%; top: 46%; height: 84%; aspect-ratio: 1; transform-style: preserve-3d; }
.rk3d .rk-l { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: visible; }
.rk3d .rk-l:not(.front) { filter: brightness(.28) saturate(1.4); }
.rk3d .rk-l img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rk3d .rk-l.front img, .rk3d .rk-l.front svg { filter: drop-shadow(0 0 2px rgba(255,255,255,.7)) drop-shadow(0 0 10px var(--g)) contrast(1.08) saturate(1.15); }
.rk3d .rk-shine { position: absolute; inset: 0; opacity: 0; transform: translateZ(.5px); pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%) 160% 0 / 250% 100% no-repeat;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.rk3d .rk-spk { position: absolute; width: 22px; height: 22px; background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 6px #ffcf4a); }

/* ================= W/L, music ================= */
.ov-score, .ov-music { position: absolute; }
.ov-score svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ov-score .sb-n, .ov-score [data-k] { transform-box: fill-box; transform-origin: 50% 60%; }
.sb-pop { animation: sb-pop .7s cubic-bezier(.2,1.5,.4,1); }
@keyframes sb-pop { 0% { transform: scale(1.45); filter: brightness(2.2); } 100% { transform: scale(1); filter: none; } }
.ov-music { display: flex; align-items: center; gap: 14px; padding: 0 20px; border: 2px dashed rgba(var(--flame-rgb),.4); border-radius: 14px; color: rgba(243,238,232,.6); }
.ov-music:empty { border: 0; }
.ov-music span { font-size: 40px; color: var(--flame); }
.ov-music b { font: 700 18px/1 var(--f-hud); letter-spacing: .2em; }
.ov-music small { margin-left: auto; font: 600 13px/1 var(--f-hud); letter-spacing: .1em; }

/* ================= band items, captions, compact queue, music frame ================= */
.ov-band [hidden] { display: none !important; }
.ov-band .itm { display: inline-flex; align-items: center; gap: 7px; position: relative; padding-left: 16px; }
.ov-band .itm::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--flame); transform: rotate(45deg); }
.ov-band .itm svg { width: 22px; height: 22px; }
.ov-band .live .timer { font: 600 29px/1 var(--f-num); letter-spacing: .06em; padding: 3px 0 0 8px; margin-left: 2px; border-left: 1px solid rgba(255,255,255,.45); font-weight: 600; }
.ov-band .live .timer.paused { opacity: .6; }
.ov-band .clock { color: #fff; }
.ov-band .clock svg { color: var(--flame); margin-top: -2px; }
.ov-band .clock b { font: 600 30px/1 var(--f-num); letter-spacing: .04em; padding-top: 3px; font-weight: 600; }
.ov-band .clock small { font: 700 16px/1 var(--f-hud); letter-spacing: .12em; color: var(--muted); padding-top: 1px; }
.ov-band .yt b { font: 600 30px/1 var(--f-num); letter-spacing: .04em; padding-top: 3px; color: #fff; }
.ov-band .yt svg { width: 28px; height: 28px; margin-top: -2px; }
.ov-caption { position: absolute; display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 19px/1 var(--f-hud); letter-spacing: .26em; color: rgba(243,238,232,.75); text-transform: uppercase; white-space: nowrap; }
.ov-caption b { color: var(--bone); font-weight: 700; }
.ov-caption i { flex: 0 1 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--crimson)); }
.ov-caption i:last-child { background: linear-gradient(90deg, var(--crimson), transparent); }
.ov-queue .bal { font: 600 22px/1 var(--f-num); color: var(--gold); padding-top: 3px; white-space: nowrap; }
.ov-queue .bal small { font-size: 14px; margin-left: 2px; color: var(--muted); }

.ov-queue.compact { --cut: 16px; padding: 12px 16px 10px; gap: 6px; }
.ov-queue.compact .q-head { align-items: center; }
.ov-queue.compact .ov-h { font-size: 34px; }
.ov-queue.compact .q-open { font-size: 12px; margin-bottom: 4px; }
.ov-queue.compact .q-prices { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 260px; }
.ov-queue.compact .ov-chip { font-size: 14px; padding: 4px 8px 2px; }
.ov-queue.compact .ov-chip b { font-size: 18px; }
.ov-queue.compact .q-cols { gap: 5px; }
.ov-queue.compact section { gap: 3px; }
.ov-queue.compact .ov-lbl { font-size: 13px; }
.ov-queue.compact ol.slots { display: flex; flex-direction: column; gap: 3px; }
.ov-queue.compact .slot { height: 27px; gap: 8px; padding-right: 8px; }
.ov-queue.compact .slot .ix { width: 26px; font-size: 19px; }
.ov-queue.compact .slot .nm { flex: 0 1 auto; font-size: 19px; max-width: 200px; }
.ov-queue.compact .slot .mid, .ov-queue.compact .nx .mid { flex: 1; min-width: 0; font: 600 15px/1 var(--f-num); letter-spacing: .06em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px; }
.ov-queue.compact .slot .mid::before, .ov-queue.compact .nx .mid::before { content: "ID "; color: var(--flame); font-family: var(--f-hud); font-weight: 700; font-size: 11px; letter-spacing: .14em; }
.ov-queue.compact .slot.is-empty .nm { font-size: 12px; letter-spacing: .2em; }
.ov-queue.compact .bal { font-size: 18px; margin-left: auto; }
.ov-queue.compact section:last-child ol { display: flex; flex-direction: column; gap: 2px; }
.ov-queue.compact .nx { height: 22px; gap: 8px; border: 0; }
.ov-queue.compact .nx .no { font-size: 18px; width: 26px; }
.ov-queue.compact .nx .nm { flex: 0 1 auto; font-size: 17px; max-width: 200px; }
.ov-queue.compact .nx .g { display: none; }
.ov-queue.compact .nx.more { height: 18px; font-size: 12px; }
/* compact queue: 1-2 left column, 3-4 right column */
.ov-queue.compact section:last-child ol.q2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 14px; row-gap: 4px; }
.ov-queue.compact ol.q2 .nx { min-width: 0; }
.ov-queue.compact ol.q2 .nx .nm { max-width: none; flex: 0 1 auto; }
.ov-queue.compact ol.q2 .nx .mid { flex: 1 1 0; min-width: 0; }
.ov-queue .ov-lbl .q-more { font-style: normal; font: 700 12px/1 var(--f-hud); letter-spacing: .16em; color: var(--muted); margin-left: auto; margin-right: 8px; }
.ov-queue.compact .q-empty { padding: 2px 0; font-size: 15px; }

.ov-music { --cut: 14px; border: 0; padding: 0; border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: linear-gradient(135deg, var(--crimson), rgba(var(--flame-rgb), .25) 40%, rgba(var(--flame-rgb), .15) 60%, var(--crimson)); }
.ov-music::before { content: ""; position: absolute; inset: 2px; background: rgba(8, 3, 5, .55);
  clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px)); }
.ov-music .mu-tab { position: absolute; left: 18px; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px;
  background: var(--crimson); color: #fff; font: 700 12px/1 var(--f-hud); letter-spacing: .26em; }
.ov-music .mu-tab svg { width: 13px; height: 13px; }
.ov-music .mu-demo { position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px/1 var(--f-hud); letter-spacing: .2em; color: var(--muted); }

/* thank-you pop (Sociabuzz order) */
.q-alert { position: absolute; z-index: 6; height: 52px; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(180deg, #fff6cf, #ffd84f 46%, #ffb300 56%, #e58c00); color: #3a0009; box-shadow: 0 0 0 3px #1a0206, 0 10px 24px rgba(0,0,0,.5), 0 0 24px rgba(255,207,74,.6);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); animation: q-alert 6s cubic-bezier(.2,1.4,.4,1) forwards; }
.q-alert b { font: 400 26px/1 var(--f-disp); letter-spacing: .02em; }
.q-alert span { font: 800 22px/1 var(--f-clean); max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-alert i { font: 400 24px/1 var(--f-disp); font-style: normal; background: #3a0009; color: #ffd84f; padding: 5px 10px 3px; transform: skewX(-12deg); }
@keyframes q-alert { 0% { transform: translateY(20px) scale(.6); opacity: 0; } 8% { transform: none; opacity: 1; } 88% { transform: none; opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }

/* song now playing in the LIVE band */
.ov-band .np { color: #fff; text-transform: none; letter-spacing: .03em; font: 700 22px/1 var(--f-hud); min-width: 0; }
.ov-band .np svg { color: var(--flame); flex: none; width: 19px; height: 19px; margin-top: -1px; }
.ov-band .np .npw { width: 430px; overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent); }
.ov-band .np .npt { display: inline-flex; padding-top: 2px; will-change: transform; }
.ov-band .np .nps { display: inline-block; min-width: 430px; padding-right: 64px; font-weight: 700; }
.ov-band .live .timer.paused { opacity: .55; }
/* VVIP star in the overlay queue */
.ov-card .bal .vv, .vv { color: #ffd84f; font-style: normal; margin-right: 2px; }

/* role badges (EXP / JUNGLE / MID / GOLD / ROAM) */
.rl { flex: none; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: 2px; filter: drop-shadow(0 0 4px rgba(0,0,0,.6)); }
.rl svg { width: 100%; height: 100%; }
.rl.rl-txt { width: auto; height: auto; font: 700 11px/1 var(--f-hud); padding: 3px 5px 2px; }
.rl-exp { color: #ff7a45; } .rl-jungle { color: #3ddc84; } .rl-mid { color: #b388ff; } .rl-gold { color: #ffcf4a; } .rl-roam { color: #4fc3f7; }

/* song requests (IndoFinity) under the Mabar queue */
.ov-songs { position: absolute; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 10px; background: linear-gradient(180deg, rgba(20, 6, 10, .82), rgba(10, 3, 6, .82));
  border: 1px solid rgba(var(--flame-rgb), .45); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.ov-songs .sr-h { display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--f-hud); letter-spacing: .24em; color: var(--flame); }
.ov-songs .sr-h svg { width: 14px; height: 14px; }
.ov-songs .sr-h i { margin-left: auto; font: 600 18px/1 var(--f-num); font-style: normal; letter-spacing: 0; color: #fff; }
.ov-songs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ov-songs li { display: flex; align-items: baseline; gap: 10px; font: 700 18px/1.15 var(--f-hud); color: #f3eee8; min-width: 0; }
.ov-songs li .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-songs li .u { flex: none; font-size: 14px; color: var(--muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-songs li.now .t { color: #ffd84f; }
.ov-queue .ov-lbl .q-more + i { margin-left: 0; }

/* prices card in the small queue slot: 2-column tiles that always fit */
.ov-prices.compact { --cut: 16px; padding: 12px 16px 12px; gap: 8px; }
.ov-prices.compact .q-head { display: flex; align-items: flex-end; justify-content: space-between; }
.ov-prices.compact .q-open { font-size: 12px; margin-bottom: 4px; }
.ov-prices.compact .ov-h { font-size: 34px; }
.ov-prices .pt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ov-prices .pt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 6px 10px 4px; background: linear-gradient(90deg, rgba(var(--flame-rgb),.22), rgba(var(--flame-rgb),.05)); border-left: 3px solid var(--crimson); }
.ov-prices .pt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ov-prices .pt span { font: 700 14px/1 var(--f-hud); letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-prices .pt b { font: 400 28px/1 var(--f-disp); color: var(--bone); text-shadow: 2px 2px 0 var(--crimson); white-space: nowrap; }
.ov-prices .pt b small { font: 700 12px/1 var(--f-hud); letter-spacing: .08em; text-shadow: none; margin-left: 3px; color: var(--muted); }
.ov-prices .pt-svc { display: flex; gap: 14px; flex-wrap: wrap; font: 600 15px/1 var(--f-hud); letter-spacing: .04em; color: var(--muted); border-top: 1px dashed rgba(var(--flame-rgb),.3); padding-top: 7px; }
.ov-prices .pt-svc b { font: 400 20px/1 var(--f-disp); color: var(--flame); margin-left: 4px; }
/* Mabar VIP OPEN / CLOSED badge beside the title */
.q-tt { display: flex; align-items: center; gap: 12px; min-width: 0; }
.oc-b { flex: none; display: inline-flex; align-items: center; gap: 7px; font: 700 15px/1 var(--f-hud); letter-spacing: .22em; padding: 6px 10px 5px; transform: skewX(-10deg); }
.oc-b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.oc-b.open { color: var(--win); background: rgba(56,255,154,.12); border: 1px solid rgba(56,255,154,.55); }
.oc-b.open::before { box-shadow: 0 0 10px currentColor; animation: ov-blink 1.6s steps(2, jump-none) infinite; }
.oc-b.closed { color: #fff; background: var(--crimson); border: 1px solid var(--crimson); box-shadow: 0 0 14px rgba(255,35,80,.5); }
.ov-queue.compact .oc-b, .ov-prices.compact .oc-b { font-size: 12px; padding: 5px 8px 4px; }
.ov-queue .q-tt { flex-direction: column-reverse; align-items: flex-start; gap: 5px; }
.ov-queue .q-tt .ov-h { white-space: nowrap; }
.ov-queue.compact .oc-b { font-size: 11px; padding: 4px 8px 3px; letter-spacing: .24em; }
.ov-queue.compact .q-tt { gap: 3px; }
.ov-queue.compact .oc-b { font-size: 10px; padding: 3px 7px 2px; }
.ov-queue.compact .oc-b::before { width: 6px; height: 6px; }
.ov-queue.compact { padding-bottom: 8px; gap: 4px; }

/* ---------- landscape 1920x1080 (?layout=kiri | kanan | tengah) ---------- */
.ov-stage.land .ov-layer { width: 1920px; height: 1080px; }
/* tall queue card for the side column: header stacked, one long list */
.ov-queue.tall .q-head { flex-direction: column; align-items: stretch; gap: 8px; }
.ov-queue.tall .q-prices { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; max-width: none; }
.ov-queue.tall section:last-child ol { gap: 3px; }
.ov-queue.tall .nx { height: 26px; }
.ov-queue.tall .nx .nm { max-width: none; }
.ov-queue.tall .q-cols { gap: 10px; }
.ov-queue.tall .ov-h, .ov-prices.tall .ov-h { font-size: 38px; }
/* narrow column (tengah, 264 wide): no ML ID, smaller chips */
.ov-queue.narrow .mid { display: none; }
.ov-queue.narrow .ov-chip { font-size: 12px; padding: 3px 6px 2px; }
.ov-queue.narrow .ov-chip b { font-size: 15px; }
.ov-queue.narrow .slot .nm, .ov-queue.narrow .nx .nm { flex: 1; }
.ov-prices.tall .pt-grid { grid-template-columns: 1fr; }
.ov-prices.tall .pt:last-child:nth-child(odd) { grid-column: auto; }
.ov-prices.tall .pt-svc { flex-direction: column; gap: 6px; }
.ov-prices.tall .q-tt { flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
.ov-prices.tall .q-tt .ov-h { white-space: nowrap; }
/* landscape column: price chips on one line so more queue rows fit */
.ov-queue.tall:not(.narrow) .q-prices { flex-wrap: nowrap; gap: 4px; }
.ov-queue.tall:not(.narrow) .ov-chip { font-size: 11px; padding: 3px 6px 2px; white-space: nowrap; }
.ov-queue.tall:not(.narrow) .ov-chip b { font-size: 15px; }
/* landscape column queue in two columns: name only (no ML ID) so names stay readable */
.ov-queue.tall ol.q2 .mid { display: none; }
.ov-queue.tall ol.q2 .nx .nm { flex: 1; }

/* ================= WIN / LOSE EFFECTS (assets/fx.js) ================= */
.fx-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; overflow: hidden; }
.fx-layer canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.fx-title { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fx-title b { display: block; font-family: var(--f-disp); font-weight: 400; line-height: .9; letter-spacing: .04em; }
.fx-title span { font: 700 30px/1 var(--f-hud); letter-spacing: .2em; color: #fff; padding: 10px 22px 8px; transform: skewX(-12deg); opacity: 0; }
/* WIN */
.fx-win .fx-title b { background: linear-gradient(180deg, #fffbe0 0%, #ffe27a 35%, #ffcf4a 55%, #ff9a1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 7px 0 #6b2d00) drop-shadow(0 0 34px rgba(255, 207, 74, .85)); animation: fx-win-pop 3s cubic-bezier(.2, 1.6, .4, 1) both; }
.fx-win .fx-title span { background: linear-gradient(90deg, #b8860b, #ffcf4a, #b8860b); color: #1a0d00; animation: fx-sub 3s ease both; }
.fx-rays { position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 120, .55) 0deg 7deg, rgba(255, 220, 120, 0) 7deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.8) 30%, transparent 68%); mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.8) 30%, transparent 68%);
  animation: fx-rays 3s ease-out both; }
@keyframes fx-win-pop { 0% { transform: scale(.15) rotate(-8deg); opacity: 0; } 12% { transform: scale(1.18) rotate(2deg); opacity: 1; } 20% { transform: scale(1) rotate(0); } 82% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes fx-rays { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.3); } 15% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(70deg) scale(1.15); } }
@keyframes fx-sub { 0%, 14% { opacity: 0; transform: skewX(-12deg) translateY(20px); } 24% { opacity: 1; transform: skewX(-12deg) translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; } }
/* LOSE */
.fx-lose .fx-title b { position: relative; color: #fff; text-shadow: 6px 6px 0 #7a0014, 0 0 42px rgba(255, 35, 70, .95); animation: fx-slam 2.4s cubic-bezier(.3, 0, .2, 1) both; }
.fx-lose .fx-title b::before, .fx-lose .fx-title b::after { content: attr(data-t); position: absolute; inset: 0; text-shadow: none; opacity: 0; }
.fx-lose .fx-title b::before { color: #ff2346; clip-path: inset(0 0 58% 0); animation: fx-glitch-a .32s steps(3) .2s 3 both; }
.fx-lose .fx-title b::after { color: #4fe3ff; clip-path: inset(62% 0 0 0); animation: fx-glitch-b .28s steps(3) .26s 3 both; }
.fx-lose .fx-title span { background: #ff2346; animation: fx-sub 2.4s ease both; }
.fx-flash { position: absolute; inset: 0; background: #ff1e3c; animation: fx-flash .5s ease-out both; }
.fx-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 38%, rgba(160, 0, 24, .75) 100%); animation: fx-vig 2.2s ease-out both; }
.fx-ring { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 10px solid rgba(255, 60, 90, .9); box-shadow: 0 0 40px rgba(255, 35, 70, .9), inset 0 0 30px rgba(255, 35, 70, .7); animation: fx-ring .9s ease-out .08s both; }
.fx-cracks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.fx-cracks path { fill: none; stroke: #fff; stroke-width: 3; stroke-linejoin: bevel; filter: drop-shadow(0 0 6px #ff2346); stroke-dasharray: 800; stroke-dashoffset: 800; animation: fx-crack 2.2s ease-out .1s both; }
@keyframes fx-slam { 0% { transform: scale(3.2); opacity: 0; filter: blur(8px); } 9% { transform: scale(.94); opacity: 1; filter: blur(0); } 13% { transform: scale(1.06); } 17% { transform: scale(1); } 78% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(26px) scale(.97); } }
/* short flickers only: red top slice / cyan bottom slice jump, then gone */
@keyframes fx-glitch-a { 0% { opacity: .95; transform: translate(-14px, -3px); } 40% { opacity: .95; transform: translate(10px, 2px); } 60%, 100% { opacity: 0; transform: translate(0); } }
@keyframes fx-glitch-b { 0% { opacity: .9; transform: translate(14px, 3px); } 40% { opacity: .9; transform: translate(-8px, -2px); } 60%, 100% { opacity: 0; transform: translate(0); } }
@keyframes fx-flash { 0% { opacity: .55; } 100% { opacity: 0; } }
@keyframes fx-vig { 0% { opacity: 0; } 10% { opacity: 1; } 70% { opacity: .8; } 100% { opacity: 0; } }
@keyframes fx-ring { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(9); opacity: 0; } }
@keyframes fx-crack { 0% { stroke-dashoffset: 800; opacity: 1; } 25% { stroke-dashoffset: 0; } 75% { opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* whole overlay shakes on LOSE (left / top so the OBS scale transform stays) */
.ov-stage.fx-shake { animation: fx-shake .7s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes fx-shake { 0% { left: 0; top: 0; } 8% { left: -22px; top: 10px; } 18% { left: 20px; top: -12px; } 28% { left: -16px; top: 8px; } 40% { left: 12px; top: -6px; } 52% { left: -8px; top: 5px; } 66% { left: 5px; top: -3px; } 80% { left: -2px; top: 1px; } 100% { left: 0; top: 0; } }
/* score card */
.ov-score.fx-hit-win { animation: fx-card-win 1.1s ease-out both; }
.ov-score.fx-hit-lose { animation: fx-card-lose .8s ease-out both; }
@keyframes fx-card-win { 0% { transform: scale(1); filter: brightness(1); } 20% { transform: scale(1.12); filter: brightness(1.9) drop-shadow(0 0 30px #ffcf4a); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes fx-card-lose { 0%, 100% { transform: translateX(0); filter: none; } 15% { transform: translateX(-14px) rotate(-2deg); filter: brightness(1.6) drop-shadow(0 0 24px #ff2346); } 30% { transform: translateX(12px) rotate(2deg); } 45% { transform: translateX(-8px); } 60% { transform: translateX(5px); } }
/* MVP */
.fx-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(40, 8, 60, .35) 0%, rgba(8, 2, 14, .82) 75%); animation: fx-dim 4.2s ease both; }
.fx-spot { position: absolute; top: -10%; width: 46%; height: 120%; background: linear-gradient(180deg, rgba(255, 230, 150, .55), rgba(255, 207, 74, 0) 85%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); mix-blend-mode: screen; animation: fx-spot 4.2s ease both; }
.fx-spot.l { left: 2%; transform-origin: 50% 0; --rot: -18deg; } .fx-spot.r { right: 2%; transform-origin: 50% 0; --rot: 18deg; }
.fx-rays.mvp { background: repeating-conic-gradient(from 0deg, rgba(255, 207, 74, .55) 0deg 6deg, rgba(179, 136, 255, .35) 6deg 12deg, rgba(0,0,0,0) 12deg 24deg); animation: fx-rays 4.2s ease-out both; }
.fx-mvpbox { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; white-space: nowrap; }
.fx-crown { width: 190px; height: 128px; filter: drop-shadow(0 0 22px rgba(255, 207, 74, .9)); animation: fx-crown 4.2s cubic-bezier(.3, 1.6, .4, 1) both; }
.fx-mvpbox > b { font-family: var(--f-disp); font-weight: 400; line-height: .85; letter-spacing: .06em; margin-top: -8px;
  background: linear-gradient(100deg, #b07800 0%, #ffcf4a 30%, #fffbe0 45%, #ffcf4a 60%, #b07800 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 0 #4a1a6b) drop-shadow(0 0 40px rgba(179, 136, 255, .95)); animation: fx-mvp-pop 4.2s cubic-bezier(.2, 1.7, .4, 1) both, fx-shine 1.6s linear .5s 2; }
.fx-ribbon { position: relative; margin-top: 10px; padding: 14px 64px 12px; background: linear-gradient(90deg, #8a0016, #ff2346 30%, #ff2346 70%, #8a0016);
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); box-shadow: 0 0 30px rgba(255, 35, 70, .8); animation: fx-ribbon 4.2s cubic-bezier(.2, 1.4, .4, 1) both; }
.fx-ribbon::before { content: ""; position: absolute; inset: 4px 0; border-top: 3px solid #ffcf4a; border-bottom: 3px solid #ffcf4a; }
.fx-ribbon span { display: inline-flex; align-items: center; gap: 12px; font: 400 64px/1 var(--f-disp); letter-spacing: .05em; color: #fff; text-shadow: 3px 3px 0 #4a0010; }
.fx-ribbon .rl { width: 50px; height: 50px; margin: 0; filter: drop-shadow(0 0 6px #000); }
.fx-count { font: 700 40px/1 var(--f-hud); letter-spacing: .24em; color: #ffcf4a; text-shadow: 0 0 18px rgba(255, 207, 74, .8), 2px 2px 0 #000; animation: fx-sub 4.2s ease both; margin-top: 18px; }
.fx-count i { font: 400 72px/1 var(--f-num); font-style: normal; color: #fff; letter-spacing: 0; display: inline-block; margin-left: 10px; }
.fx-count i.pop { animation: fx-num-pop .6s cubic-bezier(.2, 2, .4, 1) both; color: #fffbe0; text-shadow: 0 0 26px #ffcf4a; }
.fx-mile { margin-top: 10px; font: 700 34px/1 var(--f-hud); letter-spacing: .12em; color: #1a0d00; background: linear-gradient(90deg, #ffcf4a, #fff3b0, #ffcf4a); padding: 12px 26px 10px;
  transform: skewX(-12deg); box-shadow: 0 0 34px rgba(255, 207, 74, .9); animation: fx-mile 1s ease-in-out 1.6s 3 both; }
.fx-mile.vv { background: linear-gradient(90deg, #b388ff, #e3d2ff, #b388ff); box-shadow: 0 0 34px rgba(179, 136, 255, .9); }
@keyframes fx-dim { 0% { opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-spot { 0% { opacity: 0; transform: rotate(var(--rot)) scaleY(.2); } 15% { opacity: 1; transform: rotate(calc(var(--rot) * -.4)) scaleY(1); } 50% { transform: rotate(calc(var(--rot) * .4)); } 85% { opacity: 1; } 100% { opacity: 0; transform: rotate(0); } }
@keyframes fx-crown { 0% { transform: translateY(-420px) rotate(-25deg); opacity: 0; } 18% { transform: translateY(0) rotate(0); opacity: 1; } 24% { transform: translateY(-14px) rotate(4deg); } 30% { transform: translateY(0) rotate(0); } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes fx-mvp-pop { 0%, 10% { transform: scale(.1); opacity: 0; } 22% { transform: scale(1.22); opacity: 1; } 30% { transform: scale(1); } 88% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes fx-shine { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes fx-ribbon { 0%, 22% { transform: scaleX(0); opacity: 0; } 34% { transform: scaleX(1.08); opacity: 1; } 40% { transform: scaleX(1); } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
@keyframes fx-num-pop { 0% { transform: scale(2.4); } 100% { transform: scale(1); } }
@keyframes fx-mile { 0%, 100% { transform: skewX(-12deg) scale(1); } 50% { transform: skewX(-12deg) scale(1.08); } }
/* KILL announcements: each kill has its own intro (.in-*), backdrop (.fk-*), icon and particles (assets/fx.js) */
.fx-kill .fk-svg, .fx-kill .fk-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.fx-kflash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, var(--ka) 0%, rgba(0,0,0,0) 70%); mix-blend-mode: screen; animation: fx-kflash .6s ease-out both; }
.fk-white { position: absolute; inset: 0; background: #fff; animation: fk-white .5s ease-out both; }
.fk-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.25) 0%, rgba(0,0,0,.7) 80%); animation: fk-dim var(--kd) ease both; }
.fk-dark { background: radial-gradient(ellipse at center, rgba(40,0,8,.55) 0%, rgba(0,0,0,.88) 75%); }
.fx-ring.k { border-color: var(--ka); box-shadow: 0 0 40px var(--ka), inset 0 0 30px var(--ka); }
/* title block */
.fx-ktitle { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; white-space: nowrap; animation: fk-out .45s ease-in calc(var(--kd) - 480ms) both; }
.fx-kicon { width: 150px; height: 150px; margin-bottom: -16px; filter: drop-shadow(0 0 16px var(--ka)) drop-shadow(0 4px 0 var(--kb)); animation: fk-icon .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.fx-kicon svg { width: 100%; height: 100%; overflow: visible; }
.fx-kword { position: relative; line-height: .9; transform: skewX(-10deg); }
.fx-kword .w { display: block; font-family: var(--f-disp); font-weight: 400; font-style: normal; letter-spacing: .04em; white-space: nowrap;
  background: linear-gradient(180deg, #fff 0%, #fff 38%, var(--ka) 62%, var(--kb) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 30px var(--ka)); }
.fx-kword .w + .w { position: absolute; left: 0; top: 0; width: 100%; }
.fx-kword .lt { background: none; }
.fx-kword .lt i { display: inline-block; font-style: normal; background: linear-gradient(180deg, #fff 0%, #fff 38%, var(--ka) 62%, var(--kb) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-ksub { margin-top: 10px; padding: 4px 22px; font: 700 34px/1 var(--f-disp); letter-spacing: .3em; color: var(--kb); background: var(--ka); transform: skewX(-10deg); box-shadow: 0 0 24px var(--ka); animation: fk-sub .5s cubic-bezier(.2, 1.5, .4, 1) .35s both; }
@keyframes fk-out { 0% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
@keyframes fk-icon { 0% { transform: scale(2.6) rotate(-90deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes fk-sub { 0% { transform: skewX(-10deg) scaleX(0); opacity: 0; } 100% { transform: skewX(-10deg) scaleX(1); opacity: 1; } }
@keyframes fx-kflash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fk-white { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes fk-dim { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* SOLO KILL: one katana cut, the word is sliced in half */
.fk-cut { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 4000; stroke-dashoffset: 4000; filter: drop-shadow(0 0 10px var(--ka)) drop-shadow(0 0 3px #fff); animation: fk-draw .22s cubic-bezier(.6, 0, .2, 1) both, fk-fade .5s ease 1s both; }
.fk-cutglow { fill: none; stroke: var(--ka); stroke-width: 60; opacity: 0; filter: blur(14px); animation: fk-cutglow .7s ease-out .15s both; }
.fk-cutflash { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(220,245,255,.35) 50%, transparent 60%); animation: fx-kflash .5s ease-out .1s both; }
.in-cut .h1 { clip-path: inset(0 0 50% 0); animation: fk-cut-a .32s cubic-bezier(.2, 1, .3, 1) .03s both, fk-cut-sa .3s ease-out 1.15s forwards; }
.in-cut .h2 { clip-path: inset(50% 0 0 0); animation: fk-cut-b .32s cubic-bezier(.2, 1, .3, 1) .03s both, fk-cut-sb .3s ease-out 1.15s forwards; }
.in-cut .fx-kword::after { content: ""; position: absolute; left: -12%; right: -12%; top: 50%; height: 5px; margin-top: -2px; background: #fff; box-shadow: 0 0 22px var(--ka), 0 0 6px #fff; transform: scaleX(0); animation: fk-cutline .3s ease-out 1.05s both; }
.in-cut .fx-kicon { animation: fk-icon-spin .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes fk-draw { to { stroke-dashoffset: 0; } }
@keyframes fk-fade { to { opacity: 0; } }
@keyframes fk-cutglow { 0% { opacity: .9; transform: scaleY(.2); } 100% { opacity: 0; transform: scaleY(1.5); } }
@keyframes fk-cut-a { 0% { transform: translateX(-130%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes fk-cut-b { 0% { transform: translateX(130%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes fk-cut-sa { to { transform: translate(-3%, -7px); } }
@keyframes fk-cut-sb { to { transform: translate(3%, 7px); } }
@keyframes fk-cutline { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes fk-icon-spin { 0% { transform: rotate(-540deg) scale(.2); opacity: 0; } 100% { transform: rotate(0) scale(1); opacity: 1; } }

/* FIRST BLOOD: blood drips from the top, word slams down */
.fk-drip { transform-box: fill-box; transform-origin: 50% 0; animation: fk-drip .9s cubic-bezier(.3, .8, .4, 1) var(--dd, 0ms) both, fk-fade .5s ease calc(var(--kd) - 600ms) forwards; }
.fk-splat { transform-box: fill-box; transform-origin: center; animation: fk-splat .25s cubic-bezier(.2, 1.8, .4, 1) var(--dd, 0ms) both, fk-fade .5s ease calc(var(--kd) - 600ms) forwards; }
.in-slam .w { animation: fk-slam .42s cubic-bezier(.3, 1.5, .5, 1) .05s both; }
.in-slam .fx-kicon { animation: fk-dropin .5s cubic-bezier(.5, 0, .8, .4) both, fk-squish .3s ease-out .5s both; }
@keyframes fk-drip { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@keyframes fk-splat { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes fk-slam { 0% { transform: translateY(-260%) scale(1.8); opacity: 0; } 45% { transform: translateY(0) scale(1.15, .78); opacity: 1; } 65% { transform: scale(.95, 1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes fk-dropin { 0% { transform: translateY(-500px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes fk-squish { 0% { transform: scale(1.3, .7); } 100% { transform: scale(1); } }

/* DOUBLE / TRIPLE: crossing slashes or claw marks, echo copies snap into the word */
.fk-sl { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 3000; stroke-dashoffset: 3000; filter: drop-shadow(0 0 14px var(--ka)) drop-shadow(0 0 4px #fff); animation: fk-draw .3s cubic-bezier(.6, 0, .2, 1) both, fk-fade .5s ease .8s both; }
.fk-sl.two { animation-delay: .16s, .9s; }
.fk-claw path { fill: none; stroke: var(--ka); stroke-width: 30; stroke-linecap: round; stroke-dasharray: 3000; stroke-dashoffset: 3000; filter: drop-shadow(0 0 16px var(--ka)); animation: fk-draw .28s cubic-bezier(.6, 0, .2, 1) var(--cd, 0ms) both; }
.fk-claw path.in { stroke: #12001f; stroke-width: 10; filter: none; }
.fk-claw { animation: fk-fade .6s ease 1.4s forwards; }
.in-echo .main { animation: fk-pop .4s cubic-bezier(.2, 1.6, .4, 1) .05s both, fk-blink .14s steps(1) .45s 3; }
.in-echo .echo { opacity: 0; animation: fk-echo .4s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes fk-pop { 0% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fk-echo { 0% { transform: translateX(var(--ex)) scale(1.1); opacity: .9; } 100% { transform: translateX(0) scale(1); opacity: 0; } }
@keyframes fk-blink { 50% { filter: drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 60px var(--ka)) brightness(1.8); } }

/* MANIAC: lightning + RGB glitch word */
.fk-bolts path { fill: none; stroke: #f3d6ff; stroke-width: 4; filter: drop-shadow(0 0 10px var(--ka)) drop-shadow(0 0 3px #fff); animation: fk-bolt .5s steps(2) 4 both; }
.fk-bolts path:nth-child(2n) { animation-delay: .12s; } .fk-bolts path:nth-child(3n) { animation-delay: .25s; }
.in-glitch .w { animation: fk-glin .5s steps(5) both; }
.in-glitch .w::before, .in-glitch .w::after { content: attr(data-t); position: absolute; left: 0; top: 0; background: none; -webkit-background-clip: border-box; background-clip: border-box; mix-blend-mode: screen; }
.in-glitch .w::before { color: rgba(0, 240, 255, .75); animation: fk-gl1 .32s steps(2) infinite; }
.in-glitch .w::after { color: rgba(255, 0, 200, .75); animation: fk-gl2 .27s steps(2) infinite; }
.in-glitch .fx-kicon { animation: fk-icon .5s cubic-bezier(.2, 1.6, .4, 1) both, fk-flick .1s steps(1) .5s 10; }
@keyframes fk-bolt { 0% { opacity: 1; } 50% { opacity: .05; } 100% { opacity: 0; } }
@keyframes fk-glin { 0% { clip-path: inset(40% 0 45% 0); transform: translateX(-30px); opacity: 1; } 20% { clip-path: inset(0 0 70% 0); transform: translateX(25px); } 40% { clip-path: inset(60% 0 5% 0); transform: translateX(-12px); } 60% { clip-path: inset(10% 0 30% 0); transform: translateX(8px); } 80% { clip-path: inset(0 0 0 0); transform: translateX(-3px); } 100% { clip-path: inset(0 0 0 0); transform: none; opacity: 1; } }
@keyframes fk-gl1 { 0% { transform: translate(-6px, 2px); clip-path: inset(0 0 60% 0); } 50% { transform: translate(5px, -2px); clip-path: inset(50% 0 0 0); } 100% { transform: translate(-3px, 0); clip-path: inset(20% 0 40% 0); } }
@keyframes fk-gl2 { 0% { transform: translate(6px, -2px); clip-path: inset(55% 0 0 0); } 50% { transform: translate(-5px, 3px); clip-path: inset(0 0 45% 0); } 100% { transform: translate(3px, 0); clip-path: inset(30% 0 30% 0); } }
@keyframes fk-flick { 50% { opacity: .2; } }

/* SAVAGE: the screen burns, the word ignites */
.fk-heat { position: absolute; background: linear-gradient(0deg, rgba(255,90,0,.75) 0%, rgba(255,40,0,.35) 25%, transparent 55%); mix-blend-mode: screen; animation: fk-heat var(--kd) ease both; }
.in-burn .w { background: linear-gradient(0deg, #ff3d00 0%, #ff9a1f 30%, #fff1a8 55%, #fff 70%, #ff9a1f 100%); background-size: 100% 260%; -webkit-background-clip: text; background-clip: text;
  animation: fk-burn .45s cubic-bezier(.2, 1.2, .4, 1) both, fk-flame .5s linear infinite, fk-kpulse .18s ease-in-out .9s 6 alternate; }
.in-burn .fx-kicon { animation: fk-icon .6s cubic-bezier(.2, 1.6, .4, 1) both, fk-flick .12s steps(1) .7s 6; }
@keyframes fk-heat { 0% { opacity: 0; transform: translateY(40%); } 20% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fk-burn { 0% { transform: scale(.5); filter: blur(16px) brightness(3) drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 30px var(--ka)); opacity: 0; } 100% { transform: scale(1); filter: blur(0) brightness(1) drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 30px var(--ka)); opacity: 1; } }
@keyframes fk-flame { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }
@keyframes fk-kpulse { from { filter: drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 30px var(--ka)); } to { filter: drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 80px var(--ka)) brightness(1.4); } }

/* SHUT DOWN: TV switch-off, frost creeps in, the word freezes and shivers */
.fk-crt { position: absolute; background: #fff; box-shadow: 0 0 60px var(--ka); animation: fk-crt .55s cubic-bezier(.7, 0, .3, 1) both; }
.fk-frost { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(150,225,255,.45) 75%, rgba(235,252,255,.9) 100%); animation: fk-dim var(--kd) ease .25s both; }
.fk-ice path { fill: none; stroke: rgba(235,252,255,.9); stroke-width: 3; stroke-dasharray: 2000; stroke-dashoffset: 2000; filter: drop-shadow(0 0 6px var(--ka)); animation: fk-draw .7s ease-out .3s both, fk-fade .5s ease calc(var(--kd) - 600ms) forwards; }
.in-freeze .w { background: linear-gradient(180deg, #fff 0%, #e8fbff 45%, var(--ka) 70%, #2a8ab0 100%); -webkit-background-clip: text; background-clip: text;
  animation: fk-freeze .35s cubic-bezier(.2, 1.4, .4, 1) .08s both, fk-shiver .07s linear .8s 10; }
.in-freeze .fx-kicon { animation: fk-icon .5s cubic-bezier(.2, 1.6, .4, 1) .25s both; }
@keyframes fk-crt { 0% { transform: scale(1, 1); opacity: .85; } 45% { transform: scale(1, .006); opacity: 1; } 75% { transform: scale(.02, .006); opacity: 1; } 100% { transform: scale(0, 0); opacity: 0; } }
@keyframes fk-freeze { 0% { transform: scale(1.7); opacity: 0; filter: blur(8px) drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 30px var(--ka)); } 100% { transform: scale(1); opacity: 1; filter: blur(0) drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 30px var(--ka)); } }
@keyframes fk-shiver { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* KILLING SPREE: manga speed lines, word zooms in from the camera */
.fk-speed { fill: rgba(255,255,255,.6); transform-origin: center; animation: fk-speed .12s steps(2) infinite, fk-dim var(--kd) ease both; }
.fk-speed path:nth-child(3n) { fill: var(--ka); }
.in-zoom .w { animation: fk-zoom .45s cubic-bezier(.1, .9, .2, 1) both; }
@keyframes fk-speed { 0% { opacity: .9; } 50% { opacity: .55; } }
@keyframes fk-zoom { 0% { transform: scale(6); opacity: 0; filter: blur(18px) drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 30px var(--ka)); } 100% { transform: scale(1); opacity: 1; filter: blur(0) drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 30px var(--ka)); } }

/* MONSTER KILL: claws, the word falls and stomps, ground cracks */
.fk-cracks path { fill: none; stroke: #0a0f05; stroke-width: 7; stroke-linejoin: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; filter: drop-shadow(0 0 8px var(--ka)); animation: fk-draw .5s ease-out .38s both, fk-fade .5s ease calc(var(--kd) - 600ms) forwards; }
.fk-monster .fk-claw path { stroke-width: 40; }
.in-stomp .w { animation: fk-stomp .32s cubic-bezier(.55, 0, .8, .5) both, fk-land .3s cubic-bezier(.2, 1.6, .4, 1) .22s both; }
.in-stomp .fx-kicon { animation: fk-icon .5s cubic-bezier(.2, 1.6, .4, 1) .4s both, fk-blinkeye 1s ease .9s both; }
@keyframes fk-stomp { 0% { transform: translateY(-320%); opacity: 1; } 69% { transform: translateY(0); } 100% { transform: translateY(0); } }
@keyframes fk-land { 0% { transform: scale(1.3, .62); } 60% { transform: scale(.94, 1.08); } 100% { transform: scale(1); } }
@keyframes fk-blinkeye { 0%, 40%, 60%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } }

/* MEGA KILL: white-out explosion, triple shockwave */
.in-blast .w { animation: fk-blast .6s cubic-bezier(.2, 1.6, .4, 1) .05s both; }
@keyframes fk-blast { 0% { transform: scale(0); opacity: 0; filter: brightness(4) drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 30px var(--ka)); } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); filter: brightness(1) drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 30px var(--ka)); } }

/* UNSTOPPABLE: horizontal speed streaks, the word charges in from the right and leaves left */
.fk-hspeed { position: absolute; inset: 0; animation: fk-dim var(--kd) ease both; }
.fk-hspeed i { position: absolute; left: 100%; background: linear-gradient(90deg, transparent, #fff); border-radius: 4px; animation: fk-hs .35s linear infinite; }
.fx-ktitle.in-rush { animation: fk-out-rush .3s cubic-bezier(.6, 0, .9, .4) calc(var(--kd) - 360ms) both; }
.in-rush .fx-kword, .in-rush .fx-kicon { animation: fk-rush .42s cubic-bezier(.1, .8, .2, 1) both; }
.in-rush .fx-kicon { animation-delay: .08s; }
@keyframes fk-hs { 0% { transform: translateX(0); } 100% { transform: translateX(-2600px); } }
@keyframes fk-rush { 0% { transform: translateX(170%) skewX(-35deg); opacity: 0; filter: blur(10px); } 70% { transform: translateX(-5%) skewX(8deg); opacity: 1; filter: blur(0); } 100% { transform: skewX(-10deg); opacity: 1; } }
@keyframes fk-out-rush { 0% { transform: translate(-50%, -50%); opacity: 1; } 100% { transform: translate(-260%, -50%) skewX(-30deg); opacity: 0; } }

/* GODLIKE: heaven rays from above, the word rises in holy light */
.fk-heaven { position: absolute; width: 0; height: 0; }
.fk-heaven i { position: absolute; left: 0; top: -40px; height: 2200px; margin-left: -60px; transform-origin: 50% 0; transform: rotate(var(--r));
  background: linear-gradient(180deg, rgba(255,250,220,.95), rgba(255,230,128,.35) 45%, transparent 75%); filter: blur(10px); mix-blend-mode: screen; animation: fk-beam var(--kd) ease both; }
.fk-holy { position: absolute; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; background: radial-gradient(circle, rgba(255,250,220,.75) 0%, rgba(255,230,128,.3) 35%, transparent 65%); mix-blend-mode: screen; animation: fk-dim var(--kd) ease both; }
.in-rise .w { background: linear-gradient(180deg, #fff 0%, #fffbe8 45%, var(--ka) 75%, #b08a1a 100%); -webkit-background-clip: text; background-clip: text;
  animation: fk-rise .55s cubic-bezier(.2, .8, .3, 1) .02s both, fk-kpulse 1s ease-in-out 1.3s 2 alternate; }
.in-rise .fx-kicon { animation: fk-float 1.2s ease-out both; }
@keyframes fk-beam { 0% { opacity: 0; transform: rotate(var(--r)) scaleY(.1); } 18% { opacity: 1; transform: rotate(var(--r)) scaleY(1); } 50% { transform: rotate(calc(var(--r) * 1.15)); } 85% { opacity: .9; } 100% { opacity: 0; transform: rotate(var(--r)); } }
@keyframes fk-rise { 0% { transform: translateY(90px); opacity: 0; filter: blur(12px) brightness(2.5) drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 30px var(--ka)); } 100% { transform: translateY(0); opacity: 1; filter: blur(0) brightness(1) drop-shadow(5px 6px 0 var(--kb)) drop-shadow(0 0 30px var(--ka)); } }
@keyframes fk-float { 0% { transform: translateY(-160px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* LEGENDARY: rotating gold sunburst, letters pop one by one, gold shine */
.fk-sun { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,207,74,.42) 0deg 7deg, rgba(120,60,200,.12) 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); animation: fk-sun 7s linear both, fk-dim var(--kd) ease both; }
.in-letters .lt i { animation: fk-let .36s cubic-bezier(.2, 1.8, .4, 1) calc(var(--i) * 35ms) both, fk-shine 1.2s ease calc(var(--i) * 50ms + 1.1s) 2; background-size: 100% 100%, 300% 100%; }
.in-letters .lt i { background-image: linear-gradient(180deg, #fff 0%, #fff 38%, var(--ka) 62%, var(--kb) 100%), linear-gradient(100deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%); background-position: 0 0, 150% 0; }
.in-letters .fx-kicon { animation: fk-crown .8s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes fk-sun { 0% { transform: translate(-50%, -50%) rotate(0) scale(.4); } 15% { transform: translate(-50%, -50%) rotate(30deg) scale(1); } 100% { transform: translate(-50%, -50%) rotate(140deg) scale(1.05); } }
@keyframes fk-let { 0% { transform: translateY(-60px) scale(0) rotate(-35deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fk-shine { 0% { background-position: 0 0, 150% 0; } 100% { background-position: 0 0, -150% 0; } }
@keyframes fk-crown { 0% { transform: translateY(-420px) rotate(-25deg); opacity: 0; } 70% { transform: translateY(0) rotate(4deg); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* RAMPAGE: red heartbeat vignette, the word trembles with rage */
.fk-redpulse { position: absolute; inset: 0; background: rgba(120,0,0,.22); box-shadow: inset 0 0 260px 90px rgba(255,0,0,.75); animation: fk-heart .55s ease-out 5 both, fk-dim var(--kd) ease both; }
.in-tremble .w { animation: fk-punch .35s cubic-bezier(.2, 1.6, .4, 1) both, fk-tremble .06s linear .35s infinite, fk-kpulse .27s ease-in-out .35s 8 alternate; }
.in-tremble .fx-kicon { animation: fk-punch .35s cubic-bezier(.2, 1.6, .4, 1) .1s both, fk-tremble .07s linear .4s infinite; }
@keyframes fk-heart { 0% { opacity: .5; } 15% { opacity: 1; } 100% { opacity: .5; } }
@keyframes fk-punch { 0% { transform: scale(3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fk-tremble { 0% { transform: translate(0, 0); } 25% { transform: translate(-4px, 2px); } 50% { transform: translate(3px, -3px); } 75% { transform: translate(-2px, -2px); } 100% { transform: translate(3px, 2px); } }

/* WIPED OUT: blackout, the screen shatters like glass, letters fall apart */
.fk-glass path { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2.5; stroke-dasharray: 3000; stroke-dashoffset: 3000; filter: drop-shadow(0 0 4px var(--ka)); animation: fk-draw .35s cubic-bezier(.2, .8, .3, 1) .15s both, fk-fade .5s ease calc(var(--kd) - 700ms) forwards; }
.fx-ktitle.in-shatter { animation: none; }
.in-shatter .lt i { animation: fk-shin .3s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i) * 18ms + .04s) both, fk-shfall .9s cubic-bezier(.5, 0, .9, .5) calc(var(--kd) - 950ms + var(--i) * 30ms) forwards; }
.in-shatter .fx-kicon { animation: fk-icon .5s cubic-bezier(.2, 1.6, .4, 1) both, fk-fade .4s ease calc(var(--kd) - 900ms) forwards; }
.in-shatter .fx-ksub { animation: fk-sub .5s cubic-bezier(.2, 1.5, .4, 1) .5s both, fk-fade .4s ease calc(var(--kd) - 900ms) forwards; }
.fk-wiped .fx-kicon svg ellipse { animation: fk-flick .15s steps(1) .5s 8; }
@keyframes fk-shin { 0% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fk-shfall { 0% { transform: none; opacity: 1; } 100% { transform: translate(var(--dx), 700px) rotate(var(--dr)); opacity: 0; } }

.ov-stage.fx-shake-s { animation: fx-shake-s .45s ease both; }
@keyframes fx-shake-s { 0% { left: 0; top: 0; } 20% { left: -9px; top: 4px; } 40% { left: 8px; top: -4px; } 60% { left: -5px; top: 2px; } 80% { left: 3px; top: -1px; } 100% { left: 0; top: 0; } }
.ov-stage.fx-shake-r { animation: fx-shake-r .11s linear 15 both; }
@keyframes fx-shake-r { 0% { left: 0; top: 0; } 25% { left: -6px; top: 3px; } 50% { left: 5px; top: -4px; } 75% { left: -4px; top: -2px; } 100% { left: 0; top: 0; } }