@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&display=swap');
/* BrickBid — Brickmania auction house styles. Scoped under .bb */
.bb {
  --bb-red: #e3000b;
  --bb-yellow: #ffcf00;
  --bb-blue: #006cb7;
  --bb-green: #00a650;
  --bb-ink: #1b1b1f;
  --bb-muted: #6b6b76;
  --bb-line: #e7e4dc;
  --bb-bg: #fffdf7;
  --bb-card: #ffffff;
  --bb-radius: 14px;
  --bb-shadow: 0 2px 0 rgba(0,0,0,.06), 0 10px 24px -12px rgba(0,0,0,.25);
  --bb-font: inherit;
  --bb-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --bb-hero-font: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  color: var(--bb-ink);
  font-family: var(--bb-font);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 48px;
  box-sizing: border-box;
}
.bb *, .bb *::before, .bb *::after { box-sizing: border-box; }
.bb button { font: inherit; cursor: pointer; }
.bb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.bb-lock { overflow: hidden; }

/* ---------- hero: "Spotlight" — one featured set lit on a dark stage ---------- */
.bb-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: center;
  margin: 24px 0 20px; padding: 44px 48px;
  border-radius: 22px;
  background: radial-gradient(ellipse 42% 75% at 74% 45%, #3b3641 0%, #17161b 62%);
  color: #f4efe6;
}
.bb-hero__text { min-width: 0; }
.bb-eyebrow { margin: 0; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; font-size: 13px; color: var(--bb-yellow); }
.bb-title { margin: 12px 0 14px; font-family: var(--bb-hero-font); font-weight: 800; font-size: clamp(34px, 5.2vw, 56px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; color: #f4efe6; }
.bb-title em { font-style: normal; color: var(--bb-yellow); }
.bb-sub { margin: 0 0 22px; max-width: 40ch; font-size: 17px; line-height: 1.5; color: #d3cdc4; }
.bb-feat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: end;
  max-width: 480px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
}
.bb-feat[hidden] { display: none; }
.bb-feat__name { grid-column: 1 / -1; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.bb-feat__nums { display: flex; gap: 24px; flex-wrap: wrap; }
.bb-feat__nums small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9d978e; }
.bb-feat__nums b { font-family: var(--bb-hero-font); font-size: 28px; font-variant-numeric: tabular-nums; }
.bb-feat__go { border: 0; background: var(--bb-yellow); color: #17161b; font-weight: 800; font-size: 15px; padding: 12px 22px; border-radius: 999px; white-space: nowrap; }
.bb-feat__go:hover { filter: brightness(1.05); }
.bb-feat__go:focus-visible, .bb-hero__how:focus-visible { outline: 3px solid var(--bb-yellow); outline-offset: 3px; }
.bb-hero__how { display: inline-block; margin-top: 14px; background: none; border: 0; padding: 2px 0; color: #d3cdc4; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bb-hero__how:hover { color: #fff; }
.bb-hero__stage { position: relative; min-height: 280px; display: grid; place-items: center; }
.bb-hero__stage::before { content: ""; position: absolute; width: 360px; height: 360px; max-width: 100%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,200,.28), rgba(255,240,200,0) 65%); }
.bb-hero__stage::after { content: ""; position: absolute; bottom: 4px; width: 300px; max-width: 90%; height: 18px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.55), rgba(0,0,0,0) 70%); }
.bb-hero__stage > svg { position: relative; width: 70%; max-width: 280px; }
.bb-hero__photo { position: relative; z-index: 1; width: min(300px, 80%); aspect-ratio: 5 / 4; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 50px rgba(0,0,0,.55); animation: bb-rise .5s ease-out; }
.bb-hero__photo img, .bb-hero__photo svg, .bb-hero__photo > span { display: block; width: 100%; height: 100%; object-fit: contain; }
@keyframes bb-drop { from { transform: translateY(-260px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- tabs / toolbar ---------- */
.bb-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; }
.bb-tab {
  flex: none; border: 2px solid var(--bb-ink); background: var(--bb-card); color: var(--bb-ink);
  padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px;
  box-shadow: 0 3px 0 var(--bb-ink); transition: transform .1s, box-shadow .1s;
}
.bb-tab:hover { transform: translateY(-1px); }
.bb-tab[aria-selected="true"] { background: var(--bb-yellow); }
.bb-tab:active { transform: translateY(3px); box-shadow: 0 0 0 var(--bb-ink); }

.bb-toolbar { display: flex; gap: 10px; margin: 6px 0 10px; }
.bb-toolbar[hidden] { display: none; }
.bb-search { flex: 1; }
.bb-search input, .bb-toolbar select {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 10px;
  border: 2px solid var(--bb-line); background: var(--bb-card); font: inherit; color: inherit;
}
.bb-toolbar select { width: auto; }
.bb-search input:focus, .bb-toolbar select:focus, .bb-amount input:focus { outline: none; border-color: var(--bb-blue); box-shadow: 0 0 0 3px rgba(0,108,183,.2); }

.bb-chips, .bb-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.bb-chip {
  border: 1.5px solid var(--bb-line); background: var(--bb-card); color: var(--bb-ink);
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
}
.bb-chip:hover { border-color: var(--bb-ink); }
.bb-chip.is-on { background: var(--bb-ink); color: #fff; border-color: var(--bb-ink); }

/* ---------- grid / card ---------- */
.bb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.bb-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bb-card); border-radius: var(--bb-radius);
  border: 2px solid var(--bb-ink); box-shadow: 0 5px 0 var(--bb-ink);
  margin-top: 10px; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.bb-card:hover, .bb-card:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 0 var(--bb-ink); outline: none; }
.bb-card__studs { position: absolute; top: -11px; left: 18px; right: 18px; display: flex; justify-content: space-around; }
.bb-card__studs i {
  width: 30px; height: 10px; border: 2px solid var(--bb-ink); border-bottom: 0;
  border-radius: 8px 8px 0 0; background: var(--accent);
}
.bb-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: 12px 12px 0 0; overflow: hidden; background: #f4f1ea; border-bottom: 2px solid var(--bb-ink); }
.bb-card__media img, .bb-card__media svg, .bb-card__media > span { display: block; width: 100%; height: 100%; object-fit: cover; }
.bb-heart {
  position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--bb-ink); background: #fff; color: #c8c8c8; font-size: 18px; line-height: 1;
  transition: transform .15s;
}
.bb-heart:hover { transform: scale(1.1); }
.bb-heart.is-on { color: var(--bb-red); animation: bb-pop .3s; }
@keyframes bb-pop { 50% { transform: scale(1.3); } }
.bb-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bb-card__title { margin: 0; font-size: 17px; line-height: 1.25; }
.bb-card__meta, .bb-card__foot { margin: 0; color: var(--bb-muted); font-size: 13px; }
.bb-card__row { display: flex; justify-content: space-between; align-items: end; margin-top: auto; padding-top: 6px; }
.bb-right { text-align: right; }
.bb-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--bb-muted); font-weight: 700; }
.bb-price { font-family: var(--bb-display); font-size: 22px; }
.bb-clock { font-variant-numeric: tabular-nums; font-size: 16px; }

.bb-badges { display: flex; flex-wrap: wrap; gap: 5px; min-height: 0; }
.bb-badge { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: #eee; text-transform: uppercase; letter-spacing: .04em; }
.bb-badge--hot { background: var(--bb-red); color: #fff; animation: bb-pulse 1.6s infinite; }
.bb-badge--lead { background: var(--bb-green); color: #fff; }
.bb-badge--out { background: #ffe1e1; color: #a1000a; }
.bb-badge--win { background: var(--bb-yellow); color: var(--bb-ink); }
.bb-badge--buy { background: #e6f1fa; color: var(--bb-blue); }
.bb-badge--soft { background: #f1efe9; color: #555; }
@keyframes bb-pulse { 50% { opacity: .7; } }

.bb-empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--bb-muted); }
.bb-empty__brick { width: 80px; height: 40px; margin: 0 auto 16px; background: var(--bb-line); border-radius: 6px; position: relative; }
.bb-empty__brick::before { content: ""; position: absolute; top: -10px; left: 10px; right: 10px; height: 10px;
  background: radial-gradient(circle at 50% 100%, var(--bb-line) 9px, transparent 10px) 0 0 / 50% 100%; }
.bb-muted { color: var(--bb-muted); font-size: 14px; }
.bb-h2 { font-family: var(--bb-display); font-size: 22px; margin: 28px 0 12px; }
.bb-h2 small { font-family: inherit; font-size: 14px; background: var(--bb-ink); color: #fff; border-radius: 999px; padding: 2px 9px; vertical-align: middle; }
.bb-me { grid-column: 1 / -1; min-width: 0; } /* the My bids view sits inside the card grid; span all of it */
.bb-me .bb-grid { margin-bottom: 8px; }

/* ---------- buttons ---------- */
.bb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 20px; border-radius: 10px; border: 2px solid var(--bb-ink);
  background: var(--bb-blue); color: #fff; font-weight: 800; text-decoration: none;
  box-shadow: 0 4px 0 var(--bb-ink); transition: transform .08s, box-shadow .08s;
}
.bb-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--bb-ink); }
.bb-btn:disabled { opacity: .6; cursor: progress; }
.bb-btn--bid { background: var(--bb-red); }
.bb-btn--yellow { background: var(--bb-yellow); color: var(--bb-ink); }
.bb-btn--ghost { background: #fff; color: var(--bb-ink); }

/* ---------- modal / detail ---------- */
.bb-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.bb-modal[hidden] { display: none; }
.bb-modal__backdrop { position: absolute; inset: 0; background: rgba(20,18,14,.6); backdrop-filter: blur(3px); }
.bb-modal__panel {
  position: relative; width: min(1100px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--bb-bg); border-radius: 20px; border: 3px solid var(--bb-ink); box-shadow: 0 8px 0 var(--bb-ink);
  animation: bb-rise .25s ease-out;
}
@keyframes bb-rise { from { transform: translateY(24px); opacity: 0; } }
.bb-x { position: sticky; top: 10px; float: right; margin: 10px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--bb-ink); background: #fff; font-size: 24px; line-height: 1; }
.bb-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; padding: 28px; }
.bb-detail > * { min-width: 0; }
.bb-detail__img { aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 2px solid var(--bb-ink); background: #f4f1ea; }
.bb-detail__img img, .bb-detail__img svg, .bb-detail__img > span { display: block; width: 100%; height: 100%; object-fit: cover; }
.bb-detail__img img { object-fit: contain; background: #fff; }
.bb-card__media img { object-fit: contain; background: #fff; }
.bb-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.bb-thumb { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid var(--bb-line); border-radius: 10px; background: #fff; overflow: hidden; }
.bb-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bb-thumb.is-on, .bb-thumb:hover { border-color: var(--bb-ink); }
.bb-retail { display: block; font-size: 14px; margin-bottom: 2px; }
.bb-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin: 16px 0; }
.bb-specs div { background: #fff; border: 1.5px solid var(--bb-line); border-radius: 10px; padding: 8px 10px; }
.bb-specs dt { font-size: 11px; color: var(--bb-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.bb-specs dd { margin: 2px 0 0; font-weight: 700; }
.bb-desc { line-height: 1.55; white-space: pre-line; }
.bb-link { color: var(--bb-blue); font-weight: 700; }
.bb-detail__title { font-family: var(--bb-display); font-size: clamp(22px, 3vw, 30px); line-height: 1.1; margin: 8px 0 16px; padding-right: 40px; }

.bb-pricebox { background: #fff; border: 2px solid var(--bb-ink); border-radius: 14px; padding: 14px 16px; }
.bb-price--xl { display: block; font-size: clamp(34px, 5vw, 46px); line-height: 1.1; margin: 2px 0 4px; }
.bb-price.is-bump { animation: bb-bump .7s; }
@keyframes bb-bump { 0% { color: var(--bb-green); transform: scale(1.08); transform-origin: left; } 100% { color: inherit; transform: none; } }
.bb-ok { color: var(--bb-green); }
.bb-warn { color: #c25400; }

.bb-countdown { margin: 14px 0; }
.bb-digits { display: flex; gap: 8px; margin-top: 6px; }
.bb-digit {
  position: relative; min-width: 62px; padding: 10px 6px 6px; text-align: center;
  background: var(--accent, var(--bb-blue)); color: #fff; border-radius: 8px;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.2);
}
.bb-digit::before { /* studs on top of each digit brick */
  content: ""; position: absolute; top: -6px; left: 8px; right: 8px; height: 7px;
  background: radial-gradient(circle at 50% 100%, var(--accent, var(--bb-blue)) 7px, transparent 8px) 0 0 / 50% 100%;
}
.bb-digit b { display: block; font-family: var(--bb-display); font-size: 28px; font-variant-numeric: tabular-nums; line-height: 1; }
.bb-digit small { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .9; }
.bb-countdown.is-urgent .bb-digit { background: var(--bb-red); animation: bb-shake .5s infinite; }
.bb-countdown.is-urgent .bb-digit::before { background-image: radial-gradient(circle at 50% 100%, var(--bb-red) 7px, transparent 8px); }
@keyframes bb-shake { 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }
.bb-ext { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: #c25400; }
.bb-ended { font-weight: 800; font-size: 18px; }

.bb-you { margin: 12px 0; padding: 12px 14px; border-radius: 12px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.bb-you--lead { background: #e2f6ea; color: #00632f; }
.bb-you--out { background: #ffe9e9; color: #a1000a; animation: bb-pulse 1.6s 3; }
.bb-you--win { background: var(--bb-yellow); }

.bb-form { margin: 14px 0 10px; }
.bb-amount { display: flex; align-items: stretch; margin-top: 6px; border: 2px solid var(--bb-ink); border-radius: 12px; background: #fff; overflow: hidden; }
.bb-amount > span { display: grid; place-items: center; padding: 0 4px 0 14px; font-weight: 800; font-size: 20px; }
.bb-amount input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 22px; font-weight: 800; padding: 12px 8px; background: transparent; color: inherit; }
.bb-amount .bb-btn { border-radius: 0; border: 0; border-left: 2px solid var(--bb-ink); box-shadow: none; }
.bb-help { margin: 8px 0; font-size: 13px; color: var(--bb-muted); }
.bb-quick { margin: 8px 0 0; }
.bb-buynow { width: 100%; margin: 6px 0 4px; }
.bb-watchbtn { width: 100%; margin-top: 8px; }
.bb-watchbtn[aria-pressed="true"] { color: var(--bb-red); }
.bb-login, .bb-note { padding: 14px; background: #fff; border: 2px dashed var(--bb-line); border-radius: 12px; margin: 14px 0; }
.bb-login p { margin: 0 0 10px; }

.bb-h3 { margin: 24px 0 10px; font-size: 16px; text-transform: uppercase; letter-spacing: .08em; }
.bb-tower { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; margin-bottom: 14px; }
.bb-tower__brick {
  height: 14px; width: var(--w); background: var(--c); border-radius: 3px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); animation: bb-drop .45s cubic-bezier(.3,1.4,.5,1) both;
}
.bb-tower__brick.is-mine { outline: 2px solid var(--bb-ink); outline-offset: 1px; }
.bb-history { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; border: 1.5px solid var(--bb-line); border-radius: 12px; background: #fff; }
.bb-history li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--bb-line); font-size: 14px; }
.bb-history li:last-child { border-bottom: 0; }
.bb-history li.is-top { background: #fffbe6; font-weight: 700; }
.bb-history li.is-mine .bb-history__who em { color: var(--bb-blue); font-style: normal; }
.bb-dot { width: 12px; height: 12px; border-radius: 3px; }
.bb-history__amt { font-variant-numeric: tabular-nums; font-weight: 700; }
.bb-history__when { color: var(--bb-muted); font-size: 12px; min-width: 56px; text-align: right; }
.bb-auto { font-size: 10px; font-weight: 800; text-transform: uppercase; background: #eef; color: #445; padding: 1px 5px; border-radius: 4px; }

/* ---------- "How it works" guide ---------- */
.bb-guide { margin-top: 48px; scroll-margin-top: 140px; }
.bb-guide__head h2 { margin: 0; font-family: var(--bb-hero-font); font-weight: 800; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; text-wrap: balance; }
.bb-guide__head p { margin: 6px 0 18px; color: var(--bb-muted); font-size: 16px; }

.bb-3steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bb-3steps li { position: relative; background: #fff; border: 2px solid var(--bb-ink); border-radius: 14px; box-shadow: 0 4px 0 var(--bb-ink); padding: 18px 18px 16px; margin-top: 10px; }
.bb-3steps li::before { /* studs on top, like a brick */
  content: ""; position: absolute; top: -9px; left: 18px; width: 80px; height: 9px;
  background: radial-gradient(circle at 50% 100%, var(--c) 8px, transparent 9px) 0 0 / 25% 100%; }
.bb-3steps__n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--c); color: #fff; font-family: var(--bb-hero-font); font-weight: 800; font-size: 19px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.bb-3steps h3 { margin: 12px 0 4px; font-size: 18px; }
.bb-3steps p { margin: 0; line-height: 1.5; color: #3c3a42; }

.bb-how { margin-top: 18px; background: #fff; border: 2px solid var(--bb-ink); border-radius: 14px; }
.bb-how > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; font-weight: 800; font-size: 17px; }
.bb-how > summary::-webkit-details-marker { display: none; }
.bb-how > summary::after { content: "+"; display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--bb-yellow); font-size: 20px; line-height: 1; }
.bb-how[open] > summary::after { content: "–"; }
.bb-how > summary small { margin-left: auto; font-weight: 600; font-size: 13px; color: var(--bb-muted); }
.bb-how > summary:focus-visible { outline: 3px solid var(--bb-blue); outline-offset: 2px; border-radius: 12px; }
.bb-how__body { border-top: 1px solid var(--bb-line); padding: 6px 20px 22px; line-height: 1.6; }

.bb-g { padding: 18px 0; border-bottom: 1px dashed var(--bb-line); }
.bb-g h3 { margin: 0 0 6px; font-size: 18px; }
.bb-g p { margin: 6px 0; max-width: 68ch; }
.bb-g__note { color: #4a4851; font-size: 14px; background: #f7f5ef; border-radius: 10px; padding: 8px 12px; display: inline-block; }

.bb-ex { margin-top: 12px; border: 1.5px solid var(--bb-line); border-radius: 12px; overflow: hidden; max-width: 760px; }
.bb-ex__cap { padding: 10px 14px; background: #f7f5ef; font-size: 14px; }
.bb-ex__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 76px minmax(0, auto); grid-template-areas: "who act price st" "who why why why"; gap: 2px 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--bb-line); }
.bb-ex__row > :nth-child(2) { grid-area: act; }
.bb-ex__row > :nth-child(4) { grid-area: st; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.bb-ex__who { grid-area: who; align-self: start; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 800; }
.bb-ex__price { grid-area: price; font-family: var(--bb-hero-font); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; text-align: right; }
.bb-ex__why { grid-area: why; color: var(--bb-muted); font-size: 13px; }
.bb-ex__end { padding: 12px 14px; background: #fffbe6; border-top: 1px solid var(--bb-line); }

.bb-tiles { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
.bb-tiles li { border: 1.5px solid var(--bb-line); border-radius: 10px; padding: 8px 12px; background: #fff; }
.bb-tiles small { display: block; color: var(--bb-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.bb-tiles b { font-family: var(--bb-hero-font); font-size: 20px; font-variant-numeric: tabular-nums; }

.bb-labels { margin: 8px 0 0; display: grid; gap: 8px; max-width: 680px; }
.bb-labels > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.bb-labels dt { margin: 0; }
.bb-labels dd { margin: 0; }
.bb-badge--still { animation: none; }

.bb-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.bb-rules article { border: 1.5px solid var(--bb-line); border-top: 6px solid var(--c); border-radius: 12px; padding: 12px 14px; background: #fff; }
.bb-rules h4 { margin: 0 0 4px; font-size: 16px; }
.bb-rules p { margin: 0; font-size: 14px; line-height: 1.55; }

.bb-win { list-style: none; counter-reset: win; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bb-win li { counter-increment: win; position: relative; padding: 12px 14px 12px 50px; border-radius: 12px; background: #f2f9f4; font-size: 14px; line-height: 1.5; }
.bb-win li::before { content: counter(win); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bb-green); color: #fff; font-weight: 800; font-size: 14px; }

.bb-fair { margin-top: 20px; border: 2px solid var(--bb-ink); border-radius: 12px; background: #fffbe6; padding: 14px 18px; }
.bb-fair h3 { margin: 0 0 6px; font-size: 17px; }
.bb-fair ul { margin: 0; padding-left: 20px; }
.bb-fair li { margin: 4px 0; line-height: 1.5; }

@media (max-width: 760px) {
  .bb-3steps, .bb-rules, .bb-win { grid-template-columns: minmax(0, 1fr); }
  .bb-3steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 14px; }
  .bb-3steps__n { grid-row: span 2; }
  .bb-3steps h3 { margin: 4px 0 2px; font-size: 17px; }
  .bb-how > summary { padding: 14px 16px; }
  .bb-how > summary small { display: none; }
  .bb-how__body { padding: 4px 16px 18px; }
  .bb-ex__row { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "who act price" "who st st" "who why why"; }
  .bb-ex__row > :nth-child(4) { justify-content: flex-start; }
  .bb-labels > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bb-howlink { display: block; margin: 10px auto 0; background: none; border: 0; padding: 4px; color: var(--bb-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* confirm */
.bb-confirm { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(255,253,247,.85); backdrop-filter: blur(2px); padding: 16px; }
.bb-confirm__card { width: min(420px, 100%); background: #fff; border: 3px solid var(--bb-ink); border-radius: 16px; box-shadow: 0 6px 0 var(--bb-ink); padding: 22px; animation: bb-rise .2s; }
.bb-confirm__card h3 { margin: 0 0 4px; }
.bb-confirm__amt { font-family: var(--bb-display); font-size: 36px; margin: 6px 0; }
.bb-confirm__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* loading */
.bb-loading { display: flex; justify-content: center; gap: 8px; padding: 80px; }
.bb-loading span { width: 22px; height: 14px; border-radius: 3px; background: var(--bb-red); animation: bb-hop .9s infinite; }
.bb-loading span:nth-child(2) { background: var(--bb-yellow); animation-delay: .15s; }
.bb-loading span:nth-child(3) { background: var(--bb-blue); animation-delay: .3s; }
@keyframes bb-hop { 50% { transform: translateY(-14px); } }

/* toasts + confetti (appended to body, so not scoped under .bb) */
.bb-toasts { position: fixed; z-index: 2000; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100% - 32px)); pointer-events: none; }
.bb-toast { padding: 12px 16px; border-radius: 12px; background: #1b1b1f; color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: bb-rise .25s; transition: opacity .4s, transform .4s; font-family: system-ui, sans-serif; }
.bb-toast--success { background: #00863f; }
.bb-toast--error { background: #c4000a; }
.bb-toast.is-out { opacity: 0; transform: translateY(10px); }
.bb-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 2001; overflow: hidden; }
.bb-confetti i { position: absolute; top: -20px; width: 16px; height: 9px; border-radius: 2px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2);
  animation: bb-fall 2.2s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes bb-fall { to { transform: translate(var(--x), 105vh) rotate(var(--rot)); } }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .bb-hero { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px 18px 24px;
    background: radial-gradient(ellipse 85% 38% at 50% 20%, #3b3641 0%, #17161b 70%); }
  .bb-hero__stage { order: -1; min-height: 210px; }
  .bb-hero__stage::before { width: 250px; height: 250px; }
  .bb-hero__photo { width: min(220px, 70%); }
  .bb-feat { grid-template-columns: minmax(0, 1fr); }
  .bb-feat__nums b { font-size: 22px; }
  .bb-feat__go { width: 100%; }
  .bb-sub { font-size: 15px; margin-bottom: 14px; }
  .bb-detail { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 18px; }
  .bb-detail__img { aspect-ratio: 16 / 10; }
}
@media (max-width: 520px) {
  .bb-toolbar { flex-direction: column; }
  .bb-toolbar select { width: 100%; }
  .bb-modal { padding: 0; }
  .bb-modal__panel { max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .bb-digit { min-width: 0; flex: 1; }
  .bb-amount input { font-size: 18px; }
  .bb-amount .bb-btn { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bb *, .bb-toast { animation: none !important; transition: none !important; }
}