/* Dabba Dash: warm street-evening backdrop, HUD chips, tutorial hand, pause overlay */

body.game {
  --bg-top: #d9481c;
  --bg-bottom: #f2913d;
  --hud-ink: #fff;
  --hud-chip: rgba(255, 255, 255, .18);
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  overscroll-behavior: none;
}
.stage { overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.subhud { gap: 6px; }
.subhud .chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; min-height: 28px; font-weight: 800; }
.dd-score { min-width: 64px; justify-content: center; font-variant-numeric: tabular-nums; font-size: 16px; }
.dd-lives i, .dd-box i { display: inline-block; font-style: normal; }
.dd-lives svg { width: 22px; height: 18px; display: block; }
.dd-lives svg .shell { fill: rgba(255, 255, 255, .25); }
.dd-lives svg .visor, .dd-lives svg .stripe { fill: rgba(255, 255, 255, .12); }
.dd-lives i.on svg .shell { fill: #e23b2e; stroke: #fff; stroke-width: 1.4; }
.dd-lives i.on svg .visor { fill: #2b2b38; }
.dd-lives i.on svg .stripe { fill: #fff; }
.dd-lives.low { background: #fff; }
.dd-lives.low i:not(.on) svg .shell { fill: #e8d6c4; }
.dd-lives.hit { animation: dd-shake .45s; }
.dd-lives.pop { animation: dd-pop .45s; }
.dd-box svg { width: 18px; height: 18px; display: block; fill: rgba(255, 255, 255, .25); }
.dd-box svg .lid { fill: rgba(255, 255, 255, .35); }
.dd-box i.on svg { fill: #f2b33d; }
.dd-box i.on svg .lid { fill: #d9481c; }
.dd-box.low { background: #fff; }
.dd-box.low i:not(.on) svg { fill: #e8d6c4; }
.dd-box.pop { animation: dd-pop .4s; }
@keyframes dd-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes dd-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

.coach-line { top: 14px; font-size: 17px; background: rgba(43, 29, 20, .78); }

.dd-hand { margin: 0 0 0 -16px; }
.dd-hand.dd-side { animation: dd-swipe-x 1.3s ease-in-out infinite; }
.dd-hand.dd-up { animation: dd-swipe-up 1.3s ease-in-out infinite; }
.dd-hand.dd-down { animation: dd-swipe-down 1.3s ease-in-out infinite; }
.dd-hand.dd-tap { animation: tapme 0.9s ease-in-out infinite; }
@keyframes dd-swipe-x { 0%, 15% { transform: translateX(-40px); opacity: 0; } 25% { opacity: 1; } 60%, 75% { transform: translateX(50px); opacity: 1; } 100% { transform: translateX(50px); opacity: 0; } }
@keyframes dd-swipe-up { 0%, 15% { transform: translateY(30px); opacity: 0; } 25% { opacity: 1; } 60%, 75% { transform: translateY(-60px); opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }
@keyframes dd-swipe-down { 0%, 15% { transform: translateY(-60px); opacity: 0; } 25% { opacity: 1; } 60%, 75% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }

.dd-pause {
  position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; gap: 4px; border: 0; width: 100%;
  background: rgba(43, 29, 20, .55); color: #fff; font: inherit; text-align: center; cursor: pointer;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.dd-pause[hidden] { display: none; }
.dd-pause b { font: 700 40px/1.1 var(--display); }
.dd-pause span { font-size: 18px; font-weight: 700; opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  .dd-hand { animation-duration: 2.6s !important; }
}

/* no booster bar in this game: the road runs to the bottom edge */
.boosters { display: none; }