.draw {
--draw-back: #16181a; --draw-edge: #16181a; --draw-shadow: #16181a; --draw-front: #fcfcfc; --draw-art: #16181a;
--draw-halo: #dff0b5; --draw-box: #fcfcfc; --draw-box-edge: #16181a; --draw-box-shadow: #16181a;
max-width: 820px;
}
html[data-theme="dark"] .draw {
--draw-back: #1d2023; --draw-edge: #a0a3a7; --draw-shadow: #3a3d41; --draw-front: #1d2023; --draw-art: #f1f2f2;
--draw-halo: #2e3135; --draw-box: #1d2023; --draw-box-edge: #3a3d41; --draw-box-shadow: var(--lime);
}
.draw [data-show] { display: none; }
.draw[data-step="off"] [data-show="off"], .draw[data-step="email"] [data-show="email"], .draw[data-step="pick"] [data-show="pick"],
.draw[data-step="reveal"] [data-show="reveal"], .draw[data-step="waiting"] [data-show="waiting"], .draw[data-step="loading"] [data-show="loading"] { display: block; }
.draw-loading { display: grid; place-content: center; justify-items: center; gap: 14px; min-height: min(460px, 76vh); color: var(--ink-2); }
.draw-loading p { margin: 0; }
.draw-loading-card { width: 64px; height: 99px; border: 2px solid var(--draw-edge); border-radius: 8px; background: var(--draw-back); box-shadow: 3px 3px 0 var(--draw-shadow); position: relative; animation: draw-breathe 1.6s ease-in-out infinite; }
.draw-loading-card::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: var(--lime); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes draw-breathe { 50% { transform: translateY(-6px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .draw-loading-card { animation: none; } }
.draw-center { text-align: center; }
.draw-sub { margin-top: 4px; color: var(--ink-2); }
.draw-hl { background: var(--lime); color: #16181a; padding: 0 .3em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.draw-lede { font-family: 'Special Elite', monospace; font-size: clamp(20px, 3vw, 26px); line-height: 1.4; margin: 6px 0 14px; }
.draw-small { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.draw-link { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.draw-link:focus-visible, .draw-card:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.draw-form { display: grid; gap: 10px; max-width: 420px; margin: 18px 0 14px; }
.draw-form input { height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 7px; background: var(--draw-box); color: var(--ink); font: inherit; }
.draw-form input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--lime); }
.draw-btn { justify-self: start; }
.draw-btn[aria-disabled="true"] { background: var(--card-2); color: var(--ink-2); border-color: var(--line); box-shadow: none; cursor: default; }
.draw-fan { position: relative; margin: 6px auto 8px; height: var(--fan-h, 260px); max-width: 760px; touch-action: manipulation; }
.draw-card { position: absolute; left: 50%; top: 34px; width: var(--cw, 62px); height: calc(var(--cw, 62px) * 1.55); margin-left: calc(var(--cw, 62px) / -2);
padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% var(--pivot, 420px); perspective: 700px;
transition: transform .35s cubic-bezier(.3, 1.3, .5, 1), opacity .4s ease; }
.draw-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.2, .5, 1); }
.draw-face { position: absolute; inset: 0; display: block; border: 2px solid var(--draw-edge); border-radius: 8px; box-shadow: 3px 3px 0 var(--draw-shadow); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.draw-face svg, .draw-face img { display: block; width: 100%; height: 100%; }
.draw-back { background: var(--draw-back); }
.draw-back svg { position: relative; }
.draw-logo { position: absolute; left: 50%; bottom: 9%; width: 64%; transform: translateX(-50%); filter: invert(1); opacity: .92; pointer-events: none; }
.draw-front { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; transform: rotateY(180deg); }
.draw-card[aria-pressed="true"] .draw-back { border-color: var(--lime); box-shadow: 4px 4px 0 var(--lime); }
.draw-card.is-turned .draw-inner { transform: rotateY(180deg); }
.draw-fan.is-done .draw-card:not(.is-turned) { opacity: .25; }
.draw-fan.is-done .draw-card { cursor: default; }
.draw-fan.is-dealing .draw-card { transition: transform .6s cubic-bezier(.3, 1.2, .5, 1), opacity .4s ease; }
.draw-reveal { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: center; }
.draw-big { width: min(240px, 64vw); aspect-ratio: 320 / 496; flex: none; animation: draw-grow .6s cubic-bezier(.3, 1.2, .5, 1); }
.draw-big img { display: block; width: 100%; height: 100%; }
.draw-words { flex: 1 1 280px; max-width: 420px; }
.draw-card-title { margin: 2px 0 6px; }
.draw-card-line { margin: 0 0 16px; color: var(--ink-2); line-height: 1.6; }
.draw-words > * { animation: draw-fade .5s .35s both; }
.draw-prize { margin: 0 0 14px; padding: 14px 16px; background: var(--draw-box); border: 2px solid var(--draw-box-edge); border-radius: 10px; box-shadow: 4px 4px 0 var(--draw-box-shadow); }
.draw-prize p { margin: 0; }
.draw-prize-state { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.draw-prize-state svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.draw-prize-amt { font-family: 'Special Elite', monospace; font-size: 22px; margin: 4px 0 !important; }
.draw-prize-note { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@keyframes draw-grow { from { transform: scale(.35) translateY(40px); opacity: .3; } }
@keyframes draw-fade { from { opacity: 0; transform: translateY(6px); } }
.draw-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.draw-table { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: 15px; }
.draw-table th, .draw-table td { text-align: left; padding: 7px 0; border-bottom: 1px solid var(--line); }
.draw-table th { font-size: 13px; color: var(--ink-2); font-weight: 700; }
.draw-rules { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
html[data-theme="dark"] .draw-odds { background: var(--card); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
.draw-card, .draw-inner, .draw-fan.is-dealing .draw-card { transition: opacity .2s ease; }
.draw-big, .draw-words > * { animation: none; }
}
.draw-back.oil-glitter::before, .draw-back.oil-glitter::after { background-size: 200px; animation-name: draw-twinkle; }
.draw-back.oil-glitter::after { background-size: 170px; }
@keyframes draw-twinkle { from { opacity: .35; } to { opacity: .95; } }
.draw-back.oil-glitter .oil-glow > span { -webkit-mask-size: 200px; mask-size: 200px; }
.draw-back.oil-glitter .oil-ripple { -webkit-mask-size: 100% 100%, 200px; mask-size: 100% 100%, 200px; }
@media (prefers-reduced-motion: reduce) { .draw-back.oil-glitter::before, .draw-back.oil-glitter::after { animation: none; opacity: .4; } }