/* Sealed wrappers, tactile motion and quiet original sound controls. */
.header-actions { gap:9px; }
.sound-button { width:34px; height:34px; display:grid; place-items:center; flex-shrink:0; border:1px solid #3a3542; border-radius:50%; color:#bfb5cd; transition:color .2s,border-color .2s,background .2s; }
.sound-button>span { display:none; }.sound-button .icon { width:15px; height:15px; }
.sound-button:hover { color:#fff; border-color:#bca3d4; background:#2b2333; }
.sound-setting-row { display:flex; align-items:center; justify-content:space-between; padding:16px 0 28px; font-size:13px; color:#d7cae3; }
.sound-switch { height:25px; width:43px; padding:3px; background:#40364a; border:1px solid #6b587b; border-radius:20px; transition:background .2s; }
.sound-switch>span { display:block; height:17px; width:17px; border-radius:50%; background:#aaa0b5; transition:transform .2s; }
.sound-switch[aria-checked=true] { background:#a9d5bd; border-color:#b8e2cd; }.sound-switch[aria-checked=true]>span { background:#203b2e; transform:translateX(16px); }
.volume-label { display:flex; justify-content:space-between; font-size:11px; color:#a99bb6; margin:0 0 17px; }.volume-label output { font-variant-numeric:tabular-nums; }
#sound-volume { width:100%; accent-color:#c4b2e1; height:22px; cursor:pointer; margin:0 0 20px; }
button,a { -webkit-tap-highlight-color:transparent; }
button:not(:disabled):active,.nav-item:active { transform:translateY(1px) scale(.98); }
.pack-card { position:relative; background:radial-gradient(ellipse at 50% 36%,rgba(var(--category-rgb),.095),transparent 65%),#121216; border-color:#37323e; transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .3s; }
.pack-card:hover { transform:translateY(-5px); border-color:rgba(var(--category-rgb),.7); box-shadow:0 14px 26px #0005,0 0 24px rgba(var(--category-rgb),.07); }
.pack-card.selected { border-color:rgba(var(--category-rgb),.65); }.pack-card.selected .selection-dot { background:var(--category-accent); }
.pack-select { padding:17px 17px 18px; }
.pack-top { font-size:10px; color:#baafc2; }
.category-object { height:270px; perspective:900px; }
.object-halo { height:80%; top:10%; background:radial-gradient(ellipse,rgba(var(--category-rgb),.15),transparent 70%); transition:opacity .4s; }
.object-shadow { bottom:10px; left:12%; width:76%; height:12px; filter:blur(9px); }
.pack-wrapper { position:relative; display:block; height:92%; width:auto; aspect-ratio:2/3; flex-shrink:0; transform:rotate(-5deg) translateY(-2px); transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s; filter:drop-shadow(8px 17px 10px #0008); }
.category-product,.category-onepiece .category-product { position:absolute; inset:0; width:100%; height:100%; max-width:100%; object-fit:contain; transform:none; filter:none; animation:none; transition:none; }
.pack-card:hover .category-product { transform:none; }
.pack-card:hover .pack-wrapper { transform:translateY(-8px) rotate(-2deg) rotateY(-9deg) scale(1.035); filter:drop-shadow(10px 22px 11px #0009); }
.foil-glint { position:absolute; inset:0; mask-image:var(--foil-mask); mask-size:contain; mask-repeat:no-repeat; mask-position:center; overflow:hidden; pointer-events:none; border-radius:5px; mix-blend-mode:screen; }
.foil-glint:after { content:''; position:absolute; top:-15%; bottom:-15%; left:-80%; width:35%; background:linear-gradient(90deg,transparent,#ffffff02,#ffffff55,#fff1,transparent); transform:skewX(-22deg); opacity:0; }
.pack-card:hover .foil-glint:after,.buybox-art:hover .foil-glint:after,.confirm-art:hover .foil-glint:after { animation:foil-sweep 1s ease-out both; }
.wrapper-tear { display:none; }
.pack-name { margin-top:5px; font-size:29px; }.pack-caption { color:#a097ad; font-size:10px; }
.pack-card .odds-link { padding:13px 17px; font-size:10px; background:#09090c40; }
.selection-bar { margin-top:21px; background:#151219; }
.buybox-art { height:270px; background:radial-gradient(ellipse at 50% 65%,rgba(var(--category-rgb),.15),transparent 75%),#18141d; }
.buybox-art .category-object { height:255px; width:230px; }.buybox-art .pack-wrapper { height:235px; }
.buybox-art .category-product { width:100%; height:100%; }
.buybox-category { color:#afa2bc; }
.confirm-art .category-object { height:290px; width:230px; }.confirm-art .pack-wrapper { height:270px; }
.ripping-art .category-object { height:295px; width:240px; }.ripping-art { height:310px; }
.ripping-art .category-product { animation:none; }
.ripping-art .pack-wrapper { height:265px; transform:rotate(0); }
.ripping-art.waiting .pack-wrapper { animation:pack-breathe 2.4s ease-in-out infinite; }
.ripping-art.tearing .pack-wrapper { animation:pack-break 1.4s cubic-bezier(.4,0,.2,1) both; }
.tearing .category-product { clip-path:polygon(0 11%,18% 11.8%,34% 10.5%,53% 12%,69% 10.8%,88% 11.6%,100% 11%,100% 100%,0 100%); }
.tearing .wrapper-tear { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; clip-path:polygon(0 0,100% 0,100% 11%,88% 11.6%,69% 10.8%,53% 12%,34% 10.5%,18% 11.8%,0 11%); animation:foil-tear 1.4s cubic-bezier(.2,.7,.3,1) both; }
.tearing .category-object:after { content:''; position:absolute; width:140px; height:170px; left:50%; top:50px; z-index:-1; transform:translateX(-50%); background:radial-gradient(ellipse,#eee2ffb3,transparent 70%); animation:seal-light 1.4s ease-out both; }
.opening-progress:after { animation-duration:1.4s; }
.sealed-card-button { position:relative; width:100%; display:grid; place-items:center; min-height:330px; perspective:1000px; isolation:isolate; margin:3px 0 19px; }
.card-back { width:174px; aspect-ratio:2/3; padding:16px; border-radius:11px; border:5px solid #a5a1b0; background:repeating-linear-gradient(135deg,#1f1b2c 0 2px,#292336 2px 3px,#1f1b2c 3px 7px); outline:1px solid #e0d9eb80; outline-offset:-8px; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; overflow:hidden; box-shadow:0 18px 40px #0009; transform:rotate(-4deg); animation:card-rise .65s cubic-bezier(.16,1,.3,1) both; transition:transform .35s,box-shadow .35s; }
.card-back:after { content:''; position:absolute; inset:0; background:linear-gradient(125deg,transparent 30%,#ded5f725 49%,transparent 65%); }
.card-back-mark { width:45px; height:45px; color:#cbb9eb; margin:0 0 11px; }.card-back strong { font:700 italic 32px/.9 var(--display); letter-spacing:-1px; color:#eee6fa; text-align:center; }
.card-back-corner { position:absolute; top:12px; left:12px; font:500 9px var(--display); color:#9b8cae; }.card-back-bottom { position:absolute; bottom:18px; font:500 6px var(--body); letter-spacing:1.5px; color:#c1b1d7; }
.card-back-glow { position:absolute; width:230px; height:300px; z-index:-1; background:radial-gradient(ellipse,rgba(var(--category-rgb),.3),transparent 70%); }
.sealed-card-button:hover .card-back { transform:rotate(0) translateY(-6px) rotateY(-8deg); box-shadow:0 24px 40px #000b,0 0 30px rgba(var(--category-rgb),.15); }
dialog[data-scene=result] .reveal-art { overflow:visible; border-color:#87709c; box-shadow:0 0 30px #b49bd216; }
dialog[data-scene=result] .reveal-art:before { content:''; position:absolute; width:92%; height:92%; border:1px solid #d8c9f0; border-radius:50%; opacity:0; animation:reveal-ring .75s ease-out both; }
.reveal-art>img { transform:none; animation:none; }.result-actions .button { transition:background .2s,transform .2s,box-shadow .2s; }
.pool-card,.hit-card,.queue-item,.podium-place { transition:transform .25s,border-color .25s,box-shadow .25s; }
.pool-card:hover,.hit-card:hover { transform:translateY(-4px); box-shadow:0 12px 22px #0005; }
.category-tabs>button,.pack-price-rail>button,.segmented>button { transition:background .2s,color .2s,border-color .2s,transform .2s; }
.category-tabs>button:hover,.pack-price-rail>button:hover { background:#30283b; color:#f5ecff; }
.tap-ring { position:fixed; z-index:1000; width:16px; height:16px; border:1px solid #e6dcfa8f; border-radius:50%; pointer-events:none; animation:tap-expand .42s ease-out both; }
/* Dialogs live in the top layer; their pulse needs to remain in that same layer. */
dialog .tap-ring { position:fixed; }
.replay-opening img { width:115px; height:175px; object-fit:contain; }
@keyframes foil-sweep { 0% {left:-80%;opacity:0;} 15% {opacity:.8;} 100% {left:150%;opacity:0;} }
@keyframes pack-breathe { 50% { transform:translateY(-6px) rotate(1.5deg); } }
@keyframes pack-break { 0% {transform:scale(.95) rotate(-4deg);} 15% {transform:scale(1) rotate(4deg);} 28% {transform:rotate(-3deg);} 41% {transform:rotate(3deg);} 56% {transform:rotate(0) scale(1.08);} 78% {transform:translateY(12px) scale(1.05);} 100% {transform:translateY(70px) scale(.82);opacity:0;} }
@keyframes foil-tear { 0%,40% {transform:translate(0,0) rotate(0);opacity:1;} 65% {transform:translate(45px,-45px) rotate(24deg);} 100% {transform:translate(95px,-85px) rotate(48deg);opacity:0;} }
@keyframes seal-light { 0%,35% {opacity:0;transform:translateX(-50%) scale(.3);} 65% {opacity:.9;transform:translateX(-50%) scale(1.5);} 100% {opacity:0;transform:translateX(-50%) scale(1.8);} }
@keyframes card-rise { from {opacity:0;transform:translateY(65px) rotate(-12deg) rotateY(35deg) scale(.8);} to {opacity:1;transform:translateY(0) rotate(-4deg) rotateY(0) scale(1);} }
@keyframes reveal-ring { from {opacity:.45;transform:scale(.6);} to {opacity:0;transform:scale(1.4);} }
@keyframes tap-expand { from {opacity:.65;transform:translate(-50%,-50%) scale(.4);} to {opacity:0;transform:translate(-50%,-50%) scale(3);} }
@media(max-width:1200px) { .header { gap:22px; }.header nav { gap:19px; }.category-object { height:235px; }.pack-select { padding:15px 13px; }.pack-top { font-size:9px; }.pack-card .odds-link { padding:12px 13px; } }
@media(max-width:1000px) { .header-actions .balance-button { display:none; }.category-object { height:215px; }.buybox-art .category-object { height:245px; }.buybox-art .pack-wrapper { height:225px; } }
@media(max-width:800px) { .buybox-art { height:auto;min-height:275px; }.buybox-art .category-object { width:100%;height:270px; }.buybox-art .pack-wrapper { height:245px; }.category-object { height:240px; } }
@media(max-width:600px) { .header { column-gap:8px; }.header-actions { gap:7px; }.sound-button { width:29px;height:29px; }.sound-button .icon { width:13px;height:13px; }.pack-select { padding:12px 11px 14px; }.pack-top { font-size:8px; }.category-object { height:220px; }.pack-wrapper { height:94%; }.pack-name { font-size:27px; }.pack-caption { font-size:8px; }.pack-card .odds-link { font-size:9px;padding:11px; }.pack-card:hover { transform:none; }.buybox-art { height:auto;min-height:235px; }.buybox-art .category-object { width:105px;height:190px; }.buybox-art .pack-wrapper { height:168px; }.buybox-art .category-product { height:100%;width:100%; }.buybox-category { font-size:5px; }.sealed-card-button { min-height:300px; }.card-back { width:160px; }.confirm-art .category-object { height:255px; }.confirm-art .pack-wrapper { height:245px; }.ripping-art .category-object { height:280px; }.ripping-art .pack-wrapper { height:250px; }.ripping-art { height:290px; }.pool-card:hover,.hit-card:hover { transform:none; } }
@media(max-width:360px) { .header .brand-word { font-size:14px; }.header .brand {gap:5px;}.header .brand-mark,.header .brand-mark svg {width:24px;}.header-actions {gap:4px;}.header .live-wallet-button {padding:8px 7px;}.category-object {height:185px;}.pack-caption {font-size:7px;}.buybox-art .category-object {width:88px;height:170px;}.buybox-art .pack-wrapper {height:145px;}.pack-name {font-size:24px;} }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after {scroll-behavior:auto!important;} .pack-wrapper,.card-back,.foil-glint:after,.wrapper-tear,.ripping-art .pack-wrapper,.tearing .category-object:after,dialog[data-scene=result] .reveal-art:before,.tap-ring {animation:none!important;transition:none!important;}.pack-card:hover,.pool-card:hover,.hit-card:hover,.pack-card:hover .pack-wrapper,.sealed-card-button:hover .card-back {transform:none;}.tearing .category-product {clip-path:none;}.tearing .wrapper-tear,.tearing .category-object:after {display:none;} }

.pack-buybox .buybox-demo { font-size:11px; min-height:42px; color:#bcabd1; }
.pack-buybox .buybox-demo:hover { color:#f1e8ff; }