html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #FFE3EF;
  touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  font-family: "Baloo 2", "Comic Sans MS", "Chalkboard SE", "Trebuchet MS", system-ui, sans-serif; color: #3B1F4A; }
body { position: fixed; inset: 0; }
#app { position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: radial-gradient(circle at 30% 10%, #FFF4E6 0%, #FFE3EF 55%, #F9CFE6 100%); }
#topbar { flex: 0 0 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
#stars { font-size: 22px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; }
#stars .off { opacity: .25; filter: grayscale(1); }
#topbar .btns { display: flex; gap: 8px; }
#mute, #music { font-size: 26px; width: 48px; height: 44px; border-radius: 14px; border: 3px solid #3B1F4A;
  background: #fff; cursor: pointer; padding: 0; line-height: 1; }
#stage { flex: 1 1 auto; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 6px 8px; }
#board { display: block; touch-action: none; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.overlay { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: radial-gradient(circle at 50% 35%, #FFF4E6 0%, #FFD1E8 60%, #D9C7F5 100%); }
.overlay.hidden { display: none; }
.overlay h1 { font-size: clamp(34px, 10vw, 64px); line-height: 1.05; margin: 10px 0 24px; color: #8E3FD1;
  text-shadow: 3px 3px 0 #fff, 5px 5px 0 #F59AC4; }
.hero { width: 140px; height: 140px; animation: bob 1.6s ease-in-out infinite; }
.bigstar { font-size: 110px; animation: bob 1.2s ease-in-out infinite; }
.bigbtn { font: inherit; font-size: clamp(28px, 8vw, 42px); font-weight: 800; color: #fff; background: #F59AC4;
  border: 5px solid #3B1F4A; border-radius: 999px; padding: 18px 42px; box-shadow: 0 8px 0 #3B1F4A; cursor: pointer;
  animation: pulse 1.4s ease-in-out infinite; }
.bigbtn:active { transform: translateY(6px); box-shadow: 0 2px 0 #3B1F4A; }
.hint { font-size: 20px; margin-top: 26px; opacity: .8; line-height: 1.35; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes pulse { 0%,100% { scale: 1 } 50% { scale: 1.06 } }