/* Bandar Bhagao: golden-hour rooftop HUD */

body.game {
  --bg-top: #5a74c9;
  --bg-bottom: #9c4430;
  --hud-ink: #fff;
  --hud-chip: rgba(43, 29, 20, .32);
  background: linear-gradient(180deg, #4f68b8 0, #c86f55 40%, #9c4430 100%);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.stage { overscroll-behavior: none; touch-action: none; overflow: hidden; }
.subhud .chip { font-variant-numeric: tabular-nums; white-space: nowrap; transition: background .2s, transform .15s; }
.chip.bb-time.low { background: #fff; color: #c8102e; animation: bb-pulse 1s ease-in-out infinite; }
.chip.bb-combo.cold { opacity: .6; }
.chip.bb-combo.hot { background: var(--turmeric); color: var(--ink); }
@keyframes bb-pulse { 50% { transform: scale(1.08); } }

.boosters .boost { min-width: 120px; }
.boost.bb-empty { background: var(--turmeric); color: var(--ink); animation: bb-pulse .8s ease-in-out infinite; }
.boost.bb-nudge { animation: bb-nudge .35s ease-in-out; }
@keyframes bb-nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.bb-hand { margin: 0; transform-origin: 14px 6px; }
.bb-hand:not(.bb-swipe) { margin: -4px 0 0 -14px; }
.bb-hand.bb-swipe { margin: 0 0 0 -14px; animation: bb-swipe 1.3s ease-in-out infinite; }
@keyframes bb-swipe {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translateY(130px) scale(.92); opacity: 1; }
  100% { transform: translateY(150px) scale(.92); opacity: 0; }
}

.bb-over {
  position: absolute; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(340px, calc(100% - 32px)); padding: 20px 18px; border-radius: 22px; text-align: center;
  background: rgba(43, 29, 20, .78); color: #fff; pointer-events: none;
  display: grid; gap: 8px; justify-items: center; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5);
}
.bb-over h2 { margin: 0; font: 700 30px/1.1 var(--display); color: var(--turmeric); }
.bb-over p { margin: 0; font-size: 15px; line-height: 1.4; opacity: .92; }
.bb-over .bb-best { font-weight: 800; opacity: 1; }
.bb-over .bb-go {
  margin-top: 6px; padding: 10px 22px; border-radius: 999px; background: var(--chili); font-weight: 800; font-size: 17px;
  animation: bb-pulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bb-over .bb-go, .boost.bb-empty, .chip.bb-time.low, .bb-hand.bb-swipe { animation: none; }
}
.stage .coach-line { width: max-content; max-width: calc(100% - 24px); }

/* v2: waves, samosa lives, power-up card */
.subhud { gap: 6px; }
.chip.bb-wave.boss { background: #c8102e; color: #fff; }
.chip.bb-lives { display: inline-flex; align-items: center; gap: 2px; padding: 3px 9px; background: rgba(43, 29, 20, .5); }
.chip.bb-lives i { display: block; width: 18px; height: 17px; transition: transform .2s, opacity .2s, filter .2s; }
.chip.bb-lives i svg { display: block; width: 100%; height: 100%; }
.chip.bb-lives i.gone { opacity: .35; filter: grayscale(1); transform: scale(.82); }
.chip.bb-lives.low { box-shadow: 0 0 0 2px #ff3b3b inset; }
.chip.bb-lives.bump { animation: bb-bump .45s cubic-bezier(.2, 1.6, .4, 1); }
.chip.bb-lives.ouch { animation: bb-ouch .5s ease-in-out; }
@keyframes bb-bump { 40% { transform: scale(1.25); } }
@keyframes bb-ouch { 0%, 100% { transform: none; background: rgba(43, 29, 20, .5); } 20% { transform: translateX(-6px); background: #c8102e; } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

.bb-card {
  position: absolute; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(360px, calc(100% - 24px)); max-height: calc(100% - 16px); overflow-y: auto;
  padding: 18px 14px 14px; border-radius: 22px; text-align: center;
  background: rgba(43, 29, 20, .9); color: #fff; display: grid; gap: 8px; justify-items: center;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
  animation: bb-card-in .35s cubic-bezier(.2, 1.4, .4, 1) both;
}
.bb-card[hidden] { display: none; }
@keyframes bb-card-in { from { transform: translate(-50%, -40%) scale(.9); opacity: 0; } }
.bb-card h2 { margin: 0; font: 700 26px/1.15 var(--display); color: var(--turmeric); }
.bb-card p { margin: 0; font-size: 14.5px; line-height: 1.35; }
.bb-card .bb-card-stats { opacity: .9; font-variant-numeric: tabular-nums; }
.bb-card .bb-perfect { color: #7dff9a; font-weight: 800; }
.bb-card .bb-pick { margin-top: 4px; font-weight: 800; letter-spacing: .02em; }
.bb-card .bb-next { color: #ff8a8a; font-weight: 800; }
.bb-ups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.bb-up {
  display: grid; justify-items: center; align-content: start; gap: 2px; min-height: 104px; padding: 10px 4px 8px;
  border: 2px solid rgba(255, 255, 255, .18); border-radius: 16px; background: rgba(255, 255, 255, .1); color: #fff;
  font: inherit; cursor: pointer; transition: transform .1s, background .15s;
}
.bb-up:active { transform: scale(.95); background: rgba(255, 200, 18, .3); }
.bb-up .bb-up-ico { font-size: 30px; line-height: 1.1; }
.bb-up b { font-size: 14px; line-height: 1.15; }
.bb-up small { font-size: 12px; line-height: 1.2; opacity: .85; }
@media (hover: hover) { .bb-up:hover { background: rgba(255, 255, 255, .2); border-color: var(--turmeric); } }
@media (prefers-reduced-motion: reduce) { .bb-card, .chip.bb-lives.bump, .chip.bb-lives.ouch { animation: none; } }