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

html, body {
  min-height: 100%;
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", system-ui, sans-serif;
  color: #fff;
  /* Blue → pink gradient background */
  background: linear-gradient(135deg,
    #2a4d8f 0%,
    #4a6fbf 25%,
    #b780d8 60%,
    #ff8fb1 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* ============================================================
   Sparkles — white twinkling dots floating around the page
   ============================================================ */
.sparkles {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.sparkles span {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
  opacity: 0;
  animation: twinkle 4s infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
}
/* Spread sparkles around the page with random-ish positions + delays */
.sparkles span:nth-child(1)  { top: 8%;  left: 12%; animation-delay: 0.0s; }
.sparkles span:nth-child(2)  { top: 18%; left: 84%; animation-delay: 0.4s; width: 8px; height: 8px; }
.sparkles span:nth-child(3)  { top: 28%; left: 25%; animation-delay: 0.8s; }
.sparkles span:nth-child(4)  { top: 35%; left: 68%; animation-delay: 1.2s; width: 5px; height: 5px; }
.sparkles span:nth-child(5)  { top: 44%; left: 8%;  animation-delay: 1.6s; }
.sparkles span:nth-child(6)  { top: 52%; left: 92%; animation-delay: 2.0s; width: 9px; height: 9px; }
.sparkles span:nth-child(7)  { top: 60%; left: 35%; animation-delay: 2.4s; }
.sparkles span:nth-child(8)  { top: 68%; left: 78%; animation-delay: 2.8s; }
.sparkles span:nth-child(9)  { top: 76%; left: 18%; animation-delay: 3.2s; width: 7px; height: 7px; }
.sparkles span:nth-child(10) { top: 84%; left: 60%; animation-delay: 3.6s; }
.sparkles span:nth-child(11) { top: 14%; left: 45%; animation-delay: 0.2s; }
.sparkles span:nth-child(12) { top: 22%; left: 56%; animation-delay: 0.6s; width: 4px; height: 4px; }
.sparkles span:nth-child(13) { top: 30%; left: 90%; animation-delay: 1.0s; }
.sparkles span:nth-child(14) { top: 38%; left: 30%; animation-delay: 1.4s; }
.sparkles span:nth-child(15) { top: 46%; left: 50%; animation-delay: 1.8s; width: 8px; height: 8px; }
.sparkles span:nth-child(16) { top: 54%; left: 22%; animation-delay: 2.2s; }
.sparkles span:nth-child(17) { top: 62%; left: 65%; animation-delay: 2.6s; }
.sparkles span:nth-child(18) { top: 70%; left: 5%;  animation-delay: 3.0s; }
.sparkles span:nth-child(19) { top: 78%; left: 88%; animation-delay: 3.4s; width: 6px; height: 6px; }
.sparkles span:nth-child(20) { top: 86%; left: 38%; animation-delay: 3.8s; }
.sparkles span:nth-child(21) { top:  4%; left: 60%; animation-delay: 0.5s; }
.sparkles span:nth-child(22) { top: 12%; left: 30%; animation-delay: 1.1s; }
.sparkles span:nth-child(23) { top: 24%; left: 70%; animation-delay: 1.7s; }
.sparkles span:nth-child(24) { top: 40%; left: 14%; animation-delay: 2.3s; }
.sparkles span:nth-child(25) { top: 50%; left: 75%; animation-delay: 2.9s; width: 5px; height: 5px; }
.sparkles span:nth-child(26) { top: 56%; left: 42%; animation-delay: 3.5s; }
.sparkles span:nth-child(27) { top: 66%; left: 50%; animation-delay: 0.3s; }
.sparkles span:nth-child(28) { top: 74%; left: 28%; animation-delay: 0.9s; }
.sparkles span:nth-child(29) { top: 82%; left: 75%; animation-delay: 1.5s; width: 7px; height: 7px; }
.sparkles span:nth-child(30) { top: 90%; left: 50%; animation-delay: 2.1s; }

/* ============================================================
   Title (SENMI)
   ============================================================ */
.hero {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 60px 24px 30px;
}
.title {
  font-size: clamp(72px, 12vw, 144px);
  font-weight: 900;
  letter-spacing: 12px;
  color: #fff;
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.6),
    0 4px 0 rgba(91, 59, 136, 0.6),
    0 8px 30px rgba(0, 0, 0, 0.3);
  animation: titleFloat 4s ease-in-out infinite;
}
@keyframes titleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.tagline {
  font-size: clamp(16px, 2.4vw, 24px);
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   Game grid + cards
   ============================================================ */
.game-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 24px 60px;
}

.game-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: #2b2b2b;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  border: 4px solid #fff;
}
.game-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.game-card.coming-soon {
  cursor: default;
  opacity: 0.85;
}
.game-card.coming-soon:hover {
  transform: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* Thumbnail area */
.thumb {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Magic Stones thumbnail — matches the real game's title screen */
.thumb-magic-stones {
  background: linear-gradient(180deg, #ffe6a8 0%, #ffb8c5 100%);
  flex-direction: column;
  gap: 6px;
}
.ms-title {
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #5b3b88;
  letter-spacing: 1.5px;
  text-shadow:
    2px 2px 0 #fff,
    4px 4px 0 rgba(91, 59, 136, 0.25);
  margin: 0;
}
.ms-subtitle {
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", system-ui, sans-serif;
  font-size: 14px;
  color: #7a4a99;
  margin: 0;
}
.thumb-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.thumb-sparkles span {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px #fff;
  animation: twinkle 2.5s infinite;
}
.thumb-sparkles span:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.thumb-sparkles span:nth-child(2) { top: 70%; left: 80%; animation-delay: 0.6s; }
.thumb-sparkles span:nth-child(3) { top: 30%; left: 70%; animation-delay: 1.2s; }
.thumb-sparkles span:nth-child(4) { top: 80%; left: 30%; animation-delay: 1.8s; }

.thumb-coming {
  background: linear-gradient(135deg, #6a7faf 0%, #a89fbf 100%);
}
.qmark {
  font-size: 110px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
  font-weight: 900;
}

.card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.card-body h2 {
  font-size: 26px;
  color: #5b3b88;
  margin-bottom: 8px;
}
.card-body p {
  font-size: 14px;
  color: #555;
  line-height: 1.4;
  flex-grow: 1;
  margin-bottom: 14px;
}
.play-btn {
  align-self: flex-start;
  background: #ff5577;
  color: white;
  font-weight: bold;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 16px;
  box-shadow: 0 4px 0 #c75d80, 0 6px 14px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s, box-shadow 0.1s;
}
.game-card:hover .play-btn {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #c75d80, 0 10px 18px rgba(0, 0, 0, 0.25);
}
.play-btn.disabled {
  background: #b9b3c2;
  box-shadow: 0 3px 0 #8a8294;
  cursor: not-allowed;
}

/* ============================================================
   Footer
   ============================================================ */
.foot {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 24px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}