:root {
--olive: #5e673d;
--gold: #ffc74a;
--ink: #000000;
--olive-deep: #3b4127;
--cream: #f6f1e4;
--film: #050505;
--ember: #d9822b;
--ember-light: #f0b35a;
--ground: #0a0c05;
--olive-light: #6f7a48;
--ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
--wheel: min(84vw, 46svh, 420px);
/* The brand face, from the brand notes: Permanent Marker for titles and the call to spin, never
* for running text, codes or anything that must be read exactly. */
--marker: "Permanent Marker", "Segoe Print", "Bradley Hand", system-ui, sans-serif;
}
/* Self-hosted, ASCII only (21 KB). swap: the text shows at once in a fallback and changes face when
* the font arrives, so slow mobile data never hides a title. */
@font-face { font-family: "Permanent Marker"; src: url("/wheel/fonts/permanent-marker.v1.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--film); }
body { margin: 0; min-height: 100svh; color: var(--cream); font-family: var(--ui); font-size: 16px; line-height: 1.45;
background: linear-gradient(180deg, var(--olive-deep) 0%, var(--olive) 55%, var(--olive-deep) 100%); overflow-x: hidden; }
/* No blend mode: a blended full-screen layer over the spinning wheel makes slow phones recomposite
* the whole screen every frame. Plain low opacity gives nearly the same grain for almost nothing. */
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .045;
background-image: url("data:image/svg+xml;utf8,"); }
.page { position: relative; max-width: 560px; margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) 16px 0; }
a { color: var(--cream); }
a:focus-visible, .btn:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.mast { display: flex; align-items: center; gap: 10px; padding: 2px 0 6px; border-bottom: 1px solid rgb(246 241 228 / .25); }
/* The roundel sits in a gold ring with a soft glow, so the buffalo reads as a badge, not a thumbnail. */
.mark { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px rgb(0 0 0 / .4), 0 4px 16px rgb(255 199 74 / .4); }
.mast-text { text-align: left; line-height: 1.15; }
.brand { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
/* Stamped lettering: the same raised gold-brown edge as the Spin button, with a faint gold glow. */
.title { margin: 2px 0 0; font-family: var(--marker); font-size: clamp(1.65rem, 7.4vw, 2.5rem); font-weight: 400; line-height: 1; letter-spacing: .02em;
transform: rotate(-1.5deg); transform-origin: left center; white-space: nowrap;
text-shadow: 0 2px 0 #82540f, 0 4px 0 rgb(0 0 0 / .4), 0 0 18px rgb(255 199 74 / .35); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.spin-row { display: flex; gap: 8px; justify-content: center; width: 100%; max-width: 360px; }
.spin-row .btn-spin { flex: 0 0 auto; min-width: 0; padding: 0 16px; }
/* The phone layout reserves the middle for the wheel and keeps the action at thumb height. */
.app { position: relative; display: grid; min-height: 100vh; min-height: 100svh; max-width: 560px; margin: 0 auto;
grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bar" "arena" "dock"; text-align: center; }
.bar { grid-area: bar; display: flex; align-items: center; gap: 10px; padding: max(8px, env(safe-area-inset-top)) 16px 6px; }
.bar { position: relative; }
.bar::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--gold), rgb(255 199 74 / 0)); }
@media (max-width: 359px) { .bar .mark { width: 40px; height: 40px; } }
/* Competition rules: a small, quiet line at the very bottom, for the one person in a hundred who wants it. */
.rules-row { margin: 0; justify-self: center; text-align: center; }
.rules-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: rgb(246 241 228 / .78); font-size: .75rem; text-decoration: underline; text-underline-offset: 3px; }
.rules-link:hover { color: var(--cream); }
.arena { grid-area: arena; position: relative; display: grid; place-items: center; min-height: 200px; padding: 14px 16px 10px;
background: url("data:image/svg+xml;utf8,") center bottom / auto 44px repeat-x,
linear-gradient(180deg, rgb(217 130 43 / 0) 52%, rgb(217 130 43 / .5) 86%, var(--ember-light) 100%);
overflow-x: clip; }
/* The rotor is a square: turned by anything but a right angle, its box is up to 1.41 times wider than
* the wheel, which widened the page and made a phone zoom out after every spin. Clip sideways only, so
* the pointer and the wheel's shadow still show above and below. Older browsers clip both ways. */
@supports not (overflow-x: clip) { .arena { overflow: hidden; } }
@media (max-height: 600px) and (max-width: 560px) { .arena { min-height: 180px; } }
.wheel { position: relative; z-index: 1; width: var(--wheel); height: var(--wheel); transform: perspective(900px) rotateX(7deg); transform-style: preserve-3d; }
@supports (height: 1cqh) {
.arena { container-type: size; }
/* cq units already measure inside the arena's 16px side padding, so only the depth effect's few
* pixels come off the width. */
.arena .wheel { --wheel: min(calc(100cqw - 8px), calc(100cqh - 30px), 460px); }
}
.wheel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; transform: translateY(12px) translateZ(-16px); background: #171b10; box-shadow: 0 24px 35px rgb(0 0 0 / .55), 0 4px 0 #826429; }
.wheel::after { content: ""; position: absolute; inset: 1.2%; border-radius: 50%; pointer-events: none; box-shadow: inset 0 7px 9px rgb(255 248 214 / .34), inset 0 -13px 16px rgb(0 0 0 / .38), 0 0 0 3px rgb(218 174 75 / .65); }
/* The dock: everything to do, at the bottom, in reach of a thumb. */
.dock, .sheet { grid-area: dock; position: relative; z-index: 2; background: var(--ground); border-radius: 18px 18px 0 0;
padding: 12px 16px max(12px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 24px rgb(0 0 0 / .35); }
.dock { display: grid; gap: 9px; justify-items: center; }
.dock .dock-title { color: var(--gold); font-size: clamp(1.3rem, 5vw, 1.8rem); }
.dock .dock-lead { max-width: 36ch; line-height: 1.35; text-wrap: balance; }
.dock .spin-row { width: 100%; margin: 5px 0 0; }
.dock .btn-spin { width: 100%; min-height: 56px; box-shadow: 0 6px 0 #82540f, 0 10px 20px rgb(0 0 0 / .35); transition: transform .15s, box-shadow .15s; }
.dock .btn-spin:active { transform: translateY(4px); box-shadow: 0 2px 0 #82540f, 0 4px 10px rgb(0 0 0 / .35); }
.follow-link { display: inline-flex; align-items: center; justify-self: center; gap: 8px; min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px;
background: rgb(246 241 228 / .08); border: 1px solid rgb(246 241 228 / .3); color: var(--cream); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.follow-link .fb { width: 28px; height: 28px; flex: 0 0 auto; }
.follow-link:hover { background: rgb(246 241 228 / .16); }
.dock .note:empty { margin: -10px 0 0; }
.dock .odds { margin: 0; font-size: .875rem; }
.dock .meta { margin: -6px 0 0; font-size: .75rem; opacity: .8; }
.dock-title { margin: 2px 0 0; font-family: var(--marker); font-size: 1.375rem; line-height: 1.15; }
.dock-lead { margin: 0; }
/* The sheet: the result, in the dock's place. It rises in; reduced motion skips that. */
.sheet { display: none; }
.app[data-state="win"] .dock, .app[data-state="blank"] .dock { display: none; }
.app[data-state="win"] .sheet, .app[data-state="blank"] .sheet { display: block; }
.sheet-note { margin: 10px 0 0; font-size: .8125rem; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
.app[data-state="win"] .sheet, .app[data-state="blank"] .sheet { animation: rise .45s cubic-bezier(.16, 1, .3, 1) both; }
}
@media (prefers-reduced-motion: reduce) { .dock .btn-spin { transition: none; } }
/* A winner's card already says everything; the one-spin note would push it past a small screen. */
.app[data-state="win"] .sheet-note { display: none; }
.follow-next { margin-top: 6px; }
/* WhatsApp: a green pill, dark text, so it reads on the dark card and on the gold win card. */
.wa-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px 0 8px; border-radius: 999px;
background: #25d366; color: #06210f; font-size: .875rem; font-weight: 700; text-decoration: none; }
.wa-link .wa { width: 28px; height: 28px; flex: 0 0 auto; }
.share-row { margin: 10px 0 0; text-align: center; }
.result-blank .wa-link { margin-top: 10px; }
/* The win: a short burst of the brand's colours from where the code appears, a pop on the heading and a
* ring of gold that fades. Only for people who have not asked for reduced motion, and only for a fresh win. */
.burst { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.burst i { position: absolute; left: 50%; top: 62%; width: 9px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.burst i { animation: confetti 1.9s cubic-bezier(.15,.7,.3,1) var(--d) both; }
.app[data-state="win"] .result-win .result-title { animation: pop .7s cubic-bezier(.2,1.5,.4,1) both; }
.app[data-state="win"] .result-win { animation: glow 1.4s ease-out both; }
}
@keyframes confetti {
0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
35% { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% - var(--up))) rotate(calc(var(--r) * .5)); }
100% { opacity: 0; transform: translate(calc(-50% + var(--x) * 1.2), calc(-50% + 55vh)) rotate(var(--r)); }
}
@keyframes pop { 0% { opacity: 0; transform: scale(.55) rotate(-5deg); } 100% { opacity: 1; transform: none; } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgb(255 199 74 / .95); } 100% { box-shadow: 0 0 0 30px rgb(255 199 74 / 0); } }
@keyframes rise { from { transform: translateY(45%); opacity: 0; } }
/* Wide screens: the wheel on the left, the dock or the sheet beside it. */
@media (min-width: 880px) and (min-aspect-ratio: 5/4) {
.app { max-width: 1120px; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); grid-template-rows: auto minmax(0, 1fr);
grid-template-areas: "bar bar" "arena dock"; text-align: left; }
.arena { min-height: calc(100svh - 64px); background: none; }
/* The horizon runs the full width of the screen here, not just the wheel's column. */
body:has(.app) { background:
url("data:image/svg+xml;utf8,") center bottom / auto 56px repeat-x,
linear-gradient(180deg, rgb(217 130 43 / 0) 58%, rgb(217 130 43 / .5) 88%, var(--ember-light) 100%),
linear-gradient(180deg, var(--olive-deep) 0%, var(--olive) 55%, var(--olive-deep) 100%); }
.dock, .sheet { align-self: center; margin: 24px 24px 24px 0; border-radius: 18px; padding: 24px; box-shadow: 0 16px 40px rgb(0 0 0 / .4); }
.dock { justify-items: start; }
.spin-row, .row { justify-content: flex-start; }
}
.rotor { position: relative; width: 100%; height: 100%; border-radius: 50%; filter: drop-shadow(0 4px 1px rgb(0 0 0 / .4)); }
.disc { display: block; width: 100%; height: 100%; }
.rim { fill: #24271a; }
.slice { stroke: rgb(246 241 228 / .55); stroke-width: .7; }
.slice.a { fill: var(--olive-light); }
.slice.b { fill: var(--olive-deep); }
.slice.buffalo { fill: var(--gold); }
.rim-line { fill: none; stroke: var(--gold); stroke-width: 1.2; }
.peg { fill: var(--cream); }
.logo { pointer-events: none; }
.hub { fill: #303822; stroke: var(--gold); stroke-width: 2; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .6)); }
.hub-dot { fill: var(--gold); }
.pointer { position: absolute; z-index: 3; top: calc(var(--wheel) * -0.035); left: 50%; width: calc(var(--wheel) * .1); height: auto;
transform: translateX(-50%) translateZ(15px); filter: drop-shadow(0 5px 3px rgb(0 0 0 / .65)); pointer-events: none; }
.pointer path { fill: var(--cream); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.odds { margin: 8px 0 8px; font-size: .875rem; max-width: 36ch; }
.lead { margin: 4px 0 8px; max-width: 34ch; }
.strong { font-weight: 600; font-size: 1.0625rem; }
.row { display: flex; justify-content: center; gap: 10px; margin: 4px 0 10px; }
.note { margin: 6px 0 0; font-size: .9375rem; }
.note:empty { margin: 0; }
.small { font-size: .875rem; opacity: .95; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 8px;
font: 600 1rem/1 var(--ui); text-decoration: none; cursor: pointer; border: 0; }
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-secondary { padding: 0 18px; background: transparent; color: var(--cream); border: 1.5px solid rgb(246 241 228 / .8); }
.btn-spin { min-height: 52px; min-width: 200px; font-family: var(--marker); font-weight: 400; font-size: 1rem; letter-spacing: .02em; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn[hidden] { display: none; }
.icon { width: 18px; height: 18px; fill: currentColor; }
/* The human check is invisible for most people. When it does need a tick it floats at the bottom of
* the screen at Cloudflare's normal 300 by 65 size, so it never pushes the wheel or the Spin button around. */
.cf-turnstile { position: fixed; z-index: 30; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
width: 300px; max-width: calc(100vw - 20px); margin: 0; }
/* Wide screens: beside the dock, so it sits next to the button it belongs to. */
@media (min-width: 880px) and (min-aspect-ratio: 5/4) {
.cf-turnstile { left: auto; right: max(24px, calc((100vw - 1120px) / 2 + 24px)); bottom: 24px; transform: none; }
}
.result { width: 100%; margin-top: 8px; padding: 14px 16px 16px; border-radius: 10px; outline: none; }
.result[hidden] { display: none; }
.result-blank { background: rgb(5 5 5 / .35); }
.result-win { background: var(--gold); color: var(--ink); }
.result-title { margin: 0 0 4px; font-family: var(--marker); font-size: 1.625rem; line-height: 1.1; font-weight: 400; }
.result p[hidden] { display: none; }
.result p { margin: 4px 0; }
.win-lead { font-weight: 600; }
.code-label { margin-top: 10px !important; font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.code { font: 700 1.5rem/1.2 var(--mono); letter-spacing: .04em; word-break: break-all; }
.live { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-weight: 600; }
.clock { font: 700 1.25rem/1 var(--mono); }
.panel, .rules { margin-top: 12px; }
.rules { text-align: left; }
.rules h2 { margin: 18px 0 4px; font-size: 1.0625rem; }
.rules p, .rules li { max-width: 62ch; }
.draft { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--ink); font-weight: 600; }
.needs { padding: 0 3px; border-radius: 3px; background: var(--gold); color: var(--ink); }
.back { margin-top: 20px; }
.rules a[href^="tel:"], .rules a[href^="mailto:"] { white-space: nowrap; }
.rules a[href*="inforegulator"] { white-space: normal; overflow-wrap: anywhere; }
.steps-title { margin: 18px 0 4px; font-size: 1.0625rem; text-align: left; }
.steps { margin: 0; padding-left: 1.25rem; text-align: left; font-size: .9375rem; }
.steps li { max-width: 62ch; margin: 6px 0; }
.check { display: grid; gap: 10px; margin: 12px 0; }
.check label { font-weight: 600; }
.check input { min-height: 48px; padding: 0 12px; border-radius: 8px; border: 2px solid var(--ink); background: var(--cream); color: var(--ink);
font: 600 1.125rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.verdict { margin: 0 0 8px; padding: 12px 14px; border-radius: 8px; font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.verdict.ok { background: var(--gold); }
.verdict.bad { background: var(--cream); border: 4px solid var(--ink); }
.checked { display: block; margin-bottom: 4px; font: 700 1rem/1.2 var(--mono); letter-spacing: .04em; }
@media (min-width: 720px) {
:root { --wheel: min(60vh, 440px); }
}