/* Spin Me Sweet: game-only styles on top of candy-kit (kit.css + theme.css): the wheel stage,
 * the segment/risk pickers, the legend, the wordmark, the preloader and a few modal bits.
 * 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; }
#sw-root { height: 100vh; height: 100dvh; }

:root {
  /* wheel colour slots (= src/ui/wheel-renderer.js PALETTE fill) */
  --sw-slot-zero: #3a2f49; --sw-slot-c1: #a493f7; --sw-slot-c2: #5cc8ec; --sw-slot-c3: #40d4b2;
  --sw-slot-c4: #ff86b7; --sw-slot-c5: #ffa24d; --sw-slot-c6: #ffcf5c;
}

/* ---- stage: the wheel canvas over the stage, legend + result line under it ---- */
.sw-stage .ck-stage__hud, .sw-stage .ck-stage__art { display: none; }
/* Candy (assets/candy-{idle,kiss,confetti}.webp): the poses are stacked and cross-fade
   (src/app.js setPose). Wide stages: a full-height column LEFT of the wheel, facing it.
   Narrow stages (phones, small tablets): small, in the bottom-left corner. */
.sw-candy {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 0% 100%;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45)); transform-origin: 30% 100%;
  opacity: 0; transition: opacity 220ms ease; pointer-events: none;
}
.sw-candy.is-on { opacity: 1; }
.sw-stage.is-win .sw-candy.is-on { animation: sw-candy-cheer 700ms cubic-bezier(.3, 1.6, .5, 1) both; }
@container ck-stage (min-width: 720px) {
  .sw-stage .ck-stage__art { display: block; left: 2%; right: auto; top: 6%; bottom: 14%; width: 23%; }
  .sw-candy { object-position: 50% 100%; transform-origin: 50% 100%; }
}
@container ck-stage (max-width: 719.98px) {
  .sw-stage .ck-stage__art { display: block; left: 2%; right: auto; top: auto; bottom: 2%; width: 21%; height: 40%; }
}
@keyframes sw-candy-cheer { 0% { transform: none; } 40% { transform: translateY(-4%) scale(1.03) rotate(-2deg); } 100% { transform: none; } }
.sw-stage .ck-stage__canvas { display: flex; flex-direction: column; align-items: stretch; }
.sw-stage .ck-stage__canvas > canvas.sw-canvas { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; height: auto; }
.sw-result {
  margin: 0; min-height: 1.4em; padding: 0 12px; text-align: center;
  font-size: var(--ck-fs-sm); font-weight: var(--ck-fw-semibold); color: var(--ck-text-muted); font-variant-numeric: tabular-nums;
}
.sw-legend-wrap { flex: none; padding: 8px 12px 12px; }
.sw-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sw-legend__item {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px;
  border-radius: var(--ck-radius-pill); background: rgba(255, 255, 255, .05); border: 1px solid var(--ck-line);
  font-size: var(--ck-fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sw-legend__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sw-dot, var(--sw-slot-zero)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.sw-legend__mult { font-weight: var(--ck-fw-bold); color: var(--ck-text); }
.sw-legend__chance { color: var(--ck-text-muted); }
.sw-legend__item.is-hit { border-color: color-mix(in srgb, var(--sw-dot) 70%, transparent); background: color-mix(in srgb, var(--sw-dot) 16%, transparent); }
.sw-slot--zero { --sw-dot: var(--sw-slot-zero); }
.sw-slot--c1 { --sw-dot: var(--sw-slot-c1); }
.sw-slot--c2 { --sw-dot: var(--sw-slot-c2); }
.sw-slot--c3 { --sw-dot: var(--sw-slot-c3); }
.sw-slot--c4 { --sw-dot: var(--sw-slot-c4); }
.sw-slot--c5 { --sw-dot: var(--sw-slot-c5); }
.sw-slot--c6 { --sw-dot: var(--sw-slot-c6); }

/* ---- controls: pickers card + kit bet panel side by side; stacked on narrow screens ---- */
.sw-shell .ck-slot--controls { grid-template-columns: minmax(0, 1fr); }
.sw-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--ck-gap); align-items: stretch; }
.sw-pick {
  display: flex; flex-direction: column; justify-content: center; gap: var(--ck-space-3);
  padding: var(--ck-space-4); border-radius: var(--ck-radius-panel); background: var(--ck-surface-1); border: 1px solid var(--ck-line);
}
.sw-pick__group { display: grid; gap: 6px; }
.sw-pick__label { font-size: var(--ck-fs-xs); font-weight: var(--ck-fw-semibold); color: var(--ck-text-muted); text-transform: uppercase; letter-spacing: var(--ck-tracking-caps); }
.sw-pick__opt { font-variant-numeric: tabular-nums; cursor: pointer; }
.sw-pick__opt[aria-checked="true"] { background: var(--ck-accent); color: #fff; box-shadow: none; }
.sw-pick__opt:disabled { opacity: .4; cursor: not-allowed; }
.sw-pick__opt[aria-checked="true"]:disabled { opacity: .7; }
.sw-pick__opt:focus-visible { outline: 2px solid var(--ck-focus); outline-offset: 1px; }
.sw-pick.is-locked .sw-pick__label::after { content: " · locked while spinning"; text-transform: none; letter-spacing: 0; font-weight: var(--ck-fw-medium); color: var(--ck-text-dim); }

/* the round-row "name" holds the pick (8/20 · Med): every row is the player's own, so no avatar */
.sw-shell .ck-betrow { grid-template-columns: minmax(0, 1fr) auto 64px minmax(60px, auto); }
.sw-shell .ck-betrow > .ck-avatar { display: none; }
.sw-shell .ck-betrow.is-mine .ck-betrow__name { font-variant-numeric: tabular-nums; color: var(--ck-text-muted); font-weight: var(--ck-fw-medium); }

@container ck-shell (max-width: 1199.98px) {
  .sw-controls { grid-template-columns: minmax(0, 1fr); }
  .sw-pick { flex-direction: row; flex-wrap: wrap; }
  .sw-pick__group { flex: 1 1 220px; }
}

/* ---- phone: wheel, pickers, stake and SPIN fit one screen without scrolling. The legend sits
   at the TOP of the stage; the result line is folded into the hub (it already shows the multiplier
   and the win; screen readers still get the full sentence). Pickers are one row each. ---- */
@container ck-shell (max-width: 767.98px) {
  .sw-shell .ck-slot--stage { aspect-ratio: auto; height: min(90vw, 43vh); min-height: 260px; }
  .sw-stage .sw-legend-wrap { order: -1; padding: 8px 8px 0; }
  .sw-stage .sw-result { display: none; }
  .sw-pick { padding: var(--ck-space-2) var(--ck-space-3); gap: 6px; }
  .sw-pick__group { flex: 1 1 100%; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; }
  .sw-pick__track .ck-tab { height: 34px; }
  .sw-pick.is-locked .sw-pick__label::after { content: none; }
  .sw-legend { gap: 4px; }
  .sw-legend__item { height: 22px; padding: 0 7px 0 6px; gap: 4px; }
  .sw-shell .ck-stepper__cur { display: none; }
  .sw-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); }

/* ---- wordmark: flat, typeset (no image). The mark is the wheel icon. ---- */
.sw-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;
}
.sw-wordmark__mark { width: 1.1em; height: 1.1em; flex: none; background: url("../../assets/wheel-mark.svg") center / contain no-repeat; margin-right: .04em; }
.sw-wordmark__a { color: var(--ck-text); }
.sw-wordmark__b { color: var(--ck-accent); }
.sw-logo--side { font-size: 19px; }
.sw-logo--phone { font-size: 12px; }
.sw-logo--phone .sw-wordmark__mark { display: none; }

/* ---- modals (how to play, menu, closed) ---- */
.sw-list { margin: 0 0 12px; padding-left: 20px; line-height: 1.55; }
.sw-list li + li { margin-top: 4px; }
.sw-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); }
.sw-muted { color: var(--ck-text-muted); font-size: var(--ck-fs-sm); line-height: 1.5; }
.sw-menu { display: grid; gap: 8px; margin-bottom: 12px; }
.sw-menu-btn { justify-content: flex-start; width: 100%; }
.sw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 12px; margin: 0 0 12px; padding: 12px; border-radius: var(--ck-radius-card); background: var(--ck-surface-2); }
.sw-stats dt { grid-row: 1; font-size: var(--ck-fs-xs); color: var(--ck-text-muted); }
.sw-stats dd { grid-row: 2; margin: 0; font-weight: var(--ck-fw-bold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sw-fair__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sw-fair__fields .ck-field--serverSeed, .sw-fair__fields .ck-field--clientSeed { grid-column: 1 / -1; }
.sw-fair__demo { margin-top: 8px; }
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) {
  .sw-shell *, .ck-overlay * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ---- preloader (index.html #sw-preloader, driven by src/ui/preloader.js) ---- */
.sw-pre {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: radial-gradient(90% 70% at 50% 38%, #2e1b3d 0%, #160e1f 60%, #0c0911 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;
}
.sw-pre.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.sw-pre__wheel {
  position: relative; width: min(46vmin, 260px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 60%, rgba(0, 0, 0, .25) 61%, transparent 62%),
    conic-gradient(from -18deg, #ffcf5c 0 36deg, #2b2137 0 72deg, #40d4b2 0 108deg, #2b2137 0 144deg, #ff86b7 0 180deg,
      #2b2137 0 216deg, #a493f7 0 252deg, #2b2137 0 288deg, #5cc8ec 0 324deg, #2b2137 0 360deg);
  box-shadow: 0 0 0 10px #e8478d, 0 0 0 11px rgba(255, 255, 255, .2), 0 24px 60px rgba(0, 0, 0, .5);
  animation: sw-pre-spin 6s linear infinite;
}
.sw-pre__hub { position: absolute; inset: 37%; border-radius: 50%; background: #fff4f8; box-shadow: 0 0 0 4px rgba(20, 10, 28, .5); }
.sw-pre__pointer { display: none; }
.sw-pre__panel { position: relative; width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sw-pre__title { margin: 0; font-size: clamp(30px, 5.4vw, 50px); line-height: 1; }
.sw-pre__tagline { margin: 0 0 6px; font-size: var(--ck-fs-md, 15px); color: rgba(247, 243, 250, .78); }
.sw-pre__bar { width: min(320px, 80%); height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .14); }
.sw-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; }
.sw-pre__status { margin: 0; min-height: 1.4em; font-size: var(--ck-fs-sm, 13px); color: rgba(247, 243, 250, .7); }
.sw-pre__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 4px; }
.sw-pre__choices[hidden] { display: none; }
.sw-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); }
.sw-pre__hint { margin: 0; font-size: var(--ck-fs-xs, 12px); color: rgba(247, 243, 250, .5); }
.sw-pre:not(.is-ready) .sw-pre__hint { visibility: hidden; }
.sw-pre.is-ready .sw-pre__bar { opacity: 0; height: 0; margin: -6px 0 0; transition: opacity 200ms, height 200ms, margin 200ms; }
.sw-pre.is-ready .sw-pre__choices { animation: sw-pre-up 260ms ease-out both; }
.sw-pre.is-ready .sw-pre__wheel { animation-duration: 14s; }
@keyframes sw-pre-spin { to { transform: rotate(360deg); } }
@keyframes sw-pre-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sw-pre, .sw-pre__fill { transition: none; }
  .sw-pre__wheel, .sw-pre.is-ready .sw-pre__choices { animation: none; }
}