/* 숫자 블랙홀 - 게임 전용 스타일 (당고단 테마 색상 변수 재사용) */

.bh-wrap { max-width: 460px; margin: 0 auto; }

.bh-stage {
  --tube-inset-left: 17;   /* 통 프레임의 안쪽 뚫린 부분까지 왼쪽 여백(%) */
  --tube-inset-top: 10;    /* 위쪽 여백(%) - 공이 나오는 지점/경고선이 이 아래에 위치함 */
  --tube-inset-right: 17;  /* 오른쪽 여백(%) */
  --tube-inset-bottom: 8; /* 아래쪽 여백(%) - 이 아래는 받침대 그림 */
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.4;
  max-height: 78vh;
  border-radius: 28px;
  overflow: hidden;
  background-color: #0A0818; /* 배경 이미지 로드 전/실패 시 기본 바탕색 */
  background-image:
    linear-gradient(rgba(4,4,20,0.12), rgba(4,4,20,0.20)),
    url('/assets/minigame_blackhole/backgrounds/space_background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* 통 프레임 그림 - 배경과 캔버스 위, HUD보다는 아래에 얹혀서 "유리 통 안에 공이 있는" 느낌을 줌.
   위치가 살짝 안 맞으면 위 --tube-inset-* 값 4개만 조정하면 됩니다(코드 수정 불필요). */
.bh-tube-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; /* 프레임이 스테이지 비율과 다르면 contain으로 바꿔도 됩니다 */
  pointer-events: none;
  z-index: 3;
}
/* 배경 이미지가 없을 때를 대비한 그라디언트 폴백 (JS에서 이미지 로드 실패 감지 시 이 클래스를 추가) */
.bh-stage.bh-bg-fallback {
  background-image:
    linear-gradient(160deg, #150F2E, #08061A);
}

/* 캔버스는 투명하게 유지해서 뒤에 있는 배경 이미지가 그대로 보이게 함 */
.bh-canvas { position: absolute; inset: 0; display: block; cursor: pointer; background: transparent; }

/* 경고선 및 관련 UI - 클릭을 가로채면 안 되므로 전부 pointer-events:none */
.bh-warnline {
  position: absolute; left: 12px; right: 12px; top: 70px; height: 2px;
  background: rgba(255,90,78,0.55); pointer-events: none; z-index: 5;
}
.bh-warnline.bh-warn-blink { animation-name: bh-blink; animation-duration: 0.85s; animation-iteration-count: infinite; }
@keyframes bh-blink { 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.bh-warn-badge {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(255,90,78,0.9); color: #fff; font-family: var(--font-display, sans-serif); font-weight: 800;
  font-size: 12px; padding: 5px 12px; border-radius: 999px; display: flex; align-items: center; gap: 4px;
  pointer-events: none; z-index: 6;
}

.bh-hud { position: absolute; top: 0; left: 0; right: 0; padding: 14px; pointer-events: none; z-index: 4; }
.bh-hud-top { display: flex; justify-content: space-between; align-items: flex-start; }
.bh-score-box { background: rgba(255,255,255,0.10); backdrop-filter: blur(6px); border-radius: 14px; padding: 8px 14px; text-align: center; }
.bh-label { font-size: 9px; letter-spacing: .08em; color: rgba(255,255,255,0.6); font-weight: 700; }
.bh-score { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 20px; color: #FFD93D; }

.bh-next-box { text-align: center; }
/* 다음 숫자 미리보기: 빈 슬롯 이미지 위에 숫자공 이미지를 겹쳐서 표시
   슬롯 이미지 자체에 "Next" 문구가 포함되어 있으므로 별도 라벨은 넣지 않음.
   이미지 안 원형 구멍이 정중앙보다 살짝 아래에 있는 디자인이 많아 top을 54%로 살짝 내려서 맞춤.
   위치가 안 맞으면 --next-ball-size / --next-ball-top 두 값만 조정하면 됩니다. */
.next-preview {
  --next-ball-size: 54%;
  --next-ball-top: 54%;
  position: relative;
  width: 64px; height: 64px;
  margin-top: 2px;
}
.next-preview-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.next-preview-ball {
  position: absolute; z-index: 1;
  top: var(--next-ball-top); left: 50%;
  width: var(--next-ball-size); height: var(--next-ball-size);
  transform: translate(-50%, -50%) scale(1);
  object-fit: contain;
  border-radius: 50%;
}
.next-preview-ball.bh-pop-in { animation: bh-next-pop 0.12s ease-out; }
@keyframes bh-next-pop {
  0% { transform: translate(-50%, -50%) scale(0.85); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.next-preview-fallback {
  display: none; position: absolute; z-index: 1;
  top: var(--next-ball-top); left: 50%;
  width: calc(var(--next-ball-size) - 4%); height: calc(var(--next-ball-size) - 4%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  align-items: center; justify-content: center;
  font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 15px;
}
/* 슬롯 이미지 자체가 없는 경우(no-slot-img) 배경 프레임을 CSS로 대신 그려주고, 라벨도 대신 보여줌 */
.next-preview.no-slot-img { background: rgba(255,255,255,0.10); border-radius: 10px; }
.next-preview-label-fallback {
  display: none; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 9px; letter-spacing: .08em; color: rgba(255,255,255,0.6); font-weight: 700;
}
.next-preview.no-slot-img .next-preview-label-fallback { display: block; }

.bh-combo {
  position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
  color: #FFD93D; font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 13px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transform-origin: center;
}
.bh-combo.bh-combo-pop { animation: bh-combo-pop 0.22s ease-out; }
@keyframes bh-combo-pop {
  0% { transform: translateX(-50%) scale(1); }
  40% { transform: translateX(-50%) scale(1.35); }
  100% { transform: translateX(-50%) scale(1); }
}

.bh-toolbar { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; pointer-events: none; z-index: 4; }
.bh-tool {
  pointer-events: auto;
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background-color: rgba(255,255,255,0.14); color: #fff; font-size: 17px; cursor: pointer;
  backdrop-filter: blur(6px);
  background-size: 55%; background-position: center; background-repeat: no-repeat;
  transition: transform 0.08s ease-out;
}
.bh-tool .bh-tool-emoji { pointer-events: none; }
.bh-tool.has-icon .bh-tool-emoji { display: none; }
.bh-tool:disabled { opacity: .35; cursor: not-allowed; }
.bh-tool.active { background-color: var(--violet, #FFC93C); color: #1B1712; }
/* 버튼 누름 효과: 살짝 축소됐다가 복귀 */
.bh-tool:active, .bh-screen .btn:active { transform: scale(0.95); }
.bh-screen .btn { transition: transform 0.08s ease-out; }

.bh-screen {
  position: absolute; inset: 0; z-index: 10;
  background: linear-gradient(160deg, rgba(20,15,40,0.95), rgba(8,6,20,0.97));
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px; text-align: center;
}
.bh-logo { font-size: 46px; margin-bottom: 6px; }
.bh-screen h2 { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 24px; margin: 0 0 8px; }
.bh-screen h3 { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 18px; margin: 0 0 14px; }
.bh-best { color: rgba(255,255,255,0.6); font-size: 13px; margin: 0 0 22px; }
.bh-best b { color: #FFD93D; }
.bh-screen .btn { min-width: 180px; justify-content: center; margin: 5px 0; }
.bh-howto-list { text-align: left; list-style: none; padding: 0; margin: 0 0 20px; max-width: 300px; }
.bh-howto-list li { font-size: 13px; line-height: 1.7; padding: 6px 0 6px 22px; position: relative; color: rgba(255,255,255,0.85); }
.bh-howto-list li::before { content: '🍡'; position: absolute; left: 0; }

.bh-go-score { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 40px; color: #FFD93D; margin: 6px 0; }
.bh-go-new-best { background: rgba(255,201,60,0.18); color: #FFD93D; font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; margin-bottom: 10px; }
.bh-go-stats { display: flex; gap: 14px; font-size: 12.5px; color: rgba(255,255,255,0.75); flex-wrap: wrap; justify-content: center; }
.bh-go-stats b { color: #fff; font-family: var(--font-display, sans-serif); }

@media (max-width: 480px) {
  .bh-wrap { max-width: 100%; }
  .bh-stage { border-radius: 20px; aspect-ratio: 3 / 4.8; }
  .next-preview { width: 52px; height: 52px; }
}

/* 아주 작은 화면(360px)에서도 HUD 요소가 겹치지 않도록 여백 축소 */
@media (max-width: 380px) {
  .bh-hud { padding: 10px; }
  .bh-score-box { padding: 6px 10px; }
  .bh-score { font-size: 17px; }
  .bh-toolbar { gap: 8px; }
  .bh-tool { width: 38px; height: 38px; font-size: 15px; }
}