/* Cherry High: game-only styles on top of candy-kit (kit.css + theme.css). The stage canvas, the
 * wordmark, the target / autobet panels, the preloader 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; }
#ch-root { height: 100vh; height: 100dvh; }

/* Kit bug guard: .ck-app is overflow:hidden, so focusing a control in the (off-canvas) phone drawer
   can scroll the whole app sideways (seen with the Top tab: 50px). clip never scrolls. */
.ch-shell .ck-app { overflow-x: clip; }

/* ---- stage: one canvas (sky, gauge, ribbon, Candy) fills the kit canvas slot ---- */
.ck-stage__canvas > canvas.ch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch-shell .ck-stage__hud { max-width: 44%; right: 5%; }
@container ck-stage (max-width: 559.98px) { .ch-shell .ck-stage__hud { max-width: 50%; right: 4%; } }
.ch-shell .ck-stage__caption { max-width: 30ch; color: rgba(249, 242, 246, .66); }
.ch-shell .ck-stage.is-cashed .ck-stage__caption { color: var(--ck-win); font-weight: var(--ck-fw-semibold); }
.ch-shell .ck-stage.is-running .ck-stage__mult { opacity: .96; }
.ch-shell .ck-stage.is-launch .ck-stage__mult { opacity: .5; }

/* ---- logo: flat typeset wordmark (CHERRY + HIGH in the accent) with the cherry mark ---- */
.ch-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;
}
.ch-wordmark__mark { width: 1.1em; height: 1.1em; flex: none; background: url("../../assets/cherry-mark.svg") center / contain no-repeat; margin-right: .04em; }
.ch-wordmark__a { color: var(--ck-text); }
.ch-wordmark__b { color: var(--ck-accent-2); margin-left: -.1em; }
.ch-logo--side { font-size: 22px; }
.ch-logo--phone { font-size: 12px; }
.ch-logo--phone .ch-wordmark__mark { display: none; }

/* ---- controls: target panel + kit bet panel side by side; autobet settings span the row ---- */
.ch-shell .ck-slot--controls { align-items: stretch; }
.ch-target, .ch-auto {
  display: flex; flex-direction: column; gap: var(--ck-space-2); min-width: 0;
  padding: var(--ck-space-3); border-radius: var(--ck-radius-panel);
  background: var(--ck-surface-1); border: 1px solid var(--ck-line);
}
.ch-auto { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--ck-space-3); }
.ch-auto[hidden] { display: none; }
.ch-target__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ck-space-2); min-height: 32px; }
.ch-target__label, .ch-limit__label { font-size: var(--ck-fs-sm); font-weight: var(--ck-fw-medium); color: var(--ck-text); }
.ch-target__chance { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.ch-target__k { font-size: var(--ck-fs-xs); color: var(--ck-text-muted); }
.ch-target__chance-v { font-size: var(--ck-fs-md); font-weight: var(--ck-fw-semibold); }
.ch-target__stepper { padding: var(--ck-space-2); border-radius: var(--ck-radius-card); background: var(--ck-surface-3); box-shadow: inset 0 0 0 1px var(--ck-line); height: auto; }
.ch-target__field { align-items: baseline; }
.ch-target__x { color: var(--ck-text-muted); font-size: var(--ck-fs-md); font-weight: var(--ck-fw-semibold); }
.ch-target__input { text-align: left; }
.ch-target__chips .ck-qchip.is-active { background: var(--ck-accent-soft); color: var(--ck-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ck-accent) 60%, transparent); }
.ch-target__pays { margin: 0; font-size: var(--ck-fs-xs); color: var(--ck-text-muted); }
.ch-target__error { margin: 0; color: var(--ck-danger); font-size: var(--ck-fs-sm); }
.ch-target.is-locked .ch-target__stepper, .ch-auto.is-locked .ch-auto__limits { opacity: .7; }

.ch-auto__count { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ch-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: calc(var(--ck-radius-pill) + 2px); background: var(--ck-surface-3); border: 1px solid var(--ck-line); }
.ch-seg__btn { min-width: 44px; height: 32px; padding: 0 var(--ck-space-2); border: 0; border-radius: var(--ck-radius-pill); background: transparent; color: var(--ck-text-muted); font-size: var(--ck-fs-sm); font-weight: var(--ck-fw-semibold); font-variant-numeric: tabular-nums; }
.ch-seg__btn:hover:not(:disabled) { color: var(--ck-text); background: var(--ck-surface-hover); }
.ch-seg__btn.is-active { background: var(--ck-surface-active); color: var(--ck-text); }
.ch-seg__btn:disabled { opacity: .55; }
.ch-auto__limits { display: flex; gap: var(--ck-space-3); flex: 1 1 260px; min-width: 0; }
.ch-limit { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; }
.ch-limit__box { position: relative; }
.ch-limit__input { font-family: var(--ck-font); font-size: var(--ck-fs-md); font-variant-numeric: tabular-nums; padding-right: 52px; min-height: 36px; }
.ch-limit__cur { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--ck-text-muted); font-size: var(--ck-fs-xs); pointer-events: none; }
.ch-auto__status { margin: 0; flex-basis: 100%; font-size: var(--ck-fs-sm); color: var(--ck-text-muted); font-variant-numeric: tabular-nums; }

/* phone: one column, the stage takes the free height */
@container ck-shell (max-width: 767.98px) {
  .ch-shell .ck-slot--stage { flex: 1 1 auto; aspect-ratio: auto; min-height: max(220px, 52vw); }
  .ch-shell .ck-stepper__cur { display: none; }
  .ch-shell .ck-topbar--phone .ck-balance__cur { font-size: var(--ck-fs-sm); }
  .ch-target { padding: var(--ck-space-2) var(--ck-space-3); }
  .ch-target__pays { display: none; }
  .ch-auto { padding: var(--ck-space-2) var(--ck-space-3); gap: var(--ck-space-2); }
  .ch-seg__btn { min-width: 40px; height: 36px; }
}

/* tablet: the centre column (~450px) cannot fit sound group + "How to play?" + a FUN balance with
   its DEMO tag + menu; the how-to pill goes icon-only (its label stays for screen readers) */
@container ck-shell (min-width: 768px) and (max-width: 1199.98px) {
  .ch-shell .ck-topbar__howto { padding: 0 10px; }
  .ch-shell .ck-topbar__howto > span:not(.ck-pill__icon) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

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

/* ---- modals ---- */
.ch-list { margin: 0 0 12px; padding-left: 20px; line-height: 1.55; }
.ch-list li + li { margin-top: 4px; }
.ch-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); }
.ch-muted { color: var(--ck-text-muted); font-size: var(--ck-fs-sm); line-height: 1.5; }
.ch-menu { display: grid; gap: 8px; margin-bottom: 12px; }
.ch-menu-btn { justify-content: flex-start; width: 100%; }
.ch-fair-note { margin: 0 0 var(--ck-space-3); padding: var(--ck-space-3); border-radius: var(--ck-radius-card); background: var(--ck-surface-3); border: 1px solid var(--ck-line); color: var(--ck-text-muted); font-size: var(--ck-fs-sm); line-height: 1.5; }
.ch-fair-note[hidden] { display: none; }
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) {
  .ch-shell *, .ck-overlay * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ---- preloader (index.html #ch-preloader, driven by src/ui/preloader.js) ---- */
.ch-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;
}
.ch-pre.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.ch-pre__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 108%, rgba(255, 92, 138, .34), transparent 70%),
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 34% 30%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 62% 24%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 40%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 20% 46%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(180deg, #120a1a 0%, #2a1030 55%, #4a1532 100%);
}
.ch-pre__art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;   /* Candy stays in frame on tall phones */
  animation: ch-pre-drift 12s ease-in-out infinite alternate;
}
.ch-pre__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 8, 13, 0) 45%, rgba(13, 8, 13, .7) 70%, rgba(13, 8, 13, .95) 100%); }
.ch-pre__panel { position: relative; width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ch-pre__title { margin: 0; font-size: clamp(34px, 6vw, 56px); line-height: 1; }
.ch-pre__tagline { margin: 0 0 6px; font-size: var(--ck-fs-md, 15px); color: rgba(249, 242, 246, .8); }
.ch-pre__bar { width: min(320px, 80%); height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .14); }
.ch-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; }
.ch-pre__status { margin: 0; min-height: 1.4em; font-size: var(--ck-fs-sm, 13px); color: rgba(249, 242, 246, .7); }
.ch-pre__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 4px; }
.ch-pre__choices[hidden] { display: none; }
.ch-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); }
.ch-pre__hint { margin: 0; font-size: var(--ck-fs-xs, 12px); color: rgba(249, 242, 246, .5); }
.ch-pre:not(.is-ready) .ch-pre__hint { visibility: hidden; }
.ch-pre.is-ready .ch-pre__bar { opacity: 0; height: 0; margin: -6px 0 0; transition: opacity 200ms, height 200ms, margin 200ms; }
.ch-pre.is-ready .ch-pre__choices { animation: ch-pre-up 260ms ease-out both; }
@keyframes ch-pre-drift { from { transform: scale(1.03); } to { transform: scale(1.07) translateY(-1.2%); } }
@keyframes ch-pre-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ch-pre, .ch-pre__fill { transition: none; }
  .ch-pre__art, .ch-pre.is-ready .ch-pre__choices { animation: none; }
}