/* ============================================================
   Kids Game Land — Global Styles (lobby + base)
   ============================================================ */
:root {
  --mint: #4caf9b;
  --mint-light: #d8f3ec;
  --sky: #4a90c4;
  --sky-light: #dceefb;
  --cream: #f6c453;
  --cream-light: #fff3d6;
  --coral: #ff7e67;
  --coral-light: #ffe3dc;
  --lavender: #9b7edb;
  --lavender-light: #ece4fb;
  --pink: #f47ba1;
  --pink-light: #fde3ec;
  --ink: #33505e;
  --ink-soft: #5b7a86;
  --white: #ffffff;
  --shadow: 0 6px 20px rgba(76, 111, 128, 0.15);
  --radius: 18px;
  --font: 'Baloo 2', 'Comic Sans MS', 'Segoe UI', 'PingFang SC', sans-serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(160deg, #eafaf4 0%, #eaf3ff 45%, #fff6e8 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

/* ============================================================
   Lobby
   ============================================================ */
.lobby-page { position: relative; overflow-x: hidden; }

.floating-decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; font-size: 2.2rem; }
.floating-decor span { position: absolute; opacity: 0.45; animation: floaty 8s ease-in-out infinite; }
.cloud-1 { top: 8%; left: 5%; }
.cloud-2 { top: 20%; right: 8%; animation-delay: 2s; }
.cloud-3 { bottom: 12%; left: 38%; animation-delay: 4s; font-size: 1.8rem; }
.star-1 { top: 32%; left: 12%; animation-delay: 1s; font-size: 1.6rem; }
.star-2 { top: 12%; left: 46%; animation-delay: 3s; font-size: 1.4rem; }
.leaf-1 { bottom: 18%; left: 4%; animation-delay: 1.5s; }
.leaf-2 { bottom: 28%; right: 4%; animation-delay: 2.5s; }

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

.lobby-header { text-align: center; padding: 52px 20px 14px; position: relative; z-index: 1; }
.lobby-title { font-size: 3.4rem; font-weight: 800; color: var(--ink); letter-spacing: 1px; }
.lobby-subtitle { font-size: 1.3rem; color: var(--ink-soft); margin-top: 8px; }

.lobby-main { position: relative; z-index: 1; max-width: 1220px; margin: 0 auto; padding: 28px 24px 60px; }

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 22px;
}

.game-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px 16px 18px;
  text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow);
  border: 3px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.game-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 12px 28px rgba(76, 111, 128, 0.22); border-color: var(--card, var(--mint)); }
.game-card:active { transform: translateY(-2px) scale(0.99); }

.card-icon {
  width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-items: center; font-size: 2.6rem;
  background: var(--card-bg, var(--mint-light));
  margin-bottom: 12px;
  transition: transform 0.18s ease;
}
.game-card:hover .card-icon { transform: scale(1.12) rotate(-6deg); }

.card-name { font-size: 1.28rem; font-weight: 800; }
.card-desc { font-size: 0.92rem; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; min-height: 2.6em; }

.diff-tag {
  display: inline-block; margin-top: 10px; padding: 3px 14px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  background: var(--mint-light); color: #2f7d6b;
}
.diff-tag.medium { background: var(--cream-light); color: #a87c12; }
.diff-tag.hard { background: var(--coral-light); color: #c2452f; }

.lobby-footer { position: relative; z-index: 1; text-align: center; padding: 20px; color: var(--ink-soft); font-size: 0.95rem; }

/* ============================================================
   Confetti (win celebration)
   ============================================================ */
.confetti-piece {
  position: fixed; top: -14px; width: 12px; height: 12px; border-radius: 3px;
  z-index: 9999; pointer-events: none;
  animation: confetti-fall 1.5s ease-in forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0.5; }
}

/* ============================================================
   Small screens (tolerance only; primary target is desktop)
   ============================================================ */
@media (max-width: 680px) {
  .lobby-title { font-size: 2.3rem; }
  .lobby-subtitle { font-size: 1.05rem; }
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .card-icon { width: 64px; height: 64px; font-size: 2rem; }
}