@import url('./assets/fonts/fonts.css');
.blr{--green:#1ee650;--text:#f4f3ec;box-sizing:border-box;container-type:inline-size;position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:800px;color:var(--text);background:#030705;font-family:'Barlow Condensed','Arial Narrow',sans-serif;border:1px solid #184125}
.blr *,.blr *::before,.blr *::after{box-sizing:border-box}.blr button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.blr button:focus-visible,.blr__viewport:focus-visible{outline:3px solid #f8fff7;outline-offset:5px}
.blr::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('./assets/grunge.svg') center/100% 100%,radial-gradient(ellipse at 50% 43%,#12492688,transparent 43%),linear-gradient(170deg,#020503,#07100a 48%,#020302 80%)}
.blr::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;border:8px solid transparent;border-image:url('./assets/grunge.svg') 20 round;opacity:.65}
.blr__top{display:flex;align-items:center;justify-content:space-between;padding:25px 3.5% 0;position:relative;z-index:3}.blr__brand{font:29px/.95 'Anton',sans-serif;letter-spacing:-1px;transform:rotate(-2deg)}.blr__brand>span{background:var(--green);color:#020905;padding:0 3px;margin-left:3px}.blr__brand small{display:block;font:600 11px/1.8 'Barlow Condensed',sans-serif;letter-spacing:3px;margin-top:6px}.blr__edition{color:#8aa38f;font-size:12px;letter-spacing:3px}
.blr__intro{position:relative;z-index:2;text-align:center;margin:-12px auto 0;padding:0 20px}.blr__headline{font:400 clamp(37px,6.15cqw,105px)/1.15 'Permanent Marker',Impact,sans-serif;letter-spacing:-3px;margin:0;transform:rotate(-1.5deg);text-shadow:2px 4px 0 #17341f,0 0 30px #000}.blr__intro>p{margin:12px 0 0;font-size:17px;letter-spacing:6px;font-weight:700}
.blr__scribble{position:absolute;top:172px;font:27px/.97 'Permanent Marker',sans-serif;color:#296b3e;opacity:.7;z-index:1;transform:rotate(-12deg)}.blr__scribble--left{left:5%}.blr__scribble--right{right:4%;transform:rotate(-10deg);text-align:center}
.blr__stage{position:relative;height:420px;margin-top:1px}.blr__viewport{position:absolute;inset:0;cursor:grab;touch-action:pan-y;user-select:none;overflow:hidden;border-radius:4px}.blr__viewport.is-dragging{cursor:grabbing}
.blr__floor{position:absolute;width:100%;height:170px;left:0;bottom:-70px;background:radial-gradient(ellipse at 50% 12%,#1dde4630,transparent 52%),repeating-linear-gradient(177deg,transparent 0 9px,#569f6410 10px,transparent 12px);transform:perspective(300px) rotateX(36deg);mask-image:linear-gradient(transparent,#000 22%,#000 50%,transparent)}
.blr__halo{position:absolute;bottom:13px;left:50%;width:290px;height:48px;border:4px solid var(--green);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 18px #20ed4c,inset 0 0 20px #20ed4c88,0 0 90px #20ed4c80;background:#1fec4922}.blr__halo::before{content:'';position:absolute;width:200px;height:250px;left:40px;bottom:20px;background:radial-gradient(ellipse,#2bff4e66,transparent 70%);filter:blur(20px)}
.blr__item{position:absolute;left:50%;bottom:13px;width:355px;height:395px;transform-origin:50% 100%;pointer-events:none;will-change:transform}.blr__art{width:100%;height:100%;filter:drop-shadow(0 10px 8px #000a);-webkit-box-reflect:below -2px linear-gradient(transparent 75%,#ffffff16)}.blr__art img{width:100%;height:100%;object-fit:contain}.blr__art--sprite{background-repeat:no-repeat;background-size:500% 300%}.blr__item.is-selected .blr__art{filter:drop-shadow(0 0 9px #50ff5680) drop-shadow(0 12px 9px #000a)}
.blr__arrow{position:absolute;z-index:110;top:110px;display:grid;place-items:center;width:67px;height:67px;border-radius:50%;border:2px solid var(--green);background:#020c06df;box-shadow:0 0 0 5px #1bec4722,0 0 24px #24ff4670,inset 0 0 13px #1bf45030;transition:background .15s,transform .15s}.blr__arrow:hover{background:#165f28;transform:scale(1.06)}.blr__arrow svg{width:34px;height:34px;stroke-width:4}.blr__arrow--left{left:16%}.blr__arrow--right{right:16%}.blr__direction{position:absolute;top:141px;font-weight:600;font-size:13px;text-align:center;line-height:1.15}.blr__direction--left{left:9%;transform:rotate(-8deg)}.blr__direction--right{right:8%;transform:rotate(8deg)}
.blr__bottom{position:relative;z-index:2;display:grid;grid-template-columns:210px minmax(0,580px) 235px;justify-content:space-between;gap:25px;padding:7px 3.5% 0}.blr__stats{display:flex;flex-direction:column;gap:9px;margin-top:-30px}.blr__stat{display:flex;align-items:center;gap:14px;padding:8px 16px;min-height:57px;background:linear-gradient(120deg,#17221dcc,#080d09dd);border:1px solid #52765d;border-left:2px solid #9caf9e;box-shadow:2px 2px 0 #12973666;transform:rotate(-1deg);clip-path:polygon(2% 0,97% 2%,100% 13%,98% 91%,95% 100%,0 96%,1% 10%)}.blr__stat:nth-child(even){transform:rotate(.8deg)}.blr__stat svg{width:28px;height:39px;flex:none}.blr__stat strong{font-size:19px;font-weight:600;line-height:1.1;display:block}.blr__stat small{font-size:13px;letter-spacing:.7px}
.blr__selection{min-width:0}.blr__result{position:relative;background:linear-gradient(115deg,#080e0aeb,#030705f5),url('./assets/grunge.svg');border:1px solid #29be4c;border-width:2px 1px;padding:17px 28px 18px;box-shadow:0 0 0 4px #18a93a15,0 0 28px #20e94a16;transform:rotate(-.5deg)}.blr__result::before,.blr__result::after{content:'';position:absolute;height:5px;width:34%;background:var(--green);left:-2px;top:-4px;clip-path:polygon(0 10%,22% 35%,24% 0,52% 38%,90% 0,100% 80%,0 100%)}.blr__result::after{top:auto;bottom:-4px;left:auto;right:0;transform:rotate(180deg)}
.blr__result-name{font:400 clamp(25px,2.7cqw,44px)/1.2 'Anton',sans-serif;text-transform:uppercase;margin:0 0 6px;overflow-wrap:anywhere}.blr__result-line{display:flex;align-items:center;gap:12px}.blr__result-icon svg{width:27px;height:34px;display:block}.blr__result-meta{text-transform:uppercase;font-size:18px;font-weight:600}.blr__price{margin-left:auto;white-space:nowrap;color:var(--green);font:400 clamp(29px,3cqw,45px)/1 'Anton',sans-serif;padding-left:17px;border-left:2px solid var(--green)}.blr__description{font-size:17px;letter-spacing:.5px;margin:9px 0 0;color:#c0c8c1;min-height:21px}
.blr__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:15px -25px 0}.blr__dot{width:28px;height:28px;border:0;background:none;display:grid;place-items:center;padding:0;border-radius:50%}.blr__dot::before{content:'';width:9px;height:9px;border:1.5px solid #8c9a8e;border-radius:50%;background:#333e35;transition:transform .15s}.blr__dot:hover::before{background:#e0efe2}.blr__dot.is-active::before{width:15px;height:15px;background:var(--green);border-color:var(--green);box-shadow:0 0 13px #20e54b88}
.blr__hint{display:flex;position:relative;justify-content:center;align-items:center;gap:14px;margin:5px 0 24px;color:var(--green);font-size:26px}.blr__hint svg{width:20px;height:30px;color:#d4ddd5}.blr__hint small{position:absolute;top:37px;color:#8e9c90;font-size:10px;letter-spacing:2px;white-space:nowrap}
.blr__random-area{display:flex;align-items:center;flex-direction:column;margin-top:-30px}.blr__splash{display:grid;place-content:center;text-align:center;width:200px;height:90px;background:var(--green);color:#031207;font:26px/.92 'Permanent Marker',sans-serif;transform:rotate(-9deg);clip-path:polygon(14% 9%,29% 12%,35% 0,43% 8%,68% 1%,71% 9%,87% 3%,85% 21%,100% 24%,93% 42%,100% 65%,84% 64%,86% 92%,65% 87%,58% 100%,41% 89%,22% 98%,23% 83%,1% 87%,12% 65%,0 55%,10% 43%,3% 22%,18% 25%)}.blr__btn{padding:12px 18px;background:linear-gradient(110deg,#18231c,#050906);border:1px solid #75a680;font-weight:600;font-size:17px;min-height:55px}.blr__random{width:100%;display:flex;align-items:center;justify-content:center;gap:16px;line-height:1.1;box-shadow:2px 3px 0 #21b84977;transform:rotate(1deg);transition:background .15s}.blr__random:hover{background:#174426}.blr__random svg{width:32px;height:32px;flex:none;transform:rotate(-12deg)}.blr__random-note{min-height:16px;color:#a8c6ad;font-size:12px;text-align:center;margin:8px 0}.blr__motto{font:22px/1.1 'Permanent Marker',sans-serif;color:#348b4a;transform:rotate(-8deg);margin-top:5px}
.blr__footer{position:relative;z-index:2;display:flex;justify-content:space-between;padding:25px 3.5% 16px;font-size:10px;letter-spacing:1.5px;color:#799580}.blr__loading{min-height:300px;padding:80px 25px;text-align:center;font-size:24px}.blr.is-spinning .blr__halo{box-shadow:0 0 25px #20ed4c,inset 0 0 30px #20ed4c88,0 0 110px #20ed4ca0}
@container (max-width:1050px){
 .blr__intro{margin:18px 0 0}.blr__headline{font-size:7cqw}.blr__stage{height:360px}.blr__item{width:306px;height:340px}.blr__bottom{grid-template-columns:160px minmax(0,1fr) 175px;gap:18px}.blr__result{padding:15px}.blr__stat{padding:8px;gap:8px}.blr__stat strong{font-size:16px}.blr__stat small{font-size:11px}.blr__splash{width:165px}.blr__random{padding:10px;font-size:15px;gap:8px}.blr__motto{font-size:18px}.blr__scribble{font-size:21px;top:170px}.blr__direction{display:none}.blr__arrow--left{left:8%}.blr__arrow--right{right:8%}.blr__result-line{flex-wrap:wrap;gap:6px}.blr__result-meta{font-size:16px}.blr__price{font-size:30px}
}
@container (max-width:720px){
 .blr__top{padding:22px 6% 0}.blr__brand{font-size:24px}.blr__edition{font-size:9px;letter-spacing:1px;max-width:100px;text-align:right}.blr__intro{margin-top:26px;padding:0 8px}.blr__headline{font-size:8cqw;letter-spacing:-1.5px}.blr__intro>p{font-size:12px;letter-spacing:3px;margin-top:9px}.blr__stage{height:315px;margin-top:5px}.blr__item{width:270px;height:300px}.blr__halo{width:215px;height:34px;bottom:12px}.blr__scribble{display:none}.blr__arrow{width:48px;height:48px;top:133px}.blr__arrow svg{width:26px;height:26px}.blr__arrow--left{left:5%}.blr__arrow--right{right:5%}
 .blr__bottom{display:flex;flex-direction:column;padding:9px 6% 0;gap:22px}.blr__selection{order:0;width:100%}.blr__result{padding:17px 20px}.blr__result-name{font-size:32px}.blr__result-meta{font-size:17px}.blr__price{font-size:36px}.blr__description{font-size:16px}.blr__dots{margin:14px -10px 0;gap:0}.blr__dot{width:23px;height:30px}.blr__dot::before{width:7px;height:7px}.blr__dot.is-active::before{width:12px;height:12px}.blr__hint{margin-bottom:20px}.blr__hint small{font-size:9px}
 .blr__random-area{order:1;margin:0;display:grid;grid-template-columns:90px 1fr;gap:0 12px}.blr__splash{width:97px;height:68px;font-size:18px}.blr__random{min-height:60px;font-size:17px}.blr__random-note{grid-column:1/-1;margin:6px 0 0;min-height:0}.blr__motto{display:none}.blr__stats{order:2;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}.blr__stat{padding:10px 12px;gap:10px}.blr__stat strong{font-size:16px}.blr__stat svg{width:23px;height:32px}.blr__footer{padding:25px 6% 18px;font-size:8px;gap:15px;letter-spacing:1px}
}
@media(prefers-reduced-motion:reduce){.blr *,.blr *::before{transition:none!important}}
.blr__art--sprite{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
.blr::before{background:linear-gradient(#02060320,#02060315 65%,#02060388),url('./assets/bar-background.png') center/100% 100%}
@container(max-width:720px){.blr__dots{max-width:270px;margin:14px auto 0}.blr__dot{width:25px;min-height:30px}}
/* Keep each product on a composited layer; no animated blur or reflection repaint. */
.blr__item{will-change:transform,opacity;backface-visibility:hidden}
.blr__art{-webkit-box-reflect:unset;filter:drop-shadow(0 9px 7px #0009)}
/* Keep the spin status slot in the layout, including while its text is empty. */
.blr .blr__random-note{height:2.5em;min-height:2.5em;line-height:1.25;display:flex;align-items:center;justify-content:center;margin:5px 0 0}
.blr__bottom{grid-template-columns:minmax(0,580px) 235px;justify-content:center}
@container(max-width:1050px){.blr__bottom{grid-template-columns:minmax(0,1fr) 175px}}
.blr__halo{border-width:2px;box-shadow:0 0 10px #20ed4c88,inset 0 0 10px #20ed4c44,0 0 40px #20ed4c40}
.blr__halo::before{left:50%;transform:translateX(-50%);width:150%;height:220px;bottom:6px;opacity:.55}
.blr.is-spinning .blr__halo{box-shadow:0 0 14px #20ed4caa,inset 0 0 12px #20ed4c55,0 0 50px #20ed4c55}
/* Existing elements restyled to match the original distressed bar artwork. */
@font-face{font-family:'Road Rage';font-style:normal;font-weight:400;font-display:swap;src:url('./assets/fonts/road-rage.ttf') format('truetype')}
.blr .blr__headline{font-family:'Road Rage','Permanent Marker',sans-serif;font-size:clamp(38px,12.6cqw,144px);line-height:.95;letter-spacing:1.2px;transform:rotate(-1deg);text-shadow:1px 3px 0 #1b502a88,0 0 18px #000}
.blr .blr__intro>p{letter-spacing:4px;color:#dfdfd7}
.blr .blr__result{background:linear-gradient(105deg,#020604f5,#030705ec),url('./assets/grunge.svg');border:0;box-shadow:none;transform:rotate(-.65deg)}
.blr .blr__result::before{inset:-7px;width:auto;height:auto;background:url('./assets/rough-green.svg') center/100% 100%;clip-path:none;transform:none;pointer-events:none}
.blr .blr__result::after{display:none}
.blr .blr__result-name{letter-spacing:.7px;text-shadow:1px 1px #ffffff25}
.blr .blr__price{color:#24e24e;text-shadow:0 0 12px #17e64825}
.blr .blr__description{color:#d1d3cb;letter-spacing:.7px}
.blr .blr__arrow{border:2px solid #31e756;box-shadow:0 0 0 4px #041509,0 0 0 6px #1db744aa,0 0 23px #1ce54c60,inset 0 0 15px #18cf4025;background:radial-gradient(circle,#050a06 48%,#102a17)}
.blr .blr__arrow:hover{background:#163e20;box-shadow:0 0 0 4px #041509,0 0 0 6px #3bfa64,0 0 25px #1ce54c99}
.blr .blr__random{position:relative;border:0;background:linear-gradient(115deg,#141a16f0,#030604f5);box-shadow:none;transform:rotate(1.3deg);letter-spacing:.6px}
.blr .blr__random::before{content:'';position:absolute;inset:-5px;background:url('./assets/rough-white.svg') center/100% 100%;pointer-events:none}
.blr .blr__random:hover{background:linear-gradient(115deg,#183121,#08190d)}
.blr .blr__splash{font-family:'Road Rage','Permanent Marker',sans-serif;font-size:30px;line-height:.75;letter-spacing:.2px;background:#1edd4c;transform:rotate(-10deg);clip-path:polygon(8% 18%,22% 13%,23% 7%,44% 9%,46% 3%,69% 7%,88% 0,85% 14%,99% 13%,93% 33%,100% 39%,91% 58%,96% 74%,80% 78%,81% 94%,61% 89%,49% 98%,29% 90%,9% 99%,13% 84%,0 80%,7% 60%,1% 44%,12% 37%)}
@container(max-width:720px){.blr .blr__intro>p{font-size:11px;letter-spacing:2.5px}.blr .blr__splash{font-size:25px}}
/* Shared heading style across website and roulette. */
.blr .blr__result-name{font-family:'Road Rage',Impact,sans-serif;font-weight:400;letter-spacing:.025em}
/* Reserve the result layout while hiding the previous selection during motion. */
.blr.is-spinning .blr__result > * { visibility: hidden; }