/* ===== Stanley's Fun Corner - Landing ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --font-face: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --font-title: "Baloo 2", "Fredoka", system-ui, sans-serif;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-face);
  min-height: 100vh;
  overflow-x: hidden;
  color: #3b2b4f;
  background: linear-gradient(135deg, #aee9ff 0%, #ffd6e8 45%, #fff3b0 100%);
  background-size: 300% 300%;
  animation: gradientShift 18s ease infinite;
  position: relative;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Sky */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.cloud {
  position: absolute; background: rgba(255,255,255,.85); border-radius: 999px;
  filter: blur(2px); box-shadow: 0 6px 20px rgba(255,255,255,.4);
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: rgba(255,255,255,.85); border-radius: 50%;
}
.cloud::before { width: 55%; height: 100%; top: -45%; left: 15%; }
.cloud::after  { width: 40%; height: 90%;  top: -30%; right: 12%; }
.c1 { width: 120px; height: 46px; top: 12%; left: 6%;  animation: floaty 9s ease-in-out infinite; }
.c2 { width: 90px;  height: 36px; top: 22%; right: 8%; animation: floaty 11s ease-in-out 2s infinite; }
.c3 { width: 140px; height: 50px; top: 55%; left: 12%; animation: floaty 13s ease-in-out 1s infinite; }

.plane { position: absolute; font-size: 44px; animation: flyAcross 20s linear infinite; }
.p1 { top: 16%; left: -60px; animation-duration: 22s; }
.p2 { top: 68%; right: -60px; animation-duration: 27s; animation-direction: reverse; }

.star { position: absolute; font-size: 34px; color: #fff9c4; text-shadow: 0 0 14px #fff59d; animation: twinkle 3.5s ease-in-out infinite; }
.s1 { top: 18%; right: 24%; }
.s2 { top: 70%; left: 20%; animation-delay: 1.2s; }
.s3 { top: 38%; left: 44%; animation-delay: 2s; }

.balloon {
  position: absolute; width: 44px; height: 56px;
  border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
  box-shadow: inset -8px -8px 14px rgba(0,0,0,.12);
  animation: floaty 7s ease-in-out infinite;
}
.balloon::after { content: ""; position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); width: 2px; height: 26px; background: rgba(70,50,90,.4); }
.balloon::before { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top: 8px solid rgba(70,50,90,.3); }
.b1 { background: #ff9a76; top: 30%; right: 12%; animation-delay: .4s; }
.b2 { background: #8ed1fc; top: 15%; left: 30%; animation-delay: 1.4s; }
.b3 { background: #ffd36e; top: 74%; right: 30%; animation-delay: 2.4s; }

@keyframes flyAcross {
  from { transform: translateX(-10vw) translateY(0) rotate(0deg); }
  50%   { transform: translateX(50vw) translateY(-30px) rotate(6deg); }
  to   { transform: translateX(110vw) translateY(0) rotate(0deg); }
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes twinkle { 0%,100% { opacity:.5; transform: scale(.9); } 50% { opacity:1; transform: scale(1.2); } }

/* Hero */
.hero { position: relative; z-index: 1; min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; }
.hero-inner { max-width: 760px; animation: popIn .8s cubic-bezier(.18,.89,.32,1.28) both; }
.mascot { font-size: 110px; display: inline-block; animation: bob 2.2s ease-in-out infinite; filter: drop-shadow(0 8px 16px rgba(0,0,0,.18)); }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-16px) rotate(6deg); } }
.title { font-family: var(--font-title); font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 800; line-height: 1.05; color: #4b3273; text-shadow: 0 4px 0 rgba(255,255,255,.5); margin: 10px 0 6px; }
.name { display: inline-block; background: linear-gradient(90deg, #ff5d8f, #ff9f1c, #16a34a, #0ea5e9, #7c3aed); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbowText 5s linear infinite; padding: 0 6px; }
@keyframes rainbowText { 0% { background-position: 0% center; } 100% { background-position: 300% center; } }
.tagline { font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 500; color: #6b5b8a; margin-bottom: 28px; }
.tagline strong { color: #4b3273; }
.btn-play { font-family: var(--font-title); font-size: 1.4rem; font-weight: 700; color: #fff; border: none; cursor: pointer; padding: 16px 42px; border-radius: 999px; background: linear-gradient(90deg, #ff5d8f, #ff9f1c); box-shadow: 0 8px 0 #d94c7d, 0 14px 24px rgba(255,93,143,.35); transition: transform .15s ease, box-shadow .15s ease; display: inline-flex; align-items: center; gap: 10px; }
.btn-play:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 11px 0 #d94c7d, 0 18px 28px rgba(255,93,143,.4); }
.btn-play:active { transform: translateY(4px); box-shadow: 0 4px 0 #d94c7d, 0 6px 12px rgba(0,0,0,.2); }
.btn-emoji { font-size: 1.5rem; }
@keyframes popIn { from { opacity:0; transform: scale(.85) translateY(30px); } to { opacity:1; transform: scale(1) translateY(0); } }

/* Games */
.games { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 40px 24px 80px; }
.section-title { font-family: var(--font-title); font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 800; text-align: center; color: #4b3273; }
.section-sub { text-align: center; font-size: 1.2rem; color: #6b5b8a; margin: 8px 0 36px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px; }
.card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 6px; padding: 34px 20px; background: #fff; border-radius: 28px; text-decoration: none; color: #4b3273;
  box-shadow: 0 12px 24px rgba(0,0,0,.12); border-bottom: 8px solid var(--c2);
  background-image: linear-gradient(180deg,#fff 0%,#fff6fa 100%);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; justify-self: stretch;
  position: relative;
}
.card:hover { transform: translateY(-10px) scale(1.05) rotate(-2deg); box-shadow: 0 20px 34px rgba(0,0,0,.18); }
.card:active { transform: translateY(-2px) scale(1); }
.card-icon { font-size: 66px; margin-bottom: 8px; transition: transform .3s ease; animation: iconPop 4s ease-in-out infinite; }
.card:hover .card-icon { transform: scale(1.15) rotate(8deg); }
.card.live { background-image: linear-gradient(180deg,#fff 0%,#ecfdf5 100%); border-bottom-color: var(--c2); }
.card-live { font-size: .9rem; font-weight: 700; color: #059669; margin-top: 4px; padding: 4px 12px; background: #d1fae5; border-radius: 999px; }
@keyframes iconPop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.card-name { font-family: var(--font-title); font-size: 1.7rem; font-weight: 800; }
.card-sub { font-size: 1rem; font-weight: 500; color: #8a7ba0; }

/* Footer */
.footer { position: relative; z-index: 1; text-align: center; padding: 24px 20px 40px; color: #4b3273; font-size: 1.05rem; font-weight: 500; }
.heart { color: #ff5d8f; animation: beat 1.1s ease-in-out infinite; display: inline-block; }
@keyframes beat { 0%,100% { transform: scale(1); } 30% { transform: scale(1.3); } }
.tiny { font-size: .9rem; color: #8a7ba0; margin-top: 4px; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(60,40,90,.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 50; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal-card { background: #fff; border-radius: 30px; padding: 40px 34px; text-align: center; max-width: 400px; width: 90%; box-shadow: 0 20px 50px rgba(0,0,0,.3); transform: scale(.8); transition: transform .25s cubic-bezier(.34,1.56,.64,1); border-top: 10px solid #ff5d8f; }
.modal-overlay.show .modal-card { transform: scale(1); }
.modal-icon { font-size: 80px; margin-bottom: 6px; animation: bob 2s ease-in-out infinite; }
.modal-card h3 { font-family: var(--font-title); font-size: 2rem; font-weight: 800; color: #4b3273; margin-bottom: 8px; }
.modal-text { color: #6b5b8a; font-size: 1.1rem; margin-bottom: 24px; line-height: 1.5; }
.modal-text strong { color: #4b3273; }
.btn-close { font-family: var(--font-title); font-size: 1.2rem; font-weight: 700; color: #fff; border: none; cursor: pointer; padding: 14px 38px; border-radius: 999px; background: linear-gradient(90deg,#16a34a,#4ade80); box-shadow: 0 6px 0 #12813b; transition: transform .15s ease, box-shadow .15s ease; }
.btn-close:hover { transform: translateY(-2px) scale(1.05); }
.btn-close:active { transform: translateY(3px); box-shadow: 0 2px 0 #12813b; }

/* Confetti */
#confetti-layer { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: confettiFall linear forwards; }
@keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }

/* Responsive */
@media (max-width: 560px) {
  .mascot { font-size: 84px; }
  .card-icon { font-size: 54px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .card { padding: 24px 12px; border-radius: 22px; }
}