/* ===== DreamCore: тёмное стекло, бело-бирюзовый акцент ===== */
:root {
  --glass-bg: rgba(5, 26, 32, 0.74);
  --glass-border: rgba(120, 240, 220, 0.22);
  --ink: #e6fffb;        /* основной текст — светлый */
  --ink-soft: #9adcd8;   /* приглушённый текст */
  --accent: #4fe3cd;     /* яркая бирюза */
  --accent-soft: #2dd4bf;
  --divider: rgba(94, 234, 212, 0.14);
  --blur: 20px;
  --radius: 24px;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  --page-gap: clamp(12px, 3vw, 22px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  line-height: 1.65;
  background: #06212a; /* подложка на время загрузки фона */
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ===== Фон: переливание, слои сменяются с перекрытием ===== */
.bg, .bg-layer { position: fixed; inset: 0; }

.bg-layer {
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity;
  animation: crossfade 18s linear infinite both;
}
.bg-1 { background-image: url("fon1.jpg"); }
.bg-2 { background-image: url("fon2.jpg"); animation-delay: 6s; }
.bg-3 { background-image: url("fon3.jpg"); animation-delay: 12s; }

/* Перекрывающиеся переходы: один уходит, второй уже приходит.
   В моменте стыка оба полупрозрачны — никакого провала в темноту. */
@keyframes crossfade {
  0%    { opacity: 0; }
  5.6%  { opacity: 1; }  /* приход ~1 c */
  33.3% { opacity: 1; }  /* держимся ~5 c */
  38.9% { opacity: 0; }  /* уход ~1 c, одновременно приходит следующий */
  100%  { opacity: 0; }
}

/* Тёмная вуаль, чтобы текст читался на любом фоне */
.bg-veil {
  position: fixed;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 24, 30, 0.6),
    rgba(4, 24, 30, 0.3) 45%,
    rgba(4, 24, 30, 0.65)
  );
}

/* Морозное стекло на весь фон: лёгкое размытие картинок + блик */
.bg-frost {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0) 35%
    ),
    rgba(5, 26, 32, 0.22);
  -webkit-backdrop-filter: blur(5px) saturate(1.15);
  backdrop-filter: blur(5px) saturate(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .bg-2, .bg-3 { animation: none; }
  .bg-1 { animation: none; opacity: 1; }
}

/* ===== Стеклянный блок ===== */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.3);
  backdrop-filter: blur(var(--blur)) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12), /* светлая кромка сверху */
    var(--shadow);
}

/* Старые телефоны без backdrop-filter: плотный фон вместо стекла */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(6, 28, 34, 0.97); }
}

/* ===== Раскладка: один цельный блок ===== */
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(14px, 4vh, 36px) var(--page-gap) 8vh;
}

.panel {
  position: relative;
  overflow: hidden; /* чтобы внутренние секции не вылезали за скругления */
  padding: clamp(26px, 5vw, 44px) clamp(18px, 4vw, 32px) clamp(18px, 3vw, 26px);
}

/* Диагональный блик на стекле панели */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 40%
  );
}

/* ===== Шапка внутри блока ===== */
.header {
  text-align: center;
  margin-bottom: clamp(20px, 4vw, 30px);
}

h1 {
  font-size: clamp(1.55rem, 5.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.tagline {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 3vw, 1.05rem);
}

/* ===== Секции правил ===== */
.block {
  padding: clamp(14px, 3vw, 20px) 0;
}

.block + .block {
  border-top: 1px solid var(--divider);
}

.block h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.1rem, 4vw, 1.3rem);
  font-weight: 700;
  margin-bottom: 12px;
}

.block h2::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 1.05em;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-soft));
}

/* Нумерация без кнопок и ссылок — просто акцентный номер */
.rules {
  list-style: none;
}

.rules li {
  margin-bottom: 0.65em;
  font-size: clamp(0.97rem, 3.4vw, 1.05rem);
}

.rules li:last-child { margin-bottom: 0; }

.rules .num {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: 0.55em;
}

/* Секция без номеров — просто тире */
.rules.dash li::before {
  content: "—";
  color: var(--accent);
  font-weight: 700;
  margin-right: 0.55em;
}

/* ===== Подвал внутри блока ===== */
.footer {
  margin-top: clamp(16px, 3vw, 22px);
  padding-top: clamp(14px, 3vw, 18px);
  border-top: 1px solid var(--divider);
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Аккуратный скроллбар (не мешает на мобильных) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-thumb {
    background: rgba(79, 227, 205, 0.35);
    border-radius: 6px;
    border: 2px solid rgba(10, 42, 49, 0.6);
  }
}