/* Fullscreen results stay on their reels; the original result strip is removed. */
html.draw-anim-open body{transform:none!important;position:static!important;width:100%!important;max-width:none!important;margin:0!important}
html.draw-anim-open,html.draw-anim-open body,html.draw-anim-open #app,body.draw-anim-open,body.draw-anim-open #app,body.draw-anim-open #p-draw-animation,html.draw-anim-open::before,html.draw-anim-preopen::after,body.draw-anim-preopen::after{background:#080d15!important}
#p-draw-animation{inset:0!important;transform:none!important;width:100%!important;max-width:none!important;height:100dvh!important;min-height:0!important;background:#1c2025!important;overflow:hidden!important;padding:0!important;z-index:2000}
#p-draw-animation::before{background:#080d15!important}
#p-draw-animation .draw-anim-bg{inset:0;width:100%;height:100%;transform:none;background:#080d15 url('./assets/draw-background-20260924.webp') center center / cover no-repeat!important}
#p-draw-animation .draw-anim-header{height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0;flex:0 0 auto;width:100%;max-width:1000px;margin:auto}
#p-draw-animation .draw-anim-back{display:none!important}
#p-draw-animation .draw-anim-back[aria-disabled=true]{opacity:.4;pointer-events:none}
#p-draw-animation .pg-reels{position:relative;display:flex;flex-direction:column;width:min(100%,1000px);height:auto;min-height:0;flex:1;margin:0 auto;gap:0;overflow:hidden}
.pg-reel-row{display:flex;justify-content:center;position:relative;flex:1;min-height:0;overflow:hidden}
.pg-reels:is([data-count='5'],[data-count='10']) .pg-reel-row+.pg-reel-row::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,#ffffff70 35%,#ffffff70 65%,transparent);z-index:4}
.pg-reel-lane{position:relative;flex:1;min-width:0;overflow:hidden;--reel-size:100px;isolation:isolate}
.pg-reel-row[data-columns='2'] .pg-reel-lane{flex:0 0 36%}
.pg-reel-window{position:absolute;inset:24px 0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent)}
.is-horizontal .pg-reel-window{inset:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pg-reel-track{position:absolute;left:50%;top:calc(50% - 22px);width:0;height:0}
.pg-reels.is-spinning .pg-reel-track{will-change:transform}
.pg-reel-window{contain:layout paint}
.pg-reel-item{position:absolute;width:var(--reel-size);height:var(--reel-size);left:calc(var(--reel-size) / -2);top:calc(var(--reel-size) / -2)}
.pg-reel-visual{width:100%;height:100%;position:relative;transform:scale(.83);transition:transform 80ms linear,opacity .2s;opacity:.7}
.pg-reel-visual::before{content:'';position:absolute;inset:-16%;background:radial-gradient(ellipse,var(--grade-glow,#409cff38) 0%,transparent 66%);pointer-events:none}
.pg-reel-visual[data-grade='sp']{--grade-glow:#ff465548}
.pg-reel-visual[data-grade='a']{--grade-glow:#ffd34a45}
.pg-reel-visual[data-grade='b']{--grade-glow:#b75cff45}
.pg-reel-visual[data-grade='c']{--grade-glow:#409cff38}
.pg-reel-item.is-center .pg-reel-visual{transform:scale(1.13);opacity:1}
.pg-reel-base,.pg-reel-product{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.pg-reel-product{inset:4% 10% 16%;width:80%;height:80%;z-index:1}
.pg-reel-info{position:absolute;top:calc(50% - 22px + var(--reel-size) * .59);left:4px;right:4px;text-align:center;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;z-index:5;pointer-events:none}
.pg-reels.is-ready .pg-reel-info{opacity:1;transform:none}
.pg-reel-name{font-size:clamp(11px,3.1vw,18px);font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}
.pg-reel-price{font-family:var(--font-num),sans-serif;font-size:clamp(12px,3.4vw,20px);font-weight:800;color:#fff;line-height:1.7;white-space:nowrap}
.pg-reels[data-count='10'] .pg-reel-name{font-size:clamp(10px,2.6vw,16px)}
.pg-reels[data-count='10'] .pg-reel-price{font-size:clamp(10px,2.6vw,17px);white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.pg-reel-marker{position:absolute;inset:0;pointer-events:none;z-index:4}
.pg-reel-marker::before,.pg-reel-marker::after{content:'';position:absolute;left:50%;width:14px;height:10px;background:#fff;transform:translateX(-50%);filter:drop-shadow(0 0 3px #ffffff30)}
.pg-reel-marker::before,.pg-reel-marker::after{border-radius:0;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'%3E%3Cpath fill='white' d='M2.4 0h13.2q2.4 0 1 2.1l-6.1 9.4q-1.5 2.2-3 0L1.4 2.1Q0 0 2.4 0Z'/%3E%3C/svg%3E")}
.pg-reel-marker::before{top:calc(50% - 22px - var(--reel-size)*.65 - 12px)}
.pg-reel-marker::after{top:calc(50% - 22px + var(--reel-size)*.59 + 53px);transform:translateX(-50%) rotate(180deg)}
.pg-reels[data-count='3'] .pg-reel-name{font-size:clamp(11px,3.1vw,15px)}
.pg-reels[data-count='3'] .pg-reel-price{font-size:clamp(12px,3.4vw,16px)}
.pg-reels[data-count='3'] .pg-reel-marker::after{top:calc(50% - 22px + var(--reel-size)*.59 + 47px)}
.pg-reels[data-count='3'] .pg-reel-row:not(:first-child) .pg-reel-marker::before,.pg-reels[data-count='3'] .pg-reel-row:not(:last-child) .pg-reel-marker::after{display:none}
.pg-reels.is-ready .pg-reel-item:not(.is-center) .pg-reel-visual{opacity:.55}
#p-draw-animation .draw-anim-action{width:min(100%,680px);height:calc(82px + env(safe-area-inset-bottom));padding:2px 12px calc(6px + env(safe-area-inset-bottom));margin:0 auto;flex:0 0 auto}
#p-draw-animation .draw-anim-action{display:flex;gap:10px;align-items:center}
#p-draw-animation .draw-anim-action .draw-anim-finish-btn{flex:1;min-width:0;width:auto}
#p-draw-animation #pgDrawClose{--draw-action-art:url('./uploads/icons/close-btn-BcUqAsR2.webp')}
#p-draw-animation .draw-anim-finish-btn{height:70px;width:100%;margin:0;--draw-action-art:url('./uploads/icons/skip-btn-BX0WUdXm.webp')}
#p-draw-animation .draw-action-label{font-size:17px}
#p-draw-animation .draw-action-art{left:-20%;right:-20%}
#p-draw-animation .draw-action-label{left:3%;right:3%}
#p-draw-animation .draw-anim-finish-btn:disabled{opacity:.65;cursor:default}
#p-draw-animation .draw-anim-result,#p-draw-animation .draw-anim-title-img{display:none!important}
@media(min-width:768px){#p-draw-animation .pg-reels{max-height:900px}.pg-reel-row[data-columns='2'] .pg-reel-lane{flex-basis:33.333%}}
