1

src/components/custom-world-home/CustomWorldCreationHub.tsx

@@ -21,7 +21,7 @@ type CustomWorldCreationHubProps = {
 
 function EmptyState({ title }: { title: string }) {
   return (
-    <div className="flex min-h-[16rem] flex-col items-center justify-center rounded-[1.8rem] border border-white/8 bg-white/5 px-6 py-8 text-center">
+    <div className="platform-remap-surface flex min-h-[16rem] flex-col items-center justify-center rounded-[1.8rem] border border-white/8 bg-white/5 px-6 py-8 text-center">
       <div className="text-lg font-semibold text-white">{title}</div>
     </div>
   );
@@ -56,7 +56,13 @@ export function CustomWorldCreationHub({
       className="flex h-full min-h-0 flex-col overflow-y-auto overscroll-y-contain pr-1 pb-[max(1rem,env(safe-area-inset-bottom))]"
       style={{ WebkitOverflowScrolling: 'touch' }}
     >
-      <div className="sticky top-0 z-20 -mx-3 bg-[linear-gradient(180deg,rgba(10,12,18,0.96),rgba(10,12,18,0.88),rgba(10,12,18,0))] px-3 pb-4 pt-1 sm:static sm:mx-0 sm:bg-none sm:px-0 sm:pb-5 sm:pt-0">
+      <div
+        className="platform-remap-surface sticky top-0 z-20 -mx-3 px-3 pb-4 pt-1 sm:static sm:mx-0 sm:bg-none sm:px-0 sm:pb-5 sm:pt-0"
+        style={{
+          background:
+            'linear-gradient(180deg, var(--platform-modal-fill), transparent)',
+        }}
+      >
         <div className="flex items-start justify-between gap-3">
           <div>
             <button