@font-face { font-family: "Refrigerator Deluxe WL"; src: url("assets/fonts/RefrigeratorDeluxe-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: block; }
@font-face { font-family: "Refrigerator Deluxe WL"; src: url("assets/fonts/RefrigeratorDeluxe-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Refrigerator Deluxe WL"; src: url("assets/fonts/RefrigeratorDeluxe-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Refrigerator Deluxe WL"; src: url("assets/fonts/RefrigeratorDeluxe-ExtraBold.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: block; }
@font-face { font-family: "Refrigerator Deluxe WL"; src: url("assets/fonts/RefrigeratorDeluxe-Heavy.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: block; }

:root {
  --font-main: "Refrigerator Deluxe WL", "Refrigerator Deluxe", "Arial Narrow", sans-serif;
  --font-display: "Refrigerator Deluxe WL", "Refrigerator Deluxe", "Arial Narrow", sans-serif;
  --font-mono: Consolas, "Courier New", monospace;
  --bg-image: url("assets/bg.webp");
  --c-ink: #04050b;
  --c-text: #ffffff;
  --c-text-soft: #edf1ff;
  --c-text-dim: #b3bcdc;
  --c-text-muted: #6d7699;
  --c-gold: #e9b44c;
  --c-gold-hi: #ffd98a;
  --c-gold-rgb: 233, 180, 76;
  --c-frame: rgba(224, 230, 246, 0.92);
  --c-frame-soft: rgba(224, 230, 246, 0.28);
  --c-fill: rgba(5, 7, 16, 0.78);
  --c-fill-strong: rgba(5, 7, 16, 0.93);
  --c-shadow: rgba(0, 0, 0, 0.6);
  --c-ice: #3d9bff; --c-ice-hi: #a5d3ff; --c-ice-rgb: 61, 155, 255;
  --c-fire: #ff7a1f; --c-fire-hi: #ffb978; --c-fire-rgb: 255, 122, 31;
  --c-violet: #9b6bff; --c-violet-hi: #d2bcff; --c-violet-rgb: 155, 107, 255;
  --c-none: #8a93b5; --c-none-hi: #c9cfe6; --c-none-rgb: 138, 147, 181;
  --p-bg: rgba(9, 11, 22, 0.97);
  --p-card: #121626;
  --p-input: #0a0d19;
  --p-btn: #1b2037;
  --p-line: #2c3352;
  --p-text: #e9edf7;
  --p-dim: #8d98b8;
  --p-accent: var(--c-gold);
  --p-on-accent: #17110a;
  --p-danger: #e0645a;
  --p-radius: 12px;
  --p-radius-sm: 8px;
  --p-font-size: 17px;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: #04050b var(--bg-image) center / cover fixed;
  color: var(--c-text);
  font-family: var(--font-main);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* ===== Общие элементы табло финалов: tablo.html, перенесены без изменений цветов и теней ===== */
/* Узкий жирный шрифт для названий и чисел */
.display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }

/* Цвет команды: первая команда матча лёд, вторая огонь, как на табло. Золото и фиолетовый — для бонусов и штрафов. */
.team-A { --acc: var(--c-ice); --acc-hi: var(--c-ice-hi); --acc-rgb: var(--c-ice-rgb); }
.team-B { --acc: var(--c-fire); --acc-hi: var(--c-fire-hi); --acc-rgb: var(--c-fire-rgb); }
.team-gold { --acc: var(--c-gold); --acc-hi: var(--c-gold-hi); --acc-rgb: var(--c-gold-rgb); }
.team-violet { --acc: var(--c-violet); --acc-hi: var(--c-violet-hi); --acc-rgb: var(--c-violet-rgb); }
.team-none { --acc: var(--c-none); --acc-hi: var(--c-none-hi); --acc-rgb: var(--c-none-rgb); }

/* Плашка команды: огненная или ледяная текстура из общего фона, свечение цвета команды с одного края. */
.tbar {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 22px;
  padding: 0 40px; border: 2px solid var(--c-frame); background: var(--c-fill-strong);
  --tex-pos: -1560px -10px; --tex-filter: none; --tex-fade: 340px;
}
.tbar::before, .tbar::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.tbar::before {
  background-image: var(--bg-image); background-repeat: no-repeat;
  background-size: 1920px 1080px; background-position: var(--tex-pos);
  filter: var(--tex-filter);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--tex-fade) * .45), transparent var(--tex-fade));
  mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--tex-fade) * .45), transparent var(--tex-fade));
  animation: tex-flicker 3.4s ease-in-out infinite alternate;
}
.tbar::after {
  background:
    linear-gradient(90deg, rgba(4, 5, 11, 0) 0%, rgba(4, 5, 11, .5) 16%, rgba(4, 5, 11, .86) 40%, rgba(4, 5, 11, .9) 100%),
    radial-gradient(60% 170% at 0% 50%, rgba(var(--acc-rgb), .5), rgba(var(--acc-rgb), 0) 70%);
}
.tbar.side-r::before { transform: scaleX(-1); }
.tbar.side-r::after {
  background:
    linear-gradient(270deg, rgba(4, 5, 11, 0) 0%, rgba(4, 5, 11, .5) 16%, rgba(4, 5, 11, .86) 40%, rgba(4, 5, 11, .9) 100%),
    radial-gradient(60% 170% at 100% 50%, rgba(var(--acc-rgb), .5), rgba(var(--acc-rgb), 0) 70%);
}
.tbar > * { position: relative; z-index: 1; }
.tbar.team-A { --tex-pos: -1560px -10px; }
.tbar.team-B, .tbar.team-gold { --tex-pos: -1600px -690px; --tex-fade: 300px; }
.tbar.team-gold { --tex-filter: hue-rotate(15deg) saturate(1.1); }
.tbar.team-violet { --tex-filter: hue-rotate(45deg) saturate(1.25); }
.tbar.team-none { --tex-pos: -2400px 0; }
.tbar-name { font-size: 64px; line-height: 1.1; color: var(--c-text-soft); text-shadow: 0 0 18px rgba(var(--acc-rgb), .45), 0 2px 4px #000; }
.team-none .tbar-name { color: var(--c-text-dim); }
.fit { display: block; min-width: 0; white-space: nowrap; overflow: hidden; }
.tbar-name.fit, .z-title.fit { overflow: visible; }

/* Плашка заголовка: лёд слева, огонь справа. */
.z-bar {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 0 80px;
  border: 2px solid var(--c-frame); background: var(--c-fill-strong);
}
.z-bar::before, .z-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: none;
  background-image: var(--bg-image); background-size: 1920px 1080px; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 120px, transparent 360px);
  mask-image: linear-gradient(90deg, #000 0, #000 120px, transparent 360px);
}
.z-bar::before { left: 0; background-position: -1540px -10px; animation: tex-flicker 3.4s ease-in-out infinite alternate; }
.z-bar::after { right: 0; background-position: -1540px -660px; transform: scaleX(-1); animation: tex-flicker 4.1s ease-in-out -1.7s infinite alternate; }
.z-title {
  /* У Refrigerator Deluxe прописные стоят в строке на 0,023 em ниже середины, сдвиг ставит их по центру плашки. */
  position: relative; top: -.023em; z-index: 1; line-height: 1;
  text-shadow: 0 0 30px rgba(var(--c-fire-rgb), .22), 0 0 40px rgba(var(--c-ice-rgb), .2), 0 6px 14px var(--c-shadow);
}

/* Фото игрока, вырезанное вокруг лица: глаза на всех фото стоят в точке 330, 270 кадра 660×720. */
.face { position: relative; display: block; flex: none; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; border: 3px solid var(--acc, var(--c-gold)); background: #111522; }
.face img { display: block; width: 220%; max-width: none; height: auto; margin: -46.7% 0 0 -60%; }

/* Живость плашек: свечение цвета команды дышит, по плашке раз в 9 секунд проходит блик. */
.fx {
  position: absolute !important; inset: 0; z-index: 2 !important; pointer-events: none; overflow: hidden;
  animation: fx-breathe 4.5s ease-in-out infinite alternate; animation-delay: calc(var(--enter, 0s) + 2.4s + var(--gd, 0s));
}
.fx::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-250%) skewX(-18deg);
  animation: glint 9s ease-in-out infinite; animation-delay: calc(var(--enter, 0s) + 2.8s + var(--gd, 0s));
}
@keyframes fx-breathe {
  from { box-shadow: inset 0 0 12px rgba(var(--acc-rgb, var(--c-gold-rgb)), .06); }
  to { box-shadow: inset 0 0 34px rgba(var(--acc-rgb, var(--c-gold-rgb)), .36); }
}
@keyframes glint { 0% { transform: translateX(-250%) skewX(-18deg); } 16%, 100% { transform: translateX(330%) skewX(-18deg); } }
@keyframes tex-flicker { from { opacity: .72; } to { opacity: 1; } }

/* Анимации появления табло */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }
@keyframes open-from-l { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes open-from-r { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes slide-from-l { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes slide-from-r { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes card-from-l { from { opacity: 0; transform: translateX(-140px); } to { opacity: 1; transform: none; } }
@keyframes card-from-r { from { opacity: 0; transform: translateX(140px); } to { opacity: 1; transform: none; } }
@keyframes row-in { from { opacity: 0; transform: translateX(-110px); } to { opacity: 1; transform: none; } }
@keyframes row-in-r { from { opacity: 0; transform: translateX(110px); } to { opacity: 1; transform: none; } }
@keyframes fcard-rise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes tm-bar-open { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tm-title { from { opacity: 0; transform: scale(1.5, 1.3); filter: blur(14px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bar-sweep { from { opacity: 1; transform: translateX(-420px) skewX(-20deg); } to { opacity: 1; transform: translateX(1700px) skewX(-20deg); } }
@keyframes flare-out { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes photo-flash { from { filter: brightness(2.6) saturate(.5); } to { filter: none; } }
@keyframes win-rise { from { opacity: 0; transform: translateY(140px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }

/* Герой в железной рамке, слои как в shared/draw.js: подложка, кольцо, аватарка 0,89 ширины с центром на 0,45 высоты, нижняя часть рамки. */
.hero-avatar { position: relative; display: block; flex: none; width: var(--hero-size, 300px); aspect-ratio: 1; }
.hero-avatar .hero-art { position: absolute; left: 50%; top: 45%; width: 89%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }
.hero-avatar .hero-bg, .hero-avatar .hero-frame { position: absolute; inset: 0; width: 100%; height: 100%; }