:root{
  --pink:#ff3ea5;
  --pink-2:#ff6bc7;
  --bg:#0f0215;
  --ink:#fff2fb;
  --muted:#ffd8f0;
  --shadow: 0 10px 25px rgba(255,62,165,.35);
  --card-border: rgba(255,107,199,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto,
               "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 1200px at 85% -10%, rgba(255,107,199,.20), transparent 60%),
    radial-gradient(800px 800px at -10% 110%, rgba(255,62,165,.25), transparent 60%),
    var(--bg);
}

/* SCREEN */
.screen{position:relative; min-height:100dvh; display:none;
  padding: clamp(16px, 2.5vw, 32px);}
.screen.active{display:block}

/* MENU CARD */
.menu-card{
  max-width:min(1080px, 95vw);
  margin: 8vh auto 0;
  background: linear-gradient(180deg, rgba(255,62,165,.13), rgba(255,107,199,.08));
  border:1px solid var(--card-border);
  border-radius:24px;
  padding: clamp(20px, 3.2vw, 48px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  text-align:center;
}
.title{
  font-size: clamp(28px, 7vw, 72px);
  line-height:1; margin:0;
  background: linear-gradient(90deg, #fff, #ffd8f0);
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.subtitle{ margin:.25em 0 0; font-size: clamp(22px, 5vw, 42px); font-weight:800; }
.byline{opacity:.9; margin:.6em 0 1.2em}

/* TILES */
.menu-tiles{
  display:grid; grid-template-columns:1fr 1fr;
  gap: clamp(16px, 2.6vw, 28px);
  margin: clamp(18px, 2.6vw, 28px) auto clamp(12px, 2vw, 20px);
}
.tile-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height: clamp(260px, 34dvh, 400px);
  padding: clamp(16px, 2.2vw, 28px);
  background:#fff; color:#111;
  border:1px solid var(--card-border);
  border-radius:28px; box-shadow: var(--shadow);
  text-decoration:none;
  transition:transform .08s ease, box-shadow .2s ease;
}
.tile-btn:hover{transform:scale(1.02)}
.tile-emoji{ font-size: clamp(72px, 12vw, 120px); line-height:1;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.tile-title{ margin-top:.4em; font-size: clamp(18px, 3vw, 28px); font-weight:1000; }
.tile-sub{ margin-top:.25em; font-size: clamp(14px, 2.4vw, 20px); font-weight:600; opacity:.85 }

/* BUTTON */
.btn{
  cursor:pointer; border:none; font-weight:900; letter-spacing:1px;
  text-transform:uppercase; border-radius:18px;
  padding: 16px 28px; transition: transform .08s ease, box-shadow .2s ease;
}
.btn.primary{ background: linear-gradient(90deg, var(--pink), var(--pink-2)); color:white; box-shadow: var(--shadow);}
.btn:active{transform: translateY(1px) scale(.99)}

.materials{margin-top:1.4em}