:root {
  --ink: #22223a;
  --sky: #9ee6ff;
  --sky-dark: #6fc8f5;
  --sun: #ffd93d;
  --orange: #ff8a3d;
  --pink: #ff6b9d;
  --purple: #9b6bff;
  --mint: #4be3a8;
  --cream: #fff7e6;
  --card: #ffffff;
  --border-w: 4px;
  --radius: 26px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Baloo 2", "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-dark) 100%);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

.container {
  width: min(1080px, 92%);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

button {
  font-family: inherit;
}

/* ---------- Floating decorations ---------- */
.sun {
  position: fixed;
  top: 28px;
  right: 6%;
  width: 110px;
  height: 110px;
  background: var(--sun);
  border: var(--border-w) solid var(--ink);
  border-radius: 50%;
  box-shadow: 6px 6px 0 var(--ink);
  z-index: 1;
  animation: spin-slow 24s linear infinite;
}

.sun::after {
  content: "";
  position: absolute;
  inset: -14px;
  background: conic-gradient(from 0deg,
      transparent 0 14deg, rgba(255, 255, 255, 0.55) 14deg 20deg,
      transparent 20deg 34deg, rgba(255, 255, 255, 0.55) 34deg 40deg,
      transparent 40deg 54deg, rgba(255, 255, 255, 0.55) 54deg 60deg,
      transparent 60deg 74deg, rgba(255, 255, 255, 0.55) 74deg 80deg,
      transparent 80deg 94deg, rgba(255, 255, 255, 0.55) 94deg 100deg,
      transparent 100deg 114deg, rgba(255, 255, 255, 0.55) 114deg 120deg,
      transparent 120deg 134deg, rgba(255, 255, 255, 0.55) 134deg 140deg,
      transparent 140deg 154deg, rgba(255, 255, 255, 0.55) 154deg 160deg,
      transparent 160deg 174deg, rgba(255, 255, 255, 0.55) 174deg 180deg,
      transparent 180deg 194deg, rgba(255, 255, 255, 0.55) 194deg 200deg,
      transparent 200deg 214deg, rgba(255, 255, 255, 0.55) 214deg 220deg,
      transparent 220deg 234deg, rgba(255, 255, 255, 0.55) 234deg 240deg,
      transparent 240deg 254deg, rgba(255, 255, 255, 0.55) 254deg 260deg,
      transparent 260deg 274deg, rgba(255, 255, 255, 0.55) 274deg 280deg,
      transparent 280deg 294deg, rgba(255, 255, 255, 0.55) 294deg 300deg,
      transparent 300deg 314deg, rgba(255, 255, 255, 0.55) 314deg 320deg,
      transparent 320deg 334deg, rgba(255, 255, 255, 0.55) 334deg 340deg,
      transparent 340deg 354deg, rgba(255, 255, 255, 0.55) 354deg 360deg);
  border-radius: 50%;
  z-index: -1;
  animation: spin-slow 24s linear infinite;
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

.cloud {
  position: fixed;
  background: #fff;
  border: var(--border-w) solid var(--ink);
  border-radius: 50px;
  box-shadow: 5px 5px 0 var(--ink);
  opacity: 0.9;
  z-index: 1;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border: var(--border-w) solid var(--ink);
  border-radius: 50%;
}

.cloud::before {
  width: 55px;
  height: 55px;
  top: -28px;
  left: 24px;
}

.cloud::after {
  width: 38px;
  height: 38px;
  top: -16px;
  right: 22px;
}

.cloud-1 {
  width: 150px;
  height: 48px;
  top: 15%;
  left: -40px;
  animation: drift 26s ease-in-out infinite;
}

.cloud-2 {
  width: 110px;
  height: 38px;
  top: 38%;
  right: -30px;
  animation: drift 32s ease-in-out infinite reverse;
}

@keyframes drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(34px); }
}

.star {
  position: fixed;
  font-size: 1.6rem;
  color: var(--sun);
  z-index: 1;
  animation: bob 3.2s ease-in-out infinite;
  text-shadow: 2px 2px 0 var(--ink);
}

.star-1 { top: 62%; left: 6%; animation-delay: 0s; }
.star-2 { top: 76%; right: 7%; animation-delay: 0.9s; }
.star-3 { bottom: 8%; left: 12%; animation-delay: 1.7s; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}

/* ---------- Nav ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 0;
}

.brand {
  font-size: 1.5rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  -webkit-text-stroke: 1px var(--ink);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12);
}

.brand-icon {
  font-size: 1.7rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  border: var(--border-w) solid var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-big {
  background: var(--orange);
  color: #fff;
  box-shadow: 6px 6px 0 var(--ink);
  font-size: 1.15rem;
}

.btn-big:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}

.btn-cartoon {
  background: var(--card);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

.btn-cartoon:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.lang-toggle {
  background: var(--sun);
  color: var(--ink);
  padding: 10px 18px;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 2;
  padding-bottom: 20px;
}

.hero-content {
  padding: 40px 0 30px;
  max-width: 680px;
  text-align: center;
  margin: 0 auto;
}

.hero-content h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--ink);
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
}

.pop {
  color: var(--pink);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
  letter-spacing: 0.01em;
}

.tagline {
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  font-weight: 700;
  color: var(--ink);
  opacity: 0.85;
  max-width: 560px;
  margin: 0 auto 30px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Mascot ---------- */
.mascot {
  width: 140px;
  height: 140px;
  margin: 0 auto 24px;
  position: relative;
  animation: mascot-bounce 2.4s ease-in-out infinite;
}

@keyframes mascot-bounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-14px) rotate(3deg); }
}

.mascot-face {
  width: 100%;
  height: 100%;
  background: var(--sun);
  border: var(--border-w) solid var(--ink);
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  box-shadow: 8px 8px 0 var(--ink);
  position: relative;
}

.mascot-face::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 20px;
  background: linear-gradient(90deg, transparent 0 24%, var(--ink) 24% 48%, transparent 48% 52%, var(--ink) 52% 76%, transparent 76%);
  border-radius: 999px;
  opacity: 0.9;
}

.eye {
  position: absolute;
  top: 62px;
  width: 20px;
  height: 26px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
}

.eye::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 12px;
  background: var(--ink);
  border-radius: 50%;
}

.eye-left { left: 34px; }
.eye-right { right: 34px; }

.mouth {
  position: absolute;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 24px;
  border-bottom: 5px solid var(--ink);
  border-radius: 0 0 40px 40px;
}

.mouth::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  width: 6px;
  height: 6px;
  background: var(--pink);
  border-radius: 50%;
}

.spark {
  position: absolute;
  color: var(--sun);
  font-size: 1.5rem;
  -webkit-text-stroke: 1.5px var(--ink);
  animation: sparkle 1.4s ease-in-out infinite;
}

.spark-1 { top: -12px; right: -6px; }
.spark-2 { bottom: 8px; left: -14px; animation-delay: 0.4s; }
.spark-3 { top: 24px; right: -20px; font-size: 1rem; animation-delay: 0.8s; }

@keyframes sparkle {
  0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.15) rotate(20deg); opacity: 1; }
}

/* ---------- Wave divider ---------- */
.wave-divider {
  position: relative;
  z-index: 2;
  line-height: 0;
  margin-top: -4px;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 60px;
}

.wave-divider path {
  fill: var(--cream);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}

/* ---------- Sections ---------- */
main.content {
  background: var(--cream);
  border-left: var(--border-w) solid var(--ink);
  border-right: var(--border-w) solid var(--ink);
  width: 100%;
  max-width: 100%;
  padding: 0;
}

main.content::before,
main.content::after {
  content: "";
  display: block;
  width: 100%;
  height: 34px;
  background: repeating-linear-gradient(45deg, var(--ink) 0 18px, transparent 18px 36px);
  opacity: 0.9;
}

main.content::before {
  border-top: var(--border-w) solid var(--ink);
}

main.content::after {
  border-bottom: var(--border-w) solid var(--ink);
}

.section {
  padding: 64px 0;
  text-align: center;
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--ink);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  display: inline-block;
  position: relative;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 90px;
  height: 12px;
  background: var(--pink);
  border: 3px solid var(--ink);
  border-radius: 999px;
}

.section-subtitle {
  color: var(--ink);
  opacity: 0.75;
  font-weight: 700;
  margin: 22px 0 40px;
}

/* ---------- Games grid ---------- */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 28px;
  padding: 0 4%;
  max-width: 1080px;
  margin: 0 auto;
}

.game-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  background: var(--card);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  padding: 24px 22px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  position: relative;
  min-height: 200px;
}

.game-card:nth-child(4n + 1) { background: #fff; }
.game-card:nth-child(4n + 2) { background: #e8f6ff; }
.game-card:nth-child(4n + 3) { background: #fff0f6; }
.game-card:nth-child(4n + 4) { background: #f1eaff; }

.game-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 12px 12px 0 var(--ink);
}

.game-card .emoji {
  font-size: 2.6rem;
  line-height: 1;
  display: block;
}

.game-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
}

.game-card .game-desc {
  color: var(--ink);
  opacity: 0.75;
  font-size: 0.95rem;
  flex: 1;
}

.skill-tag {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 800;
  background: var(--purple);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 3px 12px;
  box-shadow: 3px 3px 0 var(--ink);
}

.game-card .play {
  align-self: flex-start;
  font-weight: 800;
  background: var(--orange);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 7px 22px;
  box-shadow: 4px 4px 0 var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.14s ease;
}

.game-card:hover .play {
  background: var(--mint);
}

.coming-soon {
  cursor: default;
  pointer-events: none;
}

.coming-soon .play {
  background: #ccc;
  color: #666;
}

.coming-soon .badge {
  position: absolute;
  top: -14px;
  right: -10px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--pink);
  color: #fff;
  border: 3px solid var(--ink);
  padding: 4px 12px;
  border-radius: 999px;
  transform: rotate(6deg);
  box-shadow: 3px 3px 0 var(--ink);
}

/* ---------- Features ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
  padding: 0 4%;
  max-width: 1080px;
  margin: 0 auto;
}

.feature-card {
  background: var(--card);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  padding: 28px 22px;
  box-shadow: 7px 7px 0 var(--ink);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.feature-card:nth-child(1) { background: #fff7d6; }
.feature-card:nth-child(2) { background: #ffe3ec; }
.feature-card:nth-child(3) { background: #e2f7ee; }
.feature-card:nth-child(4) { background: #efe8ff; }

.feature-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--ink);
}

.feature-icon {
  font-size: 2.4rem;
  display: inline-block;
  margin-bottom: 12px;
}

.feature-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.feature-card p {
  color: var(--ink);
  opacity: 0.75;
  font-size: 0.96rem;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: #fff;
  padding: 30px 0;
  font-weight: 700;
  text-align: center;
  border-top: var(--border-w) solid var(--ink);
  position: relative;
  z-index: 2;
}

/* ---------- Responsive base ---------- */
@media (max-width: 720px) {
  .sun {
    width: 80px;
    height: 80px;
    top: 12px;
    right: 4%;
  }

  .hero-content {
    padding-top: 24px;
  }

  .games-grid,
  .features {
    padding: 0 2%;
  }

  .nav {
    flex-wrap: wrap;
  }
}

@media (min-width: 1400px) {
  .sun {
    right: 12%;
  }
}