body{
margin:0;
font-family:Arial;
text-align:center;
color:white;
overflow-x:hidden;
}

/* TITLE SCREEN */

#titleScreen{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background-image:url("images/title-background.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

#titleScreen h1{
font-size:70px;
color:gold;
text-shadow:3px 3px 8px black;
display:inline-block;
animation:titleBounce 2s ease-in-out infinite;
}

#startBtn{
font-size:30px;
padding:15px 40px;
background:gold;
border:none;
border-radius:10px;
cursor:pointer;
}

/* INSTRUCTIONS SCREEN */

#instructionScreen{
display:none;
min-height:100vh;
background-image:url("images/diner-background2.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px;
box-sizing:border-box;
}

#instructionScreen h2{
font-size:54px;
color:gold;
text-shadow:3px 3px 8px black;
margin-bottom:20px;
}

.instructionBox{
background:rgba(0,0,0,.7);
padding:30px;
border-radius:14px;
font-size:22px;
max-width:700px;
width:90%;
line-height:1.6;
box-sizing:border-box;
}

.instructionBox p{
margin:12px 0;
}

.hintTitle{
color:gold;
font-size:28px;
font-weight:bold;
margin-top:24px;
margin-bottom:10px;
text-shadow:2px 2px 6px black;
}

#instructionBtn{
margin-top:30px;
font-size:26px;
padding:12px 35px;
background:gold;
border:none;
border-radius:10px;
cursor:pointer;
}

/* GAME SCREEN */

#gameScreen{
display:none;
min-height:100vh;
background-image:url("images/diner-background2.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
flex-direction:column;
align-items:center;
position:relative;
}

/* EXIT BUTTON */

#exitBtn{
position:absolute;
top:20px;
right:20px;
font-size:18px;
padding:10px 18px;
background:gold;
color:black;
border:none;
border-radius:8px;
cursor:pointer;
z-index:1000;
}

#exitBtn:hover{
background:#ffd700;
}

/* GAME AREA */

#gameArea{
position:relative;
width:100%;
height:65vh;
overflow:hidden;
margin-top:40px;
}

/* CUSTOMER */

#customerImage{
position:absolute;
bottom:0;
left:-500px;
width:420px;
max-height:70vh;
pointer-events:none;
}

.walkIn{
animation:walkIn 1.6s forwards;
}

@keyframes walkIn{
0%{
left:-500px;
}
100%{
left:50%;
transform:translateX(-50%);
}
}

/* FOOD */

#foodImage{
position:absolute;
bottom:60px;
left:-300px;
width:180px;
display:none;
pointer-events:none;
z-index:4;
}

.serveFood{
animation:serveFood 0.8s forwards;
}

@keyframes serveFood{
0%{
left:-300px;
}
100%{
left:50%;
transform:translateX(-50%);
}
}

/* NAME */

#characterName{
position:absolute;
bottom:85vh;
left:50%;
transform:translateX(-50%);
font-size:34px;
font-weight:bold;
color:white;
padding:8px 18px;
background:rgba(0,0,0,0.65);
border-radius:10px;
text-shadow:2px 2px 6px black;
z-index:5;
}

/* ORDER BUBBLE */

#orderBubble{
display:none;
background:white;
color:black;
padding:15px 25px;
border-radius:10px;
font-size:24px;
margin-top:10px;
}

/* BUTTONS */

#gameButtons{
display:none;
margin-top:20px;
}

#gameButtons button{
font-size:22px;
padding:12px 28px;
margin:10px;
background:gold;
border:none;
border-radius:10px;
cursor:pointer;
}

/* SCORE */

#streak{
margin-top:20px;
font-size:26px;
text-shadow:2px 2px 6px black;
}

/* TITLE BOUNCE */

@keyframes titleBounce {
0% { transform: translateY(0); }
25% { transform: translateY(-15px); }
50% { transform: translateY(0); }
75% { transform: translateY(-8px); }
100% { transform: translateY(0); }
}

/* PLAYER MENU */

#menuContainer{
display:none;
position:fixed;
top:20px;
left:20px;
z-index:9999;
text-align:left;
}

#menuToggle{
font-size:20px;
padding:10px 16px;
background:white;
color:black;
border:none;
border-radius:10px;
cursor:pointer;
box-shadow:0 2px 8px rgba(0,0,0,.25);
}

#collapsibleMenu{
margin-top:10px;
width:260px;
background:rgba(0,0,0,.88);
color:white;
padding:14px 16px;
border-radius:12px;
box-shadow:0 2px 10px rgba(0,0,0,.3);
}

#collapsibleMenu h3{
margin:0 0 10px 0;
font-size:24px;
color:gold;
text-align:center;
}

#menuList{
margin:0;
padding-left:22px;
font-size:20px;
line-height:1.6;
}

#menuList li{
margin-bottom:4px;
}

.hidden{
display:none !important;
}