:root { --green:#26422b; --cream:#ffedbb; --blue:#cfe3f0; --ink:#17311f; --red:#e87954; --sky:#75bed2; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--green); }
body { margin:0; min-height:100svh; color:var(--cream); font-family:"DM Mono", monospace; background:linear-gradient(90deg, transparent 0 7%, rgb(0 0 0 / .07) 7.1% 7.7%, transparent 7.8% 92.2%, rgb(0 0 0 / .07) 92.3% 92.9%, transparent 93%), var(--green); }
body::before, body::after { content:""; position:fixed; pointer-events:none; z-index:0; }
body::before { inset:0; opacity:.15; background-image:radial-gradient(var(--cream) .8px, transparent .8px); background-size:8px 8px; mix-blend-mode:soft-light; }
body::after { height:20px; left:0; right:0; top:0; background:repeating-linear-gradient(90deg,var(--blue) 0 32px,var(--green) 32px 62px); box-shadow:0 5px 0 rgb(0 0 0 / .12); }
.app-shell { position:relative; z-index:1; width:min(100%, 540px); min-height:100svh; margin:auto; padding:46px 24px 30px; overflow:hidden; }
.brand { width:110px; height:102px; margin:0 auto 22px; overflow:hidden; border-radius:50% 50% 44% 44%; box-shadow:0 8px 0 rgb(0 0 0 / .13); }
.brand img { width:100%; height:100%; object-fit:cover; }
.intro { text-align:center; max-width:370px; margin:auto; }
.eyebrow { margin:0 0 9px; font-size:10px; font-weight:500; letter-spacing:.19em; text-transform:uppercase; color:var(--blue); }
h1,h2 { font-family:Fraunces, Georgia, serif; letter-spacing:-.055em; line-height:.95; }
h1 { margin:0; font-size:clamp(2.85rem, 11vw, 4.15rem); }
h1 em { color:var(--blue); font-weight:600; }
.helper { max-width:315px; margin:17px auto 0; font-size:12px; line-height:1.65; color:rgb(255 237 187 / .77); }
.game { position:relative; margin:34px auto 0; text-align:center; }
.used-banner { display:flex; align-items:center; gap:11px; width:min(100%,366px); margin:0 auto 21px; padding:12px 14px; border:2px solid var(--cream); border-radius:15px; color:var(--green); text-align:left; background:var(--cream); box-shadow:0 5px 0 #d5a52d,0 0 0 5px rgb(255 237 187 / .12); }.used-banner[hidden] { display:none; }.used-mark { display:grid; flex:0 0 31px; place-items:center; width:31px; height:31px; border-radius:50%; color:var(--cream); background:var(--green); font:500 19px/1 "DM Mono",monospace; }.used-banner p { margin:0; line-height:1.25; }.used-banner strong,.used-banner small { display:block; }.used-banner strong { font-size:11px; letter-spacing:-.04em; }.used-banner small { margin-top:3px; font-size:7px; color:rgb(38 66 43 / .72); }
.wheel-stage { position:relative; inline-size:min(78vw,366px); block-size:min(78vw,366px); flex:none; margin:auto; padding:14px; border:2px solid var(--cream); border-radius:50%; background:repeating-conic-gradient(from 0deg,var(--cream) 0 2.4deg,#d5a52d 2.4deg 5.5deg,var(--green) 5.5deg 10deg); box-shadow:0 0 0 6px #17311f,0 11px 0 #17311f,0 18px 34px rgb(0 0 0 / .24); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }.wheel-stage:hover { transform:translateY(-3px); box-shadow:0 0 0 6px #17311f,0 14px 0 #17311f,0 21px 34px rgb(0 0 0 / .24); }.wheel-stage:focus-visible { outline:3px solid var(--blue); outline-offset:9px; }
.wheel-stage.is-locked { cursor:not-allowed; filter:saturate(.75); }.wheel-stage.is-locked:hover { transform:none; box-shadow:0 0 0 6px #17311f,0 11px 0 #17311f,0 18px 34px rgb(0 0 0 / .24); }.wheel-stage.is-locked .wheel-hub { background:#46664d; }
.wheel-wrap { inline-size:100%; block-size:100%; aspect-ratio:1 / 1; position:relative; border-radius:50%; overflow:hidden; }
.wheel { inline-size:100%; block-size:100%; aspect-ratio:1 / 1; position:relative; border-radius:50%; background:conic-gradient(from -13.85deg,var(--cream) 0deg 26deg,var(--green) 26deg 27.69deg,var(--sky) 27.69deg 53.69deg,var(--green) 53.69deg 55.38deg,var(--red) 55.38deg 81.38deg,var(--green) 81.38deg 83.07deg,var(--cream) 83.07deg 109.07deg,var(--green) 109.07deg 110.76deg,var(--cream) 110.76deg 136.76deg,var(--green) 136.76deg 138.45deg,var(--sky) 138.45deg 164.45deg,var(--green) 164.45deg 166.14deg,var(--cream) 166.14deg 192.14deg,var(--green) 192.14deg 193.83deg,var(--cream) 193.83deg 219.83deg,var(--green) 219.83deg 221.52deg,var(--cream) 221.52deg 247.52deg,var(--green) 247.52deg 249.21deg,var(--cream) 249.21deg 275.21deg,var(--green) 275.21deg 276.90deg,var(--cream) 276.90deg 302.90deg,var(--green) 302.90deg 304.59deg,var(--sky) 304.59deg 330.59deg,var(--green) 330.59deg 332.28deg,var(--red) 332.28deg 358.28deg,var(--green) 358.28deg 360deg); transform:rotate(13.85deg) translateZ(0); transform-origin:50% 50%; will-change:transform; transition:transform 6.4s cubic-bezier(.08,.72,.04,1); }
.wheel::after { content:""; position:absolute; inset:20%; border:2px dashed rgb(38 66 43 / .28); border-radius:50%; }
.wheel-label { position:absolute; inset:0; z-index:1; transform-origin:50% 50%; }
.slice-copy { position:absolute; top:15%; left:50%; display:flex; flex-direction:column; align-items:center; transform:translateX(-50%) rotate(calc(-1 * var(--angle))); }.slice-icon { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid rgb(38 66 43 / .18); border-radius:50%; background:rgb(255 255 255 / .38); font-size:22px; line-height:1; box-shadow:0 2px 0 rgb(38 66 43 / .12); }.rare-icon { color:var(--cream); font:500 8px "DM Mono",monospace; background:var(--red); border-color:rgb(255 237 187 / .75); }
.label-1 { --angle:0deg; transform:rotate(var(--angle)); }.label-2 { --angle:27.69deg; transform:rotate(var(--angle)); }.label-3 { --angle:55.38deg; transform:rotate(var(--angle)); }.label-4 { --angle:83.07deg; transform:rotate(var(--angle)); }.label-5 { --angle:110.76deg; transform:rotate(var(--angle)); }.label-6 { --angle:138.45deg; transform:rotate(var(--angle)); }.label-7 { --angle:166.14deg; transform:rotate(var(--angle)); }.label-8 { --angle:193.83deg; transform:rotate(var(--angle)); }.label-9 { --angle:221.52deg; transform:rotate(var(--angle)); }.label-10 { --angle:249.21deg; transform:rotate(var(--angle)); }.label-11 { --angle:276.90deg; transform:rotate(var(--angle)); }.label-12 { --angle:304.59deg; transform:rotate(var(--angle)); }.label-13 { --angle:332.28deg; transform:rotate(var(--angle)); }
.wheel-hub { position:absolute; z-index:2; inset:37%; border:2px solid var(--cream); border-radius:50%; background:var(--green); color:var(--cream); font-family:Fraunces,Georgia,serif; font-size:clamp(1.15rem,5vw,1.55rem); line-height:.7; box-shadow:0 4px 0 rgb(0 0 0 / .2),inset 0 0 0 4px rgb(255 237 187 / .08); transition:transform .2s ease,background .2s ease; }.wheel-stage:hover .wheel-hub { transform:scale(1.06); background:#31563a; }.wheel-hub > span { position:absolute; top:50%; left:50%; display:block; width:100%; transform:translate(-50%,-50%); text-align:center; }.wheel-hub small { position:absolute; bottom:12%; left:50%; display:block; margin:0; color:var(--blue); font:500 6px "DM Mono",monospace; letter-spacing:.08em; line-height:1; text-transform:uppercase; transform:translateX(-50%); white-space:nowrap; }
.pointer { position:absolute; z-index:4; left:50%; top:-13px; transform:translateX(-50%); width:0; height:0; border-left:18px solid transparent; border-right:18px solid transparent; border-top:39px solid var(--red); filter:drop-shadow(0 3px 0 #8c3e29); }
.prize-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:min(100%,366px); margin:21px auto 0; text-align:left; }.prize-strip>div { display:flex; align-items:center; gap:7px; min-width:0; padding:9px 8px; border:1px solid rgb(255 237 187 / .36); border-radius:12px; background:rgb(23 49 31 / .24); }.prize-strip>div>span { display:grid; flex:0 0 29px; place-items:center; width:29px; height:29px; border-radius:50%; background:var(--cream); font-size:17px; }.prize-strip .rare-prize>span { color:var(--cream); background:var(--red); font:500 7px "DM Mono",monospace; }.prize-strip p { min-width:0; margin:0; color:var(--cream); font-size:8px; line-height:1.25; }.prize-strip b,.prize-strip small { display:block; }.prize-strip small { margin-top:2px; color:var(--blue); font-size:6px; letter-spacing:0; }.prize-strip .rare-prize small { color:var(--cream); opacity:.72; }.spin-button { position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:3px; min-width:224px; margin-top:18px; border:2px solid var(--cream); border-radius:999px; padding:14px 25px 15px; color:var(--cream); background:var(--red); font:500 14px "DM Mono",monospace; letter-spacing:.03em; cursor:pointer; box-shadow:0 5px 0 #8c3e29,0 0 0 4px rgb(255 237 187 / .12); transition:transform .15s, box-shadow .15s,background .15s; }
.button-kicker { font-size:7px; letter-spacing:.13em; opacity:.8; text-transform:uppercase; }
.spin-button:hover { transform:translateY(-2px) rotate(-1deg); background:#f08761; box-shadow:0 7px 0 #8c3e29,0 0 0 4px rgb(255 237 187 / .12); }.spin-button:active { transform:translateY(4px); box-shadow:0 1px 0 #8c3e29; }.spin-button:focus-visible,.review-link:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }.spin-button:disabled { cursor:wait; opacity:.72; }.spin-button.is-used { color:rgb(255 237 187 / .92); background:#5b715f; box-shadow:0 5px 0 #17311f,0 0 0 4px rgb(255 237 187 / .12); }
.probability-note { margin:16px 0 0; font-size:1px; letter-spacing:0; color:rgb(255 237 187 / .16); }.odds-note { max-width:310px; margin:11px auto 0; color:rgb(255 237 187 / .64); font-size:7px; line-height:1.5; letter-spacing:.02em; }.fine-print { margin:38px auto 0; max-width:270px; color:rgb(255 237 187 / .55); font-size:9px; text-align:center; line-height:1.6; }
.sparkle { position:absolute; font-size:24px; color:var(--blue); animation:twinkle 2.5s ease-in-out infinite; }.sparkle-one { top:2%; left:7%; }.sparkle-two { top:35%; right:3%; color:var(--cream); animation-delay:-1.2s; }
@keyframes twinkle { 50% { transform:scale(.6) rotate(30deg); opacity:.45; } }
.reward-dialog { width:min(calc(100% - 30px),430px); margin:auto; padding:0; border:0; background:transparent; color:var(--green); overflow:visible; }.reward-dialog::backdrop { background:rgb(23 49 31 / .82); backdrop-filter:blur(5px); }
.reward-card { position:relative; isolation:isolate; overflow:hidden; border:7px solid var(--cream); border-radius:26px; padding:30px 23px 20px; text-align:center; background:var(--cream); box-shadow:0 16px 0 #17311f; }.reward-card::before { content:""; position:absolute; z-index:-1; inset:0 0 auto; height:18px; background:repeating-linear-gradient(90deg,var(--blue) 0 25px,var(--green) 25px 50px); }
.reward-logo { width:68px; height:62px; margin:6px auto 20px; display:block; border-radius:50%; object-fit:cover; }.reward-card .eyebrow { color:var(--green); font-size:9px; }.treat-icon { margin:12px auto 8px; font-size:61px; line-height:1; filter:drop-shadow(0 4px 0 rgb(38 66 43 / .16)); animation:treat-pop .55s cubic-bezier(.2,1.6,.45,1); }@keyframes treat-pop { from{transform:scale(0) rotate(-25deg)} }
h2 { margin:0; font-size:clamp(2.3rem,10vw,3.2rem); }.reward-copy { margin:15px auto 21px; max-width:290px; font-size:11px; line-height:1.65; }.pass-status { display:flex; justify-content:center; align-items:center; gap:8px; padding:12px; border:1px solid rgb(38 66 43 / .28); border-radius:9px; font-size:11px; }.live-dot { width:8px; height:8px; border-radius:50%; background:#e35a3f; box-shadow:0 0 0 0 rgb(227 90 63 / .55); animation:pulse 1.1s infinite; }@keyframes pulse { to{box-shadow:0 0 0 7px transparent} }.staff-note { margin:15px -23px 0; padding:13px 18px; color:var(--cream); background:var(--green); font-size:10px; font-weight:500; letter-spacing:.12em; }.review-link { display:block; margin-top:0; padding:24px 13px 14px; border:2px solid var(--red); border-radius:13px; color:var(--cream); background:var(--green); font-size:10px; line-height:1.45; text-decoration:none; box-shadow:0 5px 0 #17311f,0 0 0 4px rgb(232 121 84 / .18); animation:review-glow 1.15s ease-in-out 4; transition:transform .15s,background .15s,box-shadow .15s; }.review-link:hover { transform:translateY(-2px); background:#31563a; box-shadow:0 7px 0 #17311f,0 0 0 6px rgb(232 121 84 / .28); }.review-link strong,.review-link small { display:block; }.review-link strong { font-size:12px; }.review-link small { margin-top:4px; color:rgb(255 237 187 / .76); }.review-stars { display:block; color:#d5a52d; font-size:12px; letter-spacing:.13em; }.review-step { position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; margin:18px 0 -12px; padding:6px 10px; border-radius:999px; color:var(--cream); background:var(--red); font-size:7px; font-weight:500; letter-spacing:.13em; box-shadow:0 2px 0 #8c3e29; }@keyframes review-glow { 50% { transform:translateY(-2px) scale(1.015); box-shadow:0 7px 0 #17311f,0 0 0 8px rgb(232 121 84 / .25); } }
.confetti { position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 10% 20%,var(--blue) 0 4px,transparent 5px),radial-gradient(circle at 85% 17%,var(--cream) 0 5px,transparent 6px),radial-gradient(circle at 12% 85%,var(--red) 0 4px,transparent 5px),radial-gradient(circle at 90% 78%,var(--blue) 0 4px,transparent 5px); animation:confetti .8s ease-out both; }@keyframes confetti { from{opacity:0;transform:scale(.5)} to{opacity:1;transform:scale(1.3)} }
@media (min-width:560px) { .app-shell { padding-top:54px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } }