/* Patang Udaan: Uttarayan sky backdrop and HUD bits */

body.game {
  --bg-top: #2f7fc0;
  --bg-bottom: #1d4f86;
  --hud-ink: #fff;
  --hud-chip: rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  overscroll-behavior: none;
}
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; }
.subhud .chip i { font-style: normal; }
.chip.pu-score { background: var(--chili); }
.chip.pu-cuts { background: #7b3fc4; }
.chip.pu-cuts.bump { animation: pu-bump .3s ease-out; }
@keyframes pu-bump { 40% { transform: scale(1.18) rotate(-4deg); } }

.pu-hand {
  position: absolute; left: 0; top: 0; z-index: 6; width: 54px; height: 54px; margin: -6px 0 0 -20px;
  pointer-events: none; opacity: 0; transition: opacity .2s, transform .18s ease-out; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35));
}
.pu-hand.show { opacity: 1; }
.pu-hand svg { width: 100%; height: 100%; }
.pu-hand::after {
  content: ""; position: absolute; left: 14px; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .9); opacity: 0; transform: scale(.4);
}
.pu-hand.down::after { animation: pu-ring 1s ease-out infinite; }
@keyframes pu-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }

.pu-pause {
  position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; gap: 4px; border: 0;
  background: rgba(10, 24, 50, .58); color: #fff; font: inherit; text-align: center; cursor: pointer;
}
.pu-pause[hidden] { display: none; }
.pu-pause b { font: 700 34px/1.1 var(--display); }
.pu-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-run kites (lives): separate from the cafe-lives heart chip */
.chip.pu-lives { background: rgba(255, 255, 255, .16); gap: 3px; padding-inline: 8px; }
.chip.pu-lives.bump { animation: pu-bump .35s ease-out; }
.pu-life {
  display: inline-block; width: 15px; height: 18px;
  background: linear-gradient(135deg, #e2462f 50%, #ffc531 50%);
  clip-path: polygon(50% 0, 100% 44%, 50% 100%, 0 44%);
  transition: opacity .2s, filter .2s;
}
.pu-life.off { opacity: .28; filter: grayscale(1); }