@property --wh1{syntax: "<color>"; inherits: true; initial-value: #7ef5ff;}@property --wh2{syntax: "<color>"; inherits: true; initial-value: #a78bff;}.op-wheel{--wh1: #7ef5ff;--wh2: #a78bff;position:relative;margin:2px 0 clamp(22px,3vw,40px);transition:--wh1 1s var(--op-ease-io),--wh2 1s var(--op-ease-io);animation:op-rise .9s var(--op-ease) backwards}.op-wheel__stage{--op-wheel-h: clamp(420px, 42vw, 580px);position:relative;height:var(--op-wheel-h);overflow:hidden;isolation:isolate;border-radius:28px;background:radial-gradient(90% 70% at 50% 0%,#fff,#fff0 70%),linear-gradient(180deg,#f6f7fa,#e8eaef);box-shadow:inset 0 0 0 1px rgba(var(--op-ink-rgb),.06),0 40px 80px -60px rgba(var(--op-ink-rgb),.55);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;overscroll-behavior-x:contain;outline:none}.op-wheel.is-dragging .op-wheel__stage{cursor:grabbing}.op-wheel.is-dragging .op-wheel__card{pointer-events:none}.op-wheel__halo{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(24% 36% at 50% 40%,color-mix(in srgb,var(--wh1) 46%,transparent),transparent 72%),radial-gradient(20% 28% at 58% 58%,color-mix(in srgb,var(--wh2) 34%,transparent),transparent 72%),radial-gradient(22% 5% at 50% 82%,rgba(var(--op-ink-rgb),.2),transparent 72%)}.op-wheel__dial{position:absolute;left:0;bottom:0;z-index:1;width:100%;height:34%;pointer-events:none}.op-wheel__track{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;perspective:1700px;perspective-origin:50% 32%;-webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 99%);mask-image:linear-gradient(180deg,#000 84%,transparent 99%)}.op-wheel__card{position:absolute;top:var(--cy);left:50%;display:block;width:calc(var(--ch) * var(--ar));height:var(--ch);margin:calc(var(--ch) / -2) 0 0 calc(var(--ch) * var(--ar) / -2);outline:none;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none}.op-wheel__card:not(.is-far){will-change:transform,opacity}.op-wheel__card.is-far{visibility:hidden}.op-wheel__face{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--ch) * var(--ar) * .048);background:linear-gradient(110deg,#e6e8ee 25%,#f7f8fa,#e6e8ee 65%) 0 0 / 300% 100%;box-shadow:0 1px 2px rgba(var(--op-ink-rgb),.14),0 24px 36px -24px rgba(var(--op-ink-rgb),.6);transform:perspective(900px) translate3d(0,var(--lift, 0px),0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));transition:transform .9s var(--op-ease),box-shadow .9s var(--op-ease);animation:op-wheel-shimmer 1.3s linear infinite}.op-wheel__card.is-far .op-wheel__face,.op-wheel__card.is-loaded .op-wheel__face{animation:none}.op-wheel__card.is-loaded .op-wheel__face{background:#fff}@keyframes op-wheel-shimmer{to{background-position:-300% 0}}.op-wheel__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .7s var(--op-ease)}.op-wheel__card.is-contain .op-wheel__img{object-fit:contain}.op-wheel__card.is-loaded .op-wheel__img{opacity:1}.op-wheel__veil{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;background:#0b0c10;opacity:0;pointer-events:none}.op-wheel__card:not(.is-far) .op-wheel__veil{will-change:opacity}.op-wheel__foil{position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.7) 48%,rgba(255,255,255,0) 58%);mix-blend-mode:soft-light;opacity:0;transform:translate(-70%)}.op-wheel__card.is-selected .op-wheel__foil{animation:op-wheel-sweep 1.25s var(--op-ease) .06s}@keyframes op-wheel-sweep{0%{opacity:1;transform:translate(-70%)}to{opacity:1;transform:translate(70%)}}.op-wheel__card.is-selected .op-wheel__face{--lift: -8px;box-shadow:0 2px 4px rgba(var(--op-ink-rgb),.12),0 42px 60px -30px rgba(var(--op-ink-rgb),.62),0 0 70px -14px color-mix(in srgb,var(--wh1) 80%,transparent)}.op-wheel__card.is-tilt .op-wheel__face{transition:transform .14s linear,box-shadow .9s var(--op-ease)}.op-wheel__face:before,.op-wheel__face:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s var(--op-ease)}.op-wheel__face:before{background:var(--op-holo);background-size:300% 300%;background-position:var(--mx, 50%) var(--my, 50%);mix-blend-mode:color-dodge}.op-wheel__face:after{background:radial-gradient(circle at var(--mx, 50%) var(--my, 50%),rgba(255,255,255,.6) 0%,rgba(255,255,255,.14) 24%,rgba(255,255,255,0) 52%);mix-blend-mode:soft-light}.op-wheel__card.is-tilt .op-wheel__face:before{opacity:.14}.op-wheel__card.is-tilt .op-wheel__face:after{opacity:1}.op-wheel__card--more .op-wheel__face{display:flex;flex-direction:column;justify-content:flex-end;padding:12%;background:var(--op-ink);color:#fff;animation:none}.op-wheel__more-k,.op-wheel__more-t{font-family:var(--op-font-display);font-weight:600;font-size:calc(var(--ch) * .1);line-height:.95;letter-spacing:-.045em}.op-wheel__more-t{background:linear-gradient(100deg,var(--wh1),var(--wh2));-webkit-background-clip:text;background-clip:text;color:transparent}.op-wheel__more-a{margin-top:14%;font-family:var(--op-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ffffffb3}.op-wheel__nav{position:absolute;top:42%;z-index:5;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:#ffffffb8;color:var(--op-ink);box-shadow:inset 0 0 0 1px rgba(var(--op-ink-rgb),.08),0 12px 26px -16px rgba(var(--op-ink-rgb),.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:opacity .35s var(--op-ease),transform .5s var(--op-ease),background-color .3s}.op-wheel__nav:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat}.op-wheel__nav--prev{left:18px}.op-wheel__nav--prev:before{transform:scaleX(-1)}.op-wheel__nav--next{right:18px}.op-wheel__nav:hover{background:#fff;transform:scale(1.07)}.op-wheel__nav:active{transform:scale(.95)}.op-wheel__nav:disabled{opacity:0;pointer-events:none}@media(hover:none),(pointer:coarse){.op-wheel__nav{display:none}}.op-wheel__panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 32px;padding:clamp(18px,2vw,26px) clamp(4px,1vw,12px) 0}.op-wheel__info{min-width:0}.op-wheel__meta{display:flex;align-items:center;gap:8px;min-width:0;min-height:15px;margin:0;font-family:var(--op-font-mono);font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--op-muted)}.op-wheel__meta i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--op-holo)}.op-wheel__meta i[data-w=pokemon]{background:linear-gradient(135deg,#ffcb05 50%,#3d7dca 50%)}.op-wheel__meta i[data-w=one-piece]{background:linear-gradient(135deg,#e2352b 50%,#f2b134 50%)}.op-wheel__meta i[data-w=riftbound]{background:linear-gradient(135deg,#8a5cff 50%,#22d3c5 50%)}.op-wheel__meta i[data-w=mtg]{background:linear-gradient(135deg,#ff8a3d 50%,#3aa46b 50%)}.op-wheel__meta i[data-w=yugioh]{background:linear-gradient(135deg,#f5c542 50%,#8d4bd6 50%)}.op-wheel__set{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.op-wheel__num{flex:none;color:rgba(var(--op-ink-rgb),.55)}.op-wheel__name{margin:10px 0 14px;font-family:var(--op-font-display);font-weight:600;font-size:clamp(26px,2.7vw,44px);line-height:.98;letter-spacing:-.045em;color:var(--op-ink);text-wrap:balance}.op-wheel__name a{color:inherit}.op-wheel__chips{display:flex;flex-wrap:wrap;gap:6px;min-height:24px;margin:0}.op-chip--soft{background:rgba(var(--op-ink-rgb),.05);color:var(--op-ink);box-shadow:inset 0 0 0 1px rgba(var(--op-ink-rgb),.08)}.op-chip--cond{background:#fff;color:var(--op-ink);box-shadow:inset 0 0 0 1px rgba(var(--op-ink-rgb),.16)}.op-wheel__buy{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.op-wheel__price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:4px 10px;margin:0}.op-wheel__price .actual-price{font-family:var(--op-font-mono);font-size:clamp(26px,2.4vw,34px);font-weight:500;letter-spacing:-.05em;color:var(--op-ink)}.op-wheel__price .compare-price{font-family:var(--op-font-mono);font-size:15px;color:var(--op-muted)}.op-wheel__stock{display:inline-flex;align-items:center;gap:8px;font-family:var(--op-font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--op-muted)}.op-wheel__stock:before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #22c55e2e}.op-wheel__stock.is-low:before{background:#f59e0b;box-shadow:0 0 0 3px #f59e0b33}.op-wheel__stock.is-out:before{background:#ef4444;box-shadow:0 0 0 3px #ef44442e}.op-wheel__stock:empty{display:none}.op-wheel__ctas{display:flex;gap:8px}.op-wheel__add,.op-wheel__view{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 20px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;transition:transform .5s var(--op-ease),background-color .3s var(--op-ease),box-shadow .5s var(--op-ease),color .3s}.op-wheel__add{background:var(--op-ink);color:#fff;box-shadow:0 14px 28px -16px rgba(var(--op-ink-rgb),.95)}.op-wheel__add[hidden]{display:none}.op-wheel__add.disabled{opacity:.55;pointer-events:none}.op-wheel__add:before,.op-wheel__view:after{content:"";flex:none;width:16px;height:16px;background:currentColor;transition:transform .6s var(--op-ease)}.op-wheel__add:before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M2.5 8h11' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M2.5 8h11' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat}.op-wheel__view{background:#ffffffb3;color:var(--op-ink);box-shadow:inset 0 0 0 1px rgba(var(--op-ink-rgb),.16)}.op-wheel__view:after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat}@media(hover:hover){.op-wheel__add:hover{background:#000;transform:translateY(-1px);box-shadow:0 18px 30px -16px rgba(var(--op-ink-rgb),1)}.op-wheel__add:hover:before{transform:rotate(90deg)}.op-wheel__view:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(var(--op-ink-rgb),.3)}.op-wheel__view:hover:after{transform:translate(3px)}}.op-wheel__add:active,.op-wheel__view:active{transform:scale(.97)}.op-wheel__rail{display:flex;align-items:center;gap:16px;margin-top:clamp(16px,2vw,24px);padding:0 clamp(4px,1vw,12px)}.op-wheel__count{min-width:66px;font-family:var(--op-font-mono);font-size:12px;letter-spacing:.08em;color:var(--op-ink)}.op-wheel__count i{font-style:normal;color:var(--op-muted)}.op-wheel__bar{position:relative;flex:1;height:20px;cursor:pointer}.op-wheel__bar:before,.op-wheel__bar i{content:"";position:absolute;top:50%;left:0;right:0;height:2px;margin-top:-1px;border-radius:2px}.op-wheel__bar:before{background:rgba(var(--op-ink-rgb),.1)}.op-wheel__bar i{background:linear-gradient(90deg,var(--wh1),var(--wh2));transform-origin:left center;transform:scaleX(0)}.op-wheel__hint{max-width:260px;overflow:hidden;font-family:var(--op-font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--op-muted);white-space:nowrap;transition:opacity .5s var(--op-ease),max-width .9s var(--op-ease) .2s,margin .9s var(--op-ease) .2s}.op-wheel.is-touched .op-wheel__hint{max-width:0;margin-left:-16px;opacity:0}.op-wheel__page{display:inline-flex;flex:none;align-items:center;gap:10px;height:36px;padding:0 14px 0 5px;border-radius:999px;background:#ffffffb3;box-shadow:inset 0 0 0 1px rgba(var(--op-ink-rgb),.14);color:var(--op-ink);font-size:13px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;transition:background-color .3s var(--op-ease),box-shadow .5s var(--op-ease),transform .5s var(--op-ease)}.op-wheel__page>span:first-child:not(.op-wheel__page-n){margin-left:9px}.op-wheel__page-n{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:999px;background:var(--op-ink);color:#fff;font-family:var(--op-font-mono);font-size:11px;font-weight:500;letter-spacing:.06em}.op-wheel__page-n i{font-style:normal;opacity:.55}.op-wheel__page:after{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;transition:transform .6s var(--op-ease)}@media(hover:hover){.op-wheel__page:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(var(--op-ink-rgb),.3)}.op-wheel__page:hover:after{transform:translate(3px)}}.op-wheel__page.is-nudge{animation:op-wheel-nudge 1.4s var(--op-ease)}@keyframes op-wheel-nudge{0%{box-shadow:inset 0 0 0 1px rgba(var(--op-ink-rgb),.14),0 0 color-mix(in srgb,var(--wh1) 55%,transparent)}25%{transform:translate(5px)}to{transform:none;box-shadow:inset 0 0 0 1px rgba(var(--op-ink-rgb),.14),0 0 0 14px color-mix(in srgb,var(--wh1) 0%,transparent)}}.op-wheel.is-single .op-wheel__stage{cursor:default}.op-wheel.is-single .op-wheel__rail{display:none}@media(max-width:767px){.op-wheel__stage{--op-wheel-h: clamp(320px, 96vw, 430px);border-radius:22px}.op-wheel__panel{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:16px}.op-wheel__name{font-size:clamp(24px,7.2vw,32px);margin:8px 0 12px}.op-wheel__buy{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px}.op-wheel__price{justify-content:flex-start}.op-wheel__ctas{width:100%}.op-wheel__add,.op-wheel__view{flex:1;height:50px}.op-wheel__hint{display:none}.op-wheel__rail{gap:12px}.op-wheel__page{height:34px}}@media(prefers-reduced-motion:reduce){.op-wheel,.op-wheel__face,.op-wheel__foil,.op-wheel__page{animation:none!important}.op-wheel__face{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/op-wheel.css.map */