:root{--bg:#08060d;--surface:#14101d;--surface2:#21172e;--line:#332443;--text:#faf8ff;--muted:#b4aabd;--accent:#b477ff;--primary:#8036ed;--primary-hover:#8b42ee;--highlight:#d3afff;--font:'Alexandria',sans-serif;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.8 var(--font);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}.announcement{padding:9px 48px;background:#1b102b;border-bottom:1px solid #39244f;color:#eee6f5;display:flex;justify-content:space-between;font-size:11px}.announcement>span:first-child{display:flex;align-items:center;gap:8px}.announcement svg{width:14px;height:14px;color:var(--highlight)}.announcement-note{color:#bea7d2}.dot-divider{padding:0 16px;color:#9b82b0}.header{background:var(--bg)}.header-main{display:flex;align-items:center;justify-content:space-between;gap:45px;height:140px}.brand{display:flex;align-items:center;flex-shrink:0}.brand img{display:block;width:124px;height:124px;object-fit:contain;mix-blend-mode:screen}.search{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 17px;max-width:550px;flex:1;color:var(--muted)}.search svg{width:19px}.search input{min-width:0;width:100%;border:0;background:none;outline:0;color:var(--text);font-size:11px}.search:focus-within{border-color:var(--accent)}.search kbd{border:1px solid #4e3563;border-radius:4px;padding:0 6px}.header-actions{display:flex;align-items:center;gap:18px}.icon-button{border:0;background:transparent;padding:8px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px}.icon-button:hover{background:var(--surface2)}.icon-button[aria-pressed=true]{color:var(--accent)}.vertical-line{height:26px;width:1px;background:var(--line)}.cart-button{display:flex;align-items:center;gap:10px;background:transparent;border:0;font-size:12px;white-space:nowrap}.cart-button b{background:var(--primary);color:var(--text);font-size:11px;min-width:21px;height:21px;display:grid;place-content:center;border-radius:50%}.nav{display:flex;justify-content:space-between;align-items:center;height:55px;border-top:1px solid var(--line);font-size:11px}.nav-links{display:flex;gap:33px;height:100%;align-items:center}.nav-links a{color:#d2bfe3;height:100%;display:flex;align-items:center;position:relative}.nav-links a:hover,.nav-links .nav-active{color:var(--accent)}.nav-active:after{content:'';position:absolute;bottom:0;inset-inline-start:0;inset-inline-end:0;height:2px;background:var(--accent)}.support-link{display:flex;gap:9px;align-items:center;color:#d6c5e4}.support-link svg{width:17px;margin-inline-start:9px}.support-link .status-dot{background:#4ade80;box-shadow:0 0 8px #4ade8040}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--highlight);box-shadow:0 0 8px #d3afff25}.hero{margin-top:21px;position:relative;min-height:486px;isolation:isolate;border:1px solid #39244f;border-radius:14px;overflow:hidden;background:#23152f}.hero-art{position:absolute;inset:0 38% 0 0;background-image:linear-gradient(0deg,#08060d80,transparent 45%),url('assets/reference-banner.webp');background-size:auto 100%;background-position:left center;z-index:-3}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(270deg,#14101d 0%,#14101d 35%,#14101de8 43%,#14101d50 62%,transparent 77%);z-index:-2}.hero-grain{position:absolute;inset:0;z-index:-1;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.3' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.hero-content{padding:45px 47px 35px;max-width:610px}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:#efe8f6;font-size:11px;border:1px solid #5f4378;border-radius:25px;padding:5px 11px;background:#331f44a0}h1{font-size:clamp(40px,4.4vw,64px);line-height:1.4;letter-spacing:-2.5px;margin:20px 0 12px;font-weight:800}h1>span{color:var(--accent)}.hero-content>p{color:#c7b5d6;font-size:14px;line-height:2.1;margin-bottom:24px}.hero-actions{display:flex;gap:23px;align-items:center}.button{display:inline-flex;justify-content:center;align-items:center;gap:22px;padding:14px 23px;border:0;border-radius:7px;font-size:11px;font-weight:600;transition:background .2s,transform .2s}.button:hover{transform:translateY(-2px)}.primary{background:var(--primary);color:var(--text)}.primary:hover{background:var(--primary-hover)}.button svg{width:19px}.hero-secondary{font-size:11px;display:flex;gap:12px;align-items:center}.hero-secondary span{font-size:18px}.hero-bottom{display:flex;align-items:center;gap:12px;margin-top:30px}.tiny-avatars{display:flex;padding-inline-end:7px;direction:ltr}.tiny-avatars img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid #291837;margin-inline-start:-7px}.hero-bottom b{display:block;font-size:11px;font-weight:500}.hero-bottom small{display:block;font-size:11px;color:#b89fcd}.hero-stars{font-size:11px;color:var(--highlight);letter-spacing:2px;align-self:flex-start}.floating-game{position:absolute;bottom:43px;inset-inline-end:32px;display:flex;align-items:center;gap:15px;padding:15px 17px;background:#231530dd;backdrop-filter:blur(14px);border:1px solid #a883c850;border-radius:10px;min-width:295px}.floating-game>img{width:62px;height:67px;object-fit:cover;border-radius:6px}.floating-game b{display:block;font:700 18px Arial,sans-serif;margin:5px 0}.floating-game small{font-size:11px;color:#d3c1e2}.available{font-size:11px;color:var(--highlight);display:flex;align-items:center;gap:5px}.round-arrow{border:1px solid #654681;border-radius:50%;width:35px;height:35px;background:#3e2553;display:grid;place-content:center;margin-inline-start:18px;color:var(--highlight)}.round-arrow svg{width:17px}.hero-edition{position:absolute;inset-inline-end:32px;bottom:15px;font:11px Arial,sans-serif;letter-spacing:2px;color:#d9c6ea9c}.trust{display:grid;grid-template-columns:repeat(4,1fr);padding:29px 10px 31px;border-bottom:1px solid var(--line)}.trust>div{display:flex;gap:13px;justify-content:center;align-items:center;border-inline-end:1px solid var(--line)}.trust>div:last-child{border:0}.trust-icon{display:grid;place-content:center;width:39px;height:39px;border-radius:50%;background:#321e43;color:#d3afff}.trust-icon svg{width:20px}.trust b{display:block;font-size:11px;font-weight:500}.trust small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.catalog{padding-top:55px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.section-kicker{font-size:11px;color:var(--accent);font-weight:500;display:block;margin-bottom:8px}h2{font-size:28px;line-height:1.6;letter-spacing:-1px;margin:0;font-weight:700}h2>span{color:#bba5cf;font-weight:400}.catalog-note{font-size:11px;display:flex;align-items:center;gap:7px;color:var(--muted)}.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:20px;gap:16px}.filters{display:flex;gap:8px}.filters button{display:flex;gap:8px;align-items:center;padding:10px 13px;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:11px;white-space:nowrap;color:#c4afd6}.filters button svg{width:16px;height:16px}.filters button.active{background:var(--primary);border-color:var(--primary);color:var(--text)}.filters button span{font:11px Arial;background:#0002;padding:3px 5px;border-radius:4px}.sort-label{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:11px;white-space:nowrap}.sort-label select{background:var(--bg);color:#ddd;border:0;padding:8px;font-size:11px;max-width:140px}.results-line{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;padding:15px 0}.results-line button{background:transparent;border:0;color:var(--accent);font-size:11px}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:21px}.product-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .2s,border-color .2s}.product-card:hover{transform:translateY(-5px);border-color:#8b66ac}.product-art{position:relative;height:210px;overflow:hidden;background:#2c1b3b}.product-art>a{display:block;height:100%}.product-art img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.product-card:hover .product-art img{transform:scale(1.05)}.product-art:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#1d112777);pointer-events:none}.product-tag{position:absolute;inset-inline-start:12px;top:12px;padding:4px 8px;border-radius:4px;font-size:11px;background:#21142de8;color:#f2ecf8;z-index:1;border:1px solid #ffffff18}.product-tag.hot{color:#190b29;background:var(--highlight)}.favorite{position:absolute;inset-inline-end:11px;top:11px;width:30px;height:30px;background:#11091ecc;border:1px solid #ffffff25;border-radius:50%;display:grid;place-content:center;z-index:1}.favorite svg{width:15px;height:15px}.favorite[aria-pressed=true]{color:var(--accent)}.favorite[aria-pressed=true] svg{fill:var(--accent)}.product-content{padding:17px}.product-kind{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:5px}.product-kind .status-dot{width:4px;height:4px;box-shadow:none}.product-title{direction:ltr;text-align:right;margin:0;font:600 17px/1.5 Arial,sans-serif;min-height:26px;letter-spacing:.1px}.product-description{font-size:14px;color:#bca5d0;margin:5px 0 17px}.product-bottom{border-top:1px solid var(--line);padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:8px}.product-price{font-size:11px;color:var(--muted)}.product-price strong{font:700 19px Arial,sans-serif;color:var(--text);margin:0 4px}.product-buy{font-size:11px;background:#2b1642;border:1px solid #5d4472;border-radius:5px;padding:7px 10px;display:flex;align-items:center;gap:10px;color:#e2d3ee}.product-buy:hover{background:var(--primary);border-color:var(--primary);color:var(--text)}.product-buy svg{width:14px;height:14px}.light{background:#f5f0f9;color:#301d40}.how{margin-top:56px}.how .section-heading>p{font-size:14px;color:var(--muted)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;padding:10px 0 65px}.steps article{position:relative;border-top:1px solid var(--line);padding-top:25px}.step-number{position:absolute;inset-inline-end:0;top:15px;color:#7a5a96;font:600 48px Arial,sans-serif}.steps article>svg{color:var(--accent);width:29px;height:29px}.steps h3{font-size:14px;margin:18px 0 7px}.steps p{font-size:14px;color:var(--muted);line-height:2}.empty{text-align:center;padding:60px 0}.empty>svg{width:40px;height:40px;color:var(--muted)}footer{background:#0d0913;border-top:1px solid var(--line)}.footer-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:35px;padding-top:43px;padding-bottom:35px}.footer-main .brand img{width:140px;height:140px}.footer-main p{font-size:14px;color:var(--muted);line-height:2}.footer-links{display:flex;flex-direction:column;gap:12px;font-size:11px}.footer-links b{margin-bottom:4px;font-weight:500}.footer-links a{color:var(--muted)}.footer-links a:hover{color:var(--accent)}.footer-message{border-inline-start:1px solid var(--line);padding-inline-start:28px}.footer-message svg{color:var(--highlight);display:block;margin-bottom:10px}.footer-message b{font-size:11px;font-weight:500}.footer-message a{font-size:11px;color:var(--highlight)}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:19px;padding-bottom:20px;font-size:11px;color:#a68fbb}.footer-bottom b{font:11px Arial,sans-serif;letter-spacing:1.5px;color:#c0aad4}dialog{background:var(--surface);color:var(--text);border:1px solid #5d4374;border-radius:16px;padding:32px;width:min(520px,calc(100% - 32px));max-height:90dvh;overflow:auto;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#06020cbb;backdrop-filter:blur(6px)}.dialog-close{position:absolute;inset-inline-end:15px;top:15px;z-index:2}.dialog-close svg{width:20px}.detail-header{display:flex;align-items:center;gap:20px;margin:15px 0 25px}.detail-header img{width:95px;height:95px;object-fit:cover;border-radius:10px}.detail-header :is(h1,h2){font:700 24px Arial,sans-serif}.detail-header p{font-size:14px;color:var(--muted)}.notice{background:#b477ff0d;border:1px solid #b477ff35;color:#e0d1ed;padding:12px;border-radius:7px;font-size:14px}.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 23px}.package-option{display:block;cursor:pointer;position:relative}.package-option input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.package-option span{display:block;text-align:center;border:1px solid #563d6b;padding:12px 4px;border-radius:7px;font-size:12px}.package-option small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.package-option input:checked+span{border-color:var(--accent);background:#b477ff14;color:var(--accent)}.package-option input:focus-visible+span{outline:2px solid var(--highlight);outline-offset:3px}.detail-form>label{display:block;font-size:11px;margin:15px 0}.detail-form>label>input{display:block;width:100%;background:var(--bg);border:1px solid #523b67;border-radius:7px;padding:13px;margin-top:9px;color:var(--text);direction:ltr;text-align:right}.detail-form>.button{width:100%;margin-top:8px}dialog h2>svg{width:25px;vertical-align:middle;color:var(--accent)}.cart-row{display:flex;gap:13px;align-items:center;border-bottom:1px solid var(--line);padding:18px 0}.cart-row img{width:53px;height:53px;border-radius:6px;object-fit:cover}.cart-row>div{flex:1;min-width:0}.cart-row b{font:600 14px Arial,sans-serif}.cart-row small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.cart-row .remove{border:0;background:transparent;color:var(--muted);font-size:11px}.cart-row strong{font:600 14px Arial,sans-serif;white-space:nowrap}.cart-total{display:flex;justify-content:space-between;margin:23px 0;font-size:14px}.cart-total strong{color:var(--accent)}#checkout{width:100%}.checkout-message{padding:20px;text-align:center;color:var(--highlight);font-size:12px}.checkout-message a{text-decoration:underline}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);padding:12px 23px;border:1px solid #65427e;border-radius:8px;background:#241232;box-shadow:0 10px 30px #0007;color:#e6caff;z-index:10;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;font-size:11px;max-width:calc(100vw - 32px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--highlight);outline-offset:5px} @media(min-width:1600px){.hero{min-height:510px}.hero-content{padding-top:50px}}@media(max-width:1100px){.wrap{width:calc(100% - 48px)}.header-main{gap:25px}.hero-content{padding:35px 30px;max-width:54%}h1{font-size:48px}.hero-actions{gap:14px;flex-wrap:wrap}.hero-bottom{margin-top:23px}.hero-stars{display:none}.floating-game{min-width:255px;inset-inline-end:22px;padding:12px}.floating-game .round-arrow{margin-inline-start:0}.trust{gap:10px}.trust>div{gap:8px}.trust b{font-size:11px}.trust small{font-size:11px}.trust-icon{width:32px;height:32px}.catalog-toolbar{align-items:flex-start;flex-direction:column}.sort-label{align-self:flex-end}.product-grid{gap:16px}.product-art{height:175px}.product-content{padding:13px}.product-title{font-size:15px}.product-buy{padding:6px 7px;gap:5px;font-size:11px}.product-price strong{font-size:16px}.footer-main{gap:25px}.footer-message{padding-inline-start:18px}} @media(max-width:760px){.wrap{width:calc(100% - 32px)}.announcement{padding:8px 16px;font-size:11px}.announcement-note{font-size:11px}.dot-divider{padding:0 6px}.header-main{height:auto;min-height:88px;gap:12px;flex-wrap:wrap;padding-top:8px;padding-bottom:14px}.brand img{width:104px;height:104px}.header-actions{gap:10px;margin-inline-start:auto}.cart-button{font-size:11px;gap:7px}.search{order:3;max-width:none;flex-basis:100%;padding:9px 12px}.search input{font-size:11px}.nav{height:47px;overflow-x:auto;scrollbar-width:none}.nav-links{gap:24px;white-space:nowrap;font-size:11px}.support-link{display:none}.hero{margin-top:16px;min-height:620px}.hero-content{max-width:100%;padding:26px 25px}.hero:after{background:linear-gradient(180deg,#14101d 0%,#14101d 35%,#14101d80 65%,#22142e40 100%)}.hero-art{inset:32% 0 0 0;background-size:auto 110%;background-position:14% center;opacity:.85}.eyebrow{font-size:11px}h1{font-size:39px;line-height:1.4;letter-spacing:-2px;margin:16px 0 13px}.hero-content>p{font-size:14px;margin-top:0;margin-bottom:20px}.hero-actions{gap:15px}.button{padding:12px 18px;font-size:11px;gap:13px}.hero-secondary{font-size:11px}.hero-bottom{margin-top:20px}.hero-bottom small{font-size:11px}.hero-bottom b{font-size:11px}.tiny-avatars img{width:26px;height:26px}.floating-game{bottom:35px;inset-inline-end:20px;inset-inline-start:20px;min-width:0;padding:12px 15px}.floating-game>img{width:46px;height:49px}.floating-game b{font-size:15px}.floating-game .round-arrow{margin-inline-start:auto}.hero-edition{inset-inline-end:22px;bottom:11px;font-size:11px}.trust{grid-template-columns:repeat(2,1fr);gap:23px 12px;padding:25px 0}.trust>div{justify-content:flex-start;padding-inline-start:5px;border:0}.trust b{font-size:11px}.trust small{font-size:11px}.trust-icon{width:34px;height:34px}.catalog{padding-top:36px}.section-heading{margin-bottom:21px}.section-kicker{font-size:11px}h2{font-size:22px;letter-spacing:-.8px}.catalog-note{display:none}.catalog-toolbar{gap:11px;padding-bottom:10px}.filters{width:100%;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px}.filters button{font-size:11px;gap:6px;padding:9px 11px}.filters button svg{width:14px;height:14px}.sort-label{font-size:11px}.sort-label select{font-size:11px;padding:3px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.product-art{height:160px}.product-content{padding:12px}.product-title{font-size:14px;min-height:21px}.product-kind{font-size:11px}.product-description{font-size:14px;margin:4px 0 13px;min-height:28px}.product-bottom{padding-top:9px;flex-wrap:wrap;gap:8px}.product-price{font-size:11px;min-height:21px}.product-price strong{font-size:17px}.product-buy{width:100%;justify-content:space-between;font-size:11px;padding:7px 9px}.product-tag{font-size:11px;top:9px;inset-inline-start:9px}.favorite{width:27px;height:27px;top:9px;inset-inline-end:9px}.how .section-heading{display:block}.how .section-heading>p{font-size:14px}.steps{grid-template-columns:1fr;gap:18px;padding-bottom:35px}.steps article{padding-top:20px;padding-inline-start:49px;min-height:130px}.steps article>svg{position:absolute;inset-inline-start:0;top:24px;width:27px;height:27px}.steps h3{margin-top:3px;font-size:13px}.steps p{font-size:14px;margin-bottom:0}.step-number{font-size:40px}.footer-main{grid-template-columns:1fr 1fr;gap:30px 20px;padding-top:30px}.footer-main>div:first-child{grid-column:1/-1}.footer-links{font-size:11px;gap:10px}.footer-message{grid-column:1/-1;border-inline-start:0;border-top:1px solid var(--line);padding:20px 0 0}.footer-message svg{float:inline-start;margin-inline-end:15px}.footer-message p{margin:3px 0}.footer-bottom{flex-wrap:wrap;gap:12px;font-size:11px}.footer-bottom b{font-size:11px}.detail-header{gap:13px}.detail-header :is(h1,h2){font-size:21px}dialog{padding:25px}.package-option span{font-size:11px}.package-option small{font-size:11px}}@media(max-width:370px){.header-actions{gap:4px}.brand img{width:96px;height:96px}.hero-content{padding:24px 19px}h1{font-size:34px}.hero-actions{gap:10px}.hero-secondary{font-size:11px}.product-art{height:135px}.product-content{padding:10px}.product-title{font-size:12px}.product-description{font-size:14px}.announcement-note{display:none}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}} /* The spotlight uses crossfading image layers; motion never blocks shopping. */ :root{--ease:cubic-bezier(.22,1,.36,1);--fast:180ms;--normal:350ms;--slow:700ms} body{background-image:radial-gradient(ellipse at 85% 15%,#d3afff05,transparent 35%)} .hero{min-height:550px;border-radius:20px;border-color:#6b4d85;box-shadow:0 24px 80px #0004;--hero-accent:#b477ff} .hero-art{background:none;inset:0 34% 0 0;overflow:hidden} .hero-scene{position:absolute;inset:0;background-position:left center;background-repeat:no-repeat;background-size:auto 100%;opacity:0;transform:scale(1.06);transition:opacity 800ms var(--ease),transform 1600ms var(--ease)} .hero-scene.active{opacity:1;transform:scale(1)} .scene-pubg{background-image:url('assets/reference-banner.webp')} .scene-freefire{background-image:url('assets/freefire.webp');background-size:cover;background-position:center 32%} .scene-cod{background-image:url('assets/cod.webp');background-size:cover;background-position:center 30%} .hero-content{padding-top:57px;position:relative;max-width:680px} .hero h1{font-size:clamp(48px,4.4vw,64px);line-height:1.35;margin-top:24px;margin-bottom:20px} .hero h1>span{color:var(--hero-accent);text-shadow:0 8px 60px #b477ff25;transition:color var(--slow) var(--ease)} .hero[data-spotlight=freefire]{--hero-accent:#d3afff} .hero[data-spotlight=cod]{--hero-accent:#d6c2e8} .hero-content>p{font-size:13px;line-height:2.2} .hero-outline{position:absolute;inset-inline-start:34%;top:100px;font:900 clamp(80px,11vw,160px)/.88 Arial,sans-serif;letter-spacing:-8px;color:transparent;-webkit-text-stroke:1px #eee5f525;z-index:-1;transform:rotate(-8deg);pointer-events:none} .hero-showcase{position:absolute;top:24px;inset-inline-end:28px;width:300px} .showcase-label{display:flex;justify-content:space-between;font:11px Arial,sans-serif;letter-spacing:2px;color:#f0e9f7;margin-bottom:12px;text-shadow:0 2px 10px #000} .showcase-label b{font-weight:400;color:var(--highlight);letter-spacing:1px} .hero-switcher{display:flex;direction:ltr;gap:5px;padding:5px;background:#22142eb3;border:1px solid #ffffff26;backdrop-filter:blur(12px);border-radius:7px} .hero-switcher button{flex:1;border:0;background:transparent;color:#d3bfe4;font:700 11px Arial,sans-serif;padding:10px 5px;border-radius:4px;white-space:nowrap;transition:color var(--normal),background var(--normal),transform var(--normal) var(--ease)} .hero-switcher button[aria-pressed=true]{color:#251732;background:var(--highlight);box-shadow:0 2px 16px #d3afff20} .hero-switcher button:hover{transform:translateY(-2px)} .floating-game{bottom:48px;border-color:#bea3d565;box-shadow:0 15px 45px #0005} .hero-edition{bottom:22px} .button{transition:transform var(--normal) var(--ease),background var(--normal),box-shadow var(--normal);position:relative;overflow:hidden} .button:after{content:'';position:absolute;inset:-50% auto -50% -80%;width:45%;background:linear-gradient(90deg,transparent,#fff5,transparent);transform:skewX(-25deg);pointer-events:none} .button:hover:after{animation:button-sheen 650ms var(--ease)} .button:hover{transform:translateY(-4px);box-shadow:0 10px 30px #b477ff22} .button:active{transform:translateY(0) scale(.97)} .button svg,.product-buy svg,.round-arrow svg{transition:transform var(--normal) var(--ease)} .button:hover svg,.product-buy:hover svg,.round-arrow:hover svg{transform:translateX(-4px)} .product-card{transition:transform 450ms var(--ease),border-color var(--normal),box-shadow 450ms var(--ease);background:linear-gradient(145deg,#1b1427,#120d1b)} .product-art img{transition:transform 900ms var(--ease),filter 600ms var(--ease)} .product-content{position:relative} .product-title{font-size:18px}.product-description{font-size:14px} .product-buy{transition:background var(--normal),color var(--normal),border-color var(--normal)} .favorite{transition:background var(--normal),transform var(--normal) var(--ease),color var(--normal)} .favorite:hover{transform:scale(1.15)} .favorite[aria-pressed=true] svg{animation:heart-pop 400ms var(--ease)} .filters button{transition:background var(--normal),color var(--normal),border-color var(--normal),transform var(--normal) var(--ease)} .filters button:hover{transform:translateY(-2px)} .nav-links a:not(.nav-active):after{content:'';position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform var(--normal) var(--ease)} .nav-links a:hover:after{transform:scaleX(1)} .trust-icon{transition:transform 500ms var(--ease),background var(--normal)} .trust>div:hover .trust-icon{transform:translateY(-4px) rotate(-8deg);background:#472b5f} .steps article{transition:border-color var(--normal)} .steps article:hover{border-color:var(--accent)} dialog[open]{animation:dialog-enter 400ms var(--ease)} dialog[open]::backdrop{animation:backdrop-enter 350ms ease} .package-option span{transition:background var(--normal),border-color var(--normal),transform var(--normal) var(--ease)} .package-option:hover span{transform:translateY(-3px)} .checkout-message{animation:dialog-enter 400ms var(--ease)} @keyframes rise-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} @keyframes scene-enter{from{opacity:.4;transform:scale(1.08)}to{opacity:1;transform:scale(1)}} @keyframes floating{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes button-sheen{to{transform:translateX(600%) skewX(-25deg)}} @keyframes heart-pop{50%{transform:scale(1.3)}} @keyframes dialog-enter{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes backdrop-enter{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:no-preference){ .hero-content>*{animation:rise-in 850ms var(--ease) both} .hero-content>.eyebrow{animation-delay:80ms}.hero-content>h1{animation-delay:160ms}.hero-content>p{animation-delay:240ms}.hero-content>.hero-actions{animation-delay:320ms}.hero-content>.hero-bottom{animation-delay:400ms} .hero-art{animation:scene-enter 1400ms var(--ease) both} .hero-showcase{animation:rise-in 900ms 400ms var(--ease) both} .floating-game{animation:rise-in 900ms 500ms var(--ease) backwards} .floating-game>img{animation:floating 6s 1400ms ease-in-out infinite} } @media(hover:hover) and (pointer:fine){.product-card:hover{transform:perspective(1000px) translateY(-9px) rotateX(2deg);border-color:#d3afff88;box-shadow:0 22px 45px #0006,0 0 0 1px #d3afff10}.product-card:hover .product-art img{transform:scale(1.08);filter:saturate(1.12)}} @media(max-width:1100px){.hero h1{font-size:54px}.hero-content{padding:58px 30px 35px;max-width:58%}.hero-showcase{width:265px;inset-inline-end:22px}.hero-content>p{font-size:14px}.product-title{font-size:16px}.product-description{font-size:14px}} @media(max-width:760px){.hero{min-height:670px;border-radius:14px}.hero-content{padding:80px 25px 25px;max-width:100%}.hero h1{font-size:clamp(30px,9.2vw,42px);line-height:1.4;margin-top:17px;margin-bottom:14px}.hero-content>p{font-size:14px}.hero-showcase{top:17px;inset-inline-end:20px;inset-inline-start:20px;width:auto}.showcase-label{font-size:11px;margin-bottom:8px}.hero-switcher{padding:3px;background:#22142ee0}.hero-switcher button{font-size:11px;padding:7px 4px}.hero-art{inset:35% 0 0 0}.hero-scene{background-size:auto 110%;background-position:14% center}.scene-freefire,.scene-cod{background-size:cover;background-position:center 20%}.hero-outline{top:360px;inset-inline-start:20%;font-size:100px;opacity:.6}.floating-game{bottom:39px}.hero-edition{bottom:16px}.product-title{font-size:14px}.product-description{font-size:14px}.product-card{border-radius:12px}} @media(max-width:370px){.hero h1{font-size:30px}.hero-content{padding-inline:19px}.hero{min-height:640px}.product-title{font-size:12px}.product-description{font-size:14px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}.hero-scene,.button:hover,.button:active,.hero-switcher button:hover,.product-card:hover,.product-card:hover .product-art img,.favorite:hover,.trust>div:hover .trust-icon,.package-option:hover span,.filters button:hover,.button:hover svg,.product-buy:hover svg,.round-arrow:hover svg{transform:none!important}} .package-option span{pointer-events:none} .reveal-pending{opacity:0} @media(prefers-reduced-motion:reduce){.reveal-pending{opacity:1}} .orbit-showcase{position:relative;isolation:isolate;margin-top:20px;overflow:hidden;border:1px solid #4c3461;border-radius:18px;background:radial-gradient(ellipse at 50% 65%,#b477ff1c,transparent 65%),#100b19} .orbit-heading{text-align:center;padding:28px 24px 0;position:relative} .home-video{display:none;position:fixed;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;z-index:-1;pointer-events:none} body.home-page{isolation:isolate;background-image:none} .home-page .home-video{display:block} .home-page:before,.home-page:after{display:none} .home-page .header,.home-page footer{background:#08060d66} .home-page .announcement{background:#1b102b99} .home-page .orbit-showcase{background:transparent;animation:none} .home-page .orbit-showcase:before{content:'';position:absolute;inset:0;border:2px solid transparent;border-radius:inherit;background:var(--rainbow) border-box;background-size:400%;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;animation:rainbow-glow 20s linear infinite} .orbit-heading .eyebrow{font-size:11px;background:#42285866;border-color:#6b4a88} .orbit-heading h1{font-size:clamp(30px,3.8vw,54px);letter-spacing:-2px;margin:15px 0 16px;line-height:1.5} .orbit-heading h1 span{color:var(--highlight)} .orbit-heading p{color:#c5b0d8;font-size:14px;margin:0} .orbit-edition{position:absolute;inset-inline-end:28px;top:36px;font:11px Arial,sans-serif;letter-spacing:2px;color:#c5b0d8} .orbit-stage{position:relative;height:370px;direction:ltr;touch-action:pan-y;perspective:1500px;perspective-origin:50% 46%;overflow:hidden;cursor:grab;margin-top:22px} .orbit-stage.is-dragging{cursor:grabbing} .orbit-rotor{position:relative;height:340px;transform-style:preserve-3d;top:12px} .orbit-card{position:absolute;top:0;left:50%;width:var(--ring-card,280px);height:340px;margin-left:calc(var(--ring-card,280px)/-2);display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid #583c70;background:#1b1228;border-radius:12px;overflow:hidden;padding:0;backface-visibility:hidden;transform-origin:center;box-shadow:0 14px 35px #0003;color:var(--text);user-select:none;transition:transform 750ms var(--ease),opacity 750ms var(--ease),filter 750ms var(--ease),visibility 750ms,border-color 300ms} .orbit-card img{width:100%;height:220px;object-fit:cover;pointer-events:none;flex-shrink:0} .orbit-card-type{direction:rtl;font-size:11px;color:var(--highlight);padding:15px 12px 6px} .orbit-card strong{font:700 18px/1.4 Arial,sans-serif;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .orbit-card-action{display:flex;direction:rtl;align-items:center;justify-content:center;gap:15px;font-size:11px;color:#dfceed;padding:12px;margin-top:auto;width:100%} .orbit-card-action svg{width:16px;height:16px} .orbit-card[data-front]{border-color:#c8b1dc;box-shadow:0 14px 45px #0006,0 0 25px #d3afff08} .orbit-card:hover{border-color:var(--highlight)} .orbit-stage.is-dragging .orbit-card{transition:none} .orbit-selection{text-align:center;min-height:58px;margin:8px 0 18px;font-size:11px} .orbit-selection b{font:600 13px Arial,sans-serif;color:#e2d3ee} .orbit-selection>span{font:11px Arial,sans-serif;letter-spacing:2px;color:var(--highlight);display:inline-block;margin-right:15px} .orbit-selection small{display:block;font-size:12px;color:#c5b0d8;margin-top:8px} @media(max-width:1100px){.orbit-edition{display:none}.orbit-heading h1{font-size:42px}} @media(max-width:760px){.orbit-showcase{margin-top:16px;border-radius:14px}.orbit-heading{padding:25px 15px 0}.orbit-heading h1{font-size:32px;letter-spacing:-1.4px;margin-top:15px}.orbit-heading h1 span{display:block}.orbit-heading p{font-size:14px;max-width:260px;margin-inline:auto;line-height:2}.orbit-heading .eyebrow{font-size:11px}.orbit-stage{height:330px;perspective:1100px;margin-top:20px}.orbit-rotor,.orbit-card{height:310px}.orbit-card img{height:195px}.orbit-card strong{font-size:15px}.orbit-card-type{font-size:11px}.orbit-card-action{font-size:11px}} @media(max-width:370px){.orbit-heading h1{font-size:27px}.orbit-card strong{font-size:13px}} @media(prefers-reduced-motion:reduce){.orbit-stage{height:auto;padding:12px 16px;perspective:none;cursor:auto}.orbit-rotor{top:0;height:auto;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:5px 2px 15px}.orbit-card{position:relative;inset:auto;flex:0 0 190px;width:190px;height:280px;margin:0;transform:none!important;scroll-snap-align:center}.orbit-card img{height:175px}.orbit-card strong{font-size:14px}.orbit-card-type{font-size:11px}.orbit-card-action{font-size:11px}} @media(prefers-reduced-motion:reduce){.orbit-selection{display:none}} [dir=ltr] svg:has(use[href="#i-arrow"]){scale:-1 1} [dir=ltr] .product-title,[dir=ltr] .detail-form>label>input{text-align:left} [dir=ltr] .orbit-selection>span{margin:0 0 0 15px} [dir=ltr] .nav-links a:not(.nav-active):after{transform-origin:left} /* Motion pass 2: entrance, header, footer, carousel and steps. Skipped entirely under reduced motion. */ @keyframes pulse{50%{opacity:.35}} @media(prefers-reduced-motion:no-preference){ .orbit-heading>*{animation:rise-in 850ms var(--ease) backwards} .orbit-heading h1{animation-delay:90ms}.orbit-heading p{animation-delay:180ms} .orbit-stage,.orbit-selection{animation:rise-in 900ms 260ms var(--ease) backwards} .eyebrow .status-dot,.support-link .status-dot,.catalog-note .status-dot{animation:pulse 2.4s ease-in-out infinite} .product-card:not(.reveal-pending){animation:rise-in 500ms var(--ease) backwards} .product-card:nth-child(4n+2){animation-delay:50ms}.product-card:nth-child(4n+3){animation-delay:100ms}.product-card:nth-child(4n){animation-delay:150ms} .icon-button{transition:background var(--normal),color var(--normal),transform var(--normal) var(--ease)} .icon-button:hover{transform:translateY(-2px)} .cart-button{transition:color var(--normal)}.cart-button:hover{color:var(--highlight)} .cart-button svg{transition:transform var(--normal) var(--ease)}.cart-button:hover svg{transform:translateY(-2px) rotate(-6deg)} .brand img{transition:transform 500ms var(--ease)}.brand:hover img{transform:scale(1.05) rotate(-2deg)} .search{transition:border-color var(--normal),background var(--normal)}.search:focus-within{background:var(--surface2)} .footer-links a{display:block;transition:color var(--normal),padding var(--normal) var(--ease)}.footer-links a:hover{padding-inline-start:6px} .footer-bottom a,.footer-message a,.support-link{transition:color var(--normal)}.footer-bottom a:hover,.footer-message a:hover,.support-link:hover{color:var(--text)} .orbit-card img,.orbit-card-action svg{transition:transform 900ms var(--ease)} .orbit-card[data-front]:hover img{transform:scale(1.06)}.orbit-card[data-front]:hover .orbit-card-action svg{transform:translateX(-4px)} .steps article{transition:border-color var(--normal),transform 450ms var(--ease)}.steps article:hover{transform:translateY(-6px)} .step-number{transition:color var(--normal)}.steps article:hover .step-number{color:var(--accent)} } /* Home page additions: hero button, FAQ, floating support and cart. */ .orbit-heading .button{margin-top:22px} a.product-buy{white-space:nowrap} .faq{padding-bottom:65px} .faq details{border-top:1px solid var(--line);padding:16px 0} .faq details:last-child{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;font-weight:600;font-size:14px} .faq p{color:var(--muted);font-size:14px;margin:10px 0 0;max-width:65ch} .floating-actions{position:fixed;bottom:16px;inset-inline-end:16px;z-index:9;display:flex;flex-direction:column;gap:10px} .floating-actions>*{width:48px;height:48px;border-radius:50%;border:1px solid #654681;background:#3e2553;color:var(--text);display:grid;place-content:center;position:relative;box-shadow:0 10px 30px #0007} .floating-actions>[hidden]{display:none} .floating-cart{background:var(--primary)} .floating-cart b{position:absolute;top:-4px;inset-inline-end:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--text);color:#251732;font-size:11px;line-height:20px;text-align:center} .floating-support{display:none} @media(max-width:760px){.floating-support{display:grid}.faq{padding-bottom:35px}} @media(prefers-reduced-motion:no-preference){.floating-actions>*{transition:transform var(--normal) var(--ease),background var(--normal)}.floating-actions>*:hover{transform:translateY(-3px)}} .product-card{display:flex;flex-direction:column}.product-content{flex:1;display:flex;flex-direction:column}.product-bottom{margin-top:auto} /* Loading, checkout and order page. */ .loading{color:var(--muted);text-align:center;padding:24px 0;margin:0;grid-column:1/-1} .detail-form select{display:block;width:100%;background:var(--bg);border:1px solid #523b67;border-radius:7px;padding:13px;margin-top:9px;color:var(--text)} .button:disabled{opacity:.5;cursor:not-allowed} .package-option input:disabled+span{opacity:.45} #checkout-form{margin-top:16px} .page-title{font-size:24px;margin:8px 0 16px} .order-status{display:flex;align-items:center;gap:8px;color:var(--highlight);margin:4px 0 16px} #order{margin-top:24px} .package-option[hidden]{display:none} .package-grid{max-height:340px;overflow-y:auto;padding:4px 2px} .detail-form>label>small{display:block;color:var(--muted);font-size:11px;margin-top:6px} .cart-row small{line-height:1.7} /* Compact product tiles: artwork, name and starting price; the whole tile is the link. */ .product-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px} .product-card{display:block} .product-link{display:block;color:inherit} .product-art{height:auto;aspect-ratio:460/375} .product-info{padding:10px 12px 12px} .product-title{font-size:13px;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .product-price{display:block;min-height:0;font-size:11px;margin-top:2px} .product-price strong{font-size:14px;margin:0 3px} .product-tag{top:auto;bottom:8px;inset-inline-start:8px;padding:2px 7px} .favorite{top:8px;inset-inline-end:8px;width:28px;height:28px} @media(max-width:1100px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:760px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-info{padding:8px}.product-title{font-size:12px;white-space:normal;line-height:1.35;height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.product-tag{bottom:6px;inset-inline-start:6px}.favorite{top:6px;inset-inline-end:6px;width:26px;height:26px}} @media(max-width:370px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Category pages (./?category=…) show the catalog only. */ .category-page .orbit-showcase,.category-page .trust,.category-page .how,.category-page .faq{display:none} .category-page .catalog{padding-bottom:65px} /* Store-style showcase: category tiles, best-seller spotlight, and cards with a price + buy bar. */ .category-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px} .category-tile{position:relative;isolation:isolate;height:130px;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:0 26px} .category-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .category-tile:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,#08060df2 35%,#1b1228b3)} [dir=ltr] .category-tile:after{background:linear-gradient(90deg,#08060df2 35%,#1b1228b3)} .category-tile b{font-size:19px;font-weight:700} .category-tile small{color:var(--highlight);font-size:12px} .best{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:center;margin-top:14px;padding:34px 44px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(120deg,#1b1228,#100b19)} .best:empty{display:none} .best h2{font:700 34px/1.3 Arial,sans-serif;margin:6px 0 8px;text-align:start} [dir=rtl] .best h2{text-align:right} .best p{color:var(--muted);font-size:14px;margin:0 0 6px;max-width:46ch} .best .best-rating{color:var(--highlight);font-size:13px} .best-rating b{color:var(--text)} .best-buy{display:flex;align-items:center;gap:22px;margin-top:20px;color:var(--muted);font-size:12px} .best-buy strong{font:700 28px Arial,sans-serif;color:var(--text);margin:0 4px} .best img{display:block;width:100%;height:auto;aspect-ratio:460/375;object-fit:cover;border-radius:10px} .product-stock{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-top:3px} .product-stock:before{content:'';width:6px;height:6px;border-radius:50%;background:#4ade80} .product-stock[data-out]:before{background:#6b6475} .product-bar{display:flex;align-items:stretch;border-top:1px solid var(--line)} .product-bar .product-price{flex:1;margin:0;padding:8px 12px;white-space:nowrap} .product-go{display:grid;place-content:center;padding:0 16px;background:var(--primary);color:#fff;font-size:12px;font-weight:600} .product-info{padding-bottom:10px} .category-page .showcase{display:none} @media(max-width:1100px){.best{padding:26px;gap:26px;grid-template-columns:1fr 260px}.best h2{font-size:28px}.product-go{padding:0 12px}} @media(max-width:760px){.category-tiles{grid-template-columns:1fr;gap:10px;margin-top:26px}.category-tile{height:88px;padding:0 18px}.best{grid-template-columns:1fr;padding:18px;gap:16px}.best>a{order:-1}.best h2{font-size:24px}.best-buy strong{font-size:22px}} @media(prefers-reduced-motion:no-preference){.category-tile img,.best img{transition:transform 900ms var(--ease)}.category-tile:hover img{transform:scale(1.06)}.best:hover img{transform:scale(1.02)}.product-go{transition:background var(--normal)}.product-card:hover .product-go{background:var(--primary-hover)}} @media(max-width:760px){.product-title{white-space:nowrap;height:auto;display:block}} /* Compact, evenly sized product cards. */ .product-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px} .product-card{display:flex;flex-direction:column;border-radius:14px} .product-link{flex:1;display:flex;flex-direction:column} .product-art{aspect-ratio:460/375;height:auto} .product-info{padding:12px 14px 2px} .product-meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:2px;font-size:11px;color:var(--muted)} .product-meta .product-price{margin:0;white-space:nowrap} .product-actions{display:flex;align-items:center;gap:8px;padding:10px 14px 14px} .round{width:32px;height:32px;border-radius:50%;border:1px solid #4e3563;background:transparent;color:var(--text);display:grid;place-content:center;padding:0} .round svg{width:15px;height:15px} .round:hover{background:var(--surface2);border-color:var(--accent)} .product-actions .favorite{position:static;width:32px;height:32px} .favorite[aria-pressed=true]{color:var(--accent);border-color:var(--accent)} .product-rating{margin-inline-start:auto;font-size:12px;font-weight:600} .product-rating span{color:#f5c451} @media(max-width:1100px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-info{padding:10px 10px 2px}.product-actions{padding:8px 10px 10px;gap:6px}.product-meta{flex-direction:column;gap:0}} /* Moving backdrop: controller symbols drifting slowly behind the page. Still under reduced motion. */ body:before{content:'';position:fixed;inset:-480px;z-index:-1;pointer-events:none;opacity:.13;background:url("data:image/svg+xml,") 0 0/480px 480px} @keyframes backdrop-drift{to{transform:translate(480px,480px)}} @media(prefers-reduced-motion:no-preference){body:before{animation:backdrop-drift 30s linear infinite}} /* Purple gradient border on every main action button: an animated gradient ring plus a soft glow behind it. */ /* Each .button is its own layer: ring (own background), glow (:before), then the fill again (:after) so the glow never tints the face. */ :root{--rainbow:linear-gradient(45deg,#d3afff,#8036ed,#4c1d95,#b477ff,#f5e9ff,#d3afff,#8036ed,#4c1d95,#b477ff,#f5e9ff)} .button,.auth-submit{overflow:visible;border:2px solid transparent;background:linear-gradient(var(--btn-fill),var(--btn-fill)) padding-box,var(--rainbow) border-box;background-size:auto,400%;animation:rainbow 20s linear infinite} .button.primary{--btn-fill:var(--primary)}.button.primary:hover{--btn-fill:var(--primary-hover)} .button.light{--btn-fill:#f5f0f9}.auth-submit{--btn-fill:#fff;position:relative} .button.primary,.button.primary:hover,.button.light,.auth-submit{background:linear-gradient(var(--btn-fill),var(--btn-fill)) padding-box,var(--rainbow) border-box;background-size:auto,400%} .button{isolation:isolate} .button:after{content:'';position:absolute;inset:0;z-index:-1;width:auto;transform:none;border-radius:inherit;background:var(--btn-fill);animation:none;pointer-events:none} .button:hover:after{animation:none} .button:before,.auth-submit:before{content:'';position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:var(--rainbow);background-size:400%;filter:blur(14px);opacity:.55;animation:rainbow-glow 20s linear infinite;pointer-events:none} .button:disabled:before{display:none} @keyframes rainbow{50%{background-position:0 0,400% 0}} @keyframes rainbow-glow{50%{background-position:400% 0}} /* The same moving purple ring on the cards. No blurred glow here: a dozen animated blurs at once is too heavy, hover keeps its shadow. */ .product-card{border:2px solid transparent;background:linear-gradient(145deg,#1b1427,#120d1b) padding-box,var(--rainbow) border-box;background-size:auto,400%;animation:rainbow 20s linear infinite} .category-tile{border:2px solid transparent;background:var(--rainbow) border-box;background-size:400%;animation:rainbow-glow 20s linear infinite} @media(prefers-reduced-motion:no-preference){.product-card:not(.reveal-pending){animation:rise-in 500ms var(--ease) backwards,rainbow 20s linear infinite}} @media(hover:hover) and (pointer:fine){.product-card:hover{border-color:transparent}} /* Names strip: every game and service scrolling in a loop, pausing on hover. */ .marquee{direction:ltr;overflow:hidden;margin-top:26px;padding:26px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .marquee-track{display:flex;gap:24px;width:max-content;animation:marquee 45s linear infinite} .marquee-track span{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:600 14px/1.3 Arial,sans-serif;white-space:nowrap;color:var(--text)} .marquee-track img{width:32px;height:32px;object-fit:cover;border-radius:50%;flex-shrink:0} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes marquee{to{transform:translateX(calc(-50% - 12px))}} .category-page .marquee{display:none} @media(max-width:760px){.marquee{padding:18px 0;margin-top:16px}.marquee-track span{font-size:13px}} @media(prefers-reduced-motion:reduce){.marquee{overflow-x:auto}.marquee-track span[aria-hidden]{display:none}} /* The hero box gets the same moving purple border. */ .orbit-showcase{border:2px solid transparent;background:radial-gradient(ellipse at 50% 65%,#b477ff1c,transparent 65%) padding-box,linear-gradient(#100b19,#100b19) padding-box,var(--rainbow) border-box;background-size:auto,auto,400%;animation:rainbow-box 20s linear infinite} @keyframes rainbow-box{50%{background-position:0 0,0 0,400% 0}} /* Payment timeline: four numbered stops on one line (vertical on phones). */ .timeline{grid-template-columns:repeat(4,1fr);gap:0} .timeline article{border-top:2px solid #4e3563;padding:28px 0 0;padding-inline-end:28px} .timeline article:before{content:'';position:absolute;top:-8px;inset-inline-start:0;width:14px;height:14px;border-radius:50%;background:var(--primary);outline:4px solid var(--bg)} .timeline article:last-child{border-image:linear-gradient(to left,transparent,#4e3563) 1} [dir=ltr] .timeline article:last-child{border-image:linear-gradient(to right,#4e3563,transparent) 1} .timeline article>svg{color:var(--highlight);vertical-align:middle} .timeline .step-number{position:static;display:inline-block;vertical-align:middle;margin-inline-end:10px;font-size:28px;line-height:1} .timeline h3{margin:10px 0 4px;font-size:16px} .timeline p{margin:0} @media(max-width:760px){.timeline{grid-template-columns:1fr;gap:0}.timeline article,.timeline article:last-child{border-top:0;border-image:none;border-inline-start:2px solid #4e3563;padding:0 0 26px;padding-inline-start:26px;min-height:0}.timeline article:before{top:2px;inset-inline-start:-8px}.timeline article>svg{position:static;width:24px;height:24px}.timeline .step-number{font-size:24px}} /* Aurora backdrop: soft purple glows drifting behind the page. Store symbols (controller, coins, gems, gift, card, bolt, crown, pad shapes) drift underneath, dimmer behind the content column. */ body:before{opacity:.16} body:after{content:'';position:fixed;inset:-15%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#8036ed59,transparent) 8% 12%/55% 60% no-repeat,radial-gradient(closest-side,#b477ff33,transparent) 95% 45%/50% 55% no-repeat,radial-gradient(closest-side,#4c1d9566,transparent) 30% 100%/60% 60% no-repeat,linear-gradient(90deg,transparent,#08060db8 24%,#08060db8 76%,transparent)} @media(prefers-reduced-motion:no-preference){body:after{animation:aurora 18s ease-in-out infinite alternate}} @keyframes aurora{from{transform:translate(-4%,-3%)}to{transform:translate(4%,4%) scale(1.12)}} .sort-label select{background-color:transparent} /* Timeline: a light runs along the line in reading order. */ .timeline{position:relative} .timeline:before{content:'';position:absolute;top:10px;inset-inline:0;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--highlight),transparent) -25% 0/20% 100% no-repeat} @media(prefers-reduced-motion:no-preference){ .timeline:before{animation:timeline-run 4s linear infinite} [dir=rtl] .timeline:before{animation-direction:reverse} } @keyframes timeline-run{to{background-position:125% 0}} @media(max-width:760px){.timeline:before{top:10px;bottom:35px;inset-inline:0 auto;width:2px;height:auto;background:linear-gradient(transparent,var(--highlight),transparent) 0 -25%/100% 20% no-repeat} [dir=rtl] .timeline:before{animation-direction:normal} @keyframes timeline-run{to{background-position:0 125%}}} .timeline:before{z-index:1}.timeline article:before{z-index:2} /* Policies page, the acceptance checkbox at checkout, and the footer policy links. */ .policies{max-width:760px;padding-block:8px 64px} .policy-updated{font-size:12px;color:var(--muted);margin:-8px 0 16px} .policy-nav,.footer-policies{display:flex;flex-wrap:wrap;gap:8px 20px} .policy-nav a,.agree a{color:var(--highlight);text-decoration:underline;text-underline-offset:3px} .policy-nav{margin-bottom:24px}.policy-nav [aria-current]{color:var(--text);text-decoration:none;font-weight:700} .policies ul{margin:0;padding-inline-start:20px} .policies li{font-size:14px;color:#d6cbe0;margin-bottom:8px} .policies>.button{margin-top:28px} .detail-form .agree{display:flex;align-items:flex-start;gap:10px;font-size:13px} .detail-form .agree input{width:16px;height:16px;flex:none;margin:5px 0 0;padding:0;accent-color:var(--primary)} /* A category page's main heading looks like the section heading it replaces. */ .catalog .section-heading h1{font-size:28px;line-height:1.6;letter-spacing:-1px;margin:0;font-weight:700} @media(max-width:760px){.catalog .section-heading h1{font-size:22px;letter-spacing:-.8px}} /* Order page: what happened to the order, above its details. */ .outcome{display:grid;gap:10px;margin-bottom:28px;padding:20px}.outcome h2{font-size:22px;letter-spacing:0}.outcome p{margin:0}.outcome .button{justify-self:start;margin-top:6px} /* A delivered redemption code: easy to read, one tap to select. */ .code{user-select:all;font:700 15px ui-monospace,Menlo,monospace;letter-spacing:.5px;color:var(--text);overflow-wrap:anywhere} /* Cards far off screen are not laid out or painted until they come near. */ .product-card{content-visibility:auto;contain-intrinsic-size:auto 420px}