*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:system-ui,-apple-system,BlinkMacSystemFont;
}

body{
  min-height:100vh;
  background:#000;
  overflow:hidden;
}

/* BACKGROUND */
#bg{
  position:fixed;
  inset:0;
  background:
    linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.9)),
    url("Gemini_Generated_Image_msidqpmsidqpmsid.png");
  background-size:cover;
  background-position:center;
  z-index:-1;
}

/* APP UI */
#app{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}

.card{
  background:#fff;
  max-width:420px;
  width:100%;
  border-radius:22px;
  padding:2rem 1.5rem;
  text-align:center;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
}

.emoji{
  font-size:clamp(3rem,8vw,4rem);
}

h1{
  font-size:clamp(1.4rem,5vw,2rem);
  margin-top:.5rem;
}

.sub{
  margin:.5rem 0 1.5rem;
  color:#555;
}

button{
  width:100%;
  padding:1rem;
  font-size:1.1rem;
  font-weight:700;
  border:none;
  border-radius:16px;
  background:#16a34a;
  color:#fff;
  cursor:pointer;
}

button:active{
  transform:scale(.96);
}

#waiterText{
  margin-top:1rem;
  font-size:clamp(.9rem,3.5vw,1.05rem);
  color:#444;
  opacity:0;
  transition:.4s;
}

/* JUMPSCARE IMAGE */
#biriyani{
  position:fixed;
  top:50%;
  left:50%;
  width:min(90vw,700px);
  transform:translate(-50%,-50%) scale(.05);
  opacity:0;
  pointer-events:none;
  z-index:10;
}

/* ATTACK MODE */
body.attack #biriyani{
  opacity:1;
  animation:
    scare .09s cubic-bezier(.2,.9,.1,1) forwards,
    shake .09s ease-in-out .15s;
  }

@keyframes scare{
  0%{
    transform:translate(-50%,-50%) scale(.05);
  }
  60%{
    filter: blur(0);
  }
  80%{
    transform:translate(-50%,-50%) scale(1.25);
  }
  100%{
    transform:translate(-50%,-50%) scale(1.1);
    filter: blur(0);
  }
}
@keyframes shake{
  0%{ transform:translate(-50%,-50%) scale(1.1) translateX(0); }
  25%{ transform:translate(-50%,-50%) scale(1.1) translateX(-8px); }
  50%{ transform:translate(-50%,-50%) scale(1.1) translateX(8px); }
  75%{ transform:translate(-50%,-50%) scale(1.1) translateX(-4px); }
  100%{ transform:translate(-50%,-50%) scale(1.1) translateX(0); }
    }