/* Velvet Tower: game-only styles on top of candy-kit (kit.css + theme.css): the stage scene, the
 * tower of candy-box doors, the difficulty selector, the wordmark, modals 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; }
#vt-root { height: 100vh; height: 100dvh; }
.vt-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the left column never scrolls sideways (a focused tab or a long row name could shift it) */
.vt-shell .ck-col--left, .vt-shell .ck-col--left > *, .vt-shell .ck-bets { overflow-x: clip; }

/* lost-climb tier (0x) for chips and pills */
.ck-tier--lost { background: var(--ck-tier-lost-bg); color: var(--ck-tier-lost-fg); }

/* ---- wordmark ---- */
.vt-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;
}
.vt-wordmark__mark { width: 1.1em; height: 1.1em; flex: none; background: url("../../assets/vt-mark.svg") center / contain no-repeat; margin-right: .04em; }
.vt-wordmark__a { color: var(--ck-text); }
.vt-wordmark__b { color: var(--ck-win); }
.vt-logo--side { font-size: 21px; }
.vt-logo--phone { font-size: 12px; }
.vt-logo--phone .vt-wordmark__mark { display: none; }

/* ---- stage: velvet scene + HUD left + tower right ---- */
.vt-scene { position: absolute; inset: 0; overflow: hidden; }
.vt-scene::before { /* soft spotlight on the tower */
  content: ""; position: absolute; inset: -10% 0 0 30%;
  background: radial-gradient(50% 60% at 55% 0%, rgba(255, 217, 236, .13), transparent 70%);
}
.vt-scene__curtain { position: absolute; top: 0; bottom: 0; width: 9%; max-width: 90px; opacity: .75;
  background: repeating-linear-gradient(90deg, #3a0b22 0 10px, #64173c 10px 20px, #43102a 20px 30px); }
.vt-scene__curtain--l { left: 0; border-bottom-right-radius: 60% 18%; }
.vt-scene__curtain--r { right: 0; border-bottom-left-radius: 60% 18%; }

.vt-candy { position: absolute; z-index: 1; left: 10%; bottom: 0; height: 54%; max-width: 30%; object-fit: contain; object-position: left bottom; pointer-events: none; user-select: none;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)); }
.vt-candy[data-stage="6"] { left: 4%; height: 46%; max-width: 44%; } /* the chaise is landscape */
.vt-candy.is-changing { animation: vt-candy-in 420ms ease-out; }
@keyframes vt-candy-in { from { opacity: .2; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.vt-shell .ck-stage__hud { max-width: 40%; left: 7%; z-index: 4; top: 8%; transform: none; }
.vt-shell .ck-stage__caption { max-width: 30ch; color: rgba(251, 243, 247, .72); }
.vt-random { margin-top: var(--ck-space-2); align-self: flex-start; min-height: 36px; font-size: var(--ck-fs-sm); }
.vt-towerhost { position: absolute; z-index: 3; top: 3%; bottom: 3%; right: 9%; width: min(48%, 460px); display: flex; }

/* ---- the tower ---- */
.vt-tower { flex: 1; display: flex; min-height: 0; }
.vt-tower__floors {
  list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0;
  display: grid; grid-template-rows: repeat(9, minmax(0, 1fr)); gap: clamp(3px, .8cqh, 7px);
}
.vt-floor {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 76px; align-items: center; gap: 8px;
  min-height: 0; padding: 2px 6px; border-radius: 12px; border: 1px solid transparent;
  transition: background var(--ck-dur), border-color var(--ck-dur), opacity var(--ck-dur);
}
.vt-floor__num { font-size: 11px; font-weight: 700; color: var(--ck-text-dim); text-align: center; font-variant-numeric: tabular-nums; }
.vt-floor__doors { display: grid; grid-template-columns: repeat(var(--vt-doors, 3), minmax(0, 96px)); justify-content: center; gap: clamp(4px, 1cqi, 10px); height: 100%; min-height: 0; }
.vt-floor__mult {
  justify-self: end; padding: 3px 8px; border-radius: var(--ck-radius-pill); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ck-text-muted); background: rgba(255, 255, 255, .05); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.vt-floor.is-ahead, .vt-floor.is-idle { opacity: .62; }
.vt-floor.is-current { background: rgba(236, 68, 137, .12); border-color: color-mix(in srgb, var(--ck-accent) 60%, transparent); opacity: 1; }
.vt-floor.is-current .vt-floor__num { color: var(--ck-accent-2); }
.vt-floor.is-current .vt-floor__mult { color: #fff; background: var(--ck-accent); }
.vt-floor.is-done .vt-floor__mult { color: var(--ck-win); background: rgba(255, 195, 92, .12); }
.vt-floor.is-bust { background: rgba(255, 85, 119, .1); border-color: rgba(255, 85, 119, .45); }
.vt-floor.is-bust .vt-floor__mult { color: var(--ck-danger); text-decoration: line-through; }
.vt-tower.is-revealed .vt-floor.is-ahead { opacity: .85; }

/* doors */
.vt-door {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; height: 100%;
  padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.vt-door__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vt-door .vt-d-sweet, .vt-door .vt-d-sour { opacity: 0; transform-origin: 50% 55%; transform: scale(.6); transition: opacity 220ms ease, transform 260ms cubic-bezier(.2, 1.4, .4, 1); }
.vt-door .vt-d-lid { transform-origin: 50% 6%; transition: transform 280ms cubic-bezier(.3, .7, .3, 1), opacity 280ms ease; }
.vt-door.is-open { cursor: pointer; }
.vt-door.is-open:hover .vt-d-lid, .vt-door.is-open:focus-visible .vt-d-lid { transform: translateY(-3%) scale(1.03); }
.vt-door.is-open:active .vt-d-lid { transform: scale(.97); }
.vt-door:focus-visible { outline: 2px solid var(--ck-focus); outline-offset: 2px; }
.vt-door.is-locked .vt-d-lid { opacity: .55; }
.vt-door.is-wait .vt-d-lid { opacity: .5; }
.vt-door.is-pending .vt-d-lid { animation: vt-jiggle 520ms ease-in-out infinite; }
.vt-door.is-safe .vt-d-lid, .vt-door.is-bust .vt-d-lid,
.vt-door.is-reveal-safe .vt-d-lid, .vt-door.is-reveal-bad .vt-d-lid { transform: scaleY(.08) translateY(-40%); opacity: 0; }
.vt-door.is-safe .vt-d-sweet, .vt-door.is-reveal-safe .vt-d-sweet { opacity: 1; transform: none; }
.vt-door.is-bust .vt-d-sour, .vt-door.is-reveal-bad .vt-d-sour { opacity: 1; transform: none; }
.vt-door.is-reveal-safe .vt-door__art, .vt-door.is-reveal-bad .vt-door__art { opacity: .45; }
.vt-door.is-safe { box-shadow: 0 0 0 1.5px rgba(255, 195, 92, .7); }
.vt-door.is-bust { box-shadow: 0 0 0 1.5px var(--ck-danger); animation: vt-shake 380ms ease-in-out 1; }
.vt-tower.is-revealing .vt-door.is-reveal-safe .vt-d-sweet, .vt-tower.is-revealing .vt-door.is-reveal-bad .vt-d-sour { transition-delay: 160ms; }
@keyframes vt-jiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2.5deg); } }
@keyframes vt-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.vt-shell .ck-stage.is-busy .vt-door.is-open { cursor: progress; }

/* ---- confetti (top of the tower) ---- */
.vt-confetti { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; border-radius: inherit; }
.vt-confetti i { position: absolute; top: -16px; width: 8px; height: 13px; border-radius: 2px; opacity: 0;
  animation: vt-confetti-fall 2400ms cubic-bezier(.2, .6, .4, 1) forwards; }
.vt-confetti i.is-round { width: 9px; height: 9px; border-radius: 50%; }
@keyframes vt-confetti-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--vt-drift, 0), 105cqh) rotate(var(--vt-spin, 540deg)); }
}

/* ---- difficulty selector (controls slot, above the kit bet panel) ---- */
.vt-riskwrap { display: flex; flex-direction: column; gap: var(--ck-space-2); padding: var(--ck-space-3); border-radius: var(--ck-radius-panel); background: var(--ck-surface-1); border: 1px solid var(--ck-line); }
.vt-riskwrap__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ck-space-3); flex-wrap: wrap; }
.vt-riskwrap__label { font-size: var(--ck-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ck-tracking-caps); color: var(--ck-text-muted); }
.vt-risk__hint { margin: 0; font-size: var(--ck-fs-xs); color: var(--ck-text-dim); }
.vt-risk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: calc(var(--ck-radius-pill) + 2px); background: var(--ck-surface-3); border: 1px solid var(--ck-line); }
.vt-risk__opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; padding: 4px 2px; border-radius: 12px; cursor: pointer; color: var(--ck-text-muted); font-size: var(--ck-fs-sm); font-weight: 600; transition: background var(--ck-dur), color var(--ck-dur); }
.vt-risk__opt:hover { background: var(--ck-surface-hover); color: var(--ck-text); }
.vt-risk__opt.is-checked { background: var(--ck-surface-active); color: var(--ck-text); box-shadow: inset 0 0 0 1px var(--ck-line-strong); }
.vt-risk__input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.vt-risk__input:focus-visible + .vt-risk__name { outline: 2px solid var(--ck-focus); outline-offset: 3px; border-radius: 4px; }
.vt-risk__doors { display: flex; gap: 3px; }
.vt-risk__doors i { width: 7px; height: 7px; border-radius: 2px; }
.vt-risk__doors i.is-sweet { background: var(--ck-win); }
.vt-risk__doors i.is-sour { background: #5a4655; }
.vt-risk.is-locked .vt-risk__opt { cursor: not-allowed; }
.vt-risk.is-locked .vt-risk__opt:not(.is-checked) { opacity: .45; }
.vt-risk.is-locked .vt-risk__opt:hover:not(.is-checked) { background: transparent; color: var(--ck-text-muted); }
.ck-slot--controls { display: flex; flex-direction: column; gap: var(--ck-space-3); }
/* no autobet / auto cash-out in a tower: the empty toggle row of the kit bet panel goes */
.vt-shell .ck-betpanel__top:empty { display: none; }

/* ---- tablet / small stage: tower takes more room ---- */
@container ck-stage (max-width: 759.98px) {
  .vt-shell .ck-stage__hud { left: 5%; max-width: 36%; }
  .vt-towerhost { right: 4%; width: 58%; }
  .vt-scene__curtain { width: 5%; }
  .vt-candy { left: 3%; height: 52%; max-width: 34%; }
  .vt-floor { grid-template-columns: 16px minmax(0, 1fr) 64px; gap: 6px; padding: 1px 4px; }
}

/* ---- phone: HUD on top, the tower under it, the page scrolls ---- */
@container ck-shell (max-width: 767.98px) {
  .vt-shell .ck-slot--stage { flex: none; aspect-ratio: auto; height: auto; min-height: 0; }
  .vt-shell .ck-stage { min-height: 0; height: clamp(380px, 108vw, 540px); }
  .vt-shell .ck-stage__hud { top: 12px; left: 16px; right: 16px; max-width: none; transform: none; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; }
  .vt-shell .ck-stage__mult { font-size: 36px; }
  .vt-shell .ck-stage__caption { max-width: none; flex: 1 1 100%; }
  .vt-random { position: absolute; right: 0; top: 0; margin: 0; min-height: 32px; padding: 0 12px; }
  .vt-towerhost { top: 84px; bottom: 8px; left: 8px; right: 8px; width: auto; }
  .vt-scene__curtain { display: none; }
  .vt-candy { display: none; }
  .vt-floor { grid-template-columns: 16px minmax(0, 1fr) 62px; gap: 6px; padding: 1px 4px; }
  .vt-floor__mult { font-size: 11px; padding: 2px 6px; }
  .vt-risk__opt { min-height: 44px; font-size: var(--ck-fs-xs); }
  .vt-risk__hint { display: none; }
  .vt-riskwrap { padding: var(--ck-space-2) var(--ck-space-3); gap: 6px; }
  .vt-risk__opt { min-height: 44px; gap: 2px; }
  .vt-shell .ck-stepper__cur { display: none; }
  .vt-shell .ck-topbar--phone .ck-balance__cur { font-size: var(--ck-fs-sm); }
}

/* ---- modals ---- */
.vt-lead { margin: 0 0 8px; font-weight: 600; color: var(--ck-win); }
.vt-list { margin: 0 0 12px; padding-left: 20px; line-height: 1.55; }
.vt-list li + li { margin-top: 4px; }
.vt-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); }
.vt-muted { color: var(--ck-text-muted); font-size: var(--ck-fs-sm); line-height: 1.5; }
.vt-menu { display: grid; gap: 8px; margin-bottom: 12px; }
.vt-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; }

/* fairness modal (tower) */
.vt-fair .ck-fair__h { margin: 0 0 var(--ck-space-3); font-size: var(--ck-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ck-tracking-caps); color: var(--ck-text-muted); }
.vt-fair__rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: var(--ck-fs-sm); }
.vt-fair__rows dt { color: var(--ck-text-muted); }
.vt-fair__rows dd { margin: 0; }
.vt-fair__val { display: flex; align-items: center; gap: 6px; min-width: 0; font-variant-numeric: tabular-nums; }
.vt-fair__code { font: 500 12px var(--ck-font-mono); overflow-wrap: anywhere; min-width: 0; }
.vt-fair__muted { color: var(--ck-text-dim); }
.vt-fair__note { margin: var(--ck-space-3) 0 0; color: var(--ck-text-muted); font-size: var(--ck-fs-sm); line-height: 1.5; }
.vt-fair__rotatebox { margin-top: var(--ck-space-3); padding: var(--ck-space-3); border-radius: var(--ck-radius-card); background: var(--ck-accent-soft); display: grid; gap: var(--ck-space-2); }
.vt-fair__rotatebox .vt-fair__note { margin: 0; color: var(--ck-text); }
.vt-fair__err { margin: 0; color: var(--ck-danger); font-size: var(--ck-fs-sm); }
.vt-fair__verify { display: grid; gap: var(--ck-space-3); }
.vt-fair__verify .ck-fair__h { margin: 0; }
.vt-fair__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ck-space-3); }
.vt-fair__verify .ck-fair__results { margin: 0; }
.vt-fair__grid .vt-fair__note { margin: 0 0 var(--ck-space-2); }
.vt-fair__gridwrap { display: grid; gap: 4px; padding: var(--ck-space-3); border-radius: var(--ck-radius-card); background: var(--ck-surface-3); border: 1px solid var(--ck-line); }
.vt-fair__gridrow { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 6px; }
.vt-fair__gridrow.is-diff { background: rgba(255, 85, 119, .14); }
.vt-fair__gridnum { font-size: 11px; color: var(--ck-text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.vt-fair__cells { display: flex; gap: 6px; }
.vt-fair__cell { width: 26px; height: 16px; border-radius: 4px; }
.vt-fair__cell.is-safe { background: var(--ck-win); }
.vt-fair__cell.is-bad { background: #6d7426; }
.vt-fair__cell.is-picked { box-shadow: 0 0 0 2px var(--ck-bg), 0 0 0 4px var(--ck-text); }
.vt-fair__how { margin-top: 0; }
@media (max-width: 520px) { .vt-fair__pair { grid-template-columns: 1fr; } }

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

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