/* Bubblegum Blimp: game-only styles on top of candy-kit (kit.css + theme.css). Only the stage
 * canvas, the wordmark, the per-box result line, the fairness notice and the preloader live here;
 * everything else is kit components themed by tokens. */

html, body { margin: 0; height: 100%; background: var(--ck-bg); color: var(--ck-text); font-family: var(--ck-font); }
body { overflow: hidden; -webkit-font-smoothing: antialiased; }
#bb-root { height: 100vh; height: 100dvh; }

/* ---- stage: one canvas fills the kit canvas slot; the multiplier HUD keeps the left column ---- */
.ck-stage__canvas > canvas.bb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bb-shell .ck-stage__hud { max-width: 48%; }
.bb-shell .ck-stage__caption { max-width: 32ch; color: rgba(245, 244, 251, .72); }
.bb-shell .ck-stage.is-waiting .ck-stage__waiting { background: transparent; }
.bb-shell .ck-stage__wait-label { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ---- wordmark: BUBBLEGUM (text) + BLIMP (accent), Inter 800, flat ---- */
.bb-wordmark {
  display: inline-flex; align-items: center; gap: .3em;
  font-family: var(--ck-font, Inter, system-ui, sans-serif);
  font-weight: 800; line-height: 1; letter-spacing: -.03em; text-transform: uppercase;
  white-space: nowrap; user-select: none;
}
.bb-wordmark__mark {
  width: 1.3em; height: 1.3em; flex: none;
  background: url("../../assets/blimp-mark.svg") center / contain no-repeat;
}
.bb-wordmark__a { color: var(--ck-text); }
.bb-wordmark__b { color: var(--ck-accent); margin-left: -.1em; }
.bb-logo--side { font-size: 19px; }
.bb-logo--phone { font-size: 11px; }
.bb-logo--phone .bb-wordmark__mark { display: none; }

/* ---- bet boxes: a quiet result line on top of each kit panel ---- */
.bb-boxnote {
  display: flex; align-items: center; gap: 8px; min-height: 18px; margin: 0 0 2px;
  font-size: var(--ck-fs-xs, 12px); color: var(--ck-text-muted); font-variant-numeric: tabular-nums;
}
.bb-boxnote__tag { font-weight: 700; text-transform: uppercase; letter-spacing: var(--ck-tracking-caps, .06em); color: var(--ck-text-dim); }
.bb-boxnote.is-won .bb-boxnote__text { color: var(--ck-success); }
.bb-boxnote.is-lost .bb-boxnote__text { color: var(--ck-text-muted); }
.bb-boxnote.is-live .bb-boxnote__text { color: var(--ck-accent-2); }
.ck-betpanel.is-autobet { border-color: color-mix(in srgb, var(--ck-accent) 55%, transparent); }

/* ---- phone: two stacked panels; the stage keeps a sensible height ---- */
@container ck-shell (max-width: 767.98px) {
  .bb-shell .ck-slot--stage { aspect-ratio: auto; min-height: max(230px, 58vw); }
  .bb-shell .ck-stepper__cur { display: none; }
  .bb-shell .ck-topbar--phone .ck-balance__cur { font-size: var(--ck-fs-sm); }
}

/* ---- fairness notice (seeds missing) ---- */
.bb-fairnote {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; line-height: 1.45;
  background: var(--ck-surface-3); border: 1px solid var(--ck-line-strong);
  font-size: var(--ck-fs-sm, 13px); color: var(--ck-text-muted);
}
.bb-fairnote[hidden] { display: none; }
.bb-fairnote strong { color: var(--ck-text); }

/* ---- modals (how to play, menu, closed) ---- */
.bb-list { margin: 0 0 12px; padding-left: 20px; line-height: 1.55; }
.bb-list li + li { margin-top: 4px; }
.bb-h3 { margin: 16px 0 8px; font-size: var(--ck-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ck-tracking-caps); color: var(--ck-text-muted); }
.bb-muted { color: var(--ck-text-muted); font-size: var(--ck-fs-sm); line-height: 1.5; }
.bb-menu { display: grid; gap: 8px; margin-bottom: 12px; }
.bb-menu-btn { justify-content: flex-start; width: 100%; }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: 6px; background: var(--ck-surface-3); border: 1px solid var(--ck-line-strong); font: 500 12px var(--ck-font-mono); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .bb-shell *, .ck-overlay * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ---- preloader (index.html #bb-preloader, driven by src/ui/preloader.js) ---- */
.bb-pre {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: end center;
  background: var(--ck-bg); color: var(--ck-text); overflow: hidden;
  padding: 24px 16px max(28px, env(safe-area-inset-bottom));
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}
.bb-pre.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
/* generated key art (assets/preloader.webp) over the dusk gradient, which shows if the image is missing */
.bb-pre__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 70% 30%, rgba(255, 166, 207, .22), transparent 70%),
    linear-gradient(180deg, #2a2252 0%, #5b3672 45%, #c06486 78%, #f5a37f 100%);
}
.bb-pre__sky::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 20, 0) 45%, rgba(10, 10, 20, .62) 68%, rgba(10, 10, 20, .94) 100%);
}
.bb-pre__art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%; /* Candy in the gondola stays in frame on phones */
  animation: bb-pre-drift 14s ease-in-out infinite alternate;
}
.bb-pre__panel {
  position: relative; width: min(440px, 100%); display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center;
}
.bb-pre__title { margin: 0; font-size: clamp(28px, 6vw, 48px); line-height: 1; }
.bb-pre__tagline { margin: 0 0 6px; font-size: var(--ck-fs-md, 15px); color: rgba(245, 244, 251, .8); }
.bb-pre__bar { width: min(320px, 80%); height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .14); }
.bb-pre__fill {
  display: block; height: 100%; background: var(--ck-accent); border-radius: inherit;
  transform: scaleX(0); transform-origin: left center; transition: transform 240ms ease-out;
}
.bb-pre__status { margin: 0; min-height: 1.4em; font-size: var(--ck-fs-sm, 13px); color: rgba(245, 244, 251, .72); }
.bb-pre__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 4px; }
.bb-pre__choices[hidden] { display: none; }
.bb-pre__btn { min-height: 52px; gap: 8px; font-size: var(--ck-fs-md, 15px); text-transform: uppercase; letter-spacing: var(--ck-tracking-caps); font-weight: var(--ck-fw-bold); }
.bb-pre__hint { margin: 0; font-size: var(--ck-fs-xs, 12px); color: rgba(245, 244, 251, .52); }
.bb-pre:not(.is-ready) .bb-pre__hint { visibility: hidden; }
.bb-pre.is-ready .bb-pre__bar { opacity: 0; height: 0; margin: -6px 0 0; transition: opacity 200ms, height 200ms, margin 200ms; }
.bb-pre.is-ready .bb-pre__choices { animation: bb-pre-up 260ms ease-out both; }
/* wide screens: the art fills the top three quarters, the entry panel sits on the dark band */
@media (min-aspect-ratio: 4/5) {
  .bb-pre__art { height: 74%; object-position: 50% 42%; }
  .bb-pre__sky::after { background: linear-gradient(180deg, rgba(10, 10, 20, 0) 52%, rgba(10, 10, 20, .75) 66%, rgba(10, 10, 20, 1) 73.5%); }
}
/* tall screens: the art takes the top of the screen so Candy stays clear of the entry panel */
@media (max-aspect-ratio: 4/5) {
  .bb-pre__art { height: 64%; object-position: 46% 55%; }
  .bb-pre__sky::after { background: linear-gradient(180deg, rgba(10, 10, 20, 0) 40%, rgba(10, 10, 20, .72) 54%, rgba(10, 10, 20, 1) 63.5%); }
}
@keyframes bb-pre-drift { from { transform: scale(1.03) translateY(0); } to { transform: scale(1.07) translateY(-1.5%); } }
@keyframes bb-pre-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bb-pre, .bb-pre__fill { transition: none; }
  .bb-pre__art, .bb-pre.is-ready .bb-pre__choices { animation: none; }
}