body {
    margin:0;
    font-family: 'Segoe UI';
    background:black;
    color:white;
}

.logo {
    font-size:70px;
    color:gold;
    text-align:center;
}

.subtitle {
    text-align:center;
}

nav {
    text-align:center;
}

nav button {
    background:orange;
    padding:10px;
    margin:5px;
}

.slide {display:none;padding:20px;}
.active {display:block;}

.rules {
    background:#111;
    padding:20px;
    border-radius:10px;
}

h3 {color:gold;}

table {
    width:100%;
    border-collapse:collapse;
}

td,th {
    border:1px solid rgb(150, 101, 9);
    padding:8px;
}
table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 0 10px orange, 0 0 20px orange;
}

td, th {
    border: 1px solid orange;
    padding: 8px;
    text-align: center;
    color: #ffcc00;
    text-shadow: 0 0 5px #fff, 0 0 10px #ffcc00;
}
body {
    margin: 0;
    font-family: 'Segoe UI';
    background: black;
    color: white;
}

#fire {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* чтобы не мешал кликам */
}
/* Прожекторы сверху (только не на главной) */
.slide:not(.first-slide) {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #000 0%, #111 100%);
}

/* Левый прожектор */
.slide:not(.first-slide)::before {
  content: "";
  position: absolute;
  top: -50px;       /* чуть выше слайда */
  left: -200px;     /* сдвинут влево */
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 60%);
  filter: blur(100px);   /* мягкий край */
  z-index: 0;
  pointer-events: none;
  animation: lightLeft 4s ease-in-out infinite alternate;
}

/* Правый прожектор */
.slide:not(.first-slide)::after {
  content: "";
  position: absolute;
  top: -50px;       /* чуть выше слайда */
  right: -200px;    /* сдвинут вправо */
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 60%);
  filter: blur(100px);   /* мягкий край */
  z-index: 0;
  pointer-events: none;
  animation: lightRight 4s ease-in-out infinite alternate;
}

/* Анимация движения лучей к центру */
@keyframes lightLeft {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(200px, 100px) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes lightRight {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-200px, 100px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.slide {
  position: relative;
}
/* Общие настройки для всех слайдов кроме главной */
.slide:not(.first-slide) {
  position: relative;
  overflow: hidden;
}

/* Псевдоэлементы для дыма */
.slide.stats::before,
.slide.table::before {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(200,200,200,0.3) 0%, transparent 70%);
  filter: blur(80px);
  animation: smokeTopLeft 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.slide.stats::after,
.slide.table::after {
  content: "";
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(200,200,200,0.3) 0%, transparent 70%);
  filter: blur(80px);
  animation: smokeBottomRight 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* Анимации движения дыма */
@keyframes smokeTopLeft {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(20px,20px) scale(1.1); }
  100% { transform: translate(0,0) scale(1); }
}

@keyframes smokeBottomRight {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-20px,-20px) scale(1.1); }
  100% { transform: translate(0,0) scale(1); }
}
/* Общий фон для всех слайдов кроме главной */
.slide:not(.first-slide) {
  position: relative;
  overflow: hidden;
  background: #111; /* базовый тёмный фон */
}

/* Слой световых линий */
.slide:not(.first-slide)::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.05) 2px,
    transparent 2px,
    transparent 20px
  );
  animation: moveLines 10s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Анимация движения линий */
@keyframes moveLines {
  0% { transform: translate(0,0); }
  100% { transform: translate(50px,50px); }
}
/* Основные слайды кроме главной */
.slide:not(.first-slide) {
  position: relative;
  overflow: hidden;
  background: #111;
}

/* Прожекторы сверху */
.slide:not(.first-slide)::before,
.slide:not(.first-slide)::after {
  content: "";
  position: absolute;
  top: -50px;
  width: 800px;
  height: 800px;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.slide:not(.first-slide)::before {
  left: -200px;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 60%);
  animation: lightLeft 4s ease-in-out infinite alternate;
}

.slide:not(.first-slide)::after {
  right: -200px;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 60%);
  animation: lightRight 4s ease-in-out infinite alternate;
}

@keyframes lightLeft {
  0% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(200px,100px) rotate(5deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

@keyframes lightRight {
  0% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(-200px,100px) rotate(-5deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

/* Дым по углам */
.slide.table::before,
.slide.stats::before,
.slide.table::after,
.slide.stats::after {
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  background: radial-gradient(circle, rgba(200,200,200,0.3) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events:none;
  z-index:0;
}

.slide.table::before { top:-50px; left:-50px; animation: smokeTopLeft 6s ease-in-out infinite alternate; }
.slide.table::after  { bottom:-50px; right:-50px; animation: smokeBottomRight 6s ease-in-out infinite alternate; }
.slide.stats::before { top:-50px; left:-50px; animation: smokeTopLeft 6s ease-in-out infinite alternate; }
.slide.stats::after  { bottom:-50px; right:-50px; animation: smokeBottomRight 6s ease-in-out infinite alternate; }

@keyframes smokeTopLeft {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(20px,20px) scale(1.1); }
  100% { transform: translate(0,0) scale(1); }
}

@keyframes smokeBottomRight {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-20px,-20px) scale(1.1); }
  100% { transform: translate(0,0) scale(1); }
}

/* Динамичные световые линии */
.slide:not(.first-slide)::after {
  content:"";
  position:absolute;
  top:0; left:0;
  width:200%;
  height:200%;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.05) 2px,
    transparent 2px,
    transparent 20px
  );
  animation: moveLines 10s linear infinite;
  pointer-events:none;
  z-index:0;
}

@keyframes moveLines {
  0% { transform: translate(0,0); }
  100% { transform: translate(50px,50px); }
}

/* Лёгкое мерцание всего слайда */
.slide:not(.first-slide) {
  animation: flicker 3s ease-in-out infinite;
}

@keyframes flicker {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.05); }
}
@keyframes spark {
  0% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.spark {
  position: absolute;
  width: 5px;
  height: 5px;
  background: gold;
  border-radius: 50%;
  animation: spark 1s ease-in-out infinite;
}
/* 1️⃣ Мерцающий логотип и подзаголовок */
.logo {
  animation: glowLogo 2s ease-in-out infinite alternate;
}
@keyframes glowLogo {
  0% { text-shadow: 0 0 5px gold; }
  50% { text-shadow: 0 0 15px gold, 0 0 25px orange; }
  100% { text-shadow: 0 0 10px gold, 0 0 20px orange; }
}

.subtitle:hover {
  text-shadow: 0 0 10px white, 0 0 20px orange;
  transition: 0.5s;
}

/* 2️⃣ Плавное появление контента */
.slide {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s ease;
}
.slide.active {
  opacity: 1;
  transform: translateY(0);
}

/* 3️⃣ Glow кнопок */
button {
  transition: all 0.3s ease;
}
button:hover {
  box-shadow: 0 0 10px orange, 0 0 20px gold;
  transform: scale(1.05);
}

/* 4️⃣ Фоновые партиклы */
.particles {
  position: fixed;
  top:0; left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius:50%;
  background: rgba(255,255,255,0.5);
  animation: particleMove linear infinite;
}
@keyframes particleMove {
  0% { transform: translateY(0) translateX(0); opacity:1; }
  100% { transform: translateY(-600px) translateX(200px); opacity:0; }
}

/* 5️⃣ Мини-градиент на таблице и статистике */
.slide.table, .slide.stats {
  background: linear-gradient(135deg, #111 0%, #222 50%, #111 100%);
  animation: bgPulse 5s ease-in-out infinite alternate;
}
@keyframes bgPulse {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Анимация цифр — стиль подсветки рекордов */
@keyframes countUp {
  0% { opacity:0; transform: translateY(20px);}
  100% { opacity:1; transform: translateY(0);}
}

/* Блики прожекторов сверху */
.spotlight-left, .spotlight-right {
  position: absolute;
  top:-200px;
  width: 50%;
  height: 400px;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.2), transparent 70%);
  filter: blur(100px);
  animation: spotlightMove 5s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
.spotlight-left { left:0; }
.spotlight-right { right:0; }
@keyframes spotlightMove {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(30px) translateY(20px); }
  100% { transform: translateX(0) translateY(0); }
}

/* Анимированные эмодзи / иконки */
.emoji {
  position: absolute;
  font-size: 18px;
  animation: emojiMove 3s linear infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes emojiMove {
  0% { transform: translateY(0) rotate(0deg); opacity:1; }
  50% { transform: translateY(-30px) rotate(180deg); opacity:0.6; }
  100% { transform: translateY(0) rotate(360deg); opacity:1; }
}

/* Мини-вспышки при кликах */
.flash {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius:50%;
  background: rgba(255,255,200,0.8);
  animation: flashAnim 0.5s ease-out forwards;
  pointer-events:none;
  z-index:999;
}
@keyframes flashAnim {
  0% { transform: scale(0); opacity:1; }
  100% { transform: scale(3); opacity:0; }
}
tr:hover {
  background: rgba(255,165,0,0.2);
  transition: 0.3s;
  transform: scale(1.01);
}
button:active {
  transform: scale(0.95);
  box-shadow: 0 0 15px orange;
}
.slide {
  display:none;
  padding:20px;
  opacity:0;
  transform: translateX(30px);
  transition: 0.5s;
}

.slide.active {
  display:block;
  opacity:1;
  transform: translateX(0);
}
td:hover {
  background: rgba(0,150,255,0.2);
  box-shadow: 0 0 10px cyan;
  transition: 0.2s;
}
body {
  animation: fadeIn 1s ease;
}

@keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}
.matchForm input {
  padding:8px;
  margin:5px;
  background:#111;
  color:white;
  border:1px solid orange;
}

#matches div {
  background:#111;
  margin:10px 0;
  padding:10px;
  border-radius:8px;
  box-shadow: 0 0 10px rgba(255,165,0,0.3);
}



@keyframes lightWave {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 🔥 Неоновое свечение всего */
.slide {
  position:relative;
  z-index:1;
  box-shadow: 0 0 30px rgba(0,150,255,0.2);
}

/* 💎 Глубина фона */
body {
  background: radial-gradient(circle at center, #000 0%, #050505 100%);
}
.slide:first-child::before,
.slide:first-child::after {
  display:none;
}