.portal-route{--route-frame-ratio: 16 / 9;--route-frame-min-height: clamp(16rem, 34vw, 24rem);position:relative;display:grid;grid-template-columns:minmax(16rem,.42fr) minmax(0,.58fr);gap:clamp(1rem,3vw,1.6rem);align-items:stretch;overflow:visible;padding:clamp(1rem,2.4vw,1.4rem);background:radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--route-accent) 18%,transparent),transparent 38%),radial-gradient(circle at 92% 88%,color-mix(in srgb,var(--route-accent) 12%,transparent),transparent 35%),linear-gradient(180deg,oklch(.14 .03 var(--hue) / .72),oklch(.1 .03 var(--hue) / .62));border:1px solid color-mix(in srgb,var(--route-accent) 28%,transparent);backdrop-filter:blur(18px) saturate(1.12);box-shadow:inset 0 1px #ffffff14,0 22px 60px #0000003d;transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}.portal-route:before{content:"";position:absolute;z-index:-1;inset:-1.4rem;border-radius:2.65rem;pointer-events:none;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--route-accent) 28%,transparent),transparent 68%),radial-gradient(circle at 18% 22%,color-mix(in srgb,var(--route-accent) 14%,transparent),transparent 42%);opacity:0;filter:blur(22px);transform:scale(.96);transition:opacity .45s ease,transform .65s ease,filter .65s ease}.portal-route:after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,transparent 0 48%,color-mix(in srgb,var(--route-accent) 10%,transparent) 50%,transparent 52%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px);opacity:.34;mix-blend-mode:screen;transition:opacity .35s ease}.portal-route:hover{border-color:color-mix(in srgb,var(--route-accent) 46%,white);box-shadow:inset 0 1px #ffffff1c,0 26px 72px #0000004d,0 0 46px color-mix(in srgb,var(--route-accent) 14%,transparent)}.portal-route:hover:before{opacity:.72;transform:scale(1.05);filter:blur(34px)}.portal-route:hover:after{opacity:.48}.portal-route--reverse{grid-template-columns:minmax(0,.58fr) minmax(16rem,.42fr)}.portal-route--reverse .route-copy{order:2}.portal-route--reverse .route-viewport{order:1}.route-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(1rem,3vw,2rem);transition:transform .35s ease,filter .35s ease}.portal-route:hover .route-copy{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--route-accent) 14%,transparent))}.route-kicker{margin-bottom:.65rem;color:color-mix(in srgb,var(--route-accent) 76%,white);font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase}.route-copy h3{margin:0;color:#fff;font-size:clamp(1.55rem,4vw,2.65rem);line-height:1.02;letter-spacing:-.04em}.route-copy p{margin:.9rem 0 0;max-width:44rem;color:oklch(.78 .03 var(--hue));font-size:.98rem;line-height:1.65}.route-link{display:inline-flex;align-items:center;gap:.5rem;width:-moz-fit-content;width:fit-content;margin-top:1.35rem;padding:.72rem .92rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--route-accent) 45%,transparent);background:color-mix(in srgb,var(--route-accent) 13%,rgba(0,0,0,.2));color:color-mix(in srgb,var(--route-accent) 72%,white);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-decoration:none;text-transform:uppercase;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.route-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--route-accent) 78%,white);box-shadow:0 0 28px color-mix(in srgb,var(--route-accent) 20%,transparent)}.route-link__icon{width:1rem;height:1rem;transition:transform .2s ease}.route-link:hover .route-link__icon{transform:translate(3px)}.route-viewport{position:relative;z-index:1;overflow:hidden;aspect-ratio:var(--route-frame-ratio);min-height:var(--route-frame-min-height);border-radius:1.1rem;border:1px solid color-mix(in srgb,var(--route-accent) 34%,transparent);background:oklch(.08 .03 var(--hue) / .78);box-shadow:inset 0 1px #ffffff14,0 22px 60px #0000003d}.route-viewport--synthetic{display:block;text-decoration:none;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}.route-viewport--synthetic:hover{border-color:color-mix(in srgb,var(--route-accent) 74%,white);box-shadow:0 0 0 1px color-mix(in srgb,var(--route-accent) 20%,transparent),0 26px 72px #00000057}.route-scene{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 24% 30%,color-mix(in srgb,var(--route-accent) 28%,transparent),transparent 26%),radial-gradient(circle at 72% 70%,rgba(255,255,255,.12),transparent 18%),linear-gradient(135deg,#040814f5,#0a1218d1);transition:filter .45s ease,transform .7s ease}.portal-route:hover .route-scene{filter:saturate(1.15) brightness(1.08);transform:scale(1.018)}.portal-route--game,.portal-route--story,.portal-route--store,.portal-route--community{display:block;padding:0;border-radius:1.25rem}.portal-route--game .route-copy,.portal-route--story .route-copy,.portal-route--store .route-copy,.portal-route--community .route-copy{position:absolute;z-index:4;inset:50% auto auto 50%;transform:translate(-50%,-50%);align-items:center;justify-content:center;width:min(42rem,calc(100% - 2rem));min-height:auto;padding:clamp(1.25rem,4vw,2.35rem);text-align:center;border:1px solid color-mix(in srgb,var(--route-accent) 24%,rgba(255,255,255,.18));border-radius:1.35rem;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--route-accent) 20%,transparent),transparent 58%),#00000052;box-shadow:0 24px 70px #00000038,inset 0 1px #ffffff0f;backdrop-filter:blur(11px) saturate(1.1)}.portal-route--game:hover .route-copy,.portal-route--story:hover .route-copy,.portal-route--store:hover .route-copy,.portal-route--community:hover .route-copy{transform:translate(-50%,-50%);border-color:color-mix(in srgb,var(--route-accent) 52%,rgba(255,255,255,.28));background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--route-accent) 25%,transparent),transparent 58%),#00000061;box-shadow:0 30px 86px #0000004d,0 0 38px color-mix(in srgb,var(--route-accent) 14%,transparent),inset 0 1px #ffffff14}.portal-route--game .route-copy p,.portal-route--story .route-copy p,.portal-route--store .route-copy p,.portal-route--community .route-copy p{max-width:34rem}.portal-route--game .route-viewport,.portal-route--story .route-viewport,.portal-route--store .route-viewport,.portal-route--community .route-viewport{border:0;border-radius:inherit;box-shadow:none}.portal-route--game .route-scene{background:linear-gradient(90deg,#00000080,#0000000a 52%,#00000080),radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--route-accent) 22%,transparent),transparent 24%),url(/assets/hdri/skywip4crop1920.webp) center / cover no-repeat,radial-gradient(circle at 18% 22%,rgba(255,255,255,.18),transparent 2px),radial-gradient(circle at 72% 30%,rgba(255,255,255,.14),transparent 1px),radial-gradient(circle at 78% 78%,rgba(255,255,255,.12),transparent 2px),linear-gradient(145deg,#030712,#06141a 55%,#07120d)}.portal-route--game .route-scene:after,.portal-route--story .route-scene:after,.portal-route--store .route-scene:after,.portal-route--community .route-scene:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,#0000,#00000057 62%,#000000a3),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 6px);pointer-events:none}