/* 开盒页专属样式。主题顶栏/留白重置已放到 layout-v2.css + standalone.js，三页共用。 */
.bbb-page-wrap,
.bbb-page-wrap .page-container,
.bbb-page-wrap .container-fluid,
.bbb-page-wrap .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.bbb-page-wrap {
  position: relative;
  min-height: 100vh;
  padding: 0 !important;
  overflow: visible;
}
.bbb-page-wrap .container-fluid {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.bbb-page {
  --bbb-violet: #8b5cf6;
  --bbb-pink: #ec4899;
  --bbb-cyan: #22d3ee;
  --bbb-gold: #fbbf24;
  --bbb-glass: rgba(255,255,255,.06);
  --bbb-glass-border: rgba(255,255,255,.1);
  --bbb-text: #f8fafc;
  --bbb-muted: rgba(248,250,252,.55);
  --bbb-safe-bottom: env(safe-area-inset-bottom, 0px);
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 0 calc(20px + var(--bbb-safe-bottom));
  color: var(--bbb-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
}
.bbb-page .card { background: transparent; border: none; box-shadow: none; overflow: visible; }
.bbb-page .card-body { padding: 0; }

/* 动态背景 — 固定铺满视口 */
.bbb-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% -5%, rgba(139,92,246,.45) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 35%, rgba(236,72,153,.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 0% 65%, rgba(34,211,238,.12) 0%, transparent 50%),
    linear-gradient(180deg, #0c0618 0%, #07050f 48%, #0a0812 100%);
  pointer-events: none;
}
.bbb-mesh::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .07;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.bbb-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  animation: bbb-orbDrift 12s ease-in-out infinite;
  pointer-events: none;
}
.bbb-orb-1 { width: 200px; height: 200px; background: #7c3aed; top: 8%; left: -20%; }
.bbb-orb-2 { width: 160px; height: 160px; background: #db2777; top: 35%; right: -15%; animation-delay: -4s; }
.bbb-orb-3 { width: 120px; height: 120px; background: #0891b2; bottom: 20%; left: 10%; animation-delay: -8s; opacity: .35; }
@keyframes bbb-orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12px, -18px) scale(1.08); }
}

.bbb-shell {
  position: relative;
  z-index: 1;
}
@keyframes bbbPageIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 顶栏 */
.bbb-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.bbb-topbar-spacer {
  justify-self: end;
  width: 40px;
  height: 40px;
  visibility: hidden;
  pointer-events: none;
}
.bbb-mall-link-btn {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: #e9d5ff;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bbb-mall-link-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.bbb-mall-link-btn:hover {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(167, 139, 250, 0.45);
  color: #f5f3ff;
  text-decoration: none;
}
.bbb-brand {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.bbb-brand-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.bbb-brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #07050f;
  filter: drop-shadow(0 0 12px rgba(139,92,246,.6));
}
.bbb-brand-text {
  min-width: 0;
  text-align: left;
}
.bbb-brand-text h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.25;
  white-space: nowrap;
  background: linear-gradient(90deg, #fff 0%, #e9d5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bbb-brand-text p {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--bbb-muted);
  letter-spacing: .12em;
  white-space: nowrap;
}

/* 主内容区 */
.bbb-main-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bbb-col-play { min-width: 0; }
.bbb-col-info { min-width: 0; }

/* 信息条 bento */
.bbb-bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.bbb-bento-item {
  position: relative;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  animation: bbbCardIn .5s cubic-bezier(.22, 1, .36, 1) both;
}
.bbb-bento-item:nth-child(1) { animation-delay: .06s; }
.bbb-bento-item:nth-child(2) { animation-delay: .1s; }
.bbb-bento-item:nth-child(3) { animation-delay: .14s; }
.bbb-bento-item:nth-child(4) { animation-delay: .18s; }
.bbb-bento-item:nth-child(5) { animation-delay: .22s; }
@keyframes bbbCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.bbb-stat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.bbb-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.bbb-stat-icon svg {
  width: 15px;
  height: 15px;
  opacity: .85;
}
.bbb-bento-item[data-accent="gold"] .bbb-stat-icon { color: #fbbf24; border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.08); }
.bbb-bento-item[data-accent="cyan"] .bbb-stat-icon { color: #22d3ee; border-color: rgba(34,211,238,.25); background: rgba(34,211,238,.08); }
.bbb-bento-item[data-accent="violet"] .bbb-stat-icon { color: #a78bfa; border-color: rgba(139,92,246,.25); background: rgba(139,92,246,.1); }
.bbb-bento-item[data-accent="pink"] .bbb-stat-icon { color: #f9a8d4; border-color: rgba(236,72,153,.25); background: rgba(236,72,153,.08); }
.bbb-bento-item .lbl { font-size: 11px; color: var(--bbb-muted); margin-bottom: 0; letter-spacing: .04em; }
.bbb-bento-item .val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.bbb-bento-item .val.is-placeholder {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  opacity: .55;
}
.bbb-bento-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(139,92,246,.45), rgba(236,72,153,.25), rgba(34,211,238,.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}
.bbb-bento-item:hover {
  transform: translateY(-2px);
  border-color: rgba(139,92,246,.28);
  box-shadow: 0 12px 32px rgba(139,92,246,.15);
}
.bbb-bento-item:hover::before { opacity: 1; }
.bbb-bento-item.wide { grid-column: 1 / -1; }
.bbb-quota-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}
@media (min-width: 992px) {
  html:not(.bbb-is-phone) .bbb-quota-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 20px 24px;
  }
  html:not(.bbb-is-phone) .bbb-quota-body { grid-column: 1; }
  html:not(.bbb-is-phone) .bbb-quota-ring { grid-column: 2; }
  html:not(.bbb-is-phone) .bbb-quota-tip {
    grid-column: 3;
    max-width: 220px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(139,92,246,.1);
    border: 1px solid rgba(139,92,246,.2);
    font-size: 12px;
    line-height: 1.5;
    color: var(--bbb-muted);
    text-align: left;
  }
  .bbb-quota-tip strong {
    display: block;
    color: #c4b5fd;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: 4px;
  }
}
@media (max-width: 991px) {
  .bbb-quota-tip { display: none; }
}
.bbb-quota-body {
  flex: 1;
  min-width: 0;
}
.bbb-quota-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 6px 0 10px;
  font-size: 13px;
  color: var(--bbb-muted);
}
.bbb-quota-stats strong {
  color: var(--bbb-text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bbb-quota-remain strong { color: #c4b5fd; }
.bbb-quota-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.bbb-quota-fill-bar {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%);
  box-shadow: 0 0 12px rgba(139,92,246,.45);
  transition: width .5s ease;
}
.bbb-bento-item .val small { font-size: 12px; font-weight: 500; opacity: .7; }
.bbb-bento-item .val.highlight { color: var(--bbb-cyan); }
.bbb-bento-item .val.gold { color: var(--bbb-gold); }
.bbb-quota-ring {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.bbb-quota-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bbb-quota-ring .track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 4; }
.bbb-quota-ring .fill {
  fill: none;
  stroke: url(#bbbQuotaGrad);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset .6s ease;
}
.bbb-quota-ring .num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

/* 盲盒舱 — uiverse aurora border */
.bbb-vault {
  position: relative;
  margin: 0 0 16px;
  padding: 28px 20px 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  isolation: isolate;
}
.bbb-vault::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 25px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(139,92,246,.55), rgba(236,72,153,.35), rgba(34,211,238,.25), rgba(139,92,246,.55));
  background-size: 300% 300%;
  animation: bbbAuroraBorder 8s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  opacity: .75;
}
@keyframes bbbAuroraBorder {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.bbb-vault.has-result .bbb-vault-tag { opacity: .7; }
.bbb-vault.has-result .bbb-vault-visual .bbb-orbit { opacity: .55; transition: opacity .4s; }
.bbb-vault.has-result .bbb-box-wrap {
  transform: scale(1.04);
  opacity: 1;
  transition: transform .5s ease;
}
.bbb-vault.has-result .bbb-box { animation: none; }
.bbb-vault.has-result.is-win .bbb-box-glow {
  opacity: 1;
  background: radial-gradient(circle, rgba(251,191,36,.4) 0%, rgba(139,92,246,.45) 45%, transparent 70%);
  animation: bbb-winGlow 1.8s ease-in-out infinite;
}
.bbb-vault.has-result.is-big-win .bbb-box-glow {
  background: radial-gradient(circle, rgba(251,191,36,.55) 0%, rgba(236,72,153,.35) 40%, rgba(139,92,246,.4) 65%, transparent 75%);
  animation: bbb-bigWinGlow 1.2s ease-in-out infinite;
}
.bbb-vault.has-result.is-big-win .bbb-vault-tag {
  color: rgba(255,237,180,.95);
  animation: bbb-tagPulse 1s ease-in-out 3;
}
.bbb-vault.has-result.is-win .bbb-box-wrap {
  transform: scale(1.06);
}
.bbb-vault.has-result.is-big-win .bbb-box-wrap {
  transform: scale(1.1);
}
.bbb-vault.has-result.is-lose .bbb-box-glow {
  opacity: .35;
  background: radial-gradient(circle, rgba(100,116,139,.25) 0%, transparent 70%);
  animation: none;
}
@keyframes bbb-winGlow {
  0%, 100% { opacity: .75; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes bbb-bigWinGlow {
  0%, 100% { opacity: .85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes bbb-tagPulse {
  0%, 100% { letter-spacing: .35em; opacity: .75; }
  50% { letter-spacing: .42em; opacity: 1; }
}
.bbb-vault-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 300px;
  margin: 0 auto;
  flex-shrink: 0;
}
.bbb-vault-meta {
  width: 100%;
  margin-top: 8px;
  padding: 16px 12px 12px;
  text-align: center;
  flex-shrink: 0;
  min-height: 88px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bbb-vault-visual .bbb-orbit { top: 50%; }
.bbb-vault::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251,191,36,.6), transparent);
}
.bbb-vault-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  color: rgba(251,191,36,.8);
  margin: 0 0 16px;
}
.bbb-tag-line {
  flex: 1;
  max-width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251,191,36,.55));
}
.bbb-tag-line:last-child {
  background: linear-gradient(-90deg, transparent, rgba(251,191,36,.55));
}
.bbb-tag-text {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 轨道环 */
.bbb-orbit {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(139,92,246,.25);
  pointer-events: none;
}
.bbb-orbit-1 { width: 196px; height: 196px; animation: bbb-orbitSpin 16s linear infinite; }
.bbb-orbit-2 { width: 232px; height: 232px; border-color: rgba(236,72,153,.15); animation: bbb-orbitSpin 22s linear infinite reverse; }
.bbb-orbit-1::after, .bbb-orbit-2::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bbb-violet);
  box-shadow: 0 0 10px var(--bbb-violet);
  top: -3px;
  left: 50%;
  margin-left: -3px;
}
.bbb-orbit-2::after { background: var(--bbb-pink); box-shadow: 0 0 10px var(--bbb-pink); }
@keyframes bbb-orbitSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.bbb-box-wrap {
  position: relative;
  z-index: 2;
  width: min(220px, 54vw);
  height: min(220px, 54vw);
  margin: 0 auto;
  perspective: 920px;
  transition: transform .5s ease, opacity .5s ease;
  transform: translateZ(0);
}
.bbb-box-wrap.is-popping {
  animation: bbbWrapPunch .58s cubic-bezier(.22, 1.18, .36, 1);
}
.bbb-page-wrap.is-drawing .bbb-orb {
  animation-play-state: paused;
}
.bbb-page-wrap.is-drawing .bbb-orbit {
  animation-play-state: running;
}
.bbb-page-wrap.is-drawing .bbb-orbit-1 { animation-duration: 5s; }
.bbb-page-wrap.is-drawing .bbb-orbit-2 { animation-duration: 7s; }
.bbb-vault.is-drawing .bbb-box-glow {
  animation: bbb-chargeGlow .55s ease-in-out infinite alternate;
}
.bbb-vault.is-charge-mid .bbb-orbit-1 { animation-duration: 2.4s !important; }
.bbb-vault.is-charge-mid .bbb-orbit-2 { animation-duration: 3.2s !important; }
.bbb-vault.is-charge-max .bbb-orbit-1 { animation-duration: .85s !important; }
.bbb-vault.is-charge-max .bbb-orbit-2 { animation-duration: 1.15s !important; }
.bbb-vault.is-charge-max .bbb-box-glow {
  animation-duration: .28s;
}
.bbb-vault.is-opening::after {
  animation-duration: .7s;
  opacity: 1;
}
.bbb-vault.is-opening .bbb-draw-aura.is-active {
  animation-duration: .42s;
  opacity: 1;
  filter: blur(0) brightness(1.35);
}
@keyframes bbb-chargeGlow {
  0% { opacity: .55; transform: scale(.94); filter: hue-rotate(0deg); }
  100% { opacity: 1; transform: scale(1.12); filter: hue-rotate(18deg); }
}
.bbb-draw-aura {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(167,139,250,.9) 12%, transparent 22%, rgba(251,191,36,.75) 48%, transparent 58%, rgba(236,72,153,.7) 78%, transparent 90%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  opacity: 0;
  transform: scale(.92);
  pointer-events: none;
  z-index: 0;
  filter: blur(.4px);
  transition: opacity .35s ease;
}
.bbb-draw-aura.is-active {
  opacity: 1;
  animation: bbbAuraSpin 1.8s linear infinite;
}
.bbb-vault.is-charge-mid .bbb-draw-aura.is-active { animation-duration: 1.1s; }
.bbb-vault.is-charge-max .bbb-draw-aura.is-active { animation-duration: .7s; }
@keyframes bbbAuraSpin {
  to { transform: scale(1) rotate(360deg); }
}
.bbb-shockwave-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bbb-shockwave {
  position: absolute;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  border: 2px solid rgba(251,191,36,.65);
  box-shadow: 0 0 24px rgba(251,191,36,.35);
  animation: bbbShockwave .78s cubic-bezier(.12, .72, .28, 1) var(--sw-delay, 0s) forwards;
}
.bbb-shockwave.is-big {
  border-width: 3px;
  border-color: rgba(251,191,36,.85);
  box-shadow: 0 0 40px rgba(251,191,36,.5), 0 0 80px rgba(236,72,153,.25);
}
.bbb-shockwave.is-soft {
  border-color: rgba(148,163,184,.45);
  box-shadow: none;
}
@keyframes bbbShockwave {
  0% { transform: scale(.18); opacity: .95; }
  100% { transform: scale(3.15); opacity: 0; }
}
.bbb-float-star {
  position: absolute;
  left: 50%;
  top: 42%;
  color: #fde68a;
  font-size: 14px;
  pointer-events: none;
  z-index: 12;
  text-shadow: 0 0 10px rgba(251,191,36,.8);
  animation: bbbFloatStar 1.05s cubic-bezier(.16, .8, .32, 1) forwards;
}
.bbb-float-star.is-big {
  font-size: 16px;
  text-shadow: 0 0 14px rgba(251,191,36,.95), 0 0 22px rgba(236,72,153,.4);
}
@keyframes bbbFloatStar {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(1.15) rotate(200deg); }
}
.bbb-win-flash {
  position: fixed;
  inset: 0;
  z-index: 10040;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 40%, rgba(251,191,36,.28), transparent 55%);
  transition: opacity .18s ease;
}
.bbb-win-flash.is-active { opacity: 1; }
.bbb-win-flash.is-win { background: radial-gradient(circle at 50% 38%, rgba(251,191,36,.22), transparent 60%); }
.bbb-win-flash.is-big {
  background: radial-gradient(circle at 50% 35%, rgba(251,191,36,.42), rgba(236,72,153,.12) 45%, transparent 65%);
}
.bbb-win-flash.is-soft {
  background: radial-gradient(circle at 50% 40%, rgba(100,116,139,.12), transparent 55%);
}
.bbb-page-wrap.is-celebrate {
  animation: bbbCelebrateShake .55s ease;
}
@keyframes bbbCelebrateShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-3px); }
  30% { transform: translateX(4px); }
  45% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
}
.bbb-box-wrap.is-drawing .bbb-box-glow {
  animation: bbb-chargeGlow .55s ease-in-out infinite alternate;
}
.bbb-box-glow {
  position: absolute;
  inset: -6%;
  background: radial-gradient(circle, rgba(139,92,246,.38) 0%, transparent 68%);
  animation: bbb-glowPulse 3s ease-in-out infinite;
  opacity: .55;
}
.bbb-vault.is-drawing .bbb-box-glow,
.bbb-box-wrap.is-drawing .bbb-box-glow {
  inset: -10%;
}
@keyframes bbb-glowPulse {
  0%, 100% { opacity: .45; transform: scale(.94); }
  50% { opacity: .72; transform: scale(1.04); }
}
.bbb-box {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: bbb-float 3.5s ease-in-out infinite;
}
.bbb-box-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translateZ(0);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@keyframes bbb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.bbb-box-pedestal {
  position: absolute;
  bottom: 2%;
  left: 50%;
  width: 72%;
  height: 11%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(124,58,237,.32) 0%, transparent 78%);
  filter: blur(4px);
  z-index: 0;
  pointer-events: none;
}
.bbb-vault.is-drawing .bbb-box-pedestal {
  animation: bbbPedestalPulse .85s ease-in-out infinite;
}
.bbb-vault.is-charge-max .bbb-box-pedestal {
  animation-duration: .38s;
  background: radial-gradient(ellipse, rgba(251,191,36,.52) 0%, rgba(139,92,246,.2) 48%, transparent 78%);
}
.bbb-vault.is-opening .bbb-box-pedestal {
  animation: none;
  background: radial-gradient(ellipse, rgba(251,191,36,.62) 0%, transparent 78%);
  transform: translateX(-50%) scale(1.22);
}
@keyframes bbbPedestalPulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .7; }
  50% { transform: translateX(-50%) scale(1.2); opacity: 1; }
}
.bbb-box-inner-light {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 46%;
  height: 46%;
  transform: translateX(-50%) scale(.55);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,.32) 0%, rgba(236,72,153,.08) 48%, transparent 72%);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity .4s ease, transform .5s ease;
}
.bbb-vault.is-opening .bbb-box-inner-light,
.bbb-box.opening .bbb-box-inner-light {
  opacity: 1;
  transform: translateX(-50%) scale(1.45);
  animation: bbbInnerFlash .58s ease-out forwards;
}
@keyframes bbbInnerFlash {
  0% { opacity: .15; transform: translateX(-50%) scale(.38); }
  32% { opacity: 1; transform: translateX(-50%) scale(1.62); }
  100% { opacity: .42; transform: translateX(-50%) scale(1.08); }
}
.bbb-vault.is-opening.is-lose .bbb-box-inner-light {
  background: radial-gradient(circle, rgba(148,163,184,.28) 0%, transparent 72%);
  animation-name: bbbInnerFlashSoft;
}
.bbb-vault.is-opening.is-big-win .bbb-box-inner-light {
  background: radial-gradient(circle, rgba(251,191,36,.55) 0%, rgba(236,72,153,.18) 48%, transparent 72%);
}
.bbb-vault.is-opening.is-lose .bbb-box-beam {
  opacity: .45;
  filter: grayscale(.35) blur(2px);
}
@keyframes bbbInnerFlashSoft {
  0% { opacity: .08; transform: translateX(-50%) scale(.4); }
  40% { opacity: .35; transform: translateX(-50%) scale(1.1); }
  100% { opacity: .12; transform: translateX(-50%) scale(.9); }
}
.bbb-box.opened .bbb-box-inner-light,
.bbb-vault.has-result.is-win .bbb-box-inner-light {
  opacity: .34;
  transform: translateX(-50%) scale(1);
  animation: bbbInnerLightPulse 2.2s ease-in-out infinite;
}
.bbb-vault.has-result.is-big-win .bbb-box-inner-light {
  opacity: .45;
  animation-duration: 1.2s;
}
.bbb-vault.has-result.is-lose .bbb-box-inner-light {
  opacity: .1;
  transform: translateX(-50%) scale(.78);
  background: radial-gradient(circle, rgba(148,163,184,.15) 0%, transparent 70%);
  animation: none;
  mix-blend-mode: normal;
}
@keyframes bbbInnerLightPulse {
  0%, 100% { opacity: .3; transform: translateX(-50%) scale(.98); }
  50% { opacity: .42; transform: translateX(-50%) scale(1.04); }
}
.bbb-img-picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
  image-rendering: auto;
  -webkit-user-drag: none;
  user-select: none;
  filter: drop-shadow(0 10px 24px rgba(76, 29, 149, .32)) drop-shadow(0 0 18px rgba(139, 92, 246, .12));
  transition: opacity .48s cubic-bezier(.22, 1, .36, 1), transform .48s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
  transform-origin: 50% 88%;
  will-change: auto;
}
.bbb-box.shaking .bbb-img-picture,
.bbb-box.opening .bbb-img-picture,
.bbb-box.is-compress .bbb-img-picture,
.bbb-box.is-lifting .bbb-img-picture {
  will-change: transform, opacity, filter;
}
.bbb-img-picture-closed {
  opacity: 1;
  z-index: 2;
  transform: scale(1) translateY(0);
}
.bbb-img-picture-open {
  opacity: 0;
  z-index: 1;
  transform: scale(1) translateY(0);
  filter: drop-shadow(0 12px 28px rgba(251, 191, 36, .28)) drop-shadow(0 0 22px rgba(251, 191, 36, .14));
}
.bbb-box.shaking .bbb-img-picture-closed {
  filter: drop-shadow(0 12px 26px rgba(124, 58, 237, .36)) brightness(1.08) saturate(1.08);
}
.bbb-box.shaking.is-charge-mid .bbb-img-picture-closed {
  filter: drop-shadow(0 14px 30px rgba(139, 92, 246, .45)) brightness(1.12) saturate(1.14);
}
.bbb-box.shaking.is-charge-max .bbb-img-picture-closed {
  filter: drop-shadow(0 16px 34px rgba(251, 191, 36, .32)) brightness(1.18) saturate(1.2);
}
.bbb-box.opening .bbb-box-img-wrap {
  perspective: 780px;
}
.bbb-box.opening .bbb-img-picture-closed {
  z-index: 4;
  transform-origin: 50% 16%;
  animation: bbbLidFlip .58s cubic-bezier(.2, .85, .28, 1) forwards;
}
.bbb-box.opening .bbb-img-picture-open {
  opacity: 0;
  z-index: 3;
  transform-origin: 50% 88%;
  animation: bbbPrizeRise .58s .12s cubic-bezier(.22, 1.28, .36, 1) forwards;
}
.bbb-box.opening .bbb-img-picture,
.bbb-box.opened .bbb-img-picture {
  transition: none;
}
.bbb-box.opened .bbb-img-picture-open {
  opacity: 1;
  z-index: 3;
  animation: bbbOpenRevealPic .5s cubic-bezier(.34, 1.18, .64, 1) forwards;
  filter: drop-shadow(0 12px 28px rgba(251, 191, 36, .3));
}
@keyframes bbbLidFlip {
  0% { opacity: 1; transform: rotateX(0) scale(1) translateY(0); filter: brightness(1.18); }
  18% { opacity: 1; transform: rotateX(-24deg) scale(1.05) translateY(3px); filter: brightness(1.38); }
  48% { opacity: .72; transform: rotateX(-82deg) scale(1.04) translateY(-12px); filter: brightness(1.7); }
  100% { opacity: 0; transform: rotateX(-122deg) scale(.88) translateY(-28px); filter: brightness(1.9); }
}
@keyframes bbbPrizeRise {
  0% { opacity: 0; transform: scale(.4) translateY(38px); filter: brightness(2.7) saturate(1.5); }
  42% { opacity: 1; transform: scale(1.16) translateY(-14px); filter: brightness(1.35); }
  72% { transform: scale(.97) translateY(3px); filter: brightness(1.12); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1.05); }
}
@keyframes bbbOpenRevealPic {
  0% { opacity: 1; transform: scale(1.08) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.bbb-box.opened .bbb-img-picture-closed {
  opacity: 0;
  pointer-events: none;
  transform: rotateX(-122deg) translateY(-28px) scale(.88);
}
.bbb-vault.has-result.is-lose .bbb-box.opened .bbb-img-picture-open {
  filter: drop-shadow(0 8px 18px rgba(100, 116, 139, .22)) saturate(.9) brightness(.94);
}
.bbb-vault.has-result.is-lose .bbb-box.opened .bbb-img-picture-open {
  animation: none;
  transform: scale(1) translateY(0);
}
.bbb-vault.has-result.is-big-win .bbb-box.opened .bbb-img-picture-open {
  animation: bbbOpenRevealPicBig 1s cubic-bezier(.34, 1.28, .64, 1) forwards, bbbOpenPicPulse 2.2s ease-in-out .85s infinite;
}
.bbb-vault.has-result.is-big-win .bbb-box.opened .bbb-img-picture-open {
  filter: drop-shadow(0 16px 36px rgba(251, 191, 36, .4)) brightness(1.05);
}
@keyframes bbbOpenRevealPicBig {
  0% { opacity: 1; transform: scale(1.14) translateY(-10px); }
  100% { opacity: 1; transform: scale(1.02) translateY(0); }
}
@keyframes bbbOpenPicPulse {
  0%, 100% { transform: scale(1.02) translateY(0); }
  50% { transform: scale(1.05) translateY(-2px); }
}
.bbb-vault.has-result.is-win .bbb-box.opened .bbb-img-picture-open {
  filter: drop-shadow(0 12px 30px rgba(251, 191, 36, .32));
}
.bbb-box.shaking {
  animation: bbb-shake-mild .4s ease-in-out infinite;
}
.bbb-box.shaking.is-charge-mid {
  animation-name: bbb-shake-mid;
  animation-duration: .3s;
}
.bbb-box.shaking.is-charge-max {
  animation-name: bbb-shake-intense;
  animation-duration: .18s;
}
.bbb-box.is-compress {
  animation: bbb-compress .24s cubic-bezier(.4, 0, .2, 1) forwards !important;
}
.bbb-box.is-lifting {
  animation: bbb-lift .26s cubic-bezier(.22, 1.2, .36, 1) forwards !important;
}
@keyframes bbb-shake-mild {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0) scale(1.02, 1.02); }
  20% { transform: translate3d(-5px, 4px, 0) rotateZ(-7deg) scale(1.05, .98); }
  40% { transform: translate3d(6px, -4px, 0) rotateZ(7deg) scale(.98, 1.06); }
  60% { transform: translate3d(-4px, 2px, 0) rotateZ(-5deg) scale(1.04, 1); }
  80% { transform: translate3d(4px, -3px, 0) rotateZ(5deg) scale(1.02, 1.03); }
}
@keyframes bbb-shake-mid {
  0%, 100% { transform: translate3d(0, -4px, 0) rotateZ(0) scale(1.06, 1.04); }
  16% { transform: translate3d(-8px, 3px, 0) rotateZ(-10deg) scale(1.1, .98); }
  32% { transform: translate3d(9px, -7px, 0) rotateZ(10deg) scale(.98, 1.12); }
  48% { transform: translate3d(-6px, 1px, 0) rotateZ(-7deg) rotateX(6deg) scale(1.08, 1.02); }
  64% { transform: translate3d(7px, -5px, 0) rotateZ(7deg) rotateX(-6deg) scale(1.04, 1.1); }
  80% { transform: translate3d(-3px, -2px, 0) rotateZ(-3deg) scale(1.06, 1.04); }
}
@keyframes bbb-shake-intense {
  0%, 100% { transform: translate3d(0, -8px, 0) rotateZ(0) scale(1.12, 1.08); }
  12% { transform: translate3d(-11px, 0, 0) rotateZ(-14deg) scale(1.16, 1.02); }
  24% { transform: translate3d(12px, -12px, 0) rotateZ(14deg) scale(1.04, 1.18); }
  36% { transform: translate3d(-9px, -1px, 0) rotateZ(-10deg) rotateX(8deg) scale(1.14, 1.06); }
  50% { transform: translate3d(10px, -10px, 0) rotateZ(11deg) rotateX(-8deg) scale(1.08, 1.16); }
  64% { transform: translate3d(-7px, -4px, 0) rotateZ(-7deg) scale(1.12, 1.08); }
  78% { transform: translate3d(6px, -11px, 0) rotateZ(6deg) scale(1.1, 1.14); }
}
@keyframes bbb-compress {
  0% { transform: translate3d(0, -8px, 0) scale(1.1, 1.08) rotateZ(0); }
  58% { transform: translate3d(0, 16px, 0) scale(0.76, 0.62) rotateZ(-4deg); }
  100% { transform: translate3d(0, 12px, 0) scale(0.82, 0.68) rotateZ(-6deg); }
}
@keyframes bbb-lift {
  0% { transform: translateY(12px) scale(0.82, 0.68); }
  58% { transform: translateY(-30px) scale(1.14, 1.18); }
  100% { transform: translateY(-16px) scale(1.08); }
}
.bbb-box.opened {
  animation: bbb-pop .72s cubic-bezier(.34, 1.35, .64, 1);
}
.bbb-box.shaking.opened {
  animation: bbb-pop .72s cubic-bezier(.34, 1.35, .64, 1);
}
@keyframes bbb-pop {
  0% { transform: scale(1.08) translateY(-16px); }
  42% { transform: scale(1.18) translateY(-4px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes bbbWrapPunch {
  0% { transform: scale(.96); }
  38% { transform: scale(1.1); }
  100% { transform: scale(1.04); }
}
.bbb-burst { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.bbb-burst-particle {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  animation: bbb-burstFly var(--dur, .9s) cubic-bezier(.12, .72, .28, 1) forwards;
}
.bbb-burst-particle.is-star {
  border-radius: 0;
  background: transparent !important;
  color: #fde68a;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 8px rgba(251,191,36,.75);
}
.bbb-burst-particle.is-confetti {
  border-radius: 1px;
  width: 4px;
  height: 11px;
  box-shadow: 0 0 8px currentColor;
}
@keyframes bbb-burstFly {
  0% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) + var(--gy, 52px))) scale(.12) rotate(var(--rot, 0deg)); }
}

.bbb-box-energy {
  position: absolute;
  inset: -6%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease;
}
.bbb-vault.is-drawing .bbb-box-energy { opacity: 1; }
.bbb-energy-ring {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1.5px solid rgba(196, 181, 253, .55);
  box-shadow: 0 0 12px rgba(139, 92, 246, .25);
  animation: bbbEnergyPulse 1.05s ease-out infinite;
}
.bbb-energy-ring.r2 {
  inset: 0;
  border-color: rgba(251, 191, 36, .4);
  animation-delay: .18s;
}
.bbb-energy-ring.r3 {
  inset: -10%;
  border-color: rgba(236, 72, 153, .32);
  animation-delay: .36s;
}
.bbb-vault.is-charge-max .bbb-energy-ring { animation-duration: .52s; }
@keyframes bbbEnergyPulse {
  0% { transform: scale(.58); opacity: .9; }
  100% { transform: scale(1.34); opacity: 0; }
}

.bbb-box-beam {
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: 22%;
  height: 0;
  transform: translateX(-50%);
  border-radius: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(251,191,36,.7) 38%, rgba(167,139,250,.15) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 7;
  filter: blur(1.5px);
  mix-blend-mode: screen;
}
.bbb-vault.is-opening .bbb-box-beam,
.bbb-box.opening ~ .bbb-box-beam {
  animation: bbbBeamBurst .58s ease-out forwards;
}
@keyframes bbbBeamBurst {
  0% { opacity: 0; height: 0; filter: blur(6px); }
  24% { opacity: 1; height: 96%; filter: blur(1px); }
  100% { opacity: 0; height: 118%; filter: blur(8px); }
}

.bbb-charge-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 11;
}
.bbb-charge-spark {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fde68a;
  box-shadow: 0 0 10px #fbbf24;
  animation: bbbSparkIn .62s ease-in forwards;
}
.bbb-charge-spark.is-crackle {
  animation-name: bbbSparkOut;
  animation-timing-function: ease-out;
  animation-duration: .48s;
}
.bbb-charge-spark.is-star {
  width: auto;
  height: auto;
  background: transparent;
  color: #fde68a;
  font-size: 9px;
  line-height: 1;
  box-shadow: none;
  text-shadow: 0 0 8px rgba(251,191,36,.8);
}
.bbb-charge-spark.is-star::before { content: '✦'; }
@keyframes bbbSparkIn {
  0% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(.35); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
}
@keyframes bbbSparkOut {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0); }
}

.bbb-stage-hint {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: var(--bbb-muted);
  min-height: 56px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
}
.bbb-hint-main,
.bbb-hint-sub {
  display: block;
  max-width: 100%;
}
.bbb-hint-sub.bbb-hint-placeholder {
  visibility: hidden;
  min-height: 1.35em;
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
}
.bbb-stage-hint.is-drawing .bbb-hint-main {
  font-size: 13px;
  color: rgba(196,181,253,.92);
  font-weight: 600;
}
.bbb-hint-main.bbb-hint-swap {
  animation: bbbHintSwap .32s ease;
}
.bbb-stage-hint.is-reveal .bbb-hint-main {
  font-size: 14px;
  font-weight: 700;
  color: #e9d5ff;
  letter-spacing: .08em;
}
@keyframes bbbHintSwap {
  0% { opacity: .3; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.bbb-hint-pop {
  animation: bbbHintPop .45s cubic-bezier(.34,1.4,.64,1) both;
}
.bbb-hint-rise {
  animation: bbbHintRise .5s cubic-bezier(.22,1,.36,1) .12s both;
}
@keyframes bbbHintPop {
  0% { opacity: 0; transform: scale(.82); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes bbbHintRise {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.bbb-stage-hint.is-result.is-lose .bbb-hint-sub {
  animation: bbbHintRise .55s ease .15s both;
}
.bbb-bento-item .val.gold.is-counting {
  text-shadow: 0 0 20px rgba(251,191,36,.45);
}
#bbb-platform-opens.is-bump {
  animation: bbbPlatformBump .65s cubic-bezier(.34,1.4,.64,1);
}
@keyframes bbbPlatformBump {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.12); color: #67e8f9; }
}
.bbb-prize-item.is-reveal-pulse {
  animation: bbbPrizeReveal .6s ease 2;
}
@keyframes bbbPrizeReveal {
  0%, 100% { box-shadow: 0 0 0 rgba(251,191,36,0); }
  50% { box-shadow: 0 0 28px rgba(251,191,36,.45), 0 0 0 2px rgba(251,191,36,.35); }
}
.bbb-stage-hint.is-result {
  animation: bbbHintFade .4s ease forwards;
}
.bbb-stage-hint.is-result.is-win .bbb-hint-main {
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(90deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bbb-stage-hint.is-result.is-win.is-big .bbb-hint-main {
  font-size: 18px;
  animation: bbbWinTextPop .5s cubic-bezier(.34,1.4,.64,1);
}
.bbb-stage-hint.is-result.is-win .bbb-hint-sub {
  font-size: 14px;
  font-weight: 700;
  color: #4ade80;
  font-variant-numeric: tabular-nums;
}
.bbb-stage-hint.is-result.is-lose .bbb-hint-main {
  font-size: 14px;
  font-weight: 600;
  color: rgba(248,250,252,.75);
}
.bbb-stage-hint.is-result.is-lose .bbb-hint-sub {
  font-size: 12px;
  color: var(--bbb-muted);
  font-style: normal;
}
@keyframes bbbWinTextPop {
  0% { transform: scale(.88); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes bbbHintFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.bbb-batch-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; justify-content: center; }
.bbb-batch-tag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--bbb-muted);
  border: 1px solid var(--bbb-glass-border);
}
.bbb-batch-tag.win { background: rgba(34,197,94,.15); color: #4ade80; border-color: rgba(74,222,128,.3); }

/* 操作区 */
.bbb-dock {
  padding: 16px;
  border-radius: 24px;
  background: var(--bbb-glass);
  border: 1px solid var(--bbb-glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-bottom: 24px;
}
.bbb-batch-wrap { margin-bottom: 14px; }
.bbb-batch-label {
  font-size: 11px;
  color: var(--bbb-muted);
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: .1em;
}
.bbb-batch-list {
  display: flex;
  padding: 4px;
  gap: 4px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
}
.bbb-batch-btn {
  flex: 1;
  min-height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--bbb-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .2s ease, transform .14s cubic-bezier(.34, 1.2, .64, 1), background .2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.bbb-batch-btn.active {
  background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(236,72,153,.85));
  color: #fff;
  box-shadow: 0 4px 16px rgba(139,92,246,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
.bbb-batch-btn:not(:disabled):hover {
  color: #e9d5ff;
  background: rgba(139,92,246,.12);
}
.bbb-batch-btn:not(:disabled):active {
  transform: scale(0.94);
}
.bbb-batch-btn.is-pressing:not(:disabled) {
  transform: scale(0.94);
}
.bbb-batch-btn:disabled { opacity: .3; cursor: not-allowed; }

.bbb-draw-btn-wrap {
  position: relative;
  padding: 0;
  border-radius: 12px;
  background: none;
  box-shadow: none;
  transition: transform .14s cubic-bezier(.34, 1.2, .64, 1);
}
.bbb-draw-btn-wrap.is-pressing:not(:has(.bbb-draw-btn:disabled)) {
  transform: scale(0.985);
}
.bbb-draw-btn-wrap.is-loading {
  animation: none;
  box-shadow: none;
}
@keyframes bbbBtnBorderFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.bbb-draw-btn {
  display: block;
  width: 100%;
  min-height: 54px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(180deg, #8f82ff 0%, #6d5ef7 46%, #5b4de8 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .14s cubic-bezier(.34, 1.2, .64, 1), box-shadow .2s ease, filter .2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.bbb-draw-btn-inner {
  position: relative;
  z-index: 2;
  display: block;
  color: #fff;
}
.bbb-draw-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  animation: bbb-btnShine 2.8s ease-in-out infinite;
  z-index: 1;
}
.bbb-draw-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(139,92,246,.25), transparent 55%);
  opacity: .8;
  z-index: 0;
}
@keyframes bbb-btnShine {
  0% { transform: translateX(-120%); }
  45%, 100% { transform: translateX(120%); }
}
.bbb-draw-btn:active:not(:disabled),
.bbb-draw-btn.is-pressing:not(:disabled) {
  transform: scale(0.96);
  filter: brightness(1.08);
}
.bbb-draw-btn.is-loading {
  cursor: wait;
}
.bbb-draw-btn.is-loading::before {
  animation: bbb-btnShine 1.4s ease-in-out infinite;
}
.bbb-draw-btn.is-loading .bbb-draw-btn-inner {
  animation: bbbBtnTextPulse 1s ease-in-out infinite;
}
@keyframes bbbBtnTextPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .62; }
}
.bbb-draw-btn:disabled,
.bbb-draw-btn.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
.bbb-draw-btn.is-disabled:not(.is-loading) {
  pointer-events: auto;
}
.bbb-draw-btn:disabled::before { animation: none; }
.bbb-draw-btn-wrap:has(.bbb-draw-btn:disabled):not(.is-loading) {
  animation: none;
  opacity: .7;
}

/* 奖品滑轨 */
.bbb-section { margin-bottom: 24px; }
.bbb-section.bbb-prizes { overflow: visible; }
.bbb-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0 2px;
}
.bbb-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
.bbb-records-head .bbb-section-title { color: #f8fafc !important; }
.bbb-section-tip { font-size: 11px; color: var(--bbb-muted) !important; }
.bbb-tip-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.22);
  font-size: 10px !important;
  line-height: 1.3;
  white-space: nowrap;
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bbb-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #c4b5fd;
  background: rgba(139,92,246,.15);
  border: 1px solid rgba(139,92,246,.28);
  font-variant-numeric: tabular-nums;
}
.bbb-prizes-panel {
  overflow: visible;
}
.bbb-prize-rail-wrap {
  position: relative;
}
.bbb-prize-rail-wrap::before,
.bbb-prize-rail-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 14px;
  width: 28px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.bbb-prize-rail-wrap.is-scrollable::before,
.bbb-prize-rail-wrap.is-scrollable::after { opacity: 1; }
.bbb-prize-rail-wrap.is-at-start::before { opacity: 0; }
.bbb-prize-rail-wrap.is-at-end::after { opacity: 0; }
.bbb-prize-rail-wrap::before {
  left: 0;
  background: linear-gradient(90deg, rgba(7,5,15,.95) 20%, transparent);
}
.bbb-prize-rail-wrap::after {
  right: 0;
  background: linear-gradient(-90deg, rgba(7,5,15,.95) 20%, transparent);
}
.bbb-prize-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 4px 0 8px;
  margin: 0;
  scroll-snap-type: none;
}
.bbb-prize-rail-wrap::before,
.bbb-prize-rail-wrap::after {
  display: none;
}
.bbb-prize-item {
  flex: unset;
  scroll-snap-align: unset;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 12px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid var(--bbb-glass-border);
  text-align: center;
  transition: transform .3s cubic-bezier(.34,1.2,.64,1), border-color .25s, box-shadow .25s;
  will-change: transform;
}
.bbb-prize-item:hover {
  transform: translateY(-3px);
  border-color: rgba(139,92,246,.35);
  box-shadow: 0 10px 28px rgba(139,92,246,.18);
}
.bbb-prize-item.active {
  border-color: rgba(251,191,36,.55);
  box-shadow: 0 0 0 2px rgba(251,191,36,.28), 0 10px 28px rgba(251,191,36,.18);
  transform: scale(1.04);
}
.bbb-prize-item .tier {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(139,92,246,.25);
  color: #c4b5fd;
  margin-bottom: 8px;
}
.bbb-prize-item .tier.consolation {
  background: rgba(148,163,184,.18);
  color: #94a3b8;
}
.bbb-prize-item .tier.jackpot {
  background: linear-gradient(135deg, rgba(251,191,36,.35), rgba(236,72,153,.28));
  color: #fde68a;
  box-shadow: 0 0 14px rgba(251,191,36,.25);
}
.bbb-prize-item.is-jackpot {
  background: linear-gradient(160deg, rgba(251,191,36,.12) 0%, rgba(255,255,255,.04) 100%);
  border-color: rgba(251,191,36,.28);
}
.bbb-prize-item.is-jackpot .prob-ring .fill { stroke: #fbbf24; }
.bbb-prize-item.is-jackpot .name { color: #fde68a; }
.bbb-prize-item.is-win .prob-ring .fill { stroke: #a78bfa; }
.bbb-prize-item.is-consolation {
  background: linear-gradient(160deg, rgba(148,163,184,.1) 0%, rgba(255,255,255,.02) 100%);
  border-color: rgba(148,163,184,.15);
}
.bbb-prize-item.is-consolation .prob-ring .fill {
  stroke: #64748b;
}
.bbb-prize-item.is-consolation .name {
  color: var(--bbb-muted);
  font-weight: 500;
  min-height: auto;
  padding: 2px 0 4px;
}
.bbb-prize-item .name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: auto;
  padding-bottom: 8px;
  line-height: 1.35;
  word-break: break-word;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.bbb-prize-item .prob-ring {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  flex-shrink: 0;
}
.bbb-prize-item .prob-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bbb-prize-item .prob-ring .track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3; }
.bbb-prize-item .prob-ring .fill { fill: none; stroke: var(--bbb-violet); stroke-width: 3; stroke-linecap: round; }
.bbb-prize-item .prob-ring .pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--bbb-text);
}

/* 时间轴记录 */
.bbb-records-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}
.bbb-records-count { font-size: 11px; color: var(--bbb-muted); }
.bbb-record-list {
  position: relative;
  padding-left: 0;
  max-height: none;
  overflow: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bbb-record-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
.bbb-record-list.has-items {
  padding-left: 0;
}
.bbb-record-list.has-items::before {
  display: none;
}
.bbb-record-list::before { display: none; }
.bbb-record-item {
  position: relative;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bbb-glass);
  border: 1px solid var(--bbb-glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color .2s ease, background .2s ease;
}
.bbb-record-item.win-item {
  border-color: rgba(74,222,128,.25);
  background: linear-gradient(135deg, rgba(34,197,94,.1) 0%, rgba(255,255,255,.04) 100%);
}
.bbb-record-item.is-new {
  animation: bbbRecordIn .4s cubic-bezier(.34,1.2,.64,1) forwards;
}
@keyframes bbbRecordIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.bbb-bento-item .val.gold.is-updated {
  animation: bbbCreditFlash .55s ease;
}
.bbb-bento-item .val.gold.is-win-pulse {
  animation: bbbCreditWin .9s ease;
}
@keyframes bbbCreditWin {
  0%, 100% { transform: scale(1); color: var(--bbb-gold); }
  35% { transform: scale(1.12); color: #fde68a; text-shadow: 0 0 16px rgba(251,191,36,.5); }
  65% { transform: scale(1.06); color: #fbbf24; }
}
@keyframes bbbCreditFlash {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.06); color: #fde68a; }
}
html.bbb-paused .bbb-orb,
html.bbb-paused .bbb-orbit,
html.bbb-paused .bbb-box-glow,
html.bbb-paused .bbb-draw-btn::before,
html.bbb-paused .bbb-draw-btn-wrap,
html.bbb-paused .bbb-u-sparkles span,
html.bbb-paused .bbb-energy-ring,
html.bbb-paused .bbb-box-pedestal {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .bbb-shell,
  .bbb-bento-item {
    animation: none !important;
  }
  .bbb-draw-aura.is-active,
  .bbb-page-wrap.is-celebrate,
  .bbb-hint-main.bbb-hint-swap,
  .bbb-hint-pop,
  .bbb-hint-rise,
  .bbb-prize-item.is-reveal-pulse,
  #bbb-platform-opens.is-bump,
  .bbb-shockwave,
  .bbb-float-star {
    animation: none !important;
  }
  .bbb-box.opened .bbb-img-picture-open,
  .bbb-box.opening .bbb-img-picture-closed,
  .bbb-box.opening .bbb-img-picture-open,
  .bbb-box-inner-light,
  .bbb-vault.has-result.is-win .bbb-box-inner-light,
  .bbb-box-beam,
  .bbb-energy-ring,
  .bbb-charge-spark,
  .bbb-box-wrap.is-popping,
  .bbb-box-pedestal {
    animation: none !important;
  }
  .bbb-vault.has-result.is-big-win .bbb-box.opened .bbb-img-picture-open {
    animation: bbbOpenRevealPicBig 1.1s cubic-bezier(.34, 1.3, .64, 1) forwards;
  }
  .bbb-orb,
  .bbb-orbit,
  .bbb-box-glow,
  .bbb-box,
  .bbb-draw-btn::before,
  .bbb-draw-btn-wrap,
  .bbb-draw-btn.is-loading .bbb-draw-btn-inner,
  .bbb-records-more.is-loading,
  .bbb-vault::after {
    animation: none !important;
  }
  .bbb-empty-glow,
  .bbb-vault.has-result.is-win .bbb-box-glow,
  .bbb-vault.has-result.is-big-win .bbb-box-glow,
  .bbb-vault.has-result.is-big-win .bbb-vault-tag,
  .bbb-prize-item,
  .bbb-record-item.is-new,
  .bbb-bento-item .val.gold.is-updated,
  .bbb-bento-item .val.gold.is-win-pulse,
  .bbb-stage-hint.is-result,
  .bbb-stage-hint.is-result.is-win.is-big .bbb-hint-main {
    animation: none !important;
    transition: none !important;
  }
  .bbb-prize-item { will-change: auto; }
}
.bbb-record-item::before {
  display: none;
}
.bbb-record-item.win-item::before { display: none; }
.bbb-record-main { flex: 1; min-width: 0; }
.bbb-record-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbb-record-meta { font-size: 11px; color: var(--bbb-muted); margin-top: 2px; }
.bbb-record-amount { text-align: right; flex-shrink: 0; }
.bbb-record-amount .win { display: block; font-size: 16px; font-weight: 800; color: #4ade80; }
.bbb-record-amount .zero { font-size: 13px; color: var(--bbb-muted); }
.bbb-record-amount .cost { display: block; font-size: 10px; color: var(--bbb-muted); margin-top: 2px; }
.bbb-records-footer { text-align: center; margin-top: 14px; }
.bbb-records-more {
  position: relative;
  overflow: hidden;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid rgba(139,92,246,.35);
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(236,72,153,.08));
  color: #e9d5ff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .14s cubic-bezier(.34, 1.2, .64, 1), box-shadow .2s, border-color .2s, opacity .2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.bbb-records-more:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 6px 20px rgba(139,92,246,.25);
}
.bbb-records-more:not(:disabled):active,
.bbb-records-more.is-pressing:not(:disabled) {
  transform: scale(0.97) translateY(0);
}
.bbb-records-more.is-loading {
  opacity: .72;
  cursor: wait;
  animation: bbbBtnTextPulse 1s ease-in-out infinite;
}
.bbb-records-more:disabled { opacity: .45; cursor: not-allowed; }
.bbb-records-end { font-size: 11px; color: var(--bbb-muted); padding: 8px; }

/* Disclaimer */
.bbb-disclaimer {
  margin: 0;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(28, 32, 44, 0.78), rgba(16, 18, 26, 0.9));
  overflow: hidden;
}
.bbb-disclaimer-details {
  margin: 0;
}
.bbb-disclaimer-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .2s ease;
}
.bbb-disclaimer-summary::-webkit-details-marker { display: none; }
.bbb-disclaimer-summary::marker { content: ''; }
.bbb-disclaimer-summary:hover {
  background: rgba(139,92,246,.06);
}
.bbb-disclaimer-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.22);
  color: #c4b5fd;
}
.bbb-disclaimer-icon svg { width: 18px; height: 18px; }
.bbb-disclaimer-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bbb-disclaimer-head strong {
  font-size: 13px;
  font-weight: 700;
  color: #e9d5ff;
  letter-spacing: .02em;
}
.bbb-disclaimer-sub {
  font-size: 11px;
  color: var(--bbb-muted);
  line-height: 1.4;
}
.bbb-disclaimer-chevron {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(196,181,253,.7);
  border-bottom: 2px solid rgba(196,181,253,.7);
  transform: rotate(45deg);
  margin-right: 4px;
  transition: transform .25s ease;
}
.bbb-disclaimer-details[open] .bbb-disclaimer-chevron {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.bbb-disclaimer-list {
  margin: 0;
  padding: 0 16px 16px 44px;
  font-size: 11px;
  line-height: 1.65;
  color: rgba(203,213,225,.82);
  border-top: 1px solid rgba(255,255,255,.06);
}
.bbb-disclaimer-list li {
  margin: 10px 0 0;
  padding-left: 4px;
}
.bbb-disclaimer-list li::marker {
  color: rgba(167,139,250,.75);
  font-weight: 600;
}
.bbb-disclaimer-agree {
  margin: 10px 0 0;
  padding: 0 4px;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
  color: rgba(148,163,184,.78);
}
.bbb-disclaimer-agree a,
.bbb-disclaimer-agree button {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.bbb-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--bbb-muted);
  font-size: 13px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.1);
}
.bbb-empty-records {
  padding: 36px 20px 32px;
  background: linear-gradient(180deg, rgba(139,92,246,.06) 0%, rgba(255,255,255,.02) 100%);
  border-color: rgba(139,92,246,.18);
}
.bbb-empty-visual {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
}
.bbb-empty-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.35) 0%, transparent 70%);
  animation: bbbEmptyPulse 3s ease-in-out infinite;
}
@keyframes bbbEmptyPulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.08); opacity: 1; }
}
.bbb-empty-icon-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bbb-empty-box-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #07050f;
  filter: drop-shadow(0 8px 18px rgba(124, 58, 237, .32));
  opacity: .92;
}
.bbb-empty-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bbb-text);
}
.bbb-empty-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--bbb-muted);
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
.bbb-empty-icon { font-size: 32px; margin-bottom: 8px; opacity: .6; }
.bbb-empty-visual-sm {
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
}
.bbb-empty-box-svg {
  width: 32px;
  height: 32px;
  color: #a78bfa;
  opacity: .8;
}
.bbb-empty-prizes {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bbb-alert-disabled {
  margin: 16px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(251,146,60,.12);
  border: 1px solid rgba(251,146,60,.3);
  color: #fdba74;
  font-size: 14px;
  text-align: center;
}

@media (min-width: 576px) {
  .bbb-prize-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  html:not(.bbb-is-phone) .bbb-page { max-width: none; }
  html:not(.bbb-is-phone) .bbb-topbar { margin-bottom: 24px; }
  html:not(.bbb-is-phone) .bbb-brand-icon { width: 48px; height: 48px; }
  html:not(.bbb-is-phone) .bbb-brand-text h2 { font-size: 22px; }
  html:not(.bbb-is-phone) .bbb-quota-card { padding: 18px 22px; }
  html:not(.bbb-is-phone) .bbb-bento {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
  }
  html:not(.bbb-is-phone) .bbb-bento-item.wide,
  html:not(.bbb-is-phone) .bbb-quota-card { grid-column: 1 / -1; }
  html:not(.bbb-is-phone) .bbb-bento-item { padding: 16px 18px; }
  html:not(.bbb-is-phone) .bbb-main-grid {
    display: grid;
    grid-template-columns: minmax(340px, 400px) 1fr;
    gap: 28px;
    align-items: start;
  }
  html:not(.bbb-is-phone) .bbb-col-play {
    position: sticky;
    top: 24px;
  }
  .bbb-vault {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 18px 16px 14px;
  }
  .bbb-vault-visual { min-height: 248px; }
  .bbb-box-wrap {
    width: 220px;
    height: 220px;
  }
  .bbb-orbit-1 { width: 250px; height: 250px; }
  .bbb-orbit-2 { width: 286px; height: 286px; }
  .bbb-dock { margin-bottom: 0; }
  .bbb-draw-btn { min-height: 58px; font-size: 17px; }
  .bbb-draw-btn-wrap { border-radius: 20px; }

  .bbb-col-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .bbb-col-info .bbb-section { margin-bottom: 0; }
  .bbb-prizes-panel {
    padding: 20px;
    border-radius: 20px;
    background: var(--bbb-glass);
    border: 1px solid var(--bbb-glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .bbb-prize-rail {
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: 14px;
  }
  .bbb-prize-item {
    min-height: 156px;
  }

  .bbb-record-list { max-height: none; }
  .bbb-record-list.has-items {
    max-height: 440px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,.4) transparent;
    -ms-overflow-style: auto;
  }
  .bbb-record-list.has-items::-webkit-scrollbar {
    display: block;
    width: 4px;
  }
  .bbb-record-list.has-items::-webkit-scrollbar-track { background: transparent; }
  .bbb-record-list.has-items::-webkit-scrollbar-thumb {
    background: rgba(139,92,246,.35);
    border-radius: 4px;
  }
  .bbb-record-list.has-items::-webkit-scrollbar-thumb:hover {
    background: rgba(139,92,246,.55);
  }
  .bbb-prize-rail-wrap::before,
  .bbb-prize-rail-wrap::after { display: none; }

  .bbb-record-list.has-items { padding-left: 0; }
  .bbb-record-list.has-items::before { display: none; }
  .bbb-records-panel {
    padding: 20px;
    border-radius: 20px;
    background: var(--bbb-glass);
    border: 1px solid var(--bbb-glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

@media (min-width: 1200px) {
  html:not(.bbb-is-phone) .bbb-main-grid {
    grid-template-columns: minmax(380px, 460px) 1fr;
    gap: 36px;
  }
  .bbb-box-wrap { width: 220px; height: 220px; }
  .bbb-vault-visual { min-height: 248px; }
  .bbb-orbit-1 { width: 250px; height: 250px; }
  .bbb-orbit-2 { width: 286px; height: 286px; }
  .bbb-prize-rail {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 991px) {
  .bbb-vault-visual {
    min-height: 240px;
    max-width: 100%;
  }
  .bbb-vault-visual .bbb-img-picture {
    max-width: min(100%, 320px);
    height: auto;
  }
  .bbb-prize-rail {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  .bbb-prizes-panel {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .bbb-records-panel {
    padding: 16px;
    border-radius: 16px;
    overflow: hidden;
  }
  .bbb-records-head {
    margin-bottom: 12px;
    padding: 0;
  }
  .bbb-record-list.has-items {
    padding-left: 0;
  }
  .bbb-record-list.has-items::before {
    display: none;
  }
  .bbb-record-item {
    margin-bottom: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    gap: 12px;
  }
  .bbb-record-item::before {
    display: none;
  }
  .bbb-record-name {
    font-size: 14px;
    white-space: normal;
    line-height: 1.35;
  }
  .bbb-record-amount .win {
    font-size: 15px;
  }
  .bbb-records-more {
    width: 100%;
    max-width: none;
    padding: 12px 16px;
    border-radius: 12px;
  }
  .bbb-records-footer {
    margin-top: 12px;
  }
}

@media (max-width: 360px) {
  .bbb-bento-item .val { font-size: 17px; }
}

/* ── 余额兑换积分 ── */
.bbb-exchange {
  margin: 16px 0 20px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.22);
  background: linear-gradient(135deg, rgba(20, 12, 40, 0.72), rgba(12, 8, 24, 0.85));
}
.bbb-exchange-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.bbb-exchange-body {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.bbb-exchange-field {
  flex: 1 1 220px;
  min-width: 0;
}
.bbb-exchange-field label {
  display: block;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.75);
  margin-bottom: 8px;
}
.bbb-exchange-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 12px;
  background: rgba(7, 5, 15, 0.65);
  overflow: hidden;
}
.bbb-exchange-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #f8fafc;
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
}
.bbb-exchange-suffix {
  padding: 0 14px;
  color: rgba(196, 181, 253, 0.85);
  font-size: 14px;
  white-space: nowrap;
}
.bbb-exchange-preview {
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(250, 204, 21, 0.9);
}
.bbb-exchange-btn {
  flex: 0 0 auto;
  min-width: 120px;
}
.bbb-exchange-btn.is-loading {
  opacity: 0.72;
  pointer-events: none;
}
#bbb-points.is-updated,
#bbb-credit.is-updated {
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
#bbb-points.is-win-pulse {
  text-shadow: 0 0 18px rgba(250, 204, 21, 0.55);
}
.bbb-points-split {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.72);
}
.bbb-points-split strong {
  color: #f8fafc;
  font-weight: 600;
}
.bbb-points-split.is-placeholder strong {
  color: rgba(226, 232, 240, 0.45);
}

html.bbb-is-phone .bbb-main-grid {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
}
html.bbb-is-phone .bbb-col-play {
  position: static !important;
}
html.bbb-is-phone .bbb-bento {
  grid-template-columns: repeat(2, 1fr) !important;
}