@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Exo+2:wght@500;600;700;800;900&display=swap');

:root {
  --background: 220 25% 10%;
  --foreground: 210 40% 96%;
  --card: 220 25% 14%;
  --card-foreground: 210 40% 96%;
  --popover: 220 25% 14%;
  --popover-foreground: 210 40% 96%;
  --primary: 217 91% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 160 84% 39%;
  --secondary-foreground: 0 0% 100%;
  --muted: 220 20% 18%;
  --muted-foreground: 215 15% 55%;
  --accent: 187 85% 53%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 20% 18%;
  --input: 220 20% 18%;
  --ring: 217 91% 60%;
  --radius: 0.75rem;
  --glow-primary: 217 91% 60%;
  --glow-secondary: 160 84% 39%;
  --surface-elevated: 220 25% 16%;
  --stat-orange: 25 95% 53%;
  --stat-yellow: 45 93% 47%;
  --stat-pink: 330 81% 60%;
  --stat-cyan: 187 85% 53%;
  --stat-purple: 280 67% 60%;
  --gradient-hero: linear-gradient(135deg, hsl(220 25% 6%) 0%, hsl(220 25% 12%) 50%, hsl(217 40% 15%) 100%);
  --gradient-card: linear-gradient(145deg, hsl(220 25% 16%) 0%, hsl(220 25% 12%) 100%);
  --gradient-primary: linear-gradient(135deg, hsl(217 91% 60%) 0%, hsl(217 91% 50%) 100%);
  --gradient-secondary: linear-gradient(135deg, hsl(160 84% 39%) 0%, hsl(160 84% 30%) 100%);
  --shadow-card: 0 4px 24px -4px hsl(0 0% 0% / 0.4);
  --shadow-glow: 0 0 30px -5px hsl(217 91% 60% / 0.3);
  --shadow-glow-green: 0 0 30px -5px hsl(160 84% 39% / 0.3);
  --font-display: 'Exo 2', sans-serif;
  --font-body: 'Inter', sans-serif;
}

html.light {
  --background: 210 20% 98%;
  --foreground: 220 25% 12%;
  --card: 0 0% 100%;
  --card-foreground: 220 25% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 25% 12%;
  --primary: 217 91% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 160 84% 35%;
  --secondary-foreground: 0 0% 100%;
  --muted: 210 15% 93%;
  --muted-foreground: 215 15% 40%;
  --accent: 187 85% 40%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 55%;
  --destructive-foreground: 0 0% 100%;
  --border: 210 15% 88%;
  --input: 210 15% 88%;
  --ring: 217 91% 55%;
  --surface-elevated: 0 0% 100%;
  --stat-orange: 25 95% 50%;
  --stat-yellow: 45 93% 44%;
  --stat-pink: 330 81% 55%;
  --stat-cyan: 187 85% 40%;
  --stat-purple: 280 67% 55%;
  --gradient-hero: linear-gradient(135deg, hsl(210 20% 96%) 0%, hsl(210 25% 92%) 50%, hsl(217 30% 94%) 100%);
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(210 15% 97%) 100%);
  --shadow-card: 0 4px 24px -4px hsl(0 0% 0% / 0.08);
  --shadow-glow: 0 0 30px -5px hsl(217 91% 55% / 0.15);
  --shadow-glow-green: 0 0 30px -5px hsl(160 84% 35% / 0.15);
}

/* Декоративные пятна (800px, 500px) выходят за вьюпорт на мобильных — без этого появляется горизонтальный скролл */
html.landing2-page {
  overflow-x: hidden;
  max-width: 100%;
}

.landing2-page {
  font-family: var(--font-body);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  scroll-behavior: smooth;
}

.landing2-page h1,
.landing2-page h2,
.landing2-page h3,
.landing2-page h4 {
  font-family: var(--font-display);
}

.text-gradient-primary {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--stat-cyan)));
}

.text-gradient-secondary {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--stat-cyan)));
}

.glass-card {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-card);
  border-radius: 1rem;
  backdrop-filter: blur(4px);
}

.section-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .section-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .section-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background-color: hsl(var(--primary));
  padding: 1rem 2rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--primary-foreground));
  box-shadow: 0 4px 20px -4px hsl(var(--primary) / 0.4);
  transition: all 0.2s;
  font-family: var(--font-display);
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  box-shadow: 0 8px 30px -4px hsl(var(--primary) / 0.5);
  transform: translateY(-2px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background-color: hsl(var(--secondary));
  padding: 1rem 2rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--secondary-foreground));
  box-shadow: 0 4px 20px -4px hsl(var(--secondary) / 0.4);
  transition: all 0.2s;
  font-family: var(--font-display);
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-secondary:hover {
  box-shadow: 0 8px 30px -4px hsl(var(--secondary) / 0.5);
  transform: translateY(-2px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border: 2px solid hsl(var(--border));
  background: transparent;
  padding: 1rem 2rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--foreground));
  transition: all 0.2s;
  font-family: var(--font-display);
  text-decoration: none;
  cursor: pointer;
}

.btn-outline:hover {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: transparent;
  padding: 1rem 2rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  transition: all 0.2s;
  font-family: var(--font-display);
  text-decoration: none;
  cursor: pointer;
}

.btn-ghost:hover {
  border-color: hsl(var(--primary) / 0.5);
  background-color: hsl(var(--primary) / 0.05);
  color: hsl(var(--foreground));
}

.btn-nav-primary {
  padding: 0.5rem 1rem !important;
  font-size: 0.75rem !important;
  gap: 0.375rem !important;
}

.animate-float {
  animation: l2-float 6s ease-in-out infinite;
}

@keyframes l2-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.animate-blink {
  animation: l2-blink 1s step-end infinite;
}

@keyframes l2-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.animate-marquee {
  animation: l2-marquee 30s linear infinite;
}

@keyframes l2-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.l2-scroll-dot {
  animation: l2-scroll-bounce 1.5s ease-in-out infinite;
}

@keyframes l2-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.l2-spin-slow {
  animation: l2-spin 20s linear infinite;
}

.l2-spin-slow-rev {
  animation: l2-spin 30s linear infinite reverse;
}

@keyframes l2-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.l2-nav-mobile-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}

.l2-nav-mobile-panel.is-open {
  max-height: 28rem;
  opacity: 1;
}

.l2-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  background: hsl(var(--background) / 0.9);
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.l2-lightbox.is-open {
  display: flex;
}

.l2-tab-active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.l2-tab-inactive {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.l2-tab-inactive:hover {
  background-color: hsl(var(--muted) / 0.8);
  color: hsl(var(--foreground));
}

/* Иконки + текст в кнопках (Font Awesome, выравнивание по центру) */
.l2-btn-i,
.l2-btn-i-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.l2-btn-i {
  width: 1.125rem;
  height: 1.125rem;
  font-size: 1.125rem;
}

.l2-btn-i-sm {
  width: 0.875rem;
  height: 0.875rem;
  font-size: 0.875rem;
}

.l2-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.l2-logo-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  font-size: 1.125rem;
  line-height: 1;
}

.l2-nav-login {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.l2-discord-link {
  align-items: center;
}

.l2-discord-icon {
  flex-shrink: 0;
}

/* Переключатель темы: контрастные цвета иконок (видимость через JS + .hidden) */
.l2-theme-icon-sun {
  color: hsl(43 96% 56%);
}
.l2-theme-icon-moon {
  color: hsl(220 35% 22%);
}
.l2-theme-btn [data-l2-theme-icon] {
  align-items: center;
  justify-content: center;
}
html.light .l2-theme-btn {
  background-color: hsl(var(--muted));
  border-color: hsl(var(--border));
}

/* Hero: в светлой теме — другой PNG персонажа, не отдельный фон */
html.light .l2-hero-char-dark {
  opacity: 0;
}
html.light .l2-hero-char-light {
  opacity: 1;
}
html:not(.light) .l2-hero-char-light {
  opacity: 0;
}

/* Текстовые страницы (политики, changelog) */
.l2-doc-shell {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}
.l2-doc-article {
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background: var(--gradient-card);
  box-shadow: var(--shadow-card);
  padding: 2rem 1.5rem;
}
@media (min-width: 768px) {
  .l2-doc-article {
    padding: 3rem;
  }
}
.l2-doc-article h1 {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 800;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
}
@media (min-width: 640px) {
  .l2-doc-article h1 {
    font-size: 2.25rem;
  }
}
.l2-doc-content h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: hsl(var(--foreground));
}
.l2-doc-content h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  color: hsl(var(--foreground));
}
.l2-doc-content p,
.l2-doc-content li {
  color: hsl(var(--muted-foreground));
  line-height: 1.8;
  font-size: 1rem;
}
.l2-doc-content p {
  margin-bottom: 1rem;
}
.l2-doc-content ul,
.l2-doc-content ol {
  margin: 1rem 0 1rem 1.25rem;
  padding: 0;
}
.l2-doc-content li {
  margin-bottom: 0.5rem;
}
.l2-doc-content a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.l2-doc-content a:hover {
  color: hsl(var(--stat-cyan));
}
.l2-doc-meta {
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* Changelog list */
.l2-changelog-card {
  display: block;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: var(--gradient-card);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  margin-bottom: 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.l2-changelog-card:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--primary) / 0.4);
  box-shadow: var(--shadow-glow);
}
.l2-changelog-card.is-latest {
  border-color: hsl(var(--primary) / 0.5);
}
.l2-page-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--stat-cyan)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Changelog tag chips (как в ChangelogPage.tsx) */
.l2-changelog-tag[data-tag="UX"] {
  background-color: hsl(var(--accent) / 0.15);
  color: hsl(var(--accent));
}
.l2-changelog-tag[data-tag="Баг-фикс"] {
  background-color: hsl(var(--destructive) / 0.15);
  color: hsl(var(--destructive));
}
.l2-changelog-tag[data-tag="Функционал"] {
  background-color: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
}
.l2-changelog-tag[data-tag="Релиз"] {
  background-color: hsl(var(--secondary) / 0.15);
  color: hsl(var(--secondary));
}
.l2-changelog-tag[data-tag="Дизайн"] {
  background-color: hsl(var(--stat-purple) / 0.15);
  color: hsl(var(--stat-purple));
}
.l2-changelog-tag[data-tag="Доработка"] {
  background-color: hsl(var(--stat-orange) / 0.15);
  color: hsl(var(--stat-orange));
}