/* Walkers Serve - gameplay stage. Logical size 720 x 1280 (portrait),
   scaled to fit by main.js. All values below are stage pixels. */

#screen-game { padding: 0; touch-action: none; background: #e2231a; }

#stage {
  position: absolute; left: 50%; top: 50%; width: 720px; height: 1280px;
  transform-origin: center center; transform: translate(-50%, -50%);
  overflow: hidden; touch-action: none; font-size: 24px;
  font-weight: 800; color: var(--ink);
}

/* Cozy Walkers snack-shop interior: warm panelled back wall, a wooden shelf
   ledge right above the serving counters, and pendant-light glow up top -
   terracotta diner tile underfoot. All painted as stacked backgrounds on one
   element - no extra art files. */
#floor {
  position: absolute; inset: 0;
  background-color: #fff1c2;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position: -40px -30px, 520px -30px, 0 92px, 0 0, 0 0;
  background-size: 200px 140px, 200px 140px, 720px 18px, 720px 92px, 120px 120px;
  background-image:
    radial-gradient(ellipse at center, rgba(255,222,150,.9), rgba(255,222,150,0) 70%),
    radial-gradient(ellipse at center, rgba(255,222,150,.9), rgba(255,222,150,0) 70%),
    linear-gradient(180deg, #c98a45, #6b3f1c 90%),
    repeating-linear-gradient(90deg, #fff2cf 0 58px, #ffe4a8 58px 116px),
    repeating-conic-gradient(#ffdf80 0 25%, #fff1c2 0 50%);
}
/* soft lane tint so the two service sides read at a glance (kept clear of the wall/shelf band) */
#floor::before, #floor::after { content: ""; position: absolute; top: 110px; height: 670px; width: 350px; opacity: .3; }
#floor::before { left: 0; background: linear-gradient(90deg, #e2231a, transparent); }
#floor::after { right: 0; background: linear-gradient(270deg, #1e5fb4, transparent); }

/* ---- counters (drop targets) ---- */
.counter {
  position: absolute; top: 110px; height: 640px; width: 84px; z-index: 2;
  border-radius: 22px; border: 6px solid #6b3f1c;
  background: linear-gradient(90deg, #d9a05b, #b8772f);
  box-shadow: 0 8px 0 rgba(0,0,0,.22), inset 0 0 0 4px rgba(255,255,255,.18);
  display: grid; place-items: center; transition: box-shadow .12s, filter .12s, transform .12s;
}
.counter.left { left: 262px; }
.counter.right { left: 374px; }
.counter span {
  writing-mode: vertical-rl; letter-spacing: .5em; font-size: 22px; font-weight: 900;
  color: rgba(255,255,255,.85); text-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.counter.left span { transform: rotate(180deg); }
.counter.hot {
  filter: brightness(1.25); transform: scale(1.04);
  box-shadow: 0 0 0 8px #fff3a3, 0 0 46px 14px rgba(255,235,120,.9), 0 8px 0 rgba(0,0,0,.22);
}

/* ---- snack table ---- */
#table { position: absolute; left: 0; top: 0; width: 720px; height: 1280px; pointer-events: none; z-index: 3; }
#table::before {
  content: ""; position: absolute; left: 30px; top: 790px; width: 660px; height: 450px;
  border-radius: 44px; border: 8px solid #6b3f1c;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 3px, transparent 3px 60px),
    linear-gradient(180deg, #e0a862, #c98a45);
  box-shadow: 0 12px 0 rgba(0,0,0,.25), inset 0 0 0 6px rgba(255,255,255,.18);
}
.plate {
  position: absolute; border-radius: 18px;
  background: radial-gradient(circle, #f4f4f4 55%, #d7d7d7 100%);
  box-shadow: inset 0 4px 8px rgba(0,0,0,.25), 0 3px 0 rgba(255,255,255,.35);
}
.plabel {
  position: absolute; width: 220px; text-align: center; font-size: 22px; font-weight: 900; color: #fff;
  -webkit-text-stroke: 5px #5a3216; paint-order: stroke fill; letter-spacing: .01em; white-space: nowrap;
}

/* ---- crisp packs ---- */
#item-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.crisp {
  position: absolute; pointer-events: auto; cursor: grab; touch-action: none;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.22)); transition: transform .12s, filter .12s;
}
.crisp svg, .crisp img { width: 100%; height: 100%; display: block; pointer-events: none; object-fit: contain; }
.crisp.drag { z-index: 8; cursor: grabbing; transform: scale(1.14); filter: drop-shadow(0 20px 12px rgba(0,0,0,.35)); }
.crisp.flying { pointer-events: none; z-index: 7; }
.crisp.tutorial-target { animation: tutorialGlow 1.1s ease-in-out infinite; }
@keyframes tutorialGlow {
  0%, 100% { filter: drop-shadow(0 4px 0 rgba(0,0,0,.22)) drop-shadow(0 0 0 rgba(255,204,0,0)); }
  50%      { filter: drop-shadow(0 4px 0 rgba(0,0,0,.22)) drop-shadow(0 0 20px rgba(255,204,0,.95)); }
}

/* ---- first-drag tutorial: swipe hint over the first pack ---- */
.tutorial { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.tutorial-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.tutorial-hand {
  position: absolute; left: 360px; top: 1100px; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); animation: swipeMove 1.7s ease-in-out infinite;
}
.tutorial-hand svg { width: 100%; height: 100%; display: block; }
@keyframes swipeMove {
  0%   { transform: translate(0,0) scale(.75); opacity: 0; }
  12%  { transform: translate(-4px,-35px) scale(1); opacity: 1; }
  55%  { transform: translate(-51px,-510px) scale(1); opacity: 1; }
  78%  { transform: translate(-60px,-600px) scale(.92); opacity: 1; }
  92%  { transform: translate(-60px,-600px) scale(.92); opacity: 0; }
  100% { transform: translate(-60px,-600px) scale(.92); opacity: 0; }
}

/* ---- customers ---- */
.lane { position: absolute; left: 0; top: 0; width: 720px; height: 1280px; pointer-events: none; z-index: 1; }
.customer {
  position: absolute; left: 0; top: 0; width: 116px; height: 140px; margin: -70px 0 0 -58px; will-change: transform;
}
.sprite { width: 116px; }
.sprite svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 0 rgba(0,0,0,.18)); }
.m { display: none; }
.mood-happy .m-happy, .mood-meh .m-meh, .mood-angry .m-angry { display: inline; }
.brows { display: none; }
.mood-angry .brows { display: inline; }
.mood-angry .sprite { animation: fume .35s ease-in-out infinite; }
@keyframes fume { 50% { transform: translateY(-3px) rotate(-1.5deg); } }

.pbar {
  position: absolute; left: 6px; right: 6px; bottom: 2px; height: 14px; border-radius: 9px;
  background: rgba(0,0,0,.28); border: 3px solid var(--ink); overflow: hidden; opacity: .35; transition: opacity .2s;
}
.pbar.on { opacity: 1; }
.pbar i { display: block; width: 100%; height: 100%; transform-origin: left; background: #3ed16b; }

.bubble {
  position: absolute; top: 4px; width: 130px; height: 120px;
  background: #fff; border: 5px solid var(--ink); border-radius: 28px; box-shadow: 0 6px 0 rgba(0,0,0,.2);
  transition: opacity .2s;
}
.customer.left .bubble { left: 118px; }
.customer.right .bubble { right: 118px; }
.bubble::before {
  content: ""; position: absolute; top: 44px; width: 20px; height: 20px; background: #fff; transform: rotate(45deg);
}
.customer.left .bubble::before { left: -13px; border-left: 5px solid var(--ink); border-bottom: 5px solid var(--ink); }
.customer.right .bubble::before { right: -13px; border-right: 5px solid var(--ink); border-top: 5px solid var(--ink); }
.bubble.empty, .customer.leaving .bubble { opacity: 0; }
.oi { position: absolute; animation: oiIn .25s ease-out; }
.oi svg, .oi img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
@keyframes oiIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- HUD ---- */
#hud {
  position: absolute; left: 0; top: 0; width: 720px; z-index: 10; pointer-events: none;
  display: flex; gap: 12px; align-items: stretch; padding: 16px 88px 0 18px;
}
.hud-pill {
  background: #fff; border: 5px solid var(--ink); border-radius: 26px; padding: 4px 16px 6px;
  box-shadow: 0 6px 0 rgba(0,0,0,.22); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
#hud-score { flex: 1.3; }
#hud-wave { flex: .8; }
#hud-lives { flex: 1.5; flex-direction: row; gap: 4px; }
.hud-label { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: #7b5a4a; }
.hud-value { display: inline-block; font-size: 40px; font-weight: 900; color: var(--red); }
#hud-wave .hud-value { color: var(--teal); }
.heart { display: inline-block; width: 44px; height: 42px; color: #ff3b4f; }
.heart svg { width: 100%; height: 100%; display: block; }
.heart.lost { color: #cfc6c6; animation: lost .55s ease-out; }
@keyframes lost { 0% { transform: scale(1); } 30% { transform: scale(1.5) rotate(-12deg); } 100% { transform: scale(1); } }
.pop { animation: popv .3s ease-out; }
@keyframes popv { 40% { transform: scale(1.4); } }

/* ---- FX ---- */
#fx-layer { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.spark { position: absolute; width: 14px; height: 14px; border-radius: 50%; }
.float-text {
  position: absolute; font-size: 46px; font-weight: 900; white-space: nowrap; letter-spacing: .02em;
  -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill;
}
.float-text.good { color: #ffe14d; }
.float-text.bad { color: #ff6a5c; font-size: 38px; }
#flash {
  position: absolute; inset: 0; z-index: 11; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 140px 50px rgba(255,40,40,.8);
}
#flash.go { animation: flash .55s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mood-angry .sprite, .tutorial-hand, .crisp.tutorial-target { animation: none; }
}