/* RNF collectible demo. Brand colours stay black/white; light creates the foil. */
.rnf-unboxing{margin:25px -10px 32px;padding:32px 28px 0;border:1px solid #454545;border-radius:24px;color:#fff;background:radial-gradient(ellipse at 50% 42%,#3b3c42 0,transparent 62%),#080808;isolation:isolate;overflow:hidden;position:relative}
.rnf-unboxing:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(112deg,transparent 0 60px,#ffffff03 61px 62px)}
.rnf-unboxing__heading{text-align:center;max-width:620px;margin:0 auto}
.rnf-unboxing__heading>span,.rnf-album__heading>div>span{font-size:9px;letter-spacing:.2em;color:#aaa;text-transform:uppercase}
.rnf-unboxing__heading h2{font-size:clamp(30px,3.2vw,45px);letter-spacing:-.055em;line-height:1.05;font-weight:800;margin:13px 0}
.rnf-unboxing__heading p{font-size:12px;color:#b5b5b8;line-height:1.6;margin:0}
.rnf-unboxing__demo{text-align:center;font-size:9px;color:#a7a7aa;margin:20px 0 0}
.rnf-case-intro{display:grid;justify-items:center;padding:14px 0 35px;perspective:1200px}
.rnf-case{position:relative;width:min(100%,370px);aspect-ratio:1.16;border:0;background:transparent;padding:0;color:#fff;isolation:isolate;perspective:1000px}
.rnf-case__base,.rnf-case__lid{position:absolute;inset:16% 8% 28%;border-radius:10px;transform:rotateX(22deg) rotateY(-15deg) rotateZ(-6deg);border:1px solid #626262;background:linear-gradient(145deg,#4b4b4b,#111 45%,#050505);box-shadow:18px 34px 24px #0009,0 1px 0 #ffffff80 inset}
.rnf-case__base{translate:0 18px;background:linear-gradient(120deg,#191919,#030303);box-shadow:16px 30px 25px #0009}
.rnf-case__lid{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.rnf-case__lid:after{content:'';position:absolute;inset:10px;border:1px solid #ffffff12;border-radius:4px}
.rnf-case__lid img{width:55%;height:auto;filter:brightness(0) invert(1)}
.rnf-case__lid>span{font-size:6px;letter-spacing:.25em;color:#aaa;text-transform:uppercase}
.rnf-case__action{position:absolute;inset:auto 0 1%;margin:auto;width:max-content;max-width:100%;border:1px solid #fff5;border-radius:30px;padding:12px 22px;background:linear-gradient(120deg,#ffffff25,#ffffff06);backdrop-filter:blur(12px);display:flex;gap:24px;align-items:center;font-size:12px}
.rnf-case-intro__hint{font-size:10px;letter-spacing:.05em;color:#888;margin-top:16px;text-align:center}
.rnf-pack-stage{padding-top:28px}
.rnf-unboxing .rnf-box-demo__grid{gap:22px;padding:10px 7px 25px;align-items:center}
.rnf-pack{--foil-x:35%;--foil-y:25%;position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:.61;border:1px solid #b5b8ba;border-radius:2px;background:conic-gradient(from 35deg at var(--foil-x) var(--foil-y),#d1d1db,#a4c4ca,#eff0da,#cdbaca,#d4dce9,#f2e6d0,#c0d9d8,#bfc0d1,#d1d1db);padding:15px 10px;color:#101010!important;box-shadow:8px 16px 20px #0008,inset 3px 0 5px #fff,inset -3px 0 5px #0006;transform:rotate(-4deg);transition:transform .45s cubic-bezier(.16,.8,.3,1),box-shadow .3s}
.rnf-pack:nth-child(2){transform:rotate(2deg);--foil-x:64%;--foil-y:38%}
.rnf-pack:nth-child(3){transform:rotate(-2deg);--foil-x:44%;--foil-y:68%}
.rnf-pack:nth-child(4){transform:rotate(4deg);--foil-x:75%;--foil-y:20%}
.rnf-pack:before,.rnf-pack:after{content:'';pointer-events:none;position:absolute;inset:0;z-index:-1}
.rnf-pack:before{background:linear-gradient(92deg,#fff 0,transparent 4%,#0005 7%,#fff9 10%,transparent 18%,#fff4 45%,transparent 81%,#fff 92%,#0008 97%,#fff 100%);mix-blend-mode:soft-light}
.rnf-pack:after{background:repeating-linear-gradient(164deg,transparent 0 28px,#ffffff18 29px,transparent 31px 48px),radial-gradient(ellipse at var(--foil-x) var(--foil-y),#ffffffb0,transparent 44%);opacity:.9}
.rnf-pack__seal,.rnf-pack__seal:after{position:absolute;inset:0 0 auto;height:5.7%;background:repeating-linear-gradient(0deg,#1117 0 1px,#fff7 1px 2px,transparent 2px 3px);border-block:1px solid #fff9;box-shadow:0 2px 4px #3335}
.rnf-pack__seal:after{content:'';top:auto;bottom:0;transform:translateY(calc(100% * 16.5));height:100%;width:100%}
.rnf-pack__face{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:11px 0 9px}
.rnf-pack__number{font-size:7px;letter-spacing:.12em;align-self:flex-start;border-bottom:1px solid #0004;width:100%;text-align:start;padding-bottom:8px}
.rnf-pack__face>img{width:72%;height:auto;filter:brightness(0);max-width:120px;margin-top:12px}
.rnf-pack__face>strong{font-size:clamp(16px,2vw,29px);font-stretch:condensed;font-weight:900;letter-spacing:-.065em;line-height:.98;margin:14px -5px;text-align:center;overflow-wrap:anywhere;max-width:110%;text-transform:uppercase}
.rnf-pack__footer{font-size:7px;line-height:1.4;max-width:95%;display:flex;flex-direction:column;gap:9px;align-items:center}
.rnf-pack__barcode{width:37px;height:9px;background:repeating-linear-gradient(90deg,#111 0 1px,transparent 1px 3px,#111 3px 6px,transparent 6px 8px,#111 8px 9px,transparent 9px 11px)}
.rnf-pack__tick{display:grid;place-items:center;position:absolute;inset:auto -7px -9px auto;width:27px;height:27px;background:#fff;border:1px solid #222;color:#111;border-radius:50%;opacity:0;transform:scale(.5);transition:opacity .25s,transform .25s;font-size:12px}
.rnf-pack[aria-pressed=true]{transform:translateY(-10px) rotate(0);box-shadow:0 0 0 2px #fff,0 0 35px #e8e8ff36,8px 16px 20px #000a}
.rnf-pack[aria-pressed=true] .rnf-pack__tick{opacity:1;transform:scale(1)}
.rnf-pack:disabled{cursor:default}
.rnf-pack:disabled:not([aria-pressed=true]){filter:saturate(.2);opacity:.42}
.rnf-pack.is-open .rnf-pack__seal,.rnf-pack:disabled[aria-pressed=true] .rnf-pack__seal{transform:translateY(-8px) rotate(-5deg);transition:transform .6s}
.rnf-unboxing .rnf-box-demo__status{color:#bbb;margin:10px 0;font-size:11px}
.rnf-unboxing .rnf-portal__primary,.rnf-unboxing .rnf-demo-reset{background:#f5f5f5;color:#080808!important;min-height:48px;border-radius:50px;font-size:11px;padding:13px 22px;box-shadow:0 1px 0 #fff inset}
.rnf-unboxing .rnf-box-demo__actions{margin:10px 0 24px}
.rnf-unboxing__album{display:flex;align-items:center;width:calc(100% + 56px);gap:15px;margin:0 -28px;border:0;border-top:1px solid #fff2;background:#ffffff09;padding:18px 25px;font-size:12px!important;text-align:start;color:#e7e7e7!important}
.rnf-unboxing__album>span:first-child{margin-inline-start:auto;font-size:11px;font-variant-numeric:tabular-nums;color:#aaa}
.rnf-unboxing .rnf-box-results{gap:22px;max-width:660px;margin:auto;padding:12px 0 28px;grid-template-columns:repeat(2,minmax(0,1fr))}
.rnf-unboxing .rnf-result{border:0;border-radius:0;padding:0;background:none;color:#eee;overflow:visible}
.rnf-unboxing .rnf-result.is-chosen .rnf-result__state{color:#bbb;font-size:9px}
.rnf-unboxing .rnf-result__hint{color:#aaa;font-size:10px}
.rnf-unboxing .rnf-result label{color:#bbb;font-size:11px;margin-top:15px}
.rnf-unboxing .rnf-result select{background:#fff1;border:1px solid #fff4;color:#fff}
.rnf-unboxing .rnf-result option{background:#111;color:#fff}
.rnf-collectible{--foil-x:30%;--foil-y:25%;position:relative;isolation:isolate;width:100%;aspect-ratio:.67;display:flex;flex-direction:column;padding:13px;border-radius:16px;overflow:hidden;color:#101010;background:conic-gradient(from 30deg at var(--foil-x) var(--foil-y),#d4dae3,#c8e3df,#e7e2d3,#e2cee5,#cbdbed,#e4e4d2,#d4dae3);border:1px solid #f3f3f3;box-shadow:inset 0 0 0 4px #fff6,inset 0 0 0 6px #5553,0 18px 25px #0003;text-align:start;container-type:inline-size}
.rnf-collectible:before{content:'';pointer-events:none;position:absolute;inset:7px;border:1px solid #fff8;border-radius:9px;z-index:4;background:radial-gradient(ellipse at var(--foil-x) var(--foil-y),#fff5,transparent 47%),repeating-linear-gradient(125deg,#ffffff08 0 1px,transparent 1px 4px);mix-blend-mode:screen}
.rnf-collectible:after{content:'';pointer-events:none;position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 12%,#fff9 18%,transparent 23%,transparent 65%,#fff9 70%,transparent 75%);opacity:.6}
.rnf-collectible__top{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 5px 10px;color:#111;min-height:32px}
.rnf-collectible__top img{width:33%;max-width:85px;height:auto;filter:brightness(0)}
.rnf-collectible__top>span{font-size:10px;font-weight:700;letter-spacing:.08em}
.rnf-collectible__art{position:relative;flex:1;min-height:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#fff,#eceeed);border-radius:8px;border:1px solid #5e626340;overflow:hidden}
.rnf-collectible__art:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 15%,#fff5 30%,transparent 45%,#e1e8ef20 60%,transparent 70%);pointer-events:none}
.rnf-collectible__art img{display:block;max-width:100%;width:100%;height:100%;max-height:290px;object-fit:contain;mix-blend-mode:multiply}
.rnf-collectible__body{padding:12px 4px 4px}
.rnf-collectible__body h3{font-size:clamp(13px,7cqw,23px);line-height:1.08;letter-spacing:-.045em;font-weight:800;margin:0 0 7px}
.rnf-collectible__serial{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-variant-numeric:tabular-nums;border-top:1px solid #1113;padding-top:7px;font-size:9px;direction:ltr}
.rnf-collectible__serial small{font-size:7px;line-height:1.35;color:#444;max-width:50%}
.rnf-collectible__footer{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-top:8px;font-size:7px;letter-spacing:.06em;text-transform:uppercase;color:#494949}
.rnf-collectible__footer:after{content:'';width:25px;height:9px;flex-shrink:0;background:repeating-conic-gradient(#111 0% 25%,transparent 0% 50%) 50% / 6px 6px;transform:skew(-15deg)}
.rnf-album{padding-bottom:25px}
.rnf-album__heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:35px 0 20px}
.rnf-album__heading>div>span{color:#737373;font-size:9px}
.rnf-album__heading h2{font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.05em;margin:10px 0 12px}
.rnf-album__heading p{font-size:12px;color:#666;max-width:430px;line-height:1.6;margin:0}
.rnf-album__heading>strong{font-size:38px;font-weight:500;letter-spacing:-.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.rnf-album__progress{appearance:none;display:block;height:4px;width:100%;border:0;border-radius:10px;background:#ddd;overflow:hidden;color:#111}
.rnf-album__progress::-webkit-progress-bar{background:#ddd}.rnf-album__progress::-webkit-progress-value{background:#111;transition:width .8s}.rnf-album__progress::-moz-progress-bar{background:#111}
.rnf-album__toolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:14px 0 23px;font-size:10px;color:#6a6a6a}
.rnf-album__toolbar button{border:0;background:transparent;color:#111;font-size:11px;min-height:44px;white-space:nowrap}
.rnf-album__empty{font-size:12px;line-height:1.6;background:#ededed;padding:18px;border-radius:12px}
.rnf-album__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:22px;background:linear-gradient(135deg,#ebebec,#dedfe0);box-shadow:inset 0 0 0 1px #1111;border-radius:18px;margin:0 0 22px}
.rnf-album-slot{min-width:0;position:relative;aspect-ratio:.67;border-radius:14px}
.rnf-album-slot>button{display:block;padding:0;width:100%;height:100%;border:0;background:transparent;border-radius:14px;text-align:start;cursor:zoom-in}
.rnf-album-slot.is-locked{display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:20px 13px;color:#888;background:linear-gradient(145deg,#ffffff5c,#ffffff18);border:1px solid #fff9;box-shadow:inset 0 0 0 4px #00000002}
.rnf-album-slot.is-locked:before{content:'';position:absolute;inset:7px;border:1px dashed #a9aaab80;border-radius:8px;pointer-events:none}
.rnf-album-slot.is-locked>span:first-child{font-size:15px;letter-spacing:.1em;align-self:flex-start;color:#aaa;font-variant-numeric:tabular-nums}
.rnf-album-slot.is-locked h3{font-size:14px;line-height:1.15;letter-spacing:-.03em;margin:0;color:#8e9091}
.rnf-album-slot.is-locked p{font-size:9px;margin:4px 0;color:#96989a}
.rnf-album-slot__locked{font-size:9px;color:#96989a}
.rnf-album-slot__placeholder{font-size:40px;color:#bec0c1;font-weight:900;letter-spacing:-.08em;font-style:italic;opacity:.5}
.rnf-album__reset{font-size:10px!important;color:#666!important;background:none;border:0;border-bottom:1px solid #888;padding:10px 0;min-height:44px}
.rnf-card-dialog{width:min(calc(100% - 32px),480px);max-height:90svh;margin:auto;padding:45px 22px 22px;border:1px solid #fff4;border-radius:24px;background:#101012;overflow:auto;color:#fff;box-shadow:0 24px 80px #0008;color-scheme:dark}
.rnf-card-dialog::backdrop{background:#000b;backdrop-filter:blur(10px)}
.rnf-card-dialog__close{position:absolute;right:10px;top:7px;border:0;background:transparent;font-size:27px!important;width:40px;height:36px;color:#eee}
.rnf-card-dialog .rnf-collectible{max-width:330px;margin:auto;box-shadow:0 10px 50px #0008}
.rnf-card-dialog .rnf-result{background:none;border:0;padding:0;color:#fff}.rnf-card-dialog .rnf-result__hint{color:#aaa}
.rnf-card-dialog .rnf-result label{color:#bbb;margin-top:20px}
@media(hover:hover){.rnf-case:hover .rnf-case__lid{transform:rotateX(18deg) rotateY(-10deg) rotateZ(-4deg) translateY(-9px)}.rnf-pack:not(:disabled):hover{transform:translateY(-12px) rotate(0);box-shadow:0 8px 35px #c9ccd930}.rnf-album-slot>button:hover{transform:translateY(-5px) rotate(-1deg);transition:transform .3s}}
@media(prefers-reduced-motion:no-preference){.rnf-pack-stage .rnf-pack{animation:rnf-pack-enter .7s cubic-bezier(.17,.85,.2,1) both}.rnf-pack-stage .rnf-pack:nth-child(2){animation-delay:.07s}.rnf-pack-stage .rnf-pack:nth-child(3){animation-delay:.14s}.rnf-pack-stage .rnf-pack:nth-child(4){animation-delay:.21s}.rnf-result .rnf-collectible{animation:rnf-card-unwrap .9s cubic-bezier(.16,.8,.2,1) both}.rnf-result:nth-child(2) .rnf-collectible{animation-delay:.14s}.rnf-album-slot.is-new{animation:rnf-card-stick .6s both}}
@keyframes rnf-pack-enter{from{opacity:0;translate:0 28px;scale:.9}to{opacity:1;translate:0 0;scale:1}}
@keyframes rnf-card-unwrap{from{opacity:0;transform:perspective(800px) rotateY(-25deg) translateY(35px) scale(.9);filter:brightness(1.8)}to{opacity:1;transform:none;filter:none}}
@keyframes rnf-card-stick{from{opacity:.4;transform:translateY(-12px) scale(1.03)}to{opacity:1;transform:none}}
@media(max-width:1099px){.rnf-unboxing{padding-inline:20px}.rnf-unboxing__album{width:calc(100% + 40px);margin-inline:-20px}.rnf-unboxing .rnf-box-demo__grid{gap:15px}.rnf-album__grid{gap:14px;padding:16px}.rnf-pack__face>strong{font-size:24px}.rnf-collectible{padding:10px}.rnf-collectible__serial{font-size:8px}}
@media(max-width:749px){.rnf-portal__navigation{flex-wrap:wrap}.rnf-portal__navigation>button,.rnf-portal__navigation>a{flex:1 1 20%;font-size:9px;gap:4px}.rnf-portal__navigation svg{width:14px;height:14px}.rnf-unboxing{margin:20px -10px 20px;padding:27px 15px 0;border-radius:18px}.rnf-unboxing__heading h2{font-size:31px}.rnf-unboxing__heading>span{font-size:8px}.rnf-unboxing__heading p{font-size:11px}.rnf-unboxing__demo{font-size:8px;line-height:1.5;margin:17px 10px 0}.rnf-case-intro{padding:8px 0 26px}.rnf-case{max-width:290px}.rnf-case__action{font-size:11px;padding:12px 18px}.rnf-case-intro__hint{font-size:8px}.rnf-pack-stage{padding-top:24px}.rnf-unboxing .rnf-box-demo__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 22px;padding:5px 11px 17px}.rnf-pack{aspect-ratio:.63;padding:12px 9px}.rnf-pack__face{padding:9px 0 8px}.rnf-pack__face>strong{font-size:24px;margin-block:10px}.rnf-pack__face>img{margin-top:10px}.rnf-pack__number{font-size:6px;padding-bottom:5px}.rnf-pack__footer{font-size:6px;gap:6px}.rnf-pack__tick{width:23px;height:23px}.rnf-unboxing .rnf-box-demo__status{font-size:10px;line-height:1.7;margin:12px 4px;min-height:20px}.rnf-unboxing .rnf-box-demo__actions{margin:14px 0 22px}.rnf-unboxing .rnf-portal__primary{width:auto;min-width:180px;font-size:11px}.rnf-unboxing__album{width:calc(100% + 30px);margin-inline:-15px;padding:16px;font-size:11px!important}.rnf-unboxing .rnf-box-results{grid-template-columns:1fr;max-width:290px;gap:28px}.rnf-collectible{padding:13px}.rnf-collectible__art img{max-height:280px}.rnf-album__heading{align-items:start;gap:14px;padding-top:24px;flex-direction:column}.rnf-album__heading h2{font-size:30px}.rnf-album__heading p{font-size:11px}.rnf-album__heading>strong{font-size:31px}.rnf-album__toolbar{gap:9px;font-size:9px}.rnf-album__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 10px;padding:10px;margin-inline:-7px;border-radius:12px}.rnf-album-slot.is-locked{padding:13px 8px}.rnf-album-slot.is-locked h3{font-size:11px}.rnf-album-slot.is-locked p{font-size:8px}.rnf-album-slot.is-locked>span:first-child{font-size:11px}.rnf-album-slot .rnf-collectible{padding:7px;border-radius:10px}.rnf-album-slot .rnf-collectible:before{inset:4px;border-radius:5px}.rnf-album-slot .rnf-collectible__top{padding:3px 2px 6px;min-height:22px}.rnf-album-slot .rnf-collectible__top>span{font-size:8px}.rnf-album-slot .rnf-collectible__body{padding:7px 2px 2px}.rnf-album-slot .rnf-collectible__body h3{font-size:12px;margin-bottom:4px}.rnf-album-slot .rnf-collectible__serial{font-size:6px;gap:2px;flex-wrap:wrap;padding-top:4px}.rnf-album-slot .rnf-collectible__serial small{font-size:5px;max-width:100%}.rnf-album-slot .rnf-collectible__footer{font-size:5px;margin-top:5px;letter-spacing:0}.rnf-album-slot .rnf-collectible__footer:after{width:15px;height:6px;background-size:4px 4px}.rnf-album-slot__placeholder{font-size:28px}.rnf-card-dialog{padding:45px 18px 20px}.rnf-card-dialog .rnf-collectible{max-width:300px}.rnf-album__reset{font-size:10px!important}}
@media(max-width:360px){.rnf-pack__face>strong{font-size:20px}.rnf-unboxing .rnf-box-demo__grid{gap:20px 17px;padding-inline:5px}.rnf-portal__navigation svg{display:none}.rnf-pack__footer{font-size:5px}}
@media(prefers-reduced-motion:reduce){.rnf-pack,.rnf-collectible,.rnf-result,.rnf-album-slot,.rnf-case__lid{animation:none!important;transition:none!important}.rnf-pack:hover,.rnf-album-slot>button:hover{transform:none}}