/* Shared visual rhythm across all pages */
:root {
  --vibe-border: rgba(108, 99, 255, 0.12);
  --vibe-shadow: 0 12px 36px rgba(13, 13, 26, 0.1);
  --vibe-shadow-lg: 0 20px 52px rgba(13, 13, 26, 0.16);
}

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

body {
  background:
    radial-gradient(1000px 520px at -10% -10%, rgba(108, 99, 255, 0.08), transparent 60%),
    radial-gradient(900px 420px at 110% 0%, rgba(61, 191, 255, 0.08), transparent 58%),
    var(--paper, #fafaff);
  color: var(--ink, #0d0d1a);
}

.container {
  width: min(1160px, 92%);
}

section,
.section,
.games-section,
.team-section,
.policy-section,
.features-section,
.pricing-section,
.tutorial-section,
.resources-section,
.faq-section,
.contact-section {
  padding-block: clamp(60px, 8vw, 96px);
}

h1,
h2,
h3,
.section-title,
.hero-title {
  font-family: var(--font-head, "Baloo 2", cursive);
  letter-spacing: 0.01em;
  line-height: 1.15;
}

p,
li,
a,
.section-subtitle,
.hero-desc,
.game-desc {
  letter-spacing: 0.01em;
}

.section-subtitle,
.hero-desc,
.game-desc,
.policy-card p {
  color: var(--muted, #6b6b8a);
}

#navbar {
  box-shadow: 0 4px 18px rgba(13, 13, 26, 0.06);
}

#navbar .container {
  width: min(1160px, 92%) !important;
  margin: 0 auto;
  height: 100%;
}

#navbar .nav-inner {
  height: var(--nav-h) !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#navbar .nav-logo {
  display: flex;
  align-items: center;
  gap: 8px !important;
  line-height: 1;
}

#navbar .nav-links {
  display: flex;
  align-items: center;
  gap: 36px !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

#navbar .nav-links a {
  font-family: var(--font-head, "Baloo 2", cursive);
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  line-height: 1.6;
}

#navbar .nav-cta {
  margin-left: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head, "Baloo 2", cursive);
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.6;
  padding: 0.75em 2em !important;
}

.btn {
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

:is(.game-card, .team-card, .policy-card, .faq-item, .link-card, .feature-card, .feature-box, .stat-card, .price-card, .resource-card, .contact-card, .info-card, .panel-card, .glass-card) {
  border-radius: 20px;
  border: 1px solid var(--vibe-border);
  box-shadow: var(--vibe-shadow);
}

:is(.game-card, .team-card, .link-card, .feature-card, .resource-card, .contact-card, .info-card, .panel-card):hover {
  transform: translateY(-4px);
  box-shadow: var(--vibe-shadow-lg);
}

:is(.hero, .team-hero) {
  position: relative;
  overflow: hidden;
}

footer {
  background: linear-gradient(180deg, #0b1023 0%, #07071a 100%);
}

.footer-grid {
  row-gap: 24px;
  column-gap: clamp(22px, 3vw, 40px);
}

.footer-col ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
  gap: 10px;
}

.footer-col li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col a {
  opacity: 0.95;
}

.footer-col a:hover {
  opacity: 1;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 980px) {
  .hero-grid,
  .content-grid {
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .container {
    width: min(640px, 92%);
  }

  section,
  .section,
  .games-section,
  .team-section,
  .policy-section,
  .features-section,
  .pricing-section,
  .tutorial-section,
  .resources-section,
  .faq-section,
  .contact-section {
    padding-block: clamp(48px, 10vw, 72px);
  }
}