/* Эффекты больших экранов робобоёв: заставки матчей, анимированная сетка,
   секретный персонаж. Цвета берутся из эмблем команд (--c). */
:root {
  --rfx-red: #e0564a; --rfx-blue: #4a90e0; --rfx-green: #3fb564; --rfx-amber: #d99a2b; --rfx-none: #8f9ba6;
  --rfx-bg: #0b0e12;
}

.rfx-overlay {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: var(--rfx-bg); color: #fff; font-family: var(--font-display, var(--font-body, system-ui));
  animation: rfx-fade-in .25s ease-out both;
}
.rfx-overlay.rfx-leaving { animation: rfx-fade-out .6s ease-in both; }
@keyframes rfx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rfx-fade-out { from { opacity: 1; } to { opacity: 0; } }

.rfx-avatar {
  width: var(--rfx-size, 180px); height: var(--rfx-size, 180px); border-radius: 50%;
  background: color-mix(in oklab, var(--c) 35%, #10141a); display: grid; place-items: center; overflow: hidden;
  border: 6px solid var(--c); box-shadow: 0 0 0 6px color-mix(in oklab, var(--c) 30%, transparent), 0 0 60px color-mix(in oklab, var(--c) 70%, transparent);
}
.rfx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rfx-avatar .rfx-initials { font-size: calc(var(--rfx-size, 180px) * .36); font-weight: 600; color: #fff; }
.rfx-name { margin-top: .5em; font-size: clamp(20px, 3.2vmin, 46px); line-height: 1.1; text-align: center; font-weight: 500; text-shadow: 0 2px 12px rgb(0 0 0 / .6); max-width: 28vw; }
.rfx-id { margin-top: .25em; font-size: clamp(14px, 2vmin, 26px); color: rgb(255 255 255 / .85); letter-spacing: .08em; text-align: center; text-shadow: 0 1px 8px rgb(0 0 0 / .7); }
.rfx-label { opacity: 0; transform: translateY(14px); animation: rfx-label-in .5s ease-out forwards; }
@keyframes rfx-label-in { to { opacity: 1; transform: none; } }

/* ---------- 3–4 участника: крест из углов ---------- */
.rfx-quad svg.rfx-x { position: absolute; inset: 0; width: 100%; height: 100%; }
.rfx-quad .rfx-sector { opacity: 0; animation: rfx-sector-in .6s ease-out .45s forwards; }
@keyframes rfx-sector-in { to { opacity: 1; } }
.rfx-quad .rfx-ray {
  fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 10px rgb(255 255 255 / .8));
  animation: rfx-draw .55s cubic-bezier(.6, 0, .3, 1) forwards;
}
@keyframes rfx-draw { to { stroke-dashoffset: 0; } }
.rfx-quad .rfx-slot {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
  --rfx-size: clamp(110px, 21vmin, 260px);
}
.rfx-quad .rfx-slot.top { left: 50%; top: 23%; }
.rfx-quad .rfx-slot.right { left: 80%; top: 50%; }
.rfx-quad .rfx-slot.bottom { left: 50%; top: 74%; }
/* в кресте низ занят нижней командой — подпись арены уходит в угол */
.rfx-quad .rfx-banner { left: 3vw; bottom: 3vh; transform: none; }
.rfx-quad .rfx-slot.left { left: 20%; top: 50%; }
.rfx-quad .rfx-pop { transform: scale(0); animation: rfx-pop .55s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes rfx-pop { to { transform: scale(1); } }
.rfx-quad .rfx-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0);
  width: clamp(90px, 15vmin, 180px); height: clamp(90px, 15vmin, 180px); border-radius: 50%;
  background: #fff; color: #0b0e12; display: grid; place-items: center; text-align: center;
  font-weight: 700; font-size: clamp(16px, 3vmin, 34px); line-height: 1; letter-spacing: .04em;
  box-shadow: 0 0 0 8px rgb(255 255 255 / .2), 0 0 80px rgb(255 255 255 / .6);
  animation: rfx-center-in .5s cubic-bezier(.3, 1.6, .5, 1) 1s forwards;
}
.rfx-quad .rfx-center small { display: block; font-size: .45em; font-weight: 500; letter-spacing: .1em; margin-top: .3em; }
@keyframes rfx-center-in { to { transform: translate(-50%, -50%) scale(1); } }

/* ---------- 1 на 1: «боксёрская» заставка ---------- */
.rfx-duel .rfx-half { position: absolute; inset: 0; }
.rfx-duel .rfx-half.left {
  clip-path: polygon(0 0, 57% 0, 43% 100%, 0 100%);
  background: radial-gradient(circle at 25% 55%, color-mix(in oklab, var(--c) 85%, #fff) 0%, var(--c) 30%, color-mix(in oklab, var(--c) 35%, #07090c) 75%),
              repeating-linear-gradient(115deg, rgb(255 255 255 / .06) 0 18px, transparent 18px 36px);
  background-blend-mode: overlay;
  animation: rfx-slide-l .5s cubic-bezier(.2, .9, .3, 1) both;
}
.rfx-duel .rfx-half.right {
  clip-path: polygon(57% 0, 100% 0, 100% 100%, 43% 100%);
  background: radial-gradient(circle at 75% 55%, color-mix(in oklab, var(--c) 85%, #fff) 0%, var(--c) 30%, color-mix(in oklab, var(--c) 35%, #07090c) 75%),
              repeating-linear-gradient(65deg, rgb(255 255 255 / .06) 0 18px, transparent 18px 36px);
  background-blend-mode: overlay;
  animation: rfx-slide-r .5s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes rfx-slide-l { from { transform: translateX(-100%); } }
@keyframes rfx-slide-r { from { transform: translateX(100%); } }
.rfx-duel .rfx-seam {
  position: absolute; left: 50%; top: -10%; width: 10px; height: 120%; background: #fff; transform: translateX(-50%) rotate(8.5deg);
  box-shadow: 0 0 40px 10px rgb(255 255 255 / .55); opacity: 0; animation: rfx-fade-in .2s ease-out .5s forwards;
}
.rfx-duel .rfx-fighter {
  position: absolute; top: 46%; display: flex; flex-direction: column; align-items: center;
  --rfx-size: clamp(150px, 36vmin, 440px);
}
.rfx-duel .rfx-fighter.left { left: 24%; transform: translate(-50%, -50%); }
.rfx-duel .rfx-fighter.right { left: 76%; transform: translate(-50%, -50%); }
.rfx-duel .rfx-fighter.left .rfx-mascot { animation: rfx-in-l .6s cubic-bezier(.2, 1.3, .4, 1) .3s both, rfx-guard-l 1.1s ease-in-out 1.1s infinite; }
.rfx-duel .rfx-fighter.right .rfx-mascot { animation: rfx-in-r .6s cubic-bezier(.2, 1.3, .4, 1) .3s both, rfx-guard-r 1.1s ease-in-out 1.1s infinite; }
@keyframes rfx-in-l { from { transform: translateX(-70vw) rotate(-25deg); } to { transform: rotate(-5deg); } }
@keyframes rfx-in-r { from { transform: translateX(70vw) rotate(25deg); } to { transform: rotate(5deg); } }
/* «стойка»: маскоты пружинят, как боксёры перед боем */
@keyframes rfx-guard-l { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-2deg) translate(2vmin, -1.5vmin); } }
@keyframes rfx-guard-r { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(2deg) translate(-2vmin, -1.5vmin); } }
.rfx-duel .rfx-vs {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(4) rotate(-20deg); opacity: 0;
  font-size: clamp(80px, 20vmin, 260px); font-weight: 800; font-style: italic; letter-spacing: -.04em; line-height: 1;
  color: #fff; -webkit-text-stroke: .04em #0b0e12; paint-order: stroke fill;
  text-shadow: 0 0 40px rgb(255 255 255 / .8), .06em .06em 0 #0b0e12;
  animation: rfx-vs-in .35s cubic-bezier(.5, 0, .7, 1.4) .95s forwards, rfx-vs-pulse 1.2s ease-in-out 1.6s infinite;
}
@keyframes rfx-vs-in { to { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 1; } }
@keyframes rfx-vs-pulse { 50% { transform: translate(-50%, -50%) scale(1.08) rotate(-8deg); } }
.rfx-duel .rfx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: rfx-flash .5s ease-out 1.25s; }
@keyframes rfx-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
.rfx-shake { animation: rfx-shake .45s ease-out 1.25s; }
@keyframes rfx-shake {
  10%, 50%, 90% { transform: translate(-1.2vmin, .6vmin); } 30%, 70% { transform: translate(1.2vmin, -.6vmin); } 100% { transform: none; }
}
.rfx-banner {
  position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%); padding: .35em 1.1em; border-radius: 999px;
  background: rgb(0 0 0 / .55); font-size: clamp(16px, 2.4vmin, 30px); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}

/* ---------- 1 участник ---------- */
.rfx-solo { display: grid; place-items: center; background: radial-gradient(circle, color-mix(in oklab, var(--c) 45%, var(--rfx-bg)), var(--rfx-bg) 70%); }
.rfx-solo .rfx-slot { display: flex; flex-direction: column; align-items: center; --rfx-size: clamp(150px, 34vmin, 380px); }

/* ---------- анимированная сетка ---------- */
.rfx-bracket-overlay { background: radial-gradient(ellipse at 50% 0%, #182029, var(--rfx-bg) 70%); padding: 4vh 3vw; display: flex; flex-direction: column; }
.rfx-bracket-overlay .rfx-title { font-size: clamp(22px, 4vmin, 56px); margin: 0 0 2vh; display: flex; gap: .6em; align-items: baseline; }
.rfx-bracket-overlay .rfx-title small { font-size: .5em; color: #9fb0bf; letter-spacing: .1em; text-transform: uppercase; }
.rfx-bracket-host { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.rfx-bracket { position: relative; display: inline-flex; gap: 6vw; align-items: stretch; transform-origin: 0 0; }
.rfx-round { display: flex; flex-direction: column; justify-content: space-around; gap: 2vh; min-width: 240px; }
.rfx-round-title { text-align: center; color: #9fb0bf; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.rfx-match {
  position: relative; background: #151b22; border: 2px solid #26303a; border-radius: 14px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; z-index: 1;
}
.rfx-match.live { border-color: #fff; box-shadow: 0 0 24px rgb(255 255 255 / .25); }
.rfx-match.highlight { animation: rfx-card-hl 1.6s ease-in-out 2; }
@keyframes rfx-card-hl { 50% { box-shadow: 0 0 0 4px rgb(255 255 255 / .6), 0 0 40px rgb(255 255 255 / .4); } }
.rfx-entry { display: flex; align-items: center; gap: 10px; font-size: 19px; color: #e8eef3; transition: opacity .6s, filter .6s; }
.rfx-entry .rfx-av {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: grid; place-items: center;
  background: color-mix(in oklab, var(--c) 40%, #10141a); border: 3px solid var(--c); font-size: 15px; font-weight: 600;
}
.rfx-entry .rfx-av img { width: 100%; height: 100%; object-fit: cover; }
.rfx-entry .rfx-en { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.rfx-entry .rfx-eid { color: #7d8b98; font-size: 13px; margin-left: auto; padding-left: 8px; }
.rfx-entry.winner .rfx-av { box-shadow: 0 0 18px var(--c); }
.rfx-entry.winner .rfx-en { color: #fff; font-weight: 600; }
.rfx-entry.out { opacity: .38; filter: grayscale(1); }
.rfx-entry.out .rfx-en { text-decoration: line-through; }
.rfx-entry.just-out { animation: rfx-knockout 1.2s ease-in .8s both; }
@keyframes rfx-knockout { 0% { opacity: 1; filter: none; transform: none; } 30% { transform: translateX(-6px); } 60% { transform: translateX(6px); } 100% { opacity: .38; filter: grayscale(1); transform: none; } }
.rfx-entry.arriving .rfx-av, .rfx-entry.arriving .rfx-en, .rfx-entry.arriving .rfx-eid { visibility: hidden; }
.rfx-match .rfx-tag { font-size: 12px; color: #7d8b98; letter-spacing: .06em; }
.rfx-match.live .rfx-tag { color: #fff; }
svg.rfx-links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
svg.rfx-links path { fill: none; stroke-width: 3; stroke-linejoin: round; opacity: .85; }
svg.rfx-links path.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rfx-draw .9s ease-in-out forwards; }
.rfx-flyer { position: fixed; z-index: 1001; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 3px solid var(--c); background: color-mix(in oklab, var(--c) 40%, #10141a); box-shadow: 0 0 26px var(--c); font-weight: 600; color: #fff; pointer-events: none; }
.rfx-flyer img { width: 100%; height: 100%; object-fit: cover; }
.rfx-champion { margin-top: 2vh; text-align: center; font-size: clamp(22px, 4vmin, 52px); animation: rfx-label-in .6s ease-out 1.2s both; }

/* ---------- секретный персонаж ---------- */
.rfx-cheer {
  position: fixed; z-index: 1002; right: 2vw; bottom: 0; height: min(46vh, 520px); pointer-events: none;
  animation: rfx-cheer-in .7s cubic-bezier(.2, 1.4, .4, 1) both;
}
.rfx-cheer.center { right: 50%; transform: translateX(50%); height: min(88vh, 900px); }
/* на заставках — в углу и поменьше, чтобы не закрывать подписи команд */
.rfx-cheer.small { right: .5vw; height: min(44vh, 460px); }
.rfx-cheer.small .rfx-bubble { top: -6%; right: 40%; }
.rfx-cheer.small .rfx-bubble::after { right: 40%; bottom: -18px; border-left-color: transparent; border-top-color: #fff; }
.rfx-cheer.rfx-leaving { animation: rfx-cheer-out .5s ease-in both; }
@keyframes rfx-cheer-in { from { translate: 0 110%; } to { translate: 0 0; } }
@keyframes rfx-cheer-out { to { translate: 0 110%; } }
/* персонаж из кадров (PNGtuber): кадры лежат стопкой, виден один */
.rfx-png { position: relative; height: 100%; filter: drop-shadow(0 0 14px rgb(255 255 255 / .25)) drop-shadow(0 10px 24px rgb(0 0 0 / .45));
  transform-origin: 50% 100%; animation: rfx-png-bob 2.4s ease-in-out infinite; }
.rfx-png img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
.rfx-png img.on { visibility: visible; }
@keyframes rfx-png-bob { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-1.2%) rotate(.6deg); } }
.rfx-cheer svg { height: 100%; width: auto; overflow: visible; filter: drop-shadow(0 0 14px rgb(255 255 255 / .28)) drop-shadow(0 10px 24px rgb(0 0 0 / .45)); }
.rfx-cheer .rfx-bubble {
  position: absolute; top: 2%; right: 70%; white-space: nowrap; background: #fff; color: #111; border-radius: 20px;
  padding: .4em .8em; font-size: clamp(16px, 2.6vmin, 34px); font-weight: 700; box-shadow: 0 6px 20px rgb(0 0 0 / .35);
  animation: rfx-pop .4s cubic-bezier(.3, 1.6, .5, 1) .5s both;
}
.rfx-cheer .rfx-bubble::after { content: ""; position: absolute; right: -10px; bottom: 10px; border: 10px solid transparent; border-left-color: #fff; }
/* персонаж: дыхание, волосы, моргание, «виктория» рукой */
.rfx-girl .g-body { transform-box: view-box; transform-origin: 150px 620px; animation: rfx-g-breathe 2.6s ease-in-out infinite; }
@keyframes rfx-g-breathe { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-5px) scaleY(1.008); } }
.rfx-girl .g-hair-back { transform-box: view-box; transform-origin: 150px 60px; animation: rfx-g-sway 3.4s ease-in-out infinite; }
@keyframes rfx-g-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.rfx-girl .g-tail-l { transform-box: view-box; transform-origin: 104px 74px; animation: rfx-g-tail-l 2.2s ease-in-out infinite; }
.rfx-girl .g-tail-r { transform-box: view-box; transform-origin: 196px 74px; animation: rfx-g-tail-r 2.2s ease-in-out infinite; }
@keyframes rfx-g-tail-l { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-4deg); } }
@keyframes rfx-g-tail-r { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(4deg); } }
.rfx-girl .g-wave { transform-box: view-box; transform-origin: 192px 222px; animation: rfx-g-wave 1.3s ease-in-out infinite; }
@keyframes rfx-g-wave { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-9deg); } 60% { transform: rotate(4deg); } }
.rfx-girl .g-blink { transform-box: view-box; animation: rfx-g-blink 4.2s infinite; }
@keyframes rfx-g-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
.rfx-girl .g-cattail { transform-box: view-box; transform-origin: 184px 378px; animation: rfx-g-cat 1.8s ease-in-out infinite; }
@keyframes rfx-g-cat { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-12deg); } }
.rfx-confetti { position: fixed; inset: 0; z-index: 1001; pointer-events: none; overflow: hidden; }
.rfx-confetti i { position: absolute; top: -4vh; width: 1.1vmin; height: 1.8vmin; border-radius: 2px; animation: rfx-fall linear forwards; }
@keyframes rfx-fall { to { transform: translateY(112vh) rotate(720deg); } }

@media (prefers-reduced-motion: reduce) {
  .rfx-overlay *, .rfx-cheer, .rfx-cheer * { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}