:root {
  --accent: #c6fd50;
  --fg: #f3f3f3;
  --muted: #9c9c9c;
  --hover-bg: #d8ff73;
  --hover-shadow: 0 0 12px rgba(198,253,80,0.3);
}

* { 
  box-sizing: border-box; 
}

body {
  margin: 0;
  padding: 48px 20px;
  min-height: 100vh;
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--fg);
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #060806, #0a0e09);
}

#bg { 
  position: fixed; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  z-index: 0; 
  display: block; 
}

main {
  position: relative;
  z-index: 1;
  max-width: 900px;
  width: 100%;
  padding: 32px 28px 36px;
  background: transparent;
  animation: fadeInUp 420ms ease both;
}

.logo-block { 
  display: flex; 
  justify-content: center; 
  margin-bottom: 12px; 
  position: relative; 
}

.logo-block img { 
  width: 240px; 
  height: auto; 
  filter: drop-shadow(0 0 6px rgba(198,253,80,0.18)); 
  transition: transform 0.3s ease, filter 0.3s ease; 
}

.logo-block img:hover { 
  transform: scale(1.01); 
  filter: drop-shadow(0 0 10px rgba(198,253,80,0.25)); 
}

p { 
  margin: 14px 0; 
  line-height: 1.7; 
  font-weight: 300; 
}

p:first-of-type { 
  font-size: 1.25rem; 
  color: #d9d9d9; 
}

p:nth-of-type(2) { 
  font-size: 1rem; 
  color: #a6a6a6; 
}

nav { 
  margin-top: 30px; 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: center; 
  gap: 14px; 
  width: 100%; 
}

nav a { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  padding: 10px 20px; 
  border-radius: 8px; 
  background: var(--accent); 
  color: #000; 
  text-decoration: none; 
  font-weight: 500; 
  font-size: 0.95rem; 
  transition: all 0.25s ease; 
  box-shadow: 0 0 6px rgba(198,253,80,0.2); 
  width: 200px; 
  justify-content: center; 
  flex-shrink: 0; 
}

a:hover { 
  background: var(--hover-bg); 
  box-shadow: var(--hover-shadow); 
  transform: translateY(-1px); 
}

svg { 
  width: 18px; 
  height: 18px; 
}

.wiki-button-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wiki-button-container a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  background: rgba(42, 42, 42, 0.6);
  color: rgba(224, 224, 224, 0.8);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.9rem;
  transition: all 0.25s ease;
  box-shadow: 0 0 4px rgba(42,42,42,0.2);
  width: 220px;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wiki-button-container a:hover {
  background: rgba(52, 52, 52, 0.7);
  color: rgba(224, 224, 224, 0.9);
  box-shadow: 0 0 8px rgba(42,42,42,0.3);
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.15);
}

.map-button-container {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.map-button-container a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  background: rgba(42, 42, 42, 0.6);
  color: rgba(224, 224, 224, 0.8);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.9rem;
  transition: all 0.25s ease;
  box-shadow: 0 0 4px rgba(42,42,42,0.2);
  width: 180px;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-button-container a:hover {
  background: rgba(52, 52, 52, 0.7);
  color: rgba(224, 224, 224, 0.9);
  box-shadow: 0 0 8px rgba(42,42,42,0.3);
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.15);
}

footer { 
  margin-top: 40px; 
  font-size: 13px; 
  opacity: 0.6; 
  color: var(--muted); 
}

@keyframes fadeInUp { 
  from { 
    opacity: 0; 
    transform: translateY(8px); 
  } 
  to { 
    opacity: 1; 
    transform: translateY(0); 
  } 
}

.logo-block, p, .wiki-button-container, nav, .map-button-container, footer { 
  opacity: 0; 
  animation: fadeInUp 520ms ease both; 
}

.logo-block { 
  animation-delay: 40ms; 
}

p:first-of-type { 
  animation-delay: 120ms; 
}

p:nth-of-type(2) { 
  animation-delay: 200ms; 
}

.wiki-button-container { 
  animation-delay: 280ms; 
}

nav { 
  animation-delay: 360ms; 
}

.map-button-container { 
  animation-delay: 440ms; 
}

footer { 
  animation-delay: 520ms; 
}

@media (prefers-reduced-motion: reduce) {
  * { 
    transition: none !important; 
    animation: none !important; 
  }
  #bg { 
    display: none !important; 
  }
  .logo-block, p, .wiki-button-container, nav, .map-button-container, footer { 
    opacity: 1 !important; 
    transform: none !important; 
  }
}

@media (max-width: 768px) {
  .map-button-container {
    grid-template-columns: 1fr;
    max-width: 220px;
  }
  
  .map-button-container a {
    width: 100%;
  }
  
  .wiki-button-container a {
    width: 100%;
    max-width: 220px;
  }
  
  nav {
    flex-direction: column;
  }
  
  nav a {
    width: 220px;
  }
}