/* Chai Commando: a dusk-blue city street; the street itself is drawn on the canvas */

body.game {
  --bg-top: #27406e;
  --bg-bottom: #1a1f3a;
  --hud-ink: #fff;
  --hud-chip: rgba(255, 255, 255, .14);
}
.cc-stage { overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.subhud .chip { white-space: nowrap; }
.subhud .cc-score b { font-size: 16px; }
.boosters:empty { padding-top: 0; }

/* in-run hearts (lives), separate from the cafe-life wallet in the header */
.subhud .cc-lives { display: inline-flex; align-items: center; gap: 2px; padding: 3px 10px; }
.cc-heart { display: inline-grid; width: 18px; height: 18px; transition: opacity .3s, filter .3s, transform .3s; }
.cc-heart svg { width: 100%; height: 100%; }
.cc-heart.off { opacity: .3; filter: grayscale(1); transform: scale(.8); }
.cc-lives.hurt { animation: cc-hurt .5s ease; }
.cc-lives.bump { animation: cc-bump .35s ease; }
@keyframes cc-hurt { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); background: rgba(230, 50, 40, .6); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
@keyframes cc-bump { 50% { transform: scale(1.12); } }

.hand.cc-hand { left: 50%; top: 58%; }

/* banners: stage intros, the boss, power-ups */
.cc-banner {
  position: absolute; z-index: 6; left: 50%; top: 18%; display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100% - 32px);
  padding: 10px 18px 10px 12px; border-radius: 18px; background: #fffaf1; color: var(--ink);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); pointer-events: none;
  transform: translate(-50%, -10px) scale(.6); opacity: 0; transition: opacity .2s, transform .35s cubic-bezier(.2, 1.6, .4, 1);
}
.cc-banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.cc-banner .cc-bi { flex: none; font-size: 32px; line-height: 1; }
.cc-banner small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--chili); }
.cc-banner b { display: block; font: 700 18px/1.2 var(--display); }
html[lang="hi"] .cc-banner small { letter-spacing: 0; }

.cc-pause {
  position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; gap: 6px; border: 0;
  background: rgba(12, 18, 40, .62); color: #fff; font: inherit; text-align: center;
}
.cc-pause[hidden] { display: none; }
.cc-pause b { font: 700 34px/1 var(--display); }
.cc-pause span { font-weight: 700; opacity: .85; }

.cc-stage .coach-line { top: max(22%, 120px); }