/* Shadow's casino look (founder's approved design, 12 October 2026: designs/2026-10-12/final/v3/01-spin-r1.png).
   The screen is drawn on a 360 x 780 frame and scaled as one piece to the phone: --u is one frame
   unit in pixels. Props are pictures in /art; every amount and count is live text. Motion uses
   transform and opacity only, and stops for people who ask for reduced motion. */
@font-face { font-family: 'Titan One'; src: url(/fonts/titan-one.woff2) format('woff2'); font-display: swap; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #000; -webkit-text-size-adjust: 100%; }
body.casino-page { --tb: 0px; --u: min(calc(100vw / 360), calc((100vh - var(--tb)) / 780));
  margin: 0; min-height: 100vh; overflow-x: hidden; background: #000; color: #fff;
  font-family: system-ui, Roboto, Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
@supports (height: 100svh) { body.casino-page { --u: min(calc(100vw / 360), calc((100svh - var(--tb)) / 780)); min-height: 100svh; } }
body.casino-page.test { --tb: 22px; }
.testbar { position: relative; z-index: 60; height: 22px; line-height: 22px; font-size: 12px; text-align: center; background: rgba(46, 32, 4, .94); color: #ffe7a8; }
.stage { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; pointer-events: none; }
.burst { position: fixed; inset: 0; opacity: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 40%, #ffd86a 0%, #ff9a1a 22%, #f04a12 48%, #a8120a 78%, #5a0604 100%); }
.burst.on { opacity: 1; }
.burst::before { content: ''; position: absolute; inset: 0;
  background: repeating-conic-gradient(from 0deg at 50% 40%, rgba(255, 240, 180, .28) 0deg 6deg, rgba(255, 240, 180, 0) 6deg 18deg); }
body.casino-page::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 75% at 50% 38%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .55) 100%); }
/* Props bleed past the frame to the phone's edges; the wrapper keeps the page exactly phone-wide. */
.frame { position: relative; z-index: 1; width: 100%; overflow: hidden; }
.casino { position: relative; z-index: 1; width: calc(360 * var(--u)); height: calc(780 * var(--u)); margin: 0 auto; }
.sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top: the real Vantum logo and the spins left. */
.top { position: absolute; left: calc(14 * var(--u)); right: calc(12 * var(--u)); top: calc(10 * var(--u)); height: calc(44 * var(--u)); display: flex; align-items: center; justify-content: space-between; z-index: 5; }
.logo { display: flex; align-items: center; gap: calc(7 * var(--u)); text-decoration: none; filter: drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .6)); }
.logo .icon { width: calc(36 * var(--u)); height: calc(36 * var(--u)); display: block; }
.logo .word { height: calc(19 * var(--u)); width: calc(100 * var(--u)); fill: #fff; display: block; }
.chip { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(7 * var(--u)) 0 calc(12 * var(--u)); border-radius: 999px; font: calc(14 * var(--u))/1 'Titan One', system-ui, sans-serif; color: #fff; letter-spacing: .01em; white-space: nowrap;
  border: calc(2.5 * var(--u)) solid transparent; background: linear-gradient(180deg, #1d3fb8, #0b1f6e) padding-box, linear-gradient(180deg, #fff3b0, #f2be3a 45%, #b07812) border-box;
  box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .55), inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, .25); }
.chip b { font-weight: 400; color: #ffe066; font-size: calc(16 * var(--u)); }
.toks { display: flex; }
.tok { width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin-left: calc(-4 * var(--u)); display: block; transition: transform .35s cubic-bezier(.5, -0.6, .7, 1.4), opacity .35s; }
.tok:first-child { margin-left: 0; }
.tok.gone { transform: translateY(calc(-14 * var(--u))) scale(0); opacity: 0; }

/* The 3D gold headline: an outline and depth layer under a gold fill layer. */
.headline { position: absolute; left: 0; right: 0; top: calc(54 * var(--u)); height: calc(94 * var(--u)); margin: 0; display: grid; place-items: center; z-index: 4; perspective: calc(600 * var(--u)); font-weight: 400; }
.h3d { position: relative; display: block; font: calc(52 * var(--u))/.92 'Titan One', system-ui, sans-serif; text-align: center; white-space: pre; letter-spacing: .005em; transform-origin: 50% 60%; }
.h3d.two { font-size: calc(48 * var(--u)); }
.h3d.long { font-size: calc(44 * var(--u)); }
.h3d .o, .h3d .m, .h3d .f { display: block; }
.h3d .o { position: absolute; inset: 0; color: #0d2a8f; -webkit-text-stroke: calc(12 * var(--u)) #0a1f73;
  text-shadow: 0 calc(1 * var(--u)) 0 #0a1f73, 0 calc(2 * var(--u)) 0 #091c69, 0 calc(3 * var(--u)) 0 #081960, 0 calc(4 * var(--u)) 0 #071656, 0 calc(5 * var(--u)) 0 #06134d, 0 calc(6 * var(--u)) 0 #051043, 0 calc(7 * var(--u)) 0 #040d3a, 0 calc(8 * var(--u)) 0 #030b33, 0 calc(9 * var(--u)) 0 #02082b, 0 calc(10 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .7), 0 0 calc(26 * var(--u)) rgba(255, 196, 60, .45); }
.h3d .m { position: absolute; inset: 0; color: #2a5be0; -webkit-text-stroke: calc(5 * var(--u)) #2f63ea; }
.h3d .f { position: relative; color: #ffd84a;
  background: linear-gradient(180deg, #fffbe3 0%, #fff1a0 22%, #ffd12e 46%, #f7a90c 64%, #ffcd3a 82%, #fff0a0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.headline .flip-out { animation: flipout .22s ease-in forwards; }
.headline .flip-in { animation: flipin .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes flipout { to { transform: rotateX(90deg); opacity: .4; } }
@keyframes flipin { from { transform: rotateX(-90deg) scale(1.2); opacity: .4; } to { transform: none; opacity: 1; } }

/* Props around the wheel. */
.arena { position: absolute; inset: 0; pointer-events: none; }
.arena.back { z-index: 1; }
.arena.front { z-index: 3; }
.dc { position: absolute; display: block; height: auto; }
.rays { position: absolute; left: calc(-130 * var(--u)); top: calc(-2 * var(--u)); width: calc(620 * var(--u)); height: calc(620 * var(--u)); border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 216, 96, .26) 0deg 5deg, rgba(255, 216, 96, 0) 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 22%, rgba(0, 0, 0, 0) 66%); mask-image: radial-gradient(circle, #000 22%, rgba(0, 0, 0, 0) 66%);
  animation: turn 60s linear infinite; }
.spinning ~ .arena .rays, .casino.spinning .rays { animation-duration: 8s; }
.notes.l { left: calc(-46 * var(--u)); top: calc(170 * var(--u)); width: calc(150 * var(--u)); transform: rotate(-6deg); }
.notes.r { right: calc(-46 * var(--u)); top: calc(182 * var(--u)); width: calc(150 * var(--u)); transform: scaleX(-1) rotate(-6deg); }
.podium { left: calc(16 * var(--u)); top: calc(404 * var(--u)); width: calc(328 * var(--u)); }
.pile.l { left: calc(-22 * var(--u)); top: calc(466 * var(--u)); width: calc(140 * var(--u)); }
.pile.r { right: calc(-26 * var(--u)); top: calc(472 * var(--u)); width: calc(140 * var(--u)); transform: scaleX(-1); }
.trophy { right: calc(-8 * var(--u)); top: calc(330 * var(--u)); width: calc(92 * var(--u)); }
.gift.red { left: calc(-16 * var(--u)); top: calc(414 * var(--u)); width: calc(116 * var(--u)); }
.gift.blue { right: calc(-12 * var(--u)); top: calc(432 * var(--u)); width: calc(104 * var(--u)); }
.float { will-change: transform; animation: bob 3.4s ease-in-out infinite; }
.f1 { left: calc(4 * var(--u)); top: calc(146 * var(--u)); width: calc(46 * var(--u)); }
.f2 { right: calc(2 * var(--u)); top: calc(140 * var(--u)); width: calc(52 * var(--u)); animation-duration: 3.9s; animation-delay: -1.2s; }
.f3 { left: calc(-8 * var(--u)); top: calc(356 * var(--u)); width: calc(40 * var(--u)); animation-duration: 3.1s; animation-delay: -.6s; }
.f4 { right: calc(10 * var(--u)); top: calc(288 * var(--u)); width: calc(34 * var(--u)); animation-duration: 4.2s; animation-delay: -2s; }
.blur { width: calc(70 * var(--u)); will-change: transform; animation: bob 5s ease-in-out infinite; }
.blur.b1 { left: calc(-26 * var(--u)); top: calc(664 * var(--u)); }
.blur.b2 { right: calc(-24 * var(--u)); top: calc(560 * var(--u)); width: calc(60 * var(--u)); animation-delay: -2.5s; }
.glint { position: absolute; width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin: calc(-13 * var(--u)); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 8%, rgba(255, 244, 200, .8) 14%, rgba(255, 220, 120, 0) 46%),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0 46%, #fff 50%, rgba(255, 255, 255, 0) 54% 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0) 0 46%, #fff 50%, rgba(255, 255, 255, 0) 54% 100%);
  animation: twinkle 2.6s ease-in-out infinite; }
.g1 { left: calc(66 * var(--u)); top: calc(196 * var(--u)); } .g2 { left: calc(300 * var(--u)); top: calc(250 * var(--u)); animation-delay: -.9s; } .g3 { left: calc(88 * var(--u)); top: calc(430 * var(--u)); animation-delay: -1.7s; } .g4 { left: calc(262 * var(--u)); top: calc(160 * var(--u)); animation-delay: -2.2s; }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(calc(-9 * var(--u))) rotate(6deg); } }
@keyframes twinkle { 0%, 60%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 75% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* The giant wheel. */
.wheel { --br: calc(141 * var(--u)); position: absolute; left: calc(22 * var(--u)); top: calc(150 * var(--u)); width: calc(316 * var(--u)); height: calc(316 * var(--u)); z-index: 2; }
.halo { position: absolute; inset: calc(-26 * var(--u)); border-radius: 50%; background: radial-gradient(circle, rgba(255, 206, 80, .7) 50%, rgba(255, 170, 0, .25) 60%, rgba(255, 170, 0, 0) 70%); }
.disc { position: absolute; inset: 9.5%; border-radius: 50%; will-change: transform; }
.disc svg { display: block; width: 100%; height: 100%; overflow: visible; }
.disc .sparkle { fill: #fff; }
.disc .sparkle .glow { fill: #fff6c4; opacity: .45; }
.disc .seps line { stroke: #ffe28a; stroke-width: 6; }
.disc .lbl text { font-family: 'Titan One', system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; letter-spacing: -.5px; }
.disc .lbl.dark text { fill: #0e2470; stroke: rgba(255, 255, 255, .55); stroke-width: 2px; paint-order: stroke; }
.disc .lbl.light text { fill: #fff; stroke: #0b1d5c; stroke-width: 7px; stroke-linejoin: round; paint-order: stroke; }
.shade { position: absolute; inset: 9.5%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .14) 88%, rgba(0, 0, 0, .38) 100%), radial-gradient(70% 55% at 34% 22%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 70%); }
.rim { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .55)); }
.bulbs { position: absolute; inset: 0; }
.bulbs i { position: absolute; left: 50%; top: 50%; width: calc(15 * var(--u)); height: calc(15 * var(--u)); margin: calc(-7.5 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff 0 18%, #fff1b0 32%, #ffc93f 60%, #b36f00 100%); box-shadow: 0 0 0 calc(1.5 * var(--u)) #7a4a00, 0 calc(1 * var(--u)) calc(2 * var(--u)) calc(1.5 * var(--u)) rgba(0, 0, 0, .35); }
.bulbs i::after { content: ''; position: absolute; inset: calc(-10 * var(--u)); border-radius: 50%; opacity: .12;
  background: radial-gradient(circle, rgba(255, 255, 240, 1) 0 16%, rgba(255, 222, 110, .75) 30%, rgba(255, 190, 40, 0) 68%);
  animation: chase 1.5s steps(1, end) infinite; }
.bulbs i:nth-child(3n+2)::after { animation-delay: -.5s; }
.bulbs i:nth-child(3n)::after { animation-delay: -1s; }
.bulbs i:nth-child(1) { transform: rotate(0deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(2) { transform: rotate(18deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(3) { transform: rotate(36deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(4) { transform: rotate(54deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(5) { transform: rotate(72deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(6) { transform: rotate(90deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(7) { transform: rotate(108deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(8) { transform: rotate(126deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(9) { transform: rotate(144deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(10) { transform: rotate(162deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(11) { transform: rotate(180deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(12) { transform: rotate(198deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(13) { transform: rotate(216deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(14) { transform: rotate(234deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(15) { transform: rotate(252deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(16) { transform: rotate(270deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(17) { transform: rotate(288deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(18) { transform: rotate(306deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(19) { transform: rotate(324deg) translateY(calc(-1 * var(--br))); }
.bulbs i:nth-child(20) { transform: rotate(342deg) translateY(calc(-1 * var(--br))); }
.wheel.spinning .bulbs i::after { animation-duration: .3s; }
.wheel.spinning .bulbs i:nth-child(3n+2)::after { animation-delay: -.1s; }
.wheel.spinning .bulbs i:nth-child(3n)::after { animation-delay: -.2s; }
.wheel.won .bulbs i::after { animation: blink .24s steps(1, end) 8; }
@keyframes chase { 0% { opacity: 1; } 33.3% { opacity: .12; } }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: .1; } }
.hub { position: absolute; left: 50%; top: 50%; width: calc(64 * var(--u)); height: calc(64 * var(--u)); margin: calc(-32 * var(--u)); display: block; filter: drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .5)); }
.pointer { position: absolute; left: 50%; top: calc(-26 * var(--u)); width: calc(56 * var(--u)); margin-left: calc(-28 * var(--u)); display: block; transform-origin: 50% 24%; z-index: 3; filter: drop-shadow(0 calc(4 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .55)); }
.plaque { position: absolute; left: 50%; bottom: calc(-20 * var(--u)); width: calc(150 * var(--u)); height: calc(42 * var(--u)); margin-left: calc(-75 * var(--u)); z-index: 3; filter: drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .5)); }
.plaque img { display: block; width: 100%; height: 100%; }
/* The plate inside the plaque picture: rows 10 to 53 of 84, columns 36 to 264 of 300 (tools/art.py output). */
.plaque span { position: absolute; left: 12%; right: 12%; top: 12%; height: 51%; display: flex; align-items: center; justify-content: center; font: calc(20 * var(--u))/1 'Titan One', system-ui, sans-serif; letter-spacing: .07em; text-indent: .07em; color: #13226b; text-shadow: 0 calc(1 * var(--u)) 0 rgba(255, 246, 200, .8); padding-bottom: .02em; white-space: nowrap; }
.wedge { position: absolute; inset: 9.5%; border-radius: 50%; opacity: 0; pointer-events: none;
  clip-path: polygon(50% 50%, 29.3% 0, 70.7% 0); background: radial-gradient(circle, rgba(255, 255, 255, 0) 30%, rgba(255, 250, 210, .32) 74%, rgba(255, 255, 255, .8) 100%); }
/* When the FREE SPIN stamp lands, the rest of the Gold wheel goes dark; only the landed slice stays lit. */
.dimmer { position: absolute; inset: 9.5%; border-radius: 50%; opacity: 0; pointer-events: none; background: rgba(4, 8, 22, .58);
  clip-path: polygon(50% 50%, 29.3% 0, 0 0, 0 100%, 100% 100%, 100% 0, 70.7% 0); }
.flash { position: absolute; inset: -30%; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(circle, rgba(255, 255, 245, .95) 0 12%, rgba(255, 232, 150, .65) 30%, rgba(255, 200, 60, 0) 62%); }
.pop { position: absolute; left: 50%; top: 31%; z-index: 7; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.pop b { display: block; font: calc(66 * var(--u))/1 'Titan One', system-ui, sans-serif; font-weight: 400; color: #ffe066; -webkit-text-stroke: calc(3 * var(--u)) #6b3d00;
  text-shadow: 0 calc(2 * var(--u)) 0 #8a5200, 0 calc(4 * var(--u)) 0 #6b3d00, 0 calc(6 * var(--u)) 0 #4a2a00, 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .7), 0 0 calc(30 * var(--u)) rgba(255, 220, 90, .9); }
.pop .lock { position: absolute; right: calc(-40 * var(--u)); top: calc(10 * var(--u)); width: calc(50 * var(--u)); opacity: 0; filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .6)); }
.stamp { position: absolute; left: 50%; top: 58%; z-index: 6; width: calc(272 * var(--u)); margin: calc(-36 * var(--u)) 0 0 calc(-136 * var(--u)); padding: calc(6 * var(--u)); border-radius: calc(14 * var(--u)); transform: rotate(-9deg); pointer-events: none;
  background: linear-gradient(180deg, #e8202b, #b70d16); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .55), inset 0 0 0 calc(2 * var(--u)) rgba(120, 0, 6, .6); }
.stamp span { display: block; padding: calc(5 * var(--u)) calc(4 * var(--u)) calc(3 * var(--u)); border: calc(3.5 * var(--u)) solid #fff; border-radius: calc(9 * var(--u)); font: calc(43 * var(--u))/1 'Titan One', system-ui, sans-serif; text-align: center; color: #fff; letter-spacing: .01em; white-space: nowrap; text-shadow: 0 calc(2 * var(--u)) 0 rgba(90, 0, 0, .35); }

/* The live feed of wins: a marquee under the top bar. The page moves up a little to make room. */
.has-feed .top { top: calc(6 * var(--u)); height: calc(40 * var(--u)); }
.has-feed .headline { top: calc(76 * var(--u)); height: calc(86 * var(--u)); }
.has-feed .wheel { --br: calc(134 * var(--u)); left: calc(30 * var(--u)); top: calc(164 * var(--u)); width: calc(300 * var(--u)); height: calc(300 * var(--u)); }
.ticker { position: absolute; left: calc(10 * var(--u)); right: calc(10 * var(--u)); top: calc(49 * var(--u)); height: calc(26 * var(--u)); z-index: 5; display: flex; align-items: center; gap: calc(6 * var(--u)); padding: 0 calc(4 * var(--u));
  border-radius: 999px; background: linear-gradient(180deg, rgba(10, 10, 14, .82), rgba(30, 20, 4, .82)); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 210, 90, .75), 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .5); }
.ticker .live { flex: none; display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(19 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: 999px; background: linear-gradient(180deg, #ff3b30, #b80d0d);
  font: calc(11 * var(--u))/1 'Titan One', system-ui, sans-serif; letter-spacing: .06em; color: #fff; }
.ticker .live i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #fff; animation: pulse 1.2s ease-in-out infinite; }
.ticker .lane { position: relative; flex: 1; height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 6%, #000 94%, rgba(0, 0, 0, 0)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 6%, #000 94%, rgba(0, 0, 0, 0)); }
.ticker .track { position: absolute; left: 0; top: 0; height: 100%; display: flex; width: max-content; will-change: transform; animation: tick 60s linear infinite; }
.ticker .set { display: flex; align-items: center; }
.ticker .win { display: block; line-height: calc(26 * var(--u)); padding: 0 calc(16 * var(--u)) 0 0; white-space: nowrap; font: 700 calc(12.5 * var(--u))/1 system-ui, Roboto, Arial, sans-serif; color: #ffe9b0; }
.ticker .win img { display: inline-block; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: 0 calc(5 * var(--u)) 0 0; vertical-align: calc(-3.5 * var(--u)); }
.ticker .win b { color: #fff; font-weight: 800; }
.ticker .win em { font: normal calc(14 * var(--u))/1 'Titan One', system-ui, sans-serif; color: #ffd84a; text-shadow: 0 0 calc(6 * var(--u)) rgba(255, 200, 60, .6); }
.ticker .win time { color: #c9b98a; font-weight: 600; }
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes pulse { 50% { opacity: .25; } }
/* This week's paid-out total: a jackpot meter on the front of the podium. */
.meter { position: absolute; left: 50%; top: calc(488 * var(--u)); z-index: 4; transform: translateX(-50%); display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(9 * var(--u)); white-space: nowrap;
  border: calc(2 * var(--u)) solid transparent; background: linear-gradient(180deg, #160c00, #2b1600) padding-box, linear-gradient(180deg, #fff3b0, #e5a823 50%, #8a5a06) border-box; box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .6), 0 0 calc(14 * var(--u)) rgba(255, 196, 60, .35); }
.meter b { font: normal calc(20 * var(--u))/1 'Titan One', system-ui, sans-serif; color: #ffd84a; letter-spacing: .02em; text-shadow: 0 0 calc(8 * var(--u)) rgba(255, 200, 60, .75), 0 calc(2 * var(--u)) 0 #7a4a00; }
.meter span { font: 800 calc(10 * var(--u))/1.1 system-ui, Roboto, Arial, sans-serif; letter-spacing: .08em; color: #fff3cf; }

/* The job card under the wheel: in the blue gift box's place, tilted, glowing. */
.has-card .gift.blue { display: none; }
.jcard-at, a.jcard-at.jcard { position: absolute; right: calc(6 * var(--u)); top: calc(380 * var(--u)); z-index: 4; margin: 0; }
/* Room for the card: the paid-out meter moves left; the trophy stands behind the card. */
.has-card .meter { left: 38%; }
.jcard { position: relative; display: block; width: calc(100 * var(--u)); height: calc(136 * var(--u)); padding: 0; border: 0; border-radius: calc(10 * var(--u)); cursor: pointer; text-decoration: none; transform: rotate(4deg);
  background: linear-gradient(160deg, #fff6c4, #f2c23a 40%, #b47a10 75%, #ffe07a); box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .6), 0 0 calc(18 * var(--u)) rgba(255, 206, 74, .55); animation: cardbob 3s ease-in-out infinite; }
.jcard::after { content: ''; position: absolute; inset: calc(-6 * var(--u)); border-radius: calc(14 * var(--u)); border: calc(2 * var(--u)) solid rgba(255, 230, 140, .9); opacity: 0; animation: cardping 2.2s ease-out infinite; }
@keyframes cardbob { 50% { transform: rotate(4deg) translateY(calc(-4 * var(--u))); } }
@keyframes cardping { 0% { opacity: .9; transform: scale(.96); } 70%, 100% { opacity: 0; transform: scale(1.12); } }
.jc-back, .jc-face { position: absolute; inset: calc(4 * var(--u)); border-radius: calc(7 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(7 * var(--u)) calc(4 * var(--u)); overflow: hidden; }
.jc-back { background: repeating-linear-gradient(45deg, #1d43d8 0 calc(6 * var(--u)), #2a55ee calc(6 * var(--u)) calc(12 * var(--u))), #1d43d8; box-shadow: inset 0 0 0 calc(2 * var(--u)) #ffd84a, inset 0 0 0 calc(4 * var(--u)) #10288f; }
.jc-back b { font: calc(12 * var(--u))/1 'Titan One', system-ui, sans-serif; font-weight: 400; color: #ffe066; letter-spacing: .06em; text-shadow: 0 calc(1 * var(--u)) 0 #0a1f73; }
.jc-back .mark { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; padding: calc(5 * var(--u)); background: radial-gradient(circle at 40% 35%, #fff6c4, #f2c23a 55%, #a86c06); box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .5); display: block; }
.jc-back .mark svg { width: 100%; height: 100%; display: block; }
.jc-back em { font: normal 800 calc(9.5 * var(--u))/1 system-ui, Roboto, Arial, sans-serif; letter-spacing: .05em; color: #0b1d3a; background: #ffd84a; border-radius: 999px; padding: calc(3 * var(--u)) calc(6 * var(--u)); }
.jc-face { background: linear-gradient(180deg, #fffdf2, #fff3cf); box-shadow: inset 0 0 0 calc(2 * var(--u)) #e5a823; justify-content: center; gap: calc(1 * var(--u)); color: #0b1d3a; text-align: center; }
.jc-face small { font: 800 calc(9 * var(--u))/1.1 system-ui, Roboto, Arial, sans-serif; letter-spacing: .04em; color: #44506b; }
.jc-face b { font: calc(21 * var(--u))/1 'Titan One', system-ui, sans-serif; font-weight: 400; color: #128a3a; margin-top: calc(3 * var(--u)); }
.jc-face em { font: normal 800 calc(10.5 * var(--u))/1.15 system-ui, Roboto, Arial, sans-serif; color: #0b1d3a; margin-top: calc(4 * var(--u)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jc-face .lock { width: calc(26 * var(--u)); height: auto; margin-top: calc(4 * var(--u)); }
.jc-face .tick { font: normal calc(10 * var(--u))/1 'Titan One', system-ui, sans-serif; color: #fff; background: #0f7a33; border-radius: 999px; padding: calc(3 * var(--u)) calc(7 * var(--u)); margin-top: calc(5 * var(--u)); }

/* The card opened big, and its flip. */
.jover { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; background: rgba(0, 0, 0, .78); }
.jstage { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); perspective: calc(900 * var(--u)); }
.j3d { position: relative; width: calc(272 * var(--u)); height: calc(372 * var(--u)); transform-style: preserve-3d; }
.jside { position: absolute; inset: 0; border-radius: calc(20 * var(--u)); backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: calc(7 * var(--u));
  background: linear-gradient(160deg, #fff6c4, #f2c23a 40%, #b47a10 75%, #ffe07a); box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .7), 0 0 calc(40 * var(--u)) rgba(255, 206, 74, .45); }
.jbackside .jc-back { inset: calc(7 * var(--u)); border-radius: calc(14 * var(--u)); padding: calc(22 * var(--u)) calc(10 * var(--u)); }
.jbackside .jc-back b { font-size: calc(26 * var(--u)); }
.jbackside .jc-back .mark { width: calc(110 * var(--u)); height: calc(110 * var(--u)); padding: calc(14 * var(--u)); }
.jbackside .jc-back em { font-size: calc(15 * var(--u)); padding: calc(7 * var(--u)) calc(14 * var(--u)); }
.jfront { transform: rotateY(180deg); }
.jopen .jfront { transform: none; }
.jopen .jbackside { display: none; }
.jf { position: absolute; inset: calc(7 * var(--u)); border-radius: calc(14 * var(--u)); background: linear-gradient(180deg, #fffdf2, #fff0c4); box-shadow: inset 0 0 0 calc(2 * var(--u)) #e5a823; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(16 * var(--u)) calc(14 * var(--u)); gap: calc(6 * var(--u)); color: #0b1d3a; overflow: hidden; }
.jf small { font: 800 calc(12 * var(--u))/1.2 system-ui, Roboto, Arial, sans-serif; letter-spacing: .06em; color: #44506b; }
.jf .pay { font: calc(40 * var(--u))/1 'Titan One', system-ui, sans-serif; color: #128a3a; }
.jf .pm { font: 800 calc(13 * var(--u))/1 system-ui, Roboto, Arial, sans-serif; color: #44506b; margin-top: calc(-4 * var(--u)); }
.jf h3 { margin: calc(4 * var(--u)) 0 0; font: 900 calc(19 * var(--u))/1.15 system-ui, Roboto, Arial, sans-serif; }
.jf p { margin: 0; font: 700 calc(13 * var(--u))/1.3 system-ui, Roboto, Arial, sans-serif; color: #334155; }
.jf .why { color: #0f7a33; font-weight: 800; }
.jf .got { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(5 * var(--u)); margin-top: auto; }
.jf .got span { font: 800 calc(11 * var(--u))/1 system-ui, Roboto, Arial, sans-serif; color: #0b3d1a; background: #c9f5d2; border-radius: 999px; padding: calc(5 * var(--u)) calc(8 * var(--u)); }
.jf .hid { width: 86%; display: grid; gap: calc(6 * var(--u)); margin-top: calc(4 * var(--u)); }
.jf .hid i { display: block; height: calc(11 * var(--u)); border-radius: 999px; background: linear-gradient(90deg, #d9cfa9, #ece2bf); }
.jf .hid i:nth-child(2) { width: 70%; justify-self: center; }
.jf .bigl { width: calc(54 * var(--u)); height: auto; margin-top: calc(4 * var(--u)); filter: drop-shadow(0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .35)); }
.jf .inside { font: 700 calc(12 * var(--u))/1.3 system-ui, Roboto, Arial, sans-serif; color: #44506b; margin-top: auto; }
.drop { position: absolute; left: 50%; bottom: calc(-18 * var(--u)); transform: translateX(-50%); white-space: nowrap; font: calc(20 * var(--u))/1 'Titan One', system-ui, sans-serif; color: #13226b;
  background: linear-gradient(180deg, #fff3b0, #f2c23a 55%, #c98a12); border-radius: 999px; padding: calc(9 * var(--u)) calc(16 * var(--u)) calc(7 * var(--u)); box-shadow: 0 calc(5 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .55), 0 0 calc(20 * var(--u)) rgba(255, 210, 80, .8); }
.jacts { display: grid; gap: calc(9 * var(--u)); width: calc(300 * var(--u)); margin-top: calc(14 * var(--u)); }
.jact { display: flex; align-items: center; justify-content: center; height: calc(56 * var(--u)); padding: 0 calc(14 * var(--u)); white-space: nowrap; overflow: hidden; border-radius: 999px; text-decoration: none; font: calc(19 * var(--u))/1 'Titan One', system-ui, sans-serif; letter-spacing: .02em; color: #fff;
  background: radial-gradient(130% 110% at 50% 0%, #9bff7d 0%, #3ad843 36%, #12a629 68%, #077a19 100%); box-shadow: inset 0 0 0 calc(3 * var(--u)) #f2c23a, 0 calc(5 * var(--u)) 0 #6b4306, 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .55);
  text-shadow: 0 calc(2 * var(--u)) 0 #0b5c16, 0 0 calc(2 * var(--u)) #0b5c16; }
.jact.gold { color: #13226b; text-shadow: 0 calc(1 * var(--u)) 0 rgba(255, 246, 200, .8); background: linear-gradient(180deg, #fff3b0, #f2c23a 55%, #c98a12); }
.jact.plain { height: calc(44 * var(--u)); font: 800 calc(15 * var(--u))/1 system-ui, Roboto, Arial, sans-serif; color: #ffe9b0; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 216, 74, .6); text-shadow: none; }
.jclose { margin-top: calc(4 * var(--u)); border: 0; background: none; color: #ffe9b0; font: 700 calc(14 * var(--u))/1 system-ui, Roboto, Arial, sans-serif; text-decoration: underline; cursor: pointer; padding: calc(8 * var(--u)); }

/* Under the wheel: the prizes, then the Gold total once a spin has landed. */
.info { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(520 * var(--u)); height: calc(80 * var(--u)); display: grid; align-items: center; z-index: 4; }
.prizes { margin: 0; height: calc(46 * var(--u)); display: flex; align-items: center; justify-content: center; border-radius: calc(14 * var(--u)); padding: 0 calc(8 * var(--u)); white-space: nowrap;
  border: calc(3 * var(--u)) solid transparent; background: linear-gradient(180deg, #1c46cf, #0a2483) padding-box, linear-gradient(180deg, #fff3b0, #eab12a 50%, #a46c0c) border-box;
  font: 800 calc(15.5 * var(--u))/1 system-ui, Roboto, Arial, sans-serif; color: #fff; text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .35); box-shadow: 0 calc(5 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .55); }
.prizes b { font-weight: 900; margin-left: .3em; }
.prizes span b { margin-left: 0; color: #ffe066; }
.twin { height: calc(80 * var(--u)); display: grid; grid-template-columns: calc(62 * var(--u)) 1fr; grid-template-rows: 1fr auto; align-items: center; column-gap: calc(4 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(16 * var(--u));
  border: calc(3 * var(--u)) solid transparent; background: linear-gradient(180deg, #1c46cf, #0a2483) padding-box, linear-gradient(180deg, #fff3b0, #eab12a 50%, #a46c0c) border-box; box-shadow: 0 calc(5 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .6); }
.twin .lock { grid-row: 1 / 3; width: calc(56 * var(--u)); height: auto; display: block; filter: drop-shadow(0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .5)); }
.twin .say { align-self: end; text-align: center; font: 800 calc(16 * var(--u))/1.1 system-ui, Roboto, Arial, sans-serif; color: #fff; }
.twin b { align-self: start; text-align: center; font: calc(44 * var(--u))/1 'Titan One', system-ui, sans-serif; font-weight: 400; color: #ffd84a; letter-spacing: .01em;
  text-shadow: 0 calc(2 * var(--u)) 0 #8a5200, 0 calc(4 * var(--u)) 0 #5c3500, 0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .55); }
.twin.bump { animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.07); } }

/* The big green candy button. */
.go { position: absolute; left: calc(18 * var(--u)); right: calc(18 * var(--u)); top: calc(606 * var(--u)); height: calc(90 * var(--u)); margin: 0; z-index: 5; }
.spin-btn { position: relative; display: block; width: 100%; height: calc(90 * var(--u)); padding: 0; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #fff7c4 0%, #f8cf52 28%, #d6931a 62%, #ffe27c 100%);
  box-shadow: 0 calc(6 * var(--u)) 0 #6b4306, 0 calc(12 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .6), 0 0 calc(24 * var(--u)) rgba(255, 206, 74, .45); animation: breathe 1.7s ease-in-out infinite; }
a.spin-btn { position: absolute; left: calc(18 * var(--u)); right: calc(18 * var(--u)); top: calc(606 * var(--u)); width: auto; z-index: 5; }
.spin-btn .body { position: absolute; inset: calc(6 * var(--u)); border-radius: 999px; overflow: hidden;
  background: radial-gradient(130% 110% at 50% 0%, #9bff7d 0%, #3ad843 36%, #12a629 68%, #077a19 100%); box-shadow: inset 0 calc(-7 * var(--u)) calc(12 * var(--u)) rgba(0, 70, 10, .65), inset 0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(255, 255, 255, .55); }
.spin-btn .body::before { content: ''; position: absolute; left: 8%; right: 8%; top: calc(4 * var(--u)); height: 42%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .06)); }
.spin-btn .shine { position: absolute; top: -20%; bottom: -20%; left: -30%; width: 22%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); transform: skewX(-20deg); animation: shine 3s ease-in-out infinite; }
.spin-btn .txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); font: calc(64 * var(--u))/1 'Titan One', system-ui, sans-serif; letter-spacing: .03em; padding-top: calc(4 * var(--u));
  text-shadow: calc(2.5 * var(--u)) 0 0 #0b5c16, calc(-2.5 * var(--u)) 0 0 #0b5c16, 0 calc(2.5 * var(--u)) 0 #0b5c16, 0 calc(-2.5 * var(--u)) 0 #0b5c16, calc(1.8 * var(--u)) calc(1.8 * var(--u)) 0 #0b5c16, calc(-1.8 * var(--u)) calc(1.8 * var(--u)) 0 #0b5c16, calc(1.8 * var(--u)) calc(-1.8 * var(--u)) 0 #0b5c16, calc(-1.8 * var(--u)) calc(-1.8 * var(--u)) 0 #0b5c16, 0 calc(5 * var(--u)) 0 #08460f, 0 calc(8 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .4); }
.spin-btn .txt.long { font-size: calc(34 * var(--u)); letter-spacing: .01em; }
.spin-btn .txt.xlong { font-size: calc(26 * var(--u)); white-space: nowrap; }
.spin-btn .txt svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex: none; }
.spin-btn:active { transform: translateY(calc(4 * var(--u))) scale(.985); box-shadow: 0 calc(2 * var(--u)) 0 #6b4306, 0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .6); animation: none; }
.spin-btn:disabled { cursor: default; animation: none; }
.spin-btn:disabled .shine { animation: none; opacity: 0; }
.spin-btn:focus-visible { outline: calc(3 * var(--u)) solid #fff; outline-offset: calc(3 * var(--u)); }
@keyframes breathe { 50% { transform: scale(1.035); } }
@keyframes shine { 0%, 55% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(720%) skewX(-20deg); } }

.fine { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(708 * var(--u)); margin: 0; padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); z-index: 4;
  border: calc(2 * var(--u)) solid transparent; background: linear-gradient(180deg, #9a1016, #5e0609) padding-box, linear-gradient(180deg, #ffd76a, #a8700f) border-box;
  font: 700 calc(12 * var(--u))/1.3 system-ui, Roboto, Arial, sans-serif; text-align: center; color: #fff; box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .5); }
.fine a { color: #ffe07a; }
.goldstrip { position: absolute; left: calc(40 * var(--u)); right: calc(40 * var(--u)); top: calc(756 * var(--u)); height: calc(30 * var(--u)); display: grid; place-items: center; border-radius: 999px; z-index: 4;
  background: linear-gradient(180deg, #fff3b0, #e5a823); color: #13226b; font: 800 calc(13 * var(--u))/1 system-ui, Roboto, Arial, sans-serif; text-decoration: none; }

/* Coins, confetti and the screen shake of the moment (made by spin.js). */
.fx { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.fx img, .fx i { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; }
.fx i { width: calc(9 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(2 * var(--u)); }

@media (prefers-reduced-motion: reduce) {
  .rays, .float, .blur, .glint, .bulbs i::after, .spin-btn, .spin-btn .shine, .ticker .track, .ticker .live i, .jcard, .jcard::after { animation: none !important; }
  .glint { opacity: 0; }
  .bulbs i:nth-child(odd)::after { opacity: .9; }
}
/* While the card is being dealt (the job is found and the CV written), the face-down card shuffles. */
.jdealing .jbackside { animation: deal .7s ease-in-out infinite; }
.jdealing .jbackside .jc-back em { animation: pulse 1s ease-in-out infinite; }
@keyframes deal { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(-3deg) scale(1.02); } 75% { transform: rotate(3deg) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .jdealing .jbackside, .jdealing .jbackside .jc-back em { animation: none; } }
/* How many paid cards wait to be opened. */
.jcard .jc-n { position: absolute; right: calc(-8 * var(--u)); top: calc(-8 * var(--u)); min-width: calc(26 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: 999px; display: grid; place-items: center;
  font: normal calc(14 * var(--u))/1 'Titan One', system-ui, sans-serif; color: #fff; background: linear-gradient(180deg, #ff4a4a, #c80d17); box-shadow: 0 0 0 calc(2 * var(--u)) #ffe066, 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .5); }
.jacts button.jact { border: 0; cursor: pointer; width: 100%; }