/* degen / casino-jackpot
   The Vegas floor at 3 a.m. Burgundy casino carpet under a dim ceiling, two spotlights,
   and a slot machine: chrome cabinet, a black-glass JACKPOT topper in bulb letters with
   chasing bulbs, three cream reel drums behind curved glass, a red payline, a SPIN button,
   a cash-out ticket in the printer slot, the belly glass art, a lever. Beside it the pitch
   in neon script and fat gold bevel serif, and the calls to action as casino chips.
   The floor below: blackjack felt, a hand of cards, a roulette wheel, cash-out tickets,
   a black-glass paytable, cocktail napkins, the blue INFO screen.
   Polarity: dark burgundy + gold; serif and bulbs; nothing else in the catalog is a casino. */

:root {
  --cj-gold: #f5c542;
  --cj-gold-hi: #fff3b8;
  --cj-gold-lo: #9c6a0e;
  --cj-burg: #2a040e;
  --cj-burg-2: #4d0a1c;
  --cj-red: #d4102c;
  --cj-felt: #0c6a3b;
  --cj-felt-dk: #06401f;
  --cj-ink: #120306;
  --cj-cream: #fff4dc;
  --cj-neon: var(--wl-accent-on-dark);
  --cj-neon-2: var(--wl-secondary-on-dark);
  --cj-serif: "Didot", "Bodoni 72", "Bodoni MT", "Rockwell", Georgia, "Bitstream Charter", "Liberation Serif", "Times New Roman", serif;
  --cj-script: "Brush Script MT", "Segoe Script", "Snell Roundhand", "URW Chancery L", Georgia, "Liberation Serif", cursive;
  --cj-block: "Arial Black", "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --cj-goldtext: linear-gradient(180deg, #fffbe0 0%, #ffe07a 30%, #e2a92a 52%, #8f5b06 56%, #f7cf5a 78%, #fff1b0 100%);
  --cj-bar-h: 48px;
  --cj-led-h: 30px;
  --cj-cell: 112px;
  --cj-reel-w: 128px;
  --cj-carpet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%233d0613'/%3E%3Cpath d='M60 26l6 18 19 1-15 11 6 18-16-11-16 11 6-18-15-11 19-1z' fill='%23c9971c' opacity='.5'/%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%230f6f69' stroke-width='3' stroke-dasharray='3 8'/%3E%3Cpath d='M0 0l18 18M120 0l-18 18M0 120l18-18M120 120l-18-18' stroke='%230f6f69' stroke-width='6'/%3E%3Ccircle cx='0' cy='60' r='10' fill='%23a3122a'/%3E%3Ccircle cx='120' cy='60' r='10' fill='%23a3122a'/%3E%3Ccircle cx='60' cy='0' r='10' fill='%23a3122a'/%3E%3Ccircle cx='60' cy='120' r='10' fill='%23a3122a'/%3E%3Cpath d='M60 104q10-8 0-16q-10-8 0-16M60 16q10 8 0 16' fill='none' stroke='%23c9971c' stroke-width='2' opacity='.6'/%3E%3C/svg%3E");

  --v-bg: var(--cj-burg);
  --v-fg: var(--cj-cream);
  --v-soft: rgb(255 244 220 / 0.84);
  --v-faint: rgb(255 244 220 / 0.6);
  --v-line: rgb(245 197 66 / 0.25);
  --v-line-strong: rgb(245 197 66 / 0.6);
  --v-surface: #1a0409;
  --v-surface-2: #33070f;
  --v-card-bg: #1a0409;
  --v-accent: var(--cj-gold);
  --v-accent-text: var(--cj-gold);
  --v-on-accent: var(--cj-ink);
  --v-secondary: var(--cj-red);
  --v-seg-1: var(--cj-red);
  --v-seg-2: #141414;
  --v-seg-3: var(--cj-gold);
  --v-seg-4: #1ba36a;
  --v-seg-5: #2d6fe0;
  --v-seg-6: #8c6cc4;
  --v-font-body: Georgia, "Bitstream Charter", "Liberation Serif", "Times New Roman", serif;
  --v-font-display: var(--cj-serif);
  --v-font-mono: "Courier New", "Liberation Mono", "Courier 10 Pitch", monospace;
  --v-display-weight: 700;
  --v-display-tracking: 0;
  --v-display-case: uppercase;
  --v-display-lh: 0.95;
  --v-title-size: clamp(2.2rem, 5vw, 4.4rem);
  --v-radius: 12px;
  --v-radius-sm: 8px;
  --v-radius-lg: 22px;
  --v-border: 2px solid var(--cj-gold);
  --v-shadow: 0 20px 40px -18px #000;
  --v-maxw: 1180px;
  --v-sec-gap: clamp(72px, 9vw, 128px);
  --v-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --v-spring: cubic-bezier(0.3, 1.6, 0.5, 1);

  --wl-label-lore: "The legend";
  --wl-label-features: "House rules";
  --wl-label-supply: "The pot";
  --wl-label-flow: "How to play";
  --wl-label-timeline: "Floor log";
  --wl-label-comparison: "Side bets";
  --wl-label-stats: "Table stakes";
  --wl-label-tweet: "High roller";
  --wl-label-gallery: "Eye in the sky";
  --wl-label-facts: "Paytable";
  --wl-label-quotes: "Overheard at the table";
  --wl-label-faq: "Info";
  --wl-label-access: "Cash out";
}

html { background: var(--cj-burg); color-scheme: dark; }
body {
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, transparent 30%, rgb(10 0 3 / 0.8) 100%),
    linear-gradient(rgb(20 2 7 / 0.55), rgb(20 2 7 / 0.55)),
    var(--cj-carpet) 0 0 / 120px 120px,
    var(--cj-burg);
  background-attachment: fixed;
}
.cj-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------ header + LED sign */
.cj-bar {
  position: sticky; top: 0; z-index: 60;
  height: var(--cj-bar-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 clamp(12px, 2.4vw, 32px);
  background: linear-gradient(180deg, #1c0207, #0b0103);
  border-bottom: 2px solid var(--cj-gold);
  box-shadow: 0 1px 0 var(--cj-gold-lo), 0 10px 30px rgb(0 0 0 / 0.6);
}
.cj-bar__brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.cj-bar__logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--cj-gold), 0 0 0 4px var(--cj-red); }
.cj-bar__name { font: 700 1.1rem/1 var(--cj-serif); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cj-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cj-bar__tick { flex: none; padding: 4px 8px; border: 1px solid var(--cj-gold); border-radius: 3px; font: 700 0.78rem/1 var(--v-font-mono); color: var(--cj-cream); }
.cj-bar__nav { flex: 1 1 0; min-width: 0; display: flex; justify-content: safe flex-end; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.cj-bar__nav::-webkit-scrollbar { display: none; }
.cj-bar__nav .wl-nav__link { flex: none; padding: 7px 11px; border-radius: 999px; text-decoration: none; white-space: nowrap; font: 700 0.72rem/1 var(--cj-block); text-transform: uppercase; letter-spacing: 0.1em; color: rgb(255 244 220 / 0.7); }
.cj-bar__nav .wl-nav__link:hover, .cj-bar__nav .wl-nav__link.is-active { color: var(--cj-ink); background: var(--cj-gold); }

.cj-led {
  position: relative; height: var(--cj-led-h); overflow: hidden;
  background: #070001; border-bottom: 2px solid #2a0a00;
  color: #ff5a1f; text-shadow: 0 0 6px #ff3d00, 0 0 14px rgb(255 61 0 / 0.6);
}
.cj-led::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 48%, rgb(7 0 1 / 0.8) 72%) 0 0 / 3px 3px; pointer-events: none; }
.cj-led__track { height: 100%; display: flex; align-items: center; font: 700 1.2rem/1 var(--v-font-mono); text-transform: uppercase; letter-spacing: 0.12em; }
.cj-led__track .wl-marquee__item::after { content: "\2605"; margin-left: 3.2em; color: var(--cj-gold); text-shadow: 0 0 8px var(--cj-gold); }

/* ------------------------------------------------------------ hero */
.cj-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 60px);
  min-height: calc(100svh - var(--cj-bar-h) - var(--cj-led-h));
  max-width: 1320px; margin: 0 auto;
  padding: 18px clamp(16px, 4.4vw, 64px) 22px;
}
.cj-spot { position: absolute; z-index: -1; top: -10%; width: 60%; height: 120%; pointer-events: none; background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, rgb(255 236 180 / 0.13) 12deg, rgb(255 236 180 / 0.02) 22deg, transparent 24deg); filter: blur(4px); }
.cj-spot--l { left: -6%; transform-origin: 50% 0; animation: cj-sweep 9s ease-in-out infinite; }
.cj-spot--r { right: -6%; transform-origin: 50% 0; animation: cj-sweep 11s ease-in-out -4s infinite reverse; }

.cj-copy { position: relative; z-index: 2; display: grid; gap: clamp(14px, 2.2vh, 24px); justify-items: start; min-width: 0; }
.cj-kicker {
  margin: 0; max-width: 100%;
  font: italic 400 clamp(1.6rem, 3vw, 2.6rem)/1.05 var(--cj-script);
  color: #fff; letter-spacing: 0.01em;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--cj-neon), 0 0 22px var(--cj-neon), 0 0 44px var(--cj-neon);
  rotate: -4deg; transform-origin: 0 100%;
  animation: cj-neon 5s steps(1, end) infinite;
}
.cj-headline {
  margin: 0; max-width: 13ch;
  font: 700 clamp(3.2rem, 7.4vw, 7rem)/0.9 var(--cj-serif);
  text-transform: uppercase; letter-spacing: -0.01em;
  filter: drop-shadow(0 2px 0 #5a3000) drop-shadow(0 5px 0 #2a1200) drop-shadow(0 14px 18px rgb(0 0 0 / 0.7));
  text-wrap: balance;
}
.cj-headline .wl-w { background: var(--cj-goldtext); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 0.04em; }
.cj-copy[data-cj-len="l"] .cj-headline { font-size: clamp(2.6rem, 5.6vw, 5.4rem); max-width: 16ch; }
.cj-copy[data-cj-len="xl"] .cj-headline { font-size: clamp(2.2rem, 4.4vw, 4.2rem); max-width: 18ch; }
.cj-sub { margin: 0; max-width: 34rem; font: 400 clamp(1rem, 1.3vw, 1.2rem)/1.5 var(--v-font-body); color: var(--v-soft); }

/* the calls to action as casino chips */
.cj-chips { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 6px; }
.cj-chips .wl-btn {
  --chip: #1f1f1f; --chip-edge: #f2f2f2;
  position: relative; flex-direction: column; justify-content: center; gap: 3px;
  width: clamp(98px, 9vw, 122px); aspect-ratio: 1; padding: 20px 14px;
  border: 0; border-radius: 50%;
  background:
    radial-gradient(circle, var(--chip) 0 57%, var(--chip-edge) 57.5% 60.5%, transparent 61%),
    repeating-conic-gradient(from 7deg, var(--chip-edge) 0 14deg, var(--chip) 14deg 45deg);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--chip) 55%, #000), 0 7px 0 color-mix(in srgb, var(--chip) 40%, #000), 0 16px 22px -6px #000, inset 0 0 0 3px rgb(0 0 0 / 0.25);
  color: #fff; text-align: center;
  font: 800 0.7rem/1.1 var(--cj-block); letter-spacing: 0.06em; text-transform: uppercase;
  transition: transform 0.5s var(--v-spring);
}
.cj-chips .wl-btn:hover { transform: translateY(-6px) rotate(24deg); border: 0; box-shadow: 0 4px 0 color-mix(in srgb, var(--chip) 55%, #000), 0 7px 0 color-mix(in srgb, var(--chip) 40%, #000), 0 26px 26px -8px #000; }
.cj-chips .wl-btn--primary { --chip: var(--cj-red); width: clamp(112px, 10.4vw, 138px); font-size: 0.76rem; }
.cj-chips .wl-btn--chart { --chip: #151515; --chip-edge: var(--cj-gold); }
.cj-chips .wl-btn--x { --chip: #1553c7; }
.cj-chips .wl-btn--telegram { --chip: #13804f; }
.cj-chips .wl-btn .wl-glyph { width: 18px; height: 18px; }
.cj-chips .wl-btn__ca { font-size: 0.62rem; font-weight: 700; opacity: 0.85; letter-spacing: 0; text-transform: none; }

/* ------------------------------------------------------------ the machine */
.cj-machine {
  position: relative; z-index: 2;
  width: calc(3 * var(--cj-reel-w) + 80px);
  margin-right: 34px;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.75));
}
.cj-topper {
  position: relative;
  height: calc(var(--cj-cell) * 0.95);
  margin: 0 10px;
  display: grid; place-items: center;
  border-radius: 26px 26px 6px 6px;
  background: radial-gradient(ellipse 70% 80% at 50% 110%, #3a0010, #0a0003 70%);
  box-shadow: inset 0 0 0 5px #111, inset 0 0 0 8px var(--cj-gold), inset 0 0 30px rgb(255 0 60 / 0.35);
}
.cj-jackpot {
  position: relative; z-index: 2; margin: 0;
  display: flex; gap: 0.02em;
  font: 900 clamp(2.4rem, 4.4vw, 3.5rem)/1 var(--cj-block);
  letter-spacing: 0.02em;
}
.cj-jackpot span {
  position: relative; display: inline-block;
  color: #b0001f;
  -webkit-text-stroke: 3px var(--cj-gold);
  paint-order: stroke fill;
  text-shadow: 0 0 18px rgb(255 30 60 / 0.8);
}
.cj-jackpot span::after {
  content: attr(data-l); position: absolute; inset: 0;
  color: transparent; -webkit-text-stroke: 0;
  background: radial-gradient(circle, #fffbe6 0 22%, #ffd84a 32%, transparent 44%) 0 0 / 0.16em 0.16em;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 3px #ffe27a);
}

.cj-cab {
  position: relative;
  padding: 16px 18px 18px;
  border-radius: 14px 14px 22px 22px;
  background:
    linear-gradient(90deg, #8d8d8d 0, #f7f7f7 7px, #9a9a9a 12px, transparent 13px, transparent calc(100% - 13px), #9a9a9a calc(100% - 12px), #f7f7f7 calc(100% - 7px), #8d8d8d 100%),
    linear-gradient(180deg, #9c0a24 0%, #6a0417 55%, #3d020c 100%);
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.25), inset 0 -8px 16px rgb(0 0 0 / 0.5);
}
.cj-window {
  position: relative;
  padding: 14px;
  border-radius: 14px;
  background: #0d0003;
  box-shadow: inset 0 0 0 4px var(--cj-gold), inset 0 0 0 7px #3a2000, 0 2px 0 rgb(255 255 255 / 0.2);
}
.cj-reels {
  position: relative;
  display: grid; grid-template-columns: repeat(3, var(--cj-reel-w)); gap: 7px;
  height: calc(var(--cj-cell) * 2);
  overflow: hidden; border-radius: 6px;
}
.cj-reel {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, #c9bda2 0%, #fffaf0 22%, #ffffff 50%, #fffaf0 78%, #c9bda2 100%);
}
.cj-strip { display: flex; flex-direction: column; transform: translateY(calc(var(--cj-cell) * -0.5)); will-change: transform; }
.cj-reel.is-spinning .cj-strip { filter: url(#cj-blur); }
.cj-sym { flex: none; height: var(--cj-cell); display: grid; place-items: center; padding: 10px; border-bottom: 1px solid rgb(0 0 0 / 0.08); }
.cj-sym > svg { width: 78%; height: 78%; overflow: visible; }
.cj-sym--mascot { padding: 6px; }
.cj-mascot { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.cj-sym--mascot:has(.cj-mascot) .cj-sym__fallback { display: none; }
.cj-sym__fallback { display: grid; place-items: center; width: 78%; height: 78%; }
.cj-sym__fallback svg { width: 100%; height: 100%; }
.cj-plate {
  display: block; max-width: 100%;
  padding: 0.28em 0.32em 0.22em;
  border-radius: 7px;
  background: linear-gradient(180deg, #fff6c8, #f5c542 45%, #b98111 55%, #ffe38a);
  box-shadow: inset 0 0 0 2px #6b4300, 0 3px 0 #6b4300;
  color: #6d0010;
  font: 900 clamp(1.05rem, 1.8vw, 1.45rem)/1 var(--cj-block);
  letter-spacing: -0.02em; white-space: nowrap; overflow: hidden;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.6);
}
.cj-glass { position: absolute; inset: 14px; z-index: 3; border-radius: 6px; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.08) 30%, rgb(255 255 255 / 0.1) 46%, rgb(0 0 0 / 0.04) 60%, rgb(0 0 0 / 0.72) 100%); }
.cj-payline { position: absolute; left: 4px; right: 4px; top: 50%; z-index: 4; height: 4px; margin-top: -2px; background: var(--cj-red); box-shadow: 0 0 8px var(--cj-red); opacity: 0.85; }
.cj-payline::before, .cj-payline::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 11px solid transparent; translate: 0 -50%; }
.cj-payline::before { left: -8px; border-left-color: var(--cj-gold); }
.cj-payline::after { right: -8px; border-right-color: var(--cj-gold); }

.cj-deck {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px;
  margin: 14px 0 12px; padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2a2a2a, #0e0e0e);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 4px 0 #000;
}
.cj-spin {
  padding: 14px 22px; border: 0; border-radius: 12px; cursor: pointer;
  background: radial-gradient(ellipse at 50% 30%, #ff6f7f, var(--cj-red) 55%, #6d0010);
  color: #fff; font: 900 1.2rem/1 var(--cj-block); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 5px 0 #4a000b, 0 0 18px rgb(255 30 60 / 0.6), inset 0 2px 0 rgb(255 255 255 / 0.5);
  text-shadow: 0 2px 0 #4a000b;
  animation: cj-pulse 1.4s ease-in-out infinite;
}
.cj-spin:active { translate: 0 4px; box-shadow: 0 1px 0 #4a000b; }
.cj-ticket {
  position: relative; min-width: 0; display: grid; gap: 3px; justify-items: start;
  padding: 7px 12px 7px 14px; border: 0; border-radius: 3px; cursor: pointer; text-align: left;
  background: #fbf8ef; color: #111;
  box-shadow: 0 3px 0 #bdb6a2, 0 8px 14px -6px #000;
  rotate: -1.5deg;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 70%, 5px 66%, 0 62%);
}
.cj-ticket__head { font: 900 0.68rem/1 var(--cj-block); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cj-red); }
.cj-ticket__ca { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 0.98rem/1.1 var(--v-font-mono); }
.cj-ticket__bars { width: 100%; height: 12px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 3px, #111 3px 4px, transparent 4px 7px, #111 7px 10px, transparent 10px 11px); }
.cj-ticket.is-copied .cj-ticket__head::after { content: " \2713"; }

.cj-belly {
  position: relative; overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 2.4;
  background: #000;
  box-shadow: inset 0 0 0 4px var(--cj-gold), 0 2px 0 rgb(255 255 255 / 0.2);
}
.cj-belly:not(:has(img, .wl-post)) { display: none; }
.cj-belly::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 4px var(--cj-gold), inset 0 0 26px rgb(0 0 0 / 0.6); background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.16) 44%, transparent 52%); }
.cj-belly__art { position: absolute; inset: 0; }
.cj-belly__art .wl-hero-img { width: 100%; height: 100%; object-fit: cover; }
.cj-belly:has(.wl-media--post) { aspect-ratio: auto; background: var(--cj-cream); }
.cj-belly__art.wl-media--post { position: relative; padding: 12px; }
.cj-belly .wl-post--giant { background: transparent; border: 0; box-shadow: none; padding: 6px; color: var(--cj-ink); }
.cj-belly .wl-post--giant .wl-post__text { font-size: 1.05rem; line-height: 1.3; }
.cj-belly .wl-post__meta:empty { display: none; }

/* bulbs, placed by app.js round the topper and the reel window */
.cj-bulbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cj-bulb {
  position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffef2, #ffd75e 55%, #b07a00);
  box-shadow: 0 0 6px 2px rgb(255 214 90 / 0.85);
  animation: cj-chase 0.72s steps(1, end) infinite;
}
.cj-bulb:nth-child(3n+2) { animation-delay: -0.24s; }
.cj-bulb:nth-child(3n) { animation-delay: -0.48s; }
.cj-bulbs--window .cj-bulb { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }

/* the lever */
.cj-lever { position: absolute; right: -40px; top: calc(var(--cj-cell) * 1.3); width: 34px; height: 190px; padding: 0; border: 0; background: none; cursor: pointer; }
.cj-lever::before { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 54px; border-radius: 6px 12px 12px 6px; background: linear-gradient(90deg, #6a6a6a, #f4f4f4 40%, #777); box-shadow: 0 6px 10px rgb(0 0 0 / 0.6); }
.cj-lever__rod { position: absolute; left: 11px; bottom: 30px; width: 8px; height: 150px; border-radius: 4px; background: linear-gradient(90deg, #777, #fff 45%, #888); transform-origin: 50% 100%; transition: transform 0.25s ease-in; }
.cj-lever__ball { position: absolute; left: -2px; bottom: 166px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9aa6, var(--cj-red) 50%, #5e000e); box-shadow: 0 6px 10px rgb(0 0 0 / 0.5); transform-origin: 50% 480%; transition: transform 0.25s ease-in; }
.cj-lever.is-pulled .cj-lever__rod { transform: scaleY(-0.55); }
.cj-lever.is-pulled .cj-lever__ball { transform: translateY(232px); }

/* the win */
.cj-machine.is-win .cj-payline { animation: cj-flash 0.3s steps(1, end) 8; }
.cj-machine.is-win .cj-jackpot span { animation: cj-letter 0.9s var(--v-spring) both; animation-delay: calc(var(--i, 0) * 60ms); }
.cj-machine.is-win .cj-bulb { animation-duration: 0.3s; }
.cj-machine.is-win .cj-sym--plate .cj-plate, .cj-machine.is-win .cj-mascot { animation: cj-throb 0.5s ease-in-out 4; }

/* coins, dropped by app.js into the effects layer on a win */
.cj-coin { top: -80px; width: var(--s, 40px); height: var(--s, 40px); animation: cj-fall var(--d, 2.4s) cubic-bezier(0.4, 0, 0.9, 0.6) var(--delay, 0s) both; }
.cj-coin svg { width: 100%; height: 100%; animation: cj-flip 0.6s linear infinite; animation-delay: var(--delay, 0s); filter: drop-shadow(0 3px 2px rgb(0 0 0 / 0.5)); }

/* ------------------------------------------------------------ the floor (sections) */
.cj-flow { padding-bottom: clamp(70px, 9vw, 130px); }
.cj-flow .wl-sec__head { max-width: none; text-align: center; margin-left: auto; margin-right: auto; }
.cj-flow .wl-kicker {
  justify-content: center; margin-bottom: 0.3em;
  font: italic 400 clamp(1.5rem, 2.6vw, 2.2rem)/1.1 var(--cj-script);
  letter-spacing: 0; text-transform: none;
  color: #fff; text-shadow: 0 0 4px #fff, 0 0 10px var(--cj-neon), 0 0 24px var(--cj-neon);
}
.cj-flow .wl-kicker .wl-ord { display: none; }
.cj-flow .wl-sec__title { background: var(--cj-goldtext); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #3a1a00) drop-shadow(0 10px 14px rgb(0 0 0 / 0.6)); padding: 0 0.05em 0.06em; }

/* the legend: a blackjack table */
.cj-flow .wl-lore {
  max-width: 62rem; margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 6vw, 96px) clamp(60px, 8vw, 110px);
  border-radius: 28px 28px 50% 50% / 28px 28px 34% 34%;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, #17904f, var(--cj-felt) 55%, var(--cj-felt-dk));
  box-shadow: 0 0 0 12px #3b1a0a, 0 0 0 15px var(--cj-gold-lo), 0 30px 50px -10px #000, inset 0 0 60px rgb(0 0 0 / 0.45);
  text-align: center; color: #eafff0;
}
.cj-flow .wl-lore__lead { font: italic 700 clamp(1.3rem, 2.2vw, 1.9rem)/1.35 var(--v-font-body); color: var(--cj-gold-hi); text-shadow: 0 2px 0 rgb(0 0 0 / 0.35); }
.cj-flow .wl-lore__p { margin-left: auto; margin-right: auto; color: rgb(234 255 240 / 0.86); }
.cj-flow .wl-lore__p:last-child { margin-bottom: 0; }

/* house rules: a hand of cards */
.cj-flow .wl-features { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2vw, 26px); }
.cj-flow .wl-feature {
  width: min(100%, 260px); min-height: 350px;
  padding: 58px 26px 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(160deg, #fff 0%, #fbf6ea 100%); color: #1a1a1a;
  border: 1px solid #d8d0bb; border-radius: 14px;
  box-shadow: 0 2px 0 #d8d0bb, 0 22px 30px -12px #000;
  --suit: "\2660"; --rank: "A"; --ink: #121212;
  rotate: -5deg;
}
.cj-flow .wl-feature:nth-child(4n+2) { --suit: "\2665"; --rank: "K"; --ink: var(--cj-red); rotate: 3deg; translate: 0 18px; }
.cj-flow .wl-feature:nth-child(4n+3) { --suit: "\2663"; --rank: "Q"; rotate: -2deg; }
.cj-flow .wl-feature:nth-child(4n) { --suit: "\2666"; --rank: "J"; --ink: var(--cj-red); rotate: 5deg; translate: 0 12px; }
.cj-flow .wl-feature:hover { transform: translateY(-14px) rotate(0deg); border-color: #d8d0bb; }
.cj-flow .wl-feature::before, .cj-flow .wl-feature::after {
  content: var(--rank) "\A" var(--suit); white-space: pre; position: absolute;
  font: 700 1.5rem/0.95 var(--cj-serif); color: var(--ink); text-align: center;
}
.cj-flow .wl-feature::before { left: 14px; top: 12px; }
.cj-flow .wl-feature::after { right: 14px; bottom: 12px; rotate: 180deg; }
.cj-flow .wl-feature .wl-ord { display: none; }
.cj-flow .wl-feature__icon { width: 70px; height: 70px; margin: 0 0 16px; border-radius: 50%; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }
.cj-flow .wl-feature__icon .wl-glyph { width: 34px; height: 34px; stroke-width: 2.2; }
.cj-flow .wl-feature__icon--img { box-shadow: 0 0 0 3px var(--ink); }
.cj-flow .wl-feature__title { margin-bottom: 0.4em; font: 700 1.5rem/1.05 var(--cj-serif); text-transform: uppercase; color: var(--ink); }
.cj-flow .wl-feature__text { color: #3b3b3b; font-size: 0.98rem; }

/* the pot: roulette + chips */
.cj-flow .wl-infographic { padding: clamp(22px, 3vw, 44px); border-radius: 26px; background: radial-gradient(ellipse at 50% 20%, #17904f, var(--cj-felt) 60%, var(--cj-felt-dk)); box-shadow: 0 0 0 10px #3b1a0a, 0 0 0 13px var(--cj-gold-lo), 0 30px 50px -10px #000, inset 0 0 50px rgb(0 0 0 / 0.4); }
.cj-flow .wl-donut__chart { border-radius: 50%; background: radial-gradient(circle, #2b1405 0 34%, #5a2c0c 34.5% 58%, #2b1405 58.5% 61%, transparent 61.5%); box-shadow: 0 0 0 10px #4a2308, 0 0 0 13px var(--cj-gold), 0 20px 30px #000; }
.cj-flow .wl-donut__track { stroke: #111; stroke-width: 44; }
.cj-flow .wl-donut__seg { stroke-width: 44; }
.cj-flow .wl-donut__ticks line { stroke: var(--cj-gold); stroke-width: 2; }
.cj-flow .wl-donut__value { color: var(--cj-gold-hi); font-family: var(--cj-serif); }
.cj-flow .wl-donut__label { color: var(--cj-gold); }
.cj-flow .wl-legend__item { padding: 12px 14px; border: 2px solid rgb(255 255 255 / 0.8); border-radius: 4px; background: rgb(0 0 0 / 0.12); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.cj-flow .wl-legend__swatch { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.cj-flow .wl-legend__value { color: var(--cj-gold-hi); font-family: var(--cj-serif); font-size: 1.4rem; }
.cj-flow .wl-ring { max-width: 170px; border-radius: 50%; background: radial-gradient(circle, #1b1b1b 0 50%, #f2f2f2 50.5% 53%, #1b1b1b 53.5% 64%, transparent 64.5%), repeating-conic-gradient(from 7deg, #f2f2f2 0 14deg, #1b1b1b 14deg 45deg); box-shadow: 0 6px 0 #000, 0 16px 20px -6px #000; }
.cj-flow .wl-ring:nth-child(2) { background: radial-gradient(circle, var(--cj-red) 0 50%, #fff 50.5% 53%, var(--cj-red) 53.5% 64%, transparent 64.5%), repeating-conic-gradient(from 7deg, #fff 0 14deg, var(--cj-red) 14deg 45deg); }
.cj-flow .wl-ring__svg { opacity: 0; }
.cj-flow .wl-ring__value { color: #fff; font-family: var(--cj-block); font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cj-flow .wl-ring__label { color: var(--cj-gold); font-weight: 700; }
.cj-flow .wl-stats { background: transparent; border: 0; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 280px)); justify-content: center; }
.cj-flow .wl-stat { border-radius: 8px; background: linear-gradient(180deg, #fff3b8, #f5c542 50%, #b98111 52%, #ffe38a); color: var(--cj-ink); box-shadow: 0 5px 0 #5a3a00, 0 12px 18px -6px #000; }
.cj-flow .wl-stat__label { color: #5a1a00; font-weight: 700; }
.cj-flow .wl-stat__value { font-family: var(--cj-serif); color: #5a0010; }
.cj-flow .wl-caption { color: rgb(255 255 255 / 0.75); text-align: center; font-style: italic; }
.cj-flow .wl-node__card { background: transparent; border: 2px solid rgb(255 255 255 / 0.85); border-radius: 6px; color: #fff; }
.cj-flow .wl-node__card .wl-ord { background: var(--cj-red); color: #fff; box-shadow: 0 0 0 3px #fff; }
.cj-flow .wl-node__title { font-family: var(--cj-serif); text-transform: uppercase; color: var(--cj-gold-hi); }
.cj-flow .wl-node__text { color: rgb(255 255 255 / 0.85); }
.cj-flow .wl-edge__line, .cj-flow .wl-edge__head { stroke: var(--cj-gold); }
.cj-flow .wl-bar__label { color: #fff; font-weight: 700; text-transform: uppercase; }
.cj-flow .wl-bar__track { height: 22px; }
.cj-flow .wl-bar__bg { fill: rgb(0 0 0 / 0.3); }
.cj-flow .wl-bar__value { color: var(--cj-gold-hi); font-family: var(--cj-serif); }
.cj-flow .wl-table-wrap { border: 2px solid var(--cj-gold); background: rgb(0 0 0 / 0.2); }
.cj-flow .wl-table thead th { color: var(--cj-gold); }
.cj-flow .wl-table th, .cj-flow .wl-table td { color: #fff; border-bottom-color: rgb(255 255 255 / 0.2); }

/* floor log: cash-out tickets */
.cj-flow .wl-milestones { max-width: 44rem; margin: 0 auto; gap: 18px; }
.cj-flow .wl-milestones::before { display: none; }
.cj-flow .wl-ms {
  grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: stretch;
  padding: 16px 22px 16px 0;
  background: #fbf8ef; color: #111; border-radius: 3px;
  box-shadow: 0 4px 0 #bdb6a2, 0 16px 22px -10px #000;
}
.cj-flow .wl-ms:nth-child(odd) { rotate: -0.8deg; }
.cj-flow .wl-ms:nth-child(even) { rotate: 0.9deg; }
.cj-flow .wl-ms__dot { width: 56px; height: auto; border-radius: 0; background: repeating-linear-gradient(0deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 12px); border-right: 2px dashed #bdb6a2; }
.cj-flow .wl-ms__dot > * { display: none; }
.cj-flow .wl-ms__when { font: 700 0.8rem/1 var(--v-font-mono); color: var(--cj-red); letter-spacing: 0.14em; }
.cj-flow .wl-ms__when::before { content: "Voucher \00b7 "; color: #111; }
.cj-flow .wl-ms__title { font: 900 1.25rem/1.1 var(--cj-block); text-transform: uppercase; letter-spacing: -0.01em; color: #111; }
.cj-flow .wl-ms__text { color: #333; font-family: var(--v-font-mono); font-size: 0.92rem; }

/* high roller: the post on a black card */
.cj-flow .wl-post { margin: 0 auto; background: linear-gradient(135deg, #1b1b1b, #050505 60%, #1f1a10); color: #fff; border: 2px solid var(--cj-gold); border-radius: 18px; box-shadow: 0 0 0 6px #000, 0 0 0 8px var(--cj-gold-lo), 0 30px 40px -12px #000; }
.cj-flow .wl-post__handle, .cj-flow .wl-post__meta { color: rgb(255 244 220 / 0.6); }
.cj-flow .wl-post__meta { border-top-color: rgb(245 197 66 / 0.3); }
.cj-flow .wl-post__meta:empty { display: none; }
.cj-flow .wl-post__brand { color: var(--cj-gold); }
.cj-flow .wl-post__text { font-family: var(--v-font-body); font-size: clamp(1.25rem, 2vw, 1.6rem); }
.cj-flow .wl-post__avatar--initial { background: var(--cj-gold); color: var(--cj-ink); }
.cj-flow .wl-post__link { color: var(--cj-gold); }

/* eye in the sky: photos in bulb frames */
.cj-flow .wl-gallery { gap: 26px; }
.cj-flow .wl-shot {
  padding: 14px; border-radius: 16px;
  background:
    radial-gradient(circle, #fff6c8 0 3px, #ffc93c 4px, transparent 5.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, #3a0010, #1a0006);
  box-shadow: inset 0 0 0 3px var(--cj-gold), 0 20px 30px -12px #000;
}
.cj-flow .wl-shot img { border-radius: 6px; box-shadow: 0 0 0 3px var(--cj-gold); }
.cj-flow .wl-shot__caption { left: 26px; right: 26px; bottom: 26px; background: rgb(12 1 4 / 0.82); border: 1px solid var(--cj-gold); border-radius: 4px; font: italic 700 0.95rem/1.2 var(--v-font-body); color: var(--cj-gold-hi); backdrop-filter: none; }

/* paytable: black glass, gold rules */
.cj-flow .wl-facts {
  max-width: 50rem; margin: 0 auto; gap: 0;
  padding: 10px 26px;
  background: linear-gradient(180deg, #120008, #000);
  border: 3px solid var(--cj-gold); border-radius: 10px;
  box-shadow: 0 0 0 6px #000, 0 0 30px rgb(255 30 80 / 0.35), inset 0 0 40px rgb(255 0 80 / 0.12);
}
.cj-flow .wl-fact { grid-template-columns: 44px 1fr; padding: 16px 4px; border: 0; border-bottom: 1px solid rgb(245 197 66 / 0.35); border-radius: 0; background: transparent; font: 700 1.05rem/1.3 var(--cj-block); text-transform: uppercase; letter-spacing: 0.02em; color: #fff36b; text-shadow: 0 0 8px rgb(255 240 100 / 0.5); }
.cj-flow .wl-fact:last-child { border-bottom: 0; }
.cj-flow .wl-fact__mark { width: 40px; height: 40px; background: transparent; color: transparent; border-radius: 0; }
.cj-flow .wl-fact__mark::before { content: "\2605"; font-size: 2rem; line-height: 1; color: var(--cj-red); text-shadow: 0 0 10px var(--cj-red); }
.cj-flow .wl-fact__mark .wl-glyph { display: none; }

/* overheard: cocktail napkins */
.cj-flow .wl-quotes { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 30px; max-width: 64rem; margin: 0 auto; }
.cj-flow .wl-quote {
  aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 36px 30px;
  background:
    radial-gradient(circle at 78% 22%, transparent 0 34px, rgb(150 60 20 / 0.16) 35px 39px, transparent 40px),
    #fffdf7;
  color: #222; border: 0; border-radius: 4px;
  box-shadow: inset 0 0 0 10px #fffdf7, inset 0 0 0 12px #e7dcc6, 0 18px 28px -12px #000;
  -webkit-mask: radial-gradient(circle 5px at 50% 0, transparent 98%, #000) 0 0 / 14px 100% repeat-x, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.cj-flow .wl-quote:nth-child(odd) { rotate: -3deg; }
.cj-flow .wl-quote:nth-child(even) { rotate: 2.5deg; translate: 0 14px; }
.cj-flow .wl-quote::before { content: "$"; position: static; font: 700 1.4rem/1 var(--cj-serif); color: var(--cj-red); width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 14px; border: 2px solid var(--cj-red); border-radius: 50%; }
.cj-flow .wl-quote__text { font: italic 400 clamp(1.1rem, 1.6vw, 1.3rem)/1.4 var(--v-font-body); color: #222; }
.cj-flow .wl-quote__who { font: 700 0.8rem/1 var(--v-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cj-red); }
.cj-flow .wl-quote__who a { color: inherit; }

/* info: the machine's blue help screen */
.cj-flow .wl-faq { max-width: 52rem; margin: 0 auto; gap: 0; padding: 18px; background: linear-gradient(180deg, #1333b8, #081a6e 70%, #050f45); border: 6px solid #d9d9d9; border-radius: 12px; box-shadow: inset 0 0 0 3px #7a7a7a, 0 0 0 4px #111, 0 26px 40px -12px #000; }
.cj-flow .wl-qa { background: transparent; border: 0; border-bottom: 2px solid rgb(255 255 255 / 0.25); border-radius: 0; }
.cj-flow .wl-qa:last-child { border-bottom: 0; }
.cj-flow .wl-qa__q { font: 900 1.12rem/1.2 var(--cj-block); text-transform: uppercase; color: #ffe600; text-shadow: 2px 2px 0 #000; }
.cj-flow .wl-qa__sign { color: #fff; }
.cj-flow .wl-qa__a { color: #fff; font: 700 1rem/1.5 var(--cj-block); text-shadow: 1px 1px 0 #000; }

/* cash out */
.cj-flow .wl-sec--access .wl-sec__inner { max-width: 46rem; }
.cj-flow .wl-access { justify-items: center; }
.cj-flow .wl-ca {
  width: 100%; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px;
  padding: 24px 22px 22px 30px;
  background: #fbf8ef; color: #111; border: 0; border-radius: 4px;
  box-shadow: 0 5px 0 #bdb6a2, 0 26px 36px -12px #000;
  rotate: -1deg;
}
.cj-flow .wl-ca::after { content: ""; grid-column: 1 / -1; height: 26px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 3px, #111 3px 4px, transparent 4px 7px, #111 7px 10px, transparent 10px 11px, #111 11px 12px, transparent 12px 15px); }
.cj-flow .wl-ca__label { grid-column: 1 / -1; font: 900 1.4rem/1 var(--cj-block); letter-spacing: 0.24em; color: var(--cj-red); }
.cj-flow .wl-ca__label::before { content: "Cash out \00b7 "; color: #111; }
.cj-flow .wl-ca__value { font: 700 clamp(0.8rem, 1.55vw, 1.12rem)/1.25 var(--v-font-mono); }
.cj-flow .wl-copy { padding: 14px 22px; border-radius: 12px; background: radial-gradient(ellipse at 50% 30%, #6dff9f, #14a24c 55%, #06501f); color: #fff; font: 900 1rem/1 var(--cj-block); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 5px 0 #043514, 0 0 16px rgb(40 255 120 / 0.45); text-shadow: 0 2px 0 #043514; }
.cj-flow .wl-links { justify-content: center; gap: 16px; }
.cj-flow .wl-link, .cj-foot .wl-link { border: 2px solid var(--cj-gold); background: #120306; color: var(--cj-gold-hi); font: 800 0.8rem/1 var(--cj-block); text-transform: uppercase; letter-spacing: 0.1em; box-shadow: 0 4px 0 #000; }
.cj-flow .wl-link:hover, .cj-foot .wl-link:hover { border-color: var(--cj-gold-hi); background: var(--cj-red); }

/* ------------------------------------------------------------ foot */
.cj-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 26px clamp(16px, 4vw, 64px) 34px; background: #0b0103; border-top: 2px solid var(--cj-gold); }
.cj-foot__name { margin: 0; font: 700 1.3rem/1 var(--cj-serif); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cj-gold); }
.cj-foot__tick { font: 700 0.9rem/1 var(--v-font-mono); color: var(--cj-cream); }
.cj-foot .wl-links { gap: 10px; }
.cj-foot .wl-link { padding: 9px 14px; }

/* ------------------------------------------------------------ motion */
@keyframes cj-chase { 0% { opacity: 1; } 33.34% { opacity: 0.18; filter: grayscale(0.6); box-shadow: none; } }
@keyframes cj-flash { 50% { background: #fff; box-shadow: 0 0 22px #fff, 0 0 40px var(--cj-red); } }
@keyframes cj-letter { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-14px) scale(1.25) rotate(-6deg); } 60% { transform: translateY(2px) scale(0.95); } 100% { transform: none; } }
@keyframes cj-throb { 50% { transform: scale(1.12); filter: brightness(1.25); } }
@keyframes cj-fall { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate3d(var(--dx, 0px), calc(100vh + 160px), 0) rotate(var(--r, 360deg)); opacity: 1; } }
@keyframes cj-flip { 50% { transform: scaleX(0.12); } }
@keyframes cj-pulse { 50% { box-shadow: 0 5px 0 #4a000b, 0 0 30px rgb(255 30 60 / 0.95), inset 0 2px 0 rgb(255 255 255 / 0.5); } }
@keyframes cj-neon { 0%, 71%, 75%, 100% { opacity: 1; } 72%, 74% { opacity: 0.45; } }
@keyframes cj-sweep { 0%, 100% { rotate: -9deg; } 50% { rotate: 9deg; } }
.wl-motion-none .cj-bulb, .wl-still .cj-bulb { animation: none; }

/* ------------------------------------------------------------ narrow screens */
@media (max-width: 1080px) {
  :root { --cj-cell: 96px; --cj-reel-w: 108px; }
}
@media (max-width: 860px) {
  :root { --cj-cell: 86px; --cj-reel-w: calc((100vw - 32px - 76px - 14px) / 3); --cj-bar-h: 50px; }
  .cj-bar__nav { display: none; }
  .cj-bar { justify-content: space-between; }
  .cj-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 16px; gap: 26px; }
  .cj-machine { order: -1; width: 100%; margin: 0; }
  .cj-lever { display: none; }
  .cj-jackpot { font-size: clamp(2rem, 11vw, 3rem); }
  .cj-copy { justify-items: center; text-align: center; }
  .cj-kicker { rotate: -3deg; transform-origin: 50% 100%; font-size: clamp(1.5rem, 7vw, 2.1rem); }
  .cj-headline, .cj-copy[data-cj-len] .cj-headline { max-width: none; font-size: clamp(2.5rem, 12.5vw, 3.8rem); }
  .cj-copy[data-cj-len="l"] .cj-headline, .cj-copy[data-cj-len="xl"] .cj-headline { font-size: clamp(2rem, 9.4vw, 2.8rem); }
  .cj-chips { justify-content: center; }
  .cj-deck { grid-template-columns: minmax(0, 1fr); }
  .cj-spin { width: 100%; }
  .cj-ticket { rotate: 0deg; width: 100%; }
  .cj-flow .wl-feature { width: min(100%, 300px); min-height: 0; rotate: 0deg !important; translate: none !important; }
  .cj-flow .wl-quote { rotate: 0deg !important; translate: none !important; aspect-ratio: auto; }
  .cj-flow .wl-lore { border-radius: 22px 22px 40% 40% / 22px 22px 14% 14%; padding-bottom: 70px; }
  .cj-flow .wl-ms { rotate: 0deg !important; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
  .cj-flow .wl-ms__dot { width: 34px; }
  .cj-flow .wl-ca { rotate: 0deg; padding: 20px 16px; }
  .cj-foot { justify-content: center; text-align: center; }
}