/* =========================================================
   Siao Ways to Die — Singapore Edition
   cream #FFF6E5 · coral #FF6B57 · yellow #FFD166
   teal #06AED5 · hot-pink #FF3D7F · plum #2B2320
   DTL blue #005EC4
   ========================================================= */

:root {
  --cream: #FFF6E5;
  --coral: #FF6B57;
  --yellow: #FFD166;
  --teal: #06AED5;
  --pink: #FF3D7F;
  --plum: #2B2320;
  --coral-dark: #E24B37;
  --dtl: #005EC4;
  --shadow: rgba(43, 35, 32, 0.18);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden;
  background: var(--plum);
  font-family: "Baloo 2", "Nunito", "Trebuchet MS", system-ui, sans-serif;
  color: var(--plum);
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}

#app {
  position: relative;
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: 560px; margin: 0 auto;
  overflow: hidden;
  background: var(--cream);
  display: flex; flex-direction: column;
  box-shadow: 0 0 60px rgba(0,0,0,0.35);
}

.hidden { display: none !important; }

/* ---------- HUD ---------- */
.hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
  pointer-events: none;
}
.pips { display: flex; gap: 6px; flex-wrap: wrap; max-width: 78%; }
.pip {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(43,35,32,0.16);
  transition: transform .25s cubic-bezier(.2,1.6,.5,1), background .2s;
}
.pip.active { background: var(--plum); transform: scale(1.35); }
.pip.pass { background: var(--teal); }
.pip.fail { background: var(--pink); }
.mute-btn {
  pointer-events: auto; border: none; background: rgba(43,35,32,0.08);
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 18px; cursor: pointer; line-height: 1;
}
.mute-btn:active { transform: scale(0.9); }

/* ---------- End card ---------- */
.card { flex: 1; }
.center-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 18px; padding: 30px 26px;
  position: absolute; inset: 0; z-index: 30; background: var(--cream);
}
.end-emoji { font-size: 66px; animation: bob 1.6s ease-in-out infinite; }
.end-count { font-size: clamp(26px, 8vw, 38px); margin: 0; }
.end-title { font-size: 18px; margin: 0; opacity: 0.85; font-style: italic; }

.big-btn {
  border: none; cursor: pointer;
  background: var(--coral); color: #fff;
  font-family: inherit; font-weight: 800; font-size: 21px;
  padding: 18px 34px; border-radius: 20px;
  box-shadow: 0 6px 0 var(--coral-dark), 0 10px 18px var(--shadow);
  transition: transform .08s, box-shadow .08s; min-height: 44px;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--coral-dark), 0 5px 10px var(--shadow); }

/* =========================================================
   INTRO SCREEN (item 1)
   ========================================================= */
.intro-card {
  position: absolute; inset: 0; z-index: 30; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--plum);
}
.intro-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #1a2740 0%, #3a2f4a 45%, #6b3f4f 78%, #a8534d 100%);
}
.skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; }
.skyline .tower, .skyline .mbs span {
  position: absolute; bottom: 0; background: #17111a;
}
.skyline .tower { border-radius: 4px 4px 0 0; }
.skyline .t1 { left: 4%;  width: 12%; height: 55%; }
.skyline .t2 { left: 18%; width: 9%;  height: 78%; }
.skyline .t3 { right: 26%; width: 10%; height: 62%; }
.skyline .t4 { right: 12%; width: 11%; height: 88%; }
.skyline .t5 { right: 1%;  width: 9%;  height: 48%; }
.skyline .mbs { position: absolute; left: 36%; bottom: 0; width: 26%; height: 70%; }
.skyline .mbs span { width: 14%; height: 100%; }
.skyline .mbs span:nth-child(1) { left: 6%; }
.skyline .mbs span:nth-child(2) { left: 43%; }
.skyline .mbs span:nth-child(3) { right: 6%; }
.skyline .mbs .mbs-deck {
  position: absolute; top: -6%; left: -6%; width: 112%; height: 12%;
  background: #17111a; border-radius: 40% 40% 8px 8px;
}

.intro-content {
  position: relative; z-index: 2; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-bottom: 8%;
}
.merlion-badge {
  width: 92px; height: 92px; margin-bottom: 4px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
  animation: bob 2.2s ease-in-out infinite;
}
.intro-title {
  margin: 0; color: var(--coral); font-weight: 800;
  font-size: clamp(44px, 15vw, 74px); line-height: 0.86; letter-spacing: -1px;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--yellow), 6px 6px 0 rgba(0,0,0,0.4);
  transform: scale(0.3) rotate(-3deg); opacity: 0;
  animation: slamIn .6s cubic-bezier(.2,1.6,.4,1) .15s forwards;
}
.intro-sub {
  margin: 10px 0 0; color: var(--teal); font-size: clamp(16px, 5vw, 22px);
  font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  opacity: 0; animation: fadeUp .5s ease-out .7s forwards;
}
.intro-tag {
  margin: 8px 0 0; color: var(--cream); font-size: clamp(13px, 3.8vw, 16px);
  font-weight: 600; font-style: italic; opacity: 0;
  animation: fadeUp .5s ease-out .95s forwards;
}
.begin-prompt {
  position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%);
  z-index: 3; border: none; cursor: pointer;
  background: var(--yellow); color: var(--plum);
  font-family: inherit; font-weight: 800; font-size: 20px;
  padding: 15px 32px; border-radius: 999px; min-height: 44px;
  box-shadow: 0 5px 0 #e0ac3d, 0 8px 20px rgba(0,0,0,0.35);
  opacity: 0; animation: fadeUp .5s ease-out 1s forwards, beginPulse 1.3s ease-in-out 1.5s infinite;
}
.begin-prompt:active { transform: translateX(-50%) translateY(3px); }

/* =========================================================
   Instruction line (item 10)
   ========================================================= */
.instruction {
  position: absolute; left: 0; right: 0; top: 20%; z-index: 38;
  display: flex; justify-content: center; pointer-events: none; padding: 0 20px;
}
.instruction span {
  background: var(--plum); color: var(--cream);
  font-size: clamp(17px, 5vw, 23px); font-weight: 800;
  padding: 12px 22px; border-radius: 14px; text-align: center;
  box-shadow: 0 6px 16px var(--shadow);
  transform: translateY(-8px) scale(0.9); opacity: 0;
}
.instruction.show span { animation: instrIn .28s cubic-bezier(.2,1.5,.4,1) forwards; }
.instruction.out span { animation: instrOut .25s ease-in forwards; }

/* =========================================================
   Stage / scenes
   ========================================================= */
.stage { position: relative; flex: 1; width: 100%; height: 100%; overflow: hidden; }
.scene { position: absolute; inset: 0; }
.scene-sky { position: absolute; inset: 0; }
.floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(180deg, rgba(43,35,32,0.06), rgba(43,35,32,0.13));
}

.action-btn {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  border: none; cursor: pointer;
  background: var(--yellow); color: var(--plum);
  font-family: inherit; font-weight: 800; font-size: 19px;
  padding: 16px 30px; border-radius: 18px; min-width: 160px; min-height: 56px;
  box-shadow: 0 5px 0 #e0ac3d, 0 8px 14px var(--shadow);
  transition: transform .06s, box-shadow .06s, background .15s; z-index: 26;
}
.action-btn:active { transform: translateX(-50%) translateY(3px); box-shadow: 0 2px 0 #e0ac3d; }
.action-btn.armed { background: var(--coral); color: #fff; box-shadow: 0 5px 0 var(--coral-dark), 0 8px 14px var(--shadow); }
.action-btn.pulse { animation: btnPulse .5s ease-in-out infinite; }
.action-btn.held { background: var(--teal); box-shadow: 0 5px 0 #0587a6; color: #fff; }

/* timing / patience / countdown bars */
.timer-bar {
  position: absolute; left: 10%; right: 10%; bottom: 30%;
  height: 16px; border-radius: 999px;
  background: rgba(43,35,32,0.12); overflow: hidden; z-index: 24;
}
.timer-bar.top { top: 16%; bottom: auto; }
.timer-fill { height: 100%; width: 100%; background: var(--teal); border-radius: 999px; transform-origin: left; }
.timer-fill.warn { background: var(--pink); }

/* choice buttons */
.choices {
  position: absolute; left: 0; right: 0; bottom: 7%;
  display: flex; flex-direction: column; gap: 11px; padding: 0 26px; z-index: 26;
}
.choice {
  border: none; cursor: pointer; background: #fff; color: var(--plum);
  font-family: inherit; font-weight: 800; font-size: 19px;
  padding: 15px; border-radius: 16px; min-height: 54px; box-shadow: 0 4px 0 var(--shadow);
  transition: transform .06s;
}
.choice:active { transform: translateY(3px); }
.choice.correct { background: var(--teal); color: #fff; }
.choice.wrong { background: var(--pink); color: #fff; }

/* swipe hint arrow */
.swipe-hint {
  position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%);
  font-size: 40px; z-index: 24; opacity: 0.85; animation: swipePoint 0.8s ease-in-out infinite;
}
.swipe-hint.left { animation-name: swipePointL; }

/* ============ BLOB CHARACTER ============ */
.guy {
  position: absolute; bottom: 24%; left: 50%; transform: translateX(-50%);
  width: 108px; height: 132px; z-index: 10;
  transition: left .3s cubic-bezier(.3,1.2,.5,1), bottom .3s, transform .2s;
}
.guy.small { width: 66px; height: 82px; }
.guy .body {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 92px; height: 96px; background: var(--coral);
  border-radius: 46px 46px 40px 40px; box-shadow: inset 0 -10px 0 rgba(0,0,0,0.08);
}
.guy.small .body { width: 56px; height: 60px; border-radius: 28px 28px 24px 24px; }
.guy .leg { position: absolute; bottom: -14px; width: 20px; height: 22px; background: var(--coral); border-radius: 0 0 10px 10px; }
.guy .leg.l { left: 26px; } .guy .leg.r { right: 26px; }
.guy.small .leg { display: none; }
.guy .arm { position: absolute; top: 40px; width: 16px; height: 46px; background: var(--coral); border-radius: 10px; z-index: -1; transition: transform .2s; }
.guy .arm.l { left: 2px; transform: rotate(14deg); transform-origin: top center; }
.guy .arm.r { right: 2px; transform: rotate(-14deg); transform-origin: top center; }
.guy.small .arm { display: none; }
.guy .face { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 74px; height: 46px; }
.guy.small .face { top: 14px; width: 48px; height: 32px; }
.guy .eye {
  position: absolute; top: 6px; width: 20px; height: 22px; background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.guy.small .eye { width: 14px; height: 15px; top: 4px; }
.guy .eye.l { left: 6px; } .guy .eye.r { right: 6px; }
.guy .pupil { width: 9px; height: 9px; background: var(--plum); border-radius: 50%; transition: transform .15s; }
.guy.small .pupil { width: 6px; height: 6px; }
.guy .mouth {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 10px; border: 3px solid var(--plum); border-top: none;
  border-radius: 0 0 20px 20px; transition: all .15s;
}
.guy.happy .mouth { width: 30px; height: 16px; border-width: 4px; }
.guy.happy .pupil { transform: translateY(-2px); }
.guy.panic .mouth { width: 22px; height: 22px; border: 3px solid var(--plum); border-radius: 50%; bottom: -2px; }
.guy.panic .eye { height: 26px; }
.guy.panic { animation: tremble .12s infinite; }
.guy.dead .pupil { width: 0; height: 0; }
.guy.dead .eye::before, .guy.dead .eye::after {
  content: ""; position: absolute; width: 20px; height: 3px; background: var(--plum); top: 9px; left: 0; border-radius: 2px;
}
.guy.dead .eye::before { transform: rotate(45deg); }
.guy.dead .eye::after { transform: rotate(-45deg); }
.guy.dead .mouth { width: 16px; height: 6px; border-radius: 8px 8px 0 0; border-top: 3px solid var(--plum); border-bottom: none; bottom: -2px; }
.guy.dead { animation: flop .5s forwards; }

/* ---- Merlion skin for the player avatar (item: change orange avatar) ---- */
.guy .mane {
  position: absolute; top: 0; left: 50%; width: 106px; height: 106px;
  transform: translateX(-50%); z-index: -2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23FFD166' d='M50 3l7 16 16-8-4 17 18 1-14 13 14 13-18 1 4 17-16-8-7 16-7-16-16 8 4-17-18-1 14-13-14-13 18-1-4-17 16 8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.guy.small .mane { width: 62px; height: 62px; }
.guy .body { background: #E6ECEE; border: 3px solid var(--plum); box-shadow: inset 0 -10px 0 rgba(43,35,32,0.05); }
.guy .arm, .guy .leg { background: #E6ECEE; border: 2px solid var(--plum); }
.guy .body::after { /* little teal water/fish tail hint */
  content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
  width: 38px; height: 12px; background: var(--teal); border-radius: 0 0 18px 18px; opacity: 0.85;
}
.guy .eye { box-shadow: 0 0 0 2px rgba(43,35,32,0.12); }

.prop { position: absolute; z-index: 12; font-size: 30px; filter: drop-shadow(0 2px 1px rgba(0,0,0,0.2)); }

/* ---------- Scene 2: Merlion Photo Challenge (camera puzzle) ---------- */
.vf-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #bfe6f2 0%, #d6eef5 100%); }
.viewfinder {
  position: absolute; left: 6%; right: 6%; top: 8%; bottom: 30%;
  border: 4px solid var(--plum); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #bfe6f2 0%, #a9dcec 58%, #7fbf9a 58%, #6fb58e 100%);
  box-shadow: 0 8px 20px var(--shadow); transition: box-shadow .12s, border-color .12s;
}
.viewfinder.locked { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(6,174,213,0.4), 0 8px 20px var(--shadow); }
.vf-corner { position: absolute; width: 20px; height: 20px; border: 3px solid #fff; z-index: 6; }
.vf-corner.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.vf-corner.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.vf-corner.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.vf-corner.br { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.vf-target { position: absolute; top: 46%; left: 50%; width: 74px; height: 74px; transform: translate(-50%,-50%); border: 2px dashed rgba(43,35,32,0.35); border-radius: 50%; z-index: 2; }
.vf-merlion { position: absolute; bottom: 4%; left: 50%; width: 80px; height: 80px; transform: translateX(-50%); background: center/contain no-repeat; z-index: 3; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25)); }
.vf-obst { position: absolute; z-index: 4; font-size: 36px; will-change: left, top; }
.vf-rain { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background-image: repeating-linear-gradient(74deg, rgba(255,255,255,0.55) 0 2px, transparent 2px 10px); }
.vf-rain.on { opacity: 0.7; animation: rainMove .3s linear infinite; }
.vf-flash { position: absolute; inset: 0; z-index: 9; background: #fff; opacity: 0; pointer-events: none; }
.vf-flash.go { animation: shutterFlash .3s ease-out; }
.cam-controls { position: absolute; left: 6%; right: 6%; bottom: 5%; display: flex; flex-direction: column; gap: 9px; z-index: 26; }
.cam-row { display: flex; align-items: center; gap: 12px; }
.cam-row label { width: 62px; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--plum); }
.cam-row input[type=range] { flex: 1; height: 26px; accent-color: var(--coral); cursor: pointer; }
@keyframes rainMove { to { background-position: 0 10px; } }
@keyframes shutterFlash { 0% { opacity: 0; } 20% { opacity: 0.9; } 100% { opacity: 0; } }

/* ---------- Scene 1: MRT (item 2 — Upper Changi DTL) ---------- */
.platform-sign {
  position: absolute; top: 14%; left: 50%; transform: translateX(-50%);
  background: var(--dtl); color: #fff; border-radius: 8px;
  padding: 8px 16px; z-index: 18; text-align: center; box-shadow: 0 4px 10px var(--shadow);
  border: 3px solid #fff;
}
.platform-sign .stn { font-weight: 800; font-size: 19px; letter-spacing: 0.5px; }
.platform-sign .code {
  display: inline-block; margin-top: 4px; background: #fff; color: var(--dtl);
  font-weight: 800; font-size: 13px; padding: 1px 8px; border-radius: 5px;
}
.train {
  position: absolute; bottom: 24%; left: 0; right: 0; height: 150px;
  background: #dfe6ea; border-top: 10px solid var(--dtl); border-bottom: 6px solid #9aa4ab;
}
.train .win { position: absolute; top: 22px; width: 40px; height: 32px; background: #bfe2ef; border-radius: 6px; border: 2px solid #a9c8d4; }
.doors { position: absolute; top: 0; bottom: 0; left: 50%; width: 130px; transform: translateX(-50%); overflow: hidden; }
.door { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--dtl); border: 3px solid #00347a; }
.door::after { content: ""; position: absolute; top: 30%; height: 40%; width: 4px; background: rgba(255,255,255,0.5); }
.door.l { left: 0; } .door.l::after { right: 2px; }
.door.r { right: 0; } .door.r::after { left: 2px; }
.platform-edge {
  position: absolute; left: 0; right: 0; bottom: calc(24% - 14px); height: 14px;
  background: var(--yellow); z-index: 9;
  background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(43,35,32,0.15) 22px 26px);
}

/* ---------- Scene 2: escalator (item 3 context fix) ---------- */
.escalator-steps {
  position: absolute; bottom: 0; left: 0; right: 0; height: 62%;
  background: repeating-linear-gradient(120deg, #b9bfc4 0 22px, #cdd3d7 22px 44px);
  clip-path: polygon(0 100%, 0 40%, 100% 0, 100% 100%);
}
.esc-side {
  position: absolute; bottom: 0; height: 62%; width: 50%; z-index: 2;
}
.esc-side.left { left: 0; clip-path: polygon(0 100%, 0 40%, 100% 12%, 100% 100%); }
.esc-side.right { right: 0; }
.esc-side.correct { background: rgba(6,174,213,0.28); animation: sideGlow 0.7s ease-in-out infinite alternate; }
.esc-side .side-label {
  position: absolute; top: 30%; left: 50%; transform: translateX(-50%);
  font-size: 30px; z-index: 3;
}
.lane-divider { position: absolute; bottom: 0; left: 50%; width: 6px; height: 62%; background: var(--yellow); transform: translateX(-50%) skewX(-24deg); z-index: 3; }
.queue-guy { position: absolute; font-size: 32px; transition: transform .35s, opacity .3s; z-index: 6; }

/* ---------- Scene 3: chope ---------- */
.table {
  position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%);
  width: 150px; height: 54px; background: #c98b52; border-radius: 12px; box-shadow: 0 10px 0 #a06b39;
}
.auntie { position: absolute; font-size: 46px; z-index: 11; }
.tissue { position: absolute; font-size: 30px; z-index: 12; }

/* ---------- Scene 4: hawker order ---------- */
.uncle { position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); font-size: 58px; z-index: 11; }
.stall-counter { position: absolute; bottom: 22%; left: 0; right: 0; height: 40px; background: #8a5a30; }
.order-name {
  position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
  background: var(--cream); border: 3px solid var(--plum); border-radius: 12px;
  padding: 8px 18px; font-weight: 800; font-size: 20px; z-index: 18; white-space: nowrap;
}

/* ---------- Scene 5: tray return maze (item 6) ---------- */
.maze { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #efe7d6 0 34px, #e7dcc6 34px 68px); }
.tray-return {
  position: absolute; width: 15%; height: 13%; border-radius: 10px;
  background: rgba(6,174,213,0.25); border: 3px dashed var(--teal);
  display: flex; align-items: center; justify-content: center; font-size: 26px; z-index: 4;
}
.obstacle {
  position: absolute; z-index: 5; display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.obstacle.puddle {
  background: rgba(6,174,213,0.35); border-radius: 50%; font-size: 0;
  box-shadow: inset 0 0 0 3px rgba(6,174,213,0.5);
}
.player-dot { position: absolute; z-index: 8; font-size: 30px; will-change: left, top; }
.player-dot .p-emoji { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25)); }

/* ---------- Scene 6: auntie queue cut (item 7) ---------- */
.queue-line { position: absolute; bottom: 22%; left: 8%; display: flex; gap: 6px; z-index: 6; }
.queue-line .q { font-size: 34px; }
.cut-auntie { position: absolute; bottom: 22%; font-size: 48px; z-index: 12; transition: left .2s linear, transform .2s; }
.ground-meter {
  position: absolute; left: 15%; right: 15%; bottom: 34%; height: 14px; border-radius: 999px;
  background: rgba(43,35,32,0.12); overflow: hidden; z-index: 20;
}
.ground-fill { height: 100%; width: 0%; background: var(--teal); transition: width .1s linear; }

/* ---------- Scene 7: haggle (item 8) ---------- */
.stall-awning {
  position: absolute; top: 8%; left: 0; right: 0; height: 46px; z-index: 5;
  background: repeating-linear-gradient(90deg, var(--coral) 0 30px, #fff 30px 60px);
  border-bottom: 4px solid var(--plum);
}
.price-tag {
  position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
  background: var(--plum); color: var(--yellow); font-weight: 800;
  font-size: 34px; padding: 8px 20px; border-radius: 12px; z-index: 18;
  box-shadow: 0 5px 0 rgba(0,0,0,0.25);
}
.price-tag small { display:block; font-size: 12px; color: #fff; opacity: 0.7; font-weight: 700; }
.haggle-auntie { position: absolute; bottom: 26%; left: 50%; transform: translateX(-50%); font-size: 72px; z-index: 11; }

/* ---------- Scene 8: cai fan memory (item 9) ---------- */
.order-flash {
  position: absolute; top: 12%; left: 8%; right: 8%; z-index: 18;
  background: var(--cream); border: 3px solid var(--plum); border-radius: 14px;
  padding: 14px 16px; text-align: center; box-shadow: 0 6px 16px var(--shadow);
}
.order-flash .oline { font-weight: 800; font-size: 17px; line-height: 1.5; }
.order-flash .otag { display: inline-block; margin: 3px; padding: 3px 10px; background: var(--yellow); border-radius: 999px; }
.cai-uncle { position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); font-size: 60px; z-index: 11; }
.recall-progress { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 18; }
.recall-progress .dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(43,35,32,0.18); }
.recall-progress .dot.on { background: var(--teal); }
.dish-grid {
  position: absolute; left: 0; right: 0; bottom: 6%; z-index: 26;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 0 18px;
}
.dish {
  border: none; cursor: pointer; background: #fff; color: var(--plum);
  font-family: inherit; font-weight: 800; font-size: 15px; padding: 13px 6px;
  border-radius: 13px; min-height: 50px; box-shadow: 0 4px 0 var(--shadow); transition: transform .06s;
}
.dish:active { transform: translateY(3px); }
.dish.ok { background: var(--teal); color: #fff; }
.dish.no { background: var(--pink); color: #fff; }

/* ---------- Caption ---------- */
.caption {
  position: absolute; inset: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.caption span {
  background: var(--plum); color: var(--cream);
  font-size: clamp(30px, 9vw, 52px); font-weight: 800;
  padding: 16px 28px; border-radius: 18px;
  transform: rotate(-2deg) scale(0.6); opacity: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4); text-align: center; max-width: 92vw;
}
.caption.show span { animation: stamp .35s cubic-bezier(.2,1.5,.4,1) forwards; }
.caption.win span { background: var(--teal); }
.caption.lose span { background: var(--pink); }
.caption.meh span { background: var(--yellow); color: var(--plum); }

/* fail flash */
.flash { position: absolute; inset: 0; z-index: 44; pointer-events: none; background: var(--pink); opacity: 0; }
.flash.go { animation: flashFx .35s ease-out; }
#app.shake { animation: shake .4s cubic-bezier(.36,.07,.19,.97); }

/* ================= KEYFRAMES ================= */
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes slamIn { 0%{opacity:0; transform:scale(0.3)} 70%{opacity:1; transform:scale(1.12)} 100%{opacity:1; transform:scale(1)} }
@keyframes fadeUp { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }
@keyframes beginPulse { 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.08)} }
@keyframes instrIn { from{opacity:0; transform:translateY(-8px) scale(0.9)} to{opacity:1; transform:translateY(0) scale(1)} }
@keyframes instrOut { from{opacity:1} to{opacity:0; transform:translateY(-8px) scale(0.95)} }
@keyframes stamp { from{opacity:0; transform:rotate(-2deg) scale(0.6)} 60%{opacity:1; transform:rotate(-2deg) scale(1.08)} to{opacity:1; transform:rotate(-2deg) scale(1)} }
@keyframes flashFx { 0%{opacity:0} 15%{opacity:0.85} 100%{opacity:0} }
@keyframes shake {
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-9px)} 40%,60%{transform:translateX(9px)}
}
@keyframes tremble { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-2px) rotate(1deg)} }
@keyframes flop { to{ transform:translateX(-50%) translateY(30px) rotate(90deg); opacity:0.9; } }
@keyframes btnPulse { 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.07)} }
@keyframes swipePoint { 0%,100%{transform:translateX(-50%)} 50%{transform:translateX(-30%)} }
@keyframes swipePointL { 0%,100%{transform:translateX(-50%)} 50%{transform:translateX(-70%)} }
@keyframes runShake { 0%,100%{transform:translateX(-50%) rotate(-3deg)} 50%{transform:translateX(-50%) rotate(3deg)} }
@keyframes sideGlow { from{opacity:0.5} to{opacity:1} }
.guy.running { animation: runShake .12s infinite; }

@media (max-height: 640px) {
  .guy { bottom: 22%; }
  .action-btn { bottom: 5%; }
}