:root {
  --font-heading: "Fredoka One", sans-serif;
  --font-body:    "Poppins", sans-serif;
  --menu-bg:       rgba(255,255,255,0.15);
  --menu-border:   rgba(255,255,255,0.3);
  --menu-shadow:   0 8px 24px rgba(0,0,0,0.15);
  --btn-radius:    12px;
  --btn-shadow:    0 4px 12px rgba(0,0,0,0.15);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: var(--font-body);
  min-height:100vh;
  background: linear-gradient(#70d0ee, #89dff8);
  color:#fff;
}
header {
  position:fixed;
  top:0; left:0; right:0;
  backdrop-filter:blur(20px);
  background:rgba(255,255,255,0.1);
  border-bottom:1px solid var(--menu-border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.75rem 1rem;
  z-index:10;
}
.logo {
  font-family:var(--font-heading);
  font-size:1.5rem;
  color:#FFC107;
}
nav { display:flex; gap:1rem; }
nav a {
  color:#fff;
  text-decoration:none;
  font-weight:500;
  position:relative;
}
nav a:hover::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:#fff;
}
nav a:hover { color:#ffe; }
.hamburger { display:none; cursor:pointer; font-size:1.5rem; }
@media(max-width:600px){
  nav { display:none; position:absolute; top:100%; right:1rem; background:rgba(0,0,0,0.3); flex-direction:column; padding:1rem; border-radius:var(--btn-radius); }
  nav.open { display:flex; }
  .hamburger { display:block; }
}
.hero {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:6rem 1rem 2rem;
}
.hero h1 {
  font-family:var(--font-heading);
  font-size:3rem;
  text-shadow:0 2px 4px rgba(0,0,0,0.5);
}
.hero p {
  font-size:1.25rem;
  margin:0.5rem 0 2rem;
}
.cta-btn {
  padding:1rem 2rem;
  border:none;
  border-radius:var(--btn-radius);
  background-image:linear-gradient(to bottom,#4FC3F7,#0288D1);
  color:#fff;
  font-family:var(--font-body);
  font-weight:600;
  cursor:pointer;
  box-shadow:var(--btn-shadow);
  transition:transform 0.2s, box-shadow 0.2s;
}
.cta-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,0.2);
}
.features {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  padding:2rem 1rem;
  max-width:960px;
  margin:0 auto;
}
.feature-card {
  background:var(--menu-bg);
  backdrop-filter:blur(20px);
  border:1px solid var(--menu-border);
  border-radius:24px;
  box-shadow:var(--menu-shadow);
  padding:1rem;
  text-align:center;
}
.feature-card img {
  width:40px;
  height:40px;
  margin-bottom:0.5rem;
}
footer {
  backdrop-filter:blur(20px);
  background:rgba(255,255,255,0.1);
  padding:1rem;
  text-align:center;
  border-top:1px solid var(--menu-border);
  margin-top:2rem;
}
footer a {
  color:#fff;
  text-decoration:none;
  margin:0 0.5rem;
}
footer a:hover { text-decoration:underline; }
@media(max-width:800px){
  .hero h1 { font-size:2.5rem; }
  .hero p  { font-size:1rem; }
  .features { grid-template-columns:1fr; }
}

#gameCanvas {
  position: absolute;
  z-index: 0;
}

#menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 360px;
  padding: 24px;
  background: var(--menu-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--menu-border);
  border-radius: 24px;
  box-shadow: var(--menu-shadow);
  text-align: center;
  z-index: 15;
}