/* Candy Drop: game-only styles on top of candy-kit (kit.css + theme.css): the board canvas, the
 * board controls (risk + rows), the logo, the plinko fairness modal and the preloader. 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; }
#cd-root { height: 100vh; height: 100dvh; }

/* ---- stage: the board canvas fills the kit canvas slot; the kit multiplier HUD is not used
   (results show on the board itself) ---- */
.ck-stage__canvas > canvas.cd-board { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; }
.cd-shell .ck-stage__hud { display: none; }
.cd-shell .ck-slot--stage { min-height: 300px; }
.cd-stage-note {
  position: absolute; z-index: 3; left: 14px; top: 12px; margin: 0; max-width: 40%;
  font-size: var(--ck-fs-xs); line-height: 1.4; color: var(--ck-text-muted); pointer-events: none;
}
.cd-stage-last {
  position: absolute; z-index: 3; right: 14px; top: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  pointer-events: none; text-align: right;
}
.cd-stage-last__label { font-size: var(--ck-fs-xs); color: var(--ck-text-muted); text-transform: uppercase; letter-spacing: var(--ck-tracking-caps); }
.cd-stage-last__value { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cd-stage-last__win { font-size: var(--ck-fs-sm); font-weight: 600; color: var(--ck-win); font-variant-numeric: tabular-nums; }
.cd-stage-last.is-lose .cd-stage-last__value { color: var(--ck-text-muted); }
.cd-stage-last.is-lose .cd-stage-last__win { color: var(--ck-text-muted); }
.cd-stage-last[hidden] { display: none; }

/* ---- board controls: risk segmented control + rows stepper + autobet count ---- */
.cd-controls { display: flex; flex-direction: column; gap: var(--ck-space-2, 8px); container: cd-controls / inline-size; }
/* wide: board options in a card on the left, the kit bet panel on the right (keeps the stage tall) */
@container ck-shell (min-width: 1000px) {
  .cd-controls { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); align-items: stretch; }
  .cd-board-row { flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; }
  .cd-board-row .cd-field { justify-content: space-between; }
  .cd-board-row .cd-seg { flex: 1; }
  .cd-board-row .cd-seg__btn { flex: 1; min-width: 0; }
  .cd-board-row .cd-rows { flex: 1; justify-content: flex-end; }
  .cd-board-row .cd-rows__range { flex: 1; width: auto; min-width: 0; }
  .cd-auto { margin-left: 0; }
  .cd-field__label { min-width: 4.5em; }
}
.cd-board-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ck-space-2, 8px) var(--ck-space-4, 16px);
  padding: 10px 12px; border: 1px solid var(--ck-line); border-radius: var(--ck-radius-panel, 16px); background: var(--ck-surface-1);
}
.cd-field { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cd-field__label { font-size: var(--ck-fs-xs); font-weight: 600; color: var(--ck-text-muted); text-transform: uppercase; letter-spacing: var(--ck-tracking-caps); }
.cd-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--ck-radius-pill); background: var(--ck-surface-3); border: 1px solid var(--ck-line); }
.cd-seg__btn {
  min-width: 64px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--ck-radius-pill);
  background: transparent; color: var(--ck-text-muted); font: 600 var(--ck-fs-sm) var(--ck-font);
}
.cd-seg__btn:hover:not(:disabled) { color: var(--ck-text); }
.cd-seg__btn[aria-checked="true"] { background: var(--ck-surface-active); color: var(--ck-text); box-shadow: inset 0 0 0 1px var(--ck-line-strong); }
.cd-seg__btn:disabled { opacity: .5; }
.cd-rows { display: inline-flex; align-items: center; gap: 10px; }
.cd-rows__range { width: 150px; accent-color: var(--ck-accent); }
.cd-rows__value { min-width: 2ch; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.cd-auto { margin-left: auto; }
.cd-auto[hidden] { display: none; }
.cd-auto .ck-select { min-width: 96px; }
.cd-lock-note { font-size: var(--ck-fs-xs); color: var(--ck-text-dim); }
.cd-lock-note[hidden] { display: none; }

/* ---- logo ---- */
.cd-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;
}
.cd-wordmark__mark {
  width: 1.05em; height: 1.05em; flex: none;
  background: url("../../assets/candy-mark.svg") center / contain no-repeat;
  margin-right: .06em;
}
.cd-wordmark__a { color: var(--ck-text); }
.cd-wordmark__b { color: var(--ck-accent); margin-left: -.12em; }
.cd-logo--side { font-size: 22px; }
.cd-logo--phone { font-size: 12px; }
.cd-logo--phone .cd-wordmark__mark { display: none; }

/* ---- phone ---- */
@container ck-shell (max-width: 767.98px) {
  .cd-shell .ck-slot--stage { flex: 1 1 auto; aspect-ratio: auto; min-height: max(300px, 92vw); }
  .cd-shell .ck-stepper__cur { display: none; }
  .cd-shell .ck-topbar--phone .ck-balance__cur { font-size: var(--ck-fs-sm); }
  .cd-board-row { padding: 8px 10px; gap: 8px 12px; }
  .cd-field { width: 100%; justify-content: space-between; }
  .cd-seg { flex: 1; max-width: 260px; }
  .cd-seg__btn { flex: 1; min-width: 0; height: 36px; }
  .cd-rows { flex: 1; justify-content: flex-end; max-width: 260px; }
  .cd-rows__range { flex: 1; width: auto; min-width: 0; height: 36px; }
  .cd-auto { margin-left: 0; }
  .cd-stage-note { display: none; }
  .cd-stage-last__value { font-size: 18px; }
}

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

/* ---- plinko fairness modal ---- */
.cd-fair .ck-fair__fields { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 560px) { .cd-fair .ck-fair__fields { grid-template-columns: 1fr 1fr; } .cd-fair .ck-field--nonce { grid-column: 1 / -1; } }
.cd-fair .ck-field--serverSeed, .cd-fair .ck-field--clientSeed { grid-column: 1 / -1; }
.cd-fair__select { width: 100%; }
.cd-path { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cd-path li {
  min-width: 26px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px;
  background: var(--ck-surface-3); border: 1px solid var(--ck-line); font: 600 12px var(--ck-font-mono);
}
.cd-path li.is-r { color: var(--ck-accent-2); }
.cd-path li.is-bad { border-color: var(--ck-danger); color: var(--ck-danger); }
.cd-result-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ck-line); font-size: var(--ck-fs-sm); }
.cd-result-row:first-child { border-top: 0; }
.cd-result-row__v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.cd-result-row__v.is-yes { color: var(--ck-success); }
.cd-result-row__v.is-no { color: var(--ck-danger); }
.cd-result-row__v.is-na { color: var(--ck-text-muted); font-weight: 500; }
.cd-path-block { padding: 8px 0 4px; border-top: 1px solid var(--ck-line); }
.cd-path-block > p { margin: 0 0 6px; font-size: var(--ck-fs-xs); color: var(--ck-text-muted); }

/* ---- modals (how to play, menu, closed) ---- */
.cd-list { margin: 0 0 12px; padding-left: 20px; line-height: 1.55; }
.cd-list li + li { margin-top: 4px; }
.cd-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); }
.cd-muted { color: var(--ck-text-muted); font-size: var(--ck-fs-sm); line-height: 1.5; }
.cd-menu { display: grid; gap: 8px; margin-bottom: 12px; }
.cd-menu-btn { justify-content: flex-start; width: 100%; }
.cd-paytable { width: 100%; border-collapse: collapse; font-size: var(--ck-fs-sm); font-variant-numeric: tabular-nums; }
.cd-paytable th, .cd-paytable td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--ck-line); }
.cd-paytable th { color: var(--ck-text-muted); font-weight: 600; }
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) {
  .cd-shell *, .ck-overlay * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ---- preloader (index.html #cd-preloader, driven by src/ui/preloader.js) ---- */
.cd-pre {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: radial-gradient(120% 80% at 50% 30%, #2a1838 0%, #160f20 55%, var(--ck-bg) 100%);
  color: var(--ck-text); overflow: hidden;
  padding: 24px 16px max(28px, env(safe-area-inset-bottom));
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}
.cd-pre.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.cd-pre__scene { position: relative; flex: none; width: 120px; height: 130px; }
.cd-pre__ball {
  position: absolute; left: 50%; top: 0; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 22%, transparent 23%), conic-gradient(#ec4489 0 25%, #fff 0 50%, #ec4489 0 75%, #fff 0);
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  animation: cd-pre-bounce 1.6s cubic-bezier(.4,0,.6,1) infinite;
}
.cd-pre__pegs { position: absolute; left: 0; right: 0; bottom: 8px; height: 44px; }
.cd-pre__pegs i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #f6eef8; opacity: .9; }
.cd-pre__pegs i:nth-child(1) { left: 56px; top: 0; }
.cd-pre__pegs i:nth-child(2) { left: 38px; top: 18px; } .cd-pre__pegs i:nth-child(3) { left: 74px; top: 18px; }
.cd-pre__pegs i:nth-child(4) { left: 20px; top: 36px; } .cd-pre__pegs i:nth-child(5) { left: 56px; top: 36px; } .cd-pre__pegs i:nth-child(6) { left: 92px; top: 36px; }
@keyframes cd-pre-bounce {
  0% { transform: translate(0, 0) rotate(0); }
  30% { transform: translate(0, 46px) rotate(60deg); }
  45% { transform: translate(-9px, 40px) rotate(100deg); }
  62% { transform: translate(-18px, 64px) rotate(160deg); }
  76% { transform: translate(-24px, 58px) rotate(200deg); opacity: 1; }
  92% { transform: translate(-30px, 86px) rotate(260deg); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 0; }
}
.cd-pre__panel {
  position: relative; width: min(440px, 100%); display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center;
}
.cd-pre__title { margin: 0; font-size: clamp(34px, 6vw, 56px); line-height: 1; }
.cd-pre__tagline { margin: 0 0 6px; font-size: var(--ck-fs-md, 15px); color: rgba(247, 243, 250, .78); }
.cd-pre__bar { width: min(320px, 80%); height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .14); }
.cd-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;
}
.cd-pre__status { margin: 0; min-height: 1.4em; font-size: var(--ck-fs-sm, 13px); color: rgba(247, 243, 250, .7); }
.cd-pre__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 4px; }
.cd-pre__choices[hidden] { display: none; }
.cd-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); }
.cd-pre__hint { margin: 0; font-size: var(--ck-fs-xs, 12px); color: rgba(247, 243, 250, .5); }
.cd-pre:not(.is-ready) .cd-pre__hint { visibility: hidden; }
.cd-pre.is-ready .cd-pre__bar { opacity: 0; height: 0; margin: -6px 0 0; transition: opacity 200ms, height 200ms, margin 200ms; }
.cd-pre.is-ready .cd-pre__choices { animation: cd-pre-up 260ms ease-out both; }
@keyframes cd-pre-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cd-pre, .cd-pre__fill { transition: none; }
  .cd-pre__ball, .cd-pre.is-ready .cd-pre__choices { animation: none; }
}

/* ---- Candy on her candy pile (src/ui/candy.js): left column on wide stages, corner on phones ---- */
.cd-candy { position: absolute; z-index: 2; left: 0; bottom: 0; height: 100%; pointer-events: none; }
.cd-candy[hidden] { display: none; }
.cd-candy.is-corner { top: 6px; left: 4px; bottom: auto; }
.cd-candy__figure { position: absolute; inset: 0; transform-origin: 50% 100%; animation: cd-candy-breathe 4.2s ease-in-out infinite; }
.cd-candy__img {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  user-select: none; transition: opacity .18s ease;
  filter: drop-shadow(0 10px 18px rgba(20, 4, 24, .45));
}
.cd-candy.is-side .cd-candy__img { height: 94%; }
.cd-candy__img--cheer { opacity: 0; }
.cd-candy.is-happy .cd-candy__img--idle, .cd-candy.is-cheer .cd-candy__img--idle, .cd-candy.is-jackpot .cd-candy__img--idle { opacity: 0; }
.cd-candy.is-happy .cd-candy__img--cheer, .cd-candy.is-cheer .cd-candy__img--cheer, .cd-candy.is-jackpot .cd-candy__img--cheer { opacity: 1; }
.cd-candy__glow {
  position: absolute; left: 8%; right: 8%; bottom: 6%; height: 45%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ck-accent) 45%, transparent), transparent);
  opacity: .35; transition: opacity .3s ease; filter: blur(6px);
}
.cd-candy.is-hop .cd-candy__glow, .cd-candy.is-happy .cd-candy__glow { opacity: .6; }
.cd-candy.is-cheer .cd-candy__glow { opacity: .85; }
.cd-candy.is-jackpot .cd-candy__glow { opacity: 1; background: radial-gradient(closest-side, rgba(255, 205, 90, .7), transparent); }
.cd-candy.is-hop .cd-candy__figure { animation: cd-candy-hop .8s cubic-bezier(.3, .7, .4, 1); }
.cd-candy.is-happy .cd-candy__figure { animation: cd-candy-cheer .7s cubic-bezier(.3, .7, .4, 1) 2; }
.cd-candy.is-cheer .cd-candy__figure { animation: cd-candy-cheer .9s cubic-bezier(.3, .7, .4, 1) 2; }
.cd-candy.is-jackpot .cd-candy__figure { animation: cd-candy-cheer .8s cubic-bezier(.3, .7, .4, 1) 4; }
.cd-candy__sparkles { position: absolute; left: 50%; top: 30%; width: 0; height: 0; }
.cd-candy__sparkles i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 25%, var(--ck-accent) 60%, transparent 70%);
  --a: calc(var(--i) * 45deg);
}
.cd-candy.is-cheer .cd-candy__sparkles i, .cd-candy.is-jackpot .cd-candy__sparkles i { animation: cd-candy-spark 1.1s ease-out calc(var(--i) * 40ms) 2; }
.cd-candy.is-jackpot .cd-candy__sparkles i { background: radial-gradient(circle, #fff 0 25%, #ffcd5a 60%, transparent 70%); }
@keyframes cd-candy-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.2%) scale(1.008); } }
@keyframes cd-candy-hop { 0% { transform: translateY(0); } 30% { transform: translateY(-8%) scale(1.03); } 60% { transform: translateY(0) scale(1.03, .97); } 80% { transform: translateY(-2%); } 100% { transform: none; } }
@keyframes cd-candy-cheer { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-9%) scale(1.05) rotate(-2deg); } 60% { transform: translateY(0) scale(.98, 1.02); } 100% { transform: none; } }
@keyframes cd-candy-spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(90px) scale(1.1); }
}
.cd-candy.is-reduced .cd-candy__figure, .cd-candy.is-reduced .cd-candy__sparkles i { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cd-candy__figure, .cd-candy__sparkles i { animation: none !important; }
}