/* ========================================================= The lottery drum (#lottery, lottery.js + js/lottery3d.js). Linked late in . One calm machine: a glass drum of numbered version balls, one chute, three slots for the drawn frames, one Pull button, one model switch with one line of odds, one counter line. Wide: switch | drum | Pull, the slots in a row below. Mid: switch and Pull above the drum. Phone: switch, drum, slots as rows, Pull. Prefix dr- (drs- for the still SVG drum). ========================================================= */ .dr { --cap: 30px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr); grid-template-areas: "model drum act" "slots slots slots"; align-items: center; column-gap: 28px; padding: 26px 28px 30px; border-radius: var(--r-xl); background: var(--dark-2); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .06); } /* ---------- the drum ---------- */ .dr-drum { grid-area: drum; position: relative; width: 100%; aspect-ratio: 13 / 10; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .dr.is-busy .dr-drum { cursor: progress; } .dr-canvas, .dr-still { position: absolute; inset: 0; width: 100%; height: 100%; } .dr-canvas { display: block; opacity: 0; transition: opacity .5s; } .dr-still { transition: opacity .5s; } .dr.is-3d .dr-canvas { opacity: 1; } .dr.is-3d .dr-still { opacity: 0; } .dr-still svg { display: block; width: 100%; height: 100%; overflow: visible; } /* the still drum: glass rings, the chute, a settled pile of balls */ .drs-back { fill: none; stroke: var(--on-dark-soft); stroke-opacity: .3; stroke-width: 2; } .drs-rib { stroke: var(--on-dark-soft); stroke-opacity: .3; stroke-width: 1.5; } .drs-glass { fill: oklch(1 0 0 / .035); } .drs-chute { fill: none; stroke: oklch(1 0 0 / .2); stroke-width: 48; } .drs-chute-in { fill: none; stroke: var(--dark-2); stroke-opacity: .88; stroke-width: 44; } .drs-lip { fill: none; stroke: var(--on-dark-2); stroke-width: 2.5; } .drs-rim { fill: none; stroke: var(--on-dark-soft); stroke-width: 3; } .drs-hl { fill: none; stroke: oklch(1 0 0 / .22); stroke-width: 3; stroke-linecap: round; } .drs-ball { transition: opacity .2s; } .drs-ball.is-out { opacity: 0; } .drs-ball.is-far { opacity: .62; } .drs-ball.is-far.is-out { opacity: 0; } .drs-body { fill: url(#drb-cream); } .drs-disc { fill: none; } .drs-ball.is-gold .drs-body { fill: url(#drb-gold); } .drs-ball.is-gold .drs-disc { fill: var(--card); } .drs-num { fill: var(--ink); font: 800 14px/1 var(--sans); letter-spacing: -.02em; } .drs-v { font-size: 10px; } /* ---------- the model switch and its one line ---------- */ .dr-model { grid-area: model; justify-self: start; display: grid; justify-items: start; gap: 12px; max-width: 300px; } .dr-switch { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: oklch(1 0 0 / .06); } .dr-switch button { height: 38px; padding: 0 15px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--on-dark-2); font: 600 14px/1 var(--sans); white-space: nowrap; transition: background .2s, color .2s; } .dr-switch button:hover:not(:disabled):not(.is-on) { color: var(--on-dark); } .dr-switch button.is-on { background: var(--on-dark); color: var(--ink); } .dr-switch button:disabled { cursor: progress; } .dr-switch button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } .dr-odds { margin: 0; font-size: 14px; line-height: 1.5; color: var(--on-dark-soft); text-wrap: pretty; } .dr-odds b { font-weight: 600; color: var(--on-dark); } .dr-odds em { display: inline-block; margin-left: 4px; padding: 3px 7px; border-radius: var(--r-pill); background: oklch(1 0 0 / .07); font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; white-space: nowrap; vertical-align: 1px; } /* ---------- Pull and the counter ---------- */ .dr-act { grid-area: act; justify-self: end; display: grid; justify-items: end; gap: 14px; } .dr-pull { display: inline-flex; align-items: center; justify-content: center; min-width: 176px; height: 56px; padding: 0 40px; border: 0; border-radius: var(--r-pill); background: var(--signal); color: var(--ink); font: 700 19px/1 var(--sans); letter-spacing: -0.01em; white-space: nowrap; transition: background .2s, transform .15s; } .dr-pull:hover { background: var(--signal-strong); } .dr-pull:active { transform: translateY(1px) scale(.98); } .dr-pull[aria-disabled="true"] { cursor: progress; } .dr-pull:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; } .dr-count { margin: 0; font: 500 13px/1.4 var(--mono); letter-spacing: .02em; color: var(--on-dark-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .dr-count b { font-weight: 500; color: var(--signal); } /* ---------- the three slots ---------- */ .dr-slots { grid-area: slots; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; } .dr-slot { min-width: 0; } .dr-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--cap); margin: 0; padding-bottom: 10px; font: 500 var(--t-label)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); } .dr-name { transition: color .3s; } .dr-st { display: inline-flex; align-items: center; gap: 7px; letter-spacing: .08em; color: var(--on-dark-soft); } .dr-slot.is-next .dr-name { color: var(--on-dark); } .dr-slot.is-kept .dr-name { color: var(--on-dark); } .dr-slot.is-kept .dr-st { color: var(--signal); } .dr-slot.is-kept .dr-st::before { content: ""; width: 8px; height: 4px; margin-top: -3px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); } .dr-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--dark); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .07); } /* at rest: a real draft of the section, greyed and dimmed (lottery.js), so the slots are never empty boxes */ .dr-rest { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.3) contrast(.9); opacity: .72; transition: opacity .35s; user-select: none; -webkit-user-drag: none; } .dr-slot.is-filled .dr-rest { opacity: 0; } /* an empty slot shows where a ball will land; the one the next pull fills says what to do */ .dr-frame::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px dashed oklch(1 0 0 / .3); background: oklch(0 0 0 / .28); transition: opacity .3s, border-color .3s; } .dr-slot.is-next .dr-frame::before { border-color: oklch(0.86 0.165 92 / .75); } .dr-slot.is-filled .dr-frame::before { opacity: 0; } .dr-hint { position: absolute; z-index: 1; left: 50%; top: calc(50% + 26px); translate: -50% 0; padding: 4px 8px; border-radius: var(--r-pill); background: oklch(0 0 0 / .45); font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark); white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; } .dr-slot.is-next:not(.is-filled) .dr-hint { opacity: 1; } .dr-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--signal); opacity: 0; transition: opacity .35s; pointer-events: none; } .dr-slot.is-kept .dr-frame::after { opacity: 1; } .dr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; transition: filter .6s .25s, opacity .25s; } .dr-img.is-dim { filter: saturate(.5) brightness(.58); } .dr-slot.is-clearing .dr-img { opacity: 0; } /* a finished film: one yellow frame closes around the three kept drafts */ .dr-film { position: absolute; z-index: 3; left: -7px; right: -7px; top: calc(var(--cap) - 7px); bottom: -7px; border-radius: 16px; box-shadow: inset 0 0 0 2px var(--signal); opacity: 0; transform: scale(1.012); transition: opacity .35s, transform .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; } .dr.is-jackpot .dr-film { opacity: 1; transform: none; } .dr.is-jackpot .dr-slot.is-kept .dr-frame::after { opacity: 0; } /* ---------- the ball in flight (DOM): lottery.js places it where the 3D or still ball waits ---------- */ .dr-ball { --r: 22px; position: absolute; left: 0; top: 0; z-index: 6; display: grid; place-items: center; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; pointer-events: none; will-change: transform; background: radial-gradient(circle at 36% 28%, #fffaf0 0%, #ebe6dc 36%, #c9c2b6 70%, #8e877c 100%); box-shadow: 0 10px 16px -10px oklch(0 0 0 / .7); } .dr-ball.is-gold { background: radial-gradient(circle at 36% 28%, #fff1b8 0%, #f8cc2f 38%, #dcaa12 72%, #9a7304 100%); } .dr-ball b { display: grid; place-items: center; width: 62%; aspect-ratio: 1; border-radius: 50%; color: var(--ink); font: 800 calc(var(--r) * .7)/1 var(--sans); letter-spacing: -.02em; white-space: nowrap; } .dr-ball.is-gold b { background: var(--card); } .dr-ball small { font-size: .69em; } /* ---------- mid widths: the switch and Pull sit above the drum ---------- */ @media (max-width: 1100px) { .dr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "model act" "drum drum" "slots slots"; align-items: start; row-gap: 8px; } .dr-model { max-width: 380px; } .dr-drum { justify-self: center; width: min(100%, 480px); } } /* ---------- phones: one column; the slots become rows under the drum ---------- */ @media (max-width: 640px) { .dr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "model" "drum" "slots" "act"; padding: 16px 14px 20px; row-gap: 6px; border-radius: var(--r-l); } .dr-model { justify-self: stretch; justify-items: stretch; max-width: none; gap: 10px; } .dr-switch { display: grid; grid-template-columns: 1fr 1fr; } .dr-switch button { height: 42px; padding: 0 8px; } .dr-odds { text-align: center; } .dr-drum { width: min(100%, 360px); aspect-ratio: 1 / .92; } .dr-slots { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 4px; } .dr-slot { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: center; gap: 14px; } .dr-cap { order: 2; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; height: auto; padding: 0; font-size: 11px; } .dr-frame { order: 1; border-radius: 8px; } .dr-frame::before { width: 26px; height: 26px; margin: -13px 0 0 -13px; } .dr-hint { top: calc(50% + 17px); padding: 3px 6px; font-size: 9.5px; letter-spacing: .08em; } .dr-film { display: none; } .dr.is-jackpot .dr-slot.is-kept .dr-frame::after { opacity: 1; } .dr-act { justify-self: stretch; justify-items: stretch; gap: 10px; margin-top: 12px; } .dr-pull { width: 100%; } .dr-count { text-align: center; white-space: normal; } } @media (prefers-reduced-motion: reduce) { .dr-canvas, .dr-still, .dr-film, .dr-frame::after, .dr-frame::before, .dr-img, .dr-rest, .dr-hint, .dr-name, .drs-ball { transition-duration: .01s; transition-delay: 0s; } .dr-film { transform: none; } }