/* Shadow's other screens in the casino look (12 October 2026): the black stage, gold, the 3D
   headline and the candy buttons of the approved spin screen (designs/2026-10-12/final/v3), in a
   page that scrolls. Loaded after casino.css. --u is one unit of a 360-wide phone, never more than
   1.25 px, so the page stays phone-shaped on a big screen. Old class names are kept (.btn, .card,
   .lead...) so every screen and the tests read the same; only the look changes. */
body.casino-page.cz-page, body.casino-page.cz-page.test { --u: min(calc(100vw / 360), 1.25px); min-height: 100vh; overflow-x: hidden; }
@supports (height: 100svh) { body.casino-page.cz-page, body.casino-page.cz-page.test { --u: min(calc(100vw / 360), 1.25px); } }
.cz { position: relative; z-index: 1; width: calc(360 * var(--u)); max-width: 100%; margin: 0 auto; padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(30 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u));
  font: 600 calc(16 * var(--u))/1.4 system-ui, Roboto, Arial, sans-serif; color: #fff; }
.cz > *, .cz p, .cz h1, .cz h2 { margin: 0; }
.cz .ctop { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: calc(46 * var(--u)); z-index: 2; }
.cz .chip { text-decoration: none; }
.chip.steps { gap: calc(4 * var(--u)); padding: 0 calc(12 * var(--u)); }
.chip.steps i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .25); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(0, 0, 0, .25); }
.chip.steps i.on { background: radial-gradient(circle at 40% 35%, #fff6c4, #f2c23a 55%, #a86c06); }
.chip.steps span { margin-left: calc(4 * var(--u)); font-size: calc(13 * var(--u)); }
.ribbon { align-self: center; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); border-radius: 999px; font: 800 calc(16 * var(--u))/1 system-ui, Roboto, Arial, sans-serif; color: #fff;
  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(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .55); }
.ribbon img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.ribbon b { color: #ffe066; }
.ribbon span { text-align: center; }

/* The 3D headline in a page that wraps. */
.ch { text-align: center; position: relative; }
.ch .h3d, .ch .h3d.two, .ch .h3d.long { white-space: normal; font-size: calc(44 * var(--u)); line-height: .98; }
.ch.xl .h3d { font-size: calc(74 * var(--u)); line-height: .95; }
.ch.l .h3d { font-size: calc(54 * var(--u)); }
.ch.m .h3d { font-size: calc(36 * var(--u)); }
.ch.s .h3d { font-size: calc(30 * var(--u)); }
.ch .h3d .o { -webkit-text-stroke-width: calc(10 * var(--u)); }
.ch .h3d .m { -webkit-text-stroke-width: calc(4 * var(--u)); }
.cz .lead, .csub { text-align: center; font: 800 calc(17 * var(--u))/1.32 system-ui, Roboto, Arial, sans-serif; color: #fff; text-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .8); }
.cz .lead b, .csub b { color: #ffd84a; }
.mood { text-align: center; font: calc(22 * var(--u))/1.1 'Titan One', system-ui, sans-serif; color: #ffd84a; text-shadow: 0 calc(2 * var(--u)) 0 #6b3d00, 0 0 calc(12 * var(--u)) rgba(255, 200, 60, .6); }

/* Hero pictures, with live text on them where they carry an amount. */
.chero { position: relative; display: grid; place-items: center; margin: 0 auto; width: calc(210 * var(--u)); }
.chero::before { content: ''; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 90, .55), rgba(255, 180, 40, .18) 45%, rgba(255, 180, 40, 0) 68%); }
.chero img { position: relative; width: 100%; height: auto; display: block; filter: drop-shadow(0 calc(8 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .6)); }
.chero.s { width: calc(140 * var(--u)); } .chero.m { width: calc(180 * var(--u)); } .chero.l { width: calc(250 * var(--u)); } .chero.xl { width: calc(300 * var(--u)); }
.chero .amt { position: absolute; inset: 0; display: grid; place-items: center; font: calc(64 * var(--u))/1 'Titan One', system-ui, sans-serif; color: #7a4a00; text-shadow: 0 calc(1.5 * var(--u)) 0 #ffe9a0, 0 calc(-1 * var(--u)) 0 #8a5200; letter-spacing: -.01em; }
.chero .amt.x2 { font-size: calc(58 * var(--u)); color: #fff; text-shadow: 0 0 0 #000, calc(2.5 * var(--u)) 0 0 #6b3d00, calc(-2.5 * var(--u)) 0 0 #6b3d00, 0 calc(2.5 * var(--u)) 0 #6b3d00, 0 calc(-2.5 * var(--u)) 0 #6b3d00, 0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .6); top: -48%; }
.chero.bob img { animation: bob 3.4s ease-in-out infinite; }
.chero .side { position: absolute; width: 46%; height: auto; bottom: -6%; }
.chero .side.l { left: -36%; } .chero .side.r { right: -36%; transform: scaleX(-1); }

/* Panels: royal blue with a gold edge, as the spin screen's prize bar. */
.card, .cpanel { position: relative; border: calc(3 * var(--u)) solid transparent; border-radius: calc(16 * var(--u)); padding: calc(14 * var(--u)); color: #fff;
  background: linear-gradient(180deg, #1c46cf, #0a2483) padding-box, linear-gradient(180deg, #fff3b0, #eab12a 50%, #a46c0c) border-box; box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .6); }
.card.dark, .cpanel.dark { background: linear-gradient(180deg, rgba(26, 16, 2, .94), rgba(12, 8, 2, .94)) padding-box, linear-gradient(180deg, #fff3b0, #eab12a 50%, #a46c0c) border-box; }
.card.warn { background: linear-gradient(180deg, #8a1016, #5e0609) padding-box, linear-gradient(180deg, #ffd76a, #a8700f) border-box; }
.card.ok { display: flex; gap: calc(8 * var(--u)); align-items: center; background: linear-gradient(180deg, #17883a, #0b5c22) padding-box, linear-gradient(180deg, #fff3b0, #eab12a 50%, #a46c0c) border-box; }
.card.ok a { color: #ffe066; }
.card p { margin: 0; }
.cz .fine { position: static; padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); text-align: center; font: 700 calc(12.5 * var(--u))/1.35 system-ui, Roboto, Arial, sans-serif; color: #fff;
  border: calc(2 * var(--u)) solid transparent; background: linear-gradient(180deg, #9a1016, #5e0609) padding-box, linear-gradient(180deg, #ffd76a, #a8700f) border-box; box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .5); }
.cz .fine a, .cz .link { color: #ffe07a; }
.cz .fine.plain { background: none; border: 0; box-shadow: none; color: #ffe9b0; font-size: calc(13.5 * var(--u)); text-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .8); }
.cz .center { text-align: center; }
.cz .link { font: 800 calc(15 * var(--u))/1.3 system-ui, Roboto, Arial, sans-serif; text-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .8); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.cz .link.center { display: flex; justify-content: center; align-items: center; gap: calc(6 * var(--u)); }
.cz .inline { display: flex; gap: calc(8 * var(--u)); justify-content: center; flex-wrap: wrap; align-items: center; color: #ffe9b0; font-weight: 700; }
.cz .inline .link { font-size: calc(15 * var(--u)); }
.cz .ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Candy buttons. .btn.gold is the main step (green candy in a gold ring), .btn.green is WhatsApp. */
.cz .btn { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); width: 100%; min-height: calc(66 * var(--u)); padding: calc(8 * var(--u)) calc(22 * var(--u)); border: 0; border-radius: 999px; cursor: pointer;
  text-decoration: none; text-align: center; font: calc(26 * var(--u))/1.05 'Titan One', system-ui, sans-serif; letter-spacing: .02em; color: #fff; isolation: isolate;
  text-shadow: calc(2 * var(--u)) 0 0 #0b5c16, calc(-2 * var(--u)) 0 0 #0b5c16, 0 calc(2 * var(--u)) 0 #0b5c16, 0 calc(-2 * var(--u)) 0 #0b5c16, calc(1.4 * var(--u)) calc(1.4 * var(--u)) 0 #0b5c16, calc(-1.4 * var(--u)) calc(1.4 * var(--u)) 0 #0b5c16, calc(1.4 * var(--u)) calc(-1.4 * var(--u)) 0 #0b5c16, calc(-1.4 * var(--u)) calc(-1.4 * var(--u)) 0 #0b5c16, 0 calc(4 * var(--u)) 0 #08460f;
  background: radial-gradient(130% 110% at 50% 0%, #9bff7d 0%, #3ad843 36%, #12a629 68%, #077a19 100%);
  box-shadow: inset 0 0 0 calc(5 * var(--u)) #f2c23a, inset 0 0 0 calc(6.5 * var(--u)) #8a5a06, inset 0 calc(-8 * var(--u)) calc(12 * var(--u)) rgba(0, 70, 10, .55), 0 calc(5 * var(--u)) 0 #6b4306, 0 calc(10 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .55), 0 0 calc(22 * var(--u)) rgba(255, 206, 74, .35); }
.cz .btn::before { content: ''; position: absolute; left: 9%; right: 9%; top: calc(8 * var(--u)); height: 36%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .05)); z-index: -1; pointer-events: none; }
.cz .btn.xl { min-height: calc(80 * var(--u)); font-size: calc(28 * var(--u)); }
.cz .btn.gold.pulse, .cz .btn.breathe { animation: breathe 1.7s ease-in-out infinite; }
.cz .btn:active { transform: translateY(calc(3 * var(--u))) scale(.985); }
.cz .btn:disabled { opacity: .6; }
.cz .btn .ic { width: calc(28 * var(--u)); height: calc(28 * var(--u)); filter: drop-shadow(0 calc(2 * var(--u)) 0 #0b5c16); }
.cz .btn .wa { width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: none; }
.cz .btn.green { background: radial-gradient(130% 110% at 50% 0%, #8ff7a7 0%, #2fd463 38%, #16a94a 70%, #0b7a33 100%); font-size: calc(23 * var(--u)); }
.cz .btn.blue { background: radial-gradient(130% 110% at 50% 0%, #6f98ff 0%, #2f5ef0 40%, #1638b6 75%, #0d2588 100%); font-size: calc(17.5 * var(--u)); min-height: calc(58 * var(--u)); white-space: nowrap;
  text-shadow: 0 calc(2 * var(--u)) 0 #071a63, 0 0 calc(2 * var(--u)) #071a63; }
.cz .btn.goldy { color: #13226b; text-shadow: 0 calc(1.5 * var(--u)) 0 rgba(255, 246, 200, .9); background: linear-gradient(180deg, #fff7c4 0%, #f8cf52 35%, #d6931a 72%, #ffe27c 100%); font-size: calc(19 * var(--u)); min-height: calc(58 * var(--u)); white-space: nowrap;
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #8a5a06, 0 calc(5 * var(--u)) 0 #6b4306, 0 calc(10 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .55); }
.cz .btn.ghost { min-height: calc(52 * var(--u)); font: 800 calc(17 * var(--u))/1.15 system-ui, Roboto, Arial, sans-serif; text-shadow: none; color: #ffe9b0; background: rgba(8, 6, 2, .72);
  box-shadow: inset 0 0 0 calc(2.5 * var(--u)) #e5a823, 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .5); }
.cz .btn.ghost::before { display: none; }
.cz .btn.small { width: auto; min-height: calc(42 * var(--u)); font: 800 calc(15 * var(--u))/1 system-ui, Roboto, Arial, sans-serif; text-shadow: none; padding: calc(8 * var(--u)) calc(16 * var(--u)); display: inline-flex; }
.cz .row { display: flex; gap: calc(10 * var(--u)); }

/* Forms. */
.cz .form { display: grid; gap: calc(14 * var(--u)); }
.cz .form label, .cz .form legend { display: grid; gap: calc(7 * var(--u)); font: 800 calc(16 * var(--u))/1.25 system-ui, Roboto, Arial, sans-serif; color: #fff; }
.cz .form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: calc(9 * var(--u)); }
.cz input, .cz select, .cz textarea { font: 700 calc(19 * var(--u))/1.2 system-ui, Roboto, Arial, sans-serif; width: 100%; min-height: calc(56 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); border: calc(3 * var(--u)) solid #f2c23a; background: #fffdf4; color: #0b1d3a; box-shadow: inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .12); }
.cz input::placeholder, .cz textarea::placeholder { color: #8a93a6; font-weight: 600; }
.cz input:focus, .cz textarea:focus { outline: calc(3 * var(--u)) solid #9bff7d; outline-offset: calc(1 * var(--u)); }
.cz input.code { text-align: center; font: calc(44 * var(--u))/1 'Titan One', system-ui, sans-serif; letter-spacing: .5em; padding-left: .5em; min-height: calc(76 * var(--u)); }
.cz input[type=checkbox], .cz input[type=radio] { width: calc(24 * var(--u)); min-height: calc(24 * var(--u)); height: calc(24 * var(--u)); accent-color: #f2c23a; box-shadow: none; }
.cz .choices { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
.cz .pill { position: relative; display: flex !important; }
.cz .pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cz .pill span { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; min-height: calc(50 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(14 * var(--u)); font: 800 calc(15.5 * var(--u))/1.15 system-ui, Roboto, Arial, sans-serif; color: #fff;
  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; }
.cz .pill input:checked + span { color: #13226b; background: linear-gradient(180deg, #fff3b0, #f2c23a 55%, #c98a12) padding-box, linear-gradient(180deg, #fffbe0, #b07812) border-box; box-shadow: 0 0 calc(14 * var(--u)) rgba(255, 210, 80, .7); }
.cz .pill input:checked + span::after { content: ''; width: calc(14 * var(--u)); height: calc(8 * var(--u)); margin-left: calc(8 * var(--u)); border-left: calc(3.5 * var(--u)) solid #13226b; border-bottom: calc(3.5 * var(--u)) solid #13226b; transform: rotate(-45deg) translateY(calc(-2 * var(--u))); }
.cz .pill input:focus-visible + span { outline: calc(3 * var(--u)) solid #fff; }
.cz .checkline { display: flex !important; align-items: center; gap: calc(10 * var(--u)); }
.cz .err { color: #ffd0d0; background: #7a0c12; border-radius: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); font: 800 calc(14.5 * var(--u))/1.3 system-ui, Roboto, Arial, sans-serif; }
.cz .hint { text-align: center; color: #ffe066; font-weight: 800; }

/* The network's SMS, as it shows on the phone. */
.sms { background: #fdfdfd; color: #111827; border-radius: calc(16 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); display: grid; gap: calc(3 * var(--u)); box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .55); font: 600 calc(16 * var(--u))/1.35 system-ui, Roboto, Arial, sans-serif; }
.sms b { font-size: calc(13 * var(--u)); color: #475569; display: flex; justify-content: space-between; }

/* Timers and countdowns: gold digits on a dark plate. */
.timer { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.timer img { width: calc(46 * var(--u)); height: auto; flex: none; }
.timer span { flex: 1; font: 800 calc(15 * var(--u))/1.25 system-ui, Roboto, Arial, sans-serif; }
.timer span b { color: #ffe066; }
.timer.stack { flex-wrap: wrap; }
.timer.stack span { font-size: calc(16 * var(--u)); }
.timer.stack .count { flex-basis: 100%; text-align: center; font-size: calc(34 * var(--u)); }
.cz b.count, .bigcount { font: calc(26 * var(--u))/1 'Titan One', system-ui, sans-serif; color: #ffd84a; background: #060402; border-radius: calc(10 * var(--u)); padding: calc(9 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u)); letter-spacing: .04em; box-shadow: inset 0 0 0 calc(2 * var(--u)) #6b4306, 0 0 calc(14 * var(--u)) rgba(255, 200, 60, .35); white-space: nowrap; }
.bigcount { display: block; font-size: calc(54 * var(--u)); text-align: center; padding: calc(14 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); }

/* Tokens: spins saved (gold coins) and spins locked (padlocks on colour coins). */
.tokens { display: flex; gap: calc(10 * var(--u)); justify-content: center; align-items: center; flex-wrap: wrap; }
.token { width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 38% 32%, #fff6c4, #f2c23a 55%, #a86c06); box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .5), inset 0 0 0 calc(3 * var(--u)) #c98a12; }
.token img { width: 76%; height: auto; }
.tokens.locked .token { width: calc(74 * var(--u)); height: calc(74 * var(--u)); background: radial-gradient(circle at 38% 32%, #ff8a8a, #e3262f 60%, #8a0d14); box-shadow: 0 calc(5 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .55), inset 0 0 0 calc(4 * var(--u)) #f2c23a; }
.tokens.locked .token:nth-child(3n+2) { background: radial-gradient(circle at 38% 32%, #9fd0ff, #1f55e0 60%, #0d2588); }
.tokens.locked .token:nth-child(3n) { background: radial-gradient(circle at 38% 32%, #9bff9b, #14a24c 60%, #0b5c22); }
.tokens .more { font: calc(22 * var(--u)) 'Titan One', system-ui, sans-serif; color: #ffd84a; }

/* Links that lead on: a strip, a teaser of Gold, the friend line. */
.strip { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); border-radius: 999px; text-decoration: none; font: 800 calc(15 * var(--u))/1.2 system-ui, Roboto, Arial, sans-serif; color: #13226b;
  background: linear-gradient(180deg, #fff3b0, #e5a823); box-shadow: 0 calc(4 * var(--u)) 0 #8a5a06, 0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .5); }
.strip .ic { color: #13226b; }
.perfriend { text-align: center; font: calc(19 * var(--u))/1.15 'Titan One', system-ui, sans-serif; color: #13226b; letter-spacing: .01em; padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u));
  background: linear-gradient(180deg, #fff3b0, #f2c23a 55%, #c98a12); box-shadow: inset 0 0 0 calc(2 * var(--u)) #8a5a06, 0 calc(5 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .5), 0 0 calc(18 * var(--u)) rgba(255, 206, 74, .4); }
.teaser { display: grid; grid-template-columns: calc(96 * var(--u)) 1fr; gap: calc(6 * var(--u)) calc(10 * var(--u)); align-items: center; text-decoration: none; color: #fff; }
.teaser .mini { grid-row: 1 / 4; width: calc(96 * var(--u)); height: calc(96 * var(--u)); position: relative; }
.teaser .mini img { position: absolute; }
.teaser .mini .r { inset: 0; width: 100%; height: 100%; }
.teaser .mini .l { width: calc(44 * var(--u)); left: calc(26 * var(--u)); top: calc(22 * var(--u)); }
.teaser small { font: 800 calc(14 * var(--u))/1.2 system-ui, Roboto, Arial, sans-serif; color: #ffe9b0; }
.teaser b { font: calc(40 * var(--u))/1 'Titan One', system-ui, sans-serif; color: #ffd84a; text-shadow: 0 calc(2 * var(--u)) 0 #8a5200, 0 calc(4 * var(--u)) 0 #5c3500; }
.teaser .see { justify-self: start; font: calc(17 * var(--u))/1 'Titan One', system-ui, sans-serif; color: #13226b; background: linear-gradient(180deg, #fff3b0, #f2c23a 55%, #c98a12); border-radius: 999px; padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)); box-shadow: 0 calc(3 * var(--u)) 0 #8a5a06; }
.trouble { display: grid; gap: calc(4 * var(--u)); text-decoration: none; }
.trouble b { color: #ffe066; }

/* The Gold moment: the wheel, locked, and the packs. */
.gwheel { --br: calc(112 * var(--u)); position: relative; width: calc(250 * var(--u)); height: calc(250 * var(--u)); margin: calc(4 * var(--u)) auto 0; }
.gwheel .halo { position: absolute; inset: calc(-22 * 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%); }
.gwheel .disc { position: absolute; inset: 9.5%; }
.gwheel .shade { position: absolute; inset: 9.5%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .14) 88%, rgba(0, 0, 0, .38) 100%); }
.gwheel .rim { position: absolute; inset: 0; width: 100%; height: 100%; }
.gwheel .hub { position: absolute; left: 50%; top: 50%; width: calc(50 * var(--u)); height: calc(50 * var(--u)); margin: calc(-25 * var(--u)); }
.gwheel .pointer { position: absolute; left: 50%; top: calc(-20 * var(--u)); width: calc(44 * var(--u)); margin-left: calc(-22 * var(--u)); }
.gwheel .bigl { position: absolute; left: 50%; top: 50%; width: calc(92 * var(--u)); margin: calc(-54 * var(--u)) 0 0 calc(-46 * var(--u)); filter: drop-shadow(0 calc(6 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .7)); z-index: 2; }
.gwheel .dim { position: absolute; inset: 9.5%; border-radius: 50%; background: rgba(4, 8, 22, .35); }
.gwheel .bulbs i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin: calc(-6 * var(--u)); }
.packs { display: grid; gap: calc(10 * var(--u)); }
.pushed { display: grid; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(20 * var(--u)); border: calc(3 * var(--u)) solid transparent;
  background: linear-gradient(180deg, rgba(26, 16, 2, .9), rgba(10, 6, 2, .9)) padding-box, linear-gradient(180deg, #fff3b0, #eab12a 50%, #a46c0c) border-box; box-shadow: 0 0 calc(26 * var(--u)) rgba(255, 206, 74, .35); }
.packname { font: 800 calc(14 * var(--u))/1 system-ui, Roboto, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #ffd84a; }
.pushed .packname { text-align: center; }
.bonus { color: #7dff9a; font-weight: 900; }
.bonus.big { text-align: center; font: calc(21 * var(--u))/1.1 'Titan One', system-ui, sans-serif; color: #7dff9a; text-shadow: 0 calc(2 * var(--u)) 0 #0b4d1c; }
.cz .sub { text-align: center; font: 700 calc(14 * var(--u))/1.3 system-ui, Roboto, Arial, sans-serif; color: #ffe9b0; }
.pack { width: 100%; display: grid; gap: calc(3 * var(--u)); text-align: left; padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); cursor: pointer; position: relative; color: #fff; font: inherit;
  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(5 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .5); }
.pack b { font: calc(20 * var(--u))/1.15 'Titan One', system-ui, sans-serif; color: #fff; letter-spacing: .01em; }
.pack span { font: 700 calc(14 * var(--u))/1.3 system-ui, Roboto, Arial, sans-serif; color: #dfe6ff; }
.pack .bonus { color: #7dff9a; font-weight: 900; }
.pack.most { box-shadow: 0 0 calc(20 * var(--u)) rgba(255, 206, 74, .5); }
.pack .badge { position: absolute; right: calc(12 * var(--u)); top: calc(-12 * var(--u)); background: #e3262f; color: #fff; font: 800 calc(13 * var(--u))/1 system-ui, Roboto, Arial, sans-serif; padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: 999px; }
.vault { display: block; text-align: center; font: 900 calc(15 * var(--u))/1.2 system-ui, Roboto, Arial, sans-serif; color: #0b3d1a; background: linear-gradient(180deg, #b6ffb0, #2fb866); border-radius: calc(10 * var(--u)); padding: calc(7 * var(--u)) calc(10 * var(--u)); }

/* Receipts and job cards. */
.receipt { display: grid; gap: calc(8 * var(--u)); }
.receipt div { display: flex; justify-content: space-between; align-items: center; gap: calc(10 * var(--u)); font: 800 calc(17 * var(--u))/1.2 system-ui, Roboto, Arial, sans-serif; }
.receipt div b { font: calc(20 * var(--u))/1 'Titan One', system-ui, sans-serif; color: #7dff9a; }
.receipt .total { border-top: calc(2 * var(--u)) solid rgba(255, 216, 74, .5); padding-top: calc(9 * var(--u)); }
.receipt .total b { color: #ffd84a; font-size: calc(30 * var(--u)); }
.jobcard { background: linear-gradient(180deg, #fffdf2, #fff3cf); color: #0b1d3a; border-radius: calc(18 * var(--u)); padding: calc(16 * var(--u)); display: grid; gap: calc(6 * var(--u)); border: calc(3 * var(--u)) solid #e5a823; box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .6), 0 0 calc(22 * var(--u)) rgba(255, 206, 74, .3); }
.jobcard h2 { margin: 0; font: 900 calc(22 * var(--u))/1.15 system-ui, Roboto, Arial, sans-serif; color: #0b1d3a; }
.jobcard p { margin: 0; }
.jobcard .fine { background: none; border: 0; box-shadow: none; color: #44506b; text-align: left; padding: 0; font: 700 calc(13.5 * var(--u))/1.35 system-ui, Roboto, Arial, sans-serif; }
.jobcard .pay { font: calc(30 * var(--u))/1 'Titan One', system-ui, sans-serif; color: #128a3a; }
.jobcard .btn.ghost { color: #0b1d3a; background: #fff; box-shadow: inset 0 0 0 calc(2.5 * var(--u)) #e5a823; }
.jobcard .btn.goldy, .jobcard .btn.green { color: #fff; }
.jobcard .link { color: #1d4ed8; text-shadow: none; }
.jobcard .perfriend { font-size: calc(17 * var(--u)); }
.jobcard.flip { animation: cardin .7s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes cardin { from { transform: perspective(800px) rotateY(-100deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.jobcard .msg, .jobcard .qa { margin-top: calc(10 * var(--u)); padding-top: calc(12 * var(--u)); border-top: calc(2 * var(--u)) solid #ecd9a0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.jobcard h3 { margin: 0; font: 900 calc(18 * var(--u))/1.2 system-ui, Roboto, Arial, sans-serif; color: #0b1d3a; }
.msgtext { margin: 0; padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; border: calc(1.5 * var(--u)) solid #ecd9a0; color: #0b1d3a; font: 600 calc(15.5 * var(--u))/1.45 system-ui, Roboto, Arial, sans-serif; white-space: pre-wrap; word-break: break-word; }
.qa ol { margin: 0; padding-left: calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.qa li b { display: block; color: #0b1d3a; }
.qa li p { margin: calc(4 * var(--u)) 0 0; color: #334155; font-weight: 600; }

/* Rules and long text. */
.rules { line-height: 1.45; font-weight: 600; }
.rules h3 { margin: calc(14 * var(--u)) 0 calc(4 * var(--u)); font: calc(19 * var(--u))/1.15 'Titan One', system-ui, sans-serif; color: #ffd84a; }
.rules h3:first-child { margin-top: 0; }
.rules p, .rules ul { margin: 0 0 calc(6 * var(--u)); }
.statuspic { width: 100%; height: auto; display: block; border-radius: calc(16 * var(--u)); border: calc(3 * var(--u)) solid #e5a823; box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .6); }
.cz .proof { text-align: center; display: flex; gap: calc(6 * var(--u)); justify-content: center; align-items: center; color: #ffe9b0; font-weight: 800; }

@media (prefers-reduced-motion: reduce) { .cz .btn.gold.pulse, .cz .btn.breathe, .chero.bob img, .jobcard.flip { animation: none !important; } }