:root{
  --ad-h:90px;
  --outer-m:20px;
  --safe-bottom:env(safe-area-inset-bottom,0px)
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{
  background:linear-gradient(to bottom,#552e63,#2b013a) fixed;
  background-repeat:no-repeat;background-size:100% 100%;
  padding-bottom:calc(var(--ad-h)+var(--safe-bottom));
  overflow-x:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif
}

/* Instructions */
#instructions{
  margin:20px 30px 10px;text-align:center;color:#fff;
  font-size:clamp(1rem,2.5vw,1.4rem);text-shadow:0 0 8px #000
}

/* Choices area (GRID) */
#container2{
  margin:30px;padding:20px;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:40px;background-image:url("food.jpg");background-repeat:no-repeat;background-size:cover;
  box-shadow:0 15px 15px rgba(0,0,0,.3);
  border-bottom:1px solid rgba(255,255,255,.1);
  border-top:1px solid rgba(255,255,255,.1);
  border-radius:30px;overflow:hidden;color:#fff;z-index:1;transition:.5s;
  text-shadow:0 0 10px #000;min-height:clamp(200px,32svh,340px)
}
.choice{
  min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(1.5rem,6vw,4rem);
  background:rgba(255,255,255,.05);
  box-shadow:0 0 15px rgba(255,255,255,.3);
  border-radius:30px;padding:24px;color:#fff;font-weight:400;letter-spacing:1px;
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
  transition:transform .15s ease,background .3s ease;user-select:none;cursor:pointer
}
.choice:hover{transform:scale(1.03);background:rgba(255,255,255,.1)}

/* Actions (None of These) */
.actions{
  margin:0 30px;display:flex;justify-content:center;align-items:center;
  min-height:clamp(90px,18svh,160px)
}
.actions .btn{position:relative;width:clamp(220px,60vw,360px);height:clamp(52px,9svh,64px);display:flex;justify-content:center;align-items:center}
.actions .btn a{
  position:absolute;inset:0;display:flex;justify-content:center;align-items:center;
  background:rgba(255,255,255,.05);box-shadow:0 15px 15px rgba(0,0,0,.3);
  border-bottom:1px solid rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.1);
  border-radius:30px;padding:10px;letter-spacing:1px;text-decoration:none;overflow:hidden;color:#fff;font-weight:400;z-index:1;transition:.3s;
  backdrop-filter:blur(15px);font-size:clamp(1.1rem,4.5vw,1.6rem);text-shadow:0 0 10px #000
}
.actions .btn:hover a{letter-spacing:2px}
.actions .btn a::before{
  content:"";position:absolute;top:0;left:0;width:50%;height:100%;
  background:linear-gradient(to left,rgba(255,255,255,.15),transparent);
  transform:skewX(45deg) translate(0);transition:.5s
}
.actions .btn:hover a::before{transform:skewX(45deg) translate(200px)}

/* Modal (centered above everything) */
.modal{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);z-index:10000
}
.modal.open{display:flex}
.modal-content{
  margin:0;padding:20px;border:1px solid #888;width:min(90%,900px);max-height:80svh;overflow:auto;text-align:center;
  font-size:clamp(2rem,6vw,4rem);background:rgba(255,255,255,.05);box-shadow:0 0 20px rgba(0,0,0,.4);
  border-radius:30px;color:#fff;text-shadow:0 0 10px #fff;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);user-select:none
}
.close{color:#aaa;float:right;font-size:clamp(24px,4vw,35px);font-weight:700;line-height:1;cursor:pointer}
.close:hover{color:#fff}
body.modal-open #ad-container{pointer-events:none;filter:blur(1px)}

/* Modal Links */
#menu {
  color: red; 
  font-size: clamp(1rem, 3vw, 1.4rem); /* ✅ smaller */
  text-shadow: 0 0 3px black;
}
#restartBtn {
  color: white;
  font-size: clamp(1rem, 3vw, 1.4rem); /* ✅ smaller */
  text-shadow: 0 0 3px black;
}

/* Ad container (fixed bottom) */
#ad-container{
  width:100%;height:calc(var(--ad-h)+var(--safe-bottom));background:transparent;display:flex;justify-content:center;align-items:center;
  position:fixed;bottom:0;left:0;z-index:999;padding:5px 0;padding-bottom:var(--safe-bottom)
}

/* Mobile */
@media (max-width:1000px){
  #container2{
    margin:var(--outer-m);padding:16px;grid-template-columns:1fr;gap:32px;
    min-height:clamp(240px,38svh,420px)
  }
  .choice{width:100%;font-size:clamp(1.5rem,7vw,3rem);padding:20px}
  .actions{margin:0 var(--outer-m);min-height:clamp(90px,16svh,160px)}
}

/* Restart link */
#restartBtn{display:inline-block;padding:8px 16px;border-radius:12px}