/* Sugar Rush: game-only styles on top of candy-kit (kit.css + theme.css). Only the stage canvas,
 * the logo and a few modal bits 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; }
#sr-root { height: 100vh; height: 100dvh; }

/* ---- stage: two stacked canvases (sky/city + comet/fx) fill the kit canvas slot ---- */
.ck-stage__canvas > canvas.sr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sr-canvas--fx { z-index: 1; }
/* the kit multiplier sits in the canvas's HUD-safe RIGHT column (render/geometry.js HUD_FRAC);
   Candy flies straight up in the flight zone on the left */
.sr-shell .ck-stage__hud { max-width: 46%; right: 5%; }
@container ck-stage (max-width: 559.98px) { .sr-shell .ck-stage__hud { max-width: 54%; right: 4%; } }
.sr-shell .ck-stage__caption { max-width: 34ch; color: rgba(247, 243, 250, .62); }
.sr-shell .ck-stage.is-stalled .ck-stage__mult { opacity: .55; }
.sr-shell .ck-stage.is-waiting .ck-stage__canvas { opacity: .55; }

/* ---- logo ---- */
/* Flat typeset wordmark: SUGAR (text) + RUSH (accent), Inter 800, tight tracking, and the mark:
   the swirl peppermint from the nose of Candy's rocket (assets/candy-mark.svg, tools/make-icon.py). */
.sr-wordmark {
  display: inline-flex; align-items: center; gap: .32em;
  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;
}
.sr-wordmark__mark {
  width: 1.05em; height: 1.05em; flex: none; border-radius: 50%;
  background: url("../../assets/candy-mark.svg") center / contain no-repeat;
  margin-right: .06em;
}
.sr-wordmark__a { color: var(--ck-text); }
.sr-wordmark__b { color: var(--ck-accent); margin-left: -.12em; }
.sr-logo--side { font-size: 22px; }
/* Phone: the centre column between balance and three 44px icons is ~85px, so drop the mark and
   size the text to fit instead of overlapping the icons. */
.sr-logo--phone { font-size: 12px; }
.sr-logo--phone .sr-wordmark__mark { display: none; }

/* ---- phone: one bet panel, so the stage takes the free height (reference phone layout) ---- */
@container ck-shell (max-width: 767.98px) {
  .sr-shell .ck-slot--stage { flex: 1 1 auto; aspect-ratio: auto; min-height: max(240px, 56vw); }
  /* 44px stepper buttons leave no room for "FUN" next to an 18-dp amount; the CTA shows it */
  .sr-shell .ck-stepper__cur { display: none; }
  .sr-shell .ck-topbar--phone .ck-balance__cur { font-size: var(--ck-fs-sm); }
}

/* ---- autobet: make the running state obvious ---- */
.ck-betpanel.is-autobet { border-color: color-mix(in srgb, var(--ck-accent) 55%, transparent); }

/* ---- modals (how to play, menu, closed) ---- */
.sr-list { margin: 0 0 12px; padding-left: 20px; line-height: 1.55; }
.sr-list li + li { margin-top: 4px; }
.sr-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); }
.sr-muted { color: var(--ck-text-muted); font-size: var(--ck-fs-sm); line-height: 1.5; }
.sr-menu { display: grid; gap: 8px; margin-bottom: 12px; }
.sr-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) {
  .sr-shell *, .ck-overlay * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ---- preloader (index.html #sr-preloader, driven by src/ui/preloader.js) ---- */
.sr-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;
}
.sr-pre.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.sr-pre__art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 52% 35%; /* Candy stays in frame on tall phones */
  animation: sr-pre-drift 12s ease-in-out infinite alternate;
}
.sr-pre__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 9, 17, 0) 35%, rgba(12, 9, 17, .55) 62%, rgba(12, 9, 17, .92) 100%);
}
.sr-pre__panel {
  position: relative; width: min(440px, 100%); display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center;
}
.sr-pre__title { margin: 0; font-size: clamp(34px, 6vw, 56px); line-height: 1; }
.sr-pre__tagline { margin: 0 0 6px; font-size: var(--ck-fs-md, 15px); color: rgba(247, 243, 250, .78); }
.sr-pre__bar {
  width: min(320px, 80%); height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .14);
}
.sr-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;
}
.sr-pre__status { margin: 0; min-height: 1.4em; font-size: var(--ck-fs-sm, 13px); color: rgba(247, 243, 250, .7); }
.sr-pre__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 4px; }
.sr-pre__choices[hidden] { display: none; }
.sr-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); }
.sr-pre__hint { margin: 0; font-size: var(--ck-fs-xs, 12px); color: rgba(247, 243, 250, .5); }
.sr-pre:not(.is-ready) .sr-pre__hint { visibility: hidden; }
.sr-pre.is-ready .sr-pre__bar { opacity: 0; height: 0; margin: -6px 0 0; transition: opacity 200ms, height 200ms, margin 200ms; }
.sr-pre.is-ready .sr-pre__choices { animation: sr-pre-up 260ms ease-out both; }
@keyframes sr-pre-drift { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.08) translateY(-1.5%); } }
@keyframes sr-pre-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sr-pre, .sr-pre__fill { transition: none; }
  .sr-pre__art, .sr-pre.is-ready .sr-pre__choices { animation: none; }
}