.batch-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #251f20;
  color: #f7f4f5;
  animation: batch-backdrop-in .45s ease-out both;
}

@keyframes batch-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.batch-grid-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.batch-grid-scroll::-webkit-scrollbar { display: none; }

.batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  align-content: start;
  width: 100%;
  max-width: 1160px;
  min-height: 100%;
  margin: 0 auto;
  padding: 12px;
}

.batch-number-card {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 6px 8px;
  text-align: center;
}

.batch-number-card > span {
  font-size: clamp(15px, 1.7vw, 23px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.batch-rolling-card .number-artifact-digits {
  font-size: clamp(15px, 1.7vw, 23px);
  line-height: 1.15;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  overflow-wrap: anywhere;
}

.batch-rolling-card.animate-finale-pulse { z-index: 2; }

.batch-mystery {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 6px 8px;
  overflow: hidden;
  border: 2px solid #f4e8ca;
  border-radius: 9px;
  background: radial-gradient(ellipse at 50% 55%, #4d4050, #211d27 75%);
  box-shadow: 0 0 0 1px #f8ead522, 0 0 18px #f1d8aa50;
  color: #fff7e9;
  font-family: var(--font-space-mono), monospace;
  font-size: clamp(17px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: .04em;
  animation: batch-mystery-arrive .75s cubic-bezier(.16, 1, .3, 1) both;
}

.batch-mystery::before {
  content: '';
  position: absolute;
  inset: -45%;
  background: linear-gradient(105deg, transparent 37%, #fff8df99 49%, transparent 62%);
  transform: translateX(-85%) rotate(8deg);
  animation: batch-mystery-sweep 1s ease-out .25s both;
}

.batch-mystery span {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 8px #fff8e0, 0 0 16px #edc98f;
  animation: batch-mystery-digits .65s ease-out .22s both;
}

@keyframes batch-mystery-arrive {
  0% { opacity: 0; transform: translateY(20px) scale(.7); filter: blur(8px); }
  65% { opacity: 1; transform: translateY(-3px) scale(1.1); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes batch-mystery-digits {
  0% { opacity: 0; transform: scale(1.4); filter: blur(5px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes batch-mystery-sweep {
  0% { transform: translateX(-85%) rotate(8deg); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateX(85%) rotate(8deg); opacity: 0; }
}

.batch-loading {
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--font-space-mono), monospace;
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 700;
  text-align: center;
}
.roll-retry { display: grid; justify-items: center; gap: 14px; margin-top: 14px; font-size: 13px; font-weight: 400; color: var(--prose-3); }
.roll-retry button { border: 1px solid var(--outline); border-radius: 7px; padding: 8px 20px; color: var(--prose); }

@media (max-width: 480px) {
  .batch-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
    padding: 8px;
  }

  .batch-number-card, .batch-mystery { min-height: 47px; }
  .batch-number-card > span { font-size: 15px; }
  .batch-rolling-card .number-artifact-digits { font-size: 15px; }
  .batch-mystery { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .batch-backdrop, .batch-mystery, .batch-mystery::before, .batch-mystery span { animation: none; }
}
/* Only the last viewport plus two rows is mounted; the spacer represents skipped cards. */
.batch-grid { min-height:0; }
.batch-number-card { height:100%; max-height:100%; overflow:hidden; contain:layout paint; }
.batch-number-card > span { max-height:100%; overflow:hidden; }
.heavy-bulk-backdrop{position:fixed;inset:0;z-index:100;background:var(--site-bg);display:grid;place-items:center;padding:24px;color:var(--prose)}.heavy-bulk-panel{width:min(430px,100%);text-align:center;text-transform:none}.heavy-bulk-panel h2{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:24px}.heavy-total{display:block;font:700 clamp(25px,5vw,36px) var(--font-space-mono),monospace;overflow-wrap:anywhere}.heavy-total>span{font-size:.55em;color:var(--prose-3)}.heavy-choices{display:grid;gap:10px;margin-top:28px}.heavy-choices button{text-align:left;border:1px solid var(--outline);border-radius:9px;background:var(--surface);padding:17px 18px;cursor:pointer}.heavy-choices button:hover{background:var(--surface-raised);border-color:var(--outline-strong)}.heavy-choices b{font-size:13px}.heavy-choices span{display:block;font-size:11px;color:var(--prose-3);margin-top:6px}.heavy-cancel{font-size:12px;color:var(--prose-3);margin-top:20px;padding:8px 20px}.heavy-bulk-panel progress{display:block;width:100%;height:4px;margin:25px 0;accent-color:var(--prose)}.heavy-current{min-height:85px;display:grid;place-items:center;overflow:hidden}.heavy-bulk-panel p{font-size:12px;color:var(--prose-3)}.heavy-finish{margin-top:20px;border:1px solid var(--outline);border-radius:7px;padding:10px 25px}.heavy-unfold-count{text-align:center;font:11px var(--font-space-mono),monospace;color:var(--prose-3);margin-bottom:8px}

/* Start gate: the numbers are ready, the host starts the reveal for everyone. */
.bet-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;animation:bet-gate-in .35s cubic-bezier(.2,.9,.3,1.2)}
.bet-gate small{font-family:inherit;font-size:13px;font-weight:400;color:var(--prose-3);text-transform:none}
.bet-gate-go,.bet-gate-bet{margin-top:6px;padding:12px 26px;border-radius:999px;background:var(--prose);color:var(--site-bg);font-size:15px;font-weight:800;letter-spacing:.02em;box-shadow:0 8px 30px #0005;transition:transform .15s}
.bet-gate-go:hover,.bet-gate-bet:hover{transform:scale(1.05)}
.bet-gate-go{animation:bet-gate-pulse 1.6s ease-in-out infinite}
.bet-gate-bet{padding:9px 20px;font-size:13px;background:var(--surface-raised);color:var(--prose)}
@keyframes bet-gate-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes bet-gate-pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--prose) 15%,transparent),0 8px 30px #0005}}

/* The ready screen scrolls (phones) and keeps clear of the screen edges. */
.batch-backdrop:has(>.batch-ready){display:flex;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:max(28px,env(safe-area-inset-top)) 16px max(32px,env(safe-area-inset-bottom))}
.batch-ready{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(460px,100%);margin:auto;padding:12px 0}
.batch-ready>.bet-gate{height:auto;padding:22px 18px;width:100%;border-radius:22px;background:rgba(255,255,255,.04)}
.batch-ready .mod-dock{width:100%}