/* Snack Invaders: night sky over the city, HUD bits */

body.game {
  --bg-top: #2a1450;
  --bg-bottom: #1a0d33;
  --hud-ink: #fff;
  --hud-chip: rgba(255, 255, 255, .14);
}
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.si-score { background: #8e2a8a; }
.chip .si-mult { font-style: normal; font-weight: 900; font-size: 13px; line-height: 1; padding: 3px 6px; border-radius: 999px; background: #ffd23f; color: #5a2a00; }
.chip .si-mult[hidden] { display: none; }

.chip.si-lives { gap: 3px; padding-inline: 8px; }
.chip.si-lives i { display: inline-grid; width: 21px; height: 21px; transition: transform .2s; }
.chip.si-lives svg { width: 100%; height: 100%; overflow: visible; }
.chip.si-lives i svg * { fill: rgba(255, 255, 255, .16); stroke: rgba(255, 255, 255, .35); }
.chip.si-lives i svg path:first-child, .chip.si-lives i svg circle { stroke: none; }
.chip.si-lives i.on svg path:first-child, .chip.si-lives i.on svg circle { fill: #f2a04a; }
.chip.si-lives i.on svg path:not(:first-child) { fill: none; stroke: #f2a04a; }
.chip.si-lives i:not(.on) svg path:not(:first-child) { fill: none; }
.chip.si-lives.last i.on { animation: si-beat .8s ease-in-out infinite; }
.chip.si-lives.gain { animation: si-gain .6s ease-out; }
.chip.si-lives.lose { animation: si-lose .45s ease-out; }
@keyframes si-beat { 50% { transform: scale(1.2); } }
@keyframes si-gain { 30% { transform: scale(1.15); box-shadow: 0 0 0 3px rgba(125, 255, 176, .8); } }
@keyframes si-lose { 20% { transform: translateX(-5px); background: rgba(255, 60, 30, .6); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (max-width: 380px) {
  .subhud .chip { padding-inline: 9px; }
  .chip.si-lives i { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .chip.si-lives.last i.on, .chip.si-lives.lose, .chip.si-lives.gain { animation: none; } }

.si-pause {
  position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; gap: 4px; border: 0;
  background: rgba(20, 8, 40, .62); color: #fff; font: inherit; text-align: center; cursor: pointer;
}
.si-pause[hidden] { display: none; }
.si-pause b { font: 700 34px/1.1 var(--display); }
.si-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); }