/* Sabzi Ninja: kitchen-counter backdrop and HUD bits */

body.game {
  --bg-top: #5a3418;
  --bg-bottom: #2e1a0c;
  --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.sn-score { background: var(--chili); transition: transform .12s; }
.chip.sn-score.bump { animation: sn-bump .22s ease-out; }
@keyframes sn-bump { 50% { transform: scale(1.12); } }
.chip.sn-score.dbl { box-shadow: 0 0 0 2px #ff9a3a, 0 0 12px rgba(255, 140, 40, .7); }
.chip .sn-mult { font-style: normal; font-weight: 900; font-size: 13px; line-height: 1; padding: 3px 6px; border-radius: 999px; background: #ffd23f; color: #5a2a00; }
.chip .sn-mult[hidden] { display: none; }

/* In-run lives: pudina-green leaf hearts (the red heart in the header is the cafe-lives wallet) */
.chip.sn-lives { gap: 2px; padding-inline: 8px; }
.chip.sn-lives i { display: inline-grid; width: 20px; height: 20px; transition: transform .2s; }
.chip.sn-lives i[hidden] { display: none; }
.chip.sn-lives svg { width: 100%; height: 100%; overflow: visible; }
.chip.sn-lives i svg path:first-child { fill: rgba(255, 255, 255, .16); stroke: rgba(255, 255, 255, .4); stroke-width: 1.5; }
.chip.sn-lives i svg .vein { stroke: rgba(255, 255, 255, .25); stroke-width: 1.2; stroke-linecap: round; }
.chip.sn-lives i.on svg path:first-child { fill: #46c35a; stroke: #e9ffe9; }
.chip.sn-lives i.on svg .vein { stroke: #c9ffd4; }
.chip.sn-lives .sn-shield { width: 20px; height: 20px; margin-left: 2px; }
.chip.sn-lives .sn-shield path:first-child { fill: #3d7be0; stroke: #fff; stroke-width: 1.4; }
.chip.sn-lives.last i.on { animation: sn-beat .8s ease-in-out infinite; }
.chip.sn-lives.last i.on svg path:first-child { fill: #ff7a3a; }
.chip.sn-lives.safe { box-shadow: 0 0 0 2px #ffd23f, 0 0 14px rgba(255, 210, 63, .7); }
.chip.sn-lives.gain { animation: sn-gain .6s ease-out; }
.chip.sn-lives.lose { animation: sn-lose .45s ease-out; }
.chip.sn-lives.save { animation: sn-save .6s ease-out; }
@keyframes sn-beat { 50% { transform: scale(1.2); } }
@keyframes sn-gain { 30% { transform: scale(1.18); box-shadow: 0 0 0 3px rgba(125, 255, 154, .8); } }
@keyframes sn-lose { 20% { transform: translateX(-5px); background: rgba(255, 60, 30, .6); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes sn-save { 30% { transform: scale(1.15); box-shadow: 0 0 0 3px rgba(80, 150, 255, .9); } }
@media (max-width: 380px) {
  .subhud .chip { padding-inline: 9px; }
  .chip.sn-lives i, .chip.sn-lives .sn-shield { width: 17px; height: 17px; }
}

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

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