/* Jalebi Jump: syrupy backdrop and HUD bits */

body.game {
  --bg-top: #5b1f2a;
  --bg-bottom: #2b0d14;
  --hud-ink: #fff;
  --hud-chip: rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}
body.game .stage { overflow: hidden; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.subhud .chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 28px; }
.subhud .chip b { font-size: 17px; font-variant-numeric: tabular-nums; }
.chip.jj-score { background: var(--chili); }
.chip.jj-score.bump { animation: jj-bump .22s ease-out; }
@keyframes jj-bump { 50% { transform: scale(1.12); } }
.chip.jj-stage { gap: 7px; }
.chip.jj-stage .bar { position: relative; display: grid; place-items: center; width: 58px; height: 16px; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.chip.jj-stage .bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, #ff9a1f, #ffd23f); transition: width .25s ease-out; }
.chip.jj-stage .bar small { position: relative; font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
/* keep the three chips on one line at 360px even with a 5-digit best (a second line steals tower height) */
@media (max-width: 400px) {
  body.game .subhud { gap: 5px; padding-inline: 6px; }
  .subhud .chip { padding: 3px 9px; gap: 4px; }
  .subhud .chip b { font-size: 15px; }
  .chip.jj-stage .bar { width: 40px; }
}
.chip.jj-stage.done .bar i { background: #ffd23f; box-shadow: 0 0 10px #ffd23f; }

.jj-hand {
  position: absolute; left: 0; top: 0; z-index: 6; width: 54px; height: 54px; margin: -8px 0 0 -22px;
  pointer-events: none; opacity: 0; transition: opacity .2s; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4));
}
.jj-hand:not(.show) { opacity: 0 !important; }
.jj-hand svg { width: 100%; height: 100%; }

.jj-pause {
  position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; gap: 4px; border: 0;
  background: rgba(40, 10, 6, .62); color: #fff; font: inherit; text-align: center; cursor: pointer;
}
.jj-pause[hidden] { display: none; }
.jj-pause b { font: 700 34px/1.1 var(--display); }
.jj-pause span { font-weight: 700; font-size: 17px; padding: 10px 22px; margin-top: 10px; border-radius: 999px; background: var(--chili); box-shadow: 0 5px 0 var(--chili-2); }

/* in-game lives: three gulab jamuns (the ❤ chip in the header is the cafe wallet) */
.chip.jj-lives { gap: 3px; padding-inline: 8px; }
.jj-life { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd9b0 0 12%, #c2521f 22%, #6e1d07 70%, #3a0c02); box-shadow: 0 0 0 1.5px rgba(255, 230, 200, .7); transition: opacity .3s, filter .3s, transform .3s; }
.jj-life.lost { opacity: .28; filter: grayscale(1); transform: scale(.8); }
.jj-life.shake { animation: jj-shake .45s; }
.jj-life.gain { animation: jj-gain .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes jj-shake { 20% { transform: translateX(-3px) rotate(-12deg); } 40% { transform: translateX(3px) rotate(10deg); } 60% { transform: translateX(-2px); } }
@keyframes jj-gain { 0% { transform: scale(.2); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (max-width: 400px) { .jj-life { width: 13px; height: 13px; } .chip.jj-lives { padding-inline: 6px; } }
/* four chips on one line at 360px: the Best label becomes a star */
@media (max-width: 400px) {
  .chip.jj-best span { display: none; }
  .chip.jj-best::before { content: "★"; color: #ffd23f; font-size: 14px; }
  .chip.jj-stage .bar { width: 36px; }
  body.game .subhud { gap: 4px; padding-inline: 4px; }
  .subhud .chip { padding: 3px 7px; }
}