/* ====================================================================
   Krunch Dwag Challenge — styles
   ==================================================================== */

:root{
  --red: #e21b1b;
  --red-dark: #8f0e0e;
  --red-bright: #ff3131;
  --gold: #ffcc33;
  --cream: #fff4e0;
  --ink: #150202;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing: border-box; }

html, body{
  position:fixed; /* nailed to the viewport — nothing can pan/zoom the document itself */
  inset:0;
  margin:0; padding:0;
  width:100%; height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  background:#0a0000;
  font-family:'Rubik', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
  -webkit-user-select:none;
  /* deliberately NOT pan-y/none here: those also block pinch-zoom, which
     removes the user's manual escape hatch if a zoom ever slips through.
     Double-tap-zoom (the actual trigger from fast tapping) is instead
     suppressed precisely in JS, scoped to just the game's tap targets. */
  touch-action:manipulation;
}

#app{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  overflow:hidden;
  touch-action:manipulation;
}

.screen{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:none;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
}
.screen.active{ display:flex; }

.bg-photo{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 35%;
  filter:saturate(1.05) brightness(0.92);
  transform:scale(1.06);
}
.bg-photo-dim{ filter:saturate(1) brightness(0.55) blur(1.5px); }

.bg-shade{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(255,60,60,0.18) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 105%, rgba(120,10,10,0.6) 0%, transparent 62%),
    linear-gradient(180deg, rgba(15,0,0,0.55) 0%, rgba(10,0,0,0.35) 40%, rgba(5,0,0,0.9) 100%);
}
.bg-shade-game{
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255,60,60,0.15) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 100%, rgba(120,10,10,0.7) 0%, transparent 58%),
    linear-gradient(180deg, rgba(10,0,0,0.5) 0%, rgba(8,0,0,0.3) 35%, rgba(4,0,0,0.92) 100%);
}
.bg-glow{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 18%, rgba(255,204,51,0.25), transparent 45%);
  animation: glow-pulse 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glow-pulse{
  0%,100%{ opacity:.6; }
  50%{ opacity:1; }
}

.vignette{
  position:absolute; inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 min(20vmin,220px) rgba(0,0,0,0.85);
}

/* floating crumb particles on start screen */
.floating-crumbs{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.floating-crumbs span{
  position:absolute;
  bottom:-5%;
  width:8px; height:8px;
  background:var(--gold);
  border-radius:2px;
  opacity:.8;
  animation: crumb-float linear infinite;
}
@keyframes crumb-float{
  0%{ transform:translateY(0) rotate(0deg); opacity:0; }
  10%{ opacity:.9; }
  100%{ transform:translateY(-110vh) rotate(360deg); opacity:0; }
}

/* ================= START SCREEN ================= */
#screen-start{ justify-content:center; }

.start-content{
  position:relative;
  z-index:2;
  width:calc(100% - 32px);
  max-width:520px;
  height:auto;
  max-height:92dvh;
  padding: clamp(18px, 3dvh, 28px) clamp(18px, 5vw, 30px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(6px, 1.6dvh, 16px);
  overflow-y:auto;
  margin:auto;
  background:rgba(35,6,6,0.34);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:28px;
  box-shadow:0 25px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
}

.logo{
  width:min(78vw, 320px);
  max-height:32dvh;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.6));
}
.logo-bounce{ animation: logo-bounce 2.4s ease-in-out infinite; }
@keyframes logo-bounce{
  0%,100%{ transform:translateY(0) rotate(-1deg) scale(1); }
  50%{ transform:translateY(-10px) rotate(1deg) scale(1.02); }
}

.tagline{
  text-align:center;
  color:var(--cream);
  font-weight:700;
  font-size:clamp(14px, 2.6dvh, 19px);
  line-height:1.35;
  margin:0;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.tagline .hl{
  color:var(--gold);
  font-family:'Luckiest Guy', cursive;
  letter-spacing:.5px;
  text-shadow:0 2px 0 var(--red-dark);
}

.instructions-card{
  width:100%;
  background:rgba(20,4,4,0.72);
  border:2px solid rgba(255,204,51,0.35);
  border-radius:16px;
  padding:clamp(8px,1.6dvh,14px) clamp(12px,3vw,18px);
  backdrop-filter: blur(4px);
}
.instructions-card h2{
  margin:0 0 6px;
  color:var(--gold);
  font-family:'Luckiest Guy', cursive;
  letter-spacing:1px;
  font-size:clamp(13px, 2.2dvh, 17px);
  text-align:center;
}
.instructions-card ul{
  margin:0; padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.instructions-card li{
  color:var(--cream);
  font-size:clamp(11.5px, 1.9dvh, 14px);
  position:relative;
  padding-left:1.2em;
  line-height:1.4;
}
.instructions-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.5em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold);
}

.start-step{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(6px, 1.6dvh, 16px);
}
.start-step:not(.hidden){ animation: step-in .45s ease; }
@keyframes step-in{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

#auth-area{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.contact-area{
  width:100%;
  background:rgba(20,4,4,0.55);
  border:1.5px solid rgba(255,255,255,0.18);
  border-radius:14px;
  padding:10px 14px;
}
.contact-label{
  display:block;
  color:var(--cream);
  font-size:clamp(11px,1.8dvh,13px);
  font-weight:700;
  margin-bottom:6px;
}
.contact-label .opt{ color:rgba(255,244,224,0.6); font-weight:500; }
.contact-row{ display:flex; gap:8px; }
.contact-row input{
  flex:1;
  min-width:0;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.1);
  color:#fff;
  padding:9px 14px;
  font-size:16px; /* keep >=16px: iOS Safari auto-zooms into smaller inputs on focus */
  font-family:'Rubik', sans-serif;
}
.contact-row input::placeholder{ color:rgba(255,244,224,0.45); }
.contact-row input:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.btn-save-contact{
  appearance:none; border:none; cursor:pointer;
  background:var(--gold); color:var(--ink);
  font-weight:800; font-size:12.5px;
  border-radius:999px; padding:0 16px;
  flex:0 0 auto;
}
.contact-saved-msg{
  margin-top:6px;
  color:var(--gold);
  font-size:11.5px;
  font-weight:700;
}

.terms-notice{
  margin:6px 0 0;
  color:rgba(255,244,224,0.65);
  font-size:11px;
  text-align:center;
  line-height:1.4;
}
.link-terms{
  appearance:none; border:none; background:none;
  padding:0; margin:0;
  color:var(--gold);
  font-size:inherit;
  font-weight:700;
  text-decoration:underline;
  cursor:pointer;
}

.tone-picker{ width:100%; }
.tone-picker-label{
  color:var(--cream);
  font-size:clamp(11px,1.8dvh,13px);
  font-weight:700;
  margin-bottom:6px;
  text-align:center;
}
.tone-options{
  display:flex;
  justify-content:center;
  gap:10px;
}
.tone-swatch{
  width:36px; height:36px;
  border-radius:50%;
  background-image:url('assets/hand-left.png');
  background-size:260% auto;
  background-position:58% 14%;
  border:2.5px solid rgba(255,255,255,0.3);
  cursor:pointer;
  padding:0;
  transition:transform .15s ease, border-color .15s ease;
}
.tone-swatch:active{ transform:scale(.92); }
.tone-swatch.selected{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,204,51,0.35);
  transform:scale(1.08);
}

.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  font-family:'Rubik', sans-serif;
  font-weight:700;
  border-radius:999px;
  padding:12px 22px;
  font-size:clamp(13px,2dvh,16px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  max-width:340px;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:active{ transform:scale(.96); }

.btn-google{
  background:#fff;
  color:#3c4043;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.btn-google:hover{ filter:brightness(0.97); }

.btn-guest{
  background:rgba(255,255,255,0.12);
  color:var(--cream);
  border:1.5px solid rgba(255,255,255,0.35);
}

.user-chip{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.1);
  border:1.5px solid rgba(255,204,51,0.5);
  border-radius:999px;
  padding:6px 10px 6px 6px;
  color:var(--cream);
  font-size:13px;
  font-weight:600;
}
.user-chip img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
.btn-signout{
  background:rgba(0,0,0,0.3);
  border:none; color:var(--cream);
  width:20px; height:20px; border-radius:50%;
  cursor:pointer; font-size:11px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.hidden{ display:none !important; }

.btn-play{
  background:linear-gradient(180deg, var(--red-bright), var(--red-dark));
  color:#fff;
  font-family:'Luckiest Guy', cursive;
  letter-spacing:1.5px;
  font-size:clamp(17px,3dvh,24px);
  padding:14px 22px;
  box-shadow:0 6px 0 #5c0808, 0 10px 22px rgba(0,0,0,.5);
  border:2px solid rgba(255,204,51,0.6);
  margin-top:2px;
}
.btn-play:not(:disabled){ animation: play-pulse 1.6s ease-in-out infinite; }
.btn-play:active:not(:disabled){ transform:translateY(4px) scale(.98); box-shadow:0 2px 0 #5c0808; }
.btn-play:disabled{ opacity:.45; filter:grayscale(.4); cursor:not-allowed; animation:none; }
@keyframes play-pulse{
  0%,100%{ box-shadow:0 6px 0 #5c0808, 0 10px 22px rgba(0,0,0,.5), 0 0 0 0 rgba(255,49,49,.5); }
  50%{ box-shadow:0 6px 0 #5c0808, 0 10px 30px rgba(0,0,0,.5), 0 0 0 14px rgba(255,49,49,0); }
}

.btn-mute{
  position:absolute;
  top:max(10px, var(--safe-top));
  right:12px;
  background:rgba(0,0,0,0.4);
  border:1.5px solid rgba(255,255,255,0.3);
  color:#fff;
  width:38px; height:38px;
  border-radius:50%;
  font-size:16px;
  cursor:pointer;
  z-index:5;
}

/* ================= COUNTDOWN ================= */
#screen-countdown{
  align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 50%, rgba(120,0,0,.9), rgba(5,0,0,.98));
  touch-action:manipulation;
}
.countdown-num{
  font-family:'Luckiest Guy', cursive;
  font-size:min(40vw, 260px);
  color:var(--gold);
  text-shadow:0 0 40px rgba(255,49,49,.8), 0 8px 0 var(--red-dark);
  -webkit-text-stroke:4px var(--red-dark);
}
.countdown-num.pop{ animation: countdown-pop .7s cubic-bezier(.2,1.6,.4,1); }
@keyframes countdown-pop{
  0%{ transform:scale(2.2); opacity:0; }
  40%{ transform:scale(0.9); opacity:1; }
  60%{ transform:scale(1.15); }
  100%{ transform:scale(1); opacity:1; }
}

/* ================= GAME SCREEN ================= */
#screen-game{ justify-content:flex-start; touch-action:manipulation; }

.hud{
  position:relative;
  z-index:4;
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding: max(12px, var(--safe-top)) 16px 0;
}

.timer-wrap{
  position:relative;
  width:clamp(56px, 12vmin, 92px);
  height:clamp(56px, 12vmin, 92px);
  flex:0 0 auto;
}
.timer-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
#timer-num{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Luckiest Guy', cursive;
  color:#fff;
  font-size:clamp(16px, 3.6vmin, 26px);
  text-shadow:0 2px 3px rgba(0,0,0,.7);
}
.timer-wrap.urgent #timer-num{ color:var(--red-bright); animation: timer-shake .5s infinite; }
@keyframes timer-shake{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.25); }
}

.lives-wrap{
  display:flex;
  gap:4px;
  align-items:center;
  padding-top:6px;
}
.life-heart{
  font-size:clamp(15px,3.4vmin,22px);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
  transition:transform .3s cubic-bezier(.3,-0.3,.6,1), opacity .3s ease;
}
.life-heart.lost{
  transform:scale(0) rotate(25deg);
  opacity:0;
}

.score-wrap{
  text-align:right;
}
.score-label{
  color:var(--gold);
  font-weight:700;
  font-size:clamp(9px, 1.7vmin, 12px);
  letter-spacing:1px;
}
.score-num{
  font-family:'Luckiest Guy', cursive;
  color:#fff;
  font-size:clamp(30px, 8vmin, 56px);
  line-height:1;
  text-shadow:0 3px 0 var(--red-dark), 0 6px 14px rgba(0,0,0,.6);
}
.score-num.bump{ animation: score-bump .4s cubic-bezier(.2,1.8,.4,1); }
@keyframes score-bump{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.5) rotate(-6deg); color:var(--gold); }
  100%{ transform:scale(1); }
}

.bite-progress{
  position:relative; z-index:4;
  display:flex; gap:8px;
  margin-top:clamp(4px,1.2dvh,10px);
}
.bite-progress .dot{
  width:clamp(9px,2vmin,14px); height:clamp(9px,2vmin,14px);
  border-radius:50%;
  background:rgba(255,255,255,0.18);
  border:1.5px solid rgba(255,255,255,0.4);
  transition:background .15s ease, transform .25s cubic-bezier(.2,1.8,.4,1);
}
.bite-progress .dot.filled{
  background:var(--gold);
  border-color:var(--gold);
  transform:scale(1.25);
  box-shadow:0 0 10px rgba(255,204,51,.8);
}

.combo-popup-layer{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:6;
}
.combo-popup{
  position:absolute;
  font-family:'Luckiest Guy', cursive;
  color:var(--gold);
  font-size:clamp(16px,4vmin,26px);
  text-shadow:0 2px 0 var(--red-dark), 0 0 12px rgba(0,0,0,.6);
  animation: popup-float 0.9s ease-out forwards;
  white-space:nowrap;
}
@keyframes popup-float{
  0%{ transform:translate(-50%,0) scale(.6); opacity:0; }
  20%{ transform:translate(-50%,-10px) scale(1.2); opacity:1; }
  100%{ transform:translate(-50%,-90px) scale(1); opacity:0; }
}

.dwag-banner{
  position:absolute; top:38%; left:50%;
  transform:translate(-50%,-50%) scale(0.4);
  font-family:'Luckiest Guy', cursive;
  font-size:clamp(24px, 6vmin, 46px);
  color:#fff;
  -webkit-text-stroke:2px var(--red-dark);
  text-shadow:0 0 30px rgba(255,204,51,.9);
  z-index:7;
  opacity:0;
  pointer-events:none;
  animation: dwag-banner-pop 1s cubic-bezier(.2,1.7,.3,1) forwards;
}
@keyframes dwag-banner-pop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.2) rotate(-8deg); }
  25%{ opacity:1; transform:translate(-50%,-50%) scale(1.15) rotate(3deg); }
  40%{ transform:translate(-50%,-50%) scale(1) rotate(0deg); }
  80%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-60%) scale(1.05) rotate(0deg); }
}

/* first person rig */
.pov-rig{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
}

.meal-stage{
  position:relative;
  z-index:3;
  width:clamp(150px, 42vmin, 320px);
  margin-bottom:clamp(4vh, 8dvh, 10dvh);
  pointer-events:auto;
  cursor:pointer;
  touch-action:manipulation;
  animation: meal-idle 2.6s ease-in-out infinite;
}
@keyframes meal-idle{
  0%,100%{ transform:rotate(-2deg) translateY(0); }
  50%{ transform:rotate(2deg) translateY(-6px); }
}
.meal-stage.chomp{ animation: meal-chomp .22s ease-out; }
@keyframes meal-chomp{
  0%{ transform:scale(1) rotate(0deg); }
  35%{ transform:scale(0.88) rotate(-4deg) translateY(18px); }
  70%{ transform:scale(1.06) rotate(3deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
.meal-stage.gone{ animation: meal-toss .5s ease-in forwards; }
@keyframes meal-toss{
  0%{ transform:scale(1) rotate(0deg) translateY(0); opacity:1; }
  100%{ transform:scale(.5) rotate(50deg) translateY(-70vh) translateX(40vw); opacity:0; }
}
.meal-stage.arrive{ animation: meal-arrive .5s cubic-bezier(.2,1.4,.3,1); }
@keyframes meal-arrive{
  0%{ transform:scale(.3) rotate(-30deg) translateY(40px); opacity:0; }
  60%{ transform:scale(1.08) rotate(4deg); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}

.meal-shadow{
  position:absolute;
  bottom:-6%;
  left:50%;
  width:70%;
  height:14%;
  background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%);
  transform:translateX(-50%);
  filter:blur(3px);
}

.meal-img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.55));
  -webkit-user-drag:none;
}

.meal-img{ transition: clip-path .18s cubic-bezier(.3,1,.4,1); }

.bite-marks{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }

.crumb-layer{ position:absolute; inset:-10% -20%; pointer-events:none; overflow:visible; }
.crumb{
  position:absolute;
  width:7px; height:7px;
  border-radius:1px;
  background:var(--gold);
  animation: crumb-burst .6s ease-out forwards;
}
@keyframes crumb-burst{
  0%{ transform:translate(0,0) rotate(0deg) scale(1); opacity:1; }
  100%{ transform:var(--crumb-end) rotate(220deg) scale(.4); opacity:0; }
}

.hand{
  position:absolute;
  bottom:-4vmin;
  width:clamp(150px, 36vmin, 280px);
  pointer-events:none;
  z-index:1;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));
  animation: hand-idle 2.6s ease-in-out infinite;
}
.hand-left{ left:calc(50% - clamp(150px, 36vmin, 280px) * 1.05); transform-origin:66% 20%; }
.hand-right{ left:calc(50% - clamp(150px, 36vmin, 280px) * -0.05); transform-origin:34% 20%; }
.hand-img{
  width:100%; height:auto; display:block;
  -webkit-user-drag:none; user-select:none; pointer-events:none;
  filter: var(--hand-filter, none);
  transition: filter .25s ease;
}
@keyframes hand-idle{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-4px) rotate(1deg); }
}
.hand-left.squeeze{ animation: squeeze-left .22s ease-out; }
.hand-right.squeeze{ animation: squeeze-right .22s ease-out; }
@keyframes squeeze-left{
  0%{ transform:rotate(0deg) translateX(0); }
  40%{ transform:rotate(-8deg) translateX(6px) translateY(6px); }
  100%{ transform:rotate(0deg) translateX(0); }
}
@keyframes squeeze-right{
  0%{ transform:rotate(0deg) translateX(0); }
  40%{ transform:rotate(8deg) translateX(-6px) translateY(6px); }
  100%{ transform:rotate(0deg) translateX(0); }
}

/* only the hand on the side the decoy actually rests on swats — it grows
   big, lunges toward the decoy's exact position (--swat-tx/--swat-ty, set
   in JS per-event), holds there so it reads clearly, then settles back */
.hand-left.swat-pop, .hand-right.swat-pop{
  animation: hand-swat-pop .52s cubic-bezier(.22,1.9,.3,1);
  z-index:7;
}
@keyframes hand-swat-pop{
  0%{ transform:scale(1) rotate(0deg) translate(0,0); }
  38%{ transform:scale(2.3) rotate(-10deg) translate(var(--swat-tx,20px), var(--swat-ty,-26px)); }
  65%{ transform:scale(1.9) rotate(6deg) translate(var(--swat-tx,20px), var(--swat-ty,-26px)); }
  100%{ transform:scale(1) rotate(0deg) translate(0,0); }
}

.tap-hint{
  position:absolute;
  bottom:2vh; left:50%; transform:translateX(-50%);
  color:var(--cream);
  font-weight:700;
  font-size:clamp(11px,1.8dvh,14px);
  letter-spacing:1px;
  z-index:5;
  opacity:.85;
  animation: hint-fade 1.6s ease-in-out infinite;
  pointer-events:none;
  text-shadow:0 2px 4px rgba(0,0,0,.7);
}
@keyframes hint-fade{
  0%,100%{ opacity:.35; }
  50%{ opacity:.9; }
}
.tap-hint.hide{ display:none; }

/* screen shake for juice */
.shake{ animation: screen-shake .3s ease; }
@keyframes screen-shake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6px,3px); }
  40%{ transform:translate(6px,-3px); }
  60%{ transform:translate(-4px,-3px); }
  80%{ transform:translate(4px,3px); }
}

/* red flash last seconds */
.flash-red{ animation: flash-red-kf .5s ease; }
@keyframes flash-red-kf{
  0%{ background-color:rgba(226,27,27,0); }
  30%{ background-color:rgba(226,27,27,0.35); }
  100%{ background-color:rgba(226,27,27,0); }
}

/* drink-break mini event (every 7 dwags) */
.drink-event{
  position:absolute;
  z-index:8;
  width:clamp(52px,13vmin,92px);
  height:auto;
  aspect-ratio:108/190;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  pointer-events:auto;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 18px rgba(255,204,51,0.85)) drop-shadow(0 8px 14px rgba(0,0,0,.5));
  transition: left 1.9s linear, top 1.9s linear;
  touch-action:manipulation;
}
.drink-event img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}
.drink-wobble{
  animation: drink-wobble 0.5s ease-in-out infinite;
  display:block;
  width:100%; height:100%;
}
@keyframes drink-wobble{
  0%,100%{ transform:rotate(-10deg) scale(1); }
  50%{ transform:rotate(10deg) scale(1.1); }
}
.drink-event.caught{ transition:none; animation: drink-caught .4s ease forwards; pointer-events:none; }
@keyframes drink-caught{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  60%{ transform:translate(-50%,-50%) scale(1.6); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(0.2); opacity:0; }
}
.drink-event.missed{ transition:none; animation: drink-missed .5s ease forwards; pointer-events:none; }
@keyframes drink-missed{
  0%{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
  100%{ opacity:0; transform:translate(-50%,40px) scale(.6) rotate(35deg); }
}

/* "wrong order" decoy hazards — other KFC items that fly in; swat them
   away with the button below before the 3s window runs out */
.decoy-event{
  position:absolute;
  z-index:8;
  width:clamp(58px,14vmin,88px);
  height:clamp(58px,14vmin,88px);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; /* the swat button is the only interaction now */
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 14px rgba(226,27,27,0.75)) drop-shadow(0 6px 10px rgba(0,0,0,.5));
  transition: left 1s ease-out, top 1s ease-out;
}
.decoy-event img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}
.decoy-wobble{
  display:block;
  width:100%; height:100%;
  animation: decoy-shake 0.4s ease-in-out infinite;
}
@keyframes decoy-shake{
  0%,100%{ transform:rotate(-6deg); }
  50%{ transform:rotate(6deg); }
}
.decoy-event.swatted{ transition:none; animation: decoy-swatted .4s ease forwards; }
@keyframes decoy-swatted{
  0%{ transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity:1; }
  40%{ transform:translate(-50%,-50%) scale(1.3) rotate(-14deg); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(.2) rotate(45deg) translateX(60px); opacity:0; }
}
.decoy-event.expired{ transition:none; animation: decoy-expired .4s ease forwards; }
@keyframes decoy-expired{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(.7); opacity:0; }
}

/* swat-away button */
.swat-btn{
  position:absolute;
  top:20%; left:50%;
  transform:translateX(-50%);
  z-index:9;
  overflow:hidden;
  border:2.5px solid rgba(255,255,255,0.65);
  border-radius:999px;
  padding:10px 24px;
  background:linear-gradient(180deg, var(--red-bright), var(--red-dark));
  box-shadow:0 6px 0 #5c0808, 0 10px 24px rgba(0,0,0,.5), 0 0 22px rgba(255,49,49,.65);
  cursor:pointer;
  animation: swat-btn-pulse .5s ease-in-out infinite, decoy-in-pop .25s cubic-bezier(.3,1.6,.4,1);
  touch-action:manipulation;
}
@keyframes decoy-in-pop{
  0%{ transform:translateX(-50%) scale(0); }
  70%{ transform:translateX(-50%) scale(1.15); }
  100%{ transform:translateX(-50%) scale(1); }
}
@keyframes swat-btn-pulse{
  0%,100%{ transform:translateX(-50%) scale(1); }
  50%{ transform:translateX(-50%) scale(1.06); }
}
.swat-btn-label{
  position:relative;
  z-index:1;
  display:block;
  font-family:'Luckiest Guy', cursive;
  color:#fff;
  font-size:clamp(14px,3vmin,20px);
  letter-spacing:1px;
  white-space:nowrap;
  -webkit-text-stroke:1px var(--red-dark);
}
.swat-btn-fill{
  position:absolute;
  inset:0;
  width:100%;
  background:rgba(255,255,255,0.3);
  z-index:0;
}

.drink-hint{
  position:absolute;
  top:10%; left:50%;
  transform:translateX(-50%);
  z-index:8;
  font-family:'Luckiest Guy', cursive;
  color:var(--gold);
  font-size:clamp(14px,3vmin,20px);
  letter-spacing:1px;
  text-shadow:0 2px 0 var(--red-dark), 0 0 14px rgba(0,0,0,.6);
  animation: hint-fade 0.8s ease-in-out infinite;
  pointer-events:none;
  white-space:nowrap;
}

.drink-banner{
  position:absolute; top:30%; left:50%;
  transform:translate(-50%,-50%) scale(0.4);
  width:min(90vw, 360px);
  font-family:'Luckiest Guy', cursive;
  font-size:clamp(17px, 4.2vmin, 30px);
  line-height:1.2;
  color:#fff;
  text-align:center;
  -webkit-text-stroke:2px var(--red-dark);
  text-shadow:0 0 24px rgba(255,204,51,.9);
  z-index:9;
  opacity:0;
  pointer-events:none;
  animation: dwag-banner-pop 1s cubic-bezier(.2,1.7,.3,1) forwards;
}

/* turbo chomp power-up (granted by catching the drink) */
.turbo-badge{
  position:relative;
  z-index:5;
  margin-top:6px;
  padding:5px 14px;
  border-radius:999px;
  background:linear-gradient(180deg, #ffdd55, var(--gold));
  color:var(--ink);
  font-family:'Luckiest Guy', cursive;
  font-size:clamp(12px,2.4vmin,16px);
  letter-spacing:.5px;
  box-shadow:0 0 18px rgba(255,204,51,.85), 0 4px 10px rgba(0,0,0,.4);
  animation: turbo-badge-pulse .5s ease-in-out infinite;
}
@keyframes turbo-badge-pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}

.meal-stage.turbo{ animation: meal-idle 1.1s ease-in-out infinite, turbo-glow .5s ease-in-out infinite; }
@keyframes turbo-glow{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(255,204,51,0)); }
  50%{ filter:drop-shadow(0 0 26px rgba(255,140,0,.9)); }
}

/* ================= RESULTS SCREEN ================= */
#screen-results{ justify-content:center; }

.results-content{
  position:relative; z-index:2;
  width:calc(100% - 32px); max-width:480px;
  height:auto;
  max-height:92dvh;
  padding: clamp(18px, 3dvh, 28px) clamp(18px, 5vw, 30px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(6px,1.6dvh,14px);
  overflow-y:auto;
  margin:auto;
  background:rgba(35,6,6,0.34);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:28px;
  box-shadow:0 25px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
}
.results-logo{
  width:min(46vw, 150px);
  max-height:14dvh;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
}
.results-title{
  font-family:'Luckiest Guy', cursive;
  color:#fff;
  font-size:clamp(28px, 6dvh, 46px);
  -webkit-text-stroke:2px var(--red-dark);
  margin:0;
  text-align:center;
  animation: countdown-pop .6s cubic-bezier(.2,1.6,.4,1);
}
.results-sub{
  color:var(--cream);
  font-weight:600;
  text-align:center;
  margin:0;
  font-size:clamp(12px,2dvh,15px);
  opacity:.9;
}
.final-score-card{
  background:rgba(20,4,4,0.75);
  border:2px solid var(--gold);
  border-radius:20px;
  padding:clamp(10px,2dvh,18px) clamp(24px,8vw,50px);
  text-align:center;
}
.final-score-label{
  color:var(--gold);
  font-weight:700;
  font-size:clamp(10px,1.8dvh,13px);
  letter-spacing:1.5px;
}
.final-score-num{
  font-family:'Luckiest Guy', cursive;
  color:#fff;
  font-size:clamp(48px, 12dvh, 90px);
  line-height:1.05;
  text-shadow:0 4px 0 var(--red-dark);
}
.best-badge{
  background:var(--gold);
  color:var(--ink);
  font-weight:800;
  padding:6px 16px;
  border-radius:999px;
  font-size:clamp(12px,2dvh,15px);
  animation: best-badge-pop .5s cubic-bezier(.2,1.8,.4,1);
}
@keyframes best-badge-pop{
  0%{ transform:scale(0); }
  70%{ transform:scale(1.15); }
  100%{ transform:scale(1); }
}

.avatar-picker{ width:100%; }
.avatar-picker-label{
  color:var(--cream);
  font-size:clamp(11px,1.8dvh,13px);
  font-weight:700;
  margin-bottom:6px;
  text-align:center;
}
.avatar-options{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.avatar-opt{
  appearance:none; cursor:pointer;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:2px solid rgba(255,255,255,0.25);
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.avatar-opt:active{ transform:scale(.9); }
.avatar-opt.selected{
  border-color:var(--gold);
  background:rgba(255,204,51,0.22);
  box-shadow:0 0 0 3px rgba(255,204,51,0.3);
  transform:scale(1.1);
}

.leaderboard-card{
  width:100%;
  background:rgba(20,4,4,0.72);
  border:2px solid rgba(255,204,51,0.35);
  border-radius:16px;
  padding:10px 16px 14px;
}
.leaderboard-card h3{
  color:var(--gold);
  font-family:'Luckiest Guy', cursive;
  text-align:center;
  letter-spacing:1px;
  font-size:clamp(13px,2.2dvh,16px);
  margin:2px 0 8px;
}
.leaderboard-list{
  margin:0; padding:0;
  list-style:none;
  display:flex; flex-direction:column; gap:4px;
  max-height:22dvh;
  overflow-y:auto;
}
.leaderboard-list li{
  display:flex; align-items:center; gap:8px;
  color:var(--cream);
  font-size:clamp(11.5px,1.9dvh,14px);
  padding:5px 8px;
  border-radius:8px;
  background:rgba(255,255,255,0.05);
}
.leaderboard-list li.me{ background:rgba(255,204,51,0.18); border:1px solid rgba(255,204,51,0.5); font-weight:700; }
.leaderboard-list .rank{ width:1.6em; color:var(--gold); font-weight:800; flex:0 0 auto; }
.leaderboard-list .lb-avatar{ flex:0 0 auto; font-size:1.1em; }
.leaderboard-list .name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-list .val{ font-weight:800; }
.lb-empty{ opacity:.7; text-align:center; justify-content:center; }

.results-actions{
  width:100%;
  display:flex; gap:10px;
  margin-top:4px;
}
.results-actions .btn{ max-width:none; }

.btn-order{
  width:100%;
  margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  text-decoration:none;
  background:linear-gradient(180deg, var(--gold), #e0a900);
  color:var(--ink);
  font-family:'Luckiest Guy', cursive;
  letter-spacing:1px;
  font-size:clamp(14px,2.4dvh,18px);
  padding:12px 20px;
  border-radius:999px;
  box-shadow:0 6px 0 #8a6900, 0 10px 20px rgba(0,0,0,.4);
  border:2px solid rgba(255,255,255,0.5);
  transition:transform .12s ease;
}
.btn-order:active{ transform:translateY(4px); box-shadow:0 2px 0 #8a6900; }

.confetti-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.confetti{
  position:absolute; top:-5%;
  width:8px; height:14px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall{
  0%{ transform:translateY(0) rotate(0deg); opacity:1; }
  100%{ transform:translateY(115dvh) rotate(720deg); opacity:0.9; }
}

/* ================= TERMS & CONDITIONS MODAL ================= */
.terms-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.terms-backdrop{
  position:absolute; inset:0;
  background:rgba(5,0,0,0.72);
  backdrop-filter:blur(4px);
}
.terms-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:560px;
  max-height:85dvh;
  overflow-y:auto;
  background:rgba(25,5,5,0.92);
  border:1px solid rgba(255,204,51,0.35);
  border-radius:22px;
  padding:26px 22px 22px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  animation: terms-pop .3s cubic-bezier(.2,1.4,.4,1);
}
@keyframes terms-pop{
  0%{ opacity:0; transform:scale(.94) translateY(10px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
.terms-close{
  position:absolute;
  top:14px; right:14px;
  width:30px; height:30px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.1);
  color:#fff;
  font-size:14px;
  cursor:pointer;
}
.terms-card h2{
  margin:0 0 12px;
  color:var(--gold);
  font-family:'Luckiest Guy', cursive;
  letter-spacing:1px;
  font-size:clamp(18px,3dvh,24px);
  padding-right:26px;
}
.terms-body{ color:var(--cream); font-size:13.5px; line-height:1.55; }
.terms-body h3{
  color:var(--gold);
  font-size:13.5px;
  letter-spacing:.5px;
  margin:16px 0 4px;
}
.terms-body h3:first-child{ margin-top:0; }
.terms-body p{ margin:0 0 8px; }
.terms-body ul{ margin:0 0 8px; padding-left:1.2em; }
.terms-body li{ margin-bottom:4px; }
.terms-body em{ color:rgba(255,244,224,0.6); }

/* ================= LOADING SCREEN ================= */
#screen-loading{
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,60,60,0.2) 0%, transparent 50%),
    linear-gradient(160deg, #2b0505 0%, #150202 55%, #060000 100%);
}
.loading-content{
  width:100%;
  max-width:340px;
  padding:0 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.loading-emoji{
  font-size:clamp(44px, 10vmin, 64px);
  animation: loading-bounce 0.9s ease-in-out infinite;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));
}
@keyframes loading-bounce{
  0%,100%{ transform:translateY(0) rotate(-6deg); }
  50%{ transform:translateY(-14px) rotate(6deg); }
}
.loading-title{
  margin:0;
  text-align:center;
  font-family:'Luckiest Guy', cursive;
  color:#fff;
  font-size:clamp(20px, 5vmin, 30px);
  line-height:1.15;
  -webkit-text-stroke:1.5px var(--red-dark);
  text-shadow:0 3px 0 var(--red-dark);
}
.loading-bar-track{
  width:100%;
  height:14px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  border:1.5px solid rgba(255,255,255,0.25);
  overflow:hidden;
}
.loading-bar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--red-bright), var(--gold));
  box-shadow:0 0 12px rgba(255,204,51,.7);
  transition:width .25s ease-out;
}
.loading-pct{
  font-family:'Luckiest Guy', cursive;
  color:var(--gold);
  font-size:clamp(15px, 3.4vmin, 20px);
  letter-spacing:1px;
}
.loading-tip{
  color:rgba(255,244,224,0.7);
  font-size:clamp(11px, 2vmin, 13px);
  text-align:center;
  min-height:1.4em;
}

/* ================= responsive tweaks ================= */
@media (max-width:480px){
  .meal-stage{ width:clamp(190px, 56vmin, 300px); }
  .hand{ width:clamp(155px, 50vmin, 240px); }
  .hand-left{ left:calc(50% - clamp(155px, 50vmin, 240px) * 1.05); }
  .hand-right{ left:calc(50% - clamp(155px, 50vmin, 240px) * -0.05); }
}

@media (orientation:landscape) and (max-height:520px){
  .start-content{ gap:4px; }
  .logo{ max-height:22dvh; }
  .instructions-card{ padding:6px 14px; }
  .instructions-card ul{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:4px 14px; }
  .instructions-card li{ font-size:11px; }
}