/* ==========================================================================
   버저비터 (buzzer-beater)
   무대 위 머리 표시: 왼쪽 점수와 단계·연속, 오른쪽 연장 목표. 시간은 캔버스 속 LED 판이 보여 준다.
   게임 공통 모양(games.css)을 그대로 쓰고, 이 게임에만 있는 것만 더한다.
   ========================================================================== */

.bb-stage { background: #05080C; }

/* ---------- 머리 표시 ---------- */
.bb-hud {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start;
  height: auto; padding: 16px 16px 0 22px; gap: 12px;
}
.bb-hud .xg-score { text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.bb-hud .xg-right { margin-left: 0; }
.bb-sub { gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.bb-phase { font-size: .82rem; color: var(--text-2); white-space: nowrap; transition: color var(--d-3); }
.bb-phase.is-bonus { color: var(--xync); font-weight: 650; }
.bb-streak { display: inline-flex; gap: 5px; align-items: center; height: 14px; }
.bb-streak i { width: 7px; height: 7px; border-radius: 50%; background: rgba(148,170,197,.24); transition: background var(--d-1), box-shadow var(--d-1); }
.bb-streak i.is-on { background: var(--xync); box-shadow: 0 0 7px rgba(255,138,102,.75); }
.bb-fire {
  font-size: .76rem; font-weight: 750; letter-spacing: .04em; color: var(--xync-ink); background: var(--xync);
  padding: 1px 9px; border-radius: var(--r-pill); box-shadow: 0 0 16px rgba(255,138,102,.5); white-space: nowrap;
}
.bb-hud-r { align-self: center; display: grid; justify-items: end; }
.bb-target {
  font-family: var(--f-mono); font-size: .82rem; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums;
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(7,10,15,.55);
  text-shadow: 0 1px 10px rgba(0,0,0,.6); transition: color var(--d-3), border-color var(--d-3);
}
.bb-target:empty { display: none; }
.bb-target.is-met { color: var(--ether); border-color: rgba(99,242,210,.45); }

/* ---------- 효과 글자: 카운트다운, 알림 띠, 떠오르는 점수 ---------- */
.bb-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.bb-count {
  position: absolute; left: 50%; top: 63%; transform: translate(-50%, -50%);
  font-family: var(--f-mono); font-weight: 500; font-size: clamp(4.5rem, 11vw, 7.5rem); line-height: 1;
  color: #fff; text-shadow: 0 0 34px rgba(99,242,210,.35), 0 4px 26px rgba(0,0,0,.6); opacity: 0;
}
.bb-count.is-on { animation: bb-count 740ms var(--ease-out) forwards; }
.bb-count.is-go { color: var(--ether); letter-spacing: 0.02em; }
.bb-count.is-last { color: var(--xync); text-shadow: 0 0 34px rgba(255,138,102,.45), 0 4px 26px rgba(0,0,0,.6); }
@keyframes bb-count {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
}

.bb-banner {
  position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%);
  text-align: center; white-space: nowrap; animation: bb-banner 1400ms var(--ease-out) forwards;
}
.bb-banner::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 160%; height: 230%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(5,8,12,.6), rgba(5,8,12,.3) 55%, rgba(5,8,12,0));
}
.bb-banner b {
  display: block; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.01em;
  color: #fff; text-shadow: 0 0 22px rgba(99,242,210,.4), 0 3px 18px rgba(0,0,0,.6);
}
.bb-banner span { display: block; margin-top: 8px; font-family: var(--f-mono); font-weight: 500; font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--ether); text-shadow: 0 0 16px rgba(99,242,210,.4); }
.bb-banner.is-swish b { color: var(--ether); }
.bb-banner.is-fire b { font-family: var(--f-sans); font-style: normal; font-weight: 820; letter-spacing: .06em; color: var(--xync); text-shadow: 0 0 26px rgba(255,138,102,.55), 0 3px 18px rgba(0,0,0,.6); }
.bb-banner.is-fire span, .bb-banner.is-bonus span, .bb-banner.is-buzzer span { color: var(--xync); text-shadow: 0 0 16px rgba(255,138,102,.4); }
.bb-banner.is-bonus b, .bb-banner.is-ot b, .bb-banner.is-buzzer b { font-family: var(--f-sans); font-style: normal; font-weight: 820; letter-spacing: -0.03em; }
.bb-banner.is-buzzer b { color: var(--xync-2); text-shadow: 0 0 30px rgba(255,138,102,.6), 0 3px 18px rgba(0,0,0,.6); }
.bb-banner.is-ot b { color: var(--ether-2); }
@keyframes bb-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  24% { transform: translate(-50%, -50%) scale(1); }
  76% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%); }
}
.bb-pop { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; animation: bb-pop 900ms var(--ease-out) forwards; }
.bb-pop b { display: block; font-family: var(--f-mono); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; color: #fff; text-shadow: 0 0 14px rgba(99,242,210,.45), 0 2px 10px rgba(0,0,0,.6); }
.bb-pop.is-big b { color: var(--xync-2); font-size: 1.9rem; text-shadow: 0 0 16px rgba(255,138,102,.5), 0 2px 10px rgba(0,0,0,.6); }
@keyframes bb-pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -76%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -96%); }
}
.bb-banner.is-static, .bb-pop.is-static, .bb-count.is-static { animation: none !important; opacity: 1; }
.bb-hint { bottom: 27%; }
.bb-extra { font-size: .9rem; color: var(--text-2); }

@media (max-aspect-ratio: 4/5) {
  .bb-banner { top: 60%; }
  .bb-count { top: 60%; }
}
@media (max-width: 860px) {
  .bb-hud { padding: 12px 12px 0 16px; gap: 6px 8px; grid-template-columns: minmax(0, 1fr) auto; }
  .bb-hud-l { grid-column: 1; grid-row: 1; }
  .bb-hud .xg-right { grid-column: 2; grid-row: 1; }
  .bb-hud-r { grid-column: 1 / -1; grid-row: 2; justify-items: start; }
  .bb-target { font-size: .78rem; padding: 3px 9px; }
  .bb-sub { margin-top: 7px; gap: 8px; }
  .bb-hint { bottom: 32%; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-streak i, .bb-phase, .bb-target { transition: none; }
}