/* ============================================================
   폭탄 박스 — PC 시안 1:1 + 모바일 재배치 (이 파일 하나로 완결)
   ============================================================ */
.bb-page { max-width: 1060px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 14px; }

/* ---------- 상단 게임 카드 ---------- */
.bb-head-card { padding: 16px 22px; }
.bb-head { display: flex; align-items: center; gap: 14px; }
.bb-head-ico {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: #f2f6ff; border: 1px solid #e3ecfb;
}
.bb-head-tx { min-width: 0; }
.bb-title { margin: 0; font-size: 19px; font-weight: 900; color: var(--tx); }
.bb-desc { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--tx-sub); }
.bb-today {
  margin-left: auto; flex: 0 0 auto;
  padding: 8px 14px; border-radius: 10px;
  background: #eef4ff; border: 1px solid #dbe7fb;
  font-size: 12.5px; font-weight: 800; color: var(--tx);
  white-space: nowrap;
}

/* ---------- 본문: 왼쪽 게임 영역 + 오른쪽 설정 패널 ---------- */
.bb-body-card { padding: 22px; }
.bb-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }

/* ----- 왼쪽 상단 상태 (획득 예정 · 오리 · 배수) ----- */
.bb-status { display: flex; align-items: stretch; gap: 12px; }
.bb-stat {
  flex: 1 1 0; min-width: 0;
  background: #fff; border: 1px solid #e3ecfb; border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 2px 6px rgba(96, 143, 214, .08);
}
.bb-stat.is-right { text-align: right; }
.bb-stat-label { font-size: 12px; font-weight: 800; color: var(--tx-sub); }
.bb-stat-val { margin-top: 4px; font-size: 21px; font-weight: 900; color: var(--blue); }
.bb-stat.is-right .bb-stat-val { color: var(--tx); }

.bb-duck { position: relative; flex: 0 0 auto; align-self: center; text-align: center; }
.bb-duck img { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto; }
.bb-duck-say {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: #fff; border: 1px solid #e3ecfb;
  font-size: 11px; font-weight: 800; color: var(--tx-sub);
  box-shadow: 0 2px 5px rgba(96, 143, 214, .12);
}

/* ----- 안내 문구 ----- */
.bb-guide { text-align: center; margin: 18px 0 14px; }
.bb-guide-main { margin: 0; font-size: 15px; font-weight: 900; color: var(--tx); }
.bb-guide-sub { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--tx-sub); }

/* ----- 상자 그리드 (PC 4열) ----- */
.bb-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; max-width: 640px; margin: 0 auto;
}
.bb-box {
  position: relative; border: 0; padding: 0; cursor: pointer;
  aspect-ratio: 10 / 7.6; border-radius: 14px;
  background: linear-gradient(180deg, #e8a24a 0%, #d98f36 55%, #c97f2c 100%);
  border: 2px solid #b06f24;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 #a8681f, 0 6px 10px rgba(148, 96, 32, .25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: transform .12s ease, filter .12s ease;
}
.bb-box:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.04); }
.bb-box:active:not(:disabled) { transform: translateY(0); }
.bb-box:disabled { cursor: default; }
.bb-box.is-idle { filter: saturate(.75) brightness(.98); }

/* 위·아래 나무 홈 */
.bb-box-groove {
  display: block; width: 62%; height: 9px; border-radius: 999px;
  background: linear-gradient(180deg, #c8862f, #b97728);
  box-shadow: inset 0 2px 3px rgba(90, 55, 10, .35), inset 0 -1px 0 rgba(255, 255, 255, .25);
}

/* 가운데 물음표 패널 */
.bb-box-face {
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(180deg, #ffe9bd, #f7d896);
  border: 1px solid #dfb96a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 4px rgba(148, 96, 32, .25);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; color: #8a6420;
}
.bb-coin { width: 30px; height: 30px; object-fit: contain; }

/* 안전 상자 — 황금색 + 반짝·bounce */
.bb-box.is-safe {
  background: linear-gradient(180deg, #ffd76e 0%, #f8c243 55%, #eeb02e 100%);
  border-color: #d99a1d;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #cf9218, 0 6px 12px rgba(216, 156, 30, .35);
  animation: bb-pop .45s ease;
}
.bb-box.is-safe .bb-box-face {
  background: linear-gradient(180deg, #fff3cf, #ffe6a1);
  border-color: #e4b855;
}
.bb-box.is-safe::after {
  content: "✨"; position: absolute; top: 4px; right: 8px; font-size: 13px;
  animation: bb-spark 1s ease both;
}
@keyframes bb-pop { 0% { transform: scale(.92); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes bb-spark { 0% { opacity: 0; transform: scale(.4) rotate(-20deg); } 40% { opacity: 1; } 100% { opacity: .9; transform: scale(1) rotate(0); } }

/* 폭탄 상자 — 어두운 회색 + 흔들림 */
.bb-box.is-bomb {
  background: linear-gradient(180deg, #5d6470 0%, #4a505b 55%, #3e444e 100%);
  border-color: #333944;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 4px 0 #2e333c, 0 6px 10px rgba(30, 34, 42, .35);
  animation: bb-shake .5s ease;
}
.bb-box.is-bomb .bb-box-groove { background: linear-gradient(180deg, #525863, #454b55); }
.bb-box.is-bomb .bb-box-face {
  background: linear-gradient(180deg, #737a86, #5d636e);
  border-color: #4a505a; font-size: 22px;
}
@keyframes bb-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-2deg); }
  40% { transform: translateX(5px) rotate(2deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* ---------- 오른쪽 게임 설정 패널 ---------- */
.bb-panel {
  background: #fbfcfe; border: 1px solid #e3ecfb; border-radius: 16px;
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.bb-panel-title { margin: 0 0 2px; font-size: 15.5px; font-weight: 900; color: var(--tx); }
.bb-panel-label { margin-top: 4px; font-size: 12px; font-weight: 800; color: var(--tx-sub); }

.bb-bets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bb-bet {
  height: 42px; border-radius: 10px; cursor: pointer;
  background: #fff; border: 1.5px solid #dfe8f7;
  font-size: 13.5px; font-weight: 900; color: var(--tx);
  transition: border-color .12s ease, background .12s ease;
}
.bb-bet:hover:not(:disabled) { border-color: #b9d0f3; }
.bb-bet.is-on { border-color: var(--blue); background: #eef4ff; color: var(--blue); box-shadow: 0 0 0 2px rgba(59, 130, 246, .12); }
.bb-bet:disabled { opacity: .55; cursor: not-allowed; }

.bb-risk {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff6ec; border: 1px solid #f7e2c8; border-radius: 10px;
  padding: 9px 12px; font-size: 12.5px; font-weight: 800;
}
.bb-risk span { color: #d07f1f; }
.bb-risk b { color: var(--tx); }
.bb-risk-bar {
  height: 7px; border-radius: 999px; background: #eceff5; overflow: hidden;
}
.bb-risk-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #f6b04a, #ef8f2e);
}

.bb-how {
  background: #f4f7fc; border-radius: 12px; padding: 12px 14px;
}
.bb-how-title { font-size: 12.5px; font-weight: 900; color: var(--tx); margin-bottom: 4px; }
.bb-how p { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--tx-sub); line-height: 1.55; }

.bb-start, .bb-cashout { width: 100%; height: 46px; font-size: 14.5px; margin-top: 4px; }
.bb-cashout {
  background: linear-gradient(180deg, #ffc24d, #f5a623);
  border-color: #e2951a; color: #5a3c05;
}
.bb-cashout:disabled { opacity: .55; }
.bb-msg {
  margin: 4px 0 0; padding: 9px 12px; border-radius: 10px;
  background: #f2f6ff; border: 1px solid #e3ecfb;
  font-size: 12.5px; font-weight: 800; color: var(--tx); line-height: 1.5;
}

/* ============================================================
   모바일·태블릿 재배치 — 축소판이 아니라 세로 1열 배치로 다시 그린다
     · 게임 영역 먼저, 게임 설정 패널은 상자 아래로
     · 상자 3열 (간격 8px) · 가로 스크롤 금지 · 터치 44px 이상
   ============================================================ */
@media (max-width: 900px) {
  .bb-layout { grid-template-columns: 1fr; gap: 16px; }
  .bb-panel { order: 2; }
  .bb-stage { order: 1; }
  .bb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 100%; }
  .bb-box { min-height: 44px; }
  .bb-body-card { padding: 14px; }
  .bb-head-card { padding: 12px 14px; }
  .bb-head { flex-wrap: wrap; gap: 10px; }
  .bb-today { margin-left: auto; padding: 6px 10px; font-size: 11.5px; }
  .bb-title { font-size: 17px; }
  .bb-status { gap: 8px; }
  .bb-stat { padding: 10px 12px; }
  .bb-stat-val { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bb-duck img { width: 48px; height: 48px; }
  .bb-duck-say { font-size: 10px; }
  .bb-start, .bb-cashout { width: 100%; }
  /* 하단 고정 메뉴바와 겹치지 않게 아래 여백 확보 */
  .bb-page { padding-bottom: 76px; }
}

@media (max-width: 430px) {
  .bb-box-face { width: 38px; height: 38px; font-size: 17px; }
  .bb-coin { width: 26px; height: 26px; }
  .bb-stat-label { font-size: 10.5px; }
  .bb-stat-val { font-size: 14.5px; }
}

@media (max-width: 360px) {
  .bb-status { flex-wrap: wrap; }
  .bb-duck { order: -1; width: 100%; }
  .bb-duck-say { position: static; transform: none; display: inline-block; margin-top: 2px; }
  .bb-stat { flex: 1 1 45%; }
  .bb-box-face { width: 34px; height: 34px; font-size: 15px; }
}

/* ============================================================
   폭탄 폭발 연출 (2026-08-23)
   · 중심은 클릭한 상자 rect 기준 — .bbx 는 카드 좌표계의 «점» 이고
     모든 파티클이 그 점을 중심으로 그려진다 (--bbx-size = 상자의 약 2.2배)
   · DOM 파티클 25개 이하 · 연출이 끝나면 통째로 제거된다
   ============================================================ */
.bb-body-card { position: relative; }
.bbx {
  position: absolute; width: 0; height: 0; z-index: 6; pointer-events: none;
}
.bbx > * { position: absolute; transform: translate(-50%, -50%); }

/* ── 카드 내부만 짧게 흔들림 + 붉은 위험 테두리 (사이트 전체 아님) ── */
.bbx-quake { animation: bbxQuake .11s linear 1; }
.bbx-quake::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(224, 49, 49, .5);
  animation: bbxDanger .5s ease-out 1 forwards; z-index: 7;
}
@keyframes bbxQuake {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, -2px); }
  80% { transform: translate(2px, 2px); } 100% { transform: translate(0, 0); }
}
@keyframes bbxDanger { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ── ① 선택한 상자 — 빠른 흔들림(심지 구간) ── */
.bb-box.bbx-shaking { animation: bbxPreShake .14s linear infinite; }
@keyframes bbxPreShake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-2px, 1px) rotate(-1.2deg); }
  50% { transform: translate(2px, -1px) rotate(1.2deg); }
  75% { transform: translate(-1px, -1px) rotate(-.6deg); }
}

/* ── ② 덮개(위 나무 홈)가 위로 튀어 오름 ── */
.bbx-lid {
  width: calc(var(--bbx-size) * .28); height: calc(var(--bbx-size) * .045);
  border-radius: 999px; background: linear-gradient(180deg, #c8862f, #b97728);
  opacity: 0; animation: bbxLid .5s ease-out .1s 1 forwards;
}
@keyframes bbxLid {
  0% { opacity: 0; transform: translate(-50%, -50%); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - var(--bbx-size) * .55)) rotate(170deg); }
}

/* ── ③④⑤ 심지 타는 폭탄 — 나타나서 부풀다가 폭발 순간 사라짐 ── */
.bbx-bomb {
  width: calc(var(--bbx-size) * .2); height: calc(var(--bbx-size) * .2);
  border-radius: 50%; background: radial-gradient(circle at 34% 30%, #5a616d, #23272e 68%);
  box-shadow: inset -2px -3px 5px rgba(0, 0, 0, .5);
  opacity: 0; animation: bbxBombIn .18s ease-out .12s 1 forwards, bbxInflate .3s ease-in .34s 1 forwards;
}
.bbx-bomb .bbx-fuse {
  position: absolute; left: 62%; top: -26%; width: 18%; height: 38%;
  border-radius: 999px; background: #8a6a3b; transform: rotate(28deg);
}
.bbx-bomb .bbx-sparkle {
  position: absolute; left: 74%; top: -42%; width: 34%; height: 34%; border-radius: 50%;
  background: radial-gradient(circle, #fff8c6, #ffb63d 55%, rgba(255, 182, 61, 0) 75%);
  animation: bbxFuseSpark .09s linear infinite;
}
@keyframes bbxBombIn { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.4); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes bbxInflate { 0% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(1.18); } }
@keyframes bbxFuseSpark { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.62); } }
.bbx.is-boom .bbx-bomb, .bbx.is-boom .bbx-lid { display: none; }

/* ── ⑥ 섬광 → ⑦ 화염 → ⑧ 충격파 (폭발 순간부터) ── */
.bbx-flash, .bbx-fire, .bbx-ring, .bbx-shard, .bbx-spark { opacity: 0; }
.bbx.is-boom .bbx-flash {
  width: var(--bbx-size); height: var(--bbx-size); border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #fff6c9 40%, rgba(255, 246, 201, 0) 70%);
  animation: bbxFlash .16s ease-out 1 forwards;
}
@keyframes bbxFlash { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.25); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
.bbx.is-boom .bbx-fire {
  width: var(--bbx-size); height: var(--bbx-size); border-radius: 50%;
  background: radial-gradient(circle, #fff3a1 0%, #ffc24d 34%, #f0762b 62%, #d1372c 80%, rgba(209, 55, 44, 0) 92%);
  animation: bbxFire .42s ease-out 1 forwards;
}
@keyframes bbxFire {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.22); filter: brightness(1.35); }
  55% { opacity: .95; transform: translate(-50%, -50%) scale(.92); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); filter: brightness(.9); }
}
.bbx.is-boom .bbx-ring {
  width: var(--bbx-size); height: var(--bbx-size); border-radius: 50%;
  border: 3px solid rgba(255, 214, 121, .9); box-shadow: 0 0 14px rgba(255, 170, 60, .5);
  animation: bbxRing .4s ease-out .04s 1 forwards;
}
@keyframes bbxRing { 0% { opacity: .95; transform: translate(-50%, -50%) scale(.25); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); border-width: 1px; } }

/* ── ⑨ 나무 파편 + 작은 불꽃 ── */
.bbx.is-boom .bbx-shard {
  width: calc(var(--bbx-size) * .07); height: calc(var(--bbx-size) * .035);
  border-radius: 2px; background: linear-gradient(180deg, #c98d3c, #8a5a1f);
  animation: bbxShard .55s cubic-bezier(.2, .7, .6, 1) 1 forwards;
}
@keyframes bbxShard {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform:
    translate(calc(-50% + var(--dx) * var(--bbx-size) * .62), calc(-50% + var(--dy) * var(--bbx-size) * .62 + var(--bbx-size) * .14))
    rotate(var(--rot)); }
}
.bbx.is-boom .bbx-spark {
  width: calc(var(--bbx-size) * .045); height: calc(var(--bbx-size) * .045); border-radius: 50%;
  background: radial-gradient(circle, #fff2ae, #ff8f2e 70%);
  animation: bbxSpark .45s ease-out 1 forwards;
}
@keyframes bbxSpark {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * var(--bbx-size) * .58), calc(-50% + var(--dy) * var(--bbx-size) * .58)) scale(.4); }
}

/* ── ⑩ 검은·회색 연기 (폭발 뒤 위로) ── */
.bbx-smoke {
  width: calc(var(--bbx-size) * .3); height: calc(var(--bbx-size) * .3); border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 47, 52, .8), rgba(45, 47, 52, 0) 70%);
  filter: blur(2px); opacity: 0;
}
.bbx-smoke.is-gray { background: radial-gradient(circle, rgba(129, 134, 142, .75), rgba(129, 134, 142, 0) 70%); }
.bbx.is-boom .bbx-smoke { animation: bbxSmoke .8s ease-out var(--sd, 0ms) 1 forwards; }
@keyframes bbxSmoke {
  0% { opacity: 0; transform: translate(calc(-50% + var(--sx, 0) * var(--bbx-size)), -40%) scale(.5); }
  25% { opacity: .85; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sx, 0) * var(--bbx-size) * 1.6), calc(-50% - var(--bbx-size) * .5)) scale(1.25); }
}

/* ── 주변 상자 — 짧은 충격 전달 (빛 반사 + 약한 흔들림) ── */
.bb-box.bbx-jolt { animation: bbxJolt .24s ease-out 1; }
@keyframes bbxJolt {
  0% { transform: translate(0, 0); filter: brightness(1.35); }
  35% { transform: translate(1.5px, -1.5px); }
  70% { transform: translate(-1px, 1px); filter: brightness(1.05); }
  100% { transform: translate(0, 0); filter: none; }
}

/* ── ⑪ 파괴된 상자 — 그을음·갈라진 나무·꺼져가는 불씨·작은 연기 ── */
.bb-box.is-wrecked {
  background:
    linear-gradient(115deg, transparent 42%, rgba(0, 0, 0, .5) 43%, transparent 45%),
    linear-gradient(63deg, transparent 60%, rgba(0, 0, 0, .45) 61%, transparent 63%),
    linear-gradient(180deg, #4a4038 0%, #332b24 55%, #241e19 100%);
  border-color: #1d1813;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05), 0 4px 0 #191512, 0 6px 10px rgba(15, 12, 9, .4);
  animation: none;
}
.bb-box.is-wrecked .bb-box-groove { background: linear-gradient(180deg, #3a322a, #2a241e); }
.bb-box.is-wrecked .bb-box-face {
  background: radial-gradient(circle at 50% 60%, #1a1512, #2c251f 75%);
  border-color: #17120e; font-size: 0;
}
/* 꺼져가는 불씨 — 몇 번 깜빡이다 사그라든다 */
.bb-box.is-wrecked::before {
  content: ""; position: absolute; left: 38%; bottom: 22%; width: 10%; height: 8%;
  border-radius: 50%; background: radial-gradient(circle, #ff9c46, rgba(255, 90, 30, 0) 75%);
  animation: bbxEmber .5s ease-in-out 5 alternate forwards;
}
@keyframes bbxEmber { from { opacity: .95; } to { opacity: .15; } }
/* 작은 연기 한 줄기 */
.bb-box.is-wrecked::after {
  content: ""; position: absolute; left: 52%; top: 12%; width: 16%; height: 22%;
  border-radius: 50%; background: radial-gradient(circle, rgba(90, 95, 102, .55), rgba(90, 95, 102, 0) 70%);
  filter: blur(1.5px);
  animation: bbxWreckSmoke 1.2s ease-out 3 forwards;
}
@keyframes bbxWreckSmoke {
  0% { opacity: 0; transform: translateY(0) scale(.7); }
  30% { opacity: .8; }
  100% { opacity: 0; transform: translateY(-130%) scale(1.2); }
}

/* ── 접근성: 움직임 줄이기 — 흔들림 없음 · 파편 없음 · 섬광·연기만 짧게 ── */
.bbx.is-reduced .bbx-lid, .bbx.is-reduced .bbx-sparkle { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bb-box.bbx-shaking, .bb-box.bbx-jolt, .bbx-quake { animation: none; }
  .bbx.is-boom .bbx-fire { animation-duration: .3s; }
  .bb-box.is-wrecked::before, .bb-box.is-wrecked::after { animation-iteration-count: 1; }
}

/* 사운드 버튼 (상단 카드) */
.bb-snd {
  flex: 0 0 auto; width: 34px; height: 34px; margin-left: 8px;
  border: 1px solid #dbe7fb; border-radius: 9px; background: #eef4ff;
  font-size: 15px; cursor: pointer;
}
.bb-snd:hover { background: #e3edff; }

/* ── 상자별 제한시간 타이머 (2026-08-23) ── */
.bb-timer {
  display: flex; align-items: center; gap: 10px;
  max-width: 320px; margin: 0 auto 12px;
  padding: 7px 14px; border-radius: 999px;
  background: #f2f6ff; border: 1px solid #dbe7fb;
}
.bb-timer[hidden] { display: none; }
.bb-timer-track {
  flex: 1 1 auto; height: 8px; border-radius: 999px;
  background: #e2e9f5; overflow: hidden;
}
.bb-timer-track i {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #4d90f6, #256eeb);
  transition: width .1s linear;
}
.bb-timer b { font-size: 15px; font-weight: 900; color: var(--tx); min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.bb-timer small { font-size: 11.5px; font-weight: 800; color: var(--tx-sub); }
/* 5초 이하 — 빨갛게 + 맥박 */
.bb-timer.is-low { background: #fff1f0; border-color: #f6c6c2; animation: bbTimerPulse .5s ease-in-out infinite alternate; }
.bb-timer.is-low .bb-timer-track i { background: linear-gradient(90deg, #f0762b, #d1372c); }
.bb-timer.is-low b { color: #d1372c; }
@keyframes bbTimerPulse { from { transform: scale(1); } to { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .bb-timer.is-low { animation: none; } }
@media (max-width: 900px) { .bb-timer { max-width: 100%; } }

/* ── 내 게임 정보 카드 (2026-08-23 · 바카라와 같은 형식) ── */
.bb-mystats {
  margin-top: 16px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px;
}
.bb-mystats-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 900; color: var(--tx);
  margin-bottom: 10px;
}
.bb-mystats-i {
  width: 15px; height: 15px; border-radius: 50%;
  background: #e8edf5; color: #8a97ab;
  font-size: 10px; font-weight: 800; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help;
}
.bb-info { margin: 0; }
.bb-info-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; font-size: 13px;
}
.bb-info-row + .bb-info-row { border-top: 1px dashed #eef1f6; }
.bb-info-row dt { color: var(--tx-sub); font-weight: 700; }
.bb-info-row dd { margin: 0; color: var(--tx); font-weight: 800; }
.bb-info-row dd b { font-weight: 900; font-variant-numeric: tabular-nums; }
.bb-pnl-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  background: #f4f7fc; font-size: 13px; font-weight: 800; color: var(--tx-sub);
}
.bb-pnl-row b { font-size: 14px; font-weight: 900; color: var(--tx); font-variant-numeric: tabular-nums; }
.bb-pnl-row.is-plus b { color: #1d9a53; }
.bb-pnl-row.is-minus b { color: #d1372c; }